| from __future__ import annotations |
|
|
| import gradio as gr |
|
|
| from xiao_copilot.config import load_settings |
| from xiao_copilot.pipeline import answer_question |
|
|
|
|
| EXAMPLES = [ |
| [ |
| None, |
| "My XIAO ESP32S3 Sense is not detected over USB. What should I check first?", |
| ], |
| [ |
| None, |
| "Which pins are I2C on the XIAO ESP32C6?", |
| ], |
| [ |
| None, |
| "Which XIAO should I choose for 5 GHz WiFi?", |
| ], |
| [ |
| None, |
| "My XIAO MG24 stopped accepting uploads after deep sleep. What should I try?", |
| ], |
| [ |
| None, |
| "What SPI pins does the XIAO W5500 Ethernet Adapter use?", |
| ], |
| [ |
| None, |
| "What board target string should I select for XIAO nRF54L15 Sense Zigbee in nRF Connect SDK?", |
| ], |
| [ |
| None, |
| "At what I2C address is the SSD1306 OLED configured for XIAO ESP32C3 with Zephyr?", |
| ], |
| [ |
| None, |
| "How do I switch the XIAO ESP32C6 to the external antenna?", |
| ], |
| [ |
| None, |
| "What is the safe battery-voltage read sequence on XIAO nRF52840 Sense?", |
| ], |
| [ |
| None, |
| "Which editor setup does the XIAO ESP32C6 CircuitPython guide recommend?", |
| ], |
| [ |
| None, |
| "How do I configure WiFi for a XIAO ESP32C3 ESPHome node in Home Assistant?", |
| ], |
| [ |
| None, |
| "My XIAO RP2040 serial port disappeared after flashing. How do I recover it?", |
| ], |
| [ |
| None, |
| "What visible markings should I photograph so you can identify a XIAO board?", |
| ], |
| ] |
|
|
|
|
| THEME = gr.themes.Soft( |
| primary_hue="emerald", |
| secondary_hue="zinc", |
| neutral_hue="slate", |
| font=[gr.themes.GoogleFont("Inter"), "ui-sans-serif", "system-ui", "sans-serif"], |
| radius_size="sm", |
| ).set( |
| button_primary_background_fill="#0f8f6b", |
| button_primary_background_fill_hover="#0b7558", |
| block_border_width="1px", |
| block_shadow="0 1px 2px rgb(15 23 42 / 0.08)", |
| ) |
|
|
| CSS = """ |
| .gradio-container { |
| max-width: 1220px !important; |
| background: linear-gradient(180deg, #f8fafc 0%, #eefdf6 42%, #f8fafc 100%); |
| } |
| .dark .gradio-container { |
| background: linear-gradient(180deg, #020617 0%, #052e16 42%, #020617 100%); |
| } |
| .hero { |
| padding: 1.5rem 0 0.65rem; |
| border-bottom: 1px solid #dbe7e1; |
| margin-bottom: 1rem; |
| } |
| .dark .hero { |
| border-bottom: 1px solid #1e293b; |
| } |
| .hero h1 { |
| color: #0f172a; |
| font-size: 2.55rem; |
| line-height: 1.1; |
| margin: 0 0 0.35rem; |
| font-weight: 760; |
| letter-spacing: 0; |
| } |
| .dark .hero h1 { |
| color: #f8fafc; |
| } |
| .hero p { |
| color: #334155; |
| font-size: 1.02rem; |
| margin: 0; |
| max-width: 780px; |
| } |
| .dark .hero p { |
| color: #cbd5e1; |
| } |
| .chips { |
| align-items: center; |
| display: flex; |
| flex-wrap: wrap; |
| gap: 0.45rem; |
| margin-top: 0.85rem; |
| } |
| .chip { |
| background: #ffffff; |
| border: 1px solid #cbded5; |
| border-radius: 999px; |
| color: #235245; |
| font-size: 0.84rem; |
| font-weight: 650; |
| line-height: 1; |
| padding: 0.42rem 0.62rem; |
| } |
| .dark .chip { |
| background: #0f172a; |
| border: 1px solid #334155; |
| color: #34d399; |
| } |
| .bench-strip { |
| display: grid; |
| gap: 0.55rem; |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| margin: 0 0 1rem; |
| } |
| .bench-card { |
| background: #ffffff; |
| border: 1px solid #dbe7e1; |
| border-radius: 8px; |
| color: #334155; |
| font-size: 0.9rem; |
| min-height: 74px; |
| padding: 0.75rem 0.85rem; |
| } |
| .dark .bench-card { |
| background: #0f172a; |
| border: 1px solid #1e293b; |
| color: #cbd5e1; |
| } |
| .bench-card strong { |
| color: #0f513f; |
| display: block; |
| font-size: 0.74rem; |
| letter-spacing: 0.08em; |
| margin-bottom: 0.3rem; |
| text-transform: uppercase; |
| } |
| .dark .bench-card strong { |
| color: #10b981; |
| } |
| .bench-label { |
| color: #0f513f; |
| font-size: 0.78rem; |
| font-weight: 760; |
| letter-spacing: 0.08em; |
| margin: 0 0 0.5rem; |
| text-transform: uppercase; |
| } |
| .dark .bench-label { |
| color: #10b981; |
| } |
| .panel-copy { |
| color: #475569; |
| font-size: 0.92rem; |
| margin: -0.25rem 0 0.75rem; |
| } |
| .dark .panel-copy { |
| color: #94a3b8; |
| } |
| .result-box { |
| background-color: #ffffff; |
| border: 1px solid #dbe7e1; |
| border-radius: 8px; |
| min-height: 360px; |
| padding: 1rem 1.1rem; |
| } |
| .dark .result-box { |
| background-color: #0f172a; |
| border-color: #334155; |
| color: #e2e8f0; |
| } |
| .sources-box { |
| background-color: #ffffff; |
| border: 1px solid #dbe7e1; |
| border-radius: 8px; |
| padding: 0.85rem 1rem; |
| } |
| .dark .sources-box { |
| background-color: #0f172a; |
| border-color: #334155; |
| color: #e2e8f0; |
| } |
| .trace-box { |
| background-color: #ffffff; |
| border: 1px solid #dbe7e1; |
| border-radius: 8px; |
| padding: 0.85rem 1rem; |
| } |
| .dark .trace-box { |
| background-color: #0f172a; |
| border-color: #334155; |
| color: #e2e8f0; |
| } |
| .dark .result-box *, |
| .dark .sources-box *, |
| .dark .trace-box * { |
| color: #e2e8f0 !important; |
| } |
| .dark .result-box a, |
| .dark .sources-box a { |
| color: #5eead4 !important; |
| } |
| .dark .result-box code, |
| .dark .sources-box code, |
| .dark .trace-box code, |
| .dark .trace-box pre { |
| background: #020617 !important; |
| color: #f8fafc !important; |
| } |
| button { |
| border-radius: 8px !important; |
| } |
| .gr-button-primary { |
| font-weight: 720 !important; |
| } |
| @media (max-width: 760px) { |
| .hero h1 { |
| font-size: 2rem; |
| } |
| .bench-strip { |
| grid-template-columns: 1fr; |
| } |
| } |
| footer { |
| visibility: hidden; |
| } |
| """ |
|
|
|
|
| def build_demo() -> gr.Blocks: |
| with gr.Blocks(title="XIAO Buddy") as demo: |
| gr.HTML( |
| """ |
| <section class="hero"> |
| <h1>XIAO Buddy</h1> |
| <p>Photo-aware support for Seeed XIAO boards, pinouts, wireless bring-up, power checks, and field recovery.</p> |
| <div class="chips"> |
| <span class="chip">ESP32S3 Sense</span> |
| <span class="chip">ESP32C6</span> |
| <span class="chip">ESP32C5</span> |
| <span class="chip">nRF54L15</span> |
| <span class="chip">MG24</span> |
| <span class="chip">RA4M1</span> |
| <span class="chip">RP2350</span> |
| <span class="chip">W5500 adapter</span> |
| </div> |
| </section> |
| """, |
| ) |
| gr.HTML( |
| """ |
| <section class="bench-strip"> |
| <div class="bench-card"><strong>Corpus</strong>Curated Seeed XIAO board notes, pinouts, boot modes, power limits, and accessories.</div> |
| <div class="bench-card"><strong>Routes</strong>Identify, troubleshoot, compare, or answer wiring questions with cited source chunks.</div> |
| <div class="bench-card"><strong>Runtime</strong>Hosted Qwen embedding, reranking, and agent calls served from an AMD MI300X stack.</div> |
| </section> |
| """, |
| ) |
|
|
| with gr.Row(equal_height=False): |
| with gr.Column(scale=5, min_width=330): |
| gr.HTML('<p class="bench-label">Support bench</p>') |
| image = gr.Image( |
| label="Board or wiring photo", |
| type="pil", |
| sources=["upload", "clipboard", "webcam"], |
| height=315, |
| ) |
| question = gr.Textbox( |
| label="Hardware question", |
| placeholder="Example: My XIAO RP2350 will not enter BOOT mode. What should I check?", |
| lines=4, |
| max_lines=8, |
| ) |
| with gr.Row(): |
| submit = gr.Button("Diagnose XIAO", variant="primary") |
| clear = gr.ClearButton([image, question], value="Reset") |
|
|
| with gr.Column(scale=7, min_width=360): |
| gr.HTML('<p class="bench-label">Field answer</p>') |
| answer = gr.Markdown( |
| value="Ask about a XIAO board, accessory, pinout, upload issue, power symptom, or wireless requirement.", |
| label="Answer", |
| elem_classes=["result-box"], |
| ) |
| citations = gr.Markdown(label="Source trail", elem_classes=["sources-box"]) |
| with gr.Accordion("Retrieval trace", open=False): |
| diagnostics = gr.JSON(label="Run details", elem_classes=["trace-box"], open=False) |
|
|
| gr.Examples( |
| examples=EXAMPLES, |
| inputs=[image, question], |
| label="Bench scenarios", |
| ) |
|
|
| submit.click( |
| fn=answer_question, |
| inputs=[image, question], |
| outputs=[answer, citations, diagnostics], |
| api_name="ask", |
| ) |
| question.submit( |
| fn=answer_question, |
| inputs=[image, question], |
| outputs=[answer, citations, diagnostics], |
| api_name=False, |
| ) |
|
|
| return demo |
|
|
|
|
| demo = build_demo() |
|
|
|
|
| if __name__ == "__main__": |
| settings = load_settings() |
| demo.launch( |
| server_name=settings.gradio_server_name, |
| server_port=settings.gradio_server_port, |
| theme=THEME, |
| css=CSS, |
| ) |
|
|
