轻松上手Spring AI：开启全民大模型运行新篇章_spring ai demo

springAI初体验 让人人都能跑大模型

Spring AI是一个旨在简化开发包含人工智能功能的应用程序的项目。它受到Python项目如LangChain和Llama Index的启发，但并非这些项目的直接移植。Spring AI的核心理念是为开发AI应用程序提供基础抽象，这些抽象有多个实现，使得在不同实现之间轻松切换组件，且代码更改最小化。

他们的设计理念是：为开发人员提供一个抽象接口，为将生成式AI作为独立组件纳入应用奠定基础

目前支持所有主要的模型提供商，如OpenAI、Microsoft、Amazon、Google和Huggingfac

这个文章将带你体验一下他与Ollama大模型的结合。

有兴趣的可以先去了解一下官方文档。

话不多说，我们直接进入实战环节。

因为这个是一个比较新的包。所以我们需要按照官方文档的提示，首先放入代码仓库地址

  <repositories>
    <repository>
      <id>spring-milestones</id>
      <name>Spring Milestones</name>
      <url>https://repo.spring.io/milestone</url>
      <snapshots>
        <enabled>false</enabled>
      </snapshots>
    </repository>
    <repository>
      <id>spring-snapshots</id>
      <name>Spring Snapshots</name>
      <url>https://repo.spring.io/snapshot</url>
      <releases>
        <enabled>false</enabled>
      </releases>
    </repository>
  </repositories>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

之后添加版本管理：

<dependencyManagement>
    <dependencies>
        <dependency>
            <groupId>org.springframework.ai</groupId>
            <artifactId>spring-ai-bom</artifactId>
            <version>0.8.1-SNAPSHOT</version>
            <type>pom</type>
            <scope>import</scope>
        </dependency>
    </dependencies>
</dependencyManagement>

1
2
3
4
5
6
7
8
9
10
11
12

Ollama后端部分

下面操作会按照这个文档来：Ollama Chat :: Spring AI Reference

首先什么是Ollama？

Ollama是一个旨在简化大型语言模型(Large Language Models, LLMs)本地运行的工具和框架。它通过将模型权重、配置和数据打包成一个单一的包，使得用户能够在本地设备上轻松运行开源的大型语言模型，如Llama 224。Ollama优化了设置和配置的细节，包括GPU的使用，使得即使是没有深厚技术背景的用户也能方便地安装、运行和与模型进行交互

这个是他的官方地址；Ollama

我们需要先下载他的Windows 版本

简单来说，你可以把他理解为可以去跑模型的一个东西。

我们把他安装之后就需要去下载一些大模型

library (ollama.com)

这里我推荐是这个：llama2-chinese (ollama.com)

因为这个他是支持中文的。

我们进入到这里，按照他的指示

输入下面的命令就可以，之后他就会开始下载

ollama run llama2-chinese

第一次下载需要耐心的等待

可以看到下载速度还是很快的

这样就算下载完成了

之后来看与spring的整合

首先是添加包：

<?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>
    <groupId>com.xiaou</groupId>
    <artifactId>xiaou-backend</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>xiaou-backend</name>
    <description>xiaou-backend</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
​
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
            <version>3.2.1</version>
        </dependency>
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-api</artifactId>
            <version>2.0.12</version>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.30</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.ai</groupId>
            <artifactId>spring-ai-ollama-spring-boot-starter</artifactId>
        </dependency>
    </dependencies>
​
    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>org.springframework.ai</groupId>
                <artifactId>spring-ai-bom</artifactId>
                <version>0.8.1-SNAPSHOT</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>
​
    <repositories>
        <repository>
            <id>spring-milestones</id>
            <name>Spring Milestones</name>
            <url>https://repo.spring.io/milestone</url>
            <snapshots>
                <enabled>false</enabled>
            </snapshots>
        </repository>
        <repository>
            <id>spring-snapshots</id>
            <name>Spring Snapshots</name>
            <url>https://repo.spring.io/snapshot</url>
            <releases>
                <enabled>false</enabled>
            </releases>
        </repository>
    </repositories>
​
</project>
​

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

之后我们进行一个配置：

server:
  port: 8081
spring:
  ai:
    ollama:
      chat:
        options:
          model: llama2-chinese

1
2
3
4
5
6
7
8
9

之后我们编写controller

@RestController
public class AIController {
    @Resource
    private OllamaChatClient ollamaChatClient;
​
    @GetMapping("/chat")
    public String chat(@RequestParam(name = "message") String message) {
        return ollamaChatClient.call(message);
    }
​
}
​

1
2
3
4
5
6
7
8
9
10
11
12
13

这个就是一个最简单的controller

之后我们来看他的演示：

可能有些慢，需要等待个半分钟左右

Ollama前端部分

这里是做一个小的demo来实现前端部分。

