Update app.py

app.py

@@ -364,13 +364,13 @@ label {
 """
 
 # Create Gradio interface
-with gr.Blocks(css=custom_css, theme=gr.themes.Soft(), title="🎮 Besiege Machine Generator") as demo:
+with gr.Blocks(css=custom_css, theme=gr.themes.Soft(), title="🎮 BesiegeField Machine Generator") as demo:
     
     # Header
     gr.HTML("""
         <div class="header-box">
-            <h1>🎮 Besiege Machine Generator</h1>
-            <p>Generate your Besiege machine designs with AI</p>
+            <h1 style="color: white;">🎮 BesiegeField Machine Generator</h1>
+            <p style="color: white; opacity: 0.9;">Generate your Besiege machine designs with AI</p>
             <span class="badge">✨ Powered by DeepSeek AI</span>
         </div>
     """)
@@ -424,7 +424,9 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft(), title="🎮 Besiege Machi
                             info="Maximum length of generation"
                         )
                     
-                    generate_btn = gr.Button("🚀 Generate Machine", variant="primary", size="lg")
+                    with gr.Row():
+                        generate_btn = gr.Button("🚀 Generate Machine", variant="primary", size="lg")
+                        help_btn = gr.Button("📖 Help Video", variant="secondary")
             
             status_output = gr.Markdown(label="Status")
             
@@ -453,6 +455,96 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft(), title="🎮 Besiege Machi
                 file_path = save_xml_to_file(xml_str) if xml_str else None
                 return ai_resp, xml_str, status, file_path
             
+            # Help Modal
+            help_modal = gr.HTML(visible=False, value="""
+                <div id="help-modal" style="
+                    position: fixed;
+                    z-index: 2000;
+                    left: 0;
+                    top: 0;
+                    width: 100%;
+                    height: 100%;
+                    background-color: rgba(0, 0, 0, 0.8);
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                ">
+                    <div style="
+                        background: white;
+                        border-radius: 15px;
+                        width: 90%;
+                        max-width: 900px;
+                        padding: 30px;
+                    ">
+                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
+                            <h2 style="color: #333; margin: 0;">📖 Help Tutorial</h2>
+                            <button onclick="this.closest('#help-modal').style.display='none'" style="
+                                background: none;
+                                border: none;
+                                font-size: 30px;
+                                color: #666;
+                                cursor: pointer;
+                                width: 40px;
+                                height: 40px;
+                                border-radius: 50%;
+                            ">&times;</button>
+                        </div>
+                        <div style="position: relative; width: 100%; padding-bottom: 56.25%; background: #000; border-radius: 10px; overflow: hidden;">
+                            <video controls style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
+                                <source src="help.mp4" type="video/mp4">
+                                Your browser does not support video playback.
+                            </video>
+                        </div>
+                    </div>
+                </div>
+            """)
+            
+            def show_help():
+                return gr.HTML(visible=True, value="""
+                    <div id="help-modal" style="
+                        position: fixed;
+                        z-index: 2000;
+                        left: 0;
+                        top: 0;
+                        width: 100%;
+                        height: 100%;
+                        background-color: rgba(0, 0, 0, 0.8);
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                    ">
+                        <div style="
+                            background: white;
+                            border-radius: 15px;
+                            width: 90%;
+                            max-width: 900px;
+                            padding: 30px;
+                        ">
+                            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
+                                <h2 style="color: #333; margin: 0;">📖 Help Tutorial</h2>
+                                <button onclick="this.closest('#help-modal').style.display='none'" style="
+                                    background: none;
+                                    border: none;
+                                    font-size: 30px;
+                                    color: #666;
+                                    cursor: pointer;
+                                    width: 40px;
+                                    height: 40px;
+                                    border-radius: 50%;
+                                ">&times;</button>
+                            </div>
+                            <div style="position: relative; width: 100%; padding-bottom: 56.25%; background: #000; border-radius: 10px; overflow: hidden;">
+                                <video controls autoplay style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
+                                    <source src="help.mp4" type="video/mp4">
+                                    Your browser does not support video playback.
+                                </video>
+                            </div>
+                        </div>
+                    </div>
+                """)
+            
+            help_btn.click(fn=show_help, outputs=help_modal)
+            
             generate_btn.click(
                 fn=generate_and_save,
                 inputs=[user_input, temperature, max_tokens],