Merge pull request samqin123#4 from SamuelZ12/summary-timestamp

Summary timestamp

Author: SamuelZ12

app/api/generate-summary/route.ts

@@ -17,7 +17,7 @@ function formatTime(seconds: number): string {
 
 export async function POST(request: Request) {
   try {
-    const { transcript, videoInfo, videoId, model = 'gemini-2.5-flash' } = await request.json();
+    const { transcript, videoInfo, videoId, model = 'gemini-2.5-flash', language = 'English' } = await request.json();
 
     if (!transcript || !Array.isArray(transcript)) {
       return NextResponse.json(
@@ -63,6 +63,12 @@ ${fullTranscript}
 
 **Output Requirements:**
 
+**Language Requirement:**
+- Your entire output MUST be written in ${language}.
+- All section titles, descriptions, and content must be in ${language}.
+- Do not mix languages. Everything including headers like "Video Notes", "Context", "Key takeaways" etc. must be translated to ${language}.
+- Maintain the same markdown structure but translate all text to ${language}.
+
 **【Video Notes】**
 
 1. **Context**
@@ -94,7 +100,7 @@ Highlight the 1-3 most intriguing and memorable and surprising stories/anecdotes
 * All the above content should be presented with clean and clear Markdown sections, paying attention to title hierarchy.
 * Note that the transcript might include transcription errors; you should deduce the correct spellings from the context and output the correct versions
 * Never over-summarize!
-* Format all timestamps as "00:00" and hyperlink the timestamps to the corresponding video sections
+* Include timestamps in MM:SS or HH:MM:SS format (e.g., 05:32 or 1:45:30) for important moments
 * Do not add new facts; if ambiguous statements appear, maintain the original meaning and note the uncertainty.
 * Avoid overly long paragraphs; longer ones can be broken down into multiple logical paragraphs
 * Try to preserve the original tone and voice of the video content. When rewriting, make sure your writing is concise, engaging, and highly readable

app/page.tsx

@@ -6,6 +6,7 @@ import { TopicCard } from "@/components/topic-card";
 import { RightColumnTabs, type RightColumnTabsHandle } from "@/components/right-column-tabs";
 import { YouTubePlayer } from "@/components/youtube-player";
 import { ModelSelector, type GeminiModel } from "@/components/model-selector";
+import { LanguageSelector, type Language } from "@/components/language-selector";
 import { LoadingContext } from "@/components/loading-context";
 import { LoadingTips } from "@/components/loading-tips";
 import { Topic, TranscriptSegment, VideoInfo, Citation } from "@/lib/types";
@@ -30,11 +31,16 @@ export default function Home() {
   const [currentTime, setCurrentTime] = useState(0);
   const [transcriptHeight, setTranscriptHeight] = useState<string>("auto");
   const [selectedModel, setSelectedModel] = useState<GeminiModel>('gemini-2.5-flash');
+  const [summaryLanguage, setSummaryLanguage] = useState<Language>('English');
   const [citationHighlight, setCitationHighlight] = useState<Citation | null>(null);
   const [generationStartTime, setGenerationStartTime] = useState<number | null>(null);
   const [processingStartTime, setProcessingStartTime] = useState<number | null>(null);
   const rightColumnTabsRef = useRef<RightColumnTabsHandle>(null);
 
+  // Play All state (lifted from YouTubePlayer)
+  const [isPlayingAll, setIsPlayingAll] = useState(false);
+  const [playAllIndex, setPlayAllIndex] = useState(0);
+  
   // Summary generation state
   const [summaryContent, setSummaryContent] = useState<string | null>(null);
   const [isGeneratingSummary, setIsGeneratingSummary] = useState<boolean>(false);
@@ -170,7 +176,8 @@ export default function Home() {
           transcript: fetchedTranscript,
           videoInfo: fetchedVideoInfo,
           videoId: extractedVideoId,
-          model: selectedModel
+          model: selectedModel,
+          language: summaryLanguage
         }),
         signal: summaryController.signal,
       });
@@ -179,33 +186,11 @@ export default function Home() {
       setShowSummaryTab(true);
       setIsGeneratingSummary(true);
 
-      // Handle summary generation asynchronously (non-blocking)
-      summaryPromise
-        .then(async (response) => {
-          clearTimeout(summaryTimeoutId);
-          if (!response.ok) {
-            const errorData = await response.json().catch(() => ({ error: "Unknown error" }));
-            throw new Error(errorData.error || "Failed to generate summary");
-          }
-          const { summaryContent: generatedSummary } = await response.json();
-          setSummaryContent(generatedSummary);
-        })
-        .catch(err => {
-          clearTimeout(summaryTimeoutId);
-          if (err.name === 'AbortError') {
-            setSummaryError("Summary generation timed out. The content might be too long.");
-          } else {
-            setSummaryError(err instanceof Error ? err.message : "An error occurred generating the summary");
-          }
-        })
-        .finally(() => {
-          setIsGeneratingSummary(false);
-        });
-      
-      // Now await only the topics promise for the main UI
+      // Wait for topics to complete first (prioritize highlight reels)
       const topicsRes = await topicsPromise;
       clearTimeout(topicsTimeoutId);
 
+      // Check topics response
       if (!topicsRes.ok) {
         const errorData = await topicsRes.json().catch(() => ({ error: "Unknown error" }));
         throw new Error(errorData.error || "Failed to generate topics");
@@ -219,6 +204,31 @@ export default function Home() {
       const { topics: generatedTopics } = await topicsRes.json();
       setTopics(generatedTopics);
 
+      // Handle summary asynchronously in the background
+      summaryPromise
+        .then(async (summaryRes) => {
+          clearTimeout(summaryTimeoutId);
+          
+          if (!summaryRes.ok) {
+            const errorData = await summaryRes.json().catch(() => ({ error: "Unknown error" }));
+            setSummaryError(errorData.error || "Failed to generate summary");
+          } else {
+            const { summaryContent: generatedSummary } = await summaryRes.json();
+            setSummaryContent(generatedSummary);
+          }
+        })
+        .catch((err) => {
+          clearTimeout(summaryTimeoutId);
+          if (err.name === 'AbortError') {
+            setSummaryError("Summary generation timed out. The video might be too long.");
+          } else {
+            setSummaryError("Failed to generate summary. Please try again.");
+          }
+        })
+        .finally(() => {
+          setIsGeneratingSummary(false);
+        });
+      
     } catch (err) {
       setError(err instanceof Error ? err.message : "An error occurred");
     } finally {
@@ -229,6 +239,10 @@ export default function Home() {
   };
 
   const handleCitationClick = (citation: Citation) => {
+    // Reset Play All mode when clicking a citation
+    setIsPlayingAll(false);
+    setPlayAllIndex(0);
+    
     setSelectedTopic(null);
     setCitationHighlight(citation);
 
@@ -244,6 +258,10 @@ export default function Home() {
     // Prevent rapid sequential clicks and state updates
     if (seekToTime === seconds) return;
 
+    // Reset Play All mode when clicking any timestamp
+    setIsPlayingAll(false);
+    setPlayAllIndex(0);
+    
     // Handle topic selection clearing:
     // Clear topic if it's a new citation click from AI chat OR
     // if clicking outside the current highlight reel (and not within a citation)
@@ -276,6 +294,13 @@ export default function Home() {
   };
 
   const handleTopicSelect = (topic: Topic | null) => {
+    // Reset Play All mode when manually selecting a topic
+    // (unless it's being called by Play All itself)
+    if (!isPlayingAll) {
+      setIsPlayingAll(false);
+      setPlayAllIndex(0);
+    }
+    
     // Clear citation highlight when selecting a topic
     setCitationHighlight(null);
     setSelectedTopic(topic);
@@ -294,6 +319,10 @@ export default function Home() {
   };
 
   const handlePlayAllCitations = (citations: Citation[]) => {
+    // Reset Play All mode when playing citations
+    setIsPlayingAll(false);
+    setPlayAllIndex(0);
+    
     // Clear existing highlights to avoid conflicts
     setCitationHighlight(null);
 
@@ -337,6 +366,22 @@ export default function Home() {
     }
   };
 
+  const handleTogglePlayAll = () => {
+    if (isPlayingAll) {
+      // Stop playing all
+      setIsPlayingAll(false);
+    } else {
+      // Start playing all from the beginning
+      setIsPlayingAll(true);
+      setPlayAllIndex(0);
+      // Select the first topic to start playback
+      if (topics.length > 0) {
+        setSelectedTopic(topics[0]);
+        setSeekToTime(topics[0].segments[0].start);
+        setTimeout(() => setSeekToTime(undefined), 100);
+      }
+    }
+  };
 
   // Dynamically adjust right column height to match video container
   useEffect(() => {
@@ -384,13 +429,23 @@ export default function Home() {
 
         <div className="flex flex-col items-center gap-4 mb-8">
           <UrlInput onSubmit={processVideo} isLoading={isLoading} />
-          <div className="flex items-center gap-2">
-            <span className="text-sm text-muted-foreground">Model:</span>
-            <ModelSelector 
-              value={selectedModel} 
-              onChange={setSelectedModel} 
-              disabled={isLoading}
-            />
+          <div className="flex items-center gap-4 flex-wrap">
+            <div className="flex items-center gap-2">
+              <span className="text-sm text-muted-foreground">Model:</span>
+              <ModelSelector 
+                value={selectedModel} 
+                onChange={setSelectedModel} 
+                disabled={isLoading}
+              />
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="text-sm text-muted-foreground">Language:</span>
+              <LanguageSelector
+                value={summaryLanguage}
+                onChange={setSummaryLanguage}
+                disabled={isLoading}
+              />
+            </div>
           </div>
         </div>
 
@@ -437,6 +492,11 @@ export default function Home() {
                     onTopicSelect={handleTopicSelect}
                     onTimeUpdate={handleTimeUpdate}
                     transcript={transcript}
+                    isPlayingAll={isPlayingAll}
+                    playAllIndex={playAllIndex}
+                    onTogglePlayAll={handleTogglePlayAll}
+                    setPlayAllIndex={setPlayAllIndex}
+                    setIsPlayingAll={setIsPlayingAll}
                   />
                 </div>
               </div>

components/chat-message.tsx

@@ -217,7 +217,7 @@ export function ChatMessageComponent({ message, onCitationClick, onTimestampClic
         )}
       </div>
 
-      <div className={`flex-1 max-w-[80%] ${isUser ? 'text-right' : ''}`}>
+      <div className="flex-1 max-w-[80%]">
         <Card className={`p-4 ${isUser ? 'bg-primary/5 border-primary/20' : 'bg-muted/30'}`}>
           {isUser ? (
             <p className="text-sm whitespace-pre-wrap">{message.content}</p>

components/language-selector.tsx

@@ -0,0 +1,107 @@
+'use client';
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { InfoIcon } from "lucide-react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+export type Language = 
+  | 'English'
+  | 'Spanish'
+  | 'French'
+  | 'German'
+  | 'Italian'
+  | 'Portuguese'
+  | 'Dutch'
+  | 'Russian'
+  | 'Japanese'
+  | 'Korean'
+  | 'Chinese (Simplified)'
+  | 'Chinese (Traditional)'
+  | 'Arabic'
+  | 'Hindi';
+
+interface LanguageInfo {
+  id: Language;
+  name: string;
+  nativeName: string;
+}
+
+const languageInfo: LanguageInfo[] = [
+  { id: 'English', name: 'English', nativeName: 'English' },
+  { id: 'Spanish', name: 'Spanish', nativeName: 'Español' },
+  { id: 'French', name: 'French', nativeName: 'Français' },
+  { id: 'German', name: 'German', nativeName: 'Deutsch' },
+  { id: 'Italian', name: 'Italian', nativeName: 'Italiano' },
+  { id: 'Portuguese', name: 'Portuguese', nativeName: 'Português' },
+  { id: 'Dutch', name: 'Dutch', nativeName: 'Nederlands' },
+  { id: 'Russian', name: 'Russian', nativeName: 'Русский' },
+  { id: 'Japanese', name: 'Japanese', nativeName: '日本語' },
+  { id: 'Korean', name: 'Korean', nativeName: '한국어' },
+  { id: 'Chinese (Simplified)', name: 'Chinese (Simplified)', nativeName: '简体中文' },
+  { id: 'Chinese (Traditional)', name: 'Chinese (Traditional)', nativeName: '繁體中文' },
+  { id: 'Arabic', name: 'Arabic', nativeName: 'العربية' },
+  { id: 'Hindi', name: 'Hindi', nativeName: 'हिन्दी' },
+];
+
+interface LanguageSelectorProps {
+  value: Language;
+  onChange: (value: Language) => void;
+  disabled?: boolean;
+}
+
+export function LanguageSelector({ value, onChange, disabled }: LanguageSelectorProps) {
+  const selectedLanguage = languageInfo.find(l => l.id === value);
+
+  return (
+    <div className="flex items-center gap-2">
+      <Select value={value} onValueChange={onChange} disabled={disabled}>
+        <SelectTrigger className="w-[200px]">
+          <SelectValue placeholder="Select a language" />
+        </SelectTrigger>
+        <SelectContent>
+          {languageInfo.map((lang) => (
+            <SelectItem key={lang.id} value={lang.id}>
+              <span className="flex items-center justify-between w-full">
+                <span>{lang.name}</span>
+                {lang.nativeName !== lang.name && (
+                  <span className="text-muted-foreground ml-2">{lang.nativeName}</span>
+                )}
+              </span>
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <InfoIcon className="h-4 w-4 text-muted-foreground cursor-help" />
+          </TooltipTrigger>
+          <TooltipContent className="max-w-xs">
+            <div className="space-y-2">
+              <p className="font-semibold">Summary Language</p>
+              <p className="text-sm">
+                The video summary will be generated in {selectedLanguage?.nativeName || value}.
+              </p>
+              <p className="text-sm text-muted-foreground">
+                Note: The original transcript language detection and translation quality may vary 
+                depending on the source video's audio clarity and the target language.
+              </p>
+            </div>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    </div>
+  );
+}