Mu-ty.github.io/chat.html at main · Ling-WeiCheng/Mu-ty.github.io · GitHub

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
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.4.0/fonts/remixicon.css" rel="stylesheet">
    <title>AI体质解析 - 云苓智体</title>
    <style>
        .chat__container {
            max-width: 800px;
            margin: 0 auto;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .chat__messages {
            height: 500px;
            overflow-y: auto;
            padding: 20px;
        }

        .chat__message {
            margin-bottom: 15px;
            padding: 12px 16px;
            border-radius: 8px;
            max-width: 80%;
            line-height: 1.5;
        }

        .chat__message--user {
            background: var(--primary-color);
            color: white;
            margin-left: auto;
        }

        .chat__message--ai {
            background: var(--primary-color-light);
            color: var(--text-dark);
        }

        .chat__input-area {
            display: flex;
            padding: 15px;
            background: #f8f9fa;
            border-top: 1px solid #eee;
        }

        .chat__input-area input {
            flex: 1;
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-right: 10px;
            font-size: 14px;
        }

        .chat__input-area button {
            padding: 10px 20px;
        }

        .payment-prompt {
            margin: 1rem 0;
            padding: 1rem;
            background: var(--primary-color-light);
            border-radius: 8px;
            text-align: center;
        }

        .payment-button {
            background: var(--secondary-color);
            color: white;
            padding: 0.75rem 1.5rem;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin: 0.75rem 0;
            font-size: 1rem;
            transition: background-color 0.3s;
        }

        .payment-button:hover {
            background: #e67e22;
        }

        .payment-benefits {
            text-align: left;
            list-style: none;
            padding: 0.75rem 0;
            margin: 0;
        }

        .payment-benefits li {
            margin: 0.5rem 0;
            color: var(--text-dark);
            padding-left: 1.5rem;
            position: relative;
        }

        .payment-benefits li:before {
            content: "✓";
            color: var(--primary-color);
            position: absolute;
            left: 0;
        }

        .typing-indicator {
            font-style: italic;
            color: var(--text-light);
            padding: 8px 12px;
            background: #f8f9fa;
            border-radius: 8px;
            display: inline-block;
        }

        .typing-indicator::after {
            content: "...";
            animation: typing 1.5s infinite;
        }

        @keyframes typing {
            0% { content: ""; }
            25% { content: "."; }
            50% { content: ".."; }
            75% { content: "..."; }
        }

        strong {
            color: var(--primary-color-dark);
        }
    </style>
</head>
<body>
    <header style="position: sticky;top:0;z-index: 1000;">
        <nav class="section_container nav_container">
            <div class="nav__logo"><span>云苓智体</span>中医体质AI解析与科学减肥服务平台</div>
            <ul class="nav__links">
                <li class="link"><a href="index.html" target="_blank">主页</a></li>
                <li class="link"><a href="#">平台简介</a></li>
                <li class="link"><a href="chat.html" target="_blank">AI解析</a></li>
                <li class="link"><a href="monitor.html" target="_blank">减肥服务</a></li>
                <li class="link"><a href="monitor.html" target="_blank">数据监测</a></li>
                <li class="link"><a href="./products.html" target="_blank">健康产品</a></li>
                <li class="link"><a href="#">关于我们</a></li>
            </ul>
            <button class="btn">联系我们</button>
        </nav>
    </header>

    <section class="section__container chat_content_container">
        <h2 class="section__header" style="text-align: center; margin-bottom: 2rem;">AI 体质解析对话</h2>
        <div class="chat__container">
            <div class="chat__messages" id="chatMessages">
                <!-- 消息会动态添加到这里 -->
            </div>
            <div class="chat__input-area">
                <input type="text" id="chatInput" placeholder="请在此输入您的情况...">
                <button class="btn" id="sendBtn">发送</button>
            </div>
        </div>
    </section>

    <footer class="footer">
        <div class="section__container footer__container">
            <div class="footer__col">
                <h3>云苓<span>智体</span></h3>
                <p>我们致力于结合传统中医智慧与现代AI技术，为您提供个性化的体质分析和科学减肥方案。</p>
                <p>信赖我们，让我们一同开启您的健康之旅。</p>
            </div>
            <div class="footer__col">
                <h4>关于我们</h4>
                <p><a href="./index.html" target="_blank">主页</a></p>
                <p>平台简介</p>
                <p><a href="./jianfei.html" target="_blank">减肥服务</a></p>
                <p><a href="./monitor.html" target="_blank">数据监测</a></p>
                <p><a href="./products.html" target="_blank">健康产品</a></p>
                <p>联系我们</p>
            </div>
            <div class="footer__col">
                <h4>服务支持</h4>
                <p>常见问题</p>
                <p>隐私政策</p>
                <p>服务条款</p>
                <p>技术支持</p>
            </div>
            <div class="footer__col">
                <h4>联系方式</h4>
                <p><i class="ri-map-pin-2-fill"></i>桂林电子科技大学花江校区</p>
                <p><i class="ri-mail-fill"></i> support@yunlingzhiti.com</p>
                <p><i class="ri-phone-fill"></i> (+86) 400-XXX-XXXX</p>
            </div>
        </div>
        <div class="footer__bar">
            <div class="footer__bar__content">
                <p>© 2025 云苓智体. All rights reserved.</p>
                <div class="footer__socials">
                    <span><i class="ri-instagram-line"></i></span>
                    <span><i class="ri-facebook-fill"></i></span>
                    <span><i class="ri-wechat-fill"></i></span>
                    <span><i class="ri-twitter-fill"></i></span>
                </div>
            </div>
        </div>
    </footer>

    <script>
        const chatMessages = document.getElementById('chatMessages');
        const chatInput = document.getElementById('chatInput');
        const sendBtn = document.getElementById('sendBtn');

        // 添加计数器和付费状态
        let messageCount = 0;
        let isPaidUser = false;

        // AI回复模板
        const aiResponses = {
            greeting: [
                "您好！我是您的中医体质AI助手<span class='ai-name'>云苓</span>。请描述一下您的身体状况，我会为您进行初步分析。",
                "很高兴见到您！我是<span class='ai-name'>云苓</span>，您的专业中医体质顾问。请告诉我您目前的情况。"
            ],
            fatigue: [
                "关于<strong>疲惫</strong>的问题，请告诉我：\n1. 是否整天都感觉疲惫？\n2. 休息后是否能恢复？\n3. 是否伴有以下症状：\n   - 容易出汗\n   - 注意力难以集中\n   - 食欲改变",
                "您提到<strong>疲惫</strong>，能否详细描述：\n1. 什么时候开始的？\n2. 是否影响日常工作和生活？\n3. 休息后是否有改善？"
            ],
            sleep: [
                "关于<strong>睡眠</strong>问题，请问：\n1. 入睡困难还是容易醒？\n2. 是否做梦较多？\n3. 早上起床是否感觉疲惫？",
                "您提到<strong>睡眠</strong>问题，能否告诉我：\n- 大概几点入睡？\n- 睡眠质量如何？\n- 是否有以下情况：\n  ∙ 容易醒\n  ∙ 多梦\n  ∙ 醒后难以入睡"
            ],
            diet: [
                "关于<strong>饮食</strong>习惯，请问：\n1. 饭量是否正常？\n2. 是否容易饿？\n3. 有无特别喜好的口味？",
                "您说到<strong>饮食</strong>情况，能否具体描述：\n- 日常饮食规律吗？\n- 有什么特别的饮食习惯？\n- 消化状况如何？"
            ],
            paywall: [
                "看来您需要更专业的个性化建议。要获取完整的体质分析和定制方案，需要开通付费服务。\n\n我们将为您提供：\n✓ 专业的体质分析报告\n✓ 个性化调理方案\n✓ 一对一营养指导\n✓ 7×24小时咨询服务",
                "您的情况需要更深入的分析。建议开通付费服务，我们将为您提供：\n\n✓ 详细的体质评估\n✓ 个性化养生方案\n✓ 专业营养指导\n✓ 持续跟踪服务"

            ],
            fatigueAnalysis: {
                morning: "早晨疲惫可能与以下因素有关：\n1. 睡眠质量不佳\n2. 作息不规律\n3. 肝气郁滞\n\n初步建议：\n- 调整作息时间\n- 睡前泡脚\n- 避免熬夜",
                afternoon: "下午疲惫常见原因：\n1. 午饭过饱\n2. 阳气下陷\n3. 气血不足\n\n初步建议：\n- 午饭适量\n- 午休15-20分钟\n- 适当运动",
                night: "晚间疲惫分析：\n1. 工作压力\n2. 气血耗损\n3. 阴虚火旺\n\n初步建议：\n- 适度运动\n- 早睡早起\n- 情志调节"
            },
            sleepAnalysis: {
                insomnia: "失眠问题分析：\n1. 心神不宁\n2. 阴虚火旺\n3. 脾胃不和\n\n初步建议：\n- 睡前泡脚\n- 按摩太阳穴\n- 避免刺激性食物",
                lightSleep: "浅睡分析：\n1. 心脾两虚\n2. 肝气郁结\n3. 外界干扰\n\n初步建议：\n- 调节作息\n- 放松心情\n- 改善睡眠环境"
            },
            dietAnalysis: {
                poorAppetite: "食欲不振分析：\n1. 脾胃虚弱\n2. 情志影响\n3. 消化功能减退\n\n初步建议：\n- 少食多餐\n- 清淡易消化\n- 规律进餐",
                overeating: "易饥饿分析：\n1. 胃火旺盛\n2. 脾胃功能亢进\n3. 情绪性进食\n\n初步建议：\n- 控制进食速度\n- 选择粗粮\n- 补充优质蛋白"
            }
        };

        // 添加上下文追踪
        let conversationContext = {
            lastTopic: null,
            details: {},
            analysisProvided: false

            ]

        };

        // 随机获取回复
        function getRandomResponse(category) {
            const responses = aiResponses[category];
            return responses[Math.floor(Math.random() * responses.length)];
        }

        // 判断是否需要付费回复
        function needsPremiumResponse(text) {

            const premiumKeywords = [
                '方案', '建议', '治疗', '怎么办', '开方', '药', '调理',
                '详细', '具体', '怎么做', '如何', '需要什么', '推荐'
            ];
            // 只有在已经提供了初步分析后，才会触发付费
            return conversationContext.analysisProvided &&
                   premiumKeywords.some(keyword => text.includes(keyword));

            const premiumKeywords = ['方案', '建议', '治疗', '怎么办', '开方', '药', '调理'];
            return premiumKeywords.some(keyword => text.includes(keyword));

        }

        // 添加消息到聊天界面
        function addMessageToChat(text, sender) {
            const messageElement = document.createElement('div');
            messageElement.classList.add('chat__message', `chat__message--${sender}`);

            // 处理换行符
            const formattedText = text.replace(/\n/g, '<br>');
            messageElement.innerHTML = formattedText;

            chatMessages.appendChild(messageElement);
            scrollToBottom();
        }

        // 显示AI正在输入的提示
        function showTypingIndicator() {
            const typingIndicator = document.createElement('div');
            typingIndicator.id = 'typingIndicator';
            typingIndicator.classList.add('chat__message', 'chat__message--ai', 'typing-indicator');
            typingIndicator.innerHTML = '云苓正在思考';
            chatMessages.appendChild(typingIndicator);
            scrollToBottom();
        }

        // 移除输入提示
        function removeTypingIndicator() {
            const typingIndicator = document.getElementById('typingIndicator');
            if (typingIndicator) {
                typingIndicator.remove();
            }
        }

        // 添加付费按钮
        function addPaymentButton() {
            const paymentDiv = document.createElement('div');
            paymentDiv.className = 'payment-prompt';
            paymentDiv.innerHTML = `
                <button class="payment-button" onclick="handlePayment()">
                    开通付费服务 (￥99.9/月)
                </button>
                <p class="payment-note">开通后可获得：</p>
                <ul class="payment-benefits">
                    <li>专业的体质分析报告</li>
                    <li>个性化调理方案</li>
                    <li>一对一营养指导</li>
                    <li>7×24小时咨询服务</li>
                </ul>
            `;
            chatMessages.appendChild(paymentDiv);
            scrollToBottom();
        }

        // 处理付费点击
        function handlePayment() {
            alert('即将跳转到支付页面...');
            // isPaidUser = true; // 支付成功后设置为true
        }

        // 处理AI响应
        function handleAIResponse(userMessage) {
            messageCount++;
            let response;

            // 检查是否需要付费回复
            if (messageCount > 5 && !isPaidUser && needsPremiumResponse(userMessage)) {
                response = getRandomResponse('paywall');
                addMessageToChat(response, 'ai');
                addPaymentButton();
                return;
            }


            // 根据上下文和用户输入进行智能回复
            if (conversationContext.lastTopic === 'fatigue' && !conversationContext.analysisProvided) {
                // 分析疲惫具体情况
                if (userMessage.includes('早上') || userMessage.includes('早晨')) {
                    response = aiResponses.fatigueAnalysis.morning;
                } else if (userMessage.includes('下午')) {
                    response = aiResponses.fatigueAnalysis.afternoon;
                } else if (userMessage.includes('晚上')) {
                    response = aiResponses.fatigueAnalysis.night;
                }
                conversationContext.analysisProvided = true;
            } else if (conversationContext.lastTopic === 'sleep' && !conversationContext.analysisProvided) {
                // 分析睡眠问题
                if (userMessage.includes('失眠')) {
                    response = aiResponses.sleepAnalysis.insomnia;
                } else if (userMessage.includes('浅') || userMessage.includes('容易醒')) {
                    response = aiResponses.sleepAnalysis.lightSleep;
                }
                conversationContext.analysisProvided = true;
            } else {
                // 初始对话判断
                if (userMessage.includes("你好") || userMessage.includes("您好")) {
                    response = getRandomResponse('greeting');
                    conversationContext.lastTopic = 'greeting';
                } else if (userMessage.includes("疲惫") || userMessage.includes("累")) {
                    response = getRandomResponse('fatigue');
                    conversationContext.lastTopic = 'fatigue';
                    conversationContext.analysisProvided = false;
                } else if (userMessage.includes("睡眠") || userMessage.includes("失眠")) {
                    response = getRandomResponse('sleep');
                    conversationContext.lastTopic = 'sleep';
                    conversationContext.analysisProvided = false;
                } else if (userMessage.includes("饮食") || userMessage.includes("吃")) {
                    response = getRandomResponse('diet');
                    conversationContext.lastTopic = 'diet';
                    conversationContext.analysisProvided = false;
                } else if (userMessage.includes("方案") || userMessage.includes("建议")) {
                    if (!conversationContext.analysisProvided) {
                        response = "请先告诉我您的具体情况，这样我才能为您提供更准确的建议。";
                    } else {
                        // 如果已经提供了初步分析，这里触发付费提醒
                        response = getRandomResponse('paywall');
                        addMessageToChat(response, 'ai');
                        addPaymentButton();
                        return;
                    }
                } else {
                    response = "请详细描述您的具体情况：\n- 主要不适症状\n- 持续时间\n- 是否影响日常生活\n- 是否已经就医";
                }

            // 根据用户输入选择回复
            if (userMessage.includes("你好") || userMessage.includes("您好")) {
                response = getRandomResponse('greeting');
            } else if (userMessage.includes("疲惫") || userMessage.includes("累")) {
                response = getRandomResponse('fatigue');
            } else if (userMessage.includes("睡眠") || userMessage.includes("失眠")) {
                response = getRandomResponse('sleep');
            } else if (userMessage.includes("饮食") || userMessage.includes("吃")) {
                response = getRandomResponse('diet');
            } else if (userMessage.includes("出汗")) {
                response = "关于<strong>出汗</strong>的问题，请告诉我：\n1. 是活动时出汗多，还是休息时也会出汗？\n2. 是全身出汗还是局部出汗？\n3. 出汗后是否感觉疲惫？";
            } else {
                response = "请详细描述您的具体情况：\n- 主要不适症状\n- 持续时间\n- 是否影响日常生活\n- 是否已经就医";

            }

            addMessageToChat(response, 'ai');
        }

        // 发送消息的函数
        function sendMessage() {
            const messageText = chatInput.value.trim();

            if (messageText !== "") {
                // 添加用户消息到界面
                addMessageToChat(messageText, 'user');

                // 清空输入框并重新获得焦点
                chatInput.value = "";
                chatInput.focus();

                // 显示AI正在输入的提示
                showTypingIndicator();

                // 延迟模拟AI思考和回复
                setTimeout(() => {
                    removeTypingIndicator();
                    handleAIResponse(messageText);
                }, 1000);
            }
        }

        // 滚动到聊天记录底部的函数
        function scrollToBottom() {
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }

        // 事件监听器
        sendBtn.addEventListener('click', sendMessage);
        chatInput.addEventListener('keypress', function(event) {
            if (event.key === 'Enter') {
                event.preventDefault();
                sendMessage();
            }
        });

        // 页面加载完成后自动显示欢迎消息
        document.addEventListener('DOMContentLoaded', function() {
            setTimeout(() => {
                addMessageToChat(getRandomResponse('greeting'), 'ai');
            }, 500);
        });
    </script>
</body>
</html>