> 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/ko/self-hosted/sdks/web-browser/inferencejs.md).
# 웹 inference.js
`inferencejs` Roboflow에서 학습된 모델을 사용하여 브라우저를 통해 실시간 추론을 가능하게 하는 JavaScript 패키지입니다.
{% hint style="info" %}
다음을 참조하세요 `inferencejs` 참조 [여기](/deployment/ko/self-hosted/sdks/web-browser/inferencejs-reference.md)
{% endhint %}
대부분의 비즈니스 애플리케이션에서는 [호스팅 API](/deployment/ko/legacy/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 환경**: 우리는 "[시작하기](https://replit.com/@roboflow/Roboflow-Web-Quickstart)" 프로젝트를 Repl.it에 게시했으며, 함께 제공되는 튜토리얼에서는 [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를 사용하여 웹에 모델을 배포하기 위해 저장소 템플릿을 사용하는 방법에 대한 지침이 포함되어 있습니다.
* **문서**: 에서 특정 함수에 대한 더 자세한 정보를 원하시면 `inferencejs`, 다음을 확인해 보세요 [문서 페이지](/deployment/ko/self-hosted/sdks/web-browser/inferencejs-reference.md) 또는 다음에 대한 언급을 클릭하세요 `inferencejs` 아래 가이드의 메서드를 클릭하면 해당 문서로 이동합니다.
### 지원되는 모델
`inferencejs` 현재 다음 모델 아키텍처를 지원합니다:
* [RF-DETR](https://roboflow.com/model/rf-detr)
* Roboflow 3.0 (YOLOv8 호환)
* YOLOv5
* YOLOLite
* [시선 감지](/deployment/ko/self-hosted/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` 필요한 스레드 관리를 추상화해 주는 웹 워커 관리자입니다.
{% endhint %}
```typescript
import { InferenceEngine } from "inferencejs";
const inferEngine = new InferenceEngine();
```
이제 다음을 사용하여 Roboflow에서 모델을 로드할 수 있습니다 `publishable_key` 및 모델 ID와 함께 신뢰도 임계값 및 겹침 임계값과 같은 구성 매개변수를 사용합니다.
```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는 해당 버전에 별칭이 있으면 그 별칭을 통해 해석되며, 별칭이 없으면 버전에 단일 모델이 있을 때만 작동합니다. 그렇지 않으면 id가 모호하므로 자체 모델 id로 모델을 불러와야 합니다. 다음을 참조하세요 [레거시 ID가 해석되는 방식](https://docs.roboflow.com/models/model-ids).
`inferencejs` 이제 선택한 모델을 실행하는 워커가 시작됩니다. 반환된 워커 ID는 다음의 워커 ID와 일치합니다 `InferenceEngine` 우리가 추론에 사용할 것입니다. 모델에서 추론하려면 다음을 호출할 수 있습니다 `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);
```