tools.simonwillison.net colophon

The tools on tools.simonwillison.net were mostly built using AI-assisted programming.

This page lists the commit messages for each tool, many of which link to the LLM transcript used to produce the code.

The descriptions for each of the tools were generated using Claude 3.7 Sonnet.

social-media-cropper.html #

The Social Media Card Cropper allows you to create customized images perfectly sized for various social media platforms. Upload images by dragging and dropping them onto the designated area, clicking to select from your files, or pasting directly from your clipboard. Choose from preset aspect ratios optimized for different platforms (Twitter/LinkedIn, Facebook, Substack, or Instagram), and customize the background color to complement your image. The tool provides intuitive zoom controls to adjust your image placement within the frame. Once you're satisfied with your composition, preview the final result and download it as a JPEG file ready for immediate use on your chosen social media platform. The cropper automatically centers your image and maintains the correct proportions, ensuring your content looks professional across all platforms.

b4a2bc December 10, 2024 20:35
a10954 February 28, 2025 16:02
a57b5c February 28, 2025 16:10
zoom in and out and background color

https://gist.github.com/simonw/a3e7f3ce34e26ab7c207fe641853e4a0

Pure vibe based coding, I hacked at it until it seemed to work, didn't even look at the code
43d55a March 09, 2025 09:22
Note it's for Substack
0b619c1 March 09, 2025 09:31

paste-rich-text.html #

This tool allows you to extract HTML code from rich text content. Paste formatted text from any webpage into the editable area using Ctrl+V (Windows) or ⌘+V (Mac). The tool automatically captures the underlying HTML structure and displays it in the code box below. You can copy the extracted HTML code to your clipboard with a single click, making it easy to reuse elsewhere. The preview section shows how the HTML renders visually. Use the Clear all button to reset the tool and start over. This utility is helpful for developers and content creators who need to analyze or repurpose formatted content while preserving its structure.

fd9daf March 07, 2025 14:58
63852f March 07, 2025 15:05
Maybe fix for Windows?
49c382e March 07, 2025 20:35
Paste rich text in README

encrypt.html #

This tool provides secure message encryption and decryption using AES-GCM encryption. Users can encrypt messages with a passphrase, generating a URL that contains the encrypted message which can be shared with recipients. The encryption process uses PBKDF2 with 100,000 iterations to derive a secure key from the passphrase, along with a random salt and initialization vector for added security. Recipients can decrypt messages by visiting the shared URL and entering the correct passphrase. All encryption and decryption occurs locally in the browser using the Web Crypto API, ensuring your messages remain private and are never sent to a server. The interface includes tabs for encrypting new messages or decrypting received messages, with copy-to-clipboard functionality for easy sharing.

b4e3e15 March 07, 2025 20:34

json-schema-builder.html #

The JSON Schema Builder allows you to create and customize JSON schemas visually. Define your schema by adding properties with different data types including strings, numbers, integers, booleans, objects, and arrays. Each property can include descriptions and be marked as required. For objects and arrays containing objects, you can add nested properties to create complex hierarchical structures. The builder provides a real-time preview of your schema in JSON format which can be copied to the clipboard. Your work is automatically saved in the URL, making it easy to share or revisit your schema later. The interface is responsive and works across different screen sizes.

0a186e5 March 07, 2025 18:17

schema-dsl.html #

This tool converts a simplified schema definition language into a standard JSON schema. Enter your schema in the text area using the concise DSL format - each field is defined with a name, type (str, int, bool, float), and optional description. The conversion happens in real-time as you type. Toggle the "Array items schema" checkbox to wrap your schema in an array definition. The converter runs Python code in your browser using Pyodide, with multiple CDN fallbacks to ensure reliability. Click the "Load example" button to see a demonstration of the proper syntax. The resulting JSON schema includes proper type mapping, required fields, and descriptions for each property.

e3f4763 March 05, 2025 11:17
Create schema-dsl.html

https://claude.ai/share/c89fc8fd-b868-491f-bece-bd5b97acac1c but then I had to modify it a bunch to get it to work - the micropip install of llm didn't work because not all dependencies work in Pyodide.

pipfile.html #

This tool converts Pipfile.lock files into both Pipfile and requirements.txt formats. Paste your Pipfile.lock JSON content into the text area and click "Parse Dependencies" to extract all dependency names with their specific versions. The tool processes both default and development dependencies, displaying them in two separate formats below. Use the "Copy Pipfile Format" button to copy dependencies in the format needed for a Pipfile ("package-name" = "==1.2.3"), or use "Copy Requirements.txt" to copy them in the standard requirements.txt format (package-name==1.2.3). The parser extracts version information while properly handling the syntax differences between the formats. You can clear all content using the "Clear All" button.

0a11eb2 March 03, 2025 16:30
Pipfile.lock Dependency Parser

Built this today to help fix an old development environment.

https://gist.github.com/simonw/e13064e2e830db77887373ced5df1b5b

llm-prices.html #

The LLM Pricing Calculator helps you estimate costs when using various large language models. Enter the number of input tokens (your prompts) and output tokens (AI responses), along with their respective pricing per million tokens, to calculate the total cost in both dollars and cents. The calculator includes a comprehensive list of preset pricing for popular models like GPT-4o, Claude 3, Gemini, and more. Each preset displays the cost per million tokens for both input and output, which automatically populates the calculator fields when selected. The calculator updates in real-time as you modify values, making it easy to compare costs across different models or estimate expenses for specific usage scenarios.

148bc1 October 16, 2024 20:50
2e0a70 October 25, 2024 16:32
o1-preview and o1-mini
3e633a October 25, 2024 16:38
Clarify prompt/completion tokens, use sentence case
720f22 November 04, 2024 10:34
7dcb4c December 03, 2024 16:51
Prices for Amazon Nova models

https://aws.amazon.com/bedrock/pricing/
561dc2 December 05, 2024 06:12
cbba87 December 30, 2024 08:52
o1 and o1-preview same cost
c510cb January 21, 2025 08:44
deepseek-chat and deepseek-reasoner
639629 January 21, 2025 09:13
All per million tokens
576800 January 21, 2025 09:21
e94be7 January 21, 2025 09:51
Display dynamic prices correctly
0f3607 January 21, 2025 09:51
Update disclaimer
4f1863 January 31, 2025 12:52
o3-mini
c29b97 January 31, 2025 19:12
o1-mini price drop to match o3-mini
b2b5a8 February 16, 2025 12:23
chatgpt-4o-latest
08b464 February 25, 2025 12:11
gemini-2.0-flash-lite and updated Gemini pricing

https://ai.google.dev/gemini-api/docs/pricing

Also Claude 3.7 Sonnet
9cab8d6 February 27, 2025 12:54
GPT-4.5 is eye-poppingly expensive

https://openai.com/api/pricing/

word-counter.html #

This text editor provides a multi-section word and character counter for your writing. Enter text in the text areas to see an automatic count of words and characters update in real-time. Each writing section is independently tracked, and you can add multiple sections using the "Add new section" button or remove unwanted sections with the "Remove" button. Your writing is automatically saved to your browser's local storage after you stop typing, with "Saving..." and "Saved" indicators showing the save status. The editor maintains your work between browser sessions, so your content remains available when you return to the page.

