Building an AI YouTube Video Summarizer: From Video Link to Summary

Burak Odabaş — Wed, 06 Nov 2024 19:47:33 +0000

Hey devs! 👋 I want to share how I built an AI-powered YouTube video summarizer. Let's dive into the technical implementation!

The Process Flow

Extract YouTube Video Data
Get Video Transcript
Process with ChatGPT
Present to User

Technical Implementation

1. Fetching Video Metadata

const getVideoMetadata = async (videoUrl) => {
  try {
    const videoId = extractVideoId(videoUrl);
    const response = await youtube.videos.list({
      part: 'snippet,contentDetails',
      id: videoId
    });

    return {
      title: response.data.items[0].snippet.title,
      description: response.data.items[0].snippet.description,
      duration: response.data.items[0].contentDetails.duration
    };
  } catch (error) {
    console.error('Failed to fetch metadata:', error);
    throw error;
  }
};

2. Getting Video Transcript

const getTranscript = async (videoId) => {
  try {
    const transcript = await YoutubeTranscript.fetchTranscript(videoId);
    return transcript.map(item => item.text).join(' ');
  } catch (error) {
    console.error('Failed to fetch transcript:', error);
    throw error;
  }
};

3. Processing with ChatGPT

const generateSummary = async (transcript, summaryType) => {
  const prompts = {
    quick: "Provide a brief 2-3 sentence summary of the main points:",
    detailed: "Provide a detailed summary with key points and examples:",
    bullets: "List the main points as bullet points:",
  };

  try {
    const completion = await openai.createChatCompletion({
      model: "gpt-4",
      messages: [{
        role: "user",
        content: `${prompts[summaryType]} ${transcript}`
      }]
    });

    return completion.data.choices[0].message.content;
  } catch (error) {
    console.error('Failed to generate summary:', error);
    throw error;
  }
};

4. Presenting Results

interface SummaryResult {
  metadata: VideoMetadata;
  transcript: string;
  summary: string;
}

const processVideo = async (
  videoUrl: string, 
  summaryType: 'quick' | 'detailed' | 'bullets'
): Promise<SummaryResult> => {
  const metadata = await getVideoMetadata(videoUrl);
  const transcript = await getTranscript(videoUrl);
  const summary = await generateSummary(transcript, summaryType);

  return {
    metadata,
    transcript,
    summary
  };
};

Key Challenges Solved

Rate Limiting: Implemented proper delays between API calls
Error Handling: Added robust error handling for both YouTube and OpenAI APIs
Prompt Engineering: Optimized prompts for different summary types
Token Management: Chunking large transcripts for API limits

Results

The app is now live on the App Store, helping users save time by summarizing YouTube videos efficiently. You can check it out here: [https://apps.apple.com/us/app/video-summarize-ai-video-chat/id6692608763]

What's Next?

Adding support for more languages
Implementing timestamp-based summaries
Adding more summary types

Would love to hear your thoughts and suggestions in the comments!

Happy coding! 🚀

Import JSON file in Typescript

Burak Odabaş — Tue, 17 Sep 2019 14:12:30 +0000

Edit tsconfig.json;

"resolveJsonModule": true,
"esModuleInterop": true

And call json file;

import example from '../assets/example.json';

DEV Community: Burak Odabaş