# inferencejs 참고

{% hint style="info" %}
다음에 대해 자세히 알아보기 `inferencejs` , 우리의 웹 SDK, [여기](/roboflow/roboflow-ko/deploy/sdks/web-browser.md)
{% endhint %}

### 설치

이 라이브러리는 vite, webpack, parcel 등과 같은 번들러를 사용하여 브라우저 내에서 사용하도록 설계되었습니다. 번들러가 설정되어 있다고 가정하면, 다음을 실행하여 설치할 수 있습니다:

`npm install inferencejs`

### 시작하기

다음으로 초기화하여 시작하세요 `InferenceEngine`. 이렇게 하면 사용자 인터페이스를 차단하지 않고 모델을 다운로드하고\
실행할 수 있는 백그라운드 워커가 시작됩니다.

```typescript
import { InferenceEngine } from "inferencejs";

const PUBLISHABLE_KEY = "rf_a6cd..."; // Roboflow에서 가져온 본인의 publishable key로 교체하세요

const inferEngine = new InferenceEngine();
const workerId = await inferEngine.startWorker("[PROJECT URL SLUG]", [VERSION NUMBER], PUBLISHABLE_KEY);

// 모델에 대해 추론 실행
const result = await inferEngine.infer(workerId, img);
```

## API

### InferenceEngine

**`new InferenceEngine()`**

새로운 InferenceEngine 인스턴스를 생성합니다.

**`startWorker(modelName: string, modelVersion: number, publishableKey: string): Promise<number>`**

지정된 모델에 대해 새 워커를 시작하고 `workerId`. **중요**- `publishableKey` 가 필요하며, Roboflow의 프로젝트 설정 폴더에서 얻을 수 있습니다.

**`infer(workerId: number, img: CVImage | ImageBitmap): Promise<Inference>`**

지정된 `workerId`. `img` 는 다음을 사용하여 생성할 수 있습니다 `new CVImage(HTMLImageElement | HTMLVideoElement | ImageBitmap | TFJS.Tensor)` 또는 [`createImageBitmap`](https://developer.mozilla.org/en-US/docs/Web/API/createImageBitmap)

**`stopWorker(workerId: number): Promise<void>`**

지정된 워커를 중지합니다 `workerId`.

### `YOLO Lite` `YOLOv8` `YOLOv5`

을 사용하여 추론한 결과는 다음 유형의 배열입니다: `InferenceEngine` YOLO Lite, YOLOv8 또는 YOLOv5 객체 감지 모델에서

```typescript
type RFObjectDetectionPrediction = {
    class?: string;
    confidence?: number;
    bbox?: {
        x: number;
        y: number;
        width: number;
        height: number;
    };
    color?: string;
};
```

### `GazeDetections`

을 사용하여 추론한 결과는 다음 유형의 배열입니다: `InferenceEngine` Gaze 모델에서. 다음 유형의 배열입니다:

```typescript
type GazeDetections = {
    leftEye: { x: number; y: number };
    rightEye: { x: number; y: number };
    yaw: number;
    pitch: number;
}[];
```

**`leftEye.x`**

왼쪽 눈의 x 위치로, 입력 이미지 너비의 백분율로 측정된 0과 1 사이의 부동 소수점 숫자입니다.

**`leftEye.y`**

왼쪽 눈의 y 위치로, 입력 이미지 높이의 백분율로 측정된 0과 1 사이의 부동 소수점 숫자입니다.

**`rightEye.x`**

오른쪽 눈의 x 위치로, 입력 이미지 너비의 백분율로 측정된 0과 1 사이의 부동 소수점 숫자입니다.

**`rightEye.y`**

오른쪽 눈의 y 위치로, 입력 이미지 높이의 백분율로 측정된 0과 1 사이의 부동 소수점 숫자입니다.

**`yaw`**

시선의 yaw를 라디안 단위로 측정한 값입니다.

**`pitch`**

시선의 pitch를 라디안 단위로 측정한 값입니다.

### `CVImage`

컴퓨터 비전 작업에 사용할 수 있는 이미지를 나타내는 클래스입니다. 이미지를 조작하고 변환하기 위한 다양한 메서드를 제공합니다.

#### **생성자**

다음 `CVImage(image)` 클래스 생성자는 클래스의 새 인스턴스를 초기화합니다. 다음 유형 중 하나의 이미지를 하나 받습니다:

* `ImageBitmap`: 선택 사항인 `ImageBitmap` 이미지 표현입니다.
* `HTMLImageElement`: 선택 사항인 `HTMLImageElement` 이미지 표현입니다.
* `tf.Tensor`: 선택 사항인 `tf.Tensor` 이미지 표현입니다.
* `tf.Tensor4D`: 선택 사항인 4D `tf.Tensor` 이미지 표현입니다.

#### **메서드**

**`bitmap()`**

다음으로 해결되는 promise를 반환합니다 `ImageBitmap` 이미지 표현입니다. 이미지가 이미 bitmap인 경우 캐시된 bitmap을 반환합니다.

**`tensor()`**

다음을 반환합니다 `tf.Tensor` 이미지 표현입니다. 이미지가 이미 tensor인 경우 캐시된 tensor를 반환합니다.

**`tensor4D()`**

다음으로 해결되는 promise를 반환합니다 `tf.Tensor` 이미지 표현입니다. 이미지가 이미 4D tensor인 경우 캐시된 4D tensor를 반환합니다.

**`array()`**

이미지의 JavaScript 배열 표현으로 해결되는 promise를 반환합니다. 이미지가 이미 tensor인 경우 tensor를 배열로 변환합니다.

**`dims()`**

이미지의 차원을 포함하는 배열을 반환합니다. 이미지가 bitmap인 경우 다음을 반환합니다 `[width, height]`. 이미지가 tensor인 경우 tensor의 shape를 반환합니다. 이미지가 HTML 이미지 요소인 경우 다음을 반환합니다 `[width, height]`.

**`dispose()`**

메모리를 확보하기 위해 이미지의 tensor 표현을 해제합니다.

**`static fromArray(array: tf.TensorLike)`**

새로운 `CVImage` 인스턴스를 주어진 tensor-like 배열로부터 생성합니다.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.roboflow.com/roboflow/roboflow-ko/deploy/sdks/web-browser/web-inference.js/inferencejs-reference.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.