Spaces:

jen900704
/

PanTS_Search

Sleeping

App Files Files Community

jen900704 commited on Oct 13, 2025

Commit

4828c8f

verified ·

1 Parent(s): 3e65308

Upload 4 files

Browse files

Files changed (5) hide show

.gitattributes +1 -0
1012.html +1390 -0
metadata.xlsx +3 -0
nApp.py +731 -0
requirements.txt +5 -0

.gitattributes CHANGED Viewed

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text

 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+metadata.xlsx filter=lfs diff=lfs merge=lfs -text

1012.html ADDED Viewed

	@@ -0,0 +1,1390 @@

+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>CT Finder · Search + Viewer (Dark)</title>
+    <style>
+        :root {
+            --bg: #0e1a2b;
+            --panel: #12243b;
+            --panel-soft: #132a45;
+            --ink: #e8eff9;
+            --sub: #a9b7cc;
+            --line: #243a57;
+            --brand: #2a6cff;
+            --brand-ink: #fff;
+            --accent: #febb02;
+            --good: #16a34a;
+            --bad: #ef4444;
+            --control-h: 44px
+        }
+        * {
+            box-sizing: border-box
+        }
+        body {
+            margin: 0;
+            font: 14px/1.55 Inter, system-ui, Segoe UI, Arial;
+            background: var(--bg);
+            color: var(--ink)
+        }
+        .hero {
+            background: #0a1b32;
+            padding: 22px 16px 18px
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            position: relative
+        }
+        .searchRail {
+            display: grid;
+            grid-template-columns: 1.4fr 2fr auto;
+            gap: 0;
+            background: var(--panel);
+            border-radius: 14px;
+            padding: 6px;
+            box-shadow: 0 0 0 3px var(--accent) inset
+        }
+        .segment {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            padding: 6px 8px;
+            border-right: 1px solid var(--line)
+        }
+        .segment:last-child {
+            border-right: none
+        }
+        .segment label {
+            font-weight: 800;
+            color: var(--sub);
+            min-width: 28px
+        }
+        .input,
+        .fakeInput {
+            width: 100%;
+            height: var(--control-h);
+            display: flex;
+            align-items: center;
+            padding: 10px 12px;
+            border: 1px solid var(--line);
+            border-radius: 10px;
+            background: var(--panel-soft);
+            color: var(--ink)
+        }
+        .input::placeholder {
+            color: #7e90ab
+        }
+        .btnSearch {
+            height: var(--control-h);
+            align-self: center;
+            border-radius: 10px;
+            background: var(--brand);
+            color: var(--brand-ink);
+            border: none;
+            font-weight: 900;
+            padding: 0 22px;
+            min-width: 132px;
+            cursor: pointer;
+            margin: 0 2px
+        }
+        .pop {
+            position: relative
+        }
+        .popBtn {
+            width: 100%;
+            text-align: left;
+            cursor: pointer
+        }
+        .popPanel {
+            position: absolute;
+            top: calc(var(--control-h) + 10px);
+            left: 0;
+            z-index: 50;
+            display: none;
+            width: 520px;
+            max-width: 92vw;
+            background: var(--panel);
+            border: 1px solid var(--line);
+            border-radius: 12px;
+            box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
+            padding: 14px
+        }
+        .pop.open .popPanel {
+            display: block
+        }
+        .group {
+            margin-bottom: 12px
+        }
+        .groupTitle {
+            font-weight: 800;
+            margin-bottom: 6px;
+            color: var(--ink)
+        }
+        .chips {
+            display: flex;
+            gap: 6px;
+            flex-wrap: wrap
+        }
+        .chip {
+            padding: 6px 10px;
+            border: 1px solid var(--line);
+            border-radius: 999px;
+            background: #0f223b;
+            color: var(--ink);
+            cursor: pointer
+        }
+        .chip.active {
+            outline: 2px solid #6ea8ff
+        }
+        .main {
+            max-width: 1200px;
+            margin: 16px auto;
+            display: grid;
+            gap: 16px
+        }
+        @media(min-width:1100px) {
+            .main {
+                grid-template-columns: 300px 1fr
+            }
+        }
+        .panel {
+            background: var(--panel);
+            border: 1px solid var(--line);
+            border-radius: 14px
+        }
+        .filters {
+            padding: 12px;
+            display: none
+        }
+        .filters.show {
+            display: block
+        }
+        .secTitle {
+            font-weight: 900;
+            margin: 2px 0 8px
+        }
+        .fset {
+            margin-bottom: 14px
+        }
+        .optRow {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin: 6px 0
+        }
+        .optRow input {
+            transform: translateY(1px)
+        }
+        .count {
+            color: var(--sub);
+            font-size: 12px
+        }
+        .showMore {
+            color: #8fb3ff;
+            background: transparent;
+            border: none;
+            cursor: pointer;
+            padding: 0 2px;
+            font-weight: 700
+        }
+        .badge {
+            display: inline-block;
+            border: 1px solid var(--line);
+            border-radius: 999px;
+            padding: 2px 8px;
+            font-size: 12px;
+            margin-left: 8px;
+            color: var(--sub)
+        }
+        label {
+            color: var(--ink)
+        }
+        /* Browse */
+        .recBar {
+            padding: 10px 12px;
+            position: relative
+        }
+        .recTitle {
+            font-weight: 900;
+            margin: 4px 0 8px
+        }
+        .recViewport {
+            position: relative
+        }
+        .recScroll {
+            display: flex;
+            gap: 12px;
+            overflow: auto;
+            padding-bottom: 8px;
+            scroll-snap-type: x mandatory;
+            scrollbar-width: none
+        }
+        .recScroll::-webkit-scrollbar {
+            display: none
+        }
+        .recCard {
+            min-width: 320px;
+            scroll-snap-align: start;
+            border: 1px solid var(--line);
+            border-radius: 14px;
+            background: var(--panel);
+            overflow: hidden
+        }
+        .recThumb {
+            width: 100%;
+            aspect-ratio: 16/9;
+            background: #0f223b;
+            object-fit: cover
+        }
+        .recBody {
+            padding: 10px
+        }
+        .recMeta {
+            color: var(--sub);
+            font-size: 12px
+        }
+        .btn {
+            border: 1px solid var(--line);
+            background: var(--panel-soft);
+            color: var(--ink);
+            border-radius: 10px;
+            padding: 8px 12px;
+            cursor: pointer;
+            width: 100%;
+            margin-top: 8px
+        }
+        .recCtrl {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 36px;
+            height: 36px;
+            border: 1px solid var(--line);
+            background: var(--panel-soft);
+            color: var(--ink);
+            border-radius: 999px;
+            display: grid;
+            place-items: center;
+            cursor: pointer;
+            opacity: .9
+        }
+        .recPrev {
+            left: -6px
+        }
+        .recNext {
+            right: -6px
+        }
+        .recPlay {
+            position: absolute;
+            right: 44px;
+            top: -6px;
+            width: 32px;
+            height: 32px;
+            border: 1px solid var(--line);
+            background: var(--panel-soft);
+            border-radius: 999px;
+            display: grid;
+            place-items: center;
+            cursor: pointer;
+            font-size: 14px
+        }
+        /* Results */
+        .resultsHead {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 10px 12px
+        }
+        .counter {
+            font-weight: 900
+        }
+        .select {
+            border: 1px solid var(--line);
+            border-radius: 10px;
+            padding: 8px 10px;
+            background: var(--panel-soft);
+            color: var(--ink)
+        }
+        .cards {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+            gap: 12px;
+            padding: 12px
+        }
+        .card {
+            border: 1px solid var(--line);
+            border-radius: 14px;
+            background: var(--panel);
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+            box-shadow: 0 6px 14px rgba(0, 0, 0, .25)
+        }
+        .card:hover {
+            box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
+            transform: translateY(-1px)
+        }
+        .thumb {
+            aspect-ratio: 4/3;
+            width: 100%;
+            object-fit: cover;
+            background: #0f223b
+        }
+        .body {
+            padding: 10px
+        }
+        .titleRow {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin: 4px 0 6px
+        }
+        .caseLink {
+            font-weight: 900;
+            font-size: 16px;
+            color: #9ec5ff;
+            text-decoration: none;
+            letter-spacing: .2px
+        }
+        .caseLink:hover {
+            text-decoration: underline
+        }
+        .keyRow {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+            align-items: center;
+            margin: 6px 0 2px
+        }
+        .kv {
+            display: inline-flex;
+            gap: 6px;
+            align-items: center;
+            font-size: 13px
+        }
+        .kv .k {
+            color: var(--sub);
+            text-transform: uppercase;
+            letter-spacing: .4px
+        }
+        .kv .v {
+            font-weight: 900
+        }
+        .tag {
+            font-size: 12px;
+            padding: 3px 8px;
+            border-radius: 999px;
+            border: 1px solid transparent
+        }
+        .tag.ok {
+            color: var(--good);
+            background: rgba(22, 163, 74, .12);
+            border-color: rgba(34, 197, 94, .25)
+        }
+        .tag.bad {
+            color: var(--bad);
+            background: rgba(239, 68, 68, .12);
+            border-color: rgba(239, 68, 68, .25)
+        }
+        /* Preparing page */
+        .prepPage {
+            position: fixed;
+            inset: 0;
+            display: none;
+            align-items: center;
+            justify-content: center;
+            background: #000;
+            z-index: 1200;
+            pointer-events: auto
+        }
+        .prepPage.show {
+            display: flex
+        }
+        .prepBox {
+            text-align: center;
+            color: #cfd7ff
+        }
+        .prepTitle {
+            margin-top: 6px;
+            font-weight: 800
+        }
+        .prepHint {
+            margin-top: 4px;
+            color: #8ea6ff
+        }
+        /* Viewer */
+        .viewer {
+            position: fixed;
+            inset: 0;
+            background: #000;
+            color: #e8edf8;
+            z-index: 100;
+            display: none
+        }
+        .viewer.show {
+            display: block
+        }
+        .viewer.compact .v-sidebar,
+        .viewer.compact .v-card {
+            display: none
+        }
+        .v-toolbar {
+            position: fixed;
+            top: 12px;
+            left: 12px;
+            display: flex;
+            gap: 10px;
+            z-index: 1000;
+            pointer-events: auto
+        }
+        .iconBtn {
+            width: 40px;
+            height: 40px;
+            border: 1px solid #2b3146;
+            background: #0f1324;
+            color: #e8edf8;
+            border-radius: 12px;
+            display: grid;
+            place-items: center;
+            cursor: pointer;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, .35)
+        }
+        .v-sidebar {
+            position: fixed;
+            top: 64px;
+            left: 0;
+            bottom: 0;
+            width: 260px;
+            background: #0f1324;
+            border-right: 1px solid #2b3146;
+            padding: 12px;
+            overflow: auto;
+            z-index: 200
+        }
+        .v-sidebar h3 {
+            margin: 2px 0 10px;
+            font-size: 16px
+        }
+        .toggleAll {
+            width: 100%;
+            background: #161a2e;
+            border: 1px solid #2b3146;
+            border-radius: 10px;
+            color: #e8edf8;
+            padding: 8px 10px;
+            margin-bottom: 8px;
+            cursor: pointer
+        }
+        .v-card {
+            position: fixed;
+            top: 60px;
+            left: 12px;
+            width: 300px;
+            background: #0f1324;
+            border: 1px solid #2b3146;
+            border-radius: 12px;
+            padding: 10px;
+            z-index: 300;
+            max-height: calc(100vh - 96px);
+            overflow: auto
+        }
+        .v-actions {
+            display: flex;
+            gap: 10px;
+            margin-top: 12px;
+            justify-content: space-between
+        }
+        .v-stage {
+            margin-left: 260px;
+            height: 100vh;
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            grid-template-rows: 1fr 1fr;
+            gap: 12px;
+            padding: 72px 16px 16px 276px
+        }
+        .viewer.compact .v-stage {
+            margin-left: 0;
+            padding: 12px
+        }
+        .v-view {
+            position: relative;
+            border: none;
+            border-radius: 12px;
+            background: #000;
+            overflow: hidden
+        }
+        .v-view h4 {
+            display: none
+        }
+        .v-view img {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+            background: #000
+        }
+        .center {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            color: #cfd7ff
+        }
+        .center .mini {
+            width: 160px;
+            height: 100px;
+            background: #dcd7ce;
+            border-radius: 10px;
+            margin-bottom: 8px
+        }
+        .hidden {
+            display: none !important
+        }
+        /* modal */
+        .modal {
+            position: fixed;
+            inset: 0;
+            background: rgba(0, 0, 0, .55);
+            display: none;
+            align-items: center;
+            justify-content: center;
+            z-index: 1300
+        }
+        .modal.show {
+            display: flex
+        }
+        .modalBox {
+            width: min(720px, 92vw);
+            max-height: 80vh;
+            overflow: auto;
+            background: #0f1324;
+            color: #e8edf8;
+            border: 1px solid #2b3146;
+            border-radius: 12px;
+            padding: 14px;
+            box-shadow: 0 12px 32px rgba(0, 0, 0, .45)
+        }
+        .modalHead {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 8px
+        }
+        .iconBtn.sm {
+            width: 32px;
+            height: 32px;
+            border-radius: 10px
+        }
+        /* Class Map list style */
+        .cm {
+            display: flex;
+            flex-direction: column;
+            gap: 8px
+        }
+        .cm-head {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            font-weight: 800;
+            margin-bottom: 4px
+        }
+        .cm-group {
+            border: 1px solid #2b3146;
+            border-radius: 10px;
+            background: #0f1324;
+            overflow: hidden
+        }
+        .cm-row {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 10px;
+            cursor: default
+        }
+        .cm-row .chev {
+            width: 18px;
+            text-align: center;
+            opacity: .9
+        }
+        .cm-row .title {
+            flex: 1;
+            font-weight: 700
+        }
+        .cm-row input[type=checkbox] {
+            accent-color: #6ea8ff
+        }
+        .cm-items {
+            padding: 8px 10px 10px 36px;
+            display: grid;
+            grid-template-columns: 1fr;
+            gap: 4px;
+            max-height: 240px;
+            overflow: auto;
+            border-top: 1px solid #202844
+        }
+        .cm-item {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            padding: 6px 4px;
+            border-radius: 8px
+        }
+        .cm-item:hover {
+            background: #121837
+        }
+        .cm-item input[type=checkbox] {
+            accent-color: #6ea8ff;
+            transform: translateY(1px)
+        }
+        .cm-item .name {
+            font-size: 13px;
+            letter-spacing: .2px
+        }
+        .cm-group.closed .cm-items {
+            display: none
+        }
+        .v-sidebar::-webkit-scrollbar,
+        .cm-items::-webkit-scrollbar {
+            width: 10px;
+            height: 10px
+        }
+        .v-sidebar::-webkit-scrollbar-thumb,
+        .cm-items::-webkit-scrollbar-thumb {
+            background: #1c243a;
+            border-radius: 8px;
+            border: 2px solid #0f1324
+        }
+        .v-sidebar::-webkit-scrollbar-track,
+        .cm-items::-webkit-scrollbar-track {
+            background: transparent
+        }
+        /* tools */
+        .toolBtn {
+            width: 44px;
+            height: 44px;
+            border: 1px solid #2b3146;
+            background: #0f1324;
+            color: #e8edf8;
+            border-radius: 12px;
+            display: grid;
+            place-items: center;
+            cursor: pointer
+        }
+        .toolBtn svg {
+            width: 22px;
+            height: 22px
+        }
+    </style>
+</head>
+<body>
+    <!-- Search -->
+    <section class="hero">
+        <div class="container">
+            <div class="searchRail">
+                <!-- ID -->
+                <div class="segment pop" id="popID">
+                    <label>ID</label>
+                    <input id="q" class="input popBtn" placeholder="Search Case ID or keyword…" autocomplete="off">
+                    <div class="popPanel" style="width:520px">
+                        <div class="group">
+                            <div class="groupTitle">Recommended IDs</div>
+                            <div id="idReco" class="chips"></div>
+                        </div>
+                        <div class="group">
+                            <div class="groupTitle">Recently viewed</div>
+                            <div id="idRecent" class="chips"><span class="recMeta">No recent</span></div>
+                        </div>
+                    </div>
+                </div>
+                <!-- STA -->
+                <div class="segment pop" id="popSTA">
+                    <button class="fakeInput popBtn" type="button">
+                        <span id="staSummary">Any tumor · Any sex · Any age</span>
+                    </button>
+                    <div class="popPanel" style="max-width:560px">
+                        <div class="group">
+                            <div class="groupTitle">Tumor</div>
+                            <div id="tumorChips" class="chips">
+                                <button class="chip" data-tumor="">Any</button>
+                                <button class="chip" data-tumor="1">Tumor</button>
+                                <button class="chip" data-tumor="0">No tumor</button>
+                            </div>
+                        </div>
+                        <div class="group">
+                            <div class="groupTitle">Sex</div>
+                            <div id="sexChips" class="chips">
+                                <button class="chip" data-sex="">Any</button>
+                                <button class="chip" data-sex="M">Male</button>
+                                <button class="chip" data-sex="F">Female</button>
+                            </div>
+                        </div>
+                        <div class="group">
+                            <div class="groupTitle">Age quick picks</div>
+                            <div id="ageChips" class="chips"></div>
+                        </div>
+                        <!-- Apply inside the popover -->
+                        <button id="applySTA" class="btnSearch" style="width:100%" type="button">Apply</button>
+                    </div>
+                </div>
+                <!-- Right side Search button -->
+                <button id="searchBtn" class="btnSearch" type="button">Search</button>
+            </div>
+        </div>
+    </section>
+    <!-- Browse -->
+    <section class="panel container recBar" id="recBar">
+        <div class="recTitle">Browse</div>
+        <div class="recViewport">
+            <button class="recCtrl recPrev" id="recPrev" title="Previous">‹</button>
+            <button class="recCtrl recNext" id="recNext" title="Next">›</button>
+            <button class="recPlay" id="recPlay" title="Pause/Play">⏸</button>
+            <div id="recScroll" class="recScroll"></div>
+        </div>
+    </section>
+    <!-- Main -->
+    <section class="main container">
+        <aside id="filters" class="filters panel">
+            <div class="secTitle">Advanced</div>
+            <div class="fset" id="fs_ct">
+                <div class="groupTitle">CT phase <span class="badge">multi-select</span></div>
+                <div class="optRow"><label><input type="checkbox" data-k="ct_phase" value="" checked> Any</label></div>
+                <div id="ct_phase_opts"></div>
+            </div>
+            <div class="fset" id="fs_mfr">
+                <div class="groupTitle">Manufacturer <span class="badge">multi-select</span></div>
+                <div class="optRow"><label><input type="checkbox" data-k="manufacturer" value="" checked> Any</label>
+                </div>
+                <div id="manufacturer_opts"></div>
+            </div>
+            <div class="fset" id="fs_model">
+                <div class="groupTitle">Manufacturer model <span class="badge">multi-select</span></div>
+                <div class="optRow"><label><input type="checkbox" data-k="model" value="" checked> Any</label></div>
+                <div id="model_opts"></div>
+                <button class="showMore" data-target="model_opts">Show more</button>
+            </div>
+            <div class="fset" id="fs_type">
+                <div class="groupTitle">Study type <span class="badge">multi-select</span></div>
+                <div class="optRow"><label><input type="checkbox" data-k="study_type" value="" checked> Any</label>
+                </div>
+                <div id="type_opts"></div>
+            </div>
+            <div class="fset" id="fs_nat">
+                <div class="groupTitle">Site nationality <span class="badge">multi-select</span></div>
+                <div class="optRow"><label><input type="checkbox" data-k="site_nat" value="" checked> Any</label></div>
+                <div id="nat_opts"></div>
+            </div>
+            <div class="fset" id="fs_year">
+                <div class="groupTitle">Study year <span class="badge">multi-select</span></div>
+                <div class="optRow"><label><input type="checkbox" data-k="year" value="" checked> Any</label></div>
+                <div id="year_opts"></div>
+            </div>
+        </aside>
+        <section id="resultsPanel" class="panel" style="display:none">
+            <div class="resultsHead" style="display:none">
+                <div id="counter" class="counter">Results: 0 cases</div>
+                <select id="sortBy" class="select">
+                    <option value="quality">Sort by: Best quality</option>
+                    <option value="spacing_asc">Spacing (low → high)</option>
+                    <option value="shape_desc">Shape score (high → low)</option>
+                    <option value="age_asc">Age (young → old)</option>
+                    <option value="age_desc">Age (old → young)</option>
+                    <option value="id_asc">ID (low → high)</option>
+                    <option value="id_desc">ID (high → low)</option>
+                </select>
+            </div>
+            <div id="cards" class="cards" aria-live="polite" style="display:none"></div>
+        </section>
+    </section>
+    <!-- Preparing Page -->
+    <div id="prepPage" class="prepPage" aria-hidden="true">
+        <div class="prepBox">
+            <img id="prepImg" src="" alt=""
+                style="width:180px;height:110px;border-radius:12px;background:#dcd7ce;display:block;margin:0 auto 12px;">
+            <div class="prepTitle">Preparing data...</div>
+            <div class="prepHint">‹ pancreas ›</div>
+        </div>
+    </div>
+    <!-- Viewer -->
+    <section id="viewer" class="viewer" aria-hidden="true">
+        <div class="v-toolbar">
+            <button class="iconBtn" id="btnBack" title="Back to search">↩</button>
+            <button class="iconBtn" id="btnGear" title="Viewer settings">⚙️</button>
+            <button class="iconBtn" id="btnClassMap" style="display:none" aria-hidden="true">🗺️</button>
+        </div>
+        <aside class="v-sidebar" id="vSidebar" style="display:none">
+            <div class="cm">
+                <div class="cm-head">
+                    <h3 style="margin:0">Organs</h3>
+                    <button class="toggleAll" id="toggleAll">Toggle all</button>
+                </div>
+                <div id="cmRoot"></div>
+            </div>
+        </aside>
+        <div class="v-card" id="vCard" style="display:none">
+            <h5 id="caseTitle" style="margin:2px 0 8px">Case ID: —</h5>
+            <div class="row"><label style="min-width:95px;color:#9aa3b2">Label Opacity</label><input id="op"
+                    type="range" min="0" max="100" value="60"><span id="opv" class="value">60</span></div>
+            <div class="row"><label style="min-width:95px;color:#9aa3b2">Level</label><input id="lvl" type="range"
+                    min="-200" max="200" value="50"><span id="lvlv" class="value">50</span></div>
+            <div class="row"><label style="min-width:95px;color:#9aa3b2">Window</label><input id="win" type="range"
+                    min="100" max="2000" value="400"><span id="winv" class="value">400</span></div>
+            <button id="openClassMap" class="btn" style="width:100%;margin-top:10px">Class Map</button>
+            <div class="v-actions">
+                <button id="zoomIn" class="toolBtn" title="Zoom in"></button>
+                <button id="zoomOut" class="toolBtn" title="Zoom out"></button>
+                <button id="download" class="toolBtn" title="Download"></button>
+                <button id="report" class="toolBtn" title="Report"></button>
+            </div>
+        </div>
+        <main class="v-stage">
+            <section class="v-view">
+                <h4>Axial</h4><img id="axial" alt="axial">
+            </section>
+            <section class="v-view">
+                <h4>Sagittal</h4><img id="sagittal" alt="sagittal">
+            </section>
+            <section class="v-view">
+                <h4>Coronal</h4><img id="coronal" alt="coronal">
+            </section>
+            <section class="v-view">
+                <h4>3D</h4>
+                <div class="center" id="prep">
+                    <div class="mini"></div>
+                    <div>Preparing data…</div>
+                    <div style="color:#8ea6ff;margin-top:4px">‹ pancreas ›</div>
+                </div>
+            </section>
+        </main>
+    </section>
+    <!-- Report Modal -->
+    <div id="reportModal" class="modal" aria-hidden="true">
+        <div class="modalBox">
+            <div class="modalHead">
+                <h3 style="margin:0">Case Report</h3>
+                <button id="rpClose" class="iconBtn sm">✕</button>
+            </div>
+            <div class="modalBody">
+                <p style="color:#9aa3b2">Report content goes here…</p>
+            </div>
+        </div>
+    </div>
+    <script>
+        /* ===== helpers ===== */
+        const $ = s => document.querySelector(s), $$ = s => Array.from(document.querySelectorAll(s));
+        const svg = (t, b = '#0f223b', f = '#94a3b8') => 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><rect width="400" height="300" fill="${b}"/><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="Arial" font-size="18" fill="${f}">${t}</text></svg>`);
+        const vsvg = t => 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><rect width="400" height="300" fill="#0a0d18"/><text x="50%" y="50%" fill="#9aa3b2" text-anchor="middle" dominant-baseline="middle" font-family="Arial" font-size="16">${t}</text></svg>`);
+        const state = { q: '', sex: '', tumor: '', age_from: '', age_to: '', sort_by: 'quality', ct_phase: [], manufacturer: [], model: [], study_type: [], site_nat: [], year: [], per_page: 1000000, page: 1 };
+        let ALL_ITEMS = [], lastFetched = []; let HAS_SEARCHED = false;
+        function show(nodeOrSel, on) { const n = (typeof nodeOrSel === 'string') ? document.querySelector(nodeOrSel) : nodeOrSel; if (!n) return; if (on) n.style.removeProperty('display'); else n.style.display = 'none'; }
+        function updatePanels() {
+            const searched = HAS_SEARCHED; const count = searched ? (lastFetched?.length || 0) : 0; const showResults = searched && count > 0;
+            const counter = $('#counter'); if (counter) counter.textContent = `Results: ${count} cases`;
+            show('#recBar', !showResults); show('#resultsPanel', showResults); show('.resultsHead', showResults); show('#cards', showResults);
+            const filt = $('#filters'); if (filt) { filt.classList.toggle('show', showResults); show(filt, showResults); }
+        }
+        function wirePop(root) { const btn = root.querySelector('.popBtn'); btn.addEventListener('click', e => { e.stopPropagation(); root.classList.toggle('open'); }); document.addEventListener('click', e => { if (!root.contains(e.target)) root.classList.remove('open'); }); }
+        wirePop($('#popID')); wirePop($('#popSTA'));
+        async function fetchJSON(u) { const r = await fetch(u, { cache: 'no-store' }); if (!r.ok) throw new Error(await r.text()); return r.json(); }
+        /* quality helpers */
+        function idNum(x) { const m = String(x.case_id || x['PanTS ID'] || x.id).match(/\d+/) || [0]; return Number(m[0]); }
+        function isComplete(it) { const sexOK = it.sex === 'M' || it.sex === 'F'; const ageOK = Number.isFinite(it.age) && it.age > 0; const tumorOK = it.tumor === 0 || it.tumor === 1; const spOK = Number.isFinite(it.spacing_sum) && it.spacing_sum > 0; const shOK = Number.isFinite(it.shape_sum) && it.shape_sum > 0; return sexOK && ageOK && tumorOK && spOK && shOK; }
+        function compareQuality(a, b) { const ca = isComplete(a), cb = isComplete(b); if (ca !== cb) return cb - ca; const s1 = (a.spacing_sum ?? 1e9) - (b.spacing_sum ?? 1e9); if (s1 !== 0) return s1; const s2 = (b.shape_sum ?? -1) - (a.shape_sum ?? -1); if (s2 !== 0) return s2; return idNum(a) - idNum(b); }
+        /* Browse */
+        let recTimer = null, recPlaying = true;
+        async function initBrowse() {
+            try {
+                const bar = $('#recScroll'); bar.innerHTML = '';
+                let source = ALL_ITEMS && ALL_ITEMS.length ? ALL_ITEMS : (await fetchJSON('/api/random?n=200&k=800&scope=filtered')).items || [];
+                const best = source.slice().sort(compareQuality).filter(isComplete).slice(0, 20);
+                best.forEach(it => {
+                    const id = String(it.case_id || it['PanTS ID'] || it.id || ''); const sex = it.sex || '—';
+                    const age = (Number.isFinite(it.age) ? `${it.age}y` : '—'); const tumor = (it.tumor === 1 ? 'Tumor' : (it.tumor === 0 ? 'No tumor' : '—'));
+                    const card = document.createElement('article'); card.className = 'recCard';
+                    card.innerHTML = `<img class="recThumb" src="${svg('Preview 2D')}"/><div class="recBody"><div style="font-weight:900">${id}</div><div class="recMeta">Sex ${sex} · Age ${age} · ${tumor}</div><button class="btn">Open Viewer</button></div>`;
+                    card.querySelector('.btn').addEventListener('click', () => openViewer(id));
+                    bar.appendChild(card);
+                });
+                const scroller = bar, step = 340;
+                function atEnd() { return scroller.scrollLeft + scroller.clientWidth >= scroller.scrollWidth - 2; }
+                function tick() { if (atEnd()) scroller.scrollTo({ left: 0, behavior: 'smooth' }); else scroller.scrollBy({ left: step, behavior: 'smooth' }); }
+                $('#recPrev').onclick = () => scroller.scrollBy({ left: -step, behavior: 'smooth' });
+                $('#recNext').onclick = () => scroller.scrollBy({ left: +step, behavior: 'smooth' });
+                $('#recPlay').onclick = () => { recPlaying = !recPlaying; $('#recPlay').textContent = recPlaying ? '⏸' : '▶'; if (recPlaying) startAuto(); else stopAuto(); };
+                function startAuto() { stopAuto(); recTimer = setInterval(tick, 2600); }
+                function stopAuto() { if (recTimer) { clearInterval(recTimer); recTimer = null; } }
+                startAuto();
+            } catch (e) { console.warn(e); }
+        }
+        /* Lists / facets */
+        const SPLIT_RE = /[;,|/、，·・]+/;
+        const NAT_MAP = { 'USA': 'US', 'U.S.': 'US', 'U S A': 'US', 'GB': 'UK', 'U.K.': 'UK', 'N/A': 'NA', 'NULL': 'NA' };
+        const normToken = s => (s ?? '').toString().trim().toUpperCase();
+        const mapNat = code => NAT_MAP[normToken(code)] ?? normToken(code);
+        const splitTokens = (raw, mapper = x => x) => String(raw ?? '').split(SPLIT_RE).map(t => mapper(normToken(t))).filter(Boolean);
+        const pickField = (obj, cands) => { for (const k of cands) { if (Object.prototype.hasOwnProperty.call(obj, k)) { const v = obj[k]; if (v == null) continue; const s = String(v).trim(); if (s !== '' && s.toLowerCase() !== 'unknown') return v; } } return ''; }
+        function buildFacetList(container, key, rows, hasLabel = false) {
+            const box = $('#' + container); box.innerHTML = '';
+            rows.forEach(r => {
+                const text = hasLabel ? (r.label || r.value) : r.value;
+                const d = document.createElement('div'); d.className = 'optRow'; d.dataset.k = key; d.dataset.v = String(r.value);
+                d.innerHTML = `<label><input type="checkbox" data-k="${key}" value="${r.value}"> ${text}</label> <span class="count">${r.count ?? 0}</span>`;
+                box.appendChild(d);
+            });
+        }
+        function updateFacetCounts(countPayload = {}) {
+            const containers = [['ct_phase_opts', 'ct_phase'], ['manufacturer_opts', 'manufacturer'], ['model_opts', 'model'], ['type_opts', 'study_type'], ['nat_opts', 'site_nat'], ['year_opts', 'year']];
+            containers.forEach(([containerId, key]) => {
+                const rows = $$('#' + containerId + ' .optRow'); const mp = Object.create(null);
+                (countPayload[key] || []).forEach(r => { mp[String(r.value)] = r.count || 0; });
+                rows.forEach(row => {
+                    const input = row.querySelector('input');
+                    const val = (row.dataset.v ?? (input ? input.value : '') ?? '').toString();
+                    const c = Object.prototype.hasOwnProperty.call(mp, val) ? mp[val] : 0;
+                    const badge = row.querySelector('.count'); if (badge) badge.textContent = c;
+                    row.classList.toggle('zero', c === 0);
+                });
+            });
+        }
+        function qsFromState() {
+            const p = new URLSearchParams();
+            if (state.q) p.set('caseid', state.q);
+            if (state.sex) p.set('sex', state.sex);
+            if (state.tumor !== '') p.set('tumor', state.tumor);
+            if (state.age_from) p.set('age_from', state.age_from);
+            if (state.age_to) p.set('age_to', state.age_to);
+            ['ct_phase', 'manufacturer', 'model', 'study_type', 'site_nat', 'year'].forEach(k => {
+                (state[k] || []).forEach(v => p.append(k + '[]', v));
+            });
+            return p.toString();
+        }
+        async function refreshFacets() {
+            const qs = qsFromState();
+            const f = await fetchJSON('/api/facets?fields=ct_phase,manufacturer,model,study_type,site_nat,year&top_k=999&guarantee=0&' + qs);
+            updateFacetCounts(f?.facets || {});
+        }
+        async function bootstrapLists() {
+            const data = await fetchJSON('/api/search?per_page=1000000&sort_by=id');
+            ALL_ITEMS = data.items || [];
+            // Age chips
+            const cnt = {};
+            for (const it of ALL_ITEMS) { const a = Number(it.age); if (Number.isFinite(a) && a > 0) { const lo = Math.floor(a / 10) * 10; const k = `${lo}-${lo + 9}`; cnt[k] = (cnt[k] || 0) + 1; } }
+            const bins = Object.entries(cnt).sort((a, b) => b[1] - a[1]).map(([k]) => k).slice(0, 6);
+            renderAgeChips(bins.length ? bins : ['50-59', '60-69', '40-49', '70-79', '30-39', '80-89']);
+            // fetch facets
+            let f0 = { facets: {} };
+            try { f0 = await fetchJSON('/api/facets?fields=ct_phase,manufacturer,model,study_type,site_nat,year&top_k=999&guarantee=1'); }
+            catch (e) { console.warn('facets fetch failed:', e); }
+            const fx = f0?.facets || {};
+            // fallbacks
+            if (!Array.isArray(fx.model) || fx.model.length === 0) {
+                const modelsMap = {};
+                for (const it of ALL_ITEMS) {
+                    const raw = pickField(it, ['manufacturer model', 'Manufacturer model', 'model', 'Model']);
+                    const norm = String(raw || '').trim(); if (!norm) continue; const key = norm.toLowerCase();
+                    if (!modelsMap[key]) modelsMap[key] = { value: norm, label: norm, count: 0 }; modelsMap[key].count++;
+                }
+                fx.model = Object.values(modelsMap).sort((a, b) => b.count - a.count);
+            }
+            if (!Array.isArray(fx.study_type) || fx.study_type.length === 0) {
+                const typeCounts = {};
+                for (const it of ALL_ITEMS) { const tokens = splitTokens(pickField(it, ['study type', 'Study type', 'study_type', 'type', 'Type'])); for (const t of tokens) if (t) typeCounts[t] = (typeCounts[t] || 0) + 1; }
+                fx.study_type = Object.entries(typeCounts).sort((a, b) => b[1] - a[1]).map(([value, count]) => ({ value, count }));
+            }
+            if (!Array.isArray(fx.site_nat) || fx.site_nat.length === 0) {
+                const natCounts = {};
+                for (const it of ALL_ITEMS) {
+                    const tokens = splitTokens(pickField(it, ['site nationality', 'Site nationality', 'site_nat', 'nationality', 'country', 'Country']), mapNat);
+                    for (const t of tokens) if (t) natCounts[t] = (natCounts[t] || 0) + 1;
+                }
+                fx.site_nat = Object.entries(natCounts).sort((a, b) => b[1] - a[1]).map(([value, count]) => ({ value, count, label: value }));
+            }
+            // build lists
+            try {
+                if (document.getElementById('ct_phase_opts')) buildFacetList('ct_phase_opts', 'ct_phase', fx.ct_phase || []);
+                if (document.getElementById('manufacturer_opts')) buildFacetList('manufacturer_opts', 'manufacturer', fx.manufacturer || []);
+                if (document.getElementById('model_opts')) buildFacetList('model_opts', 'model', (fx.model || []).map(r => ({ value: r.value, label: r.label ?? r.value, count: r.count })), true);
+                if (document.getElementById('type_opts')) buildFacetList('type_opts', 'study_type', fx.study_type || []);
+                if (document.getElementById('nat_opts')) buildFacetList('nat_opts', 'site_nat', (fx.site_nat || []).map(r => ({ value: r.value, label: r.label ?? r.value, count: r.count })), true);
+                if (document.getElementById('year_opts')) buildFacetList('year_opts', 'year', (fx.year || []).map(r => ({ value: String(r.value), count: r.count })));
+                await refreshFacets();
+            } catch (e) { console.warn('build facet list failed:', e); }
+            // ID suggestions
+            const ids = [...ALL_ITEMS].sort(compareQuality).filter(isComplete).map(x => String(x.case_id || x['PanTS ID'] || x.id)).filter(Boolean);
+            const uniq = []; for (const id of ids) { if (!uniq.includes(id)) { uniq.unshift(id); if (uniq.length >= 5) break; } } renderIdReco(uniq);
+            // filter change
+            const filtersEl = document.getElementById('filters');
+            if (filtersEl) {
+                filtersEl.addEventListener('change', async e => {
+                    const cb = e.target && e.target.closest && e.target.closest('input[type=checkbox]'); if (!cb) return;
+                    const key = cb.dataset.k; const isAny = (cb.value === '');
+                    if (isAny) { $$('#filters input[type=checkbox][data-k="' + key + '"]').forEach(x => x.checked = (x === cb)); }
+                    else { const any = $$('#filters input[type=checkbox][data-k="' + key + '"][value=""]')[0]; if (any) any.checked = false; }
+                    collectAdvanced();
+                    await refreshFacets();
+                    if (HAS_SEARCHED) run();
+                });
+            }
+            // show more/less
+            $$('.showMore').forEach(btn => {
+                const id = btn.dataset.target; const limit = Number(btn.dataset.limit || 12);
+                const rows = $$('#' + id + ' .optRow');
+                rows.forEach((r, i) => r.style.display = i < limit ? 'flex' : 'none');
+                if (rows.length <= limit) btn.style.display = 'none';
+                btn.textContent = 'Show more';
+                btn.addEventListener('click', () => {
+                    const isMore = btn.textContent.trim().toLowerCase().startsWith('show more');
+                    rows.forEach((r, i) => { if (i >= limit) r.style.display = isMore ? 'flex' : 'none'; });
+                    btn.textContent = isMore ? 'Show less' : 'Show more';
+                });
+            });
+        }
+        /* Results render */
+        const cardsEl = $('#cards'); let rendered = 0; const BATCH = 60; let current = [];
+        function sorter(items) {
+            const s = state.sort_by || 'quality';
+            if (s === 'spacing_asc') return items.slice().sort((a, b) => (a.spacing_sum ?? 1e9) - (b.spacing_sum ?? 1e9));
+            if (s === 'shape_desc') return items.slice().sort((a, b) => (b.shape_sum ?? -1) - (a.shape_sum ?? -1));
+            if (s === 'age_asc') return items.slice().sort((a, b) => (a.age ?? 1e9) - (b.age ?? 1e9));
+            if (s === 'age_desc') return items.slice().sort((a, b) => (b.age ?? -1) - (a.age ?? -1));
+            if (s === 'id_asc') return items.slice().sort((a, b) => idNum(a) - idNum(b));
+            if (s === 'id_desc') return items.slice().sort((a, b) => idNum(b) - idNum(a));
+            return items.slice().sort(compareQuality);
+        }
+        function renderAfterFetch(items) { current = sorter(items); rendered = 0; cardsEl.replaceChildren(); renderMore(); }
+        function makeCard(it) {
+            const id = String(it.case_id || it['PanTS ID'] || it.id || ''); const sex = it.sex || '—'; const age = Number.isFinite(it.age) ? `${it.age}y` : '—';
+            const tumor = (it.tumor === 1 ? 'Tumor' : (it.tumor === 0 ? 'No tumor' : '—'));
+            const wrap = document.createElement('article'); wrap.className = 'card';
+            wrap.innerHTML = `<img class="thumb" src="${svg('2D Image')}"/><div class="body">
+        <div class="titleRow"><a href="javascript:void(0)" class="caseLink" data-id="${id}">${id.replace(/^Case\\s*/, '')}</a></div>
+        <div class="keyRow">
+          <span class="kv"><span class="k">Sex</span><span class="v">${sex}</span></span>
+          <span class="kv"><span class="k">Age</span><span class="v">${age}</span></span>
+          <span class="kv"><span class="tag ${tumor === 'No tumor' ? 'ok' : 'bad'}">${tumor}</span></span>
+        </div>
+        <button class="btn">Open Viewer</button></div>`;
+            const open = () => { saveRecent(id); openViewer(id); };
+            wrap.querySelector('.btn').addEventListener('click', open);
+            wrap.querySelector('.caseLink').addEventListener('click', open);
+            return wrap;
+        }
+        function renderMore() { if (rendered >= current.length) return; const fr = document.createDocumentFragment(); const end = Math.min(rendered + BATCH, current.length); for (let i = rendered; i < end; i++) fr.appendChild(makeCard(current[i])); cardsEl.appendChild(fr); rendered = end; }
+        window.addEventListener('scroll', () => { const near = (window.innerHeight + window.scrollY) > (document.body.offsetHeight - 800); if (near) renderMore(); });
+        /* Search run */
+        async function run() {
+            await refreshFacets();
+            const p = new URLSearchParams(qsFromState()); p.set('per_page', '1000000');
+            const data = await fetchJSON('/api/search?' + p.toString()); lastFetched = (data.items || []).filter(Boolean);
+            const norm = s => String(s ?? '').trim().toLowerCase();
+            lastFetched = lastFetched.filter(it => {
+                const hasAll = (selected, value) => selected.length === 0 || selected.some(v => norm(v) === norm(value));
+                const overlap = (selected, tokens) => { if (selected.length === 0) return true; const sel = selected.map(norm); return tokens.some(t => sel.includes(norm(t))); };
+                const model = pickField(it, ['manufacturer model', 'Manufacturer model', 'model', 'Model']);
+                if (!hasAll(state.model, model)) return false;
+                const types = splitTokens(pickField(it, ['study type', 'Study type', 'study_type', 'type', 'Type']));
+                const nats = splitTokens(pickField(it, ['site nationality', 'Site nationality', 'site_nat', 'nationality', 'country', 'Country']), mapNat);
+                const year = pickField(it, ['study year', 'Study year', 'year', 'study_year', 'Year']);
+                return overlap(state.study_type, types) && overlap(state.site_nat, nats) && hasAll(state.year, year);
+            });
+            updatePanels(); renderAfterFetch(lastFetched);
+        }
+        /* STA / Recent */
+        function renderAgeChips(list) {
+            const w = $('#ageChips'); w.innerHTML = '';
+            const anyBtn = document.createElement('button'); anyBtn.className = 'chip active'; anyBtn.id = 'ageAny'; anyBtn.textContent = 'Any age';
+            anyBtn.addEventListener('click', () => { state.age_from = ''; state.age_to = ''; $$('#ageChips .chip').forEach(x => x.classList.remove('active')); anyBtn.classList.add('active'); updateSTASummary(); });
+            w.appendChild(anyBtn);
+            list.forEach(bin => {
+                const [a, b] = bin.split('-').map(Number);
+                const btn = document.createElement('button'); btn.className = 'chip'; btn.textContent = bin;
+                btn.addEventListener('click', () => { state.age_from = a; state.age_to = b; $$('#ageChips .chip').forEach(x => x.classList.remove('active')); btn.classList.add('active'); updateSTASummary(); });
+                w.appendChild(btn);
+            });
+        }
+        function renderIdReco(ids) {
+            const w = $('#idReco'); w.innerHTML = '';
+            ids.forEach(id => {
+                const b = document.createElement('button'); b.className = 'chip'; b.textContent = id;
+                b.addEventListener('click', () => { $('#q').value = id; state.q = id; HAS_SEARCHED = true; run(); $('#popID').classList.remove('open'); });
+                w.appendChild(b);
+            });
+        }
+        function updateSTASummary() {
+            const tumor = state.tumor === '' ? 'Any tumor' : (state.tumor === '1' ? 'Tumor' : 'No tumor');
+            const sex = state.sex ? (state.sex === 'M' ? 'Male' : 'Female') : 'Any sex';
+            const age = (state.age_from && state.age_to) ? `${state.age_from}-${state.age_to}` : 'Any age';
+            $('#staSummary').textContent = `${tumor} · ${sex} �� ${age}`;
+        }
+        $('#sexChips').addEventListener('click', e => { const b = e.target.closest('.chip'); if (!b) return; state.sex = b.dataset.sex ?? ''; $$('#sexChips .chip').forEach(x => x.classList.toggle('active', (x.dataset.sex ?? '') === state.sex)); updateSTASummary(); });
+        $('#tumorChips').addEventListener('click', e => { const b = e.target.closest('.chip'); if (!b) return; state.tumor = b.dataset.tumor ?? ''; $$('#tumorChips .chip').forEach(x => x.classList.toggle('active', (x.dataset.tumor ?? '') === state.tumor)); updateSTASummary(); });
+        $('#applySTA').addEventListener('click', () => { $('#popSTA').classList.remove('open'); HAS_SEARCHED = true; run(); });
+        $('#searchBtn').addEventListener('click', () => { HAS_SEARCHED = true; run(); });
+        $('#q').addEventListener('input', e => state.q = e.target.value.trim());
+        $('#q').addEventListener('keydown', e => { if (e.key === 'Enter') { HAS_SEARCHED = true; run(); } });
+        const sortSel = $('#sortBy'); sortSel?.addEventListener('change', () => { state.sort_by = sortSel.value; renderAfterFetch(lastFetched); });
+        function renderRecent() {
+            const box = $('#idRecent'); const r = JSON.parse(localStorage.getItem('recentIds') || '[]');
+            box.innerHTML = ''; if (!r.length) { box.innerHTML = '<span class="recMeta">No recent</span>'; return; }
+            r.forEach(id => {
+                const b = document.createElement('button'); b.className = 'chip'; b.textContent = id;
+                b.addEventListener('click', () => { $('#q').value = id; state.q = id; HAS_SEARCHED = true; run(); $('#popID').classList.remove('open'); });
+                box.appendChild(b);
+            });
+        }
+        function saveRecent(id) { const r = JSON.parse(localStorage.getItem('recentIds') || '[]'); if (!r.includes(id)) { r.unshift(id); if (r.length > 6) r.pop(); localStorage.setItem('recentIds', JSON.stringify(r)); renderRecent(); } }
+        function collectAdvanced() { ['ct_phase', 'manufacturer', 'model', 'study_type', 'site_nat', 'year'].forEach(k => { state[k] = [].filter.call($$(`#filters input[type=checkbox][data-k="${k}"]`), c => c.checked && c.value !== '').map(c => c.value); }); }
+        /* Viewer */
+        function showPreparing(on) { $('#prepPage').classList.toggle('show', !!on); }
+        function openViewer(id) {
+            showPreparing(true); document.body.style.overflow = 'hidden'; const v = $('#viewer');
+            v.classList.add('compact'); $('#vCard').style.display = 'none'; $('#vSidebar').style.display = 'none';
+            $('#caseTitle').textContent = 'Case ID: ' + id;
+            $('#axial').src = vsvg('2D Axial'); $('#sagittal').src = vsvg('2D Sagittal'); $('#coronal').src = vsvg('2D Coronal');
+            setTimeout(() => { showPreparing(false); v.classList.add('show'); $('#prep')?.classList.add('hidden'); const u = new URL(location.href); u.searchParams.set('case', id); history.replaceState({}, '', u); }, 700);
+        }
+        function closeViewer() { $('#viewer').classList.remove('show'); document.body.style.overflow = 'auto'; const u = new URL(location.href); u.searchParams.delete('case'); history.replaceState({}, '', u); }
+        $('#btnBack').addEventListener('click', closeViewer);
+        const CLASS_MAP = [
+            { name: 'Vascular System', key: 'vascular', items: [['aorta'], ['celiac_artery'], ['superior_mesenteric_artery'], ['postcava'], ['veins']] },
+            { name: 'Digestive System', key: 'digestive', items: [['Pancreas'], ['colon'], ['duodenum'], ['stomach'], ['liver'], ['common_bile_duct'], ['gall_bladder']] },
+            { name: 'Endocrine System', key: 'endocrine', items: [['adrenal_gland_left'], ['adrenal_gland_right']] },
+            { name: 'Urinary System', key: 'urinary', items: [['Kidneys'], ['bladder']] },
+            { name: 'Skeletal System', key: 'skeletal', items: [['femur_left'], ['femur_right']] },
+            { name: 'Lymphatic System', key: 'lymphatic', items: [['spleen']] },
+            { name: 'Reproductive System', key: 'reproductive', items: [['prostate']] },
+            { name: 'Respiratory System', key: 'respiratory', items: [['lung_left'], ['lung_right']] }
+        ];
+        function renderClassMap() {
+            const root = document.getElementById('cmRoot'); if (!root) return; root.innerHTML = '';
+            CLASS_MAP.forEach(grp => {
+                const box = document.createElement('section'); box.className = 'cm-group';
+                const row = document.createElement('div'); row.className = 'cm-row';
+                row.innerHTML = `<span class="chev" aria-hidden="true">▾</span><span class="title">${grp.name}</span><input type="checkbox" class="grpCheck" checked aria-label="Toggle ${grp.name}">`;
+                const items = document.createElement('div'); items.className = 'cm-items';
+                grp.items.forEach(([label]) => {
+                    const id = `cm_${grp.key}_${label}`.replace(/\W+/g, '_').toLowerCase();
+                    const r = document.createElement('label'); r.className = 'cm-item';
+                    r.innerHTML = `<input type="checkbox" class="itemCheck" id="${id}" data-group="${grp.key}" data-name="${label}" checked><span class="name">${label.replace(/_/g, ' ')}</span>`;
+                    items.appendChild(r);
+                });
+                // fold/unfold
+                let open = true; const chev = row.querySelector('.chev');
+                const setOpen = (on) => { open = on; box.classList.toggle('closed', !on); chev.textContent = on ? '▾' : '▸'; };
+                row.addEventListener('click', (e) => { const t = e.target; if (t && t.classList && t.classList.contains('grpCheck')) return; setOpen(!open); });
+                setOpen(true);
+                // group check
+                const grpCheck = row.querySelector('input.grpCheck');
+                if (grpCheck) { grpCheck.addEventListener('change', () => { const checked = grpCheck.checked; items.querySelectorAll('input.itemCheck').forEach(c => { c.checked = checked; }); }); }
+                box.appendChild(row); box.appendChild(items); root.appendChild(box);
+            });
+            const btn = document.getElementById('toggleAll');
+            if (btn) { btn.onclick = () => { const boxes = Array.from(document.querySelectorAll('.cm-group .grpCheck')); const turnOff = boxes.length && boxes.every(b => b.checked); boxes.forEach(b => b.checked = !turnOff); document.querySelectorAll('.cm-group .itemCheck').forEach(c => c.checked = !turnOff); }; }
+        }
+        // settings / classmap toggle
+        document.getElementById('btnGear')?.addEventListener('click', () => { const card = $('#vCard'), side = $('#vSidebar'); if (!card || !side) return; side.style.display = 'none'; card.style.display = (getComputedStyle(card).display === 'none') ? 'block' : 'none'; });
+        document.getElementById('openClassMap')?.addEventListener('click', () => { const side = $('#vSidebar'), card = $('#vCard'); if (!side || !card) return; card.style.display = 'none'; if (getComputedStyle(side).display === 'none') { renderClassMap(); side.style.display = 'block'; } else { side.style.display = 'none'; } });
+        ['op', 'lvl', 'win'].forEach(id => { const r = $('#' + id), lab = $('#' + id + 'v'); r?.addEventListener('input', () => { if (lab) lab.textContent = r.value; }); });
+        $('#zoomIn').innerHTML = '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M11 4v7H4v2h7v7h2v-7h7v-2h-7V4z"/></svg>';
+        $('#zoomOut').innerHTML = '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M4 11v2h16v-2z"/></svg>';
+        $('#download').innerHTML = '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M12 3v10l3.5-3.5 1.4 1.4L12 16.8 7.1 10.9l1.4-1.4L11 13V3zM4 19v2h16v-2H4z"/></svg>';
+        $('#report').innerHTML = '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M7 3h8l4 4v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm7 1.5V8h3.5L14 4.5zM8 11h8v2H8v-2zm0 4h8v2H8v-2z"/></svg>';
+        let Z = 1; function applyZoom() { $$('.v-view img').forEach(img => { img.style.transformOrigin = 'center center'; img.style.transform = `scale(${Z})`; }); }
+        $('#zoomIn')?.addEventListener('click', () => { Z = Math.min(3, Z + 0.2); applyZoom(); });
+        $('#zoomOut')?.addEventListener('click', () => { Z = Math.max(1, Z - 0.2); applyZoom(); });
+        const rpModal = $('#reportModal');
+        $('#download')?.addEventListener('click', () => { ['axial', 'sagittal', 'coronal'].forEach(id => { const img = document.getElementById(id); if (!img || !img.src) return; const a = document.createElement('a'); a.href = img.src; a.download = `case-${(document.getElementById('caseTitle')?.textContent || 'id').replace(/\D+/g, '')}-${id}.png`; document.body.appendChild(a); a.click(); a.remove(); }); });
+        $('#report')?.addEventListener('click', () => rpModal?.classList.add('show'));
+        $('#rpClose')?.addEventListener('click', () => rpModal?.classList.remove('show'));
+        rpModal?.addEventListener('click', e => { if (e.target === rpModal) rpModal.classList.remove('show'); });
+        // deeplink
+        (() => { const u = new URL(location.href); const id = u.searchParams.get('case'); if (id) openViewer(id); })();
+        // init
+        (async function init() {
+            renderRecent();
+            await bootstrapLists();
+            await initBrowse();
+            $$('#sexChips .chip').forEach(x => x.classList.toggle('active', (x.dataset.sex ?? '') === ''));
+            $$('#tumorChips .chip').forEach(x => x.classList.toggle('active', (x.dataset.tumor ?? '') === ''));
+            updateSTASummary();
+            HAS_SEARCHED = false; lastFetched = []; updatePanels();
+        })();
+        document.addEventListener('DOMContentLoaded', () => {
+            const resultsPanel = document.getElementById('resultsPanel'); if (resultsPanel) resultsPanel.style.display = 'none';
+            const head = document.querySelector('.resultsHead'); if (head) head.style.display = 'none';
+            const cards = document.getElementById('cards'); if (cards) cards.style.display = 'none';
+            try { updatePanels(); } catch { }
+        });
+    </script>
+</body>
+</html>

