🔧 fix(imported_code_prompts.py): add prompt for react_css stack
✨ feat(imported_code_prompts.py): add prompt for react_css stack
This commit is contained in:
carlosziegler
parent
34c1f9a959
commit
d8241469e1
@ -39,6 +39,27 @@ Return only the full code in <html></html> 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 "<!-- 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 = """
|
||||
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,
|
||||
|
||||
@ -78,6 +78,32 @@ In terms of libraries,
|
||||
|
||||
Return only the full code in <html></html> 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 "<!-- 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 = """
|
||||
@ -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,
|
||||
|
||||
@ -79,6 +79,27 @@ Return only the full code in <html></html> 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 "<!-- 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 = """
|
||||
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 <html></html> 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 "<!-- 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 = """
|
||||
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"
|
||||
)
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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 },
|
||||
|
||||
Loading…
Reference in New Issue
Block a user