tweak

app/PreviewShape/PreviewShape.tsx

@@ -124,6 +124,7 @@ export class PreviewShapeUtil extends BaseBoxShapeUtil<PreviewShape> {
 								border: '1px solid var(--color-panel-contrast)',
 								borderRadius: 'var(--radius-2)',
 							}}
+							allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
 							sandbox={getSandboxPermissions({
 								'allow-downloads-without-user-activation': false,
 								'allow-downloads': true,

app/lib/makeHappen.ts

@@ -3,6 +3,8 @@ import { blobToBase64 } from './blobToBase64'
 import { getSelectionAsText } from './getSelectionAsText'
 import { getTextFromOpenAI } from './getTextFromOpenAI'
 
+const WIDTH = 1200
+
 export async function makeHappen(editor: Editor, apiKey: string) {
 	// Get the selected shapes (we need at least one)
 	const selectedShapes = editor.getSelectedShapes()
@@ -17,7 +19,15 @@ export async function makeHappen(editor: Editor, apiKey: string) {
 		type: 'text',
 		x: maxX + 60, // to the right of the selection
 		y: minY,
-		props: { text: '...', font: 'mono', size: 'm', align: 'start', color: 'black' },
+		props: {
+			text: '...',
+			font: 'mono',
+			size: 'l',
+			align: 'start',
+			color: 'black',
+			autoSize: false,
+			w: WIDTH,
+		},
 	})
 
 	// Get an SVG based on the selected shapes
@@ -70,17 +80,25 @@ export async function makeHappen(editor: Editor, apiKey: string) {
 			throw Error(`${json.error.message?.slice(0, 128)}...`)
 		}
 
-		const message = json.choices[0].message.content
+		let message = json.choices[0].message.content
+		console.log(`Response: ${message}`)
+
+		if (message.slice(0, 3) === '```') {
+			message = message.replace(/```\w*\n/, '')
+		}
+
+		message = message.replaceAll('```', '')
+
 		// Update the shape with the new props
 		editor.updateShape<TLTextShape>({
 			id: newShapeId,
 			type: 'text',
 			props: {
 				text: message,
+				autoSize: false,
+				w: WIDTH,
 			},
 		})
-
-		console.log(`Response: ${message}`)
 	} catch (e) {
 		// If anything went wrong, delete the shape.
 		editor.deleteShape(newShapeId)

app/prompt.ts

@@ -16,4 +16,8 @@ export const OPENAI_USER_PROMPT =
 export const OPENAI_USER_PROMPT_WITH_PREVIOUS_DESIGN =
 	"Here are the latest wireframes. There are also some previous outputs here. We have run their code through an 'HTML to screenshot' library, that attempts to generate a screenshot of the page. The generated screenshot may have some inaccuracies, so use your knowledge of HTML and web development to figure out what any annotations are referring to, which may be different to what is visible in the generated screenshot. Make a new website based on these wireframes and notes and send back just the HTML file contents."
 
-export const OPEN_AI_HAPPEN_SYSTEM_PROMPT = `You are a helpful expert assistant who helps with any kind of task. Your user has sent you an image to show you a task they want help with. They may have annotated the image in some way to indicate to you what they want you to return. You should reply with a text response that fulfils the task they have asked for. Only respond with the completed task, not any discussion or comments about the task. If you are unsure about any part of the task, make your best guess.`
+export const OPEN_AI_HAPPEN_SYSTEM_PROMPT = `You are a helpful expert task completer who finishes any kind of task. Your user has sent you a screenshot of a task they are working on, and you need to finish it for them by responding with their completed work. They have annotated the screenshot to indicate what still needs to be done. Use the annotations and contextual clues to figure out what needs to happen, and respond with the completed task. For example, they might be editing some writing, or constructing an SQL query. Use your best judgement to figure out what they are trying to create, and return the completed task to the best of your ability. You must follow their annotations, as those have already been reviewed and decided. Do not make any other changes - only the annotated changes.
+
+Only respond with the completed work, and do not leave any discussion or comments about the task, as your work will be submitted as-is. If you are unsure about any part of the task, make your best guess. It's better to guess and get it wrong than to leave things incomplete. Make it happen!
+
+No matter what, never discuss what the task actually is. Only provide the finished task, with no context or considerations. Make it happen! Good luck!`