Add async-tasks UIWorker example
A UIWorker with a custom reply tool fans research out to three BaseWorker peers via start_user_job_group; their progress streams to the client as ui-task cards and the user can cancel a group mid-flight.
This commit is contained in:
Mark Backman
@@ -0,0 +1,45 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Async tasks — UIAgent demo</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Research lab</h1>
|
||||
<button id="connect" type="button">Connect</button>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<p class="hint">
|
||||
Try: "research the Mariana Trench" — the agent fans out three
|
||||
worker researchers (Wikipedia, news, scholarly papers) in
|
||||
parallel. Each streams progress updates while it works. You
|
||||
can cancel any group mid-flight.
|
||||
</p>
|
||||
|
||||
<section aria-label="In-flight tasks">
|
||||
<h2>In flight</h2>
|
||||
<div id="tasks-empty" class="empty-state">
|
||||
No tasks yet. Ask the assistant to research something.
|
||||
</div>
|
||||
<div id="tasks-list"></div>
|
||||
</section>
|
||||
|
||||
<section aria-label="Completed results">
|
||||
<h2>Results</h2>
|
||||
<div id="results-empty" class="empty-state">
|
||||
Completed research will appear here.
|
||||
</div>
|
||||
<div id="results-list"></div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div id="status" aria-live="polite"></div>
|
||||
<audio id="bot-audio" autoplay data-a11y-exclude></audio>
|
||||
|
||||
<script type="module" src="./main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
307
examples/multi-worker/ui-worker/async-tasks/client/main.js
Normal file
307
examples/multi-worker/ui-worker/async-tasks/client/main.js
Normal file
@@ -0,0 +1,307 @@
|
||||
/**
|
||||
* Async tasks — vanilla JS client.
|
||||
*
|
||||
* Same base wiring as the other examples (PipecatClient +
|
||||
* managed snapshot streaming + bot audio sink), with one new piece:
|
||||
* ``RTVIEvent.UITask`` subscription to consume the task lifecycle
|
||||
* envelopes.
|
||||
*
|
||||
* The server's ``user_task_group`` fans work out to multiple
|
||||
* worker agents and forwards their progress automatically as
|
||||
* ``ui-task`` envelopes. Four kinds:
|
||||
*
|
||||
* - ``group_started``: workers and label are now known.
|
||||
* - ``task_update``: a worker emitted a progress update.
|
||||
* - ``task_completed``: a worker finished (status + final response).
|
||||
* - ``group_completed``: every worker has responded.
|
||||
*
|
||||
* The client maintains a state map keyed by ``task_id``, renders
|
||||
* each group as a card with its workers' statuses, and surfaces a
|
||||
* cancel button per cancellable group. ``client.cancelUITask(task_id,
|
||||
* reason)`` sends a ``__cancel_task`` event back to the server,
|
||||
* which calls ``UIAgent.cancel_task(...)`` on the registered group.
|
||||
*/
|
||||
|
||||
import { PipecatClient, RTVIEvent } from "@pipecat-ai/client-js";
|
||||
import { SmallWebRTCTransport } from "@pipecat-ai/small-webrtc-transport";
|
||||
|
||||
const BOT_URL = "http://localhost:7860/api/offer";
|
||||
|
||||
const connectButton = document.getElementById("connect");
|
||||
const status = document.getElementById("status");
|
||||
const botAudio = document.getElementById("bot-audio");
|
||||
const tasksList = document.getElementById("tasks-list");
|
||||
const tasksEmpty = document.getElementById("tasks-empty");
|
||||
const resultsList = document.getElementById("results-list");
|
||||
const resultsEmpty = document.getElementById("results-empty");
|
||||
|
||||
let client;
|
||||
let unsubscribeTasks;
|
||||
|
||||
// Map<task_id, { label, cancellable, agents, workers: Map<agent_name, {status, lastUpdate, response}>, cardEl }>
|
||||
const groups = new Map();
|
||||
|
||||
function setStatus(text, autoHideMs = 0) {
|
||||
status.textContent = text;
|
||||
status.dataset.show = text ? "1" : "0";
|
||||
if (text && autoHideMs > 0) {
|
||||
setTimeout(() => {
|
||||
if (status.textContent === text) status.dataset.show = "0";
|
||||
}, autoHideMs);
|
||||
}
|
||||
}
|
||||
|
||||
function refreshEmptyStates() {
|
||||
tasksEmpty.hidden = tasksList.children.length > 0;
|
||||
resultsEmpty.hidden = resultsList.children.length > 0;
|
||||
}
|
||||
|
||||
function renderGroupCard(group) {
|
||||
const card = document.createElement("div");
|
||||
card.className = "task-group";
|
||||
card.dataset.taskId = group.task_id;
|
||||
|
||||
const header = document.createElement("div");
|
||||
header.className = "task-group-header";
|
||||
const label = document.createElement("div");
|
||||
label.className = "task-group-label";
|
||||
label.textContent = group.label ?? `Task group ${group.task_id.slice(0, 8)}`;
|
||||
header.appendChild(label);
|
||||
|
||||
if (group.cancellable) {
|
||||
const cancel = document.createElement("button");
|
||||
cancel.type = "button";
|
||||
cancel.className = "cancel-btn";
|
||||
cancel.textContent = "Cancel";
|
||||
cancel.addEventListener("click", () => {
|
||||
cancel.disabled = true;
|
||||
cancel.textContent = "Cancelling…";
|
||||
client?.cancelUITask(group.task_id, "user requested");
|
||||
});
|
||||
group.cancelButton = cancel;
|
||||
header.appendChild(cancel);
|
||||
}
|
||||
card.appendChild(header);
|
||||
|
||||
const ul = document.createElement("ul");
|
||||
ul.className = "workers";
|
||||
for (const agent of group.agents) {
|
||||
const li = document.createElement("li");
|
||||
li.dataset.agent = agent;
|
||||
|
||||
const name = document.createElement("span");
|
||||
name.className = "worker-name";
|
||||
name.textContent = agent;
|
||||
li.appendChild(name);
|
||||
|
||||
const update = document.createElement("span");
|
||||
update.className = "worker-update";
|
||||
update.textContent = "starting…";
|
||||
li.appendChild(update);
|
||||
|
||||
const stat = document.createElement("span");
|
||||
stat.className = "worker-status";
|
||||
stat.dataset.status = "running";
|
||||
stat.textContent = "running";
|
||||
li.appendChild(stat);
|
||||
|
||||
ul.appendChild(li);
|
||||
}
|
||||
card.appendChild(ul);
|
||||
|
||||
group.cardEl = card;
|
||||
group.listEl = ul;
|
||||
return card;
|
||||
}
|
||||
|
||||
function updateWorkerRow(group, agentName, { update, statusValue, response }) {
|
||||
const li = group.listEl.querySelector(`li[data-agent="${CSS.escape(agentName)}"]`);
|
||||
if (!li) return;
|
||||
if (update !== undefined) {
|
||||
li.querySelector(".worker-update").textContent = update;
|
||||
}
|
||||
if (statusValue !== undefined) {
|
||||
const stat = li.querySelector(".worker-status");
|
||||
stat.dataset.status = statusValue;
|
||||
stat.textContent = statusValue;
|
||||
if (statusValue !== "running" && response !== undefined) {
|
||||
// Tuck the response into the row so we can lift it into the
|
||||
// results panel when the group completes.
|
||||
li.dataset.response = JSON.stringify(response);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function renderResultsForGroup(group) {
|
||||
const card = document.createElement("div");
|
||||
card.className = "result-card";
|
||||
|
||||
const label = document.createElement("div");
|
||||
label.className = "result-card-label";
|
||||
label.textContent = group.label ?? "Result";
|
||||
card.appendChild(label);
|
||||
|
||||
const meta = document.createElement("div");
|
||||
meta.className = "result-card-meta";
|
||||
const counts = { completed: 0, cancelled: 0, failed: 0, error: 0 };
|
||||
group.workers.forEach((w) => {
|
||||
if (w.status in counts) counts[w.status] += 1;
|
||||
});
|
||||
const parts = [];
|
||||
if (counts.completed) parts.push(`${counts.completed} completed`);
|
||||
if (counts.cancelled) parts.push(`${counts.cancelled} cancelled`);
|
||||
if (counts.failed) parts.push(`${counts.failed} failed`);
|
||||
if (counts.error) parts.push(`${counts.error} error`);
|
||||
meta.textContent = parts.join(" · ") || "no workers";
|
||||
card.appendChild(meta);
|
||||
|
||||
group.workers.forEach((w, agent) => {
|
||||
if (w.status !== "completed") return;
|
||||
const section = document.createElement("div");
|
||||
section.className = "result-card-section";
|
||||
const src = document.createElement("span");
|
||||
src.className = "source";
|
||||
src.textContent = agent + ": ";
|
||||
section.appendChild(src);
|
||||
const summary =
|
||||
w.response?.summary ?? w.response?.text ?? JSON.stringify(w.response);
|
||||
section.appendChild(document.createTextNode(summary));
|
||||
card.appendChild(section);
|
||||
});
|
||||
|
||||
return card;
|
||||
}
|
||||
|
||||
function handleTaskEnvelope(env) {
|
||||
switch (env.kind) {
|
||||
case "group_started": {
|
||||
const workers = new Map();
|
||||
for (const a of env.agents) {
|
||||
workers.set(a, { status: "running", update: null, response: null });
|
||||
}
|
||||
const group = {
|
||||
task_id: env.task_id,
|
||||
label: env.label,
|
||||
cancellable: env.cancellable,
|
||||
agents: env.agents,
|
||||
workers,
|
||||
};
|
||||
groups.set(env.task_id, group);
|
||||
tasksList.appendChild(renderGroupCard(group));
|
||||
refreshEmptyStates();
|
||||
break;
|
||||
}
|
||||
case "task_update": {
|
||||
const group = groups.get(env.task_id);
|
||||
if (!group) break;
|
||||
const text = env.data?.text ?? JSON.stringify(env.data);
|
||||
const w = group.workers.get(env.agent_name);
|
||||
if (w) w.update = text;
|
||||
updateWorkerRow(group, env.agent_name, { update: text });
|
||||
break;
|
||||
}
|
||||
case "task_completed": {
|
||||
const group = groups.get(env.task_id);
|
||||
if (!group) break;
|
||||
const w = group.workers.get(env.agent_name);
|
||||
if (w) {
|
||||
w.status = env.status;
|
||||
w.response = env.response;
|
||||
}
|
||||
const display = env.response?.summary
|
||||
? env.response.summary.slice(0, 60) + "…"
|
||||
: env.status;
|
||||
updateWorkerRow(group, env.agent_name, {
|
||||
update: display,
|
||||
statusValue: env.status,
|
||||
response: env.response,
|
||||
});
|
||||
break;
|
||||
}
|
||||
case "group_completed": {
|
||||
const group = groups.get(env.task_id);
|
||||
if (!group) break;
|
||||
// Lift the in-flight card into the results panel, then drop
|
||||
// the in-flight card.
|
||||
resultsList.prepend(renderResultsForGroup(group));
|
||||
group.cardEl.remove();
|
||||
groups.delete(env.task_id);
|
||||
refreshEmptyStates();
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function connect() {
|
||||
connectButton.disabled = true;
|
||||
setStatus("Connecting…");
|
||||
|
||||
client = new PipecatClient({
|
||||
transport: new SmallWebRTCTransport(),
|
||||
enableMic: true,
|
||||
enableCam: false,
|
||||
});
|
||||
|
||||
client.on(RTVIEvent.BotConnected, () => setStatus("Bot connected", 1500));
|
||||
client.on(RTVIEvent.Disconnected, () => {
|
||||
setStatus("Disconnected", 2000);
|
||||
connectButton.dataset.state = "";
|
||||
connectButton.textContent = "Connect";
|
||||
connectButton.disabled = false;
|
||||
teardownUI();
|
||||
});
|
||||
|
||||
client.on(RTVIEvent.TrackStarted, (track, participant) => {
|
||||
if (track.kind !== "audio") return;
|
||||
if (participant?.local) return;
|
||||
botAudio.srcObject = new MediaStream([track]);
|
||||
});
|
||||
|
||||
client.on(RTVIEvent.UITask, handleTaskEnvelope);
|
||||
unsubscribeTasks = () => client.off(RTVIEvent.UITask, handleTaskEnvelope);
|
||||
|
||||
try {
|
||||
await client.connect({ webrtcUrl: BOT_URL });
|
||||
client.startUISnapshotStream();
|
||||
connectButton.dataset.state = "connected";
|
||||
connectButton.textContent = "Disconnect";
|
||||
connectButton.disabled = false;
|
||||
setStatus("Connected. Try: 'research the Mariana Trench'", 5000);
|
||||
} catch (err) {
|
||||
console.error("Connect failed:", err);
|
||||
setStatus(`Connect failed: ${err.message ?? err}`, 4000);
|
||||
teardownUI();
|
||||
connectButton.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function disconnect() {
|
||||
connectButton.disabled = true;
|
||||
setStatus("Disconnecting…");
|
||||
try {
|
||||
await client?.disconnect();
|
||||
} finally {
|
||||
teardownUI();
|
||||
connectButton.dataset.state = "";
|
||||
connectButton.textContent = "Connect";
|
||||
connectButton.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
function teardownUI() {
|
||||
client?.stopUISnapshotStream();
|
||||
unsubscribeTasks?.();
|
||||
if (botAudio.srcObject) botAudio.srcObject = null;
|
||||
unsubscribeTasks = undefined;
|
||||
client = undefined;
|
||||
}
|
||||
|
||||
connectButton.addEventListener("click", () => {
|
||||
if (connectButton.dataset.state === "connected") {
|
||||
disconnect();
|
||||
} else {
|
||||
connect();
|
||||
}
|
||||
});
|
||||
|
||||
refreshEmptyStates();
|
||||
1128
examples/multi-worker/ui-worker/async-tasks/client/package-lock.json
generated
Normal file
1128
examples/multi-worker/ui-worker/async-tasks/client/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"name": "async-tasks-client",
|
||||
"private": true,
|
||||
"version": "0.1.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@pipecat-ai/client-js": "1.9.0",
|
||||
"@pipecat-ai/small-webrtc-transport": "^1.10.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"vite": "^8"
|
||||
}
|
||||
}
|
||||
245
examples/multi-worker/ui-worker/async-tasks/client/styles.css
Normal file
245
examples/multi-worker/ui-worker/async-tasks/client/styles.css
Normal file
@@ -0,0 +1,245 @@
|
||||
:root {
|
||||
color-scheme: light;
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
--border: #d4d4d8;
|
||||
--muted: #71717a;
|
||||
--accent: #3b82f6;
|
||||
--success: #16a34a;
|
||||
--error: #dc2626;
|
||||
--cancelled: #71717a;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: #fafafa;
|
||||
color: #18181b;
|
||||
}
|
||||
|
||||
header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 1.5rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 1.125rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#connect {
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid var(--border);
|
||||
background: #fff;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
#connect:hover {
|
||||
background: #f4f4f5;
|
||||
}
|
||||
|
||||
#connect[data-state="connected"] {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
border-color: #ef4444;
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem 1.5rem 4rem;
|
||||
}
|
||||
|
||||
.hint {
|
||||
margin: 0 0 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.5;
|
||||
color: var(--muted);
|
||||
padding: 0.875rem 1rem;
|
||||
border-left: 3px solid var(--border);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
main h2 {
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--muted);
|
||||
margin: 1.5rem 0 0.75rem;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
font-size: 0.875rem;
|
||||
color: var(--muted);
|
||||
font-style: italic;
|
||||
padding: 1rem;
|
||||
border: 1px dashed var(--border);
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-state[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.task-group {
|
||||
background: #fff;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 1rem 1.25rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.task-group-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.task-group-label {
|
||||
font-weight: 500;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
padding: 0.25rem 0.625rem;
|
||||
border: 1px solid var(--border);
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 0.75rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.cancel-btn:hover {
|
||||
background: #f4f4f5;
|
||||
color: #18181b;
|
||||
}
|
||||
|
||||
.cancel-btn[disabled] {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.workers {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
.workers li {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.worker-name {
|
||||
font-family: ui-monospace, "SF Mono", Menlo, monospace;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
min-width: 6.5rem;
|
||||
color: #52525b;
|
||||
}
|
||||
|
||||
.worker-update {
|
||||
color: #3f3f46;
|
||||
flex: 1;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.worker-status {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.worker-status[data-status="running"] {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.worker-status[data-status="completed"] {
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.worker-status[data-status="cancelled"] {
|
||||
color: var(--cancelled);
|
||||
}
|
||||
|
||||
.worker-status[data-status="failed"],
|
||||
.worker-status[data-status="error"] {
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
.result-card {
|
||||
background: #fff;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 1rem 1.25rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.result-card-label {
|
||||
font-weight: 500;
|
||||
font-size: 0.9375rem;
|
||||
margin-bottom: 0.375rem;
|
||||
}
|
||||
|
||||
.result-card-meta {
|
||||
font-size: 0.75rem;
|
||||
color: var(--muted);
|
||||
margin-bottom: 0.625rem;
|
||||
}
|
||||
|
||||
.result-card-section {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.result-card-section:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.result-card-section .source {
|
||||
font-family: ui-monospace, "SF Mono", Menlo, monospace;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: #52525b;
|
||||
}
|
||||
|
||||
#status {
|
||||
position: fixed;
|
||||
bottom: 1rem;
|
||||
right: 1rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.8125rem;
|
||||
background: #18181b;
|
||||
color: white;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#status[data-show="1"] {
|
||||
opacity: 1;
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
import { defineConfig } from "vite";
|
||||
|
||||
export default defineConfig({
|
||||
server: {
|
||||
port: 5173,
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user