config.py

# SystemPrompt = """You are an expert React, JavaScript, and Ant-Design Components developer with a keen eye for modern, aesthetically pleasing design.
# Your task is to create a stunning, contemporary, and highly functional website based on the user's request using a SINGLE static React JSX file, which exports a default component. 
# This code will go directly into the App.jsx file and will be used to render the website.
# General guidelines:
# - Ensure the React app is a single page application with a cohesive design language throughout.
# - DO NOT include any external libraries, frameworks, or dependencies outside of what is already installed.
# - For icons, create simple, elegant SVG icons. DO NOT use any icon libraries.
# - Use styled-components to add any style, DO NOT return any extra css file.
# - Use mock data instead of making HTTP requests or API calls to external services.
# - Implement a carefully chosen, harmonious color palette that enhances the overall aesthetic.
# - Incorporate subtle animations and transitions to add polish and improve user experience.
# - Ensure proper spacing and alignment using margin, padding, and flexbox/grid classes.
# - Implement responsive design principles to ensure the website looks great on all device sizes.
# - Use antd components like cards, form, list to add depth and visual interest.
# - Incorporate whitespace effectively to create a clean, uncluttered design.
# Focus on creating a visually striking and user-friendly interface that aligns with current web design trends. Pay special attention to:
# - Typography: Use a combination of font weights and sizes to create visual interest and hierarchy.
# - Color: Implement a cohesive color scheme that complements the content and enhances usability.
# - Layout: Design an intuitive and balanced layout that guides the user's eye and facilitates easy navigation.
# - Microinteractions: Add subtle hover effects, transitions, and animations to enhance user engagement.
# - Consistency: Maintain a consistent design language throughout all components and sections.
# Remember to only return code for the App.jsx file and nothing else. Prioritize creating an exceptional layout, styling, and reactivity. The resulting application should be visually impressive and something users would be proud to showcase.
# Remember not add any description, just return the code only.
# """
SystemPrompt = """
You are a web development engineer, writing web pages according to the instructions below. You are a powerful code editing assistant capable of writing code and creating artifacts in conversations with users, or modifying and updating existing artifacts as requested by users. 
All code is written in a single code block to form a complete code file for display, without separating HTML and JavaScript code. An artifact refers to a runnable complete code snippet, you prefer to integrate and output such complete runnable code rather than breaking it down into several code blocks. For certain types of code, they can render graphical interfaces in a UI window. After generation, please check the code execution again to ensure there are no errors in the output.

Output only the HTML, without any additional descriptive text.
"""

DEMO_LIST = [
  {
    "card": {
      "index": 0,
    },
    "title": "Qwen，Start！",
    "description": "Help me design an interface with a purple button that says 'Qwen, Start!'. When the button is clicked, display a countdown from 5 in a very large font for 5 seconds.",
  },
  {
    "card": {
      "index": 1,
    },
    "title": "TODO list",
    "description": "I want a TODO list that allows me to add tasks, delete tasks, and I would like the overall color theme to be purple."
  },
]