Add shiny.ui.Chat

examples/chat/RAG/recipes/app.py

@@ -0,0 +1,49 @@
+# from langchain_openai import ChatOpenAI
+from openai import AsyncOpenAI
+from utils import recipe_prompt, scrape_page_with_url
+
+from shiny.express import ui
+
+ui.page_opts(
+    title="Recipe Extractor Chat",
+    fillable=True,
+    fillable_mobile=True,
+)
+
+# Initialize the chat (with a system prompt and starting message)
+chat = ui.Chat(
+    id="chat",
+    messages=[
+        {"role": "system", "content": recipe_prompt},
+        {
+            "role": "assistant",
+            "content": "Hello! I'm a recipe extractor. Please enter a URL to a recipe page. For example, <https://www.thechunkychef.com/epic-dry-rubbed-baked-chicken-wings/>",
+        },
+    ],
+)
+
+chat.ui(placeholder="Enter a recipe URL...")
+
+llm = AsyncOpenAI()
+
+
+# A function to transform user input
+# Note that, if an exception occurs, the function will return a message to the user
+# "short-circuiting" the conversation and asking the user to try again.
+@chat.transform_user_input
+async def try_scrape_page(input: str) -> str | None:
+    try:
+        return await scrape_page_with_url(input)
+    except Exception:
+        await chat.append_message(
+            "I'm sorry, I couldn't extract content from that URL. Please try again. "
+        )
+        return None
+
+
+@chat.on_user_submit
+async def _():
+    response = await llm.chat.completions.create(
+        model="gpt-4o", messages=chat.get_messages(), temperature=0, stream=True
+    )
+    await chat.append_message_stream(response)

examples/chat/RAG/recipes/utils.py

@@ -0,0 +1,106 @@
+import aiohttp
+from bs4 import BeautifulSoup
+
+recipe_prompt = """
+You are RecipeExtractorGPT.
+Your goal is to extract recipe content from text and return a JSON representation of the useful information.
+
+The JSON should be structured like this:
+
+```
+{
+  "title": "Scrambled eggs",
+  "ingredients": {
+    "eggs": "2",
+    "butter": "1 tbsp",
+    "milk": "1 tbsp",
+    "salt": "1 pinch"
+  },
+  "directions": [
+    "Beat eggs, milk, and salt together in a bowl until thoroughly combined.",
+    "Heat butter in a large skillet over medium-high heat. Pour egg mixture into the hot skillet; cook and stir until eggs are set, 3 to 5 minutes."
+  ],
+  "servings": 2,
+  "prep_time": 5,
+  "cook_time": 5,
+  "total_time": 10,
+  "tags": [
+    "breakfast",
+    "eggs",
+    "scrambled"
+  ],
+  "source": "https://recipes.com/scrambled-eggs/",
+}
+```
+
+The user will provide text content from a web page.
+It is not very well structured, but the recipe is in there.
+Please look carefully for the useful information about the recipe.
+IMPORTANT: Return the result as JSON in a Markdown code block surrounded with three backticks!
+"""
+
+
+async def scrape_page_with_url(url: str, max_length: int = 14000) -> str:
+    """
+    Given a URL, scrapes the web page and return the contents. This also adds adds the
+    URL to the beginning of the text.
+
+    Parameters
+    ----------
+    url:
+      The URL to scrape
+    max_length:
+      Max length of recipe text to process. This is to prevent the model from running
+      out of tokens. 14000 bytes translates to approximately 3200 tokens.
+    """
+    contents = await scrape_page(url)
+    # Trim the string so that the prompt and reply will fit in the token limit.. It
+    # would be better to trim by tokens, but that requires using the tiktoken package,
+    # which can be very slow to load when running on containerized servers, because it
+    # needs to download the model from the internet each time the container starts.
+    contents = contents[:max_length]
+    return f"From: {url}\n\n" + contents
+
+
+async def scrape_page(url: str) -> str:
+    # Asynchronously send an HTTP request to the URL.
+    async with aiohttp.ClientSession() as session:
+        async with session.get(url) as response:
+            if response.status != 200:
+                raise aiohttp.ClientError(f"An error occurred: {response.status}")
+            html = await response.text()
+
+    # Parse the HTML content using BeautifulSoup
+    soup = BeautifulSoup(html, "html.parser")
+
+    # Remove script and style elements
+    for script in soup(["script", "style"]):
+        script.decompose()
+
+    # List of element IDs or class names to remove
+    elements_to_remove = [
+        "header",
+        "footer",
+        "sidebar",
+        "nav",
+        "menu",
+        "ad",
+        "advertisement",
+        "cookie-banner",
+        "popup",
+        "social",
+        "breadcrumb",
+        "pagination",
+        "comment",
+        "comments",
+    ]
+
+    # Remove unwanted elements by ID or class name
+    for element in elements_to_remove:
+        for e in soup.find_all(id=element) + soup.find_all(class_=element):
+            e.decompose()
+
+    # Extract text from the remaining HTML tags
+    text = " ".join(soup.stripped_strings)
+
+    return text

