Upload 18 files

App.tsx

@@ -0,0 +1,994 @@
+
+import React, { useState, useCallback, useMemo, useEffect, useRef } from 'react';
+import type { MediaFile } from './types';
+import { GenerationStatus } from './types';
+import FileUploader from './components/FileUploader';
+import MediaItem from './components/MediaItem';
+import { generateCaption, refineCaption, checkCaptionQuality } from './services/geminiService';
+import { generateCaptionQwen, refineCaptionQwen, checkQualityQwen } from './services/qwenService';
+import { generateCaptionGrok, refineCaptionGrok, checkQualityGrok } from './services/grokService';
+import { sendComfyPrompt } from './services/comfyService';
+import { DownloadIcon, SparklesIcon, WandIcon, LoaderIcon, CopyIcon, UploadCloudIcon, XIcon, CheckCircleIcon, AlertTriangleIcon, StopIcon, TrashIcon } from './components/Icons';
+import { DEFAULT_COMFY_WORKFLOW } from './constants/defaultWorkflow';
+
+declare const process: {
+  env: { API_KEY?: string; [key: string]: string | undefined; }
+};
+
+declare global {
+  interface AIStudio {
+    hasSelectedApiKey: () => Promise<boolean>;
+    openSelectKey: () => Promise<void>;
+  }
+  interface Window { JSZip: any; aistudio?: AIStudio; }
+}
+
+type ApiProvider = 'gemini' | 'qwen' | 'grok';
+type OSType = 'windows' | 'linux';
+
+const GEMINI_MODELS = [
+    { id: 'gemini-3-pro-preview', name: 'Gemini 3 Pro (High Quality)' },
+    { id: 'gemini-3-flash-preview', name: 'Gemini 3 Flash (Fast)' },
+    { id: 'gemini-2.5-pro-preview-09-2025', name: 'Gemini 2.5 Pro (Multimodal)' },
+    { id: 'gemini-2.5-flash-native-audio-preview-09-2025', name: 'Gemini 2.5 Flash (Multimedia Speed)' }
+];
+
+const QWEN_MODELS = [
+    { id: 'thesby/Qwen3-VL-8B-NSFW-Caption-V4.5', name: 'Thesby Qwen 3 VL 8B NSFW Caption V4.5' },
+    { id: 'huihui-ai/Huihui-Qwen3-VL-8B-Instruct-abliterated', name: 'Huihui Qwen 3 VL 8B Abliterated (Uncensored)' },
+    { id: 'Qwen/Qwen3-VL-8B-Instruct-FP8', name: 'Qwen 3 VL 8B FP8' },
+];
+
+const GROK_MODELS = [
+    { id: 'grok-2-vision-1212', name: 'Grok 2 Vision (12-12)' },
+    { id: 'grok-vision-beta', name: 'Grok Vision Beta' }
+];
+
+const DEFAULT_BULK_INSTRUCTIONS = `Dont use ambiguous language "perhaps" for example. Describe EVERYTHING visible: characters, clothing, actions, background, objects, lighting, and camera angle. Refrain from using generic phrases like "character, male, figure of" and use specific terminology: "woman, girl, boy, man". Do not mention the art style.`;
+const DEFAULT_REFINEMENT_INSTRUCTIONS = `Refine the caption to be more descriptive and cinematic. Ensure all colors and materials are mentioned.`;
+
+const App: React.FC = () => {
+  // --- STATE ---
+  const [mediaFiles, setMediaFiles] = useState<MediaFile[]>([]);
+  const [triggerWord, setTriggerWord] = useState<string>('MyStyle');
+  const [apiProvider, setApiProvider] = useState<ApiProvider>('gemini');
+  const [geminiApiKey, setGeminiApiKey] = useState<string>(process.env.API_KEY || '');
+  const [geminiModel, setGeminiModel] = useState<string>(GEMINI_MODELS[0].id);
+  const [hasSelectedKey, setHasSelectedKey] = useState<boolean>(false);
+
+  // xAI Grok Options
+  const [grokApiKey, setGrokApiKey] = useState<string>('');
+  const [grokModel, setGrokModel] = useState<string>(GROK_MODELS[0].id);
+
+  // Qwen Options
+  const [qwenEndpoint, setQwenEndpoint] = useState<string>('');
+  const [useCustomQwenModel, setUseCustomQwenModel] = useState<boolean>(false);
+  const [customQwenModelId, setCustomQwenModelId] = useState<string>('');
+  const [qwenModel, setQwenModel] = useState<string>(QWEN_MODELS[0].id);
+  const [qwenOsType, setQwenOsType] = useState<OSType>(() => navigator.userAgent.includes("Windows") ? 'windows' : 'linux');
+  const [qwenInstallDir, setQwenInstallDir] = useState<string>(() => navigator.userAgent.includes("Windows") ? 'C:\\AI\\qwen_local' : '/home/user/ai/qwen_local');
+  const [qwenMaxTokens, setQwenMaxTokens] = useState<number>(8192);
+  const [qwen8Bit, setQwen8Bit] = useState<boolean>(false);
+  const [qwenEager, setQwenEager] = useState<boolean>(false);
+  const [qwenVideoFrameCount, setQwenVideoFrameCount] = useState<number>(8);
+  
+  // Offline Local Snapshot Options
+  const [useOfflineSnapshot, setUseOfflineSnapshot] = useState<boolean>(false);
+  const [snapshotPath, setSnapshotPath] = useState<string>('');
+  const [virtualModelName, setVirtualModelName] = useState<string>('thesby/Qwen3-VL-8B-NSFW-Caption-V4.5');
+
+  // ComfyUI Options
+  const [isComfyEnabled, setIsComfyEnabled] = useState<boolean>(false);
+  const [comfyUrl, setComfyUrl] = useState<string>('http://localhost:5000');
+  const [comfyWorkflow, setComfyWorkflow] = useState<any>(DEFAULT_COMFY_WORKFLOW);
+  const [comfyWorkflowName, setComfyWorkflowName] = useState<string>('Default Workflow');
+  const [comfySeed, setComfySeed] = useState<number>(-1);
+  const [comfySteps, setComfySteps] = useState<number>(4);
+  const [activePreviewId, setActivePreviewId] = useState<string | null>(null);
+
+  // Secure Bridge Options
+  const [useSecureBridge, setUseSecureBridge] = useState<boolean>(false);
+  const [isFirstTimeBridge, setIsFirstTimeBridge] = useState<boolean>(false);
+  const [bridgeOsType, setBridgeOsType] = useState<OSType>(() => navigator.userAgent.includes("Windows") ? 'windows' : 'linux');
+  const [bridgeInstallPath, setBridgeInstallPath] = useState<string>(() => navigator.userAgent.includes("Windows") ? 'C:\\AI\\bridge' : '/home/user/ai/bridge');
+
+  // Queue and Performance
+  const [useRequestQueue, setUseRequestQueue] = useState<boolean>(true);
+  const [concurrentTasks, setConcurrentTasks] = useState<number>(1);
+  const [isQueueRunning, setIsQueueRunning] = useState<boolean>(false);
+
+  // Dataset / Instructions
+  const [bulkGenerationInstructions, setBulkGenerationInstructions] = useState<string>(DEFAULT_BULK_INSTRUCTIONS);
+  const [bulkRefinementInstructions, setBulkRefinementInstructions] = useState<string>(DEFAULT_REFINEMENT_INSTRUCTIONS);
+  const [autofitTextareas, setAutofitTextareas] = useState<boolean>(false);
+  const [showSideBySidePreview, setShowSideBySidePreview] = useState<boolean>(false);
+  const [datasetPrefix, setDatasetPrefix] = useState<string>('item');
+  const [isCharacterTaggingEnabled, setIsCharacterTaggingEnabled] = useState<boolean>(false);
+  const [characterShowName, setCharacterShowName] = useState<string>('');
+  const [isExporting, setIsExporting] = useState<boolean>(false);
+
+  const abortControllerRef = useRef<AbortController>(new AbortController());
+
+  // --- EFFECTS ---
+  useEffect(() => {
+    if (window.aistudio) {
+        window.aistudio.hasSelectedApiKey().then(setHasSelectedKey);
+    }
+    const isHttps = window.location.protocol === 'https:';
+    if (!qwenEndpoint) {
+        setQwenEndpoint(isHttps ? '' : 'http://localhost:8000/v1');
+    }
+  }, [qwenEndpoint]);
+
+  // Handle Modal Keyboard Navigation
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (!activePreviewId) return;
+      if (e.key === 'ArrowRight') handleNextPreview();
+      if (e.key === 'ArrowLeft') handlePrevPreview();
+      if (e.key === 'Escape') setActivePreviewId(null);
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [activePreviewId, mediaFiles]);
+
+  // --- MEMOIZED VALUES ---
+  const hasValidConfig = useMemo(() => {
+    if (apiProvider === 'gemini') return !!geminiApiKey;
+    if (apiProvider === 'grok') return !!grokApiKey;
+    return qwenEndpoint !== '';
+  }, [apiProvider, geminiApiKey, grokApiKey, qwenEndpoint]);
+
+  const selectedFiles = useMemo(() => {
+    return (mediaFiles || []).filter(mf => mf.isSelected);
+  }, [mediaFiles]);
+  const currentPreviewItem = useMemo(() => (mediaFiles || []).find(m => m.id === activePreviewId), [mediaFiles, activePreviewId]);
+
+  const qwenEffectiveModel = useMemo(() => {
+    if (useOfflineSnapshot) return virtualModelName;
+    return useCustomQwenModel ? customQwenModelId : qwenModel;
+  }, [useOfflineSnapshot, virtualModelName, useCustomQwenModel, customQwenModelId, qwenModel]);
+
+  const qwenStartCommand = useMemo(() => {
+    const isWin = qwenOsType === 'windows';
+    const path = qwenInstallDir.replace(/[\\/]+$/, '');
+    
+    // Model logic for command
+    const modelToLoad = useOfflineSnapshot ? snapshotPath : (useCustomQwenModel ? customQwenModelId : qwenModel);
+    
+    const activate = isWin ? `venv\\Scripts\\activate` : `source venv/bin/activate`;
+    const python = isWin ? `python` : `python3`;
+    const offlineEnv = isWin ? `set HF_HUB_OFFLINE=1` : `export HF_HUB_OFFLINE=1`;
+    
+    let args = `--model "${modelToLoad}" --max-model-len ${qwenMaxTokens}`;
+    if (useOfflineSnapshot) {
+      args += ` --served-model-name "${virtualModelName}"`;
+    }
+    if (qwen8Bit) args += ` --load-format bitsandbytes --quantization bitsandbytes`;
+    if (qwenEager) args += ` --enforce-eager`;
+    
+    const baseCmd = isWin 
+      ? `cd /d "${path}" && ${useOfflineSnapshot ? `${offlineEnv} && ` : ''}${activate} && ${python} -m vllm.entrypoints.openai.api_server ${args}`
+      : `cd "${path}" && ${useOfflineSnapshot ? `${offlineEnv} && ` : ''}${activate} && ${python} -m vllm.entrypoints.openai.api_server ${args}`;
+    
+    return baseCmd;
+  }, [qwenOsType, qwenInstallDir, useCustomQwenModel, customQwenModelId, qwenModel, qwenMaxTokens, qwen8Bit, qwenEager, useOfflineSnapshot, snapshotPath, virtualModelName]);
+
+  const bridgeStartCommand = useMemo(() => {
+    const isWindows = bridgeOsType === 'windows';
+    const path = bridgeInstallPath.replace(/[\\/]+$/, '');
+    const activateCmd = isWindows ? `call venv\\Scripts\\activate` : `source venv/bin/activate`;
+    const pipCmd = `pip install flask flask-cors requests`;
+    const setupCmd = isWindows 
+      ? `python -m venv venv && ${activateCmd} && ${pipCmd}`
+      : `python3 -m venv venv && ${activateCmd} && ${pipCmd}`;
+    return isWindows 
+        ? `cd /d "${path}" && ${isFirstTimeBridge ? `${setupCmd} && ` : ''}${activateCmd} && python bridge.py`
+        : `cd "${path}" && ${isFirstTimeBridge ? `${setupCmd} && ` : ''}${activateCmd} && python3 bridge.py`;
+  }, [bridgeInstallPath, bridgeOsType, isFirstTimeBridge]);
+
+  const isTunnelRequired = useMemo(() => {
+    return window.location.protocol === 'https:' && (qwenEndpoint.includes('localhost') || qwenEndpoint.includes('127.0.0.1'));
+  }, [qwenEndpoint]);
+
+  // --- HANDLERS ---
+  const handleSelectApiKey = async () => {
+    if (window.aistudio) {
+      await window.aistudio.openSelectKey();
+      setHasSelectedKey(true);
+    }
+  };
+
+  const updateFile = useCallback((id: string, updates: Partial<MediaFile>) => {
+    setMediaFiles(prev => (prev || []).map(mf => (mf.id === id ? { ...mf, ...updates } : mf)));
+  }, []);
+
+  const handleFilesAdded = useCallback(async (files: File[]) => {
+    const mediaFilesList = files.filter(file => file.type.startsWith('image/') || file.type.startsWith('video/'));
+    const textFilesList = files.filter(file => file.name.toLowerCase().endsWith('.txt'));
+
+    // Create a map of filename (no extension) to the text file object for quick lookup
+    const textFilesMap = new Map<string, File>();
+    textFilesList.forEach(f => {
+      const baseName = f.name.substring(0, f.name.lastIndexOf('.'));
+      textFilesMap.set(baseName.toLowerCase(), f);
+    });
+
+    const newMediaFiles = await Promise.all(mediaFilesList.map(async (file) => {
+      const baseName = file.name.substring(0, file.name.lastIndexOf('.'));
+      let initialCaption = '';
+      
+      const matchedTxtFile = textFilesMap.get(baseName.toLowerCase());
+      if (matchedTxtFile) {
+        try {
+          initialCaption = await matchedTxtFile.text();
+        } catch (e) {
+          console.error(`Failed to read caption for ${file.name}`, e);
+        }
+      }
+
+      return {
+        id: `${file.name}-${Math.random()}`,
+        file,
+        previewUrl: URL.createObjectURL(file),
+        caption: initialCaption.trim(),
+        status: GenerationStatus.IDLE,
+        isSelected: false,
+        customInstructions: '',
+        comfyStatus: 'idle'
+      } as MediaFile;
+    }));
+
+    setMediaFiles(prev => [...(prev || []), ...newMediaFiles]);
+  }, []);
+
+  const handleCheckQuality = useCallback(async (id: string) => {
+    const fileToProcess = (mediaFiles || []).find(mf => mf.id === id);
+    if (!hasValidConfig || !fileToProcess || !fileToProcess.caption) return;
+
+    updateFile(id, { status: GenerationStatus.CHECKING, errorMessage: undefined });
+
+    try {
+        let score = 0;
+        if (apiProvider === 'gemini') {
+            score = await checkCaptionQuality(fileToProcess.file, fileToProcess.caption, abortControllerRef.current.signal, geminiApiKey, geminiModel);
+        } else if (apiProvider === 'grok') {
+            score = await checkQualityGrok(grokApiKey, grokModel, fileToProcess.file, fileToProcess.caption, qwenVideoFrameCount, abortControllerRef.current.signal);
+        } else {
+            score = await checkQualityQwen('', qwenEndpoint, qwenEffectiveModel, fileToProcess.file, fileToProcess.caption, qwenVideoFrameCount, abortControllerRef.current.signal);
+        }
+        
+        updateFile(id, { qualityScore: score, status: GenerationStatus.SUCCESS });
+    } catch (err: any) {
+        if (err.name === 'AbortError' || err.message === 'AbortError') {
+            updateFile(id, { status: GenerationStatus.IDLE, errorMessage: "Stopped by user" });
+        } else {
+            updateFile(id, { status: GenerationStatus.ERROR, errorMessage: err.message });
+        }
+    }
+  }, [mediaFiles, apiProvider, qwenEndpoint, qwenEffectiveModel, qwenVideoFrameCount, grokApiKey, grokModel, hasValidConfig, updateFile, geminiApiKey, geminiModel]);
+
+  const handleGenerateCaption = useCallback(async (id: string, itemInstructions?: string) => {
+    const fileToProcess = (mediaFiles || []).find(mf => mf.id === id);
+    if (!hasValidConfig || !fileToProcess) return;
+
+    updateFile(id, { status: GenerationStatus.GENERATING, errorMessage: undefined, qualityScore: undefined });
+    
+    const combinedInstructions = `${bulkGenerationInstructions}\n\n${itemInstructions || ''}`.trim();
+
+    try {
+      let caption = '';
+      if (apiProvider === 'gemini') {
+          caption = await generateCaption(fileToProcess.file, triggerWord, combinedInstructions, isCharacterTaggingEnabled, characterShowName, abortControllerRef.current.signal, geminiApiKey, geminiModel);
+      } else if (apiProvider === 'grok') {
+          caption = await generateCaptionGrok(grokApiKey, grokModel, fileToProcess.file, triggerWord, combinedInstructions, isCharacterTaggingEnabled, characterShowName, qwenVideoFrameCount, abortControllerRef.current.signal);
+      } else {
+          caption = await generateCaptionQwen('', qwenEndpoint, qwenEffectiveModel, fileToProcess.file, triggerWord, combinedInstructions, isCharacterTaggingEnabled, characterShowName, qwenVideoFrameCount, abortControllerRef.current.signal);
+      }
+      
+      updateFile(id, { caption, status: GenerationStatus.SUCCESS });
+    } catch (err: any) {
+      if (err.name === 'AbortError' || err.message === 'AbortError') {
+          updateFile(id, { status: GenerationStatus.IDLE, errorMessage: "Stopped by user" });
+      } else {
+          updateFile(id, { status: GenerationStatus.ERROR, errorMessage: err.message });
+      }
+    }
+  }, [mediaFiles, triggerWord, apiProvider, qwenEndpoint, qwenEffectiveModel, qwenVideoFrameCount, grokApiKey, grokModel, bulkGenerationInstructions, isCharacterTaggingEnabled, characterShowName, hasValidConfig, updateFile, geminiApiKey, geminiModel]);
+
+  const handleRefineCaptionItem = useCallback(async (id: string, itemInstructions?: string) => {
+    const fileToProcess = (mediaFiles || []).find(mf => mf.id === id);
+    if (!hasValidConfig || !fileToProcess || !fileToProcess.caption) return;
+
+    updateFile(id, { status: GenerationStatus.GENERATING, errorMessage: undefined });
+    
+    const combinedInstructions = `${bulkRefinementInstructions}\n\n${itemInstructions || ''}`.trim();
+
+    try {
+      let caption = '';
+      if (apiProvider === 'gemini') {
+          caption = await refineCaption(fileToProcess.file, fileToProcess.caption, combinedInstructions, abortControllerRef.current.signal, geminiApiKey, geminiModel);
+      } else if (apiProvider === 'grok') {
+          caption = await refineCaptionGrok(grokApiKey, grokModel, fileToProcess.file, fileToProcess.caption, combinedInstructions, qwenVideoFrameCount, abortControllerRef.current.signal);
+      } else {
+          caption = await refineCaptionQwen('', qwenEndpoint, qwenEffectiveModel, fileToProcess.file, fileToProcess.caption, combinedInstructions, qwenVideoFrameCount, abortControllerRef.current.signal);
+      }
+      
+      updateFile(id, { caption, status: GenerationStatus.SUCCESS });
+    } catch (err: any) {
+      if (err.name === 'AbortError' || err.message === 'AbortError') {
+          updateFile(id, { status: GenerationStatus.IDLE, errorMessage: "Stopped by user" });
+      } else {
+          updateFile(id, { status: GenerationStatus.ERROR, errorMessage: err.message });
+      }
+    }
+  }, [mediaFiles, apiProvider, qwenEndpoint, qwenEffectiveModel, qwenVideoFrameCount, grokApiKey, grokModel, bulkRefinementInstructions, hasValidConfig, updateFile, geminiApiKey, geminiModel]);
+
+  // --- QUEUE CONTROLLER ---
+  const runTasksInQueue = async (tasks: (() => Promise<void>)[]) => {
+    setIsQueueRunning(true);
+    const pool = new Set<Promise<void>>();
+    for (const task of tasks) {
+      if (abortControllerRef.current.signal.aborted) break;
+      const promise = task();
+      pool.add(promise);
+      promise.finally(() => pool.delete(promise));
+      if (pool.size >= concurrentTasks) {
+        await Promise.race(pool);
+      }
+    }
+    await Promise.all(pool);
+    setIsQueueRunning(false);
+  };
+
+  const handleBulkGenerate = () => {
+    const tasks = selectedFiles.map(file => () => handleGenerateCaption(file.id, file.customInstructions));
+    if (useRequestQueue) {
+      runTasksInQueue(tasks);
+    } else {
+      tasks.forEach(t => t());
+    }
+  };
+
+  const handleBulkRefine = () => {
+    const tasks = selectedFiles.map(file => () => handleRefineCaptionItem(file.id, file.customInstructions));
+    if (useRequestQueue) {
+      runTasksInQueue(tasks);
+    } else {
+      tasks.forEach(t => t());
+    }
+  };
+
+  const handleBulkQualityCheck = () => {
+    const tasks = selectedFiles.map(file => () => handleCheckQuality(file.id));
+    if (useRequestQueue) {
+      runTasksInQueue(tasks);
+    } else {
+      tasks.forEach(t => t());
+    }
+  };
+
+  const handleClearWorkflow = useCallback(() => {
+    setComfyWorkflow(DEFAULT_COMFY_WORKFLOW);
+    setComfyWorkflowName('Default Workflow');
+  }, []);
+
+  const handleComfyPreview = useCallback(async (id: string) => {
+    const item = (mediaFiles || []).find(m => m.id === id);
+    if (!item || !comfyWorkflow || !comfyUrl) return;
+
+    updateFile(id, { comfyStatus: 'generating', comfyErrorMessage: undefined });
+    try {
+        const previewUrl = await sendComfyPrompt(comfyUrl, comfyWorkflow, item.caption, comfySeed, comfySteps, useSecureBridge, abortControllerRef.current.signal);
+        updateFile(id, { comfyPreviewUrl: previewUrl, comfyStatus: 'success' });
+    } catch (err: any) {
+        if (err.name === 'AbortError' || err.message === 'Aborted') {
+            updateFile(id, { comfyStatus: 'idle', comfyErrorMessage: "Stopped" });
+        } else {
+            updateFile(id, { comfyStatus: 'error', comfyErrorMessage: err.message });
+        }
+    }
+  }, [mediaFiles, comfyWorkflow, comfyUrl, comfySeed, comfySteps, useSecureBridge, updateFile]);
+
+  const handleBulkPreview = () => {
+    selectedFiles.forEach(file => handleComfyPreview(file.id));
+  };
+
+  const handleDeleteSelected = useCallback(() => {
+    setMediaFiles(prev => {
+      const remaining = (prev || []).filter(mf => !mf.isSelected);
+      return remaining || [];
+    });
+  }, []);
+
+  const handleStopTasks = () => {
+    abortControllerRef.current.abort();
+    abortControllerRef.current = new AbortController();
+    setIsQueueRunning(false);
+    setMediaFiles(prev => (prev || []).map(mf => {
+      if (mf.status === GenerationStatus.GENERATING || mf.status === GenerationStatus.CHECKING) {
+        return { ...mf, status: GenerationStatus.IDLE, errorMessage: "Stopped by user" };
+      }
+      if (mf.comfyStatus === 'generating') {
+        return { ...mf, comfyStatus: 'idle', comfyErrorMessage: "Stopped" };
+      }
+      return mf;
+    }));
+  };
+
+  const handleExportDataset = useCallback(async () => {
+    if (selectedFiles.length === 0) return;
+    const JSZip = (window as any).JSZip;
+    if (!JSZip) return alert("JSZip not loaded.");
+
+    setIsExporting(true);
+    try {
+      const zip = new JSZip();
+      const prefix = datasetPrefix.trim() || 'item';
+      selectedFiles.forEach((mf, idx) => {
+        const fileExt = mf.file.name.split('.').pop() || 'dat';
+        const finalName = `${prefix}_${idx + 1}`;
+        zip.file(`${finalName}.${fileExt}`, mf.file);
+        zip.file(`${finalName}.txt`, mf.caption || "");
+      });
+      const content = await zip.generateAsync({ type: 'blob' });
+      const link = document.createElement('a');
+      link.href = URL.createObjectURL(content);
+      link.download = `lora_dataset_${new Date().getTime()}.zip`;
+      link.click();
+    } catch (err: any) {
+        alert("Export failed: " + err.message);
+    } finally { setIsExporting(false); }
+  }, [selectedFiles, datasetPrefix]);
+
+  const handleNextPreview = useCallback(() => {
+    if (!activePreviewId || (mediaFiles || []).length <= 1) return;
+    const currentIndex = mediaFiles.findIndex(m => m.id === activePreviewId);
+    const nextIndex = (currentIndex + 1) % mediaFiles.length;
+    setActivePreviewId(mediaFiles[nextIndex].id);
+  }, [activePreviewId, mediaFiles]);
+
+  const handlePrevPreview = useCallback(() => {
+    if (!activePreviewId || (mediaFiles || []).length <= 1) return;
+    const currentIndex = mediaFiles.findIndex(m => m.id === activePreviewId);
+    const prevIndex = (currentIndex - 1 + mediaFiles.length) % mediaFiles.length;
+    setActivePreviewId(mediaFiles[prevIndex].id);
+  }, [activePreviewId, mediaFiles]);
+
+  const downloadQwenSetupScript = () => {
+    const isWin = qwenOsType === 'windows';
+    const content = isWin 
+      ? `@echo off\nSETLOCAL EnableDelayedExpansion\necho [LoRA Caption Assistant] Starting Local Qwen Setup for Windows...\n\n:: Check for Python\npython --version >nul 2>&1\nif %errorlevel% neq 0 (\n    echo [ERROR] Python not found! Please install Python 3.10+ from python.org\n    pause\n    exit /b\n)\n\necho [1/3] Creating Virtual Environment...\npython -m venv venv\nif %errorlevel% neq 0 (\n    echo [ERROR] Failed to create venv.\n    pause\n    exit /b\n)\n\necho [2/3] Activating Environment and Upgrading Pip...\ncall venv\\Scripts\\activate\npython -m pip install --upgrade pip\n\necho [3/3] Installing vLLM and Dependencies...\necho vLLM natively on Windows is Experimental. Using WSL2 is highly recommended.\necho Attempting installation of bitsandbytes and requirements...\npip install bitsandbytes requests\n:: Note: Users often need specific wheels for vLLM on Windows or WSL2.\necho To run vLLM on Windows, please follow the official guide for WSL2.\necho This script sets up the local Python environment for bridging.\npause`
+      : `#!/bin/bash\npython3 -m venv venv\nsource venv/bin/activate\npip install vllm bitsandbytes\necho Setup Complete.`;
+    const filename = isWin ? 'setup_qwen.bat' : 'setup_qwen.sh';
+    const blob = new Blob([content], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const downloadBridgeSetupScript = () => {
+    const isWin = bridgeOsType === 'windows';
+    const content = isWin 
+      ? `@echo off\nSETLOCAL EnableDelayedExpansion\necho [LoRA Caption Assistant] Starting Secure Bridge Setup for Windows...\n\n:: Check for Python\npython --version >nul 2>&1\nif %errorlevel% neq 0 (\n    echo [ERROR] Python not found! Please install Python 3.10+ from python.org\n    pause\n    exit /b\n)\n\necho [1/3] Creating Virtual Environment...\npython -m venv venv\nif %errorlevel% neq 0 (\n    echo [ERROR] Failed to create venv.\n    pause\n    exit /b\n)\n\necho [2/3] Activating Environment...\ncall venv\\Scripts\\activate\n\necho [3/3] Installing Bridge Dependencies...\npip install flask flask-cors requests\nif %errorlevel% neq 0 (\n    echo [ERROR] Installation failed.\n    pause\n    exit /b\n)\n\necho Bridge Setup Complete. You can now download bridge.py and run it using the command shown in the app.\npause`
+      : `#!/bin/bash\npython3 -m venv venv\nsource venv/bin/activate\npip install flask flask-cors requests\necho Bridge Setup Complete.`;
+    const filename = isWin ? 'setup_bridge.bat' : 'setup_bridge.sh';
+    const blob = new Blob([content], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const downloadBridgeScript = () => {
+    const code = `import requests\nfrom flask import Flask, request, Response\nfrom flask_cors import CORS\napp = Flask(__name__)\nCORS(app)\nTARGET = "http://127.0.0.1:8188"\n@app.route('/', defaults={'path': ''}, methods=['GET','POST','PUT','DELETE','PATCH','OPTIONS'])\n@app.route('/<path:path>', methods=['GET','POST','PUT','DELETE','PATCH','OPTIONS'])\ndef proxy(path):\n  url = f"{TARGET}/{path}"\n  headers = {k:v for k,v in request.headers.items() if k.lower() not in ['host', 'origin', 'referer']}\n  resp = requests.request(method=request.method, url=url, headers=headers, data=request.get_data(), params=request.args, stream=True)\n  return Response(resp.content, resp.status_code, [(n,v) for n,v in resp.headers.items() if n.lower() not in ['content-encoding','content-length','transfer-encoding','connection']])\nif __name__ == '__main__': app.run(port=5000, host='0.0.0.0')`;
+    const blob = new Blob([code], { type: 'text/x-python' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'bridge.py';
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  // --- RENDER ---
+  return (
+    <div className="min-h-screen bg-gray-950 text-gray-100 font-sans p-4 sm:p-8">
+      {/* PREVIEW MODAL */}
+      {activePreviewId && currentPreviewItem && (
+          <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/95 backdrop-blur-sm animate-fade-in" onClick={() => setActivePreviewId(null)}>
+              <div className="bg-gray-900 w-full max-w-6xl rounded-2xl border border-gray-700 overflow-hidden flex flex-col max-h-[95vh] animate-scale-up shadow-2xl relative" onClick={(e) => e.stopPropagation()}>
+                  <button onClick={handlePrevPreview} className="absolute left-4 top-1/2 -translate-y-1/2 z-10 p-4 bg-gray-800/80 hover:bg-indigo-600 rounded-full text-white shadow-2xl transition-all border border-white/5 active:scale-90">
+                    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M15 19l-7-7 7-7"/></svg>
+                  </button>
+                  <button onClick={handleNextPreview} className="absolute right-4 top-1/2 -translate-y-1/2 z-10 p-4 bg-gray-800/80 hover:bg-indigo-600 rounded-full text-white shadow-2xl transition-all border border-white/5 active:scale-90">
+                    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M9 5l7 7-7 7"/></svg>
+                  </button>
+                  <div className="px-6 py-4 border-b border-gray-800 flex justify-between items-center bg-gray-850">
+                      <div className="flex items-center gap-4">
+                        <SparklesIcon className="w-5 h-5 text-indigo-400" />
+                        <div className="flex flex-col">
+                            <h3 className="text-xs font-black uppercase tracking-widest text-gray-400">{(mediaFiles || []).findIndex(m => m.id === activePreviewId) + 1} of {mediaFiles.length}</h3>
+                            <h3 className="text-[11px] font-bold truncate max-w-md text-gray-500">{currentPreviewItem.file.name}</h3>
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <button onClick={handlePrevPreview} className="px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded-xl text-[10px] font-black uppercase transition-all">Prev</button>
+                        <button onClick={handleNextPreview} className="px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded-xl text-[10px] font-black uppercase transition-all">Next</button>
+                        <button onClick={() => setActivePreviewId(null)} className="ml-4 p-2 hover:bg-red-600/20 rounded-full transition-colors text-gray-500 hover:text-red-400"><XIcon className="w-5 h-5" /></button>
+                      </div>
+                  </div>
+                  <div className="flex-grow overflow-y-auto p-6 space-y-8 bg-black/40">
+                      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 h-[450px]">
+                          <div className="bg-black rounded-2xl border border-gray-800 flex items-center justify-center overflow-hidden relative shadow-inner">
+                             {currentPreviewItem.file.type.startsWith('video/') ? <video src={currentPreviewItem.previewUrl} className="max-h-full" controls /> : <img src={currentPreviewItem.previewUrl} className="max-h-full object-contain" />}
+                             <div className="absolute top-3 left-3 bg-black/70 backdrop-blur-md px-3 py-1 rounded-lg text-[10px] font-black uppercase text-white/80 border border-white/5">Original Data</div>
+                          </div>
+                          <div className="bg-black rounded-2xl border border-gray-800 flex items-center justify-center relative overflow-hidden shadow-inner">
+                             {currentPreviewItem.comfyPreviewUrl ? <img src={currentPreviewItem.comfyPreviewUrl} className="max-h-full object-contain" /> : <div className="text-xs uppercase text-gray-700 tracking-widest font-black">No Preview Rendered</div>}
+                             {currentPreviewItem.comfyStatus === 'generating' && <div className="absolute inset-0 bg-black/60 flex flex-col items-center justify-center gap-3"><LoaderIcon className="w-10 h-10 animate-spin text-orange-500" /><span className="text-xs font-black uppercase text-orange-400 tracking-widest">Rendering via ComfyUI...</span></div>}
+                             <div className="absolute top-3 left-3 bg-orange-600/70 backdrop-blur-md px-3 py-1 rounded-lg text-[10px] font-black uppercase text-white/90 border border-white/5">ComfyUI Render</div>
+                          </div>
+                      </div>
+                      <div className="space-y-6">
+                          <textarea value={currentPreviewItem.caption} onChange={(e) => updateFile(currentPreviewItem.id, { caption: e.target.value })} className="w-full bg-gray-950 border border-gray-700 rounded-2xl p-6 text-sm h-40 outline-none focus:ring-2 focus:ring-indigo-500 transition-all shadow-inner leading-relaxed" />
+                          <div className="flex gap-4">
+                             <input type="text" value={currentPreviewItem.customInstructions} onChange={(e) => updateFile(currentPreviewItem.id, { customInstructions: e.target.value })} placeholder="Refine caption instructions..." className="flex-grow bg-gray-800 border border-gray-700 rounded-xl px-5 py-3 text-sm outline-none focus:ring-1 focus:ring-indigo-500 shadow-sm" />
+                             <button onClick={() => handleGenerateCaption(currentPreviewItem.id, currentPreviewItem.customInstructions)} className="px-8 py-3 bg-green-600 hover:bg-green-500 text-white rounded-xl text-xs font-black uppercase transition-all shadow-xl active:scale-95">Re-Generate</button>
+                             <button onClick={() => handleRefineCaptionItem(currentPreviewItem.id, currentPreviewItem.customInstructions)} className="px-8 py-3 bg-indigo-600 hover:bg-indigo-500 text-white rounded-xl text-xs font-black uppercase transition-all shadow-xl active:scale-95">Refine</button>
+                             <button onClick={() => handleCheckQuality(currentPreviewItem.id)} className="px-8 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-xl text-xs font-black uppercase transition-all shadow-xl active:scale-95">Check Quality</button>
+                             <button onClick={() => handleComfyPreview(currentPreviewItem.id)} className="px-8 py-3 bg-orange-600 hover:bg-orange-500 text-white rounded-xl text-xs font-black uppercase transition-all shadow-xl active:scale-95">Preview</button>
+                          </div>
+                      </div>
+                  </div>
+              </div>
+          </div>
+      )}
+
+      <main className="max-w-6xl mx-auto space-y-8 animate-fade-in">
+        <section className="bg-gray-900 border border-gray-800 p-8 rounded-3xl shadow-2xl space-y-12">
+            <h2 className="text-3xl font-black flex items-center gap-4 uppercase tracking-tighter text-white">1. Global Settings & Actions</h2>
+            
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-16">
+                <div className="space-y-10">
+                    <div>
+                        <label className="text-xs font-black text-gray-500 uppercase tracking-widest block mb-4">AI Provider</label>
+                        <div className="flex p-1.5 bg-black rounded-2xl border border-gray-800 shadow-inner">
+                            <button onClick={() => setApiProvider('gemini')} className={`flex-1 py-3 text-[10px] font-black uppercase rounded-xl transition-all ${apiProvider === 'gemini' ? 'bg-indigo-600 text-white shadow-lg' : 'text-gray-600 hover:text-gray-400'}`}>Google Gemini</button>
+                            <button onClick={() => setApiProvider('grok')} className={`flex-1 py-3 text-[10px] font-black uppercase rounded-xl transition-all ${apiProvider === 'grok' ? 'bg-indigo-600 text-white shadow-lg' : 'text-gray-600 hover:text-gray-400'}`}>xAI Grok</button>
+                            <button onClick={() => setApiProvider('qwen')} className={`flex-1 py-3 text-[10px] font-black uppercase rounded-xl transition-all ${apiProvider === 'qwen' ? 'bg-indigo-600 text-white shadow-lg' : 'text-gray-600 hover:text-gray-400'}`}>Local Qwen</button>
+                        </div>
+                    </div>
+
+                    {apiProvider === 'gemini' && (
+                        <div className="bg-indigo-500/5 border border-indigo-500/20 p-6 rounded-3xl space-y-6 animate-slide-down shadow-xl">
+                            <div className="space-y-4">
+                                <div className="flex justify-between items-center">
+                                    <label className="text-[10px] font-black text-indigo-400 uppercase tracking-widest">Gemini Model Version</label>
+                                </div>
+                                <select 
+                                    value={geminiModel} 
+                                    onChange={(e) => setGeminiModel(e.target.value)}
+                                    className="w-full p-3 bg-black border border-indigo-500/30 rounded-xl text-xs font-bold text-gray-300 shadow-inner focus:ring-1 focus:ring-indigo-500 outline-none"
+                                >
+                                    {GEMINI_MODELS.map(m => <option key={m.id} value={m.id}>{m.name}</option>)}
+                                </select>
+                            </div>
+
+                            <div className="space-y-4">
+                                <div className="flex justify-between items-center">
+                                    <label className="text-[10px] font-black text-indigo-400 uppercase tracking-widest">Gemini API Key</label>
+                                    {geminiApiKey && <span className="flex items-center gap-1.5 text-[9px] font-black uppercase text-green-400 bg-green-400/10 px-2 py-0.5 rounded-full"><CheckCircleIcon className="w-3 h-3"/> Configured</span>}
+                                </div>
+                                <div className="relative group">
+                                    <input 
+                                        type="password" 
+                                        value={geminiApiKey} 
+                                        onChange={(e) => setGeminiApiKey(e.target.value)}
+                                        placeholder="Enter your Gemini API key here..."
+                                        className="w-full py-4 px-5 bg-black border border-indigo-500/30 rounded-2xl text-xs font-mono shadow-inner focus:ring-1 focus:ring-indigo-500 outline-none hover:border-indigo-500/60 transition-all"
+                                    />
+                                    <div className="absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none text-indigo-400/50 group-hover:text-indigo-400 transition-colors">
+                                        <SparklesIcon className="w-5 h-5" />
+                                    </div>
+                                </div>
+                            </div>
+                            <p className="text-[10px] text-gray-500 flex items-center gap-1.5 px-1">
+                                <AlertTriangleIcon className="w-3 h-3 text-indigo-400" />
+                                Get an API key from 
+                                <a href="https://aistudio.google.com/app/apikey" target="_blank" rel="noopener noreferrer" className="text-indigo-400 hover:underline font-bold">Google AI Studio</a>
+                            </p>
+                        </div>
+                    )}
+
+                    {apiProvider === 'grok' && (
+                        <div className="bg-orange-500/5 border border-orange-500/20 p-6 rounded-3xl space-y-6 animate-slide-down shadow-xl">
+                            <div className="space-y-4">
+                                <div className="flex justify-between items-center">
+                                    <label className="text-[10px] font-black text-orange-400 uppercase tracking-widest">Grok Model Version</label>
+                                </div>
+                                <select 
+                                    value={grokModel} 
+                                    onChange={(e) => setGrokModel(e.target.value)}
+                                    className="w-full p-3 bg-black border border-orange-500/30 rounded-xl text-xs font-bold text-gray-300 shadow-inner focus:ring-1 focus:ring-orange-500 outline-none"
+                                >
+                                    {GROK_MODELS.map(m => <option key={m.id} value={m.id}>{m.name}</option>)}
+                                </select>
+                            </div>
+
+                            <div className="space-y-4">
+                                <div className="flex justify-between items-center">
+                                    <label className="text-[10px] font-black text-orange-400 uppercase tracking-widest">xAI API Key</label>
+                                    {grokApiKey && <span className="flex items-center gap-1.5 text-[9px] font-black uppercase text-green-400 bg-green-400/10 px-2 py-0.5 rounded-full"><CheckCircleIcon className="w-3 h-3"/> Configured</span>}
+                                </div>
+                                <div className="relative group">
+                                    <input 
+                                        type="password" 
+                                        value={grokApiKey} 
+                                        onChange={(e) => setGrokApiKey(e.target.value)}
+                                        placeholder="Enter your xAI Grok API key here..."
+                                        className="w-full py-4 px-5 bg-black border border-orange-500/30 rounded-2xl text-xs font-mono shadow-inner focus:ring-1 focus:ring-orange-500 outline-none hover:border-orange-500/60 transition-all"
+                                    />
+                                    <div className="absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none text-orange-400/50 group-hover:text-orange-400 transition-colors">
+                                        <SparklesIcon className="w-5 h-5" />
+                                    </div>
+                                </div>
+                            </div>
+                            <p className="text-[10px] text-gray-500 flex items-center gap-1.5 px-1">
+                                <AlertTriangleIcon className="w-3 h-3 text-orange-400" />
+                                Get an API key from 
+                                <a href="https://console.x.ai/" target="_blank" rel="noopener noreferrer" className="text-orange-400 hover:underline font-bold">xAI Console</a>
+                            </p>
+                        </div>
+                    )}
+
+                    {apiProvider === 'qwen' && (
+                        <div className="bg-gray-950 p-6 rounded-3xl border border-gray-800 space-y-6 animate-slide-down shadow-xl">
+                            <div className="flex justify-between items-center mb-2">
+                                <label className="text-[10px] font-black text-indigo-400 uppercase tracking-widest">Local Model Configuration</label>
+                                <div className="flex items-center gap-4">
+                                  <label className="flex items-center gap-2 cursor-pointer group">
+                                      <input type="checkbox" checked={useOfflineSnapshot} onChange={e => setUseOfflineSnapshot(e.target.checked)} className="h-4 w-4 rounded bg-gray-800 border-gray-700 text-indigo-600" />
+                                      <span className="text-[10px] font-bold text-orange-400 group-hover:text-orange-300">Use Offline Local Snapshot</span>
+                                  </label>
+                                  {!useOfflineSnapshot && (
+                                    <label className="flex items-center gap-2 cursor-pointer group">
+                                        <input type="checkbox" checked={useCustomQwenModel} onChange={e => setUseCustomQwenModel(e.target.checked)} className="h-4 w-4 rounded bg-gray-800 border-gray-700 text-indigo-600" />
+                                        <span className="text-[10px] font-bold text-gray-500 group-hover:text-gray-300">Custom Model ID</span>
+                                    </label>
+                                  )}
+                                </div>
+                            </div>
+                            
+                            {useOfflineSnapshot ? (
+                              <div className="space-y-4 animate-slide-down">
+                                <div className="space-y-1">
+                                    <label className="text-[9px] font-black text-gray-700 uppercase">Snapshot Directory Path</label>
+                                    <input type="text" value={snapshotPath} onChange={e => setSnapshotPath(e.target.value)} placeholder="/path/to/hf_cache/.../snapshots/hash..." className="w-full p-2.5 bg-black border border-gray-800 rounded-xl text-xs font-mono shadow-inner" />
+                                </div>
+                                <div className="space-y-1">
+                                    <label className="text-[9px] font-black text-gray-700 uppercase">Virtual Model Name (Served Name)</label>
+                                    <input type="text" value={virtualModelName} onChange={e => setVirtualModelName(e.target.value)} placeholder="org/model-id..." className="w-full p-2.5 bg-black border border-gray-800 rounded-xl text-xs font-mono shadow-inner" />
+                                </div>
+                              </div>
+                            ) : useCustomQwenModel ? (
+                                <input type="text" value={customQwenModelId} onChange={e => setCustomQwenModelId(e.target.value)} placeholder="org/model-id..." className="w-full p-3 bg-black border border-gray-800 rounded-xl text-xs font-mono shadow-inner" />
+                            ) : (
+                                <select value={qwenModel} onChange={e => setQwenModel(e.target.value)} className="w-full p-3 bg-black border border-gray-800 rounded-xl text-xs font-bold text-gray-300 shadow-inner">
+                                    {QWEN_MODELS.map(m => <option key={m.id} value={m.id}>{m.name}</option>)}
+                                </select>
+                            )}
+
+                            <div className="pt-4 border-t border-gray-800 space-y-4">
+                                <div className="flex justify-between items-center">
+                                    <span className="text-[10px] font-black text-gray-600 uppercase">OS Type:</span>
+                                    <div className="flex gap-2">
+                                        <button onClick={() => setQwenOsType('windows')} className={`px-3 py-1 text-[9px] font-black uppercase rounded-lg transition-all ${qwenOsType === 'windows' ? 'bg-indigo-600 text-white' : 'text-gray-600 hover:text-gray-400'}`}>Windows</button>
+                                        <button onClick={() => setQwenOsType('linux')} className={`px-3 py-1 text-[9px] font-black uppercase rounded-lg transition-all ${qwenOsType === 'linux' ? 'bg-indigo-600 text-white' : 'text-gray-600 hover:text-gray-400'}`}>Linux</button>
+                                    </div>
+                                </div>
+                                
+                                <div className="grid grid-cols-4 gap-4">
+                                    <div className="col-span-3 space-y-1">
+                                        <label className="text-[9px] font-black text-gray-700 uppercase">Install Path</label>
+                                        <input type="text" value={qwenInstallDir} onChange={e => setQwenInstallDir(e.target.value)} className="w-full p-2.5 bg-black border border-gray-800 rounded-xl text-xs font-mono" />
+                                    </div>
+                                    <div className="space-y-1">
+                                        <label className="text-[9px] font-black text-gray-700 uppercase">Max Tokens</label>
+                                        <input type="number" value={qwenMaxTokens} onChange={e => setQwenMaxTokens(Number(e.target.value))} className="w-full p-2.5 bg-black border border-gray-800 rounded-xl text-xs text-center" />
+                                    </div>
+                                </div>
+
+                                <div className="flex flex-col gap-2">
+                                    <label className="flex items-center gap-2 cursor-pointer group">
+                                        <input type="checkbox" checked={qwen8Bit} onChange={e => setQwen8Bit(e.target.checked)} className="h-4 w-4 rounded bg-gray-800 text-indigo-600" />
+                                        <span className="text-[10px] font-bold text-gray-500 group-hover:text-gray-300">Enable 8-bit Quantization (bitsandbytes)</span>
+                                    </label>
+                                    <label className="flex items-center gap-2 cursor-pointer group">
+                                        <input type="checkbox" checked={qwenEager} onChange={e => setQwenEager(e.target.checked)} className="h-4 w-4 rounded bg-gray-950 text-indigo-600" />
+                                        <span className="text-[10px] font-bold text-gray-500 group-hover:text-gray-300">Enforce Eager Mode</span>
+                                    </label>
+                                </div>
+
+                                <button onClick={downloadQwenSetupScript} className="w-full py-3 bg-green-700 hover:bg-green-600 text-white text-[10px] font-black uppercase rounded-xl transition-all shadow-lg">Download {qwenOsType === 'windows' ? 'setup_qwen.bat' : 'setup_qwen.sh'}</button>
+
+                                <div className="space-y-2">
+                                    <label className="text-[9px] font-black text-gray-700 uppercase">Local Start Command:</label>
+                                    <div className="relative group">
+                                        <div className="p-3 bg-black rounded-xl border border-gray-900 font-mono text-[10px] text-green-500/80 break-all leading-relaxed max-h-24 overflow-y-auto shadow-inner">
+                                            {qwenStartCommand}
+                                        </div>
+                                        <button onClick={() => navigator.clipboard.writeText(qwenStartCommand)} className="absolute top-2 right-2 p-1.5 bg-gray-800 hover:bg-gray-700 text-gray-400 rounded-lg opacity-0 group-hover:opacity-100 transition-all"><CopyIcon className="w-3.5 h-3.5"/></button>
+                                    </div>
+                                </div>
+                                
+                                <div className="space-y-1">
+                                    <label className="text-[10px] font-black text-indigo-400 uppercase tracking-widest">Endpoint URL (Tunnel or Local)</label>
+                                    <input type="text" value={qwenEndpoint} onChange={e => setQwenEndpoint(e.target.value)} placeholder="http://localhost:8000/v1" className="w-full p-3 bg-black border border-gray-800 rounded-xl text-xs font-mono shadow-inner focus:ring-1 focus:ring-indigo-500 outline-none" />
+                                </div>
+                            </div>
+                        </div>
+                    )}
+
+                    <div className="space-y-6">
+                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                            <div className="space-y-2">
+                                <label className="text-[10px] font-black text-gray-500 uppercase tracking-widest">Trigger Word</label>
+                                <input type="text" value={triggerWord} onChange={e => setTriggerWord(e.target.value)} className="w-full p-3 bg-gray-950 border border-gray-800 rounded-2xl text-sm font-bold shadow-inner" placeholder="MyStyle" />
+                            </div>
+                            <div className="space-y-2">
+                                <label className="text-[10px] font-black text-gray-500 uppercase tracking-widest">File Prefix</label>
+                                <input type="text" value={datasetPrefix} onChange={e => setDatasetPrefix(e.target.value)} className="w-full p-3 bg-gray-950 border border-gray-800 rounded-2xl text-sm font-bold shadow-inner" placeholder="item" />
+                            </div>
+                        </div>
+                        <div className="bg-gray-800/40 p-5 rounded-3xl border border-gray-800 space-y-4 shadow-xl">
+                            <label className="flex items-center gap-3 cursor-pointer group">
+                                <input type="checkbox" checked={isCharacterTaggingEnabled} onChange={(e) => setIsCharacterTaggingEnabled(e.target.checked)} className="h-6 w-6 rounded-lg bg-gray-900 border-gray-700 text-indigo-600 transition-all shadow-sm" />
+                                <span className="text-xs font-black text-gray-500 uppercase tracking-wider group-hover:text-gray-300 transition-colors">Character Tagging</span>
+                            </label>
+                            {isCharacterTaggingEnabled && (
+                                <div className="animate-slide-down">
+                                    <input type="text" value={characterShowName} onChange={(e) => setCharacterShowName(e.target.value)} placeholder="Enter show/series name..." className="w-full p-3 bg-gray-950 border border-gray-700 rounded-xl text-xs font-medium focus:ring-1 focus:ring-indigo-500 outline-none transition-all shadow-inner" />
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                </div>
+
+                <div className="space-y-10">
+                    <div className="space-y-8">
+                        <div className="space-y-3">
+                            <label className="text-xs font-black text-gray-500 uppercase tracking-widest block">System Instructions & Prompting</label>
+                            <textarea value={bulkGenerationInstructions} onChange={(e) => setBulkGenerationInstructions(e.target.value)} className="w-full p-5 bg-gray-950 border border-gray-800 rounded-3xl text-[13px] h-40 leading-relaxed resize-none outline-none focus:ring-2 focus:ring-indigo-500 shadow-inner" placeholder="Enter global captioning rules..." />
+                        </div>
+                        <div className="space-y-3">
+                            <label className="text-xs font-black text-indigo-400 uppercase tracking-widest block">Refinement Instructions</label>
+                            <textarea value={bulkRefinementInstructions} onChange={(e) => setBulkRefinementInstructions(e.target.value)} className="w-full p-5 bg-gray-950 border border-indigo-500/20 rounded-3xl text-[13px] h-40 leading-relaxed resize-none outline-none focus:ring-2 focus:ring-indigo-500 shadow-inner" placeholder="Enter instructions for refining existing captions..." />
+                        </div>
+                    </div>
+
+                    <div className="flex flex-col gap-6 pt-4 border-t border-gray-800">
+                        <div className="flex flex-wrap gap-x-8 gap-y-4">
+                            <label className="flex items-center gap-3 cursor-pointer group">
+                                <input type="checkbox" checked={autofitTextareas} onChange={(e) => setAutofitTextareas(e.target.checked)} className="h-5 w-5 rounded-md bg-gray-900 border-gray-700 text-indigo-500 shadow-inner" />
+                                <span className="text-xs font-bold text-gray-500 uppercase group-hover:text-gray-300 transition-colors">Autofit Textboxes</span>
+                            </label>
+                            <label className="flex items-center gap-3 cursor-pointer group">
+                                <input type="checkbox" checked={showSideBySidePreview} onChange={(e) => setShowSideBySidePreview(e.target.checked)} className="h-5 w-5 rounded-md bg-gray-900 border-gray-700 text-indigo-500 shadow-inner" />
+                                <span className="text-xs font-bold text-gray-500 uppercase group-hover:text-gray-300 transition-colors">Side-by-Side Comparison</span>
+                            </label>
+                            <label className="flex items-center gap-3 cursor-pointer group">
+                                <input type="checkbox" checked={isComfyEnabled} onChange={(e) => setIsComfyEnabled(e.target.checked)} className="h-5 w-5 rounded-md bg-gray-900 border-gray-700 text-orange-500 shadow-inner" />
+                                <span className="text-xs font-black text-orange-500 uppercase tracking-widest group-hover:text-orange-400 transition-colors">Enable ComfyUI Previews</span>
+                            </label>
+                        </div>
+                        
+                        <div className="bg-indigo-600/5 border border-indigo-600/20 p-6 rounded-3xl space-y-4">
+                            <div className="flex justify-between items-center">
+                                <label className="flex items-center gap-3 cursor-pointer group">
+                                    <input type="checkbox" checked={useRequestQueue} onChange={(e) => setUseRequestQueue(e.target.checked)} className="h-5 w-5 rounded bg-gray-900 border-gray-700 text-indigo-500" />
+                                    <span className="text-xs font-black text-indigo-400 uppercase tracking-widest group-hover:text-indigo-300 transition-colors">Enable Request Queue</span>
+                                </label>
+                                {useRequestQueue && (
+                                    <div className="flex items-center gap-3">
+                                        <label className="text-[10px] font-black text-gray-600 uppercase">Concurrent Tasks</label>
+                                        <input type="number" min="1" max="10" value={concurrentTasks} onChange={(e) => setConcurrentTasks(Number(e.target.value))} className="w-16 p-1 bg-black border border-gray-800 rounded text-center text-xs font-bold" />
+                                    </div>
+                                )}
+                            </div>
+                            <p className="text-[10px] text-gray-600 italic">Recommended for Gemini Free Tier or Local GPU to prevent rate limits or OOM errors.</p>
+                        </div>
+
+                        {isComfyEnabled && (
+                            <div className="bg-orange-600/5 border border-orange-600/20 p-6 rounded-3xl space-y-6 animate-slide-down shadow-xl">
+                                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                    <div className="space-y-2">
+                                        <label className="text-[10px] font-black text-gray-600 uppercase">Endpoint</label>
+                                        <input type="text" value={comfyUrl} onChange={(e) => setComfyUrl(e.target.value)} placeholder="http://127.0.0.1:8188" className="w-full p-3 bg-black border border-gray-800 rounded-xl text-xs font-mono shadow-inner" />
+                                    </div>
+                                    <div className="space-y-2">
+                                        <label className="text-[10px] font-black text-gray-600 uppercase">Workflow ({comfyWorkflowName})</label>
+                                        <div className="flex gap-2">
+                                            <button onClick={() => document.getElementById('wf-up')?.click()} className="flex-1 py-2.5 bg-orange-600 hover:bg-orange-500 text-white rounded-xl shadow-lg transition-all active:scale-95 text-[10px] font-black uppercase tracking-widest">Load JSON</button>
+                                            <button onClick={handleClearWorkflow} className="px-4 bg-gray-800 hover:bg-gray-700 text-gray-400 rounded-xl transition-all active:scale-95"><TrashIcon className="w-4 h-4"/></button>
+                                            <input id="wf-up" type="file" accept=".json" onChange={(e) => {
+                                                const f = e.target.files?.[0];
+                                                if (f) {
+                                                    const r = new FileReader();
+                                                    r.onload = (ev) => {
+                                                        try {
+                                                            setComfyWorkflow(JSON.parse(ev.target?.result as string));
+                                                            setComfyWorkflowName(f.name);
+                                                        } catch { alert("Invalid Workflow JSON"); }
+                                                    };
+                                                    r.readAsText(f);
+                                                }
+                                            }} className="hidden" />
+                                        </div>
+                                    </div>
+                                    <div className="space-y-2">
+                                        <label className="text-[10px] font-black text-gray-600 uppercase">Default Seed (-1 for random)</label>
+                                        <input type="number" value={comfySeed} onChange={(e) => setComfySeed(Number(e.target.value))} className="w-full p-3 bg-black border border-gray-800 rounded-xl text-xs shadow-inner" />
+                                    </div>
+                                    <div className="space-y-2">
+                                        <label className="text-[10px] font-black text-gray-600 uppercase">Steps</label>
+                                        <input type="number" value={comfySteps} onChange={(e) => setComfySteps(Number(e.target.value))} className="w-full p-3 bg-black border border-gray-800 rounded-xl text-xs shadow-inner" />
+                                    </div>
+                                </div>
+
+                                {/* Secure Bridge Sub-section */}
+                                <div className="pt-6 border-t border-orange-600/10 space-y-6">
+                                    <div className="flex justify-between items-center">
+                                        <h3 className="text-[11px] font-black text-orange-400 uppercase tracking-widest">Secure Bridge (for HTTPS/Remote access)</h3>
+                                        <label className="flex items-center gap-3 cursor-pointer group">
+                                            <input type="checkbox" checked={useSecureBridge} onChange={(e) => setUseSecureBridge(e.target.checked)} className="h-5 w-5 rounded bg-gray-900 border-gray-700 text-orange-500" />
+                                            <span className="text-[10px] font-bold text-gray-500 group-hover:text-gray-300 transition-colors">Enable Bridge Proxy</span>
+                                        </label>
+                                    </div>
+
+                                    {useSecureBridge && (
+                                        <div className="space-y-6 animate-slide-down">
+                                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                                <div className="space-y-2">
+                                                    <label className="text-[9px] font-black text-gray-600 uppercase">Bridge OS</label>
+                                                    <div className="flex gap-2">
+                                                        <button onClick={() => setBridgeOsType('windows')} className={`flex-1 py-2 text-[10px] font-black uppercase rounded-lg transition-all ${bridgeOsType === 'windows' ? 'bg-orange-600 text-white' : 'bg-gray-800 text-gray-500'}`}>Windows</button>
+                                                        <button onClick={() => setBridgeOsType('linux')} className={`flex-1 py-2 text-[10px] font-black uppercase rounded-lg transition-all ${bridgeOsType === 'linux' ? 'bg-orange-600 text-white' : 'bg-gray-800 text-gray-500'}`}>Linux</button>
+                                                    </div>
+                                                </div>
+                                                <div className="space-y-2">
+                                                    <label className="text-[9px] font-black text-gray-600 uppercase">Install Path</label>
+                                                    <input type="text" value={bridgeInstallPath} onChange={(e) => setBridgeInstallPath(e.target.value)} className="w-full p-3 bg-black border border-gray-800 rounded-xl text-xs font-mono shadow-inner" />
+                                                </div>
+                                            </div>
+
+                                            <div className="space-y-4">
+                                                <label className="flex items-center gap-3 cursor-pointer group">
+                                                    <input type="checkbox" checked={isFirstTimeBridge} onChange={(e) => setIsFirstTimeBridge(e.target.checked)} className="h-4 w-4 rounded bg-gray-950 border-gray-800 text-orange-500" />
+                                                    <span className="text-[10px] font-bold text-gray-500 group-hover:text-gray-300">First-time Setup (Include VENV & Pip Install)</span>
+                                                </label>
+                                                <div className="flex gap-4">
+                                                    <button onClick={downloadBridgeSetupScript} className="flex-1 py-3 bg-indigo-700 hover:bg-indigo-600 text-white text-[10px] font-black uppercase rounded-xl transition-all shadow-lg">Download {bridgeOsType === 'windows' ? 'setup_bridge.bat' : 'setup_bridge.sh'}</button>
+                                                    <button onClick={downloadBridgeScript} className="flex-1 py-3 bg-orange-700 hover:bg-orange-600 text-white text-[10px] font-black uppercase rounded-xl transition-all shadow-lg">Download Bridge.py</button>
+                                                </div>
+                                            </div>
+
+                                            <div className="space-y-2">
+                                                <label className="text-[9px] font-black text-gray-700 uppercase tracking-widest">Start Command:</label>
+                                                <div className="relative group">
+                                                    <div className="p-3 bg-black rounded-xl border border-gray-900 font-mono text-[10px] text-green-500/80 break-all leading-relaxed shadow-inner">
+                                                        {bridgeStartCommand}
+                                                    </div>
+                                                    <button onClick={() => navigator.clipboard.writeText(bridgeStartCommand)} className="absolute top-2 right-2 p-1.5 bg-gray-800 hover:bg-gray-700 text-gray-400 rounded-lg opacity-0 group-hover:opacity-100 transition-all"><CopyIcon className="w-3.5 h-3.5"/></button>
+                                                </div>
+                                                <p className="text-[9px] text-gray-600 italic">The bridge will proxy requests from this HTTPS app to your local HTTP ComfyUI server.</p>
+                                            </div>
+                                        </div>
+                                    )}
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
+
+            <div className="border-t border-gray-800 pt-10 flex flex-col gap-6">
+                <div className="flex flex-wrap gap-4 justify-end">
+                    <button 
+                      onClick={handleDeleteSelected} 
+                      disabled={selectedFiles.length === 0}
+                      className="px-6 py-4 bg-red-600/20 hover:bg-red-600/30 border border-red-600/30 rounded-2xl text-[11px] font-black uppercase text-red-400 flex items-center gap-3 transition-all active:scale-95 shadow-lg disabled:opacity-20 disabled:grayscale"
+                    >
+                      <TrashIcon className="w-5 h-5"/> Delete Selected ({selectedFiles.length})
+                    </button>
+                    <button onClick={handleStopTasks} className="px-6 py-4 bg-orange-600/20 hover:bg-orange-600/40 border border-orange-600/30 rounded-2xl text-[11px] font-black uppercase text-orange-400 flex items-center gap-3 transition-all active:scale-95 shadow-lg"><StopIcon className="w-5 h-5"/> Stop Tasks</button>
+                    
+                    <button onClick={handleBulkQualityCheck} disabled={selectedFiles.length === 0 || !hasValidConfig || isQueueRunning} className="px-6 py-4 bg-blue-600 hover:bg-blue-500 text-white rounded-2xl text-[11px] font-black uppercase flex items-center gap-4 transition-all shadow-xl active:scale-95 disabled:opacity-40">
+                      <CheckCircleIcon className="w-5 h-5" /> Check Quality Selected ({selectedFiles.length})
+                    </button>
+
+                    <button onClick={handleBulkGenerate} disabled={selectedFiles.length === 0 || !hasValidConfig || isQueueRunning} className="px-10 py-4 bg-green-600 hover:bg-green-500 text-white rounded-2xl text-xs font-black uppercase flex items-center gap-4 transition-all shadow-2xl shadow-green-900/30 active:scale-95 disabled:opacity-40">
+                        <SparklesIcon className="w-6 h-6" /> Generate Selected ({selectedFiles.length})
+                    </button>
+                    
+                    <button onClick={handleBulkRefine} disabled={selectedFiles.length === 0 || !hasValidConfig || isQueueRunning} className="px-10 py-4 bg-indigo-600 hover:bg-indigo-500 text-white rounded-2xl text-xs font-black uppercase flex items-center gap-4 transition-all shadow-xl active:scale-95 disabled:opacity-40">
+                        <WandIcon className="w-6 h-6" /> Refine Selected ({selectedFiles.length})
+                    </button>
+                </div>
+                <div className="flex flex-wrap gap-4 justify-end">
+                    {isComfyEnabled && (
+                      <button onClick={handleBulkPreview} disabled={selectedFiles.length === 0} className="px-10 py-4 bg-orange-600 hover:bg-orange-500 text-white rounded-2xl text-xs font-black uppercase flex items-center gap-4 transition-all shadow-xl shadow-orange-900/20 active:scale-95 disabled:opacity-40">
+                        <WandIcon className="w-6 h-6" /> Preview Selected ({selectedFiles.length})
+                      </button>
+                    )}
+                    <button onClick={handleExportDataset} disabled={selectedFiles.length === 0 || isExporting} className="w-full sm:w-auto px-16 py-5 bg-indigo-700 hover:bg-indigo-600 text-white rounded-2xl text-xs font-black uppercase flex items-center justify-center gap-4 transition-all shadow-2xl active:scale-95 disabled:opacity-40">
+                        {isExporting ? <LoaderIcon className="w-6 h-6 animate-spin" /> : <DownloadIcon className="w-6 h-6" />}
+                        {isExporting ? 'Packaging ZIP...' : 'Download Finished Dataset'}
+                    </button>
+                </div>
+            </div>
+        </section>
+
+        <section className="bg-gray-900 border border-gray-800 p-8 rounded-3xl shadow-xl overflow-hidden relative">
+            <div className="absolute top-0 right-0 p-8 opacity-10 pointer-events-none"><UploadCloudIcon className="w-32 h-32" /></div>
+            <h2 className="text-xl font-black mb-6 uppercase tracking-widest text-gray-400">2. Upload Source Media</h2>
+            <FileUploader onFilesAdded={handleFilesAdded} />
+        </section>
+        
+        <section className="space-y-8 animate-slide-up min-h-[400px]">
+          {mediaFiles && mediaFiles.length > 0 ? (
+            <>
+              <div className="flex justify-between items-center bg-gray-900/80 backdrop-blur-2xl p-6 rounded-3xl border border-gray-800 sticky top-4 z-40 shadow-[0_20px_50px_-10px_rgba(0,0,0,0.5)]">
+                  <div className="flex items-center gap-4">
+                      <div className="h-10 w-1.5 bg-indigo-500 rounded-full shadow-[0_0_15px_rgba(99,102,241,0.5)]"></div>
+                      <div className="flex flex-col">
+                          <h2 className="text-2xl font-black text-white uppercase tracking-tighter leading-none">3. Data Curation Workspace</h2>
+                          <p className="text-[10px] font-black text-gray-600 uppercase tracking-widest mt-1">Ready for Parallel Processing ({mediaFiles.length} Loaded)</p>
+                      </div>
+                  </div>
+                  <div className="flex items-center gap-6">
+                      <div className="flex items-center gap-3 bg-black px-6 py-3 rounded-2xl border border-gray-800 shadow-inner group active:scale-95 transition-all">
+                          <input type="checkbox" id="sel-all" className="h-6 w-6 rounded-lg bg-gray-900 border-gray-700 text-indigo-600 transition-all cursor-pointer shadow-sm" checked={mediaFiles.length > 0 && mediaFiles.every(f => f.isSelected)} onChange={(e) => setMediaFiles(prev => (prev || []).map(mf => ({ ...mf, isSelected: e.target.checked })))} />
+                          <label htmlFor="sel-all" className="text-xs font-black text-gray-500 cursor-pointer group-hover:text-gray-300 transition-colors uppercase tracking-widest">Select All Items</label>
+                      </div>
+                  </div>
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12">
+                {mediaFiles.map(item => (
+                  <MediaItem 
+                    key={item.id} 
+                    item={item} 
+                    autofit={autofitTextareas} 
+                    isApiKeySet={hasValidConfig} 
+                    isComfyEnabled={isComfyEnabled} 
+                    showSideBySidePreview={showSideBySidePreview} 
+                    onGenerate={handleGenerateCaption} 
+                    onCheckQuality={handleCheckQuality}
+                    onPreview={handleComfyPreview} 
+                    onCaptionChange={(id, cap) => updateFile(id, { caption: cap })} 
+                    onCustomInstructionsChange={(id, ins) => updateFile(id, { customInstructions: ins })} 
+                    onSelectionChange={(id, sel) => updateFile(id, { isSelected: sel })} 
+                    onOpenPreviewModal={setActivePreviewId} 
+                  />
+                ))}
+              </div>
+            </>
+          ) : (
+            <div className="flex flex-col items-center justify-center py-32 bg-gray-900/50 rounded-3xl border-2 border-dashed border-gray-800 text-gray-500 animate-pulse">
+                <UploadCloudIcon className="w-16 h-16 mb-6 opacity-20" />
+                <h3 className="text-lg font-black uppercase tracking-widest text-gray-700">No items uploaded yet</h3>
+                <p className="text-xs mt-2 uppercase tracking-tight text-gray-600">Start by dropping files into the upload zone above</p>
+            </div>
+          )}
+        </section>
+      </main>
+    </div>
+  );
+};
+
+export default App;

Dockerfile.txt

@@ -0,0 +1,22 @@
+FROM node:18-alpine
+
+WORKDIR /app
+
+# Copy package.json first to ensure it exists for npm install
+COPY package.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy the rest of the application code
+COPY . .
+
+# Build the React application
+# This will use the API_KEY environment variable if provided during build
+RUN npm run build
+
+# Expose port 7860 (Required by Hugging Face Spaces)
+EXPOSE 7860
+
+# Start the Vite preview server
+CMD ["npm", "run", "preview"]

README.md

@@ -1,10 +1,127 @@
+
 ---
-title: Loracaptionertaz V2
-emoji: 📚
-colorFrom: red
+title: LoRA Caption Assistant
+emoji: 🖼️
+colorFrom: gray
 colorTo: indigo
 sdk: docker
-pinned: false
+app_port: 7860
+---
+
+# LoRA Caption Assistant
+
+An AI-powered web application designed to assist in generating high-quality, detailed captions for image and video datasets. This tool is specifically tailored for training LoRA (Low-Rank Adaptation) models, utilizing Google's Gemini API or a Local Qwen Model (via vLLM) to automate the captioning process.
+
+## Features
+
+*   **Automated Captioning**: Generates detailed, objective descriptions using Gemini 2.5 Pro or local Qwen-VL.
+*   **LoRA Optimized**: Automatic trigger word insertion and style-agnostic descriptions.
+*   **Multi-Modal**: Supports both image and video inputs.
+*   **Character Tagging**: Optional automatic identification and tagging of specific characters.
+*   **Quality Assurance**: AI-powered scoring system to evaluate caption quality (1-5 scale).
+*   **Batch Processing**: Robust queue system with rate limiting (RPM) and batch sizes.
+*   **Export**: Downloads the dataset (media + text files) as a ZIP file.
+
+---
+
+## 🚀 Deployment on Hugging Face Spaces
+
+This is the recommended way to run the application if you don't have a GPU.
+
+### Step 1: Create a Space
+1.  Go to [Hugging Face Spaces](https://huggingface.co/spaces).
+2.  Click **Create new Space**.
+3.  Enter a name (e.g., `lora-caption-assistant`).
+4.  Select **Docker** as the SDK.
+5.  Choose "Blank" or "Public" template.
+6.  Click **Create Space**.
+
+### Step 2: Upload Files
+Upload the contents of this repository to your Space. Ensure the following files are in the **root** directory:
+*   `Dockerfile` (Critical: The app will fail without this)
+*   `package.json`
+*   `vite.config.ts`
+*   `index.html`
+*   `src/` folder (containing `App.tsx`, etc.)
+
+### Step 3: Configure API Key (For Gemini)
+1.  In your Space, go to **Settings**.
+2.  Scroll to **Variables and secrets**.
+3.  Click **New secret**.
+4.  **Name**: `API_KEY`
+5.  **Value**: Your Google Gemini API Key.
+
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+## 🤖 Local Qwen Setup Guide
+
+If you have a powerful NVIDIA GPU (12GB+ VRAM recommended), you can run the captioning model **locally for free** and connect this web app to it.
+
+### Prerequisites
+*   **OS**: Windows or Linux
+*   **GPU**: NVIDIA GPU (CUDA support)
+*   **Software**: Python 3.10+ and CUDA Toolkit installed.
+
+### Step 1: Get the Script
+1.  Open the LoRA Caption Assistant Web App.
+2.  Under **AI Provider**, select **Local Qwen (GPU)**.
+3.  Select your desired model (e.g., `Qwen 2.5 VL 7B`).
+4.  Set your desired install folder path.
+5.  Click **Download Setup Script**.
+
+### Step 2: Run the Server
+1.  Locate the downloaded `.bat` (Windows) or `.sh` (Linux) file.
+2.  Run it.
+3.  The script will:
+    *   Create a Python virtual environment.
+    *   Install `vllm`.
+    *   Download the selected Qwen model from Hugging Face.
+    *   Start an OpenAI-compatible API server on port 8000.
+
+### Step 3: Connect to the App
+
+**Scenario A: Running App Locally (localhost)**
+*   If you are running this web app on your own computer (`npm run dev`), simply set the Endpoint in the app to: `http://localhost:8000/v1`
+
+**Scenario B: Running App on Hugging Face (HTTPS)**
+*   If you are accessing the web app via Hugging Face Spaces, you **cannot** connect to `localhost` directly due to browser security (Mixed Content Blocking).
+*   You must create a secure tunnel.
+
+**How to Tunnel:**
+1.  **Cloudflare Tunnel (Easiest)**:
+    *   Download `cloudflared`.
+    *   Run: `cloudflared tunnel --url http://localhost:8000`
+    *   Copy the URL ending in `.trycloudflare.com`.
+2.  **Paste the URL**:
+    *   Paste this secure URL into the **Local Endpoint** field in the Web App.
+    *   Add `/v1` to the end (e.g., `https://example.trycloudflare.com/v1`).
+
+---
+
+## 💻 Local Development (Web App)
+
+### Prerequisites
+*   Node.js (v18+)
+*   npm
+
+### Installation
+1.  Clone the repo:
+    ```bash
+    git clone <your-repo-url>
+    cd lora-caption-assistant
+    ```
+
+2.  Install dependencies:
+    ```bash
+    npm install
+    ```
+
+3.  Run the app:
+    ```bash
+    npm run dev
+    ```
+    Open `http://localhost:5173` in your browser.
+
+## License
+
+MIT

components/FileUploader.tsx

@@ -0,0 +1,81 @@
+
+import React, { useState, useCallback, useRef } from 'react';
+import { UploadCloudIcon } from './Icons';
+
+interface FileUploaderProps {
+  onFilesAdded: (files: File[]) => void;
+}
+
+const FileUploader: React.FC<FileUploaderProps> = ({ onFilesAdded }) => {
+  const [isDragging, setIsDragging] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleDragEnter = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+  }, []);
+
+  const handleDragLeave = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+  }, []);
+
+  const handleDragOver = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+
+  const handleDrop = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+    const files = Array.from(e.dataTransfer.files);
+    if (files && files.length > 0) {
+      onFilesAdded(files);
+    }
+  }, [onFilesAdded]);
+
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files || []);
+    if (files && files.length > 0) {
+      onFilesAdded(files);
+    }
+  };
+
+  const openFileDialog = () => {
+    fileInputRef.current?.click();
+  };
+
+  return (
+    <div
+      className={`relative border-2 border-dashed rounded-lg p-12 text-center transition-colors duration-200 ease-in-out ${
+        isDragging ? 'border-indigo-400 bg-gray-800' : 'border-gray-600 hover:border-indigo-500'
+      }`}
+      onDragEnter={handleDragEnter}
+      onDragLeave={handleDragLeave}
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
+      onClick={openFileDialog}
+    >
+      <input
+        ref={fileInputRef}
+        type="file"
+        multiple
+        accept="image/*,video/*,.txt"
+        className="hidden"
+        onChange={handleFileSelect}
+      />
+      <div className="flex flex-col items-center justify-center space-y-4">
+        <UploadCloudIcon className="w-12 h-12 text-gray-400" />
+        <p className="text-gray-400">
+          <span className="font-semibold text-indigo-400">Click to upload</span> or drag and drop
+        </p>
+        <p className="text-xs text-gray-500">Upload media and optional .txt captions (must have matching filenames)</p>
+      </div>
+    </div>
+  );
+};
+
+export default FileUploader;

components/Icons.tsx

@@ -0,0 +1,212 @@
+
+import React from 'react';
+
+export const UploadCloudIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" />
+    <path d="M12 12v9" />
+    <path d="m16 16-4-4-4 4" />
+  </svg>
+);
+
+export const SparklesIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" />
+    <path d="M5 3v4" />
+    <path d="M19 17v4" />
+    <path d="M3 5h4" />
+    <path d="M17 19h4" />
+  </svg>
+);
+
+export const DownloadIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+    <polyline points="7 10 12 15 17 10" />
+    <line x1="12" x2="12" y1="15" y2="3" />
+  </svg>
+);
+
+export const LoaderIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <line x1="12" y1="2" x2="12" y2="6" />
+    <line x1="12" y1="18" x2="12" y2="22" />
+    <line x1="4.93" y1="4.93" x2="7.76" y2="7.76" />
+    <line x1="16.24" y1="16.24" x2="19.07" y2="19.07" />
+    <line x1="2" y1="12" x2="6" y2="12" />
+    <line x1="18" y1="12" x2="22" y2="12" />
+    <line x1="4.93" y1="19.07" x2="7.76" y2="16.24" />
+    <line x1="16.24" y1="7.76" x2="19.07" y2="4.93" />
+  </svg>
+);
+
+export const WandIcon = (props: React.SVGProps<SVGSVGElement>) => (
+    <svg 
+        {...props}
+        xmlns="http://www.w3.org/2000/svg" 
+        width="24" 
+        height="24" 
+        viewBox="0 0 24 24" 
+        fill="none" 
+        stroke="currentColor" 
+        strokeWidth="2" 
+        strokeLinecap="round" 
+        strokeLinejoin="round">
+            <path d="M15 4V2"/><path d="M15 16v-2"/><path d="M8 9h2"/>
+            <path d="M20 9h2"/><path d="M17.8 11.8 19 13"/>
+            <path d="M15 9h0"/><path d="M17.8 6.2 19 5"/>
+            <path d="m3 21 9-9"/><path d="M12.2 6.2 11 5"/>
+    </svg>
+);
+
+export const CheckCircleIcon = (props: React.SVGProps<SVGSVGElement>) => (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+      <polyline points="22 4 12 14.01 9 11.01" />
+    </svg>
+  );
+
+export const TrashIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M3 6h18" />
+    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+  </svg>
+);
+
+export const XIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M18 6L6 18" />
+    <path d="M6 6l12 12" />
+  </svg>
+);
+
+export const AlertTriangleIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" />
+    <path d="M12 9v4" />
+    <path d="M12 17h.01" />
+  </svg>
+);
+
+export const CopyIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+    <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+  </svg>
+);
+
+export const StopIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <rect x="6" y="6" width="12" height="12" />
+  </svg>
+);

