Claude 3.5 A summary of examples of apps created with Sonnet's 'Artifacts' feature, which allows you to create interactive single-page apps
Anthropic, the developer of the chat AI 'Claude,' announced the AI model '
Everything I built with Claude Artifacts this week
https://simonwillison.net/2024/Oct/21/claude-artifacts/
'Artifacts' is a feature that allows you to manipulate the code, documents, and images generated by Claude in a dedicated area separate from the display of the prompt. For more information on Artifacts, see the following movie to see what kind of function it is.
Claude 3.5 Sonnet for sparking creativity - YouTube
Using Artifacts, Willison has created numerous applications in just one week. Below are some examples of applications that have actually been created.
◆1: Web page text copying function using Jina Reader API
When you want to load the entire text of a web page into a large-scale language model, copying and pasting the entire text is complicated and tedious in a typical browser. Therefore, Willison has built an application that can easily paste into a large-scale language model by calling the API ' Jina Reader API ', which can obtain input suitable for large-scale language models from URLs and web searches, generating Markdown , and pressing the 'Copy to Clipboard' button.
◆2:
We are creating an application that summarizes phrases that appear in an interactive demo of a WebAssembly build of SQLite , a public domain relational database management system.
◆3:
This application allows you to copy the entire rich text of a web page by simply pasting the URL, and then uses an HTML parser to extract all the links contained within the web page.
◆4:
It is an application that uses the browser's clipboard API to display text containing HTML tags, plain text, etc. Willison describes this application as a 'quick debugging tool that lets you easily check information in your browser.'
5. Running Pyodide in a REPL environment
In Artifacts, Willison created a demo that proves that Pyodide , Python compiled to WebAssembly, can run a REPL , where a user and an interpreter can interactively run pieces of code.
◆6:
The application that Willison created uses JavaScript to adjust the exposure, contrast, and saturation parameters of a captured image, but Willison said the demo was 'buggy and not that impressive.'
◆7:
The usage fee per token for large language models varies depending on the model. This application displays the fees required for input and output simply by selecting the number of tokens you want to use and a large language model such as GPT-4o.
◆8:
This application converts data written in YAML format into JSON format. 'I wanted to review how certain aspects of the YAML syntax work,' said Willison.
◆9:
The ' Realtime API ', released by OpenAI on October 1, 2024, allows you to build low-latency multimodal experiences within your app by directly streaming audio input and output. However, this API is based on WebSockets , which means the code is complex. On the other hand, the Chat Completion API , an API for using language models specialized for chat completion, has the advantage of being easier to write code than the Realtime API. So Willison used Claude 3.5 sonnet to build an application that can convert audio recorded on the spot into prompts that can be input into the Chat Completion API.
◆10:
'I was at a conference recently and one of the attendees shared a slide with a QR code on it, but I didn't have a smartphone with me, so I needed a way to turn that QR code into a regular URL,' said Willison, who is a professor of commerce at the University of California, San Jose.
◆11:
Willison said he saw an idea on Hacker News that would load photos onto a page, embed them on the page in base64 URL format, and save them as HTML to create a self-contained page with a gallery. The original idea was to use the browser's 'Save as HTML' function, but Willison realized this idea with a button to download the HTML so that it could be used on smartphones.
◆ 12:
This application allows you to convert special characters in your text into HTML entities , so that a sentence like 'hello there' and suchlike can be converted to '"hello there" and suchlike' and copied to the clipboard.
◆13:
When multiple buttons are lined up, there may be cases where there are four buttons on the first, second, and third rows, but only one on the fourth row.
In this application, you can arrange cluttered buttons in an orderly manner so that they are easy to see, simply by clicking 'Enable text-wrap: balance'.
◆14:
In the world of wireless communication, in order to correctly communicate the words you are saying to the other person, it is sometimes necessary to convert the words you want to communicate into ' phonetic codes ' such as 'A = Alpha' and 'B = Bravo'. With this application, you can simply enter a word and click 'Convert' to output the phonetic code for that word.
Willison said of these applications, 'Most of these tools took less than five minutes to build. The longest, the audio recording and prompting tool, was only about 21 minutes total. So even if you're not an Artifacts user, you'll understand why it's my favorite feature.'
Related Posts:
in Software, Web Application, Posted by log1r_ut