e831d3 December 19, 2024 12:11
98408b December 19, 2024 12:24
40aa7b December 19, 2024 17:31
Show textarea when page first loads

I didn't even use an LLM to write this!
cb33238 February 25, 2025 21:52

progress.html #

This page displays a progress tracker for the current U.S. presidential term (2025-2029). It features a visual progress bar showing how much of the term has elapsed, along with key statistics including the number of days that have passed, days remaining until the end of the term, and the percentage of the term completed. The tracker automatically calculates these values based on the current date relative to the fixed start date (January 20, 2025) and end date (January 20, 2029). The information updates automatically every hour to maintain accuracy without requiring a page refresh.

1cba17 February 21, 2025 20:17
Create progress.html

Prompt to my custom Claude project for artifacts was:

> Build a progress bar through the current US presidency

It did the 2021 to 2025 one so I said:

> That's wrong it started in January 2025 and ends four years later
c90501a February 21, 2025 20:20
Update progress.html

Prompt:

> Make it larger on my phone

jina-reader.html #

Jina Reader is a web interface for the Jina Reader API that extracts content from web pages in various formats. Enter a URL and select your preferred output format (Markdown, HTML, Text, or LLM Markdown). After retrieving the content, you can view the raw text and a rendered preview in an iframe. The tool also features Claude AI integration—provide your Anthropic API key to analyze the extracted content using custom prompts. The default prompt generates a comprehensive summary with illustrative quotes and unusual ideas from the text. Both the extracted content and AI-generated analysis can be copied to your clipboard with a single click.

7acfb0 October 14, 2024 09:24
5a8732 October 14, 2024 10:51
206d99 October 14, 2024 18:01
box-sizing: border-box on iframe
727bbf October 14, 2024 18:14
7d7e2ce February 12, 2025 08:45
Optionally run Jina reader output through Claude with summary prompt

https://gist.github.com/simonw/f768916929eb5b7268354ddcb1021b94

apsw-query.html #

This tool allows you to analyze and understand SQLite queries through the APSW (Another Python SQLite Wrapper) extension. Enter your SQL query in the main text area, and optionally add setup SQL statements in the collapsible section to create tables or other database objects. You can provide query parameters in the input fields below the query box, adding more parameters as needed with the "+" button. When you click "Execute query," the tool runs your SQL through APSW's query analysis functions and displays comprehensive information about how SQLite will execute it, including the query plan, expanded SQL, and execution details. The results are presented in a structured JSON format that shows exactly how SQLite interprets and processes your query, which is useful for understanding query performance and behavior.

0af3172 February 06, 2025 17:47

gemini-bbox.html #

This tool helps visualize image bounding box coordinates from Google's Gemini AI models. Upload an image and enter a prompt that requests the model to identify object locations. The tool processes your image through the selected Gemini model and displays the results with colored bounding boxes drawn over the original image. The visualization includes a coordinate grid (0-1000) for precise reference. Each detected region is also extracted and displayed individually below the main image. The interface allows you to switch between different Gemini models, clear images, and visualize how the AI interprets spatial information in your images. The tool requires a Gemini API key that will be saved in your browser's local storage for convenience.

4be279 August 26, 2024 08:34
Rename gemini-bbox-tool.html to gemini-bbox.html
3aa392 August 26, 2024 08:39
Better h1
665528 August 26, 2024 10:41
b382ff August 27, 2024 14:34
Ability to try different models

https://gist.github.com/simonw/d77ab3ef497ed79f353633322cc6d38a

I tweaked it so the initial image preview would be hidden on prompt response, and changed the sort order of the select box options.
79898f October 03, 2024 15:08
Update Gemini model lists
15376f October 03, 2024 15:24
06a135 December 11, 2024 09:18
gemini-2.0-flash-exp
c8706b4 February 05, 2025 09:43
New Gemini models for bbox tool

https://simonwillison.net/2025/Feb/5/gemini-2/

Plus fixed cropped image display to have a max width 100

sql-pretty-printer.html #

This tool formats SQL queries for better readability. Enter your SQL code in the input field, and the formatter will display the cleaned-up version below. You can customize the formatting by selecting the SQL dialect (SQLite, Standard SQL, PostgreSQL, or MySQL), adjusting the tab width, choosing keyword case formatting (preserve, uppercase, or lowercase), and selecting an indent style (Standard, Tabular left, or Tabular right). The formatted SQL can be copied to your clipboard with a single click of the "Copy to clipboard" button. The tool processes your SQL in real-time as you type or change formatting options.

71a762d February 03, 2025 22:38

github-issue-to-markdown.html #

This tool converts GitHub issues into formatted markdown content for documentation or sharing. Enter a GitHub issue URL in the format https://github.com/owner/repo/issues/123, and click "Convert to markdown" to retrieve the issue's title, author, description, and all comments through the GitHub API. The resulting markdown includes the original issue body followed by all comments with proper attribution. The content appears in the textarea below, where you can review it and copy it to your clipboard with the "Copy to clipboard" button. If the URL is invalid or the issue cannot be found, an error message will display.

d47fdbd February 03, 2025 14:43

image-resize-quality.html #

This tool allows you to analyze and compare image compression results with different quality settings and resolutions. Upload an image by dragging and dropping, clicking to select, or pasting from your clipboard. The application processes your image at original size and half size, each with five different quality levels (100%, 90%, 70%, 50%, and 30%). For images with transparency, a background color picker appears so you can choose what fills transparent areas when converting to JPEG. Each processed variation displays its width, quality setting, and file size in kilobytes. Click any image to toggle between normal and full-width view. Download links are provided for each variation, allowing you to save the compressed versions for your projects.

5b41e7 July 25, 2024 15:01
Create image-resize-quality.html

Adapted from this Claude artifact https://claude.site/artifacts/45ecf75e-d8e2-4d2a-a3b9-d8c07c7bd757
fa5a39 August 01, 2024 10:46
Added paste support

curl 'https://tools.simonwillison.net/image-resize-quality' | llm -m claude-3.5-sonnet --system 'output just the new HTML for a version of this page that also allows users to paste images'
41c4d15 January 29, 2025 09:43
Add background color feature to image-resize-quality

https://gist.github.com/simonw/04e9fd78af5f739d97deb69a75c9aa2a

image-to-jpeg.html #

This tool allows you to convert images to JPEG format with adjustable quality settings. You can load an image by either clicking on the drop zone or dragging and dropping an image file onto it. Once loaded, use the quality slider to adjust the JPEG compression level from 0 (highest compression, lowest quality) to 100 (lowest compression, highest quality). The tool displays a preview of the converted image, its approximate file size in bytes, and generates an HTML image tag containing the data URI, which you can copy and use in your projects. The data URI format embeds the image data directly in the HTML, eliminating the need for an external image file.

a124524 January 27, 2025 10:49
image-to-jpeg.html

I built this one using GPT-4 back in April 2023

https://gist.github.com/simonw/66918b6cde1f87bf4fc883c67735195d

render-claude-citations.html #