前端我就不多讲了直接来看效果吧 这个需要等待个半分钟左右的 因为是本地跑的

下面是代码的实现，我这里用的是vue3：

<template>
  <div class="chat-container">
    <!-- 聊天消息展示区域 -->
    <div class="message-container" v-for="(message, index) in chatHistory" :key="index">
      <!-- 用户发送的消息 -->
      <div v-if="message.sender === 'user'" class="user-message">{{ message.content }}</div>
      <!-- ChatGPT 返回的消息 -->
      <div v-else class="gpt-message">{{ message.content }}</div>
    </div>
    <!-- 消息输入框 -->
    <div class="input-container">
      <input type="text" v-model="newMessage" @keyup.enter="sendMessage" placeholder="请输入消息...">
      <button @click="sendMessage">发送</button>
    </div>
  </div>
  <!-- 等待中动画 -->
  <div v-if="wait" class="wait">
    <div class="loader"></div>
    <div>等待中</div>
  </div>
</template>
​
<script setup>
import {ref} from 'vue';
import axios from 'axios';
​
// 创建 ref 响应式变量
const chatHistory = ref([]);
const newMessage = ref('');
const wait = ref(false);
// 发送消息的函数
const sendMessage = async () => {
  wait.value = true;
  const messageContent = newMessage.value.trim(); // 读取 newMessage 的值
  // 检查消息内容是否为空
  if (messageContent !== '') {
    // 将用户发送的消息添加到聊天历史记录中
    chatHistory.value.push({sender: 'user', content: messageContent}); // 修改 chatHistory 的值
    // 发送消息到后端，并获取返回的响应
    const response = await axios.get('http://localhost:8081/chat', {
      params: {
        message: messageContent
      }
    });
    wait.value = false;
    // 将 ChatGPT 返回的消息添加到聊天历史记录中
    chatHistory.value.push({sender: 'gpt', content: response.data}); // 修改 chatHistory 的值
    // 清空输入框
    newMessage.value = ''; // 修改 newMessage 的值
  }
};
</script>
​
<style scoped>
.chat-container {
  max-width: 500px;
  margin: auto;
  position: relative;
}
​
.message-container {
  margin-bottom: 10px;
}
​
.user-message {
  background-color: #aaf;
  padding: 5px;
  border-radius: 5px;
  max-width: 70%;
  word-wrap: break-word;
}
​
.gpt-message {
  background-color: #afa;
  padding: 5px;
  border-radius: 5px;
  max-width: 70%;
  word-wrap: break-word;
}
​
.input-container {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
​
.input-container input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
​
.input-container button {
  padding: 8px 20px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
​
.input-container button:hover {
  background-color: #45a049;
}
​
.wait {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
​
/* 旋转类型的等待动画 */
.loader {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}
​
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136

open ai

在看到前面本地的ai运算速度，你可能感觉会非常慢，我们来介绍一下调用远程的api

这里用的就是chatgpt3.5

这个我们需要获得apikey

具体怎么获得我就不说了。

pom文件如下：

<dependency>
    <groupId>org.springframework.ai</groupId>
    <artifactId>spring-ai-openai-spring-boot-starter</artifactId>
</dependency>

1
2
3
4
5

之后我们进行一个配置

spring.ai.openai.api-key=YOUR_API_KEY
spring.ai.openai.chat.options.model=gpt-3.5-turbo
spring.ai.openai.chat.options.temperature=0.7

1
2
3
4

之后和上面的一样书写controller

@GetMapping("/chat")
public String OpenAiChat(@RequestParam(name = "message") String message) {
    return openAiChatClient.call(message);
}


1
2
3
4
5
6

就可以了。

当然了，如果说你需要对其进行一个上线，需要做很多的优化，这个项目只是一个demo的项目，比如说限流，安全性认证之类的东西。

如何学习AI大模型？

我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在人工智能学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。但苦于知识传播途径有限，很多互联网行业朋友无法获得正确的资料得到学习提升，故此将并将重要的AI大模型资料包括AI大模型入门学习思维导图、精品AI大模型学习书籍手册、视频教程、实战学习等录播视频免费分享出来。

第一阶段： 从大模型系统设计入手，讲解大模型的主要方法；

第二阶段： 在通过大模型提示词工程从Prompts角度入手更好发挥模型的作用；

第三阶段： 大模型平台应用开发借助阿里云PAI平台构建电商领域虚拟试衣系统；

第四阶段： 大模型知识库应用开发以LangChain框架为例，构建物流行业咨询智能问答系统；

第五阶段： 大模型微调开发借助以大健康、新零售、新媒体领域构建适合当前领域大模型；

第六阶段： 以SD多模态大模型为主，搭建了文生图小程序案例；

第七阶段： 以大模型平台应用与开发为主，通过星火大模型，文心大模型等成熟大模型构建大模型行业应用。