> For the complete documentation index, see [llms.txt](https://docs.roboflow.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.roboflow.com/deployment/ja/serufuhosuto/sdks/web-browser/inferencejs.md).
# Web inference.js
ブラウザー上のエッジでリアルタイム推論を、inference.js を使って実行します
`inferencejs` は、Roboflow で学習したモデルを使ってブラウザ経由でリアルタイム推論を可能にする JavaScript パッケージです。
{% hint style="info" %}
次を参照してください `inferencejs` リファレンス [こちら](/deployment/ja/serufuhosuto/sdks/web-browser/inferencejs-reference.md)
{% endhint %}
ほとんどのビジネス用途では、 [サーバーレス Cloud API](/deployment/ja/roboflow-cloud/serverless-api.md) が適しています。しかし、多くのコンシューマー向けアプリケーションや一部のエンタープライズ用途では、サーバーでホストされたモデルは現実的ではありません（たとえば、ユーザーの回線帯域が限られている場合や、リモート API で達成できるよりも低いレイテンシが必要な場合など）。
### 学習リソース
* **ウェブカメラでモデルを試す**：ウェブカメラのデモで [hand-detector モデルをここで試せます](https://demo.roboflow.com/egohands-public/9?publishable_key=rf_5w20VzQObTXjJhTjq6kad9ubrm33) （これは公開されている [EgoHands データセット](https://universe.roboflow.com/brad-dwyer/egohands-public/)).
* **インタラクティブな Replit 環境**：Repl.it 上に「[はじめに](https://replit.com/@roboflow/Roboflow-Web-Quickstart)」プロジェクトを公開しており、付属のチュートリアルでは [Repl.it テンプレートを使って YOLOv8 モデルをデプロイする方法を紹介しています](https://blog.roboflow.com/deploy-yolov8-models-to-replit/).
* **GitHub テンプレート**: [Roboflow のホームページは](https://github.com/roboflow/homepage-demo) を使用して `inferencejs` COCO 推論ウィジェットを動かしています。README には、GitHub Pages を使ってリポジトリテンプレートからモデルを Web にデプロイする方法が記載されています。
* **ドキュメント**： `inferencejs`の特定の関数について詳しく知りたい場合は、 [ドキュメントページ](/deployment/ja/serufuhosuto/sdks/web-browser/inferencejs-reference.md) をご覧いただくか、以下のガイド内にある `inferencejs` メソッド名をクリックすると、該当するドキュメントに移動できます。
### 対応モデル
`inferencejs` は現在、次のモデルアーキテクチャをサポートしています：
* [RF-DETR](https://roboflow.com/model/rf-detr)
* Roboflow 3.0（YOLOv8 互換）
* YOLOv5
* YOLOLite
* [視線検出](/deployment/ja/serufuhosuto/sdks/web-browser/inferencejs-reference.md#gazedetections)
### インストール
を追加するには `推論` をプロジェクトに追加するには、npm でインストールするか、ページの `` タグに script タグの参照を追加してください。
```bash
npm install inferencejs
```
```html
```
## 初期化 `inferencejs`
### 認証中
次を取得できます `publishable_key` を Roboflow のワークスペース設定から。
.png?alt=media)
{% hint style="warning" %}
**注意:** あなたの `publishable_key` は `inferencejs`, **ありません** あなたの **プライベートの** API キーと一緒に使用されます（これは秘密にしておく必要があります）。
{% endhint %}
まず `InferenceEngine` をインポートして、新しい推論エンジンオブジェクトを作成します
{% hint style="info" %}
`inferencejs` は webworker を使用しているため、メインの UI スレッドをブロックせずに複数のモデルを使用できます。各モデルは `InferenceEngine` を通じて読み込まれます。これは、必要なスレッド管理を抽象化する webworker マネージャーです。
{% endhint %}
```typescript
import { InferenceEngine } from "inferencejs";
const inferEngine = new InferenceEngine();
```
これで、Roboflow の `publishable_key` とモデル ID、さらに confidence threshold や overlap threshold などの設定パラメータを使ってモデルを読み込めます。
```typescript
const workerId = await inferEngine.startWorkerByModelId("[model id]", "[publishable key]");
```
モデル ID はモデルのページに表示され、次の形式になります `workspace/model-slug` （例: `my-workspace/hard-hat-abc-1-yolov8n-t1`）。従来のプロジェクト版モデルを読み込むには、代わりに `startWorker` をプロジェクトの slug とバージョン番号とともに使用してください。複数の学習済みモデルがあるバージョンでは、従来の `{project}/{version}` ID は、存在する場合はそのバージョンのエイリアスを通じて解決されます。エイリアスがない場合は、そのバージョンに単一のモデルしかないときのみ機能し、それ以外では ID が曖昧になるため、モデル自身のモデル ID で読み込む必要があります。次を参照してください [従来の ID がどのように解決されるか](https://docs.roboflow.com/models/model-ids).
`inferencejs` これで、選択したモデルを実行するワーカーが起動します。返される worker id は、 `InferenceEngine` で推論に使用する worker id に対応します。モデルに対して推論するには、 `infer` メソッドを `InferenceEngine`.
画像を読み込んで、ワーカーで推論してみましょう。
```typescript
const image = document.getElementById("image"); // id `image` の画像要素を取得
const predictions = await inferEngine.infer(workerId, image); // 画像で推論
```
{% hint style="info" %}
これはさまざまな画像形式を受け取れます（`HTMLImageElement`, `HTMLVideoElement`, `ImageBitmap`、または `TFJS Tensor`).
{% endhint %}
これは予測結果の配列を返します（この場合、クラスとしては `RFObjectDetectionPrediction` )
### 設定
の予測の絞り込み方法をカスタマイズ・設定したい場合は、作成時にワーカーへパラメータを渡せます。 `inferencejs` が予測をフィルタリングする方法をカスタマイズ・設定したい場合は、作成時にワーカーへパラメータを渡せます。
```typescript
const configuration = [{ scoreThreshold: 0.5, iouThreshold: 0.5, maxNumBoxes: 20 }];
const workerId = await inferEngine.startWorkerByModelId("[model id]", "[publishable key]", configuration);
```
または、推論時に設定オプションを渡すこともできます
```javascript
const configuration = [{
scoreThreshold: 0.5,
iouThreshold: 0.5,
maxNumBoxes: 20
}];
const predictions = await inferEngine.infer(workerId, image, configuration);
```