64 lines
3.7 KiB
Python
64 lines
3.7 KiB
Python
from prompts import assemble_prompt
|
|
|
|
TAILWIND_SYSTEM_PROMPT = """
|
|
You are an expert Tailwind developer
|
|
You take screenshots of a reference web page from the user, and then build single page apps
|
|
using Tailwind, HTML and JS.
|
|
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 this script to include Tailwind: <script src="https://cdn.tailwindcss.com"></script>
|
|
- 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 in <html></html> tags.
|
|
Do not include markdown "```" or "```html" at the start or end.
|
|
"""
|
|
|
|
BOOTSTRAP_SYSTEM_PROMPT = """
|
|
You are an expert Bootstrap developer
|
|
You take screenshots of a reference web page from the user, and then build single page apps
|
|
using Bootstrap, HTML and JS.
|
|
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 this script to include Bootstrap: <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
|
|
- 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 in <html></html> tags.
|
|
Do not include markdown "```" or "```html" at the start or end.
|
|
"""
|
|
|
|
|
|
def test_prompts():
|
|
tailwind_prompt = assemble_prompt(
|
|
"image_data_url", {"css": "tailwind"}, "result_image_data_url"
|
|
)
|
|
assert tailwind_prompt[0]["content"] == TAILWIND_SYSTEM_PROMPT
|
|
|
|
bootstrap_prompt = assemble_prompt(
|
|
"image_data_url", {"css": "bootstrap"}, "result_image_data_url"
|
|
)
|
|
assert bootstrap_prompt[0]["content"] == BOOTSTRAP_SYSTEM_PROMPT
|