Replace H1 title with theme-aware logo (600px, centered)

app.py

@@ -1550,12 +1550,26 @@ CSS = """
 #col-container { max-width: 1300px; margin: 0 auto; }
 .dark .gradio-container { color: var(--body-text-color); }
 .html-container{padding: 0}
+.mm3-logo { display: block; margin: 8px auto 0; width: 600px; max-width: 100%; }
+.mm3-logo-dark { display: none; }
+.dark .mm3-logo-light { display: none; }
+.dark .mm3-logo-dark { display: block; }
 """
 
+import base64
+
+_LOGO_LIGHT_B64 = base64.b64encode(open("logo_light.png", "rb").read()).decode()
+_LOGO_DARK_B64 = base64.b64encode(open("logo_dark.png", "rb").read()).decode()
+
 with gr.Blocks(theme=gr.themes.Citrus(), css=CSS) as demo:
     with gr.Column(elem_id="col-container"):
+        gr.HTML(
+            '<img src="data:image/png;base64,' + _LOGO_LIGHT_B64 + '" class="mm3-logo mm3-logo-light" alt="MiniMax Music 3">'
+            '<img src="data:image/png;base64,' + _LOGO_DARK_B64 + '" class="mm3-logo mm3-logo-dark" alt="MiniMax Music 3">',
+            container=False,
+            padding=False,
+        )
         gr.Markdown(
-            "# MiniMax Music 3\n"
             "MiniMax Music 3.0 is a music generation model designed to support the creation of full-length songs. "
             "[[model]](https://huggingface.co/MiniMaxAI/MiniMax-Music3) "
             "[[project]](https://minimax-ai.github.io/music3-demo/) "