From 944049fcd51bc344a901e144f0a5dda02daf180a Mon Sep 17 00:00:00 2001
From: sedanah-m <mashhour@google.com>
Date: Wed, 2 Sep 2026 09:59:57 -0700
Subject: [PATCH 1/9] feat: quickstart video-analysis sample feature

---
 .../src/features/video-anaylsis/index.tsx     | 237 ++++++++++++++++++
 .../src/features/video-anaylsis/service.ts    |  87 +++++++
 2 files changed, 324 insertions(+)
 create mode 100644 ai/ai-samples/src/features/video-anaylsis/index.tsx
 create mode 100644 ai/ai-samples/src/features/video-anaylsis/service.ts

diff --git a/ai/ai-samples/src/features/video-anaylsis/index.tsx b/ai/ai-samples/src/features/video-anaylsis/index.tsx
new file mode 100644
index 000000000..360d04c67
--- /dev/null
+++ b/ai/ai-samples/src/features/video-anaylsis/index.tsx
@@ -0,0 +1,237 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { analyzeVideo, streamVideoAnalysis } from './service';
+
+const SAMPLE_PROMPTS = [
+  'Describe what is happening in this video in detail.'
+];
+
+export default function VideoAnalysisView() {
+  const [prompt, setPrompt] = useState<string>(SAMPLE_PROMPTS[0]);
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [useStreaming, setUseStreaming] = useState<boolean>(true);
+  const [response, setResponse] = useState<string>('');
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (!selectedFile) {
+      setPreviewUrl(null);
+      return;
+    }
+
+    const objectUrl = URL.createObjectURL(selectedFile);
+    setPreviewUrl(objectUrl);
+
+    return () => {
+      URL.revokeObjectURL(objectUrl);
+    };
+  }, [selectedFile]);
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0] || null;
+    setSelectedFile(file);
+    setError(null);
+  };
+
+  const handleAnalyze = async () => {
+    const cleanedPrompt = prompt.trim();
+    if (!selectedFile || !cleanedPrompt) return;
+
+    setLoading(true);
+    setError(null);
+    setResponse('');
+
+    try {
+      if (useStreaming) {
+        await streamVideoAnalysis(cleanedPrompt, selectedFile, (chunk) => {
+          setResponse((prev) => prev + chunk);
+        });
+      } else {
+        const resultText = await analyzeVideo(cleanedPrompt, selectedFile);
+        setResponse(resultText);
+      }
+    } catch (err: unknown) {
+      const message =
+        err instanceof Error
+          ? err.message
+          : 'An unexpected error occurred during video analysis.';
+      setError(message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleClear = () => {
+    setSelectedFile(null);
+    setResponse('');
+    setError(null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  return (
+    <div style={{ padding: '20px', maxWidth: '700px', margin: '0 auto', fontFamily: 'system-ui, sans-serif' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <h2>Video Analysis & Understanding</h2>
+        {(selectedFile || response) && (
+          <button
+            onClick={handleClear}
+            disabled={loading}
+            style={{
+              padding: '6px 12px',
+              backgroundColor: '#f1f3f4',
+              color: '#3c4043',
+              border: '1px solid #dadce0',
+              borderRadius: '4px',
+              cursor: loading ? 'not-allowed' : 'pointer',
+              fontSize: '0.85rem',
+            }}
+          >
+            Clear All
+          </button>
+        )}
+      </div>
+
+      <p style={{ color: '#5f6368', marginBottom: '20px' }}>
+        Upload a video file alongside a prompt to analyze video frames, extract timestamps, describe actions, or transcribe content using Gemini.
+      </p>
+
+      {/* Video Upload Section */}
+      <div style={{ marginBottom: '16px' }}>
+        <label style={{ display: 'block', marginBottom: '6px', fontWeight: 'bold' }}>
+          Select Video File:
+        </label>
+        <input
+          type="file"
+          ref={fileInputRef}
+          accept="video/*,video/mp4,video/webm,video/quicktime,video/x-matroska"
+          onChange={handleFileChange}
+          disabled={loading}
+          style={{ width: '100%', padding: '8px', boxSizing: 'border-box' }}
+        />
+        <small style={{ display: 'block', color: '#80868b', marginTop: '4px' }}>
+          Supported formats: MP4, WebM, MOV, etc. (Inline payloads recommended under 20MB).
+        </small>
+      </div>
+
+      {/* Video Preview */}
+      {previewUrl && (
+        <div style={{ marginBottom: '16px', borderRadius: '8px', overflow: 'hidden', border: '1px solid #dadce0', backgroundColor: '#000' }}>
+          <video
+            src={previewUrl}
+            controls
+            style={{ width: '100%', maxHeight: '320px', display: 'block' }}
+          />
+          {selectedFile && (
+            <div style={{ padding: '8px 12px', backgroundColor: '#f8f9fa', fontSize: '0.85rem', color: '#5f6368', borderTop: '1px solid #dadce0' }}>
+              <strong>Selected:</strong> {selectedFile.name} ({(selectedFile.size / (1024 * 1024)).toFixed(2)} MB)
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Prompt Suggestions */}
+      <div style={{ marginBottom: '12px' }}>
+        <label style={{ display: 'block', marginBottom: '6px', fontSize: '0.85rem', color: '#5f6368', fontWeight: 600 }}>
+          Suggested Prompts:
+        </label>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px' }}>
+          {SAMPLE_PROMPTS.map((sample, idx) => (
+            <button
+              key={idx}
+              type="button"
+              onClick={() => setPrompt(sample)}
+              disabled={loading}
+              style={{
+                padding: '4px 10px',
+                fontSize: '0.8rem',
+                backgroundColor: prompt === sample ? '#e8f0fe' : '#f8f9fa',
+                color: prompt === sample ? '#1a73e8' : '#3c4043',
+                border: `1px solid ${prompt === sample ? '#aecbfa' : '#dadce0'}`,
+                borderRadius: '16px',
+                cursor: loading ? 'not-allowed' : 'pointer',
+              }}
+            >
+              {sample.length > 40 ? `${sample.slice(0, 40)}...` : sample}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Prompt Input */}
+      <div style={{ marginBottom: '16px' }}>
+        <label style={{ display: 'block', marginBottom: '6px', fontWeight: 'bold' }}>
+          Prompt:
+        </label>
+        <textarea
+          value={prompt}
+          onChange={(e) => setPrompt(e.target.value)}
+          placeholder="Ask a question about the video or describe what you'd like analyzed..."
+          rows={3}
+          disabled={loading}
+          style={{ width: '100%', padding: '10px', boxSizing: 'border-box', fontFamily: 'inherit', borderRadius: '4px', border: '1px solid #dadce0' }}
+        />
+      </div>
+
+      {/* Controls */}
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
+        <label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer', fontSize: '0.95rem' }}>
+          <input
+            type="checkbox"
+            checked={useStreaming}
+            onChange={(e) => setUseStreaming(e.target.checked)}
+            disabled={loading}
+          />
+          Stream response
+        </label>
+
+        <button
+          onClick={handleAnalyze}
+          disabled={loading || !selectedFile || !prompt.trim()}
+          style={{
+            padding: '10px 24px',
+            backgroundColor: loading || !selectedFile || !prompt.trim() ? '#ccc' : '#1a73e8',
+            color: '#fff',
+            border: 'none',
+            borderRadius: '4px',
+            cursor: loading || !selectedFile || !prompt.trim() ? 'not-allowed' : 'pointer',
+            fontSize: '1rem',
+            fontWeight: 500,
+          }}
+        >
+          {loading ? 'Analyzing Video...' : 'Analyze Video'}
+        </button>
+      </div>
+
+      {/* Error Message */}
+      {error && (
+        <div style={{ color: '#c5221f', backgroundColor: '#fce8e6', border: '1px solid #fad2cf', padding: '12px', marginTop: '16px', borderRadius: '4px' }}>
+          <strong>Error:</strong> {error}
+        </div>
+      )}
+
+      {/* Response Display */}
+      {response && (
+        <div style={{ marginTop: '20px', borderTop: '1px solid #eee', paddingTop: '16px' }}>
+          <h3 style={{ margin: '0 0 10px 0', color: '#202124' }}>Analysis Result:</h3>
+          <div style={{
+            padding: '16px',
+            backgroundColor: '#f8f9fa',
+            border: '1px solid #dadce0',
+            borderRadius: '8px',
+            whiteSpace: 'pre-wrap',
+            lineHeight: '1.6',
+            color: '#202124',
+          }}>
+            {response}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
diff --git a/ai/ai-samples/src/features/video-anaylsis/service.ts b/ai/ai-samples/src/features/video-anaylsis/service.ts
new file mode 100644
index 000000000..4987133f1
--- /dev/null
+++ b/ai/ai-samples/src/features/video-anaylsis/service.ts
@@ -0,0 +1,87 @@
+import { getAiModel } from '../../services/firebaseAIService';
+import { Part } from 'firebase/ai';
+
+/**
+ * Converts a standard browser File object (Video) into a Firebase AI SDK Part.
+ * Uses the native browser FileReader API to extract the Base64 string.
+ * @param file The DOM File object from an <input type="file">
+ * @returns A Promise that resolves to an InlineData Part object
+ */
+export async function fileToGenerativePart(file: File): Promise<Part> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+
+    reader.onloadend = () => {
+      const result = reader.result;
+      if (typeof result === 'string') {
+        const splitResult = result.split(',');
+        if (splitResult.length > 1) {
+          resolve({
+            inlineData: {
+              data: splitResult[1],
+              mimeType: file.type || 'video/mp4',
+            },
+          });
+          return;
+        }
+      }
+      reject(new Error('Failed to parse video file data as Base64.'));
+    };
+
+    reader.onerror = () => reject(reader.error || new Error('Error reading video file.'));
+    reader.readAsDataURL(file);
+  });
+}
+
+// Note: The Gemini API restricts the total size of inline data payloads. 
+// To process larger files without hitting HTTP 413 errors (PayLoad Too Large),
+// See the official Firebase AI documentation for current file size limits and workarounds:
+// https://firebase.google.com/docs/ai-logic/solutions/cloud-storage
+
+/**
+ * Sends a video analysis request (prompt + video file) to the Gemini model.
+ * @param prompt The string instruction sent to the model (e.g. "Describe what happens in this video").
+ * @param videoFile The DOM File object containing the video.
+ * @returns The text string response generated by the model.
+ */
+export async function analyzeVideo(prompt: string, videoFile: File): Promise<string> {
+  try {
+    const videoPart = await fileToGenerativePart(videoFile);
+    const model = getAiModel('gemini-3.5-flash');
+    const result = await model.generateContent([prompt, videoPart]);
+    return result.response.text();
+  } catch (error: unknown) {
+    throw error instanceof Error
+      ? error
+      : new Error('An unknown error occurred during video analysis.');
+  }
+}
+
+/**
+ * Streams the video analysis response from the Gemini model in real-time chunks.
+ * @param prompt The string instruction sent to the model.
+ * @param videoFile The DOM File object containing the video.
+ * @param onChunk Callback fired whenever a new text chunk is received.
+ */
+export async function streamVideoAnalysis(
+  prompt: string,
+  videoFile: File,
+  onChunk: (chunk: string) => void
+): Promise<void> {
+  try {
+    const videoPart = await fileToGenerativePart(videoFile);
+    const model = getAiModel('gemini-3.7-flash');
+    const result = await model.generateContentStream([prompt, videoPart]);
+
+    for await (const chunk of result.stream) {
+      const chunkText = chunk.text();
+      if (chunkText) {
+        onChunk(chunkText);
+      }
+    }
+  } catch (error: unknown) {
+    throw error instanceof Error
+      ? error
+      : new Error('An unknown error occurred during video streaming.');
+  }
+}
\ No newline at end of file

From beb75276d84f815a90068e1aa37b8e4654c23833 Mon Sep 17 00:00:00 2001
From: sedanah-m <mashhour@google.com>
Date: Wed, 2 Sep 2026 10:04:16 -0700
Subject: [PATCH 2/9] fix: clean up UI

---
 .../src/features/video-anaylsis/index.tsx     | 192 ++++--------------
 1 file changed, 39 insertions(+), 153 deletions(-)

diff --git a/ai/ai-samples/src/features/video-anaylsis/index.tsx b/ai/ai-samples/src/features/video-anaylsis/index.tsx
index 360d04c67..d0fd42ac6 100644
--- a/ai/ai-samples/src/features/video-anaylsis/index.tsx
+++ b/ai/ai-samples/src/features/video-anaylsis/index.tsx
@@ -1,44 +1,28 @@
-import React, { useState, useRef, useEffect } from 'react';
+import { useState, useRef } from 'react';
 import { analyzeVideo, streamVideoAnalysis } from './service';
 
-const SAMPLE_PROMPTS = [
-  'Describe what is happening in this video in detail.'
-];
-
 export default function VideoAnalysisView() {
-  const [prompt, setPrompt] = useState<string>(SAMPLE_PROMPTS[0]);
-  const [selectedFile, setSelectedFile] = useState<File | null>(null);
-  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
-  const [useStreaming, setUseStreaming] = useState<boolean>(true);
-  const [response, setResponse] = useState<string>('');
-  const [loading, setLoading] = useState<boolean>(false);
+  const [prompt, setPrompt] = useState('Describe what is happening in this video in detail.');
+  const [useStreaming, setUseStreaming] = useState(true);
+  const [response, setResponse] = useState('');
+  const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
   const fileInputRef = useRef<HTMLInputElement>(null);
 
-  useEffect(() => {
-    if (!selectedFile) {
-      setPreviewUrl(null);
+  const handleAnalyze = async () => {
+    const fileArray = Array.from(fileInputRef.current?.files ?? []);
+
+    if (fileArray.length === 0) {
+      setError('Please select a video file.');
       return;
     }
 
-    const objectUrl = URL.createObjectURL(selectedFile);
-    setPreviewUrl(objectUrl);
-
-    return () => {
-      URL.revokeObjectURL(objectUrl);
-    };
-  }, [selectedFile]);
-
-  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0] || null;
-    setSelectedFile(file);
-    setError(null);
-  };
-
-  const handleAnalyze = async () => {
     const cleanedPrompt = prompt.trim();
-    if (!selectedFile || !cleanedPrompt) return;
+    if (!cleanedPrompt) {
+      setError('Please enter a prompt.');
+      return;
+    }
 
     setLoading(true);
     setError(null);
@@ -46,11 +30,11 @@ export default function VideoAnalysisView() {
 
     try {
       if (useStreaming) {
-        await streamVideoAnalysis(cleanedPrompt, selectedFile, (chunk) => {
+        await streamVideoAnalysis(cleanedPrompt, fileArray[0], (chunk) => {
           setResponse((prev) => prev + chunk);
         });
       } else {
-        const resultText = await analyzeVideo(cleanedPrompt, selectedFile);
+        const resultText = await analyzeVideo(cleanedPrompt, fileArray[0]);
         setResponse(resultText);
       }
     } catch (err: unknown) {
@@ -64,122 +48,39 @@ export default function VideoAnalysisView() {
     }
   };
 
-  const handleClear = () => {
-    setSelectedFile(null);
-    setResponse('');
-    setError(null);
-    if (fileInputRef.current) {
-      fileInputRef.current.value = '';
-    }
-  };
-
   return (
-    <div style={{ padding: '20px', maxWidth: '700px', margin: '0 auto', fontFamily: 'system-ui, sans-serif' }}>
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-        <h2>Video Analysis & Understanding</h2>
-        {(selectedFile || response) && (
-          <button
-            onClick={handleClear}
-            disabled={loading}
-            style={{
-              padding: '6px 12px',
-              backgroundColor: '#f1f3f4',
-              color: '#3c4043',
-              border: '1px solid #dadce0',
-              borderRadius: '4px',
-              cursor: loading ? 'not-allowed' : 'pointer',
-              fontSize: '0.85rem',
-            }}
-          >
-            Clear All
-          </button>
-        )}
-      </div>
-
-      <p style={{ color: '#5f6368', marginBottom: '20px' }}>
-        Upload a video file alongside a prompt to analyze video frames, extract timestamps, describe actions, or transcribe content using Gemini.
+    <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
+      <h2>Video Analysis</h2>
+      <p style={{ color: '#666', marginBottom: '20px' }}>
+        Upload a video file alongside a text prompt to analyze its content.
       </p>
 
-      {/* Video Upload Section */}
-      <div style={{ marginBottom: '16px' }}>
-        <label style={{ display: 'block', marginBottom: '6px', fontWeight: 'bold' }}>
-          Select Video File:
+      <div style={{ marginBottom: '15px' }}>
+        <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>
+          Upload Video:
         </label>
         <input
           type="file"
           ref={fileInputRef}
-          accept="video/*,video/mp4,video/webm,video/quicktime,video/x-matroska"
-          onChange={handleFileChange}
-          disabled={loading}
-          style={{ width: '100%', padding: '8px', boxSizing: 'border-box' }}
+          accept="video/*"
+          style={{ width: '100%', padding: '8px' }}
         />
-        <small style={{ display: 'block', color: '#80868b', marginTop: '4px' }}>
-          Supported formats: MP4, WebM, MOV, etc. (Inline payloads recommended under 20MB).
-        </small>
       </div>
 
-      {/* Video Preview */}
-      {previewUrl && (
-        <div style={{ marginBottom: '16px', borderRadius: '8px', overflow: 'hidden', border: '1px solid #dadce0', backgroundColor: '#000' }}>
-          <video
-            src={previewUrl}
-            controls
-            style={{ width: '100%', maxHeight: '320px', display: 'block' }}
-          />
-          {selectedFile && (
-            <div style={{ padding: '8px 12px', backgroundColor: '#f8f9fa', fontSize: '0.85rem', color: '#5f6368', borderTop: '1px solid #dadce0' }}>
-              <strong>Selected:</strong> {selectedFile.name} ({(selectedFile.size / (1024 * 1024)).toFixed(2)} MB)
-            </div>
-          )}
-        </div>
-      )}
-
-      {/* Prompt Suggestions */}
-      <div style={{ marginBottom: '12px' }}>
-        <label style={{ display: 'block', marginBottom: '6px', fontSize: '0.85rem', color: '#5f6368', fontWeight: 600 }}>
-          Suggested Prompts:
-        </label>
-        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px' }}>
-          {SAMPLE_PROMPTS.map((sample, idx) => (
-            <button
-              key={idx}
-              type="button"
-              onClick={() => setPrompt(sample)}
-              disabled={loading}
-              style={{
-                padding: '4px 10px',
-                fontSize: '0.8rem',
-                backgroundColor: prompt === sample ? '#e8f0fe' : '#f8f9fa',
-                color: prompt === sample ? '#1a73e8' : '#3c4043',
-                border: `1px solid ${prompt === sample ? '#aecbfa' : '#dadce0'}`,
-                borderRadius: '16px',
-                cursor: loading ? 'not-allowed' : 'pointer',
-              }}
-            >
-              {sample.length > 40 ? `${sample.slice(0, 40)}...` : sample}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* Prompt Input */}
-      <div style={{ marginBottom: '16px' }}>
-        <label style={{ display: 'block', marginBottom: '6px', fontWeight: 'bold' }}>
+      <div style={{ marginBottom: '15px' }}>
+        <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>
           Prompt:
         </label>
         <textarea
           value={prompt}
           onChange={(e) => setPrompt(e.target.value)}
-          placeholder="Ask a question about the video or describe what you'd like analyzed..."
-          rows={3}
-          disabled={loading}
-          style={{ width: '100%', padding: '10px', boxSizing: 'border-box', fontFamily: 'inherit', borderRadius: '4px', border: '1px solid #dadce0' }}
+          rows={4}
+          style={{ width: '100%', padding: '8px', fontFamily: 'inherit' }}
         />
       </div>
 
-      {/* Controls */}
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
-        <label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer', fontSize: '0.95rem' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '15px' }}>
+        <label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
           <input
             type="checkbox"
             checked={useStreaming}
@@ -191,47 +92,32 @@ export default function VideoAnalysisView() {
 
         <button
           onClick={handleAnalyze}
-          disabled={loading || !selectedFile || !prompt.trim()}
+          disabled={loading}
           style={{
-            padding: '10px 24px',
-            backgroundColor: loading || !selectedFile || !prompt.trim() ? '#ccc' : '#1a73e8',
+            padding: '10px 20px',
+            cursor: loading ? 'not-allowed' : 'pointer',
+            backgroundColor: loading ? '#ccc' : '#007BFF',
             color: '#fff',
             border: 'none',
             borderRadius: '4px',
-            cursor: loading || !selectedFile || !prompt.trim() ? 'not-allowed' : 'pointer',
-            fontSize: '1rem',
-            fontWeight: 500,
           }}
         >
           {loading ? 'Analyzing Video...' : 'Analyze Video'}
         </button>
       </div>
 
-      {/* Error Message */}
       {error && (
-        <div style={{ color: '#c5221f', backgroundColor: '#fce8e6', border: '1px solid #fad2cf', padding: '12px', marginTop: '16px', borderRadius: '4px' }}>
+        <div style={{ color: '#D8000C', backgroundColor: '#FFD2D2', padding: '10px', marginTop: '15px', borderRadius: '4px' }}>
           <strong>Error:</strong> {error}
         </div>
       )}
 
-      {/* Response Display */}
       {response && (
-        <div style={{ marginTop: '20px', borderTop: '1px solid #eee', paddingTop: '16px' }}>
-          <h3 style={{ margin: '0 0 10px 0', color: '#202124' }}>Analysis Result:</h3>
-          <div style={{
-            padding: '16px',
-            backgroundColor: '#f8f9fa',
-            border: '1px solid #dadce0',
-            borderRadius: '8px',
-            whiteSpace: 'pre-wrap',
-            lineHeight: '1.6',
-            color: '#202124',
-          }}>
-            {response}
-          </div>
+        <div style={{ marginTop: '20px', borderTop: '1px solid #eee', paddingTop: '15px' }}>
+          <h3>Response:</h3>
+          <p style={{ whiteSpace: 'pre-wrap', lineHeight: '1.5' }}>{response}</p>
         </div>
       )}
     </div>
   );
 }
-

From f6b1103fa1190cf8514d8a1414f0f7c952889826 Mon Sep 17 00:00:00 2001
From: sedanah-m <mashhour@google.com>
Date: Wed, 2 Sep 2026 10:05:18 -0700
Subject: [PATCH 3/9] Update
 ai/ai-samples/src/features/video-anaylsis/service.ts

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
---
 ai/ai-samples/src/features/video-anaylsis/service.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ai/ai-samples/src/features/video-anaylsis/service.ts b/ai/ai-samples/src/features/video-anaylsis/service.ts
index 4987133f1..ab4d35f30 100644
--- a/ai/ai-samples/src/features/video-anaylsis/service.ts
+++ b/ai/ai-samples/src/features/video-anaylsis/service.ts
@@ -11,7 +11,7 @@ export async function fileToGenerativePart(file: File): Promise<Part> {
   return new Promise((resolve, reject) => {
     const reader = new FileReader();
 
-    reader.onloadend = () => {
+    reader.onload = () => {
       const result = reader.result;
       if (typeof result === 'string') {
         const splitResult = result.split(',');

From d7b9921d0b94737e3ab48a3271ba4290fb274735 Mon Sep 17 00:00:00 2001
From: sedanah-m <mashhour@google.com>
Date: Wed, 2 Sep 2026 10:05:49 -0700
Subject: [PATCH 4/9] fix: typo

---
 ai/ai-samples/src/features/video-anaylsis/service.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ai/ai-samples/src/features/video-anaylsis/service.ts b/ai/ai-samples/src/features/video-anaylsis/service.ts
index 4987133f1..8f68217d6 100644
--- a/ai/ai-samples/src/features/video-anaylsis/service.ts
+++ b/ai/ai-samples/src/features/video-anaylsis/service.ts
@@ -47,7 +47,7 @@ export async function fileToGenerativePart(file: File): Promise<Part> {
 export async function analyzeVideo(prompt: string, videoFile: File): Promise<string> {
   try {
     const videoPart = await fileToGenerativePart(videoFile);
-    const model = getAiModel('gemini-3.5-flash');
+    const model = getAiModel('gemini-3.7-flash');
     const result = await model.generateContent([prompt, videoPart]);
     return result.response.text();
   } catch (error: unknown) {

From d5ed1cba588b074e43bba9e06568c7d5655e6509 Mon Sep 17 00:00:00 2001
From: sedanah-m <mashhour@google.com>
Date: Wed, 2 Sep 2026 13:03:18 -0700
Subject: [PATCH 5/9] fix: minor readibility revision

---
 .../src/features/video-anaylsis/service.ts    | 98 ++++++++++---------
 1 file changed, 50 insertions(+), 48 deletions(-)

diff --git a/ai/ai-samples/src/features/video-anaylsis/service.ts b/ai/ai-samples/src/features/video-anaylsis/service.ts
index 4d6363564..00411e635 100644
--- a/ai/ai-samples/src/features/video-anaylsis/service.ts
+++ b/ai/ai-samples/src/features/video-anaylsis/service.ts
@@ -8,29 +8,31 @@ import { Part } from 'firebase/ai';
  * @returns A Promise that resolves to an InlineData Part object
  */
 export async function fileToGenerativePart(file: File): Promise<Part> {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
 
-    reader.onload = () => {
-      const result = reader.result;
-      if (typeof result === 'string') {
-        const splitResult = result.split(',');
-        if (splitResult.length > 1) {
-          resolve({
-            inlineData: {
-              data: splitResult[1],
-              mimeType: file.type || 'video/mp4',
-            },
-          });
-          return;
-        }
-      }
-      reject(new Error('Failed to parse video file data as Base64.'));
-    };
+        reader.onload = () => {
+            const result = reader.result;
+
+            if (typeof result !== 'string') {
+                return reject(new Error('Failed to parse video file data as Base64.'));
+            }
+            const splitResult = result.split(',');
+            const base64Data = splitResult[1];
+            if (!base64Data) {
+                return reject(new Error('Failed to extract Base64 data from file.'));
+            }
+            resolve({
+                inlineData: {
+                    data: base64Data,
+                    mimeType: file.type || 'video/mp4',
+                },
+            });
+        };
 
-    reader.onerror = () => reject(reader.error || new Error('Error reading video file.'));
-    reader.readAsDataURL(file);
-  });
+        reader.onerror = () => reject(reader.error || new Error('Error reading video file.'));
+        reader.readAsDataURL(file);
+    });
 }
 
 // Note: The Gemini API restricts the total size of inline data payloads. 
@@ -45,16 +47,16 @@ export async function fileToGenerativePart(file: File): Promise<Part> {
  * @returns The text string response generated by the model.
  */
 export async function analyzeVideo(prompt: string, videoFile: File): Promise<string> {
-  try {
-    const videoPart = await fileToGenerativePart(videoFile);
-    const model = getAiModel('gemini-3.7-flash');
-    const result = await model.generateContent([prompt, videoPart]);
-    return result.response.text();
-  } catch (error: unknown) {
-    throw error instanceof Error
-      ? error
-      : new Error('An unknown error occurred during video analysis.');
-  }
+    try {
+        const videoPart = await fileToGenerativePart(videoFile);
+        const model = getAiModel('gemini-3.7-flash');
+        const result = await model.generateContent([prompt, videoPart]);
+        return result.response.text();
+    } catch (error: unknown) {
+        throw error instanceof Error
+            ? error
+            : new Error('An unknown error occurred during video analysis.');
+    }
 }
 
 /**
@@ -64,24 +66,24 @@ export async function analyzeVideo(prompt: string, videoFile: File): Promise<str
  * @param onChunk Callback fired whenever a new text chunk is received.
  */
 export async function streamVideoAnalysis(
-  prompt: string,
-  videoFile: File,
-  onChunk: (chunk: string) => void
+    prompt: string,
+    videoFile: File,
+    onChunk: (chunk: string) => void
 ): Promise<void> {
-  try {
-    const videoPart = await fileToGenerativePart(videoFile);
-    const model = getAiModel('gemini-3.7-flash');
-    const result = await model.generateContentStream([prompt, videoPart]);
+    try {
+        const videoPart = await fileToGenerativePart(videoFile);
+        const model = getAiModel('gemini-3.7-flash');
+        const result = await model.generateContentStream([prompt, videoPart]);
 
-    for await (const chunk of result.stream) {
-      const chunkText = chunk.text();
-      if (chunkText) {
-        onChunk(chunkText);
-      }
+        for await (const chunk of result.stream) {
+            const chunkText = chunk.text();
+            if (chunkText) {
+                onChunk(chunkText);
+            }
+        }
+    } catch (error: unknown) {
+        throw error instanceof Error
+            ? error
+            : new Error('An unknown error occurred during video streaming.');
     }
-  } catch (error: unknown) {
-    throw error instanceof Error
-      ? error
-      : new Error('An unknown error occurred during video streaming.');
-  }
 }
\ No newline at end of file

From afd3ab227cfc7855684fa4ea4b1c0ff80e023455 Mon Sep 17 00:00:00 2001
From: sedanah-m <mashhour@google.com>
Date: Thu, 3 Sep 2026 11:28:13 -0700
Subject: [PATCH 6/9] fix: - registered /video-analysis route in App.tsx and
 index.tsx - add dev:video npm script for isolated feature development -
 document Video Analysis in README.md

---
 ai/ai-samples/README.md     | 37 ++++++++++++++++++++++---------------
 ai/ai-samples/src/App.tsx   |  3 +--
 ai/ai-samples/src/index.tsx |  9 +++++++--
 3 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/ai/ai-samples/README.md b/ai/ai-samples/README.md
index 4c8de7b80..c40dafe33 100644
--- a/ai/ai-samples/README.md
+++ b/ai/ai-samples/README.md
@@ -12,7 +12,9 @@ This repository demonstrates the following capabilities:
 * Multimodal
 * Structured Output
 * Function Calling
+* Automatic Function Calling
 * Image Generation
+* Video Analysis
 
 ## Setup & Configuration
 
@@ -21,6 +23,7 @@ To connect this sample app to your Firebase project, register a new Web App in y
 1. Navigate to this directory and install dependencies:
    ```bash
    npm install
+   ```
 
 2. Add your Firebase config
 
@@ -31,34 +34,38 @@ Copy the example config file and fill in your project values. Open src/config/fi
 3. Running the samples
 
 For a full app experience to browse all features:
-    npm run dev
+```bash
+npm run dev
+```
 
-To run indivual features in isolated mode, run the single feature directly without the app shell using one of these scripts:
+To run individual features in isolated mode, run the single feature directly without the app shell using one of these scripts:
 
-npm run dev:text #Text Generation
-npm run dev:chat #Chat
-npm run dev:multimodal #Multimodal
-npm run dev:structured #Structured Output
-npm run dev:function #Function Calling
-npm run dev:image #Image Generation
+```bash
+npm run dev:text          # Text Generation
+npm run dev:chat          # Chat
+npm run dev:multimodal    # Multimodal
+npm run dev:structured    # Structured Output
+npm run dev:function      # Function Calling
+npm run dev:auto-function # Automatic Function Calling
+npm run dev:image         # Image Generation
+npm run dev:video         # Video Analysis
+```
 
-After running any of the above commands, open your browser to https://localhost:*** (provided in the console)
+After running any of the above commands, open your browser to http://localhost:*** (provided in the console)
 
 ## Copy service.ts for platform agnostic use
 
 All AI logic is decoupled from the React UI. If you want to use these features in your own project, navigate to any src/features/*/service.ts file. These files are framework-agnostic and can be safely copy-pasted into any JavaScript or TypeScript web project.
 
-
-
 ## App Check 
 
-App check protects your API Key from unauthorized use. It is not required to run the samples locally but highly recommended before deployig to production. 
+App check protects your API Key from unauthorized use. It is not required to run the samples locally but highly recommended before deploying to production. 
 
 Debug token: 
-firebaseAIService.ts includes App Check intilization for local development. To enable it:
+firebaseAIService.ts includes App Check initialization for local development. To enable it:
 
 1. Set VITE_APPCHECK_DEBUG_TOKEN=true in your .env.local file
-2. On the first run, a deug token will be printed in the browser console.
+2. On the first run, a debug token will be printed in the browser console.
 3. Copy that token and register it in the Firebase Console under
 App Check -> Apps -> your apps -> Debug Token
 
@@ -69,4 +76,4 @@ For production, use reCAPTCHA v3 as the App Check provider:
 2. Choose reCaptcha v3 and follow the setup steps
 3. Add your reCaptcha site key to firebase-config.ts 
 
-See the [App Check Docs](https://firebase.google.com/docs/app-check/web/recaptcha-provider) for full instruction.
\ No newline at end of file
+See the [App Check Docs](https://firebase.google.com/docs/app-check/web/recaptcha-provider) for full instructions.
\ No newline at end of file
diff --git a/ai/ai-samples/src/App.tsx b/ai/ai-samples/src/App.tsx
index a3b802829..53410b549 100644
--- a/ai/ai-samples/src/App.tsx
+++ b/ai/ai-samples/src/App.tsx
@@ -8,13 +8,12 @@ const NAV_ITEMS = [
   { path: '/function-calling', label: 'Function Calling' },
   { path: '/automatic-function-calling', label: 'Automatic Function Calling' },
   { path: '/image-generation', label: 'Image Generation' },
-
+  { path: '/video-analysis', label: 'Video Analysis' },
 ];
 
 export default function App() {
   const { pathname } = useLocation();
 
-
   return (
     <div className="app-shell">
       <nav className="sidebar">
diff --git a/ai/ai-samples/src/index.tsx b/ai/ai-samples/src/index.tsx
index 55e79a805..4b9dd0679 100644
--- a/ai/ai-samples/src/index.tsx
+++ b/ai/ai-samples/src/index.tsx
@@ -9,7 +9,7 @@ import StructuredOutput from './features/structured-output';
 import FunctionCalling from './features/function-calling';
 import ImageGeneration from './features/image-generation';
 import AutomaticFunctionCalling from './features/automatic-function-calling';
-
+import VideoAnalysis from './features/video-anaylsis';
 
 const router = createBrowserRouter([
   {
@@ -24,9 +24,10 @@ const router = createBrowserRouter([
       { path: 'function-calling', element: <FunctionCalling /> },
       { path: 'automatic-function-calling', element: <AutomaticFunctionCalling /> },
       { path: 'image-generation', element: <ImageGeneration /> },
-      
+      { path: 'video-analysis', element: <VideoAnalysis /> },
     ],
   },
+
 ]);
 
 const isolatedFeature = import.meta.env.VITE_ISOLATED_FEATURE;
@@ -46,6 +47,10 @@ const renderContent = () => {
         return <FunctionCalling />;
       case 'image-generation':
         return <ImageGeneration />;
+      case 'automatic-function-calling':
+        return <AutomaticFunctionCalling />;
+      case 'video-anaylsis':
+        return <VideoAnalysis />;
       default:
         return <RouterProvider router={router} />;
     }

From c0ef5e5269d5cea72e27b699a621e97723388bd0 Mon Sep 17 00:00:00 2001
From: sedanah-m <mashhour@google.com>
Date: Thu, 3 Sep 2026 11:29:49 -0700
Subject: [PATCH 7/9] fix typo

---
 .../src/features/video-analysis/index.tsx     | 123 ++++++++++++++++++
 .../src/features/video-analysis/service.ts    |  89 +++++++++++++
 ai/ai-samples/src/index.tsx                   |   2 +-
 3 files changed, 213 insertions(+), 1 deletion(-)
 create mode 100644 ai/ai-samples/src/features/video-analysis/index.tsx
 create mode 100644 ai/ai-samples/src/features/video-analysis/service.ts

diff --git a/ai/ai-samples/src/features/video-analysis/index.tsx b/ai/ai-samples/src/features/video-analysis/index.tsx
new file mode 100644
index 000000000..d0fd42ac6
--- /dev/null
+++ b/ai/ai-samples/src/features/video-analysis/index.tsx
@@ -0,0 +1,123 @@
+import { useState, useRef } from 'react';
+import { analyzeVideo, streamVideoAnalysis } from './service';
+
+export default function VideoAnalysisView() {
+  const [prompt, setPrompt] = useState('Describe what is happening in this video in detail.');
+  const [useStreaming, setUseStreaming] = useState(true);
+  const [response, setResponse] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleAnalyze = async () => {
+    const fileArray = Array.from(fileInputRef.current?.files ?? []);
+
+    if (fileArray.length === 0) {
+      setError('Please select a video file.');
+      return;
+    }
+
+    const cleanedPrompt = prompt.trim();
+    if (!cleanedPrompt) {
+      setError('Please enter a prompt.');
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+    setResponse('');
+
+    try {
+      if (useStreaming) {
+        await streamVideoAnalysis(cleanedPrompt, fileArray[0], (chunk) => {
+          setResponse((prev) => prev + chunk);
+        });
+      } else {
+        const resultText = await analyzeVideo(cleanedPrompt, fileArray[0]);
+        setResponse(resultText);
+      }
+    } catch (err: unknown) {
+      const message =
+        err instanceof Error
+          ? err.message
+          : 'An unexpected error occurred during video analysis.';
+      setError(message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
+      <h2>Video Analysis</h2>
+      <p style={{ color: '#666', marginBottom: '20px' }}>
+        Upload a video file alongside a text prompt to analyze its content.
+      </p>
+
+      <div style={{ marginBottom: '15px' }}>
+        <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>
+          Upload Video:
+        </label>
+        <input
+          type="file"
+          ref={fileInputRef}
+          accept="video/*"
+          style={{ width: '100%', padding: '8px' }}
+        />
+      </div>
+
+      <div style={{ marginBottom: '15px' }}>
+        <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>
+          Prompt:
+        </label>
+        <textarea
+          value={prompt}
+          onChange={(e) => setPrompt(e.target.value)}
+          rows={4}
+          style={{ width: '100%', padding: '8px', fontFamily: 'inherit' }}
+        />
+      </div>
+
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '15px' }}>
+        <label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
+          <input
+            type="checkbox"
+            checked={useStreaming}
+            onChange={(e) => setUseStreaming(e.target.checked)}
+            disabled={loading}
+          />
+          Stream response
+        </label>
+
+        <button
+          onClick={handleAnalyze}
+          disabled={loading}
+          style={{
+            padding: '10px 20px',
+            cursor: loading ? 'not-allowed' : 'pointer',
+            backgroundColor: loading ? '#ccc' : '#007BFF',
+            color: '#fff',
+            border: 'none',
+            borderRadius: '4px',
+          }}
+        >
+          {loading ? 'Analyzing Video...' : 'Analyze Video'}
+        </button>
+      </div>
+
+      {error && (
+        <div style={{ color: '#D8000C', backgroundColor: '#FFD2D2', padding: '10px', marginTop: '15px', borderRadius: '4px' }}>
+          <strong>Error:</strong> {error}
+        </div>
+      )}
+
+      {response && (
+        <div style={{ marginTop: '20px', borderTop: '1px solid #eee', paddingTop: '15px' }}>
+          <h3>Response:</h3>
+          <p style={{ whiteSpace: 'pre-wrap', lineHeight: '1.5' }}>{response}</p>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/ai/ai-samples/src/features/video-analysis/service.ts b/ai/ai-samples/src/features/video-analysis/service.ts
new file mode 100644
index 000000000..00411e635
--- /dev/null
+++ b/ai/ai-samples/src/features/video-analysis/service.ts
@@ -0,0 +1,89 @@
+import { getAiModel } from '../../services/firebaseAIService';
+import { Part } from 'firebase/ai';
+
+/**
+ * Converts a standard browser File object (Video) into a Firebase AI SDK Part.
+ * Uses the native browser FileReader API to extract the Base64 string.
+ * @param file The DOM File object from an <input type="file">
+ * @returns A Promise that resolves to an InlineData Part object
+ */
+export async function fileToGenerativePart(file: File): Promise<Part> {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+
+        reader.onload = () => {
+            const result = reader.result;
+
+            if (typeof result !== 'string') {
+                return reject(new Error('Failed to parse video file data as Base64.'));
+            }
+            const splitResult = result.split(',');
+            const base64Data = splitResult[1];
+            if (!base64Data) {
+                return reject(new Error('Failed to extract Base64 data from file.'));
+            }
+            resolve({
+                inlineData: {
+                    data: base64Data,
+                    mimeType: file.type || 'video/mp4',
+                },
+            });
+        };
+
+        reader.onerror = () => reject(reader.error || new Error('Error reading video file.'));
+        reader.readAsDataURL(file);
+    });
+}
+
+// Note: The Gemini API restricts the total size of inline data payloads. 
+// To process larger files without hitting HTTP 413 errors (PayLoad Too Large),
+// See the official Firebase AI documentation for current file size limits and workarounds:
+// https://firebase.google.com/docs/ai-logic/solutions/cloud-storage
+
+/**
+ * Sends a video analysis request (prompt + video file) to the Gemini model.
+ * @param prompt The string instruction sent to the model (e.g. "Describe what happens in this video").
+ * @param videoFile The DOM File object containing the video.
+ * @returns The text string response generated by the model.
+ */
+export async function analyzeVideo(prompt: string, videoFile: File): Promise<string> {
+    try {
+        const videoPart = await fileToGenerativePart(videoFile);
+        const model = getAiModel('gemini-3.7-flash');
+        const result = await model.generateContent([prompt, videoPart]);
+        return result.response.text();
+    } catch (error: unknown) {
+        throw error instanceof Error
+            ? error
+            : new Error('An unknown error occurred during video analysis.');
+    }
+}
+
+/**
+ * Streams the video analysis response from the Gemini model in real-time chunks.
+ * @param prompt The string instruction sent to the model.
+ * @param videoFile The DOM File object containing the video.
+ * @param onChunk Callback fired whenever a new text chunk is received.
+ */
+export async function streamVideoAnalysis(
+    prompt: string,
+    videoFile: File,
+    onChunk: (chunk: string) => void
+): Promise<void> {
+    try {
+        const videoPart = await fileToGenerativePart(videoFile);
+        const model = getAiModel('gemini-3.7-flash');
+        const result = await model.generateContentStream([prompt, videoPart]);
+
+        for await (const chunk of result.stream) {
+            const chunkText = chunk.text();
+            if (chunkText) {
+                onChunk(chunkText);
+            }
+        }
+    } catch (error: unknown) {
+        throw error instanceof Error
+            ? error
+            : new Error('An unknown error occurred during video streaming.');
+    }
+}
\ No newline at end of file
diff --git a/ai/ai-samples/src/index.tsx b/ai/ai-samples/src/index.tsx
index 4b9dd0679..485fc6dbd 100644
--- a/ai/ai-samples/src/index.tsx
+++ b/ai/ai-samples/src/index.tsx
@@ -9,7 +9,7 @@ import StructuredOutput from './features/structured-output';
 import FunctionCalling from './features/function-calling';
 import ImageGeneration from './features/image-generation';
 import AutomaticFunctionCalling from './features/automatic-function-calling';
-import VideoAnalysis from './features/video-anaylsis';
+import VideoAnalysis from './features/video-analysis';
 
 const router = createBrowserRouter([
   {

From 95cf65064a7bfe9c796a316ade59510dae6a439d Mon Sep 17 00:00:00 2001
From: sedanah-m <mashhour@google.com>
Date: Thu, 3 Sep 2026 11:31:11 -0700
Subject: [PATCH 8/9] fix typo

---
 .../src/features/video-anaylsis/index.tsx     | 123 ------------------
 .../src/features/video-anaylsis/service.ts    |  89 -------------
 2 files changed, 212 deletions(-)
 delete mode 100644 ai/ai-samples/src/features/video-anaylsis/index.tsx
 delete mode 100644 ai/ai-samples/src/features/video-anaylsis/service.ts

diff --git a/ai/ai-samples/src/features/video-anaylsis/index.tsx b/ai/ai-samples/src/features/video-anaylsis/index.tsx
deleted file mode 100644
index d0fd42ac6..000000000
--- a/ai/ai-samples/src/features/video-anaylsis/index.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import { useState, useRef } from 'react';
-import { analyzeVideo, streamVideoAnalysis } from './service';
-
-export default function VideoAnalysisView() {
-  const [prompt, setPrompt] = useState('Describe what is happening in this video in detail.');
-  const [useStreaming, setUseStreaming] = useState(true);
-  const [response, setResponse] = useState('');
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const fileInputRef = useRef<HTMLInputElement>(null);
-
-  const handleAnalyze = async () => {
-    const fileArray = Array.from(fileInputRef.current?.files ?? []);
-
-    if (fileArray.length === 0) {
-      setError('Please select a video file.');
-      return;
-    }
-
-    const cleanedPrompt = prompt.trim();
-    if (!cleanedPrompt) {
-      setError('Please enter a prompt.');
-      return;
-    }
-
-    setLoading(true);
-    setError(null);
-    setResponse('');
-
-    try {
-      if (useStreaming) {
-        await streamVideoAnalysis(cleanedPrompt, fileArray[0], (chunk) => {
-          setResponse((prev) => prev + chunk);
-        });
-      } else {
-        const resultText = await analyzeVideo(cleanedPrompt, fileArray[0]);
-        setResponse(resultText);
-      }
-    } catch (err: unknown) {
-      const message =
-        err instanceof Error
-          ? err.message
-          : 'An unexpected error occurred during video analysis.';
-      setError(message);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
-      <h2>Video Analysis</h2>
-      <p style={{ color: '#666', marginBottom: '20px' }}>
-        Upload a video file alongside a text prompt to analyze its content.
-      </p>
-
-      <div style={{ marginBottom: '15px' }}>
-        <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>
-          Upload Video:
-        </label>
-        <input
-          type="file"
-          ref={fileInputRef}
-          accept="video/*"
-          style={{ width: '100%', padding: '8px' }}
-        />
-      </div>
-
-      <div style={{ marginBottom: '15px' }}>
-        <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>
-          Prompt:
-        </label>
-        <textarea
-          value={prompt}
-          onChange={(e) => setPrompt(e.target.value)}
-          rows={4}
-          style={{ width: '100%', padding: '8px', fontFamily: 'inherit' }}
-        />
-      </div>
-
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '15px' }}>
-        <label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
-          <input
-            type="checkbox"
-            checked={useStreaming}
-            onChange={(e) => setUseStreaming(e.target.checked)}
-            disabled={loading}
-          />
-          Stream response
-        </label>
-
-        <button
-          onClick={handleAnalyze}
-          disabled={loading}
-          style={{
-            padding: '10px 20px',
-            cursor: loading ? 'not-allowed' : 'pointer',
-            backgroundColor: loading ? '#ccc' : '#007BFF',
-            color: '#fff',
-            border: 'none',
-            borderRadius: '4px',
-          }}
-        >
-          {loading ? 'Analyzing Video...' : 'Analyze Video'}
-        </button>
-      </div>
-
-      {error && (
-        <div style={{ color: '#D8000C', backgroundColor: '#FFD2D2', padding: '10px', marginTop: '15px', borderRadius: '4px' }}>
-          <strong>Error:</strong> {error}
-        </div>
-      )}
-
-      {response && (
-        <div style={{ marginTop: '20px', borderTop: '1px solid #eee', paddingTop: '15px' }}>
-          <h3>Response:</h3>
-          <p style={{ whiteSpace: 'pre-wrap', lineHeight: '1.5' }}>{response}</p>
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/ai/ai-samples/src/features/video-anaylsis/service.ts b/ai/ai-samples/src/features/video-anaylsis/service.ts
deleted file mode 100644
index 00411e635..000000000
--- a/ai/ai-samples/src/features/video-anaylsis/service.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import { getAiModel } from '../../services/firebaseAIService';
-import { Part } from 'firebase/ai';
-
-/**
- * Converts a standard browser File object (Video) into a Firebase AI SDK Part.
- * Uses the native browser FileReader API to extract the Base64 string.
- * @param file The DOM File object from an <input type="file">
- * @returns A Promise that resolves to an InlineData Part object
- */
-export async function fileToGenerativePart(file: File): Promise<Part> {
-    return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-
-        reader.onload = () => {
-            const result = reader.result;
-
-            if (typeof result !== 'string') {
-                return reject(new Error('Failed to parse video file data as Base64.'));
-            }
-            const splitResult = result.split(',');
-            const base64Data = splitResult[1];
-            if (!base64Data) {
-                return reject(new Error('Failed to extract Base64 data from file.'));
-            }
-            resolve({
-                inlineData: {
-                    data: base64Data,
-                    mimeType: file.type || 'video/mp4',
-                },
-            });
-        };
-
-        reader.onerror = () => reject(reader.error || new Error('Error reading video file.'));
-        reader.readAsDataURL(file);
-    });
-}
-
-// Note: The Gemini API restricts the total size of inline data payloads. 
-// To process larger files without hitting HTTP 413 errors (PayLoad Too Large),
-// See the official Firebase AI documentation for current file size limits and workarounds:
-// https://firebase.google.com/docs/ai-logic/solutions/cloud-storage
-
-/**
- * Sends a video analysis request (prompt + video file) to the Gemini model.
- * @param prompt The string instruction sent to the model (e.g. "Describe what happens in this video").
- * @param videoFile The DOM File object containing the video.
- * @returns The text string response generated by the model.
- */
-export async function analyzeVideo(prompt: string, videoFile: File): Promise<string> {
-    try {
-        const videoPart = await fileToGenerativePart(videoFile);
-        const model = getAiModel('gemini-3.7-flash');
-        const result = await model.generateContent([prompt, videoPart]);
-        return result.response.text();
-    } catch (error: unknown) {
-        throw error instanceof Error
-            ? error
-            : new Error('An unknown error occurred during video analysis.');
-    }
-}
-
-/**
- * Streams the video analysis response from the Gemini model in real-time chunks.
- * @param prompt The string instruction sent to the model.
- * @param videoFile The DOM File object containing the video.
- * @param onChunk Callback fired whenever a new text chunk is received.
- */
-export async function streamVideoAnalysis(
-    prompt: string,
-    videoFile: File,
-    onChunk: (chunk: string) => void
-): Promise<void> {
-    try {
-        const videoPart = await fileToGenerativePart(videoFile);
-        const model = getAiModel('gemini-3.7-flash');
-        const result = await model.generateContentStream([prompt, videoPart]);
-
-        for await (const chunk of result.stream) {
-            const chunkText = chunk.text();
-            if (chunkText) {
-                onChunk(chunkText);
-            }
-        }
-    } catch (error: unknown) {
-        throw error instanceof Error
-            ? error
-            : new Error('An unknown error occurred during video streaming.');
-    }
-}
\ No newline at end of file

From 7dbf7017ab8fd45036bfcf2756b559381c045ed6 Mon Sep 17 00:00:00 2001
From: sedanah-m <mashhour@google.com>
Date: Thu, 3 Sep 2026 15:58:34 -0700
Subject: [PATCH 9/9] adding script for video analysis sample feature in
 package.json

---
 ai/ai-samples/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ai/ai-samples/package.json b/ai/ai-samples/package.json
index 02d4dd092..371126ce1 100644
--- a/ai/ai-samples/package.json
+++ b/ai/ai-samples/package.json
@@ -12,6 +12,7 @@
     "dev:function": "VITE_ISOLATED_FEATURE=function-calling vite",
     "dev:auto-function": "VITE_ISOLATED_FEATURE=automatic-function-calling vite",
     "dev:image": "VITE_ISOLATED_FEATURE=image-generation vite",
+    "dev:video": "VITE_ISOLATED_FEATURE=video-analysis vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview"