Update app.py

app.py

@@ -10,9 +10,98 @@ from huggingface_hub import hf_hub_download
 from safetensors.torch import load_file
 from PIL import Image
 
-# 用户认证信息
+# 自定义CSS样式
+custom_css = """
+    .container {
+        max-width: 1000px;
+        margin: auto;
+        padding: 20px;
+    }
+    
+    .title {
+        background: linear-gradient(90deg, #00ff87 0%, #60efff 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        font-size: 2.5em;
+        text-align: center;
+        margin-bottom: 1em;
+        font-weight: bold;
+        text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
+    }
+    
+    .subtitle {
+        color: #666;
+        text-align: center;
+        margin-bottom: 2em;
+        font-size: 1.2em;
+    }
+    
+    .warning {
+        color: #ff4b4b;
+        font-weight: bold;
+        text-align: center;
+        padding: 10px;
+        margin: 10px 0;
+        border-radius: 5px;
+        background: rgba(255,75,75,0.1);
+    }
+    
+    .info {
+        color: #4b8bff;
+        text-align: center;
+        padding: 10px;
+        margin: 10px 0;
+        border-radius: 5px;
+        background: rgba(75,139,255,0.1);
+    }
+    
+    .gradio-container {
+        background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
+    }
+    
+    .gr-button {
+        background: linear-gradient(90deg, #00ff87 0%, #60efff 100%);
+        border: none;
+        color: black;
+        font-weight: bold;
+    }
+    
+    .gr-button:hover {
+        background: linear-gradient(90deg, #60efff 0%, #00ff87 100%);
+        transform: translateY(-2px);
+        box-shadow: 0 5px 15px rgba(0,255,135,0.3);
+        transition: all 0.3s ease;
+    }
+    
+    .gr-input, .gr-dropdown {
+        border: 2px solid rgba(96,239,255,0.2);
+        border-radius: 8px;
+        background: rgba(26,26,26,0.9);
+        color: white;
+    }
+    
+    .gr-input:focus, .gr-dropdown:focus {
+        border-color: #00ff87;
+        box-shadow: 0 0 10px rgba(0,255,135,0.3);
+    }
+    
+    .gr-form {
+        background: rgba(42,42,42,0.8);
+        border-radius: 15px;
+        padding: 20px;
+        box-shadow: 0 8px 32px rgba(0,0,0,0.3);
+    }
+    
+    .example-container {
+        background: rgba(255,255,255,0.05);
+        border-radius: 10px;
+        padding: 15px;
+        margin: 10px 0;
+    }
+"""
+
 USERS = {
-    "vip": "vip888",  # 示例用户名和密码
+    "vip": "vip888",  
 }
 
 # Constants
