From 3c6bfa1aaa115586e8bdd07fa13cd2c8f6821d7f Mon Sep 17 00:00:00 2001
From: Abdussamet Kocak <abdus@abdus.dev>
Date: Sun, 5 Apr 2026 09:45:32 +0200
Subject: [PATCH] feat: Add Youtube video summarizer

---
 youtube.html | 365 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 365 insertions(+)
 create mode 100644 youtube.html
diff --git a/youtube.html b/youtube.html
new file mode 100644
index 0000000..d0f2955
--- /dev/null
+++ b/youtube.html
@@ -0,0 +1,365 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>YouTube Video Summarizer</title>
+        <style>
+            :root {
+                color-scheme: light dark;
+                --bg: #fff;
+                --bg-alt: #f5f5f5;
+                --text: #000;
+                --text-muted: #666;
+                --border: #ddd;
+                --accent: #4285f4;
+            }
+
+            @media (prefers-color-scheme: dark) {
+                :root {
+                    --bg: #1a1a1a;
+                    --bg-alt: #2a2a2a;
+                    --text: #fff;
+                    --text-muted: #aaa;
+                    --border: #444;
+                    --accent: #5a9fff;
+                }
+            }
+
+            *,
+            *::before,
+            *::after {
+                box-sizing: border-box;
+            }
+
+            body {
+                font-family: "JetBrains Mono", monospace;
+                line-height: 1.6;
+                font-size: 16px;
+                padding: 2rem;
+                max-width: 1200px;
+                margin: 0 auto;
+                background: var(--bg);
+                color: var(--text);
+                transition:
+                    background 0.2s,
+                    color 0.2s;
+            }
+
+            .container {
+                padding: 0;
+            }
+
+            .form-group {
+                display: none;
+            }
+
+            .loading {
+                text-align: center;
+                color: var(--text-muted);
+                margin: 2rem 0;
+            }
+
+            .spinner {
+                display: inline-block;
+                width: 1rem;
+                height: 1rem;
+                border: 3px solid var(--bg-alt);
+                border-top: 3px solid var(--accent);
+                border-radius: 50%;
+                animation: spin 1s linear infinite;
+                margin-right: 0.5rem;
+            }
+
+            @keyframes spin {
+                0% {
+                    transform: rotate(0deg);
+                }
+                100% {
+                    transform: rotate(360deg);
+                }
+            }
+
+            #summary {
+                margin-top: 0;
+                padding: 0;
+            }
+
+            #summary :is(ul, ol) {
+                margin: 1rem 0;
+                padding-left: 1.5rem;
+            }
+
+            #summary :is(ul, ol) :is(ul, ol) {
+                padding-left: 1.5rem;
+                margin: 0.5rem 0;
+            }
+
+            #summary li {
+                margin-bottom: 0.5rem;
+            }
+
+            #summary blockquote {
+                border-left: 3px solid var(--border);
+                padding-left: 1rem;
+                margin: 1rem 0;
+                color: var(--text-muted);
+                font-style: italic;
+            }
+
+            #summary h2,
+            #summary h3 {
+                margin: 1.5rem 0 0.5rem 0;
+            }
+
+            .error {
+                background: #c33;
+                color: #fff;
+                padding: 1rem;
+                border-radius: 4px;
+                margin: 1rem 0;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="container">
+            <div class="form-group">
+                <input type="text" id="videoUrl" placeholder="https://www.youtube.com/watch?v=..." />
+                <textarea id="video" placeholder="Video transcript"></textarea>
+            </div>
+
+            <button id="summarizeBtn" style="display: none"></button>
+
+            <div id="loading" class="loading" style="display: none">
+                <div class="spinner"></div>
+                Generating summary...
+            </div>
+
+            <div id="error" class="error" style="display: none"></div>
+
+            <div id="summary"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/markdown-it@14.1.0/dist/markdown-it.min.js"></script>
+        <script>
+            const videoUrlInput = document.getElementById("videoUrl");
+            const textInput = document.getElementById("text");
+            const summarizeBtn = document.getElementById("summarizeBtn");
+            const loadingDiv = document.getElementById("loading");
+            const errorDiv = document.getElementById("error");
+            const summaryDiv = document.getElementById("summary");
+
+            // Pre-fill with YouTube URL if available and auto-submit
+            if (window.env?.YOUTUBE_URL || window.env?.YOUTUBE_TRANSCRIPT) {
+                if (window.env?.YOUTUBE_URL) videoUrlInput.value = window.env.YOUTUBE_URL;
+                if (document.readyState === "loading") {
+                    document.addEventListener("DOMContentLoaded", () => summarizeBtn.click());
+                } else {
+                    summarizeBtn.click();
+                }
+            }
+
+            summarizeBtn.addEventListener("click", async () => {
+                const url = videoUrlInput.value.trim();
+                const transcript = window.env?.YOUTUBE_TRANSCRIPT;
+
+                if (!transcript && !url) {
+                    showError("Please enter a YouTube URL");
+                    return;
+                }
+
+                if (!transcript) {
+                    // Validate YouTube URL
+                    const youtubeUrlPattern = /^https?:\/\/(www\.)?youtube\.com\/watch\?v=.+$|^https?:\/\/youtu\.be\/.+$/;
+                    if (!youtubeUrlPattern.test(url)) {
+                        showError("Please enter a valid YouTube URL");
+                        return;
+                    }
+                }
+
+                await summarize(url, transcript);
+            });
+
+            function showError(message) {
+                errorDiv.textContent = message;
+                errorDiv.style.display = "block";
+            }
+
+            function hideError() {
+                errorDiv.style.display = "none";
+                errorDiv.textContent = "";
+            }
+
+            async function summarize(url, transcript) {
+                hideError();
+                summaryDiv.innerHTML = "";
+                loadingDiv.style.display = "block";
+                summarizeBtn.disabled = true;
+
+                const prompt = `
+                    Give me keypoints of this video transcript, with enough context, also with quotes from the content.
+                    Only the summary please.
+                    Skip promotions.
+                    Do not censor profanity.
+                    Formatted in valid markdown without any wrappers or code blocks.
+                    `;
+
+                let fullResponse = "";
+                const abortController = new AbortController();
+
+                try {
+                    await chatWithGemini({
+                        prompt: prompt,
+                        messages: [{ role: "user", content: transcript ?? url }],
+                        model: "gemini-3-flash-preview",
+                        onContent: (text) => {
+                            fullResponse += text;
+                            summaryDiv.innerHTML = markdownToHtml(fullResponse);
+                        },
+                        onError: (err) => {
+                            showError(`Error: ${err.message}`);
+                            loadingDiv.style.display = "none";
+                            summarizeBtn.disabled = false;
+                        },
+                        signal: abortController.signal,
+                    });
+
+                    loadingDiv.style.display = "none";
+                } catch (err) {
+                    showError(`Error: ${err.message}`);
+                    loadingDiv.style.display = "none";
+                } finally {
+                    summarizeBtn.disabled = false;
+                }
+            }
+
+            const md = markdownit({ html: false });
+            function markdownToHtml(markdown) {
+                return md.render(markdown);
+            }
+
+            async function chatWithGemini({ prompt, onContent, onError, messages, signal, apiKey = window.env.GEMINI_API_KEY, model }) {
+                const contents = messages.map((msg, i, arr) => {
+                    const role = msg.role === "assistant" ? "model" : "user";
+                    let parts = [{ text: msg.content }];
+
+                    // Add YouTube URLs as file data for the final user message
+                    const isLastMessage = i === arr.length - 1;
+                    if (isLastMessage && role === "user") {
+                        const youtubeUrlPattern = /https?:\/\/(www\.)?youtube\.com\/watch\?v=[\w-]+|https?:\/\/youtu\.be\/[\w-]+/g;
+                        const youtubeUrls = msg.content.match(youtubeUrlPattern) || [];
+                        const fileParts = youtubeUrls.map((url) => ({ file_data: { file_uri: url } }));
+                        parts = [...parts, ...fileParts];
+                    }
+
+                    return {
+                        role,
+                        parts,
+                    };
+                });
+
+                try {
+                    const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/${model}:streamGenerateContent?key=${apiKey}`, {
+                        method: "POST",
+                        headers: { "Content-Type": "application/json" },
+                        body: JSON.stringify({
+                            ...(prompt ? { system_instruction: { parts: [{ text: prompt }] } } : {}),
+                            contents,
+                            generationConfig: {
+                                thinkingConfig: { thinkingLevel: "low" },
+                            },
+                        }),
+                        signal,
+                    });
+
+                    if (!response.ok) {
+                        const text = await response.text();
+                        await onError?.(new Error(`Gemini API Error ${response.status}: ${text}`));
+                        return;
+                    }
+
+                    const reader = response.body.getReader();
+                    const decoder = new TextDecoder();
+                    let buffer = "";
+
+                    while (true) {
+                        const { done, value } = await reader.read();
+                        if (done) break;
+
+                        buffer += decoder.decode(value, { stream: true });
+
+                        let pos = 0;
+                        while (pos < buffer.length) {
+                            // Find start of JSON object
+                            const start = buffer.indexOf("{", pos);
+                            if (start === -1) break;
+
+                            // Find matching closing brace
+                            let depth = 0;
+                            let inString = false;
+                            let escaped = false;
+                            let end = -1;
+
+                            for (let i = start; i < buffer.length; i++) {
+                                const ch = buffer[i];
+
+                                if (escaped) {
+                                    escaped = false;
+                                    continue;
+                                }
+
+                                if (ch === "\\") {
+                                    escaped = true;
+                                    continue;
+                                }
+
+                                if (ch === '"') {
+                                    inString = !inString;
+                                    continue;
+                                }
+
+                                if (!inString) {
+                                    if (ch === "{") depth++;
+                                    else if (ch === "}") {
+                                        depth--;
+                                        if (depth === 0) {
+                                            end = i;
+                                            break;
+                                        }
+                                    }
+                                }
+                            }
+
+                            if (end === -1) {
+                                // Incomplete JSON, keep it in buffer
+                                buffer = buffer.slice(start);
+                                break;
+                            }
+
+                            // Parse and process JSON
+                            try {
+                                const json = JSON.parse(buffer.slice(start, end + 1));
+                                const parts = json.candidates?.[0]?.content?.parts || [];
+                                const text = parts
+                                    .filter((p) => p.text)
+                                    .map((p) => p.text)
+                                    .join("");
+
+                                if (text) await onContent(text);
+                            } catch (e) {
+                                // Ignore parse errors
+                            }
+
+                            pos = end + 1;
+                        }
+
+                        // Keep only unparsed remainder
+                        buffer = buffer.slice(pos);
+                    }
+                } catch (err) {
+                    if (err.name !== "AbortError") await onError?.(err);
+                }
+            }
+        </script>
+    </body>
+</html>
