Update app.py

app.py

@@ -129,7 +129,7 @@ def retry_last_response(history, temperature, max_length):
     
     return new_history
 
-# Custom CSS for beautiful UI with settings on the side
+# Custom CSS with more space for chat and settings moved to right
 custom_css = """
 .gradio-container {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
@@ -139,7 +139,7 @@ custom_css = """
 }
 
 .main-container {
-    max-width: 1200px;
+    max-width: 1400px;
     margin: 0 auto;
     background: white;
     border-radius: 20px;
@@ -168,60 +168,72 @@ custom_css = """
 
 .content {
     display: flex;
-    min-height: 600px;
+    min-height: 700px;
+    gap: 0;
 }
 
+/* Chat column - 80% width */
 .chat-column {
-    flex: 3;
+    flex: 4;  /* Increased from 3 to 4 for more space */
     display: flex;
     flex-direction: column;
+    min-width: 0; /* Allow shrinking */
 }
 
+/* Control column - 20% width */
 .control-column {
-    flex: 1;
+    flex: 1;  /* Reduced to take less space */
     background: #f8f9fa;
-    padding: 25px;
+    padding: 20px;
     border-left: 1px solid #e1e5e9;
+    min-width: 280px; /* Minimum width for controls */
+    max-width: 320px; /* Maximum width for controls */
 }
 
 .chatbot-container {
     flex: 1;
     display: flex;
     flex-direction: column;
-    min-height: 500px;
+    min-height: 600px;
 }
 
 #chatbot {
     flex: 1;
-    min-height: 500px !important;
+    min-height: 550px !important;
+    max-height: 550px !important;
     border: none !important;
     background: white !important;
-    padding: 20px !important;
+    padding: 25px !important;
     margin: 0 !important;
+    overflow-y: auto !important;
 }
 
 #chatbot .message {
-    padding: 15px 20px !important;
-    margin: 10px 0 !important;
-    border-radius: 15px !important;
-    max-width: 80% !important;
+    padding: 18px 22px !important;
+    margin: 12px 0 !important;
+    border-radius: 18px !important;
+    max-width: 85% !important;
+    line-height: 1.5 !important;
+    font-size: 15px !important;
 }
 
 #chatbot .user-message {
-    background: #667eea !important;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
     color: white !important;
     margin-left: auto !important;
+    border: none !important;
 }
 
 #chatbot .bot-message {
-    background: #f1f3f4 !important;
-    color: #333 !important;
+    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
+    color: #2d3748 !important;
     margin-right: auto !important;
+    border: 1px solid #e2e8f0 !important;
 }
 
 .input-container {
     background: #f8f9fa;
-    padding: 20px;
+    padding: 25px;
     border-top: 1px solid #e1e5e9;
 }
 
@@ -231,6 +243,7 @@ custom_css = """
     border-radius: 15px;
     margin-bottom: 20px;
     box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    border: 1px solid #eef2f7;
 }
 
 .model-info {
@@ -238,43 +251,118 @@ custom_css = """
     color: white;
     padding: 20px;
     border-radius: 15px;
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
 }
 
 .gr-button {
-    background: linear-gradient(45deg, #667eea, #764ba2) !important;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
     border: none !important;
     color: white !important;
-    border-radius: 10px !important;
-    padding: 12px 24px !important;
+    border-radius: 12px !important;
+    padding: 14px 28px !important;
     font-weight: 600 !important;
     margin: 5px !important;
+    transition: all 0.3s ease !important;
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
+}
+
+.gr-button:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4) !important;
 }
 
 .clear-btn {
-    background: linear-gradient(45deg, #ff6b6b, #ee5a24) !important;
+    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%) !important;
+    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3) !important;
 }
 
 .retry-btn {
-    background: linear-gradient(45deg, #00b894, #00a085) !important;
+    background: linear-gradient(135deg, #00b894 0%, #00a085 100%) !important;
+    box-shadow: 0 4px 12px rgba(0, 184, 148, 0.3) !important;
 }
 
 .textbox {
-    border-radius: 12px !important;
-    border: 2px solid #e1e5e9 !important;
-    padding: 15px !important;
+    border-radius: 15px !important;
+    border: 2px solid #e2e8f0 !important;
+    padding: 18px !important;
     font-size: 16px !important;
+    background: white !important;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
+    min-height: 80px !important;
 }
 
 .textbox:focus {
     border-color: #667eea !important;
-    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1), 0 2px 8px rgba(0,0,0,0.05) !important;
 }
 
 .examples-panel {
     background: white;
-    padding: 20px;
+    padding: 25px;
     border-top: 1px solid #e1e5e9;
 }
+
+.control-section {
+    margin-bottom: 20px;
+}
+
+.control-section:last-child {
+    margin-bottom: 0;
+}
+
+.slider-container {
+    margin: 15px 0;
+}
+
+.feature-list {
+    list-style: none;
+    padding: 0;
+    margin: 10px 0 0 0;
+}
+
+.feature-list li {
+    padding: 6px 0;
+    position: relative;
+    padding-left: 20px;
+    font-size: 14px;
+}
+
+.feature-list li::before {
+    content: '✓';
+    position: absolute;
+    left: 0;
+    color: #48bb78;
+    font-weight: bold;
+}
+
+.status-indicator {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    margin-right: 8px;
+}
+
+.status-online {
+    background: #48bb78;
+    box-shadow: 0 0 8px #48bb78;
+}
+
+@media (max-width: 1024px) {
+    .content {
+        flex-direction: column;
+    }
+    
+    .control-column {
+        max-width: none;
+        border-left: none;
+        border-top: 1px solid #e1e5e9;
+    }
+    
+    .chat-column {
+        min-height: 500px;
+    }
+}
 """
 
 # Create the Gradio interface
@@ -287,7 +375,7 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
             gr.Markdown("Chat with Alibaba's advanced Qwen3-0.6B model - Think tags automatically removed!")
         
         with gr.Row(elem_classes="content"):
-            # Left Column - Chat (70%)
+            # Left Column - Chat (80% width)
             with gr.Column(elem_classes="chat-column"):
                 with gr.Column(elem_classes="chatbot-container"):
                     chatbot = gr.Chatbot(
@@ -296,7 +384,7 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
                         elem_id="chatbot",
                         show_copy_button=True,
                         avatar_images=("👤", "🤖"),
-                        height=500,
+                        height=550,
                         container=True,
                         show_label=False
                     )
@@ -305,61 +393,72 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
                     with gr.Row():
                         msg = gr.Textbox(
                             label="",
-                            placeholder="Type your message here...",
-                            lines=2,
+                            placeholder="💭 Type your message here... (Press Enter to send, Shift+Enter for new line)",
+                            lines=3,
                             scale=4,
                             container=False,
                             show_label=False
                         )
-                        submit_btn = gr.Button("Send 🚀", size="lg", scale=1)
+                        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")
+                        clear_btn = gr.Button("🗑️ Clear Chat", elem_classes="clear-btn", size="sm")
+                        retry_btn = gr.Button("🔄 Retry Last", elem_classes="retry-btn", size="sm")
                         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%)
