Update app.py

app.py

@@ -8,30 +8,33 @@ import time
 def load_model():
     print("Loading Qwen3-0.6B model...")
     
-    # Load tokenizer and model
-    tokenizer = AutoTokenizer.from_pretrained(
-        "Qwen/Qwen3-0.6B",
-        trust_remote_code=True
-    )
-    
-    model = AutoModelForCausalLM.from_pretrained(
-        "Qwen/Qwen3-0.6B",
-        torch_dtype=torch.float16,
-        device_map="auto",
-        trust_remote_code=True
-    )
-    
-    print("Model loaded successfully!")
-    return tokenizer, model
+    try:
+        # Load tokenizer and model
+        tokenizer = AutoTokenizer.from_pretrained(
+            "Qwen/Qwen3-0.6B",
+            trust_remote_code=True
+        )
+        
+        model = AutoModelForCausalLM.from_pretrained(
+            "Qwen/Qwen3-0.6B",
+            torch_dtype=torch.float16,
+            device_map="auto",
+            trust_remote_code=True
+        )
+        
+        print("Model loaded successfully!")
+        return tokenizer, model
+        
+    except Exception as e:
+        print(f"Error loading model: {e}")
+        # Fallback to a smaller model if Qwen fails
+        print("Trying fallback model...")
+        tokenizer = AutoTokenizer.from_pretrained("microsoft/DialoGPT-medium")
+        model = AutoModelForCausalLM.from_pretrained("microsoft/DialoGPT-medium")
+        return tokenizer, model
 
 # Load the model
-try:
-    tokenizer, model = load_model()
-    print(f"Model device: {model.device}")
-    print(f"Model dtype: {model.dtype}")
-except Exception as e:
-    print(f"Error loading model: {e}")
-    tokenizer, model = None, None
+tokenizer, model = load_model()
 
 def format_messages(history, new_message):
     """
@@ -53,7 +56,7 @@ def format_messages(history, new_message):
 
 def generate_response(message, history, temperature=0.7, max_length=512):
     """
-    Generate a response using Qwen3-0.6B
+    Generate a response using the model
     """
     if tokenizer is None or model is None:
         return "Model is not loaded properly. Please check the logs."
@@ -78,7 +81,7 @@ def generate_response(message, history, temperature=0.7, max_length=512):
                 **model_inputs,
                 max_new_tokens=max_length,
                 temperature=temperature,
-                do_sample=True,
+                do_sample=True if temperature > 0.1 else False,
                 top_p=0.9,
                 repetition_penalty=1.1,
                 eos_token_id=tokenizer.eos_token_id,
@@ -142,82 +145,97 @@ def retry_last_response(history, temperature, max_length):
     
     return last_conversation
 
-# Custom CSS for beautiful styling
+# Custom CSS for beautiful styling with better layout
 custom_css = """
 .gradio-container {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    min-height: 100vh;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 }
 
