Update app.py

app.py

@@ -33,10 +33,10 @@ def get_status():
         r = requests.get(f"{OLLAMA_URL}/api/tags", timeout=2)
         if r.status_code == 200:
             models = r.json().get("models", [])
-            return f"✅ Online | {len(models)} models loaded"
+            return f"🟢 Online • {len(models)} models"
     except:
         pass
-    return "⏳ Starting..."
+    return "🟡 Starting..."
 
 def transcribe_audio(audio):
     if audio is None:
@@ -193,71 +193,282 @@ def review_code(code, model_name, max_tokens):
         return f"❌ Error: {e}"
 
 css = """
-.container { max-width: 1200px; margin: auto; }
+/* Global */
+.gradio-container {
+    max-width: 1400px !important;
+    margin: auto !important;
+    font-family: 'Inter', system-ui, sans-serif !important;
+}
+
+/* Header */
+.header-container {
+    text-align: center;
+    padding: 20px 0;
+    margin-bottom: 10px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 16px;
+    color: white;
+}
+.header-container h1 {
+    margin: 0;
+    font-size: 2.5rem;
+    font-weight: 700;
+}
+.header-container p {
+    margin: 8px 0 0 0;
+    opacity: 0.9;
+    font-size: 1.1rem;
+}
+
+/* Status badge */
+.status-badge {
+    display: inline-block;
+    padding: 6px 16px;
+    border-radius: 20px;
+    font-size: 0.9rem;
+    font-weight: 500;
+    background: rgba(255,255,255,0.15);
+    backdrop-filter: blur(10px);
+}
+
+/* Settings bar */
+.settings-row {
+    background: #f8f9fc;
+    padding: 16px 20px;
+    border-radius: 12px;
+    margin-bottom: 16px;
+    border: 1px solid #e5e7eb;
+}
+
+/* Tabs */
+.tabs {
+    border-radius: 12px !important;
+    overflow: hidden;
+}
+.tab-nav {
+    background: #f8f9fc !important;
+    padding: 8px !important;
+    gap: 8px !important;
+}
+.tab-nav button {
+    border-radius: 8px !important;
+    font-weight: 500 !important;
+    padding: 12px 20px !important;
+    transition: all 0.2s ease !important;
+}
+.tab-nav button.selected {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    color: white !important;
+}
+
+/* Chat */
+.chatbot {
+    border-radius: 12px !important;
+    border: 1px solid #e5e7eb !important;
+}
+.chatbot .message {
+    border-radius: 12px !important;
+    padding: 12px 16px !important;
+}
+
+/* Buttons */
+.primary-btn {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    border: none !important;
+    border-radius: 10px !important;
+    font-weight: 600 !important;
+    padding: 12px 24px !important;
+    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
+}
+.primary-btn:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4) !important;
+}
+
+/* Code blocks */
+.code-block {
+    border-radius: 12px !important;
+    border: 1px solid #e5e7eb !important;
+    overflow: hidden;
+}
+
+/* Cards */
+.card {
+    background: white;
+    border-radius: 16px;
+    padding: 20px;
+    border: 1px solid #e5e7eb;
+    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
+}
+
+/* Inputs */
+.input-box textarea, .input-box input {
+    border-radius: 10px !important;
+    border: 1px solid #e5e7eb !important;
+    padding: 12px 16px !important;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
+}
+.input-box textarea:focus, .input-box input:focus {
+    border-color: #667eea !important;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15) !important;
+}
+
+/* Hide footer */
 footer { display: none !important; }
+
+/* Feature cards */
+.feature-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 12px;
+    margin-top: 16px;
+}
+.feature-card {
+    background: linear-gradient(135deg, #f8f9fc 0%, #f1f3f8 100%);
+    padding: 16px;
+    border-radius: 12px;
+    text-align: center;
+    border: 1px solid #e5e7eb;
+}
+.feature-card .icon {
+    font-size: 1.5rem;
+    margin-bottom: 8px;
+}
+.feature-card .title {
+    font-weight: 600;
+    font-size: 0.95rem;
+}
 """
 
 with gr.Blocks(title="Axon v6", css=css, theme=gr.themes.Soft(primary_hue="violet", secondary_hue="blue")) as demo:
     
