forked from SawyerHood/draw-a-ui
-
Notifications
You must be signed in to change notification settings - Fork 523
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
3d + improve iterations + allow refreshing
- Loading branch information
Showing
7 changed files
with
179 additions
and
85 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -34,3 +34,4 @@ yarn-error.log* | |
| # typescript | ||
| *.tsbuildinfo | ||
| next-env.d.ts | ||
| .idea | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| const systemPrompt = `You are an expert web developer who specializes in tailwind css. | ||
| const tailwindSystemPrompt = `You are an expert web developer who specializes in tailwind css. | ||
| A user will provide you with a low-fidelity wireframe of an application. | ||
| You will return a single html file that uses HTML, tailwind css, and JavaScript to create a high fidelity website. | ||
| Include any extra CSS and JavaScript in the html file. | ||
|
|
@@ -13,45 +13,83 @@ Use JavaScript modules and unpkg 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. | ||
| Add a hidden div into the start of the body that includes the detailed instructions from the user, the contents adjusted to take the requested changes into account. If for example the user requests a change to the color of a button, change the color of the button in the instructions also, instead of saying "change button color". | ||
| Include any extra CSS and JavaScript in the html file. | ||
| The user will provide you with notes in 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, keep everything the same except for the requested changes. | ||
| 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 unpkg to import any necessary dependencies. | ||
| Respond ONLY with the contents of the html file.` | ||
|
|
||
| const threeJsText = 'Turn this into a single html file using three.js.' | ||
| const tailwindText = 'Turn this into a single html file using tailwind.' | ||
| const changesText = 'Please make the changes as specified in the image.' | ||
|
|
||
| export async function getHtmlFromOpenAI({ | ||
| image, | ||
| html, | ||
| apiKey, | ||
| }: { | ||
| image: string | ||
| html: string | ||
| apiKey: string | ||
| image, | ||
| apiKey, | ||
| mode, | ||
| history, | ||
| }: { | ||
| image: string; | ||
| apiKey: string; | ||
| mode: 'tailwind' | 'threejs', | ||
| history: CompletionMessageItem[], | ||
| }) { | ||
| const userMessage: CompletionMessageItem = { | ||
| role: 'user', | ||
| content: [ | ||
| { | ||
| type: 'image_url', | ||
| image_url: { | ||
| url: image, | ||
| detail: 'high', | ||
| }, | ||
| }, | ||
| ], | ||
| } | ||
|
|
||
| if (history.length === 0) { | ||
| (userMessage.content as any[]).push({ | ||
| type: 'text', | ||
| text: mode === 'tailwind' ? tailwindText : threeJsText, | ||
| }) | ||
| } else { | ||
| (userMessage.content as any[]).push({ | ||
| type: 'text', | ||
| text: changesText, | ||
| }) | ||
| } | ||
|
|
||
| const systemMessage: CompletionMessageItem = { | ||
| role: 'system', | ||
| content: mode === 'tailwind' ? tailwindSystemPrompt : threeJsSystemPrompt, | ||
| } | ||
|
|
||
| const last4NonSystemMessages = history | ||
| .filter((item) => item.role !== 'system') | ||
| .slice(-4) | ||
|
|
||
| const messages: CompletionMessageItem[] = [ | ||
| systemMessage, | ||
| ...last4NonSystemMessages, | ||
| userMessage, | ||
| ] | ||
|
|
||
| const body: GPT4VCompletionRequest = { | ||
| model: 'gpt-4-vision-preview', | ||
| max_tokens: 4096, | ||
| temperature: 0, | ||
| messages: [ | ||
| { | ||
| role: 'system', | ||
| content: systemPrompt, | ||
| }, | ||
| { | ||
| role: 'user', | ||
| content: [ | ||
| { | ||
| type: 'image_url', | ||
| image_url: { | ||
| url: image, | ||
| detail: 'high', | ||
| }, | ||
| }, | ||
| { | ||
| type: 'text', | ||
| text: 'Turn this into a single html file using tailwind.', | ||
| }, | ||
| { | ||
| type: 'text', | ||
| text: html, | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| messages, | ||
| } | ||
|
|
||
| let json = null | ||
|
|
@@ -67,41 +105,51 @@ export async function getHtmlFromOpenAI({ | |
| }, | ||
| body: JSON.stringify(body), | ||
| }) | ||
| console.log(resp) | ||
| json = await resp.json() | ||
| } catch (e) { | ||
| console.log(e) | ||
| console.error(e) | ||
| } | ||
|
|
||
| const newHistory = [...messages] | ||
|
|
||
| if (json) { | ||
| newHistory.push(json.choices[0].message) | ||
| } | ||
|
|
||
| return json | ||
| return { | ||
| response: json, | ||
| history: newHistory, | ||
| } | ||
| } | ||
|
|
||
| type MessageContent = | ||
| | string | ||
| | ( | ||
| | string | ||
| | { | ||
| type: 'image_url' | ||
| image_url: | ||
| | string | ||
| | { | ||
| url: string | ||
| detail: 'low' | 'high' | 'auto' | ||
| } | ||
| } | ||
| | { | ||
| type: 'text' | ||
| text: string | ||
| } | ||
| )[] | ||
| | string | ||
| | { | ||
| type: 'image_url' | ||
| image_url: | ||
| | string | ||
| | { | ||
| url: string | ||
| detail: 'low' | 'high' | 'auto' | ||
| } | ||
| } | ||
| | { | ||
| type: 'text' | ||
| text: string | ||
| } | ||
| )[] | ||
|
|
||
| export type CompletionMessageItem = { | ||
| role: 'system' | 'user' | 'assistant' | 'function' | ||
| content: MessageContent | ||
| name?: string | undefined | ||
| }; | ||
|
|
||
| export type GPT4VCompletionRequest = { | ||
| model: 'gpt-4-vision-preview' | ||
| messages: { | ||
| role: 'system' | 'user' | 'assistant' | 'function' | ||
| content: MessageContent | ||
| name?: string | undefined | ||
| }[] | ||
| messages: CompletionMessageItem[] | ||
| functions?: any[] | undefined | ||
| function_call?: any | undefined | ||
| stream?: boolean | undefined | ||
|
|
@@ -114,8 +162,8 @@ export type GPT4VCompletionRequest = { | |
| presence_penalty?: number | undefined | ||
| logit_bias?: | ||
| | { | ||
| [x: string]: number | ||
| } | ||
| [x: string]: number | ||
| } | ||
| | undefined | ||
| stop?: (string[] | string) | undefined | ||
| } | ||
Oops, something went wrong.