feat: caption copy

src/components/ImageAnalysisView.tsx

@@ -18,6 +18,8 @@ export default function ImageAnalysisView({ images, onBackToUpload }: ImageAnaly
   const [isAnalyzing, setIsAnalyzing] = useState<boolean>(false);
   const [currentImageIndex, setCurrentImageIndex] = useState<number>(0);
   const [selectedImageUrl, setSelectedImageUrl] = useState<string>("");
+  const [copyStatus, setCopyStatus] = useState<{ [key: string]: 'success' | 'error' | null }>({});
+  const [copyAllStatus, setCopyAllStatus] = useState<'success' | 'error' | null>(null);
 
   const { isLoaded, runInference } = useVLMContext();
   const abortControllerRef = useRef<AbortController | null>(null);
@@ -74,11 +76,57 @@ export default function ImageAnalysisView({ images, onBackToUpload }: ImageAnaly
     setCurrentImageIndex(index);
   }, []);
 
+  const copyToClipboard = useCallback(async (text: string, itemKey?: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      if (itemKey) {
+        setCopyStatus(prev => ({ ...prev, [itemKey]: 'success' }));
+        setTimeout(() => setCopyStatus(prev => ({ ...prev, [itemKey]: null })), 2000);
+      }
+      return true;
+    } catch (error) {
+      console.error('Failed to copy text:', error);
+      try {
+        // Fallback for older browsers
+        const textArea = document.createElement('textarea');
+        textArea.value = text;
+        document.body.appendChild(textArea);
+        textArea.select();
+        document.execCommand('copy');
+        document.body.removeChild(textArea);
+        if (itemKey) {
+          setCopyStatus(prev => ({ ...prev, [itemKey]: 'success' }));
+          setTimeout(() => setCopyStatus(prev => ({ ...prev, [itemKey]: null })), 2000);
+        }
+        return true;
+      } catch (fallbackError) {
+        if (itemKey) {
+          setCopyStatus(prev => ({ ...prev, [itemKey]: 'error' }));
+          setTimeout(() => setCopyStatus(prev => ({ ...prev, [itemKey]: null })), 2000);
+        }
+        return false;
+      }
+    }
+  }, []);
+
   const stopAnalysis = useCallback(() => {
     abortControllerRef.current?.abort();
     setIsAnalyzing(false);
   }, []);
 
