文章说明

目前GPT的使用比较主流，现有开源大模型，可以拉取到本地进行部署，搭建属于自己的GPT对话工具；主要用于熟悉大模型的本地搭建；本文采用开源的Ollama进行服务提供，官网已提供控制台版本的提问方式，也有采用docker部署Web ui的功能；我选择本地自己搭建一个简单的对话ui，进行简单使用；该模型部署在本机消耗的资源较大，且模型的回答能力不如千问、文心一言等；

采用md-editor-v3，将返回的内容进行markdown格式展示，效果感觉还不错

同时采用indexDB存储对话记录，部署起来也非常便捷

Ollama大模型下载在官网下载即可

核心代码

App.vue代码

<script setup>javascript">
import {nextTick, onBeforeMount, reactive, watch} from "vue";
import {dbOperation} from "@/DbOperation";
import "@/config.js"
import {openDb} from "@/config";
import {confirm, message} from "@/util";
import {MdPreview} from 'md-editor-v3';
import 'md-editor-v3/lib/preview.css';const data = reactive({content: "",messageList: [],
});let isReplying = false;
let container;function getMaxHeight() {container = document.getElementsByClassName("container")[0];container.scrollTo({top: container.scrollHeight,behavior: "smooth"});
}onBeforeMount(() => {openDb(() => {dbOperation.getAllData((res) => {data.messageList = res.data;nextTick(() => {getMaxHeight();});});});
});watch(() => data.content, () => {if (data.content.length > 500) {data.content = String(data.content).slice(0, 500);}
});const avatarRobot = require("@/image/1.jpg");
const avatarUser = require("@/image/2.jpg");function question() {if (isReplying) {message("正在对话中", "warning");return;}isReplying = true;const messageItem = {question: data.content,reply: "",createTime: new Date(),};data.messageList.push(messageItem);setTimeout(() => {const height = container.scrollHeight;container.scrollTo({top: height,behavior: "smooth"});}, 0);fetch(new Request('http://localhost:11434/api/chat', {method: 'post',mode: "cors",body: JSON.stringify({"model": "llama3.1","messages": [{"role": "user","content": data.content}],}),})).then(response => {data.content = "";const reader = response.body.getReader();read();function read() {reader.read().then(({done, value}) => {if (done) {isReplying = false;dbOperation.add(messageItem, () => {message("对话成功", "success");});return;}const readContent = new Uint8Array(value);const content = JSON.parse(Uint8ArrayToString(readContent)).message.content;data.messageList[data.messageList.length - 1].reply += content;read();}).catch(error => {message(error, "error");});}}).catch(error => {message(error, "error");});
}function Uint8ArrayToString(fileData) {const decoder = new TextDecoder('utf-8');return decoder.decode(fileData);
}function editQuestion(item) {data.content = item.question;
}function copy(item) {navigator.clipboard.writeText(item.reply).then(() => {message("复制到剪切板", "success");});
}function deleteItem(item) {confirm("确认要删除该消息吗？", () => {data.messageList = data.messageList.filter(message => message.id !== item.id);dbOperation.delete(item.id, () => {message("删除成功", "success");});});
}
</script><template><div class="container"><div class="message-container"><div v-for="item in data.messageList" :key="item.id" class="message-item"><div class="create-time">{{ item.createTime }}</div><div class="user"><img :src="avatarUser" alt=""/><p><MdPreview v-model="item.question"/></p><i class="iconfont icon-edit" @click="editQuestion(item)"></i></div><div class="robot"><img :src="avatarRobot" alt=""/><p><MdPreview v-model="item.reply"/></p><i class="iconfont icon-copy" @click="copy(item)"></i><i class="iconfont icon-delete" @click="deleteItem(item)"></i></div></div></div><div class="input-container"><textarea v-model="data.content"/><p class="tip">{{ data.content.length }}/500</p><i class="iconfont icon-send" @click="question"></i></div></div>
</template><style lang="scss">
* {padding: 0;margin: 0;box-sizing: border-box;
}.container {min-width: 20rem;width: 100vw;height: 100vh;background-color: #eaedf6;overflow: auto;position: relative;user-select: none;.message-container {max-width: 70rem;width: 100%;height: fit-content;min-height: calc(100vh - 8rem);position: absolute;top: 0;left: 50%;transform: translateX(-50%);padding: 0 1rem 8rem;overflow: auto;.message-item {margin: 1.5rem 0;.create-time {height: 1rem;line-height: 1rem;font-size: 0.6rem;color: #999;margin-bottom: -0.5rem;margin-left: 0.5rem;}.user, .robot {margin: 1rem 0;display: flex;position: relative;&:hover .icon-edit, &:hover .icon-copy, &:hover .icon-delete {display: block;}img {border-radius: 50%;width: 2.5rem;height: 2.5rem;}p {flex: 1;display: flex;align-items: center;margin-left: 0.5rem;.md-editor-preview-wrapper {padding: 0 1rem;}}.icon-edit {position: absolute;right: 0.5rem;bottom: 0;transform: translateY(-50%);display: none;}.icon-copy {position: absolute;right: 1.8rem;bottom: 0;transform: translateY(-50%);display: none;}.icon-delete {position: absolute;right: 0.5rem;bottom: 0;transform: translateY(-50%);display: none;}}}}.input-container {max-width: 70rem;width: 80%;height: 6rem;position: fixed;bottom: 1rem;left: 50%;transform: translateX(-50%);background-color: #fff;border-radius: 1rem;&:focus-within {box-shadow: 0 0 1rem 0.1rem #888888;}textarea {outline: none;border: none;padding: 0.6rem;font-size: 1.2rem;resize: none;width: 100%;height: 100%;position: absolute;left: 0;top: 0;border-radius: 1rem;}.tip {font-size: 0.6rem;position: absolute;right: 1rem;bottom: 0.5rem;}.icon-send {font-size: 1.5rem;position: absolute;right: 1rem;bottom: 2rem;cursor: pointer;}}
}
</style>

效果展示

安装启动Ollama

问答演示1

问答演示2

问答演示3

源码下载

搭建自己的GPT