update app

app.py

@@ -13,27 +13,27 @@ from qwenimage.qwen_fa3_processor import QwenDoubleStreamAttnProcessorFA3
 from gradio.themes import Soft
 from gradio.themes.utils import colors, fonts, sizes
 
-colors.orange_red = colors.Color(
-    name="orange_red",
-    c50="#FFF5F0",
-    c100="#FFE8E0",
-    c200="#FFC299",
-    c300="#FFA366",
-    c400="#FF8533",
-    c500="#FF4500",
-    c600="#E63E00",
-    c700="#CC3700",
-    c800="#B33000",
-    c900="#992900",
-    c950="#802200",
+colors.purple = colors.Color(
+    name="purple",
+    c50="#FAF5FF",
+    c100="#F3E8FF",
+    c200="#E9D5FF",
+    c300="#DAB2FF",
+    c400="#C084FC",
+    c500="#A855F7",
+    c600="#9333EA",
+    c700="#7E22CE",
+    c800="#6B21A8",
+    c900="#581C87",
+    c950="#3B0764",
 )
 
-class OrangeRedTheme(Soft):
+class PurpleTheme(Soft):
     def __init__(
         self,
         *,
         primary_hue: colors.Color | str = colors.gray,
-        secondary_hue: colors.Color | str = colors.orange_red,
+        secondary_hue: colors.Color | str = colors.purple,
         neutral_hue: colors.Color | str = colors.slate,
         text_size: sizes.Size | str = sizes.text_lg,
         font: fonts.Font | str | Iterable[fonts.Font | str] = (
@@ -79,7 +79,7 @@ class OrangeRedTheme(Soft):
             block_label_background_fill="*primary_200",
         )
 
-orange_red_theme = OrangeRedTheme()
+purple_theme = PurpleTheme()
 
 MAX_SEED = np.iinfo(np.int32).max
 
@@ -465,7 +465,7 @@ class LightingControl3D(gr.HTML):
                 refreshBtn.style.position = 'absolute';
                 refreshBtn.style.top = '15px';
                 refreshBtn.style.right = '15px';
-                refreshBtn.style.background = '#e63e00';
+                refreshBtn.style.background = '#9333EA';
                 refreshBtn.style.color = '#fff';
                 refreshBtn.style.border = 'none';
                 refreshBtn.style.padding = '8px 16px';
@@ -478,8 +478,8 @@ class LightingControl3D(gr.HTML):
                 refreshBtn.style.boxShadow = '0 2px 5px rgba(0,0,0,0.3)';
                 refreshBtn.style.transition = 'background 0.2s';
                 
-                refreshBtn.onmouseover = () => refreshBtn.style.background = '#ff5722';
-                refreshBtn.onmouseout = () => refreshBtn.style.background = '#e63e00';
+                refreshBtn.onmouseover = () => refreshBtn.style.background = '#A855F7';
+                refreshBtn.onmouseout = () => refreshBtn.style.background = '#9333EA';
                 
                 wrapper.appendChild(refreshBtn);
                 
@@ -743,12 +743,12 @@ class LightingControl3D(gr.HTML):
 css = """
 @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
 
-/* Background grid pattern - Orange Red theme */
+/* Background grid pattern - Purple theme */
 body, .gradio-container {
-    background-color: #FFF5F0 !important;
+    background-color: #FAF5FF !important;
     background-image: 
-        linear-gradient(#FFC299 1px, transparent 1px), 
-        linear-gradient(90deg, #FFC299 1px, transparent 1px) !important;
+        linear-gradient(#E9D5FF 1px, transparent 1px), 
+        linear-gradient(90deg, #E9D5FF 1px, transparent 1px) !important;
     background-size: 40px 40px !important;
     font-family: 'Outfit', sans-serif !important;
 }
@@ -757,8 +757,8 @@ body, .gradio-container {
 .dark body, .dark .gradio-container {
     background-color: #1a1a1a !important;
     background-image: 
-        linear-gradient(rgba(255, 69, 0, 0.1) 1px, transparent 1px), 
-        linear-gradient(90deg, rgba(255, 69, 0, 0.1) 1px, transparent 1px) !important;
+        linear-gradient(rgba(168, 85, 247, 0.1) 1px, transparent 1px), 
+        linear-gradient(90deg, rgba(168, 85, 247, 0.1) 1px, transparent 1px) !important;
     background-size: 40px 40px !important;
 }
 
@@ -776,7 +776,7 @@ body, .gradio-container {
 #main-title h1 {
     font-size: 2.4em !important;
     font-weight: 700 !important;
-    background: linear-gradient(135deg, #FF4500 0%, #FF8533 50%, #E63E00 100%);
+    background: linear-gradient(135deg, #A855F7 0%, #C084FC 50%, #9333EA 100%);
     background-size: 200% 200%;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
@@ -800,10 +800,11 @@ body, .gradio-container {
     margin: 0 auto;
     color: #666666;
     font-size: 1rem;
+    text-align: center !important;
 }
 
 #subtitle a {
-    color: #FF4500 !important;
+    color: #A855F7 !important;
     text-decoration: none;
     font-weight: 500;
 }
@@ -812,37 +813,42 @@ body, .gradio-container {
     text-decoration: underline;
 }
 
+/* Center all markdown text */
+.gradio-container > .main > .wrap > .contain > .gap > div:nth-child(2) {
+    text-align: center !important;
+}
+
 /* Card styling */
 .gradio-group {
     background: rgba(255, 255, 255, 0.9) !important;
-    border: 2px solid #FFC299 !important;
+    border: 2px solid #E9D5FF !important;
     border-radius: 12px !important;
-    box-shadow: 0 4px 24px rgba(255, 69, 0, 0.08) !important;
+    box-shadow: 0 4px 24px rgba(168, 85, 247, 0.08) !important;
     backdrop-filter: blur(10px);
     transition: all 0.3s ease;
 }
 
 .gradio-group:hover {
-    box-shadow: 0 8px 32px rgba(255, 69, 0, 0.12) !important;
-    border-color: #FF8533 !important;
+    box-shadow: 0 8px 32px rgba(168, 85, 247, 0.12) !important;
+    border-color: #C084FC !important;
 }
 
 .dark .gradio-group {
     background: rgba(30, 30, 30, 0.9) !important;
-    border-color: rgba(255, 69, 0, 0.3) !important;
+    border-color: rgba(168, 85, 247, 0.3) !important;
 }
 
 /* Image upload area */
 .gradio-image {
     border-radius: 10px !important;
     overflow: hidden;
-    border: 2px dashed #FF8533 !important;
+    border: 2px dashed #C084FC !important;
     transition: all 0.3s ease;
 }
 
 .gradio-image:hover {
-    border-color: #FF4500 !important;
-    background: rgba(255, 69, 0, 0.02) !important;
+    border-color: #A855F7 !important;
+    background: rgba(168, 85, 247, 0.02) !important;
 }
 
 /* Radio buttons */
@@ -857,12 +863,12 @@ body, .gradio-container {
 }
 
 .gradio-radio label:hover {
-    background: rgba(255, 69, 0, 0.05) !important;
+    background: rgba(168, 85, 247, 0.05) !important;
 }
 
 .gradio-radio label.selected {
-    background: rgba(255, 69, 0, 0.1) !important;
-    border-color: #FF4500 !important;
+    background: rgba(168, 85, 247, 0.1) !important;
+    border-color: #A855F7 !important;
 }
 
 /* Primary button */
@@ -879,7 +885,7 @@ body, .gradio-container {
 
 /* Tabs styling */
 .tab-nav {
-    border-bottom: 2px solid #FFC299 !important;
+    border-bottom: 2px solid #E9D5FF !important;
 }
 
 .tab-nav button {
@@ -890,8 +896,8 @@ body, .gradio-container {
 }
 
 .tab-nav button.selected {
-    background: rgba(255, 69, 0, 0.1) !important;
-    border-bottom: 2px solid #FF4500 !important;
+    background: rgba(168, 85, 247, 0.1) !important;
+    border-bottom: 2px solid #A855F7 !important;
 }
 
 /* Output textbox */
@@ -900,13 +906,13 @@ body, .gradio-container {
     font-size: 0.95rem !important;
     line-height: 1.7 !important;
     background: rgba(255, 255, 255, 0.95) !important;
-    border: 1px solid #FFC299 !important;
+    border: 1px solid #E9D5FF !important;
     border-radius: 8px !important;
 }
 
 .dark .gradio-textbox textarea {
     background: rgba(30, 30, 30, 0.95) !important;
-    border-color: rgba(255, 69, 0, 0.2) !important;
+    border-color: rgba(168, 85, 247, 0.2) !important;
 }
 
 /* Markdown output */
@@ -917,15 +923,15 @@ body, .gradio-container {
 
 .gradio-markdown code {
     font-family: 'IBM Plex Mono', monospace !important;
-    background: rgba(255, 69, 0, 0.08) !important;
+    background: rgba(168, 85, 247, 0.08) !important;
     padding: 2px 6px !important;
     border-radius: 4px !important;
-    color: #CC3700 !important;
+    color: #7E22CE !important;
 }
 
 .gradio-markdown pre {
-    background: rgba(255, 69, 0, 0.05) !important;
-    border: 1px solid #FFC299 !important;
+    background: rgba(168, 85, 247, 0.05) !important;
+    border: 1px solid #E9D5FF !important;
     border-radius: 8px !important;
     padding: 1rem !important;
 }
@@ -936,15 +942,15 @@ body, .gradio-container {
 }
 
 .gradio-examples .gallery-item {
-    border: 2px solid #FFC299 !important;
+    border: 2px solid #E9D5FF !important;
     border-radius: 8px !important;
     transition: all 0.2s ease !important;
 }
 
 .gradio-examples .gallery-item:hover {
-    border-color: #FF4500 !important;
+    border-color: #A855F7 !important;
     transform: translateY(-2px) !important;
-    box-shadow: 0 4px 12px rgba(255, 69, 0, 0.15) !important;
+    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.15) !important;
 }
 
 /* Scrollbar styling */
@@ -954,27 +960,27 @@ body, .gradio-container {
 }
 
 ::-webkit-scrollbar-track {
-    background: rgba(255, 69, 0, 0.05);
+    background: rgba(168, 85, 247, 0.05);
     border-radius: 4px;
 }
 
 ::-webkit-scrollbar-thumb {
-    background: linear-gradient(135deg, #FF4500, #FF8533);
+    background: linear-gradient(135deg, #A855F7, #C084FC);
     border-radius: 4px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-    background: linear-gradient(135deg, #E63E00, #FF4500);
+    background: linear-gradient(135deg, #9333EA, #A855F7);
 }
 
 /* Accordion styling */
 .gradio-accordion {
     border-radius: 10px !important;
-    border: 1px solid #FFC299 !important;
+    border: 1px solid #E9D5FF !important;
 }
 
 .gradio-accordion > .label-wrap {
-    background: rgba(255, 69, 0, 0.03) !important;
+    background: rgba(168, 85, 247, 0.03) !important;
     border-radius: 10px !important;
 }
 
@@ -1009,34 +1015,34 @@ label {
 }
 
 .gradio-dropdown select, .gradio-dropdown input {
-    border: 1px solid #FFC299 !important;
+    border: 1px solid #E9D5FF !important;
     border-radius: 8px !important;
     transition: all 0.2s ease !important;
 }
 
 .gradio-dropdown select:focus, .gradio-dropdown input:focus {
-    border-color: #FF4500 !important;
-    box-shadow: 0 0 0 2px rgba(255, 69, 0, 0.1) !important;
+    border-color: #A855F7 !important;
+    box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.1) !important;
 }
 
 /* Slider styling */
 .gradio-slider input[type="range"] {
-    accent-color: #FF4500 !important;
+    accent-color: #A855F7 !important;
 }
 
 .gradio-slider .range-slider {
-    background: #FFC299 !important;
+    background: #E9D5FF !important;
 }
 
 .gradio-slider .range-slider .handle {
-    background: #FF4500 !important;
-    border-color: #FF4500 !important;
+    background: #A855F7 !important;
+    border-color: #A855F7 !important;
 }
 
 /* 3D Control styling */
 #lighting-3d-control {
     min-height: 450px;
-    border: 2px solid #FFC299 !important;
+    border: 2px solid #E9D5FF !important;
     border-radius: 12px !important;
     overflow: hidden;
 }
@@ -1047,24 +1053,24 @@ label {
 }
 
 .progress-bar {
-    background: linear-gradient(90deg, #FF4500, #FF8533) !important;
+    background: linear-gradient(90deg, #A855F7, #C084FC) !important;
 }
 
 /* Checkbox styling */
 .gradio-checkbox input[type="checkbox"]:checked {
-    background-color: #FF4500 !important;
-    border-color: #FF4500 !important;
+    background-color: #A855F7 !important;
+    border-color: #A855F7 !important;
 }
 
 /* Number input styling */
 .gradio-number input {
-    border: 1px solid #FFC299 !important;
+    border: 1px solid #E9D5FF !important;
     border-radius: 8px !important;
 }
 
 .gradio-number input:focus {
-    border-color: #FF4500 !important;
-    box-shadow: 0 0 0 2px rgba(255, 69, 0, 0.1) !important;
+    border-color: #A855F7 !important;
+    box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.1) !important;
 }
 
 /* Gallery styling */
@@ -1073,14 +1079,14 @@ label {
 }
 
 .gradio-gallery .gallery-item {
-    border: 2px solid #FFC299 !important;
+    border: 2px solid #E9D5FF !important;
     border-radius: 8px !important;
     transition: all 0.2s ease !important;
 }
 
 .gradio-gallery .gallery-item:hover {
-    border-color: #FF4500 !important;
-    box-shadow: 0 4px 12px rgba(255, 69, 0, 0.15) !important;
+    border-color: #A855F7 !important;
+    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.15) !important;
 }
 
 /* Fillable container */
@@ -1091,7 +1097,7 @@ label {
 
 with gr.Blocks() as demo:
     gr.Markdown("# **Qwen-Image-Edit-3D-Lighting-Control**", elem_id="main-title")
-    gr.Markdown("Control lighting directions using the 3D viewport or sliders. Using the [Multi-Angle-Lighting](https://huggingface.co/dx8152/Qwen-Edit-2509-Multi-Angle-Lighting) LoRA for precise lighting control.")
+    gr.Markdown("Control lighting directions using the 3D viewport or sliders. Using the [Multi-Angle-Lighting](https://huggingface.co/dx8152/Qwen-Edit-2509-Multi-Angle-Lighting) LoRA for precise lighting control.", elem_id="subtitle")
     
     with gr.Row():
         with gr.Column(scale=1):
@@ -1223,4 +1229,4 @@ with gr.Blocks() as demo:
     
 if __name__ == "__main__":
     head = '<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>'
-    demo.launch(head=head, css=css, theme=orange_red_theme, mcp_server=True, ssr_mode=False, show_error=True)
+    demo.launch(head=head, css=css, theme=purple_theme, mcp_server=True, ssr_mode=False, show_error=True)