Sync from Bria-AI/huggingface-demos @ 0063f59

app.py

@@ -765,30 +765,54 @@ def create_camera_3d_component(value=None, imageUrl=None, **kwargs):
 
 # --- UI ---
 css = """
+#bria-header {
+  display: flex; align-items: center; gap: 18px;
+  padding: 20px 24px; margin-bottom: 12px;
+  background: linear-gradient(120deg, #ffffff 0%, #f3ecff 100%);
+  border: 1px solid rgba(83, 0, 201, 0.12); border-radius: 18px;
+}
+.dark #bria-header { background: linear-gradient(120deg, #1a1330 0%, #241640 100%); border-color: rgba(138, 61, 255, 0.25); }
+#bria-header img { height: 50px; width: auto; }
+#bria-header .title-block h1 { margin: 0; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; color: #1c0050; }
+.dark #bria-header .title-block h1 { color: #f0eafc; }
+#bria-header .title-block p { margin: 4px 0 0 0; font-size: 0.92rem; color: #6b6580; }
+.dark #bria-header .title-block p { color: #b3abc9; }
+#bria-header .pill {
+  display: inline-block; margin-top: 8px; padding: 3px 12px;
+  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
+  color: #5300C9; background: rgba(83, 0, 201, 0.09); border-radius: 999px;
+}
+.dark #bria-header .pill { color: #c9a6ff; background: rgba(138, 61, 255, 0.15); }
+#bria-footer { margin-top: 18px; text-align: center; font-size: 0.85rem; color: #6b6580; line-height: 1.7; }
+#bria-footer a { color: #5300C9; text-decoration: none; font-weight: 600; }
+#bria-footer a:hover { text-decoration: underline; }
+.dark #bria-footer { color: #b3abc9; }
+.dark #bria-footer a { color: #c9a6ff; }
+
 :root {
-  --name: citrus;
-  --primary-50: #fffbeb;
-  --primary-100: #fef3c7;
-  --primary-200: #fde68a;
-  --primary-300: #fcd34d;
-  --primary-400: #fbbf24;
-  --primary-500: #f59e0b;
-  --primary-600: #d97706;
-  --primary-700: #b45309;
-  --primary-800: #92400e;
-  --primary-900: #78350f;
-  --primary-950: #6c370f;
-  --secondary-50: #fffbeb;
-  --secondary-100: #fef3c7;
-  --secondary-200: #fde68a;
-  --secondary-300: #fcd34d;
-  --secondary-400: #fbbf24;
-  --secondary-500: #f59e0b;
-  --secondary-600: #d97706;
-  --secondary-700: #b45309;
-  --secondary-800: #92400e;
-  --secondary-900: #78350f;
-  --secondary-950: #6c370f;
+  --name: bria;
+  --primary-50: #f3ebff;
+  --primary-100: #e4d3ff;
+  --primary-200: #c9a6ff;
+  --primary-300: #a86bff;
+  --primary-400: #8a3dff;
+  --primary-500: #5300C9;
+  --primary-600: #4700ab;
+  --primary-700: #37008a;
+  --primary-800: #28006b;
+  --primary-900: #1c0050;
+  --primary-950: #120038;
+  --secondary-50: #f3ebff;
+  --secondary-100: #e4d3ff;
+  --secondary-200: #c9a6ff;
+  --secondary-300: #a86bff;
+  --secondary-400: #8a3dff;
+  --secondary-500: #5300C9;
+  --secondary-600: #4700ab;
+  --secondary-700: #37008a;
+  --secondary-800: #28006b;
+  --secondary-900: #1c0050;
+  --secondary-950: #120038;
   --neutral-50: #fafaf9;
   --neutral-100: #f5f5f4;
   --neutral-200: #e7e5e4;
@@ -1120,16 +1144,28 @@ def update_dimensions_on_upload(image: Optional[Image.Image]) -> Tuple[int, int]
     return new_width, new_height
 
 
-with gr.Blocks() as demo:
-    gr.Markdown("""
-    ## 🎬 Fibo Edit — Camera Angle Control
+def _load_logo():
+    """Embed the bundled logo as a data URI so the header never depends on an external CDN."""
+    try:
+        with open(os.path.join(os.path.dirname(__file__), "bria_logo.png"), "rb") as f:
+            return "data:image/png;base64," + base64.b64encode(f.read()).decode("utf-8")
+    except Exception:
+        return "https://cdn.sanity.io/images/zppcnj0l/production/d0f4aef10abdcc4bacaebeade789ea8c3e453882-210x132.png"
 
-    Fibo Edit with Multi-Angle LoRA for precise camera control ✨
-    Control rotation, tilt, and zoom to generate images from any angle 🎥
 
-    ### Fine-tuning data was created by [Lovis](https://huggingface.co/fal/Qwen-Image-Edit-2511-Multiple-Angles-LoRA) and UI by [Apolinario](https://huggingface.co/spaces/multimodalart/qwen-image-multiple-angles-3d-camera)
-    
-    """)
+BRIA_LOGO = _load_logo()
+
+with gr.Blocks() as demo:
+    gr.HTML(f'''
+        <div id="bria-header">
+            <img src="{BRIA_LOGO}" alt="BRIA logo" />
+            <div class="title-block">
+                <h1>Camera Angle Control</h1>
+                <p>Fibo Edit + Multi-Angle LoRA — control rotation, tilt, and zoom to re-shoot any image from a new angle.</p>
+                <span class="pill">Open model · Fibo Edit</span>
+            </div>
+        </div>
+    ''')
 
     with gr.Row():
         with gr.Column(scale=1):
@@ -1345,6 +1381,18 @@ with gr.Blocks() as demo:
         )
 
     # API endpoints for the two-stage inference process
+    gr.HTML("""
+        <div id="bria-footer">
+            <p>
+                Fibo Edit with the Multi-Angle LoRA, on licensed data.
+                Fine-tuning data by <a href="https://huggingface.co/fal/Qwen-Image-Edit-2511-Multiple-Angles-LoRA" target="_blank">Lovis</a>
+                and 3D-camera UI by <a href="https://huggingface.co/spaces/multimodalart/qwen-image-multiple-angles-3d-camera" target="_blank">Apolinario</a>.<br/>
+                <a href="https://huggingface.co/briaai/FIBO-Edit" target="_blank">Fibo Edit model</a> ·
+                <a href="https://bria.ai" target="_blank">Bria AI</a>
+            </p>
+        </div>
+    """)
+
     gr.api(fetch_structured_caption, api_name="fetch_caption")
     gr.api(generate_image_from_caption, api_name="generate_image")