> 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/roboflow-cloud/serverless-api.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를 사용하여 웹에 모델을 배포하는 데 repository 템플릿을 사용하는 방법에 대한 안내가 포함되어 있습니다.
* **문서**: 다음에 대한 특정 함수의 더 자세한 내용이 필요하다면 `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)
### 설치
추가하려면 `inference` 프로젝트에, npm으로 설치하거나 페이지의 `` 태그에 script 태그 참조를 추가하세요.
```bash
npm install inferencejs
```
```html
```
## 초기화 중 `inferencejs`
### 인증 중
다음을 얻을 수 있습니다 `publishable_key` 를 Roboflow 작업 공간 설정에서.
{% hint style="warning" %}
**참고:** 귀하의 `publishable_key` 는 다음과 함께 사용됩니다 `inferencejs`, **아니요** 귀하의 **비공개** API 키(비밀로 유지해야 합니다).
{% endhint %}
먼저 `InferenceEngine` 을 import하고 새로운 inference engine 객체를 생성합니다
{% hint style="info" %}
`inferencejs` 는 webworker를 사용하므로 여러 모델을 메인 UI 스레드를 차단하지 않고 사용할 수 있습니다. 각 모델은 `InferenceEngine` 필요한 스레드 관리를 추상화해 주는 저희의 webworker 관리자를 통해 로드됩니다.
{% endhint %}
```typescript
import { InferenceEngine } from "inferencejs";
const inferEngine = new InferenceEngine();
```
이제 귀하의 `publishable_key` 및 모델 ID와 함께 confidence threshold 및 overlap threshold 같은 구성 매개변수를 사용해 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는 별칭이 있는 경우 해당 버전의 별칭을 통해 해석됩니다. 별칭이 없으면 버전에 단일 모델이 있을 때만 작동하며, 그렇지 않으면 ID가 모호하므로 모델 자체의 모델 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);
```