> ## 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 paket npm](https://img.shields.io/npm/v/@sunra/client?color=%237527D7\&label=JavaScript\&style=flat-square)](https://www.npmjs.com/package/@sunra/client)

### Pendahuluan

Pustaka klien untuk JavaScript/TypeScript menawarkan antarmuka yang mudah digunakan untuk berinteraksi dengan layanan Sunra.

### Instalasi

Untuk mengintegrasikan klien ke dalam proyek Anda, instal menggunakan 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>

### Fitur

#### Memanggil Titik Akhir

Sunra mengelola permintaan titik akhir melalui sistem antrian, memastikan keandalan dan skalabilitas. Gunakan metode `subscribe` untuk mengirim permintaan dan menunggu hasilnya.

**Contoh:**

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

const result = await sunra.subscribe("black-forest-labs/flux-kontext-pro/text-to-image", {
  input: {
    prompt: "Teko teh kaca dengan teh bunga mekar di dalamnya, diletakkan di atas meja kayu di dekat jendela yang disinari matahari dengan cahaya pagi yang lembut.",
    "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);
```

#### Manajemen Antrian

Kelola permintaan Anda dengan metode ini:

##### Mengirim Permintaan

Kirim permintaan dan dapatkan `request_id` untuk penggunaan nanti.

**Contoh:**

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

const { request_id } = await sunra.queue.submit("black-forest-labs/flux-kontext-max", {
  input: {
    prompt: "Teko teh kaca dengan teh bunga mekar di dalamnya, diletakkan di atas meja kayu di dekat jendela yang disinari matahari dengan cahaya pagi yang lembut.",
    "aspect_ratio": "16:9",
    "output_format": "jpeg",
  },
});
```

##### Memeriksa Status Permintaan

Ambil status permintaan.

**Contoh:**

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

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

##### Mengambil Hasil Permintaan

Ambil hasil dari permintaan yang sudah selesai.

**Contoh:**

```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);
```

#### Penyimpanan

API `storage` memungkinkan Anda untuk mengunggah file dan menerima URL, yang kemudian dapat digunakan dalam permintaan titik akhir model Anda. Ini sangat berguna untuk model yang memerlukan input file, seperti gambar-ke-video atau ucapan-ke-teks.

<Note>Ukuran file maksimum: 100MB</Note>

##### Mengunggah File di Browser

Anda dapat mengizinkan pengguna untuk mengunggah file langsung dari browser mereka. Contoh berikut menunjukkan cara menggunakan elemen `<input type="file">` untuk memilih file dan mengunggahnya.

<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('File berhasil diunggah:', url);
        // Sekarang Anda dapat menggunakan URL ini dengan titik akhir model
      } catch (error) {
        console.error('Unggahan gagal:', error);
      }
    }
  });
  ```

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

##### Mengunggah File di Node.js

Di sisi server dengan Node.js, Anda dapat membaca file dari sistem file lokal dan mengunggahnya.

```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);
    // Klien membutuhkan objek File, yang dapat kita buat dari buffer
    const file = new File([buffer], basename(filePath));

    const url = await sunra.storage.upload(file);
    console.log('File berhasil diunggah:', url);
    return url;
  } catch (error) {
    console.error('Unggahan gagal:', error);
  }
}

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

#### Unggahan Otomatis dengan Titik Akhir Model

SDK JavaScript dapat menangani unggahan file secara otomatis untuk Anda. Ketika Anda memberikan objek `File`, `Blob`, atau URI data base64 ke input titik akhir model, SDK akan terlebih dahulu mengunggahnya ke penyimpanan dan kemudian menggunakan URL yang dihasilkan dalam permintaan.

Ini menyederhanakan proses karena Anda tidak perlu melakukan langkah unggah terpisah.

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

// Objek File dari input file browser akan diunggah secara otomatis
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 secara otomatis mengunggah file ini
    prompt: "Prompt yang menjelaskan apa yang harus dilakukan dengan gambar"
  }
});

// URI data base64 juga akan diunggah secara otomatis
const base64Image = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQ...";

const result2 = await sunra.subscribe("some-model-that-takes-images", {
  input: {
    image: base64Image, // SDK secara otomatis mengubah ini menjadi Blob dan mengunggahnya
    prompt: "Prompt yang menjelaskan apa yang harus dilakukan dengan gambar"
  }
});
```

### Dukungan

Bergabunglah dengan komunitas kami untuk bantuan atau diskusi:

* **Komunitas Discord**: [Bergabunglah dengan kami](https://discord.gg/897qCzvCcU)
* **Repositori GitHub**: [Kunjungi di sini](https://github.com/sunra-ai/sunra-clients)

Kami di sini untuk membantu Anda!