Spaces:
Runtime error
Runtime error
| import json | |
| from pathlib import Path | |
| from typing import Any | |
| import gradio as gr | |
| from src.inference import ( | |
| CASE_OPTIONS, | |
| DEFAULT_CASE_NAME, | |
| DEFAULT_GRADCAM_TARGET_LAYER, | |
| DEVICE, | |
| GRADCAM_TARGET_LAYER_OPTIONS, | |
| batch_predict_with_xdl_stream, | |
| ) | |
| from src.utils import clean_drive_downloads, normalize_uploaded_paths | |
| UI_DEFAULTS_PATH = Path(__file__).resolve().parent.parent / "config" / "ui_defaults.json" | |
| UI_DEFAULTS_FALLBACK = { | |
| "selected_case": DEFAULT_CASE_NAME, | |
| "confidence_threshold": 0.60, | |
| "smoothgrad_samples": 50, | |
| "smoothgrad_noise": 0.05, | |
| "gradcam_target_layer": DEFAULT_GRADCAM_TARGET_LAYER, | |
| "save_xdl_results": False, | |
| "save_xdl_dir": "xdl_results", | |
| } | |
| GRADCAM_TARGET_LAYER_DROPDOWN_CHOICES = [ | |
| ("DenseBlock 3 (Default, balanced)", "denseblock3"), | |
| ("Transition 2 (Broad, stable)", "transition2"), | |
| ("Transition 1 (Earlier, detailed/noisier)", "transition1"), | |
| ("DenseBlock 4 (Late, center-heavy)", "denseblock4"), | |
| ("Transition 3 (Late, center-heavy)", "transition3"), | |
| ("Norm5 Last (Legacy behavior)", "norm5_last"), | |
| ] | |
| CUSTOM_CSS = """ | |
| .app-shell { | |
| --xdl-bg: #ffffff; | |
| --xdl-surface: #f8fafc; | |
| --xdl-text: #0f172a; | |
| --xdl-muted: #475569; | |
| --xdl-border: #d1d5db; | |
| --xdl-primary: #0f766e; | |
| --xdl-primary-strong: #0f4f4a; | |
| --xdl-accent: #0ea5e9; | |
| --xdl-success-bg: #dcfce7; | |
| --xdl-success-text: #166534; | |
| --xdl-warning-bg: #fef3c7; | |
| --xdl-warning-text: #92400e; | |
| max-width: 1120px; | |
| margin: 0 auto; | |
| color: var(--xdl-text); | |
| } | |
| .hero { | |
| border: 1px solid var(--xdl-border); | |
| background: linear-gradient(135deg, #f0fdfa 0%, #ecfeff 44%, #ffffff 100%); | |
| border-radius: 18px; | |
| padding: 20px 22px; | |
| margin-bottom: 12px; | |
| color: var(--xdl-text); | |
| box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08); | |
| } | |
| .hero-top { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 18px; | |
| align-items: flex-start; | |
| } | |
| .hero-kicker { | |
| color: var(--xdl-primary); | |
| font-size: 12px; | |
| font-weight: 900; | |
| letter-spacing: 0.12em; | |
| margin-bottom: 6px; | |
| text-transform: uppercase; | |
| } | |
| .hero h1 { | |
| margin: 0; | |
| font-size: 30px; | |
| line-height: 1.1; | |
| color: var(--xdl-text); | |
| } | |
| .hero p { | |
| margin: 8px 0 0 0; | |
| color: #334155; | |
| font-size: 15px; | |
| line-height: 1.5; | |
| max-width: 720px; | |
| } | |
| .hero-pills { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: flex-end; | |
| gap: 8px; | |
| min-width: 220px; | |
| } | |
| .hero-pill { | |
| border: 1px solid #99f6e4; | |
| border-radius: 999px; | |
| background: #ffffff; | |
| color: var(--xdl-primary-strong); | |
| font-size: 12px; | |
| font-weight: 900; | |
| padding: 7px 10px; | |
| white-space: nowrap; | |
| } | |
| .panel { | |
| border: 1px solid #e2e8f0; | |
| border-radius: 12px; | |
| background: var(--xdl-bg); | |
| color: var(--xdl-text); | |
| padding: 12px; | |
| } | |
| .dashboard-shell { | |
| align-items: flex-start; | |
| flex-direction: row-reverse; | |
| gap: 16px; | |
| } | |
| .sidebar-panel { | |
| border-radius: 20px; | |
| padding: 16px; | |
| position: sticky; | |
| top: 12px; | |
| } | |
| .workspace-panel { | |
| border-radius: 20px; | |
| padding: 18px; | |
| min-height: 680px; | |
| } | |
| .control-section { | |
| border: 1px solid #e2e8f0; | |
| border-radius: 15px; | |
| background: #f8fafc; | |
| margin-bottom: 12px; | |
| padding: 12px; | |
| } | |
| .control-section-title { | |
| color: var(--xdl-primary-strong); | |
| font-size: 12px; | |
| font-weight: 900; | |
| letter-spacing: 0.08em; | |
| margin-bottom: 10px; | |
| text-transform: uppercase; | |
| } | |
| .workspace-title { | |
| display: flex; | |
| align-items: center !important; | |
| justify-content: space-between; | |
| gap: 14px; | |
| margin-bottom: 14px; | |
| } | |
| .workspace-title-copy { | |
| display: flex; | |
| align-items: center; | |
| flex: 1 1 auto; | |
| min-height: 36px; | |
| min-width: 0; | |
| } | |
| .workspace-title h2 { | |
| color: var(--xdl-text); | |
| font-size: 20px; | |
| line-height: 1.2; | |
| margin: 0; | |
| } | |
| .presentation-toggle { | |
| align-self: center !important; | |
| flex: 0 0 auto !important; | |
| min-width: fit-content; | |
| } | |
| .presentation-toggle button { | |
| align-items: center !important; | |
| border: 1px solid #99f6e4 !important; | |
| border-radius: 999px !important; | |
| background: linear-gradient(135deg, #ffffff, #f0fdfa) !important; | |
| color: var(--xdl-primary-strong) !important; | |
| display: inline-flex !important; | |
| font-size: 12px !important; | |
| font-weight: 900 !important; | |
| justify-content: center !important; | |
| line-height: 1 !important; | |
| margin: 0 !important; | |
| min-height: 36px !important; | |
| padding: 0 14px !important; | |
| white-space: nowrap; | |
| } | |
| .presentation-toggle button:hover { | |
| border-color: var(--xdl-primary) !important; | |
| box-shadow: 0 8px 20px rgba(15, 118, 110, 0.16) !important; | |
| } | |
| .empty-state { | |
| border: 1px dashed #cbd5e1; | |
| border-radius: 18px; | |
| background: linear-gradient(135deg, #ffffff, #f8fafc); | |
| color: var(--xdl-muted); | |
| padding: 28px; | |
| text-align: center; | |
| } | |
| .empty-state-title { | |
| color: var(--xdl-text); | |
| font-size: 18px; | |
| font-weight: 900; | |
| margin-bottom: 8px; | |
| } | |
| .empty-state-copy { | |
| font-size: 14px; | |
| line-height: 1.5; | |
| margin: 0 auto; | |
| max-width: 520px; | |
| } | |
| .summary-card { | |
| border: 1px solid #d1d5db; | |
| border-radius: 18px; | |
| background: #ffffff; | |
| color: var(--xdl-text); | |
| padding: 16px; | |
| box-shadow: 0 14px 35px rgba(15, 23, 42, 0.06); | |
| } | |
| .summary-title { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 10px; | |
| margin-bottom: 14px; | |
| } | |
| .summary-title h3 { | |
| color: var(--xdl-text); | |
| font-size: 18px; | |
| margin: 0; | |
| } | |
| .summary-title span { | |
| border-radius: 999px; | |
| background: #ecfeff; | |
| color: var(--xdl-primary-strong); | |
| font-size: 12px; | |
| font-weight: 900; | |
| padding: 6px 10px; | |
| } | |
| .metric-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, minmax(0, 1fr)); | |
| gap: 10px; | |
| margin-bottom: 12px; | |
| } | |
| .metric-card { | |
| border: 1px solid #e2e8f0; | |
| border-radius: 14px; | |
| background: #f8fafc; | |
| padding: 12px; | |
| } | |
| .metric-label { | |
| color: #64748b; | |
| font-size: 12px; | |
| font-weight: 800; | |
| margin-bottom: 6px; | |
| } | |
| .metric-value { | |
| color: var(--xdl-text); | |
| font-size: 20px; | |
| font-weight: 900; | |
| line-height: 1.15; | |
| word-break: break-word; | |
| } | |
| .metric-value.small { | |
| font-size: 16px; | |
| } | |
| .summary-details { | |
| border-top: 1px solid #e5e7eb; | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 8px 16px; | |
| padding-top: 12px; | |
| } | |
| .summary-detail { | |
| color: #334155; | |
| font-size: 13px; | |
| line-height: 1.4; | |
| } | |
| .summary-detail b { | |
| color: var(--xdl-text); | |
| } | |
| .panel :is(h1, h2, h3, h4, h5, h6, p, label, span, th, td) { | |
| color: inherit; | |
| } | |
| .panel .secondary-wrap, | |
| .panel .prose, | |
| .panel .markdown { | |
| color: var(--xdl-text); | |
| } | |
| .xdl-report { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 14px; | |
| color: var(--xdl-text); | |
| } | |
| .processing-status { | |
| border: 1px solid #dbeafe; | |
| background: #eff6ff; | |
| border-radius: 14px; | |
| color: var(--xdl-text); | |
| padding: 14px; | |
| margin: 12px 0; | |
| } | |
| .processing-status-title { | |
| font-size: 16px; | |
| font-weight: 800; | |
| margin-bottom: 10px; | |
| } | |
| .processing-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 12px; | |
| } | |
| .progress-card { | |
| border: 1px solid #bfdbfe; | |
| border-radius: 12px; | |
| background: #ffffff; | |
| color: var(--xdl-text); | |
| padding: 12px; | |
| } | |
| .progress-card-head { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 12px; | |
| align-items: center; | |
| font-size: 14px; | |
| margin-bottom: 8px; | |
| } | |
| .progress-card-head span { | |
| color: #075985; | |
| font-weight: 800; | |
| } | |
| .progress-message { | |
| color: #334155; | |
| font-size: 13px; | |
| line-height: 1.4; | |
| margin-bottom: 10px; | |
| } | |
| .progress-track { | |
| height: 10px; | |
| border-radius: 999px; | |
| background: #dbeafe; | |
| overflow: hidden; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| border-radius: 999px; | |
| background: linear-gradient(90deg, var(--xdl-primary), var(--xdl-accent)); | |
| transition: width 180ms ease; | |
| } | |
| .xdl-guide { | |
| border: 1px solid #bae6fd; | |
| background: #f0f9ff; | |
| border-radius: 12px; | |
| padding: 14px; | |
| color: var(--xdl-text); | |
| } | |
| .xdl-guide-title { | |
| font-size: 16px; | |
| font-weight: 700; | |
| color: var(--xdl-text); | |
| margin-bottom: 10px; | |
| } | |
| .xdl-guide-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| gap: 10px; | |
| } | |
| .xdl-guide-grid div { | |
| border: 1px solid #dbeafe; | |
| background: var(--xdl-bg); | |
| color: var(--xdl-text); | |
| border-radius: 10px; | |
| padding: 10px; | |
| } | |
| .xdl-guide-grid b { | |
| display: block; | |
| color: #075985; | |
| font-size: 14px; | |
| margin-bottom: 4px; | |
| } | |
| .xdl-guide-grid span { | |
| display: block; | |
| color: #334155; | |
| font-size: 13px; | |
| line-height: 1.4; | |
| } | |
| .xdl-report-heading { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| color: var(--xdl-text); | |
| font-size: 17px; | |
| font-weight: 700; | |
| } | |
| .xdl-report-heading span { | |
| border-radius: 999px; | |
| background: #e0f2fe; | |
| color: #075985; | |
| font-size: 12px; | |
| font-weight: 700; | |
| padding: 5px 10px; | |
| } | |
| .xdl-scroll { | |
| max-height: 820px; | |
| overflow-y: auto; | |
| padding: 2px 8px 2px 2px; | |
| } | |
| .xdl-card { | |
| border: 1px solid #cbd5e1; | |
| border-radius: 18px; | |
| background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%); | |
| color: var(--xdl-text); | |
| box-shadow: 0 16px 36px rgba(15, 23, 42, 0.09); | |
| margin-bottom: 18px; | |
| padding: 18px; | |
| } | |
| .xdl-card-header { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 14px; | |
| align-items: flex-start; | |
| margin-bottom: 14px; | |
| } | |
| .xdl-filename { | |
| color: var(--xdl-text); | |
| font-size: 18px; | |
| font-weight: 800; | |
| word-break: break-word; | |
| } | |
| .xdl-card-subtitle { | |
| color: #64748b; | |
| font-size: 13px; | |
| margin-top: 3px; | |
| } | |
| .xdl-meta { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: flex-end; | |
| gap: 8px; | |
| } | |
| .xdl-badge, | |
| .xdl-confidence { | |
| border-radius: 999px; | |
| font-size: 13px; | |
| font-weight: 800; | |
| padding: 7px 11px; | |
| white-space: nowrap; | |
| } | |
| .xdl-badge { | |
| background: var(--xdl-success-bg); | |
| color: var(--xdl-success-text); | |
| } | |
| .xdl-confidence { | |
| background: var(--xdl-warning-bg); | |
| color: var(--xdl-warning-text); | |
| } | |
| .xdl-index { | |
| color: var(--xdl-primary); | |
| font-size: 12px; | |
| font-weight: 900; | |
| letter-spacing: 0.08em; | |
| margin-bottom: 5px; | |
| text-transform: uppercase; | |
| } | |
| .xdl-acceptance-note { | |
| border-left: 3px solid var(--xdl-primary); | |
| background: #f0fdfa; | |
| border-radius: 10px; | |
| color: #334155; | |
| font-size: 13px; | |
| line-height: 1.4; | |
| margin: 12px 0 14px 0; | |
| padding: 9px 11px; | |
| } | |
| .xdl-panel-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| gap: 12px; | |
| } | |
| .xdl-panel { | |
| border: 1px solid #e2e8f0; | |
| border-radius: 14px; | |
| background: var(--xdl-surface); | |
| color: var(--xdl-text); | |
| overflow: hidden; | |
| box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75); | |
| } | |
| .xdl-panel-title { | |
| background: #0f172a; | |
| color: #ffffff; | |
| font-size: 13px; | |
| font-weight: 800; | |
| letter-spacing: 0.02em; | |
| padding: 8px 10px; | |
| text-align: center; | |
| } | |
| .xdl-panel img { | |
| display: block; | |
| width: 100%; | |
| height: auto; | |
| background: #ffffff; | |
| transition: transform 160ms ease, filter 160ms ease; | |
| } | |
| .xdl-image-link { | |
| color: inherit; | |
| display: block; | |
| position: relative; | |
| text-decoration: none; | |
| } | |
| .xdl-image-link:hover img { | |
| filter: saturate(1.05) contrast(1.03); | |
| transform: scale(1.01); | |
| } | |
| .xdl-image-hint { | |
| border: 1px solid rgba(255, 255, 255, 0.45); | |
| border-radius: 999px; | |
| background: rgba(15, 23, 42, 0.78); | |
| bottom: 9px; | |
| color: #ffffff !important; | |
| font-size: 11px; | |
| font-weight: 900; | |
| opacity: 0; | |
| padding: 5px 8px; | |
| pointer-events: none; | |
| position: absolute; | |
| right: 9px; | |
| transform: translateY(4px); | |
| transition: opacity 160ms ease, transform 160ms ease; | |
| } | |
| .xdl-image-link:hover .xdl-image-hint { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .xdl-empty { | |
| border: 1px dashed #cbd5e1; | |
| border-radius: 14px; | |
| background: var(--xdl-surface); | |
| color: var(--xdl-muted); | |
| padding: 24px; | |
| text-align: center; | |
| } | |
| .xdl-empty-title { | |
| color: var(--xdl-text); | |
| font-size: 16px; | |
| font-weight: 800; | |
| margin-bottom: 6px; | |
| } | |
| .xdl-status { | |
| color: var(--xdl-muted); | |
| font-size: 13px; | |
| text-align: right; | |
| } | |
| @media (max-width: 900px) { | |
| .sidebar-panel { | |
| position: static; | |
| } | |
| .metric-grid, | |
| .summary-details { | |
| grid-template-columns: 1fr; | |
| } | |
| .hero-top { | |
| flex-direction: column; | |
| } | |
| .hero-pills { | |
| justify-content: flex-start; | |
| } | |
| .processing-grid, | |
| .xdl-guide-grid, | |
| .xdl-panel-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .xdl-card-header { | |
| flex-direction: column; | |
| } | |
| .xdl-meta { | |
| justify-content: flex-start; | |
| } | |
| } | |
| .action-stack { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .action-row { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr) auto; | |
| gap: 8px; | |
| align-items: stretch; | |
| } | |
| .run-action button { | |
| font-weight: 900 !important; | |
| min-height: 44px; | |
| } | |
| .clean-action button { | |
| min-height: 44px; | |
| } | |
| .action-note { | |
| border: 1px solid #ccfbf1; | |
| border-radius: 10px; | |
| background: #f0fdfa; | |
| color: #0f4f4a; | |
| font-size: 12px; | |
| font-weight: 700; | |
| line-height: 1.35; | |
| padding: 9px 10px; | |
| } | |
| """ | |
| def _as_float(value: Any, fallback: float) -> float: | |
| try: | |
| return float(value) | |
| except (TypeError, ValueError): | |
| return float(fallback) | |
| def _as_int(value: Any, fallback: int) -> int: | |
| try: | |
| return int(value) | |
| except (TypeError, ValueError): | |
| return int(fallback) | |
| def _as_bool(value: Any, fallback: bool) -> bool: | |
| if isinstance(value, bool): | |
| return value | |
| if isinstance(value, str): | |
| return value.strip().lower() in {"1", "true", "yes", "y", "on"} | |
| if value is None: | |
| return fallback | |
| return bool(value) | |
| def _load_ui_defaults() -> dict[str, Any]: | |
| defaults = dict(UI_DEFAULTS_FALLBACK) | |
| try: | |
| raw_text = UI_DEFAULTS_PATH.read_text(encoding="utf-8") | |
| raw = json.loads(raw_text) | |
| if isinstance(raw, dict): | |
| for key in defaults: | |
| if key in raw: | |
| defaults[key] = raw[key] | |
| except Exception: | |
| pass | |
| selected_case = str(defaults.get("selected_case", DEFAULT_CASE_NAME)) | |
| defaults["selected_case"] = selected_case if selected_case in CASE_OPTIONS else DEFAULT_CASE_NAME | |
| defaults["confidence_threshold"] = min( | |
| 1.0, | |
| max(0.0, _as_float(defaults.get("confidence_threshold"), UI_DEFAULTS_FALLBACK["confidence_threshold"])), | |
| ) | |
| defaults["smoothgrad_samples"] = max( | |
| 1, | |
| _as_int(defaults.get("smoothgrad_samples"), UI_DEFAULTS_FALLBACK["smoothgrad_samples"]), | |
| ) | |
| defaults["smoothgrad_noise"] = min( | |
| 1.0, | |
| max(0.0, _as_float(defaults.get("smoothgrad_noise"), UI_DEFAULTS_FALLBACK["smoothgrad_noise"])), | |
| ) | |
| gradcam_target_layer = str(defaults.get("gradcam_target_layer", DEFAULT_GRADCAM_TARGET_LAYER)).strip().lower() | |
| defaults["gradcam_target_layer"] = ( | |
| gradcam_target_layer if gradcam_target_layer in GRADCAM_TARGET_LAYER_OPTIONS else DEFAULT_GRADCAM_TARGET_LAYER | |
| ) | |
| defaults["save_xdl_results"] = _as_bool(defaults.get("save_xdl_results"), UI_DEFAULTS_FALLBACK["save_xdl_results"]) | |
| defaults["save_xdl_dir"] = str(defaults.get("save_xdl_dir") or UI_DEFAULTS_FALLBACK["save_xdl_dir"]) | |
| return defaults | |
| def _toggle_save_dir(enabled: bool): | |
| is_enabled = bool(enabled) | |
| return gr.update(visible=is_enabled, interactive=is_enabled) | |
| def _toggle_presentation_view(enabled: bool): | |
| next_enabled = not bool(enabled) | |
| label = "Exit Presentation View" if next_enabled else "Enter Presentation View" | |
| variant = "primary" if next_enabled else "secondary" | |
| return next_enabled, gr.update(visible=not next_enabled), gr.update(value=label, variant=variant) | |
| def _loaded_images_from_upload(uploaded_files): | |
| image_paths = normalize_uploaded_paths(uploaded_files) | |
| names = [path.name for path in image_paths] | |
| stored_paths = [str(path) for path in image_paths] | |
| return gr.update(choices=names, value=names[0] if names else None, interactive=bool(names)), stored_paths | |
| def _empty_summary_html() -> str: | |
| return ( | |
| "<div class='empty-state'>" | |
| "<div class='empty-state-title'>No Results Yet</div>" | |
| "<div class='empty-state-copy'>Upload an image folder or enter a public Google Drive folder link, " | |
| "then run inference to see the batch diagnosis summary.</div>" | |
| "</div>" | |
| ) | |
| def _empty_processing_html() -> str: | |
| return ( | |
| "<div class='empty-state'>" | |
| "<div class='empty-state-title'>Processing Status Will Appear Here</div>" | |
| "<div class='empty-state-copy'>Input preparation, Drive download progress, and XDL generation progress " | |
| "will stream here while the model runs.</div>" | |
| "</div>" | |
| ) | |
| def _empty_xdl_html() -> str: | |
| return ( | |
| "<div class='empty-state'>" | |
| "<div class='empty-state-title'>XDL Cards Not Generated Yet</div>" | |
| "<div class='empty-state-copy'>Classified images will appear as presentation-ready Original, GradCAM, " | |
| "and SmoothGrad cards after inference completes.</div>" | |
| "</div>" | |
| ) | |
| def _reset_demo(): | |
| clean_drive_downloads() | |
| ui_defaults = _load_ui_defaults() | |
| save_enabled = bool(ui_defaults["save_xdl_results"]) | |
| return ( | |
| ui_defaults["selected_case"], | |
| None, | |
| [], | |
| "", | |
| gr.update(choices=[], value=None, interactive=False), | |
| ui_defaults["confidence_threshold"], | |
| ui_defaults["smoothgrad_samples"], | |
| ui_defaults["smoothgrad_noise"], | |
| ui_defaults["gradcam_target_layer"], | |
| ui_defaults["save_xdl_results"], | |
| gr.update( | |
| value=ui_defaults["save_xdl_dir"], | |
| visible=save_enabled, | |
| interactive=save_enabled, | |
| ), | |
| _empty_summary_html(), | |
| _empty_processing_html(), | |
| _empty_xdl_html(), | |
| [], | |
| ) | |
| def build_demo() -> gr.Blocks: | |
| ui_defaults = _load_ui_defaults() | |
| with gr.Blocks(title="XDL Colitis Demo") as demo: | |
| gr.HTML( | |
| f""" | |
| <style>{CUSTOM_CSS}</style> | |
| <div class="app-shell"> | |
| <div class="hero"> | |
| <div class="hero-top"> | |
| <div class="hero-copy"> | |
| <div class="hero-kicker">Medical AI Explanation Demo</div> | |
| <h1>XDL Colitis Workbench</h1> | |
| <p>DenseNet-based colitis classification with GradCAM and SmoothGrad explanations. Upload a directory or use a public Google Drive folder link, then run batch inference.</p> | |
| </div> | |
| <div class="hero-pills"> | |
| <span class="hero-pill">Device: {DEVICE.type}</span> | |
| <span class="hero-pill">3 Case Modes</span> | |
| <span class="hero-pill">Folder / Drive Input</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| """ | |
| ) | |
| with gr.Row(elem_classes=["app-shell", "dashboard-shell"]): | |
| with gr.Column(scale=1, min_width=330, elem_classes=["panel", "sidebar-panel"]) as sidebar_panel: | |
| gr.HTML("<div class='control-section-title'>Data Source</div>") | |
| with gr.Group(elem_classes=["control-section"]): | |
| upload_input = gr.UploadButton( | |
| label="Select Image Folder", | |
| variant="secondary", | |
| file_count="directory", | |
| type="filepath", | |
| ) | |
| google_drive_link = gr.Textbox( | |
| label="Google Drive Link (Optional)", | |
| placeholder="Public Google Drive folder link", | |
| ) | |
| loaded_images = gr.Dropdown( | |
| choices=[], | |
| label="Loaded Images", | |
| info="Filenames detected from upload or Google Drive after processing starts.", | |
| interactive=False, | |
| ) | |
| uploaded_files_state = gr.State([]) | |
| folder_path = gr.State("") | |
| gr.HTML("<div class='control-section-title'>Model Case</div>") | |
| with gr.Group(elem_classes=["control-section"]): | |
| selected_case = gr.Dropdown( | |
| choices=CASE_OPTIONS, | |
| value=ui_defaults["selected_case"], | |
| label="Problem Case", | |
| info="Choose the model group that matches your diagnosis scenario.", | |
| ) | |
| gr.HTML("<div class='control-section-title'>Inference Settings</div>") | |
| with gr.Group(elem_classes=["control-section"]): | |
| threshold = gr.Number( | |
| value=ui_defaults["confidence_threshold"], | |
| minimum=0.0, | |
| maximum=1.0, | |
| step=0.01, | |
| precision=2, | |
| label="Confidence Threshold", | |
| info="Range: 0.00 to 1.00", | |
| ) | |
| gradcam_target_layer = gr.Dropdown( | |
| choices=GRADCAM_TARGET_LAYER_DROPDOWN_CHOICES, | |
| value=ui_defaults["gradcam_target_layer"], | |
| label="GradCAM Target Layer", | |
| info="Try `transition2` or `denseblock3` if CAM looks too centered.", | |
| ) | |
| smoothgrad_samples = gr.Number( | |
| value=ui_defaults["smoothgrad_samples"], | |
| minimum=1, | |
| maximum=1000, | |
| step=1, | |
| precision=0, | |
| label="SmoothGrad Samples", | |
| info="Higher values improve stability but increase runtime.", | |
| ) | |
| smoothgrad_noise = gr.Number( | |
| value=ui_defaults["smoothgrad_noise"], | |
| minimum=0.0, | |
| maximum=1.0, | |
| step=0.01, | |
| precision=2, | |
| label="SmoothGrad Noise Level", | |
| info="Typical range: 0.01 to 0.20", | |
| ) | |
| gr.HTML("<div class='control-section-title'>Export</div>") | |
| with gr.Group(elem_classes=["control-section"]): | |
| save_xdl_results = gr.Checkbox( | |
| label="Save XDL Results Locally", | |
| value=ui_defaults["save_xdl_results"], | |
| ) | |
| save_xdl_dir = gr.Textbox( | |
| label="Save Folder", | |
| value=ui_defaults["save_xdl_dir"], | |
| placeholder="xdl_results", | |
| visible=bool(ui_defaults["save_xdl_results"]), | |
| interactive=bool(ui_defaults["save_xdl_results"]), | |
| ) | |
| with gr.Column(elem_classes=["action-stack"]): | |
| with gr.Row(elem_classes=["action-row"]): | |
| run_btn = gr.Button( | |
| "Run / Rerun Inference", | |
| variant="primary", | |
| elem_classes=["run-action"], | |
| ) | |
| clean_btn = gr.Button("Clean", variant="secondary", elem_classes=["clean-action"]) | |
| gr.HTML( | |
| "<div class='action-note'>Runs classification first, then streams XDL overlays as each image finishes.</div>" | |
| ) | |
| with gr.Column(scale=3, elem_classes=["panel", "workspace-panel"]): | |
| with gr.Row(elem_classes=["workspace-title"]): | |
| gr.HTML( | |
| "<div class='workspace-title-copy'><h2>Results Workspace</h2></div>" | |
| ) | |
| presentation_state = gr.State(False) | |
| presentation_btn = gr.Button( | |
| "Enter Presentation View", | |
| variant="secondary", | |
| elem_classes=["presentation-toggle"], | |
| scale=0, | |
| min_width=178, | |
| ) | |
| summary_out = gr.HTML(value=_empty_summary_html(), label="Summary") | |
| processing_status_out = gr.HTML(value=_empty_processing_html(), label="Processing Status") | |
| xdl_report_out = gr.HTML(value=_empty_xdl_html(), label="Classified XDL Results") | |
| with gr.Accordion("Detailed Per-Image Table", open=False): | |
| table_out = gr.Dataframe( | |
| headers=["filename", "status", "predicted_label", "confidence_or_error"], | |
| datatype=["str", "str", "str", "str"], | |
| interactive=False, | |
| label="Per-image Results", | |
| ) | |
| save_xdl_results.change( | |
| fn=_toggle_save_dir, | |
| inputs=[save_xdl_results], | |
| outputs=[save_xdl_dir], | |
| ) | |
| upload_input.upload( | |
| fn=_loaded_images_from_upload, | |
| inputs=[upload_input], | |
| outputs=[loaded_images, uploaded_files_state], | |
| ) | |
| presentation_btn.click( | |
| fn=_toggle_presentation_view, | |
| inputs=[presentation_state], | |
| outputs=[presentation_state, sidebar_panel, presentation_btn], | |
| ) | |
| run_btn.click( | |
| fn=batch_predict_with_xdl_stream, | |
| inputs=[ | |
| uploaded_files_state, | |
| selected_case, | |
| folder_path, | |
| threshold, | |
| smoothgrad_samples, | |
| smoothgrad_noise, | |
| save_xdl_results, | |
| save_xdl_dir, | |
| gradcam_target_layer, | |
| google_drive_link, | |
| ], | |
| outputs=[summary_out, processing_status_out, xdl_report_out, loaded_images, table_out], | |
| ) | |
| clean_btn.click( | |
| fn=_reset_demo, | |
| inputs=[], | |
| outputs=[ | |
| selected_case, | |
| upload_input, | |
| uploaded_files_state, | |
| google_drive_link, | |
| loaded_images, | |
| threshold, | |
| smoothgrad_samples, | |
| smoothgrad_noise, | |
| gradcam_target_layer, | |
| save_xdl_results, | |
| save_xdl_dir, | |
| summary_out, | |
| processing_status_out, | |
| xdl_report_out, | |
| table_out, | |
| ], | |
| ) | |
| return demo.queue() | |