diff --git a/app.zip b/app.zip new file mode 100644 index 0000000..e543389 Binary files /dev/null and b/app.zip differ diff --git a/app/api/generate-code-from-image/route.ts b/app/api/generate-code-from-image/route.ts index 3f894d7..5fed6cf 100644 --- a/app/api/generate-code-from-image/route.ts +++ b/app/api/generate-code-from-image/route.ts @@ -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: - You can use Google Fonts - Font Awesome for icons: -Return only the full code in 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) diff --git a/app/draganddrop.tsx b/app/draganddrop.tsx new file mode 100644 index 0000000..442c820 --- /dev/null +++ b/app/draganddrop.tsx @@ -0,0 +1,22 @@ +'use client' + +import { Dropzone, ExtFile } from '@files-ui/react' +import { useState } from 'react' + +export const DragAndDrop = ({ transformImageToCode }: { transformImageToCode: (file: File) => Promise }) => { + const updateFiles = (files: ExtFile[]) => { + const file = files[0].file + if (file != null) transformImageToCode(file) + } + + return ( + + ) +} diff --git a/app/form.tsx b/app/form.tsx index 6276d69..b4ca7e0 100644 --- a/app/form.tsx +++ b/app/form.tsx @@ -3,26 +3,23 @@ import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Label } from '@/components/ui/label' -import { FormEvent } from 'react' - -export const Form = ({transformUrlToCode} : {transformUrlToCode: (url: string) => void}) =>{ - - const handleSubmit = (evt: FormEvent) => { - const form = evt.currentTarget as HTMLFormElement; - const url = form.elements.namedItem('url') as HTMLInputElement; - transformUrlToCode(url.value); - } +export const Form = ({ transformUrlToCode }: { transformUrlToCode: (url: string) => void }) => { return ( -
{ evt.preventDefault() - handleSubmit(evt) + + const form = evt.currentTarget as HTMLFormElement + const url = form.elements.namedItem('url') as HTMLInputElement + + transformUrlToCode(url.value) }} > -