Inspired by Simon’s pelican-bicycle repo, I played around a bit with using LLMs to generate visuals with SVGs, Three.js and pure CSS.
I posted about some of the results here.
Inspired by @simonwillison.net's pelican-bicycle repo, here are some CSS sunsets by gpt-4o, claude-3-5-sonnet and gemini-2.0-flash-exp. Sonnet and Gemini animate the birds and clouds. Prompt: Generate pure HTML/CSS art of an extremely detailed, beautiful sunset. No talk or code fences. Code only.
— Dan Corin (@danielcorin.com) 2024-12-15T01:53:13.161Z
I used the code below to generate the HTML/CSS for the images:
import llm
import time
from pathlib import Path
MODELS = [
"gpt-4o",
"claude-3-5-sonnet-latest",
"gemini-2.0-flash-exp",
]
SUBJECT = "an extremely detailed, beautiful sunset"
PROMPT = f"Generate pure HTML/CSS art of {SUBJECT}. No talk or code fences. Code only."
now = str(int(time.time()))
out_dir = Path("out") / now
out_dir.mkdir(parents=True, exist_ok=True)
prompt_file = out_dir / "prompt.txt"
prompt_file.write_text(PROMPT)
for m in MODELS:
model = llm.get_model(m)
response = model.prompt(PROMPT)
out_file = out_dir / f"{m}.html"
out_file.write_text(response.text())