首先在官方下载ollama大模型
https://ollama.com/
在cmd中查看版本 ollama -v 看到有版本号,说明安装完成。
下载合适的大模型 运行内存16g 建议 7b 左右的大模型,16g以上自己合理安排 点击官网模型下载合适的大模型 复制粘贴到cmd中 下载完成后 ollama list 查看版本
命令 ollama run llama3.1 现在可以在控制台对话了
第二部 调用ollama的本地IP 可以查看官网
主要参数:
curl http://localhost:11434/api/chat -d '{
"model": "llama3",
"messages": [
{
"role": "user",
"content": "why is the sky blue?"
}
],
"stream": false
}'
这是koa2的主要中间件
{
"scripts": {
"start": "node index.js",
"dev": "nodemon index.js"
},
"dependencies": {
"axios": "^1.7.4",
"koa": "^2.15.3",
"koa-bodyparser": "^4.4.1",
"koa-router": "^12.0.1",
"nodemon": "^3.1.4"
}
}
完整代码
const koa = require("koa");
const app = new koa();
const Router = require("koa-router");
const router = new Router();
const axios = require("axios");
const bodyParser = require("koa-bodyparser");
app.use(bodyParser());
router.post("/chatai", async (ctx) => {
const { message } = ctx.request.body;
console.log(message);
const data = {
// 你应运行那个模型参数 就用哪个模型参数
model: "llama3",
messages: [
{
role: "user",
content: message,
},
],
stream: false,
};
const response = await axios
.post("http://localhost:11434/api/chat", data)
.then((response) => {
console.log(response.data.message.content);
ctx.body = response.data.message.content;
})
.catch((error) => {
console.error(error);
});
});
app.use(router.routes());
app.listen(3001, () => {
console.log("Server is running on port http://localhost:3001");
});
前端实现代码:
<template>
<div class="chat-container" v-loading="loading">
<p class="chat-title">我是本地大模型 套壳ai</p>
<div
v-for="(item, index) in conversation"
:key="index"
class="chat-message"
>
<div class="chat-question">
<el-tag size="large">me:</el-tag>{{ item.question }}
</div>
<div class="chat-answer">
{{ item.answer }}<el-tag size="large">ai:</el-tag>
<el-tag
size="large"
type="success"
@click="readAnswer"
style="cursor: pointer"
>朗读</el-tag
>
</div>
</div>
<div class="chat-input">
<el-input
type="text"
v-model="question"
@keyup.enter="askQuestion"
></el-input>
<el-button @click="askQuestion">提交</el-button>
</div>
<div v-if="loading" class="loading-container">
<p>加载中...</p>
</div>
</div>
</template>
<script setup>
import { ChatApi } from "../utils/api";
import { ref, onMounted } from "vue";
const question = ref("");
const conversation = ref([]);
const loading = ref(false);
async function askQuestion() {
if (!question.value.trim()) {
return; // 如果问题为空,则不执行任何操作
}
// 将用户的问题添加到对话历史中
conversation.value.push({ question: question.value, answer: "等待回答..." });
try {
loading.value = true; // 开始加载
const message = `你是一个聪明的机器人,我想知道:${question.value}`;
const response = await ChatApi({ message });
console.log("Ollama response:", response.data);
// 更新对话历史中的答案
conversation.value[conversation.value.length - 1].answer = response.data;
// 将更新后的对话存储在localStorage中
localStorage.setItem("conversation", JSON.stringify(conversation.value));
} catch (error) {
console.error("Error invoking Ollama:", error);
// 在对话历史中显示错误信息
conversation.value[conversation.value.length - 1].answer =
"发生错误,请重试。";
} finally {
loading.value = false; // 加载完成
question.value = "";
}
}
function readAnswer() {
}
onMounted(() => {
// 从localStorage中读取对话数据
const storedConversation = localStorage.getItem("conversation");
if (storedConversation) {
conversation.value = JSON.parse(storedConversation);
}
});
</script>
<style lang="css" scoped>
.chat-container {
position: relative;
box-sizing: border-box;
width: 1200px;
height: 600px;
margin: 0 auto;
background-color: #f5f5f5;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.chat-title {
text-align: center;
font-size: 24px;
font-weight: bold;
margin-top: 30px;
margin: 0 auto;
}
.chat-message {
position: relative;
margin: 20px auto;
padding: 10px;
max-width: 80%;
border-radius: 10px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.chat-question {
font-size: 16px;
font-weight: bold;
margin-bottom: 5px;
}
.chat-answer {
font-size: 16px;
font-weight: bold;
margin-bottom: 5px;
/* 右对齐 */
text-align: right;
}
.chat-input {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 60px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
background-color: #fff;
border-top: 1px solid #eee;
border-radius: 0 0 10px 10px;
}
.chat-input > * {
margin: 0 10px;
}
.loading-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
font-weight: bold;
color: #999;
}
.el-input__inner {
width: 100%;
}
</style>
代码还有不足,希望一起code吧