-    gr.Markdown("# 🔥 Axon v6\n### AI Coding Assistant • 10 Models • 100% Local • No Rate Limits")
-    
-    status = gr.Markdown(value=get_status, every=5)
+    # Header
+    gr.HTML("""
+    <div class="header-container">
+        <h1>🔥 Axon v6</h1>
+        <p>AI Coding Assistant • 10 Models • 100% Local • No Rate Limits</p>
+    </div>
+    """)
     
+    # Status
     with gr.Row():
-        model_dropdown = gr.Dropdown(choices=list(MODELS.keys()), value="Qwen2.5 Coder 3B", label="🤖 Model", scale=3)
+        status = gr.Markdown(value=get_status, every=5)
+    
+    # Settings
+    with gr.Row(elem_classes="settings-row"):
+        model_dropdown = gr.Dropdown(
+            choices=list(MODELS.keys()), 
+            value="Qwen2.5 Coder 3B", 
+            label="🤖 Model",
+            scale=3,
+            container=False
+        )
         temperature = gr.Slider(0, 1, value=0.7, step=0.1, label="🌡️ Creativity", scale=2)
         max_tokens = gr.Slider(256, 8192, value=2048, step=256, label="📏 Max Length", scale=2)
 
-    with gr.Tabs():
+    with gr.Tabs(elem_classes="tabs"):
         
+        # Chat Tab
         with gr.TabItem("💬 Chat"):
-            chatbot = gr.Chatbot(height=450, show_copy_button=True)
+            chatbot = gr.Chatbot(
+                height=480, 
+                show_copy_button=True,
+                bubble_full_width=False,
+                avatar_images=(None, "https://api.dicebear.com/7.x/bottts/svg?seed=axon")
+            )
+            
             with gr.Row():
-                msg = gr.Textbox(placeholder="Ask a coding question...", show_label=False, scale=8, lines=2)
-                send = gr.Button("Send", variant="primary", scale=1)
+                msg = gr.Textbox(
+                    placeholder="Ask anything about coding... (Enter to send)", 
+                    show_label=False, 
+                    scale=8,
+                    lines=1,
+                    container=False,
+                    elem_classes="input-box"
+                )
+                send = gr.Button("Send ➤", variant="primary", scale=1, elem_classes="primary-btn")
+            
             with gr.Row():
-                audio_input = gr.Audio(sources=["microphone"], type="filepath", label="🎤 Voice")
-                transcribe_btn = gr.Button("🎤 Transcribe")
-                clear = gr.Button("🗑️ Clear")
-            with gr.Accordion("💡 Examples", open=False):
-                gr.Examples(["Write a Python quicksort function", "Explain async/await in JavaScript"], inputs=msg)
+                audio_input = gr.Audio(sources=["microphone"], type="filepath", label="🎤 Voice", scale=2)
+                transcribe_btn = gr.Button("🎤 Transcribe", scale=1)
+                clear = gr.Button("🗑️ Clear", scale=1)
+            
+            with gr.Accordion("💡 Quick Prompts", open=False):
+                gr.Examples([
+                    "Write a Python function to find all prime numbers up to n",
+                    "Explain async/await vs promises in JavaScript",
+                    "Create a REST API endpoint with authentication",
+                    "How do I implement a binary search tree?",
+                ], inputs=msg)
         
+        # Generate Tab
         with gr.TabItem("⚡ Generate"):
             with gr.Row():
                 with gr.Column(scale=1):
