Spaces:
Running
Running
File size: 4,731 Bytes
3f80c6a |
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 |
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" |