単一HTMLアプリの実例 + ブラウザ内AI

AIリッチテキストエディタ

見出し・太字・箇条書きなどをツールバーで自分で整えられる、普通のリッチテキストエディタです。それに加えて、ブラウザの中だけで動くAI(WebLLM/WebGPU)に「新しく書かせる」ことも、「選択した部分だけ書き直させる」こともできます。生成も編集もこの画面の中だけで完結し、書いている内容がサーバーへ送られることはありません。

このブラウザは、このツールが必要とする基本機能に対応していないようです。最新版のブラウザで開き直してください。

🤖 AIに書かせる・書き直させる

確認中…

文章中の一部を選択すると、「選択範囲を書き直す」が使えるようになります。

書くお題の例(「新しく書く」用)
書き直しの指示の例(テキストを選択してから)

このブラウザ・端末では、実際に使えるGPUアダプタを取得できなかったため、AI機能は利用できません(ブラウザがWebGPU自体に対応していない場合のほか、対応ブラウザでもハードウェアアクセラレーションが無効な環境ではこう表示されます)。デスクトップの最新Chrome/Edge/Firefox/Safariで試してみてください。ツールバーを使った手動での編集は、そのまま利用できます。

使っているのはQwen2.5-0.5Bという、パラメータ数0.5B(5億)の小型モデルを4bit量子化したものです。初回はモデル本体(数百MB)のダウンロードが必要で、数十秒〜数分かかります(2回目以降はブラウザにキャッシュされ、読み込みは速くなります)。小型モデルゆえに、特に自然な日本語の言い回しには限界があります――出力はあくまで下書きとして扱い、気になる部分はツールバーで手直ししてください。AIが返すのは常にプレーンテキストとして扱い、このページ側で安全なタグに変換してから挿入しています。

このエディタが今つくっているHTMLソースを見る

      
この画面自体も、単一HTMLファイル1個でできています。 ツールバーによる書式編集はブラウザ標準のリッチテキスト編集機能で動いており、AIモデルの読み込み・生成もすべてブラウザの中だけで完結します(初回のモデルファイル取得を除き、サーバー通信は発生しません)。AIの応答は常にプレーンテキストとして受け取り、このページのJavaScriptが安全なタグだけに変換してから文章に挿入しています――AIの出力をそのままHTMLとして信用することはありません。右クリック→「ページのソースを表示」で、このエディタを作っているHTML・CSS・JavaScriptをそのまま読むことができます。