This tool enables you to render JSON responses from Claude with citation formatting. Paste JSON containing Claude's response into the text area and click "Render message" to display a formatted version with citations properly highlighted as blockquotes. The tool parses the JSON structure, extracts the text content and any citations, then renders them in a sandboxed iframe for security. The renderer supports Claude's standard citation format where cited text appears as indented blockquotes beneath the corresponding paragraphs. The page comes pre-loaded with a sample JSON response demonstrating various citation patterns from an AI trends analysis. This utility helps when working with Claude's API responses or when you need to visualize cited content in a more readable format.

b9a55d January 23, 2025 16:11
d97ff4e January 23, 2025 20:05
Use Title Case

php-deserializer.html #

This tool converts PHP serialized data to JSON format. Enter serialized PHP data in the text area to see the equivalent JSON structure. The converter processes your input in real-time and displays the resulting JSON in a formatted output field. If there are any errors in the serialized data, the tool will display an error message explaining the issue. You can copy the converted JSON to your clipboard using the "Copy JSON to clipboard" button. The tool uses the php-serialize library to ensure accurate deserialization of complex PHP data structures.

4c11c72 January 22, 2025 15:26

aria-live-regions.html #

This page demonstrates how screen readers announce dynamic content changes using ARIA live regions. The demo allows users to select between "assertive" and "polite" live region types and test notifications with two buttons - one that triggers an immediate notification and another that schedules a notification after a 10-second delay. The page includes detailed instructions for testing with VoiceOver on both macOS and iOS, including keyboard shortcuts, gestures, and navigation techniques. When notifications appear, they display the current time and are announced by screen readers according to the selected live region priority. This demonstration helps developers understand how to implement accessible dynamic content updates for users who rely on assistive technologies.

f34d1d January 07, 2025 19:34
30ad8d4 January 07, 2025 19:50
Switch between polite and assertive

bluesky-resolve.html #

This tool converts Bluesky handles to their corresponding Decentralized Identifier (DID). Enter a Bluesky handle (such as "jay.bsky.social") in the input field and click "Resolve" to retrieve the associated DID. The tool makes a request to the Bluesky API endpoint and displays the resulting DID in the box below the form. If the handle cannot be found or another error occurs, an error message will be displayed instead. DIDs are important identifiers in the AT Protocol that Bluesky uses, providing a persistent identifier for accounts regardless of handle changes.

e71a60 January 06, 2025 09:57
1472c5d January 06, 2025 10:49
Use public.api.bsky.app instead

Much higher rate limits: https://bsky.app/profile/futur.blue/post/3lf3q6hlqgk2o

bluesky-firehose.html #

The Bluesky WebSocket Feed Monitor allows you to connect to Bluesky's WebSocket API and monitor the firehose of posts in real-time. After connecting, you can send custom JSON messages to filter the feed based on specific criteria such as user DIDs or content types. The interface displays a log of all incoming messages with timestamps. You can control the connection using the connect/disconnect buttons, send filter commands using the message input area, and clear the log as needed. The tool includes an example filter message for monitoring posts from specific users, with a link to resolve Bluesky handles to DIDs. Messages can be sent using the send button or the Ctrl/Cmd+Enter keyboard shortcut.

d79ba5 November 19, 2024 19:45
7c6af8e January 06, 2025 10:05
Ability to send messages back to Bluesky firehose

https://gist.github.com/simonw/9c4525e0364d60c1a8a7bd663ff0df35

yaml-explorer.html #

YAML Explorer is a browser-based tool for visualizing and exploring YAML data structures. Users can input YAML content directly by pasting into the textarea or load a YAML file from a URL. The explorer converts YAML to a collapsible tree view with syntax highlighting for different data types (strings, numbers, booleans, etc.). Users can expand and collapse nested objects and arrays, with an "expand all" option for viewing the complete structure. The tool preserves the state of your exploration through the URL, allowing you to share specific views of the YAML data. If there are parsing errors, they will be displayed with helpful error messages.

ee48769 December 22, 2024 14:44

openai-webrtc.html #

This page allows you to create a WebRTC audio session with OpenAI's real-time voice models. Enter your OpenAI API token, select a voice (Ash, Ballad, Coral, Sage, or Verse), and click "Start Session" to begin a conversation. The interface displays detailed token usage statistics for both the current interaction and the entire session, including audio input tokens, text tokens, cached tokens, and their associated costs. A visual audio indicator shows when your microphone is active. The session events section at the bottom logs all events received during the conversation, providing technical details about the interaction. The page securely stores your API token in your browser's local storage for convenience.

3b2429 December 17, 2024 14:06
Rename openai-webrtc to openai-webrtc.html
8bb09d December 17, 2024 14:12
55c754 December 17, 2024 14:28
c9f3085 December 18, 2024 07:36

gpt-4o-audio-player.html #

The Gist Audio Player is a web application that plays audio content from GitHub Gists containing OpenAI GPT-4 audio model responses. To use the player, enter a GitHub Gist URL in the input field and click "Fetch". The application extracts the base64-encoded WAV audio data from the Gist's JSON content, converts it to a playable format, and displays both the audio player and transcript. The player supports sharing via URL parameters, automatic retry for network errors, and downloading the audio file. If the Gist content is truncated, the application automatically fetches the complete raw content. The player requires Gists specifically containing JSON responses from the gpt-4o-audio-preview model that include an audio response with base64-encoded data.

e92642 October 27, 2024 20:32
0f89a8f December 17, 2024 18:15
Update gpt-4o-audio-player.html

Handle long truncated gists

Claude prompt was:

> This breaks if the JSON is too long and is truncated by the gist API

openai-audio-output.html #

This tool interfaces with OpenAI's GPT-4o audio API to generate text-to-speech responses. Users can enter both a system prompt and a user prompt, select a model version (GPT-4o mini audio preview or GPT-4o audio preview), and choose from various voice options. After clicking "Generate Speech," the application sends a request to the OpenAI API and displays the resulting audio with playback controls, a download button, and a transcript of the spoken content. The complete API response is shown in JSON format with copy functionality. Users can also save responses as GitHub Gists by authenticating with their GitHub account, providing shareable links to both the raw data and an audio player. The tool requires an OpenAI API key, which is stored in local browser storage.

4b61d0 October 27, 2024 20:55
8c026b October 27, 2024 21:20
b9fa5d October 27, 2024 21:25
box-sizing: border-box;
fb5160 November 28, 2024 09:18
e717ab December 17, 2024 13:48
d6c784 December 17, 2024 13:54
Updated list of voices

https://platform.openai.com/docs/api-reference/chat/create#chat-create-audio says:

> The voice the model uses to respond. Supported voices are ash, ballad, coral, sage, and verse (also supported but not recommended are alloy, echo, and shimmer; these voices are less expressive).
668115e December 17, 2024 18:04

json-to-yaml.html #

This tool converts JSON data to YAML in three different formats. Paste your JSON in the input field to see it automatically transformed into block style YAML (standard indentation), flow style YAML (compact representation with inline arrays and objects), and quoted strings YAML (all string values are double-quoted). Each output format has a copy button for easily transferring the converted YAML to your clipboard. The converter validates JSON input and displays error messages for invalid syntax. The tool uses the js-yaml library and presents the output in separate panels for easy comparison between YAML styles.

5426b54 December 15, 2024 12:47

writing-style.html #

