RobotHub-Frontend / src /lib /components /3d /elements /compute /modal /AISessionConnectionModal.svelte
blanchon's picture
Update
3cdf7b9
<script lang="ts">
import * as Dialog from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import * as Card from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import * as Alert from "@/components/ui/alert";
import { remoteComputeManager } from "$lib/elements/compute//RemoteComputeManager.svelte";
import type { RemoteCompute } from "$lib/elements/compute//RemoteCompute.svelte";
import type { AISessionConfig } from "$lib/elements/compute//RemoteComputeManager.svelte";
import { settings } from "$lib/runes/settings.svelte";
import { toast } from "svelte-sonner";
interface Props {
workspaceId: string;
open: boolean;
compute: RemoteCompute;
}
let { open = $bindable(), compute, workspaceId }: Props = $props();
let isConnecting = $state(false);
let sessionId = $state("");
let policyPath = $state("./checkpoints/act_so101_beyond");
let cameraNames = $state("front");
let useProvidedWorkspace = $state(false);
// Auto-generate session ID when modal opens
$effect(() => {
if (open && compute && !sessionId) {
sessionId = `${compute.id}-session-${Date.now()}`;
}
});
async function handleCreateSession() {
if (!compute) return;
if (!sessionId.trim() || !policyPath.trim()) {
toast.error("Please fill in all required fields");
return;
}
isConnecting = true;
try {
const cameras = cameraNames
.split(",")
.map((name) => name.trim())
.filter((name) => name);
if (cameras.length === 0) {
cameras.push("front");
}
const config: AISessionConfig = {
sessionId: sessionId.trim(),
policyPath: policyPath.trim(),
cameraNames: cameras,
transportServerUrl: settings.transportServerUrl,
workspaceId: useProvidedWorkspace ? workspaceId : undefined
};
const result = await remoteComputeManager.createSession(compute.id, config);
if (result.success) {
toast.success(`Inference Session created: ${sessionId}`);
open = false;
} else {
toast.error(`Failed to create session: ${result.error}`);
}
} catch (error) {
console.error("Session creation error:", error);
toast.error("Failed to create session");
} finally {
isConnecting = false;
}
}
async function handleStartSession() {
if (!compute) return;
isConnecting = true;
try {
const result = await remoteComputeManager.startSession(compute.id);
if (result.success) {
toast.success("Inference Session started");
} else {
toast.error(`Failed to start session: ${result.error}`);
}
} catch (error) {
console.error("Session start error:", error);
toast.error("Failed to start session");
} finally {
isConnecting = false;
}
}
async function handleStopSession() {
if (!compute) return;
isConnecting = true;
try {
const result = await remoteComputeManager.stopSession(compute.id);
if (result.success) {
toast.success("Inference Session stopped");
} else {
toast.error(`Failed to stop session: ${result.error}`);
}
} catch (error) {
console.error("Session stop error:", error);
toast.error("Failed to stop session");
} finally {
isConnecting = false;
}
}
async function handleDeleteSession() {
if (!compute) return;
isConnecting = true;
try {
const result = await remoteComputeManager.deleteSession(compute.id);
if (result.success) {
toast.success("Inference Session deleted");
} else {
toast.error(`Failed to delete session: ${result.error}`);
}
} catch (error) {
console.error("Session delete error:", error);
toast.error("Failed to delete session");
} finally {
isConnecting = false;
}
}
</script>
<Dialog.Root bind:open>
<Dialog.Content
class="max-h-[80vh] max-w-2xl overflow-y-auto border-slate-300 bg-slate-100 text-slate-900 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-100"
>
<Dialog.Header class="pb-3">
<Dialog.Title
class="flex items-center gap-2 text-lg font-bold text-slate-900 dark:text-slate-100"
>
<span class="icon-[mdi--robot-outline] size-5 text-purple-500 dark:text-purple-400"></span>
AI Compute Session - {compute.name || "No Compute Selected"}
</Dialog.Title>
<Dialog.Description class="text-sm text-slate-600 dark:text-slate-400">
Configure and manage ACT model inference sessions for robot control
</Dialog.Description>
</Dialog.Header>
<div class="space-y-4">
<!-- Current Session Status -->
<div
class="flex items-center justify-between rounded-lg border border-purple-300/30 bg-purple-100/20 p-3 dark:border-purple-500/30 dark:bg-purple-900/20"
>
<div class="flex items-center gap-2">
<span class="icon-[mdi--brain] size-4 text-purple-500 dark:text-purple-400"></span>
<span class="text-sm font-medium text-purple-700 dark:text-purple-300"
>Session Status</span
>
</div>
{#if compute.hasSession}
<Badge variant="default" class="bg-purple-500 text-xs dark:bg-purple-600">
{compute.statusInfo.statusText}
</Badge>
{:else}
<Badge variant="secondary" class="text-xs text-slate-600 dark:text-slate-400"
>No Session</Badge
>
{/if}
</div>
<!-- Current Session Details -->
{#if compute.hasSession && compute.sessionData}
<Card.Root
class="border-purple-300/30 bg-purple-100/5 dark:border-purple-500/30 dark:bg-purple-500/5"
>
<Card.Header>
<Card.Title
class="flex items-center gap-2 text-base text-purple-700 dark:text-purple-200"
>
<span class="icon-[mdi--cog] size-4"></span>
Current Session
</Card.Title>
</Card.Header>
<Card.Content>
<div class="space-y-3">
<div
class="rounded-lg border border-purple-300/30 bg-purple-100/20 p-3 dark:border-purple-500/30 dark:bg-purple-900/20"
>
<div class="grid grid-cols-2 gap-2 text-xs">
<div>
<span class="font-medium text-purple-700 dark:text-purple-300">Session ID:</span
>
<span class="block text-purple-800 dark:text-purple-100"
>{compute.sessionId}</span
>
</div>
<div>
<span class="font-medium text-purple-700 dark:text-purple-300">Status:</span>
<span class="block text-purple-800 dark:text-purple-100"
>{compute.statusInfo.emoji} {compute.statusInfo.statusText}</span
>
</div>
<div>
<span class="font-medium text-purple-700 dark:text-purple-300">Policy:</span>
<span class="block text-purple-800 dark:text-purple-100"
>{compute.sessionConfig?.policyPath}</span
>
</div>
<div>
<span class="font-medium text-purple-700 dark:text-purple-300">Cameras:</span>
<span class="block text-purple-800 dark:text-purple-100"
>{compute.sessionConfig?.cameraNames.join(", ")}</span
>
</div>
</div>
</div>
<!-- Connection Details -->
<div
class="rounded-lg border border-green-300/30 bg-green-100/20 p-3 dark:border-green-500/30 dark:bg-green-900/20"
>
<div class="mb-2 text-sm font-medium text-green-700 dark:text-green-300">
📡 Inference Server Connections
</div>
<div class="space-y-1 text-xs">
<div>
<span class="text-green-600 dark:text-green-400">Workspace:</span>
<span class="ml-2 font-mono text-green-700 dark:text-green-200"
>{compute.sessionData.workspace_id}</span
>
</div>
{#each Object.entries(compute.sessionData.camera_room_ids) as [camera, roomId]}
<div>
<span class="text-green-600 dark:text-green-400">📹 {camera}:</span>
<span class="ml-2 font-mono text-green-700 dark:text-green-200">{roomId}</span
>
</div>
{/each}
<div>
<span class="text-green-600 dark:text-green-400">📥 Joint Input:</span>
<span class="ml-2 font-mono text-green-700 dark:text-green-200"
>{compute.sessionData.joint_input_room_id}</span
>
</div>
<div>
<span class="text-green-600 dark:text-green-400">📤 Joint Output:</span>
<span class="ml-2 font-mono text-green-700 dark:text-green-200"
>{compute.sessionData.joint_output_room_id}</span
>
</div>
</div>
</div>
<!-- Session Controls -->
<div class="flex gap-2">
{#if compute.canStart}
<Button
variant="default"
size="sm"
onclick={handleStartSession}
disabled={isConnecting}
class="bg-green-500 text-xs hover:bg-green-600 disabled:opacity-50 dark:bg-green-600 dark:hover:bg-green-700"
>
{#if isConnecting}
<span class="icon-[mdi--loading] mr-1 size-3 animate-spin"></span>
Starting...
{:else}
<span class="icon-[mdi--play] mr-1 size-3"></span>
Start Inference
{/if}
</Button>
{/if}
{#if compute.canStop}
<Button
variant="secondary"
size="sm"
onclick={handleStopSession}
disabled={isConnecting}
class="text-xs disabled:opacity-50"
>
{#if isConnecting}
<span class="icon-[mdi--loading] mr-1 size-3 animate-spin"></span>
Stopping...
{:else}
<span class="icon-[mdi--stop] mr-1 size-3"></span>
Stop Inference
{/if}
</Button>
{/if}
<Button
variant="destructive"
size="sm"
onclick={handleDeleteSession}
disabled={isConnecting}
class="text-xs disabled:opacity-50"
>
{#if isConnecting}
<span class="icon-[mdi--loading] mr-1 size-3 animate-spin"></span>
Deleting...
{:else}
<span class="icon-[mdi--delete] mr-1 size-3"></span>
Delete Session
{/if}
</Button>
</div>
</div>
</Card.Content>
</Card.Root>
{/if}
<!-- Create New Session -->
{#if !compute.hasSession}
<Card.Root
class="border-purple-300/30 bg-purple-100/5 dark:border-purple-500/30 dark:bg-purple-500/5"
>
<Card.Header>
<Card.Title
class="flex items-center gap-2 text-base text-purple-700 dark:text-purple-200"
>
<span class="icon-[mdi--plus-circle] size-4"></span>
Create Inference Session
</Card.Title>
</Card.Header>
<Card.Content>
<div class="space-y-4">
<div class="grid grid-cols-2 gap-4">
<div class="space-y-2">
<Label for="sessionId" class="text-purple-700 dark:text-purple-300"
>Session ID</Label
>
<Input
id="sessionId"
bind:value={sessionId}
placeholder="my-session-01"
class="border-slate-300 bg-slate-50 text-slate-900 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100"
/>
</div>
<div class="space-y-2">
<Label for="policyPath" class="text-purple-700 dark:text-purple-300"
>Policy Path</Label
>
<Input
id="policyPath"
bind:value={policyPath}
placeholder="./checkpoints/act_so101_beyond"
class="border-slate-300 bg-slate-50 text-slate-900 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100"
/>
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="space-y-2">
<Label for="cameraNames" class="text-purple-700 dark:text-purple-300"
>Camera Names</Label
>
<Input
id="cameraNames"
bind:value={cameraNames}
placeholder="front, wrist, overhead"
class="border-slate-300 bg-slate-50 text-slate-900 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100"
/>
<p class="text-xs text-slate-600 dark:text-slate-400">
Comma-separated camera names
</p>
</div>
<div class="space-y-2">
<Label for="transportServerUrl" class="text-purple-700 dark:text-purple-300"
>Transport Server URL</Label
>
<Input
id="transportServerUrl"
value={settings.transportServerUrl}
disabled
placeholder="http://localhost:8000"
class="cursor-not-allowed border-slate-300 bg-slate-50 text-slate-900 opacity-60 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100"
title="Change this value in the settings panel"
/>
<p class="text-xs text-slate-600 dark:text-slate-400">
Configure in settings panel
</p>
</div>
</div>
<div class="flex items-center space-x-2">
<input
type="checkbox"
id="useWorkspace"
bind:checked={useProvidedWorkspace}
class="rounded border-slate-300 bg-slate-50 dark:border-slate-600 dark:bg-slate-800"
/>
<Label for="useWorkspace" class="text-sm text-purple-700 dark:text-purple-300">
Use current workspace ({workspaceId})
</Label>
</div>
<Alert.Root>
<span class="icon-[mdi--information] size-4"></span>
<Alert.Description>
This will create a new ACT inference session with dedicated rooms for camera
inputs, joint inputs, and joint outputs in the inference server communication
system.
</Alert.Description>
</Alert.Root>
<Button
variant="default"
onclick={handleCreateSession}
disabled={isConnecting || !sessionId.trim() || !policyPath.trim()}
class="w-full bg-purple-500 hover:bg-purple-600 disabled:opacity-50 dark:bg-purple-600 dark:hover:bg-purple-700"
>
{#if isConnecting}
<span class="icon-[mdi--loading] mr-2 size-4 animate-spin"></span>
Creating Session...
{:else}
<span class="icon-[mdi--rocket-launch] mr-2 size-4"></span>
Create Inference Session
{/if}
</Button>
</div>
</Card.Content>
</Card.Root>
{/if}
<!-- Quick Info -->
<div
class="rounded border border-slate-300 bg-slate-100/30 p-2 text-xs text-slate-600 dark:border-slate-700 dark:bg-slate-800/30 dark:text-slate-500"
>
<span class="icon-[mdi--information] mr-1 size-3"></span>
Inference Sessions require a trained ACT model and create dedicated communication rooms for video
inputs, robot joint states, and control outputs in the inference server system.
</div>
</div>
</Dialog.Content>
</Dialog.Root>