> 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
`inferencejs` Roboflowで学習したモデルを使用して、ブラウザ経由でリアルタイム推論を可能にするJavaScriptパッケージです。
{% hint style="info" %}
をご覧ください `inferencejs` リファレンス [こちら](/deployment/ja/serufuhosuto/sdks/web-browser/inferencejs-reference.md)
{% endhint %}
ほとんどの業務アプリケーションでは、 [ホスト型API](/deployment/ja/regash/legacy-serverless.md) が適しています。しかし、多くのコンシューマー向けアプリケーションや一部のエンタープライズ用途では、サーバーでホストされたモデルは実用的ではありません（たとえば、ユーザーの帯域幅が制約されている場合や、リモートAPIより低いレイテンシが必要な場合など）。
### 学習リソース
* **ウェブカメラでモデルを試す**：ウェブカメラデモで [手検出モデルをこちらで試せます](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でインストールするか、ページの `` タグにスクリプトタグ参照を追加するだけです。
```bash
npm install inferencejs
```
```html
```
## 初期化中 `inferencejs`
### 認証中
以下から `publishable_key` を取得できます。Roboflowワークスペースの設定から入手してください。
{% hint style="warning" %}
**注意:** あなたの `publishable_key` は `inferencejs`, **ありません** あなたの **プライベート** APIキーとともに使用されます（これは秘密にしておく必要があります）。
{% endhint %}
まず `InferenceEngine` をインポートして、新しい推論エンジンオブジェクトを作成します
{% hint style="info" %}
`inferencejs` はWeb Workerを使用しているため、複数のモデルをメインのUIスレッドをブロックせずに使用できます。各モデルは `InferenceEngine` 必要なスレッド管理を抽象化してくれるWeb Workerマネージャーです。
{% endhint %}
```typescript
import { InferenceEngine } from "inferencejs";
const inferEngine = new InferenceEngine();
```
これで、あなたの `publishable_key` とモデルID、さらに信頼度しきい値や重なりしきい値などの設定パラメータを使ってRoboflowからモデルを読み込めます。
```typescript
const workerId = await inferEngine.startWorkerByModelId("[model id]", "[publishable key]");
```
モデル id はモデルのページに表示され、次の形式になっています `workspace/model-slug` (例: `my-workspace/hard-hat-abc-1-yolov8n-t1`）。レガシーのプロジェクトバージョン付きモデルを読み込むには、代わりに `startWorker` をプロジェクトスラッグとバージョン番号で使用します。複数の学習済みモデルを持つバージョンの場合、レガシーの `{project}/{version}` id は、存在する場合はそのバージョンのエイリアスを通じて解決されます。エイリアスがない場合は、バージョンにモデルが 1 つだけあるときのみ機能し、それ以外では id が曖昧になり、モデル自体の model id で読み込む必要があります。参照: [レガシー ID の解決方法](https://docs.roboflow.com/models/model-ids).
`inferencejs` は、選択したモデルを実行するworkerを開始します。返されるworker IDは、 `InferenceEngine` でのworker IDに対応します。推論に使用するため、モデルに対して推論を行うには `infer` メソッドを `InferenceEngine`.
画像を読み込み、worker上で推論してみましょう。
```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` 予測のフィルタリング方法を設定したい場合は、作成時にworkerへパラメータを渡すことができます。
```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);
```