577 lines
42 KiB
HTML
577 lines
42 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ko">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Alopecia Protein Digital Twin (탈모 단백질 디지털 트윈)</title>
|
||
<meta name="description" content="문헌 기반 탈모 단백질 추적 디지털 트윈 — AlphaFold 구조 · 지식그래프 · 모낭 주기 ODE 시뮬레이션.">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link rel="stylesheet" as="style" crossorigin
|
||
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css">
|
||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/ngl@2.3.1/dist/ngl.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
|
||
<link rel="stylesheet" href="css/style.css">
|
||
<link rel="stylesheet" href="css/twin.css">
|
||
<link rel="stylesheet" href="css/editorial.css">
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<div class="container">
|
||
<header class="dashboard-header">
|
||
<div class="logo-area">
|
||
<div class="dna-icon">
|
||
<svg width="36" height="36" viewBox="0 0 24 24" fill="none">
|
||
<path d="M12 2C8.13 2 5 5.13 5 9c0 3.87 3.13 7 7 7s7-3.13 7-7c0-3.87-3.13-7-7-7zm0 12c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"
|
||
fill="currentColor" />
|
||
<circle cx="12" cy="19" r="3" fill="currentColor" />
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<h1>Alopecia <span class="gradient-text">Protein Digital Twin</span> <span class="ko-title">(탈모 단백질 디지털 트윈)</span></h1>
|
||
<p class="subtitle">Literature-grounded protein tracking · AlphaFold structures · hair-cycle ODE twin</p>
|
||
</div>
|
||
</div>
|
||
<div class="header-stats">
|
||
<div class="stat-pill"><div class="pulse-dot"></div><span id="stat-proteins">0</span> Proteins (단백질)</div>
|
||
<div class="stat-pill"><span id="stat-structures">0</span> AlphaFold 구조</div>
|
||
<div class="stat-pill" title="실제 분석 논문 전문에서 근거 확보한 단백질"><span id="stat-grounding">0</span> 논문 전문 근거</div>
|
||
<div class="stat-pill updated">Updated: <span id="last-updated">—</span></div>
|
||
</div>
|
||
</header>
|
||
|
||
<nav class="tab-nav">
|
||
<button class="tab-btn active" data-tab="twin">단백질 트윈</button>
|
||
<button class="tab-btn" data-tab="timeline">치료 타임라인</button>
|
||
<button class="tab-btn" data-tab="network">단백질 네트워크</button>
|
||
<button class="tab-btn" data-tab="atlas">단백질 아틀라스</button>
|
||
<button class="tab-btn" data-tab="graph">지식그래프</button>
|
||
<button class="tab-btn" data-tab="calibrate">정량보정</button>
|
||
<button class="tab-btn" data-tab="validation">검증</button>
|
||
<button class="tab-btn" data-tab="stats">통계</button>
|
||
<button class="tab-btn" data-tab="papers">논문</button>
|
||
</nav>
|
||
|
||
<!-- ============== TAB 1: PROTEIN TWIN ============== -->
|
||
<div id="tab-twin" class="tab-content active">
|
||
<div class="twin-layout">
|
||
<!-- CONTROLS -->
|
||
<section class="panel glass-panel twin-controls">
|
||
<h2>모낭 디지털 트윈 (Hair-Follicle Twin)</h2>
|
||
<p class="panel-subtitle">질환을 고르고 치료 개입을 조합하면, 모낭 주기 ODE 모델이 핵심 단백질의 시간 궤적과 모발 밀도를 시뮬레이션합니다.</p>
|
||
|
||
<div class="form-group">
|
||
<label>대상 질환 (Disease)</label>
|
||
<div class="seg-control" id="disease-seg"></div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>치료 개입 (Interventions) — 복수 선택</label>
|
||
<div id="intervention-list" class="chip-list"></div>
|
||
</div>
|
||
|
||
<div class="disease-desc" id="disease-desc"></div>
|
||
|
||
<div class="metrics-row" id="twin-metrics"></div>
|
||
|
||
<div class="tracked-genes">
|
||
<h4>추적 표적 단백질 (Tracked targets)</h4>
|
||
<div id="tracked-genes-list" class="mini-chip-list"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- VISUALIZATION -->
|
||
<section class="panel glass-panel twin-viz">
|
||
<div class="viz-head">
|
||
<h3>모발 밀도 추이 (Hair Density, % of healthy baseline)</h3>
|
||
<div class="badge pulse-badge" id="twin-status">Simulation Active</div>
|
||
</div>
|
||
<div class="chart-box"><canvas id="chart-hair"></canvas></div>
|
||
|
||
<div class="viz-head">
|
||
<h3>단백질 활성 궤적 (Protein activity over time)</h3>
|
||
<select id="protein-trace-mode" class="mini-select">
|
||
<option value="key">핵심 단백질 (key drivers)</option>
|
||
<option value="all">전체 readout</option>
|
||
</select>
|
||
</div>
|
||
<div class="chart-box"><canvas id="chart-proteins"></canvas></div>
|
||
</section>
|
||
|
||
<!-- COMPARE + LIVE -->
|
||
<section class="panel glass-panel twin-side">
|
||
<h3>치료 시나리오 비교 (Compare)</h3>
|
||
<p class="panel-subtitle">현재 질환의 치료별 최종 모발 밀도.</p>
|
||
<div class="chart-box small"><canvas id="chart-compare"></canvas></div>
|
||
|
||
<h3 style="margin-top:18px;">라이브 What-if (실시간 슬라이더)</h3>
|
||
<p class="panel-subtitle">병태 부하를 직접 조절해 트윈을 실시간 재계산.</p>
|
||
<div class="slider-group">
|
||
<label>안드로겐(DHT) 부하 <span id="val-and">—</span></label>
|
||
<input type="range" id="slider-and" min="0" max="1.2" step="0.02" value="0.1">
|
||
</div>
|
||
<div class="slider-group">
|
||
<label>염증/JAK-STAT 부하 <span id="val-inf">—</span></label>
|
||
<input type="range" id="slider-inf" min="0" max="1.2" step="0.02" value="0.05">
|
||
</div>
|
||
<div class="slider-group">
|
||
<label>Wnt 부스트 (uWnt) <span id="val-wnt">—</span></label>
|
||
<input type="range" id="slider-wnt" min="0" max="0.8" step="0.02" value="0">
|
||
</div>
|
||
<div class="slider-group">
|
||
<label>진피유두 부스트 (uDP) <span id="val-dp">—</span></label>
|
||
<input type="range" id="slider-dp" min="0" max="1.2" step="0.02" value="0">
|
||
</div>
|
||
<button id="btn-reset-live" class="btn-ghost">슬라이더 리셋</button>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============== TAB 2: PROTEIN ATLAS ============== -->
|
||
<div id="tab-atlas" class="tab-content">
|
||
<div class="atlas-layout">
|
||
<section class="panel glass-panel atlas-list-panel">
|
||
<div class="atlas-controls">
|
||
<input type="text" id="atlas-search" class="search-input" placeholder="🔍 유전자/단백질 검색 (예: AR, JAK1, β-catenin)">
|
||
<select id="atlas-axis" class="mini-select"><option value="">전체 트윈 축</option></select>
|
||
<select id="atlas-disease" class="mini-select"><option value="">전체 질환</option></select>
|
||
<select id="atlas-sort" class="mini-select">
|
||
<option value="evidence">근거논문순</option>
|
||
<option value="mention">언급빈도순</option>
|
||
<option value="plddt">구조신뢰도순</option>
|
||
<option value="gene">가나다순</option>
|
||
</select>
|
||
</div>
|
||
<div class="atlas-count"><span id="atlas-count">0</span> proteins</div>
|
||
<div id="atlas-grid" class="atlas-grid"></div>
|
||
</section>
|
||
|
||
<section class="panel glass-panel atlas-detail-panel">
|
||
<div id="atlas-detail-empty" class="centered-content">
|
||
<div class="hologram-ring"></div>
|
||
<div class="placeholder-text">
|
||
<h3>단백질 선택 (Select a protein)</h3>
|
||
<p>좌측 목록에서 단백질을 클릭하면 AlphaFold 3D 구조와 근거가 표시됩니다.</p>
|
||
</div>
|
||
</div>
|
||
<div id="atlas-detail" class="hidden">
|
||
<div class="detail-head">
|
||
<div>
|
||
<h2 id="d-gene">—</h2>
|
||
<p id="d-name" class="d-name">—</p>
|
||
</div>
|
||
<div class="detail-badges" id="d-badges"></div>
|
||
</div>
|
||
<div id="ngl-viewer" class="ngl-viewer"></div>
|
||
<div class="plddt-legend">
|
||
<span>pLDDT:</span>
|
||
<span class="lg lg-vh">매우높음 ≥90</span>
|
||
<span class="lg lg-c">신뢰 70–90</span>
|
||
<span class="lg lg-l">낮음 50–70</span>
|
||
<span class="lg lg-vl">매우낮음 <50</span>
|
||
<span id="d-plddt" class="plddt-val">—</span>
|
||
</div>
|
||
<div class="detail-grid" id="d-meta"></div>
|
||
<div class="detail-section">
|
||
<h4>기전 (Mechanism)</h4>
|
||
<p id="d-mech">—</p>
|
||
</div>
|
||
<div class="detail-section">
|
||
<h4>표적 약물·물질 (Drugs / agents)</h4>
|
||
<div id="d-drugs" class="mini-chip-list"></div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<h4>근거 논문 (Evidence) <span id="d-evcount" class="badge small">0</span></h4>
|
||
<div id="d-evidence" class="evidence-list"></div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<h4>📄 실제 논문 전문 근거 (Full-text grounding, 검증 인용) <span id="d-groundcount" class="badge small">0</span></h4>
|
||
<div id="d-grounding" class="grounding-list"></div>
|
||
</div>
|
||
<div class="detail-links" id="d-links"></div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============== TAB 3: KNOWLEDGE GRAPH ============== -->
|
||
<div id="tab-graph" class="tab-content">
|
||
<section class="panel glass-panel full-panel">
|
||
<div class="graph-controls">
|
||
<h2>지식그래프 (Knowledge Graph)</h2>
|
||
<div class="graph-legend">
|
||
<span class="gl gl-protein">단백질</span>
|
||
<span class="gl gl-pathway">경로</span>
|
||
<span class="gl gl-disease">질환</span>
|
||
<span class="gl gl-axis">트윈축</span>
|
||
<span class="gl gl-drug">약물</span>
|
||
</div>
|
||
<div class="graph-filters">
|
||
<label><input type="checkbox" id="g-show-drug"> 약물 노드 표시</label>
|
||
<select id="g-focus-disease" class="mini-select"><option value="">전체</option></select>
|
||
<button id="g-reheat" class="btn-ghost">재배치</button>
|
||
</div>
|
||
</div>
|
||
<canvas id="graph-canvas"></canvas>
|
||
<div id="graph-tooltip" class="graph-tooltip hidden"></div>
|
||
</section>
|
||
</div>
|
||
|
||
<!-- ============== TAB: CALIBRATION ============== -->
|
||
<div id="tab-calibrate" class="tab-content">
|
||
<section class="panel glass-panel">
|
||
<div class="cal-head">
|
||
<div>
|
||
<h2>모낭주기 정량 보정 (COPASI Parameter Estimation)</h2>
|
||
<p class="panel-subtitle">모낭 주기 ODE 모델의 파라미터를 <b>transcriptomic 시계열</b>에 COPASI(Levenberg-Marquardt)로 추정하여 정량 보정. scipy(TRF) 워밍업 + COPASI polish.</p>
|
||
</div>
|
||
<div class="cal-target-sel">
|
||
<label>보정 타깃</label>
|
||
<select id="cal-target" class="mini-select"></select>
|
||
</div>
|
||
</div>
|
||
<div id="cal-validation" class="cal-validation"></div>
|
||
<div id="cal-summary" class="cal-summary"></div>
|
||
<div id="cal-grid" class="cal-grid"></div>
|
||
<div class="cal-foot">
|
||
<div class="cal-params">
|
||
<h4>추정 파라미터 (estimated by COPASI) <span class="badge small" id="cal-nparam">0</span></h4>
|
||
<div id="cal-param-table" class="cal-param-table"></div>
|
||
</div>
|
||
<div class="cal-prov">
|
||
<h4>데이터 출처 / Provenance</h4>
|
||
<div id="cal-provenance" class="cal-provenance"></div>
|
||
</div>
|
||
</div>
|
||
<div class="cal-coupled-section">
|
||
<h4>🔗 Cycle↔Chronic 결합 (COMBINE) — 보정 주기에 질환 구동 변조</h4>
|
||
<p class="panel-subtitle">데이터 보정된 모낭주기 모델을 질환·치료로 변조 → anagen 비율이 disease-specific 주기 왜곡으로 창발.</p>
|
||
<div id="cal-coupled" class="cal-coupled"></div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<!-- ============== TAB 4: STATISTICS ============== -->
|
||
<div id="tab-stats" class="tab-content">
|
||
<div class="stats-grid">
|
||
<section class="panel glass-panel chart-panel">
|
||
<h2>질환 분포 (Disease)</h2>
|
||
<div class="chart-wrapper"><canvas id="chart-disease"></canvas></div>
|
||
</section>
|
||
<section class="panel glass-panel chart-panel">
|
||
<h2>트윈 축별 단백질 (Proteins per twin axis)</h2>
|
||
<div class="chart-wrapper"><canvas id="chart-axis"></canvas></div>
|
||
</section>
|
||
<section class="panel glass-panel chart-panel wide">
|
||
<h2>연도별 논문 추이 (Publications by year)</h2>
|
||
<div class="chart-wrapper tall"><canvas id="chart-trend"></canvas></div>
|
||
</section>
|
||
<section class="panel glass-panel chart-panel">
|
||
<h2>경로별 단백질 (Top pathways)</h2>
|
||
<div class="chart-wrapper"><canvas id="chart-pathway"></canvas></div>
|
||
</section>
|
||
<section class="panel glass-panel chart-panel">
|
||
<h2>치료 모달리티 (Modality)</h2>
|
||
<div class="chart-wrapper"><canvas id="chart-modality"></canvas></div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============== TAB: TREATMENT TIMELINE ============== -->
|
||
<div id="tab-network" class="tab-content">
|
||
<section class="panel glass-panel">
|
||
<h2>단백질 상호작용 네트워크 <span class="badge small">시간축</span></h2>
|
||
<p class="panel-subtitle">치료(기전)를 넣으면 <b>어떤 단백질과 상호작용</b>하는지, 그 효과가 <b>개월별로</b> 신호망을 타고 전파되는 것을 보여줍니다. 노드=단백질(밝기·크기=활성), 초록 화살=활성·빨강 막대=억제. 표적 그룹은 점선 링으로 강조. <b>기전 차이</b>: 피나=상류 AR·DKK1 <b>차단</b>(DKK1 어두워짐) vs 미녹=하류 DP·모발 <b>부양</b>(DKK1은 그대로). ※ 활성=질환평형+회복·r(t)·(건강−질환), r(t)는 임상-보정 lag/τ.</p>
|
||
<div class="net-controls">
|
||
<label>질환 <select id="net-disease" class="net-sel"></select></label>
|
||
<label>치료(기전) <select id="net-treat" class="net-sel"></select></label>
|
||
<button id="net-mode" class="btn-ghost">🧬 AlphaFold 구조</button>
|
||
<button id="net-play" class="btn-ghost">▶ 재생</button>
|
||
<input type="range" id="net-time" class="net-slider">
|
||
<span class="net-month" id="net-month">0개월</span>
|
||
</div>
|
||
<div id="net-status" class="net-status"></div>
|
||
<div class="net-stage">
|
||
<div id="net-wrap" class="net-wrap"><canvas id="net-canvas"></canvas><div id="net-ngl" class="net-ngl" style="display:none"></div><div id="net-ngl-load" class="net-ngl-load" style="display:none"></div></div>
|
||
<div class="net-foll">
|
||
<div class="net-foll-title">모낭 단면 — 시간대별 변화</div>
|
||
<canvas id="net-follicle"></canvas>
|
||
<div id="net-foll-state" class="net-foll-state"></div>
|
||
</div>
|
||
</div>
|
||
<div id="net-legend" class="net-legend"></div>
|
||
</section>
|
||
</div>
|
||
|
||
<div id="tab-timeline" class="tab-content">
|
||
<div class="tl-disclaimer">
|
||
<b>⚠ 이미지 변형은 임상 예측이 아닙니다.</b>
|
||
회복의 <b>양</b>(치료 전후 밀도)은 디지털 트윈 모델, <b>속도</b>(언제·얼마나 빨리)는 <b>임상시험 문헌</b>으로 보정합니다.
|
||
사진 변화는 이 곡선이 구동하는 <b>절차적 일러스트</b>이며, 환부의 <b>위치·모양은 업로드 사진</b>에서 옵니다. 생성형 AI 아님 · 개별 환자 예측 아님.
|
||
<span class="tl-disc2">※ 시간축 = <b>실궤적 적합 + 기계론(모낭주기) 화해</b>: JAK은 CT.gov SALT 다시점에 <b>R²0.94~0.99</b> 검증; AGA 가시발모는 <b>텔로젠 바닥(~2개월)</b>에 묶임(약물 PK는 빠르나 모발은 느림). 단일 지수라 AGA 이상성·피나 2년후 감소·미녹 재퇴행은 미반영(한계). 출처 CT.gov(THRIVE·ALLEGRO·NCT01231607)·Kaufman 1998·PK/PD 문헌.</span>
|
||
</div>
|
||
<div class="tl-layout">
|
||
<section class="panel glass-panel tl-controls">
|
||
<h2>치료 타임라인 시뮬레이션</h2>
|
||
<p class="panel-subtitle">사진을 올리고 질환·치료를 고른 뒤, 환부를 드래그로 표시하면 모델 곡선대로 변화를 스크럽합니다.</p>
|
||
|
||
<div class="form-group">
|
||
<label>대상 / 모델 (Disease)</label>
|
||
<div class="seg-control" id="tl-disease"></div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>치료 개입 (Intervention) — 복수 선택</label>
|
||
<div id="tl-interventions" class="chip-list"></div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>사진 업로드</label>
|
||
<div class="tl-upload">
|
||
<label class="btn-primary" for="tl-file">사진 선택</label>
|
||
<input type="file" id="tl-file" accept="image/*" hidden>
|
||
<button class="btn-ghost" id="tl-demo">데모 이미지</button>
|
||
<button class="btn-ghost" id="tl-remark">환부 다시 표시</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tl-metrics">
|
||
<div class="metric-card"><div class="mv" id="tl-density">—</div><div class="ml">모발 밀도(모델)</div></div>
|
||
<div class="metric-card good"><div class="mv" id="tl-recovery">—</div><div class="ml">회복도</div></div>
|
||
</div>
|
||
<div class="tl-ivs-line">적용: <b id="tl-ivs-readout">—</b></div>
|
||
<div class="tl-chart-wrap"><canvas id="chart-timeline"></canvas></div>
|
||
<p class="tl-cap">↑ 밀도 곡선 (양=트윈 모델 · 속도=임상 문헌) — 프로그레스 바가 이 값을 따라갑니다.</p>
|
||
</section>
|
||
|
||
<section class="panel glass-panel tl-stage empty" id="tl-stage">
|
||
<div class="tl-canvas-wrap">
|
||
<canvas id="tl-canvas"></canvas>
|
||
<div class="tl-empty-hint">사진을 업로드하거나 <b>데모 이미지</b>를 눌러 시작하세요.</div>
|
||
<div class="tl-hint hidden" id="tl-hint">환부를 <b>드래그</b>로 표시하세요 (중심에서 바깥으로)</div>
|
||
</div>
|
||
<div class="tl-scrubber">
|
||
<div class="tl-month"><span id="tl-month-label">0개월</span> <span id="tl-month-sub" class="tl-month-sub">(0.0년)</span></div>
|
||
<input type="range" id="tl-slider" min="0" max="36" step="1" value="0">
|
||
<div class="tl-ticks"><span>0</span><span>4주</span><span>3개월</span><span>6개월</span><span>1년</span><span>3년</span></div>
|
||
<div class="tl-axisnote">시간축 = 임상 개월(문헌 보정). 초기 탈락(미녹·피나 2–8주) → 수개월 반응 → 1–2년 평탄.</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============== TAB: VALIDATION ============== -->
|
||
<div id="tab-validation" class="tab-content">
|
||
<section class="panel glass-panel val-intro">
|
||
<h2>다층 독립 검증 (Multi-layer Validation)</h2>
|
||
<p class="panel-subtitle">트윈의 인과 기전을 <b>모델 구성에 쓰지 않은 독립 데이터</b>(벌크·단일세포·약물섭동·GWAS·구조)로 검증. 약하거나 비재현인 결과도 정직하게 표시합니다 — 검증 = 직교 증거의 수렴.</p>
|
||
<div id="val-summary" class="val-summary-grid"></div>
|
||
</section>
|
||
<section class="panel glass-panel val-landscape">
|
||
<h3>데이터 지형 — 수집 전모 (4 웨이브 · 22 에이전트)</h3>
|
||
<div id="val-headline" class="val-headline"></div>
|
||
<div class="val-land-grid">
|
||
<div><p class="val-cap">모달리티별 (다운로드 / 기록·게이트)</p><div class="val-chart"><canvas id="chart-val-modality"></canvas></div></div>
|
||
<div><p class="val-cap">질환별 데이터셋 수</p><div class="val-chart"><canvas id="chart-val-disease"></canvas></div></div>
|
||
</div>
|
||
</section>
|
||
<div class="val-grid">
|
||
<section class="panel glass-panel">
|
||
<h3>분자 검증 유의도 (−log₁₀ p)</h3>
|
||
<p class="val-cap">독립 벌크/섭동 데이터의 기전 검정 — 막대가 길수록 유의.</p>
|
||
<div class="val-chart"><canvas id="chart-val-mol"></canvas></div>
|
||
</section>
|
||
<section class="panel glass-panel">
|
||
<h3>AGA: DP세포 Wnt 억제 + 치료 역전</h3>
|
||
<p class="val-cap">GSE295410 마우스 진피유두 — Con→TP(AGA)→TP+Ab(치료). Wnt(Lef1/Axin2)↓·Dkk1/Cxcl12↑, 치료로 역전.</p>
|
||
<div class="val-chart"><canvas id="chart-val-agadp"></canvas></div>
|
||
</section>
|
||
<section class="panel glass-panel">
|
||
<h3>약물섭동: JAK억제제별 염증신호</h3>
|
||
<p class="val-cap">AA 마우스 — vehicle 대비 JAK1/3·Tofa·Ruxo는 염증↓, <b>JAK2i만 무효</b>(임상 타깃과 일치).</p>
|
||
<div class="val-chart"><canvas id="chart-val-jak"></canvas></div>
|
||
</section>
|
||
<section class="panel glass-panel">
|
||
<h3>AA 단일세포 — 비재현 (정직)</h3>
|
||
<p class="val-cap">두 코호트 T세포 포획이 9배 차이 → 단일세포 면역정량은 프로토콜 의존, 코호트 불일치. AA 근거는 벌크가 robust.</p>
|
||
<div class="val-chart"><canvas id="chart-val-aasc"></canvas></div>
|
||
</section>
|
||
<section class="panel glass-panel">
|
||
<h3>GWAS 카탈로그 커버리지</h3>
|
||
<p class="val-cap">위험유전자 중 카탈로그 보유 비율. 보유 유전자의 축 배정은 GWAS와 일관(직교 검증).</p>
|
||
<div class="val-donuts">
|
||
<div class="val-donut"><canvas id="chart-val-gwasAGA"></canvas><div class="val-donut-lab">AGA</div></div>
|
||
<div class="val-donut"><canvas id="chart-val-gwasAA"></canvas><div class="val-donut-lab">AA</div></div>
|
||
</div>
|
||
</section>
|
||
<section class="panel glass-panel val-wide">
|
||
<h3>GWAS 후보 × 구조(AlphaFold) × 네트워크(STRING) 수렴</h3>
|
||
<p class="val-cap">신규 후보 19개: AlphaFold 구조 신뢰도(pLDDT) + 배정 축과의 STRING 응집. ⚠ 구조·네트워크는 <b>질환 인과를 증명하지 않음</b>(그건 GWAS) — 직교 면을 검증.</p>
|
||
<div id="val-candidates"></div>
|
||
</section>
|
||
<section class="panel glass-panel val-wide">
|
||
<h3>임상 시간축 — 약물별 회복 곡선 (보정됨)</h3>
|
||
<p class="val-cap">회복 '양'=트윈 모델, '속도'=임상 문헌 동역학으로 보정. 미녹시딜·피나는 초기 telogen 탈락(음수), JAK은 빠른 onset.</p>
|
||
<div class="val-chart" style="height:280px"><canvas id="chart-val-timing"></canvas></div>
|
||
</section>
|
||
<section class="panel glass-panel">
|
||
<h3>기존 모델 벤치마크 — Halloy vs 트윈</h3>
|
||
<p class="val-cap">완전히 다른 원리(모낭 자동자 vs 신호 ODE)인데 정상 anagen·AGA 밀도 수렴.</p>
|
||
<div class="val-chart"><canvas id="chart-val-bench"></canvas></div>
|
||
</section>
|
||
<section class="panel glass-panel val-wide val-credible">
|
||
<div class="val-cred-head"><span class="val-cred-tag" style="background:var(--accent,#1f5d52)">ex vivo</span>
|
||
<h3>실제 ex vivo 인체 모낭 검증 — GSE267664 (DHT)</h3></div>
|
||
<p class="val-cap">직접 실험 대신, 공개된 <b>ex vivo 인체 모낭 organ-modeled</b> RNA-seq(DHT vs control, AGA 전두부 모낭, n=3)로 트윈을 검증. 트윈의 <b>AGA/DHT→Wnt억제</b> 예측(Wnt 길항자↑·Wnt표적↓·모발케라틴↓)이 <b>10/11 방향 일치, 부호검정 p=0.0059</b>. DKK1 +1.13은 DP세포(GSE178374 +1.57)와 일관 — <b>전체 모낭에서도 재현</b>. <b>정직:</b> n=3 소규모라 개별 q≈1; 신호는 Wnt축 방향 협응이지 개별 유의 아님(BMP·비정준 Wnt 제외).</p>
|
||
<div id="val-exvivo-headline" class="val-headline"></div>
|
||
<div class="val-chart" style="height:260px;margin-top:10px"><canvas id="chart-val-exvivo"></canvas></div>
|
||
</section>
|
||
<section class="panel glass-panel val-wide val-credible">
|
||
<div class="val-cred-head"><span class="val-cred-tag">신뢰성 ①</span>
|
||
<h3>반증가능 신규 예측 — AGA 병용요법 시너지</h3></div>
|
||
<p class="val-cap">Hair 산출 A=kAp·[W²/(KWA²+W²)]·[D²/(KDA²+D²)] 는 Wnt·DP 두 협동 문턱의 <b>AND-게이트</b>. 상류 '브레이크 해제'(AR/5-ARI)×하류 '가속'(미녹시딜)을 병용하면 곱으로 결합 → <b>초가법적 시너지</b>가 모델 구조에서 창발. 실험에서 가법/길항이면 AND-게이트 가정이 반증됨(사전등록: PREREGISTRATION.md).</p>
|
||
<div id="val-syn-headline" class="val-headline"></div>
|
||
<div id="val-syn-clinical" class="ipd-warn"></div>
|
||
<div class="val-land-grid">
|
||
<div><div class="val-chart" style="height:260px"><canvas id="chart-val-synergy"></canvas></div></div>
|
||
<div><div class="val-chart" style="height:260px"><canvas id="chart-val-synergy-kda"></canvas></div></div>
|
||
</div>
|
||
<div class="val-chart" style="height:240px;margin-top:12px"><canvas id="chart-val-synclin"></canvas></div>
|
||
<div id="val-synrev-note" class="ipd-verdict" style="border-left:3px solid var(--accent,#1f5d52);padding-left:10px;margin-top:12px"></div>
|
||
<div class="val-chart" style="height:230px;margin-top:8px"><canvas id="chart-val-synrev"></canvas></div>
|
||
<div id="val-retest-note" class="ipd-verdict" style="border-left:3px solid var(--accent,#1f5d52);padding-left:10px;margin-top:10px"></div>
|
||
</section>
|
||
<section class="panel glass-panel val-wide val-credible">
|
||
<div class="val-cred-head"><span class="val-cred-tag">신뢰성 ②</span>
|
||
<h3>불확실성 정량(UQ) — 보정된 신뢰구간</h3></div>
|
||
<p class="val-cap">타이밍 모델을 실제 임상 궤적에 <b>계층적 베이즈</b>로 보정. 핵심 정직성 체크 = leave-one-trajectory-out 커버리지: 단순 풀링 구간은 <b>과신(59%)</b>이었으나 시험 간 이질성을 넣자 <b>명목 90%로 수렴(98%)</b>. 트윈이 "X%"가 아니라 "X%[구간]"을 보정된 채 말한다.</p>
|
||
<div id="val-uq-headline" class="val-headline"></div>
|
||
<div class="val-land-grid">
|
||
<div><div class="val-chart" style="height:260px"><canvas id="chart-val-uqband"></canvas></div></div>
|
||
<div><div class="val-chart" style="height:260px"><canvas id="chart-val-coverage"></canvas></div></div>
|
||
</div>
|
||
</section>
|
||
<section class="panel glass-panel val-wide val-credible">
|
||
<div class="val-cred-head"><span class="val-cred-tag">신뢰성 ③</span>
|
||
<h3>개인화 & 데이터 동화 — 초기 반응으로 개인 예측</h3></div>
|
||
<p class="val-cap">디지털 트윈을 진짜 '트윈'으로. 개인의 <b>초기</b> 반응을 동화하면 <b>후기</b> 예측이 모집단 모델보다 좋아지는지 누설 없이 검정(앞 점 관측→뒤 점 forecast). 결과: 개인화가 <b>9/10 궤적 우세, 평균 +40% RMSE 개선, 커버리지 23%→90%</b>. <b>정직:</b> 개인환자 IPD(Vivli 통제접근) 부재로 시험암을 유사개인으로 사용 — 암 평균은 저잡음이라 개선이 과대평가될 수 있음. ODE-수준 개인화는 omics 필요(차기).</p>
|
||
<div id="val-pers-headline" class="val-headline"></div>
|
||
<div class="val-land-grid">
|
||
<div><div class="val-chart" style="height:260px"><canvas id="chart-val-assim"></canvas></div></div>
|
||
<div><div class="val-chart" style="height:260px"><canvas id="chart-val-fskill"></canvas></div></div>
|
||
</div>
|
||
<div class="val-chart" style="height:210px;margin-top:14px"><canvas id="chart-val-synth"></canvas></div>
|
||
</section>
|
||
<section class="panel glass-panel val-wide val-credible">
|
||
<div class="val-cred-head"><span class="val-cred-tag">신뢰성 ④</span>
|
||
<h3>실험 검정력 — 시너지를 검출하려면 표본이 얼마나?</h3></div>
|
||
<p class="val-cap">사전등록 실험을 추측이 아니라 <b>몬테카를로 검정력 시뮬레이션</b>으로 설계. 정직한 결과: 시너지(δ=+0.12)는 실재하나 <b>약한 효과</b>라 단일 엔드포인트는 표본이 큼(n≈40 추정은 과소였고 시뮬이 교정). <b>핵심 발견</b>: 노이즈 플로어는 기술이 아니라 <b>생물학적 모낭간 변동</b> → 분자 readout 교체만으론 부족. 표본 절감은 <b>모낭내 paired 설계(유효 CV↓)</b>에서 옴 — 복합 전략으로 <b>1000→300모낭(3.3×)</b>. 분자 keratin의 역할=시너지를 잡는 올바른 지표(A proxy).</p>
|
||
<div id="val-pwr-headline" class="val-headline"></div>
|
||
<div class="val-land-grid">
|
||
<div><div class="val-chart" style="height:260px"><canvas id="chart-val-power"></canvas></div></div>
|
||
<div><div class="val-chart" style="height:260px"><canvas id="chart-val-powermol"></canvas></div></div>
|
||
</div>
|
||
</section>
|
||
<section class="panel glass-panel val-wide val-credible">
|
||
<div class="val-cred-head"><span class="val-cred-tag">신뢰성 ⑤</span>
|
||
<h3>분자 개인화 (ODE-수준) — baseline 전사체 → 최적치료</h3></div>
|
||
<p class="val-cap">개인 baseline 분자축을 개인 ODE 파라미터로 매핑 → <b>치료 전</b> 최적치료 예측. <b>GWAS-가중 보정 적용</b>(트랙 C): AR/EDA2R/SRD5A2(유전 androgen축) ≫ DKK1/SFRP1(하류) 재가중 → 두 AGA 프로파일 구동이 <b>0.78→0.98 / 0.88→0.64로 재층화</b>(하류 DKK1만 높은 쪽을 낮춤). 헤드라인=정성→보정 구동 변화. <b>정직:</b> 개인결과 최종보정은 여전히 paired IPD 필요.</p>
|
||
<div id="val-ode-headline" class="val-headline"></div>
|
||
<div class="val-chart" style="height:280px;margin-top:10px"><canvas id="chart-val-ode"></canvas></div>
|
||
</section>
|
||
<section class="panel glass-panel val-wide val-credible">
|
||
<div class="val-cred-head"><span class="val-cred-tag">신뢰성 ⑥</span>
|
||
<h3>매핑 보정 (트랙 C, 무비용) — 정성 매핑을 데이터에 정박</h3></div>
|
||
<p class="val-cap">ODE 개인화의 정성 매핑을 보유 데이터로 보정. <b>GWAS</b>(FinnGen AA/AGA + Yap2018 UKB MPB로 AR/EDA2R X연관 보강)로 <b>어떤 마커가 질환을 구동하는지</b>(중요도), <b>약물 섭동</b>(DHT→DP·JAK-i→AA)으로 <b>개입/구동의 크기</b>를 실측 정박. <b>정직:</b> 개인 baseline→개인결과의 최종 보정은 여전히 paired IPD 필요 — 이건 매핑의 방향·중요도·크기를 데이터에 묶는 <b>부분 보정</b>.</p>
|
||
<div class="val-land-grid">
|
||
<div><div class="val-chart" style="height:280px"><canvas id="chart-val-calib-gwas"></canvas></div></div>
|
||
<div><div class="val-chart" style="height:280px"><canvas id="chart-val-calib-perturb"></canvas></div></div>
|
||
</div>
|
||
</section>
|
||
<section class="panel glass-panel val-wide val-credible">
|
||
<div class="val-cred-head"><span class="val-cred-tag">신뢰성 ⑦</span>
|
||
<h3>IPD 분석 하니스 — 사전등록 파이프라인 (합성 dry-run)</h3></div>
|
||
<div class="ipd-warn">⚠ <b>합성(SYNTHETIC) dry-run</b> — 실제 환자 데이터 아님. 코드가 작동함을 보일 뿐, 트윈이 실제 환자에서 통함을 보이지 않음. 실제 IPD는 Vivli(바리시티닙)/Pfizer(리틀레시티닙) 통제접근(승인 3–6개월·IRB·DUA) 필요.</div>
|
||
<p class="val-cap">IPD 도착 시 즉시 돌릴 사전등록 분석을 합성 코호트(실측 집계+UQ 분산, 반응자 혼합·방문잡음)로 검증. <b>정직한 미리보기</b>: 개인 수준에선 개인화 이득이 <b>+3.4%·95%CI 0 포함→불확정</b>(시험암 +40%와 대조). 개인 잡음·희소 방문이 개인 예측을 어렵게 함 → <b>진짜 검증은 실제 IPD로만</b>. (load_ipd()로 즉시 연결)</p>
|
||
<div id="val-ipd-headline" class="val-headline"></div>
|
||
<div id="val-ipd-verdict" class="ipd-verdict"></div>
|
||
<div class="val-chart" style="height:240px;margin-top:10px"><canvas id="chart-val-ipd"></canvas></div>
|
||
</section>
|
||
<section class="panel glass-panel val-wide val-credible">
|
||
<div class="val-cred-head"><span class="val-cred-tag">신뢰성 ⑧</span>
|
||
<h3>대조군(비교 기준선) 자격 — V&V40 신뢰성</h3></div>
|
||
<p class="val-cap">트윈을 <b>검증된 비교 기준선</b>으로 쓸 수 있나? 핵심은 점예측이 아니라 <b>불확실성이 정직한가</b>(보정). <b>다단계 보정곡선</b>(50/80/90/95% out-of-sample LOTO)에서 경험적 커버리지가 명목을 재현 — <b>보정오차 0.054</b>(약간 보수적). → <b>치료-타이밍 = 보정된 비교군</b>, 축방향 = 방향 비교군. <b>★무작위 대조군(RCT) 검증</b>(아래): 트윈의 '무치료' 예측이 실제 RCT 위약 arm과 <b>동등(TOST 2/2)</b> → synthetic control 후보. <b>정직:</b> 개인예측·절대정량·신규시너지는 미달; RCT검증은 회고적·대조군 평균(개인변동 아님). (V&V40: COMPARATOR_CREDIBILITY.md)</p>
|
||
<div id="val-comp-headline" class="val-headline"></div>
|
||
<div class="val-land-grid">
|
||
<div><div class="val-chart" style="height:260px"><canvas id="chart-val-comp-cal"></canvas></div></div>
|
||
<div id="val-comp-table" style="font-size:12px;align-self:center"></div>
|
||
</div>
|
||
<div id="val-comp-scarm" style="font-size:12px;margin-top:12px"></div>
|
||
</section>
|
||
<section class="panel glass-panel val-wide val-credible">
|
||
<div class="val-cred-head"><span class="val-cred-tag">신뢰성 ⑨</span>
|
||
<h3>동물실험 대체 경로 — NAM 자격 프로그램 (Phase 0)</h3></div>
|
||
<p class="val-cap">트윈이 <b>쥐 실험을 대체</b>할 수 있나? <b>아니오 — 전체 대체는 불가</b>(신규발견·전신 PK/독성·전임상 안전성은 영구 제외). 그러나 <b>특정 효능 어세이 1개</b>를 좁은 CoU(기전기지 JAK 화합물 AA발모)에서 <b>인체 HFOC + 정량 트윈</b>으로 대체하는 <b>비동물법(NAM)</b> 경로는 실재. 분업: <b>HFOC=효능크기·트윈=동역학</b>. 아래는 <b>Phase 0(건식) 결과</b> — 다년 wet-lab+공인은 미수행. (NAM_QUALIFICATION.md)</p>
|
||
<div id="val-nam" style="font-size:12px"></div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============== TAB 5: PAPERS ============== -->
|
||
<div id="tab-papers" class="tab-content">
|
||
<section class="panel glass-panel full-panel">
|
||
<div class="library-controls">
|
||
<h2>논문 라이브러리 <span class="badge small" id="table-count">0</span></h2>
|
||
<div class="library-filters">
|
||
<input type="text" id="search-input" class="search-input" placeholder="🔍 제목/초록 검색">
|
||
<select id="filter-disease" class="mini-select"><option value="">전체 질환</option></select>
|
||
<select id="filter-year" class="mini-select"><option value="">전체 연도</option></select>
|
||
</div>
|
||
</div>
|
||
<div class="table-wrapper">
|
||
<table class="papers-table">
|
||
<thead><tr>
|
||
<th class="sortable" data-col="pubYear">연도 ↕</th>
|
||
<th>제목 (Title)</th>
|
||
<th class="sortable" data-col="disease">질환 ↕</th>
|
||
<th>표적 단백질 (Targets)</th>
|
||
</tr></thead>
|
||
<tbody id="papers-tbody"><tr><td colspan="4" class="loading-row">로딩 중...</td></tr></tbody>
|
||
</table>
|
||
</div>
|
||
<div class="table-pagination">
|
||
<button id="btn-prev" class="btn-page" disabled>← 이전</button>
|
||
<span id="page-info">1 / 1</span>
|
||
<button id="btn-next" class="btn-page" disabled>다음 →</button>
|
||
</div>
|
||
<div class="newpapers-section">
|
||
<h3>🆕 에이전트가 발굴한 최신 표적 논문 (2023–2026)</h3>
|
||
<div id="newpapers-list" class="newpapers-list"></div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<footer class="app-footer">
|
||
<span>Alopecia Protein Digital Twin · 문헌 226편 + 웹 발굴 · UniProt · AlphaFold DB / ESMFold · scipy ODE</span>
|
||
<span id="prior-art-note"></span>
|
||
</footer>
|
||
</div>
|
||
|
||
<script src="js/twin-engine.js"></script>
|
||
<script src="js/data.js"></script>
|
||
<script src="js/twin.js"></script>
|
||
<script src="js/timeline.js"></script>
|
||
<script src="js/network.js"></script>
|
||
<script src="js/atlas.js"></script>
|
||
<script src="js/graph.js"></script>
|
||
<script src="js/calibrate.js"></script>
|
||
<script src="js/validation.js"></script>
|
||
<script src="js/stats.js"></script>
|
||
<script src="js/library.js"></script>
|
||
<script src="js/main.js"></script>
|
||
</body>
|
||
|
||
</html>
|