Upload 20 files

.dockerignore

@@ -0,0 +1 @@
+��^�j�W��
���$z����b�

.env.local

@@ -0,0 +1 @@
+GEMINI_API_KEY=PLACEHOLDER_API_KEY

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

App.tsx

@@ -0,0 +1,883 @@
+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 { 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';
+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 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);
+
+  // 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>('/mnt/Goon/captioner');
+
+  // 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;
+    return qwenEndpoint !== '';
+  }, [apiProvider, geminiApiKey, 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 mediaUploads = files.filter(file => file.type.startsWith('image/') || file.type.startsWith('video/'));
+    const newMediaFiles = await Promise.all(mediaUploads.map(async (file) => ({
+      id: `${file.name}-${Math.random()}`,
+      file,
+      previewUrl: URL.createObjectURL(file),
+      caption: '',
+      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 {
+        const score = apiProvider === 'gemini'
+            ? await checkCaptionQuality(fileToProcess.file, fileToProcess.caption, abortControllerRef.current.signal, geminiApiKey, geminiModel)
+            : 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, 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 {
+      const caption = apiProvider === 'gemini'
+        ? await generateCaption(fileToProcess.file, triggerWord, combinedInstructions, isCharacterTaggingEnabled, characterShowName, abortControllerRef.current.signal, geminiApiKey, geminiModel)
+        : 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, 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 {
+      const caption = apiProvider === 'gemini'
+        ? await refineCaption(fileToProcess.file, fileToProcess.caption, combinedInstructions, abortControllerRef.current.signal, geminiApiKey, geminiModel)
+        : 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, 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\npython -m venv venv\ncall venv\\Scripts\\activate\npip install vllm bitsandbytes\necho Setup Complete.`
+      : `#!/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 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-xs 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('qwen')} className={`flex-1 py-3 text-xs 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 (GPU)</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>
+                    ) : (
+                        <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 Setup Script</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={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
-emoji: 🏃
-colorFrom: green
-colorTo: pink
+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/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');
+          }
+        }
+      }
+    }
+  };
+});