Skip to content

Latest commit

 

History

History
128 lines (94 loc) · 7.57 KB

README.md

File metadata and controls

128 lines (94 loc) · 7.57 KB
Raw

Phi-3-mini WebGPU RAG Chatbot

WebGPUとRAGパターンのデモ

Phi-3 Onnx Hostedモデルを使用したRAGパターンは、Retrieval-Augmented Generationアプローチを活用し、Phi-3モデルの力とONNXホスティングを組み合わせて効率的なAIデプロイメントを実現します。このパターンは、ドメイン固有のタスクにモデルを微調整するのに役立ち、品質、コスト効率、長文理解を兼ね備えています。Azure AIのスイートの一部であり、様々な業界のカスタマイズニーズに対応するために、見つけやすく、試しやすく、使いやすいモデルの幅広い選択肢を提供しています。Phi-3モデルにはPhi-3-mini、Phi-3-small、Phi-3-mediumがあり、Azure AI Model Catalogで利用可能で、自己管理またはHuggingFaceやONNXなどのプラットフォームを通じて微調整およびデプロイできます。これは、アクセスしやすく効率的なAIソリューションに対するMicrosoftのコミットメントを示しています。

WebGPUとは

WebGPUは、ウェブブラウザから直接デバイスのグラフィックス処理ユニット（GPU）への効率的なアクセスを提供するために設計された最新のウェブグラフィックスAPIです。WebGLの後継を意図しており、以下の主要な改善点を提供します：

  1. 最新のGPUとの互換性: WebGPUは、Vulkan、Metal、Direct3D 12などのシステムAPIを活用し、現代のGPUアーキテクチャとシームレスに動作するように構築されています。
  2. 性能向上: 一般的なGPU計算と高速な操作をサポートし、グラフィックスレンダリングや機械学習タスクに適しています。
  3. 高度な機能: WebGPUは、より複雑で動的なグラフィックスおよび計算ワークロードを可能にする高度なGPU機能へのアクセスを提供します。
  4. JavaScriptの負荷軽減: より多くのタスクをGPUにオフロードすることで、WebGPUはJavaScriptの負荷を大幅に軽減し、パフォーマンスの向上とスムーズな体験を実現します。

WebGPUは現在、Google Chromeなどのブラウザでサポートされており、他のプラットフォームへのサポート拡大が進行中です。

03.WebGPU

必要な環境:

サポートされているブラウザ:

  • Google Chrome 113+
  • Microsoft Edge 113+
  • Safari 18 (macOS 15)
  • Firefox Nightly.

WebGPUを有効にする:

  • Chrome/Microsoft Edgeで

chrome://flags/#enable-unsafe-webgpu フラグを有効にします。

ブラウザを開く:

Google ChromeまたはMicrosoft Edgeを起動します。

フラグページにアクセス:

アドレスバーに chrome://flags と入力し、Enterキーを押します。

フラグを検索:

ページ上部の検索ボックスに 'enable-unsafe-webgpu' と入力します。

フラグを有効にする:

結果リストの中から #enable-unsafe-webgpu フラグを見つけます。

その隣のドロップダウンメニューをクリックし、「有効」を選択します。

ブラウザを再起動:

フラグを有効にした後、変更を反映するためにブラウザを再起動する必要があります。ページ下部に表示される再起動ボタンをクリックします。

  • Linuxの場合、--enable-features=Vulkan オプションでブラウザを起動します。
  • Safari 18 (macOS 15) はデフォルトでWebGPUが有効になっています。
  • Firefox Nightlyでは、アドレスバーにabout:configと入力し、dom.webgpu.enabled をtrueに設定します。

Microsoft EdgeのGPU設定

WindowsでMicrosoft Edge用の高性能GPUを設定する手順は以下の通りです:

  • 設定を開く: スタートメニューをクリックし、設定を選択します。
  • システム設定: システムに移動し、ディスプレイを選択します。
  • グラフィックス設定: 下にスクロールしてグラフィックス設定をクリックします。
  • アプリを選択: 「優先設定を設定するアプリの選択」からデスクトップアプリを選択し、参照をクリックします。
  • Edgeを選択: Edgeのインストールフォルダ（通常は C:\Program Files (x86)\Microsoft\Edge\Application）に移動し、msedge.exe を選択します。
  • 優先設定を設定: オプションをクリックし、高性能を選択してから保存をクリックします。 これにより、Microsoft Edgeが高性能GPUを使用してより良いパフォーマンスを実現します。
  • 再起動 これらの設定を有効にするために、マシンを再起動します。

Codespaceを開く:

GitHub上のリポジトリに移動します。 コードボタンをクリックし、Codespacesで開くを選択します。

Codespaceがまだない場合は、新しいCodespaceを作成するために新しいCodespaceをクリックします。

Note CodespaceにNode環境をインストールする GitHub Codespaceからnpmデモを実行するのは、プロジェクトをテストし開発するための素晴らしい方法です。以下は、始めるためのステップバイステップガイドです:

環境を設定する:

Codespaceが開いたら、Node.jsとnpmがインストールされていることを確認します。以下のコマンドを実行して確認できます:

node -v

npm -v

インストールされていない場合は、以下のコマンドでインストールできます:

sudo apt-get update

sudo apt-get install nodejs npm

プロジェクトディレクトリに移動:

ターミナルを使用してnpmプロジェクトがあるディレクトリに移動します:

cd path/to/your/project

依存関係をインストール:

package.jsonファイルに記載されているすべての依存関係をインストールするには、以下のコマンドを実行します:

npm install

デモを実行:

依存関係がインストールされたら、デモスクリプトを実行できます。これは通常、package.jsonのscriptsセクションに指定されています。例えば、デモスクリプトがstartという名前の場合、以下のコマンドを実行します:

npm run build

npm run dev

デモにアクセス:

デモがウェブサーバーを含む場合、CodespacesはアクセスするためのURLを提供します。通知を確認するか、PortsタブをチェックしてURLを見つけてください。

Note: モデルはブラウザにキャッシュされる必要があるため、読み込みに時間がかかる場合があります。

RAGデモ

RAGソリューションを完了するために、markdownファイル intro_rag.md をアップロードします。Codespacesを使用している場合は、01.InferencePhi3/docs/ にあるファイルをダウンロードできます。

ファイルを選択:

「ファイルを選択」ボタンをクリックして、アップロードするドキュメントを選択します。

ドキュメントをアップロード:

ファイルを選択した後、「アップロード」ボタンをクリックして、ドキュメントをRAG（Retrieval-Augmented Generation）用にロードします。

チャットを開始:

ドキュメントがアップロードされたら、その内容に基づいてRAGを使用したチャットセッションを開始できます。