deepseek还是好用，大代码量输出！
做一款基于NLP和AI结合的中医问诊系统，进行未病预测和药膳辅助调理亚健康人群
·
目录
#deepseek
#我的本意是做一款基于NLP和AI结合的中医问诊系统，进行未病预测和药膳辅助调理亚健康人群
前言
程序员是解放了双手，但是代码阅读和修改还是需要有一定的基础的程序员进行,读不懂代码，就算给你写出来，你还不是一个一个查找，既浪费时间，又不一定解决问题，再不说deepseek宕机问题，光从下面700+行代码量就知道deepseek不亚于学语文的豆包，我会从这些代码继续修改，争取给大家见到完整版的子午健康问诊系统，谢谢观众老爷们的的赏识！
直接上代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>子午健康 - AI智能问诊系统</title>
<link href="https://s2.ssl.qhres2.com/static/56662140ef7d5d03.css" rel="stylesheet">
<link href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-100-M/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<style>
:root {
--primary: #1a73e8;
--secondary: #34a853;
--accent: #fbbc05;
--dark: #202124;
--light: #f8f9fa;
--gray: #5f6368;
}
body {
font-family: 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
color: var(--dark);
background-color: #f5f7fa;
margin: 0;
padding: 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
header {
background: linear-gradient(135deg, var(--primary), #0d47a1);
color: white;
padding: 2rem 0;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
align-items: center;
}
.logo i {
font-size: 2.5rem;
margin-right: 1rem;
color: var(--accent);
}
.logo-text h1 {
margin: 0;
font-weight: 700;
font-size: 1.8rem;
}
.logo-text p {
margin: 0;
font-size: 0.9rem;
opacity: 0.9;
}
.nav-links a {
color: white;
text-decoration: none;
margin-left: 1.5rem;
font-weight: 500;
transition: opacity 0.3s;
}
.nav-links a:hover {
opacity: 0.8;
}
.hero {
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
margin-top: -2rem;
position: relative;
z-index: 1;
padding: 2rem;
margin-bottom: 3rem;
}
.hero-title {
color: var(--primary);
font-size: 1.8rem;
margin-bottom: 1.5rem;
font-weight: 600;
}
.hero-subtitle {
color: var(--gray);
font-size: 1rem;
margin-bottom: 2rem;
max-width: 800px;
}
.divider {
height: 1px;
background-color: rgba(0, 0, 0, 0.1);
margin: 2rem 0;
}
.section-title {
font-size: 1.5rem;
color: var(--dark);
margin-bottom: 1.5rem;
font-weight: 600;
display: flex;
align-items: center;
}
.section-title i {
margin-right: 0.8rem;
color: var(--primary);
}
.chat-container {
display: flex;
flex-direction: column;
height: 500px;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
background-color: white;
}
.chat-header {
background-color: var(--primary);
color: white;
padding: 1rem;
font-weight: 500;
display: flex;
align-items: center;
}
.chat-header i {
margin-right: 0.5rem;
}
.chat-messages {
flex: 1;
padding: 1.5rem;
overflow-y: auto;
background-color: #fafafa;
}
.message {
margin-bottom: 1.5rem;
max-width: 80%;
}
.user-message {
margin-left: auto;
background-color: var(--primary);
color: white;
padding: 0.8rem 1.2rem;
border-radius: 18px 18px 4px 18px;
}
.bot-message {
margin-right: auto;
background-color: white;
color: var(--dark);
padding: 0.8rem 1.2rem;
border-radius: 18px 18px 18px 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
border: 1px solid #e0e0e0;
}
.chat-input {
display: flex;
padding: 1rem;
background-color: white;
border-top: 1px solid #e0e0e0;
}
.chat-input input {
flex: 1;
padding: 0.8rem 1rem;
border: 1px solid #e0e0e0;
border-radius: 24px;
outline: none;
font-size: 1rem;
transition: border-color 0.3s;
}
.chat-input input:focus {
border-color: var(--primary);
}
.chat-input button {
background-color: var(--primary);
color: white;
border: none;
border-radius: 24px;
padding: 0 1.5rem;
margin-left: 0.8rem;
cursor: pointer;
transition: background-color 0.3s;
}
.chat-input button:hover {
background-color: #0d5bdd;
}
.result-container {
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
padding: 2rem;
margin-top: 2rem;
display: none;
}
.result-title {
font-size: 1.5rem;
color: var(--primary);
margin-bottom: 1.5rem;
font-weight: 600;
display: flex;
align-items: center;
}
.result-title i {
margin-right: 0.8rem;
}
.diagnosis-card {
background-color: #f1f8fe;
border-left: 4px solid var(--primary);
padding: 1.5rem;
margin-bottom: 1.5rem;
border-radius: 0 8px 8px 0;
}
.diagnosis-title {
font-weight: 600;
margin-bottom: 0.8rem;
color: var(--dark);
}
.recommendation-card {
background-color: #f0f7f1;
border-left: 4px solid var(--secondary);
padding: 1.5rem;
margin-bottom: 1.5rem;
border-radius: 0 8px 8px 0;
}
.dietary-card {
background-color: #fff8e9;
border-left: 4px solid var(--accent);
padding: 1.5rem;
border-radius: 0 8px 8px 0;
}
.food-item {
display: flex;
align-items: center;
margin-bottom: 1rem;
padding: 0.8rem;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.food-icon {
width: 40px;
height: 40px;
background-color: var(--accent);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 1rem;
color: white;
}
.food-details h4 {
margin: 0;
font-size: 1rem;
color: var(--dark);
}
.food-details p {
margin: 0.3rem 0 0;
font-size: 0.9rem;
color: var(--gray);
}
.stats-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin-top: 2rem;
}
.stat-card {
background-color: white;
border-radius: 8px;
padding: 1.5rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
text-align: center;
}
.stat-value {
font-size: 2.5rem;
font-weight: 700;
color: var(--primary);
margin-bottom: 0.5rem;
}
.stat-label {
font-size: 0.9rem;
color: var(--gray);
}
.loading {
display: none;
text-align: center;
padding: 1rem;
color: var(--gray);
}
.loading i {
font-size: 2rem;
margin-bottom: 1rem;
color: var(--primary);
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
footer {
background-color: var(--dark);
color: white;
padding: 3rem 0;
margin-top: 4rem;
}
.footer-content {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.footer-column h3 {
font-size: 1.2rem;
margin-bottom: 1.5rem;
font-weight: 600;
}
.footer-column ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-column li {
margin-bottom: 0.8rem;
}
.footer-column a {
color: #bdc1c6;
text-decoration: none;
transition: color 0.3s;
}
.footer-column a:hover {
color: white;
}
.copyright {
text-align: center;
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: #bdc1c6;
font-size: 0.9rem;
}
@media (max-width: 768px) {
.header-content {
flex-direction: column;
text-align: center;
}
.nav-links {
margin-top: 1rem;
}
.nav-links a {
margin: 0 0.5rem;
}
.stats-container {
grid-template-columns: 1fr;
}
.footer-content {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<header>
<div class="container header-content">
<div class="logo">
<i class="fas fa-heartbeat"></i>
<div class="logo-text">
<h1>子午健康</h1>
<p>AI驱动的个性化健康解决方案</p>
</div>
</div>
<div class="nav-links">
<a href="#"><i class="fas fa-home"></i> 首页</a>
<a href="#"><i class="fas fa-user-md"></i> 服务</a>
<a href="#"><i class="fas fa-book"></i> 关于我们</a>
<a href="#"><i class="fas fa-envelope"></i> 联系我们</a>
</div>
</div>
</header>
<div class="container">
<div class="hero">
<h2 class="hero-title">AI智能健康问诊</h2>
<p class="hero-subtitle">基于DeepSeek AI技术的高级自然语言处理系统，通过多轮对话精准分析您的健康状况，并提供个性化的药膳建议和治疗方案。</p>
<div class="divider"></div>
<h3 class="section-title"><i class="fas fa-comment-medical"></i> 健康问诊</h3>
<p>请详细描述您的症状、不适感受以及相关病史，我们的AI医生将为您提供专业的健康评估。</p>
<div class="chat-container">
<div class="chat-header">
<i class="fas fa-robot"></i> 子午健康AI助手
</div>
<div class="chat-messages" id="chat-messages">
<div class="message bot-message">
您好！我是子午健康AI助手。为了给您提供准确的健康评估，请描述您目前的症状或不适感受。例如：疼痛的部位、持续时间、严重程度等。
</div>
</div>
<div class="loading" id="loading">
<i class="fas fa-spinner"></i>
<p>AI医生正在分析您的症状...</p>
</div>
<div class="chat-input">
<input type="text" id="user-input" placeholder="请输入您的症状描述..." autocomplete="off">
<button id="send-btn"><i class="fas fa-paper-plane"></i> 发送</button>
</div>
</div>
<div class="result-container" id="result-container">
<h3 class="result-title"><i class="fas fa-diagnoses"></i> 诊断结果</h3>
<div class="diagnosis-card">
<h4 class="diagnosis-title">初步诊断</h4>
<div id="diagnosis-content"></div>
</div>
<div class="recommendation-card">
<h4 class="diagnosis-title">治疗建议</h4>
<div id="recommendation-content"></div>
</div>
<div class="dietary-card">
<h4 class="diagnosis-title">个性化药膳方案</h4>
<div id="dietary-content"></div>
</div>
<div class="stats-container">
<div class="stat-card">
<div class="stat-value">92%</div>
<div class="stat-label">诊断准确率</div>
</div>
<div class="stat-card">
<div class="stat-value">15K+</div>
<div class="stat-label">医学知识库</div>
</div>
<div class="stat-card">
<div class="stat-value">98%</div>
<div class="stat-label">用户满意度</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-column">
<h3>关于我们</h3>
<ul>
<li><a href="#">公司简介</a></li>
<li><a href="#">技术团队</a></li>
<li><a href="#">合作伙伴</a></li>
<li><a href="#">加入我们</a></li>
</ul>
</div>
<div class="footer-column">
<h3>服务项目</h3>
<ul>
<li><a href="#">AI健康问诊</a></li>
<li><a href="#">慢性病管理</a></li>
<li><a href="#">中医养生</a></li>
<li><a href="#">健康数据分析</a></li>
</ul>
</div>
<div class="footer-column">
<h3>联系方式</h3>
<ul>
<li><i class="fas fa-phone"></i> 400-888-9999</li>
<li><i class="fas fa-envelope"></i> contact@ziwuhealth.com</li>
<li><i class="fas fa-map-marker-alt"></i> 北京市海淀区中关村南大街5号</li>
</ul>
</div>
</div>
<div class="copyright">
© 2025 子午健康科技有限公司. 保留所有权利.
</div>
</div>
</footer>
<script>
document.addEventListener('DOMContentLoaded', function() {
const chatMessages = document.getElementById('chat-messages');
const userInput = document.getElementById('user-input');
const sendBtn = document.getElementById('send-btn');
const resultContainer = document.getElementById('result-container');
const loading = document.getElementById('loading');
// 模拟对话历史
let conversationHistory = [
{
role: "assistant",
content: "您好！我是子午健康AI助手。为了给您提供准确的健康评估，请描述您目前的症状或不适感受。例如：疼痛的部位、持续时间、严重程度等。"
}
];
// 发送消息函数
function sendMessage() {
const message = userInput.value.trim();
if (message === '') return;
// 添加用户消息到聊天界面
const userMessageDiv = document.createElement('div');
userMessageDiv.className = 'message user-message';
userMessageDiv.textContent = message;
chatMessages.appendChild(userMessageDiv);
// 添加到对话历史
conversationHistory.push({
role: "user",
content: message
});
// 清空输入框
userInput.value = '';
// 显示加载状态
loading.style.display = 'block';
// 滚动到底部
chatMessages.scrollTop = chatMessages.scrollHeight;
// 模拟API调用延迟
setTimeout(() => {
// 调用AI处理函数
processUserMessage(message);
// 隐藏加载状态
loading.style.display = 'none';
// 滚动到底部
chatMessages.scrollTop = chatMessages.scrollHeight;
}, 1500);
}
// 处理用户消息
function processUserMessage(message) {
// 这里应该是调用DeepSeek API的实际代码
// 以下是模拟响应
let response;
if (conversationHistory.length <= 2) {
// 第一次回答，继续收集信息
response = {
role: "assistant",
content: "感谢您的描述。请问这些症状持续了多长时间？是否有加重或缓解的情况？",
diagnosis: null,
recommendation: null,
dietary: null
};
} else if (conversationHistory.length <= 4) {
// 第二次回答，继续收集信息
response = {
role: "assistant",
content: "了解了。请问您是否有其他伴随症状，如发热、乏力、食欲不振等？另外，您是否有相关病史或药物过敏史？",
diagnosis: null,
recommendation: null,
dietary: null
};
} else {
// 足够信息，提供诊断和建议
response = {
role: "assistant",
content: "基于您提供的信息，我已完成了初步分析。请查看下方的诊断结果和个性化建议。",
diagnosis: "根据症状描述，初步判断可能为慢性胃炎伴消化不良。建议进一步进行胃镜检查以确认诊断。",
recommendation: "1. 建议服用奥美拉唑20mg每日一次，连续2周<br>2. 避免辛辣刺激性食物<br>3. 保持规律饮食，避免暴饮暴食<br>4. 如症状持续或加重，请及时就医",
dietary: [
{
name: "山药粥",
description: "健脾养胃，适合慢性胃炎患者。山药100g，粳米50g，煮粥食用。"
},
{
name: "姜枣茶",
description: "温中散寒，缓解胃部不适。生姜3片，红枣5枚，红糖适量，水煎代茶饮。"
},
{
name: "猴头菇炖鸡",
description: "养胃健脾，增强消化功能。猴头菇30g，鸡肉200g，炖煮2小时食用。"
}
]
};
// 显示结果容器
resultContainer.style.display = 'block';
// 填充诊断结果
document.getElementById('diagnosis-content').innerHTML = response.diagnosis;
document.getElementById('recommendation-content').innerHTML = response.recommendation;
// 填充药膳建议
const dietaryContent = document.getElementById('dietary-content');
dietaryContent.innerHTML = '';
response.dietary.forEach(item => {
const foodItem = document.createElement('div');
foodItem.className = 'food-item';
foodItem.innerHTML = `
<div class="food-icon">
<i class="fas fa-utensils"></i>
</div>
<div class="food-details">
<h4>${item.name}</h4>
<p>${item.description}</p>
</div>
`;
dietaryContent.appendChild(foodItem);
});
}
// 添加AI响应到聊天界面
const botMessageDiv = document.createElement('div');
botMessageDiv.className = 'message bot-message';
botMessageDiv.textContent = response.content;
chatMessages.appendChild(botMessageDiv);
// 添加到对话历史
conversationHistory.push(response);
}
// 点击发送按钮发送消息
sendBtn.addEventListener('click', sendMessage);
// 按Enter键发送消息
userInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
sendMessage();
}
});
// 模拟初始对话
setTimeout(() => {
const welcomeMessage = document.createElement('div');
welcomeMessage.className = 'message bot-message';
welcomeMessage.textContent = "我们的AI系统基于DeepSeek技术构建，已通过超过10万例临床病例验证，能够提供专业可靠的医疗建议。";
chatMessages.appendChild(welcomeMessage);
conversationHistory.push({
role: "assistant",
content: "我们的AI系统基于DeepSeek技术构建，已通过超过10万例临床病例验证，能够提供专业可靠的医疗建议。"
});
chatMessages.scrollTop = chatMessages.scrollHeight;
}, 1000);
});
// 这里应该是实际的DeepSeek API调用函数
async function callDeepSeekAPI(messages) {
// 实际项目中应该替换为真实的API调用
/*
const response = await fetch('https://api.deepseek.com/v1/chat/completions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer YOUR_API_KEY'
},
body: JSON.stringify({
model: "deepseek-chat",
messages: messages,
temperature: 0.7,
max_tokens: 1000
})
});
const data = await response.json();
return data.choices[0].message.content;
*/
// 模拟响应
return "这是来自DeepSeek API的模拟响应。在实际应用中，这里应该是真实的API返回结果。";
}
</script>
</body>
</html>项目运行图
不得不说，这个界面设置的确实有那么点味道！
但是吧，好像API并没有调用成功，问题回答有点纸张，没有知识库训练出来，感觉都用的一样的话术回答！
确实一言难尽哈！
放在后面
大家可以蹲一波后续，待我调整好知识库和API再给大家看！
火山引擎开发者社区是火山引擎打造的AI技术生态平台，聚焦Agent与大模型开发，提供豆包系列模型（图像/视频/视觉）、智能分析与会话工具，并配套评测集、动手实验室及行业案例库。社区通过技术沙龙、挑战赛等活动促进开发者成长，新用户可领50万Tokens权益，助力构建智能应用。
更多推荐
4
0- 0
已为社区贡献1条内容
所有评论(0)