import gradio as gr # Define custom CSS with dark theme fixes, updated to use html.dark custom_css = """ /* Root variables for light theme */ :root { --background: #ffffff; --secondary-background: #f7f7f7; --tertiary-background: #f0f0f0; --text: #000000; --secondary-text: #5d5d5d; --border: #e0e0e0; --accent: #ff7b2c; --accent-hover: #ff6a14; --button-text: #ffffff; --code-bg: #f7f7f7; --code-text: #000000; --dropdown-bg: #ffffff; --slider-track: #e0e0e0; --slider-thumb: #ff7b2c; --collapsible-header: #f0f0f0; --primary-button-bg: #4a6ee0; /* Blue */ --primary-button-hover: #3a5ec8; --secondary-button-bg: #444444; --secondary-button-hover: #555555; --danger-button-bg: #e74c3c; /* Red */ --danger-button-hover: #c0392b; --success-button-bg: #e67e22; /* Orange */ --success-button-hover: #d35400; } /* Dark theme variables using html.dark */ html.dark { --background: #1a1a1a; --secondary-background: #252525; --tertiary-background: #2a2a2a; --text: #ffffff; --secondary-text: #cccccc; --border: #444444; --accent: #ff7b2c; --accent-hover: #ff6a14; --button-text: #ffffff; --code-bg: #252525; --code-text: #ffffff; --dropdown-bg: #2a2a2a; --slider-track: #444444; --slider-thumb: #ff7b2c; --collapsible-header: #333333; --primary-button-bg: #4a6ee0; --primary-button-hover: #3a5ec8; --secondary-button-bg: #444444; --secondary-button-hover: #555555; --danger-button-bg: #e74c3c; --danger-button-hover: #c0392b; --success-button-bg: #e67e22; --success-button-hover: #d35400; } /* Base styles */ body { background-color: var(--background) !important; color: var(--text) !important; transition: all 0.3s ease; } .gradio-container { background-color: var(--background) !important; max-width: 100% !important; } /* Headers */ h1, h2, h3, h4, h5, h6, .gr-header { color: var(--text) !important; } /* Panels and blocks */ .gr-panel, .gr-form, .gr-box, .gr-block { background-color: var(--secondary-background) !important; color: var(--text) !important; border-color: var(--border) !important; border-radius: 6px !important; } /* Validation messages section */ .gr-accordion .gr-panel { background-color: var(--secondary-background) !important; color: var(--text) !important; border-color: #e74c3c !important; /* Red border */ } .gr-accordion-header { background-color: var(--collapsible-header) !important; color: var(--text) !important; } /* Code editors */ .codebox, .code-editor, .cm-editor { background-color: var(--code-bg) !important; color: var(--code-text) !important; border: 1px solid var(--border) !important; border-radius: 4px !important; } /* Syntax highlighting */ .cm-editor .cm-content, .cm-editor .cm-line { color: var(--code-text) !important; } .cm-editor .cm-keyword { color: #ff79c6 !important; } /* Pink */ .cm-editor .cm-number { color: #bd93f9 !important; } /* Purple */ .cm-editor .cm-string { color: #f1fa8c !important; } /* Yellow */ .cm-editor .cm-comment { color: #6272a4 !important; } /* Gray */ /* Buttons */ .gr-button { background-color: var(--tertiary-background) !important; color: var(--text) !important; border-color: var(--border) !important; border-radius: 4px !important; } .gr-button.success { background-color: var(--success-button-bg) !important; color: var(--button-text) !important; } .gr-button.success:hover { background-color: var(--success-button-hover) !important; } .gr-button.danger { background-color: var(--danger-button-bg) !important; color: var(--button-text) !important; } .gr-button.danger:hover { background-color: var(--danger-button-hover) !important; } .gr-button.secondary { background-color: var(--secondary-button-bg) !important; color: var(--button-text) !important; } .gr-button.secondary:hover { background-color: var(--secondary-button-hover) !important; } /* File upload */ .gr-file, .gr-file-upload { background-color: var(--secondary-background) !important; color: var(--text) !important; border-color: var(--border) !important; } /* Dropdowns */ .gr-dropdown, .gr-dropdown-container, .gr-dropdown select, .gr-dropdown option { background-color: var(--dropdown-bg) !important; color: var(--text) !important; border-color: var(--border) !important; } /* Slider */ .gr-slider { background-color: var(--background) !important; } .gr-slider-track { background-color: var(--slider-track) !important; } .gr-slider-handle { background-color: var(--slider-thumb) !important; } .gr-slider-value { color: var(--text) !important; } /* Code output */ .gr-code { background-color: var(--code-bg) !important; color: var(--code-text) !important; border-color: var(--border) !important; } /* Footer */ .footer { color: var(--secondary-text) !important; } .footer a { color: var(--accent) !important; } """ # JavaScript for theme toggling and initialization js_code = """ """ # Language and model options INPUT_LANGUAGES = ["Python", "JavaScript", "Java", "TypeScript", "Swift", "C#", "Ruby", "Go", "Rust", "PHP"] OUTPUT_LANGUAGES = ["Python", "JavaScript", "Java", "TypeScript", "Swift", "C#", "Ruby", "Go", "Rust", "PHP", "Julia"] MODELS = ["GPT", "Claude", "CodeLlama", "Llama", "Gemini"] DOC_STYLES = ["standard", "detailed", "minimal"] # Build the interface with gr.Blocks(css=custom_css, theme=gr.themes.Base()) as demo: # Inject the JavaScript code gr.HTML(js_code) # States for dynamic button text input_lang_state = gr.State("Python") output_lang_state = gr.State("JavaScript") # Header with gr.Row(elem_classes="header-container"): gr.HTML("