From d8241469e114fa3c28018555a7070c6d4d44c81c Mon Sep 17 00:00:00 2001 From: carlosziegler Date: Tue, 6 Feb 2024 23:10:50 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20fix(imported=5Fcode=5Fprompts.py?= =?UTF-8?q?):=20add=20prompt=20for=20react=5Fcss=20stack=20=E2=9C=A8=20fea?= =?UTF-8?q?t(imported=5Fcode=5Fprompts.py):=20add=20prompt=20for=20react?= =?UTF-8?q?=5Fcss=20stack?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- backend/prompts/imported_code_prompts.py | 22 ++++++++ backend/prompts/screenshot_system_prompts.py | 27 ++++++++++ backend/prompts/test_prompts.py | 57 ++++++++++++++++++++ backend/prompts/types.py | 2 + frontend/src/lib/stacks.ts | 2 + 5 files changed, 110 insertions(+) diff --git a/backend/prompts/imported_code_prompts.py b/backend/prompts/imported_code_prompts.py index 8babf78..7467ca2 100644 --- a/backend/prompts/imported_code_prompts.py +++ b/backend/prompts/imported_code_prompts.py @@ -39,6 +39,27 @@ Return only the full code in tags. Do not include markdown "```" or "```html" at the start or end. """ +IMPORTED_CODE_REACT_CSS_SYSTEM_PROMPT = """ +You are an experienced React developer focusing on CSS Modules. + +- 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. For example, if there are 15 items, the code should include 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. + +In terms of libraries, + +- Use these scripts to include React so that it can run on a standalone page: + + + +- Instead of using Tailwind, you will apply styles using CSS Modules. Create `.module.css` files for your components and import them using module syntax, for example: `import styles from './MyComponent.module.css';` +- You can use Google Fonts +- Font Awesome for icons: + +Return only the full code inside tags. +Do not include markdown "```" or "```html" at the start or end. +""" + IMPORTED_CODE_BOOTSTRAP_SYSTEM_PROMPT = """ You are an expert Bootstrap developer. @@ -129,6 +150,7 @@ Do not include markdown "```" or "```svg" at the start or end. IMPORTED_CODE_SYSTEM_PROMPTS = SystemPrompts( html_tailwind=IMPORTED_CODE_TAILWIND_SYSTEM_PROMPT, react_tailwind=IMPORTED_CODE_REACT_TAILWIND_SYSTEM_PROMPT, + react_css=IMPORTED_CODE_REACT_CSS_SYSTEM_PROMPT, bootstrap=IMPORTED_CODE_BOOTSTRAP_SYSTEM_PROMPT, ionic_tailwind=IMPORTED_CODE_IONIC_TAILWIND_SYSTEM_PROMPT, vue_tailwind=IMPORTED_CODE_VUE_TAILWIND_SYSTEM_PROMPT, diff --git a/backend/prompts/screenshot_system_prompts.py b/backend/prompts/screenshot_system_prompts.py index fca91ba..011d403 100644 --- a/backend/prompts/screenshot_system_prompts.py +++ b/backend/prompts/screenshot_system_prompts.py @@ -78,6 +78,32 @@ In terms of libraries, Return only the full code in tags. Do not include markdown "```" or "```html" at the start or end. +""" +REACT_CSS_SYSTEM_PROMPT = """ +You are an expert React developer focusing on CSS Modules. +You take screenshots of a reference web page from the user, and then build single-page apps using React and CSS Modules. +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. + +In terms of libraries, + +- Use these scripts to include React so that it can run on a standalone page: + + + +- Instead of using Tailwind, you will apply styles using CSS Modules. Create `.css` files for your components and import them using module syntax, for example, `import styles from './MyComponent.module.css';` +- You can use Google Fonts. +- Font Awesome for icons: + +Return only the full code inside tags. +Do not include markdown "```" or "```html" at the start or end. + """ IONIC_TAILWIND_SYSTEM_PROMPT = """ @@ -178,6 +204,7 @@ Do not include markdown "```" or "```svg" at the start or end. SYSTEM_PROMPTS = SystemPrompts( html_tailwind=HTML_TAILWIND_SYSTEM_PROMPT, react_tailwind=REACT_TAILWIND_SYSTEM_PROMPT, + react_css=REACT_CSS_SYSTEM_PROMPT, bootstrap=BOOTSTRAP_SYSTEM_PROMPT, ionic_tailwind=IONIC_TAILWIND_SYSTEM_PROMPT, vue_tailwind=VUE_TAILWIND_SYSTEM_PROMPT, diff --git a/backend/prompts/test_prompts.py b/backend/prompts/test_prompts.py index 9e60410..1d05bdb 100644 --- a/backend/prompts/test_prompts.py +++ b/backend/prompts/test_prompts.py @@ -79,6 +79,27 @@ Return only the full code in tags. Do not include markdown "```" or "```html" at the start or end. """ +REACT_CSS_SYSTEM_PROMPT = """ +You are an experienced React developer focusing on CSS Modules. + +- 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. For example, if there are 15 items, the code should include 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. + +In terms of libraries, + +- Use these scripts to include React so that it can run on a standalone page: + + + +- Instead of using Tailwind, you will apply styles using CSS Modules. Create `.module.css` files for your components and import them using module syntax, for example: `import styles from './MyComponent.module.css';` +- You can use Google Fonts +- Font Awesome for icons: + +Return only the full code inside tags. +Do not include markdown "```" or "```html" at the start or end. +""" + IONIC_TAILWIND_SYSTEM_PROMPT = """ You are an expert Ionic/Tailwind developer You take screenshots of a reference web page from the user, and then build single page apps @@ -210,6 +231,27 @@ Return only the full code in tags. Do not include markdown "```" or "```html" at the start or end. """ +IMPORTED_CODE_REACT_CSS_SYSTEM_PROMPT = """ +You are an experienced React developer focusing on CSS Modules. + +- 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. For example, if there are 15 items, the code should include 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. + +In terms of libraries, + +- Use these scripts to include React so that it can run on a standalone page: + + + +- Instead of using Tailwind, you will apply styles using CSS Modules. Create `.module.css` files for your components and import them using module syntax, for example: `import styles from './MyComponent.module.css';` +- You can use Google Fonts +- Font Awesome for icons: + +Return only the full code inside tags. +Do not include markdown "```" or "```html" at the start or end. +""" + IMPORTED_CODE_BOOTSTRAP_SYSTEM_PROMPT = """ You are an expert Bootstrap developer. @@ -320,6 +362,12 @@ def test_prompts(): assert react_tailwind_prompt[0]["content"] == REACT_TAILWIND_SYSTEM_PROMPT assert react_tailwind_prompt[1]["content"][2]["text"] == USER_PROMPT # type: ignore + react_css_prompt = assemble_prompt( + "image_data_url", "react_css", "result_image_data_url" + ) + assert react_css_prompt[0]["content"] == REACT_CSS_SYSTEM_PROMPT + assert react_css_prompt[1]["content"][2]["text"] == USER_PROMPT # type: ignore + bootstrap_prompt = assemble_prompt( "image_data_url", "bootstrap", "result_image_data_url" ) @@ -362,6 +410,15 @@ def test_imported_code_prompts(): ] assert react_tailwind_prompt == expected_react_tailwind_prompt + react_css_prompt = assemble_imported_code_prompt( + "code", "react_css", "result_image_data_url" + ) + expected_react_css_prompt = [ + {"role": "system", "content": IMPORTED_CODE_REACT_CSS_SYSTEM_PROMPT}, + {"role": "user", "content": "Here is the code of the app: code"}, + ] + assert react_css_prompt == expected_react_css_prompt + bootstrap_prompt = assemble_imported_code_prompt( "code", "bootstrap", "result_image_data_url" ) diff --git a/backend/prompts/types.py b/backend/prompts/types.py index 9068443..94ef727 100644 --- a/backend/prompts/types.py +++ b/backend/prompts/types.py @@ -4,6 +4,7 @@ from typing import Literal, TypedDict class SystemPrompts(TypedDict): html_tailwind: str react_tailwind: str + react_css: str bootstrap: str ionic_tailwind: str vue_tailwind: str @@ -13,6 +14,7 @@ class SystemPrompts(TypedDict): Stack = Literal[ "html_tailwind", "react_tailwind", + "react_css", "bootstrap", "ionic_tailwind", "vue_tailwind", diff --git a/frontend/src/lib/stacks.ts b/frontend/src/lib/stacks.ts index b8b372e..78c4e84 100644 --- a/frontend/src/lib/stacks.ts +++ b/frontend/src/lib/stacks.ts @@ -2,6 +2,7 @@ export enum Stack { HTML_TAILWIND = "html_tailwind", REACT_TAILWIND = "react_tailwind", + REACT_CSS = "react_css", BOOTSTRAP = "bootstrap", VUE_TAILWIND = "vue_tailwind", IONIC_TAILWIND = "ionic_tailwind", @@ -13,6 +14,7 @@ export const STACK_DESCRIPTIONS: { } = { html_tailwind: { components: ["HTML", "Tailwind"], inBeta: false }, react_tailwind: { components: ["React", "Tailwind"], inBeta: false }, + react_css: { components: ["React", "CSS"], inBeta: false }, bootstrap: { components: ["Bootstrap"], inBeta: false }, vue_tailwind: { components: ["Vue", "Tailwind"], inBeta: true }, ionic_tailwind: { components: ["Ionic", "Tailwind"], inBeta: true },