Update app.py

app.py

@@ -28,24 +28,22 @@ tokenizer, model = load_model()
 
 def remove_think_tags(text):
     """
-    Remove <think>...</think> tags from text
+    Remove <think>...</think> tags from text - METHOD 1
     """
     cleaned_text = re.sub(r'<think>.*?</think>', '', text, flags=re.DOTALL)
     return cleaned_text.strip()
 
 def generate_response(message, history, temperature=0.7, max_length=256):
     """
-    Generate a response using Qwen3-0.6B
+    Generate a response using Qwen3-0.6B with your specified method
     """
     if tokenizer is None or model is None:
         return "⚠️ Model is not loaded properly. Please check the console logs."
     
     try:
-        # Convert history to messages format - LIMIT HISTORY to last 6 exchanges
+        # Convert history to messages format
         messages = []
-        recent_history = history[-6:] if history else []  # Keep only last 6 exchanges
-        
-        for human_msg, assistant_msg in recent_history:
+        for human_msg, assistant_msg in history:
             messages.extend([
                 {"role": "user", "content": human_msg},
                 {"role": "assistant", "content": assistant_msg}
@@ -54,7 +52,7 @@ def generate_response(message, history, temperature=0.7, max_length=256):
         # Add current message
         messages.append({"role": "user", "content": message})
         
-        # Apply chat template
+        # Apply chat template exactly as in your example
         inputs = tokenizer.apply_chat_template(
             messages,
             add_generation_prompt=True,
@@ -93,22 +91,22 @@ def generate_response(message, history, temperature=0.7, max_length=256):
 
 def chat_interface(message, history, temperature, max_length):
     """
-    Main chat interface function - FIXED to prevent infinite loops
+    Main chat interface function
     """
     if not message or not message.strip():
         return "", history or []
     
-    # Generate response with limited history context
+    # Generate response
     bot_response = generate_response(message, history or [], temperature, max_length)
     
-    # Update history - this will naturally grow but we limit context in generation
+    # Update history
     new_history = (history or []) + [[message, bot_response]]
     
     return "", new_history
 
 def clear_chat():
     """
-    Clear the chat history - COMPLETELY RESET
+    Clear the chat history
     """
     return []
 
@@ -131,334 +129,151 @@ def retry_last_response(history, temperature, max_length):
     
     return new_history
 
-# Enhanced CSS for beautiful UI
+# Custom CSS for beautiful UI with settings on the side
 custom_css = """
 .gradio-container {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     min-height: 100vh;
-    padding: 0;
-    margin: 0;
+    padding: 20px;
 }
 
 .main-container {
-    max-width: 1400px;
+    max-width: 1200px;
     margin: 0 auto;
     background: white;
-    border-radius: 0;
-    box-shadow: 0 0 50px rgba(0,0,0,0.1);
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
+    border-radius: 20px;
+    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+    overflow: hidden;
 }
 
 .header {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
-    padding: 40px 30px 30px 30px;
+    padding: 30px;
     text-align: center;
-    position: relative;
-    overflow: hidden;
-}
-
-.header::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" opacity="0.1"><polygon points="0,0 1000,100 1000,0" fill="white"/></svg>');
-    background-size: cover;
 }
 
 .header h1 {
     margin: 0;
-    font-size: 3em;
-    font-weight: 800;
-    position: relative;
-    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
+    font-size: 2.5em;
+    font-weight: 700;
 }
 
 .header p {
-    margin: 15px 0 0 0;
-    opacity: 0.95;
-    font-size: 1.3em;
-    font-weight: 300;
-    position: relative;
-    max-width: 600px;
-    margin-left: auto;
-    margin-right: auto;
+    margin: 10px 0 0 0;
+    opacity: 0.9;
+    font-size: 1.2em;
 }
 
-.chat-main-area {
-    flex: 1;
+.content {
     display: flex;
-    flex-direction: column;
-    min-height: 70vh;
+    min-height: 600px;
 }
 
-.chat-container {
-    flex: 1;
+.chat-column {
+    flex: 3;
     display: flex;
     flex-direction: column;
-    background: white;
-    position: relative;
 }
 
-.chatbot-wrapper {
+.control-column {
+    flex: 1;
+    background: #f8f9fa;
+    padding: 25px;
+    border-left: 1px solid #e1e5e9;
+}
+
+.chatbot-container {
     flex: 1;
+    display: flex;
+    flex-direction: column;
     min-height: 500px;
-    max-height: 65vh;
-    border-bottom: 1px solid #eef2f7;
 }
 
 #chatbot {
+    flex: 1;
     min-height: 500px !important;
-    max-height: 65vh !important;
     border: none !important;
     background: white !important;
-    padding: 30px !important;
+    padding: 20px !important;
     margin: 0 !important;
-    border-radius: 0 !important;
-    overflow-y: auto !important;
 }
 
 #chatbot .message {
-    padding: 20px 25px !important;
-    margin: 15px 0 !important;
-    border-radius: 20px !important;
-    max-width: 85% !important;
-    line-height: 1.6 !important;
-    font-size: 16px !important;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
-    border: 1px solid rgba(0,0,0,0.05) !important;
+    padding: 15px 20px !important;
+    margin: 10px 0 !important;
+    border-radius: 15px !important;
+    max-width: 80% !important;
 }
 
 #chatbot .user-message {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    background: #667eea !important;
     color: white !important;
     margin-left: auto !important;
-    margin-right: 0 !important;
 }
 
 #chatbot .bot-message {
-    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
-    color: #2d3748 !important;
-    margin-left: 0 !important;
+    background: #f1f3f4 !important;
+    color: #333 !important;
     margin-right: auto !important;
-    border: 1px solid #e2e8f0 !important;
-}
-
-.input-section {
-    background: #fafbfc;
-    padding: 30px;
-    border-top: 1px solid #eef2f7;
 }
 
 .input-container {
-    max-width: 1000px;
-    margin: 0 auto;
-}
-
-.controls-section {
-    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
-    padding: 40px 30px;
-    border-top: 1px solid #e2e8f0;
-}
-
-.controls-container {
-    max-width: 1200px;
-    margin: 0 auto;
-}
-
-.controls-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 30px;
-    margin-bottom: 30px;
+    background: #f8f9fa;
+    padding: 20px;
+    border-top: 1px solid #e1e5e9;
 }
 
 .control-panel {
     background: white;
-    padding: 30px;
-    border-radius: 20px;
-    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
-    border: 1px solid #eef2f7;
+    padding: 20px;
+    border-radius: 15px;
+    margin-bottom: 20px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
 }
 
-.model-info-panel {
+.model-info {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
-    padding: 30px;
-    border-radius: 20px;
-    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
-    position: relative;
-    overflow: hidden;
-}
-
-.model-info-panel::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 100px;
-    height: 100px;
-    background: rgba(255,255,255,0.1);
-    border-radius: 50%;
-    transform: translate(30px, -30px);
-}
-
-.control-group {
-    margin-bottom: 25px;
-}
-
-.control-group:last-child {
-    margin-bottom: 0;
-}
-
-.control-label {
-    display: block;
-    font-weight: 600;
-    color: #2d3748;
-    margin-bottom: 12px;
-    font-size: 16px;
-}
-
-.control-info {
-    font-size: 14px;
-    color: #718096;
-    margin-top: 8px;
-    line-height: 1.5;
+    padding: 20px;
+    border-radius: 15px;
 }
 
 .gr-button {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    background: linear-gradient(45deg, #667eea, #764ba2) !important;
     border: none !important;
     color: white !important;
-    border-radius: 15px !important;
-    padding: 16px 32px !important;
+    border-radius: 10px !important;
+    padding: 12px 24px !important;
     font-weight: 600 !important;
-    font-size: 16px !important;
-    transition: all 0.3s ease !important;
-    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3) !important;
-}
-
-.gr-button:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4) !important;
+    margin: 5px !important;
 }
 
 .clear-btn {
-    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%) !important;
-    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3) !important;
+    background: linear-gradient(45deg, #ff6b6b, #ee5a24) !important;
 }
 
 .retry-btn {
-    background: linear-gradient(135deg, #00b894 0%, #00a085 100%) !important;
-    box-shadow: 0 4px 15px rgba(0, 184, 148, 0.3) !important;
+    background: linear-gradient(45deg, #00b894, #00a085) !important;
 }
 
 .textbox {
-    border-radius: 15px !important;
-    border: 2px solid #e2e8f0 !important;
-    padding: 20px !important;
+    border-radius: 12px !important;
+    border: 2px solid #e1e5e9 !important;
+    padding: 15px !important;
     font-size: 16px !important;
-    background: white !important;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
 }
 
 .textbox:focus {
     border-color: #667eea !important;
-    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1), 0 2px 10px rgba(0,0,0,0.05) !important;
-}
-
-.slider-container {
-    margin: 20px 0;
-}
-
-.model-features {
-    margin-top: 20px;
-}
-
-.feature-list {
-    list-style: none;
-    padding: 0;
-    margin: 15px 0 0 0;
-}
-
-.feature-list li {
-    padding: 8px 0;
-    position: relative;
-    padding-left: 25px;
-}
-
-.feature-list li::before {
-    content: '✓';
-    position: absolute;
-    left: 0;
-    color: #48bb78;
-    font-weight: bold;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
 }
 
 .examples-panel {
     background: white;
-    padding: 40px 30px;
-    border-top: 1px solid #eef2f7;
-}
-
-.examples-container {
-    max-width: 1200px;
-    margin: 0 auto;
-}
-
-.examples-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    gap: 15px;
-    margin-top: 20px;
-}
-
-@media (max-width: 768px) {
-    .controls-grid {
-        grid-template-columns: 1fr;
-    }
-    
-    .header h1 {
-        font-size: 2.2em;
-    }
-    
-    .header p {
-        font-size: 1.1em;
-    }
-}
-
-.status-indicator {
-    display: inline-block;
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
-    margin-right: 8px;
-}
-
-.status-online {
-    background: #48bb78;
-    box-shadow: 0 0 10px #48bb78;
-}
-
-.status-offline {
-    background: #ed8936;
-    box-shadow: 0 0 10px #ed8936;
-}
-
-.chat-history-info {
-    text-align: center;
-    color: #718096;
-    font-size: 14px;
-    padding: 10px;
-    background: #f7fafc;
-    border-radius: 10px;
-    margin: 10px 0;
+    padding: 20px;
+    border-top: 1px solid #e1e5e9;
 }
 """
 
@@ -468,16 +283,15 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
     with gr.Column(elem_classes="main-container"):
         # Header
         with gr.Column(elem_classes="header"):
-            gr.Markdown("# 🚀 Qwen3-0.6B Chatbot")
-            gr.Markdown("Experience intelligent conversations with Alibaba's advanced AI - Think tags automatically removed! ✨")
+            gr.Markdown("# 🤖 Qwen3-0.6B Chatbot")
+            gr.Markdown("Chat with Alibaba's advanced Qwen3-0.6B model - Think tags automatically removed!")
         
-        # Main Chat Area
-        with gr.Column(elem_classes="chat-main-area"):
-            with gr.Column(elem_classes="chat-container"):
-                # Chatbot
-                with gr.Column(elem_classes="chatbot-wrapper"):
+        with gr.Row(elem_classes="content"):
+            # Left Column - Chat (70%)
+            with gr.Column(elem_classes="chat-column"):
+                with gr.Column(elem_classes="chatbot-container"):
                     chatbot = gr.Chatbot(
-                        value=[],  # Start with empty chat
+                        value=[["Hello! How can I assist you today? 😊", ""]],
                         label="",
                         elem_id="chatbot",
                         show_copy_button=True,
@@ -487,139 +301,104 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
                         show_label=False
                     )
                 
-                # Input Section
-                with gr.Column(elem_classes="input-section"):
-                    with gr.Column(elem_classes="input-container"):
-                        with gr.Row():
-                            msg = gr.Textbox(
-                                label="",
-                                placeholder="💭 Type your message here... (Press Enter to send, Shift+Enter for new line)",
-                                lines=2,
-                                scale=4,
-                                container=False,
-                                show_label=False
-                            )
-                            with gr.Column(scale=1):
-                                submit_btn = gr.Button("Send Message 🚀", size="lg")
-                        
-                        with gr.Row():
-                            clear_btn = gr.Button("🗑️ Clear Chat", elem_classes="clear-btn")
-                            retry_btn = gr.Button("🔄 Retry Last", elem_classes="retry-btn")
-                            gr.HTML("""<div style="flex: 1; text-align: center; color: #666; font-size: 14px; padding: 12px;">
-                                ✨ Powered by Qwen3-0.6B • Context limited to 6 recent messages
-                            </div>""")
-        
-        # Controls Section (Below Chat)
-        with gr.Column(elem_classes="controls-section"):
-            with gr.Column(elem_classes="controls-container"):
-                with gr.Row(elem_classes="controls-grid"):
-                    # Settings Panel
-                    with gr.Column(elem_classes="control-panel"):
-                        gr.Markdown("### ⚙️ Generation Settings")
-                        
-                        with gr.Column(elem_classes="control-group"):
-                            gr.Markdown("**🎛️ Temperature**")
-                            temperature = gr.Slider(
-                                minimum=0.1,
-                                maximum=1.5,
-                                value=0.7,
-                                step=0.1,
-                                label="",
-                                show_label=False,
-                                info=""
-                            )
-                            gr.Markdown("<div class='control-info'>Lower values for more predictable responses, higher values for more creativity</div>")
-                        
-                        with gr.Column(elem_classes="control-group"):
-                            gr.Markdown("**📏 Max Response Length**")
-                            max_length = gr.Slider(
-                                minimum=50,
-                                maximum=1000,
-                                value=256,
-                                step=50,
-                                label="",
-                                show_label=False,
-                                info=""
-                            )
-                            gr.Markdown("<div class='control-info'>Number of tokens in the generated response (50-1000)</div>")
+                with gr.Column(elem_classes="input-container"):
+                    with gr.Row():
+                        msg = gr.Textbox(
+                            label="",
+                            placeholder="Type your message here...",
+                            lines=2,
+                            scale=4,
+                            container=False,
+                            show_label=False
+                        )
+                        submit_btn = gr.Button("Send 🚀", size="lg", scale=1)
                     
-                    # Model Info Panel
-                    with gr.Column(elem_classes="model-info-panel"):
-                        gr.Markdown("### ℹ️ Model Information")
-                        if tokenizer and model:
-                            gr.Markdown("""
-                            <span class="status-indicator status-online"></span> **Status:** Online & Ready
-                            
-                            **Model:** Qwen3-0.6B ✅  
-                            **Think Tags:** Auto-Removed ✅
-                            **Context:** Last 6 messages
-                            
-                            <div class="model-features">
-                            **Key Features:**
-                            <ul class="feature-list">
-                                <li>0.6 Billion Parameters</li>
-                                <li>128K Context Window</li>
-                                <li>Multilingual Support</li>
-                                <li>Advanced Reasoning</li>
-                                <li>Chat Optimized</li>
-                            </ul>
-                            </div>
-                            """)
-                        else:
-                            gr.Markdown("""
-                            <span class="status-indicator status-offline"></span> **Status:** Loading Issue
-                            
-                            Please check the console for error details.
-                            The interface will use fallback responses.
-                            """)
+                    with gr.Row():
+                        clear_btn = gr.Button("🗑️ Clear Chat", elem_classes="clear-btn")
+                        retry_btn = gr.Button("🔄 Retry Last", elem_classes="retry-btn")
+                        gr.HTML("""<div style="flex: 1; text-align: center; color: #666; font-size: 12px; padding: 10px;">
+                            Press Enter to send • Shift+Enter for new line
+                        </div>""")
+            
+            # Right Column - Controls (30%)
+            with gr.Column(elem_classes="control-column"):
+                with gr.Column(elem_classes="control-panel"):
+                    gr.Markdown("### ⚙️ Generation Settings")
+                    
+                    temperature = gr.Slider(
+                        minimum=0.1,
+                        maximum=1.5,
+                        value=0.7,
+                        step=0.1,
+                        label="Temperature",
+                        info="Lower = more predictable, Higher = more creative"
+                    )
+                    
+                    max_length = gr.Slider(
+                        minimum=50,
+                        maximum=1000,
+                        value=256,
+                        step=50,
+                        label="Max Response Length",
+                        info="Tokens in generated response"
+                    )
+                
+                with gr.Column(elem_classes="model-info"):
+                    gr.Markdown("### ℹ️ Model Info")
+                    if tokenizer and model:
+                        gr.Markdown("""
+                        **Model:** Qwen3-0.6B ✅
+                        **Status:** Ready to chat!
+                        **Think Tags:** Auto-removed ✅
+                        
+                        **Features:**
+                        • 0.6B parameters
+                        • 128K context
+                        • Multilingual
+                        """)
+                    else:
+                        gr.Markdown("""
+                        **Status:** ⚠️ Loading failed
+                        **Check console for errors**
+                        """)
         
         # Examples Section
         with gr.Column(elem_classes="examples-panel"):
-            with gr.Column(elem_classes="examples-container"):
-                gr.Markdown("### 💡 Quick Start Examples")
-                gr.Markdown("Click any example below to start chatting:")
-                
-                with gr.Column(elem_classes="examples-grid"):
-                    gr.Examples(
-                        examples=[
-                            "Explain quantum computing in simple terms",
-                            "Write a short poem about artificial intelligence",
-                            "What are the benefits of renewable energy?",
-                            "How do I learn programming effectively?",
-                            "Tell me an interesting fact about space exploration",
-                            "Help me plan a healthy weekly meal plan"
-                        ],
-                        inputs=msg,
-                        label="",
-                        examples_per_page=6
-                    )
+            gr.Markdown("### 💡 Try These Examples")
+            gr.Examples(
+                examples=[
+                    "Explain quantum computing in simple terms",
+                    "Write a short poem about artificial intelligence",
+                    "What are the benefits of renewable energy?",
+                    "How do I learn programming effectively?",
+                    "Tell me an interesting fact about space exploration",
+                    "Help me plan a healthy weekly meal plan"
+                ],
+                inputs=msg,
+                label="Click any example to start chatting!",
+                examples_per_page=6
+            )
 
     # Event handlers
-    def handle_submit(message, history, temp, max_len):
-        """Wrapper function to handle chat submission"""
-        if not message or not message.strip():
-            return "", history or []
-        return chat_interface(message, history, temp, max_len)
-    
     submit_event = msg.submit(
-        fn=handle_submit,
+        chat_interface,
         inputs=[msg, chatbot, temperature, max_length],
         outputs=[msg, chatbot]
     )
     
     submit_btn.click(
-        fn=handle_submit,
+        chat_interface,
         inputs=[msg, chatbot, temperature, max_length],
         outputs=[msg, chatbot]
     )
     
     clear_btn.click(
-        fn=clear_chat,
+        clear_chat,
         outputs=[chatbot]
     )
     
     retry_btn.click(
-        fn=retry_last_response,
+        retry_last_response,
         inputs=[chatbot, temperature, max_length],
         outputs=[chatbot]
     )