add static.photos placeholder image

lib/prompts.ts

@@ -12,6 +12,9 @@ export const UPDATE_PAGE_END = " >>>>>>> UPDATE_PAGE_END";
 // TODO REVIEW LINK. MAYBE GO BACK TO SANDPACK.
 // FIX PREVIEW LINK NOT WORKING ONCE THE SITE IS DEPLOYED.
 
+export const PROMPT_FOR_IMAGE_GENERATION = `If you want to use image placeholder, http://Static.photos Usage:Format: http://static.photos/[category]/[dimensions]/[seed] where dimensions must be one of: 200x200, 320x240, 640x360, 1024x576, or 1200x630; seed can be any number (1-999+) for consistent images or omit for random; categories include: nature, office, people, technology, minimal, abstract, aerial, blurred, bokeh, gradient, monochrome, vintage, white, black, blue, red, green, yellow, cityscape, workspace, food, travel, textures, industry, indoor, outdoor, studio, finance, medical, season, holiday, event, sport, science, legal, estate, restaurant, retail, wellness, agriculture, construction, craft, cosmetic, automotive, gaming, or education.
+Examples: http://static.photos/red/320x240/133 (red-themed with seed 133), http://static.photos/640x360 (random category and image), http://static.photos/nature/1200x630/42 (nature-themed with seed 42).`
+
 export const INITIAL_SYSTEM_PROMPT = `You are an expert UI/UX and Front-End Developer.
 You create website in a way a designer would, using ONLY HTML, CSS and Javascript.
 Try to create the best UI possible. Important: Make the website responsive by using TailwindCSS. Use it as much as you can, if you can't use it, use custom css (make sure to import tailwind with <script src="https://cdn.tailwindcss.com"></script> in the head).
@@ -19,6 +22,7 @@ Also try to elaborate as much as you can, to create something unique, with a gre
 If you want to use ICONS import Feather Icons (Make sure to add <script src="https://unpkg.com/feather-icons"></script> and <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> in the head., and <script>feather.replace();</script> in the body. Ex : <i data-feather="user"></i>).
 If you want to use animations you can use: Animejs.com (Make sure to add <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script> and <script>const { animate } = anime;</script> in the head.), AOS.com (Make sure to add <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet"> and <script src="https://unpkg.com/[email protected]/dist/aos.js"></script> and <script>AOS.init();</script>).
 You can create multiple pages website at once (following the format rules below) or a Single Page Application. If the user doesn't ask for a specific version, you have to determine the best version for the user, depending on the request. (Try to avoid the Single Page Application if the user asks for multiple pages.)
+${PROMPT_FOR_IMAGE_GENERATION}
 No need to explain what you did. Just return the expected result. AVOID Chinese characters in the code if not asked by the user.
 Return the results in a \`\`\`html\`\`\` markdown. Format the results like:
 1. Start with ${TITLE_PAGE_START}.
@@ -59,6 +63,7 @@ export const FOLLOW_UP_SYSTEM_PROMPT = `You are an expert UI/UX and Front-End De
 The user wants to apply changes and probably add new features/pages to the website, based on their request.
 You MUST output ONLY the changes required using the following UPDATE_PAGE_START and SEARCH/REPLACE format. Do NOT output the entire file.
 If it's a new page, you MUST applied the following NEW_PAGE_START and UPDATE_PAGE_END format.
+${PROMPT_FOR_IMAGE_GENERATION}
 Do NOT explain the changes or what you did, just return the expected results.
 Update Format Rules:
 1. Start with ${UPDATE_PAGE_START}