| """ |
| src/ui/layout.py — Gradio Blocks layout definition for the VLA Demo. |
| |
| This module owns *only* the component hierarchy and wiring. |
| Styling → src/ui/styles.py |
| HTML bits → src/ui/components.py |
| Handlers → src/ui/handlers.py |
| Examples → src/ui/examples.py |
| """ |
|
|
| import gradio as gr |
|
|
| from src.ui.styles import CUSTOM_CSS |
| from src.ui.components import HEADER_HTML, FOOTER_HTML |
| from src.ui.handlers import process_pipeline |
| from src.ui.examples import get_demo_examples |
|
|
|
|
| def create_ui() -> gr.Blocks: |
| """ |
| Build and return the Gradio Blocks interface. |
| |
| All sub-modules are imported locally so that this function can be |
| called in isolation for testing without triggering heavy model loads. |
| """ |
| demo_examples = get_demo_examples() |
|
|
| with gr.Blocks( |
| title="VLA — AI Vision Language Action Pipeline | Codevally", |
| theme=gr.themes.Base( |
| primary_hue="blue", |
| secondary_hue="cyan", |
| neutral_hue="slate", |
| font=[gr.themes.GoogleFont("Inter"), "system-ui", "sans-serif"], |
| ), |
| css=CUSTOM_CSS, |
| ) as demo: |
|
|
| |
| gr.HTML(HEADER_HTML) |
|
|
| |
| with gr.Row(equal_height=False): |
|
|
| |
| with gr.Column(scale=1, min_width=300): |
| gr.Markdown("<div class='cv-section-label'>📷 Input</div>") |
| image_input = gr.Image( |
| label="Upload Scene Image", |
| type="numpy", |
| height=280, |
| elem_id="image_upload", |
| ) |
| gr.Markdown( |
| "<div class='cv-section-label' style='margin-top:12px;'>" |
| "💬 Natural Language Command</div>" |
| ) |
| command_input = gr.Textbox( |
| label="Command", |
| placeholder=( |
| 'e.g. "Pick up the defective board and place it in the red bin"' |
| ), |
| lines=3, |
| show_label=False, |
| ) |
| run_btn = gr.Button( |
| "🚀 Run AI Pipeline", |
| variant="primary", |
| size="lg", |
| ) |
| gr.Markdown( |
| "<div class='cv-section-label' style='margin-top:14px;'>" |
| "📊 Pipeline Status</div>" |
| ) |
| status_output = gr.Markdown( |
| value="*Ready — upload a scene image and enter an instruction.*", |
| elem_classes=["status-box"], |
| ) |
|
|
| |
| with gr.Column(scale=2): |
| with gr.Tabs(elem_id="result_tabs"): |
|
|
| with gr.TabItem("🔍 Detection Results"): |
| gr.Markdown( |
| "_Grounding DINO detects scene objects based on your " |
| "command text — no fixed class limitations._" |
| ) |
| with gr.Row(): |
| detection_image = gr.Image( |
| label="Detected Objects", |
| type="numpy", |
| height=320, |
| ) |
| detections_json = gr.Code( |
| label="Detection Data (JSON)", |
| language="json", |
| lines=14, |
| ) |
|
|
| with gr.TabItem("🎯 Action Plan & Visualization"): |
| gr.Markdown( |
| "_The LLM interprets your command and maps it to detected " |
| "objects, generating step-by-step robotic action instructions._" |
| ) |
| with gr.Row(): |
| action_image = gr.Image( |
| label="Action Visualization", |
| type="numpy", |
| height=320, |
| ) |
| action_plan_md = gr.Markdown( |
| value=( |
| "*Run the pipeline to see the " |
| "AI-generated action plan.*" |
| ), |
| ) |
|
|
| |
| if demo_examples: |
| gr.Markdown("---") |
| gr.Markdown( |
| "### 📂 Try a Demo Scene\n" |
| "_Click any example below to load a scene image with a pre-filled " |
| "command. These showcase Codevally's VLA pipeline across diverse " |
| "industrial and everyday environments._" |
| ) |
| gr.Examples( |
| examples=demo_examples, |
| inputs=[image_input, command_input], |
| label="Demo Scenes", |
| examples_per_page=5, |
| ) |
|
|
| |
| gr.HTML(FOOTER_HTML) |
|
|
| |
| run_btn.click( |
| fn=process_pipeline, |
| inputs=[image_input, command_input], |
| outputs=[ |
| detection_image, |
| detections_json, |
| action_plan_md, |
| action_image, |
| status_output, |
| ], |
| ) |
|
|
| return demo |
|
|
