Claude 3.5 Sonnetでインタラクティブなシングルページアプリを作成できる機能「Artifacts」で作成されたアプリの例まとめ

チャットAI「Claude」を開発するAnthropicが2024年6月に発表したAIモデル「Claude 3.5 Sonnet」には、「Artifacts」と呼ばれる、コードやテキストドキュメント、ウェブサイトデザインなどのコンテンツを生成するように依頼した際に、回答の中ではなく専用ウィンドウにコンテンツを表示する機能が実装されています。そんなArtifactsを使って作成したアプリケーションの例を、システムエンジニアのサイモン・ウィリソン氏が紹介しています。
Everything I built with Claude Artifacts this week
https://simonwillison.net/2024/Oct/21/claude-artifacts/
Claudeによって生成されたコードやドキュメント、画像をプロンプトの表示とは別の専用領域で操作できる機能が「Artifacts」です。Artifactsについては、以下のムービーを見るとどういう機能なのかが一発でわかります。
Claude 3.5 Sonnet for sparking creativity - YouTube

このArtifactsを使ってウィリソン氏はわずか1週間のうちに数多くのアプリケーションを作成しています。以下は実際に作成したアプリケーションの例。
◆1：Jina Reader APIを使ったウェブページのテキストコピー機能
ウェブページのテキスト全体を大規模言語モデルに読み込ませたいとき、一般的なブラウザではテキスト全体のコピーや貼り付け作業が複雑で面倒とのこと。そこでウィリソン氏はURLやウェブ検索から大規模言語モデルに適した入力を得られるAPI「Jina Reader API」を呼び出してMarkdownを生成し「クリップボードにコピー」ボタンを押すだけで手軽に大規模言語モデルへの貼付が可能なアプリケーションを構築しています。

◆2：WebAssemblyでのSQLiteのデモ
パブリックドメインの関係データベース管理システムである「SQLite」に含まれたWebAssemblyビルドに関して、対話型デモに登場する語句をまとめるアプリケーションを作成しています。

◆3：URLの抽出
このアプリケーションでは、URLをペーストするだけで該当のウェブページ上のリッチテキスト全体をコピーし、HTMLパーサーを用いてそのウェブページに含まれるリンクすべてを抽出することが可能です。

◆4：クリップボードビューアー
ブラウザのクリップボードAPIを用いてHTMLタグを含んだテキストやプレーンテキストなどを表示してくれるアプリケーションです。ウィリソン氏はこのアプリケーションを「ブラウザで簡単に情報を確認できるクイックデバッグツール」と述べています。

◆5：REPL環境でのPyodideの実行
Artifactsにおいて、WebAssemblyにコンパイルされたPythonである「Pyodide」でユーザーとインタプリタが対話的にコード片を実行できる「REPL」が実行できることを証明するデモをウィリソン氏は作成しています。

◆6：画像編集シミュレーター
ウィリソン氏が作成したこのアプリケーションは、JavaScriptを用いて撮影した画像の露出やコントラスト、彩度のパラメーターを調整できるというもの。なおウィリソン氏はこのデモについて「バグが多く、それほど印象的ではありませんでした」と述べています。

◆7：大規模言語モデルの使用料金シミュレーター
大規模言語モデルは1トークンあたりの使用料がモデルごとに異なります。このアプリケーションは自分が使用するトークン数とGPT-4oなどの大規模言語モデルを選択するだけで、入力と出力に必要な料金を表示してくれます。

◆8：YAMLからJSONへのコンバーター
データシリアライズ言語のYAMLを同じくデータシリアライズ言語のJSONに変換するのがこのアプリケーション。ウィリソン氏は「YAML構文の特定の側面がどのように機能するのかを再確認したかった」と述べています。

◆9：オーディオを録音してAI入力用のプロンプトを表示する
OpenAIが2024年10月1日にリリースした「Realtime API」は、オーディオ入出力を直接ストリーミングすることで、アプリ内で低遅延のマルチモーダルエクスペリエンスが構築可能というもの。しかし、このAPIはWebSocketベースであるため、コードが複雑という欠点があります。一方、チャット補完に特化した言語モデルを利用するためのAPIであるChat Completion APIは、Realtime APIと比べてコードの記述が簡単という利点があります。そこでウィリソン氏は、Claude 3.5 sonnetを用いて、その場で録音した音声をChat Completion APIに入力可能なプロンプトに変換できるアプリケーションを構築しました。

◆10：QRコードデコーダー
画像として保存したQRコードをドラッグ＆ドロップするだけで、通常のURLに変換してくれるのがこのアプリケーションです。ウィリソン氏は開発動機について「最近会議に参加した際に、参加者の1人がQRコード付きのスライドを共有しました。しかしその時私はスマートフォンを持っていなかったため、そのQRコードを通常のURLに変換する方法が必要でした」と語りました。

◆11：画像コンバーターとページダウンローダー
ウィリソン氏はHacker Newsで「写真をページに読み込ませてbase64 URL形式でページに埋め込み、HTMLとして保存することでギャラリー付きの自己完結型ページで保存する」というアイデアを見たとのこと。元のアイデアではブラウザの「HTMLとして保存」を使用するというものでしたが、ウィリソン氏はスマートフォンでも使用できるようにHTMLをダウンロードするボタン付きでこのアイデアを実現しました。

◆12：文章中の特殊文字をHTMLエンティティにエスケープするアプリ
このアプリケーションでは、入力した文書に含まれる特殊文字をHTMLエンティティに変換することが可能です。具体的には「"hello there" and suchlike」のような文章を「＆quot;hello there＆quot; and suchlike」のような形式に変換し、クリップボードにコピーできるというもの。

◆13：アイコンの配置を美しくするアプリケーション
複数のボタンが並ぶと、「1段目・2段目・3段目にはボタンが4つ並ぶものの4段目は1つしか配置されない」といった場合があります。

このアプリケーションでは、「Enable text-wrap: balance」をクリックするだけで、煩雑に並んだボタンを見やすく整然と並べることが可能です。

◆14：ARES音声アルファベットコンバーター
無線通信の世界では、相手に正しく自身が発する単語を伝えるため、自身が伝えたい単語を「A＝Alpha」「B＝Bravo」といった「フォネティックコード」に変換する必要が求められることがあります。このアプリケーションでは、単語を入力して「Convert」をクリックするだけで、その単語のフォネティックコードが出力されます。

ウィリソン氏はこれらのアプリケーションについて、「これらのツールのほとんどは、構築に5分もかかりませんでした。一番時間を要したオーディオ録音・プロンプト表示のツールでさえ、合計21分程度で完成しています。この手軽さから、Artifactsを利用していない方にも、この機能が私のお気に入りとなっている理由をご理解いただけるはずです」と語りました。