feat: add instance view for 3D models

frontend/src/lib/instance-views/elements/ThreeD.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	export let data: string;
+</script>
+
+<svelte:head>
+	<script
+		type="module"
+		src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.0.1/model-viewer.min.js"
+	></script>
+</svelte:head>
+
+<model-viewer
+	alt="3D model for instance {data}"
+	src={data}
+	shadow-intensity="1"
+	camera-controls
+	touch-action="pan-y"
+></model-viewer>

frontend/src/lib/instance-views/resolve.ts

@@ -9,6 +9,7 @@ import Markdown from './elements/Markdown.svelte';
 import Message from './elements/Message.svelte';
 import SeparatedValues from './elements/SeparatedValues.svelte';
 import Text from './elements/Text.svelte';
+import ThreeD from './elements/ThreeD.svelte';
 import VStack from './elements/VStack.svelte';
 
 export const elementMap: Record<string, ComponentType> = {
@@ -20,7 +21,8 @@ export const elementMap: Record<string, ComponentType> = {
 	[ViewType.audio]: Audio,
 	[ViewType.code]: Code,
 	[ViewType.message]: Message,
-	[ViewType.separatedValues]: SeparatedValues
+	[ViewType.separatedValues]: SeparatedValues,
+	[ViewType['3D']]: ThreeD
 };
 
 export function isComplexElement(type: string) {

frontend/src/lib/instance-views/schema.json

@@ -168,6 +168,7 @@
 				"audio",
 				"code",
 				"markdown",
+				"3D",
 				"list",
 				"vstack",
 				"message",

frontend/src/lib/instance-views/schema.ts

@@ -5,6 +5,7 @@ export enum ViewType {
 	'audio' = 'audio',
 	'code' = 'code',
 	'markdown' = 'markdown',
+	'3D' = '3D',
 	// data containers
 	'list' = 'list',
 	'vstack' = 'vstack',

frontend/src/routes/playground/samples.ts

@@ -319,5 +319,25 @@ export const samples: Record<string, { spec: string; data: string }> = {
 			null,
 			2
 		)
+	},
+	'3D-object-classification': {
+		spec: JSON.stringify(
+			{
+				data: { type: '3D' },
+				label: { type: 'text' },
+				output: { type: 'text' }
+			},
+			null,
+			2
+		),
+		data: JSON.stringify(
+			{
+				data: 'https://raw.githubusercontent.com/google/model-viewer/master/packages/shared-assets/models/NeilArmstrong.glb',
+				label: 'astronaut',
+				output: 'astronaut'
+			},
+			null,
+			2
+		)
 	}
 };