rdev/image-to-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update

Browse Source
This commit is contained in:
Jaime Freire
2023-12-02 19:17:51 +01:00
parent 059c99c70f
commit 8eb8b69759
8 changed files with 165 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
app/api/generate-code-from-image/route.ts
View File

@ -1,14 +1,11 @@
// ./app/api/chat/route.js
import OpenAI from 'openai'
import { OpenAIStream, StreamingTextResponse } from 'ai'
const USER_PROMPT = 'Generate code a web page that looks exactly like this'
const USER_PROMPT = 'Generate code for a web page that looks exactly like this'
const SYSTEM_PROMPT= `You are an expert Tailwind developer
const SYSTEM_PROMPT = `You are an expert Tailwind developer
You take screenshots of a reference web page from the user, and then build single page apps
using Tailwind, HTML and JS.
You might also be given a screenshot(The second image) of a web page that you have already built, and asked to
update it to look more like the reference image(The first image).
- Make sure the app looks exactly like the screenshot.
- Pay close attention to background color, text color, font size, font family,
@ -19,27 +16,28 @@ padding, margin, border, etc. Match the colors and sizes exactly.
- For images, use placeholder images from https://placehold.co and include a detailed description of the image in the alt text so that an image generation AI can generate the image later.
In terms of libraries,
- Use this script to include Tailwind: <script src="https://cdn.tailwindcss.com"></script>
- You can use Google Fonts
- Font Awesome for icons: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"></link>
Return only the full code in <html></html> tags.
Return first the background hexadecimals, put a ||| separator, and then all the code.
Do not include markdown "\`\`\`" or "\`\`\`html" at the start or end.`
const openai = new OpenAI({
apiKey: process.env.OPENAI_API_KEY,
apiKey: process.env.OPENAI_API_TOKEN,
})
export const runtime = 'edge' //vs cloud. Edge is faster but more expensive
export const runtime = 'edge'
export async function POST(req: Request) {
const { url } = await req.json()
const { url, img } = await req.json()
const imageUrl = url ?? img
const response = await openai.chat.completions.create({
model: 'gpt-4-vision-preview',
stream: true,
max_tokens: 4096,
max_tokens: 4096,
messages: [
{
role: 'system',
@ -54,12 +52,12 @@ export async function POST(req: Request) {
},
{
type: 'image_url',
image_url: url
image_url: imageUrl,
},
],
}
],
});
},
],
})
const stream = OpenAIStream(response)
return new StreamingTextResponse(stream)