Spaces:

cafe3310
/

ling-series-spaces

Running

App Files Files Community

GitHub Action commited on 14 days ago

Commit

b453cca

1 Parent(s): 3f80c6a

Sync ling-space changes from GitHub commit 225a47b

Browse files

Files changed (6) hide show

code_kit/agent_code_generator.py +104 -60
code_kit/code_examples.py +6 -1
code_kit/code_trimmer.py +23 -0
config.py +21 -3
tab_code.py +28 -20
tab_code_prompts/framework_system_prompts.py +165 -0

code_kit/agent_code_generator.py CHANGED Viewed

@@ -2,14 +2,16 @@ import gradio as gr
 import time
 import logging
 import os
 from model_handler import ModelHandler
-from tab_code_prompts.html_system_prompt import get_html_system_prompt
 # Configure logging
 logger = logging.getLogger(__name__)
 # Read the content of the JavaScript file for error catching
-# Assuming the script is run from the project root or ling-space root.
 try:
     with open("static/catch-error.js", "r", encoding="utf-8") as f:
         CATCH_ERROR_JS_SCRIPT = f.read()
@@ -39,10 +41,42 @@ def get_spinner_html():
     </style>
     """
-def code_generation_agent(code_type, model_choice, user_prompt, color_palette, decoration_style, overall_style, chatbot_history):
     """Generate code and provide a preview, updating a log stream chatbot."""
     logger.info(f"--- [Code Generation] Start ---")
-    logger.info(f"Code Type: {code_type}, Model: {model_choice}, Prompt: '{user_prompt}'")
     if not user_prompt:
         chatbot_history.append({"role": "assistant", "content": "🚨 **错误**: 请输入提示词。"})
@@ -54,7 +88,7 @@ def code_generation_agent(code_type, model_choice, user_prompt, color_palette, d
     if user_prompt == "create an error" or user_prompt == "创建一个报错示例":
         error_code = f"""<h1>This will create an error</h1><script>{CATCH_ERROR_JS_SCRIPT}</script><script>nonExistentFunction();</script>"""
-        escaped_code = error_code.replace("'", "&apos;").replace('"', '&quot;')
         final_preview_html = f"""
         <div style="width: 100%; height: 600px; border: 1px solid #ddd; overflow: hidden; position: relative; background-color: #f9f9f9;">
             <iframe srcdoc='{escaped_code}'
