网站副标题,班级网站建设方案书,浙江平台网站建设找哪家,外贸网站建设如何做呢1. 准备工作 注册 DeepSeek 账号 前往 DeepSeek 官网 注册账号并获取 API Key。 创建 UniApp 项目 使用 HBuilderX 创建一个新的 UniApp 项目#xff08;选择 Vue3 或 Vue2 模板#xff09;。 安装依赖 如果需要在 UniApp 中使用 HTTP 请求#xff0c;推荐使用 uni.requ…
1. 准备工作 注册 DeepSeek 账号 前往 DeepSeek 官网 注册账号并获取 API Key。 创建 UniApp 项目 使用 HBuilderX 创建一个新的 UniApp 项目选择 Vue3 或 Vue2 模板。 安装依赖 如果需要在 UniApp 中使用 HTTP 请求推荐使用 uni.requestUniApp 内置或 axios需额外安装。
2. 实现代码
2.1 在 pages/index/index.vue 中实现问诊功能
templateview classcontainer!-- view classnavimage src../../static/images/back.png taptoMenu/imagetext问医生/text/view --statement refdialog/statementview classchat_area idtest refchatboxview classcurrent_time v-showchatList.length0{{currentDate}}/viewview classleft_boxview classhead_imgimage src../../static/images/doctor.png/image/viewview classcontent_boxview classcontent postview我是您的AI医生小迦很高兴为您解答。/viewview您可以这样问我/viewview classpost_requestview v-for(item,index) in postRequest :keyindextext classactive clicktapQuestion(item){{item.id}}.{{item.text}}/text/view/view!-- u-read-more showHeight200rich-text :nodesitem.msg/rich-text/u-read-more --!-- {{item.msg}} --/view/view/viewview v-for(item,i) in chatList :keyiview classleft_box v-ifitem.role assistantview classhead_imgimage src../../static/images/doctor.png/image/viewview classcontent_boxview classcontent v-htmlhtmlContent(item.content)!-- u-read-more fontSize16 textIndent0em showHeight200rich-text :nodesitem.msg/rich-text/u-read-more --/view/view/viewview classright_box v-ifitem.role userview classcontent_boxview classcontent {{item.content}}/view/viewview classhead_imgimage :srcuserImg?nullImg:userImg/image/view/view/viewu-loading-icon text小迦正在思考中... textSize16 :showshowLoading/u-loading-icon/viewview classinput_tabview classstatement成都XXXX科技有限责任公司copytext tapexemptStatement免责声明/text/viewview classinput_comview classleftimage src../../static/images/HOT.png/imageinput placeholder请输入问题 v-model.trimuserQuesion cursor-spacing30rpx/input/viewview classsend_btn tapsendMsg发送/view/view/view/view
/templatescriptimport statement from ../../components/askForComponents/statement.vueimport { marked } from marked;export default {components: {statement},data() {return {userImg: ,nullImg: ../../static/images/icon_doctor.png,showLoading: false,postRequest: [{id: 1,text: 乳腺BIRADS分级是什么,},{id: 2,text: 乳房胀痛怎么办,},{id: 3,text: 乳腺癌有没有征兆}],chatList: [],userQuesion: ,robotAnswer: ,currentDate: ,domHeight: 0,messages: [{role: system,content: 你是一名专业的全科医生对医疗面面俱到的AI医生小迦请无论什么时候都不要忘了自己的身份你是AI医生小迦不是AI辅助当患者询问你问题的时候能全面细致并且礼貌的回答或为患者解决问题当患者询问你任何与无关医疗的问题时你会礼貌的拒绝回答。,},],}},onLoad(option) {let userInfo getApp().globalData.userInfo;// console.log(userInfo,userInfo)this.userImg userInfo.personInfo.avatar;//获取热门问题并自动发送// console.log(option, option)if (!option.questionText) returnthis.userQuesion option.questionTextthis.sendMsg()},watch: {chatList.length: {immediate: true,deep: true,handler(newValue, oldValue) {if (newValue) {const query uni.createSelectorQuery().in(this)query.select(#test).boundingClientRect(data {// console.log(data, data)this.domHeight data.height}).exec()}}},domHeight(newVal, oldVal) {if (newVal) {uni.pageScrollTo({scrollTop: this.domHeight,duration: 100})}}},mounted() {this.$refs.dialog.open(center)let myDate new Date()this.currentDate (myDate.getHours() ).padStart(2, 0) : (myDate.getMinutes() ).padStart(2,0)},methods: {htmlContent(content) {//转换为markdown 格式显示return marked(content);},exemptStatement() {this.$refs.dialog.open(center)},tapQuestion(item) {this.send(item.text)},// 新对话async send(val) {this.showLoading truelet messages {role: user,content: val}this.chatList.push(messages)this.messages.push(messages)var that thisconsole.log(开始诊断);await uni.request({url: https://api.deepseek.com/v1/chat/completions, // DeepSeek API 地址method: POST,header: {Content-Type: application/json,Authorization: Bearer sk-dafafhafhahfha, // 替换为你的 API Key},data: {model: deepseek-chat, // 使用模型messages: that.messages},success: (res) {messages {role: assistant,content: res.data.choices[0].message.content}that.chatList.push(messages)that.messages.push(messages)that.showLoading falseconsole.log(诊断结果:, res.data);},fail: (err) {console.error(请求失败:, err);messages {role: assistant,content: 服务器繁忙请稍后再试。}that.chatList.push(messages)that.messages.push(messages)that.showLoading false}});},sendMsg() {this.send(this.userQuesion)this.userQuesion nullthis.robotAnswer null}}}
/scriptstyle langscss.container {padding: 28rpx;}.nav {height: 80rpx;width: 100%;background-color: #ffffff;display: flex;align-items: center;position: fixed;top: 0;left: 0;z-index: 999;image {margin: 0 20rpx;width: 40rpx;height: 40rpx;}text {color: #838383;font-size: 40rpx;}}.chat_area {padding-bottom: 200rpx;// padding-top: 60rpx;.current_time {display: flex;justify-content: center;font-size: 20rpx;color: #9d9d9d;}.left_box,.right_box {display: flex;.head_img {width: 90rpx;height: 90rpx;margin: 20rpx 0;image {width: 90rpx;height: 90rpx;border-radius: 50%;}}.content_box {margin: 20rpx;color: #5a5a5a;background-color: #e5e5e5;padding: 20rpx;border-radius: 8rpx;.post {}.content {text-align: justify;font-size: 30rpx;max-width: 460rpx;white-space: normal;word-wrap: break-word;.post_request {// text-indent: 2em;color: #996699;display: flex;flex-direction: column;.active:active {width: 100%;background-color: #FFFFFF;opacity: 0.6;}}}}}.right_box {display: flex;justify-content: flex-end;}.right_box.content_box {background-color: #1b1263;color: #FFFFFF;}}.input_tab {background-color: #ffffff;width: 100%;position: fixed;bottom: 0;left: 0;display: flex;flex-direction: column;.statement {margin: 0 auto;font-size: 20rpx;color: #838383;text {color: #1b1263;text-decoration: underline;}}.input_com {display: flex;justify-content: space-between;padding: 20rpx;margin: 20rpx;.left {width: 500rpx;max-width: 500rpx;border: 2rpx solid #e3e3e3;display: flex;align-items: center;image {width: 20rpx;height: 20rpx;margin: 0 20rpx;}input {width: 100%;font-size: 24rpx;}}.send_btn {padding: 20rpx 40rpx;color: #FFFFFF;border-radius: 8rpx;background-color: #1b1263;}}}
/style 2.2 实现效果 3. 示例说明
3.1 单轮对话仅 user 角色
如果不需要设置系统指令可以只传递 user 角色的消息
messages: [{role: user,content: 我最近三天持续发烧38.5度伴有咳嗽,},
];
3.2 多轮对话包含 system 和 user 角色
如果需要设置系统指令可以包含 system 角色
messages: [{role: system,content: 你是一名专业的全科医生请根据患者描述进行问诊。,},{role: user,content: 我最近三天持续发烧38.5度伴有咳嗽,},
];
3.3 多轮对话包含历史记录
如果需要支持多轮对话可以将历史记录添加到 messages 中
messages: [{role: system,content: 你是一名专业的全科医生请根据患者描述进行问诊。,},{role: user,content: 我最近三天持续发烧38.5度伴有咳嗽,},{role: assistant,content: 请问您是否有其他症状如喉咙痛或头痛,},{role: user,content: 还有喉咙痛但没有头痛。,},
]; 4. 代码示例
4.1 单轮对话
methods: {async getDiagnosis() {const response await uni.request({url: https://api.deepseek.com/v1/chat/completions,method: POST,header: {Content-Type: application/json,Authorization: Bearer your_api_key_here,},data: {model: medical-model-1.0,messages: [{role: user,content: this.userInput,},],},});if (response.statusCode 200) {this.diagnosisResponse response.data.choices[0].message.content;}},
},
4.2 多轮对话
data() {return {conversationHistory: [], // 对话历史};
},
methods: {async getDiagnosis() {// 添加用户输入到对话历史this.conversationHistory.push({role: user,content: this.userInput,});const response await uni.request({url: https://api.deepseek.com/v1/chat/completions,method: POST,header: {Content-Type: application/json,Authorization: Bearer your_api_key_here,},data: {model: medical-model-1.0,messages: this.conversationHistory,},});if (response.statusCode 200) {const assistantReply response.data.choices[0].message.content;// 添加助手回复到对话历史this.conversationHistory.push({role: assistant,content: assistantReply,});this.diagnosisResponse assistantReply;}},
}, 5. 注意事项 system 角色的作用 用于设置对话的背景或指令。 如果不需要可以省略。 user 角色的必要性 必须包含 user 角色的消息否则 API 无法生成回复。 对话历史长度 每次请求都会消耗 token因此需要控制对话历史的长度。 可以通过截断历史记录或设置最大 token 数来优化。 多轮对话的实现 将每次的用户输入和助手回复添加到 messages 中。 确保对话历史的顺序正确。 6. 总结 必须包含 user 角色用于传递用户输入。 system 角色可选用于设置对话背景。 多轮对话需要将历史记录添加到 messages 中。
