Sync ling-space changes from GitHub commit 2ca584b

README.md

@@ -4,7 +4,7 @@ emoji: 💍
 colorFrom: blue
 colorTo: green
 sdk: gradio
-sdk_version: 5.49.1
+sdk_version: 6.0.1
 python_version: 3.13.7
 app_file: app.py
 pinned: false

app.py

@@ -1,6 +1,7 @@
 import gradio as gr
 import uuid
 from datetime import datetime
+from gradio.analytics import ANALYTICS_URL
 import pandas as pd
 from model_handler import ModelHandler
 from tab_chat import create_chat_tab
@@ -64,10 +65,7 @@ if __name__ == "__main__":
     # Instantiate the model handler with the configuration
     model_handler = ModelHandler()
 
-    with gr.Blocks(theme=gr.themes.Soft(),
-                   css=CSS,
-                   head="",
-                   head_paths=['./static/toastify.html', './static/app.html'],
+    with gr.Blocks(analytics_enabled=False,
                    fill_height=True,
                    fill_width=True) as demo:
         with gr.Tabs(elem_id='indicator-space-app') as tabs:
@@ -112,4 +110,7 @@ if __name__ == "__main__":
         )
 
     # Launch the Gradio application
-    demo.launch()
+    demo.launch(theme=gr.themes.Default(),
+        css=CSS,
+        head="",
+        head_paths=['./static/toastify.html', './static/app.html'])

code_kit/agent_code_generator.py

