Change UI and fix API not found

app.py

@@ -26,196 +26,136 @@ llm = Llama(
 print("✅ Model loaded!")
 
 def chat(message, history):
-    prompt = "<|begin_of_text|>"
+    # Build prompt from history
+    prompt = ""
 
     for user_msg, bot_msg in history:
-        prompt += f"<|start_header_id|>user<|end_header_id|>\n\n{user_msg}<|eot_id|>"
-        prompt += f"<|start_header_id|>assistant<|end_header_id|>\n\n{bot_msg}<|eot_id|>"
+        prompt += f"User: {user_msg}\nAssistant: {bot_msg}\n"
 
-    prompt += f"<|start_header_id|>user<|end_header_id|>\n\n{message}<|eot_id|>"
-    prompt += "<|start_header_id|>assistant<|end_header_id|>\n\n"
+    prompt += f"User: {message}\nAssistant:"
 
+    # Generate response
     response = llm(
         prompt,
         max_tokens=512,
         temperature=0.7,
         top_p=0.9,
-        stop=["<|eot_id|>", "<|start_header_id|>"],
+        stop=["\nUser:", "User:"],
         echo=False
     )
 
-    bot_response = response['choices'][0]['text'].strip()
-    history.append((message, bot_response))
-    return history
+    return response['choices'][0]['text'].strip()
 
-# HACKER STYLE CSS
+# Clean terminal/hacker CSS
 custom_css = """
-@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;
-}
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Source+Code+Pro:wght@400;600&display=swap');
 
-@keyframes scanlines {
-    0% { background-position: 0 0, 0 0; }
-    100% { background-position: 0 100%, 0 0; }
+/* Terminal background */
+body, .gradio-container {
+    background: #0c0c0c !important;
+    font-family: 'JetBrains Mono', 'Source Code Pro', monospace !important;
 }
 
-@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; }
+.gradio-container {
+    max-width: 1400px !important;
+    border: 1px solid #00ff00 !important;
+    box-shadow: 0 0 10px rgba(0, 255, 0, 0.3) !important;
 }
 
-@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; }
+/* Text colors */
+*, h1, h2, h3, label, p {
+    color: #00ff00 !important;
+    font-family: 'JetBrains Mono', monospace !important;
 }
 
-/* Main container */
-.gradio-container {
-    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;
+h1 {
+    font-size: 28px !important;
+    font-weight: 700 !important;
+    letter-spacing: 2px !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 messages */
+.message-wrap {
+    background: #0c0c0c !important;
 }
 
-/* Chatbot styling */
 .message {
-    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;
+    background: #1a1a1a !important;
+    border-left: 3px solid #00ff00 !important;
+    color: #00ff00 !important;
+    padding: 12px !important;
+    font-family: 'JetBrains Mono', monospace !important;
 }
 
-.message.user {
-    border-left: 4px solid #0ff !important;
-    box-shadow: 0 0 10px rgba(0, 255, 255, 0.3) !important;
+.user {
+    border-left: 3px solid #00cc00 !important;
 }
 
-.message.bot {
-    border-left: 4px solid #00ff41 !important;
+.bot {
+    border-left: 3px solid #00ff00 !important;
 }
 
-/* Input fields */
+/* Input field */
 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;
+    background: #1a1a1a !important;
+    border: 1px solid #00ff00 !important;
+    color: #00ff00 !important;
+    font-family: 'JetBrains Mono', monospace !important;
+    font-size: 14px !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;
+    border: 1px solid #00ff00 !important;
     outline: none !important;
+    box-shadow: 0 0 5px rgba(0, 255, 0, 0.5) !important;
 }
 
 input::placeholder, textarea::placeholder {
-    color: rgba(0, 255, 65, 0.5) !important;
+    color: #006600 !important;
 }
 
 /* Buttons */
 button {
-    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;
+    background: #1a1a1a !important;
+    border: 1px solid #00ff00 !important;
+    color: #00ff00 !important;
+    font-family: 'JetBrains Mono', monospace !important;
+    font-weight: 600 !important;
+    transition: all 0.2s !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;
+    background: #00ff00 !important;
+    color: #0c0c0c !important;
 }
 
 .primary {
-    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;
+    background: #00ff00 !important;
+    color: #0c0c0c !important;
 }
 
-/* Examples section */
-.examples {
-    border: 1px solid #00ff41 !important;
-    background: rgba(0, 20, 0, 0.5) !important;
-    padding: 10px !important;
+.primary:hover {
+    background: #00cc00 !important;
 }
 
-/* Accordion */
-.accordion {
-    border: 1px solid #00ff41 !important;
-    background: rgba(0, 20, 0, 0.8) !important;
-}
-
-/* Labels */
-label {
-    color: #00ff41 !important;
-    font-family: 'Orbitron', monospace !important;
-    text-transform: uppercase !important;
-    letter-spacing: 2px !important;
+/* Examples */
+.examples {
+    background: #1a1a1a !important;
+    border: 1px solid #00ff00 !important;
 }
 
 /* Scrollbar */
 ::-webkit-scrollbar {
-    width: 10px !important;
-    background: #000 !important;
-}
-
-::-webkit-scrollbar-track {
-    background: #001a00 !important;
-    border: 1px solid #00ff41 !important;
+    width: 8px !important;
+    background: #0c0c0c !important;
 }
 
 ::-webkit-scrollbar-thumb {
-    background: #00ff41 !important;
-    border-radius: 5px !important;
-    box-shadow: 0 0 10px #00ff41 !important;
+    background: #00ff00 !important;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-    background: #0ff !important;
-    box-shadow: 0 0 15px #0ff !important;
+    background: #00cc00 !important;
 }
 
 footer {
@@ -224,78 +164,34 @@ footer {
 
 /* 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;
+    background: #1a1a1a !important;
+    border: 1px solid #00ff00 !important;
+    color: #00ff00 !important;
 }
 """
 
-with gr.Blocks(
-    theme=gr.themes.Base(
-        primary_hue="green",
-        secondary_hue="emerald",
-    ),
+# Create interface using ChatInterface
+demo = gr.ChatInterface(
+    fn=chat,
+    title="$ LLAMA TERMINAL",
+    description="```\n> System Online | Neural Network Active\n> Type your query below...\n```",
+    theme=gr.themes.Base(primary_hue="green"),
     css=custom_css,
-    title="⚡ LLAMA TERMINAL v2.0"
-) as demo:
-
-    gr.Markdown(
-        """
-        # ⚡ LLAMA NEURAL INTERFACE v2.0
-        ### >> QUANTUM AI SYSTEM ACTIVE // ENCRYPTED CONNECTION ESTABLISHED
-        """
-    )
-
-    chatbot = gr.Chatbot(
-        height=500,
-        show_copy_button=True,
-        bubble_full_width=False
-    )
-    
-    with gr.Row():
-        msg = gr.Textbox(
-            placeholder=">> ENTER COMMAND...",
-            show_label=False,
-            scale=8,
-            container=False
-        )
-        submit = gr.Button("EXECUTE", scale=1, variant="primary")
-
-    gr.Examples(
-        examples=[
-            "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 ACCESS QUERIES"
-    )
-    
-    with gr.Accordion(">> SYSTEM DIAGNOSTICS", open=False):
-        gr.Markdown(
-            """
-            **[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="PURGE MEMORY")
-
-    submit.click(chat, [msg, chatbot], [chatbot]).then(
-        lambda: "", None, msg
-    )
-    msg.submit(chat, [msg, chatbot], [chatbot]).then(
-        lambda: "", None, msg
-    )
+    examples=[
+        "What is the capital of France?",
+        "Explain quantum computing",
+        "Write fibonacci in Python",
+        "Optimize sleep patterns",
+        "Continue: 2, 4, 6, 8...",
+        "Write a haiku about AI",
+    ],
+    chatbot=gr.Chatbot(height=600, show_copy_button=True),
+    textbox=gr.Textbox(placeholder="$ Enter command...", container=False, scale=7),
+    retry_btn="↻ Retry",
+    undo_btn="↶ Undo",
+    clear_btn="✖ Clear",
+)
 
 if __name__ == "__main__":
     demo.queue()
-    demo.launch(share=False)
+    demo.launch(share=False)