Merge branch 'main' of https://github.com/Digital-Transformation-TNT/website_content_tnt

.gitignore

@@ -3,3 +3,4 @@ frontend/dist/
 __pycache__/
 *.pyc
 .env
+server_*.log

backend/app/api/flux2.py

@@ -0,0 +1,287 @@
+from __future__ import annotations
+
+import os
+import threading
+import time
+import uuid
+from pathlib import Path
+from typing import Any
+
+import httpx
+from fastapi import APIRouter, HTTPException
+from fastapi.responses import FileResponse
+from pydantic import BaseModel
+from gradio_client import Client, handle_file
+
+WANGP_URL = "https://00114dcf4c286c050a.gradio.live/"
+OUTPUT_DIR = Path(__file__).resolve().parent.parent / "flux2_outputs"
+OUTPUT_DIR.mkdir(exist_ok=True)
+
+_client = None
+_client_lock = threading.Lock()
+
+def _get_client():
+    global _client
+    if _client is not None:
+        return _client
+    with _client_lock:
+        if _client is not None:
+            return _client
+        try:
+            _client = Client(WANGP_URL)
+        except Exception as e:
+            raise RuntimeError(f"Cannot connect to Wangp API at {WANGP_URL}: {e}")
+    return _client
+
+DEFAULT_VIDEO = {
+    "video": handle_file(
+        "https://github.com/gradio-app/gradio/raw/main/demo/video_component/files/world.mp4"
+    )
+}
+DEFAULT_IMAGE = handle_file(
+    "https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/bus.png"
+)
+DEFAULT_AUDIO = handle_file(
+    "https://github.com/gradio-app/gradio/raw/main/test/test_files/audio_sample.wav"
+)
+DEFAULT_FILE = handle_file(
+    "https://github.com/gradio-app/gradio/raw/main/test/test_files/sample_file.pdf"
+)
+
+_tasks: dict[str, dict[str, Any]] = {}
+_tasks_lock = threading.Lock()
+
+router = APIRouter(prefix="/api/flux2", tags=["flux2"])
+
+
+class GenRequest(BaseModel):
+    prompt: str
+    negative_prompt: str = ""
+    resolution: str = "1024x1024"
+    num_inference_steps: int = 4
+    guidance_scale: float = 5.0
+    seed: int = -1
+    batch_size: int = 1
+
+
+def _extract_images(result) -> list:
+    if not result:
+        return []
+    if isinstance(result, (list, tuple)):
+        for item in result:
+            if isinstance(item, list):
+                return item
+            if isinstance(item, dict) and ("image" in item or "video" in item):
+                return [item]
+        if all(isinstance(x, dict) for x in result if x):
+            return result
+    return []
+
+
+def _download_image(img_info: Any, dest: Path):
+    if isinstance(img_info, dict):
+        img = img_info.get("image", img_info.get("video", {}))
+        if isinstance(img, dict):
+            path = img.get("path", img.get("url", ""))
+        else:
+            path = str(img) if img else ""
+    else:
+        path = str(img_info)
+
+    if not path:
+        raise ValueError("No image path found")
+
+    if path.startswith("/"):
+        url = f"{WANGP_URL.rstrip('/')}/file={path.lstrip('/')}"
+    elif path.startswith("http"):
+        url = path
+    else:
+        url = f"{WANGP_URL.rstrip('/')}/file={path}"
+
+    with httpx.Client(timeout=120.0, follow_redirects=True) as c:
+        resp = c.get(url)
+        resp.raise_for_status()
+        dest.write_bytes(resp.content)
+
+
+def _generate(task_id: str, params: dict):
+    try:
+        with _tasks_lock:
+            _tasks[task_id] = {"status": "processing"}
+
+        result = _get_client().predict(
+            prompt=params["prompt"],
+            negative_prompt=params.get("negative_prompt", ""),
+            alt_prompt="",
+            resolution=params.get("resolution", "1024x1024"),
+            video_length=81,
+            duration_seconds=0,
+            pause_seconds=0,
+            batch_size=params.get("batch_size", 1),
+            seed=params.get("seed", -1),
+            num_inference_steps=params.get("num_inference_steps", 4),
+            guidance_scale=params.get("guidance_scale", 5),
+            guidance2_scale=5,
+            guidance3_scale=5,
+            guidance_phases="1",
+            model_switch_phase="1",
+            flow_shift=5,
+            sample_solver="",
+            temperature=0.8,
+            top_p=0.9,
+            top_k=50,
+            loras_choices=[],
+            loras_multipliers="",
+            image_refs=[],
+            image_refs_relative_size=50,
+            remove_background_images_ref="0",
+            frames_positions="",
+            image_prompt_type="",
+            image_start=[],
+            image_end=[],
+            image_guide=DEFAULT_IMAGE,
+            image_mask=DEFAULT_IMAGE,
+            control_net_weight=1,
+            control_net_weight2=1,
+            denoising_strength=1,
+            masking_strength=0.25,
+            mask_expand=0,
+            model_mode="0",
+            prompt_enhancer="",
+            film_grain_intensity=0,
+            film_grain_saturation=0.5,
+            temporal_upsampling="",
+            spatial_upsampling="",
+            video_guide_outpainting="#",
+            video_guide_outpainting_ratio="",
+            override_profile="-1",
+            override_attention="auto",
+            alt_guidance_scale=1,
+            alt_scale=0,
+            audio_guidance_scale=1,
+            audio_scale=1,
+            embedded_guidance_scale=1,
+            repeat_generation=1,
+            multi_prompts_gen_type="PG",
+            multi_images_gen_type="0",
+            skip_steps_cache_type="",
+            skip_steps_multiplier="1.75",
+            skip_steps_start_step_perc=0,
+            self_refiner_setting="0",
+            self_refiner_f_uncertainty=0,
+            self_refiner_certain_percentage=0.999,
+            output_filename="",
+            mode="",
+            video_source=DEFAULT_VIDEO,
+            video_guide=DEFAULT_VIDEO,
+            video_mask=DEFAULT_VIDEO,
+            keep_frames_video_guide="",
+            keep_frames_video_source="",
+            input_video_strength=1,
+            audio_guide=DEFAULT_AUDIO,
+            audio_guide2=DEFAULT_AUDIO,
+            audio_source=DEFAULT_AUDIO,
+            replace_voice_sample=DEFAULT_AUDIO,
+            replace_voice_sample2=DEFAULT_AUDIO,
+            custom_guide=DEFAULT_FILE,
+            replace_voice_method="",
+            postprocess_audio="",
+            postprocess_audio_prompt="",
+            postprocess_audio_neg_prompt="",
+            speakers_locations="0:45 55:100",
+            sliding_window_size=81,
+            sliding_window_overlap=5,
+            sub_parallel_window_size=0,
+            sub_parallel_window_overlap=17,
+            sliding_window_color_correction_strength=0,
+            sliding_window_overlap_noise=0,
+            sliding_window_discard_last_frames=0,
+            sliding_window_trim_first_frames=0,
+            NAG_scale=1,
+            NAG_tau=3.5,
+            NAG_alpha=0.5,
+            perturbation_switch="0",
+            perturbation_layers=[9],
+            perturbation_start_perc=10,
+            perturbation_end_perc=90,
+            apg_switch="0",
+            cfg_star_switch="0",
+            cfg_zero_step=-1,
+            min_frames_if_references="1",
+            RIFLEx_setting="0",
+            force_fps="",
+            api_name="/save_inputs_1",
+        )
+
+        images = _extract_images(result)
+        saved = []
+        for i, img_info in enumerate(images):
+            try:
+                path = OUTPUT_DIR / f"{task_id}_{i}.png"
+                _download_image(img_info, path)
+                saved.append(
+                    {
+                        "index": i,
+                        "url": f"/api/flux2/file/{task_id}_{i}.png",
+                        "width": img_info.get("image", {}).get("width"),
+                        "height": img_info.get("image", {}).get("height"),
+                    }
+                    if isinstance(img_info, dict)
+                    else {"index": i, "url": f"/api/flux2/file/{task_id}_{i}.png"}
+                )
+            except Exception as e:
+                saved.append({"index": i, "error": str(e)})
+
+        with _tasks_lock:
+            _tasks[task_id] = {"status": "done", "images": saved}
+
+    except Exception as e:
+        import traceback
+
+        with _tasks_lock:
+            _tasks[task_id] = {
+                "status": "error",
+                "error": str(e),
+                "traceback": traceback.format_exc(),
+            }
+
+
+@router.get("/health")
+async def api_health():
+    try:
+        c = _get_client()
+        endpoints = c.view_api(all_endpoints=True, return_format="dict") if hasattr(c, "view_api") else {}
+        return {"connected": True, "url": WANGP_URL}
+    except Exception as e:
+        return {"connected": False, "url": WANGP_URL, "error": str(e)}
+
+
+@router.post("/generate")
+async def api_generate(req: GenRequest):
+    task_id = str(uuid.uuid4())
+    with _tasks_lock:
+        _tasks[task_id] = {"status": "queued"}
+
+    thread = threading.Thread(
+        target=_generate, args=(task_id, req.model_dump()), daemon=True
+    )
+    thread.start()
+
+    return {"task_id": task_id, "status": "queued"}
+
+
+@router.get("/status/{task_id}")
+async def api_status(task_id: str):
+    with _tasks_lock:
+        task = _tasks.get(task_id)
+    if not task:
+        raise HTTPException(404, "Task not found")
+    return task
+
+
+@router.get("/file/{filename:path}")
+async def api_file(filename: str):
+    path = OUTPUT_DIR / filename
+    if not path.exists():
+        raise HTTPException(404, "File not found")
+    return FileResponse(str(path), media_type="image/png")

