Update gradio_app.py

gradio_app.py

@@ -133,12 +133,12 @@ def build_model_viewer_html(save_folder, height=660, width=790, textured=False):
         f.write(template_html)
 
     rel_path = os.path.relpath(output_html_path, SAVE_DIR)
-    iframe_tag = f'<iframe src="/static/{rel_path}" height="{height}" width="100%" frameborder="0"></iframe>'
+    iframe_tag = f'<iframe src="/static/{rel_path}" height="{height}" width="100%" frameborder="0" style="border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);"></iframe>'
     print(
         f'Find html file {output_html_path}, {os.path.exists(output_html_path)}, relative HTML path is /static/{rel_path}')
 
     return f"""
-        <div style='height: {height}; width: 100%;'>
+        <div style='height: {height}px; width: 100%; display: flex; justify-content: center; align-items: center; padding: 10px; background: #f9f9f9; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);'>
         {iframe_tag}
         </div>
     """
@@ -372,7 +372,7 @@ def build_app():
         title = title.replace(':', '-Turbo: Fast ')
 
     title_html = f"""
-    <div style="font-size: 2em; font-weight: bold; text-align: center; margin-bottom: 5px">
+    <div style="font-size: 2.5em; font-weight: bold; text-align: center; margin-bottom: 15px; background: linear-gradient(90deg, #4a90e2, #9013fe); -webkit-background-clip: text; color: transparent; padding: 10px; border-radius: 8px;">
     {title}
     </div>
     <div align="center">
@@ -382,17 +382,55 @@ def build_app():
     """
     custom_css = """
     .app.svelte-wpkpf6.svelte-wpkpf6:not(.fill_width) {
-        max-width: 1480px;
+        max-width: 1500px;
+        background-color: #f0f4f8;
+        padding: 20px;
+        border-radius: 12px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     }
     .mv-image button .wrap {
-        font-size: 10px;
+        font-size: 12px;
+        background-color: #ffffff;
+        border-radius: 6px;
+        padding: 5px;
+        transition: all 0.3s ease;
+    }
+    .mv-image button:hover .wrap {
+        background-color: #e0e7ff;
+        color: #4a90e2;
     }
     .mv-image .icon-wrap {
-        width: 20px;
+        width: 22px;
+        background-color: #f0f4f8;
+        border-radius: 50%;
+    }
+    .gr-button {
+        background-color: #4a90e2;
+        color: white;
+        border-radius: 8px;
+        padding: 10px 20px;
+        transition: all 0.3s ease;
+    }
+    .gr-button:hover {
+        background-color: #357abd;
+        transform: translateY(-2px);
+    }
+    .gr-slider, .gr-dropdown, .gr-checkbox, .gr-number {
+        border-color: #d1d5db;
+        border-radius: 8px;
+        background-color: #ffffff;
+    }
+    .gr-tab {
+        background-color: #e5e7eb;
+        border-radius: 8px;
+        padding: 5px;
+    }
+    .gr-tab:hover, .gr-tab:active {
+        background-color: #d1d5db;
     }
     """
 
-    with gr.Blocks(theme=gr.themes.Base(), title='Hunyuan-3D-2.0', analytics_enabled=False, css=custom_css) as demo:
+    with gr.Blocks(theme=gr.themes.Soft(), title='Hunyuan-3D-2.0', analytics_enabled=False, css=custom_css) as demo:
         gr.HTML(title_html)
 
         with gr.Row():
@@ -501,22 +539,22 @@ def build_app():
                                         label=None, examples_per_page=6)
 
         gr.HTML(f"""
-        <div align="center">
+        <div align="center" style="background-color: #e0e7ff; padding: 10px; border-radius: 8px; margin-top: 10px;">
         Activated Model - Shape Generation ({args.model_path}/{args.subfolder}) ; Texture Generation ({'Hunyuan3D-2' if HAS_TEXTUREGEN else 'Unavailable'})
         </div>
         """)
         if not HAS_TEXTUREGEN:
             gr.HTML("""
-            <div style="margin-top: 5px;"  align="center">
-                <b>Warning: </b>
+            <div style="margin-top: 5px; background-color: #fff3f3; padding: 10px; border-radius: 8px; border: 1px solid #fee2e2;" align="center">
+                <b style="color: #dc2626;">Warning: </b>
                 Texture synthesis is disable due to missing requirements,
                  please install requirements following <a href="https://github.com/Tencent/Hunyuan3D-2?tab=readme-ov-file#install-requirements">README.md</a>to activate it.
             </div>
             """)
         if not args.enable_t23d:
             gr.HTML("""
-            <div style="margin-top: 5px;"  align="center">
-                <b>Warning: </b>
+            <div style="margin-top: 5px; background-color: #fff3f3; padding: 10px; border-radius: 8px; border: 1px solid #fee2e2;" align="center">
+                <b style="color: #dc2626;">Warning: </b>
                 Text to 3D is disable. To activate it, please run `python gradio_app.py --enable_t23d`.
             </div>
             """)
@@ -676,10 +714,10 @@ if __name__ == '__main__':
     HTML_HEIGHT = 690 if MV_MODE else 650
     HTML_WIDTH = 500
     HTML_OUTPUT_PLACEHOLDER = f"""
-    <div style='height: {650}px; width: 100%; border-radius: 8px; border-color: #e5e7eb; border-style: solid; border-width: 1px; display: flex; justify-content: center; align-items: center;'>
-      <div style='text-align: center; font-size: 16px; color: #6b7280;'>
-        <p style="color: #8d8d8d;">Welcome to Hunyuan3D!</p>
-        <p style="color: #8d8d8d;">No mesh here.</p>
+    <div style='height: {650}px; width: 100%; border-radius: 8px; border-color: #e5e7eb; border-style: solid; border-width: 1px; display: flex; justify-content: center; align-items: center; background-color: #ffffff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);'>
+      <div style='text-align: center; font-size: 18px; color: #4a5568;'>
+        <p style="color: #718096;">Welcome to Hunyuan3D!</p>
+        <p style="color: #718096;">No mesh here.</p>
       </div>
     </div>
     """