+  const copyAllCaptions = useCallback(async () => {
+    const captionsText = results
+      .filter(result => result.caption && !result.error)
+      .map((result, index) => `Image ${index + 1} (${result.file.name}): ${result.caption}`)
+      .join('\n\n');
+    
+    if (captionsText) {
+      const success = await copyToClipboard(captionsText);
+      setCopyAllStatus(success ? 'success' : 'error');
+      setTimeout(() => setCopyAllStatus(null), 2000);
+    }
+  }, [results, copyToClipboard]);
+
   useEffect(() => {
     return () => {
       abortControllerRef.current?.abort();
@@ -123,6 +171,42 @@ export default function ImageAnalysisView({ images, onBackToUpload }: ImageAnaly
               )}
             </div>
             
+            {results.length > 0 && !isAnalyzing && (
+              <div className="mb-4">
+                <GlassButton 
+                  onClick={copyAllCaptions}
+                  className={`w-full text-sm transition-colors ${
+                    copyAllStatus === 'success' ? 'bg-green-500/20 border-green-400/30' :
+                    copyAllStatus === 'error' ? 'bg-red-500/20 border-red-400/30' : ''
+                  }`}
+                  disabled={results.filter(r => r.caption && !r.error).length === 0}
+                >
+                  {copyAllStatus === 'success' ? (
+                    <>
+                      <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                      </svg>
+                      Copied!
+                    </>
+                  ) : copyAllStatus === 'error' ? (
+                    <>
+                      <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                      </svg>
+                      Failed to Copy
+                    </>
+                  ) : (
+                    <>
+                      <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                      </svg>
+                      Copy All Captions
+                    </>
+                  )}
+                </GlassButton>
+              </div>
+            )}
+            
             {isAnalyzing && (
               <div className="text-sm text-white/70 text-center">
                 Analyzing image {currentImageIndex + 1} of {images.length}...
@@ -179,8 +263,48 @@ export default function ImageAnalysisView({ images, onBackToUpload }: ImageAnaly
                                 Error: {result.error}
                               </div>
                             ) : (
-                              <div className="text-white/80">
-                                {result.caption}
+                              <div className="space-y-2">
+                                <div className="text-white/80">
+                                  {result.caption}
+                                </div>
+                                {result.caption && (
+                                  <button
+                                    onClick={(e) => {
+                                      e.stopPropagation();
+                                      const itemKey = `${file.name}-${index}`;
+                                      copyToClipboard(result.caption, itemKey);
+                                    }}
+                                    className={`flex items-center gap-1 transition-colors ${
+                                      copyStatus[`${file.name}-${index}`] === 'success' ? 'text-green-400' :
+                                      copyStatus[`${file.name}-${index}`] === 'error' ? 'text-red-400' :
+                                      'text-blue-400 hover:text-blue-300'
+                                    }`}
+                                    title="Copy caption"
+                                  >
+                                    {copyStatus[`${file.name}-${index}`] === 'success' ? (
+                                      <>
+                                        <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                                        </svg>
+                                        <span className="text-xs">Copied!</span>
+                                      </>
+                                    ) : copyStatus[`${file.name}-${index}`] === 'error' ? (
+                                      <>
+                                        <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                                        </svg>
+                                        <span className="text-xs">Failed</span>
+                                      </>
+                                    ) : (
+                                      <>
+                                        <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                                        </svg>
+                                        <span className="text-xs">Copy</span>
+                                      </>
+                                    )}
+                                  </button>
+                                )}
                               </div>
                             )}
                           </div>

src/components/LoadingScreen.tsx

@@ -37,11 +37,13 @@ export default function LoadingScreen({ onComplete }: LoadingScreenProps) {
         await loadModel((message) => {
           setCurrentStep(message);
           if (message.includes("Loading processor")) {
-            setProgress(10);
+            setProgress(15);
           } else if (message.includes("Processor loaded")) {
-            setProgress(20);
+            setProgress(35);
+          } else if (message.includes("Loading model")) {
+            setProgress(50);
           } else if (message.includes("Model loaded")) {
-            setProgress(80);
+            setProgress(90);
           }
         });
 
@@ -100,14 +102,21 @@ export default function LoadingScreen({ onComplete }: LoadingScreenProps) {
           </div>
 
           {!isError && (
-            <div className="space-y-2">
-              <div className="w-full bg-gray-800/50 rounded-full h-3 overflow-hidden backdrop-blur-sm border border-gray-700/30">
+            <div className="space-y-3">
+              <div className="w-full bg-gray-800/50 rounded-full h-4 overflow-hidden backdrop-blur-sm border border-gray-700/30 shadow-inner">
                 <div
-                  className="h-full bg-gradient-to-r from-blue-500 to-blue-600 rounded-full transition-all duration-300 ease-out"
+                  className="h-full bg-gradient-to-r from-blue-500 via-blue-400 to-cyan-400 rounded-full transition-all duration-500 ease-out relative"
                   style={{ width: `${progress}%` }}
-                />
+                >
+                  <div className="absolute inset-0 bg-white/20 rounded-full animate-pulse" />
+                </div>
+              </div>
+              <div className="flex justify-between items-center text-sm">
+                <span className="text-gray-400">{Math.round(progress)}% complete</span>
+                {progress > 0 && progress < 100 && (
+                  <span className="text-blue-400 animate-pulse">●</span>
+                )}
               </div>
-              <p className="text-sm text-gray-500">{Math.round(progress)}% complete</p>
             </div>
           )}