metadata.xlsx ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:ce243b44994809954c225cd6b0e34c3f3860a037df354bf51a14f389caa6b3c5
+size 657993

nApp.py ADDED Viewed

	@@ -0,0 +1,731 @@

+# -*- coding: utf-8 -*-
+"""
+CT Finder - Booking-style backend (complete)
+--------------------------------------------
+Endpoints
+- GET /api/search
+    Query params:
+      q, caseid, sex, tumor, age_from, age_to,
+      ct_phase, manufacturer, study_type, site_nationality (or site_nat),
+      model (or model[] / manufacturer_model),
+      sort_by = top|shape_desc|spacing_asc|age_asc|age_desc|id|shape|spacing
+      sort_dir = asc|desc
+      per_page (default 24), page (default 1)
+- GET /api/facets
+    fields=ct_phase,manufacturer,year,sex,tumor (subset)
+    top_k=6, guarantee=0|1
+- GET /api/random
+    n=3, k=100, offset=?, recent=csv, scope=filtered|all
+- GET /api/health
+- GET /        (若 --index 指向 HTML 就送檔，否則返回字串)
+Run:
+  python nApp.py --meta /path/to/metadata.xlsx --index /path/to/index.html
+"""
+import os, re, math, argparse
+from typing import Any, Dict, Optional, Set, List, Tuple
+from datetime import datetime
+import numpy as np
+import pandas as pd
+from flask import Flask, jsonify, request, make_response, send_file
+from flask_cors import CORS
+# ---------------------------
+# CLI
+# ---------------------------
+parser = argparse.ArgumentParser()
+parser.add_argument("--meta", required=True, help="Path to metadata.xlsx")
+parser.add_argument("--index", default="", help="Path to index.html (optional)")
+parser.add_argument("--host", default="0.0.0.0")
+parser.add_argument("--port", default=8888, type=int)
+args, _ = parser.parse_known_args()
+META_FILE = args.meta
+INDEX_FILE = args.index
+app = Flask(__name__)
+CORS(app, resources={r"/api/*": {"origins": "*"}}, supports_credentials=False)
+# ---------------------------
+# Helpers
+# ---------------------------
+def _arg(name: str, default=None):
+    return request.args.get(name, default)
+def _to_int(x) -> Optional[int]:
+    try:
+        return int(x)
+    except Exception:
+        return None
+def _to_float(x) -> Optional[float]:
+    try:
+        return float(x)
+    except Exception:
+        return None
+def _to01_query(x) -> Optional[int]:
+    if x is None: return None
+    s = str(x).strip().lower()
+    if s in ("1","true","yes","y"): return 1
+    if s in ("0","false","no","n"): return 0
+    return None
+def _collect_list_params(names: List[str]) -> List[str]:
+    out: List[str] = []
+    for n in names:
+        if n in request.args:
+            out += request.args.getlist(n)
+    tmp: List[str] = []
+    for s in out:
+        if "," in s:
+            tmp += [t.strip() for t in s.split(",") if t.strip()]
+        else:
+            tmp.append(s.strip())
+    return [t for t in tmp if t]
+def _nan2none(v):
+    try:
+        if v is None: return None
+        if pd.isna(v): return None
+    except Exception:
+        pass
+    return v
+def _clean_json_list(items: List[Dict[str, Any]]) -> List[Dict[str, Any]]:
+    def _clean(v):
+        if isinstance(v, (np.integer,)):  return int(v)
+        if isinstance(v, (np.floating,)): return float(v)
+        if isinstance(v, (np.bool_,)):    return bool(v)
+        return v
+    return [{k: _clean(v) for k, v in d.items()} for d in items]
+# ---------------------------
+# Load & normalize
+# ---------------------------
+def _norm_cols(df_raw: pd.DataFrame) -> pd.DataFrame:
+    """標準化欄位，產出搜尋/排序需要的衍生欄位。"""
+    df = df_raw.copy()
+    # ---- Case ID ----
+    case_cols = ["PanTS ID", "PanTS_ID", "case_id", "id", "case", "CaseID"]
+    def _first_nonempty(row, cols):
+        for c in cols:
+            if c in row.index and pd.notna(row[c]) and str(row[c]).strip():
+                return str(row[c]).strip(), c
+        return "", None
+    cases, mapping = [], []
+    for _, r in df.iterrows():
+        s, c = _first_nonempty(r, case_cols)
+        cases.append(s); mapping.append({"case": c} if c else {})
+    df["__case_str"] = cases
+    df["_orig_cols"] = mapping
+    # ---- Tumor -> __tumor01 ----
+    def _canon(s: str) -> str: return re.sub(r"[^a-z]+", "", str(s).lower())
+    tumor_names = [c for c in df.columns if "tumor" in _canon(c)] or []
+    tcol = tumor_names[0] if tumor_names else None
+    def _to01_v(v):
+        if pd.isna(v): return np.nan
+        s = str(v).strip().lower()
+        if s in ("1","yes","y","true","t"): return 1
+        if s in ("0","no","n","false","f"): return 0
+        try:
+            iv = int(float(s))
+            return 1 if iv == 1 else (0 if iv == 0 else np.nan)
+        except Exception:
+            return np.nan
+    df["__tumor01"] = (df[tcol].map(_to01_v) if tcol else pd.Series([np.nan]*len(df), index=df.index))
+    if tcol:
+        df["_orig_cols"] = [{**(df["_orig_cols"].iat[i] or {}), "tumor": tcol} for i in range(len(df))]
+    # ---- Sex -> __sex ----
+    df["__sex"] = df.get("sex", pd.Series([""]*len(df))).astype(str).str.strip().str.upper()
+    df["__sex"] = df["__sex"].where(df["__sex"].isin(["F","M"]), "")
+    # ---- Generic column finder ----
+    def _find_col(prefer, keyword_sets=None):
+        for c in prefer:
+            if c in df.columns: return c
+        if keyword_sets:
+            canon_map = {c: re.sub(r"[^a-z0-9]+", "", str(c).lower()) for c in df.columns}
+            for c, cs in canon_map.items():
+                for ks in keyword_sets:
+                    if all(k in cs for k in ks): return c
+        return None
+    # ---- CT phase -> __ct / __ct_lc ----
+    ct_col = _find_col(
+        prefer=["ct phase","CT phase","ct_phase","CT_phase","ct"],
+        keyword_sets=[["ct","phase"],["phase"]],
+    )
+    if ct_col:
+        df["__ct"] = df[ct_col].astype(str).str.strip()
+        df["__ct_lc"] = df["__ct"].str.lower()
+        df["_orig_cols"] = [{**(df["_orig_cols"].iat[i] or {}), "ct_phase": ct_col} for i in range(len(df))]
+    else:
+        df["__ct"], df["__ct_lc"] = "", ""
+    # ---- Manufacturer -> __mfr / __mfr_lc ----
+    mfr_col = _find_col(
+        prefer=["manufacturer","Manufacturer","mfr","MFR","vendor","Vendor","manufacturer name","Manufacturer Name"],
+        keyword_sets=[["manufactur"],["vendor"],["brand"],["maker"]],
+    )
+    if mfr_col:
+        df["__mfr"] = df[mfr_col].astype(str).str.strip()
+        df["__mfr_lc"] = df["__mfr"].str.lower()
+        df["_orig_cols"] = [{**(df["_orig_cols"].iat[i] or {}), "manufacturer": mfr_col} for i in range(len(df))]
+    else:
+        df["__mfr"], df["__mfr_lc"] = "", ""
+    # ---- Manufacturer model -> model / __model_lc ----
+    model_col = _find_col(
+        prefer=["manufacturer model","Manufacturer model","model","Model"],
+        keyword_sets=[["model"]],
+    )
+    if model_col:
+        df["model"] = df[model_col].astype(str).str.strip()
+        df["__model_lc"] = df["model"].str.lower()
+        df["_orig_cols"] = [{**(df["_orig_cols"].iat[i] or {}), "model": model_col} for i in range(len(df))]
+    else:
+        # 以免前端讀不到欄位
+        df["model"] = ""
+        df["__model_lc"] = ""
+    # ---- Year -> __year_int ----
+    year_col = _find_col(prefer=["study year","Study year","study_year","year","Year"], keyword_sets=[["year"]])
+    df["__year_int"] = pd.to_numeric(df[year_col], errors="coerce") if year_col else pd.Series([np.nan]*len(df), index=df.index)
+    if year_col:
+        df["_orig_cols"] = [{**(df["_orig_cols"].iat[i] or {}), "year": year_col} for i in range(len(df))]
+    # ---- Age -> __age ----
+    age_col = _find_col(prefer=["age","Age"], keyword_sets=[["age"]])
+    df["__age"] = pd.to_numeric(df[age_col], errors="coerce") if age_col else pd.Series([np.nan]*len(df), index=df.index)
+    if age_col:
+        df["_orig_cols"] = [{**(df["_orig_cols"].iat[i] or {}), "age": age_col} for i in range(len(df))]
+    # ---- Study type -> study_type / __st_lc ----
+    st_col = _find_col(
+        prefer=["study type","Study type","study_type","Study_type"],
+        keyword_sets=[["study","type"]]
+    )
+    if st_col:
+        df["study_type"] = df[st_col].astype(str)
+        df["__st_lc"] = df["study_type"].astype(str).str.strip().str.lower()
+        df["_orig_cols"] = [{**(df["_orig_cols"].iat[i] or {}), "study_type": st_col}
+                            for i in range(len(df))]
+    else:
+        df["study_type"] = ""
+        df["__st_lc"] = ""
+    # ---- Site nationality -> site_nationality / __sn_lc ----
+    sn_col = _find_col(
+        prefer=[
+            "site nationality","Site nationality","site_nationality","Site_nationality",
+            "nationality","Nationality","site country","Site country","country","Country"
+        ],
+        keyword_sets=[["site","national"], ["nationality"], ["site","country"], ["country"]]
+    )
+    if sn_col:
+        df["site_nationality"] = df[sn_col].astype(str)
+        df["__sn_lc"] = df["site_nationality"].astype(str).str.strip().str.lower()
+        df["_orig_cols"] = [{**(df["_orig_cols"].iat[i] or {}), "site_nationality": sn_col}
+                            for i in range(len(df))]
+    else:
+        df["site_nationality"] = ""
+        df["__sn_lc"] = ""
+    return df
+def _safe_float(x) -> Optional[float]:
+    try:
+        if x is None: return None
+        if isinstance(x, float) and np.isnan(x): return None
+        if isinstance(x, str):
+            s = x.strip().replace(",", " ")
+            if not s: return None
+            return float(s)
+        return float(x)
+    except Exception:
+        return None
+def _take_first_str(row, cols: List[str]) -> str:
+    for c in cols:
+        if c in row and pd.notna(row[c]) and str(row[c]).strip():
+            return str(row[c]).strip()
+    return ""
+def _case_key(row) -> int:
+    s = _take_first_str(row, ["PanTS ID","PanTS_ID","case_id","id","__case_str"])
+    if not s: return 0
+    m = re.search(r"(\d+)", str(s))
+    return int(m.group(1)) if m else 0
+def _parse_3tuple_from_row(row, name_candidates: List[str]) -> List[Optional[float]]:
+    # 3 個獨立欄
+    for base in name_candidates:
+        cx, cy, cz = f"{base}_x", f"{base}_y", f"{base}_z"
+        if cx in row and cy in row and cz in row:
+            xs = [_safe_float(row[c]) for c in (cx, cy, cz)]
+            if all(v is not None for v in xs):
+                return xs
+    # 單欄字串
+    seps = [",", "x", " ", "×", "X", ";", "|"]
+    str_cols = []
+    for base in name_candidates:
+        str_cols += [base, f"{base}_str", base.replace(" ", "_")]
+    for c in str_cols:
+        if c in row and pd.notna(row[c]):
+            s = str(row[c]).strip()
+            if not s: continue
+            s2 = re.sub(r"[\[\]\(\)\{\}]", " ", s)
+            for sep in seps:
+                s2 = s2.replace(sep, " ")
+            parts = [p for p in s2.split() if p]
+            vals = [_safe_float(p) for p in parts[:3]]
+            if len(vals) == 3 and all(v is not None for v in vals):
+                return vals
+    return [None, None, None]
+def _spacing_sum(row) -> Optional[float]:
+    vals = _parse_3tuple_from_row(row, ["spacing","voxel_spacing","voxel_size","pixel_spacing"])
+    if any(v is None for v in vals): return None
+    return float(vals[0] + vals[1] + vals[2])
+def _shape_sum(row) -> Optional[float]:
+    vals = _parse_3tuple_from_row(row, ["shape","dim","size","image_shape","resolution"])
+    if any(v is None for v in vals): return None
+    return float(vals[0] + vals[1] + vals[2])
+def _ensure_sort_cols(df: pd.DataFrame) -> pd.DataFrame:
+    if "__case_sortkey" not in df.columns:
+        df["__case_sortkey"] = df.apply(_case_key, axis=1)
+    if "__spacing_sum" not in df.columns:
+        df["__spacing_sum"] = df.apply(_spacing_sum, axis=1)
+    if "__shape_sum" not in df.columns:
+        df["__shape_sum"] = df.apply(_shape_sum, axis=1)
+    # 完整度：Browse 與 top 排序會用到
+    need_cols = ["__spacing_sum", "__shape_sum", "__sex", "__age"]
+    complete = pd.Series(True, index=df.index)
+    for c in need_cols:
+        if c not in df.columns:
+            complete &= False
+        elif c == "__sex":
+            complete &= (df[c].astype(str).str.strip() != "")
+        else:
+            complete &= df[c].notna()
+    df["__complete"] = complete
+    return df
+# load meta
+if not os.path.exists(META_FILE):
+    raise FileNotFoundError(f"metadata not found: {META_FILE}")
+DF_RAW = pd.read_excel(META_FILE)
+DF = _norm_cols(DF_RAW)
+# ---------------------------
+# Filters
+# ---------------------------
+def apply_filters(base: pd.DataFrame, exclude: Optional[Set[str]] = None) -> pd.DataFrame:
+    exclude = exclude or set()
+    df = base
+    # Case ID / keyword
+    q = (_arg("q") or _arg("caseid") or "").strip()
+    if q and "caseid" not in exclude:
+        if "__case_str" in df:
+            df = df[df["__case_str"].str.contains(re.escape(q), na=False)]
+    # Tumor
+    tv = _to01_query(_arg("tumor"))
+    tnull = _to01_query(_arg("tumor_is_null"))
+    if (_arg("tumor","").strip().lower() == "unknown"):
+        tnull, tv = 1, None
+    if "__tumor01" in df and "tumor" not in exclude:
+        if tnull in (0,1) and "tumor_is_null" not in exclude:
+            df = df[df["__tumor01"].isna()] if tnull==1 else df[df["__tumor01"].notna()]
+        elif tv in (0,1):
+            df = df[df["__tumor01"] == tv]
+    # Sex
+    sv = (_arg("sex","") or "").strip().upper()
+    snull = _to01_query(_arg("sex_is_null"))
+    if sv == "UNKNOWN": snull, sv = 1, ""
+    if "__sex" in df and "sex" not in exclude:
+        ser = df["__sex"].fillna("").str.strip()
+        if snull in (0,1) and "sex_is_null" not in exclude:
+            df = df[ser == ""] if snull==1 else df[ser != ""]
+        elif sv in ("F","M"):
+            df = df[ser == sv]
+    # Age
+    af = _to_float(_arg("age_from"))
+    at = _to_float(_arg("age_to"))
+    if "__age" in df:
+        if "age_from" not in exclude and af is not None:
+            df = df[df["__age"].fillna(-1) >= af]
+        if "age_to" not in exclude and at is not None:
+            df = df[df["__age"].fillna(1e9) <= at]
+    # CT phase
+    ct = (_arg("ct_phase","") or "").strip().lower()
+    ct_list = _collect_list_params(["ct_phase","ct_phase[]"])
+    if ct == "unknown" or any(s.lower()=="unknown" for s in ct_list):
+        if "__ct" in df:
+            s_ct = df["__ct"].astype(str).str.strip().str.lower()
+            tokens_null_ct = {'', 'unknown','nan','n/a','na','none','(blank)','(null)'}
+            df = df[df["__ct"].isna() | s_ct.isin(tokens_null_ct)]
+    elif (ct or ct_list) and "__ct_lc" in df:
+        parts = []
+        if ct: parts += [p.strip() for p in re.split(r"[;,/]+", ct) if p.strip()]
+        parts += [p.strip().lower() for p in ct_list if p.strip()]
+        patt = "|".join(re.escape(p) for p in parts)
+        df = df[df["__ct_lc"].str.contains(patt, na=False)]
+    # Manufacturer
+    m_list = _collect_list_params(["manufacturer","manufacturer[]","mfr"])
+    m_raw = (_arg("manufacturer","") or "").strip()
+    if m_raw and not m_list:
+        m_list = [p.strip() for p in m_raw.split(",") if p.strip()]
+    if m_list and "__mfr_lc" in df:
+        m_lc = [s.lower() for s in m_list]
+        df = df[df["__mfr_lc"].isin(m_lc)]
+    # Model（多值、大小寫不敏感，OR 連接）
+    model_list = _collect_list_params(["model","model[]","manufacturer_model"])
+    model_raw = (_arg("model","") or "").strip()
+    if model_raw and not model_list:
+        model_list = [p.strip() for p in re.split(r"[;,/|]+", model_raw) if p.strip()]
+    if model_list and "__model_lc" in df and "model" not in exclude:
+        parts = [p.lower() for p in model_list]
+        patt = "|".join(re.escape(p) for p in parts)
+        df = df[df["__model_lc"].str.contains(patt, na=False)]
+    # Study type（多值、大小寫不敏感）
+    st_list = _collect_list_params(["study_type","study_type[]"])
+    st_raw = (_arg("study_type","") or "").strip()
+    if st_raw and not st_list:
+        st_list = [p.strip() for p in re.split(r"[;,/|]+", st_raw) if p.strip()]
+    if st_list and "__st_lc" in df and "study_type" not in exclude:
+        parts = [p.lower() for p in st_list]
+        patt = "|".join(re.escape(p) for p in parts)
+        df = df[df["__st_lc"].str.contains(patt, na=False)]
+    # Site nationality（多值、大小寫不敏感）; 支援 site_nat 同義
+    nat_list = _collect_list_params(["site_nat","site_nat[]","site_nationality","site_nationality[]"])
+    nat_raw = (_arg("site_nationality","") or _arg("site_nat","") or "").strip()
+    if nat_raw and not nat_list:
+        nat_list = [p.strip() for p in re.split(r"[;,/|]+", nat_raw) if p.strip()]
+    if nat_list and "__sn_lc" in df and "site_nationality" not in exclude:
+        parts = [p.lower() for p in nat_list]
+        patt = "|".join(re.escape(p) for p in parts)
+        df = df[df["__sn_lc"].str.contains(patt, na=False)]
+    return df
+# ---------------------------
+# /api/search
+# ---------------------------
+@app.get("/api/search")
+def api_search():
+    try:
+        df = apply_filters(DF).copy()
+        df = _ensure_sort_cols(df)
+        sort_by  = (_arg("sort_by", "top") or "top").strip().lower()
+        sort_dir = (_arg("sort_dir", "asc") or "asc").strip().lower()
+        if sort_by == "top":
+            by = ["__complete", "__spacing_sum", "__shape_sum", "__case_sortkey"]
+            asc = [False, True, False, True]
+        elif sort_by in ("shape_desc", "shape"):
+            by = ["__shape_sum", "__case_sortkey"]
+            asc = [False, True]
+        elif sort_by in ("spacing_asc", "spacing"):
+            by = ["__spacing_sum", "__case_sortkey"]
+            asc = [True, True]
+        elif sort_by == "age_asc":
+            by = ["__age", "__case_sortkey"]; asc = [True, True]
+        elif sort_by == "age_desc":
+            by = ["__age", "__case_sortkey"]; asc = [False, True]
+        else:
+            key_map = {"id":"__case_sortkey","spacing":"__spacing_sum","shape":"__shape_sum"}
+            k = key_map.get(sort_by, "__case_sortkey")
+            by = [k, "__case_sortkey"]
+            asc = [(sort_dir!="desc"), True]
+        df = df.sort_values(by=by, ascending=asc, na_position="last", kind="mergesort")
+        total = int(len(df))
+        page = max(_to_int(_arg("page", "1")) or 1, 1)
+        per_page = _to_int(_arg("per_page", "24")) or 24
+        per_page = max(1, min(per_page, 1_000_000))
+        pages = max(1, int(math.ceil(total / per_page)))
+        page = max(1, min(page, pages))
+        start, end = (page-1)*per_page, (page-1)*per_page + per_page
+        items = [_row_to_item(r) for _, r in df.iloc[start:end].iterrows()]
+        return jsonify({"total": total, "page": int(page), "pages": int(pages), "items": _clean_json_list(items)})
+    except Exception as e:
+        return jsonify({"error": str(e)}), 400
+# ---------------------------
+# /api/facets
+# ---------------------------
+def _facet_counts_with_unknown(df: pd.DataFrame, col_key: str, top_k: int = 6) -> Dict[str, Any]:
+    key_to_col = {
+        "ct_phase": ("__ct", str),
+        "manufacturer": ("__mfr", str),
+        "year": ("__year_int", int),
+        "sex": ("__sex", str),
+        "tumor": ("__tumor01", int),
+        "model": ("model", str),
+        "study_type": ("study_type", str),
+        "site_nat": ("site_nationality", str),
+        "site_nationality": ("site_nationality", str),
+    }
+    if col_key not in key_to_col:
+        return {"rows": [], "unknown": 0}
+    col_name, _typ = key_to_col[col_key]
+    if col_name not in df.columns:
+        return {"rows": [], "unknown": 0}
+    ser = df[col_name]
+    if col_key == "year":
+        s = ser.dropna().astype(int)
+        vc = s.value_counts()
+        rows = [{"value": int(v), "count": int(c)} for v, c in vc.items()]
+        rows.sort(key=lambda x: (-x["count"], x["value"]))
+        unknown = int(ser.isna().sum())
+        return {"rows": rows[:top_k] if top_k>0 else rows, "unknown": unknown}
+    s_stripped = ser.astype(str).str.strip().str.lower()
+    unknown_mask = ser.isna() | (s_stripped=="") | (s_stripped.isin({"unknown","nan","none"}))
+    unknown = int(unknown_mask.sum())
+    def ok(v):
+        if pd.isna(v): return False
+        s = str(v).strip()
+        if s == "": return False
+        if s.lower() in ("unknown","nan","none"): return False
+        return True
+    vals = ser[ser.map(ok)]
+    vc = vals.value_counts(dropna=False)
+    rows = [{"value": (int(v) if col_key=="tumor" else v), "count": int(c)} for v, c in vc.items()]
+    rows.sort(key=lambda x: (-x["count"], str(x["value"])))
+    return {"rows": rows[:top_k] if top_k>0 else rows, "unknown": unknown}
+@app.get("/api/facets")
+def api_facets():
+    try:
+        fields_raw = (_arg("fields","ct_phase,manufacturer") or "").strip()
+        fields = [f.strip().lower() for f in fields_raw.split(",") if f.strip()]
+        # 允許的新欄位
+        valid  = {
+            "ct_phase","manufacturer","year","sex","tumor",
+            "model","study_type","site_nat","site_nationality"
+        }
+        fields = [f for f in fields if f in valid] or ["ct_phase","manufacturer"]
+        top_k  = _to_int(_arg("top_k","6")) or 6
+        guarantee = (_arg("guarantee","0") or "0").strip().lower() in ("1","true","yes","y")
+        df_now = apply_filters(DF)
+        base_for_ranges = df_now if len(df_now) else DF
+        facets = {}
+        unknown_counts = {}
+        # 為每個 facet 準備要排除的條件（避免自我影響）
+        exclude_map = {
+            "ct_phase": {"ct_phase"},
+            "manufacturer": {"manufacturer","mfr_is_null","manufacturer_is_null"},
+            "year": {"year_from","year_to"},
+            "sex": {"sex"},
+            "tumor": {"tumor"},
+            # 新增 ↓↓↓
+            "model": {"model"},
+            "study_type": {"study_type"},
+            "site_nat": {"site_nat","site_nationality"},
+            "site_nationality": {"site_nat","site_nationality"},
+        }
+        for f in fields:
+            ex = exclude_map.get(f,set())
+            src = (DF if (guarantee and len(df_now)==0) else df_now)
+            df_facet = apply_filters(src, exclude=ex)
+            res = _facet_counts_with_unknown(df_facet, f, top_k=top_k)
+            facets[f] = res["rows"]; unknown_counts[f] = res["unknown"]
+        # 年齡/年份範圍（原樣保留）
+        def _minmax(series: pd.Series):
+            s = series.dropna()
+            if not len(s): return (None, None)
+            return (float(s.min()), float(s.max()))
+        age_min = age_max = None
+        year_min = year_max = None
+        if "__age" in base_for_ranges:
+            age_min, age_max = _minmax(base_for_ranges["__age"])
+        if "__year_int" in base_for_ranges:
+            yr = base_for_ranges["__year_int"].dropna().astype(int)
+            if len(yr):
+                year_min, year_max = int(yr.min()), int(yr.max())
+        return jsonify({
+            "facets": facets,
+            "unknown_counts": unknown_counts,
+            "age_range": {"min": age_min, "max": age_max},
+            "year_range": {"min": year_min, "max": year_max},
+            "total": int(len(df_now)),
+        })
+    except Exception as e:
+        return jsonify({"error": str(e)}), 400
+# ---------------------------
+# /api/random (Browse)
+# ---------------------------
+@app.get("/api/random")
+def api_random_topk_rotate_norand():
+    """
+    推薦：完整資料優先 → 取 Top-K(預設100) → 環狀位移 → 可排除最近看過
+    排序：__spacing_sum ↑, __shape_sum ↓, __case_sortkey ↑
+    """
+    try:
+        scope = (request.args.get("scope", "filtered") or "filtered").strip().lower()
+        base_df = apply_filters(DF)
+        if len(base_df) == 0 and scope == "all":
+            base_df = DF.copy()
+        base_df = _ensure_sort_cols(base_df)
+        # 只取完整資料；若沒有完整的就退回全部
+        df_full = base_df[base_df["__complete"]] if "__complete" in base_df.columns else base_df
+        if len(df_full) == 0:
+            df_full = base_df
+        df = df_full.sort_values(
+            by=["__spacing_sum","__shape_sum","__case_sortkey"],
+            ascending=[True, False, True],
+            na_position="last",
+            kind="mergesort",
+        )
+        if len(df) == 0:
+            return jsonify({"items": [], "total": 0, "meta": {"k": 0, "used_recent": 0}}), 200
+        # n, k
+        try: n = int(request.args.get("n") or 3)
+        except Exception: n = 3
+        n = max(1, min(n, len(df)))
+        try: K = int(request.args.get("k") or 100)
+        except Exception: K = 100
+        K = max(n, min(K, len(df)))
+        # recent 排除
+        recent_raw = (request.args.get("recent") or "").strip()
+        used_recent = 0
+        if recent_raw:
+            recent_ids = {s.strip() for s in recent_raw.split(",") if s.strip()}
+            key = df["__case_str"].astype(str) if "__case_str" in df.columns else None
+            if key is not None:
+                mask = ~key.isin(recent_ids)
+                used_recent = int((~mask).sum())
+                df2 = df[mask]
+                if len(df2): df = df2
+        topk = df.iloc[:K]
+        if len(topk) == 0:
+            return jsonify({"items": [], "total": 0, "meta": {"k": 0, "used_recent": used_recent}}), 200
+        off_arg = request.args.get("offset")
+        if off_arg is not None:
+            try: offset = int(off_arg) % len(topk)
+            except Exception: offset = 0
+        else:
+            now = datetime.utcnow()
+            offset = ((now.minute * 60) + now.second) % len(topk)
+        idx = list(range(len(topk))) + list(range(len(topk)))
+        pick = idx[offset:offset + min(n, len(topk))]
+        sub = topk.iloc[pick]
+        items = [_row_to_item(r) for _, r in sub.iterrows()]
+        resp = jsonify({
+            "items": _clean_json_list(items),
+            "total": int(len(df)),
+            "meta": {"k": int(len(topk)), "used_recent": used_recent, "offset": int(offset)}
+        })
+        r = make_response(resp)
+        r.headers["Cache-Control"] = "no-store, no-cache, must-revalidate, max-age=0"
+        r.headers["Pragma"] = "no-cache"
+        r.headers["Expires"] = "0"
+        return r
+    except Exception as e:
+        return jsonify({"error": str(e)}), 400
+# ---------------------------
+# Row → JSON
+# ---------------------------
+def _row_to_item(row: pd.Series) -> Dict[str, Any]:
+    cols = row.get("_orig_cols")
+    cols = cols if isinstance(cols, dict) else {}
+    def pick(k, fallback=None):
+        col = cols.get(k)
+        if col and col in row.index:
+            return row[col]
+        return fallback
+    return {
+        "PanTS ID": _nan2none(pick("case") or row.get("__case_str")),
+        "case_id":  _nan2none(pick("case") or row.get("__case_str")),
+        "tumor":    (int(row.get("__tumor01")) if pd.notna(row.get("__tumor01")) else None),
+        "sex":      _nan2none(row.get("__sex")),
+        "age":      _nan2none(row.get("__age")),
+        "ct phase": _nan2none(pick("ct_phase") or row.get("__ct")),
+        "manufacturer": _nan2none(pick("manufacturer") or row.get("__mfr")),
+        "manufacturer model": _nan2none(pick("model") or row.get("model")),
+        "study year": _nan2none(row.get("__year_int")),
+        "study type": _nan2none(pick("study_type") or row.get("study_type")),
+        "site nationality": _nan2none(pick("site_nationality") or row.get("site_nationality")),
+        # 排序輔助輸出
+        "spacing_sum": _nan2none(row.get("__spacing_sum")),
+        "shape_sum":   _nan2none(row.get("__shape_sum")),
+        "complete":    bool(row.get("__complete")) if "__complete" in row else None,
+    }
+# ---------------------------
+# Health & index
+# ---------------------------
+@app.get("/api/health")
+def api_health():
+    return jsonify({"ok": True})
+@app.get("/")
+def index():
+    if not INDEX_FILE or not os.path.exists(INDEX_FILE):
+        return "Backend OK (HTML not found or not provided)", 200
+    return send_file(INDEX_FILE)
+# ---------------------------
+# main
+# ---------------------------
+if __name__ == "__main__":
+    # 這裡直接用前面 argparse 解析到的參數
+    app.run(host=args.host, port=args.port, debug=True)

requirements.txt ADDED Viewed

	@@ -0,0 +1,5 @@

+flask
+flask-cors
+pandas
+numpy
+openpyxl