Saturday, 10 January 2026

HTML tools

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. 

https://www.londonmarathonevents.co.uk/sites/default/files/2025-10/2026_TCSLM_Beginner_Training_Plan.pdf




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.





No comments: