Update app.py

app.py

@@ -1,41 +1,30 @@
+import requests
 import gradio as gr
-from transformers import AutoModelForCausalLM, AutoTokenizer
-import torch
 
-# Load model and tokenizer
-model_name = "TinyLlama/TinyLlama-1.1B-Chat-v1.0"
-tokenizer = AutoTokenizer.from_pretrained(model_name)
-model = AutoModelForCausalLM.from_pretrained(model_name)
+# Configuration (Update this with your ngrok URL)
+API_URL = "https://5b9f-154-161-168-18.ngrok-free.app/v1/chat/completions"
+HEADERS = {"Content-Type": "application/json"}
 
 # Store the last prompt
 last_prompt = ""
 
 def generate(prompt):
-    """Generation function using local model"""
+    """Generation function with prompt storage"""
     global last_prompt
     last_prompt = prompt
-    
     try:
-        # Format prompt with chat template
-        messages = [{"role": "user", "content": prompt}]
-        input_ids = tokenizer.apply_chat_template(
-            messages,
-            return_tensors="pt"
-        ).to(model.device)
-        
-        # Generate response
-        outputs = model.generate(
-            input_ids,
-            max_new_tokens=256,
-            do_sample=True,
-            temperature=0.7,
-            top_p=0.9
+        response = requests.post(
+            API_URL,
+            headers=HEADERS,
+            json={
+                "model": "TinyLlama-1.1B-Chat-v1.0",
+                "messages": [{"role": "user", "content": prompt}],
+                "max_tokens": 256,
+                "temperature": 0.7
+            },
+            timeout=30
         )
-        
-        # Decode and return the response (skip the prompt)
-        response = outputs[0][input_ids.shape[-1]:]
-        return tokenizer.decode(response, skip_special_tokens=True)
-    
+        return response.json()['choices'][0]['message']['content']
     except Exception as e:
         return f"Error: {str(e)}"
 
@@ -45,51 +34,33 @@ def regenerate():
         return generate(last_prompt)
     return "No previous prompt to regenerate"
 
-# Create Gradio interface
-with gr.Blocks(title="Karlson Achegeba GPT", theme=gr.themes.Soft(primary_hue="blue")) as app:
+# Gradio UI
+with gr.Blocks(title="Karlson's TinyLlama Chat", theme=gr.themes.Soft(primary_hue="blue")) as app:
     with gr.Column(elem_classes=["center-container"]):
-        # Header Section
-        gr.Markdown(
-            """<div style='text-align: center;'>
-            <h1 style='color: #2563eb; margin-bottom: 0;'>Karlson Achegeba GPT</h1>
-            <p style='color: #64748b;'>Powered by TinyLlama</p>
-            </div>"""
-        )
-
+        # Header
+        gr.Markdown("""<div style='text-align: center'>
+            <h1 style='color: #2563eb'>Karlson's TinyLlama Chat</h1>
+            <p>Local model served via ngrok</p>
+        </div>""")
+        
         # Chat Interface
-        with gr.Group(elem_classes=["chat-container"]):
-            # Input Section
-            with gr.Column():
-                prompt = gr.Textbox(
-                    placeholder="Type your message here...",
-                    lines=5,
-                    label="Your Message",
-                    elem_classes=["input-box"]
-                )
-
-                # Action Buttons
-                with gr.Row():
-                    submit = gr.Button(
-                        "Generate Response",
-                        variant="primary",
-                        elem_classes=["action-button"]
-                    )
-                    regenerate_btn = gr.Button(
-                        "Regenerate",
-                        variant="secondary",
-                        elem_classes=["action-button"]
-                    )
-                    clear_btn = gr.Button(
-                        "Clear",
-                        variant="secondary",
-                        elem_classes=["action-button"]
-                    )
-
-            # Output Section
+        with gr.Group():
+            prompt = gr.Textbox(
+                placeholder="Type your message...", 
+                lines=5,
+                label="Your Message",
+                elem_classes=["input-box"]
+            )
+            
+            with gr.Row():
+                submit = gr.Button("Generate", variant="primary")
+                regenerate_btn = gr.Button("Regenerate", variant="secondary")
+                clear_btn = gr.Button("Clear All", variant="secondary")
+            
             output = gr.Textbox(
-                label="AI Response",
+                label="AI Response", 
                 interactive=False,
-                lines=10,
+                lines=8,
                 elem_classes=["output-box"]
             )
 
@@ -98,49 +69,21 @@ with gr.Blocks(title="Karlson Achegeba GPT", theme=gr.themes.Soft(primary_hue="b
     regenerate_btn.click(fn=regenerate, outputs=output)
     clear_btn.click(fn=lambda: ("", ""), outputs=[prompt, output])
 
-    # Custom CSS (same as before)
+    # CSS Styling
     app.css = """
-    .center-container {
-        max-width: 800px;
-        margin: auto;
-        padding: 20px;
-    }
-    .chat-container {
-        display: flex;
-        flex-direction: column;
-        gap: 20px;
-    }
-    .input-box, .output-box {
-        border-radius: 8px;
+    .center-container { max-width: 800px; margin: auto; padding: 20px; }
+    .input-box, .output-box { 
+        border-radius: 8px; 
         border: 1px solid #e2e8f0;
         padding: 12px;
     }
-    .input-box textarea, .output-box textarea {
-        font-size: 16px !important;
-    }
-    .action-button {
-        border-radius: 8px !important;
-        padding: 8px 16px !important;
-        min-width: 120px;
-    }
-    .action-button:not(.secondary) {
-        background: #2563eb !important;
-        color: white !important;
-    }
-    .action-button.secondary {
-        border: 1px solid #2563eb !important;
-        color: #2563eb !important;
-    }
-    .group {
-        border: 1px solid #e2e8f0;
-        border-radius: 12px;
-        padding: 20px;
-        background: white;
+    .action-button { min-width: 120px; }
+    .group { 
+        background: white; 
+        border-radius: 12px; 
+        padding: 20px; 
         box-shadow: 0 2px 8px rgba(0,0,0,0.05);
     }
-    .row {
-        gap: 10px;
-    }
     """
 
 app.launch()