Code and Life

Programming, electronics and other cool tech stuff

First Tools on tools.codeandlife.com: AI-Generated Zip Image Viewers

After setting up tools.codeandlife.com last week, I needed to actually create some tools for it. Simon Willison's detailed example of using LLMs for code inspired me — his https://tools.simonwillison.net/ has over 80 single-file HTML/JS apps, all built by prompting LLMs.

My first tool idea: a browser-based zip image viewer. I just updated JZipView (a native C app), and thought a pure HTML/JS version would be a nice complement.

Two AI-Generated Viewers

I had both Claude Opus 4.5 and ChatGPT 5.2 Pro create their own versions from the same basic prompt. The results:

Both needed some polishing with Claude Code (using Sonnet) to get them working similarly — handling drag-and-drop, keyboard navigation, and the usual edge cases. But the core functionality came out surprisingly well from both models.

  • You can drag a .zip file over, and it will use import { unzip } from 'https://esm.sh/fflate@0.8.2'; to decompress it and show a gallery view
  • Left click on an image opens it in "fit to view" mode
  • Another left click will open 1:1 mode and mouse gets captures so you can just mouse move around the image
  • Right click goes back to "fit to view" and again to grid mode
  • Arrow keys and scroll wheel allow to browse through the images

Making the tools easy to find with Github Actions generated README.md

Simon Willison has Python scripts that auto-generate his tools index from git commits. I adapted a similar approach with two scripts:

gather_tools.py — finds all .html files and extracts their last commit info:

def get_last_commit(file_path):
    result = subprocess.run(
        ["git", "log", "-n", "1", "--format=%H|%aI|%B", "--", file_path],
        capture_output=True, text=True, check=True,
    )
    # Parse hash, date, and message
    ...

build_index.py — generates README.md from the JSON data, with alphabetical index and date-sorted details. I did not do all the fancy stuff that Simon did, just wanted to have the latest commit message per .html file for the time being.

A GitHub Actions workflow runs these on every push, so the tools index stays current automatically.

Try Them Out

Drop a zip file with images onto either viewer and use arrow keys to navigate. They both use JSZip for extraction and render images client-side — nothing gets uploaded anywhere.

The code is at https://github.com/jokkebk/tools

Notice: This post was co-written with Claude Opus 4.5 using Claude Code.