don't seem to work mmh

app.py

@@ -3,10 +3,6 @@ from typing import List, Tuple
 import gradio as gr
 import os
 
-# ======================
-# Chatbot configuration
-# ======================
-
 class ChatConfig:
     MODEL = "mistralai/Mistral-7B-Instruct-v0.1"
     DEFAULT_SYSTEM_MSG = "You are an extremely smart and useful Chatbot."
@@ -15,8 +11,7 @@ class ChatConfig:
     DEFAULT_TOP_P = 0.95
 
 HF_TOKEN = os.getenv("HUGGING_FACE_HUB_TOKEN")
-# If needed:
-# HF_TOKEN = "hf_YOUR_TOKEN_HERE"
+# HF_TOKEN = "hf_Your_Token_Here"  # If needed
 
 client = InferenceClient(ChatConfig.MODEL, token=HF_TOKEN)
 
@@ -28,19 +23,12 @@ def generate_response(
     temperature: float = ChatConfig.DEFAULT_TEMP,
     top_p: float = ChatConfig.DEFAULT_TOP_P
 ):
-    """
-    Streams tokens from the model.
-    """
-    # Prepare messages with system prompt
     messages = [{"role": "system", "content": system_message}]
-
-    # Add conversation history
     for user_msg, bot_msg in history:
         if user_msg:
             messages.append({"role": "user", "content": user_msg})
         if bot_msg:
             messages.append({"role": "assistant", "content": bot_msg})
-    # Add newest user message
     messages.append({"role": "user", "content": message})
 
     response = ""
@@ -53,15 +41,10 @@ def generate_response(
     ):
         token = chunk.choices[0].delta.content or ""
         response += token
-        # yield partial response
         yield response
 
-# ======================
-# Build the Gradio UI
-# ======================
-
 def create_interface():
-    # This custom CSS uses blue & white shades for a “happy vibe”
+    # Lighter/happier blue color theme
     custom_css = """
     body {
         background: linear-gradient(to right, #a8c0ff, #fafdff);
@@ -76,16 +59,16 @@ def create_interface():
         padding: 10px;
     }
     .chatbot .user-message {
-        background-color: #b3e5fc; /* light blue */
-        color: #0d47a1;           /* darker blue text */
+        background-color: #b3e5fc;
+        color: #0d47a1;
     }
     .chatbot .bot-message {
-        background-color: #e3f2fd; /* very light blue */
+        background-color: #e3f2fd;
         color: #0d47a1;
     }
     .gr-button {
-        background-color: #2196f3; /* standard blue */
-        color: #ffffff;           /* white text */
+        background-color: #2196f3;
+        color: #ffffff;
         border: none;
         border-radius: 8px;
         padding: 8px 16px;
@@ -93,31 +76,27 @@ def create_interface():
         font-weight: bold;
     }
     .gr-button:hover {
-        background-color: #1976d2; /* darker blue */
+        background-color: #1976d2;
     }
     """
 
     with gr.Blocks(theme=gr.themes.Soft(), css=custom_css) as demo:
-        gr.Markdown(
-            "<h1 style='text-align: center;'>Welcome to Happy Gemma Chat!</h1>"
-        )
+        gr.Markdown("<h1 style='text-align: center;'>Welcome to Happy Gemma Chat!</h1>")
 
-        # Chatbot display
         chatbot = gr.Chatbot(
             label="Gemma Chat",
-            avatar_images=("./user.png", "./gemma.png"),  # optional images
+            avatar_images=("./user.png", "./gemma.png"),
             height=450,
             show_copy_button=True
         )
 
-        # Define a "State" for conversation: a list of (user_msg, bot_msg)
+        # State: holds entire conversation as list of (user_msg, bot_msg) pairs
         state = gr.State([])
 
