Jump to content

LLM/Clock generation: Difference between revisions

From NicheWork
< LLM
← Older edit
VisualWikitext
divs and floats
why
 
(18 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{DISPLAYTITLE:Different LLMs and analog clock generation}}
Some co-workers showed me [https://brianmoore.com/ Brian Moore]'s [https://clocks.brianmoore.com/ AI World Clocks] project.
Some co-workers showed me [https://brianmoore.com/ Brian Moore]'s [https://clocks.brianmoore.com/ AI World Clocks] project.


The prompt (“Create HTML/CSS of an analog clock showing ${time}. Include numbers (or numerals) if you wish, and have a CSS animated second hand. Make it responsive and use a white background. Return ONLY the HTML/CSS code with no markdown formatting.”) seems simple enough, but it is fascinating each model is able to ''''almost'''' get it on a consistent basis.
The prompt (“Create HTML/CSS of an analog clock showing ${time}. Include numbers (or numerals) if you wish, and have a CSS animated second hand. Make it responsive and use a white background. Return ONLY the HTML/CSS code with no markdown formatting.”) seems simple enough, but it is fascinating each model is able to ''''almost'''' get it on a consistent basis.


<div>My curiosity piqued, I initially asked [[LLM|my local LLM]] “write me a program to display a clock in javascript” and and it did, but the clock was a digital one: [[File:Qwen3-coder digital clock.mp4|float|right]] ([https://gitlab.com/hexmode1/clock-llm/-/blob/4125b20e46f23c044c3ecabdb502765ee1854942/generated-clocks/initial-attempt.html source])
{{clear}}[[File:Qwen3-coder digital clock.gif|right|100px]]My curiosity piqued, I initially asked [[LLM|my local LLM]] “write me a program to display a clock in javascript” and and it did, but the clock was a digital one: ([https://gitlab.com/hexmode1/clock-llm/-/blob/4125b20e46f23c044c3ecabdb502765ee1854942/generated-clocks/initial-attempt.html source])
</div>
 
<div>So in the same session, I simply added "I want an analog clock" and it gave me a pretty decent one, but with no numbers on the face: [[File:Qwen3-coder-analog-clock-1.mp4|float|right]] ([https://gitlab.com/hexmode1/clock-llm/-/blob/4125b20e46f23c044c3ecabdb502765ee1854942/generated-clocks/clock.html source])
{{clear}}[[File:Qwen3-coder-analog-clock-1.gif|right|100px]]So in the same session, I simply added "I want an analog clock" and it gave me a pretty decent one, but with no numbers on the face:([https://gitlab.com/hexmode1/clock-llm/-/0blob/4125b20e46f23c044c3ecabdb502765ee1854942/generated-clocks/clock.html source])
</div>
 
<div>Finally, I wrapped up that LLM session with "Add numbers to the face of the clock" and got something that compared pretty favorably to most of the clocks found on Brian Moore's site: [[File:Qwen3-coder-analog-clock-1.mp4|float|right]] ([https://gitlab.com/hexmode1/clock-llm/-/blob/4125b20e46f23c044c3ecabdb502765ee1854942/generated-clocks/new-clock.html source])
{{clear}}[[File:Qwen3-coder-analog-clock-2.gif|right|100px]]Finally, I wrapped up that LLM session with "Add numbers to the face of the clock" and got something that compared pretty favorably to the best clocks found on Brian Moore's site: ([https://gitlab.com/hexmode1/clock-llm/-/blob/4125b20e46f23c044c3ecabdb502765ee1854942/generated-clocks/new-clock.html source])
</div>
 
== But, why are Brian's clocks so wonky? ==
 
That's weird, I thought. It was pretty easy to generate a good clock.  Why are most of the ones on the AI world clocks project so wonky?
 
{{clear}}[[File:Qwen3-coder original prompt.gif|right|100px]]So I tried his prompt, but it was disappointing. ([https://gitlab.com/hexmode1/clock-llm/-/blob/84d3a08e3bfac07d42807b76543fe0629f4587e6/generated-clocks/qwen3-coder:30b-256k-20251127193824.html source])
 
There are no numbers, and the hour and minute hand were stuck pointing straight up.

Latest revision as of 00:36, 28 November 2025

Some co-workers showed me Brian Moore's AI World Clocks project.

The prompt (“Create HTML/CSS of an analog clock showing ${time}. Include numbers (or numerals) if you wish, and have a CSS animated second hand. Make it responsive and use a white background. Return ONLY the HTML/CSS code with no markdown formatting.”) seems simple enough, but it is fascinating each model is able to 'almost' get it on a consistent basis.

My curiosity piqued, I initially asked my local LLM “write me a program to display a clock in javascript” and and it did, but the clock was a digital one: (source)

So in the same session, I simply added "I want an analog clock" and it gave me a pretty decent one, but with no numbers on the face:(source)

Finally, I wrapped up that LLM session with "Add numbers to the face of the clock" and got something that compared pretty favorably to the best clocks found on Brian Moore's site: (source)

But, why are Brian's clocks so wonky?

That's weird, I thought. It was pretty easy to generate a good clock. Why are most of the ones on the AI world clocks project so wonky?

So I tried his prompt, but it was disappointing. (source)

There are no numbers, and the hour and minute hand were stuck pointing straight up.

Retrieved from "https://wiki.nichework.com/w/index.php?title=LLM/Clock_generation&oldid=169"