调用本地大模型API 以ollama为例子 技术栈node.js koa2 vite

首先在官方下载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吧