ITH-Integration

Info

Currently this page is only available in English.

How to integrate an ITH to your website/webapp?

1. Add the following Lines to your HTML file

Replace ITH-BACKEND-URL with the actual URL of your ITH backend. For avaluma hosted backend, use https://api.avaluma.ai.

  <canvas id="canvas" width="384" height="384">
  <script src="ITH-BACKEND-URL/static/wasm/ith.js" type="application/javascript"></script>
  <script src="ITH-BACKEND-URL/static/avaluma_audio_recorder.js" type="application/javascript"></script>

Within the canvas the ITH will be rendered in realtime.

2. Create an ITH-Token.

This token is session based and contains information about the the avatar to load.

Warning

Because a ith-session generates costs for your account, this should be done in your backend instead of the client.

  • JS
  • cURL
  • Python
  • Go
const response = await fetch('ITH-BACKEND-URL/ith-token', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + apiKey
    },
    body: JSON.stringify({ avatar_id: avatarId })
});

const result = await response.json();
if (result && result["ith-token"]) {
    console.log("ITH-Token:", result["ith-token"]);
}

The apiKey is only required to authenticate the request if its enabled in the ITH-backend.

Replace YOUR_API_KEY and YOUR_AVATAR_ID with actual values.

curl -X POST https://ITH-BACKEND-URL/ith-token \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -d '{"avatar_id": "YOUR_AVATAR_ID"}'

The apiKey is only required to authenticate the request if its enabled in the ITH-backend.

Replace YOUR_API_KEY and YOUR_AVATAR_ID with actual values.

import requests

url = "https://ITH-BACKEND-URL/ith-token"
headers = {
    "Content-Type": "application/json",
    "Authorization": "Bearer YOUR_API_KEY"
}
payload = {
    "avatar_id": "YOUR_AVATAR_ID"
}

response = requests.post(url, json=payload, headers=headers)
if response.ok:
    result = response.json()
    if result.get("ith-token"):
        print("ITH-Token:", result["ith-token"])
else:
    print("Request failed:", response.status_code, response.text)

The apiKey is only required to authenticate the request if its enabled in the ITH-backend.

Replace YOUR_API_KEY and YOUR_AVATAR_ID with actual values.

package main

import (
    "bytes"
    "encoding/json"
    "fmt"
    "io/ioutil"
    "net/http"
)

func main() {
    url := "https://ITH-BACKEND-URL/ith-token"
    apiKey := "YOUR_API_KEY"
    avatarId := "YOUR_AVATAR_ID"

    payload := map[string]string{
        "avatar_id": avatarId,
    }
    jsonData, err := json.Marshal(payload)
    if err != nil {
        panic(err)
    }

    req, err := http.NewRequest("POST", url, bytes.NewBuffer(jsonData))
    if err != nil {
        panic(err)
    }
    req.Header.Set("Content-Type", "application/json")
    req.Header.Set("Authorization", "Bearer "+apiKey)

    client := &http.Client{}
    resp, err := client.Do(req)
    if err != nil {
        panic(err)
    }
    defer resp.Body.Close()

    body, _ := ioutil.ReadAll(resp.Body)

    var result map[string]interface{}
    json.Unmarshal(body, &result)
    if token, ok := result["ith-token"]; ok {
        fmt.Println("ITH-Token:", token)
    } else {
        fmt.Println("No ITH-Token found. Response:", string(body))
    }
}

The apiKey is only required to authenticate the request if its enabled in the ITH-backend.

4. Start Session on the Client

Module.start("ITH-TOKEN", "ITH-BACKEND-URL")

Done!