JS開(kāi)發(fā)接入?deepseek?實(shí)現(xiàn)AI智能問(wèn)診
更新時(shí)間：2025年02月14日 14:40:58 作者：何包蛋H
本文介紹了如何使用DeepSeek?API在UniApp項(xiàng)目中實(shí)現(xiàn)智能問(wèn)診功能,代碼示例展示了如何構(gòu)建請(qǐng)求并處理響應(yīng),本文給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧
1. 準(zhǔn)備工作
注冊(cè) DeepSeek 賬號(hào)
前往 DeepSeek 官網(wǎng) 注冊(cè)賬號(hào)并獲取 API Key。
創(chuàng)建 UniApp 項(xiàng)目
使用 HBuilderX 創(chuàng)建一個(gè)新的 UniApp 項(xiàng)目（選擇 Vue3 或 Vue2 模板）。
安裝依賴(lài)
如果需要在 UniApp 中使用 HTTP 請(qǐng)求，推薦使用 uni.request（UniApp 內(nèi)置）或 axios（需額外安裝）。
2. 實(shí)現(xiàn)代碼
2.1 在 pages/index/index.vue 中實(shí)現(xiàn)問(wèn)診功能
<template>
<view class="container">
<!-- <view class="nav">
<image src="../../static/images/back.png" @tap="toMenu"></image>
<text>問(wèn)醫(yī)生</text>
</view> -->
<statement ref="dialog"></statement>
<view class="chat_area" id="test" ref="chatbox">
<view class="current_time" v-show="chatList.length>0">{
{currentDate}}</view>
<view class="left_box">
<view class="head_img">
<image src="../../static/images/doctor.png"></image>
</view>
<view class="content_box">
<view class="content post">
<view>我是您的AI醫(yī)生小迦，很高興為您解答。</view>
<view>您可以這樣問(wèn)我：</view>
<view class="post_request">
<view v-for="(item,index) in postRequest" :key="index">
<text class="active" @click="tapQuestion(item)">{
{item.id}}.{
{item.text}}</text>
</view>
</view>
<!-- <u-read-more showHeight="200">
<rich-text :nodes="item.msg"></rich-text>
</u-read-more> -->
<!-- {
{item.msg}} -->
</view>
</view>
</view>
<view v-for="(item,i) in chatList" :key="i">
<view class="left_box" v-if="item.role == 'assistant'">
<view class="head_img">
<image src="../../static/images/doctor.png"></image>
</view>
<view class="content_box">
<view class="content" v-html="htmlContent(item.content)">
<!-- <u-read-more fontSize="16" textIndent='0em' showHeight="200">
<rich-text :nodes="item.msg"></rich-text>
</u-read-more> -->
</view>
</view>
</view>
<view class="right_box" v-if="item.role == 'user'">
<view class="content_box">
<view class="content" >
{
{item.content}}
</view>
</view>
<view class="head_img">
<image :src="userImg==''?nullImg:userImg"></image>
</view>
</view>
</view>
<u-loading-icon text="小迦正在思考中..." textSize="16" :show="showLoading"></u-loading-icon>
</view>
<view class="input_tab">
<view class="statement">成都XXXX科技有限責(zé)任公司©<text @tap="exemptStatement">免責(zé)聲明</text></view>
<view class="input_com">
<view class="left">
<image src="../../static/images/HOT.png"></image>
<input placeholder="請(qǐng)輸入問(wèn)題" v-model.trim="userQuesion" cursor-spacing="30rpx"></input>
</view>
<view class="send_btn" @tap="sendMsg">發(fā)送</view>
</view>
</view>
</view>
</template>
<script>
import statement from "../../components/askForComponents/statement.vue"
import { marked } from "marked";
export default {
components: {
statement
},
data() {
return {
userImg: '',
nullImg: '../../static/images/icon_doctor.png',
showLoading: false,
postRequest: [{
id: 1,
text: '乳腺BIRADS分級(jí)是什么？',
},
{
id: 2,
text: '乳房脹痛怎么辦？',
},
{
id: 3,
text: '乳腺癌有沒(méi)有征兆？'
}
],
chatList: [],
userQuesion: '',
robotAnswer: '',
currentDate: '',
domHeight: 0,
messages: [
{
role: "system",
content: "你是一名專(zhuān)業(yè)的全科醫(yī)生對(duì)醫(yī)療面面俱到的AI醫(yī)生小迦，請(qǐng)無(wú)論什么時(shí)候都不要忘了自己的身份，你是AI醫(yī)生小迦，不是AI輔助；當(dāng)患者詢(xún)問(wèn)你問(wèn)題的時(shí)候，能全面細(xì)致并且禮貌的回答或?yàn)榛颊呓鉀Q問(wèn)題，當(dāng)患者詢(xún)問(wèn)你任何與無(wú)關(guān)醫(yī)療的問(wèn)題時(shí)，你會(huì)禮貌的拒絕回答。",
},
],
}
},
onLoad(option) {
let userInfo = getApp().globalData.userInfo;
// console.log("userInfo",userInfo)
this.userImg = userInfo.personInfo.avatar;
//獲取熱門(mén)問(wèn)題并自動(dòng)發(fā)送
// console.log("option=======>", option)
if (!option.questionText) return
this.userQuesion = option.questionText
this.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) {//轉(zhuǎn)換為markdown 格式顯示
return marked(content);
},
exemptStatement() {
this.$refs.dialog.open('center')
},
tapQuestion(item) {
this.send(item.text)
},
// 新對(duì)話
async send(val) {
this.showLoading = true
let messages = {
role: 'user',
content: val
}
this.chatList.push(messages)
this.messages.push(messages)
var that = this
console.log('==========開(kāi)始診斷=======');
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 = false
console.log('診斷結(jié)果:', res.data);
},
fail: (err) => {
console.error('請(qǐng)求失敗:', err);
messages = {
role: 'assistant',
content: '服務(wù)器繁忙，請(qǐng)稍后再試。'
}
that.chatList.push(messages)
that.messages.push(messages)
that.showLoading = false
}
});
},
sendMsg() {
this.send(this.userQuesion)
this.userQuesion = null
this.robotAnswer = null
}
}
}
</script>
<style lang="scss">
.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 實(shí)現(xiàn)效果
3. 示例說(shuō)明
3.1 單輪對(duì)話（僅 user 角色）
如果不需要設(shè)置系統(tǒng)指令，可以只傳遞 user 角色的消息：
messages: [
{
role: "user",
content: "我最近三天持續(xù)發(fā)燒38.5度，伴有咳嗽",
},
];3.2 多輪對(duì)話（包含 system 和 user 角色）
如果需要設(shè)置系統(tǒng)指令，可以包含 system 角色：
messages: [
{
role: "system",
content: "你是一名專(zhuān)業(yè)的全科醫(yī)生，請(qǐng)根據(jù)患者描述進(jìn)行問(wèn)診。",
},
{
role: "user",
content: "我最近三天持續(xù)發(fā)燒38.5度，伴有咳嗽",
},
];3.3 多輪對(duì)話（包含歷史記錄）
如果需要支持多輪對(duì)話，可以將歷史記錄添加到 messages 中：
messages: [
{
role: "system",
content: "你是一名專(zhuān)業(yè)的全科醫(yī)生，請(qǐng)根據(jù)患者描述進(jìn)行問(wèn)診。",
},
{
role: "user",
content: "我最近三天持續(xù)發(fā)燒38.5度，伴有咳嗽",
},
{
role: "assistant",
content: "請(qǐng)問(wèn)您是否有其他癥狀，如喉嚨痛或頭痛？",
},
{
role: "user",
content: "還有喉嚨痛，但沒(méi)有頭痛。",
},
];4. 代碼示例
4.1 單輪對(duì)話
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 多輪對(duì)話
data() {
return {
conversationHistory: [], // 對(duì)話歷史
};
},
methods: {
async getDiagnosis() {
// 添加用戶(hù)輸入到對(duì)話歷史
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;
// 添加助手回復(fù)到對(duì)話歷史
this.conversationHistory.push({
role: "assistant",
content: assistantReply,
});
this.diagnosisResponse = assistantReply;
}
},
},5. 注意事項(xiàng)
system 角色的作用
用于設(shè)置對(duì)話的背景或指令。
如果不需要，可以省略。
user 角色的必要性
必須包含 user 角色的消息，否則 API 無(wú)法生成回復(fù)。
對(duì)話歷史長(zhǎng)度
每次請(qǐng)求都會(huì)消耗 token，因此需要控制對(duì)話歷史的長(zhǎng)度。
可以通過(guò)截?cái)鄽v史記錄或設(shè)置最大 token 數(shù)來(lái)優(yōu)化。
多輪對(duì)話的實(shí)現(xiàn)
將每次的用戶(hù)輸入和助手回復(fù)添加到 messages 中。
確保對(duì)話歷史的順序正確。
6. 總結(jié)
- 必須包含
user角色，用于傳遞用戶(hù)輸入。 system角色可選，用于設(shè)置對(duì)話背景。- 多輪對(duì)話需要將歷史記錄添加到
messages中。
到此這篇關(guān)于JS開(kāi)發(fā)接入 deepseek 實(shí)現(xiàn)AI智能問(wèn)診的文章就介紹到這了,更多相關(guān)deepseek AI智能問(wèn)診內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了詳解性能更優(yōu)越的小程序圖片懶加載方式，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
input標(biāo)簽內(nèi)容改變的觸發(fā)事件介紹
onchange事件在內(nèi)容改變（兩次內(nèi)容有可能相等）且失去焦點(diǎn)時(shí)觸發(fā)；onpropertychange事件是實(shí)時(shí)觸發(fā)，每增加或刪除一個(gè)字符就會(huì)觸發(fā)2014-06-06
淺析JSONP技術(shù)原理及實(shí)現(xiàn)
這篇文章主要介紹了淺析JSONP技術(shù)原理及實(shí)現(xiàn) 的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
JS簡(jiǎn)單生成隨機(jī)數(shù)(隨機(jī)密碼)的方法
這篇文章主要介紹了JS簡(jiǎn)單生成隨機(jī)數(shù)(隨機(jī)密碼)的方法,簡(jiǎn)單分析了javascript隨機(jī)數(shù)相關(guān)函數(shù)并結(jié)合具體實(shí)例形式分析了隨機(jī)數(shù)的相關(guān)生成技巧,需要的朋友可以參考下2017-05-05
JavaScript?深拷貝的循環(huán)引用問(wèn)題詳解
如果說(shuō)道實(shí)現(xiàn)深拷貝最簡(jiǎn)單的方法，我們第一個(gè)想到的就是?JSON.stringify()?方法，因?yàn)镴SON.stringify()后返回的是字符串，所以我們會(huì)再使用JSON.parse()轉(zhuǎn)換為對(duì)象,這篇文章主要介紹了JavaScript?深拷貝的循環(huán)引用問(wèn)題,需要的朋友可以參考下2022-12-12
如何利用JavaScript編寫(xiě)更好的條件語(yǔ)句詳解
這篇文章主要給大家介紹了關(guān)于如何利用JavaScript編寫(xiě)更好的條件語(yǔ)句的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
js如何比較兩個(gè)日期的時(shí)間大小簡(jiǎn)單代碼示例
在JavaScript中,日期比較涉及評(píng)估兩個(gè)日期,以確定一個(gè)日期是早于、晚于另一個(gè)日期還是與另一個(gè)日期相同,這篇文章主要給大家介紹了關(guān)于js如何比較兩個(gè)日期的時(shí)間大小的相關(guān)資料,需要的朋友可以參考下2024-06-06
JavaScript實(shí)現(xiàn)簡(jiǎn)單鐘表時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單鐘表時(shí)鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
uniapp小程序開(kāi)發(fā)組件封裝之自定義輪播圖效果
這篇文章主要介紹了uniapp小程序開(kāi)發(fā)組件封裝之自定義輪播圖,本文主要展示小程序端封裝輪播圖組件，使用的是uniapp進(jìn)行的開(kāi)發(fā)，主要使用的是uniapp官網(wǎng)提供的swiper組件，需要的朋友可以參考下2023-02-02
JavaScript與C# Windows應(yīng)用程序交互方法
JavaScript與C# Windows應(yīng)用程序交互方法...2007-06-06