@@ -80,32 +169,41 @@ def generate_image(prompt, base="写实风格", motion="", step=8, progress=gr.P
     return path
 
 # Gradio Interface
-with gr.Blocks(css="style.css") as demo:
+with gr.Blocks(css=custom_css) as demo:
     # 创建两个界面容器
     with gr.Group(visible=True) as login_container:
-        gr.HTML("<h1><center>officechat-视频生成系统</center></h1>")
-        username = gr.Textbox(label="用户名")
-        password = gr.Textbox(label="密码", type="password")
-        login_button = gr.Button("登录")
-        login_msg = gr.Textbox(label="登录状态", interactive=False)
+        gr.HTML("""
+            <div class="container">
+                <h1 class="title">🌟 OfficeChatAI 视频生成系统</h1>
+                <p class="subtitle">欢迎使用AI视频生成系统，让创意转化为现实</p>
+            </div>
+        """)
+        with gr.Group(elem_classes="gr-form"):
+            username = gr.Textbox(label="用户名", placeholder="请输入VIP用户名")
+            password = gr.Textbox(label="密码", type="password", placeholder="请输入密码")
+            login_button = gr.Button("登 录", variant="primary")
+            login_msg = gr.Textbox(label="登录状态", interactive=False)
         
     # 主界面
     with gr.Group(visible=False) as main_container:
-        gr.HTML(
-            "<h1><center>🧩 officechat 即时视频生成系统</center></h1>" +
-            "<h1><center>本项目免费为Office chat VIP提供服务。感谢您使用Officechat</center></h1>" +
-            "<p><center><span style='color: red;'>如果生成效果不理想，可以将步数从4调整到8。</span></center></p>" +
-            "<p><center><strong>首次生成视频需要较长时间，之后会变快。</strong></center></p>" +
-            "<p><center>为获得最佳效果，请参考示例中的提示词格式(英文）。</center></p>"
-        )
-        with gr.Group():
+        gr.HTML("""
+            <div class="container">
+                <h1 class="title">🎬 OfficeChatAI 视频生成工作室</h1>
+                <p class="subtitle">专业的AI视频生成平台 | VIP尊享服务</p>
+                <div class="warning">提示：首次生成视频需要较长时间，后续生成速度会显著提升</div>
+                <div class="info">为获得最佳效果，建议使用英文提示词，参考示例格式</div>
+            </div>
+        """)
+        with gr.Group(elem_classes="gr-form"):
             with gr.Row():
                 prompt = gr.Textbox(
-                    label='提��词'
+                    label='创作提示词',
+                    placeholder='请输入您想要生成的视频场景描述...',
+                    elem_classes="gr-input"
                 )
             with gr.Row():
                 select_base = gr.Dropdown(
-                    label='基础模型',
+                    label='选择基础模型',
                     choices=[
                         "卡通风格", 
                         "写实风格",
@@ -113,64 +211,72 @@ with gr.Blocks(css="style.css") as demo:
                         "动漫风格",
                     ],
                     value=base_loaded,
-                    interactive=True
+                    interactive=True,
+                    elem_classes="gr-dropdown"
                 )
                 select_motion = gr.Dropdown(
-                    label='动作效果',
+                    label='动作特效',
                     choices=[
-                        ("默认", ""),
-                        ("放大", "guoyww/animatediff-motion-lora-zoom-in"),
-                        ("缩小", "guoyww/animatediff-motion-lora-zoom-out"),
+                        ("默认效果", ""),
+                        ("镜头拉近", "guoyww/animatediff-motion-lora-zoom-in"),
+                        ("镜头拉远", "guoyww/animatediff-motion-lora-zoom-out"),
                         ("向上倾斜", "guoyww/animatediff-motion-lora-tilt-up"),
                         ("向下倾斜", "guoyww/animatediff-motion-lora-tilt-down"),
                         ("向左平移", "guoyww/animatediff-motion-lora-pan-left"),
                         ("向右平移", "guoyww/animatediff-motion-lora-pan-right"),
-                        ("向左旋转", "guoyww/animatediff-motion-lora-rolling-anticlockwise"),
-                        ("向右旋转", "guoyww/animatediff-motion-lora-rolling-clockwise"),
+                        ("逆时针旋转", "guoyww/animatediff-motion-lora-rolling-anticlockwise"),
+                        ("顺时针旋转", "guoyww/animatediff-motion-lora-rolling-clockwise"),
                     ],
                     value="guoyww/animatediff-motion-lora-zoom-in",
-                    interactive=True
+                    interactive=True,
+                    elem_classes="gr-dropdown"
                 )
                 select_step = gr.Dropdown(
-                    label='推理步数',
+                    label='生成质量',
                     choices=[
-                        ('1步', 1), 
-                        ('2步', 2),
-                        ('4步', 4),
-                        ('8步', 8),
+                        ('快速模式(1步)', 1), 
+                        ('平衡模式(2步)', 2),
+                        ('高质量(4步)', 4),
+                        ('超高清(8步)', 8),
                     ],
                     value=4,
-                    interactive=True
-                )
-                submit = gr.Button(
-                    value="生成",
-                    scale=1,
-                    variant='primary'
+                    interactive=True,
+                    elem_classes="gr-dropdown"
                 )
+            submit = gr.Button(
+                value="✨ 开始生成",
+                scale=1,
+                variant="primary",
+                elem_classes=["gr-button"]
+            )
+            
         video = gr.Video(
-            label='生成结果',
+            label='创作结果',
             autoplay=True,
             height=512,
             width=512,
-            elem_id="video_output"
+            elem_id="video_output",
+            elem_classes="output-video"
         )
 
-        gr.Examples(
-            examples=[
-            ["主体: 埃菲尔铁塔 (动画: 云朵移动)"], 
-            ["主体: 森林中的树木 (动画: 狮子奔跑)"],
-            ["主体: 太空中的宇航员"],
-            ["主体: 天空中的一群鸟 (动画: 鸟群移动) (远距离拍摄)"],
-            ["主体: 自由女神像 (无人机拍摄) (动画: 无人机靠近雕像)"],
-            ["主体: 森林中的熊猫 (动画: 喝茶)"],
-            ["主体: 孩子们玩耍 (季节: 冬天)"],
-            ["主体: 街道上的汽车 (季节: 下雨, 白天) (远距离拍摄) (动画: 汽车行驶)"]
-        ], 
-            fn=generate_image,
-            inputs=[prompt],
-            outputs=[video],
-            cache_examples="lazy",
-        )
+        with gr.Group(elem_classes="example-container"):
+            gr.HTML("<h3 class='subtitle'>🎯 创作灵感</h3>")
+            gr.Examples(
+                examples=[
+                ["A majestic Eiffel Tower with moving clouds in the background"], 
+                ["A lion running through a dense forest"],
+                ["An astronaut floating in space with stars twinkling"],
+                ["A flock of birds flying in formation against a blue sky"],
+                ["Statue of Liberty viewed from a approaching drone"],
+                ["A cute panda drinking tea in a bamboo forest"],
+                ["Children playing in the snow"],
+                ["Cars driving on a rainy city street"]
+            ], 
+                fn=generate_image,
+                inputs=[prompt],
+                outputs=[video],
+                cache_examples="lazy",
+            )
 
         # 生成按钮事件
         submit.click(