springboot 集成ollama 及 本地 webUI部署

springboot 集成ollama 及 本地 webUI部署

前提:本地已运行ollama,这个不在这里细讲。

一、springboot 集成ollama

1.创建一个简单的spring项目

添加依赖


 <dependency>

    <groupId>io.springboot.ai</groupId>

    <artifactId>spring-ai-ollama-spring-boot-starter</artifactId>

    <version>1.0.0</version>

</dependency>

完整的XML:


<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>3.2.5</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>testOllama2</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>testOllama2</name>
    <description>testOllama2</description>
    <url/>
    <licenses>
        <license/>
    </licenses>
    <developers>
        <developer/>
    </developers>
    <scm>
        <connection/>
        <developerConnection/>
        <tag/>
        <url/>
    </scm>
    <properties>
        <java.version>17</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
            <version>3.2.5</version>
        </dependency>
        <dependency>
            <groupId>io.springboot.ai</groupId>
            <artifactId>spring-ai-ollama-spring-boot-starter</artifactId>
            <version>1.0.0</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
</project>

2.在 application.yml 中添加配置:

server:
  port: 9090
spring:
  application:
    name: testOllama2
  ai:
    ollama:
      base-url: http://localhost:11434
      chat:
        options:
          model: qwen

3.编写controller 接口:


  @GetMapping("/ollama/chat/v5")

    public Flux<String> getOllameByStreamV2(String msg) {

        Prompt prompt = new Prompt(msg);

        Flux<ChatResponse> stream = ollamaChatClient.stream(prompt);

        //将 stream 中的 result下的output下的content 提取出来

        Flux<String> result = stream.map(a -> {

            return a.getResult().getOutput().getContent();

        });

        return result;

    }

这里使用Flux流式输出

4.来一个简单的HTML页面来验证接口

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flux API Call</title>
</head>
<body>
    <h1>Flux API Call Example</h1>
    <button id="callApi">Call API</button>
    <pre id="responseData"></pre>
    <script>
        document.getElementById('callApi').addEventListener('click', async function() {
            const response = await fetch('http://localhost:9090/ollama/chat/v5?msg=who are you?');
            const reader = response.body.getReader();
            let result = '';
            try {
                while (true) {
                    const {done, value} = await reader.read();
                    if (done) {
                        break;
                    }
                    const temp = new TextDecoder().decode(value);
                    console.log(temp);
                    result += temp;
                }
            } catch (error) {
                console.error('Error reading the response:', error);
            } finally {
                reader.releaseLock();
            }
            document.getElementById('responseData').textContent = result;
        });
    </script>
</body>
</html>

5.效果

二、本地部署webui

1.下载并安装 Node.js 工具:https://nodejs.org/zh-cn

2.下载ollama-webui工程代码:git clone https://github.com/ollama-webui/ollama-webui-lite ollama-webui

3.切换ollama-webui代码的目录:cd ollama-webui

4.设置 Node.js 工具包镜像源(下载提速):npm config set registry http://mirrors.cloud.tencent.com/npm/

5.安装 Node.js 依赖的工具包:npm install

6.最后,启动 Web 可视化界面:npm run dev

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值