---
title: "Slides: How LLMs work for Web Devs: GPT in 600 lines of Vanilla JS - Ishan Anand"
category: "slides"
video_id: "ZuiJjkbX0Og"
sourceLabels: ["Public YouTube video frames", "Public YouTube metadata"]
---

# Slides: How LLMs work for Web Devs: GPT in 600 lines of Vanilla JS - Ishan Anand

## Source Video
[How LLMs work for Web Devs: GPT in 600 lines of Vanilla JS - Ishan Anand](https://www.youtube.com/watch?v=ZuiJjkbX0Og)

## Relationship To World's Fair 2026
These slides are extracted from a public AI Engineer YouTube video connected to World's Fair 2026. Speaker-matched clips are supporting context unless later confirmed as exact session recordings; official livestream recordings are day-level/event-level source material.

## Related Scheduled Sessions
- No individual scheduled session mapping has been assigned yet; treat this as an event livestream deck.

## Extracted Slides
![[assets/slides/ZuiJjkbX0Og/slide-001.jpg]]

OCR text:

> INNOVATIONPARTNER
> aws
> PLATINUMSPONSORS
> Graphite
> WWindsurf
> MongoDB
> daily
> augment code
> WorkOs

![[assets/slides/ZuiJjkbX0Og/slide-002.jpg]]

OCR text:

> “er e 1. Vist anteacishests.are-al-you-naed.i in Chrome
> Worldl's Fair ere eet sei-2008 room
> 4. Download GPT2 model in the pinned message
> HOW LLMS WORK FOR
> WEB DEVS
> GPT in 600 lines of Vanilla JavaScript
> Ishan Anand
> Spreadsheets-are-all-you-need.ai
> f aws
> “ 7
> ! |

![[assets/slides/ZuiJjkbX0Og/slide-003.jpg]]

OCR text:

> Yaseen coisa)
> This basic recipe, and the building blocks used in it, have not fundamentally changed since the
> Transformer was introduced by Goog!e Brain tn 2017, and slightly tweaked to today's left-to-right
> language made!s by OpenAl in GPT-1 and GPT-2.
> For example, the neural network architecture of Meta‘s Llama 2 model series only adopts a few
> changes that differentiate it from the original Transformer in 2017, or the Transformer as used in
> GPT-2 or GPT-3. These are the following:
> 
> 4)
> 
> RUC aes MCLs eleliCte

![[assets/slides/ZuiJjkbX0Og/slide-004.jpg]]

OCR text:

> + = Thread ao
> 
> fo) .
> 5 Rey 6 ° on
> 
> 3 igsaad ete
> 
> a “I don't even see the R's. All! soe 15302, ‘618, 19777. 198, 3504, 1134,
> ‘ , 19772. 198, 1018.30, 198, 138322. 198, 1100, 302. 1658, 19772, 256-44,
> 
> 1100, 3504, 1134, 19772, 13007
> 
> [eo] pi
> < 7 s strawberry -
> ai f Strawberry JY
> atrenbderry,
> a — Strenaber: .
> . “strawbel
> oe ; "Stramberry” BY
> ma '
> at . o
> a
> : % NDUR AW Gerla P0e4d WPM vss
> [e} A
> eR mal ate fs oS rere no ate a ea ea re
> eres PU eo FE ee Xa)
> Perec CU aie oc ORL eked
> ia ‘
> i a Mi ft emo

![[assets/slides/ZuiJjkbX0Og/slide-005.jpg]]

OCR text:

> Laurning Troasberoble Views! Models From Notaral Language Seperinion Contrastive Language-Image Pretraining (CLIP)
> he att” ing a ham hen iy Gane Rem Cobra Set tere
> Crebtcay ‘(unas ste Pana teu’ ev There temas Lreagee suuarer
> smerwt il in 8 nga id
> wee ” acumen EE em oe
> a Soot rete ete cae rope tose o
> x Ss SSS Ss J aotrhanl ape mapt mercies Mid'maed XA
> 2 SS SS
> = seer eee DLT in eaeranae
> < LSrcar emer yp alechay chrapelienr ey
> & SSI
> —_ Gped ey thc veunetea cin 1)) Conarastre pre-purwg ‘UP Create autanel Cameo: Pen thet wes
> - Resim.
> : STS
> % tet
> 2 Senne arr pera. wa a 2
> fio eed ates raed ted en wD ole te | t=
> ean eeoes =< > ——
> 5 encore
> So meatertes emt owen Reply. .
> a oe he eg ee [us * =
> 2 wooo
> = Se eR ee
> = Ty wots sat ws a en 1 Une ter pore chet prvecton tite ,
> Sake teereepnere oak ote ss eae Om safe] [s
> 2 mx rs | Me
> ry ee ae i
> 5 See | rem ee Be
> - lS os eos 3
> Ree ee
> es hearer canted pe peed mee Sp © * .
> ee Ge pee eR A ke et
> 1 batons yal Matibeaiing Push
> Aeanuny wreve wach von ames ana eg] Fagare | Seemmmary of cut approach, Wile visndard image moet jeuatly timn an wnage featnoe extractor ad a haat cLansitier bo predict
> Se | scene Label. CLIP penntly anne an wenage coooder and 1 tex encoter to predoc the carrect peunmge of 4 batch of (euage. tent) tateang
> TUE TA] enamples Attest uae the learaed lent encoder symtheuacs 4 sero-shot lnarat <lassaiier by embedding the anaes of descreptions of the
> eenn cen tet ecin flanged dataset’s clanes.
> See:
> a aT

![[assets/slides/ZuiJjkbX0Og/slide-006.jpg]]

OCR text:

> SoYgaop ce
> 
> SOURNL I Tn a re eee eee cree So
> 
> ei
> 
> , v
> 
> . 8
> 
> ' 6
> 
> eo . s
> 
> ° @
> 
> °
> 
> ‘¢ ATTENTION .
> fl aWws
> oe ~~ |

![[assets/slides/ZuiJjkbX0Og/slide-007.jpg]]

OCR text:

> Multi-head Attention
> Multilayer Perceptron

![[assets/slides/ZuiJjkbX0Og/slide-008.jpg]]

OCR text:

> SimilarArchitecture,DifferentTraining
> GPTAssistanttrainingpipeline
> AIE Dataset Stage orgygeqy Rawinternet lettllons ofwrs Pretraining -10-10k(promgesponse) sq idel Astat eponses loqunthigqulty 100k-1Mcomperisons wrien bycontracor iowquanity Nigquality Reward Modeling Reinforcement Learning Prompts -- witenbycoracos
> Algorithm Language modeling Languagemodeling ict the net token uopessepee predictreeards consisterntw preferences Reinforcement Leaming thereward
> GPT InitfromST
> Model Basemodel SFTmodel RMmodel RLmodel
> Notes ap op e 1000sofGPUs 1.100GPUS deys of tvain can deploy thsmodel 1-100GPUS das cftaning 1-100GPUs apog loap ue) deys of vaning
> https://www.youtube.com/watch?v=bZQun8Y4L2A
> Microsoft smolo

![[assets/slides/ZuiJjkbX0Og/slide-009.jpg]]

OCR text:

> Sy 2 ar EES =: See ERE OEP Sexmtmceee Me RAE GL ne ‘So
> a :
> a= ae chitecture, Different Training :
> ®
> a
> "Te GPT Assistant training pipeline a
> : Crone tiate] Supervsed Finetuning Leer RY ett fea eae rant e
> a a ee s bet gen a ee J *:
> Les a mt : : we
> . e
> Se
> cs) ease dey a eee co eT @
> | ; © ©. © 0. ©) @O27°0 ~
> Woes te ae ae Ok ChatGPT =
> 
> | a Microsoft ary?

![[assets/slides/ZuiJjkbX0Og/slide-010.jpg]]

OCR text:

> Similar Architecture, Different Training
> GPT Assistant training pipeline
> Stage Pretraining Supervised Finetuning Reward Modeling Reinforcement Learning
> Dataset
> Raw internet
> billions of words
> low quality, large quantity
> Demonstrations
> Ideal Assistant responses
> ~10-100K prompt, response
> written by contractors
> low quantity, high quality
> Comparisons
> 100K-1M comparisons
> written by contractors
> low quantity, high quality
> Prompts
> 10K-100K prompts
> written by contractors
> low quantity, high quality
> Algorithm
> Language modeling
> predict the next token
> Language modeling
> predict the next token
> Binary classification
> predict rewards consistent w preferences
> Reinforcement Learning
> generate tokens that maximize the reward
> Model
> GPT-3
> Base model
> SFT model
> RM model
> RL model
> Notes
> 1000s of GPUs
> months of training
> e.g. GPT, LLaMA, PaLM
> can deploy this model
> 1-100 GPUs
> days of training
> e.g. Vicuna-13B
> can deploy this model
> 1-100 GPUs
> days of training
> e.g. ChatGPT, Claude
> can deploy this model

![[assets/slides/ZuiJjkbX0Og/slide-011.jpg]]

OCR text:

> Spread the word on spreadsheets-are-all-you-need
> Visit Spreadsheets-are-all-you-need.ai sc peceenates one
> 3 « Mailing list & YouTube
> SPREADSHEETS ARE ALL
> * Members/Patrons YOU NEED.AI
> * Discount on full class, office hours, ae
> etc.
> Available for Al consulting
> AS SEEN ON
> * Training, Strategy & Implementation Drie econ - ~enotormmertean
> a a Microsoft = expat)

## Slide-Derived Subjects To Review
Subject extraction uses video title, related session titles/descriptions, transcript context, and OCR text when available. OCR is best-effort and should be reviewed against the embedded slide images.