fix front: models placement

app.py

@@ -933,7 +933,6 @@ h3.card-title {{
 }}
 """
 
-# interface
 with gr.Blocks(
     title="Nestlé 3D Generator",
     css=ADVANCED_CSS,
@@ -950,79 +949,37 @@ with gr.Blocks(
     gr.HTML(create_header())
     
     with gr.Row():
+        # Coluna de inputs
         with gr.Column(scale=1):
-            with gr.Group():
-                gr.HTML("""
-                <div class="card-header">
-                    <h3 class="card-title">📤 Product Image Upload</h3>
-                    <p class="card-description">Upload a clear image of your Nestlé product</p>
-                </div>
-                """)
-                
-                image_prompts = gr.Image(
-                    label="",
-                    type="filepath",
-                    show_label=False,
-                    height=350,
-                    elem_classes=["upload-area"]
-                )
+            gr.HTML("""
+            <div class="card-header">
+                <h3 class="card-title">📤 Product Image Upload</h3>
+                <p class="card-description">Upload a clear image of your Nestlé product</p>
+            </div>
+            """)
+            image_prompts = gr.Image(label="", type="filepath", show_label=False, height=350, elem_classes=["upload-area"])
             
-            # Settings Card
-            with gr.Group():
-                gr.HTML("""
-                <div class="card-header">
-                    <h3 class="card-title">⚙️ Generation Settings</h3>
-                    <p class="card-description">Configure your 3D model generation</p>
-                </div>
-                """)
-                
-                text_prompt = gr.Textbox(label="Prompt", placeholder="Enter your prompt", value="high quality")
-
-                with gr.Row():
-                    randomize_seed = gr.Checkbox(
-                        label="🎲 Randomize Seed",
-                        value=True
-                    )
-                    seed = gr.Slider(
-                        label="Seed Value",
-                        minimum=0,
-                        maximum=MAX_SEED,
-                        step=1,
-                        value=0
-                    )
-                
-                num_inference_steps = gr.Slider(
-                    label="🔄 Inference Steps",
-                    minimum=8,
-                    maximum=50,
-                    step=1,
-                    value=50,
-                    info="Higher values = better quality, slower generation"
-                )
-                
-                guidance_scale = gr.Slider(
-                    label="🎯 Guidance Scale",
-                    minimum=0.0,
-                    maximum=20.0,
-                    step=0.1,
-                    value=7.0,
-                    info="Controls how closely the model follows the input"
-                )
-
-                with gr.Row():
-                    reduce_face = gr.Checkbox(
-                        label="🔧 Optimize Mesh",
-                        value=True,
-                        info="Reduce polygon count for better performance"
-                    )
-                    target_face_num = gr.Slider(
-                        label="Target Faces",
-                        maximum=1_000_000,
-                        minimum=10_000,
-                        value=DEFAULT_FACE_NUMBER,
-                        step=1000
-                    )
-
+            gr.HTML("""
+            <div class="card-header">
+                <h3 class="card-title">⚙️ Generation Settings</h3>
+                <p class="card-description">Configure your 3D model generation</p>
+            </div>
+            """)
+            text_prompt = gr.Textbox(label="Prompt", placeholder="Enter your prompt", value="high quality")
+            with gr.Row():
+                randomize_seed = gr.Checkbox(label="🎲 Randomize Seed", value=True)
+                seed = gr.Slider(label="Seed Value", minimum=0, maximum=MAX_SEED, step=1, value=0)
+            num_inference_steps = gr.Slider(label="🔄 Inference Steps", minimum=8, maximum=50, step=1, value=50,
+                                            info="Higher values = better quality, slower generation")
+            guidance_scale = gr.Slider(label="🎯 Guidance Scale", minimum=0.0, maximum=20.0, step=0.1, value=7.0,
+                                       info="Controls how closely the model follows the input")
+            with gr.Row():
+                reduce_face = gr.Checkbox(label="🔧 Optimize Mesh", value=True,
+                                          info="Reduce polygon count for better performance")
+                target_face_num = gr.Slider(label="Target Faces", minimum=10_000, maximum=1_000_000,
+                                           value=DEFAULT_FACE_NUMBER, step=1_000)
+
+        # Coluna de saída com abas nativas Gradio
         with gr.Column(scale=2):
             gr.HTML("""
             <div class="card-header">
