通用交互支持图片理解
This commit is contained in:
junleea
parent
f72d27c1c0
commit
b2545b84be
|
|
@ -30,3 +30,27 @@ export interface OllamaRequest {
|
|||
context: number[];
|
||||
}
|
||||
|
||||
// "ID": 488,
|
||||
// "CreatedAt": "2025-04-01T13:52:56.887+08:00",
|
||||
// "UpdatedAt": "2025-04-01T13:52:56.887+08:00",
|
||||
// "DeletedAt": null,
|
||||
// "Type": 3,
|
||||
// "SessionID": 178,
|
||||
// "FromID": 1,
|
||||
// "ToID": 11,
|
||||
// "Msg": "图片主要讲了什么",
|
||||
// "FunctionID": 2,
|
||||
// "Status": 3
|
||||
export interface GenMessage {
|
||||
ID : number;
|
||||
CreatedAt : string;
|
||||
UpdatedAt : string;
|
||||
DeletedAt : string;
|
||||
Type : number;
|
||||
SessionID : number;
|
||||
FromID : number;
|
||||
ToID : number;
|
||||
Msg : string;
|
||||
FunctionID : number;
|
||||
Status : number;
|
||||
}
|
||||
|
|
@ -81,14 +81,15 @@
|
|||
<el-input
|
||||
v-model="inputMessage"
|
||||
type="textarea"
|
||||
style="border: 0;"
|
||||
:rows="5"
|
||||
placeholder="输入消息..."
|
||||
@keyup.enter="sendMessage"
|
||||
/>
|
||||
<el-text
|
||||
<!-- <el-text
|
||||
v-model="inputMessage"
|
||||
aria-placeholder="输入信息...."
|
||||
></el-text>
|
||||
></el-text> -->
|
||||
</el-col>
|
||||
<el-col :span="4" style="text-align: center">
|
||||
<el-button
|
||||
|
|
@ -104,7 +105,6 @@
|
|||
<el-slider v-model="temperature" :min="0" :max="1" :step="0.1">temperature</el-slider>
|
||||
<el-slider v-model="topP" :min="0" :max="1" :step="0.1"></el-slider>
|
||||
</div>
|
||||
|
||||
</el-col>
|
||||
<el-col :span="3" style="text-align: center">
|
||||
<el-select v-model="selectModel" placeholder="选择模型">
|
||||
|
|
@ -116,18 +116,73 @@
|
|||
></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="1" style="text-align: center">
|
||||
<el-button @click="handleSelectFileVisible"><el-icon><Files /></el-icon></el-button>
|
||||
</el-col>
|
||||
<el-col :span="1" style="text-align: center">
|
||||
<el-button @click="handleUploadPicture"><el-icon><Picture /></el-icon></el-button>
|
||||
</el-col>
|
||||
<el-col :span="1" style="text-align: center">
|
||||
<el-button><el-icon><VideoCamera /></el-icon></el-button>
|
||||
</el-col>
|
||||
<!-- 已选文件一行显示 -->
|
||||
<el-col :span="12" style="text-align: center">
|
||||
<el-tag v-for="(file, index) in selectedFiles" :key="index" closable @close="removeFile(index)">{{ file.UserFileName }}</el-tag>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<!-- 文件对话框 -->
|
||||
<el-dialog
|
||||
v-model="selectFileVisible"
|
||||
title="从上传文件中选择"
|
||||
width="50%"
|
||||
>
|
||||
<el-input
|
||||
placeholder="搜索文件"
|
||||
v-model="searchFileQuery"
|
||||
prefix-icon="el-icon-search"
|
||||
/>
|
||||
<!-- 文件列表 -->
|
||||
<div class="file-list">
|
||||
<el-checkbox-group v-model="selectedFiles">
|
||||
<el-checkbox
|
||||
v-for="(item, index) in filteredFiles"
|
||||
:key="index"
|
||||
:label="item"
|
||||
>
|
||||
<span class="file-icon">
|
||||
<!-- 根据文件类型展示不同图标 -->
|
||||
<i v-if="item.UploadType === 'image'" class="el-icon-picture"></i>
|
||||
<i v-else-if="item.UploadType === 'file'" class="el-icon-document"></i>
|
||||
<!-- 可继续补充其他文件类型图标 -->
|
||||
</span>
|
||||
{{ item.UserFileName }}
|
||||
<!-- <span class="file-time">{{ item.CreatedAt }}</span> -->
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<!-- 底部状态栏和按钮 -->
|
||||
<div class="footer-bar">
|
||||
<span class="selected-count">已选 {{ selectedFiles.length }} 个文件</span>
|
||||
<el-button @click="selectFileVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleSelectFileConfirm">确认添加({{ selectedFiles.length }})</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, nextTick } from "vue";
|
||||
import { ElCard, ElInput, ElButton } from "element-plus";
|
||||
import { ElCard, ElInput, ElButton,ElDialog } from "element-plus";
|
||||
import { WSMessage} from "@/types/im";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { GetMessageService } from "@/api/im";
|
||||
import { FindUserFileService } from "@/api/file";
|
||||
import { Check, Loading, DocumentCopy } from "@element-plus/icons-vue";
|
||||
import MarkdownIt from "markdown-it";
|
||||
import hljs from "highlight.js";
|
||||
|
|
@ -139,11 +194,17 @@ import markdownItKatex from "markdown-it-katex";
|
|||
import mermaidPlugin from "@agoose77/markdown-it-mermaid";
|
||||
import "katex/dist/katex.min.css";
|
||||
import { Model } from "@/types/model";
|
||||
import {File,fileUrl} from "@/types/file";
|
||||
import {GenMessage} from "@/types/im";
|
||||
interface Message {
|
||||
role: "user" | "assistant";
|
||||
content: string;
|
||||
finished?: boolean;
|
||||
}
|
||||
interface ImageMessage{
|
||||
img_url: string;
|
||||
text: string;
|
||||
}
|
||||
|
||||
const md = new MarkdownIt();
|
||||
md.use(markdownItHighlightjs, {
|
||||
|
|
@ -171,6 +232,10 @@ const ModelList = ref<Model[]>([]);
|
|||
const selectModel = ref(0);
|
||||
const temperature = ref(0.5);
|
||||
const topP = ref(0.9);
|
||||
const selectedFiles = ref<File[]>([]); // 用于存储已选文件
|
||||
const selectFileVisible = ref(false); // 控制文件选择对话框的显示与隐藏
|
||||
const searchFileQuery = ref(""); // 用于搜索文件的查询条件
|
||||
const filteredFiles = ref<File[]>([]); // 用于存储过滤后的文件列表
|
||||
|
||||
const renderMarkdown = (content: string) => {
|
||||
return md.render(content);
|
||||
|
|
@ -178,6 +243,7 @@ const renderMarkdown = (content: string) => {
|
|||
|
||||
const scrollToBottom = () => {
|
||||
let x = document.getElementsByClassName("chat-messages")[0];
|
||||
if (!x) return;
|
||||
x.scrollTop = x.scrollHeight; //将滚轮置底
|
||||
};
|
||||
|
||||
|
|
@ -186,6 +252,29 @@ const copyCode = (code: string) => {
|
|||
ElMessage.success("代码已复制到剪贴板");
|
||||
});
|
||||
};
|
||||
const removeFile = (index: number) => {
|
||||
selectedFiles.value.splice(index, 1);
|
||||
};
|
||||
|
||||
const handleSelectFileVisible = async () => {
|
||||
await getFileListData(); // 获取文件列表
|
||||
console.log("selectedFiles:", selectedFiles.value);
|
||||
selectFileVisible.value =true; // 显示对话框
|
||||
console.log("handleSelectFileVisible:", selectFileVisible.value);
|
||||
};
|
||||
|
||||
const handleUploadPicture = () => {
|
||||
// 处理上传图片的逻辑
|
||||
//选择图片并上传
|
||||
|
||||
};
|
||||
|
||||
const handleSelectFileConfirm = () => {
|
||||
// 处理选中的文件
|
||||
console.log("选中的文件:", selectedFiles.value);
|
||||
// 在这里可以进行文件上传或其他操作
|
||||
selectFileVisible.value = false; // 关闭对话框
|
||||
};
|
||||
|
||||
const doButtonD = () => {
|
||||
const codeBlocks = document.querySelectorAll("pre code");
|
||||
|
|
@ -314,6 +403,19 @@ const sendMessage = () => {
|
|||
temperature: temperature.value,
|
||||
top_p: topP.value,
|
||||
};
|
||||
if(selectedFiles.value.length > 0){
|
||||
// 处理选中的文件
|
||||
console.log("选中的文件:", selectedFiles.value);
|
||||
let img_file:File = selectedFiles.value[0];
|
||||
let img_msg:ImageMessage = {
|
||||
img_url: fileUrl + img_file.file_store_name,
|
||||
text: inputMessage.value,
|
||||
};
|
||||
let img_msg_str = JSON.stringify(img_msg);
|
||||
msg["msg"] = img_msg_str;
|
||||
msg["is_image"] = true;
|
||||
}
|
||||
|
||||
try {
|
||||
socket.value.send(JSON.stringify(msg));
|
||||
} catch (e) {
|
||||
|
|
@ -323,7 +425,15 @@ const sendMessage = () => {
|
|||
if (sessionID.value == 0) {
|
||||
sessionName.value = inputMessage.value;
|
||||
}
|
||||
messages.push({ role: "user", content: inputMessage.value, finished: true });
|
||||
let pMsgContent
|
||||
if(msg["is_image"]){
|
||||
let img_msg:ImageMessage = JSON.parse(msg["msg"]);
|
||||
//解析成md格式
|
||||
pMsgContent = `` + "\n" + img_msg.text;
|
||||
}else{
|
||||
pMsgContent = msg.msg;
|
||||
}
|
||||
messages.push({ role: "user", content: pMsgContent, finished: true });
|
||||
inputMessage.value = "";
|
||||
nextTick(() => {
|
||||
scrollToBottom(); // 新增滚动调用
|
||||
|
|
@ -382,9 +492,18 @@ const getMessage = async (session_id: number) => {
|
|||
let data = result["data"];
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
if (data[i]["Type"] === 3) {
|
||||
let msg:GenMessage=data[i];
|
||||
let pMsgContent
|
||||
if(msg.Status==3){
|
||||
let img_msg:ImageMessage = JSON.parse(msg.Msg);
|
||||
//解析成md格式
|
||||
pMsgContent = `` + "\n" + img_msg.text;
|
||||
}else{
|
||||
pMsgContent = msg.Msg;
|
||||
}
|
||||
messages.push({
|
||||
role: "user",
|
||||
content: data[i]["Msg"],
|
||||
content: pMsgContent,
|
||||
finished: true,
|
||||
});
|
||||
} else if (data[i]["Type"] === 4) {
|
||||
|
|
@ -434,6 +553,19 @@ const GetModelListByFunctionName = async () => {
|
|||
};
|
||||
|
||||
GetModelListByFunctionName();
|
||||
|
||||
const getFileListData = async () => {
|
||||
let req={
|
||||
token: localStorage.getItem('token'),
|
||||
type: "all"
|
||||
}
|
||||
let result = await FindUserFileService(req);
|
||||
if (result["code"] === 0) {
|
||||
filteredFiles.value = result["data"];
|
||||
} else {
|
||||
ElMessage.error(result["msg"]);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.chat-app {
|
||||
|
|
@ -596,4 +728,33 @@ GetModelListByFunctionName();
|
|||
.el-icon-copy {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
/* 对话框 */
|
||||
.file-list {
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.file-icon {
|
||||
margin-right: 5px;
|
||||
color: #606266;
|
||||
}
|
||||
.file-time {
|
||||
float: right;
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
}
|
||||
.footer-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.selected-count {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.el-icon-document {
|
||||
color: #409eff;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue