3d

Author: firtoz

.gitignore

@@ -34,3 +34,4 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+.idea

app/components/ExportButton.tsx

@@ -4,17 +4,21 @@ import { PreviewShape } from '../PreviewShape/PreviewShape'
 import { getHtmlFromOpenAI } from '../lib/getHtmlFromOpenAI'
 import { useMakeReal } from '../hooks/useMakeReal'
 
-export function ExportButton() {
-	const makeReal = useMakeReal()
+export function ExportButton({
+															 mode,
+														 }: {
+	mode: 'tailwind' | 'threejs',
+}) {
+	const makeReal = useMakeReal(mode)
 
 	// A tailwind styled button that is pinned to the bottom right of the screen
 	return (
 		<button
 			onClick={makeReal}
-			className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded m-2"
+			className='bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded m-2'
 			style={{ cursor: 'pointer', zIndex: 100000, pointerEvents: 'all' }}
 		>
-			Make Real
+			{`Make Real${mode === 'threejs' ? ' (3D!)' : ''}`}
 		</button>
 	)
 }

app/hooks/useMakeReal.ts

@@ -2,15 +2,15 @@ import { useEditor, useToasts } from '@tldraw/tldraw'
 import { useCallback } from 'react'
 import { makeReal } from '../lib/makeReal'
 
-export function useMakeReal() {
+export function useMakeReal(mode: 'tailwind' | 'threejs') {
 	const editor = useEditor()
 	const toast = useToasts()
 
 	return useCallback(async () => {
 		const input = document.getElementById('openai_key_risky_but_cool') as HTMLInputElement
 		const apiKey = input?.value ?? null
 		try {
-			await makeReal(editor, apiKey)
+			await makeReal(editor, apiKey, mode)
 		} catch (e: any) {
 			console.error(e)
 			toast.addToast({

app/lib/getHtmlFromOpenAI.ts

@@ -13,23 +13,43 @@ Use JavaScript modules and unkpkg to import any necessary dependencies.
 
 Respond ONLY with the contents of the html file.`
 
+const threeJsSystemPrompt = `You are an expert web developer who specializes in three.js.
+A user will provide you with a low-fidelity wireframe of an application.
+You will return a single html file that uses HTML, three.js, and JavaScript to create a high fidelity website.
+Include any extra CSS and JavaScript in the html file.
+The user will provide you with notes in blue or red text, arrows, or drawings.
+The user may also include images of other websites as style references. Transfer the styles as best as you can, matching colors.
+Prefer to use standard materials instead of basic and avoid custom shaders.
+Unless otherwise specified, set up orbit controls and a directional light attached to the camera.
+Use an import map e.g. <script type="importmap">{"imports": {"three": "https://unpkg.com/[email protected]/build/three.module.js","OrbitControls": "https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js"}}</script>
+They may also provide you with the html of a previous design that they want you to iterate from.
+Carry out any changes they request from you.
+In the wireframe, the previous design's html will appear as a white rectangle.
+Use creative license to make the application more fleshed out.
+Use JavaScript modules and unkpkg to import any necessary dependencies.
+Respond ONLY with the contents of the html file.`
+
 export async function getHtmlFromOpenAI({
 	image,
 	html,
 	apiKey,
+	mode,
 }: {
-	image: string
-	html: string
-	apiKey: string
+	image: string;
+	html: string;
+	apiKey: string;
+	mode: 'tailwind' | 'threejs',
 }) {
+	let threeJsText = 'Turn this into a single html file using three.js.'
+	let tailwindText = 'Turn this into a single html file using tailwind.'
 	const body: GPT4VCompletionRequest = {
 		model: 'gpt-4-vision-preview',
 		max_tokens: 4096,
 		temperature: 0,
 		messages: [
 			{
 				role: 'system',
-				content: systemPrompt,
+				content: mode === 'tailwind' ? systemPrompt : threeJsSystemPrompt,
 			},
 			{
 				role: 'user',
@@ -43,7 +63,7 @@ export async function getHtmlFromOpenAI({
 					},
 					{
 						type: 'text',
-						text: 'Turn this into a single html file using tailwind.',
+						text: mode === 'tailwind' ? tailwindText : threeJsText,
 					},
 					{
 						type: 'text',

app/lib/makeReal.ts

@@ -2,7 +2,7 @@ import { Editor, createShapeId, getSvgAsImage } from '@tldraw/tldraw'
 import { PreviewShape } from '../PreviewShape/PreviewShape'
 import { getHtmlFromOpenAI } from './getHtmlFromOpenAI'
 
-export async function makeReal(editor: Editor, apiKey: string) {
+export async function makeReal(editor: Editor, apiKey: string, mode: 'tailwind' | 'threejs') {
 	const newShapeId = createShapeId()
 	const selectedShapes = editor.getSelectedShapes()
 
@@ -62,6 +62,7 @@ export async function makeReal(editor: Editor, apiKey: string) {
 			image: dataUrl,
 			html: previousHtml,
 			apiKey,
+			mode,
 		})
 
 		if (json.error) {

app/page.tsx

@@ -20,7 +20,12 @@ export default function Home() {
 	return (
 		<>
 			<div className={'tldraw__editor'}>
-				<Tldraw persistenceKey="tldraw" shapeUtils={shapeUtils} shareZone={<ExportButton />}>
+				<Tldraw persistenceKey="tldraw" shapeUtils={shapeUtils} shareZone={
+					<div className={"flex"}>
+						<ExportButton mode={'tailwind'}/>
+						<ExportButton mode={'threejs'}/>
+					</div>
+				}>
 					<APIKeyInput />
 					<LockupLink />
 				</Tldraw>