Support additional_outputs in gr.ChatInterface (#10071)

* artifacts

* add changeset

* chatinterface

* guide fixes

* example

* zerogpu

* Revert "zerogpu"

This reverts commit 4d7b588.

* changes

* submit fn

* chat interface

* changes

* add changeset

* notebook

* lint

* type

* regex

* add changeset

* fixes

* line

* fixes

* formatting

* change

* change

* add guard

* link to playground demo

* add changeset

---------

Co-authored-by: gradio-pr-bot <[email protected]>
Co-authored-by: aliabd <[email protected]>

.changeset/lazy-symbols-behave.md

@@ -0,0 +1,6 @@
+---
+"gradio": minor
+"website": minor
+---
+
+feat:Support `additional_outputs` in `gr.ChatInterface`

demo/chatinterface_artifacts/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: chatinterface_artifacts"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "python_code = \"\"\"\n", "def fib(n):\n", "    if n <= 0:\n", "        return 0\n", "    elif n == 1:\n", "        return 1\n", "    else:\n", "        return fib(n-1) + fib(n-2)\n", "\"\"\"\n", "\n", "js_code = \"\"\"\n", "function fib(n) {\n", "    if (n <= 0) return 0;\n", "    if (n === 1) return 1;\n", "    return fib(n - 1) + fib(n - 2);\n", "}\n", "\"\"\"\n", "\n", "def chat(message, history):\n", "    if \"python\" in message.lower():\n", "        return \"Type Python or JavaScript to see the code.\", gr.Code(language=\"python\", value=python_code)\n", "    elif \"javascript\" in message.lower():\n", "        return \"Type Python or JavaScript to see the code.\", gr.Code(language=\"javascript\", value=js_code)\n", "    else:\n", "        return \"Please ask about Python or JavaScript.\", None\n", "\n", "with gr.Blocks() as demo:\n", "    code = gr.Code(render=False)\n", "    with gr.Row():\n", "        with gr.Column():\n", "            gr.Markdown(\"<center><h1>Write Python or JavaScript</h1></center>\")\n", "            gr.ChatInterface(\n", "                chat,\n", "                examples=[\"Python\", \"JavaScript\"],\n", "                additional_outputs=[code],\n", "                type=\"messages\"\n", "            )\n", "        with gr.Column():\n", "            gr.Markdown(\"<center><h1>Code Artifacts</h1></center>\")\n", "            code.render()\n", "\n", "demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/chatinterface_artifacts/run.py

@@ -0,0 +1,44 @@
+import gradio as gr
+
+python_code = """
+def fib(n):
+    if n <= 0:
+        return 0
+    elif n == 1:
+        return 1
+    else:
+        return fib(n-1) + fib(n-2)
+"""
+
+js_code = """
+function fib(n) {
+    if (n <= 0) return 0;
+    if (n === 1) return 1;
+    return fib(n - 1) + fib(n - 2);
+}
+"""
+
+def chat(message, history):
+    if "python" in message.lower():
+        return "Type Python or JavaScript to see the code.", gr.Code(language="python", value=python_code)
+    elif "javascript" in message.lower():
+        return "Type Python or JavaScript to see the code.", gr.Code(language="javascript", value=js_code)
+    else:
+        return "Please ask about Python or JavaScript.", None
+
+with gr.Blocks() as demo:
+    code = gr.Code(render=False)
+    with gr.Row():
+        with gr.Column():
+            gr.Markdown("<center><h1>Write Python or JavaScript</h1></center>")
+            gr.ChatInterface(
+                chat,
+                examples=["Python", "JavaScript"],
+                additional_outputs=[code],
+                type="messages"
+            )
+        with gr.Column():
+            gr.Markdown("<center><h1>Code Artifacts</h1></center>")
+            code.render()
+
+demo.launch()

guides/05_chatbots/01_creating-a-chatbot-fast.md

@@ -1,6 +1,6 @@
 # How to Create a Chatbot with Gradio
 
-Tags: NLP, LLM, CHATBOT
+Tags: LLM, CHATBOT, NLP
 
 ## Introduction
 

guides/05_chatbots/02_chatinterface-examples.md

@@ -1,5 +1,7 @@
 # Using Popular LLM libraries and APIs
 
+Tags: LLM, CHATBOT, API
+
 In this Guide, we go through several examples of how to use `gr.ChatInterface` with popular LLM libraries and API providers.
 
 We will cover the following libraries and API providers:
@@ -37,7 +39,7 @@ Tip: For quick prototyping, the  <a href='https://github.com/gradio-app/openai-g
 
 ## Hugging Face `transformers`
 
-Of course, in many cases you want to run a chatbot locally. Here's the equivalent example using Together's RedPajama model, from Hugging Face (this requires you to have a GPU with CUDA).
+Of course, in many cases you want to run a chatbot locally. Here's the equivalent example using the SmolLM2-135M-Instruct model using the Hugging Face `transformers` library.
 
 $code_llm_hf_transformers
 
@@ -47,15 +49,15 @@ The SambaNova Cloud API provides access to full-precision open-source models, su
 
 $code_llm_sambanova
 
-Tip: For quick prototyping, the  <a href='https://github.com/gradio-app/sambanova-gradio'>sambanova-gradio library</a> makes it even easier to build chatbots on top of OpenAI models.
+Tip: For quick prototyping, the  <a href='https://github.com/gradio-app/sambanova-gradio'>sambanova-gradio library</a> makes it even easier to build chatbots on top of SambaNova models.
 
 ## Hyperbolic
 
 The Hyperbolic AI API provides access to many open-source models, such as the Llama family. Here's an example of how to build a Gradio app around the SambaNova API
 
 $code_llm_hyperbolic
 
-Tip: For quick prototyping, the  <a href='https://github.com/HyperbolicLabs/hyperbolic-gradio'>hyperbolic-gradio library</a> makes it even easier to build chatbots on top of OpenAI models.
+Tip: For quick prototyping, the  <a href='https://github.com/HyperbolicLabs/hyperbolic-gradio'>hyperbolic-gradio library</a> makes it even easier to build chatbots on top of Hyperbolic models.
 
 
 ## Anthropic's Claude 

js/_website/generate_jsons/src/docs/__init__.py

@@ -3,6 +3,9 @@
 import os
 import re
 import requests
+import base64
+import urllib.parse
+
 
 
 from gradio_client.documentation import document_cls, generate_documentation
@@ -97,11 +100,34 @@ def add_guides():
 add_guides()
 
 
+def generate_playground_link(demo_name):
+    playground_url = "https://gradio.app/playground?demo=Blank"
+    with open(os.path.join(DEMOS_DIR, demo_name, "run.py")) as f:
+        demo_code = f.read()
+        encoded_code = base64.b64encode(demo_code.encode('utf-8')).decode('utf-8')
+        encoded_code_url = urllib.parse.quote(encoded_code, safe='')
+        playground_url += "&code=" + encoded_code_url
+    if "requirements.txt" in os.listdir(os.path.join(DEMOS_DIR, demo_name)):
+        with open(os.path.join(DEMOS_DIR, demo_name, "requirements.txt")) as f:
+            requirements = f.read()
+            if requirements:
+                encoded_reqs = base64.b64encode(requirements.encode('utf-8')).decode('utf-8')
+                encoded_reqs_url = urllib.parse.quote(encoded_reqs, safe='')
+                playground_url += "&reqs=" + encoded_reqs_url
+    return f"<a href='{playground_url}' target='_blank'>demo/{demo_name}</a>"
+
+
 def escape_parameters(parameters):
     new_parameters = []
     for param in parameters:
         param = param.copy()  # Manipulating the list item directly causes issues, so copy it first
         param["doc"] = html.escape(param["doc"]) if param["doc"] else param["doc"]
+        if param["doc"] and "$demo/" in param["doc"]:
+            param["doc"] = re.sub(
+                    r"\$demo/(\w+)",
+                    lambda m: generate_playground_link(m.group(1)),
+                    param["doc"],
+                )
         new_parameters.append(param)
     assert len(new_parameters) == len(parameters)
     return new_parameters