Hugging Face's logo

Spaces:
blanchon
/
RobotHub-Frontend
Running

App Files Community
RobotHub-Frontend
File size: 3,289 Bytes 
6ce4ca6
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8173aa6
6ce4ca6
 
 
 
 
 
 
 
 
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
79
80
81
82
83
84
85
86
87
 
<script lang="ts">
	import { onMount } from "svelte";
	import { remoteComputeManager } from "$lib/elements/compute/RemoteComputeManager.svelte";
	import AISessionConnectionModal from "@/components/3d/elements/compute/modal/AISessionConnectionModal.svelte";
	import VideoInputConnectionModal from "@/components/3d/elements/compute/modal/VideoInputConnectionModal.svelte";
	import RobotInputConnectionModal from "@/components/3d/elements/compute/modal/RobotInputConnectionModal.svelte";
	import RobotOutputConnectionModal from "@/components/3d/elements/compute/modal/RobotOutputConnectionModal.svelte";
	import ComputeGridItem from "@/components/3d/elements/compute/ComputeGridItem.svelte";
	import type { RemoteCompute } from "$lib/elements/compute/RemoteCompute.svelte";

	interface Props {
		workspaceId: string;
	}
	let { workspaceId }: Props = $props();

	let isAISessionModalOpen = $state(false);
	let isVideoInputModalOpen = $state(false);
	let isRobotInputModalOpen = $state(false);
	let isRobotOutputModalOpen = $state(false);
	let selectedCompute = $state<RemoteCompute | null>(null);

	function handleVideoInputBoxClick(compute: RemoteCompute) {
		selectedCompute = compute;
		if (!compute.hasSession) {
			// If no session exists, open the session creation modal
			isAISessionModalOpen = true;
		} else {
			// If session exists, open video connection modal
			isVideoInputModalOpen = true;
		}
	}

	function handleRobotInputBoxClick(compute: RemoteCompute) {
		selectedCompute = compute;
		if (!compute.hasSession) {
			// If no session exists, open the session creation modal
			isAISessionModalOpen = true;
		} else {
			// If session exists, open robot input connection modal
			isRobotInputModalOpen = true;
		}
	}

	function handleRobotOutputBoxClick(compute: RemoteCompute) {
		selectedCompute = compute;
		if (!compute.hasSession) {
			// If no session exists, open the session creation modal
			isAISessionModalOpen = true;
		} else {
			// If session exists, open robot output connection modal
			isRobotOutputModalOpen = true;
		}
	}

	// Auto-refresh compute statuses periodically
	onMount(() => {
		const interval = setInterval(async () => {
			for (const compute of remoteComputeManager.computes) {
				if (compute.hasSession) {
					await remoteComputeManager.getSessionStatus(compute.id);
				}
			}
		}, 5000); // Refresh every 5 seconds

		return () => clearInterval(interval);
	});
</script>

{#each remoteComputeManager.computes as compute (compute.id)}
	<ComputeGridItem
		{compute}
		onVideoInputBoxClick={handleVideoInputBoxClick}
		onRobotInputBoxClick={handleRobotInputBoxClick}
		onRobotOutputBoxClick={handleRobotOutputBoxClick}
	/>
{/each}

{#if selectedCompute}
	<!-- Inference Session Creation Modal -->
	<AISessionConnectionModal bind:open={isAISessionModalOpen} compute={selectedCompute} {workspaceId} />
	<!-- Video Input Connection Modal -->
	<VideoInputConnectionModal bind:open={isVideoInputModalOpen} compute={selectedCompute} {workspaceId} />
	<!-- Robot Input Connection Modal -->
	<RobotInputConnectionModal bind:open={isRobotInputModalOpen} compute={selectedCompute} {workspaceId} />
	<!-- Robot Output Connection Modal -->
	<RobotOutputConnectionModal bind:open={isRobotOutputModalOpen} compute={selectedCompute} {workspaceId} /> 
{/if}