@@ -0,0 +1,146 @@
+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()
+except FileNotFoundError:
+    logger.error("Error: static/catch-error.js not found. The error catching overlay will not work.")
+    CATCH_ERROR_JS_SCRIPT = ""
+
+def get_spinner_html():
+    """Return HTML with a CSS spinner animation"""
+    return """
+    <div style="width: 100%; height: 600px; display: flex; justify-content: center; align-items: center; border: 1px solid #ddd; background-color: #f9f9f9;">
+        <div class="spinner"></div>
+    </div>
+    <style>
+        .spinner {
+            border: 4px solid rgba(0, 0, 0, 0.1);
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            border-left-color: #09f;
+            animation: spin 1s ease infinite;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+    </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": "🚨 **错误**: 请输入提示词。"})
+        yield "", gr.update(value="<p>预览将在此处显示。</p>"), chatbot_history, gr.update()
+        return
+
+    chatbot_history.append({"role": "assistant", "content": "⏳ 开始生成代码..."})
+    yield "", gr.HTML(get_spinner_html()), chatbot_history, gr.update()
+
+    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}'
+                    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 error_code, gr.update(value=final_preview_html), chatbot_history, gr.Tabs(selected=0)
+        return
+
+    # --- Append Style Prompt ---
+    full_user_prompt = user_prompt
+    
+    if color_palette or decoration_style or overall_style:
+        full_user_prompt += "\n\n--- Visual Style Requirements (Strictly Follow These) ---\n"
+        if overall_style:
+            full_user_prompt += f"Overall Theme/Vibe: {overall_style}\n"
+        if decoration_style:
+            full_user_prompt += f"UI Decoration Style: {decoration_style}\n"
+        if color_palette:
+            full_user_prompt += f"Color Palette Mapping (Use these colors for their assigned roles): {color_palette}\n"
+            
+    logger.info(f"Full Prompt with Style: {full_user_prompt}")
+    # ---------------------------
+
+    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.")

code_kit/agent_style_generator.py

@@ -0,0 +1,102 @@
+import json
+import gradio as gr
+from model_handler import ModelHandler
+from config import LING_FLASH_2_0
+
+def format_palette_html(palette_data):
+    """
+    Generates an HTML string to display color boxes with roles.
+    palette_data: List of dicts {'role': str, 'hex': str} or list of strings (fallback)
+    """
+    html = '<div style="display: flex; gap: 10px; margin-top: 5px; flex-wrap: wrap;">'
+    
+    for item in palette_data:
+        if isinstance(item, dict):
+            color = item.get("hex", "#000000")
+            role = item.get("role", "")
+        else:
+            color = item
+            role = ""
+
+        html += f'''
+        <div style="display: flex; flex-direction: column; align-items: center; width: 60px;">
+            <div style="width: 40px; height: 40px; background-color: {color}; border-radius: 8px; border: 1px solid #ccc; box-shadow: 0 2px 4px rgba(0,0,0,0.1);" title="{role}: {color}"></div>
+            <span style="font-size: 9px; color: #666; margin-top: 4px; text-align: center; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%;">{role}</span>
+            <span style="font-size: 9px; color: #999; text-align: center;">{color}</span>
+        </div>
+        '''
+    html += '</div>'
+    return html
+
+def generate_random_style(current_model_display_name):
+    """
+    Generates a random web design style using the LLM.
+    """
+    model_choice = LING_FLASH_2_0 
+    
+    system_prompt = """
+    You are a creative Design Director. Your task is to generate a unique, cohesive visual style for a web interface.
+    
+    Return ONLY a valid JSON object with the following keys:
+    1. "palette": A list of 6 to 8 color objects, where each object has:
+        - "role": A descriptive name for the color usage (e.g., "Page Background", "Card/Surface", "Primary Text", "Secondary Text", "Brand/Action Color", "Accent/Highlight", "Border/Divider").
+        - "hex": The hexadecimal color code.
+    2. "decoration": A concise description (10-20 words) of the UI decoration style (e.g., "Neo-brutalism with thick black borders and hard shadows", "Glassmorphism with high blur and white transparency").
+    3. "theme": A creative, metaphorical description (5-10 words) of the overall vibe (e.g., "Cyberpunk Neon City", "Minimalist Zen Garden").
+    
+    Ensure the colors contrast well (especially text on background) and the roles make sense for a standard web layout.
+    Do not include any markdown formatting (like ```json). Just the raw JSON string.
+    """
+    
+    user_prompt = "Generate a new random design style now."
+    
+    model_handler = ModelHandler()
+    
+    full_response = ""
+    for chunk in model_handler.generate_code(system_prompt, user_prompt, model_choice):
+        full_response += chunk
+    
+    clean_response = full_response.strip()
+    if clean_response.startswith("```json"):
+        clean_response = clean_response[7:]
+    if clean_response.startswith("```"):
+        clean_response = clean_response[3:]
+    if clean_response.endswith("```"):
+        clean_response = clean_response[:-3]
+    clean_response = clean_response.strip()
+    
+    try:
+        style_data = json.loads(clean_response)
+        palette = style_data.get("palette", [])
+        
+        # Validate palette structure, fallback if it's just a list of strings (old format)
+        if palette and isinstance(palette[0], str):
+            palette = [{"role": f"Color {i+1}", "hex": c} for i, c in enumerate(palette)]
+            
+        if not palette:
+             palette = [
+                {"role": "Background", "hex": "#F0F0F0"},
+                {"role": "Text", "hex": "#333333"},
+                {"role": "Accent", "hex": "#007BFF"}
+            ]
+
+        decoration = style_data.get("decoration", "Standard modern web style.")
+        theme = style_data.get("theme", "Default Theme")
+        
+        palette_html = format_palette_html(palette)
+        
+        # Create a structured string for the prompt
+        # e.g., "Page Background: #FFF, Primary Text: #000, ..."
+        palette_str = ", ".join([f"{p['role']}: {p['hex']}" for p in palette])
+        
+        return palette_html, palette_str, decoration, theme
+        
+    except json.JSONDecodeError as e:
+        print(f"Error parsing style JSON: {e}. Response: {full_response}")
+        fallback_palette = [
+            {"role": "Background", "hex": "#FFFFFF"},
+            {"role": "Primary Text", "hex": "#000000"},
+            {"role": "Action", "hex": "#007BFF"},
+            {"role": "Error", "hex": "#DC3545"}
+        ]
+        return format_palette_html(fallback_palette), ", ".join([f"{p['role']}: {p['hex']}" for p in fallback_palette]), "Simple and clean.", "Fallback Default"

code_kit/code_examples.py

@@ -0,0 +1,38 @@
+from config import LING_1T, LING_FLASH_2_0, get_model_display_name
+
+"""
+This file contains the recommended initial inputs for the code generation tab.
+"""
+
+CODE_EXAMPLES = [
+    {
+        "task": "知识讲解",
+        "model": get_model_display_name(LING_1T),
+        "user_prompt": "创建一个关于‘深度学习基础’的交互式学习网页。包含：1. 核心概念卡片（神经网络、反向传播等）；2. 一个简单的交互式图解；3. 常见问题解答部分。"
+    },
+    {
+        "task": "行业分析",
+        "model": get_model_display_name(LING_1T),
+        "user_prompt": "生成一份 2025 年新能源汽车行业分析报告网页。页面应包含：1. 带有数据可视化的市场趋势概览；2. 主要厂商的对比表格；3. 行业挑战与机遇的模块化展示。"
+    },
+    {
+        "task": "Hello World",
+        "model": get_model_display_name(LING_FLASH_2_0),
+        "user_prompt": "编写一个 Hello World 弹窗"
+    },
+    {
+        "task": "烟花动画",
+        "model": get_model_display_name(LING_1T),
+        "user_prompt": "创建一个黑色背景上五彩烟花连续绽放的 Canvas 动画"
+    },
+    {
+        "task": "流光特效",
+        "model": get_model_display_name(LING_1T),
+        "user_prompt": "生成一个带有五彩流光的 Canvas 特效"
+    },
+    {
+        "task": "报错测试",
+        "model": get_model_display_name(LING_FLASH_2_0),
+        "user_prompt": "创建一个报错示例"
+    }
+]

requirements.txt

@@ -1,4 +1,4 @@
-gradio==5.49.1
+gradio==6.0.1
 python-dotenv
 httpx
 # transformers

tab_chat.py

@@ -69,7 +69,7 @@ def create_chat_tab():
             )
 
         with gr.Column(scale=4):
