Local AI Image Generator

Generator Dashboard

+ Create high-fidelity images completely locally on your external drive. +

+ +

+ {/* Left Side: Parameters & Input */} +

+ + Generation Workspace +

+ +

+ {/* Prompt Textarea */} +

+ Positive Prompt +

setPrompt(e.target.value)}
+                  placeholder="Enter a descriptive prompt (e.g. 'A futuristic city in cyberpunk aesthetic, high details, cinematic lighting')..."
+                  disabled={isGenerating}
+                />
+              </div>
+
+              {/* Negative Prompt Text Input */}
+              <div className="m3-text-field">
+                <label className="m3-text-field-label">Negative Prompt (Optional)</label>
+                <input
+                  type="text"
+                  className="m3-input"
+                  value={negativePrompt}
+                  onChange={(e) => setNegativePrompt(e.target.value)}
+                  placeholder="Items to avoid (e.g. 'blurry, low quality, deformed hands, texts')..."
+                  disabled={isGenerating}
+                />
+              </div>
+
+              {/* Configuration Status Chips (Material 3 style) */}
+              <div className="m3-text-field">
+                <label className="m3-text-field-label">Active Image Constraints</label>
+                <div className="chips-container">
+                  <div className="status-chip" onClick={() => setActiveTab("constraints")}>
+                    <Sliders size={14} />
+                    <span>Resolution: {constraints.width}x{constraints.height}</span>
+                  </div>
+                  <div className="status-chip" onClick={() => setActiveTab("constraints")}>
+                    <RefreshCw size={14} />
+                    <span>Steps: {constraints.steps}</span>
+                  </div>
+                  <div className="status-chip" onClick={() => setActiveTab("constraints")}>
+                    <Layers size={14} />
+                    <span>CFG: {constraints.cfgScale.toFixed(1)}</span>
+                  </div>
+                  <div className="status-chip" onClick={() => setActiveTab("constraints")}>
+                    <Sparkles size={14} />
+                    <span>Sampler: {constraints.sampler}</span>
+                  </div>
+                  <div className="status-chip" onClick={() => setActiveTab("constraints")}>
+                    <span>Seed: {constraints.seed === -1 ? "Random" : constraints.seed}</span>
+                  </div>
+                </div>
+              </div>
+
+              {/* Image to Image Dropzone Toggle */}
+              <div className="image-to-image-section">
+                <label className="m3-text-field-label" style={{ display: "block", marginBottom: "8px" }}>
+                  Image-to-Image Source (Optional)
+                </label>
+                <div className="image-dropzone" onClick={handleDropzoneClick}>
+                  <input
+                    type="file"
+                    ref={fileInputRef}
+                    style={{ display: "none" }}
+                    accept="image/*"
+                    onChange={handleFileChange}
+                    disabled={isGenerating}
+                  />
+
+                  {inputImage ? (
+                    <div style={{ position: "relative", width: "100%", height: "100%" }}>
+                      <img src={inputImage} className="dropped-image-preview" alt="Source" />
+                      <button
+                        className="m3-btn m3-btn-error"
+                        style={{
+                          position: "absolute",
+                          top: "4px",
+                          right: "4px",
+                          height: "30px",
+                          width: "30px",
+                          borderRadius: "50%",
+                          padding: 0
+                        }}
+                        onClick={clearInputImage}
+                      >
+                        ×
+                      </button>
+                    </div>
+                  ) : (
+                    <>
+                      <ImagePlus size={24} style={{ color: "var(--md-sys-color-primary)" }} />
+                      <span style={{ fontSize: "0.85rem", fontWeight: 500 }}>
+                        Click or drag image here for Image-to-Image guidance
+                      </span>
+                    </>
+                  )}
+                </div>
+              </div>
+
+              {/* Generate Trigger Button */}
+              <button
+                className="m3-btn m3-btn-filled"
+                style={{ height: "48px", marginTop: "8px" }}
+                onClick={handleGenerate}
+                disabled={isGenerating || !prompt.trim() || !activeModel}
+              >
+                <Sparkles size={18} />
+                <span>{!activeModel ? "Select Model to Generate" : "Generate Local Image"}</span>
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* Right Side: Image Output Preview */}
+        <div className="m3-card output-panel">
+          <div className="output-image-container">
+            {isGenerating || isCancelling || isRestartingBackend ? (
+              <div className="progress-overlay">
+                {isRestartingBackend ? (
+                  <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "16px", padding: "20px" }}>
+                    <div className="progress-spinner"></div>
+                    <div className="progress-text" style={{ fontSize: "1.1rem", fontWeight: 700, textAlign: "center" }}>
+                      Syncing Settings & Initializing...
+                    </div>
+                    {restartLoadProgress ? (
+                      <div style={{ width: "min(360px, 90%)" }}>
+                        <div style={{ display: "flex", justifyContent: "space-between", gap: "12px", fontSize: "0.82rem", fontWeight: 700, marginBottom: "6px" }}>
+                          <span>
+                            {restartLoadProgress.phase}
+                            {restartLoadProgress.speed ? ` (${restartLoadProgress.speed})` : ""}
+                          </span>
+                          <span>
+                            {restartLoadProgress.total > 0
+                              ? `Loaded ${restartLoadProgress.current} / ${restartLoadProgress.total} tensors`
+                              : `${Math.round(restartLoadProgress.progress)}%`}
+                          </span>
+                        </div>
+                        <div className="progress-bar-container" style={{ margin: 0 }}>
+                          <div
+                            className="progress-bar-fill"
+                            style={{ width: `${Math.min(100, Math.max(0, restartLoadProgress.progress))}%`, transition: "width 0.25s ease" }}
+                          ></div>
+                        </div>
+                        {(restartLoadProgress.backendMode || restartLoadProgress.device) && (
+                          <div style={{ fontSize: "0.78rem", opacity: 0.8, textAlign: "center", marginTop: "8px" }}>
+                            Loading on {restartLoadProgress.backendMode || "backend"}{restartLoadProgress.device ? ` • ${restartLoadProgress.device}` : ""}
+                          </div>
+                        )}
+                      </div>
+                    ) : (
+                      <p style={{ fontSize: "0.85rem", opacity: 0.8, textAlign: "center", maxWidth: "280px", margin: 0 }}>
+                        Adjusting inference settings and restarting the local model server.
+                      </p>
+                    )}
+                  </div>
+                ) : isCancelling ? (
+                  <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "16px", padding: "20px" }}>
+                    <div className="progress-spinner"></div>
+                    <div className="progress-text" style={{ fontSize: "1.1rem", fontWeight: 700, textAlign: "center" }}>
+                      Cancelling Generation...
+                    </div>
+                    <p style={{ fontSize: "0.85rem", opacity: 0.8, textAlign: "center", maxWidth: "280px", margin: 0 }}>
+                      Stopping CPU/GPU execution threads and reloading model weights. Please wait a moment.
+                    </p>
+                  </div>
+                ) : (
+                  <>
+                    <div className="progress-spinner"></div>
+                    <div className="progress-text" style={{ fontSize: "1.1rem", fontWeight: 700 }}>Generating Locally...</div>
+                    
+                    {isCpuFallback && (
+                      <div style={{ fontSize: "0.8rem", color: "var(--md-sys-color-primary)", fontWeight: 600, background: "var(--md-sys-color-primary-container)", padding: "4px 12px", borderRadius: "12px", margin: "4px 0 8px 0", animation: "pulse 2s infinite" }}>
+                        ⚠️ CPU Fallback Detected (Running Slower)
+                      </div>
+                    )}
+
+                    {/* Real-time stats display */}
+                    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "16px", width: "80%", margin: "8px 0 0 0", fontSize: "0.85rem", opacity: 0.9 }}>
+                      <div style={{ textAlign: "left" }}>
+                        <strong>Step:</strong> {currentStep} / {constraints.steps} ({constraints.steps - currentStep} left)
+                      </div>
+                      <div style={{ textAlign: "right" }}>
+                        <strong>Elapsed:</strong> {elapsedTime}s{generationSpeed && ` (${generationSpeed})`}
+                      </div>
+                    </div>
+
+                    <div className="progress-bar-container" style={{ margin: "4px 0 10px 0" }}>
+                      <div
+                        className="progress-bar-fill"
+                        style={{ width: `${generationProgress}%`, transition: "width 1s linear" }}
+                      ></div>
+                    </div>
+                    
+                    <div style={{ fontSize: "0.85rem", opacity: 0.8, display: "flex", gap: "8px", alignItems: "center" }}>
+                      <span>Progress: {generationProgress}%</span>
+                      <span>•</span>
+                      <span>Est. remaining: {estimatedLeftTime}s</span>
+                    </div>
+
+                    <button 
+                      className="m3-btn m3-btn-error" 
+                      style={{ marginTop: "16px", height: "36px", padding: "0 24px" }}
+                      onClick={handleCancelGeneration}
+                    >
+                      Stop Generating
+                    </button>
+                  </>
+                )}
+              </div>
+            ) : outputImage ? (
+              <img src={outputImage} className="output-image" alt="Generated Output" />
+            ) : errorMsg ? (
+              <div style={{ textAlign: "center", padding: "24px", color: "var(--md-sys-color-error)", display: "flex", flexDirection: "column", alignItems: "center", gap: "16px" }}>
+                <div style={{ background: "rgba(239, 68, 68, 0.1)", padding: "16px", borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center" }}>
+                  <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                  </svg>
+                </div>
+                <h3 style={{ margin: 0, fontSize: "1.2rem", fontWeight: "bold" }}>Generation Failed</h3>
+                <p style={{ margin: 0, fontSize: "0.95rem", opacity: 0.9, maxWidth: "320px", lineHeight: "1.4" }}>
+                  {errorMsg}
+                </p>
+                <div style={{ marginTop: "8px", fontSize: "0.85rem", opacity: 0.8, color: "var(--md-sys-color-on-surface-variant)" }}>
+                  Hint: Try lowering the resolution in the <strong>Image Constraints</strong> settings (e.g., to 512x512).
+                </div>
+              </div>
+            ) : (
+              <div style={{ textAlign: "center" }}>
+                <Sparkles className="output-placeholder-icon" />
+                <p className="output-placeholder-text">
+                  Your generated image will appear here.<br />
+                  Enter a prompt on the left and click Generate.
+                </p>
+              </div>
+            )}
+          </div>
+
+          {outputImage && !isGenerating && (
+            <>
+              {/* Telemetry info for previous generation */}
+              <div style={{ width: "100%", display: "flex", justifyContent: "space-between", marginTop: "12px", fontSize: "0.8rem", color: "var(--md-sys-color-outline)" }}>
+                <span>Seed: {outputSeed}</span>
+                {genDuration && <span>Inference Time: {genDuration.toFixed(1)}s</span>}
+              </div>
+              {/* Actions for generated image */}
+              <div className="image-actions">
+                <button className="m3-btn m3-btn-tonal" onClick={handleCopyImage}>
+                  {copySuccess ? <Check size={16} /> : <Copy size={16} />}
+                  <span>{copySuccess ? "Copied" : "Copy"}</span>
+                </button>
+                <button className="m3-btn m3-btn-outlined" onClick={handleDownload}>
+                  <Download size={16} />
+                  <span>Save to USB</span>
+                </button>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* History / Gallery Grid */}
+      <div className="gallery-section">
+        <div className="gallery-header">
+          <h3 className="m3-card-title" style={{ marginBottom: 0 }}>Recent Outputs Gallery</h3>
+          {selectedGalleryItems.length > 0 && (
+            <div className="gallery-selection-actions">
+              <span className="gallery-selection-count">{selectedGalleryItems.length} selected</span>
+              <button className="m3-btn m3-btn-tonal" onClick={useSelectedGalleryItem}>
+                <Check size={14} />
+                <span>Use</span>
+              </button>
+              <button className="m3-btn m3-btn-outlined" onClick={downloadSelectedGalleryItems}>
+                <Download size={14} />
+                <span>Download</span>
+              </button>
+              <button className="m3-btn m3-btn-error" onClick={deleteSelectedGalleryItems}>
+                <Trash2 size={14} />
+                <span>Delete</span>
+              </button>
+              <button className="m3-btn m3-btn-outlined" onClick={clearGallerySelection}>
+                Clear
+              </button>
+            </div>
+          )}
+        </div>
+        {generatedImages.length === 0 ? (
+          <div className="m3-card gallery-empty">
+            No images generated in this session yet. Everything will be saved directly on your external drive.
+          </div>
+        ) : (
+          <>
+            <div className="gallery-hint">Click to select one image. Ctrl-click or Shift-click to select multiple.</div>
+            <div className="gallery-grid">
+              {generatedImages.map((img, idx) => (
+                <GalleryItem
+                  key={img.image || idx}
+                  img={img}
+                  idx={idx}
+                  isSelected={selectedGalleryIndexes.includes(idx)}
+                  onClick={toggleGallerySelection}
+                />
+              ))}
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default memo(Generator);
diff --git a/app/frontend/src/components/ImageConstraints.jsx b/app/frontend/src/components/ImageConstraints.jsx
new file mode 100644
index 0000000..7f551f1
--- /dev/null
+++ b/app/frontend/src/components/ImageConstraints.jsx
@@ -0,0 +1,302 @@
+import React, { memo } from "react";
+import { Crop, Sliders, Cpu, Info } from "lucide-react";
+
+const ASPECT_RATIOS = [
+  { id: "1:1", label: "1:1 Square", width: 512, height: 512, sdxl_width: 1024, sdxl_height: 1024, desc: "Social posts & avatars" },
+  { id: "4:3", label: "4:3 Photo", width: 640, height: 480, sdxl_width: 1152, sdxl_height: 864, desc: "Classic photo look" },
+  { id: "16:9", label: "16:9 Landscape", width: 768, height: 432, sdxl_width: 1216, sdxl_height: 684, desc: "Widescreen landscape" },
+  { id: "9:16", label: "9:16 Portrait", width: 432, height: 768, sdxl_width: 684, sdxl_height: 1216, desc: "Tall phone screen" }
+];
+
+const isSD15OrCustomModel = (modelName) => {
+  if (!modelName) return true;
+  const name = modelName.toLowerCase();
+  if (name.includes("flux") || name.includes("schnell")) return false;
+  if (name.includes("sdxl") || name.includes("lightning") || name.includes("turbo")) return false;
+  if (name.includes("sd3")) return false;
+  return true;
+};
+
+function ImageConstraints({ constraints, setConstraints, activeModel, specs, backendOptions }) {
+  const isSD15OrCustom = activeModel ? isSD15OrCustomModel(activeModel) : false;
+  const availableBackends = backendOptions?.options?.length
+    ? backendOptions.options
+    : [{ id: "cpu", label: "CPU", available: true }];
+
+  const updateConstraint = (key, value) => {
+    setConstraints((prev) => ({
+      ...prev,
+      [key]: value
+    }));
+  };
+
+  const handleAspectRatioChange = (ratio, sizeType) => {
+    const isSDXL = sizeType === "sdxl" && !isSD15OrCustom;
+    const selected = ASPECT_RATIOS.find((r) => r.id === ratio);
+    if (selected) {
+      let w = isSDXL ? selected.sdxl_width : selected.width;
+      let h = isSDXL ? selected.sdxl_height : selected.height;
+      if (isSD15OrCustom) {
+        if (w > h) {
+          h = Math.round((h * 512) / w);
+          w = 512;
+        } else {
+          w = Math.round((w * 512) / h);
+          h = 512;
+        }
+        w = Math.round(w / 64) * 64;
+        h = Math.round(h / 64) * 64;
+      }
+      updateConstraint("width", w);
+      updateConstraint("height", h);
+    }
+  };
+
+  const handleBackendChange = (backendType) => {
+    setConstraints((prev) => ({
+      ...prev,
+      backendType,
+      useGpu: backendType !== "cpu",
+    }));
+  };
+
+  return (
+    <div className="workspace-area">
+      <div className="workspace-title-section">
+        <h2 className="workspace-title">Image Constraints</h2>
+        <p className="workspace-subtitle">
+          Configure size, quality, and performance controls for image generation.
+        </p>
+      </div>
+
+      <div className="generator-layout">
+        {/* Left Column: Size & Quality */}
+        <div>
+          {/* Card 1: Picture Size & Shape */}
+          <div className="m3-card">
+            <h3 className="m3-card-title">
+              <Crop size={18} style={{ color: "var(--md-sys-color-primary)" }} />
+              1. Picture Size & Shape
+            </h3>
+            
+            {isSD15OrCustom && (
+              <div style={{
+                background: "rgba(251, 191, 36, 0.1)",
+                border: "1px solid rgb(251, 191, 36)",
+                color: "var(--md-sys-color-on-surface)",
+                padding: "12px",
+                borderRadius: "8px",
+                marginBottom: "16px",
+                fontSize: "0.85rem",
+                display: "flex",
+                gap: "8px",
+                alignItems: "flex-start"
+              }}>
+                <Info size={16} style={{ color: "rgb(251, 191, 36)", flexShrink: 0, marginTop: "2px" }} />
+                <div>
+                  <strong>Low-VRAM Protection Active:</strong> Capped at 512x512 for the loaded SD 1.x model (<code>{activeModel}</code>). Generating at larger sizes (like 1024x1024) is disabled to prevent out-of-memory crashes on your {specs && specs.gpu_name && !specs.gpu_name.includes("Loading") ? specs.gpu_name : "graphics processor"}.
+                </div>
+              </div>
+            )}
+
+            <div className="m3-field-group">
+              {/* Size switcher */}
+              <div className="m3-text-field">
+                <label className="m3-text-field-label">AI Generation Engine Optimization</label>
+                <div className="m3-segmented-button">
+                  {isSD15OrCustom ? (
+                    <div
+                      className="m3-segment-item disabled"
+                      style={{
+                        opacity: 0.5,
+                        cursor: "not-allowed",
+                        textDecoration: "line-through",
+                        backgroundColor: "var(--md-sys-color-surface-variant)"
+                      }}
+                      title="High Quality Mode is disabled for SD 1.x models."
+                    >
+                      High Quality Mode (1024px)
+                    </div>
+                  ) : (
+                    <div
+                      className={`m3-segment-item ${constraints.width >= 1024 ? "active" : ""}`}
+                      onClick={() => {
+                        updateConstraint("width", 1024);
+                        updateConstraint("height", 1024);
+                      }}
+                    >
+                      High Quality Mode (1024px)
+                    </div>
+                  )}
+                  <div
+                    className={`m3-segment-item ${constraints.width < 1024 || isSD15OrCustom ? "active" : ""}`}
+                    onClick={() => {
+                      updateConstraint("width", 512);
+                      updateConstraint("height", 512);
+                    }}
+                  >
+                    Standard Speed Mode (512px)
+                  </div>
+                </div>
+                <span style={{ fontSize: "0.75rem", color: "var(--md-sys-color-outline)", marginTop: "4px" }}>
+                  {isSD15OrCustom 
+                    ? "*Standard Speed Mode (512px) is forced for SD 1.5 / custom models to ensure stable local generations." 
+                    : "*Use High Quality (1024px) for Flux or SDXL models. Use Standard (512px) for SD 1.5."}
+                </span>
+              </div>
+
+              {/* Aspect Ratio Buttons */}
+              <div className="m3-text-field">
+                <label className="m3-text-field-label">Select Shape (Aspect Ratio)</label>
+                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "8px" }}>
+                  {ASPECT_RATIOS.map((ratio) => {
+                    const isActive = Math.abs((constraints.width / constraints.height) - (ratio.width / ratio.height)) < 0.1;
+                    return (
+                      <button
+                        key={ratio.id}
+                        className={`m3-btn m3-btn-outlined aspect-ratio-btn ${isActive ? "active" : ""}`}
+                        style={{
+                          height: "86px",
+                          display: "flex",
+                          flexDirection: "column",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          padding: "8px",
+                          borderRadius: "var(--md-shape-corner-medium)",
+                          borderColor: "var(--md-sys-color-outline-variant)"
+                        }}
+                        onClick={() => handleAspectRatioChange(ratio.id, isSD15OrCustom ? "sd15" : (constraints.width >= 1024 ? "sdxl" : "sd15"))}
+                      >
+                        <div className={`aspect-ratio-preview ratio-${ratio.id.replace(":", "-")}`}></div>
+                        <span style={{ fontWeight: 600, fontSize: "0.85rem", marginTop: "2px" }}>{ratio.label}</span>
+                        <span style={{ fontSize: "0.68rem", opacity: 0.7 }}>
+                          {isSD15OrCustom
+                            ? `Max: ${ratio.id === "1:1" ? "512x512" : ratio.id === "4:3" ? "512x384" : ratio.id === "16:9" ? "512x288" : "288x512"}`
+                            : ratio.desc}
+                        </span>
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Card 2: Quality & Logic */}
+          <div className="m3-card">
+            <h3 className="m3-card-title">
+              <Sliders size={18} style={{ color: "var(--md-sys-color-primary)" }} />
+              2. Quality, Speed & Logic
+            </h3>
+
+            <div className="m3-field-group">
+              {/* Quality Steps Slider */}
+              <div className="m3-slider-group">
+                <div className="m3-slider-header">
+                  <span className="m3-slider-label">Detail Steps (Inference speed)</span>
+                  <span className="m3-slider-value">{constraints.steps} steps</span>
+                </div>
+                <input
+                  type="range"
+                  className="m3-slider"
+                  value={constraints.steps}
+                  onChange={(e) => updateConstraint("steps", parseInt(e.target.value))}
+                  min="1"
+                  max="60"
+                />
+                <span style={{ fontSize: "0.75rem", color: "var(--md-sys-color-outline)", lineHeight: "1.3" }}>
+                  The number of times the AI cleans up the image. More steps = sharper details, but takes longer.
+                </span>
+              </div>
+
+              {/* CFG Scale Slider */}
+              <div className="m3-slider-group" style={{ marginTop: "8px" }}>
+                <div className="m3-slider-header">
+                  <span className="m3-slider-label">Prompt Strictness (Instruction obedience)</span>
+                  <span className="m3-slider-value">{constraints.cfgScale.toFixed(1)}</span>
+                </div>
+                <input
+                  type="range"
+                  className="m3-slider"
+                  value={constraints.cfgScale}
+                  onChange={(e) => updateConstraint("cfgScale", parseFloat(e.target.value))}
+                  min="1"
+                  max="15"
+                  step="0.5"
+                />
+                <span style={{ fontSize: "0.75rem", color: "var(--md-sys-color-outline)", lineHeight: "1.3" }}>
+                  How closely the AI follows your text prompt. Lower = more creative. Higher = more strict.
+                </span>
+              </div>
+
+              {/* Random Seed DNA */}
+              <div className="m3-text-field" style={{ marginTop: "8px" }}>
+                <label className="m3-text-field-label">Image Blueprint (DNA Seed)</label>
+                <div style={{ display: "flex", gap: "8px" }}>
+                  <input
+                    type="number"
+                    className="m3-input"
+                    value={constraints.seed}
+                    onChange={(e) => updateConstraint("seed", parseInt(e.target.value) || -1)}
+                    placeholder="-1 for a brand new image..."
+                    style={{ flex: 1, height: "40px" }}
+                  />
+                  <button
+                    className="m3-btn m3-btn-tonal"
+                    onClick={() => updateConstraint("seed", -1)}
+                    style={{ height: "40px" }}
+                  >
+                    Random (-1)
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Right Column: Speed & System */}
+        <div>
+          {/* Card 3: Performance hacks */}
+          <div className="m3-card">
+            <h3 className="m3-card-title">
+              <Cpu size={18} style={{ color: "var(--md-sys-color-primary)" }} />
+              3. System Settings
+            </h3>
+            
+            <div className="m3-field-group">
+              <div className="m3-text-field">
+                <label className="m3-text-field-label">Generation Backend</label>
+                <div className="m3-segmented-button">
+                  {availableBackends.map((backend) => (
+                    <div
+                      key={backend.id}
+                      className={`m3-segment-item ${constraints.backendType === backend.id || (!constraints.backendType && backend.id === "cpu") ? "active" : ""}`}
+                      onClick={() => handleBackendChange(backend.id)}
+                      title={backend.id === "cuda" ? "CUDA appears only when an NVIDIA CUDA backend is available." : undefined}
+                    >
+                      {backend.label}
+                    </div>
+                  ))}
+                </div>
+                <span style={{ fontSize: "0.75rem", color: "var(--md-sys-color-outline)", marginTop: "4px", lineHeight: 1.35 }}>
+                  CPU is slow but safest. Vulkan works on supported GPUs. CUDA is shown only when NVIDIA CUDA support is available.
+                </span>
+                {backendOptions?.unavailable?.length > 0 && (
+                  <div style={{ marginTop: "8px", display: "flex", flexDirection: "column", gap: "4px" }}>
+                    {backendOptions.unavailable.map((backend) => (
+                      <span key={backend.id} style={{ fontSize: "0.75rem", color: "var(--md-sys-color-error)", lineHeight: 1.35 }}>
+                        {backend.label} unavailable: {backend.reason}
+                      </span>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default memo(ImageConstraints);
diff --git a/app/frontend/src/components/ModelManager.jsx b/app/frontend/src/components/ModelManager.jsx
new file mode 100644
index 0000000..d451a39
--- /dev/null
+++ b/app/frontend/src/components/ModelManager.jsx
@@ -0,0 +1,845 @@
+import React, { memo, useState, useEffect } from "react";
+import { FolderOpen, DownloadCloud, RefreshCw, Database, Trash2, Square, HardDrive, Library, AlertTriangle } from "lucide-react";
+import { listLocalModels, startServer, stopServer, importModelFile, deleteModel, downloadModel, cancelModelDownload, getDownloadProgress, getBackendStatus, pingServer, formatBytes, normalizeModel } from "../services/api";
+
+const MODEL_LIBRARY = [
+  {
+    group: "SDXL - Best Quality",
+    items: [
+      {
+        name: "Juggernaut XL v9 Lightning",
+        filename: "Juggernaut_RunDiffusionPhoto2_Lightning_4Steps.safetensors",
+        format: "Safetensors",
+        approxSize: "6.6 GB",
+        resolution: "1024x1024",
+        notes: "Photorealistic SDXL model tuned for 4-8 step Lightning generation.",
+        url: "https://huggingface.co/RunDiffusion/Juggernaut-XL-Lightning/resolve/main/Juggernaut_RunDiffusionPhoto2_Lightning_4Steps.safetensors",
+      },
+      {
+        name: "DreamShaper XL Lightning",
+        filename: "DreamShaperXL_Lightning.safetensors",
+        format: "Safetensors",
+        approxSize: "6.6 GB",
+        resolution: "1024x1024",
+        notes: "All-around SDXL model for fantasy art, renders, illustration, and stylized images.",
+        url: "https://huggingface.co/Lykon/dreamshaper-xl-lightning/resolve/main/DreamShaperXL_Lightning.safetensors",
+      },
+      {
+        name: "SDXL Base 1.0 Q4_0 GGUF",
+        filename: "stable-diffusion-xl-base-1.0-Q4_0.gguf",
+        format: "GGUF",
+        approxSize: "3.8 GB",
+        resolution: "1024x1024",
+        notes: "Quantized SDXL base model for lower VRAM or CPU-friendly generation.",
+        url: "https://huggingface.co/hum-ma/SDXL-models-GGUF/resolve/7e15380138e7069ca3aaef5bf0401c3406e3a593/stable-diffusion-xl-base-1.0-Q4_0.gguf",
+      },
+    ],
+  },
+  {
+    group: "SD 1.5 - Ultra Fast / Low VRAM",
+    items: [
+      {
+        name: "DreamShaper 8",
+        filename: "DreamShaper_8_pruned.safetensors",
+        format: "Safetensors",
+        approxSize: "2.1 GB",
+        resolution: "512x512",
+        notes: "General-purpose SD 1.5 model for illustration, anime, and semi-realistic portraits.",
+        url: "https://huggingface.co/Lykon/DreamShaper/resolve/main/DreamShaper_8_pruned.safetensors",
+      },
+      {
+        name: "CyberRealistic V8",
+        filename: "CyberRealistic_V8_FP16.safetensors",
+        format: "Safetensors",
+        approxSize: "2.1 GB",
+        resolution: "512x512",
+        notes: "High-fidelity realism and photorealism in the SD 1.5 ecosystem.",
+        url: "https://huggingface.co/cyberdelia/CyberRealistic/resolve/main/CyberRealistic_V8_FP16.safetensors",
+      },
+      {
+        name: "ReV Animated v1.2.2",
+        filename: "rev-animated-v1-2-2.safetensors",
+        format: "Safetensors",
+        approxSize: "2.1 GB",
+        resolution: "512x512",
+        notes: "Semi-realistic, 2.5D, anime, fantasy, and stylized digital art.",
+        url: "https://huggingface.co/danbrown/RevAnimated-v1-2-2/resolve/main/rev-animated-v1-2-2.safetensors",
+      },
+    ],
+  },
+];
+
+function ModelManager({ activeModel, setActiveModel, serverRunning, setServerRunning, constraints, showAlert = async ({ message }) => window.alert(message), showConfirm = async ({ message }) => window.confirm(message) }) {
+  const [localModels, setLocalModels] = useState([]);
+  const [downloadingModelId, setDownloadingModelId] = useState(null);
+  const [downloadProgress, setDownloadProgress] = useState(0);
+  const [downloadSpeed, setDownloadSpeed] = useState("");
+  const [loadingModelId, setLoadingModelId] = useState(null);
+  const [modelLoadProgress, setModelLoadProgress] = useState(null);
+  const [importProgress, setImportProgress] = useState(null); // null when not importing
+  const [importInfo, setImportInfo] = useState({ filename: "", speed: "0.0", eta: 0, status: "" });
+  const [downloadUrl, setDownloadUrl] = useState("");
+  const [importAbortController, setImportAbortController] = useState(null);
+  const [isUnloading, setIsUnloading] = useState(false);
+  const [unloadProgress, setUnloadProgress] = useState({ progress: 0, phase: "" });
+  const [pendingLoadModel, setPendingLoadModel] = useState(null);
+  const [backendInfo, setBackendInfo] = useState({ backendMode: "", backendBinary: "", backendDevice: "" });
+
+  const modelNames = localModels.map((model) => normalizeModel(model).filename);
+  const isBusy = loadingModelId !== null || isUnloading;
+
+  useEffect(() => {
+    fetchModels();
+    checkActiveDownload();
+  }, []);
+
+  useEffect(() => {
+    if (!serverRunning && !loadingModelId) {
+      setBackendInfo({ backendMode: "", backendBinary: "", backendDevice: "" });
+      return;
+    }
+
+    let cancelled = false;
+    const updateBackendInfo = async () => {
+      try {
+        const status = await getBackendStatus();
+        if (cancelled) return;
+        setBackendInfo({
+          backendMode: status.settings?.backendMode || status.loading?.backendMode || "",
+          backendBinary: status.settings?.backendBinary || status.loading?.backendBinary || "",
+          backendDevice: status.settings?.backendDevice || status.loading?.device || "",
+        });
+      } catch (_) {}
+    };
+
+    updateBackendInfo();
+    const interval = setInterval(updateBackendInfo, 2000);
+    return () => {
+      cancelled = true;
+      clearInterval(interval);
+    };
+  }, [serverRunning, loadingModelId]);
+
+  const checkActiveDownload = async () => {
+    try {
+      const status = await getDownloadProgress();
+      if (status.active && status.filename) {
+        startProgressPolling(status.filename);
+      }
+    } catch (e) {
+      console.error("Check active download failed:", e);
+    }
+  };
+
+  const startProgressPolling = (modelId) => {
+    setDownloadingModelId(modelId);
+    
+    const interval = setInterval(async () => {
+      try {
+        const status = await getDownloadProgress();
+        if (status.active) {
+          setDownloadProgress(status.progress === -1 ? 0 : status.progress);
+          setDownloadSpeed(`${status.speed} • ETA ${status.eta}s`);
+        } else {
+          clearInterval(interval);
+          setDownloadingModelId(null);
+          if (status.error) {
+            if (!String(status.error).toLowerCase().includes("cancelled")) {
+              showAlert({ title: "Download Failed", message: status.error, danger: true });
+            }
+          } else {
+            fetchModels();
+          }
+        }
+      } catch (e) {
+        console.error("Polling error:", e);
+      }
+    }, 1000);
+  };
+
+  const fetchModels = async () => {
+    try {
+      const list = await listLocalModels();
+      setLocalModels(list.map(normalizeModel).filter((model) => model.filename));
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  const downloadByUrl = async (url, expectedFilename) => {
+    if (downloadingModelId) return;
+
+    if (modelNames.includes(expectedFilename)) {
+      if (!(await showConfirm({
+        title: "Overwrite Model?",
+        message: `"${expectedFilename}" is already downloaded. Do you want to download and overwrite it?`,
+        confirmLabel: "Overwrite",
+      }))) {
+        return;
+      }
+    }
+
+    const isTauriDesktop = typeof window !== "undefined" && window.__TAURI_INTERNALS__ !== undefined;
+    const isLocalServerMode = typeof window !== "undefined" && (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1");
+
+    if (!isTauriDesktop && !isLocalServerMode) {
+      showAlert({ title: "Server Required", message: "Model download requires the local image generator server.", danger: true });
+      return;
+    }
+
+    try {
+      const res = await downloadModel(url);
+      if (res.ok) {
+        startProgressPolling(expectedFilename);
+      } else {
+        showAlert({ title: "Download Failed", message: res.error || "Unknown error", danger: true });
+      }
+    } catch (err) {
+      showAlert({ title: "Download Error", message: err.message, danger: true });
+    }
+  };
+
+  // Download custom model from URL
+  const handleUrlDownloadSubmit = async (e) => {
+    e.preventDefault();
+    if (!downloadUrl.trim()) return;
+
+    let modelName = "model.gguf";
+    try {
+      const parsed = new URL(downloadUrl.trim());
+      if (parsed.protocol !== "http:" && parsed.protocol !== "https:") {
+        throw new Error("URL protocol must be http or https");
+      }
+      modelName = parsed.pathname.split("/").pop() || "";
+      if (!modelName) throw new Error("Could not extract filename from URL");
+      
+      const lowerName = modelName.toLowerCase();
+      if (!lowerName.endsWith(".gguf") && !lowerName.endsWith(".safetensors") && !lowerName.endsWith(".ckpt")) {
+        throw new Error("URL must point to a .gguf, .safetensors, or .ckpt weights file");
+      }
+    } catch (err) {
+      showAlert({ title: "Invalid URL", message: err.message, danger: true });
+      return;
+    }
+
+    await downloadByUrl(downloadUrl.trim(), modelName);
+    setDownloadUrl("");
+  };
+
+  const handleLibraryDownload = (model) => {
+    downloadByUrl(model.url, model.filename);
+  };
+
+  const handleCancelDownload = async () => {
+    await cancelModelDownload();
+    setDownloadingModelId(null);
+    setDownloadProgress(0);
+    setDownloadSpeed("");
+    await fetchModels();
+  };
+
+  // Start the model server backend
+  const handleLoadModel = async (modelId) => {
+    if (activeModel && activeModel !== modelId && serverRunning) {
+      setPendingLoadModel(modelId);
+      return;
+    }
+    await performLoadModel(modelId);
+  };
+
+  const performLoadModel = async (modelId) => {
+    const isTauriDesktop = typeof window !== "undefined" && window.__TAURI_INTERNALS__ !== undefined;
+    const isLocalServerMode = typeof window !== "undefined" && (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1");
+    
+    if (!isTauriDesktop && !isLocalServerMode) {
+      const isAlreadyRunning = await pingServer();
+      const cmd = `.\\backend\\win\\vulkan\\sd-vulkan.exe --listen-port 8080 --model .\\models\\${modelId} --threads 8`;
+      
+      if (isAlreadyRunning) {
+        if (await showConfirm({ title: "Web Browser Mode", message: `To load "${modelId}" on the active GPU server, restart your terminal backend with:\n\n${cmd}\n\nUpdate the UI status anyway?`, confirmLabel: "Update UI" })) {
+          setActiveModel(modelId);
+          setServerRunning(true);
+        }
+      } else {
+        if (await showConfirm({ title: "Backend Not Running", message: `C++ backend server is not running on port 8080.\n\nTo run locally, start:\n\n${cmd}\n\nProceed in Simulation Mode instead?`, confirmLabel: "Proceed" })) {
+          setActiveModel(modelId);
+          setServerRunning(false);
+        }
+      }
+      return;
+    }
+
+    setLoadingModelId(modelId);
+    setModelLoadProgress({
+      progress: 0,
+      phase: "Starting backend...",
+      speed: "",
+      current: 0,
+      total: 0,
+      model: modelId,
+      backendMode: "",
+      backendBinary: "",
+      device: "",
+    });
+    try {
+      const response = await startServer(modelId, constraints);
+      console.log(response);
+      
+      let isReady = false;
+      let crashError = null;
+      for (let i = 0; i < 240; i++) { // Poll for up to 120 seconds (240 * 500ms)
+        const status = await getBackendStatus();
+        if (status.loading) {
+          setModelLoadProgress({
+            progress: status.loading.progress || 0,
+            phase: status.loading.phase || "Loading model...",
+            speed: status.loading.speed || "",
+            current: status.loading.current || 0,
+            total: status.loading.total || 0,
+            model: status.loading.model || modelId,
+            backendMode: status.loading.backendMode || status.settings?.backendMode || "",
+            backendBinary: status.loading.backendBinary || status.settings?.backendBinary || "",
+            device: status.loading.device || status.settings?.backendDevice || "",
+          });
+        }
+        if (status.ready) {
+          isReady = true;
+          break;
+        }
+        if (status.error) {
+          crashError = status.error;
+          break;
+        }
+        if (!status.running && i > 3) {
+          crashError = "The backend process terminated immediately on startup.";
+          break;
+        }
+        await new Promise((r) => setTimeout(r, 500));
+      }
+
+      if (isReady) {
+        setModelLoadProgress((prev) => ({
+          ...(prev || {}),
+          progress: 100,
+          phase: "Model ready",
+          speed: "",
+          current: prev?.current || 0,
+          total: prev?.total || 0,
+          model: modelId,
+        }));
+        setActiveModel(modelId);
+        setServerRunning(true);
+      } else {
+        throw new Error(crashError || "Model server failed to respond on port 8080.");
+      }
+    } catch (e) {
+      console.error("Failed to load model:", e);
+      showAlert({ title: "Model Load Failed", message: e.message || String(e), danger: true });
+    } finally {
+      setTimeout(() => setModelLoadProgress(null), 800);
+      setLoadingModelId(null);
+    }
+  };
+
+  const handleUnloadThenLoad = async () => {
+    const nextModel = pendingLoadModel;
+    setPendingLoadModel(null);
+    await handleUnloadModel();
+    if (nextModel) {
+      await performLoadModel(nextModel);
+    }
+  };
+
+  // Kill/Unload model server
+  const handleUnloadModel = async () => {
+    if (isUnloading) return;
+    setIsUnloading(true);
+    setUnloadProgress({ progress: 10, phase: "Stopping backend process..." });
+
+    const poll = setInterval(async () => {
+      try {
+        const status = await getBackendStatus();
+        if (status.unloading?.active) {
+          setUnloadProgress({
+            progress: status.unloading.progress || 50,
+            phase: status.unloading.phase || "Unloading model...",
+          });
+        } else {
+          setUnloadProgress((prev) => ({
+            progress: Math.min(95, prev.progress + 10),
+            phase: prev.phase || "Unloading model...",
+          }));
+        }
+      } catch (_) {}
+    }, 300);
+
+    try {
+      await stopServer();
+      setUnloadProgress({ progress: 100, phase: "Model unloaded" });
+      setActiveModel(null);
+      setPendingLoadModel(null);
+      setServerRunning(false);
+    } catch (e) {
+      console.error(e);
+      showAlert({ title: "Unload Failed", message: e.message || String(e), danger: true });
+    } finally {
+      clearInterval(poll);
+      setTimeout(() => {
+        setIsUnloading(false);
+        setUnloadProgress({ progress: 0, phase: "" });
+      }, 500);
+    }
+  };
+
+  // Delete/Remove model file
+  const handleDeleteModel = async (filename) => {
+    if (await showConfirm({
+      title: "Delete Model?",
+      message: `Delete "${filename}" from your drive?`,
+      confirmLabel: "Delete",
+      danger: true,
+    })) {
+      try {
+        await deleteModel(filename);
+        // Refresh local models list
+        await fetchModels();
+        // If it was the active model, unload the server
+        if (activeModel === filename) {
+          await handleUnloadModel();
+        }
+      } catch (err) {
+        console.error("Failed to delete model:", err);
+        showAlert({ title: "Delete Failed", message: err.message || String(err), danger: true });
+      }
+    }
+  };
+
+  const executeImport = async (sourcePath, displayName) => {
+    const controller = new AbortController();
+    setImportAbortController(controller);
+    setImportProgress(0);
+    setImportInfo({
+      filename: displayName,
+      speed: "0.0",
+      eta: 0,
+      status: "Initiating file copy..."
+    });
+
+    try {
+      await importModelFile(sourcePath, (progressData) => {
+        setImportProgress(Math.round(progressData.progress));
+        setImportInfo({
+          filename: progressData.filename,
+          speed: progressData.speed_mb_s.toFixed(1),
+          eta: Math.round(progressData.eta_secs),
+          status: progressData.status
+        });
+      }, controller.signal);
+
+      // Refresh list
+      await fetchModels();
+    } catch (err) {
+      console.error("Import failed:", err);
+      if (err.name !== "AbortError") {
+        showAlert({ title: "Import Failed", message: err.message || String(err), danger: true });
+      }
+    } finally {
+      setImportProgress(null);
+      setImportAbortController(null);
+    }
+  };
+
+  const handleCancelImport = () => {
+    if (importAbortController) {
+      importAbortController.abort();
+    }
+  };
+
+  const handleImportFile = (e) => {
+    const file = e.target.files[0];
+    if (file) {
+      executeImport(file, file.name);
+    }
+    e.target.value = "";
+  };
+
+  const isUrlDownloading = Boolean(downloadingModelId);
+
+  return (
+    <div className="workspace-area">
+      <div className="workspace-title-section">
+        <h2 className="workspace-title">Model Manager</h2>
+        <p className="workspace-subtitle">
+          Manage local files and download recommended weights directly to your local models folder.
+        </p>
+      </div>
+
+      {/* Active Model Status Tonal Box */}
+      {activeModel && (
+        <div className="m3-card" style={{ borderLeft: "4px solid var(--md-sys-color-primary)", background: "var(--md-sys-color-primary-container)", color: "var(--md-sys-color-on-primary-container)" }}>
+          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+            <div>
+              <h4 style={{ fontWeight: 700 }}>Active Model: {activeModel}</h4>
+              <p style={{ fontSize: "0.85rem", marginTop: "2px", opacity: 0.9 }}>
+                The local C++ stable-diffusion server is running. Real-time telemetry is displaying performance status in the top bar.
+              </p>
+              {(backendInfo.backendMode || backendInfo.backendDevice || backendInfo.backendBinary) && (
+                <div style={{ display: "flex", flexWrap: "wrap", gap: "8px", marginTop: "10px" }}>
+                  {backendInfo.backendMode && (
+                    <span className="status-chip" style={{ cursor: "default" }}>
+                      <HardDrive size={14} />
+                      <span>Loaded on {backendInfo.backendMode}</span>
+                    </span>
+                  )}
+                  {backendInfo.backendDevice && (
+                    <span className="status-chip" style={{ cursor: "default" }}>
+                      <span>{backendInfo.backendDevice}</span>
+                    </span>
+                  )}
+                  {backendInfo.backendBinary && (
+                    <span className="status-chip" style={{ cursor: "default" }}>
+                      <span>{backendInfo.backendBinary}</span>
+                    </span>
+                  )}
+                </div>
+              )}
+            </div>
+            <button className="m3-btn m3-btn-error" onClick={handleUnloadModel} disabled={isUnloading || loadingModelId !== null}>
+              {isUnloading ? <RefreshCw className="progress-spinner" size={16} /> : <Trash2 size={16} />}
+              <span>{isUnloading ? "Unloading" : "Unload Server"}</span>
+            </button>
+          </div>
+        </div>
+      )}
+
+      {isUnloading && (
+        <div className="m3-card" style={{ borderLeft: "4px solid var(--md-sys-color-error)", marginTop: "16px" }}>
+          <h4 style={{ fontWeight: 700, marginBottom: "8px" }}>Unloading Model</h4>
+          <div className="model-progress-section" style={{ margin: "8px 0 0 0" }}>
+            <div className="model-progress-label">
+              <span>{unloadProgress.phase || "Unloading model..."}</span>
+              <span>{Math.round(unloadProgress.progress)}%</span>
+            </div>
+            <div className="model-progress-bar">
+              <div className="model-progress-fill" style={{ width: `${Math.min(100, Math.max(0, unloadProgress.progress))}%`, transition: "width 0.25s ease" }}></div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {modelLoadProgress && (
+        <div className="m3-card" style={{ borderLeft: "4px solid var(--md-sys-color-secondary)", marginTop: "16px" }}>
+          <h4 style={{ fontWeight: 700, marginBottom: "8px" }}>
+            Loading Model: {modelLoadProgress.model || loadingModelId}
+          </h4>
+          {(modelLoadProgress.backendMode || modelLoadProgress.backendBinary || modelLoadProgress.device) && (
+            <div style={{ display: "flex", flexWrap: "wrap", gap: "8px", marginBottom: "10px" }}>
+              {modelLoadProgress.backendMode && (
+                <span className="status-chip" style={{ cursor: "default" }}>
+                  <HardDrive size={14} />
+                  <span>Loading on {modelLoadProgress.backendMode}</span>
+                </span>
+              )}
+              {modelLoadProgress.device && (
+                <span className="status-chip" style={{ cursor: "default" }}>
+                  <span>{modelLoadProgress.device}</span>
+                </span>
+              )}
+              {modelLoadProgress.backendBinary && (
+                <span className="status-chip" style={{ cursor: "default" }}>
+                  <span>{modelLoadProgress.backendBinary}</span>
+                </span>
+              )}
+            </div>
+          )}
+          <div className="model-progress-section" style={{ margin: "8px 0 0 0" }}>
+            <div className="model-progress-label">
+              <span>
+                {modelLoadProgress.phase}
+                {modelLoadProgress.speed ? ` (${modelLoadProgress.speed})` : ""}
+              </span>
+              <span>
+                {modelLoadProgress.total > 0
+                  ? `Loaded ${modelLoadProgress.current} / ${modelLoadProgress.total} tensors`
+                  : `${Math.round(modelLoadProgress.progress)}%`}
+              </span>
+            </div>
+            <div className="model-progress-bar">
+              <div
+                className="model-progress-fill"
+                style={{ width: `${Math.min(100, Math.max(0, modelLoadProgress.progress))}%`, transition: "width 0.25s ease" }}
+              ></div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Detected Local Models Section */}
+      <div className="m3-card" style={{ marginTop: "24px" }}>
+        <h3 className="m3-card-title">
+          <Database size={18} style={{ color: "var(--md-sys-color-primary)" }} />
+          Local Models ({localModels.length})
+        </h3>
+        
+        {localModels.length === 0 ? (
+          <p style={{ fontSize: "0.9rem", color: "var(--md-sys-color-outline)", textAlign: "center", padding: "16px 0" }}>
+            No models detected in app/models/. Download from the library below or import a file.
+          </p>
+        ) : (
+          <div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
+            {localModels.map((model) => {
+              const filename = model.filename;
+              const isActive = activeModel === filename;
+              
+              return (
+                <div 
+                  key={filename} 
+                  style={{ 
+                    display: "flex", 
+                    justifyContent: "space-between", 
+                    alignItems: "center", 
+                    padding: "12px 16px", 
+                    background: isActive ? "var(--md-sys-color-primary-container)" : "var(--md-sys-color-surface-variant)",
+                    color: isActive ? "var(--md-sys-color-on-primary-container)" : "var(--md-sys-color-on-surface-variant)",
+                    borderRadius: "var(--md-shape-corner-medium)",
+                    border: "1px solid var(--md-sys-color-outline-variant)"
+                  }}
+                >
+                  <div style={{ display: "flex", flexDirection: "column", gap: "2px" }}>
+                    <span style={{ fontWeight: 600, fontSize: "0.95rem" }}>{filename}</span>
+                    <span style={{ fontSize: "0.75rem", opacity: 0.8 }}>
+                      Local Weights File • {model.size || formatBytes(model.sizeBytes)}
+                    </span>
+                  </div>
+                  
+                  <div style={{ display: "flex", gap: "8px" }}>
+                    {isActive ? (
+                      <button className="m3-btn m3-btn-error" style={{ height: "36px", padding: "0 16px" }} onClick={handleUnloadModel} disabled={isUnloading}>
+                        {isUnloading ? <RefreshCw className="progress-spinner" size={14} /> : <Trash2 size={14} />}
+                        <span>{isUnloading ? "Unloading" : "Unload"}</span>
+                      </button>
+                    ) : (
+                      <>
+                        <button 
+                          className="m3-btn m3-btn-filled" 
+                          style={{ height: "36px", padding: "0 16px" }} 
+                          onClick={() => handleLoadModel(filename)}
+                          disabled={isBusy}
+                        >
+                          {loadingModelId === filename ? (
+                            <RefreshCw className="progress-spinner" size={14} />
+                          ) : (
+                            <Database size={14} />
+                          )}
+                          <span>{loadingModelId === filename ? "Loading" : "Load"}</span>
+                        </button>
+                        <button
+                          className="m3-btn m3-btn-error"
+                          style={{ height: "36px", width: "36px", padding: 0, minWidth: "36px" }}
+                          onClick={() => handleDeleteModel(filename)}
+                          disabled={isBusy}
+                          title="Delete from models folder"
+                        >
+                          <Trash2 size={14} />
+                        </button>
+                      </>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+
+      <div className="workspace-title-section" style={{ marginTop: "32px", marginBottom: "16px" }}>
+        <h3 className="m3-card-title">
+          <Library size={20} style={{ color: "var(--md-sys-color-primary)" }} />
+          Model Library
+        </h3>
+      </div>
+
+      <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+        {MODEL_LIBRARY.map((section) => (
+          <div key={section.group} className="m3-card" style={{ margin: 0 }}>
+            <h4 style={{ fontWeight: 700, marginBottom: "12px" }}>{section.group}</h4>
+            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: "12px" }}>
+              {section.items.map((model) => {
+                const installed = modelNames.includes(model.filename);
+                const downloading = downloadingModelId === model.filename;
+                return (
+                  <div key={model.filename} style={{ display: "flex", flexDirection: "column", gap: "10px", padding: "14px", background: "var(--md-sys-color-surface-variant)", border: "1px solid var(--md-sys-color-outline-variant)", borderRadius: "var(--md-shape-corner-medium)" }}>
+                    <div style={{ display: "flex", flexDirection: "column", gap: "4px" }}>
+                      <span style={{ fontWeight: 700 }}>{model.name}</span>
+                      <span style={{ fontSize: "0.75rem", color: "var(--md-sys-color-outline)" }}>
+                        {model.format} • approx. {model.approxSize} • {model.resolution}
+                      </span>
+                    </div>
+                    <p style={{ fontSize: "0.78rem", color: "var(--md-sys-color-on-surface-variant)", lineHeight: 1.35, margin: 0 }}>
+                      {model.notes}
+                    </p>
+                    {downloading && (
+                      <div className="model-progress-section" style={{ marginTop: "2px" }}>
+                        <div className="model-progress-label">
+                          <span style={{ display: "inline-flex", alignItems: "center", gap: "8px" }}>
+                            <span className="loading-dot"></span>
+                            Downloading
+                          </span>
+                          <span>{downloadProgress > 0 ? `${downloadProgress}%` : "Preparing"}</span>
+                        </div>
+                        <div className="model-progress-bar">
+                          <div className="model-progress-fill" style={{ width: `${Math.min(100, Math.max(0, downloadProgress))}%`, transition: "width 0.2s ease" }}></div>
+                        </div>
+                        {downloadSpeed && (
+                          <div style={{ fontSize: "0.7rem", color: "var(--md-sys-color-outline)", marginTop: "4px" }}>
+                            {downloadSpeed}
+                          </div>
+                        )}
+                      </div>
+                    )}
+                    <button
+                      className={installed ? "m3-btn m3-btn-tonal" : "m3-btn m3-btn-filled"}
+                      style={{ height: "36px", marginTop: "auto" }}
+                      onClick={() => handleLibraryDownload(model)}
+                      disabled={installed || downloadingModelId !== null}
+                    >
+                      {installed ? <HardDrive size={14} /> : downloading ? <RefreshCw className="progress-spinner" size={14} /> : <DownloadCloud size={14} />}
+                      <span>{installed ? "Downloaded" : downloading ? "Downloading" : "Download"}</span>
+                    </button>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        ))}
+      </div>
+
+
+      {/* Local Drag and Drop Importer */}
+      <div className="workspace-title-section" style={{ marginTop: "32px", marginBottom: "16px" }}>
+        <h3 className="m3-card-title">
+          <FolderOpen size={20} style={{ color: "var(--md-sys-color-primary)" }} />
+          Local Model Import
+        </h3>
+      </div>
+      {/* Importing Progress Bar */}
+      {importProgress !== null && (
+        <div className="m3-card" style={{ borderLeft: "4px solid var(--md-sys-color-primary)", marginTop: "24px" }}>
+          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: "12px" }}>
+            <h4 style={{ fontWeight: 600 }}>Copying Model to local folder: {importInfo.filename}</h4>
+            <button className="m3-btn m3-btn-error" style={{ height: "34px", padding: "0 14px" }} onClick={handleCancelImport}>
+              <Square size={14} />
+              <span>Stop Import</span>
+            </button>
+          </div>
+          <div className="model-progress-section" style={{ margin: "12px 0 6px 0" }}>
+            <div className="model-progress-label">
+              <span>{importInfo.status} ({importInfo.speed} MB/s)</span>
+              <span>{importProgress}% ({importInfo.eta}s remaining)</span>
+            </div>
+            <div className="model-progress-bar">
+              <div className="model-progress-fill" style={{ width: `${importProgress}%`, transition: "width 0.15s ease" }}></div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: "16px", marginTop: "16px" }}>
+        <label className="import-box" style={{ margin: 0, height: "100%", justifyContent: "center" }}>
+          <input
+            type="file"
+            style={{ display: "none" }}
+            accept=".gguf,.safetensors,.ckpt"
+            onChange={handleImportFile}
+            disabled={importProgress !== null}
+          />
+          <FolderOpen className="import-icon" />
+          <span style={{ fontWeight: 600 }}>Choose weights file</span>
+          <span style={{ fontSize: "0.75rem", color: "var(--md-sys-color-outline)", textAlign: "center" }}>
+            Select `.gguf`, `.safetensors` or `.ckpt` weights.
+          </span>
+        </label>
+
+        <div className="m3-card" style={{ display: "flex", flexDirection: "column", justifyContent: "center", margin: 0, padding: "20px" }}>
+          <h4 style={{ fontWeight: 600, marginBottom: "8px", display: "flex", alignItems: "center", gap: "8px" }}>
+            <DownloadCloud size={16} />
+            Download Model from URL
+          </h4>
+          <p style={{ fontSize: "0.75rem", color: "var(--md-sys-color-outline)", marginBottom: "12px" }}>
+            Download any GGUF or Safetensors model from Hugging Face or other sites directly to your models folder.
+          </p>
+          {isUrlDownloading ? (
+            <div className="model-progress-section" style={{ marginTop: "0px" }}>
+              <div className="model-progress-label">
+                <span style={{ fontSize: "0.75rem", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", maxWidth: "200px" }} title={downloadingModelId}>
+                  {downloadingModelId}
+                </span>
+                <span>{downloadProgress}%</span>
+              </div>
+              <div className="model-progress-bar" style={{ margin: "4px 0" }}>
+                <div className="model-progress-fill" style={{ width: `${downloadProgress}%`, transition: "width 0.15s ease" }}></div>
+              </div>
+              <div style={{ fontSize: "0.7rem", color: "var(--md-sys-color-outline)", marginTop: "2px" }}>
+                {downloadSpeed}
+              </div>
+              <button className="m3-btn m3-btn-error" style={{ height: "34px", padding: "0 14px", marginTop: "10px" }} onClick={handleCancelDownload}>
+                <Square size={14} />
+                <span>Stop Download</span>
+              </button>
+            </div>
+          ) : (
+            <form onSubmit={handleUrlDownloadSubmit} style={{ display: "flex", gap: "8px" }}>
+              <input
+                type="text"
+                className="m3-input"
+                style={{ flex: 1, height: "40px" }}
+                placeholder="e.g. https://huggingface.co/..."
+                value={downloadUrl}
+                onChange={(e) => setDownloadUrl(e.target.value)}
+                disabled={downloadingModelId !== null}
+              />
+              <button 
+                type="submit" 
+                className="m3-btn m3-btn-filled" 
+                style={{ height: "40px" }}
+                disabled={downloadingModelId !== null}
+              >
+                Download
+              </button>
+            </form>
+          )}
+        </div>
+      </div>
+
+      {pendingLoadModel && (
+        <div style={{ position: "fixed", inset: 0, zIndex: 50, background: "rgba(0,0,0,0.55)", display: "flex", alignItems: "center", justifyContent: "center", padding: "24px" }}>
+          <div className="m3-card" style={{ maxWidth: "460px", width: "100%", margin: 0, border: "1px solid var(--md-sys-color-outline-variant)" }}>
+            <div style={{ display: "flex", alignItems: "center", gap: "10px", marginBottom: "10px" }}>
+              <AlertTriangle size={22} style={{ color: "var(--md-sys-color-error)" }} />
+              <h3 style={{ fontSize: "1.05rem", fontWeight: 700 }}>Unload Current Model?</h3>
+            </div>
+            <p style={{ fontSize: "0.9rem", color: "var(--md-sys-color-on-surface-variant)", lineHeight: 1.45, marginBottom: "16px" }}>
+              "{activeModel}" is already loaded. Unload it before loading "{pendingLoadModel}".
+            </p>
+            <div style={{ display: "flex", justifyContent: "flex-end", gap: "10px" }}>
+              <button className="m3-btn m3-btn-outlined" onClick={() => setPendingLoadModel(null)} disabled={isUnloading}>
+                Cancel
+              </button>
+              <button className="m3-btn m3-btn-error" onClick={handleUnloadModel} disabled={isUnloading}>
+                <Trash2 size={14} />
+                <span>Unload Only</span>
+              </button>
+              <button className="m3-btn m3-btn-filled" onClick={handleUnloadThenLoad} disabled={isUnloading}>
+                {isUnloading ? <RefreshCw className="progress-spinner" size={14} /> : <RefreshCw size={14} />}
+                <span>Unload and Load</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default memo(ModelManager);
diff --git a/app/frontend/src/components/Sidebar.jsx b/app/frontend/src/components/Sidebar.jsx
new file mode 100644
index 0000000..deb0b98
--- /dev/null
+++ b/app/frontend/src/components/Sidebar.jsx
@@ -0,0 +1,65 @@
+import React, { memo } from "react";
+import { Image, FolderDown, Sliders, Shield, Terminal } from "lucide-react";
+
+function Sidebar({ activeTab, setActiveTab, specs }) {
+  return (
+    <div className="sidebar">
+      <div>
+        {/* Sidebar Header */}
+        <div className="sidebar-logo">
+          <Shield className="sidebar-logo-icon" />
+          <span className="sidebar-logo-text">Local AI Studio</span>
+        </div>
+
+        {/* Sidebar Navigation Links (Material 3 style) */}
+        <div className="nav-list">
+          <div
+            className={`nav-item ${activeTab === "generator" ? "active" : ""}`}
+            onClick={() => setActiveTab("generator")}
+          >
+            <Image size={20} />
+            <span>Image Generator</span>
+          </div>
+
+          <div
+            className={`nav-item ${activeTab === "models" ? "active" : ""}`}
+            onClick={() => setActiveTab("models")}
+          >
+            <FolderDown size={20} />
+            <span>Model Manager</span>
+          </div>
+
+          <div
+            className={`nav-item ${activeTab === "constraints" ? "active" : ""}`}
+            onClick={() => setActiveTab("constraints")}
+          >
+            <Sliders size={20} />
+            <span>Image Constraints</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Sidebar Footer with Host Telemetry System Specs */}
+      <div className="sidebar-footer">
+        <div className="sidebar-specs-header">
+          <Terminal size={12} />
+          <span>Host Specifications</span>
+        </div>
+        <div className="sidebar-specs-item" title={specs.cpu_name}>
+          CPU: {specs.cpu_name}
+        </div>
+        <div className="sidebar-specs-item" title={specs.gpu_name}>
+          GPU: {specs.gpu_name}
+        </div>
+        <div className="sidebar-specs-item">
+          Memory: {specs.ram_total_gb.toFixed(0)} GB RAM ({specs.cpu_cores_physical} Cores)
+        </div>
+        <div className="sidebar-specs-os">
+          OS: {specs.os_name}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default memo(Sidebar);
diff --git a/app/frontend/src/components/TopStatusBar.jsx b/app/frontend/src/components/TopStatusBar.jsx
new file mode 100644
index 0000000..187a8b7
--- /dev/null
+++ b/app/frontend/src/components/TopStatusBar.jsx
@@ -0,0 +1,83 @@
+import React, { memo } from "react";
+import { Cpu, HardDrive, Database, Square, RefreshCw, Sun, Moon } from "lucide-react";
+
+function TopStatusBar({ telemetry, serverRunning, activeModel, onStopServer, isStoppingServer = false, theme, setTheme }) {
+  const formatGb = (value) => {
+    const number = Number(value);
+    return Number.isFinite(number) && number > 0 ? number.toFixed(number >= 10 ? 0 : 1) : "--";
+  };
+
+  const getStatusText = () => {
+    if (serverRunning) return "Server Active";
+    return "Local Mode";
+  };
+
+  const getStatusClass = () => {
+    if (serverRunning) return "status-indicator busy";
+    return "status-indicator offline";
+  };
+
+  return (
+    <div className="top-status-bar">
+      <div className="current-model-info">
+        <div className={getStatusClass()}></div>
+        <span style={{ fontWeight: 600, fontSize: "0.95rem" }}>
+          {getStatusText()}
+        </span>
+        {activeModel && (
+          <>
+            <span style={{ color: "var(--md-sys-color-outline-variant)" }}>|</span>
+            <span style={{ color: "var(--md-sys-color-primary)", fontWeight: 700 }}>
+              {activeModel}
+            </span>
+          </>
+        )}
+      </div>
+
+      <div className="telemetry-group">
+        <button
+          className="theme-toggle-btn"
+          onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+          title={`Switch to ${theme === "dark" ? "light" : "dark"} theme`}
+        >
+          {theme === "dark" ? <Sun size={18} /> : <Moon size={18} />}
+        </button>
+
+        {serverRunning && (
+          <button
+            className="m3-btn m3-btn-error"
+            style={{ height: "34px", padding: "0 14px" }}
+            onClick={onStopServer}
+            disabled={isStoppingServer}
+            title="Stop local model server"
+          >
+            {isStoppingServer ? <RefreshCw className="progress-spinner" size={14} /> : <Square size={14} />}
+            <span>{isStoppingServer ? "Stopping" : "Stop Server"}</span>
+          </button>
+        )}
+
+        {/* CPU Telemetry Chip */}
+        <div className="telemetry-chip" title="CPU Utilization">
+          <Cpu className="telemetry-chip-icon" style={{ color: "var(--md-sys-color-primary)" }} />
+          <span>CPU: {Number.isFinite(Number(telemetry.cpu_usage)) ? telemetry.cpu_usage : "--"}%</span>
+        </div>
+
+        {/* RAM Telemetry Chip */}
+        <div className="telemetry-chip" title="System Memory Usage">
+          <HardDrive className="telemetry-chip-icon" style={{ color: "var(--md-sys-color-secondary)" }} />
+          <span>RAM: {formatGb(telemetry.ram_used_gb)} / {formatGb(telemetry.ram_total_gb)} GB</span>
+        </div>
+
+        {/* GPU VRAM Telemetry Chip */}
+        {telemetry.vram_total_gb > 0 && (
+          <div className="telemetry-chip" title={`${telemetry.gpu_name} VRAM`}>
+            <Database className="telemetry-chip-icon" style={{ color: "var(--md-sys-color-tertiary)" }} />
+            <span>VRAM: {formatGb(telemetry.vram_used_gb)} / {formatGb(telemetry.vram_total_gb)} GB</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default memo(TopStatusBar);
diff --git a/app/frontend/src/main.jsx b/app/frontend/src/main.jsx
new file mode 100644
index 0000000..774fd95
--- /dev/null
+++ b/app/frontend/src/main.jsx
@@ -0,0 +1,9 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/app/frontend/src/services/api.js b/app/frontend/src/services/api.js
new file mode 100644
index 0000000..3a93d96
--- /dev/null
+++ b/app/frontend/src/services/api.js
@@ -0,0 +1,810 @@
+// Tauri API helper for desktop mode, falling back to HTTP/Mock in browser
+import { invoke } from "@tauri-apps/api/core";
+
+// Helper to check if running inside Tauri desktop container
+export const isTauri = () => {
+  return typeof window !== "undefined" && window.__TAURI_INTERNALS__ !== undefined;
+};
+
+// Cached hardware specs
+let cachedSpecs = null;
+export const EXPECTED_SERVER_BUILD = "polish-setup-v1";
+
+const isLocalServerMode = () => {
+  return typeof window !== "undefined" && (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1");
+};
+
+export function formatBytes(bytes) {
+  const value = Number(bytes) || 0;
+  if (value <= 0) return "0 B";
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  const idx = Math.min(units.length - 1, Math.floor(Math.log(value) / Math.log(1024)));
+  return `${(value / (1024 ** idx)).toFixed(idx === 0 ? 0 : 1)} ${units[idx]}`;
+}
+
+export function normalizeModel(model) {
+  if (typeof model === "string") {
+    return { filename: model, sizeBytes: 0, size: "Unknown" };
+  }
+  return {
+    filename: model?.filename || model?.name || "",
+    sizeBytes: Number(model?.sizeBytes || 0),
+    size: model?.size || (model?.sizeBytes ? formatBytes(model.sizeBytes) : "Unknown"),
+  };
+}
+
+async function readJsonResponse(res, fallbackMessage = "The local server returned an invalid response.") {
+  const text = await res.text();
+  let data = {};
+  try {
+    data = JSON.parse(text || "{}");
+  } catch (_) {
+    const looksLikeHtml = text.trim().startsWith("<!doctype") || text.trim().startsWith("<html");
+    throw new Error(looksLikeHtml ? "The local server is serving an older frontend/API. Restart the image generator." : fallbackMessage);
+  }
+
+  if (!res.ok || data.ok === false) {
+    if (data.error === "Unknown API endpoint") {
+      throw new Error("Restart the image generator so the local server loads the latest API.");
+    }
+    throw new Error(data.error || `Request failed (HTTP ${res.status})`);
+  }
+  return data;
+}
+
+export async function getHealth() {
+  try {
+    const res = await fetch("/api/health");
+    const data = await readJsonResponse(res, "The local server returned an invalid health response.");
+    return {
+      ...data,
+      stale: data.build !== EXPECTED_SERVER_BUILD,
+    };
+  } catch (err) {
+    return {
+      ok: false,
+      stale: true,
+      build: "unknown",
+      issues: [err.message || "Could not reach the local server."],
+      checks: [],
+      ports: {},
+    };
+  }
+}
+
+export async function getDiagnostics() {
+  const res = await fetch("/api/diagnostics");
+  return await readJsonResponse(res, "The local server returned invalid diagnostics.");
+}
+
+export async function getCleanupCandidates() {
+  const res = await fetch("/api/cleanup-candidates");
+  const data = await readJsonResponse(res, "The local server returned invalid cleanup data.");
+  return data.candidates || [];
+}
+
+export async function cleanupCandidates(ids) {
+  const res = await fetch("/api/cleanup", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ ids }),
+  });
+  return await readJsonResponse(res, "The local server returned invalid cleanup data.");
+}
+
+// Get CPU and GPU specifications
+export async function getHardwareSpecs() {
+  if (cachedSpecs) return cachedSpecs;
+
+  if (isTauri()) {
+    try {
+      cachedSpecs = await invoke("get_hardware_specs");
+      return cachedSpecs;
+    } catch (e) {
+      console.warn("Failed to get hardware specs via Tauri, using fallback:", e);
+    }
+  }
+
+  if (isLocalServerMode()) {
+    try {
+      const res = await fetch("/api/hardware-specs");
+      if (res.ok) {
+        cachedSpecs = await res.json();
+        return cachedSpecs;
+      }
+    } catch (e) {
+      console.warn("Failed to get hardware specs from local server:", e);
+    }
+  }
+
+  // Static preview fallback. Do not invent host hardware.
+  cachedSpecs = {
+    os_name: "Unavailable",
+    cpu_name: "Unavailable",
+    cpu_cores_physical: 4,
+    cpu_cores_logical: 4,
+    ram_total_gb: 0,
+    gpu_name: "Unavailable",
+  };
+  return cachedSpecs;
+}
+
+// Get CPU/RAM/VRAM real-time utilization
+export async function getTelemetry() {
+  if (isTauri()) {
+    try {
+      const stats = await invoke("get_telemetry");
+      return stats;
+    } catch (e) {
+      // Ignore and use fallback
+    }
+  }
+
+  if (isLocalServerMode()) {
+    try {
+      const res = await fetch("/api/telemetry");
+      if (res.ok) {
+        return await res.json();
+      }
+    } catch (_) {}
+  }
+
+  return {
+    cpu_usage: 0,
+    ram_used_gb: 0,
+    ram_total_gb: 0,
+    gpu_name: "Unavailable",
+    vram_used_gb: 0,
+    vram_total_gb: 0,
+  };
+}
+
+export async function getBackendOptions() {
+  if (isLocalServerMode()) {
+    try {
+      const res = await fetch("/api/backend-options");
+      if (res.ok) {
+        return await res.json();
+      }
+    } catch (e) {
+      console.warn("Failed to get backend options from local server:", e);
+    }
+  }
+
+  return {
+    options: [{ id: "cpu", label: "CPU", available: true }],
+    cudaAvailable: false,
+    vulkanAvailable: false,
+    defaultBackendType: "cpu",
+  };
+}
+
+// Get list of model files on the USB
+export async function listLocalModels() {
+  if (isTauri()) {
+    try {
+      return await invoke("list_local_models");
+    } catch (e) {
+      console.warn("Failed to list local models via Tauri:", e);
+    }
+  }
+
+  const isLocalServerMode = typeof window !== "undefined" && (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1");
+  if (isLocalServerMode) {
+    return await listModelsFromDisk();
+  }
+
+  // Static preview fallback: show only models the user imported in this browser.
+  let saved = localStorage.getItem("imported-models");
+  if (saved === null) {
+    localStorage.setItem("imported-models", JSON.stringify([]));
+    saved = "[]";
+  }
+  const imported = JSON.parse(saved);
+  return imported.map(normalizeModel);
+}
+
+// Start (or restart) backend stable-diffusion.cpp server with correct CLI flags
+// In web/portable mode this calls serve.cjs management API which restarts the
+// sd-vulkan.exe process with --steps, --cfg-scale, --sampling-method flags.
+export async function startServer(modelPath, constraints) {
+  if (isTauri()) {
+    const launchParams = {
+      model_path: modelPath,
+      port: 8080,
+      use_gpu: constraints.useGpu !== false,
+      backend_type: constraints.backendType || (constraints.useGpu === false ? "cpu" : "auto"),
+      threads: constraints.threads || 8,
+    };
+    return await invoke("start_server", { params: launchParams });
+  }
+
+  // Web/portable mode — call serve.cjs management API
+  const modelName = modelPath ? modelPath.split(/[\\/]/).pop() : null;
+  try {
+    const res = await fetch("/api/restart-backend", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        model:    modelName,
+        steps:    constraints.steps    || 20,
+        cfgScale: constraints.cfgScale || 7.0,
+        sampler:  constraints.sampler  || "euler_a",
+        threads:  constraints.threads  || 8,
+        use_gpu:  constraints.useGpu !== false,
+        backend_type: constraints.backendType || (constraints.useGpu === false ? "cpu" : "auto"),
+      }),
+    });
+    const text = await res.text();
+    const data = JSON.parse(text || "{}");
+    if (!res.ok || data.ok === false) {
+      throw new Error(data.error || `Backend restart failed (HTTP ${res.status})`);
+    }
+    console.log("Backend restart:", data.message);
+    return data.message;
+  } catch (e) {
+    console.warn("Could not reach management API:", e.message);
+    if (isLocalServerMode()) {
+      throw e;
+    }
+    return "Backend management unavailable";
+  }
+}
+
+// Stop backend server
+export async function stopServer() {
+  if (isTauri()) {
+    return await invoke("stop_server");
+  }
+  try {
+    await fetch("/api/stop-backend", { method: "POST" });
+  } catch (_) {}
+  return "Backend stopped";
+}
+
+// Get current backend status and active settings
+export async function getBackendStatus() {
+  try {
+    const r = await fetch("/api/backend-status");
+    return await r.json();
+  } catch (_) {
+    return { ready: false, settings: {} };
+  }
+}
+
+export async function listGeneratedOutputs() {
+  try {
+    const res = await fetch("/api/outputs");
+    const data = await res.json();
+    return data.outputs || [];
+  } catch (_) {
+    return [];
+  }
+}
+
+export async function saveGeneratedOutput(image, metadata) {
+  const res = await fetch("/api/save-output", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ image, metadata }),
+  });
+  const data = await readJsonResponse(res, "The local server returned an invalid save response.");
+  return data.output;
+}
+
+export async function deleteGeneratedOutputs(outputs) {
+  const res = await fetch("/api/delete-outputs", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ outputs }),
+  });
+  return await readJsonResponse(res, "The local server returned an invalid delete response.");
+}
+
+// List model files from the models folder (via management API in web mode)
+export async function listModelsFromDisk() {
+  try {
+    const r = await fetch("/api/models");
+    const data = await r.json();
+    return (data.models || []).map(normalizeModel);
+  } catch (_) {
+    return [];
+  }
+}
+
+// Generate image (T2I / I2I)
+// Handles API calls to sd-server or mocks them if server is unreachable
+export async function generateImage(prompt, negativePrompt, constraints, activeModelName, inputImageBase64, onProgress, signal) {
+  console.log("Initiating image generation:", { prompt, negativePrompt, constraints, activeModelName });
+
+  const port = 8080;
+  const baseUrl = `http://127.0.0.1:${port}`;
+  
+  // Prepare payload based on standard stable-diffusion.cpp REST endpoint schemas
+  const payload = {
+    prompt: prompt,
+    negative_prompt: negativePrompt || "",
+    width: constraints.width || 512,
+    height: constraints.height || 512,
+    steps: constraints.steps || 20,
+    cfg_scale: constraints.cfgScale || 7.0,
+    seed: constraints.seed === -1 ? Math.floor(Math.random() * 1000000) : constraints.seed,
+    sampler: constraints.sampler || "euler_a",
+    image: inputImageBase64 || null, // Image to image source (base64)
+    denoising_strength: constraints.denoisingStrength || 0.7,
+  };
+
+  // Mock generation helper for offline/browser execution
+  const runMockGeneration = async () => {
+    // Simulate generation steps progress
+    const stepsCount = payload.steps;
+    for (let i = 1; i <= stepsCount; i++) {
+      if (signal && signal.aborted) {
+        throw new DOMException("The user aborted a request.", "AbortError");
+      }
+      await new Promise(r => setTimeout(r, (3000 / stepsCount))); // 3 seconds total
+      if (onProgress) {
+        onProgress(Math.round((i / stepsCount) * 100));
+      }
+    }
+
+    const pLower = prompt.toLowerCase();
+    const seedVal = Math.abs(payload.seed) || Math.floor(Math.random() * 1000);
+
+    // Generate a beautiful, local vector SVG representing the requested subject, completely offline-compatible
+    const primaryBg = "#0F172A"; // dark premium background
+    let gradientStart = "#3B82F6";
+    let gradientEnd = "#8B5CF6";
+    let sceneShapes = "";
+    let keywordLabel = "Abstract Generation";
+
+    if (pLower.includes("moon") || pLower.includes("space") || pLower.includes("astronomy") || pLower.includes("sky")) {
+      gradientStart = "#1E293B";
+      gradientEnd = "#0F172A";
+      keywordLabel = "Luminous Moon in Starry Sky";
+      sceneShapes = `
+        
+        <circle cx="80" cy="100" r="1.5" fill="#ffffff" opacity="0.6"/>
+        <circle cx="160" cy="60" r="1" fill="#ffffff" opacity="0.5"/>
+        <circle cx="280" cy="120" r="2" fill="#ffffff" opacity="0.8"/>
+        <circle cx="360" cy="80" r="1.5" fill="#ffffff" opacity="0.4"/>
+        <circle cx="440" cy="150" r="1" fill="#ffffff" opacity="0.7"/>
+        <circle cx="400" cy="280" r="2" fill="#ffffff" opacity="0.9"/>
+        <circle cx="100" cy="300" r="1.5" fill="#ffffff" opacity="0.5"/>
+        
+        <circle cx="256" cy="220" r="90" fill="url(#moonGrad)" />
+        <circle cx="226" cy="190" r="80" fill="#0F172A" />
+      `;
+    } else if (pLower.includes("cat") || pLower.includes("kitten") || pLower.includes("feline")) {
+      gradientStart = "#4F46E5";
+      gradientEnd = "#7C3AED";
+      keywordLabel = "Stylized Cat Portrait";
+      sceneShapes = `
+        
+        <polygon points="176,280 146,160 216,210" fill="#312E81" />
+        <polygon points="336,280 366,160 296,210" fill="#312E81" />
+        <circle cx="256" cy="270" r="80" fill="#4338CA" />
+        
+        <ellipse cx="226" cy="260" rx="14" ry="8" fill="#10B981" />
+        <ellipse cx="286" cy="260" rx="14" ry="8" fill="#10B981" />
+        <circle cx="226" cy="260" r="4" fill="#000" />
+        <circle cx="286" cy="260" r="4" fill="#000" />
+        
+        <polygon points="256,285 248,275 264,275" fill="#F43F5E" />
+        <line x1="226" y1="290" x2="166" y2="280" stroke="#E2E8F0" stroke-width="2" />
+        <line x1="226" y1="295" x2="156" y2="295" stroke="#E2E8F0" stroke-width="2" />
+        <line x1="286" y1="290" x2="346" y2="280" stroke="#E2E8F0" stroke-width="2" />
+        <line x1="286" y1="295" x2="356" y2="295" stroke="#E2E8F0" stroke-width="2" />
+      `;
+    } else if (pLower.includes("dog") || pLower.includes("puppy") || pLower.includes("canine")) {
+      gradientStart = "#D97706";
+      gradientEnd = "#B45309";
+      keywordLabel = "Friendly Dog Portrait";
+      sceneShapes = `
+        
+        <ellipse cx="166" cy="260" rx="20" ry="60" fill="#78350F" />
+        <ellipse cx="346" cy="260" rx="20" ry="60" fill="#78350F" />
+        <circle cx="256" cy="250" r="70" fill="#92400E" />
+        <ellipse cx="256" cy="280" rx="40" ry="30" fill="#D97706" />
+        
+        <circle cx="226" cy="230" r="10" fill="#1E293B" />
+        <circle cx="286" cy="230" r="10" fill="#1E293B" />
+        <circle cx="222" cy="226" r="3" fill="#ffffff" />
+        <circle cx="282" cy="226" r="3" fill="#ffffff" />
+        
+        <ellipse cx="256" cy="275" rx="16" ry="10" fill="#1E293B" />
+      `;
+    } else if (pLower.includes("city") || pLower.includes("cyberpunk") || pLower.includes("tokyo") || pLower.includes("neon")) {
+      gradientStart = "#111827";
+      gradientEnd = "#311042";
+      keywordLabel = "Neon Cyberpunk Skyline";
+      sceneShapes = `
+        
+        <rect x="60" y="160" width="80" height="352" fill="#1F2937" opacity="0.9"/>
+        <rect x="180" y="100" width="100" height="412" fill="#111827" />
+        <rect x="320" y="200" width="120" height="312" fill="#1F2937" opacity="0.85"/>
+        <rect x="100" y="240" width="110" height="272" fill="#374151" opacity="0.6"/>
+        
+        <line x1="230" y1="100" x2="230" y2="40" stroke="#EC4899" stroke-width="3" />
+        <rect x="200" y="140" width="60" height="15" fill="#10B981" opacity="0.7"/>
+        <rect x="200" y="170" width="60" height="15" fill="#10B981" opacity="0.7"/>
+        <rect x="200" y="200" width="60" height="15" fill="#3B82F6" opacity="0.7"/>
+        <rect x="70" y="200" width="15" height="100" fill="#F59E0B" opacity="0.5"/>
+        <rect x="340" y="250" width="20" height="150" fill="#EF4444" opacity="0.6"/>
+      `;
+    } else if (pLower.includes("car") || pLower.includes("vehicle") || pLower.includes("supercar")) {
+      gradientStart = "#DC2626";
+      gradientEnd = "#991B1B";
+      keywordLabel = "Futuristic Concept Car";
+      sceneShapes = `
+        
+        <line x1="256" y1="350" x2="0" y2="512" stroke="#4B5563" stroke-width="3" />
+        <line x1="256" y1="350" x2="512" y2="512" stroke="#4B5563" stroke-width="3" />
+        
+        <polygon points="126,380 256,330 386,380 346,440 166,440" fill="#EF4444" />
+        <polygon points="176,370 256,340 336,370 326,390 186,390" fill="#1E293B" opacity="0.9" />
+        
+        <polygon points="136,410 176,415 166,425 136,420" fill="#FBBF24" />
+        <polygon points="376,410 336,415 346,425 376,420" fill="#FBBF24" />
+        
+        <ellipse cx="156" cy="440" rx="30" ry="15" fill="#111" />
+        <ellipse cx="356" cy="440" rx="30" ry="15" fill="#111" />
+      `;
+    } else {
+      // General gradient waves
+      gradientStart = "#06B6D4";
+      gradientEnd = "#0891B2";
+      keywordLabel = "Abstract Creative Concept";
+      sceneShapes = `
+        <path d="M0,256 C150,150 350,350 512,256 L512,512 L0,512 Z" fill="#0891B2" opacity="0.4" />
+        <path d="M0,350 C200,200 300,450 512,350 L512,512 L0,512 Z" fill="#0E7490" opacity="0.6" />
+        <circle cx="380" cy="180" r="50" fill="#F59E0B" opacity="0.8" />
+      `;
+    }
+
+    const svgString = `
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
+        <defs>
+          <linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" stop-color="${gradientStart}" />
+            <stop offset="100%" stop-color="${gradientEnd}" />
+          </linearGradient>
+          <linearGradient id="moonGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" stop-color="#FEF08A" />
+            <stop offset="100%" stop-color="#FDE047" />
+          </linearGradient>
+        </defs>
+        
+        
+        <rect width="512" height="512" fill="url(#bgGrad)" />
+        
+        
+        ${sceneShapes}
+        
+        
+        <rect x="20" y="20" width="472" height="472" fill="none" stroke="#ffffff" stroke-width="1.5" opacity="0.15" rx="8"/>
+        
+        
+        <rect x="40" y="410" width="432" height="62" fill="#0F172A" opacity="0.85" rx="6" />
+        <text x="60" y="435" fill="#F1F5F9" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="bold">${keywordLabel}</text>
+        <text x="60" y="455" fill="#94A3B8" font-family="system-ui, -apple-system, sans-serif" font-size="11">Seed: ${seedVal} • Steps: ${payload.steps} • Scale: ${payload.cfg_scale}</text>
+      </svg>
+    `;
+
+    const base64Svg = btoa(unescape(encodeURIComponent(svgString)));
+    const mockImageUrl = `data:image/svg+xml;base64,${base64Svg}`;
+    
+    return {
+      image: mockImageUrl,
+      seed: payload.seed,
+      duration_sec: 3.0,
+    };
+  };
+
+  // stable-diffusion.cpp server only exposes /v1/images/generations (OpenAI-compat)
+  // Steps, cfg_scale, seed, sample_method are passed in the body and read by the server
+  const isImg2Img = !!payload.image;
+
+  const genBody = {
+    prompt:           payload.prompt,
+    negative_prompt:  payload.negative_prompt || "",
+    n:                1,
+    size:             `${payload.width}x${payload.height}`,
+    response_format:  "b64_json",
+    // Generation parameters — read by stable-diffusion.cpp from the request body
+    steps:            payload.steps,
+    cfg_scale:        payload.cfg_scale,
+    seed:             payload.seed,
+    sample_method:    payload.sampler || "euler_a",
+  };
+
+  // img2img extra fields
+  if (isImg2Img) {
+    genBody.init_images        = [payload.image];
+    genBody.denoising_strength = payload.denoising_strength || 0.7;
+  }
+
+  // Attempt real HTTP call
+  try {
+    const response = await fetch(`${baseUrl}/v1/images/generations`, {
+      method:  "POST",
+      headers: { "Content-Type": "application/json" },
+      signal:  signal,
+      body:    JSON.stringify(genBody),
+    });
+
+    if (response.ok) {
+      const data = await response.json();
+      // Response: { data: [{ b64_json: "..." }] }
+      const imgB64 = data?.data?.[0]?.b64_json ?? data?.images?.[0];
+      if (imgB64) {
+        return {
+          image:        `data:image/png;base64,${imgB64}`,
+          seed:         data.data?.[0]?.seed ?? payload.seed,
+          duration_sec: 4.5,
+        };
+      }
+    } else {
+      let errMsg = `Generation failed (HTTP ${response.status})`;
+      try {
+        const errJson = await response.json();
+        if (errJson?.detail || errJson?.error?.message) {
+          errMsg = errJson.detail || errJson.error.message;
+        }
+      } catch (_) {}
+      throw new Error(errMsg);
+    }
+  } catch (err) {
+    if (err.name === "AbortError" || err.message.startsWith("Generation failed")) throw err;
+    console.warn("Could not reach local server. Falling back to simulation mode.", err);
+  }
+
+  // Fallback to mock generation if server is offline/not reachable
+  return await runMockGeneration();
+}
+
+// Perform model file import (copy to USB in Tauri, simulated in Web mode)
+export async function importModelFile(sourcePath, onProgress, signal) {
+  if (sourcePath instanceof File) {
+    const file = sourcePath;
+    const isLocalMode = isLocalServerMode();
+    if (!isLocalMode) {
+      throw new Error("File import requires the local image generator server.");
+    }
+
+    await uploadModelFile(file, onProgress, signal);
+    return { response: "Model imported successfully" };
+  }
+
+  if (isTauri()) {
+    const { listen } = await import("@tauri-apps/api/event");
+    
+    let unlisten = null;
+    if (onProgress) {
+      unlisten = await listen("import-progress", (event) => {
+        onProgress(event.payload);
+      });
+    }
+
+    try {
+      const response = await invoke("import_model_file", { sourcePath });
+      return { response, unlisten };
+    } catch (e) {
+      if (unlisten) unlisten();
+      throw e;
+    }
+  }
+
+  // Fallback simulation in browser
+  const filename = sourcePath.split(/[\\/]/).pop() || "imported_model.gguf";
+  console.log(`Web Mode: Simulating copying ${filename} to USB models folder`);
+  
+  const totalSteps = 40;
+  const start = Date.now();
+
+  for (let i = 1; i <= totalSteps; i++) {
+    if (signal?.aborted) {
+      throw new DOMException("The user aborted a request.", "AbortError");
+    }
+    await new Promise((r) => setTimeout(r, 150)); // ~6 seconds copy total
+    const progress = (i / totalSteps) * 100;
+    const elapsedSecs = (Date.now() - start) / 1000;
+    const speed = 40 + Math.sin(i) * 5 + Math.random() * 2; // ~42 MB/s
+    const eta = (totalSteps - i) * 0.15;
+
+    if (onProgress) {
+      onProgress({
+        filename,
+        progress,
+        speed_mb_s: speed,
+        eta_secs: eta,
+        status: "Copying to USB..."
+      });
+    }
+  }
+
+  // Save to localStorage
+  const saved = localStorage.getItem("imported-models");
+  const imported = saved ? JSON.parse(saved) : [];
+  if (!imported.includes(filename)) {
+    imported.push({ filename, sizeBytes: 0, size: "Unknown" });
+    localStorage.setItem("imported-models", JSON.stringify(imported));
+  }
+
+  return { response: "Model imported successfully" };
+}
+
+function uploadModelFile(file, onProgress, signal) {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    const startedAt = Date.now();
+    let abortedByUser = false;
+
+    xhr.open("POST", `/api/import-model?filename=${encodeURIComponent(file.name)}`);
+    xhr.setRequestHeader("Content-Type", "application/octet-stream");
+
+    const abortUpload = () => {
+      abortedByUser = true;
+      xhr.abort();
+    };
+    if (signal) {
+      if (signal.aborted) {
+        abortUpload();
+      } else {
+        signal.addEventListener("abort", abortUpload, { once: true });
+      }
+    }
+
+    xhr.upload.onprogress = (event) => {
+      if (!event.lengthComputable || !onProgress) return;
+
+      const elapsedSecs = Math.max(0.1, (Date.now() - startedAt) / 1000);
+      const speedBytes = event.loaded / elapsedSecs;
+      const remainingBytes = Math.max(0, event.total - event.loaded);
+      onProgress({
+        filename: file.name,
+        progress: (event.loaded / event.total) * 100,
+        speed_mb_s: speedBytes / (1024 * 1024),
+        eta_secs: remainingBytes / Math.max(1, speedBytes),
+        status: "Copying to models folder..."
+      });
+    };
+
+    xhr.onload = () => {
+      let data = {};
+      try {
+        data = JSON.parse(xhr.responseText || "{}");
+      } catch (_) {}
+
+      if (xhr.status >= 200 && xhr.status < 300 && data.ok !== false) {
+        if (onProgress) {
+          onProgress({
+            filename: file.name,
+            progress: 100,
+            speed_mb_s: 0,
+            eta_secs: 0,
+            status: "Import complete"
+          });
+        }
+        resolve(data);
+      } else {
+        reject(new Error(data.error || `Import failed (HTTP ${xhr.status})`));
+      }
+    };
+
+    xhr.onerror = () => reject(new Error("Import failed while uploading the file."));
+    xhr.onabort = () => reject(new DOMException(abortedByUser ? "Import cancelled by user." : "Import aborted.", "AbortError"));
+    xhr.send(file);
+  });
+}
+
+// Delete model file (Tauri disk deletion or localStorage cleanup)
+export async function deleteModel(filename) {
+  if (isTauri()) {
+    return await invoke("delete_model_file", { filename });
+  }
+
+  const isLocalServerMode = typeof window !== "undefined" && (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1");
+  if (isLocalServerMode) {
+    try {
+      const res = await fetch("/api/delete-model", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ filename })
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        throw new Error(data.error || "Failed to delete model file");
+      }
+      return data;
+    } catch (err) {
+      console.error("Failed to delete model via local API:", err);
+      throw err;
+    }
+  }
+
+  // Browser Mode
+  const saved = localStorage.getItem("imported-models");
+  let imported = saved ? JSON.parse(saved) : [];
+  imported = imported.filter((model) => normalizeModel(model).filename !== filename);
+  localStorage.setItem("imported-models", JSON.stringify(imported));
+  return `Simulated deletion of ${filename} from browser session`;
+}
+
+// Ping the server to check if it is active and responding
+export async function pingServer() {
+  const port = 8080;
+  const baseUrl = `http://127.0.0.1:${port}`;
+  try {
+    const response = await fetch(`${baseUrl}/v1/models`, { method: "GET" });
+    return response.ok;
+  } catch (e) {
+    return false;
+  }
+}
+
+// Wait for the server to be ready by polling
+export async function waitForServerReady(maxAttempts = 30) {
+  const attempts = isTauri() || isLocalServerMode() ? maxAttempts : 3;
+  for (let i = 0; i < attempts; i++) {
+    let ok = false;
+    if (isLocalServerMode()) {
+      const status = await getBackendStatus();
+      ok = Boolean(status.ready);
+    } else {
+      ok = await pingServer();
+    }
+    if (ok) return true;
+    await new Promise((r) => setTimeout(r, 500)); // check every 500ms
+  }
+  return false;
+}
+
+// Start model file download from a URL on the server
+export async function downloadModel(url) {
+  try {
+    const res = await fetch("/api/download-model", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ url })
+    });
+    return await res.json();
+  } catch (e) {
+    console.error("Failed to start model download:", e);
+    return { ok: false, error: e.message };
+  }
+}
+
+export async function cancelModelDownload() {
+  try {
+    const res = await fetch("/api/cancel-download", { method: "POST" });
+    return await res.json();
+  } catch (e) {
+    console.error("Failed to cancel model download:", e);
+    return { ok: false, error: e.message };
+  }
+}
+
+// Get the server-side model download progress
+export async function getDownloadProgress() {
+  try {
+    const res = await fetch("/api/download-progress");
+    return await res.json();
+  } catch (e) {
+    console.error("Failed to get download progress:", e);
+    return { active: false, error: e.message };
+  }
+}
+
+// Get the server-side image generation progress
+export async function getGenerationProgress() {
+  try {
+    const res = await fetch("/api/generation-progress");
+    return await res.json();
+  } catch (e) {
+    console.error("Failed to get generation progress:", e);
+    return { active: false, error: e.message };
+  }
+}
+
+
diff --git a/app/frontend/vite.config.js b/app/frontend/vite.config.js
new file mode 100644
index 0000000..50e1973
--- /dev/null
+++ b/app/frontend/vite.config.js
@@ -0,0 +1,38 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+const host = process.env.TAURI_DEV_HOST;
+
+// https://vite.dev/config/
+export default defineConfig(async () => ({
+  plugins: [react()],
+
+  build: {
+    // Output to app/dist/ so serve.cjs can find it
+    outDir: "../dist",
+    emptyOutDir: true,
+  },
+
+  clearScreen: false,
+  server: {
+    port: 1420,
+    strictPort: true,
+    host: host || false,
+    hmr: host
+      ? {
+          protocol: "ws",
+          host,
+          port: 1421,
+        }
+      : undefined,
+    watch: {
+      ignored: ["**/src-tauri/**"],
+    },
+    proxy: {
+      "/txt2img": { target: "http://127.0.0.1:8080", changeOrigin: true },
+      "/img2img":  { target: "http://127.0.0.1:8080", changeOrigin: true },
+      "/v1":       { target: "http://127.0.0.1:8080", changeOrigin: true },
+      "/api":      { target: "http://127.0.0.1:1422", changeOrigin: true },
+    }
+  },
+}));
diff --git a/scripts/reset.ps1 b/scripts/reset.ps1
new file mode 100644
index 0000000..65d1b01
--- /dev/null
+++ b/scripts/reset.ps1
@@ -0,0 +1,60 @@
+# scripts/reset.ps1
+# Resets portable app dependencies/builds while preserving user models and outputs.
+
+$scriptDir = Split-Path -Parent $MyInvocation.MyCommand.Path
+$rootDir   = Split-Path -Parent $scriptDir
+$appDir    = Join-Path $rootDir "app"
+
+Write-Host ""
+Write-Host "  ============================================================" -ForegroundColor Yellow
+Write-Host "   Resetting Local-AI-Image-Generator..." -ForegroundColor Yellow
+Write-Host "  ============================================================" -ForegroundColor Yellow
+Write-Host ""
+
+# Delete tools/node
+$toolsDir = Join-Path $appDir "tools"
+if (Test-Path $toolsDir) {
+    Write-Host "   >> Removing portable tools/ node folder..." -ForegroundColor Cyan
+    Remove-Item $toolsDir -Recurse -Force -ErrorAction SilentlyContinue
+}
+
+# Delete backend
+$backendDir = Join-Path $appDir "backend"
+if (Test-Path $backendDir) {
+    Write-Host "   >> Removing backend binaries..." -ForegroundColor Cyan
+    Remove-Item $backendDir -Recurse -Force -ErrorAction SilentlyContinue
+}
+
+# Delete dist
+$distDir = Join-Path $appDir "dist"
+if (Test-Path $distDir) {
+    Write-Host "   >> Removing dist/ build folder..." -ForegroundColor Cyan
+    Remove-Item $distDir -Recurse -Force -ErrorAction SilentlyContinue
+}
+
+# Preserve models
+$modelsDir = Join-Path $appDir "models"
+if (Test-Path $modelsDir) {
+    Write-Host "   >> Preserving downloaded models in app/models." -ForegroundColor Cyan
+}
+
+# Delete node_modules in frontend
+$nodeModulesDir = Join-Path $appDir "frontend\node_modules"
+if (Test-Path $nodeModulesDir) {
+    Write-Host "   >> Removing frontend node_modules..." -ForegroundColor Cyan
+    Remove-Item $nodeModulesDir -Recurse -Force -ErrorAction SilentlyContinue
+}
+
+# Delete package-lock.json in frontend
+$lockFile = Join-Path $appDir "frontend\package-lock.json"
+if (Test-Path $lockFile) {
+    Write-Host "   >> Removing frontend package-lock.json..." -ForegroundColor Cyan
+    Remove-Item $lockFile -Force -ErrorAction SilentlyContinue
+}
+
+Write-Host ""
+Write-Host "  ============================================================" -ForegroundColor Green
+Write-Host "   Reset complete. Models and generated outputs were preserved." -ForegroundColor Green
+Write-Host "  ============================================================" -ForegroundColor Green
+Write-Host ""
+Read-Host "  Press Enter to close..."
diff --git a/scripts/serve.cjs b/scripts/serve.cjs
new file mode 100644
index 0000000..f0aa1e9
--- /dev/null
+++ b/scripts/serve.cjs
@@ -0,0 +1,1433 @@
+// serve.cjs — portable static file server + backend process manager
+// Serves app/dist/, manages sd-vulkan.exe lifecycle with correct CLI flags
+// serve.cjs — portable static file server + backend process manager
+// Serves app/dist/, manages sd-vulkan.exe lifecycle with correct CLI flags
+
+const http     = require("http");
+const https    = require("https");
+const fs       = require("fs");
+const net      = require("net");
+const os       = require("os");
+const path     = require("path");
+const { spawn, spawnSync, execSync, exec } = require("child_process");
+
+const PORT_FRONTEND = process.env.PORT ? parseInt(process.env.PORT) : 1420;
+const PORT_BACKEND  = 8080;
+const MAX_JSON_BODY_BYTES = 64 * 1024 * 1024;
+const SERVER_BUILD = "polish-setup-v1";
+const ROOT    = path.join(__dirname, "..");
+const DIST    = path.join(ROOT, "app", "dist");
+const osPlatform = process.platform;
+const BACKEND_PATHS = {
+  cuda: path.join(ROOT, "app", "backend", "win", "cuda", "sd-cuda.exe"),
+  vulkan: path.join(ROOT, "app", "backend", "win", "vulkan", "sd-vulkan.exe"),
+  mac: path.join(ROOT, "app", "backend", "mac", "sd"),
+  linux: path.join(ROOT, "app", "backend", "linux", "sd-vulkan"),
+};
+let BACKEND_PATH = "";
+if (osPlatform === "win32") {
+  let hasNvidia = false;
+  try {
+    execSync("nvidia-smi", { stdio: "ignore" });
+    hasNvidia = true;
+  } catch (_) {
+    const commonPath = "C:\\Program Files\\NVIDIA Corporation\\NVSMI\\nvidia-smi.exe";
+    if (fs.existsSync(commonPath)) {
+      hasNvidia = true;
+    }
+  }
+
+  if (hasNvidia && fs.existsSync(BACKEND_PATHS.cuda)) {
+    BACKEND_PATH = BACKEND_PATHS.cuda;
+  } else {
+    BACKEND_PATH = BACKEND_PATHS.vulkan;
+  }
+} else if (osPlatform === "darwin") {
+  BACKEND_PATH = BACKEND_PATHS.mac;
+} else {
+  BACKEND_PATH = BACKEND_PATHS.linux;
+}
+const MODELS  = path.join(ROOT, "app", "models");
+if (!fs.existsSync(MODELS)) {
+  fs.mkdirSync(MODELS, { recursive: true });
+}
+const OUTPUTS = path.join(ROOT, "app", "outputs");
+if (!fs.existsSync(OUTPUTS)) {
+  fs.mkdirSync(OUTPUTS, { recursive: true });
+}
+
+// ── Backend process state ─────────────────────────────────────────────────────
+let backendProc  = null;
+let backendReady = false;
+let backendError = null;
+let backendLoadState = {
+  active: false,
+  phase: "",
+  progress: 0,
+  current: 0,
+  total: 0,
+  speed: "",
+  model: "",
+  backendMode: "",
+  backendBinary: "",
+  device: "",
+};
+let backendUnloadState = {
+  active: false,
+  phase: "",
+  progress: 0,
+};
+let currentSettings = {
+  model:    null,
+  steps:    20,
+  cfgScale: 7.0,
+  sampler:  "euler_a",
+  threads:  8,
+  useGpu:   true,
+  backendType: "auto",
+};
+
+let lastCpuSample = null;
+let cachedGpuInfo = null;
+let cachedBackendOptions = null;
+let cachedVramInfo = null;
+
+function roundGb(bytes) {
+  return Math.round((bytes / (1024 ** 3)) * 100) / 100;
+}
+
+function getCpuSample() {
+  return os.cpus().reduce((acc, cpu) => {
+    const times = cpu.times;
+    acc.idle += times.idle;
+    acc.total += times.user + times.nice + times.sys + times.idle + times.irq;
+    return acc;
+  }, { idle: 0, total: 0 });
+}
+
+function getCpuUsagePercent() {
+  const current = getCpuSample();
+  if (!lastCpuSample) {
+    lastCpuSample = current;
+    return 0;
+  }
+
+  const idleDelta = current.idle - lastCpuSample.idle;
+  const totalDelta = current.total - lastCpuSample.total;
+  lastCpuSample = current;
+
+  if (totalDelta <= 0) return 0;
+  return Math.max(0, Math.min(100, Math.round((1 - idleDelta / totalDelta) * 1000) / 10));
+}
+
+function getGpuInfo() {
+  if (cachedGpuInfo) return cachedGpuInfo;
+
+  if (osPlatform === "win32") {
+    try {
+      const output = execSync(
+        "powershell -NoProfile -Command \"Get-CimInstance Win32_VideoController | Select-Object -First 1 -ExpandProperty Name\"",
+        { encoding: "utf8", stdio: ["ignore", "pipe", "ignore"] },
+      ).trim();
+      if (output) {
+        cachedGpuInfo = { name: output };
+        return cachedGpuInfo;
+      }
+    } catch (_) {}
+  }
+
+  cachedGpuInfo = { name: "Unavailable" };
+  return cachedGpuInfo;
+}
+
+let nvidiaSmiCmd = "nvidia-smi";
+let hasNvidiaSmi = null;
+
+if (osPlatform === "win32") {
+  const commonPath = "C:\\Program Files\\NVIDIA Corporation\\NVSMI\\nvidia-smi.exe";
+  if (fs.existsSync(commonPath)) {
+    nvidiaSmiCmd = `"${commonPath}"`;
+  }
+}
+
+let isPollingVram = false;
+let lastVramPollTime = 0;
+
+function pollNvidiaVram(force = false) {
+  if (isPollingVram) return;
+  if (hasNvidiaSmi === false) return;
+
+  const now = Date.now();
+  // If not forced, skip if backend is running (driver queries conflict & cause display lag),
+  // or if it has been polled too recently
+  if (!force) {
+    if (backendProc !== null) {
+      return;
+    }
+    if (now - lastVramPollTime < 4500) {
+      return;
+    }
+  }
+
+  isPollingVram = true;
+  lastVramPollTime = now;
+  const cmd = `${nvidiaSmiCmd} --query-gpu=name,memory.used,memory.total --format=csv,noheader,nounits`;
+  exec(
+    cmd,
+    { stdio: ["ignore", "pipe", "ignore"] },
+    (error, stdout) => {
+      isPollingVram = false;
+      if (error) {
+        // Only permanently disable if we are not currently running a backend workload
+        if (backendProc === null) {
+          hasNvidiaSmi = false;
+        }
+        cachedVramInfo = null;
+        return;
+      }
+      hasNvidiaSmi = true;
+      const output = (stdout || "").trim();
+      const firstLine = output.split(/\r?\n/)[0];
+      if (!firstLine) {
+        cachedVramInfo = null;
+        return;
+      }
+
+      const [name, usedMb, totalMb] = firstLine.split(",").map(part => part.trim());
+      cachedVramInfo = {
+        gpu_name: name || getGpuInfo().name,
+        vram_used_gb: Math.round((parseFloat(usedMb) / 1024) * 100) / 100,
+        vram_total_gb: Math.round((parseFloat(totalMb) / 1024) * 100) / 100,
+      };
+    }
+  );
+}
+
+// Start background VRAM polling (runs every 5 seconds, only active when backend is idle)
+setInterval(() => pollNvidiaVram(false), 5000);
+pollNvidiaVram(true);
+
+function getNvidiaVram() {
+  return cachedVramInfo;
+}
+
+function getHardwareSpecs() {
+  const cpus = os.cpus();
+  const gpu = getGpuInfo();
+  return {
+    os_name: `${os.type()} ${os.release()}`,
+    cpu_name: cpus[0]?.model || "Unavailable",
+    cpu_cores_physical: Math.max(1, Math.round(cpus.length / 2)),
+    cpu_cores_logical: cpus.length || 1,
+    ram_total_gb: roundGb(os.totalmem()),
+    gpu_name: gpu.name,
+  };
+}
+
+function getTelemetry() {
+  const vram = getNvidiaVram();
+  return {
+    cpu_usage: getCpuUsagePercent(),
+    ram_used_gb: roundGb(os.totalmem() - os.freemem()),
+    ram_total_gb: roundGb(os.totalmem()),
+    gpu_name: vram?.gpu_name || getGpuInfo().name,
+    vram_used_gb: vram?.vram_used_gb || 0,
+    vram_total_gb: vram?.vram_total_gb || 0,
+  };
+}
+
+function formatBytes(bytes) {
+  const value = Number(bytes) || 0;
+  if (value <= 0) return "0 B";
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  const idx = Math.min(units.length - 1, Math.floor(Math.log(value) / Math.log(1024)));
+  return `${(value / (1024 ** idx)).toFixed(idx === 0 ? 0 : 1)} ${units[idx]}`;
+}
+
+function getPathInfo(label, targetPath, type = "file") {
+  const exists = fs.existsSync(targetPath);
+  return {
+    label,
+    path: targetPath,
+    type,
+    exists,
+    ok: exists,
+  };
+}
+
+function isDirWritable(dirPath) {
+  try {
+    fs.mkdirSync(dirPath, { recursive: true });
+    const testFile = path.join(dirPath, `.local-ai-image-generator-write-test-${Date.now()}.tmp`);
+    fs.writeFileSync(testFile, "ok", "utf8");
+    fs.unlinkSync(testFile);
+    return true;
+  } catch (_) {
+    return false;
+  }
+}
+
+function getDirInfo(label, targetPath) {
+  const exists = fs.existsSync(targetPath);
+  const writable = exists ? isDirWritable(targetPath) : false;
+  return {
+    label,
+    path: targetPath,
+    type: "directory",
+    exists,
+    writable,
+    ok: exists && writable,
+  };
+}
+
+function getPathSize(targetPath) {
+  try {
+    if (!fs.existsSync(targetPath)) return 0;
+    const stat = fs.statSync(targetPath);
+    if (stat.isFile()) return stat.size;
+    if (!stat.isDirectory()) return 0;
+    return fs.readdirSync(targetPath).reduce((sum, name) => sum + getPathSize(path.join(targetPath, name)), 0);
+  } catch (_) {
+    return 0;
+  }
+}
+
+function pathInside(childPath, parentPath) {
+  const relative = path.relative(path.resolve(parentPath), path.resolve(childPath));
+  return relative === "" || (!!relative && !relative.startsWith("..") && !path.isAbsolute(relative));
+}
+
+function checkPort(port) {
+  return new Promise((resolve) => {
+    const tester = net.createServer()
+      .once("error", () => resolve({ port, available: false, inUse: true }))
+      .once("listening", () => {
+        tester.close(() => resolve({ port, available: true, inUse: false }));
+      })
+      .listen(port, "127.0.0.1");
+  });
+}
+
+function getSetupPaths() {
+  const appDir = path.join(ROOT, "app");
+  return {
+    node: path.join(appDir, "tools", "node", "node.exe"),
+    npm: path.join(appDir, "tools", "node", "npm.cmd"),
+    distIndex: path.join(DIST, "index.html"),
+    cudaBackend: BACKEND_PATHS.cuda,
+    vulkanBackend: BACKEND_PATHS.vulkan,
+    models: MODELS,
+    outputs: OUTPUTS,
+  };
+}
+
+async function getHealth() {
+  const paths = getSetupPaths();
+  const checks = [
+    getPathInfo("Portable Node.js", paths.node),
+    getPathInfo("Portable npm", paths.npm),
+    getPathInfo("Frontend build", paths.distIndex),
+    getPathInfo("CUDA backend", paths.cudaBackend),
+    getPathInfo("Vulkan backend", paths.vulkanBackend),
+    getDirInfo("Models folder", paths.models),
+    getDirInfo("Outputs folder", paths.outputs),
+  ];
+
+  const backendInstalled = checks.find((check) => check.label === "CUDA backend")?.exists ||
+    checks.find((check) => check.label === "Vulkan backend")?.exists;
+  const criticalOk = checks
+    .filter((check) => !["CUDA backend", "Vulkan backend"].includes(check.label))
+    .every((check) => check.ok) && backendInstalled;
+
+  const ports = {
+    frontend: { ...(await checkPort(PORT_FRONTEND)), expectedInUse: true },
+    backend: { ...(await checkPort(PORT_BACKEND)), expectedInUse: backendProc !== null },
+  };
+  ports.frontend.ok = !ports.frontend.available;
+  ports.backend.ok = backendProc !== null ? !ports.backend.available : ports.backend.available;
+
+  const issues = checks
+    .filter((check) => !check.ok && !["CUDA backend", "Vulkan backend"].includes(check.label))
+    .map((check) => `${check.label} is missing or not writable.`);
+  if (!backendInstalled) issues.push("No Windows backend binary is installed.");
+  if (!ports.backend.ok) issues.push(`Port ${PORT_BACKEND} is already in use by another process.`);
+
+  return {
+    ok: criticalOk && ports.backend.ok,
+    build: SERVER_BUILD,
+    root: ROOT,
+    platform: osPlatform,
+    checks,
+    ports,
+    backend: {
+      ready: backendReady,
+      running: backendProc !== null,
+      error: backendError,
+      settings: currentSettings,
+      options: getBackendOptions(),
+    },
+    models: {
+      count: fs.existsSync(MODELS) ? fs.readdirSync(MODELS).filter(isModelFile).length : 0,
+      totalBytes: getPathSize(MODELS),
+      totalSize: formatBytes(getPathSize(MODELS)),
+    },
+    outputs: {
+      count: fs.existsSync(OUTPUTS) ? fs.readdirSync(OUTPUTS).filter((file) => file.toLowerCase().endsWith(".json")).length : 0,
+      totalBytes: getPathSize(OUTPUTS),
+      totalSize: formatBytes(getPathSize(OUTPUTS)),
+    },
+    issues,
+  };
+}
+
+function addCleanupCandidate(candidates, id, targetPath, reason, options = {}) {
+  if (!fs.existsSync(targetPath)) return;
+  if (!options.allowUserData && (pathInside(targetPath, MODELS) || pathInside(targetPath, OUTPUTS))) return;
+  const sizeBytes = getPathSize(targetPath);
+  candidates.push({
+    id,
+    path: targetPath,
+    name: path.basename(targetPath),
+    reason,
+    sizeBytes,
+    size: formatBytes(sizeBytes),
+  });
+}
+
+function getCleanupCandidates() {
+  const candidates = [];
+  const toolsDir = path.join(ROOT, "app", "tools");
+  const frontendDir = path.join(ROOT, "app", "frontend");
+  addCleanupCandidate(candidates, "scratch-invalid", path.join(ROOT, "scratch_invalid.txt"), "Scratch/debug file.");
+  addCleanupCandidate(candidates, "vite-cache", path.join(frontendDir, "node_modules", ".vite"), "Vite dependency cache; it can be regenerated.");
+
+  if (fs.existsSync(toolsDir)) {
+    for (const item of fs.readdirSync(toolsDir)) {
+      const itemPath = path.join(toolsDir, item);
+      if (item.toLowerCase().endsWith(".zip")) {
+        addCleanupCandidate(candidates, `setup-zip-${item}`, itemPath, "Setup download archive.");
+      } else if (/^sd-.+-temp$/i.test(item)) {
+        addCleanupCandidate(candidates, `setup-temp-${item}`, itemPath, "Temporary backend extraction folder.");
+      }
+    }
+  }
+
+  if (fs.existsSync(MODELS)) {
+    for (const item of fs.readdirSync(MODELS)) {
+      if (item.toLowerCase().endsWith(".part") || item.toLowerCase().endsWith(".tmp")) {
+        addCleanupCandidate(candidates, `partial-model-${item}`, path.join(MODELS, item), "Incomplete model download/import file.", { allowUserData: true });
+      }
+    }
+  }
+
+  return candidates.sort((a, b) => b.sizeBytes - a.sizeBytes);
+}
+
+function cleanupSelected(ids = []) {
+  const allowed = new Map(getCleanupCandidates().map((candidate) => [candidate.id, candidate]));
+  const deleted = [];
+  for (const id of ids) {
+    const candidate = allowed.get(id);
+    if (!candidate) continue;
+    if (!fs.existsSync(candidate.path)) continue;
+    const stat = fs.statSync(candidate.path);
+    if (stat.isDirectory()) {
+      fs.rmSync(candidate.path, { recursive: true, force: true });
+    } else {
+      fs.unlinkSync(candidate.path);
+    }
+    deleted.push(candidate);
+  }
+  return deleted;
+}
+
+function hasNvidiaGpu() {
+  const info = getGpuInfo().name.toLowerCase();
+  if (info.includes("nvidia")) return true;
+  try {
+    execSync("nvidia-smi", { stdio: "ignore" });
+    return true;
+  } catch (_) {
+    return false;
+  }
+}
+
+function getBackendOptions() {
+  if (cachedBackendOptions) return cachedBackendOptions;
+
+  const cudaAvailable = osPlatform === "win32" && hasNvidiaGpu() && backendAccepts(BACKEND_PATHS.cuda, "cuda");
+  const cudaInstalled = osPlatform === "win32" && fs.existsSync(BACKEND_PATHS.cuda);
+  const vulkanInstalled = osPlatform === "win32" && fs.existsSync(BACKEND_PATHS.vulkan);
+  const vulkanAvailable = osPlatform === "win32" && backendAccepts(BACKEND_PATHS.vulkan, "vulkan");
+  const options = [{ id: "cpu", label: "CPU", available: true }];
+  if (vulkanAvailable) options.push({ id: "vulkan", label: "Vulkan GPU", available: true });
+  if (cudaAvailable) options.push({ id: "cuda", label: "CUDA GPU", available: true });
+  const unavailable = [];
+  if (vulkanInstalled && !vulkanAvailable) {
+    unavailable.push({ id: "vulkan", label: "Vulkan GPU", reason: "Installed, but this binary did not register a Vulkan backend on this machine." });
+  }
+  if (cudaInstalled && !cudaAvailable) {
+    unavailable.push({ id: "cuda", label: "CUDA GPU", reason: "Installed, but CUDA backend validation failed." });
+  }
+  cachedBackendOptions = {
+    options,
+    unavailable,
+    cudaAvailable,
+    vulkanAvailable,
+    defaultBackendType: cudaAvailable ? "cuda" : vulkanAvailable ? "vulkan" : "cpu",
+  };
+  return cachedBackendOptions;
+}
+
+function backendAccepts(binaryPath, backendName) {
+  if (!binaryPath || !fs.existsSync(binaryPath)) return false;
+  try {
+    const result = spawnSync(binaryPath, [
+      "--backend", backendName,
+      "--params-backend", backendName,
+      "--model", path.join(MODELS, "__backend_probe_missing__.safetensors"),
+      "--listen-port", "18082",
+    ], { encoding: "utf8", timeout: 5000 });
+    const output = `${result.stdout || ""}\n${result.stderr || ""}`;
+    if (output.includes("backend config failed") || output.includes(`backend '${backendName}' was not found`)) {
+      return false;
+    }
+    return output.includes("file") || output.includes("not found") || output.includes("loading model");
+  } catch (_) {
+    return false;
+  }
+}
+
+function selectBackendPath(useGpu, backendType = "auto") {
+  const resolvedType = resolveBackendType(useGpu, backendType);
+  if (osPlatform === "win32" && resolvedType === "cuda" && fs.existsSync(BACKEND_PATHS.cuda)) {
+    return BACKEND_PATHS.cuda;
+  }
+  if (osPlatform === "win32" && fs.existsSync(BACKEND_PATHS.vulkan)) {
+    return BACKEND_PATHS.vulkan;
+  }
+  return BACKEND_PATH;
+}
+
+function resolveBackendType(useGpu, backendType = "auto") {
+  const options = getBackendOptions();
+  const requestedType = useGpu === false ? "cpu" : backendType === "auto" ? options.defaultBackendType : backendType;
+  const available = new Set(options.options.map(option => option.id));
+  return available.has(requestedType) ? requestedType : options.defaultBackendType;
+}
+
+function getBackendMode(backendPath, useGpu, backendType = "auto") {
+  if (useGpu === false || backendType === "cpu") return "CPU";
+  const name = path.basename(backendPath || "").toLowerCase();
+  if (name.includes("cuda")) return "CUDA GPU";
+  if (name.includes("vulkan")) return "Vulkan GPU";
+  return "GPU";
+}
+
+function stripAnsi(value) {
+  return String(value || "").replace(/\x1b\[[0-?]*[ -/]*[@-~]/g, "").replace(/\x1b\[[A-Z]/g, "");
+}
+
+function markBackendReady() {
+  if (backendReady) return;
+  backendReady = true;
+  backendLoadState = {
+    ...backendLoadState,
+    active: false,
+    phase: "Model ready",
+    progress: 100,
+  };
+  console.log("  [backend] READY on port", PORT_BACKEND);
+
+  // Force a single VRAM poll after the model settles in memory
+  setTimeout(() => pollNvidiaVram(true), 1500);
+}
+
+function pingBackendReady() {
+  return new Promise(resolve => {
+    const req = http.get(`http://127.0.0.1:${PORT_BACKEND}/v1/models`, res => {
+      res.resume();
+      resolve(res.statusCode >= 200 && res.statusCode < 500);
+    });
+    req.setTimeout(1000, () => {
+      req.destroy();
+      resolve(false);
+    });
+    req.on("error", () => resolve(false));
+  });
+}
+
+function startBackendReadyPoll() {
+  let attempts = 0;
+  const interval = setInterval(async () => {
+    attempts += 1;
+    if (!backendProc || backendReady || attempts > 240) {
+      clearInterval(interval);
+      return;
+    }
+    if (await pingBackendReady()) {
+      markBackendReady();
+      clearInterval(interval);
+    }
+  }, 500);
+}
+
+function getDefaultModel() {
+  try {
+    const files = fs.readdirSync(MODELS).filter(isModelFile);
+    return files.length ? path.join(MODELS, files[0]) : null;
+  } catch (_) { return null; }
+}
+
+function killBackend() {
+  return new Promise(resolve => {
+    if (!backendProc) {
+      backendUnloadState = { active: false, phase: "", progress: 0 };
+      resolve();
+      return;
+    }
+    backendUnloadState = { active: true, phase: "Stopping backend process...", progress: 10 };
+    backendReady = false;
+    backendProc.kill("SIGTERM");
+    backendUnloadState = { active: true, phase: "Waiting for process exit...", progress: 50 };
+    setTimeout(() => {
+      try { backendProc.kill("SIGKILL"); } catch (_) {}
+      backendProc = null;
+      backendUnloadState = { active: false, phase: "Backend unloaded", progress: 100 };
+      resolve();
+    }, 2000);
+  });
+}
+
+function startBackend(settings = {}) {
+  backendError = null;
+  currentSettings = { ...currentSettings, ...settings };
+  if (!currentSettings.model) currentSettings.model = getDefaultModel();
+  if (!currentSettings.model) {
+    console.log("  [backend] No model found in app/models/ — backend not started");
+    return;
+  }
+
+  const resolvedBackendType = resolveBackendType(currentSettings.useGpu, currentSettings.backendType);
+  currentSettings.backendType = resolvedBackendType;
+  currentSettings.useGpu = resolvedBackendType !== "cpu";
+  const backendPath = selectBackendPath(currentSettings.useGpu, currentSettings.backendType);
+  const backendMode = getBackendMode(backendPath, currentSettings.useGpu, currentSettings.backendType);
+  currentSettings.backendMode = backendMode;
+  currentSettings.backendBinary = path.basename(backendPath);
+
+  backendLoadState = {
+    active: true,
+    phase: "Starting backend...",
+    progress: 0,
+    current: 0,
+    total: 0,
+    speed: "",
+    model: path.basename(currentSettings.model),
+    backendMode,
+    backendBinary: path.basename(backendPath),
+    device: "",
+  };
+
+  let runThreads = parseInt(currentSettings.threads) || 4;
+  if (currentSettings.useGpu) {
+    runThreads = Math.min(4, runThreads);
+  }
+
+  const args = [
+    "--listen-port", String(PORT_BACKEND),
+    "--model",       currentSettings.model,
+    "--steps",       String(currentSettings.steps),
+    "--cfg-scale",   String(currentSettings.cfgScale),
+    "--sampling-method", currentSettings.sampler,
+    "--threads",     String(runThreads),
+  ];
+
+  const requestedBackend = resolveBackendType(currentSettings.useGpu, currentSettings.backendType);
+  if (requestedBackend === "cpu") {
+    args.push(
+      "--backend", "cpu",
+      "--params-backend", "cpu",
+      "--rng", "cpu",
+      "--sampler-rng", "cpu",
+    );
+  } else if (requestedBackend === "vulkan") {
+    args.push(
+      "--backend", "vulkan0",
+      "--params-backend", "vulkan0",
+      "--rng", "cpu",
+      "--sampler-rng", "cpu",
+    );
+  } else if (requestedBackend === "cuda") {
+    args.push(
+      "--backend", "cuda0",
+      "--params-backend", "cuda0",
+      "--rng", "cuda",
+      "--sampler-rng", "cuda",
+    );
+  }
+
+  console.log("  [backend] Starting:", path.basename(backendPath), args.join(" "));
+  backendReady = false;
+
+  backendProc = spawn(backendPath, args, { stdio: "pipe" });
+  startBackendReadyPoll();
+
+  backendProc.stdout.on("data", d => {
+    const output = d.toString();
+    process.stdout.write("  [sd] " + output);
+    const cleanOutput = stripAnsi(output);
+    if (cleanOutput.includes("listening on")) {
+      markBackendReady();
+    }
+    
+    const lines = output.split(/[\r\n]+/);
+    for (const line of lines) {
+      const cleanLine = stripAnsi(line);
+      if (!cleanLine.trim()) continue;
+      
+      if (cleanLine.includes("listening on")) {
+        markBackendReady();
+      }
+
+      if (cleanLine.includes("loading model from")) {
+        backendLoadState.active = true;
+        backendLoadState.phase = "Loading model weights...";
+        backendLoadState.progress = Math.max(backendLoadState.progress, 1);
+      }
+
+      if (cleanLine.includes("model files processing completed")) {
+        backendLoadState.active = true;
+        backendLoadState.phase = "Initializing model...";
+        backendLoadState.progress = Math.max(backendLoadState.progress, 95);
+      }
+
+      const loadMatch = cleanLine.match(/\|\s*(\d+)\/(\d+)\s*-\s*([^|]+)$/);
+      if (loadMatch && !cleanLine.includes("it/s") && !cleanLine.includes("s/it")) {
+        const current = parseInt(loadMatch[1], 10);
+        const total = parseInt(loadMatch[2], 10);
+        const progress = total > 0 ? Math.round((current / total) * 100) : 0;
+        backendLoadState = {
+          ...backendLoadState,
+          active: !backendReady,
+          phase: "Loading model weights...",
+          progress: Math.max(backendLoadState.progress, Math.min(99, progress)),
+          current,
+          total,
+          speed: stripAnsi(loadMatch[3]).trim(),
+        };
+      }
+      
+      if (cleanLine.includes("generate_image") || cleanLine.includes("generating image")) {
+        generationState.active = true;
+        generationState.step = 0;
+        generationState.steps = 0;
+        generationState.speed = "";
+      }
+      
+      const match = cleanLine.match(/\|\s*[^|]*\s*\|\s*(\d+)\/(\d+)\s*-\s*([\d.]+\s*(?:it\/s|s\/it))/);
+      if (match) {
+        generationState.active = true;
+        generationState.step = parseInt(match[1], 10);
+        generationState.steps = parseInt(match[2], 10);
+        generationState.speed = match[3].trim();
+      }
+      
+      if (cleanLine.includes("generate_image completed")) {
+        generationState.active = false;
+        generationState.step = 0;
+        generationState.steps = 0;
+        generationState.speed = "";
+      }
+    }
+  });
+
+  backendProc.stderr.on("data", d => {
+    const output = d.toString();
+    process.stderr.write("  [sd-err] " + output);
+    const cleanOutput = stripAnsi(output);
+    const deviceMatch = cleanOutput.match(/Device\s+\d+:\s*([^,\r\n]+)/);
+    if (deviceMatch) {
+      backendLoadState.device = deviceMatch[1].trim();
+      currentSettings.backendDevice = backendLoadState.device;
+    }
+    if (cleanOutput.includes("ggml_cuda_init")) {
+      backendLoadState.backendMode = "CUDA GPU";
+      currentSettings.backendMode = "CUDA GPU";
+    }
+    if (cleanOutput.includes("ggml_vulkan")) {
+      backendLoadState.backendMode = "Vulkan GPU";
+      currentSettings.backendMode = "Vulkan GPU";
+    }
+    if (cleanOutput.includes("[ERROR]")) {
+      backendError = cleanOutput.trim();
+    }
+  });
+  backendProc.on("exit", code => {
+    backendReady = false;
+    backendProc  = null;
+    console.log("  [backend] exited with code", code);
+    if (code !== null && code !== 0) {
+      if (!backendError) {
+        backendError = `exited with code ${code}`;
+      }
+    }
+    backendLoadState.active = false;
+    generationState.active = false;
+    generationState.step = 0;
+    generationState.steps = 0;
+    generationState.speed = "";
+
+    // Force a VRAM poll to update free memory space
+    setTimeout(() => pollNvidiaVram(true), 1000);
+  });
+}
+
+// ── Model Downloader ─────────────────────────────────────────────────────────
+let downloadState = {
+  active: false,
+  filename: "",
+  progress: 0,
+  speed: "0 MB/s",
+  eta: 0,
+  totalBytes: 0,
+  downloadedBytes: 0,
+  error: null
+};
+let activeDownload = null;
+
+// ── Generation State (Real-time progress parser) ─────────────────────────────
+let generationState = {
+  active: false,
+  step: 0,
+  steps: 0,
+  speed: "",
+};
+
+function startModelDownload(url, overrideFilename = null) {
+  if (downloadState.active && !overrideFilename) {
+    console.log("  [download] Already downloading a model");
+    return;
+  }
+
+  // Convert HuggingFace viewer URL (/blob/) to direct download URL (/resolve/)
+  if (url.includes("huggingface.co") && url.includes("/blob/")) {
+    url = url.replace("/blob/", "/resolve/");
+  }
+
+  let filename = overrideFilename;
+  if (!filename) {
+    filename = "model.gguf";
+    try {
+      const parsed = new URL(url);
+      filename = path.basename(parsed.pathname);
+    } catch (e) {
+      console.error("Failed to parse URL filename:", e);
+    }
+  }
+
+  const destPath = path.join(MODELS, filename);
+  downloadState = {
+    active: true,
+    filename: filename,
+    progress: 0,
+    speed: "0 MB/s",
+    eta: 0,
+    totalBytes: 0,
+    downloadedBytes: 0,
+    error: null
+  };
+
+  console.log(`  [download] Starting download of ${filename} from ${url}`);
+
+  const fileStream = fs.createWriteStream(destPath);
+  
+  const client = url.startsWith("https") ? https : http;
+  const request = client.get(url, (response) => {
+    activeDownload = { request, fileStream, destPath };
+    // Handle redirects (HuggingFace resolve URLs redirect to Cloudfront/S3)
+    if ([301, 302, 303, 307, 308].includes(response.statusCode)) {
+      const redirectUrl = response.headers.location ? new URL(response.headers.location, url).toString() : "";
+      if (!redirectUrl) {
+        downloadState.active = false;
+        downloadState.error = "Redirect response did not include a Location header";
+        fileStream.close();
+        try { fs.unlinkSync(destPath); } catch (_) {}
+        activeDownload = null;
+        return;
+      }
+      console.log(`  [download] Redirected to ${redirectUrl}`);
+      
+      // Clean up redirected request to avoid triggering error handlers later
+      request.removeAllListeners("error");
+      request.destroy();
+      
+      fileStream.close();
+      try { fs.unlinkSync(destPath); } catch (_) {}
+      activeDownload = null;
+      downloadState.active = false;
+      startModelDownload(redirectUrl, filename);
+      return;
+    }
+
+    if (response.statusCode !== 200) {
+      downloadState.active = false;
+      downloadState.error = `HTTP ${response.statusCode}`;
+      console.error(`  [download] Failed: HTTP ${response.statusCode}`);
+      fileStream.close();
+      try { fs.unlinkSync(destPath); } catch (_) {}
+      activeDownload = null;
+      return;
+    }
+
+    const totalBytes = parseInt(response.headers["content-length"], 10) || 0;
+    downloadState.totalBytes = totalBytes;
+    let downloadedBytes = 0;
+    let startTime = Date.now();
+    let lastTime = startTime;
+    let lastDownloaded = 0;
+
+    response.on("data", (chunk) => {
+      downloadedBytes += chunk.length;
+      downloadState.downloadedBytes = downloadedBytes;
+      fileStream.write(chunk);
+
+      const now = Date.now();
+      const elapsed = (now - lastTime) / 1000;
+      if (elapsed >= 0.5) {
+        const chunkSpeed = (downloadedBytes - lastDownloaded) / elapsed; // bytes/sec
+        lastDownloaded = downloadedBytes;
+        lastTime = now;
+
+        const speedMb = (chunkSpeed / (1024 * 1024)).toFixed(1);
+        downloadState.speed = `${speedMb} MB/s`;
+
+        if (totalBytes > 0) {
+          downloadState.progress = Math.round((downloadedBytes / totalBytes) * 100);
+          const remainingBytes = totalBytes - downloadedBytes;
+          downloadState.eta = Math.round(remainingBytes / chunkSpeed);
+        } else {
+          downloadState.progress = -1; // Indeterminate
+          downloadState.eta = -1;
+        }
+      }
+    });
+
+    response.on("end", () => {
+      fileStream.end();
+      downloadState.active = false;
+      downloadState.progress = 100;
+      downloadState.downloadedBytes = downloadedBytes;
+      activeDownload = null;
+      console.log(`  [download] Completed download of ${filename}`);
+    });
+  });
+
+  request.on("error", (err) => {
+    downloadState.active = false;
+    downloadState.error = err.message;
+    console.error("  [download] Request error:", err);
+    fileStream.close();
+    try { fs.unlinkSync(destPath); } catch (_) {}
+    activeDownload = null;
+  });
+  activeDownload = { request, fileStream, destPath };
+}
+
+function cancelModelDownload() {
+  if (!downloadState.active) {
+    return false;
+  }
+  const filename = downloadState.filename;
+  if (activeDownload) {
+    try { activeDownload.request.destroy(new Error("Download cancelled by user")); } catch (_) {}
+    try { activeDownload.fileStream.destroy(); } catch (_) {}
+    try { fs.unlinkSync(activeDownload.destPath); } catch (_) {}
+  } else if (filename) {
+    try { fs.unlinkSync(path.join(MODELS, filename)); } catch (_) {}
+  }
+  activeDownload = null;
+  downloadState = {
+    active: false,
+    filename,
+    progress: 0,
+    speed: "0 MB/s",
+    eta: 0,
+    totalBytes: 0,
+    downloadedBytes: 0,
+    error: "Download cancelled",
+  };
+  console.log(`  [download] Cancelled download of ${filename}`);
+  return true;
+}
+
+// ── MIME types ────────────────────────────────────────────────────────────────
+const MIME = {
+  ".html": "text/html", ".js": "application/javascript",
+  ".css":  "text/css",  ".png": "image/png",
+  ".jpg":  "image/jpeg", ".jpeg": "image/jpeg", ".webp": "image/webp", ".svg": "image/svg+xml",
+  ".ico":  "image/x-icon", ".json": "application/json",
+  ".woff2":"font/woff2", ".woff": "font/woff", ".ttf": "font/ttf",
+};
+
+function isModelFile(filename) {
+  const lower = String(filename || "").toLowerCase();
+  return lower.endsWith(".safetensors") || lower.endsWith(".gguf") || lower.endsWith(".ckpt");
+}
+
+function formatBytes(bytes) {
+  const value = Number(bytes) || 0;
+  if (value <= 0) return "0 B";
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  const idx = Math.min(units.length - 1, Math.floor(Math.log(value) / Math.log(1024)));
+  return `${(value / (1024 ** idx)).toFixed(idx === 0 ? 0 : 1)} ${units[idx]}`;
+}
+
+function getModelInfo(filename) {
+  const safeFilename = path.basename(filename || "");
+  const stats = fs.statSync(path.join(MODELS, safeFilename));
+  return {
+    filename: safeFilename,
+    sizeBytes: stats.size,
+    size: formatBytes(stats.size),
+  };
+}
+
+function readBody(req) {
+  return new Promise((resolve, reject) => {
+    let data = "";
+    let bytes = 0;
+    req.on("data", chunk => {
+      bytes += chunk.length;
+      if (bytes > MAX_JSON_BODY_BYTES) {
+        reject(new Error(`Request body is too large. Limit is ${Math.round(MAX_JSON_BODY_BYTES / (1024 * 1024))} MB.`));
+        req.destroy();
+        return;
+      }
+      data += chunk;
+    });
+    req.on("end",  () => { try { resolve(JSON.parse(data || "{}")); } catch(e) { reject(new Error("Invalid JSON request body")); } });
+    req.on("error", reject);
+  });
+}
+
+async function readJsonBody(req, res) {
+  try {
+    return await readBody(req);
+  } catch (err) {
+    json(res, err.message.includes("too large") ? 413 : 400, { ok: false, error: err.message });
+    return null;
+  }
+}
+
+function safeOutputName(value) {
+  return String(value || "")
+    .replace(/[^a-z0-9._-]/gi, "_")
+    .replace(/_+/g, "_")
+    .slice(0, 120);
+}
+
+function saveGeneratedOutput(imageDataUrl, metadata = {}) {
+  const match = String(imageDataUrl || "").match(/^data:(image\/(?:png|jpeg|jpg|webp|svg\+xml));base64,(.+)$/);
+  if (!match) {
+    throw new Error("Expected a base64 image data URL");
+  }
+
+  const mime = match[1];
+  const extByMime = {
+    "image/png": ".png",
+    "image/jpeg": ".jpg",
+    "image/jpg": ".jpg",
+    "image/webp": ".webp",
+    "image/svg+xml": ".svg",
+  };
+  const ext = extByMime[mime] || ".png";
+  const createdAt = new Date().toISOString();
+  const stamp = createdAt.replace(/[:.]/g, "-");
+  const seed = metadata.seed !== undefined && metadata.seed !== null ? `-${safeOutputName(metadata.seed)}` : "";
+  const baseName = `output-${stamp}${seed}`;
+  const imageFilename = `${baseName}${ext}`;
+  const metadataFilename = `${baseName}.json`;
+  const imagePath = path.join(OUTPUTS, imageFilename);
+  const metadataPath = path.join(OUTPUTS, metadataFilename);
+
+  fs.writeFileSync(imagePath, Buffer.from(match[2], "base64"));
+  const savedMetadata = {
+    ...metadata,
+    createdAt,
+    image: imageFilename,
+    metadata: metadataFilename,
+  };
+  fs.writeFileSync(metadataPath, JSON.stringify(savedMetadata, null, 2), "utf8");
+  console.log(`  [api] Saved generated output: ${imageFilename}`);
+  return savedMetadata;
+}
+
+function listGeneratedOutputs() {
+  try {
+    return fs.readdirSync(OUTPUTS)
+      .filter(file => file.toLowerCase().endsWith(".json"))
+      .map(file => {
+        try {
+          const metadata = JSON.parse(fs.readFileSync(path.join(OUTPUTS, file), "utf8"));
+          return {
+            ...metadata,
+            url: `/api/output-file?filename=${encodeURIComponent(metadata.image)}`,
+          };
+        } catch (_) {
+          return null;
+        }
+      })
+      .filter(Boolean)
+      .sort((a, b) => String(b.createdAt || "").localeCompare(String(a.createdAt || "")));
+  } catch (_) {
+    return [];
+  }
+}
+
+function deleteGeneratedOutputs(outputs = []) {
+  const deleted = [];
+  for (const output of outputs) {
+    const imageFilename = path.basename(output?.image || output?.filename || "");
+    const metadataFilename = path.basename(output?.metadata || "");
+    if (!imageFilename && !metadataFilename) continue;
+
+    const targets = new Set();
+    if (imageFilename) targets.add(imageFilename);
+    if (metadataFilename) targets.add(metadataFilename);
+
+    if (!metadataFilename && imageFilename) {
+      const stem = imageFilename.replace(/\.[^.]+$/, "");
+      targets.add(`${stem}.json`);
+    }
+
+    for (const filename of targets) {
+      const filePath = path.join(OUTPUTS, filename);
+      if (fs.existsSync(filePath)) {
+        fs.unlinkSync(filePath);
+        deleted.push(filename);
+      }
+    }
+  }
+  return deleted;
+}
+
+function streamModelUpload(req, filename) {
+  return new Promise((resolve, reject) => {
+    const safeFilename = path.basename(filename || "");
+    const lowerName = safeFilename.toLowerCase();
+    if (!safeFilename || !isModelFile(lowerName)) {
+      reject(new Error("Filename must end with .gguf, .safetensors, or .ckpt"));
+      return;
+    }
+
+    const destPath = path.join(MODELS, safeFilename);
+    const tempPath = `${destPath}.part`;
+    const out = fs.createWriteStream(tempPath);
+    let finished = false;
+
+    const cleanupPartial = () => {
+      if (finished) return;
+      out.destroy();
+      try { fs.unlinkSync(tempPath); } catch (_) {}
+    };
+
+    req.pipe(out);
+    req.on("error", err => {
+      cleanupPartial();
+      reject(err);
+    });
+    req.on("aborted", () => {
+      cleanupPartial();
+      reject(new Error("Import cancelled by user"));
+    });
+    req.on("close", () => {
+      if (!finished && req.aborted) {
+        cleanupPartial();
+      }
+    });
+    out.on("error", err => {
+      cleanupPartial();
+      reject(err);
+    });
+    out.on("finish", () => {
+      try {
+        finished = true;
+        fs.renameSync(tempPath, destPath);
+        console.log(`  [api] Imported model file: ${safeFilename}`);
+        resolve(getModelInfo(safeFilename));
+      } catch (err) {
+        try { fs.unlinkSync(tempPath); } catch (_) {}
+        reject(err);
+      }
+    });
+  });
+}
+
+function json(res, code, obj) {
+  const body = JSON.stringify(obj);
+  res.writeHead(code, { "Content-Type": "application/json", "Access-Control-Allow-Origin": "*" });
+  res.end(body);
+}
+
+// ── HTTP Server ───────────────────────────────────────────────────────────────
+const server = http.createServer(async (req, res) => {
+  // CORS preflight
+  if (req.method === "OPTIONS") {
+    res.writeHead(204, { "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Headers": "Content-Type", "Access-Control-Allow-Methods": "GET,POST" });
+    res.end(); return;
+  }
+
+  // ── Management API ────────────────────────────────────────────────────────
+  // GET /api/health
+  if (req.url === "/api/health" && req.method === "GET") {
+    return json(res, 200, await getHealth());
+  }
+
+  // GET /api/diagnostics
+  if (req.url === "/api/diagnostics" && req.method === "GET") {
+    return json(res, 200, {
+      generatedAt: new Date().toISOString(),
+      health: await getHealth(),
+      cleanupCandidates: getCleanupCandidates(),
+      download: downloadState,
+      generation: generationState,
+      hardware: getHardwareSpecs(),
+      telemetry: getTelemetry(),
+    });
+  }
+
+  // GET /api/cleanup-candidates
+  if (req.url === "/api/cleanup-candidates" && req.method === "GET") {
+    return json(res, 200, { candidates: getCleanupCandidates() });
+  }
+
+  // POST /api/cleanup
+  if (req.url === "/api/cleanup" && req.method === "POST") {
+    try {
+      const body = await readJsonBody(req, res);
+      if (!body) return;
+      const deleted = cleanupSelected(Array.isArray(body.ids) ? body.ids : []);
+      return json(res, 200, { ok: true, deleted });
+    } catch (err) {
+      console.error("  [api] Cleanup failed:", err);
+      return json(res, 500, { ok: false, error: err.message });
+    }
+  }
+
+  // GET /api/backend-status
+  if (req.url === "/api/backend-status" && req.method === "GET") {
+    return json(res, 200, { 
+      ready: backendReady, 
+      running: backendProc !== null,
+      error: backendError,
+      loading: backendLoadState,
+      unloading: backendUnloadState,
+      settings: currentSettings,
+      build: SERVER_BUILD,
+    });
+  }
+
+  // GET /api/hardware-specs
+  if (req.url === "/api/hardware-specs" && req.method === "GET") {
+    return json(res, 200, getHardwareSpecs());
+  }
+
+  // GET /api/backend-options
+  if (req.url === "/api/backend-options" && req.method === "GET") {
+    return json(res, 200, getBackendOptions());
+  }
+
+  // GET /api/telemetry
+  if (req.url === "/api/telemetry" && req.method === "GET") {
+    return json(res, 200, getTelemetry());
+  }
+
+  // GET /api/models — list available model files
+  if (req.url === "/api/models" && req.method === "GET") {
+    try {
+      let files = fs.readdirSync(MODELS).filter(isModelFile).map(getModelInfo);
+      if (downloadState.active && downloadState.filename) {
+        files = files.filter(model => model.filename !== downloadState.filename);
+      }
+      return json(res, 200, { models: files });
+    } catch (_) { return json(res, 200, { models: [] }); }
+  }
+
+  // POST /api/restart-backend — restart with new settings
+  if (req.url === "/api/restart-backend" && req.method === "POST") {
+    const body = await readJsonBody(req, res);
+    if (!body) return;
+    console.log("  [api] Restart backend request:", body);
+    await killBackend();
+    await new Promise(r => setTimeout(r, 500));
+    const newSettings = {};
+    if (body.model)    newSettings.model    = path.join(MODELS, body.model);
+    if (body.steps)    newSettings.steps    = parseInt(body.steps);
+    if (body.cfgScale) newSettings.cfgScale = parseFloat(body.cfgScale);
+    if (body.sampler)  newSettings.sampler  = body.sampler;
+    if (body.threads)  newSettings.threads  = parseInt(body.threads);
+    if (typeof body.use_gpu === "boolean") newSettings.useGpu = body.use_gpu;
+    if (body.backend_type) {
+      newSettings.backendType = String(body.backend_type);
+      newSettings.useGpu = body.backend_type !== "cpu";
+    }
+    startBackend(newSettings);
+    return json(res, 200, { ok: true, message: "Backend restarting...", settings: currentSettings });
+  }
+
+  // POST /api/stop-backend
+  if (req.url === "/api/stop-backend" && req.method === "POST") {
+    await killBackend();
+    return json(res, 200, { ok: true });
+  }
+
+  // POST /api/download-model
+  if (req.url === "/api/download-model" && req.method === "POST") {
+    const body = await readJsonBody(req, res);
+    if (!body) return;
+    const { url } = body;
+    if (!url) return json(res, 400, { error: "URL is required" });
+    
+    startModelDownload(url);
+    return json(res, 200, { ok: true, message: "Download started" });
+  }
+
+  // GET /api/download-progress
+  if (req.url === "/api/download-progress" && req.method === "GET") {
+    return json(res, 200, downloadState);
+  }
+
+  // POST /api/cancel-download
+  if (req.url === "/api/cancel-download" && req.method === "POST") {
+    const cancelled = cancelModelDownload();
+    return json(res, 200, { ok: true, cancelled });
+  }
+
+  // GET /api/generation-progress
+  if (req.url === "/api/generation-progress" && req.method === "GET") {
+    return json(res, 200, generationState);
+  }
+
+  // GET /api/outputs
+  if (req.url === "/api/outputs" && req.method === "GET") {
+    return json(res, 200, { outputs: listGeneratedOutputs() });
+  }
+
+  // GET /api/output-file?filename=...
+  if (req.url.startsWith("/api/output-file") && req.method === "GET") {
+    const parsed = new URL(req.url, `http://${req.headers.host || "localhost"}`);
+    const filename = path.basename(parsed.searchParams.get("filename") || "");
+    const filePath = path.join(OUTPUTS, filename);
+    if (!filename || !fs.existsSync(filePath)) {
+      return json(res, 404, { error: "Output file not found" });
+    }
+    const ext = path.extname(filePath).toLowerCase();
+    fs.readFile(filePath, (err, data) => {
+      if (err) return json(res, 500, { error: err.message });
+      res.writeHead(200, { "Content-Type": MIME[ext] || "application/octet-stream", "Access-Control-Allow-Origin": "*" });
+      res.end(data);
+    });
+    return;
+  }
+
+  // POST /api/save-output
+  if (req.url === "/api/save-output" && req.method === "POST") {
+    try {
+      const body = await readJsonBody(req, res);
+      if (!body) return;
+      const saved = saveGeneratedOutput(body.image, body.metadata || {});
+      return json(res, 200, { ok: true, output: { ...saved, url: `/api/output-file?filename=${encodeURIComponent(saved.image)}` } });
+    } catch (err) {
+      console.error("  [api] Failed to save output:", err);
+      return json(res, 500, { ok: false, error: err.message });
+    }
+  }
+
+  // POST /api/delete-outputs
+  if (req.url === "/api/delete-outputs" && req.method === "POST") {
+    try {
+      const body = await readJsonBody(req, res);
+      if (!body) return;
+      const deleted = deleteGeneratedOutputs(body.outputs || []);
+      return json(res, 200, { ok: true, deleted });
+    } catch (err) {
+      console.error("  [api] Failed to delete outputs:", err);
+      return json(res, 500, { ok: false, error: err.message });
+    }
+  }
+
+  // POST /api/import-model?filename=...
+  if (req.url.startsWith("/api/import-model") && req.method === "POST") {
+    try {
+      const parsed = new URL(req.url, `http://${req.headers.host || "localhost"}`);
+      const result = await streamModelUpload(req, parsed.searchParams.get("filename"));
+      return json(res, 200, { ok: true, message: `Imported ${result.filename}`, model: result, filename: result.filename });
+    } catch (err) {
+      console.error("  [api] Failed to import model:", err);
+      return json(res, 500, { ok: false, error: err.message });
+    }
+  }
+
+  // POST /api/delete-model
+  if (req.url === "/api/delete-model" && req.method === "POST") {
+    const body = await readJsonBody(req, res);
+    if (!body) return;
+    const { filename } = body;
+    if (!filename) return json(res, 400, { error: "Filename is required" });
+    
+    const safeFilename = path.basename(filename);
+    const modelPath = path.join(MODELS, safeFilename);
+    
+    try {
+      if (fs.existsSync(modelPath)) {
+        fs.unlinkSync(modelPath);
+        console.log(`  [api] Deleted model file: ${safeFilename}`);
+        return json(res, 200, { ok: true, message: `Deleted ${safeFilename}` });
+      } else {
+        return json(res, 404, { error: "Model file not found" });
+      }
+    } catch (err) {
+      console.error(`  [api] Failed to delete model ${safeFilename}:`, err);
+      return json(res, 500, { error: err.message });
+    }
+  }
+
+  if (req.url.startsWith("/api/")) {
+    return json(res, 404, { ok: false, error: "Unknown API endpoint" });
+  }
+
+  // ── Static frontend files ─────────────────────────────────────────────────
+  let filePath = path.join(DIST, req.url === "/" ? "index.html" : req.url);
+  filePath = filePath.split("?")[0];
+  if (!fs.existsSync(filePath) || fs.statSync(filePath).isDirectory()) {
+    filePath = path.join(DIST, "index.html");
+  }
+
+  const ext  = path.extname(filePath).toLowerCase();
+  const mime = MIME[ext] || "application/octet-stream";
+
+  fs.readFile(filePath, (err, data) => {
+    if (err) { res.writeHead(404); res.end("Not found"); return; }
+    res.writeHead(200, { "Content-Type": mime, "Access-Control-Allow-Origin": "*" });
+    res.end(data);
+  });
+});
+
+server.listen(PORT_FRONTEND, "127.0.0.1", () => {
+  console.log("");
+  console.log("  ============================================================");
+  console.log("   LOCAL AI IMAGE GENERATOR  |  Running");
+  console.log("   Server Build: " + SERVER_BUILD);
+  console.log("   Frontend : http://localhost:" + PORT_FRONTEND);
+  console.log("   Backend  : http://127.0.0.1:" + PORT_BACKEND);
+  console.log("  ============================================================");
+  console.log("");
+
+  // Do not auto-start backend; wait for selection from the Web UI
+  console.log("  [backend] Ready. Waiting for model load request from the webapp...");
+});
+
+// Graceful shutdown
+process.on("SIGINT",  async () => { await killBackend(); process.exit(0); });
+process.on("SIGTERM", async () => { await killBackend(); process.exit(0); });
diff --git a/scripts/setup.ps1 b/scripts/setup.ps1
new file mode 100644
index 0000000..17559c0
--- /dev/null
+++ b/scripts/setup.ps1
@@ -0,0 +1,401 @@
+# Local AI Image Generator - Setup Script
+# scripts/ lives at root, app/ is a sibling folder
+
+$scriptDir   = Split-Path -Parent $MyInvocation.MyCommand.Path
+$rootDir     = Split-Path -Parent $scriptDir
+$appDir      = Join-Path $rootDir "app"
+$frontendDir = Join-Path $appDir  "frontend"
+$toolsDir    = Join-Path $appDir  "tools"
+$nodeDir     = Join-Path $toolsDir "node"
+$nodeExe     = Join-Path $nodeDir  "node.exe"
+$npmCmd      = Join-Path $nodeDir  "npm.cmd"
+$distDir     = Join-Path $appDir   "dist"
+
+# ── Helpers ───────────────────────────────────────────────────────────────────
+function Print-Header {
+    Clear-Host
+    Write-Host ""
+    Write-Host "  ============================================================" -ForegroundColor Cyan
+    Write-Host "   LOCAL AI IMAGE GENERATOR  -  First-Time Setup" -ForegroundColor Cyan
+    Write-Host "   100% Self-Contained  |  No System Install Required" -ForegroundColor DarkCyan
+    Write-Host "  ============================================================" -ForegroundColor Cyan
+    Write-Host ""
+}
+
+function Print-Step {
+    param([int]$n, [int]$total, [string]$title)
+    Write-Host ""
+    Write-Host "  [$n/$total] $title" -ForegroundColor White
+    Write-Host ("  " + "-" * 56) -ForegroundColor DarkGray
+}
+
+function Print-OK   { param([string]$m); Write-Host "   OK  $m" -ForegroundColor Green }
+function Print-Info { param([string]$m); Write-Host "   >>  $m" -ForegroundColor Cyan }
+function Print-Warn { param([string]$m); Write-Host "   !!  $m" -ForegroundColor Yellow }
+function Print-Fail { param([string]$m); Write-Host "   XX  $m" -ForegroundColor Red }
+
+function Format-Bytes {
+    param([long]$b)
+    if ($b -gt 1GB) { return "{0:N2} GB" -f ($b / 1GB) }
+    if ($b -gt 1MB) { return "{0:N1} MB" -f ($b / 1MB) }
+    return "{0:N0} KB" -f ($b / 1KB)
+}
+
+function Format-Speed {
+    param([double]$bps)
+    if ($bps -gt 1MB) { return "{0:N1} MB/s" -f ($bps / 1MB) }
+    return "{0:N0} KB/s" -f ($bps / 1KB)
+}
+
+function Invoke-RichDownload {
+    param([string]$Url, [string]$Dest, [string]$Label)
+    Print-Info "Downloading: $Label"
+    Write-Host ""
+
+    $barWidth  = 48
+    $lastBytes = [long]0
+    $lastTime  = [DateTime]::Now
+
+    try {
+        [Net.ServicePointManager]::SecurityProtocol = [Net.SecurityProtocolType]::Tls12
+        $req    = [System.Net.HttpWebRequest]::Create($Url)
+        $req.UserAgent = "Mozilla/5.0"
+        $resp   = $req.GetResponse()
+        $total  = [long]$resp.ContentLength
+        $stream = $resp.GetResponseStream()
+        $out    = [System.IO.File]::Create($Dest)
+        $buf    = New-Object byte[] 65536
+        $done   = [long]0
+
+        while ($true) {
+            $read = $stream.Read($buf, 0, $buf.Length)
+            if ($read -le 0) { break }
+            $out.Write($buf, 0, $read)
+            $done += $read
+
+            $now     = [DateTime]::Now
+            $elapsed = ($now - $lastTime).TotalSeconds
+            if ($elapsed -ge 0.35) {
+                $speed     = ($done - $lastBytes) / $elapsed
+                $lastBytes = $done
+                $lastTime  = $now
+                $pct  = if ($total -gt 0) { [int](($done / $total) * 100) } else { 0 }
+                $fill = [int](($pct / 100) * $barWidth)
+                $bar  = ("#" * $fill) + ("-" * ($barWidth - $fill))
+
+                $eta = ""
+                if ($speed -gt 0 -and $total -gt 0) {
+                    $rem = [int](($total - $done) / $speed)
+                    $eta = "  ETA $([int]($rem/60))m$($rem%60)s"
+                }
+
+                $dl  = Format-Bytes $done
+                $tot = if ($total -gt 0) { " / " + (Format-Bytes $total) } else { "" }
+                $spd = Format-Speed $speed
+                Write-Host -NoNewline "`r  [$bar] $pct%  $dl$tot  $spd$eta   "
+            }
+        }
+
+        $out.Close(); $stream.Close()
+        Write-Host "`r  [$("#" * $barWidth)] 100%  $(Format-Bytes $done)  Done!                         " -ForegroundColor Green
+        Write-Host ""
+        return $true
+    } catch {
+        Write-Host ""
+        Print-Fail "Download failed: $_"
+        return $false
+    }
+}
+
+function Expand-WithProgress {
+    param([string]$ZipPath, [string]$Destination, [string]$Label)
+    Print-Info "Extracting $Label..."
+    Write-Host ""
+
+    Add-Type -AssemblyName System.IO.Compression.FileSystem
+    $zip   = [System.IO.Compression.ZipFile]::OpenRead($ZipPath)
+    $total = $zip.Entries.Count
+    $barW  = 48
+    $i = 0
+
+    New-Item -ItemType Directory -Force -Path $Destination | Out-Null
+
+    foreach ($entry in $zip.Entries) {
+        $i++
+        $pct  = [int](($i / $total) * 100)
+        $fill = [int](($pct / 100) * $barW)
+        $bar  = ("#" * $fill) + ("-" * ($barW - $fill))
+        $name = $entry.Name
+        if ($name.Length -gt 28) { $name = "..." + $name.Substring($name.Length - 28) }
+        Write-Host -NoNewline "`r  [$bar] $pct%  $name                    "
+
+        if ($entry.FullName.EndsWith("/") -or $entry.FullName.EndsWith("\")) {
+            New-Item -ItemType Directory -Force -Path (Join-Path $Destination $entry.FullName) | Out-Null
+        } else {
+            $destFile = Join-Path $Destination $entry.FullName
+            $destDir  = Split-Path -Parent $destFile
+            New-Item -ItemType Directory -Force -Path $destDir | Out-Null
+            [System.IO.Compression.ZipFileExtensions]::ExtractToFile($entry, $destFile, $true)
+        }
+    }
+
+    $zip.Dispose()
+    Write-Host "`r  [$("#" * $barW)] 100%  $total files extracted!                    " -ForegroundColor Green
+    Write-Host ""
+}
+
+# ══════════════════════════════════════════════════════════════════════════════
+Print-Header
+
+$steps = 4
+
+# ── Step 1: Portable Node.js ──────────────────────────────────────────────────
+Print-Step 1 $steps "Setting up portable Node.js (app/tools/node/)"
+
+if ((Test-Path $nodeExe) -and (Test-Path $npmCmd)) {
+    $v = & $nodeExe --version
+    Print-OK "Portable Node.js already ready: $v"
+} else {
+    $nodeZip = Join-Path $toolsDir "node.zip"
+    New-Item -ItemType Directory -Force -Path $toolsDir | Out-Null
+
+    $ok = Invoke-RichDownload `
+        -Url  "https://nodejs.org/dist/v22.12.0/node-v22.12.0-win-x64.zip" `
+        -Dest $nodeZip `
+        -Label "Node.js v22.12.0 LTS (Portable ZIP)"
+
+    if (-not $ok) { Print-Fail "Cannot download Node.js."; Read-Host; exit 1 }
+
+    Expand-WithProgress -ZipPath $nodeZip -Destination $toolsDir -Label "Node.js"
+    Remove-Item $nodeZip -Force
+
+    $extracted = Get-ChildItem $toolsDir -Directory | Where-Object { $_.Name -like "node-v*" } | Select-Object -First 1
+    if ($extracted) {
+        if (Test-Path $nodeDir) { Remove-Item $nodeDir -Recurse -Force }
+        Rename-Item $extracted.FullName "node"
+    }
+
+    if (-not ((Test-Path $nodeExe) -and (Test-Path $npmCmd))) {
+        Print-Fail "Portable Node.js install is incomplete. Close any running Local AI Image Generator windows, delete app/tools/node, then run setup again."
+        Read-Host; exit 1
+    }
+
+    $v = & $nodeExe --version
+    Print-OK "Portable Node.js ready: $v"
+}
+
+# ── Step 2: stable-diffusion.cpp GPU Backend (Dynamic Detection) ──────────────
+$hasNvidia = $false
+try {
+    $gpus = Get-CimInstance Win32_VideoController -ErrorAction SilentlyContinue
+    foreach ($gpu in $gpus) {
+        if ($gpu.Name -like "*NVIDIA*") {
+            $hasNvidia = $true
+        }
+    }
+} catch {}
+if (-not $hasNvidia) {
+    try {
+        & nvidia-smi *> $null
+        if ($LASTEXITCODE -eq 0) { $hasNvidia = $true }
+    } catch {}
+}
+
+if ($hasNvidia) {
+    Print-Step 2 $steps "Setting up stable-diffusion.cpp CUDA GPU backend (app/backend/win/cuda/)"
+    $backendDest = Join-Path $appDir "backend\win\cuda"
+    $backendExe  = Join-Path $backendDest "sd-cuda.exe"
+    $backendDll  = Join-Path $backendDest "stable-diffusion.dll"
+    
+    if ((Test-Path $backendExe) -and (Test-Path $backendDll)) {
+        Print-OK "CUDA GPU backend binaries already ready."
+    } else {
+        $backendZip = Join-Path $toolsDir "sd-cuda.zip"
+        New-Item -ItemType Directory -Force -Path $toolsDir | Out-Null
+        New-Item -ItemType Directory -Force -Path $backendDest | Out-Null
+
+        $ok = Invoke-RichDownload `
+            -Url  "https://github.com/leejet/stable-diffusion.cpp/releases/download/master-669-2d40a8b/sd-master-2d40a8b-bin-win-cuda12-x64.zip" `
+            -Dest $backendZip `
+            -Label "stable-diffusion.cpp CUDA Backend (Windows x64)"
+
+        if (-not $ok) { Print-Fail "Cannot download CUDA backend binaries."; Read-Host; exit 1 }
+
+        $tempExt = Join-Path $toolsDir "sd-cuda-temp"
+        Expand-WithProgress -ZipPath $backendZip -Destination $tempExt -Label "CUDA Backend"
+        Remove-Item $backendZip -Force
+
+        # Move files and rename sd.exe/sd-server.exe to sd-cuda.exe
+        if (Test-Path $tempExt) {
+            $extractedExe = Join-Path $tempExt "bin\sd-server.exe"
+            if (-not (Test-Path $extractedExe)) { $extractedExe = Join-Path $tempExt "sd-server.exe" }
+            if (-not (Test-Path $extractedExe)) { $extractedExe = Join-Path $tempExt "bin\sd.exe" }
+            if (-not (Test-Path $extractedExe)) { $extractedExe = Join-Path $tempExt "sd.exe" }
+            
+            $extractedDll = Join-Path $tempExt "bin\stable-diffusion.dll"
+            if (-not (Test-Path $extractedDll)) { $extractedDll = Join-Path $tempExt "stable-diffusion.dll" }
+
+            if (Test-Path $extractedExe) { Copy-Item $extractedExe $backendExe -Force }
+            if (Test-Path $extractedDll) { Copy-Item $extractedDll $backendDll -Force }
+            
+            # Copy any other DLLs or EXEs
+            Get-ChildItem $tempExt -Filter "*.dll" -Recurse | ForEach-Object { Copy-Item $_.FullName $backendDest -Force }
+            Get-ChildItem $tempExt -Filter "*.exe" -Recurse | ForEach-Object {
+                if ($_.FullName -ne $extractedExe) { Copy-Item $_.FullName $backendDest -Force }
+            }
+            Remove-Item $tempExt -Recurse -Force
+        }
+
+        if ((Test-Path $backendExe) -and (Test-Path $backendDll)) {
+            Print-OK "CUDA GPU backend binaries installed successfully!"
+        } else {
+            Print-Fail "Failed to copy backend binaries to app/backend/win/cuda/."
+            Read-Host; exit 1
+        }
+    }
+
+    Print-Step 2 $steps "Setting up stable-diffusion.cpp Vulkan GPU backend for comparison (app/backend/win/vulkan/)"
+    $backendDest = Join-Path $appDir "backend\win\vulkan"
+    $backendExe  = Join-Path $backendDest "sd-vulkan.exe"
+    $backendDll  = Join-Path $backendDest "stable-diffusion.dll"
+
+    if ((Test-Path $backendExe) -and (Test-Path $backendDll)) {
+        Print-OK "Vulkan GPU backend binaries already ready."
+    } else {
+        $backendZip = Join-Path $toolsDir "sd-vulkan.zip"
+        New-Item -ItemType Directory -Force -Path $toolsDir | Out-Null
+        New-Item -ItemType Directory -Force -Path $backendDest | Out-Null
+
+        $ok = Invoke-RichDownload `
+            -Url  "https://github.com/leejet/stable-diffusion.cpp/releases/download/master-669-2d40a8b/sd-master-2d40a8b-bin-win-vulkan-x64.zip" `
+            -Dest $backendZip `
+            -Label "stable-diffusion.cpp Vulkan Backend (Windows x64)"
+
+        if (-not $ok) { Print-Fail "Cannot download Vulkan backend binaries."; Read-Host; exit 1 }
+
+        $tempExt = Join-Path $toolsDir "sd-vulkan-temp"
+        Expand-WithProgress -ZipPath $backendZip -Destination $tempExt -Label "Vulkan Backend"
+        Remove-Item $backendZip -Force
+
+        if (Test-Path $tempExt) {
+            $extractedExe = Join-Path $tempExt "bin\sd-server.exe"
+            if (-not (Test-Path $extractedExe)) { $extractedExe = Join-Path $tempExt "sd-server.exe" }
+            if (-not (Test-Path $extractedExe)) { $extractedExe = Join-Path $tempExt "bin\sd.exe" }
+            if (-not (Test-Path $extractedExe)) { $extractedExe = Join-Path $tempExt "sd.exe" }
+
+            $extractedDll = Join-Path $tempExt "bin\stable-diffusion.dll"
+            if (-not (Test-Path $extractedDll)) { $extractedDll = Join-Path $tempExt "stable-diffusion.dll" }
+
+            if (Test-Path $extractedExe) { Copy-Item $extractedExe $backendExe -Force }
+            if (Test-Path $extractedDll) { Copy-Item $extractedDll $backendDll -Force }
+
+            Get-ChildItem $tempExt -Filter "*.dll" -Recurse | ForEach-Object { Copy-Item $_.FullName $backendDest -Force }
+            Get-ChildItem $tempExt -Filter "*.exe" -Recurse | ForEach-Object {
+                if ($_.FullName -ne $extractedExe) { Copy-Item $_.FullName $backendDest -Force }
+            }
+            Remove-Item $tempExt -Recurse -Force
+        }
+
+        if ((Test-Path $backendExe) -and (Test-Path $backendDll)) {
+            Print-OK "Vulkan GPU backend binaries installed successfully!"
+        } else {
+            Print-Fail "Failed to copy backend binaries to app/backend/win/vulkan/."
+            Read-Host; exit 1
+        }
+    }
+} else {
+    Print-Step 2 $steps "Setting up stable-diffusion.cpp Vulkan GPU backend (app/backend/win/vulkan/)"
+    $backendDest = Join-Path $appDir "backend\win\vulkan"
+    $backendExe  = Join-Path $backendDest "sd-vulkan.exe"
+    $backendDll  = Join-Path $backendDest "stable-diffusion.dll"
+    
+    if ((Test-Path $backendExe) -and (Test-Path $backendDll)) {
+        Print-OK "Vulkan GPU backend binaries already ready."
+    } else {
+        $backendZip = Join-Path $toolsDir "sd-vulkan.zip"
+        New-Item -ItemType Directory -Force -Path $toolsDir | Out-Null
+        New-Item -ItemType Directory -Force -Path $backendDest | Out-Null
+
+        $ok = Invoke-RichDownload `
+            -Url  "https://github.com/leejet/stable-diffusion.cpp/releases/download/master-669-2d40a8b/sd-master-2d40a8b-bin-win-vulkan-x64.zip" `
+            -Dest $backendZip `
+            -Label "stable-diffusion.cpp Vulkan Backend (Windows x64)"
+
+        if (-not $ok) { Print-Fail "Cannot download Vulkan backend binaries."; Read-Host; exit 1 }
+
+        $tempExt = Join-Path $toolsDir "sd-vulkan-temp"
+        Expand-WithProgress -ZipPath $backendZip -Destination $tempExt -Label "Vulkan Backend"
+        Remove-Item $backendZip -Force
+
+        # Move files and rename sd.exe/sd-server.exe to sd-vulkan.exe
+        if (Test-Path $tempExt) {
+            $extractedExe = Join-Path $tempExt "bin\sd-server.exe"
+            if (-not (Test-Path $extractedExe)) { $extractedExe = Join-Path $tempExt "sd-server.exe" }
+            if (-not (Test-Path $extractedExe)) { $extractedExe = Join-Path $tempExt "bin\sd.exe" }
+            if (-not (Test-Path $extractedExe)) { $extractedExe = Join-Path $tempExt "sd.exe" }
+            
+            $extractedDll = Join-Path $tempExt "bin\stable-diffusion.dll"
+            if (-not (Test-Path $extractedDll)) { $extractedDll = Join-Path $tempExt "stable-diffusion.dll" }
+
+            if (Test-Path $extractedExe) { Copy-Item $extractedExe $backendExe -Force }
+            if (Test-Path $extractedDll) { Copy-Item $extractedDll $backendDll -Force }
+            
+            # Copy any other DLLs or EXEs
+            Get-ChildItem $tempExt -Filter "*.dll" -Recurse | ForEach-Object { Copy-Item $_.FullName $backendDest -Force }
+            Get-ChildItem $tempExt -Filter "*.exe" -Recurse | ForEach-Object {
+                if ($_.FullName -ne $extractedExe) { Copy-Item $_.FullName $backendDest -Force }
+            }
+            Remove-Item $tempExt -Recurse -Force
+        }
+
+        if ((Test-Path $backendExe) -and (Test-Path $backendDll)) {
+            Print-OK "Vulkan GPU backend binaries installed successfully!"
+        } else {
+            Print-Fail "Failed to copy backend binaries to app/backend/win/vulkan/."
+            Read-Host; exit 1
+        }
+    }
+}
+
+# ── Step 3: npm install ───────────────────────────────────────────────────────
+Print-Step 3 $steps "Installing frontend dependencies (app/frontend/)"
+Write-Host ""
+
+if (-not (Test-Path $npmCmd)) {
+    Print-Fail "npm.cmd was not found at $npmCmd"
+    Print-Fail "Close any running Local AI Image Generator windows, delete app/tools/node, then run setup again."
+    Read-Host; exit 1
+}
+
+Push-Location $frontendDir
+try {
+    & $npmCmd install --prefer-offline 2>&1
+    if ($LASTEXITCODE -ne 0) {
+        Print-Fail "npm install failed."
+        Read-Host; exit 1
+    }
+    Write-Host ""
+    Print-OK "Dependencies installed!"
+
+    # ── Step 4: Build frontend ────────────────────────────────────────────────
+    Print-Step 4 $steps "Building frontend -> app/dist/"
+    Write-Host ""
+
+    & $npmCmd run build 2>&1
+    if ($LASTEXITCODE -ne 0) {
+        Print-Fail "Frontend build failed."
+        Read-Host; exit 1
+    }
+    Write-Host ""
+    Print-OK "Frontend built!"
+} finally {
+    Pop-Location
+}
+
+# ── Done ─────────────────────────────────────────────────────────────────────
+Write-Host ""
+Write-Host "  ============================================================" -ForegroundColor Green
+Write-Host "   Setup complete! Just double-click start.bat to launch." -ForegroundColor Green
+Write-Host "  ============================================================" -ForegroundColor Green
+Write-Host ""
+Read-Host "  Press Enter to close..."
diff --git a/start.bat b/start.bat
new file mode 100644
index 0000000..205b706
--- /dev/null
+++ b/start.bat
@@ -0,0 +1,106 @@
+@echo off
+title Local AI Image Generator
+cd /d "%~dp0"
+
+set APP=%~dp0app
+set NODE=%APP%\tools\node\node.exe
+set NPM=%APP%\tools\node\npm.cmd
+set DIST=%APP%\dist\index.html
+set SETUP=%~dp0scripts\setup.ps1
+set CUDA_BACKEND=%APP%\backend\win\cuda\sd-cuda.exe
+set VULKAN_BACKEND=%APP%\backend\win\vulkan\sd-vulkan.exe
+set SERVE=%~dp0scripts\serve.cjs
+set SETUP_REASON=
+set SETUP_MODE=Repair
+
+:: ── First-time setup check ────────────────────────────────────────────────────
+if not exist "%APP%\tools\node" set SETUP_MODE=First-Time Setup
+if not exist "%NODE%" (
+    set SETUP_REASON=Portable Node.js is missing.
+    goto :run_setup
+)
+if not exist "%NPM%" (
+    set SETUP_REASON=Portable npm is missing.
+    goto :run_setup
+)
+if not exist "%DIST%" (
+    set SETUP_REASON=Frontend build is missing.
+    goto :run_setup
+)
+if exist "%CUDA_BACKEND%" goto :launch
+if exist "%VULKAN_BACKEND%" goto :launch
+set SETUP_REASON=No backend binary is installed.
+goto :run_setup
+
+:run_setup
+echo.
+echo  ============================================================
+echo   LOCAL AI IMAGE GENERATOR  ^|  %SETUP_MODE%
+echo  ============================================================
+echo.
+if "%SETUP_MODE%"=="First-Time Setup" (
+    echo  This looks like your first run. Setting up automatically...
+) else (
+    echo  Local AI Image Generator needs a quick repair before launch.
+)
+if not "%SETUP_REASON%"=="" echo  Reason: %SETUP_REASON%
+echo  Models are not downloaded during setup. Download or import them in the app.
+echo.
+echo  Press any key to continue, or Ctrl+C to cancel.
+pause >nul
+
+:: Clear old local server processes before setup so app/tools/node can be replaced
+for /f "tokens=5" %%a in ('netstat -aon 2^>nul ^| findstr ":8080 "') do taskkill /f /pid %%a >nul 2>nul
+for /f "tokens=5" %%a in ('netstat -aon 2^>nul ^| findstr ":1420 "') do taskkill /f /pid %%a >nul 2>nul
+
+powershell -ExecutionPolicy Bypass -File "%SETUP%"
+if errorlevel 1 (
+    echo.
+    echo  [ERROR] Setup failed. Please check the output above.
+    pause
+    exit /b 1
+)
+
+:: After setup, continue to launch
+goto :launch
+
+:: ── Launch ────────────────────────────────────────────────────────────────────
+:launch
+cls
+echo.
+echo  ============================================================
+echo   LOCAL AI IMAGE GENERATOR  ^|  Launching...
+echo  ============================================================
+echo.
+
+:: Kill anything on our ports
+echo  Clearing ports 8080 and 1420...
+for /f "tokens=5" %%a in ('netstat -aon 2^>nul ^| findstr ":8080 "') do taskkill /f /pid %%a >nul 2>nul
+for /f "tokens=5" %%a in ('netstat -aon 2^>nul ^| findstr ":1420 "') do taskkill /f /pid %%a >nul 2>nul
+
+:: Start frontend server + backend manager (serve.cjs manages sd-vulkan.exe)
+echo  Starting Local AI Image Generator...
+start "SD-Server" /min "%NODE%" "%SERVE%"
+
+:: Wait for server to bind
+timeout /t 2 >nul
+
+:: Open browser
+echo  Opening browser at http://localhost:1420
+start http://localhost:1420
+
+echo.
+echo  ============================================================
+echo   Running!
+echo   Web UI:     http://localhost:1420
+echo   GPU API:    http://127.0.0.1:8080
+echo.
+echo   Close this window to stop all services.
+echo  ============================================================
+echo.
+pause >nul
+
+:: Cleanup on exit
+echo  Shutting down...
+taskkill /fi "WINDOWTITLE eq SD-Server*" /f >nul 2>nul
+echo  Done. Goodbye!

100% Offline & Private

Auto-Detected GPU Acceleration

No Global Dependencies

Dynamic Backend Controller

Real-time Hardware Telemetry

Drag & Drop Model Importing

+ {health?.stale ? "Restart Required" : readinessIssues.length > 0 ? "System Readiness" : "Safe Cleanup Available"} +

{dialog.title}

Generator Dashboard

+ + Generation Workspace +