> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sunra.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# JavaScript / TypeScript

[![@sunra/client npm package](https://img.shields.io/npm/v/@sunra/client?color=%237527D7\&label=JavaScript\&style=flat-square)](https://www.npmjs.com/package/@sunra/client)

### はじめに

JavaScript/TypeScript 用のクライアントライブラリは、Sunra のサービスと対話するための使いやすいインターフェースを提供します。

### インストール

プロジェクトにクライアントを統合するには、npm を使用してインストールします。

<CodeGroup>
  ```bash npm theme={null}
  npm install @sunra/client
  ```

  ```bash pnpm theme={null}
  pnpm add @sunra/client
  ```

  ```bash yarn theme={null}
  yarn add @sunra/client
  ```
</CodeGroup>

### 機能

#### エンドポイントの呼び出し

Sunra はキューシステムを介してエンドポイントリクエストを管理し、信頼性とスケーラビリティを確保します。リクエストを送信して結果を待つには `subscribe` メソッドを使用します。

**例:**

```javascript theme={null}
import { sunra } from "@sunra/client";

const result = await sunra.subscribe("black-forest-labs/flux-kontext-pro/text-to-image", {
  input: {
    prompt: "花が咲いているお茶が入ったガラスのティーポットが、太陽の光が差し込む窓際の木製のテーブルに置かれ、穏やかな朝の光が差し込んでいます。",
    "aspect_ratio": "16:9",
    "output_format": "jpeg",
  },
  logs: true,
  onQueueUpdate: (update) => {
    if (update.status === "IN_PROGRESS") {
      console.log(update.logs)
    }
  },
});

console.log(result.data);
console.log(result.requestId);
```

#### キュー管理

これらのメソッドでリクエストを管理します。

##### リクエストの送信

リクエストを送信し、後で使用するために `request_id` を取得します。

**例:**

```javascript theme={null}
import { sunra } from "@sunra/client";

const { request_id } = await sunra.queue.submit("black-forest-labs/flux-kontext-max", {
  input: {
    prompt: "花が咲いているお茶が入ったガラスのティーポットが、太陽の光が差し込む窓際の木製のテーブルに置かれ、穏やかな朝の光が差し込んでいます。",
    "aspect_ratio": "16:9",
    "output_format": "jpeg",
  },
});
```

##### リクエストステータスの確認

リクエストのステータスを取得します。

**例:**

```javascript theme={null}
import { sunra } from "@sunra/client";

const status = await sunra.queue.status({
  requestId: "pd_eTYYuw4EqYLzRBHgnAMHA8zH",
  logs: true,
});
```

##### リクエスト結果の取得

完了したリクエストの結果を取得します。

**例:**

```javascript theme={null}
import { sunra } from "@sunra/client";

const result = await sunra.queue.result({
  requestId: "pd_eTYYuw4EqYLzRBHgnAMHA8zH",
});

console.log(result.data);
console.log(result.requestId);
```

#### ストレージ

`storage` API を使用すると、ファイルをアップロードして URL を受け取ることができ、その URL をモデルエンドポイントリクエストで使用できます。これは、画像から動画へ、または音声からテキストへなど、ファイル入力を必要とするモデルに特に便利です。

<Note>最大ファイルサイズ: 100MB</Note>

##### ブラウザでのファイルのアップロード

ユーザーがブラウザから直接ファイルをアップロードできるようにすることができます。次の例は、`<input type="file">` 要素を使用してファイルを選択し、アップロードする方法を示しています。

<CodeGroup>
  ```javascript upload.js theme={null}
  import { sunra } from "@sunra/client";

  const fileInput = document.getElementById('file-input');

  fileInput.addEventListener('change', async (event) => {
    const file = event.target.files[0];
    if (file) {
      try {
        const url = await sunra.storage.upload(file);
        console.log('ファイルが正常にアップロードされました:', url);
        // これで、この URL をモデルエンドポイントで使用できます
      } catch (error) {
        console.error('アップロードに失敗しました:', error);
      }
    }
  });
  ```

  ```html index.html theme={null}
  <input type="file" id="file-input" />
  ```
</CodeGroup>

##### Node.js でのファイルのアップロード

Node.js を使用したサーバー側では、ローカルファイルシステムからファイルを読み込んでアップロードできます。

```javascript theme={null}
import { sunra } from "@sunra/client";
import { readFile } from "node:fs/promises";
import { basename } from "node:path";

async function uploadLocalFile(filePath) {
  try {
    const buffer = await readFile(filePath);
    // クライアントには File オブジェクトが必要ですが、バッファから作成できます
    const file = new File([buffer], basename(filePath));

    const url = await sunra.storage.upload(file);
    console.log('ファイルが正常にアップロードされました:', url);
    return url;
  } catch (error) {
    console.error('アップロードに失敗しました:', error);
  }
}

uploadLocalFile("./path/to/your/image.png");
```

#### モデルエンドポイントによる自動アップロード

JavaScript SDK は、ファイルアップロードを自動的に処理できます。モデルエンドポイントの入力に `File` オブジェクト、`Blob`、または base64 データ URI を渡すと、SDK は最初にそれをストレージにアップロードし、リクエストで結果の URL を使用します。

これにより、別のアップロード手順を実行する必要がなくなるため、プロセスが簡素化されます。

```javascript theme={null}
import { sunra } from "@sunra/client";

// ブラウザのファイル入力からの File オブジェクトは自動的にアップロードされます
const fileInput = document.getElementById('file-input');
const file = fileInput.files[0];

const result = await sunra.subscribe("some-model-that-takes-images", {
  input: {
    image: file, // SDK はこのファイルを自動的にアップロードします
    prompt: "画像で何をするかを説明するプロンプト"
  }
});

// base64 データ URI も自動的にアップロードされます
const base64Image = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQ...";

const result2 = await sunra.subscribe("some-model-that-takes-images", {
  input: {
    image: base64Image, // SDK はこれを自動的に Blob に変換してアップロードします
    prompt: "画像で何をするかを説明するプロンプト"
  }
});
```

### サポート

ヘルプやディスカッションについては、コミュニティにご参加ください。

* **Discord コミュニティ**: [参加する](https://discord.gg/897qCzvCcU)
* **GitHub リポジトリ**: [こちらをご覧ください](https://github.com/sunra-ai/sunra-clients)

サポートさせていただきます！