@@ -84,63 +118,73 @@ def code_generation_agent(code_type, model_choice, user_prompt, color_palette, d
     start_time = time.time()
     model_handler = ModelHandler()
-    if code_type == "静态页面":
-        system_prompt = get_html_system_prompt()
-        full_code_with_think = ""
-        full_code_for_preview = ""
-        buffer = ""
-        is_thinking = False
-        for code_chunk in model_handler.generate_code(system_prompt, full_user_prompt, model_choice):
-            full_code_with_think += code_chunk
-            buffer += code_chunk
-            while True:
-                if is_thinking:
-                    end_index = buffer.find("</think>")
-                    if end_index != -1:
-                        is_thinking = False
-                        buffer = buffer[end_index + len("</think>"):]
-                    else:
-                        break
                 else:
-                    start_index = buffer.find("<think>")
-                    if start_index != -1:
-                        part_to_add = buffer[:start_index]
-                        full_code_for_preview += part_to_add
-                        is_thinking = True
-                        buffer = buffer[start_index:]
-                    else:
-                        full_code_for_preview += buffer
-                        buffer = ""
-                        break
-            elapsed_time = time.time() - start_time
-            generated_length = len(full_code_with_think)
-            speed = generated_length / elapsed_time if elapsed_time > 0 else 0
-            log_message = f"""
-            **⏳ 正在生成中...**
-            - **时间:** {elapsed_time:.2f}s
-            - **长度:** {generated_length} chars
-            - **速度:** {speed:.2f} char/s
-            """
-            if len(chatbot_history) > 0 and "正在生成中" in chatbot_history[-1]["content"]:
-                chatbot_history[-1] = {"role": "assistant", "content": log_message}
             else:
-                chatbot_history.append({"role": "assistant", "content": log_message})
-            yield full_code_with_think, gr.update(), chatbot_history, gr.update()
-        escaped_code = full_code_for_preview.replace("'", "&apos;").replace('"', '&quot;')
-        final_preview_html = f"""
-        <div style="width: 100%; height: 600px; border: 1px solid #ddd; overflow: hidden; position: relative; background-color: #f9f9f9;">
-            <iframe srcdoc='{escaped_code}'
-                    style="position: absolute; top: 0; left: 0; width: 200%; height: 200%; transform: scale(0.5); transform-origin: 0 0; border: none;">
-            </iframe>
-        </div>
         """
-        chatbot_history.append({"role": "assistant", "content": "✅ **成功**: 代码生成完成！"})
-        yield full_code_with_think, gr.HTML(final_preview_html), chatbot_history, gr.Tabs(selected=0)
-        logger.info("Static page streaming finished.")

 import time
 import logging
 import os
+import re
 from model_handler import ModelHandler
+from config import CODE_FRAMEWORK_SPECS, STATIC_PAGE
+from tab_code_prompts.framework_system_prompts import get_framework_system_prompt
+from code_kit.code_trimmer import trim_html_markdown_blocks # Import the trimmer
 # Configure logging
 logger = logging.getLogger(__name__)
 # Read the content of the JavaScript file for error catching
 try:
     with open("static/catch-error.js", "r", encoding="utf-8") as f:
         CATCH_ERROR_JS_SCRIPT = f.read()
     </style>
     """
+def inject_error_catcher(html_code):
+    """
+    Injects the error catching script into the HTML code.
+    It tries to insert it after the <head> tag.
+    If <head> is not found, it prepends it to the code (fallback).
+    """
+    if not CATCH_ERROR_JS_SCRIPT:
+        return html_code
+    script_tag = f"<script>{CATCH_ERROR_JS_SCRIPT}</script>"
+    # Try to find <head> (case insensitive)
+    head_match = re.search(r"<head>", html_code, re.IGNORECASE)
+    if head_match:
+        # Insert after <head>
+        insert_pos = head_match.end()
+        return html_code[:insert_pos] + script_tag + html_code[insert_pos:]
+    # Try to find <body> (case insensitive)
+    body_match = re.search(r"<body>", html_code, re.IGNORECASE)
+    if body_match:
+        # Insert before <body>
+        insert_pos = body_match.start()
+        return html_code[:insert_pos] + script_tag + html_code[insert_pos:]
+    # Fallback: Just prepend if it looks somewhat like HTML or empty
+    return script_tag + html_code
+def code_generation_agent(code_type_display_name, model_choice, user_prompt, color_palette, decoration_style, overall_style, chatbot_history):
     """Generate code and provide a preview, updating a log stream chatbot."""
     logger.info(f"--- [Code Generation] Start ---")
+    logger.info(f"Code Type (Display Name): {code_type_display_name}, Model: {model_choice}, Prompt: '{user_prompt}'")
+    # Map display name back to constant key
+    code_framework_key = next((k for k, v in CODE_FRAMEWORK_SPECS.items() if v["display_name"] == code_type_display_name), STATIC_PAGE)
+    logger.info(f"Mapped Code Framework Key: {code_framework_key}")
     if not user_prompt:
         chatbot_history.append({"role": "assistant", "content": "🚨 **错误**: 请输入提示词。"})
     if user_prompt == "create an error" or user_prompt == "创建一个报错示例":
         error_code = f"""<h1>This will create an error</h1><script>{CATCH_ERROR_JS_SCRIPT}</script><script>nonExistentFunction();</script>"""
+        escaped_code = error_code.replace("'", "&apos;").replace('"', "&quot;")
         final_preview_html = f"""
         <div style="width: 100%; height: 600px; border: 1px solid #ddd; overflow: hidden; position: relative; background-color: #f9f9f9;">
             <iframe srcdoc='{escaped_code}'
     start_time = time.time()
     model_handler = ModelHandler()
+    # Get the system prompt based on the selected framework AND specific color palette
+    # Passing color_palette allows it to be baked into the system prompt instructions
+    system_prompt = get_framework_system_prompt(code_framework_key, color_palette)
+    full_code_with_think = ""
+    full_code_for_preview = ""
+    buffer = ""
+    is_thinking = False
+    for code_chunk in model_handler.generate_code(system_prompt, full_user_prompt, model_choice):
+        full_code_with_think += code_chunk
+        buffer += code_chunk
+        while True:
+            if is_thinking:
+                end_index = buffer.find("</think>")
+                if end_index != -1:
+                    is_thinking = False
+                    buffer = buffer[end_index + len("</think>"):]
                 else:
+                    break
             else:
+                start_index = buffer.find("<think>")
+                if start_index != -1:
+                    part_to_add = buffer[:start_index]
+                    full_code_for_preview += part_to_add
+                    is_thinking = True
+                    buffer = buffer[start_index:]
+                else:
+                    full_code_for_preview += buffer
+                    buffer = ""
+                    break
+        elapsed_time = time.time() - start_time
+        generated_length = len(full_code_with_think)
+        speed = generated_length / elapsed_time if elapsed_time > 0 else 0
+        log_message = f"""
+        **⏳ 正在生成中...**
+        - **时间:** {elapsed_time:.2f}s
+        - **长度:** {generated_length} chars
+        - **速度:** {speed:.2f} char/s
         """
+        if len(chatbot_history) > 0 and "正在生成中" in chatbot_history[-1]["content"]:
+            chatbot_history[-1] = {"role": "assistant", "content": log_message}
+        else:
+            chatbot_history.append({"role": "assistant", "content": log_message})
+        yield full_code_with_think, gr.update(), chatbot_history, gr.update()
+    # Apply trimming to the final generated code
+    trimmed_full_code_with_think = trim_html_markdown_blocks(full_code_with_think)
+    trimmed_full_code_for_preview = trim_html_markdown_blocks(full_code_for_preview)
+    # Inject error catching script before final render
+    final_code_with_error_catcher = inject_error_catcher(trimmed_full_code_for_preview)
+    escaped_code = final_code_with_error_catcher.replace("'", "&apos;").replace('"', "&quot;")
+    final_preview_html = f"""
+    <div style="width: 100%; height: 600px; border: 1px solid #ddd; overflow: hidden; position: relative; background-color: #f9f9f9;">
+        <iframe srcdoc='{escaped_code}'
+                style="position: absolute; top: 0; left: 0; width: 200%; height: 200%; transform: scale(0.5); transform-origin: 0 0; border: none;">
+        </iframe>
+    </div>
+    """
+    chatbot_history.append({"role": "assistant", "content": "✅ **成功**: 代码生成完成！"})
+    # Yield the trimmed code for display in the "Generated Source Code" tab
+    yield trimmed_full_code_with_think, gr.HTML(final_preview_html), chatbot_history, gr.Tabs(selected=0)
+    logger.info("Code generation streaming finished.")

code_kit/code_examples.py CHANGED Viewed

@@ -34,5 +34,10 @@ CODE_EXAMPLES = [
         "task": "报错测试",
         "model": get_model_display_name(LING_FLASH_2_0),
         "user_prompt": "创建一个报错示例"
     }
-]

         "task": "报错测试",
         "model": get_model_display_name(LING_FLASH_2_0),
         "user_prompt": "创建一个报错示例"
+    },
+    {
+        "task": "生成错误-React",
+        "model": get_model_display_name(LING_FLASH_2_0),
+        "user_prompt": "Write a React component that deliberately throws an error during rendering to test the error boundary mechanism."
     }
+]

code_kit/code_trimmer.py ADDED Viewed

	@@ -0,0 +1,23 @@

+import re
+def trim_html_markdown_blocks(code_string: str) -> str:
+    """
+    Trims Markdown HTML code block delimiters (```html and ```) from the start and end of a string.
+    Also removes any leading/trailing whitespace/newlines.
+    """
+    if not code_string:
+        return ""
+    # Pattern to match ```html or ``` followed by optional whitespace/newlines
+    # and capture the actual code content.
+    # It attempts to match the opening ```html block
+    # and the closing ``` block at the very beginning and end of the string.
+    # Trim leading ```html or ```
+    trimmed_code = re.sub(r"^\s*```(html)?\s*\n", "", code_string, flags=re.IGNORECASE)
+    # Trim trailing ```
+    trimmed_code = re.sub(r"\n\s*```\s*$", "", trimmed_code)
+    return trimmed_code.strip()

config.py CHANGED Viewed

@@ -86,12 +86,31 @@ CHAT_MODEL_SPECS = {
 # Constants for easy referencing of code frameworks
 STATIC_PAGE = "static_page"
-GRADIO_APP = "gradio_app"
 CODE_FRAMEWORK_SPECS = {
     STATIC_PAGE: {
         "display_name": "静态页面",
         "description": "生成一个独立的、响应式的 HTML 文件，包含所有必要的 CSS 和 JavaScript。适合快速原型和简单的网页展示。"
     }
 }
@@ -121,5 +140,4 @@ def get_model_display_name(model_constant: str) -> str:
     Retrieves the display name for a given model constant.
     This is what's shown in the UI.
     """
-    return CHAT_MODEL_SPECS.get(model_constant, {}).get("display_name", model_constant)

 # Constants for easy referencing of code frameworks
 STATIC_PAGE = "static_page"
+REACT_TAILWIND = "react_tailwind"
+REACT_TAILWIND_CHARTJS = "react_tailwind_chartjs" # Added new constant
+REACT_THREE_FIBER = "react_three_fiber"
+OLD_SCHOOL_HTML = "old_school_html"
 CODE_FRAMEWORK_SPECS = {
     STATIC_PAGE: {
         "display_name": "静态页面",
         "description": "生成一个独立的、响应式的 HTML 文件，包含所有必要的 CSS 和 JavaScript。适合快速原型和简单的网页展示。"
+    },
+    REACT_TAILWIND: {
+        "display_name": "React + Tailwind",
+        "description": "使用 React 和 Tailwind CSS 构建的现代单页应用。生成内容将是一个单 HTML 文件（使用 CDN）。"
+    },
+    REACT_TAILWIND_CHARTJS: { # Added new framework spec
+        "display_name": "React + Tailwind + Chart.js",
+        "description": "使用 React, Tailwind CSS 和 Chart.js 构建数据可视化单页应用。生成内容将是一个单 HTML 文件（使用 CDN）。"
+    },
+    REACT_THREE_FIBER: {
+        "display_name": "React 3D (R3F)",
+        "description": "基于 React Three Fiber 的 3D 场景，配合 Tailwind CSS。适合酷炫的 3D 交互效果。"
+    },
+    OLD_SCHOOL_HTML: {
+        "display_name": "90s 复古风格",
+        "description": "90 年代风格的纯 HTML + CSS，无 JavaScript。致敬 Web 1.0 时代，适合怀旧风格。"
     }
 }
     Retrieves the display name for a given model constant.
     This is what's shown in the UI.
     """
+    return CHAT_MODEL_SPECS.get(model_constant, {}).get("display_name", model_constant)

tab_code.py CHANGED Viewed

@@ -10,26 +10,34 @@ from code_kit.code_examples import CODE_EXAMPLES
 # Configure logging
 logger = logging.getLogger(__name__)
-def refresh_preview(code_type, current_code, chatbot_history):
-    """Refresh the preview and add a log entry."""
     logger.info(f"--- [Manual Refresh] Start ---")
-    logger.info(f"Code Type: {code_type}")
-    if code_type == "静态页面":
-        escaped_code = current_code.replace("'", "&apos;").replace('"', '&quot;')
-        final_preview_html = f"""
-        <div style="width: 100%; height: 600px; border: 1px solid #ddd; overflow: hidden; position: relative; background-color: #f9f9f9;">
-            <iframe srcdoc='{escaped_code}'
-                    style="position: absolute; top: 0; left: 0; width: 200%; height: 200%; transform: scale(0.5); transform-origin: 0 0; border: none;">
-            </iframe>
-        </div>
-        """
-        chatbot_history.append({"role": "assistant", "content": "🔄 **状态**: 预览已手动刷新。"})
-        logger.info("Refreshed static page preview.")
-        return gr.HTML(final_preview_html), chatbot_history
-    chatbot_history.append({"role": "assistant", "content": "⚠️ **警告**: 未知的代码类型，无法刷新。"})
-    return gr.update(), chatbot_history
 def toggle_fullscreen(is_fullscreen):
     is_fullscreen = not is_fullscreen
@@ -161,4 +169,4 @@ def create_code_tab():
         fn=log_js_error,
         inputs=[js_error_channel, log_chatbot],
         outputs=log_chatbot
-    )

 # Configure logging
 logger = logging.getLogger(__name__)
