[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_179":180,"_181":182},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_17":18,"_38":-7,"_120":-5,"_19":121,"_122":123,"_124":125,"_126":127,"_128":129,"_21":130,"_131":-5,"_132":-5,"_133":24,"_134":135,"_136":83,"_137":-5,"_138":-5,"_139":140},"routes/_app.x.$handle.$name.branch.$branch.history_.$",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":22,"_23":24,"_25":26,"_27":28,"_29":24,"_30":-5},"handle","MarkyMark00","name","youtube-summarizer","branchName","main","path","index.html","project",{"_32":70,"_13":14,"_36":71,"_72":-5,"_73":24,"_74":75,"_76":75,"_77":78,"_79":-5,"_30":66,"_80":81,"_82":83,"_84":-5,"_85":-5,"_86":26,"_40":41,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":92,"_93":92,"_94":95,"_96":95,"_97":95,"_98":92,"_99":92,"_52":100,"_101":102,"_103":104,"_105":24},"file",{"_62":63,"_13":18,"_64":21,"_65":24,"_69":-5},"isDirectory",false,"page",0,"history",[31],"hasNext","userId",{"_32":33,"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":-5,"_45":46,"_47":-5,"_48":-5,"_49":-5,"_50":-5,"_51":-5,"_52":53,"_21":54,"_55":-5,"_56":-5,"_57":-5,"_58":-5,"_59":60},"id","0d6043e0-3a82-406c-af4e-ef4a4cd29482","branchId","78c99bb5-504a-49fd-b685-d0efab236252","createdAt",["D",1784809961893],"version",2,"orgId","019f8ef5-558c-7399-90c3-20fd98a5ef37","parentId","44ae4d0b-f322-48ce-bd2b-51423837faee","incomingCommitId","aiChatMessageId","cb678a37-8018-40ef-82e0-9d7dc9d3dfad","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle","source","clientLabel","user",{"_32":66,"_40":41,"_11":12,"_67":68},{"_62":63,"_13":18,"_64":21,"_65":24},"pull","merge","revert","multiple","commits",[61],{"_32":33,"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":-5,"_45":46,"_47":-5,"_48":-5,"_49":-5,"_50":-5,"_51":-5,"_52":53,"_21":54,"_55":-5,"_56":-5,"_57":-5},"fileId","993cb2e8-8692-11f1-9551-1607ee4eb77e","fileType","deleted","6712f1b9-addd-4fdf-9882-8114d8e4d364","avatar","","deletedAtVersion","124890cd-113d-4a60-883a-f311f71a0dc4",["D",1784809922217],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Summarize YouTube videos by pasting a URL","imageUrl","pinnedFileId","99361c8a-8692-11f1-abda-1607ee4eb77e","pinPreview",true,"pinMigrated","screenshotVersion","likeCount","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_11":12,"_119":68},"org",{"_11":12,"_115":68,"_67":68,"_30":66,"_116":117,"_118":24},"branch",{"_38":106,"_13":16,"_32":35,"_107":70,"_108":-5,"_109":-5,"_110":-5,"_111":-5,"_112":-5,"_113":14,"_114":12},"isOwned",7,"projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_32":70,"_13":14,"_36":175,"_72":-5,"_73":24,"_74":75,"_76":75,"_77":78,"_79":-5,"_30":66,"_80":81,"_82":83,"_84":-5,"_85":-5,"_86":26,"_40":41,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":92,"_93":92,"_94":95,"_96":95,"_97":95,"_98":92,"_99":92,"_52":176,"_101":177,"_103":178,"_105":24},"tree",[160,161],"files",[160,161],"counts",{"_149":26,"_150":151,"_152":26,"_153":154,"_155":156},"contents",[],{"_32":141,"_13":18,"_62":63,"_42":-5,"_34":35,"_142":39,"_143":83,"_36":144,"_38":26,"_64":21,"_145":146,"_65":24,"_147":-5,"_17":148},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},"e3ea9612-3657-4c33-94a7-8dc16e0fbd79","branchVersion","latest",["D",1784809961893],"content","\n\n\n \n \n YouTube Summarizer\n \n\n\n

▶ YouTube Summarizer

Paste any YouTube URL to get an instant summary

\n \n \n