The Writing Style Analyzer helps improve your writing by identifying three common issues in text: weasel words, passive voice constructions, and duplicate words. To use the tool, paste your writing into the text area and receive immediate feedback. The analyzer highlights instances of vague "weasel words" (like "various" or "extremely"), passive voice constructions that may weaken your prose, and accidentally repeated words. Each issue is displayed with surrounding context to help you understand where and how to revise. The analyzer processes text in real-time as you type, allowing for continuous refinement of your writing. This tool is adapted from Matt Might's shell scripts for writing improvement.

93175b December 13, 2024 11:34
fb04bd December 14, 2024 09:58
ac6a1f December 14, 2024 10:06
0fbf511 December 14, 2024 11:10

gemini-chat.html #

This web application provides an interface to interact with Google's Gemini AI models. Users can select from different Gemini model versions including 2.0-flash-exp, 1.5-pro, 1.5-flash, and 1.5-flash-8b. The app requires a Gemini API key, which it stores in local storage for convenience. Messages are displayed in a scrollable chat area with markdown support, allowing for formatted responses. When sending a message, the application streams the model's response in real time and displays usage metadata and API call duration. The chat history is maintained within the session but can be reset using the Clear button. The interface includes a text input area and controls for sending messages, changing models, and clearing the conversation history.

2f2bfd August 27, 2024 14:57
4983cf August 27, 2024 16:24
79898f October 03, 2024 15:08
Update Gemini model lists
06a135d December 11, 2024 09:18
gemini-2.0-flash-exp

timezones.html #

The Timezone Meeting Planner helps you coordinate times across different regions by comparing two timezones. Select locations from the dropdown menus to generate a comprehensive 48-hour time comparison table. The table displays each hour in UTC format alongside the corresponding local times for both selected locations. The comparison includes day-of-week information to help you identify optimal meeting times across international time differences. Your timezone selections are stored in the URL, making it easy to share specific timezone comparisons with others. The tool uses the browser's built-in timezone database to ensure accuracy.

1459a6 July 04, 2024 13:18
Experimental timezones.html

Not fully tested yet, built this with Claude 3.5 Sonnet
a142037 December 10, 2024 18:43
Timezone Meeting Planner

A better version, brand new.

https://gist.github.com/simonw/3cb034fa3d327f1114da18219f2192fd

prompts-js.html #

Prompts.js is a lightweight JavaScript library designed for creating modal dialogs with alert, confirm, and prompt functionalities. The library offers asynchronous methods that return promises, allowing for cleaner, more readable code compared to traditional browser dialogs. Users can call Prompts.alert() to display simple messages, Prompts.confirm() to ask yes/no questions that return boolean values, and Prompts.prompt() to collect user input as text. The example code demonstrates how to implement each dialog type and handle user responses, including displaying results in a designated area of the page after the dialog interaction is complete.

afbc22 December 06, 2024 16:52
Rename prompt-js.html to prompts-js.html
3d76b53 December 07, 2024 14:14
Load latest prompts.js from CDN

unix-timestamp.html #

The Timestamp Converter tool allows you to convert Unix timestamps into human-readable UTC and local time formats. Enter a Unix timestamp in the input field to see the corresponding date and time displayed below. The converter automatically handles both Unix time in seconds (10 digits) and milliseconds (13 digits). The UTC time shows the exact time in Coordinated Universal Time, while the local time displays the converted time in your current time zone. The tool initializes with the current Unix timestamp in seconds, making it easy to verify the current time in different formats.

9c10367 November 20, 2024 19:36

bluesky-timeline.html #

The Bluesky Timeline Viewer is a web application that displays posts from your Bluesky social network timeline. After logging in with your Bluesky username/email and an app password, the application fetches and displays your timeline content. The viewer shows posts in a user-friendly format with author avatars, display names, handles, timestamps, and post text. It automatically refreshes your timeline every 10 seconds to display new content, with a countdown indicating when the next refresh will occur. You can stop the auto-refresh functionality at any time. The application saves your login credentials locally for convenience on future visits. Below the rendered timeline, the raw JSON data is also displayed for advanced users who need access to the complete API response.

7eff228 November 20, 2024 17:36

zip-wheel-explorer.html #

This tool allows you to browse the contents of Python package files directly in your browser. Enter a URL to a .zip, .tar.gz, or .whl file in the input field and click "Unpack File" to download and extract its contents. Once processed, a list of files contained in the package will appear. Click on any filename to view its contents in the panel below. The tool includes a sample URL to a Python wheel file that you can try with one click. The file browser supports text-based files and displays them with proper formatting for easier code review.

429eb8 November 19, 2024 11:08
zip-wheel-explorer

Created first version using a Claude 3.5 Haiku prompt similar to this:

> web app with an input box to paste in a URL to a zip or .tar.gz or wheel file - it then uses fetch() to fetch that binary file and uses the necessary JavaScript libraries to unzip it and then shows a list of the files in that package, clicking each of those shows the content of that file

But had to edit a lot - to use jsdelivr for example, and to remove the .tar.gz support which didn't work.
6025f62 November 19, 2024 11:19
Simplified

iframe-api-explorer.html #

This page provides an API Explorer interface that allows users to make API requests to external endpoints from within a sandboxed environment. The explorer uses iframe sandboxing with the allow-scripts and allow-forms permissions to create a secure execution context. Users can enter a URL in the input field (pre-populated with a sample endpoint) and submit it to retrieve data. The application handles communication between the sandboxed iframe and the parent page using postMessage(), which enables the iframe to request API calls while the parent executes the actual fetch requests. The response data is displayed in a formatted JSON viewer. The iframe dynamically adjusts its height based on content through messaging to the parent window. This approach demonstrates a pattern for safely allowing API exploration while maintaining security boundaries between contexts.

2b8f87 November 14, 2024 19:22
52c094 November 14, 2024 19:30
Note this is a sandbox experiment
3011fee November 14, 2024 19:39
sandbox=allow-forms for Chrome, new APIClient class

In Chrome the form wouldn't submit because no allow-forms so I added that

Got Claude to write a neat APIClient class using promises so I can do const response = await api.callAPI(url);

https://gist.github.com/simonw/54d91de17fdde1bce715f6a7859c935e

bbox-cropper.html #

This tool allows you to create bounding boxes on images to generate coordinates. You can load an image by pasting (Ctrl+V/Cmd+V), dragging and dropping a file, or clicking to select an image file. Once loaded, draw a bounding box by clicking and dragging on the image. Resize the box by dragging its corners or edges, or move it by dragging inside the box. The tool displays coordinates in percentages relative to the image dimensions in the format x1,y1,x2,y2, representing the top-left and bottom-right corners of the box. The generated coordinates string can be copied for use with other applications that require bounding box inputs.

d117432 November 12, 2024 08:04

mdn-timelines.html #

The MDN Browser Support Timelines tool allows you to search and explore when specific web APIs became available across different browsers. Enter an API name in the search box to see a chronological timeline of browser implementations. The tool displays release dates for each browser version that first supported the feature, along with additional information such as specification links, MDN documentation references, and API status indicators (experimental, deprecated, or standard). For each API, you can view both the main feature and any sub-features with their own compatibility data. Browsers that don't support a particular API are listed separately at the bottom of each timeline.

