Change UI and fix issues

app.py

@@ -44,158 +44,258 @@ def chat(message, history):
         echo=False
     )
 
-    return response['choices'][0]['text'].strip()
+    bot_response = response['choices'][0]['text'].strip()
+    history.append((message, bot_response))
+    return history
 
-# Ultra-modern CSS
+# HACKER STYLE CSS
 custom_css = """
-@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700;900&display=swap');
+
+/* Matrix background with animated scanlines */
+body {
+    background: #000000 !important;
+    background-image:
+        repeating-linear-gradient(
+            0deg,
+            rgba(0, 255, 65, 0.03) 0px,
+            transparent 1px,
+            transparent 2px,
+            rgba(0, 255, 65, 0.03) 3px
+        ),
+        linear-gradient(90deg, #000000 21px, #0a0a0a 1px) !important;
+    background-size: 100% 3px, 22px 100% !important;
+    animation: scanlines 8s linear infinite !important;
+}
 
-* {
-    font-family: 'Space Grotesk', sans-serif !important;
+@keyframes scanlines {
+    0% { background-position: 0 0, 0 0; }
+    100% { background-position: 0 100%, 0 0; }
+}
+
+@keyframes glow {
+    0%, 100% { text-shadow: 0 0 10px #00ff41, 0 0 20px #00ff41, 0 0 30px #00ff41; }
+    50% { text-shadow: 0 0 20px #00ff41, 0 0 30px #00ff41, 0 0 40px #00ff41; }
 }
 
+@keyframes border-glow {
+    0%, 100% { box-shadow: 0 0 5px #00ff41, 0 0 10px #00ff41, inset 0 0 5px #00ff41; }
+    50% { box-shadow: 0 0 10px #00ff41, 0 0 20px #00ff41, inset 0 0 10px #00ff41; }
+}
+
+/* Main container */
 .gradio-container {
-    background: linear-gradient(135deg, #1e3a8a 0%, #7c3aed 50%, #db2777 100%) !important;
+    max-width: 1200px !important;
+    margin: 0 auto !important;
+    background: rgba(0, 0, 0, 0.95) !important;
+    border: 2px solid #00ff41 !important;
+    box-shadow: 0 0 20px #00ff41, inset 0 0 20px rgba(0, 255, 65, 0.1) !important;
+    padding: 20px !important;
+}
+
+/* Typography */
+* {
+    font-family: 'Share Tech Mono', monospace !important;
+    color: #00ff41 !important;
 }
 
-#chatbot {
-    height: 650px !important;
-    border-radius: 24px !important;
-    border: 2px solid rgba(255,255,255,0.1) !important;
-    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5) !important;
+h1, h2, h3, h4, h5, h6 {
+    font-family: 'Orbitron', monospace !important;
+    color: #00ff41 !important;
+    text-transform: uppercase !important;
+    letter-spacing: 3px !important;
+    animation: glow 2s ease-in-out infinite !important;
 }
 
+/* Chatbot styling */
 .message {
-    padding: 18px 24px !important;
-    border-radius: 20px !important;
-    font-size: 15px !important;
-    margin: 8px 0 !important;
-    backdrop-filter: blur(10px) !important;
-    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37) !important;
+    background: rgba(0, 20, 0, 0.8) !important;
+    border: 1px solid #00ff41 !important;
+    border-left: 4px solid #00ff41 !important;
+    color: #00ff41 !important;
+    padding: 15px !important;
+    margin: 10px 0 !important;
+    box-shadow: 0 0 10px rgba(0, 255, 65, 0.3) !important;
+}
+
+.message.user {
+    border-left: 4px solid #0ff !important;
+    box-shadow: 0 0 10px rgba(0, 255, 255, 0.3) !important;
 }
 
-.user {
-    background: linear-gradient(135deg, rgba(147, 51, 234, 0.9) 0%, rgba(219, 39, 119, 0.9) 100%) !important;
-    color: white !important;
-    border: 1px solid rgba(255,255,255,0.2) !important;
+.message.bot {
+    border-left: 4px solid #00ff41 !important;
 }
 
-.bot {
-    background: linear-gradient(135deg, rgba(59, 130, 246, 0.9) 0%, rgba(147, 51, 234, 0.9) 100%) !important;
-    color: white !important;
-    border: 1px solid rgba(255,255,255,0.2) !important;
+/* Input fields */
+input, textarea {
+    background: rgba(0, 20, 0, 0.9) !important;
+    border: 2px solid #00ff41 !important;
+    color: #00ff41 !important;
+    font-family: 'Share Tech Mono', monospace !important;
+    padding: 12px !important;
+    animation: border-glow 2s ease-in-out infinite !important;
+}
+
+input:focus, textarea:focus {
+    border: 2px solid #0ff !important;
+    box-shadow: 0 0 15px #0ff, inset 0 0 15px rgba(0, 255, 255, 0.2) !important;
+    outline: none !important;
+}
+
+input::placeholder, textarea::placeholder {
+    color: rgba(0, 255, 65, 0.5) !important;
 }
 
+/* Buttons */
 button {
-    border-radius: 16px !important;
-    font-weight: 600 !important;
+    background: linear-gradient(135deg, #001a00 0%, #003300 100%) !important;
+    border: 2px solid #00ff41 !important;
+    color: #00ff41 !important;
+    font-family: 'Orbitron', monospace !important;
+    font-weight: 700 !important;
+    text-transform: uppercase !important;
+    letter-spacing: 2px !important;
+    padding: 12px 24px !important;
     transition: all 0.3s ease !important;
+    box-shadow: 0 0 10px rgba(0, 255, 65, 0.3) !important;
 }
 
 button:hover {
+    background: linear-gradient(135deg, #003300 0%, #00ff41 100%) !important;
+    color: #000 !important;
+    box-shadow: 0 0 20px #00ff41, inset 0 0 10px #00ff41 !important;
     transform: translateY(-2px) !important;
-    box-shadow: 0 12px 24px rgba(0,0,0,0.3) !important;
 }
 
 .primary {
-    background: linear-gradient(135deg, #9333ea 0%, #db2777 100%) !important;
-    border: none !important;
+    background: linear-gradient(135deg, #00ff41 0%, #00cc33 100%) !important;
+    color: #000 !important;
+    font-weight: 900 !important;
+    animation: border-glow 2s ease-in-out infinite !important;
 }
 
-input, textarea {
-    border-radius: 16px !important;
-    border: 2px solid rgba(255,255,255,0.2) !important;
-    background: rgba(255,255,255,0.1) !important;
-    backdrop-filter: blur(10px) !important;
-    color: white !important;
+/* Examples section */
+.examples {
+    border: 1px solid #00ff41 !important;
+    background: rgba(0, 20, 0, 0.5) !important;
+    padding: 10px !important;
 }
 
-input::placeholder, textarea::placeholder {
-    color: rgba(255,255,255,0.6) !important;
+/* Accordion */
+.accordion {
+    border: 1px solid #00ff41 !important;
+    background: rgba(0, 20, 0, 0.8) !important;
 }
 
-.prose {
-    color: white !important;
+/* Labels */
+label {
+    color: #00ff41 !important;
+    font-family: 'Orbitron', monospace !important;
+    text-transform: uppercase !important;
+    letter-spacing: 2px !important;
 }
 
-.prose h1 {
-    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    font-weight: 700 !important;
+/* Scrollbar */
+::-webkit-scrollbar {
+    width: 10px !important;
+    background: #000 !important;
+}
+
+::-webkit-scrollbar-track {
+    background: #001a00 !important;
+    border: 1px solid #00ff41 !important;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #00ff41 !important;
+    border-radius: 5px !important;
+    box-shadow: 0 0 10px #00ff41 !important;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #0ff !important;
+    box-shadow: 0 0 15px #0ff !important;
 }
 
 footer {
     display: none !important;
 }
+
+/* Code blocks */
+pre, code {
+    background: rgba(0, 20, 0, 0.9) !important;
+    border: 1px solid #00ff41 !important;
+    color: #0ff !important;
+    padding: 10px !important;
+    border-left: 4px solid #0ff !important;
+}
 """
 
 with gr.Blocks(
-    theme=gr.themes.Glass(
-        primary_hue="purple",
-        secondary_hue="pink",
+    theme=gr.themes.Base(
+        primary_hue="green",
+        secondary_hue="emerald",
     ),
     css=custom_css,
-    title="🦙 Llama 3.2 AI"
+    title="⚡ LLAMA TERMINAL v2.0"
 ) as demo:
 
     gr.Markdown(
         """
-        # 🦙 Llama Chat AI Assistant (TEST)
-        ### ⚡ Testing deployment with pre-trained model
+        # ⚡ LLAMA NEURAL INTERFACE v2.0
+        ### >> QUANTUM AI SYSTEM ACTIVE // ENCRYPTED CONNECTION ESTABLISHED
         """
     )
 
     chatbot = gr.Chatbot(
-        elem_id="chatbot",
-        bubble_full_width=False,
-        avatar_images=(
-            "https://em-content.zobj.net/thumbs/120/apple/354/sparkles_2728.png",
-            "https://em-content.zobj.net/thumbs/120/apple/354/llama_1f999.png"
-        ),
-        height=650,
+        height=500,
         show_copy_button=True,
+        bubble_full_width=False
     )
-
+    
     with gr.Row():
         msg = gr.Textbox(
-            placeholder="✨ Ask me anything...",
+            placeholder=">> ENTER COMMAND...",
             show_label=False,
             scale=8,
             container=False
         )
-        submit = gr.Button("Send 🚀", scale=1, variant="primary", size="lg")
+        submit = gr.Button("EXECUTE", scale=1, variant="primary")
 
     gr.Examples(
         examples=[
-            "🌍 What is the capital of France?",
-            "🧠 Explain quantum computing simply",
-            "💻 Write fibonacci in Python",
-            "😴 Tips for better sleep?",
-            "🔢 Continue: 2, 4, 6, 8...",
-            "📝 Write a haiku about AI",
+            "What is the capital of France?",
+            "Explain quantum computing",
+            "Write fibonacci algorithm in Python",
+            "Optimize sleep patterns",
+            "Analyze sequence: 2, 4, 6, 8...",
+            "Generate haiku: AI consciousness",
         ],
         inputs=msg,
-        label="💡 Quick Start:"
+        label=">> QUICK ACCESS QUERIES"
     )
-
-    with gr.Accordion("ℹ️ Model Information", open=False):
+    
+    with gr.Accordion(">> SYSTEM DIAGNOSTICS", open=False):
         gr.Markdown(
             """
-            **Testing Model:**
-            - 🤖 Model: Llama 2 7B Chat (Pre-trained)
-            - ⚙️ Format: GGUF (q4_k_m quantization)
-            - 📝 Note: This is a test deployment. Will be replaced with fine-tuned model.
+            **[NEURAL NETWORK SPECS]**
+            - >> MODEL: Llama 2 7B Chat (Pre-trained)
+            - >> FORMAT: GGUF (q4_k_m quantization)
+            - >> STATUS: OPERATIONAL // AWAITING FINE-TUNED UPGRADE
+            - >> SECURITY: LEVEL 5 ENCRYPTION ACTIVE
             """
         )
 
-    clear = gr.ClearButton([msg, chatbot], value="🗑️ New Chat")
+    clear = gr.ClearButton([msg, chatbot], value="PURGE MEMORY")
 
-    submit.click(chat, [msg, chatbot], [chatbot])
-    submit.click(lambda: "", None, msg)
-    msg.submit(chat, [msg, chatbot], [chatbot])
-    msg.submit(lambda: "", None, msg)
+    submit.click(chat, [msg, chatbot], [chatbot]).then(
+        lambda: "", None, msg
+    )
+    msg.submit(chat, [msg, chatbot], [chatbot]).then(
+        lambda: "", None, msg
+    )
 
 if __name__ == "__main__":
     demo.queue()
-    demo.launch(share=False)
+    demo.launch(share=False)