Spaces:
Running on Zero
Running on Zero
| """Header component with title and styling for SDXL Model Merger.""" | |
| import gradio as gr | |
| def create_header(): | |
| """Create the header section with title, description, and custom styling.""" | |
| # Custom CSS for modern look | |
| css = """ | |
| /* Header gradient text */ | |
| .header-gradient { | |
| background: linear-gradient(135deg, #10b981 0%, #7c3aed 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| /* Feature cards */ | |
| .feature-card { | |
| border-radius: 12px; | |
| padding: 20px; | |
| margin-bottom: 16px; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); | |
| transition: transform 0.2s ease; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| /* Label styling */ | |
| .gradio-container .label { | |
| font-weight: 600; | |
| color: #374151; | |
| margin-bottom: 8px; | |
| } | |
| /* Status message colors */ | |
| .status-success { | |
| color: #059669 !important; | |
| font-weight: 600; | |
| } | |
| .status-error { | |
| color: #dc2626 !important; | |
| font-weight: 600; | |
| } | |
| .status-warning { | |
| color: #d97706 !important; | |
| font-weight: 600; | |
| } | |
| /* Button improvements */ | |
| .gradio-container .btn { | |
| border-radius: 8px; | |
| padding: 12px 24px; | |
| font-weight: 600; | |
| } | |
| /* Input field styling */ | |
| .gradio-container textarea, | |
| .gradio-container input[type="number"], | |
| .gradio-container input[type="text"] { | |
| border-radius: 8px; | |
| border-color: #d1d5db; | |
| } | |
| .gradio-container textarea:focus, | |
| .gradio-container input:focus { | |
| outline: none; | |
| border-color: #6366f1; | |
| box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); | |
| } | |
| /* Tab styling */ | |
| .gradio-container .tabitem { | |
| background: transparent; | |
| border-radius: 12px; | |
| } | |
| /* Progress bar improvements */ | |
| .gradio-container .progress-bar { | |
| border-radius: 8px; | |
| overflow: hidden; | |
| } | |
| """ | |
| with gr.Column(elem_classes=["feature-card"]): | |
| gr.HTML(""" | |
| <div style="text-align: center; margin-bottom: 24px;"> | |
| <h1 style="font-size: 2.5em; margin: 0; line-height: 1.2;"> | |
| <span class="header-gradient">SDXL Model Merger</span> | |
| </h1> | |
| <p style="color: #6b7280; font-size: 1.1em; max-width: 600px; margin: 16px auto;"> | |
| Merge checkpoints, LoRAs, and VAEs — then bake LoRAs into a single exportable | |
| checkpoint with optional quantization. | |
| </p> | |
| </div> | |
| """) | |
| # Feature highlights | |
| with gr.Row(): | |
| with gr.Column(scale=1): | |
| gr.HTML(""" | |
| <div style="text-align: center; padding: 16px;"> | |
| <div style="font-size: 2.5em; margin-bottom: 8px;">🚀</div> | |
| <strong>Fast Loading</strong> | |
| <p style="font-size: 0.85em; color: #6b7280; margin-top: 4px;">With progress tracking & cache</p> | |
| </div> | |
| """) | |
| with gr.Column(scale=1): | |
| gr.HTML(""" | |
| <div style="text-align: center; padding: 16px;"> | |
| <div style="font-size: 2.5em; margin-bottom: 8px;">🎨</div> | |
| <strong>Panorama Gen</strong> | |
| <p style="font-size: 0.85em; color: #6b7280; margin-top: 4px;">Seamless tiling support</p> | |
| </div> | |
| """) | |
| with gr.Column(scale=1): | |
| gr.HTML(""" | |
| <div style="text-align: center; padding: 16px;"> | |
| <div style="font-size: 2.5em; margin-bottom: 8px;">📦</div> | |
| <strong>Export Ready</strong> | |
| <p style="font-size: 0.85em; color: #6b7280; margin-top: 4px;">Quantization & format options</p> | |
| </div> | |
| """) | |
| return css | |