Testing to see how the models do writing Elm code.
The goal was to produce a simple web page layout for a news site.
To confound things, I said to use the media query to detect if the environment is in dark mode.
To make things more “normal”, I added one control to toggle “dark mode”.
I asked it to use Tailwind CSS.
Language: elm
elm tool is at /home/johnk/.local/bin/elm
Make a mockup layout in Elm for a News website, with a short top banner, and 3 columns: left column nav, center column feature area, right colum listing of additional news. Widths approximately 20%, 60%, 20%.
Top banner is around 2 cm on a desktop screen, and 25% of a vertical mobile screen.
Use Tailwind CSS, and a local CSS, make the CSS file external. Create index.html file to pull in CSS.
Theme colors support the prefers-color-scheme media query, and has two modes:
Light mode: light gray background, dark gray text, dark blue links.
Dark mode: dark blue background, white text, light blue links.
Layout is responsive to mobile, tablet, and desktop size screens.
The layout should loop over arrays to construct the center and right columns. The center column array is a list of news headlines, URLs, and URLs to images (located in the public/images directory), and a story excerpt or teaser. The right column array is a list of news headlines and URLs.
The left column contains a simple nav with: Home, Local News, Breaking News.
The layout should support a single checkbox that will enable the dark mode, located at the bottom of the left column. This switch overrides the prefers-color-scheme media query.
Scoreboard
I used the Free versions in OpenCode.
| LLM | Tokens | Works? | Notes |
|---|---|---|---|
| Thaura (Qwen3.8) | N | Got into a pointless loop. It didn’t integrate it with the page correctly. Required manual correction. Looks so-so: 5. Dark mode toggle does not work. | |
| Ling3.0 | 51K | Y | Not great looking: 2. |
| MiMo2.5 | 19K | Y | Looks workable: 6 |
| MuseSpark1.2 | 20K | YN | Can’t tell if the dark mode toggle works. Looks good: 8 |
| MuseSpark1.3 | 16K | YN | Can’t tell if the dark mode toggle works. Looks good: 7 |
| Nemotron3 Ultra Free | 24K | Y | Very slow to write code. 36mins. Looks good: 8. Dark mode looks a bit odd. |
| Nemotron3.5 | N | It would get stuck in error loops, and not figure out the problem. It seemed to be coding from a version of Elm before 19. It also doesn’t reread my edits when I tell it to. Needs a lot of hints to do obvious bug fixes. I had to quit after 60k tokens and lots of interactions. |
I didn’t do any looks at the code produced.
Note that the fact Nemotron3.5 didn’t work for me, isn’t necessarily a reflection of the LLM. I may not know how to tell it to correct itself. I am too new to Elm to be able to suggest alternatives that might activate useful areas in the model.
So far, Nemotron3 seems the best, if only because it has the correct look. MiMo looked promising. MuseSpark also looks good, but the control didn’t work.
I can pore over the code, but can’t really evaluate the quality, because I’m so new to Elm.
The following file contains the code produced by the LLMs. You can use elm reactor to run a server that will show the site.
Author: admin
This is the server’s system administrator. This site is undergoing some changes.