BrowserAI：WebGPUを使ってブラウザ上でローカルにAIモデルを実行する

はじめに

BrowserAIは、ユーザーがブラウザ上でネイティブAIモデルを直接実行できるオープンソースツールです。Cloud-Code-AIチームによって開発され、Llama、DeepSeek、Kokoroのような言語モデルをサポートしています。ユーザーは、サーバーや複雑なセットアップを必要とせずに、ブラウザを通じてテキスト生成、音声認識、音声合成などのタスクを実行できる。BrowserAIはシンプルで使いやすいため、開発者はAIアプリの開発に利用でき、一般ユーザーもAI機能を体験できる。このプロジェクトはGitHubで無料で公開されているため、誰でもコードをダウンロードして使用したり、改良したりすることができる。

BrowserAIテキスト対話

ブラウザAI音声対話

BrowserAI 音声合成

機能一覧

• サーバーのサポートなしに、ブラウザ上でローカルのAIモデルを実行できます。
• ユーザーがテキストを入力し、自然言語の応答を得ることができるように、テキスト生成がサポートされています。
• 音声をテキストに変換する音声認識を提供します。
• テキストを再生可能なオーディオに変換する音声合成をサポート。
• WebGPUで高速化され、ネイティブに近いパフォーマンスで動作する。
• オフライン機能が提供されているため、最初のダウンロード以降はインターネット接続が不要です。
• オープンソースコードで、開発者がモデルや機能をカスタマイズできるようサポート。

ヘルプの使用

設置プロセス

BrowserAIは伝統的なインストールを必要としませんが、実行するための環境とコードの準備が必要です。正確な手順は以下の通りです：

1. ブラウザをチェック
   • Chrome 113+やEdge 113+などのWebGPU対応ブラウザを使用します。ブラウザのアドレスバーに chrome://gpu WebGPUが有効になっているか確認する。
   • お使いのコンピュータのハードウェアが16ビット浮動小数点をサポートしていること（モデルによっては必須）、通常のCPUでも動作しますが、GPUの方が高速であることをご確認ください。
2. ダウンロードコード
   • https://github.com/Cloud-Code-AI/BrowserAI。
   • Code "ボタンをクリックし、"Download ZIP "を選択してダウンロードする。 git clone https://github.com/Cloud-Code-AI/BrowserAI.git.
   • ファイルを解凍するか、フォルダに移動してください。
3. Node.jsと依存関係のインストール
   • まず、Node.jsをインストールする。Node.jsの公式ウェブサイトからダウンロードし、インストールが完了したら、次のように入力する。 ノード -v バージョンを確認する。
   • ターミナルを開き、BrowserAIのフォルダに移動します（例 cd BrowserAI).
   • 輸入 npmインストール 依存関係のインストールには数分かかります。
4. プロジェクトの開始
   • ターミナルで npm run devローカルサーバーを起動する。
   • ブラウザを開き、次のように入力する。 http://localhost:3000(ポート番号については端末のプロンプトを参照）、BrowserAIのインターフェースに入る。

主な機能の使い方

BrowserAIの中核は、ブラウザ上でAIモデルを実行することである。

機能1：テキスト生成

• 手続き
  1. 起動後、インターフェイスにモデル選択ボックスが表示されます。 ラマ3.2-1b-インストラクト などのオプションがある。
  2. Load Model "をクリックし、モデルがロードされるのを待ちます（コンピュータの性能によりますが、数秒から数分）。
  3. 入力ボックスにテキストを入力する。生成」をクリックする。
  4. このシステムは、"今日はお出かけ日和ですね "といった返答を生成する。.
• ヒントとコツ
  • 小型モデル（例 タイニーラマ-1.1B)のロードは速く、ローエンドのコンピューターに適している。
  • 具体的な質問を入力すると、より正確な回答が得られます。例えば、"50語の技術記事を書く "などです。
• アプリケーションシナリオ
  • 記事の初稿を書いたり、対話を生み出したり、模範的な言語能力をテストしたりする。

機能2：音声認識

• 手続き
  1. 以下のような音声認識に対応したモデルを選択する。 ウィスパー・タイニー.
  2. Load Model "をクリックしてモデルをロードする。
  3. 録音開始」をクリックし、マイクに向かって「こんにちは、BrowserAI」などと話しかける。
  4. StopRecording "をクリックし、数秒待つと、インターフェイスに "Hello, BrowserAI "のような書き起こされたテキストが表示されます。
• ヒントとコツ
  • より良い結果を得るためには、マイクが正しく動作し、周囲の雑音が少ないことを確認してください。
  • オプションのパラメータ 戻りタイムスタンプ 各段落のタイムスタンプを表示します。
• アプリケーションシナリオ
  • 会議の録音、音声メモの書き起こし、音声入力アプリケーションの開発。

機能3：音声合成

• 手続き
  1. オプション ココロツ モデルを選択し、"Load Model "をクリックする。
  2. "BrowserAIの体験へようこそ "などのテキストを入力する。
  3. 音声を選択する（例 af_bella)と速度(デフォルトは1.0)を設定し、"Text to Speech "をクリックします。
  4. オーディオを生成し、自動的に再生するか、ファイルをダウンロードします。
• ヒントとコツ
  • フレーズはより自然で、遅いスピード（例えば0.8）の方が明確だ。
  • さまざまな音声オプションを試して、最も適したトーンを見つけましょう。
• アプリケーションシナリオ
  • ボイスプロンプトの作成、ポッドキャストクリップの生成、ビデオのダビング。

機能4：開発者のカスタマイズ

• 手続き
  1. 使用したいモデルファイル（例：Hugging Faceから）をダウンロードし、プロジェクト・ディレクトリに置く ( README.md).
  2. コンパイラ src/index.tsモデル・パスを追加する。
  3. うごきだす npm run dev新しいモデルをロードする。
• ヒントとコツ
  • モデルがWebGPUとWebAssemblyに対応していることを確認してください。
  • コードがわからない場合は、GitHubで問題を提起してください。
• アプリケーションシナリオ
  • 新しいモデルのテスト、カスタムAIアプリケーションの開発

サンプルコードでは

テキスト生成

• BrowserAIをプロジェクトに導入：

  import { BrowserAI } from '@browserai/browserai'；
  const ai = new BrowserAI()；
  await ai.loadModel('llama-3.2-1b-instruct'); const response = await ai.generateText('@browserai/browserai')
  const response = await ai.generateText('Hello, how's the weather today?').;
  console.log(response)；

音声テキスト

• 音声を録音し、書き起こす：

  const ai = new BrowserAI()；
  await ai.loadModel('whisper-tiny-en')；
  await ai.startRecording(); const audio = await ai.stopRecording(); await ai.stopRecording()
  const audio = await ai.stopRecording(); const text = await ai.transcribeAccess('whisper-tiny-en')
  const text = await ai.transcribeAudio(audio); console.log(text)；
  console.log(text)；
  

ほら

• パフォーマンス大型モデル（例 ラマ3.2-3bハイエンドのコンピューターが必要で、ローエンドには小型モデルを推奨する。
• オフラインでの使用ただし、事前にモデルをダウンロードしておく必要があります。
• 地域支援問題を追加することができる ディスコード 探り (さんぷ.

BrowserAIはシンプルでパワフルです。ステップに従って環境を設定するだけで、ブラウザでローカルAIの利便性を体験できます。