components/MediaItem.tsx

@@ -0,0 +1,233 @@
+import React from 'react';
+import type { MediaFile } from '../types';
+import { GenerationStatus } from '../types';
+import { SparklesIcon, LoaderIcon, WandIcon, CheckCircleIcon } from './Icons';
+
+interface MediaItemProps {
+  item: MediaFile;
+  autofit: boolean;
+  isApiKeySet: boolean;
+  isComfyEnabled: boolean;
+  showSideBySidePreview: boolean;
+  onGenerate: (id: string, customInstructions?: string) => void;
+  onCheckQuality: (id: string) => void;
+  onPreview: (id: string) => void;
+  onCaptionChange: (id:string, caption: string) => void;
+  onCustomInstructionsChange: (id: string, instructions: string) => void;
+  onSelectionChange: (id: string, isSelected: boolean) => void;
+  onOpenPreviewModal: (id: string) => void;
+}
+
+const getScoreColor = (score?: number) => {
+    if (score === undefined) return 'text-gray-500';
+    if (score >= 4) return 'text-green-400';
+    if (score >= 3) return 'text-yellow-400';
+    return 'text-red-400';
+};
+
+
+const MediaItem: React.FC<MediaItemProps> = ({ 
+    item, 
+    autofit,
+    isApiKeySet,
+    isComfyEnabled,
+    showSideBySidePreview,
+    onGenerate, 
+    onCheckQuality,
+    onPreview,
+    onCaptionChange,
+    onCustomInstructionsChange,
+    onSelectionChange,
+    onOpenPreviewModal
+}) => {
+  const isVideo = item.file.type.startsWith('video/');
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
+
+  React.useEffect(() => {
+    if (textareaRef.current && autofit) {
+        textareaRef.current.style.height = 'auto'; // Reset height
+        textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+    } else if (textareaRef.current) {
+        textareaRef.current.style.height = ''; // Revert to CSS-defined height
+    }
+  }, [item.caption, autofit]);
+
+  const getStatusColor = () => {
+    switch(item.status) {
+      case GenerationStatus.SUCCESS: return 'border-green-500';
+      case GenerationStatus.ERROR: return 'border-red-500';
+      case GenerationStatus.GENERATING: return 'border-indigo-500';
+      case GenerationStatus.CHECKING: return 'border-yellow-500';
+      default: return 'border-gray-700';
+    }
+  };
+  
+  const isProcessing = item.status === GenerationStatus.GENERATING || item.status === GenerationStatus.CHECKING;
+  const isPreviewing = item.comfyStatus === 'generating';
+  const hasPreview = !!item.comfyPreviewUrl;
+
+  const renderMedia = (url: string, isOriginal: boolean) => {
+    const isVideoFile = isOriginal && isVideo;
+    return (
+        <div className="relative flex-1 bg-gray-900 rounded-md overflow-hidden flex flex-col group/media shadow-inner cursor-pointer" onClick={() => onOpenPreviewModal(item.id)}>
+            <div className="flex-grow flex items-center justify-center min-h-[160px] h-full">
+                {isVideoFile ? (
+                    <video src={url} className="max-w-full max-h-full object-contain" />
+                ) : (
+                    <img src={url} alt={item.file.name} className="max-w-full max-h-full object-contain" />
+                )}
+            </div>
+            <div className="absolute bottom-1 left-1 px-1.5 py-0.5 bg-black/60 backdrop-blur-sm rounded text-[9px] font-black uppercase tracking-widest text-white/90 border border-white/10 opacity-80 pointer-events-none">
+                {isOriginal ? 'Original' : 'Preview'}
+            </div>
+        </div>
+    );
+  };
+
+  return (
+    <div className={`bg-gray-800 rounded-lg overflow-hidden border-2 transition-all ${getStatusColor()}`}>
+      <div className="relative p-2 space-y-2">
+         <input
+          type="checkbox"
+          checked={item.isSelected}
+          onChange={(e) => onSelectionChange(item.id, e.target.checked)}
+          className="absolute top-4 left-4 h-6 w-6 bg-gray-900/80 backdrop-blur-sm border-gray-600 text-indigo-500 rounded focus:ring-indigo-600 z-10 cursor-pointer shadow-lg"
+        />
+        {item.qualityScore !== undefined && (
+            <div className="absolute top-4 right-4 bg-gray-900/70 backdrop-blur-sm px-3 py-1 rounded-full text-sm font-semibold flex items-center gap-1.5 z-10 shadow-sm border border-white/5">
+                <span className={`tracking-widest ${getScoreColor(item.qualityScore)}`}>
+                    {'★'.repeat(item.qualityScore)}{'☆'.repeat(5 - item.qualityScore)}
+                </span>
+                <span className="text-gray-300 text-[10px]">{item.qualityScore}/5</span>
+            </div>
+        )}
+
+        {hasPreview && !showSideBySidePreview && (
+            <button 
+                onClick={() => onOpenPreviewModal(item.id)}
+                className="absolute bottom-4 right-4 bg-orange-600 hover:bg-orange-500 text-white px-3 py-1.5 rounded-md text-[10px] font-black uppercase tracking-wider z-10 shadow-xl transition-all hover:scale-105 active:scale-95 border border-white/10"
+            >
+                View Comparison
+            </button>
+        )}
+
+        <div className={`h-64 flex gap-2 ${showSideBySidePreview && hasPreview ? 'flex-row' : 'flex-col'}`}>
+            {showSideBySidePreview && hasPreview ? (
+                <>
+                    {renderMedia(item.previewUrl, true)}
+                    {renderMedia(item.comfyPreviewUrl!, false)}
+                </>
+            ) : (
+                <div 
+                    className="flex-grow flex items-center justify-center bg-gray-900 rounded-md overflow-hidden relative group/single cursor-pointer"
+                    onClick={() => onOpenPreviewModal(item.id)}
+                >
+                    {isVideo ? (
+                        <video src={item.previewUrl} className="max-w-full max-h-full object-contain" />
+                    ) : (
+                        <img src={item.previewUrl} alt={item.file.name} className="max-w-full max-h-full object-contain" />
+                    )}
+                    <div className="absolute inset-0 bg-black/0 group-hover/single:bg-black/20 transition-colors flex items-center justify-center">
+                        <SparklesIcon className="w-8 h-8 text-white opacity-0 group-hover/single:opacity-100 transition-all scale-75 group-hover/single:scale-100" />
+                    </div>
+                </div>
+            )}
+        </div>
+      </div>
+
+      <div className="p-4 space-y-4">
+        <div className="flex justify-between items-start gap-2">
+            <p className="text-sm text-gray-400 truncate flex-grow font-mono" title={item.file.name}>{item.file.name}</p>
+            <span className="text-[10px] text-gray-600 font-bold uppercase tracking-widest whitespace-nowrap">
+                {isVideo ? 'Video' : 'Image'}
+            </span>
+        </div>
+        
+        <textarea
+            ref={textareaRef}
+            value={item.caption}
+            onChange={(e) => onCaptionChange(item.id, e.target.value)}
+            placeholder="Generated caption will appear here..."
+            rows={!autofit ? 6 : 1}
+            className={`w-full p-2.5 bg-gray-900 border border-gray-700 rounded-md focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all resize-none overflow-hidden text-[13px] leading-relaxed text-gray-200 ${!autofit ? 'h-32' : ''}`}
+        />
+
+        <div className="flex flex-col gap-2">
+            <input 
+                type="text"
+                placeholder="Custom instructions for refinement..."
+                value={item.customInstructions}
+                onChange={(e) => onCustomInstructionsChange(item.id, e.target.value)}
+                className="w-full p-2.5 bg-gray-700 border border-gray-600 rounded-md focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all text-xs"
+            />
+            <div className="flex flex-wrap gap-2">
+                <button
+                    onClick={() => onGenerate(item.id, item.customInstructions)}
+                    disabled={isProcessing || !isApiKeySet}
+                    className="flex-1 flex items-center justify-center px-3 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:bg-gray-700 disabled:cursor-not-allowed transition-all text-[11px] font-black uppercase tracking-wider shadow-lg shadow-green-900/10"
+                >
+                    {isProcessing ? (
+                        <LoaderIcon className="w-4 h-4 animate-spin mr-2" />
+                    ) : (
+                        item.customInstructions ? <WandIcon className="w-4 h-4 mr-2" /> : <SparklesIcon className="w-4 h-4 mr-2" />
+                    )}
+                    <span>
+                        {item.status === GenerationStatus.GENERATING ? 'Working...' :
+                         item.status === GenerationStatus.CHECKING ? 'Checking...' :
+                         item.customInstructions ? 'Refine' : 'Generate'}
+                    </span>
+                </button>
+
+                <button
+                    onClick={() => onCheckQuality(item.id)}
+                    disabled={isProcessing || !isApiKeySet || !item.caption}
+                    className="flex-1 flex items-center justify-center px-3 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:bg-gray-700 disabled:cursor-not-allowed transition-all text-[11px] font-black uppercase tracking-wider shadow-lg shadow-blue-900/10"
+                >
+                    <CheckCircleIcon className="w-4 h-4 mr-2" />
+                    <span>Check Quality</span>
+                </button>
+
+                {isComfyEnabled && (
+                    <button
+                        onClick={() => onPreview(item.id)}
+                        disabled={isPreviewing || !item.caption}
+                        className={`flex-shrink-0 flex items-center justify-center px-4 py-2 text-white rounded-md transition-all text-[11px] font-black uppercase tracking-wider shadow-lg ${item.comfyStatus === 'error' ? 'bg-red-600 hover:bg-red-700 shadow-red-900/10' : 'bg-orange-600 hover:bg-orange-700 shadow-orange-900/10'} disabled:bg-gray-500 disabled:cursor-not-allowed`}
+                        title={item.comfyErrorMessage || "Generate preview with ComfyUI"}
+                    >
+                        {isPreviewing ? (
+                            <LoaderIcon className="w-4 h-4 animate-spin mr-2" />
+                        ) : (
+                            <SparklesIcon className="w-4 h-4 mr-2" />
+                        )}
+                        <span>Preview</span>
+                    </button>
+                )}
+            </div>
+            
+            {isComfyEnabled && item.comfyStatus === 'error' && (
+                <div className="bg-red-900/20 p-2 rounded border border-red-500/30">
+                    <p className="text-[10px] text-red-400 leading-tight">
+                        <span className="font-bold uppercase tracking-tighter">Bridge/Server Error:</span> {item.comfyErrorMessage}
+                    </p>
+                </div>
+            )}
+            {isComfyEnabled && item.comfyStatus === 'generating' && (
+                <div className="bg-orange-900/20 p-2 rounded border border-orange-500/30 animate-pulse">
+                    <p className="text-[10px] text-orange-400 font-bold uppercase text-center tracking-widest">
+                        Queueing in ComfyUI...
+                    </p>
+                </div>
+            )}
+        </div>
+        
+        {item.status === GenerationStatus.ERROR && (
+          <p className="text-[11px] text-red-400 mt-1 italic font-medium leading-tight">
+              <span className="font-black uppercase tracking-tighter mr-1">Error:</span> {item.errorMessage}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default MediaItem;

constants/defaultWorkflow.ts

@@ -0,0 +1,155 @@
+export const DEFAULT_COMFY_WORKFLOW = {
+  "3": {
+    "inputs": {
+      "seed": 912870720080529,
+      "steps": 8,
+      "cfg": 1,
+      "sampler_name": "euler",
+      "scheduler": "simple",
+      "denoise": 1,
+      "model": [
+        "66",
+        0
+      ],
+      "positive": [
+        "6",
+        0
+      ],
+      "negative": [
+        "7",
+        0
+      ],
+      "latent_image": [
+        "58",
+        0
+      ]
+    },
+    "class_type": "KSampler",
+    "_meta": {
+      "title": "KSampler"
+    }
+  },
+  "6": {
+    "inputs": {
+      "text": "",
+      "clip": [
+        "38",
+        0
+      ]
+    },
+    "class_type": "CLIPTextEncode",
+    "_meta": {
+      "title": "CLIP Text Encode (Positive Prompt)"
+    }
+  },
+  "7": {
+    "inputs": {
+      "text": "",
+      "clip": [
+        "38",
+        0
+      ]
+    },
+    "class_type": "CLIPTextEncode",
+    "_meta": {
+      "title": "CLIP Text Encode (Negative Prompt)"
+    }
+  },
+  "8": {
+    "inputs": {
+      "samples": [
+        "3",
+        0
+      ],
+      "vae": [
+        "39",
+        0
+      ]
+    },
+    "class_type": "VAEDecode",
+    "_meta": {
+      "title": "VAE Decode"
+    }
+  },
+  "37": {
+    "inputs": {
+      "unet_name": "qwen_image_fp8_e4m3fn.safetensors",
+      "weight_dtype": "default"
+    },
+    "class_type": "UNETLoader",
+    "_meta": {
+      "title": "Load Diffusion Model"
+    }
+  },
+  "38": {
+    "inputs": {
+      "clip_name": "qwen_2.5_vl_7b_fp8_scaled.safetensors",
+      "type": "qwen_image",
+      "device": "default"
+    },
+    "class_type": "CLIPLoader",
+    "_meta": {
+      "title": "Load CLIP"
+    }
+  },
+  "39": {
+    "inputs": {
+      "vae_name": "qwen_image_vae.safetensors"
+    },
+    "class_type": "VAELoader",
+    "_meta": {
+      "title": "Load VAE"
+    }
+  },
+  "58": {
+    "inputs": {
+      "width": 1024,
+      "height": 1024,
+      "batch_size": 1
+    },
+    "class_type": "EmptySD3LatentImage",
+    "_meta": {
+      "title": "EmptySD3LatentImage"
+    }
+  },
+  "60": {
+    "inputs": {
+      "filename_prefix": "ComfyUI",
+      "images": [
+        "8",
+        0
+      ]
+    },
+    "class_type": "SaveImage",
+    "_meta": {
+      "title": "Save Image"
+    }
+  },
+  "66": {
+    "inputs": {
+      "shift": 3,
+      "model": [
+        "73",
+        0
+      ]
+    },
+    "class_type": "ModelSamplingAuraFlow",
+    "_meta": {
+      "title": "ModelSamplingAuraFlow"
+    }
+  },
+  "73": {
+    "inputs": {
+      "lora_name": "Qwen-Image-Lightning-8steps-V2.0.safetensors",
+      "strength_model": 1,
+      "model": [
+        "37",
+        0
+      ]
+    },
+    "class_type": "LoraLoaderModelOnly",
+    "_meta": {
+      "title": "LoraLoaderModelOnly"
+    }
+  }
+};

index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>LoRA Caption Assistant</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
+  <script type="importmap">
+{
+  "imports": {
+    "react": "https://aistudiocdn.com/react@^19.2.0",
+    "react-dom/": "https://aistudiocdn.com/react-dom@^19.2.0/",
+    "react/": "https://aistudiocdn.com/react@^19.2.0/",
+    "@google/genai": "https://aistudiocdn.com/@google/genai@^1.30.0",
+    "@vitejs/plugin-react": "https://aistudiocdn.com/@vitejs/plugin-react@^5.1.1",
+    "vite": "https://aistudiocdn.com/vite@^7.2.2"
+  }
+}
+</script>
+<link rel="stylesheet" href="/index.css">
+</head>
+  <body class="bg-gray-900 text-gray-100">
+    <div id="root"></div>
+    <script type="module" src="/index.tsx"></script>
+  </body>
+</html>

index.tsx

@@ -0,0 +1,16 @@
+
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+  throw new Error("Could not find root element to mount to");
+}
+
+const root = ReactDOM.createRoot(rootElement);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

metadata.json

@@ -0,0 +1,7 @@
+{
+  "name": "LoRA Caption Assistant",
+  "description": "High-quality image/video captioning for Wan 2.2 LoRAs using Gemini 3 Pro.",
+  "requestFramePermissions": [
+    "camera"
+  ]
+}

package.json

@@ -0,0 +1,24 @@
+
+{
+  "name": "lora-caption-assistant",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@google/genai": "^1.30.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.0",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "typescript": "^5.5.3",
+    "vite": "^5.4.1"
+  }
+}

services/comfyService.ts

@@ -0,0 +1,169 @@
+/**
+ * Service for interacting with local ComfyUI instances
+ */
+
+/**
+ * Converts a standard ComfyUI UI workflow (the one with 'nodes' array) 
+ * to the API format that the /prompt endpoint expects.
+ */
+const convertUiToApi = (uiWorkflow: any): any => {
+    const apiPrompt: any = {};
+    
+    if (!uiWorkflow.nodes || !Array.isArray(uiWorkflow.nodes)) {
+        return uiWorkflow; // Already in API format or unknown
+    }
+
+    uiWorkflow.nodes.forEach((node: any) => {
+        const nodeId = node.id.toString();
+        const inputs: any = {};
+        
+        // Map inputs based on links
+        if (uiWorkflow.links && node.inputs) {
+            node.inputs.forEach((input: any) => { // Removed unused 'index' parameter
+                const linkId = input.link;
+                if (linkId) {
+                    const link = uiWorkflow.links.find((l: any) => l[0] === linkId);
+                    if (link) {
+                        // link format: [id, origin_id, origin_slot, target_id, target_slot, type]
+                        inputs[input.name] = [link[1].toString(), link[2]];
+                    }
+                }
+            });
+        }
+
+        // Map widgets to inputs
+        // This is a simplified mapping; standard nodes usually have widgets in a specific order
+        if (node.widgets_values && Array.isArray(node.widgets_values)) {
+            // Note: This mapping is brittle as it depends on node implementation, 
+            // but for standard nodes it often works.
+            // We'll primarily rely on the explicit injection logic later.
+            node.widgets_values.forEach((val: any, idx: number) => {
+                // We don't strictly know the keys here without the node definition,
+                // but we store them to be safe.
+                inputs[`_widget_${idx}`] = val;
+            });
+        }
+
+        apiPrompt[nodeId] = {
+            class_type: node.type,
+            inputs: inputs,
+            _meta: { title: node.title || node.type }
+        };
+    });
+
+    return apiPrompt;
+};
+
+export const sendComfyPrompt = async (
+    serverUrl: string,
+    workflow: any,
+    promptText: string,
+    seed: number,
+    steps: number,
+    useSecureBridge: boolean = false,
+    signal?: AbortSignal
+): Promise<string> => {
+    const baseUrl = serverUrl.replace(/\/+$/, '');
+    console.log(`[ComfyUI] Starting preview. Bridge: ${useSecureBridge}, Target: ${baseUrl}`);
+
+    // 1. Prepare Workflow
+    let apiPrompt: any = {};
+    const isUiFormat = workflow.nodes && Array.isArray(workflow.nodes);
+
+    if (isUiFormat) {
+        console.log("[ComfyUI] Standard UI format detected. Attempting internal mapping...");
+        // For standard UI format, we'll try to find the nodes by type and title
+        apiPrompt = JSON.parse(JSON.stringify(workflow)); // Work on a copy
+        
+        let promptNode = apiPrompt.nodes.find((n: any) => 
+            n.type === 'CLIPTextEncode' && 
+            ((n.title || "").toLowerCase().includes("positive") || !(n.title || "").toLowerCase().includes("negative"))
+        );
+        let samplerNode = apiPrompt.nodes.find((n: any) => n.type === 'KSampler' || n.type === 'KSamplerAdvanced');
+
+        if (promptNode) {
+            // In UI format, prompt is usually the first widget
+            if (promptNode.widgets_values) promptNode.widgets_values[0] = promptText;
+        }
+        if (samplerNode && samplerNode.widgets_values) {
+            if (seed !== -1) samplerNode.widgets_values[0] = seed;
+            if (steps !== -1) samplerNode.widgets_values[2] = steps;
+        }
+
+        // IMPORTANT: The /prompt endpoint REQUIRES API format. 
+        // If we have UI format, we MUST convert it or it will fail.
+        apiPrompt = convertUiToApi(apiPrompt);
+    } else {
+        apiPrompt = JSON.parse(JSON.stringify(workflow));
+        // Identify nodes in API format
+        let promptNodeId = '';
+        let samplerNodeId = '';
+        for (const id in apiPrompt) {
+            const node = apiPrompt[id];
+            const type = node.class_type;
+            const title = (node._meta?.title || "").toLowerCase();
+            if (!promptNodeId && type === 'CLIPTextEncode' && (title.includes('positive') || !title.includes('negative'))) promptNodeId = id;
+            if (!samplerNodeId && (type === 'KSampler' || type === 'KSamplerAdvanced')) samplerNodeId = id;
+        }
+        if (promptNodeId) apiPrompt[promptNodeId].inputs.text = promptText;
+        if (samplerNodeId) {
+            if (seed !== -1) apiPrompt[samplerNodeId].inputs.seed = seed;
+            if (steps !== -1) apiPrompt[samplerNodeId].inputs.steps = steps;
+        }
+    }
+
+    // 2. Determine Endpoint
+    let fetchUrl = `${baseUrl}/prompt`;
+    let fetchHeaders: Record<string, string> = { 'Content-Type': 'application/json' };
+
+    if (useSecureBridge) {
+        fetchUrl = `${window.location.origin}/comfy-bridge/prompt`;
+        fetchHeaders['x-bridge-target'] = baseUrl;
+    }
+
+    // 3. Send Request
+    const response = await fetch(fetchUrl, {
+        method: 'POST',
+        headers: fetchHeaders,
+        body: JSON.stringify({ prompt: apiPrompt }),
+        signal
+    }).catch(err => {
+        if (err.name === 'AbortError') throw err;
+        throw new Error(`Connection failed: ${err.message}. Ensure your ComfyUI server or Bridge is reachable.`);
+    });
+
+    if (!response.ok) {
+        const errText = await response.text();
+        throw new Error(`Server Error (${response.status}): ${errText.substring(0, 100)}...`);
+    }
+    
+    const { prompt_id } = await response.json();
+    
+    // 4. Poll
+    const pollUrl = useSecureBridge ? `${window.location.origin}/comfy-bridge/history/${prompt_id}` : `${baseUrl}/history/${prompt_id}`;
+    const pollHeaders: HeadersInit = useSecureBridge ? { 'x-bridge-target': baseUrl } : {}; // Added explicit HeadersInit type
+    
+    for (let i = 0; i < 60; i++) {
+        if (signal?.aborted) throw new Error("Aborted");
+        
+        const hRes = await fetch(pollUrl, { headers: pollHeaders, signal });
+        if (hRes.ok) {
+            const history = await hRes.json();
+            if (history[prompt_id]) {
+                const outputs = history[prompt_id].outputs;
+                for (const nodeId in outputs) {
+                    if (outputs[nodeId].images?.length > 0) {
+                        const img = outputs[nodeId].images[0];
+                        let finalUrl = useSecureBridge 
+                            ? `${window.location.origin}/comfy-bridge/view?filename=${img.filename}&subfolder=${img.subfolder}&type=${img.type}&target_base=${encodeURIComponent(baseUrl)}`
+                            : `${baseUrl}/view?filename=${img.filename}&subfolder=${img.subfolder}&type=${img.type}`;
+                        return finalUrl;
+                    }
+                }
+            }
+        }
+        await new Promise(r => setTimeout(r, 3000));
+    }
+
+    throw new Error("Preview generation timed out.");
+};

services/geminiService.ts

@@ -0,0 +1,165 @@
+import { GoogleGenAI, GenerateContentResponse } from "@google/genai";
+
+const withRetry = async <T>(
+  apiCall: () => Promise<T>,
+  maxRetries: number = 3,
+  initialDelay: number = 1000
+): Promise<T> => {
+  let attempt = 0;
+  while (true) {
+    try {
+      return await apiCall();
+    } catch (error) {
+      attempt++;
+      if (
+        error instanceof Error &&
+        (error.message.includes("503") || error.message.toLowerCase().includes("overloaded")) &&
+        attempt < maxRetries
+      ) {
+        const delay = initialDelay * Math.pow(2, attempt - 1) + Math.random() * 500;
+        console.warn(`Attempt ${attempt} failed. Retrying in ${delay.toFixed(0)}ms...`);
+        await new Promise(resolve => setTimeout(resolve, delay));
+      } else {
+        throw error;
+      }
+    }
+  }
+};
+
+const fileToGenerativePart = async (file: File) => {
+  const base64EncodedDataPromise = new Promise<string>((resolve) => {
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      if (typeof reader.result === 'string') {
+        resolve(reader.result.split(',')[1]);
+      }
+    };
+    reader.readAsDataURL(file);
+  });
+  return {
+    inlineData: { data: await base64EncodedDataPromise, mimeType: file.type },
+  };
+};
+
+const constructPrompt = (
+    triggerWord: string, 
+    customInstructions?: string,
+    isCharacterTaggingEnabled?: boolean,
+    characterShowName?: string
+): string => {
+  let basePrompt = `You are an expert captioner for AI model training data. Your task is to describe the provided image/video in detail for a style LoRA. Follow these rules strictly:
+1. Start the caption with the trigger word: "${triggerWord}".
+2. Describe EVERYTHING visible: characters, clothing, actions, background, objects, lighting, and camera angle.
+3. Be objective and factual.
+4. DO NOT mention art styles or generic animation terms like "anime" or "cartoon".
+5. Write as a single, continuous paragraph.`;
+
+  if (isCharacterTaggingEnabled && characterShowName) {
+    basePrompt += `\n6. Identify characters from the show/series "${characterShowName}" and append tags at the end of the caption, separated by commas. The format for each tag must be "char_[charactername]" (e.g., ", char_simon, char_kamina"). If no characters are recognized, do not add tags.`;
+  }
+
+  if (customInstructions) {
+    return `${basePrompt}\n\nAdditional instructions: ${customInstructions}`;
+  }
+  return basePrompt;
+};
+
+export const generateCaption = async (
+  file: File,
+  triggerWord: string,
+  customInstructions?: string,
+  isCharacterTaggingEnabled?: boolean,
+  characterShowName?: string,
+  signal?: AbortSignal,
+  apiKeyOverride?: string,
+  model: string = 'gemini-3-pro-preview'
+): Promise<string> => {
+  const apiKey = apiKeyOverride || process.env.API_KEY;
+  if (!apiKey) throw new Error("API Key is missing. Please enter your Gemini API key in the Global Settings.");
+
+  const ai = new GoogleGenAI({ apiKey });
+  const imagePart = await fileToGenerativePart(file);
+  const prompt = constructPrompt(triggerWord, customInstructions, isCharacterTaggingEnabled, characterShowName);
+
+  const apiCall = () => ai.models.generateContent({
+    model: model,
+    contents: { parts: [imagePart, { text: prompt }] },
+    config: { signal } as any
+  });
+
+  const response: GenerateContentResponse = await withRetry(apiCall);
+  
+  if (signal?.aborted) throw new Error("AbortError");
+
+  if (response.text) {
+    return response.text.trim();
+  }
+  throw new Error("No caption text returned from Gemini.");
+};
+
+export const refineCaption = async (
+  file: File,
+  currentCaption: string,
+  refinementInstructions: string,
+  signal?: AbortSignal,
+  apiKeyOverride?: string,
+  model: string = 'gemini-3-pro-preview'
+): Promise<string> => {
+  const apiKey = apiKeyOverride || process.env.API_KEY;
+  if (!apiKey) throw new Error("API Key is missing.");
+
+  const ai = new GoogleGenAI({ apiKey });
+  const imagePart = await fileToGenerativePart(file);
+  const prompt = `You are an expert editor for LoRA training data. 
+Refine the provided caption based on the visual information and the user's refinement instructions. 
+Maintain the continuous paragraph format and ensure the trigger word is preserved.
+
+CURRENT CAPTION: "${currentCaption}"
+REFINEMENT INSTRUCTIONS: "${refinementInstructions}"
+
+Output only the refined caption.`;
+
+  const apiCall = () => ai.models.generateContent({
+    model: model,
+    contents: { parts: [imagePart, { text: prompt }] },
+    config: { signal } as any
+  });
+
+  const response: GenerateContentResponse = await withRetry(apiCall);
+  if (signal?.aborted) throw new Error("AbortError");
+
+  if (response.text) {
+    return response.text.trim();
+  }
+  throw new Error("No refined text returned.");
+};
+
+export const checkCaptionQuality = async (
+  file: File,
+  caption: string,
+  signal?: AbortSignal,
+  apiKeyOverride?: string,
+  model: string = 'gemini-3-pro-preview'
+): Promise<number> => {
+  const apiKey = apiKeyOverride || process.env.API_KEY;
+  if (!apiKey) throw new Error("API Key is missing.");
+
+  const ai = new GoogleGenAI({ apiKey });
+  const imagePart = await fileToGenerativePart(file);
+  const prompt = `Evaluate the following caption for accuracy and detail based on the image. Respond with ONLY an integer from 1 to 5.\nCaption: "${caption}"`;
+
+  try {
+    const apiCall = () => ai.models.generateContent({
+        model: model,
+        contents: { parts: [imagePart, { text: prompt }] },
+        config: { signal } as any
+    });
+    const response: GenerateContentResponse = await withRetry(apiCall);
+    const scoreText = response.text?.trim() || '0';
+    const score = parseInt(scoreText.match(/\d+/)?.[0] || '0', 10);
+    return score;
+  } catch (error) {
+    console.error("Quality check failed:", error);
+    return 0;
+  }
+};

services/grokService.ts

@@ -0,0 +1,242 @@
+
+/**
+ * Service for interacting with xAI Grok via OpenAI-compatible vision endpoints.
+ */
+
+const fileToBase64 = (file: File): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => {
+      if (typeof reader.result === 'string') {
+        resolve(reader.result);
+      } else {
+        reject(new Error('Failed to convert file to base64'));
+      }
+    };
+    reader.onerror = error => reject(error);
+  });
+};
+
+const extractFramesFromVideo = async (videoFile: File, numberOfFrames: number): Promise<string[]> => {
+  return new Promise((resolve, reject) => {
+    const video = document.createElement('video');
+    video.preload = 'metadata';
+    video.muted = true;
+    video.playsInline = true;
+    const url = URL.createObjectURL(videoFile);
+    const frames: string[] = [];
+    const timeout = setTimeout(() => {
+        URL.revokeObjectURL(url);
+        video.src = "";
+        reject(new Error("Video processing timed out"));
+    }, 60000);
+
+    video.onloadeddata = async () => {
+        const duration = video.duration;
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        if (!ctx) {
+            clearTimeout(timeout);
+            URL.revokeObjectURL(url);
+            reject(new Error("Could not create canvas context"));
+            return;
+        }
+        canvas.width = video.videoWidth;
+        canvas.height = video.videoHeight;
+        const step = duration / numberOfFrames;
+        try {
+            for (let i = 0; i < numberOfFrames; i++) {
+                const time = (step * i) + (step / 2);
+                await new Promise<void>((frameResolve) => {
+                    const onSeeked = () => {
+                        video.removeEventListener('seeked', onSeeked);
+                        frameResolve();
+                    };
+                    video.addEventListener('seeked', onSeeked);
+                    video.currentTime = Math.min(time, duration - 0.1);
+                });
+                ctx.drawImage(video, 0, 0);
+                frames.push(canvas.toDataURL('image/jpeg', 0.8));
+            }
+            clearTimeout(timeout);
+            URL.revokeObjectURL(url);
+            video.src = "";
+            resolve(frames);
+        } catch (e) {
+            clearTimeout(timeout);
+            URL.revokeObjectURL(url);
+            reject(e);
+        }
+    };
+    video.onerror = () => {
+        clearTimeout(timeout);
+        URL.revokeObjectURL(url);
+        reject(new Error("Failed to load video file"));
+    };
+    video.src = url;
+  });
+};
+
+const constructPrompt = (
+    triggerWord: string, 
+    customInstructions?: string,
+    isCharacterTaggingEnabled?: boolean,
+    characterShowName?: string
+): string => {
+  let basePrompt = `You are an expert captioner for AI model training data. Your task is to describe the provided image/video in detail for a style LoRA. Follow these rules strictly:
+1. Start the caption with the trigger word: "${triggerWord}".
+2. Describe EVERYTHING visible: characters, clothing, actions, background, objects, lighting, and camera angle.
+3. Be objective and factual.
+4. DO NOT mention the art style, "anime", "cartoon", "illustration", "2d", or "animation".
+5. Write the description as a single, continuous paragraph.`;
+
+  if (isCharacterTaggingEnabled && characterShowName && characterShowName.trim() !== '') {
+    basePrompt += `\n6. After the description, identify any characters from the show "${characterShowName}" and append their tags to the very end of the caption, separated by commas. The format for each tag must be "char_[charactername]" (e.g., ", char_simon, char_kamina"). If no characters are recognized, add no tags.`;
+  }
+
+  if (customInstructions) {
+    return `${basePrompt}\n\nIMPORTANT USER INSTRUCTIONS:\n${customInstructions}`;
+  }
+  return basePrompt;
+};
+
+export const generateCaptionGrok = async (
+  apiKey: string,
+  model: string,
+  file: File,
+  triggerWord: string,
+  customInstructions?: string,
+  isCharacterTaggingEnabled?: boolean,
+  characterShowName?: string,
+  videoFrameCount: number = 8,
+  signal?: AbortSignal
+): Promise<string> => {
+  if (!apiKey) throw new Error("xAI API Key is required for Grok.");
+  const endpoint = 'https://api.x.ai/v1/chat/completions';
+  const prompt = constructPrompt(triggerWord, customInstructions, isCharacterTaggingEnabled, characterShowName);
+  
+  let contentParts: any[] = [{ type: "text", text: prompt }];
+  if (file.type.startsWith('video/')) {
+    const frames = await extractFramesFromVideo(file, videoFrameCount);
+    frames.forEach(frame => contentParts.push({ type: "image_url", image_url: { url: frame } }));
+  } else {
+    const base64Image = await fileToBase64(file);
+    contentParts.push({ type: "image_url", image_url: { url: base64Image } });
+  }
+
+  const payload = {
+    model: model || 'grok-2-vision-1212',
+    messages: [{ role: "user", content: contentParts }],
+    max_tokens: 1000,
+    temperature: 0.2
+  };
+
+  const response = await fetch(endpoint, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      "Authorization": `Bearer ${apiKey}`
+    },
+    body: JSON.stringify(payload),
+    signal
+  });
+
+  if (!response.ok) {
+    const errData = await response.json().catch(() => ({}));
+    throw new Error(`Grok API Error (${response.status}): ${errData.error?.message || response.statusText}`);
+  }
+
+  const data = await response.json();
+  return data.choices?.[0]?.message?.content?.trim() || "";
+};
+
+export const refineCaptionGrok = async (
+  apiKey: string,
+  model: string,
+  file: File,
+  currentCaption: string,
+  refinementInstructions: string,
+  videoFrameCount: number = 4,
+  signal?: AbortSignal
+): Promise<string> => {
+  if (!apiKey) throw new Error("xAI API Key is required for Grok.");
+  const endpoint = 'https://api.x.ai/v1/chat/completions';
+  const prompt = `Refine the following caption based on the visual information and the instructions. Output ONLY the refined text.
+CURRENT CAPTION: "${currentCaption}"
+INSTRUCTIONS: "${refinementInstructions}"`;
+
+  let contentParts: any[] = [{ type: "text", text: prompt }];
+  if (file.type.startsWith('video/')) {
+    const frames = await extractFramesFromVideo(file, videoFrameCount);
+    frames.forEach(frame => contentParts.push({ type: "image_url", image_url: { url: frame } }));
+  } else {
+    const base64Image = await fileToBase64(file);
+    contentParts.push({ type: "image_url", image_url: { url: base64Image } });
+  }
+
+  const payload = {
+    model: model || 'grok-2-vision-1212',
+    messages: [{ role: "user", content: contentParts }],
+    max_tokens: 1000,
+    temperature: 0.2
+  };
+
+  const response = await fetch(endpoint, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      "Authorization": `Bearer ${apiKey}`
+    },
+    body: JSON.stringify(payload),
+    signal
+  });
+
+  if (!response.ok) throw new Error(`Grok API Error: ${response.status}`);
+  const data = await response.json();
+  return data.choices?.[0]?.message?.content?.trim() || "";
+};
+
+export const checkQualityGrok = async (
+  apiKey: string,
+  model: string,
+  file: File,
+  caption: string,
+  videoFrameCount: number = 4,
+  signal?: AbortSignal
+): Promise<number> => {
+  if (!apiKey) throw new Error("xAI API Key is required for Grok.");
+  const endpoint = 'https://api.x.ai/v1/chat/completions';
+  const prompt = `Evaluate the caption quality. Respond with ONLY an integer from 1 to 5.\nCaption: "${caption}"`;
+
+  let contentParts: any[] = [{ type: "text", text: prompt }];
+  if (file.type.startsWith('video/')) {
+    const frames = await extractFramesFromVideo(file, videoFrameCount);
+    frames.forEach(frame => contentParts.push({ type: "image_url", image_url: { url: frame } }));
+  } else {
+    const base64Image = await fileToBase64(file);
+    contentParts.push({ type: "image_url", image_url: { url: base64Image } });
+  }
+
+  const payload = {
+    model: model || 'grok-2-vision-1212',
+    messages: [{ role: "user", content: contentParts }],
+    max_tokens: 10,
+    temperature: 0.1
+  };
+
+  const response = await fetch(endpoint, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      "Authorization": `Bearer ${apiKey}`
+    },
+    body: JSON.stringify(payload),
+    signal
+  });
+
+  if (!response.ok) throw new Error(`Grok API Error: ${response.status}`);
+  const data = await response.json();
+  const text = data.choices?.[0]?.message?.content?.trim();
+  return parseInt(text?.match(/\d+/)?.[0] || '0', 10);
+};

