Update src/App.jsx

src/App.jsx

@@ -1,12 +1,11 @@
 import React, { useState, useEffect } from 'react';
 import { 
   Image as ImageIcon, Loader2, Sparkles, Terminal, AlertCircle, 
-  Settings, Layers, Cpu, Maximize, Zap, Wifi, WifiOff, ChevronDown, ChevronUp, Play, RefreshCw
+  Settings, Layers, Cpu, Maximize, Zap, Wifi, WifiOff, ChevronDown, ChevronUp, Play, RefreshCw, Link as LinkIcon
 } from 'lucide-react';
 
-// ⚠️ QUAN TRỌNG: Thay link Ngrok cố định của bạn vào đây
-// Ví dụ: https://pretty-dory-noble.ngrok-free.app
-const API_URL = "https://thay-link-ngrok-cua-ban-vao-day.ngrok-free.app";
+// 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";
 
 const SAMPLERS = [
   "Euler a", "Euler", "LMS", "Heun", "DPM2", "DPM2 a",
@@ -15,6 +14,10 @@ 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');
   
@@ -41,28 +44,42 @@ const App = () => {
   const [fetchingInfo, setFetchingInfo] = useState(false);
   const [error, setError] = useState('');
   const [logs, setLogs] = useState([]);
-  const [serverStatus, setServerStatus] = useState('unknown');
+  const [serverStatus, setServerStatus] = useState('unknown'); // unknown, connected, disconnected
 
+  // --- FUNCTIONS ---
   const addLog = (message) => {
     const timestamp = new Date().toLocaleTimeString();
     setLogs(prev => [`[${timestamp}] ${message}`, ...prev].slice(0, 50));
   };
 
-  const fetchServerInfo = async () => {
-    if (API_URL.includes("thay-link")) return;
+  // 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);
+
     setFetchingInfo(true);
+    setError('');
+    
     try {
-      addLog("Connecting to Kaggle Server...");
+      addLog(`Connecting to: ${cleanUrl}...`);
       
-      // 👇 THÊM HEADER NÀY ĐỂ BỎ QUA MÀN HÌNH CẢNH BÁO CỦA NGROK
-      const res = await fetch(`${API_URL}/info`, {
-        headers: {
-          "ngrok-skip-browser-warning": "69420", 
-        }
+      const res = await fetch(`${cleanUrl}/info`, {
+        headers: { "ngrok-skip-browser-warning": "69420" }
       });
       
-      if (!res.ok) throw new Error("Server not ready");
+      if (!res.ok) {
+          const text = await res.text();
+          throw new Error(`Server Error (${res.status}): ${text.slice(0, 50)}...`);
+      }
       
       const data = await res.json();
       
@@ -75,56 +92,46 @@ const App = () => {
       if (data.upscalers?.length > 0) setUpscalers(data.upscalers);
       
       setServerStatus('connected');
-      addLog(`Connected! Found ${data.models.length} checkpoints.`);
+      addLog(`✅ Connected! Found ${data.models.length} checkpoints.`);
       
     } catch (err) {
       console.error(err);
       setServerStatus('disconnected');
-      addLog("Failed to fetch model list. Is server running?");
+      setError(err.message);
+      addLog(`❌ Connection Failed: ${err.message}`);
     } finally {
       setFetchingInfo(false);
     }
   };
 
+  // Auto connect khi mới vào
   useEffect(() => {
-    fetchServerInfo();
+    connectToServer();
   }, []);
 
   const handleGenerate = async () => {
-    if (serverStatus === 'disconnected') {
-      setError('Chưa kết nối được Server!');
+    if (serverStatus !== 'connected') {
+      setError('Please connect to server first!');
       return;
     }
 
     setLoading(true);
     setError('');
-    addLog(`Generating... ${selectedCheckpoint}`);
+    addLog(`🎨 Generating...`);
 
     try {
       let upscalerValue = "None";
-      if (selectedUpscaler !== "None") {
-        upscalerValue = selectedUpscaler;
-      } else if (upscaleFactor > 1) {
-        upscalerValue = upscaleFactor.toString();
-      }
+      if (selectedUpscaler !== "None") upscalerValue = selectedUpscaler;
+      else if (upscaleFactor > 1) upscalerValue = upscaleFactor.toString();
 
       const payload = {
-        prompt: prompt,
-        negative_prompt: negPrompt,
-        steps: steps,
-        cfg_scale: cfgScale,
-        seed: seed,
-        sampler_name: sampler,
-        checkpoint: selectedCheckpoint,
-        lora: selectedLora,
-        vae: selectedVae,
-        upscaler: upscalerValue,
-        upscale_strength: upscaleStrength
+        prompt, negative_prompt: negPrompt, steps, cfg_scale: cfgScale, seed,
+        sampler_name: sampler, checkpoint: selectedCheckpoint, lora: selectedLora,
+        vae: selectedVae, upscaler: upscalerValue, upscale_strength: upscaleStrength
       };
 
-      const response = await fetch(`${API_URL}/generate`, {
+      const response = await fetch(`${apiUrl}/generate`, {
         method: 'POST',
-        // 👇 THÊM HEADER VÀO CẢ CHỖ NÀY NỮA
         headers: { 
           'Content-Type': 'application/json',
           "ngrok-skip-browser-warning": "69420",
@@ -137,7 +144,7 @@ const App = () => {
       
       if (data.image) {
         setGeneratedImage(data.image);
-        addLog('Image finished!');
+        addLog('✨ Image finished!');
       }
 
     } catch (err) {
@@ -149,21 +156,20 @@ const App = () => {
   };
 
   return (
-    <div className="min-h-screen bg-slate-950 text-slate-200 font-sans p-4">
+    <div className="min-h-screen bg-slate-950 text-slate-200 font-sans p-4 selection:bg-purple-500/30">
+      
       {/* Header */}
-      <header className="border-b border-slate-800 bg-slate-900/80 backdrop-blur-md sticky top-0 z-50 mb-6 rounded-xl">
+      <header className="border-b border-slate-800 bg-slate-900/80 backdrop-blur-md sticky top-0 z-50 mb-6 rounded-xl shadow-lg">
         <div className="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
           <div className="flex items-center gap-3">
-            <div className="bg-gradient-to-br from-indigo-500 to-purple-600 p-2 rounded-lg">
+            <div className="bg-gradient-to-br from-indigo-500 to-purple-600 p-2 rounded-lg shadow-inner">
               <Sparkles className="w-5 h-5 text-white" />
             </div>
-            <h1 className="font-bold text-lg text-white">Kaggle Studio <span className="text-purple-400">Pro</span></h1>
+            <h1 className="font-bold text-lg text-white tracking-tight">Kaggle Studio <span className="text-purple-400">Pro</span></h1>
           </div>
+
           <div className="flex items-center gap-3">
-             <button onClick={fetchServerInfo} className="p-2 hover:bg-slate-800 rounded-full transition-colors" title="Refresh Models">
-                <RefreshCw className={`w-4 h-4 ${fetchingInfo ? 'animate-spin text-purple-400' : 'text-slate-400'}`} />
-             </button>
-             <div className={`flex items-center gap-2 px-3 py-1.5 rounded-full border ${serverStatus === 'connected' ? 'bg-green-500/10 border-green-500/20 text-green-400' : 'bg-red-500/10 border-red-500/20 text-red-400'}`}>
+             <div className={`flex items-center gap-2 px-3 py-1.5 rounded-full border transition-all ${serverStatus === 'connected' ? 'bg-green-500/10 border-green-500/20 text-green-400' : 'bg-red-500/10 border-red-500/20 text-red-400'}`}>
                 {serverStatus === 'connected' ? <Wifi className="w-4 h-4" /> : <WifiOff className="w-4 h-4" />}
                 <span className="text-xs font-bold">{serverStatus === 'connected' ? 'ONLINE' : 'OFFLINE'}</span>
              </div>
@@ -172,16 +178,47 @@ const App = () => {
       </header>
 
       <main className="max-w-7xl mx-auto grid lg:grid-cols-12 gap-6">
-        {/* LEFT: CONTROLS */}
+        
+        {/* --- LEFT: CONTROLS --- */}
         <div className="lg:col-span-4 xl:col-span-3 flex flex-col gap-5">
+          
+          {/* 🔴 CONNECTION BOX (Hiện khi mất kết nối) */}
+          {serverStatus !== 'connected' && (
+            <section className="bg-red-900/10 border border-red-500/30 rounded-xl p-4 animate-in fade-in slide-in-from-top-2">
+              <label className="text-xs font-bold text-red-400 uppercase mb-2 flex items-center gap-1">
+                <LinkIcon className="w-3 h-3" /> Server Connection
+              </label>
+              <div className="flex gap-2">
+                <input 
+                  type="text" 
+                  value={apiUrl} 
+                  onChange={(e) => setApiUrl(e.target.value)} 
+                  placeholder="https://xxx.ngrok-free.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()} 
+                  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>
+            </section>
+          )}
+
           {/* Models */}
-          <section className="bg-slate-900 border border-slate-800 rounded-xl p-4 space-y-4">
+          <section className="bg-slate-900 border border-slate-800 rounded-xl p-4 space-y-4 shadow-sm">
             <div>
-              <label className="text-xs font-bold text-slate-400 uppercase mb-1 flex items-center gap-1"><Layers className="w-3 h-3" /> Checkpoint</label>
-              <select value={selectedCheckpoint} onChange={e => setSelectedCheckpoint(e.target.value)} className="w-full bg-slate-950 border border-slate-700 text-xs rounded-lg p-2.5 outline-none focus:border-purple-500 text-slate-200">
+              <label className="text-xs font-bold text-slate-400 uppercase mb-1 flex items-center gap-1">
+                <Layers className="w-3 h-3" /> Checkpoint
+              </label>
+              <select value={selectedCheckpoint} onChange={e => setSelectedCheckpoint(e.target.value)} className="w-full bg-slate-950 border border-slate-700 text-xs rounded-lg p-2.5 outline-none focus:border-purple-500 text-slate-200 transition-all">
                 {checkpoints.map(m => <option key={m} value={m}>{m}</option>)}
               </select>
             </div>
+
             <div className="grid grid-cols-2 gap-2">
                 <div>
                   <label className="text-[10px] font-bold text-slate-400 uppercase mb-1">LoRA</label>
@@ -199,24 +236,28 @@ const App = () => {
           </section>
 
           {/* Prompt */}
-          <section className="bg-slate-900 border border-slate-800 rounded-xl p-4 flex flex-col gap-3">
-             <textarea value={prompt} onChange={e => setPrompt(e.target.value)} className="w-full bg-slate-950 border border-slate-700 rounded-lg p-3 text-sm focus:border-purple-500 outline-none h-28 placeholder:text-slate-600 text-slate-200" placeholder="Positive Prompt..." />
-             <textarea value={negPrompt} onChange={e => setNegPrompt(e.target.value)} className="w-full bg-slate-950 border border-slate-700 rounded-lg p-3 text-xs focus:border-red-500 outline-none h-16 placeholder:text-slate-600 text-slate-200" placeholder="Negative Prompt..." />
+          <section className="bg-slate-900 border border-slate-800 rounded-xl p-4 flex flex-col gap-3 shadow-sm">
+             <textarea value={prompt} onChange={e => setPrompt(e.target.value)} className="w-full bg-slate-950 border border-slate-700 rounded-lg p-3 text-sm focus:border-purple-500 outline-none h-28 placeholder:text-slate-600 text-slate-200 resize-none transition-all" placeholder="Positive Prompt..." />
+             <textarea value={negPrompt} onChange={e => setNegPrompt(e.target.value)} className="w-full bg-slate-950 border border-slate-700 rounded-lg p-3 text-xs focus:border-red-500 outline-none h-16 placeholder:text-slate-600 text-slate-200 resize-none transition-all" placeholder="Negative Prompt..." />
           </section>
 
-          {/* Advanced */}
-          <section className="bg-slate-900 border border-slate-800 rounded-xl overflow-hidden">
+          {/* Advanced Toggle */}
+          <section className="bg-slate-900 border border-slate-800 rounded-xl overflow-hidden shadow-sm">
             <button onClick={() => setShowAdvanced(!showAdvanced)} className="w-full flex items-center justify-between p-3 hover:bg-slate-800/50 transition-colors text-slate-300">
               <span className="text-xs font-bold uppercase flex items-center gap-2"><Settings className="w-3 h-3" /> Advanced</span>
               {showAdvanced ? <ChevronUp className="w-3 h-3" /> : <ChevronDown className="w-3 h-3" />}
             </button>
+
             {showAdvanced && (
-              <div className="p-4 border-t border-slate-800 bg-slate-950/30 space-y-4">
+              <div className="p-4 border-t border-slate-800 bg-slate-950/30 space-y-4 animate-in slide-in-from-top-2">
+                {/* Steps & CFG */}
                 <div className="space-y-3">
                     <div className="flex justify-between text-[10px] uppercase text-slate-500 font-bold"><span>Steps: {steps}</span><span>CFG: {cfgScale}</span></div>
                     <input type="range" min="10" max="60" value={steps} onChange={e => setSteps(Number(e.target.value))} className="w-full h-1 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-500" />
                     <input type="range" min="1" max="20" step="0.5" value={cfgScale} onChange={e => setCfgScale(Number(e.target.value))} className="w-full h-1 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-500" />
                 </div>
+
+                {/* Sampler & Seed */}
                 <div className="grid grid-cols-2 gap-2">
                     <div>
                         <label className="text-[10px] font-bold text-slate-500 uppercase block mb-1">Sampler</label>
@@ -229,42 +270,80 @@ const App = () => {
                         <input type="number" value={seed} onChange={e => setSeed(Number(e.target.value))} className="w-full bg-slate-950 border border-slate-700 text-[10px] rounded p-1.5 outline-none text-slate-200" />
                     </div>
                 </div>
+
+                {/* Upscale */}
                 <div className="pt-2 border-t border-slate-800/50">
-                    <label className="text-[10px] font-bold text-slate-400 uppercase mb-2 flex items-center gap-1"><Maximize className="w-3 h-3" /> Upscale</label>
+                    <label className="text-[10px] font-bold text-slate-400 uppercase mb-2 flex items-center gap-1"><Maximize className="w-3 h-3" /> Upscale (High-Res)</label>
+                    
                     <div className="mb-2">
                       <select value={selectedUpscaler} onChange={e => setSelectedUpscaler(e.target.value)} className="w-full bg-slate-950 border border-slate-700 text-[10px] rounded p-1.5 outline-none mb-1 text-slate-200">
                           {upscalers.map(u => <option key={u} value={u}>{u}</option>)}
                       </select>
                     </div>
+
                     <div className="flex gap-2 mb-2">
                         {[1.0, 1.5, 2.0].map(f => (
-                            <button key={f} onClick={() => setUpscaleFactor(f)} className={`flex-1 py-1 text-[10px] rounded border ${upscaleFactor === f ? 'bg-purple-600 border-purple-500 text-white' : 'bg-slate-950 border-slate-700 text-slate-400'}`}>
+                            <button key={f} onClick={() => setUpscaleFactor(f)} className={`flex-1 py-1 text-[10px] rounded border transition-colors ${upscaleFactor === f ? 'bg-purple-600 border-purple-500 text-white' : 'bg-slate-950 border-slate-700 text-slate-400 hover:bg-slate-800'}`}>
                                 {f === 1.0 ? 'Off' : `${f}x`}
                             </button>
                         ))}
                     </div>
+                    {upscaleFactor > 1 && (
+                        <div>
+                             <label className="text-[10px] text-slate-500 block mb-1">Denoise Strength: {upscaleStrength}</label>
+                             <input type="range" min="0.1" max="0.5" step="0.05" value={upscaleStrength} onChange={e => setUpscaleStrength(Number(e.target.value))} className="w-full h-1 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-500" />
+                        </div>
+                    )}
                 </div>
               </div>
             )}
           </section>
 
-          <button onClick={handleGenerate} disabled={loading} className={`w-full py-3 rounded-xl font-bold text-white shadow-lg flex items-center justify-center gap-2 ${loading ? 'bg-slate-800 opacity-50' : 'bg-gradient-to-r from-purple-600 to-pink-600 hover:scale-[0.98]'}`}>
+          <button onClick={handleGenerate} disabled={loading} className={`w-full py-3 rounded-xl font-bold text-white shadow-lg flex items-center justify-center gap-2 transition-all ${loading ? 'bg-slate-800 opacity-50 cursor-not-allowed' : 'bg-gradient-to-r from-purple-600 to-pink-600 hover:scale-[0.98] hover:shadow-purple-500/25'}`}>
             {loading ? <Loader2 className="animate-spin" /> : <Play className="fill-current" />}
             {loading ? 'GENERATING...' : 'GENERATE'}
           </button>
-          {error && <div className="p-3 bg-red-900/20 border border-red-500/20 rounded-lg text-red-400 text-xs flex items-center gap-2"><AlertCircle className="w-4 h-4" />{error}</div>}
+          
+          {error && <div className="p-3 bg-red-900/20 border border-red-500/20 rounded-lg text-red-400 text-xs flex items-center gap-2 animate-in fade-in slide-in-from-top-1"><AlertCircle className="w-4 h-4 shrink-0" />{error}</div>}
+
         </div>
 
         {/* --- RIGHT: PREVIEW --- */}
         <div className="lg:col-span-8 xl:col-span-9 flex flex-col gap-4">
-          <div className="bg-slate-900 border border-slate-800 rounded-2xl flex items-center justify-center min-h-[500px] relative overflow-hidden">
-             {!generatedImage && <div className="text-slate-600 flex flex-col items-center"><ImageIcon className="w-12 h-12 mb-2 opacity-20" /><span className="text-sm font-mono opacity-50">Ready to Imagine</span></div>}
-             {generatedImage && <img src={generatedImage} alt="Result" className="max-w-full max-h-full object-contain shadow-2xl" />}
+          <div className="bg-slate-900 border border-slate-800 rounded-2xl flex items-center justify-center min-h-[500px] relative overflow-hidden shadow-2xl">
+             {/* Background Grid */}
+             <div className="absolute inset-0 opacity-20 pointer-events-none" 
+                 style={{backgroundImage: 'radial-gradient(#4f46e5 1px, transparent 1px)', backgroundSize: '24px 24px'}}>
+             </div>
+
+             {!generatedImage && <div className="text-slate-600 flex flex-col items-center z-10"><ImageIcon className="w-16 h-16 mb-4 opacity-20" /><span className="text-sm font-mono opacity-50">Ready to Imagine</span></div>}
+             
+             {generatedImage && (
+               <div className="relative w-full h-full p-2 z-10">
+                 <img src={generatedImage} alt="Result" className="w-full h-full object-contain rounded-lg shadow-lg animate-in zoom-in duration-300" />
+                 <a href={generatedImage} download="image.png" className="absolute top-4 right-4 bg-slate-900/80 text-white p-2 rounded-lg hover:bg-purple-600 transition-colors border border-slate-700"><Maximize className="w-5 h-5"/></a>
+               </div>
+             )}
+
+             {/* Loading Overlay */}
+             {loading && (
+               <div className="absolute inset-0 bg-slate-950/80 backdrop-blur-sm z-20 flex flex-col items-center justify-center">
+                 <div className="w-16 h-16 border-4 border-slate-700 border-t-purple-500 rounded-full animate-spin"></div>
+                 <p className="mt-4 text-purple-400 text-sm font-mono animate-pulse">Diffusion Process Running...</p>
+               </div>
+             )}
           </div>
-          <div className="bg-black/40 border border-slate-800 rounded-xl p-3 h-32 overflow-y-auto font-mono text-[10px] text-slate-400">
-            {logs.map((log, i) => <div key={i}>{log}</div>)}
+          
+          <div className="bg-black rounded-xl border border-slate-800 p-3 h-36 overflow-y-auto font-mono text-[10px] text-slate-400 scrollbar-thin scrollbar-thumb-slate-800">
+            <div className="flex items-center gap-2 mb-2 pb-2 border-b border-slate-900 text-slate-500 font-bold uppercase"><Terminal className="w-3 h-3" /> System Logs</div>
+            {logs.map((log, i) => (
+              <div key={i} className="hover:text-slate-200 transition-colors py-0.5 border-l-2 border-transparent hover:border-purple-500 pl-2">
+                <span className="opacity-30 mr-2">{i+1}</span>{log}
+              </div>
+            ))}
           </div>
         </div>
+
       </main>
     </div>
   );