Init

app.py

@@ -1,50 +1,118 @@
+import time
 import gradio as gr
 from huggingface_hub import InferenceClient
 
-client = InferenceClient("HuggingFaceH4/zephyr-7b-beta")
-
-def respond(
-    message,
-    history: list[tuple[str, str]],
-    system_message,
-    max_tokens,
-    temperature,
-    top_p,
-):
-    messages = [{"role": "system", "content": system_message}]
+client = InferenceClient(
+    model = "HuggingFaceH4/zephyr-7b-beta",
+    # model = "mistralai/Mistral-7B-Instruct-v0.3",
+)
+
+
+def respond(message, history: list[tuple[str, str]]):
+
+    output = ""
+
+    messages = []
     for val in history:
         if val[0]:
             messages.append({"role": "user", "content": val[0]})
         if val[1]:
             messages.append({"role": "assistant", "content": val[1]})
     messages.append({"role": "user", "content": message})
-    response = ""
-    for message in client.chat_completion(
-        messages,
-        max_tokens=max_tokens,
+
+    for word in client.chat_completion(
+        messages=messages,
+        max_tokens=512,
         stream=True,
-        temperature=temperature,
-        top_p=top_p,
     ):
-        token = message.choices[0].delta.content
-        response += token
-        yield response
-
-demo = gr.ChatInterface(
-    respond,
-    additional_inputs=[
-        gr.Textbox(value="You are a friendly Chatbot.", label="System message"),
-        gr.Slider(minimum=1, maximum=2048, value=512, step=1, label="Max new tokens"),
-        gr.Slider(minimum=0.1, maximum=4.0, value=0.7, step=0.1, label="Temperature"),
-        gr.Slider(
-            minimum=0.1,
-            maximum=1.0,
-            value=0.95,
-            step=0.05,
-            label="Top-p (nucleus sampling)",
-        ),
-    ],
-)
+        output += word.choices[0].delta.content
+
+    for i in range(len(output)):
+        time.sleep(0.002)
+        yield output[: i+1]
 
-if __name__ == "__main__":
-    demo.launch()
+
+gr.ChatInterface(
+    fn = respond,
+    theme = gr.themes.Base(
+        primary_hue = "stone",
+    ),
+    textbox = gr.Textbox(
+        elem_id="custom-gr-textbox",
+        placeholder = "Type your message here...",
+        container = False,
+        scale = 10,
+    ),
+    chatbot = gr.Chatbot(
+        elem_id="custom-gr-chatbot",
+        height = '92%',
+        bubble_full_width = False,
+        show_copy_button = True,
+        likeable = True,
+        show_label = False,
+        show_share_button = False,
+        container = False,
+        render_markdown = True,
+        line_breaks = True,
+        avatar_images = (
+            'assets/user.png',
+            'assets/bot.png',
+        ),
+        layout = 'bubble',
+        # value = [
+        #     [
+        #         None, 
+        #         "Hello",
+        #     ],
+        # ],
+    ),
+    css = '\
+        footer, [data-testid="block-label"] { \
+            display: none !important; visibility: hidden !important; opacity: 0.0 !important; \
+        } \
+        .gradio-container { \
+            max-width: initial !important; padding: 16px !important; \
+        } \
+        .contain { \
+            height: 1vh !important; \
+        } \
+        .contain > div { \
+            height: 100% !important; \
+        } \
+        #custom-gr-chatbot + .stretch { \
+            display: none !important; \
+        } \
+        #custom-gr-textbox { \
+            background: hsl(0 0% 98%) !important; \
+        } \
+        #custom-gr-textbox textarea { \
+            font-size: 16px !important; \
+            margin: 8px 0px 14px 10px !important; \
+            background: hsl(0 0% 98%) !important; \
+        } \
+        #custom-gr-textbox + button.lg.primary, #custom-gr-textbox + button.lg.stop { \
+            min-width: min(100px, 100%) !important; \
+        } \
+        .avatar-container { \
+            height: 24px !important; \
+            width: 24px !important; \
+        } \
+        .message { \
+            padding: 10px 16px !important; \
+        } \
+        .message-buttons-bot, .message-buttons-user { \
+            bottom: -18px !important; \
+            transform: scale(0.8) !important; \
+        } \
+        .user-row .avatar-container { \
+            display: none !important; visibility: hidden !important; opacity: 0.0 !important; \
+        } \
+    ',
+    retry_btn = None,
+    undo_btn = None,
+    clear_btn = None,
+    submit_btn = "Send",
+    stop_btn = "Stop",
+    autofocus = True,
+    fill_height = True,
+).launch(debug = False, share = False)