Update app.py

app.py

@@ -8,7 +8,7 @@ from huggingface_hub import InferenceClient
 CHAT_MODEL_ID = "meta-llama/Llama-3.1-8B-Instruct"
 ROUTER_URL = "https://router.huggingface.co/v1/chat/completions"
 ASR_MODEL_ID = "openai/whisper-large-v3"
-DEFAULT_SYSTEM_PROMPT = "You are a helpful AI assistant. Provide clear, concise, and accurate responses."
+DEFAULT_SYSTEM_PROMPT = "You are a helpful AI assistant."
 MAX_FILE_CHARS = 40_000
 
 HF_TOKEN = os.getenv("HF_TOKEN")
@@ -22,425 +22,7 @@ HEADERS = {
 
 asr_client = InferenceClient(api_key=HF_TOKEN)
 
-# ========= CLEAN WHITE CSS =========
-CSS = """
-:root {
-  --primary: #10a37f;
-  --primary-dark: #0d8c6d;
-  --primary-light: #e6f7f2;
-  --bg-white: #ffffff;
-  --bg-light: #f7f7f8;
-  --bg-gray: #f0f0f0;
-  --text-dark: #202123;
-  --text-gray: #6e6e80;
-  --text-light: #8e8ea0;
-  --border: #e5e5e5;
-  --border-light: #f0f0f0;
-  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
-  --shadow-md: 0 4px 12px rgba(0,0,0,0.05);
-  --shadow-lg: 0 20px 40px rgba(0,0,0,0.05);
-  --radius: 12px;
-  --radius-sm: 8px;
-}
-
-.gradio-container {
-  background: linear-gradient(180deg, #f7f7f8 0%, #ffffff 100%) !important;
-  min-height: 100vh !important;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-}
-
-/* Main Container */
-#main-container {
-  max-width: 900px;
-  margin: 0 auto;
-  padding: 20px;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-/* Header */
-#header {
-  text-align: center;
-  padding: 30px 0 20px 0;
-  margin-bottom: 20px;
-}
-
-.logo {
-  display: inline-flex;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 8px;
-}
-
-.logo-icon {
-  width: 42px;
-  height: 42px;
-  background: linear-gradient(135deg, var(--primary), #1e88e5);
-  border-radius: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  font-size: 20px;
-  font-weight: 600;
-}
-
-.logo-text {
-  font-size: 32px;
-  font-weight: 700;
-  background: linear-gradient(135deg, var(--text-dark), var(--primary));
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  margin: 0;
-}
-
-.tagline {
-  color: var(--text-gray);
-  font-size: 16px;
-  margin: 5px 0 15px 0;
-  font-weight: 400;
-}
-
-.model-tag {
-  display: inline-block;
-  background: var(--primary-light);
-  color: var(--primary);
-  padding: 6px 14px;
-  border-radius: 20px;
-  font-size: 14px;
-  font-weight: 500;
-  border: 1px solid rgba(16, 163, 127, 0.2);
-}
-
-/* Chat Container */
-#chat-container {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  background: var(--bg-white);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow-lg);
-  border: 1px solid var(--border);
-  overflow: hidden;
-  margin-bottom: 20px;
-}
-
-/* Chat Messages */
-#chat-messages {
-  flex: 1;
-  overflow-y: auto;
-  padding: 24px;
-  background: var(--bg-white);
-  min-height: 400px;
-  max-height: 65vh;
-}
-
-/* Chat Bubbles */
-.user[data-testid="user"] {
-  background: var(--primary) !important;
-  color: white !important;
-  padding: 16px 20px !important;
-  border-radius: 18px 18px 4px 18px !important;
-  margin: 12px 0 12px auto !important;
-  max-width: 85% !important;
-  box-shadow: var(--shadow-sm) !important;
-  line-height: 1.5 !important;
-}
-
-.assistant[data-testid="assistant"] {
-  background: var(--bg-light) !important;
-  color: var(--text-dark) !important;
-  padding: 16px 20px !important;
-  border-radius: 18px 18px 18px 4px !important;
-  margin: 12px auto 12px 0 !important;
-  max-width: 85% !important;
-  border: 1px solid var(--border) !important;
-  line-height: 1.5 !important;
-}
-
-/* Input Container */
-#input-container {
-  padding: 20px;
-  background: var(--bg-white);
-  border-top: 1px solid var(--border-light);
-}
-
-/* Input Box with Actions */
-.input-box {
-  background: var(--bg-light);
-  border: 2px solid var(--border);
-  border-radius: var(--radius);
-  padding: 4px;
-  display: flex;
-  gap: 8px;
-  transition: all 0.2s ease;
-}
-
-.input-box:focus-within {
-  border-color: var(--primary);
-  box-shadow: 0 0 0 3px rgba(16, 163, 127, 0.1);
-}
-
-.input-field {
-  flex: 1;
-  border: none !important;
-  background: transparent !important;
-  padding: 12px 16px !important;
-  font-size: 16px !important;
-  color: var(--text-dark) !important;
-  min-height: 24px !important;
-  max-height: 120px !important;
-}
-
-.input-field:focus {
-  outline: none !important;
-  box-shadow: none !important;
-}
-
-.input-field::placeholder {
-  color: var(--text-light) !important;
-}
-
-/* Input Action Buttons */
-.input-actions {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-
-.action-btn {
-  width: 44px;
-  height: 44px;
-  border-radius: var(--radius-sm);
-  background: white;
-  border: 1px solid var(--border);
-  color: var(--text-gray);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 18px;
-  transition: all 0.2s ease;
-}
-
-.action-btn:hover {
-  background: var(--bg-gray);
-  color: var(--primary);
-  border-color: var(--primary);
-}
-
-.action-btn.active {
-  background: var(--primary);
-  color: white;
-  border-color: var(--primary);
-}
-
-.send-btn {
-  background: var(--primary) !important;
-  color: white !important;
-  border: none !important;
-  width: 44px;
-  height: 44px;
-  border-radius: var(--radius-sm) !important;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 18px;
-  transition: all 0.2s ease !important;
-}
-
-.send-btn:hover {
-  background: var(--primary-dark) !important;
-  transform: translateY(-1px);
-}
-
-/* File Upload Area */
-#upload-area {
-  padding: 16px 20px;
-  background: var(--bg-light);
-  border-top: 1px solid var(--border);
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  flex-wrap: wrap;
-}
-
-.upload-section {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex: 1;
-  min-width: 200px;
-}
-
-.upload-label {
-  color: var(--text-gray);
-  font-size: 14px;
-  font-weight: 500;
-  white-space: nowrap;
-}
-
-.upload-btn {
-  background: white !important;
-  border: 1px solid var(--border) !important;
-  color: var(--text-gray) !important;
-  padding: 8px 16px !important;
-  border-radius: var(--radius-sm) !important;
-  font-size: 14px !important;
-  cursor: pointer !important;
-  transition: all 0.2s ease !important;
-  flex: 1;
-  text-align: left;
-}
-
-.upload-btn:hover {
-  border-color: var(--primary) !important;
-  color: var(--primary) !important;
-  background: var(--primary-light) !important;
-}
-
-.file-info {
-  color: var(--text-gray);
-  font-size: 13px;
-  padding: 6px 12px;
-  background: white;
-  border-radius: var(--radius-sm);
-  border: 1px solid var(--border);
-  flex: 2;
-  min-width: 250px;
-}
-
-.file-info strong {
-  color: var(--primary);
-}
-
-/* Settings Panel */
-.settings-panel {
-  background: var(--bg-light);
-  padding: 20px;
-  border-radius: var(--radius-sm);
-  margin-top: 16px;
-  border: 1px solid var(--border);
-}
-
-.settings-row {
-  display: flex;
-  gap: 20px;
-  flex-wrap: wrap;
-}
-
-.settings-group {
-  flex: 1;
-  min-width: 250px;
-}
-
-.settings-label {
-  display: block;
-  margin-bottom: 8px;
-  color: var(--text-dark);
-  font-weight: 500;
-  font-size: 14px;
-}
-
-.settings-label span {
-  color: var(--text-gray);
-  font-weight: 400;
-}
-
-.settings-input {
-  width: 100%;
-  padding: 12px 16px;
-  background: white;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  color: var(--text-dark);
-  font-size: 14px;
-  transition: all 0.2s ease;
-}
-
-.settings-input:focus {
-  outline: none;
-  border-color: var(--primary);
-  box-shadow: 0 0 0 3px rgba(16, 163, 127, 0.1);
-}
-
-.slider-container {
-  padding: 12px 0;
-}
-
-.slider-value {
-  display: inline-block;
-  margin-left: 10px;
-  color: var(--primary);
-  font-weight: 600;
-  font-size: 14px;
-  background: var(--primary-light);
-  padding: 2px 8px;
-  border-radius: 4px;
-}
-
-/* Footer */
-.footer {
-  text-align: center;
-  padding: 20px 0;
-  color: var(--text-light);
-  font-size: 13px;
-  border-top: 1px solid var(--border-light);
-  margin-top: 20px;
-}
-
-/* Scrollbar */
-::-webkit-scrollbar {
-  width: 6px;
-}
-
-::-webkit-scrollbar-track {
-  background: var(--bg-light);
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--border);
-  border-radius: 3px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: var(--text-light);
-}
-
-/* Mobile Responsive */
-@media (max-width: 768px) {
-  #main-container {
-    padding: 10px;
-  }
-  
-  #chat-messages {
-    padding: 16px;
-    max-height: 60vh;
-  }
-  
-  .user[data-testid="user"],
-  .assistant[data-testid="assistant"] {
-    max-width: 90% !important;
-  }
-  
-  .upload-section {
-    min-width: 100%;
-  }
-  
-  .settings-row {
-    flex-direction: column;
-    gap: 16px;
-  }
-  
-  .settings-group {
-    min-width: 100%;
-  }
-}
-"""
-
-# ========= HELPERS (Same as before) =========
+# ========= HELPERS =========
 def normalize_whitespace(s: str) -> str:
     return re.sub(r"\s+", " ", (s or "")).strip()
 
@@ -502,10 +84,10 @@ def chat_to_llm_messages(chat_messages, system_prompt: str, file_context: str, u
     msgs.append({"role": "user", "content": user_text})
     return msgs
 
-# ========= ACTIONS (Same as before) =========
+# ========= ACTIONS =========
 def on_upload_file(chat_messages, file_obj, file_context):
     if file_obj is None:
-        return chat_messages, file_context, "📤 No file selected"
+        return chat_messages, file_context, "No file selected"
 
     file_path = getattr(file_obj, "name", None) or str(file_obj)
     filename = os.path.basename(file_path)
@@ -517,15 +99,15 @@ def on_upload_file(chat_messages, file_obj, file_context):
         file_context = f"[{filename}]\n{extracted}\n\n" + (file_context or "")
         chat_messages = (chat_messages or []) + [
             {"role": "user", "content": f"📎 Uploaded file: {filename}"},
-            {"role": "assistant", "content": f"✅ **{filename}** loaded ({file_size:,} bytes). I can now answer questions about this document!"},
+            {"role": "assistant", "content": f"✅ **{filename}** loaded ({file_size:,} bytes). Ask me anything about this document!"},
         ]
-        file_info = f"✅ {filename} ({file_size:,} bytes)"
+        file_info = f"✅ Loaded: {filename} ({file_size:,} bytes)"
     else:
         chat_messages = (chat_messages or []) + [
             {"role": "user", "content": f"📎 Uploaded file: {filename}"},
             {"role": "assistant", "content": f"📄 **{filename}** received. I'll answer based on its content."},
         ]
-        file_info = f"📄 {filename}"
+        file_info = f"📄 Uploaded: {filename}"
 
     return chat_messages, file_context, file_info
 
@@ -553,162 +135,91 @@ def on_send(chat_messages, user_text, system_prompt, temperature, max_tokens, fi
         chat_messages.append({"role": "assistant", "content": assistant})
         return chat_messages, ""
     except Exception as e:
-        chat_messages.append({"role": "assistant", "content": f"⚠️ **Error**: {type(e).__name__}: {str(e)[:100]}"})
+        chat_messages.append({"role": "assistant", "content": f"⚠️ Error: {type(e).__name__}: {str(e)[:100]}"})
         return chat_messages, ""
 
 def on_clear():
-    return [], "", "📤 No file selected"
-
-def update_temperature(value):
-    return f"{value:.2f}"
+    return [], "", "No file selected"
 
-def update_max_tokens(value):
-    return f"{int(value)}"
-
-def toggle_settings(visible):
-    return not visible
-
-# ========= SIMPLE CLEAN UI =========
-with gr.Blocks(title="SmartChat AI", css=CSS) as demo:
+# ========= SIMPLE UI =========
+with gr.Blocks(title="AI Chat Assistant") as demo:
     file_context_state = gr.State("")
     chat_state = gr.State([])
     
-    with gr.Column(elem_id="main-container"):
-        # Header
-        with gr.Column(elem_id="header"):
-            with gr.Row():
-                with gr.Column():
-                    with gr.Row(elem_classes="logo"):
-                        gr.HTML('<div class="logo-icon">AI</div>')
-                        gr.HTML('<h1 class="logo-text">SmartChat</h1>')
-                    
-                    gr.HTML('<div class="tagline">Your intelligent AI assistant</div>')
-                    gr.HTML(f'<div class="model-tag">🤖 {CHAT_MODEL_ID.split("/")[-1]}</div>')
+    # Header
+    with gr.Column():
+        gr.Markdown("# 🤖 AI Chat Assistant")
+        gr.Markdown("### Your intelligent assistant powered by Llama 3.1")
+        gr.Markdown(f"**Model:** `{CHAT_MODEL_ID.split('/')[-1]}`")
+    
+    # Chat display
+    chatbot = gr.Chatbot(height=400, label="Chat History")
+    
+    # File upload section
+    with gr.Row():
+        with gr.Column(scale=1):
+            gr.Markdown("### 📁 Upload Document")
+            upload = gr.File(
+                label="",
+                file_count="single",
+                file_types=[".txt", ".pdf", ".md", ".csv", ".json", ".py"]
+            )
         
-        # Main Chat Container
-        with gr.Column(elem_id="chat-container"):
-            # Chat Display Area
-            chatbot = gr.Chatbot(
-                value=[],
-                elem_id="chat-messages",
-                height=450
+        with gr.Column(scale=1):
+            gr.Markdown("### 🎤 Voice Input")
+            mic = gr.Audio(
+                sources=["microphone"],
+                type="filepath",
+                label=""
+            )
+        
+        with gr.Column(scale=2):
+            file_info_display = gr.Textbox(
+                label="📊 File Status",
+                value="No file selected",
+                interactive=False
+            )
+    
+    # Settings in accordion
+    with gr.Accordion("⚙️ Settings", open=False):
+        system_prompt = gr.Textbox(
+            value=DEFAULT_SYSTEM_PROMPT,
+            label="System Prompt",
+            lines=3
+        )
+        
+        with gr.Row():
+            temperature = gr.Slider(
+                minimum=0.0,
+                maximum=1.5,
+                value=0.7,
+                step=0.05,
+                label="Temperature (Creativity)"
             )
             
-            # File Upload Area (One line)
-            with gr.Row(elem_id="upload-area"):
-                with gr.Column(elem_classes="upload-section"):
-                    gr.HTML('<div class="upload-label">📎 Upload File:</div>')
-                    upload = gr.File(
-                        label="",
-                        file_count="single",
-                        file_types=[".txt", ".pdf", ".md", ".csv", ".json", ".py", ".html", ".css"],
-                        elem_classes="upload-btn"
-                    )
-                
-                with gr.Column(elem_classes="upload-section"):
-                    gr.HTML('<div class="upload-label">🎤 Voice Input:</div>')
-                    mic = gr.Audio(
-                        sources=["microphone"],
-                        type="filepath",
-                        label="",
-                        elem_classes="upload-btn"
-                    )
-                
-                file_info_display = gr.Textbox(
-                    value="📤 No file selected",
-                    interactive=False,
-                    show_label=False,
-                    elem_classes="file-info"
-                )
-            
-            # Input Area (One line)
-            with gr.Column(elem_id="input-container"):
-                with gr.Row(elem_classes="input-box"):
-                    user_input = gr.Textbox(
-                        placeholder="Type your message here...",
-                        lines=1,
-                        max_lines=3,
-                        label="",
-                        show_label=False,
-                        elem_classes="input-field",
-                        scale=8
-                    )
-                    
-                    with gr.Column(elem_classes="input-actions", scale=1):
-                        send_btn = gr.Button(
-                            "➤",
-                            elem_classes="send-btn",
-                            size="sm"
-                        )
-            
-            # Settings Panel (Collapsible)
-            with gr.Column(elem_classes="settings-panel", visible=False) as settings_panel:
-                with gr.Row(elem_classes="settings-row"):
-                    with gr.Column(elem_classes="settings-group"):
-                        system_prompt = gr.Textbox(
-                            value=DEFAULT_SYSTEM_PROMPT,
-                            label="System Prompt",
-                            lines=2,
-                            elem_classes="settings-input"
-                        )
-                    
-                    with gr.Column(elem_classes="settings-group"):
-                        with gr.Column():
-                            temperature = gr.Slider(
-                                minimum=0.0,
-                                maximum=1.5,
-                                value=0.7,
-                                step=0.05,
-                                label="Temperature"
-                            )
-                            temp_display = gr.Textbox(
-                                value="0.70",
-                                label="",
-                                interactive=False,
-                                elem_classes="slider-value"
-                            )
-                            
-                            max_tokens = gr.Slider(
-                                minimum=64,
-                                maximum=1024,
-                                value=400,
-                                step=64,
-                                label="Max Tokens"
-                            )
-                            tokens_display = gr.Textbox(
-                                value="400",
-                                label="",
-                                interactive=False,
-                                elem_classes="slider-value"
-                            )
-                
-                with gr.Row():
-                    clear_btn = gr.Button(
-                        "🗑️ Clear Chat",
-                        variant="secondary",
-                        size="sm",
-                        scale=1
-                    )
-                    
-                    settings_toggle = gr.Button(
-                        "Hide Settings",
-                        variant="secondary",
-                        size="sm",
-                        scale=0
-                    )
+            max_tokens = gr.Slider(
+                minimum=64,
+                maximum=1024,
+                value=400,
+                step=64,
+                label="Max Response Length"
+            )
+    
+    # Input area
+    with gr.Row():
+        user_input = gr.Textbox(
+            placeholder="Type your message here...",
+            label="Your Message",
+            lines=3,
+            scale=4
+        )
         
-        # Footer
-        gr.HTML('''
-        <div class="footer">
-            <div>SmartChat AI • Powered by Llama 3.1</div>
-            <div style="font-size: 11px; margin-top: 5px; opacity: 0.7;">
-                Upload documents or use voice input for a better experience
-            </div>
-        </div>
-        ''')
+        with gr.Column(scale=1):
+            send_btn = gr.Button("🚀 Send", variant="primary", size="lg")
+            clear_btn = gr.Button("🗑️ Clear Chat", variant="secondary")
     
     # ========= EVENT HANDLERS =========
-    # File Upload
+    # File upload
     upload.change(
         fn=on_upload_file,
         inputs=[chat_state, upload, file_context_state],
@@ -719,14 +230,14 @@ with gr.Blocks(title="SmartChat AI", css=CSS) as demo:
         outputs=[chatbot]
     )
     
-    # Voice Input
+    # Voice input
     mic.change(
         fn=on_record_audio,
         inputs=[mic],
         outputs=[user_input]
     )
     
-    # Send Message
+    # Send message (button)
     send_btn.click(
         fn=on_send,
         inputs=[chat_state, user_input, system_prompt, temperature, max_tokens, file_context_state],
@@ -737,7 +248,7 @@ with gr.Blocks(title="SmartChat AI", css=CSS) as demo:
         outputs=[chatbot]
     )
     
-    # Send on Enter
+    # Send message (enter)
     user_input.submit(
         fn=on_send,
         inputs=[chat_state, user_input, system_prompt, temperature, max_tokens, file_context_state],
@@ -748,7 +259,7 @@ with gr.Blocks(title="SmartChat AI", css=CSS) as demo:
         outputs=[chatbot]
     )
     
-    # Clear Chat
+    # Clear chat
     clear_btn.click(
         fn=on_clear,
         inputs=[],
@@ -758,29 +269,6 @@ with gr.Blocks(title="SmartChat AI", css=CSS) as demo:
         inputs=[],
         outputs=[chatbot]
     )
-    
-    # Toggle Settings
-    settings_toggle.click(
-        fn=toggle_settings,
-        inputs=[settings_panel],
-        outputs=[settings_panel]
-    ).then(
-        fn=lambda visible: "Show Settings" if visible else "Hide Settings",
-        inputs=[settings_panel],
-        outputs=[settings_toggle]
-    )
-    
-    # Update slider displays
-    temperature.change(
-        fn=update_temperature,
-        inputs=[temperature],
-        outputs=[temp_display]
-    )
-    
-    max_tokens.change(
-        fn=update_max_tokens,
-        inputs=[max_tokens],
-        outputs=[tokens_display]
-    )
 
-demo.launch()
+# Launch without CSS to avoid issues
+demo.launch(share=False, server_name="0.0.0.0", server_port=7860)