Update src/App.js

src/App.js

@@ -1,25 +1,301 @@
-import logo from './logo.svg';
-import './App.css';
+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
+} from 'lucide-react';
+
+// ⚠️ CẤU HÌNH: DÁN LINK NGROK CỦA BẠN VÀO ĐÂY
+const API_URL = "https://thay-link-ngrok-cua-ban-vao-day.ngrok-free.app";
+
+// Danh sách Sampler (Giữ nguyên vì đây là config cứng của Diffusers)
+const SAMPLERS = [
+  "Euler a", "Euler", "LMS", "Heun", "DPM2", "DPM2 a",
+  "DPM++ 2S a", "DPM++ 2M", "DPM++ SDE", "DPM++ 2M SDE",
+  "DPM++ 2M Karras", "DPM++ SDE Karras", "DDIM", "UniPC"
+];
+
+const App = () => {
+  // --- STATE ---
+  // Core Inputs
+  const [prompt, setPrompt] = useState('A futuristic city with neon lights, cyberpunk style');
+  const [negPrompt, setNegPrompt] = useState('blurry, bad quality, watermark, text, ugly, distorted, nsfw');
+  
+  // Dynamic Lists (Dữ liệu từ Server)
+  const [checkpoints, setCheckpoints] = useState(["Loading..."]);
+  const [loras, setLoras] = useState(["None"]);
+  const [vaes, setVaes] = useState(["Default"]);
+  const [upscalers, setUpscalers] = useState(["None"]);
+
+  // Selections
+  const [selectedCheckpoint, setSelectedCheckpoint] = useState("");
+  const [selectedLora, setSelectedLora] = useState("None");
+  const [selectedVae, setSelectedVae] = useState("Default");
+  const [selectedUpscaler, setSelectedUpscaler] = useState("None");
+  
+  // Advanced Settings
+  const [steps, setSteps] = useState(30);
+  const [cfgScale, setCfgScale] = useState(7.0);
+  const [seed, setSeed] = useState(-1);
+  const [sampler, setSampler] = useState("DPM++ 2M Karras");
+  const [upscaleStrength, setUpscaleStrength] = useState(0.35);
+  const [upscaleFactor, setUpscaleFactor] = useState(1.0); // 1.0 = No upscale
+  const [showAdvanced, setShowAdvanced] = useState(false);
+
+  // System
+  const [generatedImage, setGeneratedImage] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [fetchingInfo, setFetchingInfo] = useState(false);
+  const [error, setError] = useState('');
+  const [logs, setLogs] = useState([]);
+  const [serverStatus, setServerStatus] = useState('unknown');
+
+  // --- FUNCTIONS ---
+  const addLog = (message) => {
+    const timestamp = new Date().toLocaleTimeString();
+    setLogs(prev => [`[${timestamp}] ${message}`, ...prev].slice(0, 50));
+  };
+
+  // Hàm lấy danh sách model từ Kaggle
+  const fetchServerInfo = async () => {
+    if (API_URL.includes("thay-link")) return;
+    
+    setFetchingInfo(true);
+    try {
+      addLog("Connecting to Kaggle Server...");
+      const res = await fetch(`${API_URL}/info`);
+      if (!res.ok) throw new Error("Server not ready");
+      
+      const data = await res.json();
+      
+      // Cập nhật danh sách
+      if (data.models?.length > 0) {
+        setCheckpoints(data.models);
+        setSelectedCheckpoint(data.models[0]); // Auto select first
+      }
+      if (data.loras?.length > 0) setLoras(data.loras);
+      if (data.vaes?.length > 0) setVaes(data.vaes);
+      if (data.upscalers?.length > 0) setUpscalers(data.upscalers);
+      
+      setServerStatus('connected');
+      addLog(`Connected! Found ${data.models.length} checkpoints.`);
+      
+    } catch (err) {
+      console.error(err);
+      setServerStatus('disconnected');
+      addLog("Failed to fetch model list. Is server running?");
+    } finally {
+      setFetchingInfo(false);
+    }
+  };
+
+  // Auto fetch khi mount
+  useEffect(() => {
+    fetchServerInfo();
+  }, []);
+
+  const handleGenerate = async () => {
+    if (serverStatus === 'disconnected') {
+      setError('Chưa kết nối được Server!');
+      return;
+    }
+
+    setLoading(true);
+    setError('');
+    addLog(`Generating... ${selectedCheckpoint}`);
+
+    try {
+      // Logic Upscaler: Ưu tiên Model name, nếu ko chọn model thì dùng factor (High-Res Fix)
+      let upscalerValue = "None";
+      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
+      };
+
+      const response = await fetch(`${API_URL}/generate`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload),
+      });
+
+      if (!response.ok) throw new Error(`Server Error: ${response.status}`);
+      const data = await response.json();
+      
+      if (data.image) {
+        setGeneratedImage(data.image);
+        addLog('Image finished!');
+      }
+
+    } catch (err) {
+      setError(err.message);
+      addLog(`Error: ${err.message}`);
+    } finally {
+      setLoading(false);
+    }
+  };
 
