A day in the mind of Claude Sonnet

Dan Corin (@danielcorin.com) 2024-12-19T21:21:16.724Z

To create this animation for a day in the mind of Claude Sonnet, I used Sonnet to write the following code

  • to generate the HTML with this Python script
  • capture PNGs with puppeteer
  • use ffmpeg to stitch them together
import llm
import requests
import time
from pathlib import Path
from datetime import datetime, timedelta

MODELS = ["claude-3-5-sonnet-latest"]


def get_temp_weather(hour):
    if hour < 14:
        temp = 30 + (24 * (hour / 14))
    else:
        temp = 54 - (27 * ((hour - 14) / 10))

    if hour < 6:
        weather = "cold"
    elif hour < 18:
        weather = "sunny"
    else:
        weather = "snowing"

    return round(temp), weather


now = str(int(time.time()))
out_dir = Path("out") / now
out_dir.mkdir(parents=True, exist_ok=True)

start_time = datetime.now().replace(hour=0, minute=0, second=0, microsecond=0)
end_time = start_time + timedelta(days=1)
current = start_time

start_time = datetime.now().replace(hour=0, minute=0, second=0, microsecond=0)
specific_times = [
    start_time.replace(hour=2, minute=30),
    start_time.replace(hour=3, minute=0),
    start_time.replace(hour=5, minute=0),
]

for current in specific_times:
    hour = current.hour
    minute = current.minute

    temp, weather = get_temp_weather(hour)
    time_str = current.strftime("%I:%M %p")

    PROMPT = f"""It is {time_str}. {temp}°F and {weather}.
Generate subtle, abstract art using SVG in an HTML page that fills 100% of the browser viewport.
Take inspiration for the style, colors and aesthetic using the current weather and time of day.
Prefer subtle colors but it's ok to use intense colors sparingly.
No talk, no code fences. Code only."""

    timestamp = current.strftime("%H_%M")
    prompt_file = out_dir / f"prompt_{timestamp}.txt"
    prompt_file.write_text(PROMPT)

    for m in MODELS:
        model = llm.get_model(m)
        response = model.prompt(PROMPT, temperature=1.0)
        out_file = out_dir / f"{timestamp}_{m}.html"
        out_file.write_text(response.text())

    current += timedelta(minutes=30)
const puppeteer = require('puppeteer');


async function createGif() {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    await page.setViewport({
        width: 800,
        height: 600
    });

    const htmlFiles = [
        // paths to html files
    ];

    for (let i = 0; i < htmlFiles.length; i++) {
        await page.goto(`file://${__dirname}/${htmlFiles[i]}`);
        await page.screenshot({
            path: `frame${i}.png`
        });
    }

    await browser.close();
}

createGif();
ffmpeg -framerate 2 -i timestamped_frame%d.png -c:v libx264 -pix_fmt yuv420p output.mp4