|
""" |
|
Advanced UI components and interface management for the AnyCoder application. |
|
""" |
|
|
|
import os |
|
import gradio as gr |
|
import uuid |
|
import webbrowser |
|
import urllib.parse |
|
from typing import Dict, List, Optional, Tuple, Any, Union |
|
from pathlib import Path |
|
|
|
from config import ( |
|
THEME_CONFIGS, DEMO_LIST, AVAILABLE_MODELS, DEFAULT_MODEL, DEFAULT_MODEL_NAME, |
|
get_saved_theme, save_theme_preference, get_gradio_language |
|
) |
|
from utils import extract_text_from_file, process_image_for_model |
|
from web_utils import check_hf_space_url, parse_repo_or_model_url |
|
from code_processing import ( |
|
parse_transformers_js_output, format_transformers_js_output, |
|
parse_svelte_output, format_svelte_output, |
|
parse_multipage_html_output, format_multipage_output, validate_and_autofix_files, |
|
inline_multipage_into_single_preview |
|
) |
|
|
|
class AdvancedUIManager: |
|
"""Manages advanced UI components and interactions""" |
|
|
|
def __init__(self): |
|
self.current_theme = get_saved_theme() |
|
self.demo_categories = self._organize_demos_by_category() |
|
self.model_categories = self._organize_models_by_category() |
|
|
|
def _organize_demos_by_category(self) -> Dict[str, List[Dict]]: |
|
"""Organize demo examples by category for better UI""" |
|
categories = {} |
|
for demo in DEMO_LIST: |
|
category = demo.get('category', 'General') |
|
if category not in categories: |
|
categories[category] = [] |
|
categories[category].append(demo) |
|
return categories |
|
|
|
def _organize_models_by_category(self) -> Dict[str, List[Dict]]: |
|
"""Organize models by category for advanced selection UI""" |
|
categories = {} |
|
for model in AVAILABLE_MODELS: |
|
category = model.get('category', 'General') |
|
if category not in categories: |
|
categories[category] = [] |
|
categories[category].append(model) |
|
return categories |
|
|
|
def create_advanced_model_selector(self) -> gr.Group: |
|
"""Create an advanced model selector with categories and features""" |
|
with gr.Group() as model_group: |
|
gr.Markdown("### 🤖 AI Model Selection", elem_classes=["model-header"]) |
|
|
|
with gr.Accordion("Model Categories", open=False, elem_classes=["model-accordion"]): |
|
model_tabs = gr.Tabs() |
|
|
|
with model_tabs: |
|
for category, models in self.model_categories.items(): |
|
with gr.Tab(category, elem_classes=["model-tab"]): |
|
for model in models: |
|
vision_icon = "👁️" if model.get('supports_vision', False) else "" |
|
model_btn = gr.Button( |
|
f"{vision_icon} {model['name']}", |
|
variant="secondary", |
|
elem_classes=["model-button"], |
|
size="sm" |
|
) |
|
gr.Markdown( |
|
f"*{model['description']}*", |
|
elem_classes=["model-description"] |
|
) |
|
|
|
model_dropdown = gr.Dropdown( |
|
choices=[model['name'] for model in AVAILABLE_MODELS], |
|
value=DEFAULT_MODEL_NAME, |
|
label="Selected Model", |
|
elem_classes=["model-dropdown"], |
|
container=True, |
|
scale=2 |
|
) |
|
|
|
with gr.Row(): |
|
model_info_btn = gr.Button("ℹ️", size="sm", elem_classes=["info-button"]) |
|
model_refresh_btn = gr.Button("🔄", size="sm", elem_classes=["refresh-button"]) |
|
|
|
return model_group, model_dropdown, model_info_btn, model_refresh_btn |
|
|
|
def create_advanced_demo_gallery(self) -> gr.Group: |
|
"""Create an advanced demo gallery with categories and search""" |
|
with gr.Group() as demo_group: |
|
gr.Markdown("### 🎯 Project Templates", elem_classes=["demo-header"]) |
|
|
|
demo_search = gr.Textbox( |
|
placeholder="Search templates...", |
|
label="", |
|
elem_classes=["demo-search"], |
|
container=False |
|
) |
|
|
|
demo_filter = gr.Dropdown( |
|
choices=["All Categories"] + list(self.demo_categories.keys()), |
|
value="All Categories", |
|
label="Category Filter", |
|
elem_classes=["demo-filter"] |
|
) |
|
|
|
with gr.Group(elem_classes=["demo-gallery"]): |
|
demo_cards = [] |
|
for category, demos in self.demo_categories.items(): |
|
with gr.Group(visible=True, elem_classes=[f"demo-category-{category.lower().replace(' ', '-')}"]): |
|
gr.Markdown(f"#### {category}", elem_classes=["category-header"]) |
|
|
|
with gr.Row(): |
|
for demo in demos: |
|
complexity_color = { |
|
"Beginner": "success", |
|
"Intermediate": "secondary", |
|
"Advanced": "stop" |
|
}.get(demo.get('complexity', 'Intermediate'), 'secondary') |
|
|
|
demo_card = gr.Button( |
|
f"**{demo['title']}**\n{demo['description'][:100]}...", |
|
variant=complexity_color, |
|
elem_classes=["demo-card"], |
|
size="lg" |
|
) |
|
demo_cards.append((demo_card, demo)) |
|
|
|
return demo_group, demo_cards, demo_search, demo_filter |
|
|
|
def create_advanced_media_controls(self) -> gr.Group: |
|
"""Create advanced media generation controls with smart layouts""" |
|
with gr.Group() as media_group: |
|
gr.Markdown("### 🎨 AI Media Generation", elem_classes=["media-header"]) |
|
|
|
with gr.Accordion("Media Options", open=False, elem_classes=["media-accordion"]): |
|
with gr.Tabs() as media_tabs: |
|
|
|
with gr.Tab("🖼️ Text → Image", elem_classes=["media-tab"]): |
|
text_to_image_toggle = gr.Checkbox( |
|
label="Generate Images from Text", |
|
value=False, |
|
elem_classes=["media-toggle"] |
|
) |
|
text_to_image_prompt = gr.Textbox( |
|
label="Image Description", |
|
placeholder="A modern, minimalist dashboard with clean lines and soft colors", |
|
lines=2, |
|
visible=False, |
|
elem_classes=["media-prompt"] |
|
) |
|
|
|
with gr.Row(visible=False) as t2i_advanced: |
|
t2i_style = gr.Dropdown( |
|
choices=["Photorealistic", "Illustration", "Digital Art", "Sketch", "Abstract"], |
|
value="Digital Art", |
|
label="Style" |
|
) |
|
t2i_quality = gr.Slider( |
|
minimum=0.5, |
|
maximum=1.0, |
|
value=0.9, |
|
step=0.1, |
|
label="Quality" |
|
) |
|
|
|
|
|
with gr.Tab("🎭 Image → Image", elem_classes=["media-tab"]): |
|
image_to_image_toggle = gr.Checkbox( |
|
label="Transform Uploaded Images", |
|
value=False, |
|
elem_classes=["media-toggle"] |
|
) |
|
generation_image_input = gr.Image( |
|
label="Source Image", |
|
visible=False, |
|
elem_classes=["media-image"] |
|
) |
|
image_to_image_prompt = gr.Textbox( |
|
label="Transformation Description", |
|
placeholder="Transform this into a futuristic version", |
|
lines=2, |
|
visible=False, |
|
elem_classes=["media-prompt"] |
|
) |
|
|
|
|
|
with gr.Tab("🎬 Image → Video", elem_classes=["media-tab"]): |
|
image_to_video_toggle = gr.Checkbox( |
|
label="Generate Video from Image", |
|
value=False, |
|
elem_classes=["media-toggle"] |
|
) |
|
image_to_video_prompt = gr.Textbox( |
|
label="Motion Description", |
|
placeholder="The person starts walking forward with a confident stride", |
|
lines=2, |
|
visible=False, |
|
elem_classes=["media-prompt"] |
|
) |
|
|
|
|
|
with gr.Tab("📹 Text → Video", elem_classes=["media-tab"]): |
|
text_to_video_toggle = gr.Checkbox( |
|
label="Generate Video from Text", |
|
value=False, |
|
elem_classes=["media-toggle"] |
|
) |
|
text_to_video_prompt = gr.Textbox( |
|
label="Video Description", |
|
placeholder="A time-lapse of a city skyline transitioning from day to night", |
|
lines=2, |
|
visible=False, |
|
elem_classes=["media-prompt"] |
|
) |
|
|
|
|
|
with gr.Tab("🎵 Text → Music", elem_classes=["media-tab"]): |
|
text_to_music_toggle = gr.Checkbox( |
|
label="Generate Background Music", |
|
value=False, |
|
elem_classes=["media-toggle"] |
|
) |
|
text_to_music_prompt = gr.Textbox( |
|
label="Music Description", |
|
placeholder="Upbeat electronic background music for a tech demo", |
|
lines=2, |
|
visible=False, |
|
elem_classes=["media-prompt"] |
|
) |
|
|
|
with gr.Row(visible=False) as music_controls: |
|
music_duration = gr.Slider( |
|
minimum=10, |
|
maximum=120, |
|
value=30, |
|
step=5, |
|
label="Duration (seconds)" |
|
) |
|
music_style = gr.Dropdown( |
|
choices=["Electronic", "Orchestral", "Ambient", "Upbeat", "Cinematic"], |
|
value="Electronic", |
|
label="Style" |
|
) |
|
|
|
|
|
media_components = { |
|
'text_to_image_toggle': text_to_image_toggle, |
|
'text_to_image_prompt': text_to_image_prompt, |
|
't2i_advanced': t2i_advanced, |
|
'image_to_image_toggle': image_to_image_toggle, |
|
'generation_image_input': generation_image_input, |
|
'image_to_image_prompt': image_to_image_prompt, |
|
'image_to_video_toggle': image_to_video_toggle, |
|
'image_to_video_prompt': image_to_video_prompt, |
|
'text_to_video_toggle': text_to_video_toggle, |
|
'text_to_video_prompt': text_to_video_prompt, |
|
'text_to_music_toggle': text_to_music_toggle, |
|
'text_to_music_prompt': text_to_music_prompt, |
|
'music_controls': music_controls, |
|
} |
|
|
|
return media_group, media_components |
|
|
|
def create_advanced_code_editor(self) -> gr.Group: |
|
"""Create advanced code editor with multi-file support and intelligent features""" |
|
with gr.Group() as editor_group: |
|
gr.Markdown("### 💻 Generated Code", elem_classes=["editor-header"]) |
|
|
|
with gr.Row(): |
|
with gr.Column(scale=3): |
|
|
|
code_output = gr.Code( |
|
language="html", |
|
lines=25, |
|
interactive=True, |
|
label="Generated Code", |
|
elem_classes=["main-editor"] |
|
) |
|
|
|
|
|
with gr.Group(visible=False, elem_classes=["multi-file-group"]) as transformers_group: |
|
gr.Markdown("#### Transformers.js Files") |
|
with gr.Tabs(): |
|
with gr.Tab("index.html"): |
|
tjs_html_code = gr.Code(language="html", lines=20, interactive=True) |
|
with gr.Tab("index.js"): |
|
tjs_js_code = gr.Code(language="javascript", lines=20, interactive=True) |
|
with gr.Tab("style.css"): |
|
tjs_css_code = gr.Code(language="css", lines=20, interactive=True) |
|
|
|
with gr.Group(visible=False, elem_classes=["multi-file-group"]) as svelte_group: |
|
gr.Markdown("#### Svelte Files") |
|
with gr.Tabs(): |
|
with gr.Tab("App.svelte"): |
|
svelte_app_code = gr.Code(language="javascript", lines=20, interactive=True) |
|
with gr.Tab("app.css"): |
|
svelte_css_code = gr.Code(language="css", lines=20, interactive=True) |
|
|
|
with gr.Column(scale=1, elem_classes=["editor-sidebar"]): |
|
|
|
with gr.Group(elem_classes=["code-actions"]): |
|
gr.Markdown("**Actions**") |
|
|
|
code_format_btn = gr.Button("🎨 Format Code", size="sm") |
|
code_download_btn = gr.Button("💾 Download", size="sm") |
|
code_share_btn = gr.Button("🔗 Share", size="sm") |
|
code_deploy_btn = gr.Button("🚀 Deploy", size="sm", variant="primary") |
|
|
|
|
|
with gr.Group(elem_classes=["code-stats"]): |
|
gr.Markdown("**Statistics**") |
|
code_stats = gr.JSON( |
|
value={"lines": 0, "characters": 0, "files": 1}, |
|
label="", |
|
elem_classes=["stats-display"] |
|
) |
|
|
|
editor_components = { |
|
'code_output': code_output, |
|
'transformers_group': transformers_group, |
|
'tjs_html_code': tjs_html_code, |
|
'tjs_js_code': tjs_js_code, |
|
'tjs_css_code': tjs_css_code, |
|
'svelte_group': svelte_group, |
|
'svelte_app_code': svelte_app_code, |
|
'svelte_css_code': svelte_css_code, |
|
'code_format_btn': code_format_btn, |
|
'code_download_btn': code_download_btn, |
|
'code_share_btn': code_share_btn, |
|
'code_deploy_btn': code_deploy_btn, |
|
'code_stats': code_stats |
|
} |
|
|
|
return editor_group, editor_components |
|
|
|
def create_advanced_preview_panel(self) -> gr.Group: |
|
"""Create advanced preview panel with multiple view modes""" |
|
with gr.Group() as preview_group: |
|
gr.Markdown("### 👁️ Live Preview", elem_classes=["preview-header"]) |
|
|
|
with gr.Row(): |
|
preview_mode = gr.Radio( |
|
choices=["Desktop", "Tablet", "Mobile"], |
|
value="Desktop", |
|
label="View Mode", |
|
elem_classes=["preview-mode"] |
|
) |
|
|
|
preview_refresh_btn = gr.Button("🔄", size="sm", elem_classes=["preview-refresh"]) |
|
preview_fullscreen_btn = gr.Button("⛶", size="sm", elem_classes=["preview-fullscreen"]) |
|
preview_qr_btn = gr.Button("📱", size="sm", elem_classes=["preview-qr"]) |
|
|
|
|
|
sandbox = gr.HTML( |
|
label="Live Preview", |
|
elem_classes=["preview-sandbox"] |
|
) |
|
|
|
|
|
with gr.Row(elem_classes=["preview-status"]): |
|
preview_status = gr.Markdown("Ready", elem_classes=["status-text"]) |
|
preview_metrics = gr.JSON( |
|
value={"load_time": "0ms", "size": "0KB", "elements": 0}, |
|
label="", |
|
elem_classes=["preview-metrics"] |
|
) |
|
|
|
preview_components = { |
|
'sandbox': sandbox, |
|
'preview_mode': preview_mode, |
|
'preview_refresh_btn': preview_refresh_btn, |
|
'preview_fullscreen_btn': preview_fullscreen_btn, |
|
'preview_qr_btn': preview_qr_btn, |
|
'preview_status': preview_status, |
|
'preview_metrics': preview_metrics |
|
} |
|
|
|
return preview_group, preview_components |
|
|
|
def create_chat_interface(self) -> gr.Group: |
|
"""Create advanced chat-based interface for beta mode""" |
|
with gr.Group() as chat_group: |
|
gr.Markdown("### 💬 AI Assistant Chat", elem_classes=["chat-header"]) |
|
|
|
|
|
chatbot = gr.Chatbot( |
|
type="messages", |
|
show_label=False, |
|
height=400, |
|
layout="bubble", |
|
bubble_full_width=False, |
|
group_consecutive_messages=True, |
|
elem_classes=["main-chatbot"], |
|
avatar_images=("🧑💻", "🤖") |
|
) |
|
|
|
|
|
with gr.Row(): |
|
chat_input = gr.MultimodalTextbox( |
|
placeholder="Describe what you want to build... (supports text, images, and files)", |
|
submit_btn=True, |
|
stop_btn=False, |
|
show_label=False, |
|
sources=["upload", "microphone"], |
|
elem_classes=["chat-input"], |
|
scale=4 |
|
) |
|
|
|
chat_voice_btn = gr.Button("🎤", size="sm", elem_classes=["voice-button"]) |
|
|
|
|
|
with gr.Row(): |
|
chat_clear_btn = gr.ClearButton([chat_input, chatbot], size="sm") |
|
chat_export_btn = gr.Button("📤 Export Chat", size="sm") |
|
chat_settings_btn = gr.Button("⚙️", size="sm") |
|
|
|
|
|
with gr.Row(elem_classes=["chat-quick-actions"]): |
|
quick_actions = [ |
|
("🌐 Website", "Create a modern website"), |
|
("📱 App", "Build a mobile app"), |
|
("📊 Dashboard", "Design a data dashboard"), |
|
("🎮 Game", "Create an interactive game") |
|
] |
|
|
|
quick_buttons = [] |
|
for icon_text, prompt in quick_actions: |
|
btn = gr.Button(icon_text, size="sm", elem_classes=["quick-action"]) |
|
quick_buttons.append((btn, prompt)) |
|
|
|
chat_components = { |
|
'chatbot': chatbot, |
|
'chat_input': chat_input, |
|
'chat_voice_btn': chat_voice_btn, |
|
'chat_clear_btn': chat_clear_btn, |
|
'chat_export_btn': chat_export_btn, |
|
'chat_settings_btn': chat_settings_btn, |
|
'quick_buttons': quick_buttons |
|
} |
|
|
|
return chat_group, chat_components |
|
|
|
def create_advanced_sidebar(self) -> gr.Column: |
|
"""Create advanced sidebar with intelligent organization""" |
|
with gr.Column(elem_classes=["advanced-sidebar"]) as sidebar: |
|
|
|
with gr.Group(elem_classes=["sidebar-header"]): |
|
login_button = gr.LoginButton(elem_classes=["login-btn"]) |
|
|
|
with gr.Row(): |
|
beta_toggle = gr.Checkbox( |
|
value=False, |
|
label="🧪 Beta Chat Mode", |
|
info="Try our new conversational interface", |
|
elem_classes=["beta-toggle"] |
|
) |
|
|
|
|
|
chat_group, chat_components = self.create_chat_interface() |
|
chat_group.visible = False |
|
|
|
|
|
with gr.Group(elem_classes=["classic-controls"]) as classic_group: |
|
|
|
with gr.Group(elem_classes=["input-section"]): |
|
gr.Markdown("### 🎯 Project Description") |
|
input_textbox = gr.Textbox( |
|
label="What would you like to build?", |
|
placeholder="Describe your application in detail...", |
|
lines=3, |
|
elem_classes=["main-input"] |
|
) |
|
|
|
|
|
model_group, model_dropdown, model_info_btn, model_refresh_btn = self.create_advanced_model_selector() |
|
|
|
|
|
with gr.Group(elem_classes=["language-section"]): |
|
gr.Markdown("### ⚙️ Technology Stack") |
|
|
|
language_dropdown = gr.Dropdown( |
|
choices=[ |
|
"HTML/CSS/JS", "React", "Vue", "Svelte", "Streamlit", |
|
"Gradio", "Python", "Transformers.js", "Node.js", "FastAPI" |
|
], |
|
value="HTML/CSS/JS", |
|
label="Framework", |
|
elem_classes=["language-dropdown"] |
|
) |
|
|
|
with gr.Row(): |
|
responsive_toggle = gr.Checkbox( |
|
label="📱 Responsive Design", |
|
value=True, |
|
elem_classes=["feature-toggle"] |
|
) |
|
dark_mode_toggle = gr.Checkbox( |
|
label="🌙 Dark Mode Support", |
|
value=False, |
|
elem_classes=["feature-toggle"] |
|
) |
|
|
|
|
|
with gr.Group(elem_classes=["file-section"]): |
|
gr.Markdown("### 📂 Input Sources") |
|
|
|
file_input = gr.File( |
|
label="Reference Files", |
|
file_types=[".pdf", ".txt", ".md", ".csv", ".docx", ".jpg", ".png"], |
|
elem_classes=["file-input"] |
|
) |
|
|
|
website_url_input = gr.Textbox( |
|
label="Website to Redesign", |
|
placeholder="https://example.com", |
|
elem_classes=["url-input"] |
|
) |
|
|
|
image_input = gr.Image( |
|
label="UI Design Reference", |
|
visible=False, |
|
elem_classes=["image-input"] |
|
) |
|
|
|
|
|
media_group, media_components = self.create_advanced_media_controls() |
|
|
|
|
|
with gr.Accordion("🔧 Advanced Options", open=False, elem_classes=["advanced-options"]): |
|
search_toggle = gr.Checkbox( |
|
label="🌐 Enable Web Search", |
|
value=False, |
|
info="Use real-time web search for latest information" |
|
) |
|
|
|
optimization_level = gr.Slider( |
|
minimum=1, |
|
maximum=5, |
|
value=3, |
|
step=1, |
|
label="Code Optimization Level", |
|
info="Higher values produce more optimized code" |
|
) |
|
|
|
accessibility_toggle = gr.Checkbox( |
|
label="♿ Accessibility Focus", |
|
value=True, |
|
info="Prioritize accessibility best practices" |
|
) |
|
|
|
|
|
with gr.Row(elem_classes=["generation-controls"]): |
|
generate_btn = gr.Button( |
|
"✨ Generate Code", |
|
variant="primary", |
|
size="lg", |
|
elem_classes=["generate-button"] |
|
) |
|
|
|
with gr.Column(scale=1): |
|
clear_btn = gr.Button("🗑️", size="sm", elem_classes=["clear-button"]) |
|
stop_btn = gr.Button("⏹️", size="sm", elem_classes=["stop-button"]) |
|
|
|
|
|
demo_group, demo_cards, demo_search, demo_filter = self.create_advanced_demo_gallery() |
|
|
|
|
|
with gr.Group(elem_classes=["import-section"]): |
|
gr.Markdown("### 📥 Import Project") |
|
|
|
import_url = gr.Textbox( |
|
label="Project URL", |
|
placeholder="GitHub, HuggingFace Space, or Model URL", |
|
elem_classes=["import-input"] |
|
) |
|
|
|
with gr.Row(): |
|
import_btn = gr.Button("Import", size="sm") |
|
import_status = gr.Markdown("", visible=False) |
|
|
|
|
|
with gr.Group(elem_classes=["deploy-section"], visible=False) as deploy_group: |
|
gr.Markdown("### 🚀 Deploy Application") |
|
|
|
space_name_input = gr.Textbox( |
|
label="App Name", |
|
placeholder="my-awesome-app", |
|
elem_classes=["space-name-input"] |
|
) |
|
|
|
sdk_dropdown = gr.Dropdown( |
|
choices=["Static HTML", "Gradio", "Streamlit", "Transformers.js", "Svelte"], |
|
value="Static HTML", |
|
label="Deployment Type", |
|
elem_classes=["sdk-dropdown"] |
|
) |
|
|
|
deploy_btn = gr.Button( |
|
"🚀 Deploy to HuggingFace", |
|
variant="primary", |
|
elem_classes=["deploy-button"] |
|
) |
|
|
|
deploy_status = gr.Markdown("", visible=False, elem_classes=["deploy-status"]) |
|
|
|
|
|
sidebar_components = { |
|
'login_button': login_button, |
|
'beta_toggle': beta_toggle, |
|
'chat_group': chat_group, |
|
'chat_components': chat_components, |
|
'classic_group': classic_group, |
|
'input_textbox': input_textbox, |
|
'model_dropdown': model_dropdown, |
|
'model_info_btn': model_info_btn, |
|
'model_refresh_btn': model_refresh_btn, |
|
'language_dropdown': language_dropdown, |
|
'responsive_toggle': responsive_toggle, |
|
'dark_mode_toggle': dark_mode_toggle, |
|
'file_input': file_input, |
|
'website_url_input': website_url_input, |
|
'image_input': image_input, |
|
'media_components': media_components, |
|
'search_toggle': search_toggle, |
|
'optimization_level': optimization_level, |
|
'accessibility_toggle': accessibility_toggle, |
|
'generate_btn': generate_btn, |
|
'clear_btn': clear_btn, |
|
'stop_btn': stop_btn, |
|
'demo_cards': demo_cards, |
|
'demo_search': demo_search, |
|
'demo_filter': demo_filter, |
|
'import_url': import_url, |
|
'import_btn': import_btn, |
|
'import_status': import_status, |
|
'deploy_group': deploy_group, |
|
'space_name_input': space_name_input, |
|
'sdk_dropdown': sdk_dropdown, |
|
'deploy_btn': deploy_btn, |
|
'deploy_status': deploy_status |
|
} |
|
|
|
return sidebar, sidebar_components |
|
|
|
class ThemeManager: |
|
"""Manages application themes and styling""" |
|
|
|
@staticmethod |
|
def get_custom_css() -> str: |
|
"""Get custom CSS for advanced styling""" |
|
return """ |
|
/* Advanced AnyCoder Styling */ |
|
|
|
.advanced-sidebar { |
|
background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%); |
|
border-radius: 12px; |
|
padding: 16px; |
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); |
|
} |
|
|
|
.sidebar-header { |
|
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); |
|
color: white; |
|
padding: 12px; |
|
border-radius: 8px; |
|
margin-bottom: 16px; |
|
} |
|
|
|
.main-input { |
|
border-radius: 8px; |
|
border: 2px solid #e5e7eb; |
|
transition: border-color 0.2s ease; |
|
} |
|
|
|
.main-input:focus { |
|
border-color: #3b82f6; |
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); |
|
} |
|
|
|
.generate-button { |
|
background: linear-gradient(135deg, #10b981 0%, #059669 100%); |
|
border: none; |
|
border-radius: 8px; |
|
font-weight: 600; |
|
text-transform: uppercase; |
|
letter-spacing: 0.5px; |
|
transition: all 0.2s ease; |
|
} |
|
|
|
.generate-button:hover { |
|
transform: translateY(-1px); |
|
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); |
|
} |
|
|
|
.demo-card { |
|
background: white; |
|
border: 1px solid #e5e7eb; |
|
border-radius: 8px; |
|
padding: 12px; |
|
transition: all 0.2s ease; |
|
text-align: left; |
|
min-height: 100px; |
|
} |
|
|
|
.demo-card:hover { |
|
transform: translateY(-2px); |
|
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); |
|
border-color: #3b82f6; |
|
} |
|
|
|
.model-button { |
|
background: white; |
|
border: 1px solid #d1d5db; |
|
border-radius: 6px; |
|
margin: 4px 0; |
|
transition: all 0.2s ease; |
|
} |
|
|
|
.model-button:hover { |
|
background: #f9fafb; |
|
border-color: #3b82f6; |
|
} |
|
|
|
.code-actions { |
|
background: #f8fafc; |
|
border-radius: 8px; |
|
padding: 12px; |
|
border: 1px solid #e5e7eb; |
|
} |
|
|
|
.preview-sandbox { |
|
border: 2px solid #e5e7eb; |
|
border-radius: 8px; |
|
overflow: hidden; |
|
} |
|
|
|
.chat-input { |
|
border-radius: 20px; |
|
border: 2px solid #e5e7eb; |
|
} |
|
|
|
.main-chatbot { |
|
border: 1px solid #e5e7eb; |
|
border-radius: 12px; |
|
background: #fafafa; |
|
} |
|
|
|
.media-toggle { |
|
color: #374151; |
|
font-weight: 500; |
|
} |
|
|
|
.media-prompt { |
|
border-radius: 6px; |
|
border: 1px solid #d1d5db; |
|
} |
|
|
|
.quick-action { |
|
background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%); |
|
border: 1px solid #d1d5db; |
|
border-radius: 6px; |
|
font-size: 12px; |
|
transition: all 0.2s ease; |
|
} |
|
|
|
.quick-action:hover { |
|
background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%); |
|
transform: translateY(-1px); |
|
} |
|
|
|
.feature-toggle { |
|
font-size: 13px; |
|
color: #6b7280; |
|
} |
|
|
|
.stats-display { |
|
font-size: 11px; |
|
background: #f9fafb; |
|
border-radius: 4px; |
|
padding: 8px; |
|
} |
|
|
|
.preview-metrics { |
|
font-size: 10px; |
|
color: #6b7280; |
|
} |
|
|
|
.category-header { |
|
color: #374151; |
|
font-weight: 600; |
|
margin: 8px 0; |
|
padding-bottom: 4px; |
|
border-bottom: 1px solid #e5e7eb; |
|
} |
|
|
|
.deploy-button { |
|
background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); |
|
color: white; |
|
font-weight: 600; |
|
} |
|
|
|
.beta-toggle { |
|
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); |
|
color: white; |
|
padding: 4px 8px; |
|
border-radius: 6px; |
|
font-size: 12px; |
|
} |
|
""" |
|
|
|
@staticmethod |
|
def apply_theme_updates(theme_name: str) -> Dict[str, Any]: |
|
"""Apply theme and return UI updates""" |
|
if theme_name in THEME_CONFIGS: |
|
save_theme_preference(theme_name) |
|
|
|
restart_message = f""" |
|
🎨 **Theme Applied:** {theme_name} |
|
|
|
**{THEME_CONFIGS[theme_name]['description']}** |
|
|
|
Your theme preference has been saved. Some advanced styling may require a restart to fully apply. |
|
""" |
|
|
|
return { |
|
'theme_status': gr.update(value=restart_message, visible=True), |
|
'current_theme': theme_name |
|
} |
|
|
|
return {'theme_status': gr.update(visible=False), 'current_theme': theme_name} |
|
|
|
class DeploymentManager: |
|
"""Manages application deployment to various platforms""" |
|
|
|
@staticmethod |
|
def create_deployment_options() -> Dict[str, Any]: |
|
"""Create deployment options for different platforms""" |
|
platforms = { |
|
'huggingface': { |
|
'name': 'HuggingFace Spaces', |
|
'icon': '🤗', |
|
'description': 'Deploy to HuggingFace Spaces with automatic hosting', |
|
'sdks': ['Static', 'Gradio', 'Streamlit', 'Docker'] |
|
}, |
|
'netlify': { |
|
'name': 'Netlify', |
|
'icon': '🌐', |
|
'description': 'Deploy static sites with continuous deployment', |
|
'sdks': ['Static'] |
|
}, |
|
'vercel': { |
|
'name': 'Vercel', |
|
'icon': '▲', |
|
'description': 'Deploy with edge functions and optimized performance', |
|
'sdks': ['Static', 'Next.js'] |
|
} |
|
} |
|
|
|
return platforms |
|
|
|
@staticmethod |
|
def prepare_deployment_files(code: str, language: str, framework: str) -> Dict[str, str]: |
|
"""Prepare files for deployment based on the framework""" |
|
files = {} |
|
|
|
if language == "transformers.js": |
|
|
|
parsed_files = parse_transformers_js_output(code) |
|
files.update(parsed_files) |
|
|
|
elif language == "svelte": |
|
|
|
parsed_files = parse_svelte_output(code) |
|
files.update(parsed_files) |
|
|
|
elif language == "html": |
|
|
|
parsed_files = parse_multipage_html_output(code) |
|
if parsed_files: |
|
files.update(validate_and_autofix_files(parsed_files)) |
|
else: |
|
files['index.html'] = code |
|
|
|
else: |
|
|
|
extension_map = { |
|
'python': '.py', |
|
'javascript': '.js', |
|
'typescript': '.ts', |
|
'css': '.css' |
|
} |
|
|
|
filename = f"app{extension_map.get(language, '.txt')}" |
|
files[filename] = code |
|
|
|
return files |
|
|
|
|
|
ui_manager = AdvancedUIManager() |
|
theme_manager = ThemeManager() |
|
deployment_manager = DeploymentManager() |