Spaces:
Running
Running
File size: 8,883 Bytes
b453cca |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 |
from config import STATIC_PAGE, REACT_TAILWIND, REACT_TAILWIND_CHARTJS, REACT_THREE_FIBER, OLD_SCHOOL_HTML
def get_framework_system_prompt(framework_type, color_palette=None):
"""
Returns the system prompt specific to the selected framework.
Optionally incorporates specific color palette instructions directly into the system prompt.
"""
base_role = "You are an expert front-end developer."
# Construct dynamic palette instruction
palette_instruction = "**Color Palette:** If a color palette is provided in the user prompt, **YOU MUST** use those specific hex codes."
if color_palette:
palette_instruction = f"**Color Palette (MANDATORY):** You have been assigned the following color palette. **YOU MUST** use these specific hex codes for the corresponding roles:\n {color_palette}\n Use Tailwind's arbitrary value syntax (e.g., `bg-[#FF5733]`) to apply them."
if framework_type == REACT_TAILWIND:
return f"""
{base_role}
Create a single-file HTML application using **React** and **Tailwind CSS**.
**Technical Constraints & Libraries:**
1. **Library Loading:** Use unpkg/cdnjs for imports.
* React: `https://unpkg.com/react@18/umd/react.development.js`
* ReactDOM: `https://unpkg.com/react-dom@18/umd/react-dom.development.js`
* Babel: `https://unpkg.com/@babel/standalone/babel.min.js`
* Tailwind: `https://cdn.tailwindcss.com`
2. **Structure:**
* Load Tailwind via script tag.
* Load React/ReactDOM/Babel via script tags.
* Write your React components inside `<script type="text/babel">`.
* Mount the main component to a root div.
3. **Visual Style & Theming:**
* **Strictly follow** any "Visual Style Requirements" (Decoration, Theme) provided in the user prompt.
* {palette_instruction}
* **Decoration:** Reflect the requested decoration style (e.g., rounded corners, shadows, borders) using Tailwind classes.
4. **Common Pitfalls to Avoid:**
* Do NOT use `import` statements (ES modules) for React in this single-file setup. Use the global `React` and `ReactDOM` variables.
* Ensure valid JSX syntax.
* Remember to use `className` instead of `class`.
* Close all self-closing tags (e.g., `<img />`, `<br />`).
**Output Format:**
Return ONLY the raw HTML code. No markdown explanations.
"""
elif framework_type == REACT_TAILWIND_CHARTJS:
# Specific instruction for Chart.js palette usage
chart_palette_instr = palette_instruction
if color_palette:
chart_palette_instr = f"**Color Palette (MANDATORY):** You have been assigned the following color palette:\n {color_palette}\n **CRITICAL:** Apply these exact colors to your Chart.js `backgroundColor` and `borderColor` datasets, and use them for UI elements via Tailwind arbitrary values."
return f"""
{base_role}
Create a single-file HTML application using **React**, **Tailwind CSS**, and **Chart.js** for data visualization.
**Technical Constraints & Libraries:**
1. **Library Loading:** Use unpkg/cdnjs for imports.
* React: `https://unpkg.com/react@18/umd/react.development.js`
* ReactDOM: `https://unpkg.com/react-dom@18/umd/react-dom.development.js`
* Babel: `https://unpkg.com/@babel/standalone/babel.min.js`
* Tailwind: `https://cdn.tailwindcss.com`
* Chart.js: `https://cdn.jsdelivr.net/npm/chart.js`
2. **Structure:**
* Load Tailwind via script tag.
* Load React/ReactDOM/Babel via script tags.
* Load Chart.js via script tag (before your React script that uses it).
* Write your React components inside `<script type="text/babel">`.
* Mount the main component to a root div.
* Use a `<canvas>` element for Chart.js charts and get its 2D context within a React ref or a direct DOM query in `useEffect`.
3. **Visual Style & Theming (CRITICAL):**
* **Strictly follow** any "Visual Style Requirements" provided in the user prompt.
* {chart_palette_instr}
* **Decoration:** Apply the requested decoration style using appropriate Tailwind utilities.
4. **Common Pitfalls to Avoid:**
* Do NOT use `import` statements (ES modules) for React/ReactDOM/Babel/Chart.js in this single-file setup. Use the global `React`, `ReactDOM`, `Chart` variables.
* Ensure valid JSX syntax.
* Remember to use `className` instead of `class`.
* Close all self-closing tags.
* For Chart.js, ensure the canvas context is properly obtained (`canvasRef.current.getContext('2d')`).
* Manage Chart.js instances within React's `useEffect` hook: create the chart on mount and destroy it on unmount to prevent memory leaks.
* Ensure Chart.js data and options objects are correctly structured.
**Output Format:**
Return ONLY the raw HTML code. No markdown explanations.
"""
elif framework_type == REACT_THREE_FIBER:
r3f_palette_instr = palette_instruction
if color_palette:
r3f_palette_instr = f"**Color Palette (MANDATORY):** You have been assigned the following color palette:\n {color_palette}\n Use these hex codes for 3D materials (`color='#hex'`), lights, background, and UI overlays."
return f"""
{base_role}
Create a 3D interactive scene using **React Three Fiber (R3F)**, **React Drei**, and **Tailwind CSS**.
**Technical Constraints & Libraries:**
1. **Library Loading:** Use ES Modules via `importmap` for R3F, as it usually requires a module system.
* Add an `<script type="importmap">` block defining 'react', 'react-dom/client', 'three', '@react-three/fiber', '@react-three/drei'.
* Use `https://esm.sh/` for reliable module imports.
* Example: "react": "https://esm.sh/react@18.2.0"
* Load Tailwind CSS via `https://cdn.tailwindcss.com`.
2. **Structure:**
* Use `<script type="module">` for your React logic.
* Import specific components from the libraries.
* Setup a `<Canvas>` from `@react-three/fiber`.
3. **Visual Style & Theming:**
* **Strictly follow** any "Visual Style Requirements" provided in the user prompt.
* {r3f_palette_instr}
4. **Common Pitfalls to Avoid:**
* Ensure `three` version compatibility with `@react-three/fiber`.
* Do not mix UMD globals with ES module imports. Stick to the module approach for this stack.
* Set the canvas height (e.g., `h-screen` or fixed height) via Tailwind, otherwise it might be 0px.
**Output Format:**
Return ONLY the raw HTML code. No markdown explanations.
"""
elif framework_type == OLD_SCHOOL_HTML:
old_school_palette_instr = "**Color Palette:** If a palette is provided, use those specific hex codes for `bgcolor` attributes, `font color`, or inline styles."
if color_palette:
old_school_palette_instr = f"**Color Palette (MANDATORY):** You MUST use these specific colors:\n {color_palette}\n Apply them using `bgcolor` attributes, `<font color='...'>`, or inline `style='color: ...'`."
return f"""
{base_role}
Create a **90s/Early 2000s style** web page.
**Technical Constraints & Style:**
1. **Technology:** Pure HTML 4.01 style (transitional) and CSS. **NO JavaScript**.
2. **Visual Style (The Vibe):**
* {old_school_palette_instr}
* Use web-safe colors, tiling backgrounds, and extensive HTML tables (`<table>`) for layout.
* Use `<marquee>` tags, `<blink>` tags (or CSS simulation), and specific fonts like Times New Roman or Comic Sans MS.
* Beveled buttons and borders (CSS `border-style: outset`).
3. **Common Pitfalls to Avoid:**
* Do NOT use Flexbox or Grid.
* Do NOT use modern CSS variables or shadows.
* Do NOT use any external CSS frameworks.
**Output Format:**
Return ONLY the raw HTML code. No markdown explanations.
"""
else: # Default to STATIC_PAGE
static_palette_instr = "**Color Palette:** If provided, use the specified hex codes for your CSS styles."
if color_palette:
static_palette_instr = f"**Color Palette (MANDATORY):** You MUST use these specific colors for your CSS variables or styles:\n {color_palette}"
return f"""
{base_role}
Create a complete, modern, and responsive single HTML file based on the user's request.
**Technical Constraints:**
1. **Self-Contained:** Include all necessary HTML, CSS, and JavaScript in the file.
2. **Libraries:** If you need external libraries (like jQuery, Bootstrap, FontAwesome), use standard CDNs (cdnjs/unpkg).
3. **Visual Style:**
* **Strictly follow** any "Visual Style Requirements" (Decoration, Theme) provided in the user prompt.
* {static_palette_instr}
4. **Structure:**
* Use semantic HTML5.
* Use modern CSS (Flexbox, Grid).
* Keep scripts at the end of the body.
**Output Format:**
Return ONLY the raw HTML code. No markdown explanations.
""" |