Update

TODO.md

@@ -0,0 +1,6 @@
+# TODO:
+
+- [ ] Remove default video in add sensor and add something else
+- [ ] Review the flow of add model
+- [ ] Enable the others model types
+- [ ]

src/lib/components/3d/elements/compute/modal/AIModelConfigurationModal.svelte

@@ -0,0 +1,297 @@
+<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 { Textarea } from "@/components/ui/textarea";
+	import * as Select from "@/components/ui/select";
+	import {
+		remoteComputeManager,
+		MODEL_TYPES,
+		type ModelType,
+		type AISessionConfig
+	} from "$lib/elements/compute";
+	import { settings } from "$lib/runes/settings.svelte";
+	import { toast } from "svelte-sonner";
+	import { generateName } from "$lib/utils/generateName";
+
+	interface Props {
+		workspaceId: string;
+		open: boolean;
+		initialModelType?: ModelType;
+	}
+
+	let { open = $bindable(), workspaceId, initialModelType = "act" }: Props = $props();
+
+	let isCreating = $state(false);
+	let selectedModelType = $state<ModelType>(initialModelType);
+
+	// Update selectedModelType when initialModelType changes
+	$effect(() => {
+		selectedModelType = initialModelType;
+	});
+	let sessionId = $state("");
+	let policyPath = $state("");
+	let cameraNames = $state("");
+	let languageInstruction = $state("");
+	let computeName = $state("");
+
+	// Get model config based on selected type
+	const modelConfig = $derived(MODEL_TYPES[selectedModelType]);
+
+	// Set defaults when modal opens with a specific model type
+	$effect(() => {
+		if (open && selectedModelType) {
+			const config = MODEL_TYPES[selectedModelType];
+			sessionId = `${selectedModelType}-session-${Date.now()}`;
+			policyPath = config.defaultPolicyPath;
+			cameraNames = config.defaultCameraNames.join(", ");
+			computeName = `${config.label} ${generateName()}`;
+			languageInstruction = ""; // Reset language instruction
+		}
+	});
+
+	async function handleCreateModel() {
+		if (!sessionId.trim() || !policyPath.trim() || !computeName.trim()) {
+			toast.error("Please fill in all required fields");
+			return;
+		}
+
+		const config = MODEL_TYPES[selectedModelType];
+		if (config.requiresLanguageInstruction && !languageInstruction.trim()) {
+			toast.error("Language instruction is required for this model type");
+			return;
+		}
+
+		isCreating = true;
+		try {
+			const cameras = cameraNames
+				.split(",")
+				.map((name) => name.trim())
+				.filter((name) => name);
+			if (cameras.length === 0) {
+				cameras.push("front");
+			}
+
+			const sessionConfig: AISessionConfig = {
+				sessionId: sessionId.trim(),
+				modelType: selectedModelType,
+				policyPath: policyPath.trim(),
+				cameraNames: cameras,
+				transportServerUrl: settings.transportServerUrl,
+				workspaceId: workspaceId,
+				languageInstruction: languageInstruction.trim() || undefined
+			};
+
+			const result = await remoteComputeManager.createComputeWithSession(
+				sessionConfig,
+				undefined, // auto-generate compute ID
+				computeName.trim()
+			);
+
+			if (result.success) {
+				toast.success(`${config.label} model created successfully!`, {
+					description: `Session ${sessionId} is ready for inference`
+				});
+				open = false;
+				// Reset form
+				resetForm();
+			} else {
+				toast.error(`Failed to create ${config.label}`, {
+					description: result.error
+				});
+			}
+		} catch (error) {
+			console.error("Model creation error:", error);
+			toast.error("Failed to create AI model");
+		} finally {
+			isCreating = false;
+		}
+	}
+
+	function resetForm() {
+		sessionId = "";
+		policyPath = "";
+		cameraNames = "";
+		languageInstruction = "";
+		computeName = "";
+	}
+
+	// Reset form when modal closes
+	$effect(() => {
+		if (!open) {
+			resetForm();
+		}
+	});
+</script>
+
+<Dialog.Root bind:open>
+	<Dialog.Content
+		class="max-h-[80vh] max-w-3xl 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="{modelConfig.icon} size-5 text-purple-500 dark:text-purple-400"></span>
+				Create AI Model - {modelConfig.label}
+			</Dialog.Title>
+			<Dialog.Description class="text-sm text-slate-600 dark:text-slate-400">
+				Configure and deploy an AI model for robot control and inference
+			</Dialog.Description>
+		</Dialog.Header>
+
+		<div class="space-y-6">
+			<!-- Model Type Display (Read-only) -->
+			<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="flex items-center gap-3">
+					<span class="{modelConfig.icon} size-6 text-purple-500 dark:text-purple-400"></span>
+					<div>
+						<h3 class="font-medium text-purple-700 dark:text-purple-200">
+							{modelConfig.label}
+						</h3>
+						<p class="text-sm text-purple-600 dark:text-purple-300">
+							{modelConfig.description}
+						</p>
+					</div>
+				</div>
+			</div>
+
+			<!-- Basic Configuration -->
+			<Card.Root
+				class="border-green-300/30 bg-green-100/5 dark:border-green-500/30 dark:bg-green-500/5"
+			>
+				<Card.Header>
+					<Card.Title class="flex items-center gap-2 text-base text-green-700 dark:text-green-200">
+						<span class="icon-[mdi--cog] size-4"></span>
+						Basic Configuration
+					</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="computeName" class="text-green-700 dark:text-green-300">
+									Compute Name
+								</Label>
+								<Input
+									id="computeName"
+									bind:value={computeName}
+									placeholder="My AI Model"
+									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="sessionId" class="text-green-700 dark:text-green-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>
+
+						<div class="space-y-2">
+							<Label for="policyPath" class="text-green-700 dark:text-green-300">Policy Path</Label>
+							<Input
+								id="policyPath"
+								bind:value={policyPath}
+								placeholder={modelConfig.defaultPolicyPath}
+								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">
+								HuggingFace model path or local model identifier
+							</p>
+						</div>
+
+						<div class="space-y-2">
+							<Label for="cameraNames" class="text-green-700 dark:text-green-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>
+
+						{#if modelConfig.requiresLanguageInstruction}
+							<div class="space-y-2">
+								<Label for="languageInstruction" class="text-green-700 dark:text-green-300">
+									Language Instruction
+								</Label>
+								<Textarea
+									id="languageInstruction"
+									bind:value={languageInstruction}
+									placeholder="Pick up the red cup and place it on the table"
+									class="border-slate-300 bg-slate-50 text-slate-900 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100"
+									rows={3}
+								/>
+								<p class="text-xs text-slate-600 dark:text-slate-400">
+									Natural language instruction for the task (required for {modelConfig.label})
+								</p>
+							</div>
+						{/if}
+					</div>
+				</Card.Content>
+			</Card.Root>
+
+			<!-- Workspace Info -->
+			<div
+				class="rounded-lg border border-blue-300/30 bg-blue-100/20 p-3 dark:border-blue-500/30 dark:bg-blue-900/20"
+			>
+				<div class="flex items-center gap-2">
+					<span class="icon-[mdi--folder] size-4 text-blue-600 dark:text-blue-400"></span>
+					<span class="text-sm font-medium text-blue-700 dark:text-blue-300">
+						Workspace: {workspaceId}
+					</span>
+				</div>
+				<p class="mt-1 text-xs text-blue-600 dark:text-blue-400">
+					The model will be deployed in the current workspace with dedicated communication rooms
+				</p>
+			</div>
+
+			<!-- Action Buttons -->
+			<div class="flex gap-3">
+				<Button
+					variant="outline"
+					onclick={() => (open = false)}
+					class="flex-1"
+					disabled={isCreating}
+				>
+					Cancel
+				</Button>
+				<Button
+					variant="default"
+					onclick={handleCreateModel}
+					disabled={isCreating || !sessionId.trim() || !policyPath.trim() || !computeName.trim()}
+					class="flex-1 bg-purple-500 hover:bg-purple-600 disabled:opacity-50 dark:bg-purple-600 dark:hover:bg-purple-700"
+				>
+					{#if isCreating}
+						<span class="icon-[mdi--loading] mr-2 size-4 animate-spin"></span>
+						Creating {modelConfig.label}...
+					{:else}
+						<span class="icon-[mdi--rocket-launch] mr-2 size-4"></span>
+						Create {modelConfig.label}
+					{/if}
+				</Button>
+			</div>
+
+			<!-- 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>
+				This will create a complete AI model setup with inference session, communication rooms, and a
+				3D representation ready for connections.
+			</div>
+		</div>
+	</Dialog.Content>
+</Dialog.Root>