@@ -1031,67 +988,43 @@ with gr.Blocks(
             </div>
             """)
             
-            # CT React-like
-            gr.HTML(create_tabs())
-            
-            # PB
-            gr.HTML(create_progress_bar())
-            
-            # Hidden Gradio components for actual functionality
-            with gr.Row(visible=True):
-                seg_image = gr.Image(type="pil", format="png", interactive=False)
-                model_output = gr.Model3D(interactive=False)
-                textured_model_output = gr.Model3D(interactive=False)
-
-    # Action Buttons
+            with gr.Tabs():
+                with gr.TabItem("🔍 Segmentation"):
+                    seg_image = gr.Image(type="pil", format="png", interactive=False)
+                with gr.TabItem("🎨 3D Model"):
+                    model_output = gr.Model3D(interactive=False)
+                with gr.TabItem("✨ Textured Model"):
+                    textured_model_output = gr.Model3D(interactive=False)
+
+    # Botões de ação
     with gr.Row():
-        gen_button = gr.Button(
-            "🚀 Generate 3D Model",
-            variant="primary",
-            size="lg",
-            elem_classes=["btn", "btn-primary"]
-        )
-        gen_texture_button = gr.Button(
-            "🎨 Apply Texture",
-            variant="secondary",
-            size="lg",
-            interactive=False,
-            elem_classes=["btn", "btn-secondary"]
-        )
-        download_button = gr.Button(
-            "💾 Download Model",
-            variant="secondary",
-            size="lg",
-            elem_classes=["btn", "btn-secondary"]
-        )
+        gen_button = gr.Button("🚀 Generate 3D Model", variant="primary", size="lg",
+                               elem_classes=["btn", "btn-primary"])
+        gen_texture_button = gr.Button("🎨 Apply Texture", variant="secondary", size="lg",
+                                       interactive=False, elem_classes=["btn", "btn-secondary"])
+        download_button = gr.Button("💾 Download Model", variant="secondary", size="lg",
+                                    elem_classes=["btn", "btn-secondary"])
 
     status_display = gr.HTML(
         """<div style='text-align: center; padding: 1rem; color: #1e293b;'>
-        <span style='display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #10b981; margin-right: 8px;'></span>
-        Ready to generate your 3D model
+           <span style='display: inline-block; width: 8px; height: 8px; border-radius: 50%;
+                        background: #10b981; margin-right: 8px;'></span>
+           Ready to generate your 3D model
         </div>"""
     )
 
-    # Event Handlers with JavaScript integration
+    # Event handlers continuam iguais, apenas apontando para os objetos seg_image, model_output e textured_model_output
     gen_button.click(
         fn=run_segmentation,
         inputs=[image_prompts],
         outputs=[seg_image],
-        # js="() => { simulateProgress(); document.getElementById('progress-container').style.display = 'block'; }",
     ).then(
         get_random_seed,
         inputs=[randomize_seed, seed],
         outputs=[seed],
     ).then(
         image_to_3d,
-        inputs=[
-            seg_image,
-            seed,
-            num_inference_steps,
-            guidance_scale,
-            reduce_face,
-            target_face_num
-        ],
+        inputs=[seg_image, seed, num_inference_steps, guidance_scale, reduce_face, target_face_num],
         outputs=[model_output]
     ).then(
         fn=lambda: gr.Button(interactive=True),
@@ -1103,22 +1036,9 @@ with gr.Blocks(
         inputs=[image_prompts, model_output, seed, text_prompt],
         outputs=[textured_model_output]
     )
-    
-    # with gr.Row():
-    #     examples = gr.Examples(
-    #         examples=[
-    #             f"./examples/{image}"
-    #             for image in os.listdir(f"./examples/")
-    #         ],
-    #         fn=run_full,
-    #         inputs=[image_prompts],
-    #         outputs=[seg_image, model_output, textured_model_output],
-    #         cache_examples=False,
-    #     )
 
     demo.load(start_session)
     demo.unload(end_session)
 
-
 if __name__ == "__main__":
     demo.launch(share=False, show_error=True)