backend/app/api/video.py

@@ -8,7 +8,7 @@ import time
 from urllib.parse import unquote, urlparse
 
 import httpx
-from fastapi import APIRouter, HTTPException, UploadFile, File, Form
+from fastapi import APIRouter, HTTPException, UploadFile, File, Form, Request
 from fastapi.responses import FileResponse, Response, StreamingResponse
 from pydantic import BaseModel
 

backend/app/main.py

@@ -31,7 +31,7 @@ _here = os.path.dirname(os.path.abspath(__file__))
 _parent = os.path.dirname(_here)
 sys.path.insert(0, _parent)
 
-from .api import common, download, cut, shuffle, dub, listing, video, auth, drive, history_api
+from .api import common, download, cut, shuffle, dub, listing, video, auth, drive, history_api, flux2
 
 app = FastAPI(title="TNT Group - AI Content Create", version="1.0.0")
 
@@ -53,6 +53,7 @@ app.include_router(video.router)
 app.include_router(auth.router)
 app.include_router(drive.router)
 app.include_router(history_api.router)
+app.include_router(flux2.router)
 
 
 @app.get("/api/health")

frontend/src/App.jsx

@@ -9,6 +9,7 @@ import Guide from "./pages/Guide";
 import Support from "./pages/Support";
 import Placeholder from "./pages/Placeholder";
 import ListingImage from "./pages/ListingImage";
