Update src/App.jsx

src/App.jsx

@@ -4,10 +4,10 @@ import {
   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 = "pretty-dory-noble.ngrok-free.app";
+// ⚠️ 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";
 
-// 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",
@@ -15,33 +15,27 @@ const SAMPLERS = [
 ];
 
 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 [upscaleFactor, setUpscaleFactor] = useState(1.0); 
   const [showAdvanced, setShowAdvanced] = useState(false);
 
-  // System
   const [generatedImage, setGeneratedImage] = useState(null);
   const [loading, setLoading] = useState(false);
   const [fetchingInfo, setFetchingInfo] = useState(false);
@@ -49,28 +43,32 @@ const App = () => {
   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`);
+      
+      // 👇 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", 
+        }
+      });
+      
       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
+        setSelectedCheckpoint(data.models[0]);
       }
       if (data.loras?.length > 0) setLoras(data.loras);
       if (data.vaes?.length > 0) setVaes(data.vaes);
@@ -88,7 +86,6 @@ const App = () => {
     }
   };
 
-  // Auto fetch khi mount
   useEffect(() => {
     fetchServerInfo();
   }, []);
@@ -104,7 +101,6 @@ const App = () => {
     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;
@@ -128,7 +124,11 @@ const App = () => {
 
       const response = await fetch(`${API_URL}/generate`, {
         method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
+        // 👇 THÊM HEADER VÀO CẢ CHỖ NÀY NỮA
+        headers: { 
+          'Content-Type': 'application/json',
+          "ngrok-skip-browser-warning": "69420",
+        },
         body: JSON.stringify(payload),
       });
 
@@ -149,10 +149,9 @@ const App = () => {
   };
 
   return (
-    <div className="min-h-screen bg-slate-950 text-slate-200 font-sans">
-      
+    <div className="min-h-screen bg-slate-950 text-slate-200 font-sans p-4">
       {/* Header */}
-      <header className="border-b border-slate-800 bg-slate-900/80 backdrop-blur-md sticky top-0 z-50">
+      <header className="border-b border-slate-800 bg-slate-900/80 backdrop-blur-md sticky top-0 z-50 mb-6 rounded-xl">
         <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">
@@ -160,7 +159,6 @@ const App = () => {
             </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'}`} />
@@ -173,34 +171,27 @@ const App = () => {
         </div>
       </header>
 
-      <main className="max-w-7xl mx-auto p-4 lg:p-6 grid lg:grid-cols-12 gap-6">
-        
-        {/* --- LEFT: CONTROLS --- */}
+      <main className="max-w-7xl mx-auto 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>
+              <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">
+                {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>
-                  <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">
+                  <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 text-slate-200">
                     {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">
+                  <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 text-slate-200">
                     {vaes.map(m => <option key={m} value={m}>{m}</option>)}
                   </select>
                 </div>
@@ -209,51 +200,42 @@ const App = () => {
 
           {/* 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..." />
+             <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>
 
-          {/* Advanced Toggle */}
+          {/* Advanced */}
           <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">
+                        <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 text-slate-200">
                             {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" />
+                        <label className="text-[10px] font-bold text-slate-500 uppercase block mb-1">Seed</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 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 (High-Res)</label>
-                    
-                    {/* Upscale Model Dropdown */}
+                    <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>
                     <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">
+                      <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'}`}>
@@ -261,12 +243,6 @@ const App = () => {
                             </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>
             )}
@@ -276,9 +252,7 @@ const App = () => {
             {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 --- */}
@@ -287,15 +261,13 @@ const App = () => {
              {!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;
+export default App;