JavaScript / TypeScript

Introduction

The client library for JavaScript/TypeScript offers an easy-to-use interface to interact with Sunra’s services.

Installation

To integrate the client into your project, install it using npm:

npm install @sunra/client

pnpm add @sunra/client

yarn add @sunra/client

Features

Calling Endpoints

Sunra manages endpoint requests through a queue system, ensuring reliability and scalability. Use the subscribe method to submit a request and await the result. Example:

import { sunra } from "@sunra/client";

const result = await sunra.subscribe("black-forest-labs/flux-kontext-pro/text-to-image", {
  input: {
    prompt: "A glass teapot with blooming flower tea inside, placed on a wooden table by a sunlit window with gentle morning light.",
    "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);

Queue Management

Manage your requests with these methods:

Submitting a Request

Submit a request and retrieve the request_id for later use. Example:

import { sunra } from "@sunra/client";

const { request_id } = await sunra.queue.submit("black-forest-labs/flux-kontext-max", {
  input: {
    prompt: "A glass teapot with blooming flower tea inside, placed on a wooden table by a sunlit window with gentle morning light.",
    "aspect_ratio": "16:9",
    "output_format": "jpeg",
  },
});

Checking Request Status

Retrieve the status of a request. Example:

import { sunra } from "@sunra/client";

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

Retrieving Request Results

Fetch the result of a completed request. Example:

import { sunra } from "@sunra/client";

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

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

Storage

The storage API allows you to upload files and receive a URL, which can then be used in your model endpoint requests. This is particularly useful for models that require file inputs, such as image-to-video or speech-to-text.

Maximum file size: 100MB

Uploading Files in the Browser

You can allow users to upload files directly from their browser. The following example shows how to use an <input type="file"> element to select a file and upload it.

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 uploaded successfully:', url);
      // Now you can use this URL with a model endpoint
    } catch (error) {
      console.error('Upload failed:', error);
    }
  }
});

<input type="file" id="file-input" />

Uploading Files in Node.js

On the server-side with Node.js, you can read files from the local filesystem and upload them.

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);
    // The client needs a File object, which we can create from a buffer
    const file = new File([buffer], basename(filePath));

    const url = await sunra.storage.upload(file);
    console.log('File uploaded successfully:', url);
    return url;
  } catch (error) {
    console.error('Upload failed:', error);
  }
}

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

Automatic Uploads with Model Endpoints

The JavaScript SDK can automatically handle file uploads for you. When you pass a File object, Blob, or a base64 data URI to a model endpoint’s input, the SDK will first upload it to storage and then use the resulting URL in the request. This simplifies the process as you don’t need to perform a separate upload step.

import { sunra } from "@sunra/client";

// A File object from a browser file input will be automatically uploaded
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 automatically uploads this file
    prompt: "A prompt describing what to do with the image"
  }
});

// A base64 data URI will also be automatically uploaded
const base64Image = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQ...";

const result2 = await sunra.subscribe("some-model-that-takes-images", {
  input: {
    image: base64Image, // SDK automatically converts this to a Blob and uploads it
    prompt: "A prompt describing what to do with the image"
  }
});

Support

Join our community for help or discussions:

Discord Community: Join us
GitHub Repository: Visit here

We’re here to assist you!

Overview

Platform

Multimodal

LLM

Client Libraries

JavaScript / TypeScript

Introduction

Installation

Features

Calling Endpoints

Queue Management

Submitting a Request

Checking Request Status

Retrieving Request Results

Storage

Uploading Files in the Browser

Uploading Files in Node.js

Automatic Uploads with Model Endpoints

Support

​Introduction

​Installation

​Features

​Calling Endpoints

​Queue Management

Submitting a Request

Checking Request Status

Retrieving Request Results

​Storage

Uploading Files in the Browser

Uploading Files in Node.js

​Automatic Uploads with Model Endpoints

​Support

Introduction

Installation

Features

Calling Endpoints

Queue Management

Storage

Automatic Uploads with Model Endpoints

Support