+def refresh_preview(code_type_display_name, current_code, chatbot_history):
+    """
+    Refresh the preview and add a log entry.
+    Refactored to rely solely on the HTML content for preview, assuming all frameworks
+    produce a single-file HTML output that works in an iframe.
+    """
     logger.info(f"--- [Manual Refresh] Start ---")
+    logger.info(f"Code Type: {code_type_display_name}")
+    # Simple validation: Check if code seems to be HTML
+    if not current_code or not isinstance(current_code, str):
+         chatbot_history.append({"role": "assistant", "content": "⚠️ **警告**: 没有代码可供刷新。"})
+         return gr.update(), chatbot_history
+    # For all currently supported frameworks (Static, React+Tailwind, R3F, Old School),
+    # the output is a self-contained HTML string.
+    # So we can process them uniformly.
+    escaped_code = current_code.replace("'", "&apos;").replace('"', '&quot;')
+    final_preview_html = f"""
+    <div style="width: 100%; height: 600px; border: 1px solid #ddd; overflow: hidden; position: relative; background-color: #f9f9f9;">
+        <iframe srcdoc='{escaped_code}'
+                style="position: absolute; top: 0; left: 0; width: 200%; height: 200%; transform: scale(0.5); transform-origin: 0 0; border: none;">
+        </iframe>
+    </div>
+    """
+    chatbot_history.append({"role": "assistant", "content": "🔄 **状态**: 预览已手动刷新。"})
+    logger.info("Refreshed preview.")
+    return gr.HTML(final_preview_html), chatbot_history
 def toggle_fullscreen(is_fullscreen):
     is_fullscreen = not is_fullscreen
         fn=log_js_error,
         inputs=[js_error_channel, log_chatbot],
         outputs=log_chatbot
+    )

tab_code_prompts/framework_system_prompts.py ADDED Viewed

	@@ -0,0 +1,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.
+"""