diff --git a/ai/ai-samples/src/App.tsx b/ai/ai-samples/src/App.tsx
index c6902376f..a3b802829 100644
--- a/ai/ai-samples/src/App.tsx
+++ b/ai/ai-samples/src/App.tsx
@@ -1,11 +1,4 @@
 import { Link, Outlet, useLocation } from 'react-router-dom';
-import TextGenerationView from './features/text-generation';
-import ChatView from './features/chat';
-import MultimodalView from './features/multimodal';
-import StructuredOutputView from './features/structured-output';
-import FunctionCallingView from './features/function-calling';
-import ImageGenerationView from './features/image-generation';
-import AutomaticFunctionCallingView from './features/automatic-function-calling';
 
 const NAV_ITEMS = [
   { path: '/text-generation', label: 'Text Generation' },
@@ -15,26 +8,13 @@ const NAV_ITEMS = [
   { path: '/function-calling', label: 'Function Calling' },
   { path: '/automatic-function-calling', label: 'Automatic Function Calling' },
   { path: '/image-generation', label: 'Image Generation' },
-  
+
 ];
 
 export default function App() {
   const { pathname } = useLocation();
-  const isolatedFeature = import.meta.env.VITE_ISOLATED_FEATURE;
-  // If running an isolated script, bypass the shell entirely
-  if (isolatedFeature) {
-    switch (isolatedFeature) {
-      case 'text-generation': return <TextGenerationView />;
-      case 'chat': return <ChatView />;
-      case 'multimodal': return <MultimodalView />;
-      case 'structured-output': return <StructuredOutputView />;
-      case 'function-calling': return <FunctionCallingView />;
-      case 'automatic-function-calling': return <AutomaticFunctionCallingView />;
-      case 'image-generation': return <ImageGenerationView />;
-    }
-  }
 
-  // Otherwise, return the multi-feature app shell layout
+
   return (
     <div className="app-shell">
       <nav className="sidebar">
@@ -42,8 +22,8 @@ export default function App() {
         <ul className="nav-list">
           {NAV_ITEMS.map(({ path, label }) => (
             <li key={path}>
-              <Link 
-                to={path} 
+              <Link
+                to={path}
                 className={`nav-link ${pathname === path ? 'nav-link-active' : ''}`}
               >
                 {label}
diff --git a/ai/ai-samples/src/features/chat/index.tsx b/ai/ai-samples/src/features/chat/index.tsx
index 3843f5a98..555937b58 100644
--- a/ai/ai-samples/src/features/chat/index.tsx
+++ b/ai/ai-samples/src/features/chat/index.tsx
@@ -12,44 +12,37 @@ export default function ChatView() {
   const [input, setInput] = useState('');
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
-
-  // Use a ref to hold the active chat session from the Firebase AI SDK.
-  // This prevents the session from being recreated on every React render.
   const chatSessionRef = useRef<ChatSession | null>(null);
-
-  // Initialize the chat when the component mounts
   useEffect(() => {
     handleResetChat();
   }, []);
 
-   const handleResetChat = () => {
+  const handleResetChat = React.useCallback(() => {
     try {
       chatSessionRef.current = startNewChat();
       setError(null);
-    } catch (err: any) {
-      setError(err.message || 'Failed to initialize chat session. Please check your Firebase configuration.');
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error 
+        ? err.message 
+        : 'Failed to initialize chat session. Please check your Firebase configuration.';
+      setError(errorMessage);
     }
     setMessages([]);
     setInput('');
-  };
+  }, []);
 
   const handleSendMessage = async (e: React.FormEvent) => {
     e.preventDefault();
     if (!input.trim() || !chatSessionRef.current) return;
 
     const userMessage = input.trim();
-    setInput(''); // Clear input immediately
+    setInput(''); 
     setError(null);
     setLoading(true);
-
-    // Optimistically add user message to UI
     setMessages((prev) => [...prev, { role: 'user', text: userMessage }]);
 
     try {
-      // Call framework-agnostic service layer
       const responseText = await sendChatMessage(chatSessionRef.current, userMessage);
-      
-      // Add model response to UI
       setMessages((prev) => [...prev, { role: 'model', text: responseText }]);
     } catch (err: any) {
       setError(err.message || 'Failed to send message. Check console for details.');
diff --git a/ai/ai-samples/src/features/text-generation/index.tsx b/ai/ai-samples/src/features/text-generation/index.tsx
index 7cf7034a6..738792d1e 100644
--- a/ai/ai-samples/src/features/text-generation/index.tsx
+++ b/ai/ai-samples/src/features/text-generation/index.tsx
@@ -1,49 +1,110 @@
 import { useState } from 'react';
-import { generateText } from './service';
+import { generateText, streamText } from './service';
 
-export default function TextGeneration() {
+export default function TextGenerationView() {
   const [prompt, setPrompt] = useState<string>('');
+  const cleanPrompt = prompt.trim(); 
+  const [systemInstruction, setSystemInstruction] = useState<string>('');
+  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 handleGenerate = async () => {
-    if (!prompt.trim()) return;
+    if (!cleanPrompt) return;
 
     setLoading(true);
     setError(null);
     setResponse('');
 
     try {
-      // Direct call to the decoupled logic service
-      const text = await generateText(prompt);
-      setResponse(text);
-    } catch (err: any) {
-      setError(err.message || 'An unexpected error occurred');
+      const cleanInstruction = systemInstruction.trim() || undefined;
+
+      if (useStreaming) {
+        await streamText(
+          cleanPrompt, 
+          (chunk) => setResponse((prev) => prev + chunk),
+          cleanInstruction
+        );
+      } else {
+        const text = await generateText(cleanPrompt, cleanInstruction);
+        setResponse(text);
+      }
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error
+        ? err.message
+        : 'An unexpected error occurred';
+
+      setError(errorMessage);
     } finally {
       setLoading(false);
     }
   };
 
-
   return (
     <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
       <h2>Text Generation</h2>
-      
-      <textarea
-        value={prompt}
-        onChange={(e) => setPrompt(e.target.value)}
-        placeholder="Ask the AI a question..."
-        rows={5}
-        style={{ width: '100%', marginBottom: '10px', padding: '10px' }}
-      />
-      
-      <button onClick={handleGenerate} disabled={loading || !prompt.trim()} style={{ padding: '10px 20px' }}>
-        {loading ? 'Generating...' : 'Generate'}
-      </button>
-
-      {error && <p style={{ color: 'red', marginTop: '15px' }}>{error}</p>}
-      {response && <div style={{ marginTop: '20px', padding: '15px', backgroundColor: '#f0f0f0' }}><p style={{ whiteSpace: 'pre-wrap' }}>{response}</p></div>}
+
+      {/* System Instruction Input */}
+      <div style={{ marginBottom: '12px' }}>
+        <label style={{ display: 'block', marginBottom: '4px', fontSize: '0.9rem', color: '#5f6368' }}>
+          System Instruction (Persona/Rules)
+        </label>
+        <input
+          type="text"
+          value={systemInstruction}
+          onChange={(e) => setSystemInstruction(e.target.value)}
+          placeholder="e.g., You are a helpful assistant..."
+          disabled={loading}
+          style={{ width: '100%', padding: '10px', boxSizing: 'border-box' }}
+        />
+      </div>
+
+      {/* Main Prompt Input */}
+      <div style={{ marginBottom: '12px' }}>
+        <label style={{ display: 'block', marginBottom: '4px', fontSize: '0.9rem', color: '#5f6368' }}>
+          Prompt
+        </label>
+        <textarea
+          value={prompt}
+          onChange={(e) => setPrompt(e.target.value)}
+          placeholder="Ask the AI a question..."
+          rows={5}
+          disabled={loading}
+          style={{ width: '100%', padding: '10px', boxSizing: 'border-box' }}
+        />
+      </div>
+
+      {/* Controls: Checkbox and Button */}
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <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={handleGenerate}
+          disabled={loading || !cleanPrompt}
+          style={{ padding: '10px 20px', cursor: (loading || !cleanPrompt) ? 'not-allowed' : 'pointer' }}
+        >
+          {loading ? 'Generating...' : 'Generate'}
+        </button>
+      </div>
+
+      {/* Error Message */}
+      {error && <p style={{ color: '#c5221f', marginTop: '15px' }}>{error}</p>}
+
+      {/* Response Box */}
+      {response && (
+        <div style={{ marginTop: '20px', padding: '15px', backgroundColor: '#f0f0f0', borderRadius: '8px' }}>
+          <p style={{ whiteSpace: 'pre-wrap', margin: 0 }}>{response}</p>
+        </div>
+      )}
     </div>
   );
 }
\ No newline at end of file
diff --git a/ai/ai-samples/src/features/text-generation/service.ts b/ai/ai-samples/src/features/text-generation/service.ts
index 50bd2f1eb..8620e0d08 100644
--- a/ai/ai-samples/src/features/text-generation/service.ts
+++ b/ai/ai-samples/src/features/text-generation/service.ts
@@ -1,15 +1,17 @@
 import { getAiModel } from '../../services/firebaseAIService';
 
 /**
- * Generates text from a text prompt.
+ * Generates text from a text prompt, optionally using a system instruction.
  * @param prompt The string instruction sent to the model.
+ * @param systemInstruction (Optional) The persona or constraints for the model.
  * @returns The text string response generated by the model.
  */
-export async function generateText(prompt: string): Promise<string> {
+export async function generateText(prompt: string, systemInstruction?: string): Promise<string> {
   try {
-    const model = getAiModel('gemini-3.5-flash');
+    const options = systemInstruction ? { systemInstruction } : undefined;
+    const model = getAiModel('gemini-3.5-flash', options);
+    
     const result = await model.generateContent(prompt);
-
     return result.response.text(); 
   } catch (error) {
     console.error('Error generating text with Firebase AI:', error);
@@ -21,10 +23,13 @@ export async function generateText(prompt: string): Promise<string> {
  * Streams text from a text prompt, yielding chunks as they arrive.
  * @param prompt The string instruction sent to the model.
  * @param onChunk Callback fired for each non-empty text chunk.
+ * @param systemInstruction (Optional) The persona or constraints for the model.
  */
-export async function streamText(prompt: string, onChunk: (chunk: string) => void): Promise<void> {
+export async function streamText(prompt: string, onChunk: (chunk: string) => void, systemInstruction?: string): Promise<void> {
   try {
-    const model = getAiModel('gemini-3.5-flash');
+    const options = systemInstruction ? { systemInstruction } : undefined;
+    const model = getAiModel('gemini-3.5-flash', options);
+    
     const result = await model.generateContentStream(prompt);
 
     for await (const chunk of result.stream) {
@@ -37,22 +42,4 @@ export async function streamText(prompt: string, onChunk: (chunk: string) => voi
     console.error('Error streaming text with Firebase AI:', error);
     throw error;
   }
-}
-
-/**
- * Generates text using a specific system instruction to guide the model's behavior.
- * @param systemInstruction The persona or constraints for the model.
- * @param prompt The string instruction sent to the model.
- * @returns The text string response generated by the model.
- */
-export async function generateWithSystemInstruction(systemInstruction: string, prompt: string): Promise<string> {
-  try {
-    const model = getAiModel('gemini-3.5-flash', { systemInstruction });
-    
-    const result = await model.generateContent(prompt);
-    return result.response.text();
-  } catch (error) {
-    console.error('Error generating text with system instruction:', error);
-    throw error;
-  }
 }
\ No newline at end of file
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
diff --git a/ai/ai-samples/src/index.tsx b/ai/ai-samples/src/index.tsx
index 7ea3f4f45..55e79a805 100644
--- a/ai/ai-samples/src/index.tsx
+++ b/ai/ai-samples/src/index.tsx
@@ -16,7 +16,6 @@ const router = createBrowserRouter([
     path: '/',
     element: <App />,
     children: [
-      // Redirect the root path to text-generation automatically
       { index: true, element: <Navigate to="/text-generation" replace /> },
       { path: 'text-generation', element: <TextGeneration /> },
       { path: 'chat', element: <Chat /> },
@@ -32,7 +31,6 @@ const router = createBrowserRouter([
 
 const isolatedFeature = import.meta.env.VITE_ISOLATED_FEATURE;
 
-// Determine what to render based on the flag
 const renderContent = () => {
   if (isolatedFeature) {
     switch (isolatedFeature) {
@@ -49,16 +47,13 @@ const renderContent = () => {
       case 'image-generation':
         return <ImageGeneration />;
       default:
-        // Fallback if the flag is set to something unknown
         return <RouterProvider router={router} />;
     }
   }
 
-  // If no flag provided, run the normal full app router
   return <RouterProvider router={router} />;
 };
 
-// Mount to the DOM
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     {renderContent()}