59323c November 10, 2024 17:54
mdn-timelines

I didn't save all the prompts for this one (I'm using a new tool).
472b46 November 10, 2024 18:21
58e7ef November 10, 2024 18:59
Use GitHub tree API to get more than first 1000 files

Also some CSS tweaks and autocomplete search now does term1.*term2
ab7baa November 10, 2024 19:02
Remove console.log
c81ecb November 11, 2024 04:19
link to blog post
41ce0b8 November 11, 2024 04:25
fix for back button bug

I prompted Claude:

> `There's a bug where hitting back cannot get to the previous page`

iframe-sandbox.html #

This tool allows you to experiment with the iframe sandbox attribute by providing a code editor and a live preview. Enter HTML code in the left editor panel and see it rendered in the right preview panel. The sandbox controls below the preview let you toggle different iframe security restrictions, such as whether scripts can run, forms can be submitted, or popups can open. Each checkbox corresponds to a specific sandbox permission that can be enabled or disabled. When you modify your code or change security settings, click the "Update Preview" button to apply the changes and see how they affect the behavior of the content within the iframe.

e62bd12 November 07, 2024 07:18

animated-rainbow-border.html #

This page demonstrates an interactive animated rainbow border effect. The main element is a dark-colored box with text that can display a colorful animated border when activated. The animation consists of a gradient rainbow effect that flows around the border while pulsing with varying brightness and blur. Users can toggle the animation on or off using the button below the box. When activated, the button text changes to "Stop Animation" and when deactivated, it returns to "Start Animation." The animation uses CSS transitions, keyframes for the gradient movement and pulsing effect, and JavaScript to handle the toggle functionality. The design features a dark background with contrasting elements for visual appeal.

99021c5 November 03, 2024 12:30

california-clock-change.html #

