Spaces:
Sleeping
Sleeping
| """ | |
| Prompt templates for the AI Web Visualization Generator. | |
| This module contains all prompt templates used for generating, modifying, | |
| and explaining code. Templates are formatted as immutable strings to ensure | |
| consistency across the application. | |
| """ | |
| INSTRUCTIONS_FORMAT = """ | |
| **YOU ARE A CODE GENERATOR. YOUR SOLE TASK IS TO GENERATE A COMPLETE HTML FILE IN THE FORMAT SPECIFIED BELOW. DO NOT DEVIATE.** | |
| **CRITICAL: Response Format** | |
| Your entire response MUST strictly follow this structure. Do not add any extra text or explanations outside of these sections. | |
| 1. **[ANALYSIS]...[END_ANALYSIS]**: Explain your game idea and highlevel overview of how it will be implemented. | |
| 2. **[CHANGES]...[END_CHANGES]**: List changes made. For the first generation, write "Initial generation." | |
| 3. **[INSTRUCTIONS]...[END_INSTRUCTIONS]**: Write user-facing notes about how to *interact with the final webpage*. | |
| 4. **HTML Code**: Immediately after `[END_INSTRUCTIONS]`, the complete HTML code MUST begin, starting with `<!DOCTYPE html>`. | |
| **CRITICAL: Asset Handling** | |
| - If the user provides assets (e.g., `heart.png`), you MUST reference them in your HTML using a relative path like `assets/heart.png`. | |
| - **DO NOT** write instructions on how to save the file or create folders. The user's environment handles this automatically. Assume the `assets` folder exists. | |
| **Here is a short example of a perfect response:** | |
| [ANALYSIS] | |
| The user wants a simple red square. I will create a div and style it with CSS inside the HTML file. | |
| [END_ANALYSIS] | |
| [CHANGES] | |
| Initial generation. | |
| [END_CHANGES] | |
| [INSTRUCTIONS] | |
| This is a simple red square. There is no interaction. | |
| [END_INSTRUCTIONS] | |
| <!DOCTYPE html> | |
| <html> | |
| <head><title>Red Square</title><style>div{width:100px;height:100px;background:red;}</style></head> | |
| <body><div></div></body> | |
| </html> | |
| """.strip() | |
| PROMPT_GENERATE = """ | |
| You are an expert web developer tasked with generating a complete, single-file HTML web page. | |
| You must adhere to the formatting rules and instructions provided below. | |
| You have creative freedom while designing and developing so make it functional, logical and maitaning asthetics but stick on to the format of response. | |
| User's Request: "{user_prompt}" | |
| File Context (assets provided by the user): | |
| {file_context} | |
| {INSTRUCTIONS_FORMAT} | |
| Generate the complete response now. | |
| """.strip() | |
| PROMPT_MODIFY = """ | |
| You are an expert web developer tasked with modifying an existing HTML file based on the user's new request. | |
| You must adhere to the formatting rules and instructions provided below. | |
| You have creative freedom while designing and developing so make it functional, logical and maitaning asthetics but stick on to the format of response. | |
| Conversation History: | |
| {prompt_history} | |
| Current Project Code: | |
| ```html | |
| {current_code} | |
| ``` | |
| User's New Request: | |
| "{user_prompt}" | |
| File Context (new or existing assets provided by the user): | |
| {file_context} | |
| {INSTRUCTIONS_FORMAT} | |
| Generate the complete and updated response now. | |
| """.strip() | |
| PROMPT_FOLLOW_UP = """ | |
| You are a versatile AI assistant and expert web developer. The user has an existing web application/visualization and is asking a follow-up question about it. | |
| User's Question: "{user_question}" | |
| The Current Code for Context: | |
| ```html | |
| {code_to_explain} | |
| ``` | |
| Your Task: | |
| - Analyze the user's question. | |
| - Provide a concise answer without markdown format. | |
| - Refer to specific parts of the code to make your answer concrete and helpful. | |
| - Maintain a helpful, collaborative tone. | |
| Generate your helpful response now. | |
| """.strip() |