Multiple sources

src/App.tsx

@@ -2,20 +2,33 @@ import { useState, useEffect, useRef, useCallback, useMemo } from "react";
 import LoadingScreen from "./components/LoadingScreen";
 import CaptioningView from "./components/CaptioningView";
 import WelcomeScreen from "./components/WelcomeScreen";
-import WebcamPermissionDialog from "./components/WebcamPermissionDialog";
-import type { AppState } from "./types";
+import SourceSelector from "./components/SourceSelector";
+import type { AppState, VideoSource } from "./types";
 
 export default function App() {
-  const [appState, setAppState] = useState<AppState>("requesting-permission");
-  const [webcamStream, setWebcamStream] = useState<MediaStream | null>(null);
+  const [appState, setAppState] = useState<AppState>("source-selection");
+  const [videoSource, setVideoSource] = useState<VideoSource | null>(null);
   const [isVideoReady, setIsVideoReady] = useState(false);
   const videoRef = useRef<HTMLVideoElement | null>(null);
 
-  const handlePermissionGranted = useCallback((stream: MediaStream) => {
-    setWebcamStream(stream);
+  const handleSourceSelected = useCallback((source: VideoSource) => {
+    setVideoSource(source);
     setAppState("welcome");
   }, []);
 
+  const handleBackToSourceSelection = useCallback(() => {
+    // Clean up current source
+    if (videoSource?.stream) {
+      videoSource.stream.getTracks().forEach(track => track.stop());
+    }
+    if (videoSource?.url && videoSource.type === "upload") {
+      URL.revokeObjectURL(videoSource.url);
+    }
+    setVideoSource(null);
+    setIsVideoReady(false);
+    setAppState("source-selection");
+  }, [videoSource]);
+
   const handleStart = useCallback(() => {
     setAppState("loading");
   }, []);
@@ -33,8 +46,20 @@ export default function App() {
   }, []);
 
   const setupVideo = useCallback(
-    (video: HTMLVideoElement, stream: MediaStream) => {
-      video.srcObject = stream;
+    (video: HTMLVideoElement, source: VideoSource) => {
+      // Reset video element
+      video.srcObject = null;
+      video.src = "";
+      video.load();
+
+      if (source.stream) {
+        // Stream-based sources (webcam, screen share)
+        video.srcObject = source.stream;
+      } else if (source.url) {
+        // URL-based sources (upload, examples)
+        video.src = source.url;
+        video.loop = true; // Loop for uploaded/example videos
+      }
 
       const handleCanPlay = () => {
         setIsVideoReady(true);
@@ -43,28 +68,34 @@ export default function App() {
 
       video.addEventListener("canplay", handleCanPlay, { once: true });
 
+      // Handle stream ended (e.g., user stops screen sharing)
+      if (source.stream) {
+        const track = source.stream.getVideoTracks()[0];
+        if (track) {
+          track.onended = () => {
+            handleBackToSourceSelection();
+          };
+        }
+      }
+
       return () => {
         video.removeEventListener("canplay", handleCanPlay);
       };
     },
-    [playVideo],
+    [playVideo, handleBackToSourceSelection],
   );
 
   useEffect(() => {
-    if (webcamStream && videoRef.current) {
+    if (videoSource && videoRef.current) {
       const video = videoRef.current;
-
-      video.srcObject = null;
-      video.load();
-
-      const cleanup = setupVideo(video, webcamStream);
+      const cleanup = setupVideo(video, videoSource);
       return cleanup;
     }
-  }, [webcamStream, setupVideo]);
+  }, [videoSource, setupVideo]);
 
   const videoBlurState = useMemo(() => {
     switch (appState) {
-      case "requesting-permission":
+      case "source-selection":
         return "blur(20px) brightness(0.2) saturate(0.5)";
       case "welcome":
         return "blur(12px) brightness(0.3) saturate(0.7)";
@@ -77,11 +108,25 @@ export default function App() {
     }
   }, [appState]);
 
+  const getSourceLabel = () => {
+    if (!videoSource) return null;
+    switch (videoSource.type) {
+      case "webcam":
+        return "Webcam";
+      case "screen":
+        return "Screen Share";
+      case "upload":
+        return videoSource.name || "Uploaded Video";
+      case "example":
+        return videoSource.name || "Example Video";
+    }
+  };
+
   return (
     <div className="App relative h-screen overflow-hidden bg-[#FFFAEB]">
       <div className="absolute inset-0 bg-[#FFFAEB]" />
 
-      {webcamStream && (
+      {videoSource && (
         <video
           ref={videoRef}
           autoPlay
@@ -95,21 +140,33 @@ export default function App() {
         />
       )}
 
-      {appState !== "captioning" && (
+      {appState !== "captioning" && appState !== "source-selection" && (
         <div className="absolute inset-0 bg-[#FFFAEB]/90 backdrop-blur-sm" />
       )}
 
-      {appState === "requesting-permission" && (
-        <WebcamPermissionDialog onPermissionGranted={handlePermissionGranted} />
+      {appState === "source-selection" && (
+        <SourceSelector onSourceSelected={handleSourceSelected} />
       )}
 
-      {appState === "welcome" && <WelcomeScreen onStart={handleStart} />}
+      {appState === "welcome" && (
+        <WelcomeScreen 
+          onStart={handleStart} 
+          onBack={handleBackToSourceSelection}
+          sourceLabel={getSourceLabel() ?? undefined}
+        />
+      )}
 
       {appState === "loading" && (
         <LoadingScreen onComplete={handleLoadingComplete} />
       )}
 
-      {appState === "captioning" && <CaptioningView videoRef={videoRef} />}
+      {appState === "captioning" && (
+        <CaptioningView 
+          videoRef={videoRef} 
+          videoSource={videoSource}
+          onChangeSource={handleBackToSourceSelection}
+        />
+      )}
     </div>
   );
 }

src/components/CaptioningView.tsx

@@ -3,10 +3,44 @@ import WebcamCapture from "./WebcamCapture";
 import PromptInput from "./PromptInput";
 import LiveCaption, { type HistoryEntry } from "./LiveCaption";
 import { useVLMContext } from "../context/useVLMContext";
-import { PROMPTS, TIMING } from "../constants";
+import { PROMPTS, TIMING, THEME } from "../constants";
+import type { VideoSource } from "../types";
+
+const SOURCE_ICONS: Record<string, React.ReactNode> = {
+  webcam: (
+    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 10.5l4.72-4.72a.75.75 0 011.28.53v11.38a.75.75 0 01-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25h-9A2.25 2.25 0 002.25 7.5v9a2.25 2.25 0 002.25 2.25z" />
+    </svg>
+  ),
+  screen: (
+    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25" />
+    </svg>
+  ),
+  upload: (
+    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
+    </svg>
+  ),
+  example: (
+    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+      <path strokeLinecap="round" strokeLinejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+      <path strokeLinecap="round" strokeLinejoin="round" d="M15.91 11.672a.375.375 0 010 .656l-5.603 3.113a.375.375 0 01-.557-.328V8.887c0-.286.307-.466.557-.327l5.603 3.112z" />
+    </svg>
+  ),
+};
+
+const SOURCE_LABELS: Record<string, string> = {
+  webcam: "Webcam",
+  screen: "Screen",
+  upload: "Upload",
+  example: "Example",
+};
 
 interface CaptioningViewProps {
   videoRef: React.RefObject<HTMLVideoElement | null>;
+  videoSource?: VideoSource | null;
+  onChangeSource?: () => void;
 }
 
 function useCaptioningLoop(
@@ -94,7 +128,7 @@ function useCaptioningLoop(
   }, [isRunning, isLoaded, runInference, promptRef, videoRef]);
 }
 
-export default function CaptioningView({ videoRef }: CaptioningViewProps) {
+export default function CaptioningView({ videoRef, videoSource, onChangeSource }: CaptioningViewProps) {
   const { imageSize, setImageSize } = useVLMContext();
   const [caption, setCaption] = useState<string>("");
   const [isLoopRunning, setIsLoopRunning] = useState<boolean>(true);
@@ -168,6 +202,12 @@ export default function CaptioningView({ videoRef }: CaptioningViewProps) {
     if (error) setError(null);
   }, [error]);
 
+  const getSourceLabel = () => {
+    if (!videoSource) return "Video";
+    if (videoSource.name) return videoSource.name;
+    return SOURCE_LABELS[videoSource.type] || "Video";
+  };
+
   return (
     <div className="absolute inset-0 text-white">
       <div className="relative w-full h-full">
@@ -179,6 +219,36 @@ export default function CaptioningView({ videoRef }: CaptioningViewProps) {
           onImageSizeChange={setImageSize}
         />
 
+        {/* Source Indicator - Top Left */}
+        {videoSource && onChangeSource && (
+          <div className="absolute top-5 left-5 z-30">
+            <button
+              onClick={onChangeSource}
+              className="group flex items-center gap-3 px-4 py-2.5 bg-black/60 backdrop-blur-md border border-white/10 hover:border-white/30 transition-all hover:bg-black/70"
+              title="Change video source"
+            >
+              <div
+                className="flex items-center justify-center"
+                style={{ color: THEME.mistralOrange }}
+              >
+                {SOURCE_ICONS[videoSource.type]}
+              </div>
+              <span className="text-sm font-medium text-white/90 max-w-[200px] truncate">
+                {getSourceLabel()}
+              </span>
+              <svg
+                className="w-4 h-4 text-white/50 group-hover:text-white/80 transition-colors"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                strokeWidth={2}
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" />
+              </svg>
+            </button>
+          </div>
+        )}
+
         {/* Prompt Input - Bottom Left */}
         <div className="absolute bottom-5 left-5 z-30 w-[540px]">
           <PromptInput onPromptChange={handlePromptChange} />

src/components/SourceSelector.tsx

@@ -0,0 +1,401 @@
+import { useState, useEffect, useRef, useCallback } from "react";
+import { THEME, EXAMPLE_VIDEOS } from "../constants";
+import type { VideoSourceType, VideoSource } from "../types";
+
+type ExampleVideo = (typeof EXAMPLE_VIDEOS)[number];
+
+interface SourceSelectorProps {
+  onSourceSelected: (source: VideoSource) => void;
+  onBack?: () => void;
+}
+
+interface SourceCardProps {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  onClick: () => void;
+  isActive?: boolean;
+  isLoading?: boolean;
+  badge?: string;
+}
+
+function SourceCard({ icon, title, description, onClick, isActive, isLoading, badge }: SourceCardProps) {
+  return (
+    <button
+      onClick={onClick}
+      disabled={isLoading}
+      className={`
+        group relative w-full text-left p-6 border-2 transition-all duration-300
+        hover:border-[var(--mistral-orange)] hover:shadow-lg hover:-translate-y-1
+        ${isActive ? "border-[var(--mistral-orange)] bg-[var(--mistral-orange)]/5" : "border-[var(--beige-dark)]"}
+        ${isLoading ? "opacity-50 cursor-wait" : "cursor-pointer"}
+      `}
+      style={{
+        "--mistral-orange": THEME.mistralOrange,
+        "--beige-dark": THEME.beigeDark,
+      } as React.CSSProperties}
+    >
+      {badge && (
+        <span
+          className="absolute -top-2 -right-2 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider text-white"
+          style={{ backgroundColor: THEME.mistralOrange }}
+        >
+          {badge}
+        </span>
+      )}
+      
+      <div className="flex items-start gap-4">
+        <div
+          className={`
+            w-14 h-14 flex items-center justify-center shrink-0
+            transition-all duration-300 group-hover:scale-110
+            ${isActive ? "text-white" : "text-[var(--mistral-orange)]"}
+          `}
+          style={{
+            backgroundColor: isActive ? THEME.mistralOrange : `${THEME.mistralOrange}15`,
+          }}
+        >
+          {isLoading ? (
+            <svg className="w-6 h-6 animate-spin" viewBox="0 0 24 24" fill="none">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+            </svg>
+          ) : (
+            icon
+          )}
+        </div>
+        
+        <div className="flex-1 min-w-0">
+          <h3
+            className="font-semibold text-lg mb-1 flex items-center gap-2"
+            style={{ color: THEME.textBlack }}
+          >
+            {title}
+            <svg
+              className="w-4 h-4 opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300"
+              style={{ color: THEME.mistralOrange }}
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={2}
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
+            </svg>
+          </h3>
+          <p className="text-gray-500 text-sm leading-relaxed">{description}</p>
+        </div>
+      </div>
+    </button>
+  );
+}
+
+function ExampleVideoCard({ video, onClick, isSelected }: { video: ExampleVideo; onClick: () => void; isSelected: boolean }) {
+  return (
+    <button
+      onClick={onClick}
+      className={`
+        group relative overflow-hidden border-2 transition-all duration-300
+        hover:border-[var(--mistral-orange)] hover:shadow-lg
+        ${isSelected ? "border-[var(--mistral-orange)] ring-2 ring-[var(--mistral-orange)]/20" : "border-[var(--beige-dark)]"}
+      `}
+      style={{
+        "--mistral-orange": THEME.mistralOrange,
+        "--beige-dark": THEME.beigeDark,
+      } as React.CSSProperties}
+    >
+      <div className="aspect-video relative overflow-hidden bg-gray-100">
+        <img
+          src={video.thumbnail}
+          alt={video.name}
+          className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
+        />
+        <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
+        
+        {isSelected && (
+          <div
+            className="absolute top-2 right-2 w-6 h-6 flex items-center justify-center text-white"
+            style={{ backgroundColor: THEME.mistralOrange }}
+          >
+            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+            </svg>
+          </div>
+        )}
+        
+        <div className="absolute bottom-0 left-0 right-0 p-3">
+          <h4 className="font-semibold text-white text-sm">{video.name}</h4>
+          <p className="text-white/70 text-xs">{video.description}</p>
+        </div>
+      </div>
+    </button>
+  );
+}
+
+export default function SourceSelector({ onSourceSelected, onBack }: SourceSelectorProps) {
+  const [mounted, setMounted] = useState(false);
+  const [activeSource, setActiveSource] = useState<VideoSourceType | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedExample, setSelectedExample] = useState<string | null>(null);
+  const [showExamples, setShowExamples] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const handleWebcam = useCallback(async () => {
+    setActiveSource("webcam");
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({
+        video: {
+          width: { ideal: 1920, max: 1920 },
+          height: { ideal: 1080, max: 1080 },
+          facingMode: "user",
+        },
+      });
+      onSourceSelected({ type: "webcam", stream });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to access webcam");
+      setActiveSource(null);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [onSourceSelected]);
+
+  const handleScreenShare = useCallback(async () => {
+    setActiveSource("screen");
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const stream = await navigator.mediaDevices.getDisplayMedia({
+        video: {
+          width: { ideal: 1920 },
+          height: { ideal: 1080 },
+        },
+      });
+      
+      // Handle stream end (user stops sharing)
+      stream.getVideoTracks()[0].onended = () => {
+        // This will be handled by the parent component
+      };
+      
+      onSourceSelected({ type: "screen", stream });
+    } catch (err) {
+      if ((err as Error).name !== "AbortError") {
+        setError(err instanceof Error ? err.message : "Failed to start screen sharing");
+      }
+      setActiveSource(null);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [onSourceSelected]);
+
+  const handleFileUpload = useCallback(() => {
+    fileInputRef.current?.click();
+  }, []);
+
+  const handleFileChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      setActiveSource("upload");
+      const url = URL.createObjectURL(file);
+      onSourceSelected({ type: "upload", url, name: file.name });
+    }
+  }, [onSourceSelected]);
+
+  const handleExampleSelect = useCallback((video: ExampleVideo) => {
+    setSelectedExample(video.id);
+    setActiveSource("example");
+    onSourceSelected({ type: "example", url: video.url, name: video.name });
+  }, [onSourceSelected]);
+
+  const toggleExamples = useCallback(() => {
+    setShowExamples(prev => !prev);
+  }, []);
+
+  return (
+    <div
+      className="absolute inset-0 flex items-center justify-center p-6 overflow-y-auto"
+      style={{
+        backgroundColor: THEME.beigeLight,
+        backgroundImage: `
+          linear-gradient(${THEME.beigeDark} 1px, transparent 1px), 
+          linear-gradient(90deg, ${THEME.beigeDark} 1px, transparent 1px)
+        `,
+        backgroundSize: "40px 40px",
+        color: THEME.textBlack,
+      }}
+    >
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept="video/*"
+        onChange={handleFileChange}
+        className="hidden"
+      />
+
+      <div
+        className={`
+          relative max-w-3xl w-full backdrop-blur-sm p-10 border shadow-2xl
+          transition-all duration-700
+          ${mounted ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}
+        `}
+        style={{
+          backgroundColor: `${THEME.beigeLight}F2`,
+          borderColor: THEME.beigeDark,
+        }}
+      >
+        {/* Header Bar */}
+        <div
+          className="absolute top-0 left-0 right-0 h-1"
+          style={{ backgroundColor: THEME.mistralOrange }}
+        />
+
+        {/* Back Button */}
+        {onBack && (
+          <button
+            onClick={onBack}
+            className="absolute top-6 left-6 p-2 text-gray-400 hover:text-gray-600 transition-colors"
+          >
+            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
+            </svg>
+          </button>
+        )}
+
+        {/* Header */}
+        <div className="text-center mb-10">
+          <h2
+            className="text-3xl font-bold tracking-tight mb-3"
+            style={{ color: THEME.textBlack }}
+          >
+            Choose Video Source
+          </h2>
+          <p className="text-gray-500 text-lg">
+            Select how you want to provide video for analysis
+          </p>
+        </div>
+
+        {/* Error Message */}
+        {error && (
+          <div
+            className="mb-6 p-4 border-l-4 bg-red-50"
+            style={{ borderColor: THEME.errorRed }}
+          >
+            <div className="flex items-center gap-2">
+              <svg
+                className="w-5 h-5"
+                style={{ color: THEME.errorRed }}
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+              </svg>
+              <span className="text-sm font-medium" style={{ color: THEME.errorRed }}>
+                {error}
+              </span>
+            </div>
+          </div>
+        )}
+
+        {/* Source Options Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+          <SourceCard
+            icon={
+              <svg className="w-7 h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 10.5l4.72-4.72a.75.75 0 011.28.53v11.38a.75.75 0 01-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25h-9A2.25 2.25 0 002.25 7.5v9a2.25 2.25 0 002.25 2.25z" />
+              </svg>
+            }
+            title="Webcam"
+            description="Use your camera for real-time video analysis"
+            onClick={handleWebcam}
+            isActive={activeSource === "webcam"}
+            isLoading={isLoading && activeSource === "webcam"}
+            badge="Live"
+          />
+
+          <SourceCard
+            icon={
+              <svg className="w-7 h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25" />
+              </svg>
+            }
+            title="Screen Share"
+            description="Capture your screen, window, or browser tab"
+            onClick={handleScreenShare}
+            isActive={activeSource === "screen"}
+            isLoading={isLoading && activeSource === "screen"}
+          />
+
+          <SourceCard
+            icon={
+              <svg className="w-7 h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
+              </svg>
+            }
+            title="Upload Video"
+            description="Select a video file from your device"
+            onClick={handleFileUpload}
+            isActive={activeSource === "upload"}
+          />
+
+          <SourceCard
+            icon={
+              <svg className="w-7 h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                <path strokeLinecap="round" strokeLinejoin="round" d="M15.91 11.672a.375.375 0 010 .656l-5.603 3.113a.375.375 0 01-.557-.328V8.887c0-.286.307-.466.557-.327l5.603 3.112z" />
+              </svg>
+            }
+            title="Examples"
+            description="Try with pre-loaded sample videos"
+            onClick={toggleExamples}
+            isActive={showExamples || activeSource === "example"}
+          />
+        </div>
+
+        {/* Example Videos Section */}
+        {showExamples && (
+          <div
+            className="border-t pt-6 animate-enter"
+            style={{ borderColor: THEME.beigeDark }}
+          >
+            <h3 className="text-sm font-bold uppercase tracking-wider text-gray-500 mb-4 flex items-center gap-2">
+              <span
+                className="w-2 h-2"
+                style={{ backgroundColor: THEME.mistralOrange }}
+              />
+              Sample Videos
+            </h3>
+            <div className="grid grid-cols-3 gap-3">
+              {EXAMPLE_VIDEOS.map((video) => (
+                <ExampleVideoCard
+                  key={video.id}
+                  video={video}
+                  onClick={() => handleExampleSelect(video)}
+                  isSelected={selectedExample === video.id}
+                />
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Footer */}
+        <div
+          className="mt-8 pt-6 border-t text-center"
+          style={{ borderColor: THEME.beigeDark }}
+        >
+          <p className="text-xs text-gray-400 font-mono uppercase tracking-wider">
+            All processing happens locally in your browser
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+

src/components/WelcomeScreen.tsx

@@ -5,9 +5,11 @@ import HfIcon from "./HfIcon";
 
 interface WelcomeScreenProps {
   onStart: () => void;
+  onBack?: () => void;
+  sourceLabel?: string;
 }
 
-export default function WelcomeScreen({ onStart }: WelcomeScreenProps) {
+export default function WelcomeScreen({ onStart, onBack, sourceLabel }: WelcomeScreenProps) {
   const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
@@ -35,10 +37,25 @@ export default function WelcomeScreen({ onStart }: WelcomeScreenProps) {
             borderColor: THEME.beigeDark,
           }}
         >
+          {/* Back Button */}
+          {onBack && (
+            <button
+              onClick={onBack}
+              className="absolute top-6 left-6 p-2 text-gray-400 hover:text-gray-600 transition-colors z-10 flex items-center gap-2 group"
+            >
+              <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
+              </svg>
+              <span className="text-xs font-mono uppercase tracking-wider opacity-0 group-hover:opacity-100 transition-opacity">
+                Change Source
+              </span>
+            </button>
+          )}
+
           {/* 1. Top Right Status Indicator */}
           <div className="absolute top-6 right-6 group cursor-help z-10">
             <span className="absolute right-full mr-4 top-1/2 -translate-y-1/2 whitespace-nowrap text-xs font-mono uppercase tracking-widest text-gray-500 opacity-0 group-hover:opacity-100 transition-all duration-300 translate-x-2 group-hover:translate-x-0 pointer-events-none">
-              System Ready
+              {sourceLabel || "System Ready"}
             </span>
             <div className="relative flex h-3 w-3">
               <span

src/constants/index.ts

@@ -52,3 +52,27 @@ export const PROMPTS = {
   fallbackCaption: "Waiting for first caption...",
   processingMessage: "Starting analysis...",
 } as const;
+
+export const EXAMPLE_VIDEOS = [
+  {
+    id: "cooking",
+    name: "Cooking Demo",
+    description: "Chef preparing a dish",
+    url: "https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4",
+    thumbnail: "https://storage.googleapis.com/gtv-videos-bucket/sample/images/ForBiggerBlazes.jpg",
+  },
+  {
+    id: "nature",
+    name: "Nature Scene",
+    description: "Beautiful landscape",
+    url: "https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4",
+    thumbnail: "https://storage.googleapis.com/gtv-videos-bucket/sample/images/ForBiggerEscapes.jpg",
+  },
+  {
+    id: "city",
+    name: "City Life",
+    description: "Urban environment",
+    url: "https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4",
+    thumbnail: "https://storage.googleapis.com/gtv-videos-bucket/sample/images/ForBiggerJoyrides.jpg",
+  },
+] as const;

src/types/index.ts

@@ -1,9 +1,27 @@
 export type AppState =
+  | "source-selection"
   | "requesting-permission"
   | "welcome"
   | "loading"
   | "captioning";
 
+export type VideoSourceType = "webcam" | "upload" | "screen" | "example";
+
+export interface VideoSource {
+  type: VideoSourceType;
+  stream?: MediaStream;
+  url?: string;
+  name?: string;
+}
+
+export interface ExampleVideo {
+  id: string;
+  name: string;
+  description: string;
+  url: string;
+  thumbnail: string;
+}
+
 export interface WebcamPermissionError {
   type: "general" | "https" | "not-supported" | "permission";
   message: string;