-                    gen_prompt = gr.Textbox(label="📝 Describe what you want", lines=4)
-                    gen_lang = gr.Dropdown(LANGUAGES, value="Python", label="🔤 Language")
-                    gen_temp = gr.Slider(0, 1, value=0.3, step=0.1, label="🌡️ Creativity")
-                    gen_btn = gr.Button("⚡ Generate", variant="primary", size="lg")
+                    gen_prompt = gr.Textbox(
+                        label="📝 What do you want to build?",
+                        placeholder="e.g., A function that validates email addresses with regex",
+                        lines=5,
+                        elem_classes="input-box"
+                    )
+                    with gr.Row():
+                        gen_lang = gr.Dropdown(LANGUAGES, value="Python", label="🔤 Language", scale=2)
+                        gen_temp = gr.Slider(0, 1, value=0.3, step=0.1, label="🌡️", scale=1)
+                    gen_btn = gr.Button("⚡ Generate Code", variant="primary", size="lg", elem_classes="primary-btn")
+                
                 with gr.Column(scale=2):
-                    gen_output = gr.Code(label="Generated Code", language="python", lines=20)
+                    gen_output = gr.Code(label="Generated Code", language="python", lines=22, elem_classes="code-block")
         
+        # Explain Tab
         with gr.TabItem("🔍 Explain"):
             with gr.Row():
                 with gr.Column(scale=1):
-                    explain_input = gr.Code(label="📋 Paste code", lines=12)
-                    explain_detail = gr.Radio(["Brief", "Normal", "Detailed"], value="Normal", label="📊 Detail")
-                    explain_btn = gr.Button("🔍 Explain", variant="primary", size="lg")
+                    explain_input = gr.Code(label="📋 Paste your code", lines=14, elem_classes="code-block")
+                    explain_detail = gr.Radio(
+                        ["Brief", "Normal", "Detailed"], 
+                        value="Normal", 
+                        label="📊 Explanation Detail",
+                        info="Brief = 2-3 sentences, Detailed = full breakdown"
+                    )
+                    explain_btn = gr.Button("🔍 Explain Code", variant="primary", size="lg", elem_classes="primary-btn")
+                
                 with gr.Column(scale=1):
-                    explain_output = gr.Markdown(label="Explanation")
+                    explain_output = gr.Markdown(label="Explanation", elem_classes="card")
         
-        with gr.TabItem("🔧 Fix"):
+        # Fix Tab
+        with gr.TabItem("🔧 Debug"):
             with gr.Row():
                 with gr.Column(scale=1):
-                    fix_input = gr.Code(label="🐛 Buggy code", lines=10)
-                    fix_error = gr.Textbox(label="❌ Error message", lines=3)
-                    fix_btn = gr.Button("🔧 Fix", variant="primary", size="lg")
+                    fix_input = gr.Code(label="🐛 Paste buggy code", lines=12, elem_classes="code-block")
+                    fix_error = gr.Textbox(
+                        label="❌ Error message (optional)",
+                        placeholder="Paste error or describe the issue",
+                        lines=3,
+                        elem_classes="input-box"
+                    )
+                    fix_btn = gr.Button("🔧 Fix Code", variant="primary", size="lg", elem_classes="primary-btn")
+                
                 with gr.Column(scale=1):
-                    fix_output = gr.Markdown(label="Fixed Code")
+                    fix_output = gr.Markdown(label="Solution", elem_classes="card")
         
+        # Review Tab
         with gr.TabItem("📋 Review"):
             with gr.Row():
                 with gr.Column(scale=1):
-                    review_input = gr.Code(label="📋 Code to review", lines=15)
-                    review_btn = gr.Button("📋 Review", variant="primary", size="lg")
+                    review_input = gr.Code(label="📋 Code to review", lines=16, elem_classes="code-block")
+                    review_btn = gr.Button("📋 Review Code", variant="primary", size="lg", elem_classes="primary-btn")
+                
                 with gr.Column(scale=1):
-                    review_output = gr.Markdown(label="Review")
+                    review_output = gr.Markdown(label="Code Review", elem_classes="card")
+
+    # Footer info
+    gr.HTML("""
+    <div style="text-align: center; padding: 20px; opacity: 0.7; font-size: 0.85rem;">
+        <p>Running 100% locally via Ollama • Models cached after first load • No data sent externally</p>
+    </div>
+    """)
 
+    # Event handlers
     def respond(message, history, model, temp, tokens):
         history = history or []
         for updated_history in chat_stream(message, history, model, temp, tokens):