Github/screenshot-to-code
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge d8241469e1 into 67ce707c3c

Browse Source
This commit is contained in:
Carlos Ricardo Ziegler 2024-09-01 20:53:08 +02:00 committed by GitHub
commit 496e5a8629
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 110 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
backend/prompts/imported_code_prompts.py
View File

@ -55,6 +55,27 @@ Return only the full code in <html></html> tags.
Do not include markdown "```" or "```html" at the start or end. 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 "<!-- Add other navigation links as needed -->" and "<!-- ... other news items ... -->" 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 "<!-- Repeat for each news item -->" 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:
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.js"></script>
- 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: <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 inside <html></html> tags.
Do not include markdown "```" or "```html" at the start or end.
"""
IMPORTED_CODE_BOOTSTRAP_SYSTEM_PROMPT = """ IMPORTED_CODE_BOOTSTRAP_SYSTEM_PROMPT = """
You are an expert Bootstrap developer. You are an expert Bootstrap developer.
@ -146,6 +167,7 @@ IMPORTED_CODE_SYSTEM_PROMPTS = SystemPrompts(
html_tailwind=IMPORTED_CODE_TAILWIND_SYSTEM_PROMPT, html_tailwind=IMPORTED_CODE_TAILWIND_SYSTEM_PROMPT,
html_css=IMPORTED_CODE_HTML_CSS_SYSTEM_PROMPT, html_css=IMPORTED_CODE_HTML_CSS_SYSTEM_PROMPT,
react_tailwind=IMPORTED_CODE_REACT_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, bootstrap=IMPORTED_CODE_BOOTSTRAP_SYSTEM_PROMPT,
ionic_tailwind=IMPORTED_CODE_IONIC_TAILWIND_SYSTEM_PROMPT, ionic_tailwind=IMPORTED_CODE_IONIC_TAILWIND_SYSTEM_PROMPT,
vue_tailwind=IMPORTED_CODE_VUE_TAILWIND_SYSTEM_PROMPT, vue_tailwind=IMPORTED_CODE_VUE_TAILWIND_SYSTEM_PROMPT,

27
backend/prompts/screenshot_system_prompts.py
View File

@ -102,6 +102,32 @@ In terms of libraries,
Return only the full code in <html></html> tags. Return only the full code in <html></html> tags.
Do not include markdown "```" or "```html" at the start or end. 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 "<!-- Add other navigation links as needed -->" and "<!-- ... other news items ... -->" 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 "<!-- Repeat for each news item -->" 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:
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.js"></script>
- 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: <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 inside <html></html> tags.
Do not include markdown "```" or "```html" at the start or end.
""" """
IONIC_TAILWIND_SYSTEM_PROMPT = """ IONIC_TAILWIND_SYSTEM_PROMPT = """
@ -203,6 +229,7 @@ SYSTEM_PROMPTS = SystemPrompts(
html_css=HTML_CSS_SYSTEM_PROMPT, html_css=HTML_CSS_SYSTEM_PROMPT,
html_tailwind=HTML_TAILWIND_SYSTEM_PROMPT, html_tailwind=HTML_TAILWIND_SYSTEM_PROMPT,
react_tailwind=REACT_TAILWIND_SYSTEM_PROMPT, react_tailwind=REACT_TAILWIND_SYSTEM_PROMPT,
react_css=REACT_CSS_SYSTEM_PROMPT,
bootstrap=BOOTSTRAP_SYSTEM_PROMPT, bootstrap=BOOTSTRAP_SYSTEM_PROMPT,
ionic_tailwind=IONIC_TAILWIND_SYSTEM_PROMPT, ionic_tailwind=IONIC_TAILWIND_SYSTEM_PROMPT,
vue_tailwind=VUE_TAILWIND_SYSTEM_PROMPT, vue_tailwind=VUE_TAILWIND_SYSTEM_PROMPT,

57
backend/prompts/test_prompts.py
View File

@ -104,6 +104,27 @@ Return only the full code in <html></html> tags.
Do not include markdown "```" or "```html" at the start or end. 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 "<!-- Add other navigation links as needed -->" and "<!-- ... other news items ... -->" 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 "<!-- Repeat for each news item -->" 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:
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.js"></script>
- 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: <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 inside <html></html> tags.
Do not include markdown "```" or "```html" at the start or end.
"""
IONIC_TAILWIND_SYSTEM_PROMPT = """ IONIC_TAILWIND_SYSTEM_PROMPT = """
You are an expert Ionic/Tailwind developer You are an expert Ionic/Tailwind developer
You take screenshots of a reference web page from the user, and then build single page apps You take screenshots of a reference web page from the user, and then build single page apps
@ -251,6 +272,27 @@ Return only the full code in <html></html> tags.
Do not include markdown "```" or "```html" at the start or end. 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 "<!-- Add other navigation links as needed -->" and "<!-- ... other news items ... -->" 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 "<!-- Repeat for each news item -->" 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:
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.js"></script>
- 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: <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 inside <html></html> tags.
Do not include markdown "```" or "```html" at the start or end.
"""
IMPORTED_CODE_BOOTSTRAP_SYSTEM_PROMPT = """ IMPORTED_CODE_BOOTSTRAP_SYSTEM_PROMPT = """
You are an expert Bootstrap developer. You are an expert Bootstrap developer.
@ -367,6 +409,12 @@ def test_prompts():
assert react_tailwind_prompt[0].get("content") == REACT_TAILWIND_SYSTEM_PROMPT assert react_tailwind_prompt[0].get("content") == REACT_TAILWIND_SYSTEM_PROMPT
assert react_tailwind_prompt[1]["content"][2]["text"] == USER_PROMPT # type: ignore 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( bootstrap_prompt = assemble_prompt(
"image_data_url", "bootstrap", "result_image_data_url" "image_data_url", "bootstrap", "result_image_data_url"
) )
@ -418,6 +466,15 @@ def test_imported_code_prompts():
] ]
assert react_tailwind_prompt == expected_react_tailwind_prompt 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( bootstrap_prompt = assemble_imported_code_prompt(
"code", "bootstrap", Llm.GPT_4O_2024_05_13 "code", "bootstrap", Llm.GPT_4O_2024_05_13
) )

2
backend/prompts/types.py
View File

@ -5,6 +5,7 @@ class SystemPrompts(TypedDict):
html_css: str html_css: str
html_tailwind: str html_tailwind: str
react_tailwind: str react_tailwind: str
react_css: str
bootstrap: str bootstrap: str
ionic_tailwind: str ionic_tailwind: str
vue_tailwind: str vue_tailwind: str
@ -15,6 +16,7 @@ Stack = Literal[
"html_css", "html_css",
"html_tailwind", "html_tailwind",
"react_tailwind", "react_tailwind",
"react_css",
"bootstrap", "bootstrap",
"ionic_tailwind", "ionic_tailwind",
"vue_tailwind", "vue_tailwind",

2
frontend/src/lib/stacks.ts
View File

@ -4,6 +4,7 @@ export enum Stack {
HTML_TAILWIND = "html_tailwind", HTML_TAILWIND = "html_tailwind",
HTML_CSS = "html_css", HTML_CSS = "html_css",
REACT_TAILWIND = "react_tailwind", REACT_TAILWIND = "react_tailwind",
REACT_CSS = "react_css",
BOOTSTRAP = "bootstrap", BOOTSTRAP = "bootstrap",
VUE_TAILWIND = "vue_tailwind", VUE_TAILWIND = "vue_tailwind",
IONIC_TAILWIND = "ionic_tailwind", IONIC_TAILWIND = "ionic_tailwind",
@ -16,6 +17,7 @@ export const STACK_DESCRIPTIONS: {
html_css: { components: ["HTML", "CSS"], inBeta: false }, html_css: { components: ["HTML", "CSS"], inBeta: false },
html_tailwind: { components: ["HTML", "Tailwind"], inBeta: false }, html_tailwind: { components: ["HTML", "Tailwind"], inBeta: false },
react_tailwind: { components: ["React", "Tailwind"], inBeta: false }, react_tailwind: { components: ["React", "Tailwind"], inBeta: false },
react_css: { components: ["React", "CSS"], inBeta: false },
bootstrap: { components: ["Bootstrap"], inBeta: false }, bootstrap: { components: ["Bootstrap"], inBeta: false },
vue_tailwind: { components: ["Vue", "Tailwind"], inBeta: true }, vue_tailwind: { components: ["Vue", "Tailwind"], inBeta: true },
ionic_tailwind: { components: ["Ionic", "Tailwind"], inBeta: true }, ionic_tailwind: { components: ["Ionic", "Tailwind"], inBeta: true },