Update src/App.jsx

src/App.jsx

@@ -4,8 +4,11 @@ import {
   Settings, Layers, Cpu, Maximize, Zap, Wifi, WifiOff, ChevronDown, ChevronUp, Play, RefreshCw, Link as LinkIcon
 } from 'lucide-react';
 
-// Link mặc định (Nếu sai, bạn có thể nhập đè trên giao diện web)
-const DEFAULT_API_URL = "https://thay-link-ngrok-cua-ban-vao-day.ngrok-free.app";
+// 👇 LINK DATABASE CỦA BẠN (Thay link Firebase của bạn vào đây)
+const FIREBASE_DB_URL = "https://uploadlink-28426-default-rtdb.firebaseio.com/api_url.json";
+
+// Link dự phòng (Local hoặc mặc định)
+const DEFAULT_API_URL = "pretty-dory-noble.ngrok-free.app";
 
 const SAMPLERS = [
   "Euler a", "Euler", "LMS", "Heun", "DPM2", "DPM2 a",
@@ -16,8 +19,6 @@ const SAMPLERS = [
 const App = () => {
   // --- STATE ---
   const [apiUrl, setApiUrl] = useState(DEFAULT_API_URL);
-  const [isCustomUrl, setIsCustomUrl] = useState(false); // Check nếu user đang nhập tay
-
   const [prompt, setPrompt] = useState('A futuristic city with neon lights, cyberpunk style');
   const [negPrompt, setNegPrompt] = useState('blurry, bad quality, watermark, text, ugly, distorted, nsfw');
   
@@ -52,33 +53,53 @@ const App = () => {
     setLogs(prev => [`[${timestamp}] ${message}`, ...prev].slice(0, 50));
   };
 
-  // Hàm kết nối server (dùng cho cả lúc mới vào và lúc bấm nút Connect)
-  const connectToServer = async (urlToConnect) => {
-    const targetUrl = urlToConnect || apiUrl;
-    
-    // Nếu vẫn là link mặc định chưa sửa thì bỏ qua
-    if (targetUrl.includes("thay-link")) {
-        setServerStatus('disconnected');
-        return;
-    }
-
-    // Clean URL (bỏ dấu / ở cuối nếu có)
-    const cleanUrl = targetUrl.replace(/\/$/, "");
-    if (cleanUrl !== apiUrl) setApiUrl(cleanUrl);
-
+  // Hàm kết nối server (Logic Firebase + Manual)
+  const connectToServer = async (manualUrl = null) => {
     setFetchingInfo(true);
     setError('');
-    
+    let targetUrl = manualUrl || apiUrl;
+
     try {
-      addLog(`Connecting to: ${cleanUrl}...`);
+      // 1. Nếu không nhập tay, thử lấy từ Firebase trước
+      if (!manualUrl && FIREBASE_DB_URL.includes("firebaseio.com")) {
+        addLog("☁️ Đang lấy link từ Firebase...");
+        try {
+          const fireRes = await fetch(FIREBASE_DB_URL);
+          if (fireRes.ok) {
+            const fireUrl = await fireRes.json();
+            if (fireUrl && fireUrl.startsWith("http")) {
+              targetUrl = fireUrl;
+              addLog(`🔗 Tìm thấy server: ${fireUrl}`);
+            }
+          }
+        } catch (e) {
+          console.warn("Lỗi Firebase:", e);
+          addLog("⚠️ Không lấy được link từ Firebase, dùng link mặc định.");
+        }
+      }
+
+      // Clean URL
+      const cleanUrl = targetUrl.replace(/\/$/, "");
+      setApiUrl(cleanUrl); // Cập nhật UI
+
+      // FIX: Xử lý nhẹ nhàng nếu là link mặc định thay vì báo lỗi đỏ
+      if (cleanUrl.includes("thay-link")) {
+        setServerStatus('disconnected');
+        addLog("⚠️ Chưa có link Server. Vui lòng nhập link Ngrok vào ô bên dưới.");
+        setFetchingInfo(false);
+        return; // Dừng tại đây, không ném lỗi
+      }
+
+      addLog(`Kiểm tra kết nối: ${cleanUrl}...`);
       
+      // 2. Gọi API /info để lấy danh sách model
       const res = await fetch(`${cleanUrl}/info`, {
         headers: { "ngrok-skip-browser-warning": "69420" }
       });
       
       if (!res.ok) {
           const text = await res.text();
-          throw new Error(`Server Error (${res.status}): ${text.slice(0, 50)}...`);
+          throw new Error(`Lỗi Server (${res.status}): ${text.slice(0, 50)}`);
       }
       
       const data = await res.json();
@@ -92,13 +113,13 @@ const App = () => {
       if (data.upscalers?.length > 0) setUpscalers(data.upscalers);
       
       setServerStatus('connected');
-      addLog(`✅ Connected! Found ${data.models.length} checkpoints.`);
+      addLog(`✅ Kết nối thành công!`);
       
     } catch (err) {
       console.error(err);
       setServerStatus('disconnected');
       setError(err.message);
-      addLog(`❌ Connection Failed: ${err.message}`);
+      addLog(`❌ Kết nối thất bại: ${err.message}`);
     } finally {
       setFetchingInfo(false);
     }
@@ -111,13 +132,13 @@ const App = () => {
 
   const handleGenerate = async () => {
     if (serverStatus !== 'connected') {
-      setError('Please connect to server first!');
+      setError('Vui lòng kết nối Server trước!');
       return;
     }
 
     setLoading(true);
     setError('');
-    addLog(`🎨 Generating...`);
+    addLog(`🎨 Đang vẽ...`);
 
     try {
       let upscalerValue = "None";
@@ -139,17 +160,17 @@ const App = () => {
         body: JSON.stringify(payload),
       });
 
-      if (!response.ok) throw new Error(`Server Error: ${response.status}`);
+      if (!response.ok) throw new Error(`Lỗi Server: ${response.status}`);
       const data = await response.json();
       
       if (data.image) {
         setGeneratedImage(data.image);
-        addLog('✨ Image finished!');
+        addLog('✨ Đã vẽ xong!');
       }
 
     } catch (err) {
       setError(err.message);
-      addLog(`Error: ${err.message}`);
+      addLog(`Lỗi: ${err.message}`);
     } finally {
       setLoading(false);
     }
@@ -197,14 +218,14 @@ const App = () => {
                   className="flex-1 bg-slate-950 border border-slate-700 text-[10px] rounded-lg px-2 py-2 outline-none focus:border-red-500 font-mono"
                 />
                 <button 
-                  onClick={() => connectToServer()} 
+                  onClick={() => connectToServer(apiUrl)} 
                   disabled={fetchingInfo}
                   className="bg-red-500/20 hover:bg-red-500/30 text-red-400 border border-red-500/50 rounded-lg px-3 py-2 transition-colors"
                 >
                   {fetchingInfo ? <Loader2 className="w-4 h-4 animate-spin" /> : <RefreshCw className="w-4 h-4" />}
                 </button>
               </div>
-              <p className="text-[10px] text-slate-500 mt-2">Paste link Ngrok từ Kaggle vào đây và bấm Connect.</p>
+              <p className="text-[10px] text-slate-500 mt-2">Dán link Ngrok (hoặc kiểm tra Firebase) rồi bấm nút Connect.</p>
             </section>
           )}