Machine learning engineer · Coframe · San Francisco

Jonathan Gu

I build the machine learning that decides what you see next.

Recommendations, search and feeds at Coframe, built end to end: from raw shopper events to models serving live storefronts. Father of two. I think interfaces should be alive.

Everything here is drawn in ink, and everything works. Press things.Everything here is drawn in ink. Turn on JavaScript and the drawings come alive.

Fig. 01The capsule recommenderTurn the crank for your top pick. Open it, and the queue re-sorts.
Hand-inked drawing of a capsule machine holding one capsule for each of the twelve things on this page, queued on a spiral track

Ask the page

Big buttons. Real things happen.

Or ask a figureJump to a drawing

Show me rails Search for something Reorder the grid Run the factory Run an A/B test Start the engine Play the arcade Ride the bike Race the boats Sound the siren Read a bedtime story Sing Five Little Ducks Make pancakes Check the mail

01 — The shelf

Your shelf

A real recommender, running in this tab. Every drawing on this page sits somewhere in five topics. Play with one and the shelf updates what you seem to like, scores everything against it, keeps rows from turning into an echo chamber, saves one slot for exploring, and reorders itself. It learns only from what you deliberately open or play. Nothing is stored and nothing leaves your browser.

Cold start: these are Jonathan’s picks.

  1. 01Recommendation railsRails that rank themselves.Jonathan’s pick
  2. 02SearchWords in. The right products out.Jonathan’s pick
  3. 03Feeds & gridsEvery grid, ordered for one person.Jonathan’s pick
  4. 04The ML factoryRaw events in. Live models out.Jonathan’s pick
  5. 05Head to headLive shoppers decide.Jonathan’s pick
  6. 06The experiment engineEvery experiment feeds the next.Jonathan’s pick
  7. 07“I do it”From “help me” to “I do it.”Jonathan’s pick
  8. 08Little boat, fat boatThe little boat is Maggie.Jonathan’s pick
  9. 09Anything with wheelsIf it rolls, it gets studied.Jonathan’s pick
  10. 10Five books at bedtimeFive is the largest reasonable number.Jonathan’s pick
  11. 11Two languagesFive little ducks, in Mandarin.Jonathan’s pick
  12. 12Saturday pancakesHe mixes. She eats the cheese.Jonathan’s pick

Same loop. Different scale.

On this pageAt Coframe
What gets rankedTwelve drawingsLive product catalogs
What it learns fromThe drawings you open and playReal shopper behavior, from the first visit
The modelA Dirichlet over five topicsLearned embeddings and rankers
How it stays freshUpdates after every openUpdates after the next product view and retrains on schedule
Where it runsYour browser, in a fraction of a millisecondA production ML API, fast enough to add no visible wait
How we know it worksYou watch it moveEvery model ships as an A/B test against what was already there

02 — The workshop · At Coframe

Recommendations. Search. Feeds.

All machine learning. All live.

Coframe uses AI to optimize and personalize websites. I build the machine learning underneath, end to end: the models that decide what each shopper sees, the platform that trains and serves them for every client, and the experiments that prove they work. Each machine below runs the real idea. Press its buttons.

Fig. 02

Recommendation rails

Rails that rank themselves.

Hand-inked drawing of a toy train whose cars carry products in ranked order, wired to a signal box marked MODEL

“You may also like.” “Complete the look.” “Recommended for you.” Rails that personalize from a shopper’s first visit and update after their next product view.

Fig. 03

Words in. The right products out.

Models that rerank results by what a shopper means, trained on how people actually search and click across many stores.

Fig. 04

Feeds & grids

Every grid, ordered for one person.

Hand-inked drawing of a three by three cubby shelf of product cards beside a taste meter

Collection pages and homepages ordered for each visitor. One product view and the grid reorders toward their taste.

Fig. 05

The ML factory

Raw events in. Live models out.

Hand-inked drawing of a little factory line: a glass tube of shopper events, a hopper, a grinder, an oven and a press that stamps the model

Events, features, training, evaluation, publishing and serving in one place. A client’s full ML stack is a routine launch, and models retrain on schedule.

Fig. 06

Head to head

Live shoppers decide.

Hand-inked drawing of two little shops, A for the old way and B for the new model, with a splitter sending shoppers to each and scoreboards on the roofs

