8 changed files with 397 additions and 732 deletions
-
11src/views/AIAssistant/AIDigitalHuman/index.vue
-
294src/views/AIAssistant/AIIntelligentCoding/aiForm copy.vue
-
155src/views/AIAssistant/AIIntelligentCoding/aiForm.vue
-
262src/views/AIAssistant/AIIntelligentCoding/index.vue
-
35src/views/AIAssistant/AIknowledgeGraph/index.vue
-
7src/views/collectReorganizi/collectionLibrary/module/uploadOriginal/bigUpload.vue
-
185src/views/collectReorganizi/collectionLibrary/module/uploadOriginal/index.vue
-
180src/views/components/echarts/graph.vue
@ -1,294 +0,0 @@ |
|||
<template> |
|||
<el-row :gutter="12" class="demo-radius"> |
|||
<div |
|||
class="radius" |
|||
:style="{ |
|||
borderRadius: 'base' |
|||
}" |
|||
> |
|||
<div id="messgebox" ref="scrollDiv" class="messge"> |
|||
<ul> |
|||
<li |
|||
v-for="(item, index) in message" |
|||
:key="index" |
|||
style="list-style-type:none;" |
|||
> |
|||
<div |
|||
v-if="item.user == username" |
|||
class="mymsginfo" |
|||
style="float:right" |
|||
> |
|||
<div> |
|||
<el-avatar |
|||
style="float: right;margin-right: 30px;background: #01bd7e;" |
|||
> |
|||
<!-- {{ item.user.substring(0, 2) }} --> |
|||
<img :alt="item.user.substring(0, 2)" :src="userphoto"> |
|||
</el-avatar> |
|||
</div> |
|||
<div |
|||
style="float: right;margin-right: 10px;margin-top:10px;width:80%;text-align: right;" |
|||
> |
|||
{{ item.msg }} |
|||
</div> |
|||
</div> |
|||
<div v-else class="chatmsginfo"> |
|||
<div> |
|||
<el-avatar style="float: left;margin-right: 10px;"> |
|||
{{ item.user }} |
|||
</el-avatar> |
|||
</div> |
|||
<div style="float: left;margin-top:10px;width:80%;"> |
|||
<img |
|||
v-if="item.msg == ''" |
|||
alt="loading" |
|||
class="loading" |
|||
src="" |
|||
> |
|||
<MdPreview |
|||
style="margin-top:-20px;" |
|||
:auto-fold-threshold="9999" |
|||
:editor-id="id" |
|||
:model-value="item.msg + item.dot" |
|||
/> |
|||
<!-- {{ item.msg }} --> |
|||
</div> |
|||
</div> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
<div class="inputmsg"> |
|||
<el-form :model="form"> |
|||
<el-form-item> |
|||
<el-avatar |
|||
style="float: left;background: #01bd7e;margin-bottom: -44px;margin-left: 4px;z-index: 999;width: 30px;height: 30px;" |
|||
> |
|||
<img alt="jin" :src="userphoto"> |
|||
</el-avatar> |
|||
<el-input |
|||
id="txt_suiwen" |
|||
v-model="form.desc" |
|||
:prefix-icon="userphoto" |
|||
resize="none" |
|||
autofocus="true" |
|||
:autosize="{ minRows: 1, maxRows: 2 }" |
|||
placeholder="说说你想问点啥....按Enter键可直接发送" |
|||
type="textarea" |
|||
@keydown.enter.native.prevent="startStreaming($event)" |
|||
/> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
</el-row> |
|||
</template> |
|||
<script setup> |
|||
// import { MdPreview, MdCatalog } from 'md-editor-v3' |
|||
// import 'md-editor-v3/lib/preview.css' |
|||
// const id = 'preview-only' |
|||
</script> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
form: { |
|||
desc: "" |
|||
}, |
|||
message: [], |
|||
username: sessionStorage.name, |
|||
userphoto: sessionStorage.photo, |
|||
loadingtype: false, |
|||
controller: null, |
|||
arequestData: { |
|||
model: "qwen2", //"llama3.1", |
|||
messages: [] |
|||
} |
|||
}; |
|||
}, |
|||
mounted() {}, |
|||
methods: { |
|||
scrollToBottom() { |
|||
let elscroll = this.$refs["scrollDiv"]; |
|||
elscroll.scrollTop = elscroll.scrollHeight + 30; |
|||
}, |
|||
clearForm(formName) { |
|||
this.form.desc = ""; |
|||
}, |
|||
async startStreaming(e) { |
|||
if (e.ctrkey && e.keyCode == 13) { |
|||
this.form.desc += "\n"; |
|||
} |
|||
document.getElementById("txt_suiwen").disabled = "true"; |
|||
// 如果已经有一个正在进行的流式请求，则中止它 |
|||
if (this.controller) { |
|||
this.controller.abort(); |
|||
} |
|||
setTimeout(() => { |
|||
this.scrollToBottom(); |
|||
}, 50); |
|||
var mymsg = this.form.desc.trim(); |
|||
if (mymsg.length > 0) { |
|||
this.form.desc = ""; |
|||
this.message.push({ |
|||
user: this.username, |
|||
msg: mymsg |
|||
}); |
|||
this.message.push({ |
|||
user: "GPT", |
|||
msg: "", |
|||
dot: "" |
|||
}); |
|||
// 创建一个新的 AbortController 实例 |
|||
this.controller = new AbortController(); |
|||
const signal = this.controller.signal; |
|||
this.arequestData.messages.push({ role: "user", content: mymsg }); |
|||
try { |
|||
const response = await fetch("http://127.0.0.1:11434/api/chat", { |
|||
method: "POST", |
|||
headers: { |
|||
"Content-Type": "application/json" |
|||
}, |
|||
body: JSON.stringify(this.arequestData), |
|||
signal |
|||
}); |
|||
if (!response.body) { |
|||
this.message[this.message.length - 1].msg = |
|||
"ReadableStream not yet supported in this browser."; |
|||
throw new Error( |
|||
"ReadableStream not yet supported in this browser." |
|||
); |
|||
} |
|||
const reader = response.body.getReader(); |
|||
const decoder = new TextDecoder(); |
|||
let result = ""; |
|||
this.message[this.message.length - 1].dot = "⚪"; |
|||
while (true) { |
|||
const { done, value } = await reader.read(); |
|||
if (done) { |
|||
break; |
|||
} |
|||
result += decoder.decode(value, { stream: true }); |
|||
// 处理流中的每一块数据，这里假设每块数据都是完整的 JSON 对象 |
|||
const jsonChunks = result.split("\n").filter(line => line.trim()); |
|||
//console.log(result) |
|||
for (const chunk of jsonChunks) { |
|||
try { |
|||
const data = JSON.parse(chunk); |
|||
//console.log(data.message.content) |
|||
this.message[this.message.length - 1].msg += |
|||
data.message.content; |
|||
setTimeout(() => { |
|||
this.scrollToBottom(); |
|||
}, 50); |
|||
} catch (e) { |
|||
//this.message[this.message.length-1].msg=e; |
|||
// 处理 JSON 解析错误 |
|||
//console.error('Failed to parse JSON:', e); |
|||
} |
|||
} |
|||
// 清空 result 以便处理下一块数据 |
|||
result = ""; |
|||
} |
|||
} catch (error) { |
|||
if (error.name === "AbortError") { |
|||
console.log("Stream aborted"); |
|||
this.message[this.message.length - 1].msg = "Stream aborted"; |
|||
} else { |
|||
console.error("Streaming error:", error); |
|||
this.message[this.message.length - 1].msg = "Stream error" + error; |
|||
} |
|||
} |
|||
this.message[this.message.length - 1].dot = ""; |
|||
this.arequestData.messages.push({ |
|||
role: "assistant", //this.message[this.message.length-1].user,//"GPT", |
|||
content: this.message[this.message.length - 1].msg |
|||
}); |
|||
setTimeout(() => { |
|||
this.scrollToBottom(); |
|||
}, 50); |
|||
} else { |
|||
this.form.desc = ""; |
|||
} |
|||
document.getElementById("txt_suiwen").disabled = ""; |
|||
document.getElementById("txt_suiwen").focus(); |
|||
} |
|||
}, |
|||
beforeDestroy() { |
|||
// 组件销毁时中止流式请求 |
|||
if (this.controller) { |
|||
this.controller.abort(); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
<style scoped> |
|||
.radius { |
|||
margin: 0 auto; |
|||
} |
|||
.demo-radius .title { |
|||
color: var(--el-text-color-regular); |
|||
font-size: 18px; |
|||
margin: 10px 0; |
|||
} |
|||
.demo-radius .value { |
|||
color: var(--el-text-color-primary); |
|||
font-size: 16px; |
|||
margin: 10px 0; |
|||
} |
|||
.demo-radius .radius { |
|||
min-height: 580px; |
|||
height: 85vh; |
|||
width: 70%; |
|||
border: 1px solid var(--el-border-color); |
|||
border-radius: 14px; |
|||
margin-top: 10px; |
|||
} |
|||
.messge { |
|||
width: 96%; |
|||
height: 84%; |
|||
/* border:1px solid red; */ |
|||
margin: 6px auto; |
|||
overflow: hidden; |
|||
overflow-y: auto; |
|||
} |
|||
.inputmsg { |
|||
width: 96%; |
|||
height: 12%; |
|||
/* border:1px solid blue; */ |
|||
border-top: 2px solid #ccc; |
|||
margin: 4px auto; |
|||
padding-top: 10px; |
|||
} |
|||
.mymsginfo { |
|||
width: 100%; |
|||
height: auto; |
|||
min-height: 50px; |
|||
} |
|||
::-webkit-scrollbar { |
|||
width: 6px; |
|||
height: 5px; |
|||
} |
|||
::-webkit-scrollbar-track { |
|||
background-color: rgba(0, 0, 0, 0.2); |
|||
border-radius: 10px; |
|||
} |
|||
::-webkit-scrollbar-thumb { |
|||
background-color: rgba(0, 0, 0, 0.5); |
|||
border-radius: 10px; |
|||
} |
|||
::-webkit-scrollbar-button { |
|||
background-color: #7c2929; |
|||
height: 0; |
|||
width: 0px; |
|||
} |
|||
::-webkit-scrollbar-corner { |
|||
background-color: black; |
|||
} |
|||
</style> |
|||
<style> |
|||
.el-textarea__inner { |
|||
padding-left: 45px; |
|||
padding-top: 0.75rem; |
|||
padding-bottom: 0.75rem; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue