Loading video...

Video Failed to Load

Go Home

I asked Claude Fable 5.1 to paint the Mona Lisa with JavaScript.

105,900 views • 2 months ago •via X (Twitter)

50 Comments

Kevin Ngo's profile picture
Kevin Ngo2 months ago

How this was made: 1) Start with a photo of the actual Mona Lisa, so Claude and the JavaScript program have something to look at while painting. 2) Claude wrote a JavaScript program to paint. The program continuously compares the painting with the photo to decide where the next strokes are needed. 3) Each paint stroke is drawn by a custom paintbrush that Claude coded. 4) Claude used its vision capabilities as a critic. After every change, it rendered the painting into an image and looked at it. It did things like zooming in on the face and comparing it with the same part of the actual photo, then revised the code.

Jonny Jelinek 🔥's profile picture
Jonny Jelinek 🔥2 months ago

No fing way!! That's such a fascinating idea and result! 👏👏👏 This might just be the first "stroke by stroke" explanation of how the greatest art pieces where created (more or less, I guess. 😉) Could definitely be a cool course idea for art students.

Kevin Ngo's profile picture
Kevin Ngo2 months ago

Actually, I originally asked Fable to paint it stroke by stroke, the way Leonardo da Vinci would have painted it. Here's that version.

Max Liebscher's profile picture
Max Liebscher2 months ago

@JonnyJelinek You're new profile image is ready!

Jonny Jelinek 🔥's profile picture
Jonny Jelinek 🔥2 months ago

@kevin_t_ngo Took the liberty to upscale and change it a bit - now THAT could really be my new profile pic. 😄

Max Liebscher's profile picture
Max Liebscher2 months ago

@kevin_t_ngo very cuty

Jonny Jelinek 🔥's profile picture
Jonny Jelinek 🔥2 months ago

@kevin_t_ngo Ja, näh?! 😜

witong's profile picture
witong2 months ago

Damn actually ? that technique would be nice for a scrollytelling site

Kevin Ngo's profile picture
Kevin Ngo2 months ago

Yeah if I don’t run out of usage before the weekend 🥲

witong's profile picture
witong2 months ago

5.1 is as good as hungry in usage

AshutoshShrivastava's profile picture
AshutoshShrivastava2 months ago

Next level 🔥

Kevin Ngo's profile picture
Kevin Ngo2 months ago

Ty 🙏

lil room's profile picture
lil room2 months ago

If Leonardo da Vinci and Vincent van Gogh had a child

Travis Fischer's profile picture
Travis Fischer2 months ago

ooooh maybe parts of my code are in the training data for this :)

steve's profile picture
steve2 months ago

And people are still like “when agi?”

Anshu's profile picture
Anshu2 months ago

Amazing! Is it using a reference image, or doing it from memory?

Kevin Ngo's profile picture
Kevin Ngo2 months ago

Yeah, it looks at a reference image but every one of the ~15,000 strokes is planned and painted by code

Anshu's profile picture
Anshu2 months ago

Very cool!

Lianghao Chen's profile picture
Lianghao Chen2 months ago

How about svg?

Kevin Ngo's profile picture
Kevin Ngo2 months ago

I’m trying to conserve Fable usage, maybe next week 🥲

Light's profile picture
Light2 months ago

Has anyone tried hooking Claude up to one of those one-armed robots with some brushes and colors?

Chaitanya's profile picture
Chaitanya2 months ago

That goes to say nobody could paint monalisa better than vinci

shashwa7's profile picture
shashwa72 months ago

woh!

Kevin Ngo's profile picture
Kevin Ngo2 months ago

woah Fable 5.1 is a pretty good javascript painter

Krax's profile picture
Krax2 months ago

Would love to see your setup here! What are you using for the brushes?

Kevin Ngo's profile picture
Kevin Ngo2 months ago

It’s plain JS on 2D canvas. No libraries. The JS code builds the brush strokes in many layers to make it look like a real brush stroke

Krax's profile picture
Krax2 months ago

So you're letting the agent draw using a tool that takes coordinates, a color & stroke width as input? And then you render it as a specific "texture stroke"? But you must have given the agents specific tools & strategies encoded in prompts/tools on top of that I assume?

Kevin Ngo's profile picture
Kevin Ngo2 months ago

Claude wrote a JS program that paints. It kept looking at output renders and revised its code over a few hours, until the painting looked right

Krax's profile picture
Krax2 months ago

I'd be very curious to know how it evaluated the results between each “look.” Did it write some kind of evaluation function; for example, one that compares histogram values? I’m asking because, in my setups, I’ve simply relied on the model’s vision capabilities, but I haven’t achieved results anywhere near as good as what you’re seeing here! :)

Kevin Ngo's profile picture
Kevin Ngo2 months ago

Both. It looked at output renders (vision capabilities) and compared them to an image of the Mona Lisa. It also wrote a scoring algorithm/function. Hope this helps with your side quest a bit :)

dreamlikedawar's profile picture
dreamlikedawar2 months ago

showing this to leo now

Adam Holter's profile picture
Adam Holter2 months ago

I'm assuming it just did some kind of genetic algorithm thing. It didn't, like, manually generate the brush strokes.

Eusovimpelos Comentarios's profile picture
Eusovimpelos Comentarios2 months ago

Receba

Alex Donkers's profile picture
Alex Donkers2 months ago

Why? The Mona Lisa was already painted centuries ago.

timdam's profile picture
timdam2 months ago

leaving this comment here so I get notified by the community notice in case

Varik Verilion's profile picture
Varik Verilion2 months ago

These image-via-code demos read as sketches because the model writes shapes blind, never seeing the canvas it's drawing on.

Donna Dawn Laloux's profile picture
Donna Dawn Laloux2 months ago

What an incredible idea!

Goblin Orchestrator's profile picture
Goblin Orchestrator2 months ago

Is that how diffusion works?

Dustin Davis's profile picture
Dustin Davis2 months ago

Now do Astra

TheGoldenAnchor's profile picture
TheGoldenAnchor2 months ago

Reminds me of the time I asked @grok about the nature of consciousness:

Neatprompts's profile picture
Neatprompts2 months ago

let's ask to complete the painting, i heard da Vinci didn't complete it

Pakerbeth's profile picture
Pakerbeth2 months ago

Nice, but not quite there yet.

absofinlute's profile picture
absofinlute2 months ago

What the FUCK!??

来财's profile picture
来财2 months ago

傻逼玩意,还我血汗钱,曹尼玛的

vikas's profile picture
vikas2 months ago

it's like watching the mona lisa getting painted

Eric - Not doing 9 to 5's profile picture
Eric - Not doing 9 to 52 months ago

Sorry, but actually it created an image of the painting. Just so people know…it didn’t actually paint the real Mona Lisa since it was already painted many years ago. AI isn’t capable of doing things like that…yet?

AI Mastery Guide's profile picture
AI Mastery Guide2 months ago

javascript mona lisa is unreal

Gustav ❖'s profile picture
Gustav ❖2 months ago

Wow

aarav gupta's profile picture
aarav gupta2 months ago

it’s like watching mona lisa being painted

Tanuj Prakash's profile picture
Tanuj Prakash2 months ago

Now post another with GPT Astra and you've winning content for 2 posts.

Related Videos