Every model ships as an experiment against what was already on the page, including established personalization vendors in their own slots.

Fig. 07

The experiment engine

Every experiment feeds the next.

Hand-inked figure: the experiment engine, where every finished test feeds the next ideas

Every test, won or lost, teaches an engine that proposes the next ideas for every client. Agents build them; people review them.

One loop

  1. Shopper events
  2. Features & embeddings
  3. Candidates
  4. Ranking
  5. Serving
  6. Experiment
  7. Retrain

One loop, run for every client, every day. Raw events come in, live models go out, the experiment says whether they won, and the result feeds the next model.

03 — Side A · Three songs

Side A

Three songs for my family. Every word lands on the voice.

Fig. 08The record playerPick a song. Drop the needle.
Hand-inked drawing of a record player beside a crate of three records, Jonathan’s Side A
  1. 01Bus Stop ConfettiFor Everest & Maggie · Sung in Mandarin, English subtitles4:11
  2. 02Three Hearts Inside a Stolen ShipFor Tina, Everest & Maggie5:05
  3. 03One More ThingFor Everest, sung by Dad4:38

Songs made with Suno. The picture show is drawn live in your browser, in ink.

04 — The arcade · Track 02, as a game

The arcade

Fig. 09The Unwritten Stars cabinetDrop a coin. Press start, and the game loads.
Hand-inked drawing of a bartop arcade cabinet for Unwritten Stars, with a stack of coins beside it

Now playing

Unwritten Stars

Follow the stolen ship for one song.

A five-minute action game set to “Three Hearts Inside a Stolen Ship.” Run an unwritten road through a hollow world while the Blight eats it behind you. Your weapons fire by themselves; every level is a choice that branches and evolves, so no two runs play the same.

Play Unwritten Stars

Keyboard, touch or gamepad · Sound on

Game night

Priced In

Guess the number. Price the room.

A trivia game for friends who think they know things. Everyone locks in a guess, the guesses become an odds board, and you bet on whoever you think is closest without going over. Play at a live table now, or start a room and text the link so everyone plays on their own phone, with voice chat and AI guessers who explain their terrible reasoning in the group chat.

Play Priced In

05 — Raising two kids

High expectations. High warmth.

Let kids meet hard things and find out they can learn them, with someone close by. Most of what I believe about learning, I believe more since becoming a father.

Jonathan with his wife and their two kids on vacation, all four smiling
The four of us.
Jonathan’s son and daughter laughing together at the kitchen table
Big brother, little sister.

Not ranked.
Some things you don’t optimize.

Fig. 10

“I do it”

From “help me” to “I do it.”

Hand-inked drawing of a toddler on a little balance bike on a garden path

The best sound in parenting is “help me” turning into “I do it.” A balance bike gets there faster than any lecture.

Fig. 11

Little boat, fat boat

The little boat is Maggie.

Hand-inked drawing of two wind-up toy boats on a canal, a little pink one and a fat tugboat

On the walk home along the water, every boat gets a job in the family. The little boat is Maggie. The fat boat, I am told, is Daddy.

Fig. 12

Anything with wheels

If it rolls, it gets studied.

Hand-inked drawing of a toy fire truck with a ladder, on a road

Monster trucks, fire trucks, trains, cranes. If it has wheels, it requires investigation, ideally from very close up.

Fig. 13

Five books at bedtime

Five is the largest reasonable number.

Hand-inked drawing of a nightstand with a lamp and a stack of five picture books under a window

Five books, every night, because five is currently the largest reasonable number in the universe. So far, the books are winning.

Fig. 14

Two languages

Five little ducks, in Mandarin.

Hand-inked drawing of a music box that plays Five Little Ducks in Mandarin or English, with ducklings by a hill

Our home runs in Mandarin and English. The songs we sang to our kids, they now sing back to us.

Fig. 15

Saturday pancakes

He mixes. She eats the cheese.

Hand-inked figure: a griddle of Saturday pancakes

He mixes the batter with great seriousness. His little sister supervises and handles the cheese.

A walk home from preschool can take three hours. Every boat, fire truck and unusual machine requires investigation.

Pay attention. Try things. Keep what works. Change your mind when reality disagrees. Leave room for surprise.

The same rule, at work and at home.