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

Author: PiyushMishra318

backend/main.py

@@ -236,7 +236,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,

backend/prompts.py

@@ -1,6 +1,6 @@
 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 
+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(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).
@@ -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,