-        # Additional/Advanced settings
         with gr.Accordion("Advanced Settings", open=False):
             system_msg = gr.Textbox(
                 value=ChatConfig.DEFAULT_SYSTEM_MSG,
-                label="System Prompt (You can change the text below)",
+                label="System Prompt",
                 lines=2
             )
             max_tokens = gr.Slider(
@@ -125,76 +104,64 @@ def create_interface():
                 maximum=8192,
                 value=ChatConfig.DEFAULT_MAX_TOKENS,
                 step=1,
-                label="Max Tokens",
-                info="Controls response length"
+                label="Max Tokens"
             )
             temperature = gr.Slider(
                 minimum=0.1,
                 maximum=1.0,
                 value=ChatConfig.DEFAULT_TEMP,
                 step=0.1,
-                label="Temperature",
-                info="Controls randomness"
+                label="Temperature"
             )
             top_p = gr.Slider(
                 minimum=0.1,
                 maximum=1.0,
                 value=ChatConfig.DEFAULT_TOP_P,
                 step=0.05,
-                label="Top-P",
-                info="Controls diversity"
+                label="Top-P"
             )
 
-        # The user input textbox
+        # User input box
         msg_box = gr.Textbox(
-            label="Type your message here and press Enter",
-            placeholder="Start chatting..."
+            label="Type your message here",
+            placeholder="Press enter to send"
         )
 
-        # -- SUBMIT EVENT 1: Collect user's message into state
         def user_submit(user_message, chat_history):
-            """
-            When user hits Enter, we clear the textbox
-            and add a new (user_message, None) to the history.
-            """
             if not user_message.strip():
                 return "", chat_history
-            # Add to chat history
+            # Add user turn
             chat_history = chat_history + [[user_message, None]]
+            # Clear text box
             return "", chat_history
 
-        # -- SUBMIT EVENT 2: Generate the bot's response
         def bot_reply(chat_history, system_text, max_toks, temp, top):
-            """
-            Replaces the last message's 'None' with the streamed bot output.
-            """
-            # The last item in chat_history is the user message we just appended
-            user_msg = chat_history[-1][0]
-
-            # Stream tokens from generate_response
+            user_msg = chat_history[-1][0]  # latest user message
+            # stream from generate_response
             stream_resp = generate_response(
                 message=user_msg,
-                history=chat_history[:-1],  # everything except last user turn
+                history=chat_history[:-1],
                 system_message=system_text,
                 max_tokens=max_toks,
                 temperature=temp,
                 top_p=top
             )
-            # As we get new tokens, update the last pair's second element
-            for partial_bot_msg in stream_resp:
-                chat_history[-1][1] = partial_bot_msg
-                yield chat_history
-
-        # Attach the two-step event to the input box
-        # Step 1: user_submit -> clearing user box + updating state
-        # Step 2: bot_reply   -> streaming final output to chatbot
+            # each partial chunk
+            for partial in stream_resp:
+                chat_history[-1][1] = partial
+                # **IMPORTANT**: must yield TWO items -> (updated_state, updated_chatbot)
+                yield chat_history, chat_history
+
+        # We have 2 steps chained:
+        # 1) user_submit -> (clear box, update state)
+        # 2) bot_reply   -> stream updates
         (
             msg_box.submit(
                 fn=user_submit,
                 inputs=[msg_box, state],
                 outputs=[msg_box, state],
-                # JS snippet to play the audio on submit:
-                js="new Audio('submit_sound.mp3').play();"
+                # Must be valid JS function:
+                js="(msg, st) => { new Audio('submit_sound.mp3').play(); return [msg, st]; }"
             )
             .then(
                 fn=bot_reply,
@@ -207,14 +174,7 @@ def create_interface():
 
 def main():
     app = create_interface()
-    app.launch(
-        server_name="0.0.0.0",
-        server_port=7860,
-        share=False,
-        show_api=False,
-        show_error=True,
-        debug=True
-    )
+    app.launch(server_name="0.0.0.0", server_port=7860, share=False)
 
 if __name__ == "__main__":
     main()