Hugging Face's logo

Spaces:
Ning311
/
Sarco-Monitor
Running

App Files Community
Sarco-Monitor
File size: 14,775 Bytes 
ad05511
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>肌少症风险评估与个性化建议系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="{{ url_for('static', path='style.css') }}" rel="stylesheet">
</head>
<body>
    <div class="container-fluid">
        <!-- 导航栏 -->
        <nav class="navbar navbar-expand-lg navbar-dark bg-danger mb-4">
            <div class="container">
                <a class="navbar-brand" href="/">
                    <i class="fas fa-heartbeat me-2"></i>SarcoAdvisor
                </a>
                <!-- 移除导航栏中的语言切换按钮 -->
            </div>
        </nav>

        <div class="container">
            <!-- 标题区域 -->
            <div class="text-center mb-5">
                <h1 class="display-5 fw-bold text-danger lang-zh">肌少症风险评估与个性化建议</h1>
                <h1 class="display-5 fw-bold text-danger lang-en">Sarcopenia Risk Assessment & Personalized Recommendations</h1>
                <p class="lead text-muted lang-zh">基于AI的双模型评估系统，提供精确的风险预测和个性化改善建议</p>
                <p class="lead text-muted lang-en">AI-powered dual-model assessment system for precise risk prediction and personalized improvement recommendations</p>
            </div>

            <!-- 评估表单 -->
            <div id="assessmentSection">
                <div class="card shadow-lg">
                    <div class="card-header bg-danger text-white">
                        <h4 class="mb-0">
                            <i class="fas fa-clipboard-list me-2"></i>
                            <span class="lang-zh">完整评估问卷</span>
                            <span class="lang-en">Complete Assessment Questionnaire</span>
                        </h4>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-info">
                            <h6 class="alert-heading">
                                <i class="fas fa-info-circle me-2"></i>
                                <span class="lang-zh">评估说明</span>
                                <span class="lang-en">Assessment Information</span>
                            </h6>
                            <p class="mb-0 lang-zh">
                                本系统将同时运行SarcoI和SarcoII两个建议模型，为您提供全面的肌少症风险评估和个性化改善建议。
                                请如实填写以下信息，评估过程需要1-3分钟。
                            </p>
                            <p class="mb-0 lang-en">
                                This system will run both SarcoI and SarcoII advisory models simultaneously to provide comprehensive sarcopenia risk assessment and personalized improvement recommendations.
                                Please fill out the following information truthfully. The assessment process takes 1-3 minutes.
                            </p>
                        </div>

                        <form id="unifiedForm">
                            <!-- 基本信息 -->
                            <div class="section-header mb-4">
                                <h5 class="text-danger">
                                    <i class="fas fa-user me-2"></i>
                                    <span class="lang-zh">基本信息</span>
                                    <span class="lang-en">Basic Information</span>
                                </h5>
                                <hr>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="age_years" class="form-label">
                                        <span class="lang-zh">年龄 (岁)</span>
                                        <span class="lang-en">Age (years)</span>
                                        <span class="text-danger">*</span>
                                    </label>
                                    <input type="number" class="form-control" id="age_years" name="age_years" 
                                           min="18" max="120" step="1" required>
                                </div>
                                <div class="col-md-6">
                                    <label for="race_ethnicity" class="form-label">
                                        <span class="lang-zh">种族/民族</span>
                                        <span class="lang-en">Race/Ethnicity</span>
                                        <span class="text-danger">*</span>
                                    </label>
                                    <select class="form-select" id="race_ethnicity" name="race_ethnicity" required>
                                        <option value="">请选择 / Please select</option>
                                        <option value="1">墨西哥裔美国人 / Mexican American</option>
                                        <option value="2">其他西班牙裔 / Other Hispanic</option>
                                        <option value="3">非西班牙裔白人 / Non-Hispanic White</option>
                                        <option value="4">非西班牙裔黑人 / Non-Hispanic Black</option>
                                        <option value="5">其他种族 / Other Race</option>
                                    </select>
                                </div>
                            </div>

                            <!-- 身体测量 -->
                            <div class="section-header mb-4">
                                <h5 class="text-danger">
                                    <i class="fas fa-ruler me-2"></i>
                                    <span class="lang-zh">身体测量</span>
                                    <span class="lang-en">Body Measurements</span>
                                </h5>
                                <hr>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label for="height" class="form-label">
                                        <span class="lang-zh">身高 (cm)</span>
                                        <span class="lang-en">Height (cm)</span>
                                        <span class="text-danger">*</span>
                                    </label>
                                    <input type="number" class="form-control" id="height" name="height" 
                                           min="100" max="250" step="0.1" required>
                                </div>
                                <div class="col-md-4">
                                    <label for="weight" class="form-label">
                                        <span class="lang-zh">体重 (kg)</span>
                                        <span class="lang-en">Weight (kg)</span>
                                        <span class="text-danger">*</span>
                                    </label>
                                    <input type="number" class="form-control" id="weight" name="weight" 
                                           min="30" max="300" step="0.1" required>
                                </div>
                                <div class="col-md-4">
                                    <label for="waist" class="form-label">
                                        <span class="lang-zh">腰围 (cm)</span>
                                        <span class="lang-en">Waist (cm)</span>
                                        <span class="text-danger">*</span>
                                    </label>
                                    <input type="number" class="form-control" id="waist" name="waist" 
                                           min="50" max="200" step="0.1" required>
                                </div>
                            </div>

                            <!-- 计算指标显示 -->
                            <div class="row mb-4">
                                <div class="col-md-6">
                                    <div class="card bg-light">
                                        <div class="card-body text-center">
                                            <h6 class="card-title">BMI</h6>
                                            <h4 class="text-primary" id="bmiDisplay">--</h4>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="card bg-light">
                                        <div class="card-body text-center">
                                            <h6 class="card-title">WWI</h6>
                                            <h4 class="text-primary" id="wwiDisplay">--</h4>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- NHANES体力活动问卷 -->
                            <div id="physicalActivitySection">
                                <!-- 这里会通过JavaScript动态插入体力活动问卷内容 -->
                            </div>

                            <!-- 医疗史 -->
                            <div class="section-header mb-4">
                                <h5 class="text-danger">
                                    <i class="fas fa-notes-medical me-2"></i>
                                    <span class="lang-zh">医疗史</span>
                                    <span class="lang-en">Medical History</span>
                                </h5>
                                <hr>
                            </div>

                            <div class="row mb-4">
                                <div class="col-md-6">
                                    <label for="arthritis" class="form-label">
                                        <span class="lang-zh">是否患有关节炎？</span>
                                        <span class="lang-en">Do you have arthritis?</span>
                                        <span class="text-danger">*</span>
                                    </label>
                                    <select class="form-select" id="arthritis" name="arthritis" required>
                                        <option value="">请选择 / Please select</option>
                                        <option value="0">否 / No</option>
                                        <option value="1">是 / Yes</option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label for="diabetes" class="form-label">
                                        <span class="lang-zh">是否患有糖尿病？</span>
                                        <span class="lang-en">Do you have diabetes?</span>
                                        <span class="text-danger">*</span>
                                    </label>
                                    <select class="form-select" id="diabetes" name="diabetes" required>
                                        <option value="">请选择 / Please select</option>
                                        <option value="0">否 / No</option>
                                        <option value="1">是 / Yes</option>
                                    </select>
                                </div>
                            </div>

                            <!-- 提交按钮 -->
                            <div class="text-center">
                                <button type="submit" class="btn btn-danger btn-lg px-5" id="submitBtn">
                                    <i class="fas fa-chart-line me-2"></i>
                                    <span class="lang-zh">开始双模型评估</span>
                                    <span class="lang-en">Start Dual-Model Assessment</span>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- 加载状态 -->
            <div id="loadingSection">
                <div class="text-center py-5">
                    <div class="spinner-border text-danger" style="width: 3rem; height: 3rem;" role="status">
                        <span class="visually-hidden">评估中...</span>
                    </div>
                    <h4 class="mt-3 text-danger">正在进行双模型AI分析...</h4>
                    <div class="mt-3">
                        <div class="progress mb-2" style="max-width: 500px; margin: 0 auto;">
                            <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" 
                                 style="width: 30%" id="progressBar"></div>
                        </div>
                        <p class="text-muted mb-1" id="statusText">🧠 AI正在分析您的特征数据...</p>
                        <small class="text-info" id="timeText">预计需要1-3分钟</small>
                    </div>
                </div>
            </div>

            <!-- 结果显示区域 -->
            <div id="resultsSection">
                <div id="resultsContent">
                    <!-- 结果内容将通过JavaScript动态插入 -->
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <!-- 语言切换按钮 - 固定在页面底部 -->
    <div class="language-toggle-container" style="position: fixed; bottom: 20px; right: 20px; z-index: 1000;">
        <button class="btn btn-primary btn-sm shadow" onclick="toggleLanguage()"
                style="border-radius: 25px; padding: 8px 16px;">
            <i class="fas fa-globe me-1"></i>
            <span id="langToggleText">English</span>
        </button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <!-- 自定义JS -->
    <script src="{{ url_for('static', path='unified_assessment.js') }}"></script>
</body>
</html>