Spaces:
Running
Running
| DEFAULT_PROMPTS = [ | |
| { | |
| "label": "🤔 Logical Reasoning", | |
| "children": [ | |
| { | |
| "description": "A cat is lying on a blanket because it is warm. What does 'it' refer to in this sentence?" | |
| }, | |
| { | |
| "description": "Snowflake : white'' - Which of the following groups of words has a relationship most similar to the relationship in the above word group? [ ''Doctor : learned'', ''Woman : gentle'', ''River : flowing'', ''Peony : wealth'' ]" | |
| } | |
| ] | |
| }, | |
| { | |
| "label": "📚 Knowledge Q&A", | |
| "children": [ | |
| { | |
| "description": "Why are most manhole covers round?" | |
| }, | |
| { | |
| "description": "What is the shortest distance between the United States and Russia?" | |
| } | |
| ] | |
| } | |
| ] | |
| DEFAULT_CODE = { | |
| "./index.html": """ | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| </head> | |
| <body> | |
| <h1>Hello, World!</h1> | |
| </body> | |
| </html> | |
| """ | |
| } | |
| 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. Make the UI looks modern and beautiful. | |
| """ | |
| EXAMPLES = { | |
| "UI Components": [ | |
| { | |
| "title": "🔄 3D Flipping Card", | |
| "description": "Create a 3D flipping card component that flips on hover. Include front and back content. Use only HTML and CSS (no JS). Make the flip smooth and realistic." | |
| }, | |
| { | |
| "title": "⚡ SVG Loading Animation", | |
| "description": "Design an SVG dynamic loading animation with abstract style (e.g., rotating spinner, pulse dots) for web page loading status indication" | |
| }, | |
| { | |
| "title": "✨ Particle Background", | |
| "description": "Create an HTML page with a canvas-based animated particle background. The particles should move smoothly and connect when close. Add a central heading text over the canvas" | |
| }, | |
| { | |
| "title": "🌈 Colorful Gradient Background", | |
| "description": "Create an HTML page with a gradient background that transitions smoothly between multiple colors. Add a central heading text over the gradient" | |
| } | |
| ], | |
| "Games & Visualizations": [ | |
| { | |
| "title": "🧩 Maze Generator and Pathfinding Visualizer", | |
| "description": "Create a maze generator and pathfinding visualizer. Randomly generate a maze and visualize A* algorithm solving it step by step. Use canvas and animations. Make it visually appealing." | |
| }, | |
| { | |
| "title": "💥 Particle Explosion Effect", | |
| "description": "Implement a particle explosion effect when the user clicks anywhere on the page. Use canvas and JavaScript to animate colorful particles that fade out." | |
| }, | |
| { | |
| "title": "⌨️ Typing Speed Game", | |
| "description": "Build a typing speed test web app. Randomly show a sentence, and track the user's typing speed in WPM (words per minute). Provide live feedback with colors and accuracy. Make it visually appealing." | |
| }, | |
| ], | |
| "Interactive Apps": [ | |
| { | |
| "title": "📋 TODO list", | |
| "description": "Create a modern, interactive to-do list web app. It should allow users to add and remove items. Use beautiful styling and animations." | |
| }, | |
| { | |
| "title": "📝 Sticky Note Wall", | |
| "description": "Create a sticky note wall where users can create, edit, drag, and delete colorful sticky notes. Make it visually appealing" | |
| }, | |
| { | |
| "title": "📱 Liquid Glass Notification Panel", | |
| "description": "Create a mobile-style UI using HTML, CSS, and JavaScript: a home screen with app icons and a pull-down notification panel. The panel should feature a liquid glass (frosted glass) visual effect when pulled down." | |
| }, | |
| { | |
| "title": "💰 Personal Finance Tracker", | |
| "description": "Create a personal finance tracker with user input, and visualize income and expenses using animated pie and bar charts. Use modern, responsive design in a single HTML file." | |
| } | |
| ], | |
| "Tools & Editors": [ | |
| { | |
| "title": "📝 Markdown Editor with Preview", | |
| "description": "Develop a modern markdown editor with real-time preview. Use a split pane layout for input and output, support bold, italics, headers, lists, links, images, etc. No external libraries." | |
| }, | |
| { | |
| "title": "🖼️ Image Filter Tool", | |
| "description": "Create an image filter tool where users can upload an image and apply filters like grayscale, blur, brightness, contrast, etc. Show real-time preview." | |
| } | |
| ] | |
| } |