I came across Useful patterns for building HTML tools by Simon Willison and found it very interesting so decided to give it a try at some point, ie today.
A colleague will be running the London marathon and looking into the training plan, I thought it would have been nice for the organizers to allow you to download an ics file rather than a pdf file (or both). Something you can add to your calendar with no effort.
So, enter html tools using Gemini. Needless to say, it took several iterations, so I really need to work on my prompts.
First prompt
Build an artifact that lets me open a pdf file. The file has a training plan to run a marathon and only pages 3 and 4 are relevant as they contain a table with the training plan. Pages 1 and 2 can be dismissed.
There needs to be a field in which the user can select the date of the marathon. The artifact will then generate calendar entries (ics file) for each day in the plan back from the date of the marathon. Each day is either a "Rest day" or a day in which you have to run or walk (or both). Rest days can be dismissed.
For each day in which there is a walk or run planned there is small text with a description.
It will be possible for the user to download those ics file. No React.
As an example, if the selected date is April 26 2026, then the plan will start 16 weeks before.
Second prompt
Dismiss the parsing logic and simply include the text in each cell of the table for running days
At this point I remembered that Excel can parse pdf into columns so I gave it a try (not perfect) and changed the prompt so that it would accept a slightly edited excel table (maybe I should have tried uploading the excel file instead)
Third prompt
ok, the parsing of the pdf file is not working. Instead of loading a pdf file, the user can paste an excel table. First column has week number, columns 2 to 8 have plans for each day of the week
Fourth prompt
That did not quite work. Each cell has text delimited with inverted commas ("). All text needs to be part of the training activity. Do not dismiss Rest days, however do not include them in the ics file
Fifth prompt
all text within " characters needs to be displayed, not only the first row
Sixth prompt
This looks good, please express distance in km, not miles
Seventh prompt
MIN stands for minutes, not miles
Eight prompt
This looks good. It should be possible to edit rach row in the schedule
After these prompts, which did not really take long, I got this (note it works even with typos in the last prompt, yes, read it again). Nice and sweet.
