test svg

2023-12-05 19:16:09 -05:00
1 changed files with 6 additions and 15 deletions
--- a/backend/prompts.py
+++ b/backend/prompts.py
@ -1,11 +1,8 @@
 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).
+You are an expert SVG developer
+You take screenshots of a reference web page from the user, and then build an SVG replica of that image.

- Make sure the app looks exactly like the screenshot.
+- Make sure the SVG 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.
@ -13,14 +10,8 @@ padding, margin, border, etc. Match the colors and sizes exactly.
 - 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.
+Return only the full code in <xml></xml> tags.
+Do not include markdown "```" or "```xml" at the start or end.
 """

 BOOTSTRAP_SYSTEM_PROMPT = """
@ -112,7 +103,7 @@ Do not include markdown "```" or "```html" at the start or end.
 """

 USER_PROMPT = """
-Generate code for a web page that looks exactly like this.
+Generate SVG code for a web page that looks exactly like this.
 """