services/qwenService.ts

@@ -0,0 +1,212 @@
+/**
+ * Service for interacting with Qwen-VL via OpenAI-compatible endpoints.
+ * This supports OpenRouter, Ollama, vLLM, etc.
+ */
+
+const fileToBase64 = (file: File): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => {
+      if (typeof reader.result === 'string') {
+        resolve(reader.result); // This includes the data:image/png;base64, prefix
+      } else {
+        reject(new Error('Failed to convert file to base64'));
+      }
+    };
+    reader.onerror = error => reject(error);
+  });
+};
+
+const extractFramesFromVideo = async (videoFile: File, numberOfFrames: number): Promise<string[]> => {
+  return new Promise((resolve, reject) => {
+    const video = document.createElement('video');
+    video.preload = 'metadata';
+    video.muted = true;
+    video.playsInline = true;
+    const url = URL.createObjectURL(videoFile);
+    const frames: string[] = [];
+    const timeout = setTimeout(() => {
+        URL.revokeObjectURL(url);
+        video.src = "";
+        reject(new Error("Video processing timed out"));
+    }, 60000);
+
+    video.onloadeddata = async () => {
+        const duration = video.duration;
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        if (!ctx) {
+            clearTimeout(timeout);
+            URL.revokeObjectURL(url);
+            reject(new Error("Could not create canvas context"));
+            return;
+        }
+        canvas.width = video.videoWidth;
+        canvas.height = video.videoHeight;
+        const step = duration / numberOfFrames;
+        try {
+            for (let i = 0; i < numberOfFrames; i++) {
+                const time = (step * i) + (step / 2);
+                await new Promise<void>((frameResolve) => {
+                    const onSeeked = () => {
+                        video.removeEventListener('seeked', onSeeked);
+                        frameResolve();
+                    };
+                    video.addEventListener('seeked', onSeeked);
+                    video.currentTime = time;
+                });
+                ctx.drawImage(video, 0, 0);
+                frames.push(canvas.toDataURL('image/jpeg', 0.8));
+            }
+            clearTimeout(timeout);
+            URL.revokeObjectURL(url);
+            video.src = "";
+            resolve(frames);
+        } catch (e) {
+            clearTimeout(timeout);
+            URL.revokeObjectURL(url);
+            reject(e);
+        }
+    };
+    video.onerror = () => {
+        clearTimeout(timeout);
+        URL.revokeObjectURL(url);
+        reject(new Error("Failed to load video file"));
+    };
+    video.src = url;
+  });
+};
+
+const constructPrompt = (
+    triggerWord: string, 
+    customInstructions?: string,
+    isCharacterTaggingEnabled?: boolean,
+    characterShowName?: string
+): string => {
+  let basePrompt = `You are an expert captioner for AI model training data. Your task is to describe the provided image/video in detail for a style LoRA. Follow these rules strictly:
+1. Start the caption with the trigger word: "${triggerWord}".
+2. Describe EVERYTHING visible: characters, clothing, actions, background, objects, lighting, and camera angle.
+3. Be objective and factual.
+4. DO NOT mention the art style, "anime", "cartoon", "illustration", "2d", or "animation".
+5. Write the description as a single, continuous paragraph.`;
+
+  if (isCharacterTaggingEnabled && characterShowName && characterShowName.trim() !== '') {
+    basePrompt += `\n6. After the description, identify any characters from the show "${characterShowName}" and append their tags to the very end of the caption, separated by commas. The format for each tag must be "char_[charactername]" (e.g., ", char_simon, char_kamina"). If no characters are recognized, add no tags.`;
+  }
+
+  if (customInstructions) {
+    return `${basePrompt}\n\nIMPORTANT USER INSTRUCTIONS:\n${customInstructions}`;
+  }
+  return basePrompt;
+};
+
+export const generateCaptionQwen = async (
+  apiKey: string,
+  baseUrl: string,
+  model: string,
+  file: File,
+  triggerWord: string,
+  customInstructions?: string,
+  isCharacterTaggingEnabled?: boolean,
+  characterShowName?: string,
+  videoFrameCount: number = 8,
+  signal?: AbortSignal
+): Promise<string> => {
+  if (!baseUrl) throw new Error("Local Endpoint URL is required for Qwen.");
+  let endpoint = baseUrl;
+  if (!endpoint.includes('/chat/completions')) {
+      endpoint = endpoint.replace(/\/+$/, '') + '/chat/completions';
+  }
+  const prompt = constructPrompt(triggerWord, customInstructions, isCharacterTaggingEnabled, characterShowName);
+  let contentParts: any[] = [{ type: "text", text: prompt }];
+  if (file.type.startsWith('video/')) {
+    const frames = await extractFramesFromVideo(file, videoFrameCount);
+    frames.forEach(frame => contentParts.push({ type: "image_url", image_url: { url: frame } }));
+  } else {
+    const base64Image = await fileToBase64(file);
+    contentParts.push({ type: "image_url", image_url: { url: base64Image } });
+  }
+  const payload = {
+    model: model || 'Qwen/Qwen2.5-VL-7B-Instruct',
+    messages: [{ role: "user", content: contentParts }],
+    max_tokens: 1000,
+    temperature: 0.2
+  };
+  const headers: Record<string, string> = { "Content-Type": "application/json" };
+  if (apiKey) headers["Authorization"] = `Bearer ${apiKey}`;
+  const response = await fetch(endpoint, { method: "POST", headers, body: JSON.stringify(payload), signal });
+  if (!response.ok) throw new Error(`API Error: ${response.status}`);
+  const data = await response.json();
+  return data.choices?.[0]?.message?.content?.trim() || "";
+};
+
+export const refineCaptionQwen = async (
+  apiKey: string,
+  baseUrl: string,
+  model: string,
+  file: File,
+  currentCaption: string,
+  refinementInstructions: string,
+  videoFrameCount: number = 8,
+  signal?: AbortSignal
+): Promise<string> => {
+  let endpoint = baseUrl;
+  if (!endpoint.includes('/chat/completions')) endpoint = endpoint.replace(/\/+$/, '') + '/chat/completions';
+  const prompt = `Refine the following caption based on the visual information and the instructions. Output ONLY the refined text.
+CURRENT CAPTION: "${currentCaption}"
+INSTRUCTIONS: "${refinementInstructions}"`;
+  let contentParts: any[] = [{ type: "text", text: prompt }];
+  if (file.type.startsWith('video/')) {
+    const frames = await extractFramesFromVideo(file, 4);
+    frames.forEach(frame => contentParts.push({ type: "image_url", image_url: { url: frame } }));
+  } else {
+    const base64Image = await fileToBase64(file);
+    contentParts.push({ type: "image_url", image_url: { url: base64Image } });
+  }
+  const payload = {
+    model: model || 'Qwen/Qwen2.5-VL-7B-Instruct',
+    messages: [{ role: "user", content: contentParts }],
+    max_tokens: 1000,
+    temperature: 0.2
+  };
+  const headers: Record<string, string> = { "Content-Type": "application/json" };
+  if (apiKey) headers["Authorization"] = `Bearer ${apiKey}`;
+  const response = await fetch(endpoint, { method: "POST", headers, body: JSON.stringify(payload), signal });
+  const data = await response.json();
+  return data.choices?.[0]?.message?.content?.trim() || "";
+};
+
+export const checkQualityQwen = async (
+  apiKey: string,
+  baseUrl: string,
+  model: string,
+  file: File,
+  caption: string,
+  videoFrameCount: number = 8,
+  signal?: AbortSignal
+): Promise<number> => {
+  let endpoint = baseUrl;
+  if (!endpoint.includes('/chat/completions')) endpoint = endpoint.replace(/\/+$/, '') + '/chat/completions';
+  const prompt = `Evaluate the caption quality. Respond with ONLY an integer from 1 to 5.\nCaption: "${caption}"`;
+  let contentParts: any[] = [{ type: "text", text: prompt }];
+  if (file.type.startsWith('video/')) {
+    const frames = await extractFramesFromVideo(file, 4);
+    frames.forEach(frame => contentParts.push({ type: "image_url", image_url: { url: frame } }));
+  } else {
+    const base64Image = await fileToBase64(file);
+    contentParts.push({ type: "image_url", image_url: { url: base64Image } });
+  }
+  const payload = {
+    model: model || 'Qwen/Qwen2.5-VL-7B-Instruct',
+    messages: [{ role: "user", content: contentParts }],
+    max_tokens: 10,
+    temperature: 0.1
+  };
+  const headers: Record<string, string> = { "Content-Type": "application/json" };
+  if (apiKey) headers["Authorization"] = `Bearer ${apiKey}`;
+  const response = await fetch(endpoint, { method: "POST", headers, body: JSON.stringify(payload), signal });
+  const data = await response.json();
+  const text = data.choices?.[0]?.message?.content?.trim();
+  return parseInt(text?.match(/\d+/)?.[0] || '0', 10);
+};

tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "types": ["vite/client", "node"]
+  },
+  "include": ["**/*.ts", "**/*.tsx"]
+}

types.ts

@@ -0,0 +1,24 @@
+
+export enum GenerationStatus {
+  IDLE = 'idle',
+  GENERATING = 'generating',
+  CHECKING = 'checking',
+  SUCCESS = 'success',
+  ERROR = 'error',
+}
+
+export interface MediaFile {
+  id: string;
+  file: File;
+  previewUrl: string;
+  caption: string;
+  status: GenerationStatus;
+  errorMessage?: string;
+  isSelected: boolean;
+  customInstructions: string;
+  qualityScore?: number;
+  // ComfyUI Preview fields
+  comfyPreviewUrl?: string;
+  comfyStatus?: 'idle' | 'generating' | 'success' | 'error';
+  comfyErrorMessage?: string;
+}

vite.config.ts

@@ -0,0 +1,87 @@
+import { defineConfig, loadEnv } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig(({ mode }) => {
+  // Load env file based on `mode` in the current working directory.
+  const env = loadEnv(mode, '.', '');
+  
+  return {
+    plugins: [react()],
+    define: {
+      // Expose the API_KEY from the environment to the client-side code.
+      'process.env.API_KEY': JSON.stringify(env.API_KEY),
+      'process.env': {} 
+    },
+    server: {
+      port: 7860,
+      host: true,
+      proxy: {
+        // Secure Bridge Proxy Implementation
+        '/comfy-bridge': {
+          target: 'http://localhost:8188', // Fallback target
+          changeOrigin: true,
+          secure: false,
+          ws: true,
+          router: (req: any) => { // Added explicit 'any' type
+            // Dynamically determine target from header or query param
+            const target = req.headers['x-bridge-target'] as string;
+            if (target) return target;
+            
+            // For GET requests like images, target might be in query
+            const url = new URL(req.url!, 'http://localhost');
+            const queryTarget = url.searchParams.get('target_base');
+            if (queryTarget) return queryTarget;
+
+            return 'http://localhost:8188';
+          },
+          rewrite: (path: string) => path.replace(/^\/comfy-bridge/, ''),
+          onProxyReq: (proxyReq: any) => { // Fixed implicit any and removed unused params
+            // CRITICAL: Strip security headers that cause 403 on ComfyUI
+            proxyReq.removeHeader('origin');
+            proxyReq.removeHeader('referer');
+            proxyReq.removeHeader('x-bridge-target'); // Clean up internal header
+            
+            // Also clean up query params used for routing
+            if (proxyReq.path.includes('target_base=')) {
+                proxyReq.path = proxyReq.path.replace(/[&?]target_base=[^&]*/, '');
+                if (proxyReq.path.endsWith('?') || proxyReq.path.endsWith('&')) {
+                    proxyReq.path = proxyReq.path.slice(0, -1);
+                }
+            }
+          },
+          onProxyRes: (proxyRes: any) => { // Fixed implicit any and removed unused params
+            // Ensure CORS is handled by the proxy
+            proxyRes.headers['Access-Control-Allow-Origin'] = '*';
+          }
+        }
+      }
+    },
+    preview: {
+      port: 7860,
+      host: true,
+      allowedHosts: true,
+      proxy: {
+        // Implementation duplicated for preview mode (HF Spaces production)
+        '/comfy-bridge': {
+          target: 'http://localhost:8188',
+          changeOrigin: true,
+          secure: false,
+          ws: true,
+          router: (req: any) => { // Added explicit 'any' type
+            const target = req.headers['x-bridge-target'] as string;
+            if (target) return target;
+            const url = new URL(req.url!, 'http://localhost');
+            const queryTarget = url.searchParams.get('target_base');
+            return queryTarget || 'http://localhost:8188';
+          },
+          rewrite: (path: string) => path.replace(/^\/comfy-bridge/, ''),
+          onProxyReq: (proxyReq: any) => { // Fixed implicit any
+            proxyReq.removeHeader('origin');
+            proxyReq.removeHeader('referer');
+            proxyReq.removeHeader('x-bridge-target');
+          }
+        }
+      }
+    }
+  };
+});