Start adding 3D viewing

KittyCAD · Oct 18, 2023 · b9d0bfd · b9d0bfd
1 parent c18922a
commit b9d0bfd
Show file tree

Hide file tree

Showing 8 changed files with 134 additions and 19 deletions.
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
 		"@playwright/test": "^1.28.1",
 		"@sveltejs/adapter-auto": "^2.0.0",
 		"@sveltejs/kit": "^1.20.4",
+		"@types/three": "^0.157.2",
 		"@typescript-eslint/eslint-plugin": "^6.0.0",
 		"@typescript-eslint/parser": "^6.0.0",
 		"autoprefixer": "^10.4.16",
@@ -37,6 +38,8 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@kittycad/lib": "^0.0.44"
+		"@kittycad/lib": "^0.0.44",
+		"svelte-cubed": "^0.2.1",
+		"three": "^0.157.0"
 	}
 }
diff --git a/src/components/GenerationListItem.svelte b/src/components/GenerationListItem.svelte
@@ -1,14 +1,25 @@
 <script lang="ts">
 	import type { CADFormat, PromptResponse } from '$lib/endpoints'
+	import ModelViewer from './ModelViewer.svelte'
 
 	export let data: PromptResponse
 	let outputFormat: CADFormat = 'step'
 
 	$: dataUrl = `data:text/${outputFormat};base64,${data.outputs ? data.outputs[outputFormat] : ''}`
 </script>
 
-<pre class="border p-4 my-12 first-of-type:mt-0 overflow-auto">
-    {JSON.stringify(data, null, 2)}
-</pre>
-<a href={`view/${data.id}`}>View model</a>
-<a href={dataUrl} download>Download model</a>
+<div>
+	<div class="grid md:grid-cols-2 lg:grid-cols-3 border items-stretch">
+		<div class="lg:col-span-2 border-r px-2 py-6 lg:px-4 lg:py-16">
+			<h3>Your Prompt</h3>
+			<p class="text-lg">"{data.prompt}"</p>
+		</div>
+		<div class="relative">
+			<ModelViewer />
+		</div>
+	</div>
+	<ul class="m-0 p-0">
+		<li class="contents"><a href={`view/${data.id}`}>View model</a></li>
+		<li class="contents"><a href={dataUrl} download>Download model</a></li>
+	</ul>
+</div>
diff --git a/src/components/ModelViewer.svelte b/src/components/ModelViewer.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import * as THREE from 'three'
+	import * as SC from 'svelte-cubed'
+</script>
+
+<SC.Canvas antialias background={new THREE.Color('oklch(99.7% 0.008766 102.8deg)')}>
+	<SC.Mesh geometry={new THREE.BoxGeometry()} />
+	<SC.PerspectiveCamera position={[1, 1, 3]} />
+	<SC.OrbitControls enableZoom={false} />
+</SC.Canvas>
diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte
@@ -1,17 +1,19 @@
 <script lang="ts">
+	import type { Models } from '@kittycad/lib'
 	import Logo from './Logo.svelte'
 	import { page } from '$app/stores'
 	import { paths } from '$lib/paths'
-	import type { User_type } from '@kittycad/lib/dist/types/src/models'
 
-	export let user: User_type | undefined
+	export let user: Models['User_type'] | undefined
 </script>
 
 <nav class="nav">
 	<a href="/">
 		<Logo className="h-6 md:h-12" />
 	</a>