-function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
+    <div className="min-h-screen bg-slate-950 text-slate-200 font-sans">
+      
+      {/* Header */}
+      <header className="border-b border-slate-800 bg-slate-900/80 backdrop-blur-md sticky top-0 z-50">
+        <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">
+              <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>
+          </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'}`}>
+                {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>
+          </div>
+        </div>
       </header>
+
+      <main className="max-w-7xl mx-auto p-4 lg:p-6 grid lg:grid-cols-12 gap-6">
+        
+        {/* --- LEFT: CONTROLS --- */}
+        <div className="lg:col-span-4 xl:col-span-3 flex flex-col gap-5">
+          
+          {/* Models */}
+          <section className="bg-slate-900 border border-slate-800 rounded-xl p-4 space-y-4">
+            <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>
+              <div className="relative">
+                <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">
+                  {checkpoints.map(m => <option key={m} value={m}>{m}</option>)}
+                </select>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-2">
+                <div>
+                  <label className="text-[10px] font-bold text-slate-400 uppercase mb-1">LoRA</label>
+                  <select value={selectedLora} onChange={e => setSelectedLora(e.target.value)} className="w-full bg-slate-950 border border-slate-700 text-xs rounded-lg p-2 outline-none">
+                    {loras.map(m => <option key={m} value={m}>{m}</option>)}
+                  </select>
+                </div>
+                <div>
+                  <label className="text-[10px] font-bold text-slate-400 uppercase mb-1">VAE</label>
+                  <select value={selectedVae} onChange={e => setSelectedVae(e.target.value)} className="w-full bg-slate-950 border border-slate-700 text-xs rounded-lg p-2 outline-none">
+                    {vaes.map(m => <option key={m} value={m}>{m}</option>)}
+                  </select>
+                </div>
+            </div>
+          </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" 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" placeholder="Negative Prompt..." />
+          </section>
+
+          {/* Advanced Toggle */}
+          <section className="bg-slate-900 border border-slate-800 rounded-xl overflow-hidden">
+            <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">
+                {/* 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>
+                        <select value={sampler} onChange={e => setSampler(e.target.value)} className="w-full bg-slate-950 border border-slate-700 text-[10px] rounded p-1.5 outline-none">
+                            {SAMPLERS.map(s => <option key={s} value={s}>{s}</option>)}
+                        </select>
+                    </div>
+                    <div>
+                        <label className="text-[10px] font-bold text-slate-500 uppercase block mb-1">Seed (-1 = Random)</label>
+                        <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" />
+                    </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 (High-Res)</label>
+                    
+                    {/* Upscale Model Dropdown */}
+                    <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">
+                          {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'}`}>
+                                {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]'}`}>
+            {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>}
+
+        </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>
+          
+          <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>
+        </div>
+
+      </main>
     </div>
   );
-}
+};
 
 export default App;