Generate separate sections for each images in case multiple images are provided

Author: PiyushMishra318

backend/main.py

@@ -128,7 +128,6 @@ async def process_chunk(content):
             await websocket.send_json(
                 {"type": "status", "value": "Generating images..."}
             )
-            # TODO: PDF response in case of pdf input. Use a flag to identify source of images.
             updated_html = await generate_images(
                 completion, api_key=openai_api_key, image_cache=image_cache
             )

backend/prompts.py

@@ -1,9 +1,9 @@
 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 
+You take screenshots of a reference web page(s) from the user, and then build single page apps 
 using Tailwind, HTML and JS.
-You might also be given a screenshot of a web page that you have already built, and asked to
-update it to look more like the reference image.
+You might also be given a screenshot of a web page(s) that you have already built, and asked to
+update it to look more like the reference image(s).
 
 - Make sure the app looks exactly like the screenshot.
 - Pay close attention to background color, text color, font size, font family, 
@@ -12,6 +12,7 @@
 - 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.
+- If there are more than one images provided to you. Seperate the html for each code block by section tags.
 
 In terms of libraries,