Build better GenAI for audio, video, images, with human feedback

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

// Interactive avatar experiment
import { createAvatarSession } from "./avatar-session";

const config = {
    avatarId: "edf6fdcb-acab-44b8-b974",
    voiceId: "df2aec93-4b4e-41f2-8d02",
    modelId: "cara-4-latest",
    participantName: "Mia",
    topic: "animals",
    minSessionSeconds: 60,
    maxSessionSeconds: 120,
};

const systemPrompt = `[ROLE]
You are Mia, a knowledgeable and friendly AI avatar.

[OBJECTIVE]
Play a short game of 20 Questions with the participant.
Ask yes/no questions and identify their secret animal.

[SPEAKING STYLE]
Be warm, conversational and concise.
Use natural pauses and ask one question at a time.

[RULES]
Keep a mental count of the questions you have asked.
Offer a brief clarification if an answer is ambiguous.
End by confirming the participant's secret animal.`;

const container = document.getElementById("experience");
const status = document.getElementById("status");

async function mountAvatarExperiment() {
    if (!container || !status) return;

    status.textContent = "Connecting…";

    const session = await createAvatarSession({
        ...config,
        systemPrompt,
        audio: { autoplay: true, muted: false },
    });

    session.on("ready", () => {
        status.textContent = "Live";
        container.dataset.state = "ready";
    });

    session.on("speaking", ({ active }) => {
        container.dataset.speaking = String(active);
    });

    session.on("transcript", ({ role, text }) => {
        window.parent.postMessage({
            type: "avatar:transcript",
            role,
            text,
        }, "*");
    });

    await session.mount(container);
    return () => session.destroy();
}

let disposeAvatar;

mountAvatarExperiment()
    .then((dispose) => {
        disposeAvatar = dispose;
    })
    .catch((error) => {
        status.textContent = "Unable to connect";
        console.error(error);
    });

window.addEventListener("pagehide", () => {
    disposeAvatar?.();
});