+            # Right Column - Controls (20% width)
             with gr.Column(elem_classes="control-column"):
                 with gr.Column(elem_classes="control-panel"):
-                    gr.Markdown("### ⚙️ Generation Settings")
+                    gr.Markdown("### ⚙️ 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"
-                    )
+                    with gr.Column(elem_classes="control-section"):
+                        gr.Markdown("**🎛️ Temperature**")
+                        temperature = gr.Slider(
+                            minimum=0.1,
+                            maximum=1.5,
+                            value=0.7,
+                            step=0.1,
+                            label="",
+                            show_label=False
+                        )
+                        gr.Markdown("<div style='font-size: 12px; color: #666; margin-top: 8px;'>Lower = more predictable<br>Higher = more creative</div>")
                     
-                    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="control-section"):
+                        gr.Markdown("**📏 Max Length**")
+                        max_length = gr.Slider(
+                            minimum=50,
+                            maximum=1000,
+                            value=256,
+                            step=50,
+                            label="",
+                            show_label=False
+                        )
+                        gr.Markdown("<div style='font-size: 12px; color: #666; margin-top: 8px;'>Response length in tokens</div>")
                 
                 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!
+                        <span class="status-indicator status-online"></span> **Status:** Online
+                        
+                        **Model:** Qwen3-0.6B ✅  
                         **Think Tags:** Auto-removed ✅
                         
-                        **Features:**
-                        • 0.6B parameters
-                        • 128K context
-                        • Multilingual
+                        <ul class="feature-list">
+                            <li>0.6B parameters</li>
+                            <li>128K context</li>
+                            <li>Multilingual</li>
+                            <li>Advanced AI</li>
+                        </ul>
                         """)
                     else:
                         gr.Markdown("""
-                        **Status:** ⚠️ Loading failed
-                        **Check console for errors**
+                        <span class="status-indicator status-online" style="background: #ed8936;"></span> **Status:** Loading
+                        
+                        Check console for details
                         """)
         
         # Examples Section