This page displays information about Daylight Saving Time changes for California (Pacific Time zone only). It shows when clocks last changed and when they will change next, indicating whether you'll gain or lose an hour of sleep. For the week following a time change, it includes a note about how pets might be confused by the schedule shift, showing both the current time and what your pet's "internal clock" might perceive. The page automatically detects if you're in the Pacific Time zone and shows a warning if you're not. It updates in real-time and highlights when a clock change is happening tonight. The current time status (whether you're in PST or PDT) is also displayed at the bottom of the page.

e62d0d November 02, 2024 22:23
e7c655 November 03, 2024 08:30
5f72442 November 03, 2024 08:44
Clarify gain/loss one hour of sleep

claude-token-counter.html #

The Claude Token Counter tool allows you to calculate token usage for messages sent to Claude 3.5 Sonnet. Enter an optional system prompt and your user message in the respective text areas. You can also upload images and PDF files by dragging them into the designated area or clicking to select files. The tool requires an Anthropic API key (stored in your browser's local storage) and makes a request to Anthropic's token counting API. After clicking "Count Tokens," the tool displays detailed token count information, including total tokens and breakdowns by component. This helps you understand token consumption for multimodal messages before sending them to Claude, enabling better management of context limitations.

033c0a7 November 02, 2024 11:25

svg-sandbox.html #

This page demonstrates how to embed SVG images in HTML using base64 data URIs. The demonstration includes three examples: a simple sun SVG, a stylized pelican shape, and an SVG with JavaScript (which is intentionally inactive). The page features a responsive grid layout that displays each SVG with a title and description. Below the examples, a footer note explains that SVGs embedded via img tags with base64 data URIs have their JavaScript and interactive elements safely ignored by the browser. The page also includes functionality that decodes and displays the raw SVG code for each example, helping users understand how the base64 encoding works.

705838 October 26, 2024 13:34
a7289c8 October 26, 2024 13:49
Display decoded SVGs on page

Some help from https://gist.github.com/simonw/e07899a173ffe9f5723994e1405f909a

svg-progressive-render.html #

This tool allows you to progressively render and animate SVG (Scalable Vector Graphics) content. You can either paste SVG code into the top textarea or load the example tiger image. Set the animation duration in seconds, then click "Render" to see the SVG gradually build up in the output area. As the animation runs, you can see both the visual result and the corresponding code updating in the live editor below. The tool also features a progress bar indicating the animation's completion status. For incomplete SVG fragments, the system automatically completes the necessary tags to ensure valid rendering. You can also edit SVG code directly in the live editor to see immediate updates in the preview area.

ba6a1be October 25, 2024 17:51

github-issue.html #

The GitHub Issue Viewer allows you to extract the content of GitHub issues in markdown format. Enter a GitHub issue URL in the input field and click "Fetch Issue" to retrieve the issue title, status, creator, creation date, description, and all comments. You can optionally provide a GitHub Personal Access Token to access private repositories or avoid rate limiting. The token is securely stored in your browser's local storage for future use. After fetching an issue, the content is displayed in markdown format, which you can copy to your clipboard with a single click. This tool helps you document issues or share their content outside of GitHub.

c7e297c October 23, 2024 13:26

qr.html #

This browser-based QR code decoder allows you to extract information from QR code images. You can upload an image file by clicking on the drop area, drag and drop an image onto the designated area, or paste an image from your clipboard. The tool processes the image using the jsQR library and displays the decoded content below the upload area. If the decoded content is a valid URL, it will be displayed as a clickable link. The decoder works entirely in your browser with no server-side processing, ensuring your QR code data remains private.

ff3869 October 17, 2024 14:50
47b5cd October 17, 2024 14:55
Add jsQR credit
345bdc9 October 21, 2024 11:29
box-sizing: border-box;

clipboard-viewer.html #

The Clipboard Format Viewer allows you to examine all available formats of content when you paste data from your clipboard. Paste content either directly into the textarea or anywhere on the page to see a detailed breakdown of the clipboard data. For each format (such as plain text, HTML, or files), the tool displays the format type and its content in a scrollable container. The viewer handles special formats like HTML and files appropriately, showing HTML structure or file details. This tool is particularly useful for developers working with clipboard interactions or anyone who needs to inspect the underlying data structure of copied content.

55d804 October 20, 2024 21:16
0b18227 October 20, 2024 21:20
box-sizing: border-box;

text-wrap-balance-nav.html #

This interactive demonstration showcases the text-wrap: balance CSS property applied to a navigation bar. The page features a horizontal navigation menu with multiple link items displayed in a 400px container. Users can control two aspects of the navigation: the number of visible menu items (ranging from 4 to 14) using a slider, and whether the text-wrap: balance property is applied using a checkbox toggle. When enabled, the text-wrap balance property creates more visually appealing line breaks by distributing text more evenly across lines. This example helps developers understand how this CSS property affects navigation layout and readability, particularly when dealing with varying numbers of menu items in a constrained space.

a36eaf October 20, 2024 05:39
1a8556 October 20, 2024 05:42
No need for margin-bottom on inline element
2c59da7 October 20, 2024 16:20
max-width: 100% for phones with screens narrower than 400px

https://urbanists.social/@georgelund/113342149599402190

ares.html #

This converter transforms regular text into its phonetic alphabet representation using the ARES standard. Type your text in the input field and click "Convert" to see each letter and number replaced with its corresponding phonetic word (Alpha for A, Bravo for B, etc.). The converter handles both letters and numbers, and indicates spaces with "(SPACE)". Any characters not in the phonetic alphabet (like punctuation) remain unchanged. This tool is useful for radio communications, spelling out words clearly over the phone, or in situations where precise letter identification is necessary.

9da6f96 October 20, 2024 07:47

escape-entities.html #

The HTML Entity Escaper converts special characters in your text to their corresponding HTML entities, preventing browsers from interpreting them as HTML code. This tool handles five key characters: ampersands (&) become &, less-than signs (<) become <, greater-than signs (>) become >, double quotes (") become ", and single quotes (') become '. This conversion is essential when displaying code snippets or HTML syntax examples on web pages. To use the tool, paste your text into the input field, and the escaped version appears automatically in the output field. You can then copy the result to your clipboard with the provided button for use in your HTML documents.

4ac8c4f October 19, 2024 15:43

openai-audio.html #

This page provides an interface to record audio, transcribe it, and process it using OpenAI's GPT-4o audio model. Users can record audio using their microphone by clicking the "Start Recording" button, and the page displays a timer during recording. After stopping, the audio is available for playback and download. Users can add a text prompt in the text area to provide context or instructions for the AI. When submitting to the API, the page processes both the audio and text prompt through OpenAI's API and displays the response in a formatted view. The interface shows token usage details and approximate cost for the API call. The page requires an OpenAI API key, which is stored in the browser's local storage for convenience. All audio processing happens client-side before being sent to the API as a base64-encoded WAV file.

cdf77e October 17, 2024 12:09
3e8687 October 17, 2024 12:38
6edb36 October 17, 2024 12:41
font-size: 16px; on input
0d07f5 October 17, 2024 12:44
box-sizing: border-box;
bf3b3a October 18, 2024 10:05
white-space: pre-wrap;
1c63c27 October 18, 2024 10:08

extract-urls.html #

This tool extracts URLs from web page content. Paste HTML content into the editable area to automatically extract all hyperlinks. The tool parses the pasted HTML, identifies anchor tags, and extracts URLs that begin with "http". The extracted links appear in a separate text area, one URL per line, for easy copying. A "Copy to clipboard" button allows you to quickly copy all extracted URLs. This functionality is particularly useful when you need to collect multiple links from a webpage for documentation, research, or sharing purposes.

0f7fb49 October 15, 2024 16:19

sqlite-wasm.html #

This tool allows you to query a database of pelican sightings in Half Moon Bay using SQL commands. The interface includes a text area where you can enter SQL queries and an execute button to run them. The database contains sample data with pelican sightings records including date, location, species, and count information. Results are displayed in a formatted table below the query box. The tool uses the SQLite WASM library to process queries directly in your browser without requiring a server connection. You can modify the default query "SELECT * FROM pelican_sightings;" to filter, sort, or analyze the sighting data in different ways using standard SQL syntax.

9521114 October 15, 2024 11:44

click-grid-to-expand.html #

This page demonstrates an interactive CSS grid layout featuring a 4x2 grid with four distinct colored cells. One cell (labeled "1x2") can be clicked to trigger a smooth expansion animation that grows to fill the entire grid container. When expanded, the overlay displays "Expanded! Click to shrink" and can be clicked again to animate back to its original position and size. The animation uses CSS transitions with a 0.5-second ease effect for smooth motion in both directions. The grid showcases different-sized cells including a 2x2 cell (red), a 1x2 expandable cell (green), and two 1x1 cells (blue and yellow), all with consistent styling including rounded corners and centered text.

1faccef October 13, 2024 11:42

event-planner.html #

The Event Planner tool allows users to create and schedule events with detailed information. Users can input an event title, description, optional location, date, time, and select from multiple US timezones. After submitting the form, the tool displays comprehensive event details including the formatted date and time, a countdown showing days/hours/minutes until the event, and provides integration with Google Calendar. The Google Calendar link automatically transfers all event information, and users can either click the direct link or copy the provided URL. The form validates required fields and uses moment.js for accurate timezone handling and time calculations.

1d19215 October 10, 2024 19:17

image-to-svg.html #

This tool converts JPG or PNG images to SVG (Scalable Vector Graphics) format using the imagetracerjs library. You can upload an image by either dragging and dropping it onto the designated area or clicking to browse your files. Once processed, the tool displays the resulting SVG image and provides the corresponding SVG code in a text area below. The code can be copied to your clipboard with a single click using the "Copy to clipboard" button. The conversion happens entirely in your browser, making it a convenient way to vectorize raster images without requiring server uploads or additional software.

4ff37f2 October 06, 2024 20:37

svg-render.html #

This tool converts SVG images to JPEG or PNG format. You can input SVG code by pasting it directly into the text area, uploading an SVG file, or dragging and dropping an SVG file. The converter provides options to select output format (JPEG or PNG), specify background color or transparency, and adjust the output width. After conversion, the tool displays the resulting image, provides a download link, shows the file size, and generates a base64-encoded image tag you can copy. The converted image can be toggled between its default size and full size by clicking on it. For quick testing, you can load an example SVG tiger image using the provided link.

2c1095 October 06, 2024 09:56
b20a4c October 06, 2024 10:00
Background color default to white
c10d66 October 06, 2024 10:12
tweak CSS
c0608a October 06, 2024 12:03
Reset color to white, not black
d911c2 October 06, 2024 12:32
Various fixes to SVG tool

Tweaked CSS
Selecting transparent now toggles to PNG
Copy to clipboard button no longer uses alert()
bc43f4c October 06, 2024 12:33
Tool is now called SVG to JPEG/PNG

openfreemap-demo.html #

This demonstration showcases the integration of MapLibre GL with OpenFreeMap tiles to render a map of San Francisco with 1,000 randomly generated markers. The code provides three different approaches for rendering multiple markers efficiently: scaling built-in markers, creating custom HTML markers, and using a circle layer. The demo currently implements the circle layer approach, which offers better performance for large numbers of markers by rendering them directly as a map layer rather than as DOM elements. The map is centered on San Francisco, tilted at a 50-degree pitch angle, and automatically fits its bounds to contain all markers with padding. The random markers are confined within a bounding box approximating San Francisco's geographic boundaries.

7ee20d September 28, 2024 10:58
4507280 September 28, 2024 14:01
map.setPitch(50)

user-agent.html #

This page displays the user agent string from your browser. When loaded, it shows a heading "Your User Agent:" followed by the complete user agent string of your current browser. The user agent string contains information about your browser, operating system, and device, which websites can use to identify what software you're using to access them. The page uses JavaScript to retrieve this information through the navigator.userAgent property and display it in a paragraph element.

d053b94 September 26, 2024 19:23

markdown-math.html #

This tool provides a live rendering environment for Markdown and LaTeX mathematical expressions. Users can type or paste content in the input area, which automatically renders in the preview section below. The renderer supports Markdown formatting such as headings, bold text, italics, lists, and tables, along with mathematical expressions in both inline ($...$) and block ($$...$$) formats using KaTeX. The generated HTML output appears in a separate text area, which can be copied to the clipboard with a single button click. The interface displays both the rendered content and its corresponding HTML code simultaneously, making it useful for content creation and educational purposes.

112b42 September 20, 2024 19:30
ceff93 September 20, 2024 21:50
Better HTML export + no alert on copy button
fe5c3a September 20, 2024 22:51
Avoid zoom on textareas on iOS
b04b092 September 20, 2024 22:54
textarea width

github-api-write.html #

This tool facilitates uploading files and images directly to GitHub repositories using the GitHub API. Enter your GitHub personal access token, repository owner, repository name, and the target file path. Choose between uploading text content or an image file - for text, enter your content in the provided textarea; for images, select a file from your device. The application converts your content to the appropriate format and sends it to GitHub using a PUT request. After successful upload, you'll receive a confirmation message with a link to view your file in the repository. This tool helps streamline the process of adding or updating files in GitHub repositories without needing to use git commands or the GitHub web interface.

4b7902d September 20, 2024 17:08

jina-embeddings-image-token-calculator.html #

The Image Token Calculator provides a way to estimate the token cost of processing images with AI models. Upload an image by dragging and dropping it into the designated area or by clicking to browse your files. After uploading, the calculator analyzes the image dimensions and divides it into 224×224 pixel tiles, which is the standard processing unit for many AI vision models. The results display the image's dimensions, number of horizontal and vertical tiles needed, total tile count, and the estimated token cost (calculated at 1000 tokens per tile). This tool helps users anticipate resource usage when working with image-based AI applications.

8ad34e5 September 19, 2024 22:54
Create jina-embeddings-image-token-calculator.html

https://gist.github.com/simonw/7f3d2ff63423078f04d1fb2fc2b3e2a5

youtube-thumbnails.html #

This tool extracts and displays YouTube video thumbnails from a supplied URL or video ID. Enter a YouTube link or the 11-character video ID to view nine different thumbnail formats (default, hqdefault, mqdefault, sddefault, maxresdefault, and numbered formats 0-3). Each thumbnail displays with its actual width and a copyable URL. Click any thumbnail to expand it for better viewing, and click the URL area with the clipboard icon to copy the image address to your clipboard. The tool updates the browser URL with your input, allowing you to bookmark or share specific thumbnail results.

11dddd September 19, 2024 20:53
994cfc September 19, 2024 20:58
Improved click area and layout of copy URL thing

And I didn't even get an LLM to write this for me!
8d67d6c September 19, 2024 21:03

pomodoro.html #

This Pomodoro Timer application helps users manage work sessions using the Pomodoro technique. Users can enter a goal for each session, select a timer duration (from 5 minutes to 60 minutes), and track their progress. The timer displays minutes and seconds remaining in the current session. When a session ends, it's logged in the Session Log table below, which records the goal, start time, end time, duration, and any pauses taken during the session. The app stores session data in the browser's localStorage, allowing history to persist between visits. Users can delete individual sessions from the log as needed. The bottom section displays session data in JSON format for export or reference. The timer can be controlled with on-screen buttons or by pressing the spacebar to start/pause sessions.

d22c1e August 28, 2024 14:30
1e1e75 August 28, 2024 14:49
Fix bug where timer did not run in background

https://gist.github.com/simonw/cd3e400f5d09e8ed6482c7c6e8af2db2
9c0765 August 28, 2024 16:53
a678b5 August 30, 2024 07:22
CSS tweaks
ddaf7da August 30, 2024 08:08

gemini-bbox-tool.html #

This page is a redirect mechanism that automatically sends users to the "/gemini-bbox" page. When a user arrives at this URL, the browser will immediately redirect them to the destination page due to the meta refresh tag set with a 0-second delay. If automatic redirection fails for any reason (such as if the user has disabled automatic redirects in their browser settings), a fallback text message is displayed with a manual link that allows users to navigate to the intended destination by clicking on it.

33199b August 25, 2024 21:17
469aeb August 25, 2024 21:27
lineWidth = 5
71c413 August 26, 2024 08:33
Re-compress image first and display grid lines

There was a VERY weird bug where the TIFF orientation of a photo could cause the wrong coordinates to be returned.

Working around that bug by first doing a round-trip through custom canvas JPEG compression.

Also added grid to make it easier to debug.

Many prompt sessions got here, most recently this one: https://gist.github.com/simonw/0a8b8e76cd73b1bfb72daa716641a57e
4be279 August 26, 2024 08:34
Rename gemini-bbox-tool.html to gemini-bbox.html
85126d August 26, 2024 08:35
Redirect to gemini-bbox
ce18cd2 August 26, 2024 08:37
Fix redirect

tiff-orientation.html #

This tool analyzes JPEG images to extract the TIFF orientation metadata. Upload an image by dragging and dropping it onto the designated area or by clicking to browse your files. The application parses the EXIF data embedded in the JPEG file, specifically looking for the orientation tag (0x0112) in the TIFF header. After processing, it displays the orientation value and provides a human-readable description (such as "Normal" or "Rotated 90° CW"). The debug information shows technical details about the parsing process, including file size, EXIF location, endianness, and IFD (Image File Directory) entries. This tool works entirely in your browser with no server uploads required.

9b6cdd5 August 26, 2024 08:20
tiff-orientation

Debug tool for figuring out if a JPEG has TIFF orientation data in it.

Claude prompts: https://gist.github.com/simonw/9bf1bd4cce6d113c55db0e5a03769b52

audio-spectrum.html #

This Audio Spectrum Visualizer captures live audio input from your microphone and displays a real-time frequency spectrum analysis. The visualization shows audio frequencies as colored bars on a canvas, with the height of each bar representing the amplitude of a specific frequency range. Louder sounds produce taller bars, while the color intensity changes based on the amplitude. The analyzer uses the Web Audio API to process the audio stream and extract frequency data through an FFT (Fast Fourier Transform) with 2048 sample points. To use the visualizer, you'll need to grant microphone access permission when prompted by your browser.

1390c40 August 23, 2024 22:04
audio-spectrum visualizer

By Claude 3.5 Sonnet: https://gist.github.com/simonw/48b2762d1c77e529d3c36e75ee6f478b

haiku.html #

This web application uses your device's camera to generate haikus based on images. Capture a photo by pressing the center button, and Claude will create a haiku inspired by what it sees. For devices with multiple cameras, use the switch camera button to toggle between front and rear cameras. The application requires an Anthropic API key, which you'll be prompted to enter on first use. Generated haikus appear in the top left corner of the screen, with each new haiku added below previous ones. The application works on mobile devices and desktop browsers with camera access.

e4975a April 15, 2024 16:26
haiku.html
e7512f April 15, 2024 16:45
ow switch button if more than one camera
03ce79 April 15, 2024 16:51
More tweaks to switch camera button
9d5f90 April 15, 2024 16:51
Switch camera button inline, not block
0249ab8 August 22, 2024 19:10
Use anthropic-dangerous-direct-browser-access: true

Now talks to the Anthropic API directly using their new anthropic-dangerous-direct-browser-access: true header.

Also shows a "Generating..." message.

Code change mostly by Claude: https://gist.github.com/simonw/6ff7bc0d47575a53463abc3482608f74

exif.html #

The EXIF Data Viewer is a web application that extracts and displays metadata from uploaded images. After selecting an image file, the tool processes it to reveal embedded EXIF information, with special attention to GPS coordinates. If location data is present, the viewer displays the precise latitude and longitude in decimal degree format. The application also provides a complete breakdown of all available EXIF tags in JSON format, allowing users to examine camera settings, device information, and other metadata contained within their images. The tool requires no server-side processing as it operates entirely in the browser using the exif-js library.

687d450 July 17, 2024 09:28
EXIF data viewer

Created with Claude 3.5 Somnet

box-shadow.html #

This interactive tool allows you to create and customize CSS box shadows through a visual interface. Adjust horizontal and vertical offsets, blur radius, spread radius, color, and opacity using the sliders. As you modify these parameters, the preview box updates in real-time to display your changes. The corresponding CSS code is automatically generated below the controls, and you can copy it directly to your clipboard with the provided button. The tool supports a wide range of values for each property, making it easy to create subtle shadows, dramatic effects, or anything in between for your web projects.

18f741 July 08, 2024 12:22
Box shadow CSS generator

Mostly by Claude 3.5 Sonnet: https://twitter.com/simonw/status/1810335524017877240
44e0b09 July 08, 2024 13:05
Link to how I built it

chrome-prompt-playground.html #

The Chrome Prompt Playground allows users to interact with the Gemini Nano experimental model directly in Chrome Canary. Enter your prompt in the text area and click "Execute prompt" to generate a response. The interface displays the model's output in real-time as it streams in. All your interactions are automatically saved to a history section below, where you can review past prompts and responses or delete entries you no longer need. This tool requires Chrome Canary with the "Prompt API for Gemini Nano" flag enabled in chrome://flags, and the model may take several hours to download before becoming available.

be05fc July 03, 2024 10:09
Chrome Prompt Playground

Claude 3.5 Sonnet built most of this - transcript here: https://gist.github.com/simonw/e62440114960bc98f200eb3d92593896
e16f128 July 03, 2024 12:37
About this project link

compare-pdfs.html #

This PDF comparison tool allows you to analyze differences between two PDF documents visually. Upload two PDF files either by dragging and dropping them onto the designated area or by clicking to select files from your device. The tool processes both documents and displays each page side by side, with a third visualization that highlights differences between corresponding pages in red. The comparison works across all pages in both documents, even if they have different page counts. For optimal results, ensure you upload valid PDF files. The tool uses PDF.js to render the documents directly in your browser without sending data to any external servers.

b3fcfe7 July 02, 2024 12:53

arena-animated.html #

This visualization displays the evolution of Elo ratings for top large language models based on LMSYS Chatbot Arena data. The animated chart shows how different models rank against each other over time, with higher Elo scores indicating better performance in human preference evaluations.

You can control the animation using the buttons and speed slider at the bottom. The "Reset" button restarts the animation from the beginning, while "Play/Pause" controls animation flow. The speed slider adjusts how quickly the visualization progresses through different dates.

The chart displays up to 20 models at once, sorted by their Elo scores, with colored bars representing each model. To use your own data, paste JSON in the provided text area and click "Parse JSON and Start Animation." Each data point requires a date, model name, and Elo rating.

9a2450d June 26, 2024 05:39
Add /arena-animated

ocr.html #

This tool uses your browser to perform Optical Character Recognition (OCR) on PDF documents and images without uploading files to any server. It leverages Tesseract.js for text extraction and PDF.js to convert PDFs into images for processing. You can drag and drop files, click to select them, or paste images from your clipboard. For PDFs with multiple pages, each page is processed individually and displayed with its extracted text. The tool supports over 100 languages which can be selected from the dropdown menu. The language selection persists in the URL for easy sharing. When processing multiple pages, a "Full document" section appears with all extracted text combined for convenient copying.

5dffa7 March 30, 2024 09:34
Change URL to /ocr - since it does more than PDfs now, refs #1
5ca65c March 30, 2024 09:37
margin-bottom on dropzone, refs #1
cc6091 March 30, 2024 09:49
Upgrade to latest PDF.js, refs #1
9fb049 March 30, 2024 11:10
Source code. How I built this.
711cb7 March 31, 2024 15:21
Remove some indentation
8872d1 March 31, 2024 15:32
Language support for OCR, closes #4
495be5 March 31, 2024 16:19
Set and get ?language= in URL bar, refs #4
0efe8a March 31, 2024 16:20
Remove console.log, refs #4
eae14a March 31, 2024 17:11
Query string history now works for English default too, refs #4
c4c833 March 31, 2024 20:00
Support pasted images, refs #7
17f46e March 31, 2024 20:19
Re-run OCR if language is changed, refs #6
4c6c9e March 31, 2024 20:28
Add rough progress indicator to rerunOCR, refs #6
c4cd84 March 31, 2024 21:16
Don't re-run OCR if no file provided, closes #6
c1233df May 20, 2024 08:55

csv-marker-map.html #

This interactive map displays markers based on data from a CSV file. Load data by adding ?csv=URL to the page URL, where the CSV must include latitude and longitude columns. You can customize the map with several URL parameters: center (coordinates in format lat,lng), zoom (zoom level), q (location to search for), marker (add individual markers at coordinates), and color (change the default marker color). The map automatically updates the URL as you navigate, preserving your current view. Markers from CSV files appear as small colored circles on the map, while markers specified directly in the URL use the default Leaflet marker style.

82fd5da May 02, 2024 20:14
Create csv-marker-map.html

render-markdown.html #

This tool renders Markdown text using GitHub's Markdown API. Enter your Markdown content in the top textarea, then click "Render" to convert it to HTML. The rendered output appears in both the lower textarea (as HTML code) and in the preview area below. You can toggle options to strip hidden HTML elements and clean up the rendered output, or enable GitHub Flavored Markdown (GFM) mode for additional syntax features. The tool automatically generates a table of contents from headings and preserves your content between sessions using browser storage. The HTML output can be copied for use in other applications.

782395 April 21, 2024 22:47
86ac9d April 21, 2024 22:49
Fix link to TIL
a278a1b April 21, 2024 22:59
Clean up markdown heading elements

pdf-ocr.html #

This page functions as an automatic redirect to the OCR service. When a user lands on this page, they will be instantly redirected to the "/ocr" location. The page includes a fallback message with a clickable link in case the automatic redirect fails to work. The redirect happens through the meta refresh tag with a zero-second delay, ensuring immediate redirection for most browsers and devices.

497178 March 29, 2024 14:01
Create pdf-ocr.html

Refs #1
fb7041 March 29, 2024 14:02
Tiny bit of text at the top

Refs #1
bb6c87 March 29, 2024 15:02
Update full document after each page

Refs #1
16a97a March 29, 2024 15:19
Plausible analytics
f3410f March 30, 2024 09:26
A ton of UI tweaks

- Shows full document textarea at top, but only if there are multiple pages
- Prevents user from selecting a new file while a file is being processed
- Better indications of progress, including a done x of y message
4caf66 March 30, 2024 09:29
Bump width from 800 to 1000

This is the width used for the images extracted from the
PDF. I found that the Claude 3 Model Card PDF had OCR
errors at 800px what went away at 1000px.

Refs #1
d89c22 March 30, 2024 09:33
Upgrade to latest Tesseract.js, refs #1
5dffa7e March 30, 2024 09:34
Change URL to /ocr - since it does more than PDfs now, refs #1