LLM/Clock generation: Difference between revisions
float? |
righ |
||
| Line 3: | Line 3: | ||
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. | ||
[[File:Qwen3-coder digital clock.mp4|right|200px]]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]) | [[File:Qwen3-coder digital clock.mp4|right|200px|thumb]]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]) | ||
[[File:Qwen3-coder-analog-clock-1.mp4|right|200px]]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]) | [[File:Qwen3-coder-analog-clock-1.mp4|right|200px|thumb]]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]) | ||
[[File:Qwen3-coder-analog-clock-2.mp4|right|200px]]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]) | [[File:Qwen3-coder-analog-clock-2.mp4|right|200px|thumb]]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]) | ||
Revision as of 19:57, 23 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)