Update app.py

app.py

@@ -7,63 +7,19 @@ MODEL_NAME = 'hf.co/unsloth/gemma-3-4b-it-qat-GGUF:Q4_K_M'
 # Default System Prompt
 DEFAULT_SYSTEM_PROMPT = "You are a helpful and respectful assistant. Always answer as helpfully as possible, while being safe. Your answers should not include any harmful, unethical, racist, sexist, toxic, dangerous, or illegal content. Please ensure that your responses are socially unbiased and positive in nature."
 
-# This is the core of the chatbot.
-def predict(message, history, system_prompt, stream_output):
-    """
-    Main prediction function for the chatbot.
-    Now correctly handles and returns the chat history for the Gradio Chatbot component.
-    """
-    
-    # --- FIX: Append the new user message to the history ---
-    # This prepares the history for display and for sending to the model
-    history.append([message, ""])
-
-    # --- Reformat the history for the Ollama API ---
-    messages = []
-    if system_prompt:
-        messages.append({'role': 'system', 'content': system_prompt})
-
-    # We iterate through the history, but exclude the last item which is the current turn.
-    for user_msg, assistant_msg in history[:-1]:
-        messages.append({'role': 'user', 'content': user_msg})
-        messages.append({'role': 'assistant', 'content': assistant_msg})
-    
-    # Add the current user message
-    messages.append({'role': 'user', 'content': message})
-
-    # --- FIX: Correctly handle streaming and non-streaming returns ---
-    if stream_output:
-        response_stream = ollama.chat(
-            model=MODEL_NAME,
-            messages=messages,
-            stream=True
-        )
-        
-        # Stream the response, updating the last message in the history
-        for chunk in response_stream:
-            if chunk['message']['content']:
-                # Append the new chunk to the assistant's message placeholder
-                history[-1][1] += chunk['message']['content']
-                # Yield the entire updated history to the Chatbot
-                yield history
-    else:
-        response = ollama.chat(
-            model=MODEL_NAME,
-            messages=messages,
-            stream=False
-        )
-        # Set the complete assistant response in the history
-        history[-1][1] = response['message']['content']
-        # Yield the entire updated history to the Chatbot
-        yield history
-
-
-# --- Gradio Interface (No changes needed here) ---
-with gr.Blocks(theme=gr.themes.Default(primary_hue="blue")) as demo:
+# --- Gradio Interface ---
+with gr.Blocks(theme=gr.themes.Default(primary_hue="blue", secondary_hue="neutral")) as demo:
     gr.Markdown(f"# LLM GGUF Chat with `{MODEL_NAME}`")
     gr.Markdown("Chat with the model, customize its behavior with a system prompt, and toggle streaming output.")
 
-    chatbot = gr.Chatbot(label="Conversation", height=500, avatar_images=("./user.png", "./bot.png"))
+    # --- FIX: Use the modern 'messages' type for the Chatbot component ---
+    # This resolves the UserWarning and simplifies history management.
+    chatbot = gr.Chatbot(
+        label="Conversation",
+        height=500,
+        type='messages',  # Use the recommended OpenAI-style message format
+        layout="bubble"
+    )
     
     with gr.Row():
         msg = gr.Textbox(
@@ -71,6 +27,8 @@ with gr.Blocks(theme=gr.themes.Default(primary_hue="blue")) as demo:
             placeholder="Type your message here and press Enter...",
             lines=1,
             scale=4,
+            show_label=False,
+            container=False
         )
 
     with gr.Accordion("Advanced Options", open=False):
@@ -94,27 +52,67 @@ with gr.Blocks(theme=gr.themes.Default(primary_hue="blue")) as demo:
             interactive=False 
         )
 
+    # Function to handle the logic for showing/hiding the custom system prompt textbox
     def toggle_system_prompt(use_custom):
         return gr.update(interactive=use_custom)
 
     use_custom_prompt_checkbox.change(
         fn=toggle_system_prompt,
         inputs=use_custom_prompt_checkbox,
-        outputs=system_prompt_textbox
+        outputs=system_prompt_textbox,
+        queue=False
     )
+    
+    # --- FIX: Use a two-step process with .then() to solve the ValueError ---
+    # This is the robust way to handle multi-part responses in Gradio.
+
+    # Step 1: Add the user's message to the chat history and clear the input box.
+    # This function runs instantly on submission.
+    def add_user_message(history, user_message):
+        # The history is now a list of dictionaries, no conversion needed.
+        history.append({"role": "user", "content": user_message})
+        # Return the updated history for the chatbot and an empty string for the textbox.
+        return history, gr.update(value="")
 
-    # Clear the textbox and then submit the prediction
-    def clear_and_predict(message, history, system_prompt, stream_output):
-        # This yields an empty string to clear the textbox first
-        yield gr.update(value="")
-        # Then, it yields the results from the predict function
-        for response in predict(message, history, system_prompt, stream_output):
-            yield gr.update(value=response)
+    # Step 2: Get the bot's response.
+    # This function runs after the user's message has been added.
+    def get_bot_response(history, system_prompt, stream_output):
+        # Prepend the system prompt to the conversation history for the API call.
+        messages = [{"role": "system", "content": system_prompt}] + history
+
+        # Add a placeholder for the assistant's response.
+        history.append({"role": "assistant", "content": ""})
+
+        if stream_output:
+            response_stream = ollama.chat(
+                model=MODEL_NAME,
+                messages=messages,
+                stream=True
+            )
+            # Stream the response, updating the last message in the history
+            for chunk in response_stream:
+                if chunk['message']['content']:
+                    history[-1]['content'] += chunk['message']['content']
+                    yield history
+        else:
+            response = ollama.chat(
+                model=MODEL_NAME,
+                messages=messages,
+                stream=False
+            )
+            history[-1]['content'] = response['message']['content']
+            yield history
 
+    # Wire up the event listeners using the .then() method.
     msg.submit(
-        clear_and_predict, 
-        [msg, chatbot, system_prompt_textbox, stream_checkbox], 
-        [msg, chatbot]
+        add_user_message,
+        inputs=[chatbot, msg],
+        outputs=[chatbot, msg],
+        queue=False  # Run instantly
+    ).then(
+        get_bot_response,
+        inputs=[chatbot, system_prompt_textbox, stream_checkbox],
+        outputs=[chatbot]
     )
 
 # Launch the Gradio interface