+import Flux2Gen from "./pages/Flux2Gen";
 import CreateVideo from "./pages/CreateVideo";
 import AdminUsers from "./pages/AdminUsers";
 import Login from "./pages/Login";
@@ -28,6 +29,7 @@ const router = createBrowserRouter([
       { path: "/xao", element: <ShuffleVideo /> },
       { path: "/dub", element: <DubVideo /> },
       { path: "/listing-anh", element: <ListingImage /> },
+      { path: "/flux2", element: <Flux2Gen /> },
       { path: "/tao-video", element: <CreateVideo /> },
       { path: "/huong-dan", element: <Guide /> },
       { path: "/ho-tro", element: <Support /> },

frontend/src/components/Layout.jsx

@@ -73,7 +73,7 @@ export default function Layout() {
         }}>
           <Outlet />
           <iframe
-            src={connected && url ? `/api/video/gradio-proxy/` : "about:blank"}
+            src={connected && url ? url : "about:blank"}
             style={{
               flex: 1,
               width: "100%",
@@ -81,6 +81,7 @@ export default function Layout() {
               display: connected ? "block" : "none",
             }}
             allow="clipboard-read; clipboard-write; fullscreen"
+            sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
             title="Gradio Console"
           />
         </div>

frontend/src/pages/CreateVideo.jsx

@@ -94,16 +94,6 @@ export default function CreateVideo() {
         )}
       </div>
 
-      {/* Iframe Gradio UI khi đã kết nối */}
-      {connected && (
-        <iframe
-          src={url}
-          style={{ flex: 1, width: "100%", border: "none" }}
-          allow="clipboard-read; clipboard-write"
-          sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
-        />
-      )}
-
       {/* Hướng dẫn khi chưa kết nối */}
       {!connected && (
         <div style={{

frontend/src/pages/Flux2Gen.jsx

@@ -0,0 +1,536 @@
+import { useState, useCallback, useRef } from "react";
+import { IcBolt, IcDownload as IcDl, IcImage, IcSliders } from "../components/Icons";
+
+const RESOLUTIONS = [
+  { label: "1024×1024 (Square)", value: "1024x1024" },
+  { label: "1280×720 (Landscape)", value: "1280x720" },
+  { label: "720×1280 (Portrait)", value: "720x1280" },
+  { label: "1600×400 (Panorama)", value: "1600x400" },
+  { label: "1280×544 (Cinema)", value: "1280x544" },
+  { label: "1104×832 (3:2)", value: "1104x832" },
+  { label: "960×960 (Sq. small)", value: "960x960" },
+];
+
+const STYLES = {
+  container: {
+    maxWidth: 960,
+    margin: "0 auto",
+  },
+  header: {
+    marginBottom: 28,
+  },
+  headerTitle: {
+    fontSize: 22,
+    fontWeight: 800,
+    margin: "0 0 4px",
+    display: "flex",
+    alignItems: "center",
+    gap: 10,
+  },
+  headerBadge: {
+    fontSize: 11,
+    fontWeight: 700,
+    padding: "3px 9px",
+    borderRadius: 10,
+    background: "var(--orange-soft)",
+    color: "var(--orange-700)",
+  },
+  headerSub: {
+    color: "var(--ink-2)",
+    fontSize: 14,
+    margin: 0,
+  },
+  card: {
+    background: "var(--white)",
+    border: "1px solid var(--line)",
+    borderRadius: "var(--radius)",
+    padding: 24,
+    boxShadow: "var(--shadow)",
+    marginBottom: 20,
+  },
+  label: {
+    fontSize: 13,
+    fontWeight: 600,
+    color: "var(--ink-2)",
+    marginBottom: 8,
+    display: "block",
+  },
+  textarea: {
+    width: "100%",
+    fontFamily: "inherit",
+    fontSize: 14,
+    color: "var(--ink)",
+    border: "1px solid var(--line)",
+    borderRadius: "var(--radius-sm)",
+    padding: "12px 14px",
+    background: "var(--white)",
+    outline: "none",
+    resize: "vertical",
+    minHeight: 120,
+    lineHeight: 1.6,
+  },
+  paramGrid: {
+    display: "grid",
+    gridTemplateColumns: "repeat(auto-fill, minmax(160px, 1fr))",
+    gap: 16,
+  },
+  paramLabel: {
+    fontSize: 12,
+    fontWeight: 600,
+    color: "var(--muted)",
+    marginBottom: 4,
+    display: "block",
+  },
+  input: {
+    width: "100%",
+    fontFamily: "inherit",
+    fontSize: 14,
+    color: "var(--ink)",
+    border: "1px solid var(--line)",
+    borderRadius: "var(--radius-sm)",
+    padding: "9px 11px",
+    background: "var(--white)",
+    outline: "none",
+  },
+  select: {
+    width: "100%",
+    fontFamily: "inherit",
+    fontSize: 14,
+    color: "var(--ink)",
+    border: "1px solid var(--line)",
+    borderRadius: "var(--radius-sm)",
+    padding: "9px 11px",
+    background: "var(--white)",
+    outline: "none",
+    cursor: "pointer",
+  },
+  generateBtn: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+    border: "none",
+    background: "var(--orange)",
+    color: "#fff",
+    padding: "12px 28px",
+    borderRadius: "var(--radius-sm)",
+    fontSize: 15,
+    fontWeight: 700,
+    cursor: "pointer",
+    transition: "all .15s ease",
+    width: "100%",
+    marginTop: 18,
+  },
+  gallery: {
+    display: "grid",
+    gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))",
+    gap: 16,
+  },
+  imgCard: {
+    border: "1px solid var(--line)",
+    borderRadius: "var(--radius)",
+    padding: 12,
+    background: "var(--white)",
+  },
+  img: {
+    width: "100%",
+    height: "auto",
+    borderRadius: "var(--radius-sm)",
+    display: "block",
+    background: "#f5f0ea",
+  },
+  downloadBtn: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 6,
+    border: "1px solid var(--line)",
+    background: "var(--white)",
+    color: "var(--ink)",
+    padding: "7px 14px",
+    borderRadius: "var(--radius-sm)",
+    fontSize: 13,
+    fontWeight: 600,
+    cursor: "pointer",
+    marginTop: 8,
+    width: "100%",
+    justifyContent: "center",
+  },
+  statusBox: {
+    padding: "14px 18px",
+    borderRadius: "var(--radius-sm)",
+    fontSize: 14,
+    marginBottom: 18,
+    display: "flex",
+    alignItems: "center",
+    gap: 10,
+  },
+  spinner: {
+    width: 20,
+    height: 20,
+    border: "3px solid var(--line)",
+    borderTopColor: "var(--orange)",
+    borderRadius: "50%",
+    animation: "proc-spin .8s linear infinite",
+    flex: "0 0 20px",
+  },
+  detailBtn: {
+    border: "none",
+    background: "none",
+    color: "var(--orange)",
+    cursor: "pointer",
+    fontSize: 12,
+    fontWeight: 600,
+    padding: 0,
+    marginTop: 6,
+    textDecoration: "underline",
+  },
+};
+
+function formatTime(s) {
+  const m = Math.floor(s / 60);
+  const sec = s % 60;
+  return m > 0 ? `${m}m ${sec}s` : `${sec}s`;
+}
+
+export default function Flux2Gen() {
+  const [prompt, setPrompt] = useState("a cozy reading nook with warm sunlight");
+  const [negativePrompt, setNegativePrompt] = useState("");
+  const [resolution, setResolution] = useState("1024x1024");
+  const [steps, setSteps] = useState(4);
+  const [guidance, setGuidance] = useState(5);
+  const [seed, setSeed] = useState(-1);
+  const [batch, setBatch] = useState(1);
+  const [showAdvanced, setShowAdvanced] = useState(false);
+
+  const [running, setRunning] = useState(false);
+  const [status, setStatus] = useState(null);
+  const [images, setImages] = useState([]);
+  const [error, setError] = useState(null);
+  const pollRef = useRef(null);
+  const startTimeRef = useRef(null);
+
+  const pollStatus = useCallback(async (taskId) => {
+    try {
+      const res = await fetch(`/api/flux2/status/${taskId}`);
+      const data = await res.json();
+
+      if (data.status === "done") {
+        setRunning(false);
+        setStatus("done");
+        setImages(data.images || []);
+        clearInterval(pollRef.current);
+        return;
+      }
+      if (data.status === "error") {
+        setRunning(false);
+        setStatus("error");
+        setError(data.error || "Generation failed");
+        clearInterval(pollRef.current);
+        return;
+      }
+      if (data.status === "processing") {
+        const elapsed = startTimeRef.current
+          ? Math.floor((Date.now() - startTimeRef.current) / 1000)
+          : 0;
+        setStatus(`Generating... (${formatTime(elapsed)})`);
+      }
+    } catch (e) {
+      setRunning(false);
+      setStatus("error");
+      setError(e.message);
+      clearInterval(pollRef.current);
+    }
+  }, []);
+
+  const handleGenerate = useCallback(async () => {
+    if (!prompt.trim()) return;
+
+    setRunning(true);
+    setStatus("Queued...");
+    setImages([]);
+    setError(null);
+    startTimeRef.current = Date.now();
+
+    try {
+      const res = await fetch("/api/flux2/generate", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          prompt: prompt.trim(),
+          negative_prompt: negativePrompt.trim(),
+          resolution,
+          num_inference_steps: steps,
+          guidance_scale: guidance,
+          seed,
+          batch_size: batch,
+        }),
+      });
+      const data = await res.json();
+
+      if (!data.task_id) throw new Error(data.error || "No task_id returned");
+
+      setStatus("Queued...");
+      pollRef.current = setInterval(() => pollStatus(data.task_id), 1500);
+      pollStatus(data.task_id);
+    } catch (e) {
+      setRunning(false);
+      setStatus("error");
+      setError(e.message);
+    }
+  }, [prompt, negativePrompt, resolution, steps, guidance, seed, batch, pollStatus]);
+
+  const downloadAll = useCallback(() => {
+    images.forEach((img, i) => {
+      if (img.url) {
+        const a = document.createElement("a");
+        a.href = img.url;
+        a.download = `flux2_${i + 1}.png`;
+        a.click();
+      }
+    });
+  }, [images]);
+
+  return (
+    <div style={styles.container}>
+      <div style={styles.header}>
+        <div style={styles.headerTitle}>
+          <IcBolt size={22} />
+          Flux2 Klein 9B
+          <span style={styles.headerBadge}>Text-to-Image</span>
+        </div>
+        <p style={styles.headerSub}>
+          Generate images using Flux2 Klein 9B via Wangp API
+        </p>
+      </div>
+
+      <div style={styles.card}>
+        <div style={{ marginBottom: 16 }}>
+          <label style={styles.label}>Prompt</label>
+          <textarea
+            style={styles.textarea}
+            value={prompt}
+            onChange={(e) => setPrompt(e.target.value)}
+            placeholder="Describe what you want to see..."
+            disabled={running}
+          />
+        </div>
+
+        <div>
+          <button
+            onClick={() => setShowAdvanced(!showAdvanced)}
+            style={{
+              ...styles.detailBtn,
+              display: "flex",
+              alignItems: "center",
+              gap: 6,
+              marginBottom: showAdvanced ? 16 : 0,
+            }}
+          >
+            <IcSliders size={14} />
+            {showAdvanced ? "Hide" : "Show"} advanced parameters
+          </button>
+        </div>
+
+        {showAdvanced && (
+          <>
+            <div style={{ marginBottom: 16 }}>
+              <label style={styles.label}>Negative Prompt</label>
+              <textarea
+                style={{ ...styles.textarea, minHeight: 60 }}
+                value={negativePrompt}
+                onChange={(e) => setNegativePrompt(e.target.value)}
+                placeholder="What to avoid in the image..."
+                disabled={running}
+              />
+            </div>
+
+            <div style={styles.paramGrid}>
+              <div>
+                <label style={styles.paramLabel}>Resolution</label>
+                <select
+                  style={styles.select}
+                  value={resolution}
+                  onChange={(e) => setResolution(e.target.value)}
+                  disabled={running}
+                >
+                  {RESOLUTIONS.map((r) => (
+                    <option key={r.value} value={r.value}>
+                      {r.label}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              <div>
+                <label style={styles.paramLabel}>Steps</label>
+                <input
+                  style={styles.input}
+                  type="number"
+                  value={steps}
+                  onChange={(e) => setSteps(Number(e.target.value))}
+                  min={1}
+                  max={50}
+                  disabled={running}
+                />
+              </div>
+
+              <div>
+                <label style={styles.paramLabel}>Guidance</label>
+                <input
+                  style={styles.input}
+                  type="number"
+                  value={guidance}
+                  onChange={(e) => setGuidance(Number(e.target.value))}
+                  min={1}
+                  max={20}
+                  step={0.5}
+                  disabled={running}
+                />
+              </div>
+
+              <div>
+                <label style={styles.paramLabel}>Seed (-1 = random)</label>
+                <input
+                  style={styles.input}
+                  type="number"
+                  value={seed}
+                  onChange={(e) => setSeed(Number(e.target.value))}
+                  min={-1}
+                  disabled={running}
+                />
+              </div>
+
+              <div>
+                <label style={styles.paramLabel}>Batch Size</label>
+                <input
+                  style={styles.input}
+                  type="number"
+                  value={batch}
+                  onChange={(e) => setBatch(Number(e.target.value))}
+                  min={1}
+                  max={4}
+                  disabled={running}
+                />
+              </div>
+            </div>
+          </>
+        )}
+
+        <button
+          style={{
+            ...styles.generateBtn,
+            opacity: running || !prompt.trim() ? 0.6 : 1,
+            cursor:
+              running || !prompt.trim() ? "not-allowed" : "pointer",
+          }}
+          onClick={handleGenerate}
+          disabled={running || !prompt.trim()}
+        >
+          {running ? (
+            <>
+              <div style={styles.spinner} />
+              Generating...
+            </>
+          ) : (
+            <>
+              <IcBolt size={18} />
+              Generate
+            </>
+          )}
+        </button>
+      </div>
+
+      {status && !error && !images.length && (
+        <div
+          style={{
+            ...styles.statusBox,
+            background: "var(--orange-tint)",
+            border: "1px solid #f6d9c2",
+            color: "var(--ink-2)",
+          }}
+        >
+          <div style={styles.spinner} />
+          {status}
+        </div>
+      )}
+
+      {error && (
+        <div
+          style={{
+            ...styles.statusBox,
+            background: "var(--red-soft)",
+            border: "1px solid #f5c6c6",
+            color: "var(--red)",
+          }}
+        >
+          <span>✕</span>
+          {error}
+        </div>
+      )}
+
+      {images.length > 0 && (
+        <div>
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              marginBottom: 14,
+            }}
+          >
+            <div className="section-title">
+              Results ({images.length})
+            </div>
+            <button
+              style={styles.downloadBtn}
+              onClick={downloadAll}
+            >
+              <IcDl size={14} />
+              Download All
+            </button>
+          </div>
+
+          <div style={styles.gallery}>
+            {images.map((img, i) =>
+              img.error ? (
+                <div key={i} style={styles.imgCard}>
+                  <div
+                    style={{
+                      padding: 40,
+                      textAlign: "center",
+                      color: "var(--red)",
+                      fontSize: 13,
+                    }}
+                  >
+                    Failed: {img.error}
+                  </div>
+                </div>
+              ) : (
+                <div key={i} style={styles.imgCard}>
+                  <img
+                    src={img.url}
+                    alt={`Generated ${i + 1}`}
+                    style={styles.img}
+                    loading="lazy"
+                  />
+                  <button
+                    style={styles.downloadBtn}
+                    onClick={() => {
+                      const a = document.createElement("a");
+                      a.href = img.url;
+                      a.download = `flux2_${i + 1}.png`;
+                      a.click();
+                    }}
+                  >
+                    <IcDl size={14} />
+                    Download
+                  </button>
+                </div>
+              )
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}