Spaces:
Running on Zero
Running on Zero
File size: 4,178 Bytes
6a07ce1 | 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 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 | """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
|