diff --git a/backend/eval.py b/backend/eval.py index 000c6fe..60ef409 100644 --- a/backend/eval.py +++ b/backend/eval.py @@ -49,7 +49,7 @@ async def main(): for filename in evals: filepath = os.path.join(INPUT_DIR, filename) data_url = await image_to_data_url(filepath) - task = generate_code_core(data_url, "svg") + task = generate_code_core(data_url, "vue_tailwind") tasks.append(task) results = await asyncio.gather(*tasks) diff --git a/backend/prompts.py b/backend/prompts.py index 1fe4f9b..d3d3b18 100644 --- a/backend/prompts.py +++ b/backend/prompts.py @@ -15,6 +15,7 @@ from screenshot_system_prompts import ( REACT_TAILWIND_SYSTEM_PROMPT, TAILWIND_SYSTEM_PROMPT, SVG_SYSTEM_PROMPT, + VUE_TAILWIND_SYSTEM_PROMPT, ) @@ -77,6 +78,8 @@ def assemble_prompt( system_content = BOOTSTRAP_SYSTEM_PROMPT elif generated_code_config == "ionic_tailwind": system_content = IONIC_TAILWIND_SYSTEM_PROMPT + elif generated_code_config == "vue_tailwind": + system_content = VUE_TAILWIND_SYSTEM_PROMPT elif generated_code_config == "svg": system_content = SVG_SYSTEM_PROMPT else: diff --git a/backend/screenshot_system_prompts.py b/backend/screenshot_system_prompts.py index 3308d03..1dfcca4 100644 --- a/backend/screenshot_system_prompts.py +++ b/backend/screenshot_system_prompts.py @@ -111,6 +111,48 @@ Return only the full code in tags. Do not include markdown "```" or "```html" at the start or end. """ +VUE_TAILWIND_SYSTEM_PROMPT = """ +You are an expert Vue/Tailwind developer +You take screenshots of a reference web page from the user, and then build single page apps +using Vue and Tailwind CSS. +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, +padding, margin, border, etc. Match the colors and sizes exactly. +- Use the exact text from the screenshot. +- Do not add comments in the code such as "" and "" in place of writing the full code. WRITE THE FULL CODE. +- Repeat elements as needed to match the screenshot. For example, if there are 15 items, the code should have 15 items. DO NOT LEAVE comments like "" or bad things will happen. +- 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. +- Use Vue using the global build like so: + +
{{ message }}
+ + +In terms of libraries, + +- Use these script to include Vue so that it can run on a standalone page: + +- Use this script to include Tailwind: +- You can use Google Fonts +- Font Awesome for icons: + +Return only the full code in tags. +Do not include markdown "```" or "```html" at the start or end. +The return result must only include the code. +""" + SVG_SYSTEM_PROMPT = """ You are an expert at building SVGs. diff --git a/backend/test_prompts.py b/backend/test_prompts.py index 303e3a9..e12a207 100644 --- a/backend/test_prompts.py +++ b/backend/test_prompts.py @@ -113,6 +113,48 @@ Return only the full code in tags. Do not include markdown "```" or "```html" at the start or end. """ +VUE_TAILWIND_SYSTEM_PROMPT = """ +You are an expert Vue/Tailwind developer +You take screenshots of a reference web page from the user, and then build single page apps +using Vue and Tailwind CSS. +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, +padding, margin, border, etc. Match the colors and sizes exactly. +- Use the exact text from the screenshot. +- Do not add comments in the code such as "" and "" in place of writing the full code. WRITE THE FULL CODE. +- Repeat elements as needed to match the screenshot. For example, if there are 15 items, the code should have 15 items. DO NOT LEAVE comments like "" or bad things will happen. +- 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. +- Use Vue using the global build like so: + +
{{ message }}
+ + +In terms of libraries, + +- Use these script to include Vue so that it can run on a standalone page: + +- Use this script to include Tailwind: +- You can use Google Fonts +- Font Awesome for icons: + +Return only the full code in tags. +Do not include markdown "```" or "```html" at the start or end. +The return result must only include the code. +""" + SVG_SYSTEM_PROMPT = """ You are an expert at building SVGs. You take screenshots of a reference web page from the user, and then build a SVG that looks exactly like the screenshot. @@ -257,6 +299,10 @@ def test_prompts(): assert ionic_tailwind[0]["content"] == IONIC_TAILWIND_SYSTEM_PROMPT assert ionic_tailwind[1]["content"][2]["text"] == USER_PROMPT # type: ignore + vue = assemble_prompt("image_data_url", "vue_tailwind", "result_image_data_url") + assert vue[0]["content"] == VUE_TAILWIND_SYSTEM_PROMPT + assert vue[1]["content"][2]["text"] == USER_PROMPT # type: ignore + svg_prompt = assemble_prompt("image_data_url", "svg", "result_image_data_url") assert svg_prompt[0]["content"] == SVG_SYSTEM_PROMPT assert svg_prompt[1]["content"][2]["text"] == SVG_USER_PROMPT # type: ignore diff --git a/frontend/src/components/OutputSettingsSection.tsx b/frontend/src/components/OutputSettingsSection.tsx index f671b58..4398f1b 100644 --- a/frontend/src/components/OutputSettingsSection.tsx +++ b/frontend/src/components/OutputSettingsSection.tsx @@ -37,6 +37,13 @@ function generateDisplayComponent(config: GeneratedCodeConfig) { Tailwind ); + case GeneratedCodeConfig.VUE_TAILWIND: + return ( +
+ Vue +{" "} + Tailwind +
+ ); case GeneratedCodeConfig.SVG: return (
@@ -90,6 +97,14 @@ function OutputSettingsSection({ {generateDisplayComponent(GeneratedCodeConfig.BOOTSTRAP)} + +
+ {generateDisplayComponent(GeneratedCodeConfig.VUE_TAILWIND)} + + Beta + +
+
{generateDisplayComponent(GeneratedCodeConfig.IONIC_TAILWIND)} diff --git a/frontend/src/types.ts b/frontend/src/types.ts index 2820427..e0c1026 100644 --- a/frontend/src/types.ts +++ b/frontend/src/types.ts @@ -7,6 +7,7 @@ export enum EditorTheme { export enum GeneratedCodeConfig { HTML_TAILWIND = "html_tailwind", REACT_TAILWIND = "react_tailwind", + VUE_TAILWIND = "vue_tailwind", BOOTSTRAP = "bootstrap", IONIC_TAILWIND = "ionic_tailwind", SVG = "svg",