Upload with huggingface_hub

README.md

@@ -1,12 +1,11 @@
+
 ---
-title: Chatbot Multimodal
-emoji: 👀
-colorFrom: yellow
-colorTo: yellow
+title: chatbot_multimodal 
+emoji: 🔥
+colorFrom: indigo
+colorTo: indigo
 sdk: gradio
 sdk_version: 3.12.0
-app_file: app.py
+app_file: run.py
 pinned: false
 ---
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: chatbot_multimodal"]}, {"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", "def add_text(state, text):\n", "    state = state + [(text, text + \"?\")]\n", "    return state, state\n", "\n", "def add_image(state, image):\n", "    state = state + [(f\"![](/file={image.name})\", \"Cool pic!\")]\n", "    return state, state\n", "\n", "\n", "with gr.Blocks(css=\"#chatbot .overflow-y-auto{height:500px}\") as demo:\n", "    chatbot = gr.Chatbot(elem_id=\"chatbot\")\n", "    state = gr.State([])\n", "    \n", "    with gr.Row():\n", "        with gr.Column(scale=0.85):\n", "            txt = gr.Textbox(show_label=False, placeholder=\"Enter text and press enter, or upload an image\").style(container=False)\n", "        with gr.Column(scale=0.15, min_width=0):\n", "            btn = gr.UploadButton(\"\ud83d\uddbc\ufe0f\", file_types=[\"image\"])\n", "            \n", "    txt.submit(add_text, [state, txt], [state, chatbot])\n", "    txt.submit(lambda :\"\", None, txt)\n", "    btn.upload(add_image, [state, btn], [state, chatbot])\n", "            \n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

run.py

@@ -0,0 +1,27 @@
+import gradio as gr
+
+def add_text(state, text):
+    state = state + [(text, text + "?")]
+    return state, state
+
+def add_image(state, image):
+    state = state + [(f"![](/file={image.name})", "Cool pic!")]
+    return state, state
+
+
+with gr.Blocks(css="#chatbot .overflow-y-auto{height:500px}") as demo:
+    chatbot = gr.Chatbot(elem_id="chatbot")
+    state = gr.State([])
+    
+    with gr.Row():
+        with gr.Column(scale=0.85):
+            txt = gr.Textbox(show_label=False, placeholder="Enter text and press enter, or upload an image").style(container=False)
+        with gr.Column(scale=0.15, min_width=0):
+            btn = gr.UploadButton("🖼️", file_types=["image"])
+            
+    txt.submit(add_text, [state, txt], [state, chatbot])
+    txt.submit(lambda :"", None, txt)
+    btn.upload(add_image, [state, btn], [state, chatbot])
+            
+if __name__ == "__main__":
+    demo.launch()