From 7d1e2efb836c458ca73a97ea9b6013dc33c5e6a9 Mon Sep 17 00:00:00 2001 From: Chandima Ekanayake Date: Mon, 13 Nov 2023 21:16:52 +0530 Subject: [PATCH 1/4] Added the current html to the prompt and instructed to maintain the consistency --- app/api/toHtml/route.ts | 14 +++++++++++--- app/page.tsx | 5 ++++- components/PreviewModal.tsx | 2 ++ 3 files changed, 17 insertions(+), 4 deletions(-) diff --git a/app/api/toHtml/route.ts b/app/api/toHtml/route.ts index 5c1abfcb..903cb936 100644 --- a/app/api/toHtml/route.ts +++ b/app/api/toHtml/route.ts @@ -4,7 +4,7 @@ const systemPrompt = `You are an expert tailwind developer. A user will provide if you need to insert an image, use placehold.co to create a placeholder image. Respond only with the html file.`; export async function POST(request: Request) { - const { image } = await request.json(); + const { image, currentHtml } = await request.json(); const body: GPT4VCompletionRequest = { model: "gpt-4-vision-preview", max_tokens: 4096, @@ -15,7 +15,15 @@ export async function POST(request: Request) { }, { role: "user", - content: [ + content: currentHtml? [ + { + type: "image_url", + image_url: image, + }, + `Update this html content, based on the updated image given. + Don't make drastic changes from the given html, based on the image. + And do not change anything arbitrarily if not changed in the given image explicitly. Current HTML: ${currentHtml}` + ] : [ { type: "image_url", image_url: image, @@ -32,7 +40,7 @@ export async function POST(request: Request) { method: "POST", headers: { "Content-Type": "application/json", - Authorization: `Bearer ${process.env.OPENAI_API_KEY}`, + Authorization: `Bearer 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`, }, body: JSON.stringify(body), }); diff --git a/app/page.tsx b/app/page.tsx index 5fdb7f99..45f0b683 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -78,7 +78,10 @@ function ExportButton({ setHtml }: { setHtml: (html: string) => void }) { headers: { "Content-Type": "application/json", }, - body: JSON.stringify({ image: dataUrl }), + body: JSON.stringify({ + image: dataUrl, + currentHtml: window.localStorage.getItem("currentHtml"), + }), }); const json = await resp.json(); diff --git a/components/PreviewModal.tsx b/components/PreviewModal.tsx index 0f032c44..675a334e 100644 --- a/components/PreviewModal.tsx +++ b/components/PreviewModal.tsx @@ -26,6 +26,8 @@ export function PreviewModal({ return null; } + window?.localStorage.setItem("currentHtml", html); + return (
{ From afc8b4d76aec53e03a47921324107940410924c9 Mon Sep 17 00:00:00 2001 From: Chandima Ekanayake Date: Mon, 13 Nov 2023 21:28:36 +0530 Subject: [PATCH 2/4] given the capability to add some additional notes. So if the AI mess up somewhere user can emphasis points. --- app/api/toHtml/route.ts | 6 ++++-- app/page.tsx | 11 ++++++++++- 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/app/api/toHtml/route.ts b/app/api/toHtml/route.ts index 903cb936..ada6dc51 100644 --- a/app/api/toHtml/route.ts +++ b/app/api/toHtml/route.ts @@ -4,7 +4,7 @@ const systemPrompt = `You are an expert tailwind developer. A user will provide if you need to insert an image, use placehold.co to create a placeholder image. Respond only with the html file.`; export async function POST(request: Request) { - const { image, currentHtml } = await request.json(); + const { image, currentHtml, additionalInstructions } = await request.json(); const body: GPT4VCompletionRequest = { model: "gpt-4-vision-preview", max_tokens: 4096, @@ -22,7 +22,9 @@ export async function POST(request: Request) { }, `Update this html content, based on the updated image given. Don't make drastic changes from the given html, based on the image. - And do not change anything arbitrarily if not changed in the given image explicitly. Current HTML: ${currentHtml}` + And do not change anything arbitrarily if not changed in the given image explicitly. Current HTML: ${currentHtml}`, + additionalInstructions ? `This is the user's additional instructions on how to convert the image to html. + Give EXTRA ATTENTION to this also. User: ${additionalInstructions}`: '', ] : [ { type: "image_url", diff --git a/app/page.tsx b/app/page.tsx index 45f0b683..214ab472 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -54,8 +54,15 @@ export default function Home() { function ExportButton({ setHtml }: { setHtml: (html: string) => void }) { const editor = useEditor(); const [loading, setLoading] = useState(false); + const [additionalInstructions, setAdditionalInstructions] = useState(""); // A tailwind styled button that is pinned to the bottom right of the screen - return ( + return (<> +