examples/chat/basic/anthropic/app.py

@@ -0,0 +1,28 @@
+from anthropic import AsyncAnthropic
+
+from shiny.express import ui
+
+ui.page_opts(
+    title="Hello Anthropic Claude Chat",
+    fillable=True,
+    fillable_mobile=True,
+)
+
+# Create and display empty chat
+chat = ui.Chat(id="chat")
+chat.ui()
+
+# Create the LLM client (assumes ANTHROPIC_API_KEY is set in the environment)
+client = AsyncAnthropic()
+
+
+# On user submit, generate and append a response
+@chat.on_user_submit
+async def _():
+    response = await client.messages.create(
+        model="claude-3-opus-20240229",
+        messages=chat.get_messages(),
+        stream=True,
+        max_tokens=1000,
+    )
+    await chat.append_message_stream(response)

examples/chat/basic/gemini/app.py

@@ -0,0 +1,37 @@
+from google.generativeai import GenerativeModel
+
+from shiny.express import ui
+
+ui.page_opts(
+    title="Hello Google Gemini Chat",
+    fillable=True,
+    fillable_mobile=True,
+)
+
+# Create and display empty chat
+chat = ui.Chat(id="chat")
+chat.ui()
+
+# create an LLM client
+client = GenerativeModel()
+
+
+# on user submit, generate and append a response
+@chat.on_user_submit
+async def _():
+    messages = chat.get_messages()
+
+    # Convert messages to the format expected by Google's API
+    contents = [
+        {
+            "role": "model" if x["role"] == "assistant" else x["role"],
+            "parts": x["content"],
+        }
+        for x in messages
+    ]
+
+    response = client.generate_content(
+        contents=contents,
+        stream=True,
+    )
+    await chat.append_message_stream(response)

examples/chat/basic/langchain/app.py

@@ -0,0 +1,36 @@
+from langchain_openai import ChatOpenAI
+
+from shiny.express import ui
+
+ui.page_opts(
+    title="Hello LangChain Chat Models",
+    fillable=True,
+    fillable_mobile=True,
+)
+
+# Create and display an empty chat UI
+chat = ui.Chat(id="chat")
+chat.ui()
+
+# Create the chat model
+llm = ChatOpenAI()
+
+# --------------------------------------------------------------------
+# To use a different model, replace the line above with any model that subclasses
+# langchain's BaseChatModel. For example, to use Anthropic:
+# from langchain_anthropic import ChatAnthropic
+# llm = ChatAnthropic(model="claude-3-sonnet-20240229")
+# For more information, see the langchain documentation.
+# https://python.langchain.com/v0.1/docs/modules/model_io/chat/quick_start/
+# --------------------------------------------------------------------
+
+
+# Define a callback to run when the user submits a message
+@chat.on_user_submit
+async def _():
+    # Get all the messages currently in the chat
+    messages = chat.get_messages()
+    # Create an async generator from the messages
+    stream = llm.astream(messages)
+    # Append the response stream into the chat
+    await chat.append_message_stream(stream)

examples/chat/basic/ollama/app.py

@@ -0,0 +1,24 @@
+import ollama
+
+from shiny.express import ui
+
+ui.page_opts(
+    title="Hello Ollama Chat",
+    fillable=True,
+    fillable_mobile=True,
+)
+
+# Create and display empty chat
+chat = ui.Chat(id="chat")
+chat.ui()
+
+
+# on user submit, generate and append a response
+@chat.on_user_submit
+async def _():
+    response = ollama.chat(
+        model="llama3",
+        messages=chat.get_messages(),
+        stream=True,
+    )
+    await chat.append_message_stream(response)

examples/chat/basic/openai/app.py

@@ -0,0 +1,36 @@
+# pyright: basic
+from openai import AsyncOpenAI
+
+from shiny.express import ui
+
+ui.page_opts(
+    title="Hello OpenAI Chat",
+    fillable=True,
+    fillable_mobile=True,
+)
+
+# Create a chat instance, with an initial message
+chat = ui.Chat(
+    id="chat",
+    messages=[
+        {"content": "Hello! How can I help you today?", "role": "assistant"},
+    ],
+    # assistant_response_transformer=lambda x: HTML(f"<h1>{x}</h1"),
+)
+
+# Display the chat
+chat.ui()
+
+# Create the LLM client (assumes OPENAI_API_KEY is set in the environment)
+client = AsyncOpenAI()
+
+
+# on user submit, generate and append a response
+@chat.on_user_submit
+async def _():
+    response = await client.chat.completions.create(
+        model="gpt-4o",
+        messages=chat.get_messages(),
+        stream=True,
+    )
+    await chat.append_message_stream(response)