-            chatbot = gr.Chatbot(height=500, type='messages')
+            chatbot = gr.Chatbot(height=500)
             with gr.Row():
                 textbox = gr.Textbox(placeholder="输入消息...", container=False, scale=7)
                 submit_btn = gr.Button("发送", scale=1)
@@ -157,4 +157,4 @@ def create_chat_tab():
         new_chat_btn.click(handle_new_chat, inputs=[conversation_store, current_conversation_id], outputs=[current_conversation_id, conversation_store, chatbot, history_df])
         history_df.select(load_conversation_from_df, inputs=[history_df, conversation_store], outputs=[current_conversation_id, chatbot])
 
-    return conversation_store, current_conversation_id, history_df, chatbot
+    return conversation_store, current_conversation_id, history_df, chatbot

tab_code.py

@@ -1,137 +1,15 @@
 import gradio as gr
-import time
 import logging
-from model_handler import ModelHandler
 from config import CHAT_MODEL_SPECS, LING_1T, CODE_FRAMEWORK_SPECS, STATIC_PAGE
 from ui_components.model_selector import create_model_selector
 from ui_components.code_framework_selector import create_code_framework_selector
-from tab_code_prompts.html_system_prompt import get_html_system_prompt
+from code_kit.agent_code_generator import code_generation_agent
+from code_kit.agent_style_generator import generate_random_style
+from code_kit.code_examples import CODE_EXAMPLES
 
 # 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()
-except FileNotFoundError:
-    logger.error("Error: static/catch-error.js not found. The error catching overlay will not work.")
-    CATCH_ERROR_JS_SCRIPT = ""
-
-
-def get_spinner_html():
-    """Return HTML with a CSS spinner animation"""
-    return """
-    <div style="width: 100%; height: 600px; display: flex; justify-content: center; align-items: center; border: 1px solid #ddd; background-color: #f9f9f9;">
-        <div class="spinner"></div>
-    </div>
-    <style>
-        .spinner {
-            border: 4px solid rgba(0, 0, 0, 0.1);
-            width: 36px;
-            height: 36px;
-            border-radius: 50%;
-            border-left-color: #09f;
-            animation: spin 1s ease infinite;
-        }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-    </style>
-    """
-
-def generate_code(code_type, model_choice, user_prompt, 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": "🚨 **错误**: 请输入提示词。"})
-        yield "", gr.update(value="<p>预览将在此处显示。</p>"), chatbot_history, gr.update()
-        return
-
-    chatbot_history.append({"role": "assistant", "content": "⏳ 开始生成代码..."})
-    yield "", gr.HTML(get_spinner_html()), chatbot_history, gr.update()
-
-    if user_prompt == "create an error":
-        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}'
-                    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 error_code, gr.update(value=final_preview_html), chatbot_history, gr.Tabs(selected=0)
-        return
-
-    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, 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.")
-
 def refresh_preview(code_type, current_code, chatbot_history):
     """Refresh the preview and add a log entry."""
     logger.info(f"--- [Manual Refresh] Start ---")