\n \n\n \n\n\n","label",[18],"pulls","branches",1,"forks","envVars",{"_157":39,"_159":26},"connections",{"_157":26,"_158":26},"count","unfilledCount","emptyCount",{"_32":141,"_13":18,"_62":63,"_42":-5,"_34":35,"_142":39,"_143":83,"_36":172,"_38":26,"_64":21,"_145":146,"_65":24,"_147":-5,"_169":173,"_17":174},{"_32":162,"_13":163,"_62":81,"_42":-5,"_34":35,"_142":106,"_143":83,"_36":164,"_38":165,"_64":166,"_145":167,"_65":24,"_147":168,"_169":170,"_17":171},"7893e0fc-b975-41b1-a888-fbbd7c750997","main.ts",["D",1785581988956],5,"http","// YouTube -> AI summary web app for Val.town (HTTP val, Deno runtime).\n//\n// Features:\n// - Model picker (Opus / Haiku), detail picker (short / standard / long)\n// - Exact spend tracking per summary + running total, optional \"credits added\"\n// figure to show estimated remaining balance\n// - History with Group by: Channel / Folder / Date; custom folders;\n// per-entry delete; stored in Val.town Blob Storage\n//\n// SETUP: env vars ANTHROPIC_API_KEY (required), SUPADATA_API_KEY (transcript\n// fallback). History needs no setup — uses built-in blob storage.\n\nimport { blob } from \"https://esm.town/v/std/blob\";\n\n// Model id + price per million tokens (input, output).\nconst MODELS: Record = {\n opus: { id: \"claude-opus-4-8\", in: 5, out: 25 },\n haiku: { id: \"claude-haiku-4-5\", in: 1, out: 5 },\n};\n\nconst DETAILS: Record = {\n short: {\n maxTokens: 500,\n instruction:\n \"Give a very short TL;DR of the transcript: 4-6 bullet points maximum, no headers. \" +\n \"Only the most important takeaways.\",\n },\n standard: {\n maxTokens: 1500,\n instruction:\n \"Summarize the transcript as concise bulleted key points, grouped under short bold headers.\",\n },\n long: {\n maxTokens: 3000,\n instruction:\n \"Write a detailed summary of the transcript: grouped bold headers, thorough bullet points \" +\n \"covering every topic discussed (including specific numbers, names, and claims), and end \" +\n \"with a one-paragraph overall takeaway.\",\n },\n};\n\nconst SYSTEM_BASE =\n \"You summarize YouTube video transcripts. If the content is opinion or promotional, \" +\n \"say so briefly at the end. Do not invent facts that aren't in the transcript. \";\n\nconst MAX_TRANSCRIPT_CHARS = 200_000;\nconst STORE_KEY = \"yt_summary_history\";\nconst HISTORY_LIMIT = 500;\n\n// --- types ----------------------------------------------------------------\n\n// A highlight is stored by position, not by text: b = index of the rendered\n// block (h3/p/li) within the summary, s/e = character offsets inside it.\n// Positions are stable because summaries are immutable once created.\ntype Highlight = { id: string; b: number; s: number; e: number };\n\ntype Entry = {\n id: string;\n date: string;\n videoId: string;\n url: string;\n title: string;\n channel: string | null;\n channelUrl: string | null;\n model: string;\n detail: string;\n summary: string;\n folder: string | null;\n highlights: Highlight[];\n inputTokens: number;\n outputTokens: number;\n cost: number;\n};\n\ntype Store = {\n version: number;\n folders: string[];\n entries: Entry[];\n creditsAdded: number;\n};\n\n// --- router ---------------------------------------------------------------\n\nexport default async function (req: Request): Promise {\n const path = new URL(req.url).pathname;\n\n try {\n if (req.method === \"GET\" && path === \"/history\") {\n return json(await historyPayload());\n }\n\n if (req.method === \"POST\" && path === \"/entry/delete\") {\n const { id } = await req.json();\n const store = await loadStore();\n store.entries = store.entries.filter((e) => e.id !== id);\n await saveStore(store);\n return json(await historyPayload());\n }\n\n if (req.method === \"POST\" && path === \"/entry/highlights\") {\n const { id, highlights } = await req.json();\n const store = await loadStore();\n const entry = store.entries.find((e) => e.id === id);\n if (entry) entry.highlights = Array.isArray(highlights) ? highlights : [];\n await saveStore(store);\n return json({ ok: true });\n }\n\n if (req.method === \"POST\" && path === \"/entry/folder\") {\n const { id, folder } = await req.json();\n const store = await loadStore();\n const entry = store.entries.find((e) => e.id === id);\n if (entry) entry.folder = folder || null;\n if (folder && !store.folders.includes(folder)) store.folders.push(folder);\n await saveStore(store);\n return json(await historyPayload());\n }\n\n if (req.method === \"POST\" && path === \"/folders\") {\n const { action, name, newName } = await req.json();\n const store = await loadStore();\n if (action === \"create\" && name && !store.folders.includes(name)) {\n store.folders.push(name);\n } else if (action === \"rename\" && name && newName) {\n store.folders = store.folders.map((f) => (f === name ? newName : f));\n store.entries.forEach((e) => {\n if (e.folder === name) e.folder = newName;\n });\n } else if (action === \"delete\" && name) {\n // Removes the folder only — the summaries inside become unfiled.\n store.folders = store.folders.filter((f) => f !== name);\n store.entries.forEach((e) => {\n if (e.folder === name) e.folder = null;\n });\n }\n await saveStore(store);\n return json(await historyPayload());\n }\n\n if (req.method === \"POST\" && path === \"/credits\") {\n const { added } = await req.json();\n const store = await loadStore();\n store.creditsAdded = Math.max(0, Number(added) || 0);\n await saveStore(store);\n return json(await historyPayload());\n }\n\n if (req.method === \"POST\" && path === \"/backfill\") {\n const store = await loadStore();\n const missing = store.entries.filter((e) => !e.channel);\n for (let i = 0; i < missing.length; i += 8) {\n const batch = missing.slice(i, i + 8);\n await Promise.all(\n batch.map(async (e) => {\n const meta = await getMeta(e.videoId);\n e.channel = meta.channel ?? \"Unknown\";\n e.channelUrl = meta.channelUrl ?? null;\n if (meta.title && /^Video /.test(e.title)) e.title = meta.title;\n }),\n );\n }\n await saveStore(store);\n return json(await historyPayload());\n }\n\n if (req.method === \"DELETE\" && path === \"/history\") {\n const store = await loadStore();\n store.entries = [];\n await saveStore(store);\n return json(await historyPayload());\n }\n\n if (req.method === \"POST\" && path === \"/\") {\n return await handleSummarize(req);\n }\n\n if (req.method === \"GET\") {\n return new Response(PAGE_HTML, {\n headers: { \"content-type\": \"text/html; charset=utf-8\" },\n });\n }\n } catch (err) {\n return json({ error: (err as Error).message }, 400);\n }\n\n return new Response(\"Not found\", { status: 404 });\n}\n\nasync function handleSummarize(req: Request): Promise {\n try {\n const body = await req.json();\n const videoId = extractVideoId(body.url ?? \"\");\n if (!videoId) {\n throw new Error(\"Couldn't find a valid YouTube video ID in that link.\");\n }\n\n const modelKey = body.model in MODELS ? body.model : \"opus\";\n const detailKey = body.detail in DETAILS ? body.detail : \"standard\";\n const model = MODELS[modelKey];\n\n let transcript = await getTranscript(videoId);\n let truncated = false;\n if (transcript.length > MAX_TRANSCRIPT_CHARS) {\n transcript = transcript.slice(0, MAX_TRANSCRIPT_CHARS);\n truncated = true;\n }\n\n const result = await summarize(\n transcript,\n truncated,\n model.id,\n DETAILS[detailKey],\n );\n const meta = await getMeta(videoId);\n const cost = (result.inputTokens / 1e6) * model.in +\n (result.outputTokens / 1e6) * model.out;\n\n const entry: Entry = {\n id: crypto.randomUUID(),\n date: new Date().toISOString(),\n videoId,\n url: `https://www.youtube.com/watch?v=${videoId}`,\n title: meta.title ?? `Video ${videoId}`,\n channel: meta.channel ?? \"Unknown\",\n channelUrl: meta.channelUrl ?? null,\n model: modelKey,\n detail: detailKey,\n summary: result.text,\n folder: null,\n highlights: [],\n inputTokens: result.inputTokens,\n outputTokens: result.outputTokens,\n cost,\n };\n\n const store = await loadStore();\n store.entries.unshift(entry);\n store.entries = store.entries.slice(0, HISTORY_LIMIT);\n await saveStore(store);\n\n return json({ entry });\n } catch (err) {\n return json({ error: (err as Error).message }, 400);\n }\n}\n\n// --- store ----------------------------------------------------------------\n\nasync function loadStore(): Promise {\n const raw = await blob.getJSON(STORE_KEY);\n if (!raw) return { version: 2, folders: [], entries: [], creditsAdded: 0 };\n // Migrate v1 (plain array of entries) -> v2.\n if (Array.isArray(raw)) {\n return {\n version: 2,\n folders: [],\n creditsAdded: 0,\n entries: raw.map((e: Partial) => ({\n channel: null,\n channelUrl: null,\n folder: null,\n highlights: [],\n inputTokens: 0,\n outputTokens: 0,\n cost: 0,\n ...e,\n })) as Entry[],\n };\n }\n const s = raw as Store;\n s.folders ??= [];\n s.entries ??= [];\n s.creditsAdded ??= 0;\n s.entries.forEach((e) => {\n e.highlights ??= [];\n });\n return s;\n}\n\nasync function saveStore(store: Store): Promise {\n await blob.setJSON(STORE_KEY, store);\n}\n\nasync function historyPayload() {\n const store = await loadStore();\n const now = new Date();\n const monthKey = now.toISOString().slice(0, 7);\n let total = 0;\n let month = 0;\n for (const e of store.entries) {\n total += e.cost || 0;\n if ((e.date ?? \"\").slice(0, 7) === monthKey) month += e.cost || 0;\n }\n return {\n entries: store.entries,\n folders: store.folders.slice().sort((a, b) => a.localeCompare(b)),\n needsBackfill: store.entries.some((e) => !e.channel),\n stats: {\n total,\n month,\n creditsAdded: store.creditsAdded,\n remaining: store.creditsAdded > 0 ? store.creditsAdded - total : null,\n },\n };\n}\n\n// --- YouTube --------------------------------------------------------------\n\nfunction extractVideoId(input: string): string | null {\n const s = String(input).trim();\n if (/^[A-Za-z0-9_-]{11}$/.test(s)) return s;\n const m = s.match(\n /(?:v=|youtu\\.be\\/|\\/live\\/|\\/shorts\\/|\\/embed\\/)([A-Za-z0-9_-]{11})/,\n );\n return m ? m[1] : null;\n}\n\nasync function getMeta(\n videoId: string,\n): Promise<\n { title: string | null; channel: string | null; channelUrl: string | null }\n> {\n try {\n const r = await fetch(\n `https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=${videoId}&format=json`,\n );\n if (r.ok) {\n const d = await r.json();\n return {\n title: d.title ?? null,\n channel: d.author_name ?? null,\n channelUrl: d.author_url ?? null,\n };\n }\n } catch {\n /* metadata is nice-to-have */\n }\n return { title: null, channel: null, channelUrl: null };\n}\n\nasync function getTranscript(videoId: string): Promise {\n try {\n return await getTranscriptDirect(videoId);\n } catch (directErr) {\n const supadataKey = Deno.env.get(\"SUPADATA_API_KEY\");\n if (supadataKey) return await getTranscriptSupadata(videoId, supadataKey);\n throw new Error(\n \"Couldn't get a transcript for this video (it may have captions disabled, \" +\n \"or YouTube blocked the request). \" + (directErr as Error).message,\n );\n }\n}\n\nasync function getTranscriptDirect(videoId: string): Promise {\n const watchRes = await fetch(`https://www.youtube.com/watch?v=${videoId}`, {\n headers: {\n \"User-Agent\":\n \"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 \" +\n \"(KHTML, like Gecko) Chrome/124.0 Safari/537.36\",\n \"Accept-Language\": \"en-US,en;q=0.9\",\n \"Cookie\": \"CONSENT=YES+1\",\n },\n });\n const html = await watchRes.text();\n const m = html.match(\n /\"baseUrl\":\"(https:\\/\\/www\\.youtube\\.com\\/api\\/timedtext[^\"]+)\"/,\n );\n if (!m) throw new Error(\"No caption track found on the page.\");\n\n const trackUrl = m[1].replace(/\\\\u0026/g, \"&\");\n const xmlRes = await fetch(trackUrl, {\n headers: { \"Accept-Language\": \"en-US,en;q=0.9\" },\n });\n const xml = await xmlRes.text();\n const decoded = decodeEntities(\n xml.replace(/<[^>]+>/g, \" \").replace(/\\s+/g, \" \").trim(),\n );\n if (!decoded) throw new Error(\"Caption track was empty.\");\n return decoded;\n}\n\nasync function getTranscriptSupadata(\n videoId: string,\n key: string,\n): Promise {\n const videoUrl = encodeURIComponent(\n `https://www.youtube.com/watch?v=${videoId}`,\n );\n const res = await fetch(\n `https://api.supadata.ai/v1/transcript?url=${videoUrl}&text=true`,\n {\n headers: { \"x-api-key\": key },\n },\n );\n if (!res.ok) throw new Error(`Transcript API error (${res.status}).`);\n const data = await res.json();\n const content = data.content ?? \"\";\n if (!content) throw new Error(\"Transcript API returned no content.\");\n return typeof content === \"string\"\n ? content\n : content.map((c: { text: string }) => c.text).join(\" \");\n}\n\nfunction decodeEntities(s: string): string {\n return s\n .replace(/&/g, \"&\")\n .replace(/'/g, \"'\")\n .replace(/"/g, '\"')\n .replace(/</g, \"<\")\n .replace(/>/g, \">\")\n .replace(/ /g, \" \")\n .replace(/&#(\\d+);/g, (_, n) => String.fromCharCode(Number(n)));\n}\n\n// --- Claude ---------------------------------------------------------------\n\nasync function summarize(\n transcript: string,\n truncated: boolean,\n modelId: string,\n detail: { maxTokens: number; instruction: string },\n): Promise<{ text: string; inputTokens: number; outputTokens: number }> {\n const apiKey = Deno.env.get(\"ANTHROPIC_API_KEY\");\n if (!apiKey) throw new Error(\"Server is missing ANTHROPIC_API_KEY.\");\n\n const userContent = truncated\n ? \"NOTE: transcript was truncated for length.\\n\\n\" + transcript\n : transcript;\n\n const res = await fetch(\"https://api.anthropic.com/v1/messages\", {\n method: \"POST\",\n headers: {\n \"x-api-key\": apiKey,\n \"anthropic-version\": \"2023-06-01\",\n \"content-type\": \"application/json\",\n },\n body: JSON.stringify({\n model: modelId,\n max_tokens: detail.maxTokens,\n system: SYSTEM_BASE + detail.instruction,\n messages: [{ role: \"user\", content: userContent }],\n }),\n });\n\n if (!res.ok) {\n const body = await res.text();\n throw new Error(`Claude API error (${res.status}): ${body.slice(0, 300)}`);\n }\n const data = await res.json();\n return {\n text: data.content?.[0]?.text ?? \"(no summary returned)\",\n inputTokens: data.usage?.input_tokens ?? 0,\n outputTokens: data.usage?.output_tokens ?? 0,\n };\n}\n\nfunction json(obj: unknown, status = 200): Response {\n return new Response(JSON.stringify(obj), {\n status,\n headers: { \"content-type\": \"application/json\" },\n });\n}\n\n// --- page -----------------------------------------------------------------\n\nconst PAGE_HTML = `\n\n\n\n\nYouTube Summary\n\n\n\n

📺 YouTube → Key Points

Paste a YouTube link and get an AI summary.\n Select any text in a summary to highlight it; tap a highlight to remove it.

\n\n

\n \n \n

\n \n

\n \n \n

\n\n

Spending

Loading…

\n\n

History

\n Group by\n \n \n \n

Loading…

\n\n \n\n\n\n`;","markylang-youtube-summary-v1","children",[],[163],["D",1784809961893],[],[18],["D",1784809922217],{"_11":12,"_119":68},{"_11":12,"_115":68,"_67":68,"_30":66,"_116":117,"_118":24},{"_38":106,"_13":16,"_32":35,"_107":70,"_108":-5,"_109":-5,"_110":-5,"_111":-5,"_112":-5,"_113":14,"_114":12},"ctx",{"_52":-5,"_138":212,"_213":214,"_215":216,"_217":24,"_218":24,"_219":24,"_220":83,"_221":-5,"_222":-7,"_223":-7,"_224":26,"_225":24,"_226":24,"_227":-5,"_228":24,"_229":24,"_230":24,"_231":-5},"ENV",{"_183":184,"_185":186,"_187":16,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209,"_210":211},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · index.html