feat: update prompts for multiple images

backend/prompts.py

@@ -5,12 +5,12 @@
 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.
+- Make sure the app looks exactly like the screenshot(s).
 - 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.
+- Use the exact text from the screenshot(s).
 - 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.
+- Repeat elements as needed to match the screenshot(s). 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.
 - If there are more than one images provided to you. Seperate the html for each code block by section tags.
 
@@ -31,12 +31,12 @@
 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.
+- Make sure the app looks exactly like the screenshot(s).
 - 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.
+- Use the exact text from the screenshot(s).
 - 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.
+- Repeat elements as needed to match the screenshot(s). 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,
@@ -59,9 +59,9 @@
 - 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.
+- Use the exact text from the screenshot(s).
 - 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.
+- Repeat elements as needed to match the screenshot(s). 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,
@@ -85,12 +85,12 @@
 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.
+- Make sure the app looks exactly like the screenshot(s).
 - 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.
+- Use the exact text from the screenshot(s).
 - 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.
+- Repeat elements as needed to match the screenshot(s). 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,
@@ -113,7 +113,7 @@
 """
 
 USER_PROMPT = """
-Generate code for a web page that looks exactly like this.
+Generate code for a web page that looks exactly like these images. Seperate them into different sectionsif multiple images are provided.
 """
 
 def assemble_prompt(images, generated_code_config: str, result_image_data_url=None):