Refactor: Prepare for Vercel + Colab architecture

dev_tools/colab_setup.py

@@ -0,0 +1,50 @@
+
+import os
+import subprocess
+import sys
+import time
+import threading
+
+def install_dependencies():
+    print("🚀 Installing dependencies...")
+    subprocess.check_call([sys.executable, "-m", "pip", "install", "-r", "requirements.txt"])
+    subprocess.check_call([sys.executable, "-m", "pip", "install", "pyngrok", "nest_asyncio", "uvicorn"])
+
+def run_server():
+    print("🔥 Starting FastAPI Server...")
+    # Run server.py using python command to ensure it runs as a script
+    subprocess.run([sys.executable, "server.py"], check=True)
+
+def start_ngrok():
+    from pyngrok import ngrok
+    
+    token = input("🔑 Enter your Ngrok Authtoken (from https://dashboard.ngrok.com/get-started/your-authtoken): ")
+    if not token:
+        print("❌ Error: Ngrok token is required.")
+        return
+
+    ngrok.set_auth_token(token)
+    
+    # Start tunnel to port 8000
+    public_url = ngrok.connect(8000).public_url
+    print(f"\n✅ \033[92mPublic Backend URL: {public_url}\033[0m")
+    print("👉 Copy this URL and paste it into the 'Backend Connection' box on your Vercel website.\n")
+    
+    # Keep functionality alive
+    try:
+        # Run server in main thread or subprocess
+        run_server()
+    except KeyboardInterrupt:
+        print("Stopping...")
+        ngrok.kill()
+
+if __name__ == "__main__":
+    if not os.path.exists("server.py"):
+        print("❌ Error: server.py not found. Make sure you are in the root of the cloned repository.")
+    else:
+        try:
+            install_dependencies()
+            print("✅ Dependencies installed.")
+            start_ngrok()
+        except Exception as e:
+            print(f"❌ Error: {e}")

requirements.txt

@@ -7,3 +7,4 @@ setuptools
 huggingface-hub
 requests
 cryptography
+llama-cpp-python

web_client/src/components/InteractionLab.tsx

@@ -12,12 +12,26 @@ export const InteractionLab = () => {
     const [prompt, setPrompt] = useState("");
     const [loading, setLoading] = useState(false);
     const [result, setResult] = useState<any>(null);
+    const [serverUrl, setServerUrl] = useState(() => localStorage.getItem("upif_server_url") || "");
+
+    const handleUrlChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const url = e.target.value;
+        setServerUrl(url);
+        localStorage.setItem("upif_server_url", url);
+    };
 
     const handleExecute = async () => {
         if (!prompt.trim()) return;
+
+        let baseUrl = serverUrl.replace(/\/$/, ""); // Remove trailing slash
+        if (!baseUrl) {
+            alert("Please enter the Colab/Backend URL first.");
+            return;
+        }
+
         setLoading(true);
         try {
-            const res = await fetch('/api/analyze', {
+            const res = await fetch(`${baseUrl}/api/analyze`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json'
@@ -99,7 +113,18 @@ export const InteractionLab = () => {
                             ))}
                         </div>
 
-                        <div className="mt-6">
+                        <div className="mt-6 flex flex-col gap-4">
+                            <div>
+                                <label className="text-xs font-bold text-slate-500 uppercase tracking-widest mb-2 block">Backend Connection</label>
+                                <input
+                                    type="text"
+                                    placeholder="Paste Colab/Ngrok URL here (e.g. https://xxxx.ngrok-free.app)"
+                                    className="w-full bg-slate-900 border border-slate-800 rounded-lg px-3 py-2 text-xs text-blue-400 font-mono outline-none focus:border-blue-500 transition"
+                                    value={serverUrl}
+                                    onChange={handleUrlChange}
+                                />
+                            </div>
+
                             <button
                                 onClick={handleExecute}
                                 disabled={loading}