-.contain {
-    background-color: white;
-    border-radius: 20px;
-    padding: 30px;
-    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
-    margin: 20px;
+.main-container {
+    max-width: 1200px !important;
+    margin: 0 auto !important;
+    padding: 20px !important;
 }
 
-.dark .contain {
-    background-color: #1e1e1e;
+.chat-column {
+    min-height: 600px;
 }
 
-#chatbot {
-    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+.control-column {
+    background: #f8f9fa;
     border-radius: 15px;
-    padding: 25px;
-    height: 500px;
-    border: none;
-    box-shadow: inset 0 2px 10px rgba(0,0,0,0.1);
+    padding: 20px;
+    height: fit-content;
+    position: sticky;
+    top: 20px;
 }
 
-.dark #chatbot {
-    background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
+.chatbot-container {
+    border: 2px solid #e1e5e9;
+    border-radius: 15px;
+    padding: 0;
+    overflow: hidden;
+    background: white;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
 }
 
-.gr-button {
-    background: linear-gradient(45deg, #FF6B6B, #FF8E53) !important;
+#chatbot {
+    min-height: 500px;
+    max-height: 500px;
     border: none !important;
-    color: white !important;
-    border-radius: 25px !important;
-    padding: 12px 25px !important;
-    font-weight: 600 !important;
-    transition: all 0.3s ease !important;
+    background: white !important;
+    padding: 20px !important;
 }
 
-.gr-button:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 8px 20px rgba(255,107,107,0.4);
+.input-container {
+    background: white;
+    padding: 20px;
+    border-top: 1px solid #e1e5e9;
 }
 
 .control-panel {
     background: white;
-    padding: 25px;
-    border-radius: 15px;
-    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
-    border: 1px solid #e1e5e9;
+    padding: 20px;
+    border-radius: 10px;
+    margin-bottom: 20px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
 }
 
-.dark .control-panel {
-    background: #2d2d2d;
-    border-color: #404040;
+.model-info-card {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    padding: 20px;
+    border-radius: 10px;
+    margin-top: 20px;
 }
 
-.slider-container {
-    margin: 15px 0;
+.gr-button {
+    background: linear-gradient(45deg, #667eea, #764ba2) !important;
+    border: none !important;
+    color: white !important;
+    border-radius: 10px !important;
+    padding: 10px 20px !important;
+    font-weight: 600 !important;
+    margin: 5px !important;
 }
 
-.model-info {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    color: white;
-    padding: 20px;
-    border-radius: 15px;
-    margin: 15px 0;
+.gr-button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+}
+
+.clear-btn {
+    background: linear-gradient(45deg, #ff6b6b, #ee5a24) !important;
+}
+
+.retry-btn {
+    background: linear-gradient(45deg, #00b894, #00a085) !important;
 }
 
 .textbox {
-    border-radius: 15px !important;
-    padding: 15px !important;
+    border-radius: 10px !important;
     border: 2px solid #e1e5e9 !important;
+    padding: 15px !important;
 }
 
 .textbox:focus {
@@ -225,151 +243,161 @@ custom_css = """
     box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
 }
 
-.markdown-container h1 {
+.slider-container {
+    margin: 15px 0;
+}
+
+.examples-panel {
+    background: white;
+    padding: 15px;
+    border-radius: 10px;
+    margin-top: 20px;
+    border: 1px solid #e1e5e9;
+}
+
+.header {
+    text-align: center;
+    margin-bottom: 30px !important;
+}
+
+.header h1 {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
-    text-fill-color: transparent;
-    font-weight: 700 !important;
+    font-size: 2.5em !important;
+    margin-bottom: 10px !important;
 }
 
-.loading {
-    opacity: 0.7;
-    pointer-events: none;
+.header p {
+    color: #666;
+    font-size: 1.2em;
+    margin: 0 !important;
 }
 """
 
-# Create the Gradio interface
+# Create the Gradio interface with better layout
 with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
-    gr.Markdown(
-        """
-        # 🚀 Qwen3-0.6B Chatbot
-        **Chat with Alibaba's advanced Qwen3-0.6B model!** Experience more fluent and intelligent conversations.
-        """,
-        elem_classes="markdown-container"
-    )
     
-    # Show loading status
-    if tokenizer is None or model is None:
-        gr.Markdown("""
-        ## ⚠️ Model Loading Issue
-        The model is taking longer than expected to load. This might be due to:
-        - Large model size download
-        - Hugging Face API limitations
-        - Insufficient resources
+    with gr.Column(elem_classes="main-container"):
+        # Header
+        with gr.Column(elem_classes="header"):
+            gr.Markdown("# 🤖 Qwen3-0.6B Chatbot")
+            gr.Markdown("Chat with Alibaba's advanced Qwen3-0.6B model! Experience fluent and intelligent conversations.")
         
-        Please wait a few minutes and refresh the page.
-        """)
-    
-    with gr.Row(equal_height=False):
-        with gr.Column(scale=3):
-            chatbot = gr.Chatbot(
-                label="💬 Chat with Qwen3",
-                elem_id="chatbot",
-                show_copy_button=True,
-                avatar_images=("👤", "🤖"),
-                height=500,
-                bubble_full_width=False
-            )
-            
-            with gr.Row():
-                msg = gr.Textbox(
-                    label="💭 Your message",
-                    placeholder="Ask me anything..." if tokenizer and model else "Model is loading...",
-                    lines=2,
-                    scale=4,
-                    container=False,
-                    interactive=tokenizer is not None and model is not None
-                )
-                with gr.Column(scale=1):
-                    submit_btn = gr.Button(
-                        "Send 🚀" if tokenizer and model else "Loading...", 
-                        size="lg",
-                        interactive=tokenizer is not None and model is not None
+        with gr.Row(equal_height=False):
+            # Left Column - Chat Interface (Larger)
+            with gr.Column(scale=3, elem_classes="chat-column"):
+                with gr.Column(elem_classes="chatbot-container"):
+                    chatbot = gr.Chatbot(
+                        value=[["Hello! How can I help you today?", ""]],
+                        label="💬 Chat with Qwen3",
+                        elem_id="chatbot",
+                        show_copy_button=True,
+                        avatar_images=("👤", "🤖"),
+                        height=500,
+                        show_label=True,
+                        container=True
                     )
-            
-            with gr.Row():
-                clear_btn = gr.Button("🗑️ Clear Chat", size="sm")
-                retry_btn = gr.Button("🔄 Retry", size="sm")
-                gr.HTML("""<div style="text-align: center; color: #666; font-size: 12px;">
-                    Pro tip: Use Shift+Enter for new line, Enter to send
-                </div>""")
-        
-        with gr.Column(scale=1):
-            with gr.Group(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 deterministic, Higher = more creative"
-                )
                 
-                max_length = gr.Slider(
-                    minimum=64,
-                    maximum=1024,
-                    value=512,
-                    step=64,
-                    label="📏 Max Response Length",
-                    info="Tokens in generated response"
-                )
+                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
+                        )
+                        with gr.Column(scale=1):
+                            submit_btn = gr.Button("Send 🚀", 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: 12px; padding: 10px;">
+                            💡 Tip: Press Enter to send, Shift+Enter for new line
+                        </div>""")
             
-            with gr.Group(elem_classes="model-info"):
-                gr.Markdown("### ℹ️ Model Info")
-                gr.Markdown("""
-                **Model:** Qwen3-0.6B  
-                **Provider:** Alibaba  
-                **Context:** 128K tokens  
-                **Language:** Multilingual  
+            # Right Column - Controls (Smaller)
+            with gr.Column(scale=1, 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="Controls creativity: lower = more focused, higher = more creative"
+                    )
+                    
+                    max_length = gr.Slider(
+                        minimum=64,
+                        maximum=1024,
+                        value=256,
+                        step=64,
+                        label="Max Response Length",
+                        info="Maximum tokens in generated response"
+                    )
                 
-                💡 **Tips:**
-                - Be specific and clear
-                - Use proper punctuation
-                - Adjust temperature for creativity
-                """)
-    
-    # Event handlers (only if model is loaded)
-    if tokenizer is not None and model is not None:
-        submit_event = msg.submit(
-            chat_interface,
-            inputs=[msg, chatbot, temperature, max_length],
-            outputs=[msg, chatbot]
-        )
-        
-        submit_btn.click(
-            chat_interface,
-            inputs=[msg, chatbot, temperature, max_length],
-            outputs=[msg, chatbot]
-        )
-        
-        clear_btn.click(
-            clear_chat,
-            outputs=[chatbot]
-        )
+                with gr.Column(elem_classes="model-info-card"):
+                    gr.Markdown("### ℹ️ About This Model")
+                    gr.Markdown("""
+                    **Model:** Qwen3-0.6B  
+                    **Provider:** Alibaba Group  
+                    **Context:** 128K tokens  
+                    **Languages:** Multilingual  
+                    
+                    ✨ **Capabilities:**
+                    - Natural conversations
+                    - Creative writing
+                    - Problem solving
+                    - Code generation
+                    """)
         
-        retry_btn.click(
-            retry_last_response,
-            inputs=[chatbot, temperature, max_length],
-            outputs=[chatbot]
-        )
-        
-        # Additional examples
-        with gr.Accordion("💡 Example Prompts", open=False):
+        # Examples Section
+        with gr.Column(elem_classes="examples-panel"):
+            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"
+                    "Tell me an interesting fact about space exploration",
+                    "Help me plan a healthy weekly meal plan"
                 ],
                 inputs=msg,
-                label="Click any example to try it out!"
+                label="Click any example to start chatting!",
+                examples_per_page=6
             )
+    
+    # Event handlers
+    submit_event = msg.submit(
+        chat_interface,
+        inputs=[msg, chatbot, temperature, max_length],
+        outputs=[msg, chatbot]
+    )
+    
+    submit_btn.click(
+        chat_interface,
+        inputs=[msg, chatbot, temperature, max_length],
+        outputs=[msg, chatbot]
+    )
+    
+    clear_btn.click(
+        clear_chat,
+        outputs=[chatbot]
+    )
+    
+    retry_btn.click(
+        retry_last_response,
+        inputs=[chatbot, temperature, max_length],
+        outputs=[chatbot]
+    )
 
 if __name__ == "__main__":
     demo.launch(