@@ -175,13 +53,6 @@ def log_js_error(error_text, chatbot_history):
 
 def create_code_tab():
     fullscreen_state = gr.State(False)
-
-    html_examples = [
-        "Write a hello world alert",
-        "Create a Canvas animation of continuous colorful fireworks blooming on a black background.",
-        "Generate a Canvas special effect with iridescent light streams.",
-        "create an error"
-    ]
     
     with gr.Row(elem_id="indicator-code-tab"):
         with gr.Column(scale=1) as left_panel:
@@ -195,8 +66,29 @@ def create_code_tab():
                     default_model_constant=LING_1T
                 )
                 prompt_input = gr.Textbox(lines=5, placeholder="例如：创建一个带标题和按钮的简单页面", label="提示词")
+                
+                # --- Style Settings Section ---
+                with gr.Group(visible=True, elem_classes="style-settings-group"):
+                    gr.Markdown("#### 🎨 设置网页风格")
+                    with gr.Row():
+                        palette_display = gr.HTML(value='<div style="color: #999; font-size: 12px;">暂无配色</div>', label="配色预览")
+                        # Hidden textbox to store the raw palette string for the prompt
+                        palette_input = gr.Textbox(visible=False, label="Palette (Raw)") 
+                    
+                    decoration_input = gr.Textbox(label="装饰风格", placeholder="例如：粗边框，无圆角", lines=1)
+                    overall_style_input = gr.Textbox(label="整体风格", placeholder="例如：类似一本羊皮纸的书", lines=1)
+                    
+                    generate_style_btn = gr.Button("🎲 随机生成风格", size="sm")
+                # ------------------------------
+
                 with gr.Column():
-                    gr.Examples(examples=html_examples, inputs=prompt_input, label="✨ 试试这些酷炫的例子吧")
+                    gr.Markdown("### 示例")
+                    examples_dataset = gr.Dataset(
+                        components=[gr.Textbox(visible=False)],
+                        samples=[[item["task"]] for item in CODE_EXAMPLES],
+                        label="示例",
+                        headers=["选择一个示例"],
+                    )
                 generate_button = gr.Button("生成代码", variant="primary")
 
         with gr.Column(scale=4):
@@ -212,10 +104,33 @@ def create_code_tab():
                     refresh_button = gr.Button("刷新预览")
 
         with gr.Column(scale=1):
-            log_chatbot = gr.Chatbot(label="生成日志", height=300, type="messages")
+            log_chatbot = gr.Chatbot(label="生成日志", height=300)
 
             js_error_channel = gr.Textbox(visible=True, elem_classes=["js_error_channel"], label="Debug Error Channel", interactive=False)
 
+    # Event Handler for Example Selection
+    def on_select_example(evt: gr.SelectData):
+        selected_task = evt.value[0]
+        item = next((i for i in CODE_EXAMPLES if i["task"] == selected_task), None)
+        if not item:
+            return gr.update(), gr.update()
+        
+        return gr.update(value=item["user_prompt"]), gr.update(value=item["model"])
+
+    examples_dataset.select(
+        fn=on_select_example,
+        inputs=None,
+        outputs=[prompt_input, model_choice_dropdown],
+        show_progress="none"
+    )
+
+    # Event Handler for Style Generation
+    generate_style_btn.click(
+        fn=generate_random_style,
+        inputs=[model_choice_dropdown],
+        outputs=[palette_display, palette_input, decoration_input, overall_style_input]
+    )
+
     refresh_button.click(
         fn=refresh_preview,
         inputs=[code_framework_dropdown, code_output, log_chatbot],
@@ -223,8 +138,16 @@ def create_code_tab():
     )
 
     generate_button.click(
-        fn=generate_code,
-        inputs=[code_framework_dropdown, model_choice_dropdown, prompt_input, log_chatbot],
+        fn=code_generation_agent,
+        inputs=[
+            code_framework_dropdown, 
+            model_choice_dropdown, 
+            prompt_input, 
+            palette_input,       # Pass the raw palette string
+            decoration_input, 
+            overall_style_input,
+            log_chatbot
+        ],
         outputs=[code_output, preview_output, log_chatbot, result_tabs]
     )