Youtube-tool/src/pages/transcript.astro

---
import Layout from '../layouts/Layout.astro';

const seoTitle = "YouTube Transcript Generator - Free AI Transcription";
const seoDescription = "Free YouTube transcript generator tool. Extract text from any YouTube video instantly using AI. Perfect for repurposing content and accessibility.";
const seoKeywords = "youtube transcript generator, youtube transcript generator free, free youtube transcript generator, youtube transcript generator tool, youtube transcript generator ai";
---

<Layout title={seoTitle} description={seoDescription} keywords={seoKeywords}>
  <div class="relative pt-12 pb-24 px-4 sm:px-8">
    <div class="max-w-5xl mx-auto">
      <!-- Header Section -->
      <div class="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-12 animate-slide-up">
        <div class="space-y-2">
          <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 border border-primary/20 stagger-1">
            <span class="relative flex h-2 w-2">
              <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
              <span class="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
            </span>
            <span class="text-[10px] font-bold text-primary uppercase tracking-widest text-white">Neural Text Extraction</span>
          </div>
          <h1 class="text-4xl sm:text-6xl font-black uppercase tracking-tighter text-white stagger-2">Transcript <span class="text-primary">Generator</span></h1>
          <p class="text-body text-base sm:text-lg max-w-xl leading-relaxed stagger-3">
            Extract high-fidelity transcripts from any YouTube video or Shorts. Support for multiple languages and professional formats.
          </p>
        </div>
      </div>

      <!-- Search Box -->
      <div class="bg-canvas-soft border border-hairline p-1 rounded-2xl shadow-2xl mb-12 animate-slide-up stagger-4 search-box-glow">
        <div class="flex flex-col sm:flex-row gap-1">
          <input 
            type="text" 
            id="url-input"
            placeholder="Paste YouTube Video or Shorts URL..." 
            class="flex-grow h-14 bg-transparent px-6 text-lg focus:outline-none text-white placeholder:text-mute font-medium"
          />
          <button id="analyze-btn" class="btn-primary !h-14 !px-10 !rounded-xl text-sm font-bold uppercase tracking-[0.1em]">Analyze Captions</button>
        </div>
      </div>

      <!-- Loading State -->
      <div id="loading" class="hidden py-24 flex flex-col items-center justify-center space-y-6">
        <div class="relative">
          <div class="w-16 h-16 border-4 border-hairline rounded-full"></div>
          <div class="w-16 h-16 border-4 border-t-primary rounded-full animate-spin absolute top-0 left-0"></div>
        </div>
        <p class="text-xs font-bold text-primary uppercase tracking-[0.3em] animate-pulse">Extracting Timed Metadata</p>
      </div>

      <!-- Results Grid -->
      <div class="hidden grid-cols-1 lg:grid-cols-12 gap-8 items-start animate-scale-in" id="results">
        <!-- Left Column: Video Info & Settings -->
        <div class="lg:col-span-4 space-y-6">
          <div class="bg-canvas-soft-2/50 p-6 rounded-2xl border border-hairline/30 space-y-6">
            <div class="aspect-video bg-black rounded-xl overflow-hidden border border-hairline shadow-lg">
                <img id="video-thumb" src="" alt="" class="w-full h-full object-cover opacity-90" />
            </div>
            
            <div>
                <h3 id="video-title" class="font-bold text-lg text-white leading-tight uppercase tracking-tighter mb-2">Video Title</h3>
                <p id="video-uploader" class="text-primary font-bold text-[10px] uppercase tracking-widest">---</p>
            </div>

            <div class="space-y-4 pt-6 border-t border-hairline/30">
                <div class="space-y-2">
                    <label class="text-[10px] font-black text-mute uppercase tracking-widest">Select Language</label>
                    <select id="lang-select" class="w-full h-11 bg-black/40 border border-hairline rounded-xl px-4 text-xs font-bold text-white focus:outline-none focus:border-primary/50 transition-colors">
                        <!-- Languages populated by JS -->
                    </select>
                </div>

                <div class="space-y-2">
                    <label class="text-[10px] font-black text-mute uppercase tracking-widest">Select Format</label>
                    <div class="grid grid-cols-3 gap-2">
                        <button class="format-btn active h-10 rounded-xl border border-hairline bg-black/20 text-[10px] font-black uppercase tracking-widest text-mute transition-all" data-format="plain">Plain</button>
                        <button class="format-btn h-10 rounded-xl border border-hairline bg-black/20 text-[10px] font-black uppercase tracking-widest text-mute transition-all" data-format="srt">SRT</button>
                        <button class="format-btn h-10 rounded-xl border border-hairline bg-black/20 text-[10px] font-black uppercase tracking-widest text-mute transition-all" data-format="vtt">VTT</button>
                    </div>
                </div>

                <button id="generate-btn" class="btn-primary w-full !h-12 !text-xs !font-black !uppercase !tracking-widest mt-4">
                    Fetch Transcript
                </button>
            </div>
          </div>
        </div>

        <!-- Right Column: Transcript Content -->
        <div class="lg:col-span-8 space-y-6">
          <div class="bg-canvas-soft-2 p-8 rounded-3xl border border-hairline/50 relative flex flex-col min-h-[500px]">
            <div class="flex items-center justify-between mb-6">
                <h4 class="text-xs font-black text-primary uppercase tracking-[0.2em]">Live Transcript Stream</h4>
                <button id="copy-btn" class="flex items-center gap-2 px-4 py-2 rounded-xl bg-primary/10 border border-primary/20 text-[10px] font-black text-primary uppercase tracking-widest hover:bg-primary/20 transition-all active:scale-95 disabled:opacity-50" disabled>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
                    Copy to Clipboard
                </button>
            </div>
            
            <div id="transcript-container" class="flex-grow bg-black/40 rounded-2xl border border-hairline/50 p-6 overflow-y-auto max-h-[600px] scrollbar-hide">
                <p id="transcript-placeholder" class="text-mute text-xs font-medium italic text-center py-24">Select parameters and click "Fetch Transcript" to begin extraction.</p>
                <pre id="transcript-content" class="hidden text-white text-xs font-medium leading-relaxed whitespace-pre-wrap font-roboto"></pre>
            </div>

            <div id="fetch-loading" class="hidden absolute inset-0 bg-canvas-soft-2/80 backdrop-blur-sm z-10 flex flex-col items-center justify-center space-y-4">
                <div class="w-12 h-12 border-4 border-hairline border-t-primary rounded-full animate-spin"></div>
                <span class="text-[10px] font-black text-primary uppercase tracking-[0.2em]">Synchronizing Stream...</span>
            </div>

            <div class="mt-8 pt-8 border-t border-hairline flex items-start gap-4">
                <div class="w-8 h-8 rounded-lg bg-primary/10 border border-primary/20 flex items-center justify-center flex-shrink-0">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" class="text-primary"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
                </div>
                <p class="text-[10px] text-mute leading-relaxed uppercase font-medium tracking-wider">
                    Powered by high-velocity extraction nodes. Transcripts are parsed in real-time and formatted for professional compatibility.
                </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <style>
    @reference "../styles/global.css";
    .format-btn.active {
        @apply border-primary bg-primary/10 text-primary;
    }
  </style>

  <script>
    const urlInput = document.getElementById('url-input') as HTMLInputElement;
    const analyzeBtn = document.getElementById('analyze-btn');
    const generateBtn = document.getElementById('generate-btn');
    const loading = document.getElementById('loading');
    const results = document.getElementById('results');
    const langSelect = document.getElementById('lang-select') as HTMLSelectElement;
    const transcriptContent = document.getElementById('transcript-content');
    const transcriptPlaceholder = document.getElementById('transcript-placeholder');
    const fetchLoading = document.getElementById('fetch-loading');
    const copyBtn = document.getElementById('copy-btn') as HTMLButtonElement;
    
    let currentSubtitleData: any = null;
    let selectedFormat = 'plain';

    // Handle format selection
    document.querySelectorAll('.format-btn').forEach(btn => {
        btn.addEventListener('click', () => {
            document.querySelectorAll('.format-btn').forEach(b => b.classList.remove('active'));
            btn.classList.add('active');
            selectedFormat = (btn as HTMLElement).dataset.format!;
        });
    });

    analyzeBtn?.addEventListener('click', async () => {
      const url = urlInput.value.trim();
      if (!url) return;

      loading?.classList.remove('hidden');
      results?.classList.add('hidden');

      try {
        const response = await fetch('/api/transcript-info', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ url })
        });

        const data = await response.json();
        if (data.error) throw new Error(data.error);

        currentSubtitleData = data;

        // Update UI
        (document.getElementById('video-thumb') as HTMLImageElement).src = data.thumbnail;
        document.getElementById('video-title')!.textContent = data.title;
        document.getElementById('video-uploader')!.textContent = data.uploader;

        // Populate Languages
        langSelect.innerHTML = '';
        const langs = Object.keys(data.languages);
        if (langs.length === 0) {
            langSelect.innerHTML = '<option value="">No captions available</option>';
            generateBtn!.setAttribute('disabled', 'true');
        } else {
            generateBtn!.removeAttribute('disabled');
            langs.forEach(code => {
                const lang = data.languages[code];
                const option = document.createElement('option');
                option.value = code;
                option.textContent = `${lang.name} ${lang.isAuto ? '(Auto)' : ''}`;
                langSelect.appendChild(option);
            });
        }

        results?.classList.remove('hidden');
        results?.classList.add('grid');
      } catch (error: any) {
        alert('Analysis failed: ' + error.message);
      } finally {
        loading?.classList.add('hidden');
      }
    });

    generateBtn?.addEventListener('click', async () => {
      const lang = langSelect.value;
      if (!lang || !currentSubtitleData) return;

      fetchLoading?.classList.remove('hidden');
      transcriptContent?.classList.add('hidden');
      transcriptPlaceholder?.classList.add('hidden');
      copyBtn.disabled = true;

      try {
        // Find URL for the selected language and format
        let subUrl = '';
        const subs = currentSubtitleData.rawSubtitles[lang] || currentSubtitleData.rawAutoCaptions[lang];
        
        if (selectedFormat === 'plain') {
            // Prefer json3 for easy plain text conversion
            const json3 = subs.find((s: any) => s.ext === 'json3');
            subUrl = json3 ? json3.url : subs[0].url;
        } else {
            // Look for specific extension
            const match = subs.find((s: any) => s.ext === selectedFormat);
            subUrl = match ? match.url : subs[0].url;
        }

        const response = await fetch('/api/transcript-fetch', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ url: subUrl, format: selectedFormat })
        });

        const data = await response.json();
        if (response.status === 429) {
            transcriptPlaceholder?.classList.remove('hidden');
            transcriptPlaceholder!.textContent = data.error;
            transcriptPlaceholder!.classList.add('text-primary');
            return;
        }
        if (data.error) throw new Error(data.error);

        transcriptContent!.textContent = data.content;
        transcriptContent?.classList.remove('hidden');
        copyBtn.disabled = false;
      } catch (error: any) {
        alert('Fetch failed: ' + error.message);
        transcriptPlaceholder?.classList.remove('hidden');
      } finally {
        fetchLoading?.classList.add('hidden');
      }
    });

    copyBtn?.addEventListener('click', () => {
        const text = transcriptContent?.textContent;
        if (text) {
            navigator.clipboard.writeText(text);
            const originalText = copyBtn.innerHTML;
            copyBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4"><polyline points="20 6 9 17 4 12"></polyline></svg> Copied!';
            setTimeout(() => {
                copyBtn.innerHTML = originalText;
            }, 2000);
        }
    });
  </script>
</Layout>