Show user image in the nav

src/components/GenerationListItem.svelte

@@ -6,17 +6,20 @@
 	let outputFormat: CADFormat = 'gltf'
 	console.log(data)
 
-	let output = ''
+	let output: string | undefined = ''
 	// Outputs will only be set if the model has completed processing.
 	if (data.outputs) {
 		for (const [key, value] of Object.entries(data.outputs)) {
 			if (key.endsWith('gltf')) {
-				output = value
+				output = value as string | undefined
 			}
 		}
 	}
 
 	$: dataUrl = `data:text/${outputFormat};base64,${output}`
+
+	const gltfUrl = `data:application/json;base64,${data.outputs ? data.outputs['source.gltf'] : ''}`
+	console.log('gltfUrl', gltfUrl)
 </script>
 
 <div>
@@ -30,9 +33,9 @@
 				<p class="text-sm text-red-500">Error: {data.error}</p>
 			{/if}
 		</div>
-		{#if data.outputs}
+		{#if data.outputs && gltfUrl}
 			<div class="relative">
-				<ModelViewer />
+				<ModelViewer dataUrl={gltfUrl} />
 			</div>
 		{/if}
 	</div>

src/components/ModelViewer.svelte

@@ -1,10 +1,24 @@
 <script lang="ts">
 	import * as THREE from 'three'
+	import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
 	import * as SC from 'svelte-cubed'
+	import { onMount } from 'svelte'
+	export let dataUrl: string
+
+	let model: any
+
+	function loadGLTF() {
+		const loader = new GLTFLoader()
+		return loader.loadAsync(dataUrl)
+	}
+
+	onMount(() => {
+		loadGLTF().then((_model) => (model = _model))
+	})
 </script>
 
 <SC.Canvas antialias background={new THREE.Color('oklch(99.7% 0.008766 102.8deg)')}>
-	<SC.Mesh geometry={new THREE.BoxGeometry()} />
+	<SC.Mesh geometry={model} />
 	<SC.PerspectiveCamera position={[1, 1, 3]} />
 	<SC.OrbitControls enableZoom={false} />
 </SC.Canvas>

src/components/Nav.svelte

@@ -12,7 +12,9 @@
 		<Logo className="h-6 md:h-12" />
 	</a>
 	{#if user}
-		<p>signed in</p>
+		<div class="border border-solid overflow-hidden rounded-full w-8 h-8 md:w-12 md:h-12">
+			<img src={user.image} alt="Avatar" class="object-fill" />
+		</div>
 	{:else}
 		<a
 			href={import.meta.env.VITE_SITE_BASE_URL +

src/routes/+layout.svelte

@@ -4,7 +4,6 @@
 	import type { LayoutData } from './$types'
 
 	export let data: LayoutData
-	$: console.log(data)
 </script>
 
 <Nav user={data ? data.user : undefined} />

src/routes/+page.server.ts

@@ -60,7 +60,7 @@ export const actions = {
 		})
 
 		const body = await response.json()
-		console.log(body)
+		console.log('prompt response', body)
 
 		return {
 			status: response.status,

src/routes/+page.svelte

@@ -3,7 +3,6 @@
 	import type { PageData } from './$types.js'
 
 	export let data: PageData
-	export let form
 </script>
 
 <section class="mx-auto max-w-3xl">
@@ -29,10 +28,6 @@
 	</form>
 </section>
 
-{#if form}
-	<p>Submission response:</p>
-{/if}
-
 {#if data.body?.items?.length}
 	<section class="my-24">
 		<h2>Your generations</h2>