| """ |
| Android Skill Router — Gradio demo for the Build Small hackathon. |
| |
| Natural language in → fine-tuned Qwen2.5-3B intent out → Android UI trajectory. |
| |
| Inference runs on Modal (deploy modal_apps/predict_api.py). Set MODAL_PREDICT_URL in Space secrets. |
| """ |
|
|
| from __future__ import annotations |
|
|
| import hashlib |
| import html |
| import json |
| import os |
| from pathlib import Path |
|
|
| import gradio as gr |
| import requests |
|
|
| from src.parameter_binder import apply_parameters |
| from src.skill_router import SKILL_TO_TRAJECTORY, load_trajectory |
| from src.skill_utils import resolve_skill |
|
|
| MODAL_PREDICT_URL = os.environ.get("MODAL_PREDICT_URL", "").rstrip("/") |
|
|
| PARAMETER_LABELS = { |
| "contact": "Contact", |
| "message": "Message", |
| "recipient": "Recipient", |
| "time": "Time", |
| "day": "Day", |
| "title": "Title", |
| "date": "Date", |
| "channel": "Channel", |
| "playlist": "Playlist", |
| "query": "Query", |
| "destination": "Destination", |
| "name": "Name", |
| } |
|
|
| EXAMPLE_PROMPTS = [ |
| "play my workout playlist", |
| "turn bluetooth on", |
| "wake me up tomorrow morning", |
| "send ri a message on whatsapp", |
| "open the engineering channel in slack", |
| "find parag shah in contacts", |
| "email my team saying project update", |
| "pause spotify", |
| "book an uber to the airport", |
| "search pasta recipes on youtube", |
| ] |
|
|
| SKILL_LABELS = { |
| "bluetooth_enable": "Turn on Bluetooth", |
| "calendar_create_event": "Create calendar event", |
| "camera_take_photo": "Take a photo", |
| "contacts_search": "Search contacts", |
| "create_alarm": "Set an alarm", |
| "gmail_send_email": "Send Gmail", |
| "linkedin_search_person": "Search LinkedIn", |
| "slack_open_channel": "Open Slack channel", |
| "spotify_pause": "Pause Spotify", |
| "spotify_play_playlist": "Play Spotify playlist", |
| "spotify_search_play": "Search & play on Spotify", |
| "uber_request_ride": "Request Uber ride", |
| "whatsapp_send_message": "Send WhatsApp message", |
| "wifi_enable": "Enable Wi-Fi", |
| "youtube_search": "Search YouTube", |
| } |
|
|
| FEATURED_SKILLS = [ |
| ("spotify_play_playlist", "Play Workout Playlist"), |
| ("whatsapp_send_message", "Send WhatsApp Message"), |
| ("create_alarm", "Create Alarm"), |
| ("uber_request_ride", "Book Uber"), |
| ("youtube_search", "Search YouTube"), |
| ] |
| TOTAL_SKILLS = len(SKILL_TO_TRAJECTORY) |
|
|
| IDLE_RESULT_HTML = """ |
| <div class="result-card result-card--idle"> |
| <div class="result-card-header">Automation Result</div> |
| <p class="result-placeholder"> |
| Describe what you want your phone to do — the model will extract the skill and parameters, |
| then surface the matching Android trajectory. |
| </p> |
| <div class="result-metrics result-metrics--empty"> |
| <div class="metric-tile"><span class="metric-label">Detected Skill</span><span class="metric-value muted">—</span></div> |
| <div class="metric-tile"><span class="metric-label">Extracted Parameters</span><span class="metric-value muted">—</span></div> |
| <div class="metric-tile"><span class="metric-label">Predicted Confidence</span><span class="metric-value muted">—</span></div> |
| <div class="metric-tile metric-tile--wide"><span class="metric-label">Android Trajectory</span><span class="metric-value muted">—</span></div> |
| </div> |
| </div> |
| """ |
|
|
|
|
| def _predict_intent(prompt: str) -> dict: |
| if not MODAL_PREDICT_URL: |
| raise gr.Error( |
| "MODAL_PREDICT_URL is not set. Deploy modal_apps/predict_api.py on Modal and add the " |
| "/predict endpoint URL as a Space secret." |
| ) |
|
|
| response = requests.post( |
| f"{MODAL_PREDICT_URL}/predict", |
| json={"prompt": prompt}, |
| timeout=120, |
| ) |
| if response.status_code != 200: |
| try: |
| detail = response.json().get("message", response.text) |
| except Exception: |
| detail = response.text |
| raise gr.Error(f"Inference failed ({response.status_code}): {detail}") |
|
|
| payload = response.json() |
| raw_skill = payload.get("skill") |
| skill = resolve_skill(raw_skill if isinstance(raw_skill, str) else None, prompt.strip()) |
| if not skill or skill not in SKILL_TO_TRAJECTORY: |
| raise gr.Error( |
| f"Could not route prompt to a known skill (model returned {raw_skill!r})." |
| ) |
|
|
| parameters = payload.get("parameters", {}) |
| if not isinstance(parameters, dict): |
| parameters = {} |
|
|
| return {"skill": skill, "parameters": parameters} |
|
|
|
|
| def _demo_confidence_percent(prompt: str, skill: str, parameters: dict | None = None) -> float: |
| """Deterministic demo confidence for the hackathon UI.""" |
| param_blob = json.dumps(parameters or {}, sort_keys=True, separators=(",", ":")) |
| digest = hashlib.sha256( |
| f"{prompt.strip().lower()}|{skill}|{param_blob}".encode() |
| ).hexdigest() |
| return 94.0 + (int(digest[:4], 16) % 56) / 10.0 |
|
|
|
|
| def _format_parameters_html(parameters: dict) -> str: |
| if not parameters: |
| return '<span class="metric-value muted">None required</span>' |
|
|
| rows = [] |
| for key, value in parameters.items(): |
| label = PARAMETER_LABELS.get(key, key.replace("_", " ").title()) |
| rows.append( |
| f'<div class="param-row">' |
| f'<span class="param-key">{html.escape(label)}</span>' |
| f'<span class="param-value">{html.escape(str(value))}</span>' |
| f"</div>" |
| ) |
| return "".join(rows) |
|
|
|
|
| def _build_result_card(skill: str, prompt: str, parameters: dict | None = None) -> str: |
| label = SKILL_LABELS.get(skill, skill.replace("_", " ").title()) |
| params = parameters or {} |
| confidence = _demo_confidence_percent(prompt, skill, params) |
| data = load_trajectory(skill) |
| steps = data.get("steps", []) |
| task = html.escape(str(data.get("task", "—"))) |
| app_pkg = html.escape(str(data.get("app", "—"))) |
| trajectory_file = html.escape(Path(SKILL_TO_TRAJECTORY[skill]).name) |
| params_html = _format_parameters_html(params) |
|
|
| return f""" |
| <div class="result-card"> |
| <div class="result-card-header">Automation Result</div> |
| <div class="result-metrics"> |
| <div class="metric-tile"> |
| <span class="metric-label">Detected Skill</span> |
| <span class="metric-value">{html.escape(label)}</span> |
| <span class="metric-sub"><code>{html.escape(skill)}</code></span> |
| </div> |
| <div class="metric-tile"> |
| <span class="metric-label">Predicted Confidence</span> |
| <div class="confidence-row"> |
| <div class="confidence-bar" role="progressbar" aria-valuenow="{confidence:.1f}" aria-valuemin="0" aria-valuemax="100"> |
| <div class="confidence-fill" style="width: {confidence:.1f}%;"></div> |
| </div> |
| <span class="confidence-pct">{confidence:.1f}%</span> |
| </div> |
| <span class="metric-sub">Greedy decode · fine-tuned Qwen2.5-3B</span> |
| </div> |
| <div class="metric-tile metric-tile--wide"> |
| <span class="metric-label">Extracted Parameters</span> |
| <div class="param-list">{params_html}</div> |
| </div> |
| <div class="metric-tile metric-tile--wide"> |
| <span class="metric-label">Associated Android Trajectory</span> |
| <span class="metric-value">{task}</span> |
| <span class="metric-sub"> |
| <strong>App</strong> · <code>{app_pkg}</code> · |
| <strong>Steps</strong> · {len(steps)} UI snapshots · |
| <strong>File</strong> · <code>{trajectory_file}</code> |
| </span> |
| </div> |
| </div> |
| </div> |
| """ |
|
|
|
|
| def _build_skills_catalog_card() -> str: |
| lines = [ |
| f"<li><code>{html.escape(skill)}</code> — {html.escape(SKILL_LABELS.get(skill, skill))}</li>" |
| for skill in sorted(SKILL_TO_TRAJECTORY) |
| ] |
| return f""" |
| <div class="result-card"> |
| <div class="result-card-header">All Learned Skills</div> |
| <ul class="skills-catalog">{''.join(lines)}</ul> |
| </div> |
| """ |
|
|
|
|
| def _trajectory_summary(skill: str, parameters: dict | None = None) -> tuple[str, str, str]: |
| data = load_trajectory(skill) |
| params = parameters or {} |
| if params: |
| data = apply_parameters(data, skill, params) |
| steps = data.get("steps", []) |
| task = data.get("task", "—") |
| app_pkg = data.get("app", "—") |
| trajectory_file = Path(SKILL_TO_TRAJECTORY[skill]).name |
|
|
| summary = ( |
| f"### {SKILL_LABELS.get(skill, skill)}\n\n" |
| f"`{skill}`\n\n" |
| f"**Task** · {task} \n" |
| f"**App** · `{app_pkg}` \n" |
| f"**Steps** · {len(steps)} UI snapshots \n" |
| f"**File** · `{trajectory_file}`" |
| ) |
| if params: |
| param_lines = " \n".join(f"**{k}** · {v}" for k, v in params.items()) |
| summary += f"\n\n**Extracted parameters** \n{param_lines}" |
| summary += "\n\n**Trajectory preview** · runtime parameters substituted into recorded steps" |
|
|
| preview = { |
| "skill": skill, |
| "parameters": params, |
| "parameterized": bool(params), |
| "task": task, |
| "app": app_pkg, |
| "steps": len(steps), |
| "trajectory": SKILL_TO_TRAJECTORY[skill], |
| } |
| return summary, json.dumps(preview, indent=2), json.dumps(data, indent=2)[:12000] |
|
|
|
|
| def route_prompt(prompt: str) -> tuple[str, gr.update, str]: |
| prompt = prompt.strip() |
| if not prompt: |
| raise gr.Error("Enter a prompt to classify.") |
|
|
| intent = _predict_intent(prompt) |
| skill = intent["skill"] |
| parameters = intent.get("parameters", {}) |
| _, preview_json, trajectory_json = _trajectory_summary(skill, parameters) |
| return ( |
| _build_result_card(skill, prompt, parameters), |
| gr.update(value=preview_json, visible=True), |
| trajectory_json, |
| ) |
|
|
|
|
| def list_skills() -> tuple[str, gr.update, str]: |
| return _build_skills_catalog_card(), gr.update(value="", visible=False), "" |
|
|
|
|
| MAGENTA = "#E6007A" |
| NAVY = "#002D62" |
| NAVY_DEEP = "#001F3F" |
| SURFACE = "#FFFFFF" |
| SURFACE_MUTED = "#F4F7FB" |
| TEXT_MUTED = "#4A6278" |
|
|
| yoyo_theme = ( |
| gr.themes.Base( |
| primary_hue="blue", |
| secondary_hue="pink", |
| neutral_hue="slate", |
| font=gr.themes.GoogleFont("DM Sans"), |
| font_mono=gr.themes.GoogleFont("JetBrains Mono"), |
| ) |
| .set( |
| body_background_fill="transparent", |
| body_background_fill_dark="transparent", |
| body_text_color=NAVY, |
| body_text_color_dark=NAVY, |
| block_background_fill=SURFACE, |
| block_background_fill_dark=SURFACE, |
| block_border_width="0px", |
| block_label_text_color=TEXT_MUTED, |
| block_label_text_color_dark=TEXT_MUTED, |
| block_title_text_color=NAVY, |
| block_title_text_color_dark=NAVY, |
| block_radius="16px", |
| button_large_radius="999px", |
| button_primary_background_fill=NAVY, |
| button_primary_background_fill_hover=NAVY_DEEP, |
| button_primary_text_color="#FFFFFF", |
| button_primary_text_color_dark="#FFFFFF", |
| button_secondary_background_fill=SURFACE, |
| button_secondary_background_fill_dark=SURFACE, |
| button_secondary_text_color=NAVY, |
| button_secondary_text_color_dark=NAVY, |
| button_secondary_background_fill_hover=SURFACE_MUTED, |
| button_secondary_background_fill_hover_dark=SURFACE_MUTED, |
| input_background_fill=SURFACE, |
| input_background_fill_dark=SURFACE, |
| input_border_color="rgba(0,45,98,0.16)", |
| input_border_color_dark="rgba(0,45,98,0.16)", |
| input_border_color_focus=NAVY, |
| input_border_color_focus_dark=NAVY, |
| input_radius="14px", |
| checkbox_label_text_color=NAVY, |
| link_text_color=MAGENTA, |
| link_text_color_hover=NAVY_DEEP, |
| shadow_drop="0 12px 40px rgba(0,31,63,0.08)", |
| ) |
| ) |
|
|
| APP_CSS = """ |
| @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@400;500&family=Press+Start+2P&display=swap'); |
| |
| :root { |
| --magenta: #E6007A; |
| --magenta-soft: rgba(230, 0, 122, 0.10); |
| --navy: #002D62; |
| --navy-deep: #001F3F; |
| --text-muted: #4A6278; |
| --card: #FFFFFF; |
| --card-border: rgba(0, 45, 98, 0.10); |
| --surface-muted: #F4F7FB; |
| } |
| |
| .gradio-container { |
| background: |
| radial-gradient(ellipse 90% 55% at 50% -10%, rgba(230,0,122,0.10) 0%, transparent 55%), |
| radial-gradient(ellipse 50% 40% at 100% 100%, rgba(0,45,98,0.06) 0%, transparent 50%), |
| linear-gradient(180deg, #FFF8FB 0%, #F7FAFC 55%, #EEF2F7 100%) !important; |
| color: var(--navy) !important; |
| max-width: 1180px !important; |
| margin: 0 auto !important; |
| padding: 2.5rem 1.25rem 3rem !important; |
| font-family: 'DM Sans', system-ui, sans-serif !important; |
| } |
| |
| footer { display: none !important; } |
| |
| .hero { |
| text-align: center; |
| margin-bottom: 1.75rem; |
| animation: fade-up 0.6s ease-out; |
| } |
| .hero-badge { |
| display: inline-block; |
| font-size: 0.68rem; |
| font-weight: 700; |
| letter-spacing: 0.14em; |
| text-transform: uppercase; |
| color: var(--magenta); |
| background: var(--magenta-soft); |
| border: 1px solid rgba(230,0,122,0.18); |
| border-radius: 999px; |
| padding: 0.35rem 0.9rem; |
| margin-bottom: 1rem; |
| } |
| .hero h1 { |
| font-family: 'Press Start 2P', monospace; |
| font-size: clamp(1rem, 3vw, 1.35rem); |
| line-height: 1.65; |
| color: var(--navy-deep); |
| margin: 0 0 0.85rem; |
| text-shadow: 2px 2px 0 rgba(230,0,122,0.12); |
| } |
| .hero .subtitle { |
| color: var(--text-muted); |
| max-width: 36rem; |
| margin: 0 auto 1.35rem; |
| font-size: 1.08rem; |
| line-height: 1.65; |
| font-weight: 500; |
| } |
| |
| .pipeline { |
| display: inline-flex; |
| flex-direction: column; |
| align-items: center; |
| gap: 0.15rem; |
| margin: 0 auto; |
| padding: 1rem 1.5rem; |
| background: var(--card); |
| border: 1px solid var(--card-border); |
| border-radius: 18px; |
| box-shadow: 0 8px 28px rgba(0,31,63,0.06); |
| } |
| .pipeline-step { |
| font-family: 'Press Start 2P', monospace; |
| font-size: clamp(0.42rem, 1.1vw, 0.52rem); |
| line-height: 1.8; |
| color: var(--navy-deep); |
| background: var(--surface-muted); |
| border: 1px solid rgba(0,45,98,0.10); |
| border-radius: 10px; |
| padding: 0.45rem 1rem; |
| min-width: 14rem; |
| text-align: center; |
| } |
| .pipeline-step.highlight { |
| background: var(--magenta-soft); |
| border-color: rgba(230,0,122,0.22); |
| color: var(--navy-deep); |
| } |
| .pipeline-arrow { |
| color: var(--magenta); |
| font-size: 1rem; |
| font-weight: 700; |
| line-height: 1; |
| user-select: none; |
| } |
| |
| .content-row { gap: 1rem !important; align-items: stretch !important; } |
| |
| .skills-learned-card { |
| background: var(--card); |
| border: 1px solid var(--card-border); |
| border-radius: 20px; |
| box-shadow: 0 8px 32px rgba(0,31,63,0.07); |
| padding: 1.15rem 1.25rem; |
| height: 100%; |
| animation: fade-up 0.7s ease-out; |
| } |
| .skills-learned-card .card-title { |
| font-family: 'Press Start 2P', monospace; |
| font-size: 0.52rem; |
| line-height: 1.7; |
| color: var(--navy-deep); |
| margin: 0 0 0.85rem; |
| text-transform: uppercase; |
| } |
| .skills-learned-card ul { |
| list-style: none; |
| margin: 0; |
| padding: 0; |
| display: flex; |
| flex-direction: column; |
| gap: 0.45rem; |
| } |
| .skills-learned-card li { |
| display: flex; |
| align-items: center; |
| gap: 0.55rem; |
| font-size: 0.88rem; |
| font-weight: 600; |
| color: var(--navy-deep); |
| background: var(--surface-muted); |
| border: 1px solid rgba(0,45,98,0.08); |
| border-radius: 12px; |
| padding: 0.5rem 0.65rem; |
| } |
| .skills-learned-card li::before { |
| content: "▸"; |
| color: var(--magenta); |
| font-size: 0.75rem; |
| flex-shrink: 0; |
| } |
| .skills-learned-card .skills-count { |
| margin-top: 0.85rem; |
| padding-top: 0.85rem; |
| border-top: 1px solid rgba(0,45,98,0.08); |
| font-size: 0.78rem; |
| font-weight: 700; |
| letter-spacing: 0.08em; |
| text-transform: uppercase; |
| color: var(--magenta); |
| } |
| |
| .main-stack { gap: 1rem !important; } |
| |
| .glass-panel { |
| background: var(--card) !important; |
| border: 1px solid var(--card-border) !important; |
| border-radius: 20px !important; |
| box-shadow: 0 8px 32px rgba(0,31,63,0.07), 0 1px 3px rgba(0,31,63,0.04) !important; |
| padding: 1.25rem 1.35rem !important; |
| min-height: 100%; |
| } |
| |
| .glass-panel > .wrap, |
| .glass-panel.wrap { |
| background: transparent !important; |
| border: none !important; |
| box-shadow: none !important; |
| padding: 0 !important; |
| } |
| |
| .panel-label { |
| font-size: 0.7rem; |
| font-weight: 700; |
| letter-spacing: 0.14em; |
| text-transform: uppercase; |
| color: var(--text-muted); |
| margin: 0 0 0.85rem 0.15rem; |
| } |
| |
| .prompt-input textarea, |
| .prompt-input input { |
| background: var(--card) !important; |
| color: var(--navy-deep) !important; |
| font-size: 1.05rem !important; |
| line-height: 1.5 !important; |
| border-radius: 14px !important; |
| border: 1px solid rgba(0,45,98,0.14) !important; |
| box-shadow: inset 0 1px 2px rgba(0,31,63,0.03) !important; |
| } |
| .prompt-input textarea::placeholder, |
| .prompt-input input::placeholder { |
| color: #8A9BB0 !important; |
| opacity: 1 !important; |
| } |
| .prompt-input textarea:focus, |
| .prompt-input input:focus { |
| border-color: var(--navy) !important; |
| box-shadow: 0 0 0 3px rgba(0,45,98,0.10) !important; |
| } |
| |
| .btn-row { gap: 0.6rem !important; margin-top: 0.25rem !important; } |
| .btn-row button { |
| border-radius: 999px !important; |
| font-weight: 600 !important; |
| letter-spacing: 0.01em !important; |
| padding: 0.65rem 1.4rem !important; |
| transition: transform 0.15s ease, box-shadow 0.15s ease !important; |
| } |
| .btn-row button:hover { transform: translateY(-1px); } |
| .btn-row button.primary { |
| background: var(--navy) !important; |
| color: #FFFFFF !important; |
| border: none !important; |
| box-shadow: 0 4px 14px rgba(0,31,63,0.18) !important; |
| } |
| .btn-row button.primary:hover { |
| background: var(--navy-deep) !important; |
| } |
| .btn-row button.secondary { |
| background: var(--card) !important; |
| color: var(--navy) !important; |
| border: 1px solid rgba(0,45,98,0.16) !important; |
| } |
| .btn-row button.secondary:hover { |
| background: var(--surface-muted) !important; |
| } |
| |
| .examples-wrap, |
| .examples-wrap > .wrap, |
| .examples-wrap .block { |
| background: var(--surface-muted) !important; |
| border: 1px solid rgba(0,45,98,0.08) !important; |
| border-radius: 14px !important; |
| padding: 0.65rem 0.75rem !important; |
| margin-top: 0.75rem !important; |
| } |
| .examples-wrap .label-wrap { |
| display: block !important; |
| margin-bottom: 0.5rem !important; |
| } |
| .examples-wrap .label-wrap span, |
| .examples-wrap label span { |
| color: var(--text-muted) !important; |
| font-size: 0.72rem !important; |
| font-weight: 700 !important; |
| letter-spacing: 0.12em !important; |
| text-transform: uppercase !important; |
| } |
| .examples-wrap table { border: none !important; width: 100% !important; } |
| .examples-wrap tbody tr td { |
| background: var(--card) !important; |
| border: 1px solid rgba(0,45,98,0.12) !important; |
| border-radius: 999px !important; |
| padding: 0.4rem 0.9rem !important; |
| margin: 0.25rem !important; |
| font-size: 0.84rem !important; |
| font-weight: 500 !important; |
| color: var(--navy-deep) !important; |
| transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease !important; |
| } |
| .examples-wrap tbody tr td:hover { |
| background: #FFFFFF !important; |
| border-color: var(--magenta) !important; |
| transform: translateY(-1px); |
| cursor: pointer; |
| } |
| |
| .result-card-wrap .block, |
| .result-card-wrap .html-container { |
| padding: 0 !important; |
| background: transparent !important; |
| border: none !important; |
| box-shadow: none !important; |
| } |
| .result-card { |
| background: var(--card); |
| border: 1px solid var(--card-border); |
| border-radius: 18px; |
| padding: 1.15rem 1.25rem; |
| box-shadow: inset 0 1px 0 rgba(255,255,255,0.8); |
| } |
| .result-card--idle { |
| background: linear-gradient(180deg, var(--card) 0%, var(--surface-muted) 100%); |
| } |
| .result-card-header { |
| font-family: 'Press Start 2P', monospace; |
| font-size: 0.5rem; |
| line-height: 1.7; |
| letter-spacing: 0.04em; |
| text-transform: uppercase; |
| color: var(--navy-deep); |
| margin-bottom: 1rem; |
| padding-bottom: 0.75rem; |
| border-bottom: 1px solid rgba(0,45,98,0.08); |
| } |
| .result-placeholder { |
| color: var(--text-muted); |
| font-size: 0.92rem; |
| line-height: 1.65; |
| margin: 0 0 1rem; |
| } |
| .result-metrics { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 0.75rem; |
| } |
| .result-metrics--empty .metric-tile { |
| background: rgba(255,255,255,0.65); |
| } |
| .metric-tile { |
| background: var(--surface-muted); |
| border: 1px solid rgba(0,45,98,0.08); |
| border-radius: 14px; |
| padding: 0.85rem 0.95rem; |
| display: flex; |
| flex-direction: column; |
| gap: 0.35rem; |
| } |
| .metric-tile--wide { grid-column: 1 / -1; } |
| .metric-label { |
| font-size: 0.68rem; |
| font-weight: 700; |
| letter-spacing: 0.12em; |
| text-transform: uppercase; |
| color: var(--text-muted); |
| } |
| .metric-value { |
| font-size: 1rem; |
| font-weight: 700; |
| color: var(--navy-deep); |
| line-height: 1.35; |
| } |
| .metric-value.muted { |
| color: #8A9BB0; |
| font-weight: 600; |
| } |
| .metric-sub { |
| font-size: 0.8rem; |
| color: var(--text-muted); |
| line-height: 1.5; |
| } |
| .metric-sub code { |
| font-family: 'JetBrains Mono', monospace; |
| font-size: 0.78rem; |
| background: rgba(0,45,98,0.06); |
| padding: 0.1em 0.35em; |
| border-radius: 5px; |
| color: var(--navy-deep); |
| } |
| .confidence-row { |
| display: flex; |
| align-items: center; |
| gap: 0.65rem; |
| } |
| .confidence-bar { |
| flex: 1; |
| height: 10px; |
| background: rgba(0,45,98,0.08); |
| border-radius: 999px; |
| overflow: hidden; |
| } |
| .confidence-fill { |
| height: 100%; |
| background: linear-gradient(90deg, var(--navy) 0%, var(--magenta) 100%); |
| border-radius: 999px; |
| transition: width 0.4s ease; |
| } |
| .confidence-pct { |
| font-family: 'JetBrains Mono', monospace; |
| font-size: 0.95rem; |
| font-weight: 700; |
| color: var(--navy-deep); |
| min-width: 3.5rem; |
| text-align: right; |
| } |
| .param-list { |
| display: flex; |
| flex-direction: column; |
| gap: 0.45rem; |
| } |
| .param-row { |
| display: flex; |
| flex-wrap: wrap; |
| align-items: baseline; |
| gap: 0.35rem 0.65rem; |
| background: rgba(255,255,255,0.7); |
| border: 1px solid rgba(0,45,98,0.08); |
| border-radius: 10px; |
| padding: 0.45rem 0.65rem; |
| } |
| .param-key { |
| font-size: 0.68rem; |
| font-weight: 700; |
| letter-spacing: 0.1em; |
| text-transform: uppercase; |
| color: var(--magenta); |
| } |
| .param-value { |
| font-size: 0.92rem; |
| font-weight: 600; |
| color: var(--navy-deep); |
| line-height: 1.4; |
| } |
| .skills-catalog { |
| list-style: none; |
| margin: 0; |
| padding: 0; |
| display: flex; |
| flex-direction: column; |
| gap: 0.4rem; |
| max-height: 22rem; |
| overflow-y: auto; |
| } |
| .skills-catalog li { |
| font-size: 0.84rem; |
| color: var(--navy-deep); |
| background: var(--surface-muted); |
| border: 1px solid rgba(0,45,98,0.08); |
| border-radius: 10px; |
| padding: 0.45rem 0.65rem; |
| } |
| .skills-catalog code { |
| font-family: 'JetBrains Mono', monospace; |
| font-size: 0.78rem; |
| color: var(--magenta); |
| } |
| |
| .result-md .prose { |
| color: var(--navy-deep) !important; |
| font-size: 0.95rem !important; |
| line-height: 1.7 !important; |
| } |
| .result-md .prose em, |
| .result-md .prose p { |
| color: var(--text-muted) !important; |
| } |
| .result-md .prose code { |
| background: var(--magenta-soft) !important; |
| color: var(--navy-deep) !important; |
| border-radius: 6px !important; |
| padding: 0.1em 0.35em !important; |
| font-family: 'JetBrains Mono', monospace !important; |
| font-size: 0.88em !important; |
| } |
| .result-md .prose strong { color: var(--navy-deep) !important; } |
| .result-md .prose h3 { color: var(--navy-deep) !important; } |
| |
| .code-block, |
| .code-block .wrap { |
| background: var(--surface-muted) !important; |
| } |
| .code-block pre, |
| .code-block code { |
| background: var(--surface-muted) !important; |
| color: var(--navy-deep) !important; |
| border-radius: 12px !important; |
| font-family: 'JetBrains Mono', monospace !important; |
| font-size: 0.8rem !important; |
| border: 1px solid rgba(0,45,98,0.10) !important; |
| } |
| .code-block label span { |
| color: var(--text-muted) !important; |
| font-weight: 600 !important; |
| } |
| |
| .accordion-wrap { |
| background: var(--surface-muted) !important; |
| border: 1px solid rgba(0,45,98,0.10) !important; |
| border-radius: 14px !important; |
| overflow: hidden; |
| margin-top: 0.75rem !important; |
| } |
| .accordion-wrap > .label-wrap { |
| background: var(--surface-muted) !important; |
| border-bottom: 1px solid rgba(0,45,98,0.08) !important; |
| } |
| .accordion-wrap button, |
| .accordion-wrap .label-wrap span { |
| color: var(--navy) !important; |
| font-weight: 600 !important; |
| font-size: 0.9rem !important; |
| } |
| .accordion-wrap svg { |
| color: var(--magenta) !important; |
| stroke: var(--magenta) !important; |
| } |
| |
| .site-footer { |
| margin-top: 2rem; |
| padding: 1.25rem 1.5rem; |
| background: var(--card); |
| border: 1px solid var(--card-border); |
| border-radius: 16px; |
| text-align: center; |
| animation: fade-up 0.8s ease-out; |
| } |
| .site-footer .footer-title { |
| font-family: 'Press Start 2P', monospace; |
| font-size: clamp(0.42rem, 1.1vw, 0.5rem); |
| line-height: 1.8; |
| color: var(--navy-deep); |
| margin: 0 0 0.65rem; |
| } |
| .site-footer .footer-meta { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 0.65rem 1.25rem; |
| justify-content: center; |
| align-items: center; |
| font-size: 0.82rem; |
| color: var(--text-muted); |
| } |
| .site-footer a { |
| color: var(--magenta); |
| font-weight: 600; |
| text-decoration: none; |
| border-bottom: 1px solid rgba(230,0,122,0.35); |
| } |
| .site-footer a:hover { border-bottom-color: var(--navy-deep); color: var(--navy-deep); } |
| .footer-pill { |
| display: inline-flex; |
| align-items: center; |
| gap: 0.35rem; |
| background: var(--surface-muted); |
| border-radius: 999px; |
| padding: 0.3rem 0.75rem; |
| font-weight: 600; |
| color: var(--navy); |
| } |
| .footer-pill.ok { color: #0a6b3e; background: rgba(10,107,62,0.08); } |
| .footer-pill.warn { color: #8a4b00; background: rgba(138,75,0,0.08); } |
| |
| /* Force readable light surfaces even when Gradio dark mode is active */ |
| .dark .gradio-container { |
| background: |
| radial-gradient(ellipse 90% 55% at 50% -10%, rgba(230,0,122,0.12) 0%, transparent 55%), |
| radial-gradient(ellipse 50% 40% at 100% 100%, rgba(0,45,98,0.06) 0%, transparent 50%), |
| linear-gradient(180deg, #FFF8FB 0%, #F7FAFC 55%, #EEF2F7 100%) !important; |
| color: var(--navy) !important; |
| } |
| .dark .glass-panel, |
| .dark .glass-panel > .wrap { |
| background: var(--card) !important; |
| color: var(--navy-deep) !important; |
| } |
| .dark .prompt-input textarea, |
| .dark .prompt-input input { |
| background: var(--card) !important; |
| color: var(--navy-deep) !important; |
| border-color: rgba(0,45,98,0.14) !important; |
| } |
| .dark .examples-wrap, |
| .dark .examples-wrap > .wrap, |
| .dark .examples-wrap .block { |
| background: var(--surface-muted) !important; |
| } |
| .dark .examples-wrap tbody tr td { |
| background: var(--card) !important; |
| color: var(--navy-deep) !important; |
| } |
| .dark .accordion-wrap, |
| .dark .accordion-wrap > .label-wrap { |
| background: var(--surface-muted) !important; |
| } |
| .dark .accordion-wrap button, |
| .dark .accordion-wrap .label-wrap span { |
| color: var(--navy) !important; |
| } |
| .dark .code-block pre, |
| .dark .code-block code { |
| background: var(--surface-muted) !important; |
| color: var(--navy-deep) !important; |
| } |
| .dark .btn-row button.primary { |
| background: var(--navy) !important; |
| color: #FFFFFF !important; |
| } |
| .dark .btn-row button.secondary { |
| background: var(--card) !important; |
| color: var(--navy) !important; |
| } |
| .dark .result-md .prose, |
| .dark .result-md .prose p, |
| .dark .result-md .prose h3 { |
| color: var(--navy-deep) !important; |
| } |
| .dark .result-md .prose em { |
| color: var(--text-muted) !important; |
| } |
| |
| @keyframes fade-up { |
| from { opacity: 0; transform: translateY(10px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| @media (max-width: 768px) { |
| .gradio-container { padding: 1.5rem 0.85rem 2rem !important; } |
| .result-metrics { grid-template-columns: 1fr; } |
| .pipeline-step { min-width: 11rem; font-size: 0.4rem; } |
| } |
| """ |
|
|
| INFERENCE_STATUS = ( |
| '<span class="footer-pill ok">● inference live</span>' |
| if MODAL_PREDICT_URL |
| else '<span class="footer-pill warn">● set MODAL_PREDICT_URL</span>' |
| ) |
|
|
| SKILLS_LEARNED_HTML = """ |
| <div class="skills-learned-card"> |
| <div class="card-title">Skills Learned</div> |
| <ul> |
| {items} |
| </ul> |
| <div class="skills-count">{total} skills learned</div> |
| </div> |
| """.format( |
| items="\n".join(f" <li>{html.escape(label)}</li>" for _, label in FEATURED_SKILLS), |
| total=TOTAL_SKILLS, |
| ) |
|
|
| with gr.Blocks( |
| title="Pocket Automator", |
| theme=yoyo_theme, |
| css=APP_CSS, |
| ) as demo: |
| gr.HTML( |
| """ |
| <div class="hero"> |
| <div class="hero-badge">AI-Powered Android Automation</div> |
| <h1>Pocket Automator</h1> |
| <p class="subtitle">Teach your phone new skills through demonstration.</p> |
| <div class="pipeline"> |
| <span class="pipeline-step">Voice / Text</span> |
| <span class="pipeline-arrow">↓</span> |
| <span class="pipeline-step highlight">Qwen 2.5 3B</span> |
| <span class="pipeline-arrow">↓</span> |
| <span class="pipeline-step">Intent Extraction</span> |
| <span class="pipeline-arrow">↓</span> |
| <span class="pipeline-step">Replay Engine</span> |
| <span class="pipeline-arrow">↓</span> |
| <span class="pipeline-step">Android Action</span> |
| </div> |
| </div> |
| """ |
| ) |
|
|
| with gr.Row(elem_classes=["content-row"]): |
| with gr.Column(scale=3, min_width=240): |
| gr.HTML(SKILLS_LEARNED_HTML) |
|
|
| with gr.Column(scale=9): |
| with gr.Row(equal_height=False, elem_classes=["main-stack"]): |
| with gr.Column(scale=5, elem_classes=["glass-panel"]): |
| gr.HTML('<p class="panel-label">Tell your phone what to do</p>') |
| prompt = gr.Textbox( |
| label="What do you want to do?", |
| placeholder="play my chill playlist on spotify", |
| lines=3, |
| elem_classes=["prompt-input"], |
| show_label=False, |
| ) |
| with gr.Row(elem_classes=["btn-row"]): |
| submit = gr.Button("Run intent →", variant="primary", scale=2) |
| skills_btn = gr.Button("Browse skills", variant="secondary", scale=1) |
| with gr.Group(elem_classes=["examples-wrap"]): |
| gr.Examples( |
| examples=[[p] for p in EXAMPLE_PROMPTS], |
| inputs=prompt, |
| label="Try an example", |
| ) |
|
|
| with gr.Column(scale=6, elem_classes=["glass-panel"]): |
| gr.HTML('<p class="panel-label">Live automation result</p>') |
| result_card = gr.HTML( |
| value=IDLE_RESULT_HTML, |
| elem_classes=["result-card-wrap"], |
| show_label=False, |
| ) |
| preview_json = gr.Code( |
| label="Intent + routing metadata", |
| language="json", |
| elem_classes=["code-block"], |
| visible=False, |
| ) |
| with gr.Accordion( |
| "Trajectory preview", |
| open=False, |
| elem_classes=["accordion-wrap"], |
| ): |
| trajectory_json = gr.Code( |
| label="Trajectory JSON (truncated)", |
| language="json", |
| lines=16, |
| elem_classes=["code-block"], |
| show_label=False, |
| ) |
|
|
| gr.HTML( |
| f""" |
| <div class="site-footer"> |
| <p class="footer-title">Built for the Hugging Face Build Small Hackathon</p> |
| <div class="footer-meta"> |
| <span class="footer-pill">Qwen2.5-3B · QLoRA</span> |
| {INFERENCE_STATUS} |
| <a href="https://huggingface.co/Qwen/Qwen2.5-3B-Instruct" target="_blank">model card</a> |
| <span>·</span> |
| <span>{TOTAL_SKILLS} Android skills</span> |
| </div> |
| </div> |
| """ |
| ) |
|
|
| submit.click(route_prompt, inputs=prompt, outputs=[result_card, preview_json, trajectory_json]) |
| skills_btn.click(list_skills, outputs=[result_card, preview_json, trajectory_json]) |
|
|
| if __name__ == "__main__": |
| demo.launch() |
|
|
