塔式服务器主机建网站,北京确诊病例最新消息,免费制作图片视频的软件,自媒体怎么入门1. 下载安装ollama
(1) 官网下载地址#xff1a;https://github.com/ollama/ollama
这里以window版本为主#xff0c;下载链接为#xff1a;https://ollama.com/download/OllamaSetup.exe。
安装完毕后#xff0c;桌面小图标有一个小图标#xff0c;表示已安装成功https://github.com/ollama/ollama
这里以window版本为主下载链接为https://ollama.com/download/OllamaSetup.exe。
安装完毕后桌面小图标有一个小图标表示已安装成功安装完毕后首先改变环境变量打开系统环境变量设置如下:
OLLAMA_HOST: 0.0.0.0
OLLAMA_MODELS: D:\ai-models (这个目录需要提前创建好目录名任意)
在这里OLLAMA_HOST参数是为了跨域访问方便第三方应用通过http请求访问。OLLAMA_MODELS参数为了改变模型下载地址默认目录为C:\Users\用户名\.ollama\models。 接着我们拉一个大模型这里以阿里qwen2.5为例更多模型可以从Ollama网站查询。打开命令行执行下面的命令 ollama run qwen2.5 如果没有模型首先自动尝试拉镜像如果需要手动拉取镜像执行ollama pull qwen2.5命令。上述命令执行完毕后我们就可以直接使用大模型。 2. curl命令请求数据
Api详细文档: https://github.com/ollama/ollama/blob/main/docs/api.md
gitbash对curl命令支持并不好下面的命令用win11的bash窗口或者用linux窗口执行这些命令。
(1)
curl http://localhost:11434/api/chat -d {model: qwen2.5,messages: [{role: user,content: 天空为什么是蓝色的?}]
}
(2)
curl http://localhost:11434/api/chat -d {model: qwen2.5,stream:false,messages: [{role: user,content: 天空为什么是蓝色的?}]
}
(3)
curl http://localhost:11434/api/generate -d {model: qwen2.5,prompt: 你是谁
}
(4)
curl http://localhost:11434/api/generate -d {model: qwen2.5,prompt: 你是谁,stream: false
} 3. Springboot集成
(1) 首先打开https://start.spring.io/网站填写如下必要信息。这里要注意不要使用springboot2.x。我们需要使用springboot3.x. (2) 用Eclipse或者idea导入项目首先配置application.yml内容如下:
server:port: 9999
spring:ai:ollama:base-url: http://localhost:11434chat:options:model: qwen2.5(3) 接下来我们需要配置跨域设置新建一个类CorsConfig写入如下内容:
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.HttpHeaders;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;Configuration
public class CorsConfig implements WebMvcConfigurer {Beanpublic WebMvcConfigurer corsConfigurer() {return new WebMvcConfigurer() {Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping(/**).allowedOriginPatterns(*).allowedMethods(*).allowedHeaders(*).allowCredentials(true).exposedHeaders(HttpHeaders.SET_COOKIE).maxAge(3600L);}};}
}
(4) 编写controller类定义OllamaClientController类写入如下内容:
import org.springframework.ai.ollama.OllamaChatModel;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import reactor.core.publisher.Flux;RestController
RequestMapping(/ollama)
public class OllamaClientController {Autowiredprivate OllamaChatModel ollamaChatModel;// http://localhost:9999/ollama/chat/v1?msg天空为什么是蓝色的GetMapping(/chat/v1)public String ollamaChat(RequestParam String msg) {return ollamaChatModel.call(msg);}// http://localhost:9999/ollama/chat/v2?msg天空为什么是蓝色的GetMapping(/chat/v2)public FluxString ollamaChat2(RequestParam String msg) {FluxString stream ollamaChatModel.stream(msg);return stream;}
}
(5) 接着启动项目打开浏览器输入: http://localhost:9999/ollama/chat/v2?msg天空为什么是蓝色的, 会看到如下图信息,这里中文虽然乱码但是不影响后续前端开发。 4. 前端页面开发
(1)这里采用VueElementUI开发首先需要创建一个vue项目。Vue项目整合ElementUI参考Element - The worlds most popular Vue UI framework。将实现如下图所示的效果图: (2) 优先采用流式数据返回因为它响应速度较快并且由于restful返回的结果是md格式的数据所以首先集成对md的支持。
首先项目需要增加如下依赖:
npm i vue-markdown-loader
npm i vue-loader
npm i vue-template-compiler
npm i github-markdown-css
npm i highlight.js
npm i markdown-loader
npm i html-loader
npm i marked
安装完成后还需要做一些配置首先配置vue.config文件增加如下内容
const { defineConfig } require(vue/cli-service)
const path require(path);
module.exports defineConfig({transpileDependencies: true,devServer: {port: 8932, // 端口client: {overlay: false,},},configureWebpack: {module: {rules: [// 配置读取 *.md 文件的规则{test: /\.md$/,use: [{ loader: html-loader },{ loader: markdown-loader, options: {} }]}]}}
})
之后我们需要在main.js中配置参数增加如下内容
import element-ui/lib/theme-chalk/index.css;
// markdown样式
import github-markdown-css;
// 代码高亮
import highlight.js/styles/github.css; //默认样式
接着启动项目如果项目启动失败删除package-lock.json文件和node_modules目录执行npm install然后启动项目。
接着增加QuestionItem.vue组件内容如下
templatediv classquestion-warpdivel-avatar sizesmall srcimages/user-icon.jpg/el-avatar/divdiv classquestion-content{{ value }}/div/div
/template
script
export default {name: QuestionItem,props: {value: String,},data() {return {}},methods: {}
}
/script
style scoped.question-warp {display: flex;
}.question-content {margin: 5px;line-height: 25px;text-align: justify;width: 100%;background-color: rgb(249, 246, 243);border-radius: 10px;padding: 10px;
}
/style
接着增加一个AnswerItem.vue组件内容如下
templatediv classanswer-warpdiv classanswer-contentdiv v-htmlvalue classmarkdown-body/div/divdivel-avatar sizesmall srcimages/ai-icon.jpg/el-avatar/div/div
/template
script
export default {name: AnswerItem,props: {value: String,},data() {return {}},methods: {}
}
/script
style scoped
.answer-warp {display: flex;
}
.markdown-body{background-color: rgb(223, 241, 249);
}
.answer-content {margin: 5px;line-height: 25px;width: 100%;text-align: justify;background-color: rgb(223, 241, 249);border-radius: 10px;padding: 10px;
}
/style
以上两个组件分别是问题和答案的组件所以接下来增加CustomerService.vue组件内容如下
templatedivdiv classtitlespan stylecolor: red;AI/span智能客服为您服务/divdiv classcontenttemplate v-foritem in dataquestion-item v-ifitem.question ! :valueitem.question /answer-item v-ifitem.answer ! :valueitem.answer //template/divdiv classtextarea-containerel-input typetextarea resizenone placeholder请输入内容 v-modelquestionInputValue :rows6classcustom-textarea/el-inputel-button :disabledsubmitButtonDisabled typeprimary classsubmit-button clickhandleSubmit提交/el-button/div/div
/template
script
import QuestionItem from /components/QuestionItem.vue;
import AnswerItem from /components/AnswerItem.vue;
import { marked } from marked
export default {name: CustomerService,components: {question-item: QuestionItem,answer-item: AnswerItem},data() {return {question: ,submitButtonDisabled: false,questionInputValue: ,data: []}},methods: {async handleSubmit() {// 处理提交逻辑console.log(提交的内容:, this.questionInputValue);if (this.questionInputValue.trim() ) {this.$message({type: error,message: 你没有输入内容哦})} else {this.question this.questionInputValuethis.submitButtonDisabled truethis.data.push({question: this.question,answer: 正在思考中...})this.questionInputValue try {// 发送请求let response await fetch(http://localhost:9999/api/ollama/chat/v2?msg this.question,{method: get,responseType: stream,});// ok字段判断是否成功获取到数据流if (!response.ok) {throw new Error(Network response was not ok);}// 用来获取一个可读的流的读取器Reader以流的方式处理响应体数据const reader response.body.getReader();// 将流中的字节数据解码为文本字符串const textDecoder new TextDecoder();let result true;let answer while (result) {// done表示流是否已经完成读取value包含读取到的数据块const { done, value } await reader.read();if (done) {result false;this.submitButtonDisabled falsebreak;}answer textDecoder.decode(value);this.$set(this.data, this.data.length - 1, {question: this.question,answer: marked(answer)});}} catch (err) {console.log(发生错误:, err)}}}}
}
/script
style scoped
.title {text-align: center;font-size: larger;font-weight: bold;
}
.content {height: 460px;overflow-y: auto;
}
.question {border: 2px solid salmon;border-radius: 10px;
}
.textarea-container {position: relative;display: flex;flex-direction: column;
}
.custom-textarea {/* 为按钮留出空间 */box-sizing: border-box;/* 确保内边距不会增加元素的总宽度 */
}
.submit-button {position: absolute;bottom: 10px;/* 根据需要调整 */right: 10px;/* 根据需要调整 */z-index: 1;/* 确保按钮在文本域之上 */
}
/style
之后我们在父组件调用该组件即可父组件示例代码如下:
…el-drawer :visible.synccustomerService :with-headerfalse directionrtl size45%div stylepadding-left: 10px;padding-right:10px;customer-service //div
/el-drawer
…
import CustomerService from /components/CustomerService.vue;
export default {name: xxxx,components: {customer-service: CustomerService},…
}
参考文档 1.ollama官网: Ollama 2. 报错 - 使用marked报错 marked__WEBPACK_IMPORTED_MODULE_4___default(...) is not a function_marked is not a function-CSDN博客 3.ollama readme : https://github.com/ollama/ollama?tabreadme-ov-file 4.vue中展示、读取.md 文件的方法(批量引入、自定义代码块高亮样式)_vue.js_脚本之家 5.在vue中解析md文档并显示-腾讯云开发者社区-腾讯云 6.axios设置 responseType为 “stream“流式获取后端数据_axios stream-CSDN博客