-	{#if user}{:else}
+	{#if user}
+		<p>signed in</p>
+	{:else}
 		<a
 			href={import.meta.env.VITE_SITE_BASE_URL +
 				paths.SIGN_IN +

diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts
@@ -5,12 +5,12 @@ export const load = async ({ cookies }) => {
 	const token = cookies.get('__Secure-next-auth.session-token')
 	console.log('token', token)
 
-	const client = new Client(token)
+	const client = new Client(token || '')
 	const response = await users.get_user_self({ client })
 
 	console.log('user', response)
 
 	return {
-		user: 'error_code' in response ? { user: undefined } : { user: response }
+		user: 'error_code' in response ? undefined : response
 	}
 }
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -3,11 +3,11 @@
 	import 'styles/app.css'
 	import type { LayoutData } from './$types'
 
-	export let layoutData: LayoutData
-	console.log(layoutData)
+	export let data: LayoutData
+	$: console.log(data)
 </script>
 
-<Nav user={layoutData ? layoutData.user : undefined} />
+<Nav user={data ? data.user : undefined} />
 <main class="mx-5 lg:mx-auto max-w-5xl my-24">
 	<slot />
 </main>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import GenerationListItem from 'components/GenerationListItem.svelte'
 	import type { PageData } from './$types.js'
 
 	export let data: PageData
@@ -36,11 +37,7 @@
 	<section class="my-24">
 		<h2>Your generations</h2>
 		{#each data.body.items as item}
-			<pre class="border p-4 my-12 first-of-type:mt-0 overflow-auto">{JSON.stringify(
-					item,
-					null,
-					2
-				)}</pre>
+			<GenerationListItem data={item} />
 		{/each}
 	</section>
 {/if}

diff --git a/yarn.lock b/yarn.lock
@@ -376,6 +376,13 @@
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.3.tgz#2be19e759a3dd18c79f9f436bd7363556c1a73dd"
   integrity sha512-CS2rOaoQ/eAgAfcTfq6amKG7bsN+EMcgGY4FAFQdvSj2y1ixvOZTUA9mOtCai7E1SYu283XNw7urKK30nP3wkQ==
 
+"@types/hast@^2.0.0":
+  version "2.3.7"
+  resolved "https://registry.yarnpkg.com/@types/hast/-/hast-2.3.7.tgz#5e9bd7ab4452d5313aeec9d38fbc193a70f8d810"
+  integrity sha512-EVLigw5zInURhzfXUM65eixfadfsHKomGKUakToXo84t8gGIJuTcD2xooM2See7GyQ7DRtYjhCHnSUQez8JaLw==
+  dependencies:
+    "@types/unist" "^2"
+
 "@types/json-schema@^7.0.12":
   version "7.0.14"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.14.tgz#74a97a5573980802f32c8e47b663530ab3b6b7d1"
@@ -398,6 +405,31 @@
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.3.tgz#9a726e116beb26c24f1ccd6850201e1246122e04"
   integrity sha512-OxepLK9EuNEIPxWNME+C6WwbRAOOI2o2BaQEGzz5Lu2e4Z5eDnEo+/aVEDMIXywoJitJ7xWd641wrGLZdtwRyw==
 
+"@types/stats.js@*":
+  version "0.17.2"
+  resolved "https://registry.yarnpkg.com/@types/stats.js/-/stats.js-0.17.2.tgz#97b6fa9bbb534e8e65c693cf0e90588756783574"
+  integrity sha512-j1oI+BOPiAAAKFysNNutE9aAIjvHqqILubCs2EeHKc19pi4uybaGAgBfLXsCgJYcyKWkiilEvl8CkFF/SL+baA==
+
+"@types/three@^0.157.2":
+  version "0.157.2"
+  resolved "https://registry.yarnpkg.com/@types/three/-/three-0.157.2.tgz#f22b9a4b6c9f2ed35de88f4346e57ee7296473cb"
+  integrity sha512-2kykrMgvO5LTAiahadM6ijoER+GcbEJ61pQVOyGxIJTCASoUnzwJvfhilsLxvEw4+glzhLYUDvvTvNjx+58Vzw==
+  dependencies:
+    "@types/stats.js" "*"
+    "@types/webxr" "*"
+    fflate "~0.6.10"
+    meshoptimizer "~0.18.1"
+
+"@types/unist@^2", "@types/unist@^2.0.0":
+  version "2.0.9"
+  resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.9.tgz#72e164381659a49557b0a078b28308f2c6a3e1ce"
+  integrity sha512-zC0iXxAv1C1ERURduJueYzkzZ2zaGyc+P2c95hgkikHPr3z8EdUZOlgEQ5X0DRmwDZn+hekycQnoeiiRVrmilQ==
+
+"@types/webxr@*":
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/@types/webxr/-/webxr-0.5.6.tgz#835c7ac9983a732e2e849d0d302bc735aa455126"
+  integrity sha512-/uWg82/WT+Pl18b2kkG6nlbiiaNIb8RN2mvvcGexGvwLvUrEhDhGBzYHiwa5nQPtin0hISyrXkKOKVScTK+kKg==
+
 "@typescript-eslint/eslint-plugin@^6.0.0":
   version "6.8.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.8.0.tgz#06abe4265e7c82f20ade2dcc0e3403c32d4f148b"
@@ -1090,6 +1122,11 @@ fetch-blob@^3.1.2, fetch-blob@^3.1.4:
     node-domexception "^1.0.0"
     web-streams-polyfill "^3.0.3"
 
+fflate@~0.6.10:
+  version "0.6.10"
+  resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.6.10.tgz#5f40f9659205936a2d18abf88b2e7781662b6d43"
+  integrity sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==
+
 file-entry-cache@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
@@ -1245,6 +1282,13 @@ has@^1.0.3:
   resolved "https://registry.yarnpkg.com/has/-/has-1.0.4.tgz#2eb2860e000011dae4f1406a86fe80e530fb2ec6"
   integrity sha512-qdSAmqLF6209RFj4VVItywPMbm3vWylknmB3nvNiUIs72xAimcM8nVYxYr7ncvZq5qzk9MKIZR8ijqD/1QuYjQ==
 
+hast-util-heading-rank@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/hast-util-heading-rank/-/hast-util-heading-rank-2.1.1.tgz#063b43b9cfb56a1a8ded84dd68d8af69e8864545"
+  integrity sha512-iAuRp+ESgJoRFJbSyaqsfvJDY6zzmFoEnL1gtz1+U8gKtGGj1p0CVlysuUAUjq95qlZESHINLThwJzNGmgGZxA==
+  dependencies:
+    "@types/hast" "^2.0.0"
+
 ignore@^5.2.0, ignore@^5.2.4:
   version "5.2.4"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324"
@@ -1461,6 +1505,11 @@ merge2@^1.3.0, merge2@^1.4.1:
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
+meshoptimizer@~0.18.1:
+  version "0.18.1"
+  resolved "https://registry.yarnpkg.com/meshoptimizer/-/meshoptimizer-0.18.1.tgz#cdb90907f30a7b5b1190facd3b7ee6b7087797d8"
+  integrity sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==
+
 micromatch@^4.0.4, micromatch@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
@@ -2041,6 +2090,15 @@ svelte-check@^3.4.3:
     svelte-preprocess "^5.0.4"
     typescript "^5.0.3"
 
+svelte-cubed@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/svelte-cubed/-/svelte-cubed-0.2.1.tgz#7602e68e8bfc1d5c4ac0627bc4b6a19e408d06a5"
+  integrity sha512-6k0m4Bg2abA0WBigqBSR5QW+aBFX/UV26W0IlrNzDVBm6rlJHt7OYeeHW9AuBZzyWq4A/gSBCoa1GNYiANFrbQ==
+  dependencies:
+    hast-util-heading-rank "^2.1.0"
+    unist-util-visit "^4.1.0"
+    yootils "^0.3.1"
+
 "svelte-eslint-parser@>=0.33.0 <1.0.0":
   version "0.33.1"
   resolved "https://registry.yarnpkg.com/svelte-eslint-parser/-/svelte-eslint-parser-0.33.1.tgz#c64dbed2fad099577429b3c39377f6b8d36e5d97"
@@ -2134,6 +2192,11 @@ thenify-all@^1.0.0:
   dependencies:
     any-promise "^1.0.0"
 
+three@^0.157.0:
+  version "0.157.0"
+  resolved "https://registry.yarnpkg.com/three/-/three-0.157.0.tgz#5baac531941fc8c4ca62d45ee4265652e03318d0"
+  integrity sha512-CeAwQrf4x3z0/e+MC4F+nXLW5t0gh3pw+L6CCBqpHvOq3bGYIgRYub7Pv0j/9wR+d++OiEglyZzWyuSYbwWGOA==
+
 tiny-glob@^0.2.9:
   version "0.2.9"
   resolved "https://registry.yarnpkg.com/tiny-glob/-/tiny-glob-0.2.9.tgz#2212d441ac17928033b110f8b3640683129d31e2"
@@ -2247,6 +2310,30 @@ undici@~5.25.0:
   dependencies:
     "@fastify/busboy" "^2.0.0"
 
+unist-util-is@^5.0.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-5.2.1.tgz#b74960e145c18dcb6226bc57933597f5486deae9"
+  integrity sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw==
+  dependencies:
+    "@types/unist" "^2.0.0"
+
+unist-util-visit-parents@^5.1.1:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-5.1.3.tgz#b4520811b0ca34285633785045df7a8d6776cfeb"
+  integrity sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-is "^5.0.0"
+
+unist-util-visit@^4.1.0:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-4.1.2.tgz#125a42d1eb876283715a3cb5cceaa531828c72e2"
+  integrity sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-is "^5.0.0"
+    unist-util-visit-parents "^5.1.1"
+
 update-browserslist-db@^1.0.13:
   version "1.0.13"
   resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz#3c5e4f5c083661bd38ef64b6328c26ed6c8248c4"
@@ -2384,3 +2471,8 @@ yocto-queue@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-1.0.0.tgz#7f816433fb2cbc511ec8bf7d263c3b58a1a3c251"
   integrity sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==
+
+yootils@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/yootils/-/yootils-0.3.1.tgz#c3122bd81423640bbb0b4fd46af7d254f531af51"
+  integrity sha512-A7AMeJfGefk317I/3tBoUYRcDcNavKEkpiPN/nQsBz/viI2GvT7BtrqdPD6rGqBFN8Ax7v4obf+Cl32JF9DDVw==