-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
159 lines (149 loc) · 6.72 KB
/
Copy pathindex.html
File metadata and controls
159 lines (149 loc) · 6.72 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!doctype html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Anivance AI Biochip Workbench</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<!-- repo-snapshot:start -->
<section class="repo-snapshot repo-snapshot--chip" aria-label="專案辨識預覽：Anivance AI" style="--snap-bg: #0d1715; --snap-bg-2: #263a34; --snap-ink: #f1f7ef; --snap-muted: #aab8b2; --snap-accent: #9be35b; --snap-accent-2: #42d9c8;">
<div class="snapshot-copy">
<p class="snapshot-kicker">Biochip intelligence</p>
<div class="snapshot-name">Anivance AI</div>
<p class="snapshot-tagline">把仿生晶片訊號、實驗批次與模型判讀，凝縮成具有實驗室感的分析工作台。</p>
<div class="snapshot-chips" aria-label="核心辨識元素">
<span>晶片訊號</span>
<span>模型判讀</span>
<span>批次追蹤</span>
</div>
</div>
<div class="snapshot-scene" aria-hidden="true">
<div class="snapshot-device">
<div class="snapshot-device-head">
<span>Assay grid</span>
<strong>12 通道訊號比對</strong>
</div>
<div class="snapshot-visual snapshot-visual--chip">
<span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
<div class="snapshot-data-row">
<span><b>88</b>可信度</span>
<span><b>12</b>通道</span>
<span><b>4</b>批次</span>
</div>
</div>
</div>
</section>
<!-- repo-snapshot:end -->
<div class="demo-boundary" role="note">
<strong>Prototype</strong>
<span>靜態互動原型；畫面資料、評分、AI、金流、醫療、法律與安全流程皆為示範，不代表原團隊官方產品或實際服務。</span>
</div>
<main class="app-shell">
<header class="topbar">
<div class="title-block">
<p class="eyebrow">112 FITI · 第一梯次 · 創業傑出獎</p>
<h1>Anivance AI 仿生晶片分析工作台</h1>
</div>
<a class="source-pill" href="https://fiti.stpi.niar.org.tw/global/17a277c2bf944081b748c9c8f5261beb" target="_blank" rel="noreferrer">
<span>比賽來源</span>
<strong>FITI 112 年第一梯次決選暨頒獎典禮</strong>
</a>
</header>
<section class="summary-grid" aria-label="實驗總覽">
<article class="metric">
<span>分析批次</span>
<strong id="metric-batches">3</strong>
<small>2 筆進行中，1 筆需複核</small>
</article>
<article class="metric warm">
<span>AI 風險分數</span>
<strong id="metric-risk">42</strong>
<small id="metric-risk-copy">中度反應，建議追加屏障檢測</small>
</article>
<article class="metric">
<span>影像品質</span>
<strong id="metric-quality">94%</strong>
<small>自動篩掉 6% 低品質視野</small>
</article>
<article class="metric dark">
<span>報告進度</span>
<strong id="metric-report">68%</strong>
<small>摘要、端點與圖表已同步</small>
</article>
</section>
<section class="workspace">
<aside class="panel batch-panel" aria-label="實驗批次">
<div class="panel-head">
<p>實驗批次</p>
<button class="ghost-button" id="queue-button" type="button">排程</button>
</div>
<div class="batch-list" id="batch-list"></div>
</aside>
<section class="panel chip-panel" aria-label="晶片讀值">
<div class="panel-head">
<p>仿生晶片讀值</p>
<div class="segmented" aria-label="分析模式">
<button class="segment active" type="button" data-mode="toxicity">毒性</button>
<button class="segment" type="button" data-mode="barrier">屏障</button>
<button class="segment" type="button" data-mode="inflammation">發炎</button>
</div>
</div>
<div class="chip-stage">
<canvas id="chip-canvas" width="620" height="360" aria-label="仿生晶片微流道示意"></canvas>
<div class="chip-caption">
<strong id="chip-title">肺泡氣霧暴露晶片</strong>
<span id="chip-subtitle">動態氣霧呼吸系統 · 3D 仿生組織</span>
</div>
</div>
<div class="dose-row">
<label>
<span>暴露劑量</span>
<input id="dose-slider" type="range" min="5" max="90" value="35" />
</label>
<strong id="dose-value">35%</strong>
<button id="analyze-button" type="button">重新分析</button>
</div>
<div class="readout-grid" id="readout-grid"></div>
</section>
<aside class="panel ai-panel" aria-label="AI 判讀">
<div class="panel-head">
<p>AI 判讀</p>
<span class="live-dot">模型更新中</span>
</div>
<div class="risk-card" id="risk-card"></div>
<div class="recommendations" id="recommendations"></div>
<details class="source-box">
<summary>獎項來源</summary>
<p>FITI 創新創業激勵計畫，112 年第一梯次決選暨頒獎典禮，創業傑出獎，Anivance AI。</p>
</details>
</aside>
</section>
<section class="lower-grid">
<article class="panel compare-panel">
<div class="panel-head">
<p>候選條件比較</p>
<button class="ghost-button" id="promote-button" type="button">加入候選</button>
</div>
<div class="candidate-list" id="candidate-list"></div>
</article>
<article class="panel report-panel">
<div class="panel-head">
<p>報告摘要</p>
<button class="ghost-button" id="report-button" type="button">產生摘要</button>
</div>
<div class="endpoint-controls" aria-label="報告端點">
<label><input type="checkbox" value="存活率" checked /> 存活率</label>
<label><input type="checkbox" value="屏障完整性" checked /> 屏障完整性</label>
<label><input type="checkbox" value="發炎反應" checked /> 發炎反應</label>
<label><input type="checkbox" value="影像品質" checked /> 影像品質</label>
</div>
<div class="report-output" id="report-output"></div>
</article>
</section>
</main>
<script src="app.js"></script>
</body>
</html>