ldenoue

Bringing AI Chapters to the Browser: How Scribe Segments YouTube Transcripts with Local Models

One of the newest features in Scribe, my instant YouTube transcript web app, is AI-generated chapters and what makes it special is that the entire process runs locally, inside your browser.
No API calls, no server inference, just pure on-device intelligence powered by Transformers.js from Xenova and Hugging Face.

Why local AI?

Running locally offers three big wins:

1. Privacy: your transcript text never leaves your computer.
2. Speed: chapters are generated instantly, without waiting on a server round trip.
3. Scalability: there’s no backend load — everything happens on the client side.

ldenoue

const title = document.querySelector('.cover-title').textContent
const w = window.open('','_blank')
const doc = w.document
doc.open()
doc.title = title
const body = doc.createElement('body')
doc.appendChild(body)
const divStyle = 'padding: 16pt; box-sizing: border-box; font: 22pt serif'
const div = doc.createElement('div')
div.style = divStyle

ldenoue

<script setup lang="ts">
import { ref, onMounted, watch, computed } from 'vue'
import { Button } from '@/components/ui/button'
// Default prop values
const props = defineProps({
  variant: { default: 'default' },
  demo: { default: false },
  description: {
    default:
      'We use cookies to ensure you get the best experience on our website. For more information on how we use cookies, please see our cookie policy.',

ldenoue

import os
import onnxruntime as ort
import numpy as np
from transformers import AutoTokenizer
from huggingface_hub import hf_hub_download, errors

# Constants
HG_MODEL = "livekit/turn-detector"
ONNX_FILENAME = "model_q8.onnx"
MODEL_REVISION = "v1.2.0"

ldenoue

/* get playable urls from any YouTube video in the browser (no CORS issues) */

const videoId='tEzs3VHyBDM';
const payload = {
  videoId,
  context: {
    client: {
      hl: "en",
      clientName: "iOS",
      clientVersion: "19.45.4"

ldenoue

struct ContentView: View {
    @State private var localMonitor: Any?
    @State var hovering = false
    @State var mouseButton = -1
    var body: some View {
        Text("Mouse button")
        Button(mouseButton > 1 ? "Button\(mouseButton)" : "Configure") {
        }
        .foregroundColor(.blue)
        .frame(width: 96)

ldenoue

enter recovery mode on your Mac: restart and hold Cmd R
open Utilities -> Terminal
in the terminal, type: `csrutil disable`
restart your Mac

open a Terminal window and type: `systemextensionsctl list`
It will show something like:
```
1 extension(s)
--- com.apple.system_extension.cmio

ldenoue

if [ "$#" -eq 2 ]
then
mkdir $2

ffmpeg -y -i $1 -vf scale=16x16 $2/[email protected]
ffmpeg -y -i $1 -vf scale=32x32 $2/[email protected]
ffmpeg -y -i $1 -vf scale=32x32 $2/[email protected]
ffmpeg -y -i $1 -vf scale=64x64 $2/[email protected]

ffmpeg -y -i $1 -vf scale=128x128 $2/[email protected]

ldenoue

  override func viewDidLoad() {
        super.viewDidLoad()
        let text = """
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
"""
        let fontSize = 88.0
        let font = NSFont.systemFont(ofSize: fontSize)
        let layer = makeScrollingTextLayer(text: text, width: 800, visibleLines: 3, font: font, timing: 0.2)
        self.view.wantsLayer = true
        self.view.layer?.addSublayer(layer)

ldenoue

import Foundation
import CoreMediaIO

let CMIOExtensionPropertyCustomPropertyData_just: CMIOExtensionProperty = CMIOExtensionProperty(rawValue: "4cc_just_glob_0000")
let CMIOExtensionPropertyCustomPropertyData_dust: CMIOExtensionProperty = CMIOExtensionProperty(rawValue: "4cc_dust_glob_0000")

...

class cameraStreamSource: NSObject, CMIOExtensionStreamSource {