beatify profile

app.py

@@ -397,53 +397,95 @@ body {
     padding: 0 1rem;
 }
 
-.header {
-    padding: 0 !important;
-    border-radius: 10px; /* 整个 Header 的圆角 */
-    overflow: hidden;    /* 隐藏超出圆角部分的内容，非常重要！ */
+/* Main header with blue background */
+#main-header {
+    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #60a5fa 100%) !important;
+    padding: 60px 40px !important;
+    border-radius: 0 !important;
+    margin-bottom: 2rem !important;
+    text-align: center;
+}
+
+#header-content {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+/* Main title */
+#main-title {
+    color: white !important;
+    font-size: 48px !important;
+    font-weight: 700 !important;
+    margin: 0 0 10px 0 !important;
+    text-align: center;
+    letter-spacing: -1px;
+}
+
+#main-title h1 {
+    color: white !important;
+    font-size: 48px !important;
+    font-weight: 700 !important;
+    margin: 0 !important;
+    text-align: center;
+    letter-spacing: -1px;
+}
+
+/* Subtitle */
+#subtitle {
+    color: rgba(255, 255, 255, 0.9) !important;
+    font-size: 18px !important;
+    font-weight: 400 !important;
+    margin: 0 0 40px 0 !important;
+    text-align: center;
 }
 
-/* 2. 行容器：使用 Flex 布局，让左右两部分等高 */
-#header-row {
+#subtitle p {
+    color: rgba(255, 255, 255, 0.9) !important;
+    font-size: 18px !important;
+    margin: 0 !important;
+}
+
+/* Button row */
+#button-row {
     display: flex;
-    align-items: stretch; /* 让子项高度自动拉伸以填满容器 */
+    justify-content: center;
+    gap: 12px;
+    flex-wrap: wrap;
+    margin-top: 30px;
 }
 
-/* 3. Logo 容器：移除 Gradio 默认的所有样式，让它变成一个纯净的盒子 */
-#logo-container {
-    padding: 0 !important;
+.header-btn {
+    padding: 12px 24px !important;
+    border-radius: 6px !important;
+    font-weight: 600 !important;
+    font-size: 14px !important;
     border: none !important;
-    background: none !important;
-    box-shadow: none !important;
-    min-width: 150px; /* 给 Logo 区域一个固定的最小宽度 */
-    flex-shrink: 0;   /* 防止在空间不足时被压缩 */
+    cursor: pointer;
+    transition: all 0.3s ease !important;
+    min-width: 120px;
 }
 
-/* 4. Logo 图片本身：让图片填满它的容器，就像背景图一样 */
-#logo-container img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover; /* 裁剪并填充，保持宽高比，确保填满容器 */
-    display: block;    /* 移除图片底部的微小空隙 */
+.header-btn-secondary {
+    background: rgba(255, 255, 255, 0.15) !important;
+    color: white !important;
+    backdrop-filter: blur(10px);
 }
 
-/* 5. 标题区域：设置背景、内边距和文本对齐 */
-#title-area {
-    background: linear-gradient(to right, #5e57c2, #42a5f5); /* 右侧的渐变背景 */
-    padding: 20px 25px; /* 给标题文本留出足够的空间 */
-    display: flex;
-    flex-direction: column;
-    justify-content: center; /* 垂直居中标题 */
-    flex-grow: 1; /* 占据所有剩余空间 */
+.header-btn-secondary:hover {
+    background: rgba(255, 255, 255, 0.25) !important;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
 }
 
-/* 6. title */
-#header-title h1 {
-    color: white;
-    font-size: 28px;
-    margin: 0;
-    font-weight: 600;
-    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
+.header-btn-primary {
+    background: #fbbf24 !important;
+    color: #1e3a8a !important;
+}
+
+.header-btn-primary:hover {
+    background: #f59e0b !important;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4) !important;
 }
 
 .tabs {
@@ -651,12 +693,26 @@ input[type="text"]:focus, textarea:focus {
 }
 
 @media (max-width: 768px) {
-    .header h1 {
-        font-size: 2.2rem;
+    #main-header {
+        padding: 40px 20px !important;
+    }
+    
+    #main-title h1 {
+        font-size: 32px !important;
+    }
+    
+    #subtitle p {
+        font-size: 16px !important;
     }
     
-    .header p {
-        font-size: 1rem;
+    #button-row {
+        gap: 8px;
+    }
+    
+    .header-btn {
+        padding: 10px 16px !important;
+        font-size: 12px !important;
+        min-width: 100px;
     }
     
     .gradio-container {
@@ -672,22 +728,33 @@ input[type="text"]:focus, textarea:focus {
 
 
 with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
-    with gr.Column(elem_classes="header"):
-        with gr.Row(elem_id="header-row", variant="compact"):
-            # Load logo if available, otherwise hide the component to avoid showing upload interface
-            # Note: gr.Image with value=None shows upload interface, so we use visible=False if no logo
-            logo_exists = logo_path is not None and os.path.exists(logo_path) if logo_path else False
-            logo_image = gr.Image(
-                value=logo_path if logo_exists else None,
-                elem_id="logo-container",
-                show_label=False,
-                show_download_button=False,
-                show_share_button=False,
-                visible=logo_exists
-            ) 
-
-            with gr.Column(elem_id="title-area"):
-                gr.Markdown("# 🎤 Marco-Voice ", elem_id="header-title")
+    # Header section with blue background
+    gr.HTML(
+        """
+        <div align="center" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Microsoft YaHei', sans-serif; padding: 60px 20px; background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #60a5fa 100%); margin-bottom: 2rem;">
+            <h1 style="font-weight: 700; color: #FFFFFF; margin-bottom: 0.25rem; font-size: 2.5rem; text-shadow: 0 2px 4px rgba(0,0,0,0.2);">
+                Marco-Voice-TTS
+            </h1>
+            <p style="margin-top: 0; margin-bottom: 1.5rem;">
+                <a href="https://www.aidc-ai.com" style="font-size: 1.25rem; color: #FBBF24; text-decoration: none; font-weight: 500; text-shadow: 0 1px 2px rgba(0,0,0,0.2);">
+                    Alibaba International Digital Commerce
+                </a>
+            </p>
+    
+            <div style="display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;">
+                <a href="https://github.com/AIDC-AI/Marco-Voice" target="_blank">
+                    <img src="https://img.shields.io/badge/GitHub-Repository-181717?logo=github&style=for-the-badge" alt="GitHub">
+                </a>
+                <a href="https://huggingface.co/AIDC-AI/Marco-Voice" target="_blank">
+                    <img src="https://img.shields.io/badge/Hugging%20Face-Model-FFC107?logo=huggingface&style=for-the-badge" alt="Hugging Face Model">
+                </a>
+                <a href="https://huggingface.co/spaces/AIDC-AI/Marco-Voice-TTS" target="_blank">
+                    <img src="https://img.shields.io/badge/Demo-HF%20Space-E67E22?logo=huggingface&style=for-the-badge" alt="Demo HF Space">
+                </a>
+            </div>
+        </div>
+        """
+    )
         
     with gr.Tabs(elem_classes="tabs") as tabs:
         with gr.TabItem("😄 Control of emotion", id=0):