LLM/Clock generation: Difference between revisions
fif? |
why |
||
| (12 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. | ||
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: | {{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]) | ||
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: | {{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]) | ||
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: | {{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]) | ||
== But, why are Brian's clocks so wonky? == | == But, why are Brian's clocks so wonky? == | ||
| Line 13: | Line 14: | ||
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? | 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. | {{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.