upload Video2MC.png, update Markdown

app.py

@@ -16,49 +16,187 @@ def Video2MC(video, progress=gr.Progress(track_tqdm=True)):
 with gr.Blocks() as iface:
 
     text1 = gr.Markdown(
-                        """
+                        f"""
                         <div align=center>
-                        <img src="https://github.com/Balloon-356/Video2MC/assets/114230565/2622c7b7-7b5d-458c-bd9a-dc0be37af370" />
-                        # </div>
-                        """
-                        # <h1 align="center">Video2MC: 基于3D人体姿态估计的MC动画自动生成</h1>
-                        )
-    text2 = gr.Markdown(
-                        """
-                        <h1 align="center">Video2MC: 3D-HPE based Mine-imator animation generation</h1>
-                        
-                        Github: https://github.com/Balloon-356/Video2MC
-
-                        My Bilibili (Contact): https://space.bilibili.com/244384103
-
-                        Introduction：https://www.bilibili.com/video/BV1SP411W7pw
-                        
-                        implementation details：https://www.bilibili.com/read/cv25704198
-                        
-                        Using computer vision algorithms, I have achieved cost-effective "motion capture," and I am now officially releasing the Video2MC algorithm for automatic generation of Mine-imator animations!
-                        
-                        Enjoy it!
+                        <img src="https://huggingface.co/spaces/Sapphire-356/Video2MC/blob/main/Video2MC.png" />
+                        </div>
                         """
-                        # 
                         )
-    
-    with gr.Row():
-
-        with gr.Column():
-            input_video = gr.Video()
-            with gr.Row():
-                btn_c = gr.ClearButton(input_video)
-                btn_s = gr.Button("Submit", variant='primary')
-            gr.Examples([os.path.join(os.path.dirname(__file__), 
-                    "input_videos/kun_test_5sec.mp4")], input_video)
+
+    with gr.Tab("English"):
+
+        text2 = gr.Markdown(
+                            """
+                            <h1 align="center">Video2MC: 3D-HPE based Mine-imator animation generation</h1>
+                            
+
+                            ## Introduction
+                            
+                            Using computer vision algorithms, I have achieved cost-effective "motion capture," and I am now officially releasing the Video2MC algorithm for automatic generation of Mine-imator animations!
+                            
+                            Before using, it is **highly recommended** to watch my [introductory video](https://www.bilibili.com/video/BV1SP411W7pw), as it will help you quickly understand what this project is about.
+
+                            Enjoy it!
+
+                            """
+                            )
+        
+        with gr.Accordion("Related Links", open=False):
+
+            text_req = gr.Markdown(
+                """
+                ## Related Links
+
+                Github: https://github.com/Balloon-356/Video2MC
+
+                My Bilibili (Contact): https://space.bilibili.com/244384103
+
+                **Introductory video:** https://www.bilibili.com/video/BV1SP411W7pw
+                
+                Implementation details: https://www.bilibili.com/read/cv25704198
+
+                """
+            )
+        
+        with gr.Accordion("How to Use", open=False):
+
+            text_req = gr.Markdown(
+                """
+                ## How to Use
+
+                1. Upload a video by dragging it into the box on the bottom left. The video must meet the **requirements**.
+                
+                2. Click "Submit", and the algorithm will start running. Please wait patiently, and you can see the current progress in the box on the right. (A 5s video takes about 5min.)
+
+                3. Algorithm finished. You can download the .miframes file and preview the video rendered by the 3D-HPE algorithm (for previewing motion capture results).
+                
+                4. Import the .miframes file into the Mine-imator to create a Minecraft animation (you can learn how to use it on the Mine-imator forums).
+
+                5. Fine-tune the motions of the skeleton model in Mine-imator.
+
+                """
+            )
+
+        with gr.Accordion("Video Requirements", open=False):
+
+            text_req = gr.Markdown(
+                """
+                ## Video Requirements
+
+                1. Please upload short videos, preferably not exceeding 10 seconds. (Otherwise, the algorithm will run for several tens of mins and it still works.)
+                            
+                2. The video should only contain one person, positioned at the center of the frame, fully visible from head to toe, facing the camera.
+
+                3. Just as shown in the "example" below.
+
+                """
+            )
+        
+        with gr.Row():
+
+            with gr.Column():
+                input_video = gr.Video()
+                with gr.Row():
+                    btn_c = gr.ClearButton(input_video)
+                    btn_s = gr.Button("Submit", variant='primary')
+                gr.Examples([os.path.join(os.path.dirname(__file__), 
+                        "input_videos/kun_test_5sec.mp4")], input_video)
+                
+            with gr.Column():
+                output_miframes = gr.File()
+                output_path = gr.Text()
+                output_video = gr.Video()
+            
             
-        with gr.Column():
-            output_miframes = gr.File()
-            output_path = gr.Text()
-            output_video = gr.Video()
+        btn_s.click(Video2MC, inputs=[input_video], outputs=[output_miframes, output_path, output_video])
+
+
+    with gr.Tab("中文"):
+
+        text2 = gr.Markdown(
+                            """
+                            <h1 align="center">Video2MC：基于3D-HPE的MC动画自动生成</h1>
+                            
+                            ## 简单介绍
+
+                            利用计算机视觉算法，我实现了低成本“动作捕捉”，在此正式发布MC动画自动生成算法Video2MC！
+
+                            使用前，强烈建议先观看我的[B站视频](https://www.bilibili.com/video/BV1SP411W7pw)，快速了解该项目的用法。
+
+                            """
+                            )
         
+
+        with gr.Accordion("相关链接", open=False):
+
+            text_req = gr.Markdown(
+                """
+                ## 相关链接
+
+                Github项目：https://github.com/Balloon-356/Video2MC
+
+                B站帐号（私信联系）：https://space.bilibili.com/244384103
+
+                **介绍视频：** https://www.bilibili.com/video/BV1SP411W7pw
+
+                实现原理：https://www.bilibili.com/read/cv25704198
+
+                """
+            )
         
-    btn_s.click(Video2MC, inputs=[input_video], outputs=[output_miframes, output_path, output_video])
+        with gr.Accordion("使用说明", open=False):
+
+            text_req = gr.Markdown(
+                """
+                ## 使用说明
+
+                1. 上传一段视频（拖入下方左侧的框中）。视频需要满足“视频要求”。
+
+                2. 点击“Submit”提交视频，此时算法开始运行。请耐心等待，右侧的框中将显示算法运行的进度。（5s的视频大约需要5分钟）
+
+                3. 运行结束。可以在右侧的框中下载.miframes文件，并且可以通过算法渲染得到的骨架动作视频预览效果。
+
+                4. 将.miframes文件导入到Mine-imator软件中，生成一段动画。（导入方法可在互联网上查询）
+
+                5. 微调人物动作，导出动画。
+
+                """
+            )
+
+        with gr.Accordion("视频要求", open=False):
+
+            text_req = gr.Markdown(
+                """
+                ## 视频要求
+
+                1. 请尽量上传时长较短的视频（10s内最好），否则算法将运行很长时间。
+
+                2. 视频中应该只包含一个人，且人位于视频中心、全身完整地出现在视频中，面向相机。
+
+                3. 如"example"中展示的视频一样。
+
+                """
+            )
+
+
+
+        with gr.Row():
+
+            with gr.Column():
+                input_video = gr.Video()
+                with gr.Row():
+                    btn_c = gr.ClearButton(input_video)
+                    btn_s = gr.Button("Submit", variant='primary')
+                gr.Examples([os.path.join(os.path.dirname(__file__), 
+                        "input_videos/kun_test_5sec.mp4")], input_video)
+                
+            with gr.Column():
+                output_miframes = gr.File()
+                output_path = gr.Text()
+                output_video = gr.Video()
+            
+            
+        btn_s.click(Video2MC, inputs=[input_video], outputs=[output_miframes, output_path, output_video])
     
 
 iface.queue(concurrency_count=10).launch()