[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_166":167,"_168":169},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_125":-5,"_20":126,"_22":127,"_128":129,"_130":131,"_26":132,"_24":133,"_134":-5,"_135":-5,"_136":63,"_137":138,"_139":57,"_140":-5,"_141":-5,"_142":143},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5},"handle","MarkyMark00","name","youtube-summarizer","branchName","main","version","path","index.html","project",{"_33":71,"_13":14,"_44":72,"_73":-5,"_74":63,"_75":76,"_77":76,"_78":79,"_80":-5,"_81":82,"_83":54,"_84":57,"_85":-5,"_86":-5,"_87":42,"_88":89,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":95,"_96":95,"_97":98,"_99":98,"_100":98,"_101":95,"_102":95,"_103":104,"_105":106,"_107":108,"_109":63},"tree",[50,51],"file",{"_33":34,"_35":36,"_37":38,"_13":19,"_39":40,"_41":24,"_17":42,"_43":-5,"_44":45,"_46":47,"_48":-5,"_18":49},"contents",[],"upstream","pull","ahead","behind","envVars","id","e3ea9612-3657-4c33-94a7-8dc16e0fbd79","branchId","78c99bb5-504a-49fd-b685-d0efab236252","fileId","993cb2e8-8692-11f1-9551-1607ee4eb77e","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","fileType",0,"parentId","createdAt",["D",1784809961893],"branchVersion",2,"label",[19],{"_33":34,"_13":19,"_37":38,"_43":-5,"_35":36,"_46":47,"_56":57,"_44":68,"_17":42,"_41":24,"_39":40,"_62":63,"_48":-5,"_65":69,"_18":70},{"_33":52,"_13":53,"_37":54,"_43":-5,"_35":36,"_46":55,"_56":57,"_44":58,"_17":59,"_41":60,"_39":61,"_62":63,"_48":64,"_65":66,"_18":67},"7893e0fc-b975-41b1-a888-fbbd7c750997","main.ts","99361c8a-8692-11f1-abda-1607ee4eb77e",7,"latest",true,["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`;","deleted",false,"markylang-youtube-summary-v1","children",[],[53],["D",1784809961893],[],[19],"124890cd-113d-4a60-883a-f311f71a0dc4",["D",1784809922217],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Summarize YouTube videos by pasting a URL","imageUrl","userId","6712f1b9-addd-4fdf-9882-8114d8e4d364","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","019f8ef5-558c-7399-90c3-20fd98a5ef37","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_124":119},"org",{"_11":12,"_118":119,"_120":119,"_81":82,"_121":122,"_123":63},"branch",{"_17":55,"_13":16,"_33":36,"_110":71,"_111":-5,"_112":-5,"_113":-5,"_114":-5,"_115":-5,"_116":14,"_117":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","","avatar","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_33":71,"_13":14,"_44":162,"_73":-5,"_74":63,"_75":76,"_77":76,"_78":79,"_80":-5,"_81":82,"_83":54,"_84":57,"_85":-5,"_86":-5,"_87":42,"_88":89,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":95,"_96":95,"_97":98,"_99":98,"_100":98,"_101":95,"_102":95,"_103":163,"_105":164,"_107":165,"_109":63},[156,157],"files",[156,157],"counts",{"_146":42,"_147":148,"_149":42,"_32":150,"_151":152},[],{"_33":34,"_13":19,"_37":38,"_43":-5,"_35":36,"_46":47,"_56":57,"_44":144,"_17":42,"_41":24,"_39":40,"_62":63,"_48":-5,"_18":145},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1784809961893],[19],"pulls","branches",1,"forks",{"_153":47,"_155":42},"connections",{"_153":42,"_154":42},"count","unfilledCount","emptyCount",{"_33":34,"_13":19,"_37":38,"_43":-5,"_35":36,"_46":47,"_56":57,"_44":68,"_17":42,"_41":24,"_39":40,"_62":63,"_48":-5,"_65":160,"_18":161},{"_33":52,"_13":53,"_37":54,"_43":-5,"_35":36,"_46":55,"_56":57,"_44":58,"_17":59,"_41":60,"_39":61,"_62":63,"_48":64,"_65":158,"_18":159},[],[53],[],[19],["D",1784809922217],{"_11":12,"_124":119},{"_11":12,"_118":119,"_120":119,"_81":82,"_121":122,"_123":63},{"_17":55,"_13":16,"_33":36,"_110":71,"_111":-5,"_112":-5,"_113":-5,"_114":-5,"_115":-5,"_116":14,"_117":12},"ctx",{"_103":-5,"_141":199,"_200":201,"_202":203,"_204":63,"_205":63,"_206":63,"_207":57,"_208":-5,"_209":-7,"_210":-7,"_211":42,"_212":63,"_213":63,"_214":-5,"_215":63,"_216":63,"_217":63,"_218":-5},"ENV",{"_170":171,"_172":173,"_174":16,"_175":176,"_177":178,"_179":180,"_181":182,"_183":184,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194,"_195":196,"_197":198},"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"]