v0.0.1
spring ai的基本使用
This commit is contained in:
commit
3208efe280
38
.gitignore
vendored
Normal file
38
.gitignore
vendored
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
target/
|
||||||
|
!.mvn/wrapper/maven-wrapper.jar
|
||||||
|
!**/src/main/**/target/
|
||||||
|
!**/src/test/**/target/
|
||||||
|
|
||||||
|
### IntelliJ IDEA ###
|
||||||
|
.idea/modules.xml
|
||||||
|
.idea/jarRepositories.xml
|
||||||
|
.idea/compiler.xml
|
||||||
|
.idea/libraries/
|
||||||
|
*.iws
|
||||||
|
*.iml
|
||||||
|
*.ipr
|
||||||
|
|
||||||
|
### Eclipse ###
|
||||||
|
.apt_generated
|
||||||
|
.classpath
|
||||||
|
.factorypath
|
||||||
|
.project
|
||||||
|
.settings
|
||||||
|
.springBeans
|
||||||
|
.sts4-cache
|
||||||
|
|
||||||
|
### NetBeans ###
|
||||||
|
/nbproject/private/
|
||||||
|
/nbbuild/
|
||||||
|
/dist/
|
||||||
|
/nbdist/
|
||||||
|
/.nb-gradle/
|
||||||
|
build/
|
||||||
|
!**/src/main/**/build/
|
||||||
|
!**/src/test/**/build/
|
||||||
|
|
||||||
|
### VS Code ###
|
||||||
|
.vscode/
|
||||||
|
|
||||||
|
### Mac OS ###
|
||||||
|
.DS_Store
|
||||||
206
README.md
Normal file
206
README.md
Normal file
@ -0,0 +1,206 @@
|
|||||||
|
# Spring AI Demo
|
||||||
|
|
||||||
|
> 🤖 一个简洁优雅的 Spring AI 对话演示项目，基于 Spring Boot 3.2.0 与 Spring AI 1.0.0-M3 构建，支持流式响应与 Markdown 渲染。
|
||||||
|
|
||||||
|
[](https://spring.io/projects/spring-boot)
|
||||||
|
[](https://spring.io/projects/spring-ai)
|
||||||
|
[](https://openjdk.org/)
|
||||||
|
[](LICENSE)
|
||||||
|
|
||||||
|
## ✨ 特性
|
||||||
|
|
||||||
|
- 🌐 **智能对话** - 基于 OpenAI/Ollama 的自然语言交互
|
||||||
|
- 📡 **流式响应** - 实时逐字输出，体验流畅
|
||||||
|
- 📝 **Markdown 支持** - 完整渲染代码块、表格、列表等格式
|
||||||
|
- 👨💻 **代码高亮** - Highlight.js 自动语言检测与语法着色
|
||||||
|
- 🖼️ **向量数据库** - Milvus 集成（预留 RAG 扩展能力）
|
||||||
|
- 📔 **PDF 解析** - Apache PDFBox 文档处理支持
|
||||||
|
- 🎨 **精美界面** - 深色主题响应式设计
|
||||||
|
|
||||||
|
## 🚀 快速开始
|
||||||
|
|
||||||
|
### 环境要求
|
||||||
|
|
||||||
|
- JDK 17+
|
||||||
|
- Maven 3.8+
|
||||||
|
- [Ollama](https://ollama.ai/) 本地服务
|
||||||
|
|
||||||
|
### 1. 安装 Ollama
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# macOS/Linux
|
||||||
|
curl -fsSL https://ollama.ai/install.sh | sh
|
||||||
|
|
||||||
|
# 拉取模型
|
||||||
|
ollama pull gpt-oss:120b-cloud
|
||||||
|
|
||||||
|
# 启动服务 (默认端口 11434)
|
||||||
|
ollama serve
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. 启动项目
|
||||||
|
|
||||||
|
```bash
|
||||||
|
mvn spring-boot:run
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. 访问应用
|
||||||
|
|
||||||
|
- **Web 界面**: http://localhost:8080
|
||||||
|
- **健康检查**: http://localhost:8080/api/chat/test
|
||||||
|
|
||||||
|
## 🔧 技术栈
|
||||||
|
|
||||||
|
### 后端
|
||||||
|
|
||||||
|
| 组件 | 技术 | 版本 |
|
||||||
|
|:---|:---|:---|
|
||||||
|
| 基础框架 | Spring Boot | 3.2.0 |
|
||||||
|
| AI 框架 | Spring AI | 1.0.0-M3 |
|
||||||
|
| AI 模型 | OpenAI/Ollama | - |
|
||||||
|
| 响应式编程 | Spring WebFlux | 3.2.0 |
|
||||||
|
| 向量数据库 | Milvus Store | 1.0.0-M3 |
|
||||||
|
| 文档处理 | Apache PDFBox | 2.0.29 |
|
||||||
|
|
||||||
|
### 前端
|
||||||
|
|
||||||
|
| 技术 | 用途 |
|
||||||
|
|:---|:---|
|
||||||
|
| HTML5 + CSS3 | 页面结构与样式 |
|
||||||
|
| Marked.js | Markdown 解析渲染 |
|
||||||
|
| Highlight.js | 代码语法高亮 |
|
||||||
|
|
||||||
|
## 📁 项目结构
|
||||||
|
|
||||||
|
```
|
||||||
|
springAiDemo/
|
||||||
|
├── src/
|
||||||
|
│ └── main/
|
||||||
|
│ ├── java/com/demo/
|
||||||
|
│ │ ├── MyApplication.java # Spring Boot 启动入口
|
||||||
|
│ │ └── controller/
|
||||||
|
│ │ └── ChatController.java # AI 聊天 REST API
|
||||||
|
│ └── resources/
|
||||||
|
│ ├── application.yaml # 应用配置
|
||||||
|
│ └── static/ # 前端静态资源
|
||||||
|
│ ├── index.html # 主页面
|
||||||
|
│ ├── css/style.css # 深色主题样式
|
||||||
|
│ └── js/app.js # 流式响应逻辑
|
||||||
|
├── pom.xml
|
||||||
|
└── README.md
|
||||||
|
```
|
||||||
|
|
||||||
|
## 💬 API 文档
|
||||||
|
|
||||||
|
### 端点列表
|
||||||
|
|
||||||
|
| 方法 | 端点 | 描述 | 参数 |
|
||||||
|
|:---|:---|:---|:---|
|
||||||
|
| GET | `/api/chat/test` | 健康检查 | - |
|
||||||
|
| GET | `/api/chat/ai` | 同步 AI 对话 | `msg` |
|
||||||
|
| GET | `/api/chat/ai/stream` | 流式 AI 对话 | `msg` |
|
||||||
|
|
||||||
|
### 请求示例
|
||||||
|
|
||||||
|
**同步对话：**
|
||||||
|
```bash
|
||||||
|
curl "http://localhost:8080/api/chat/ai?msg=什么是Spring AI"
|
||||||
|
```
|
||||||
|
|
||||||
|
**流式对话：**
|
||||||
|
```bash
|
||||||
|
curl "http://localhost:8080/api/chat/ai/stream?msg=讲一个故事"
|
||||||
|
```
|
||||||
|
|
||||||
|
### 响应格式
|
||||||
|
|
||||||
|
- **同步**: `text/plain` - 完整回复文本
|
||||||
|
- **流式**: `text/html;charset=UTF-8` - Server-Sent Events 分块传输
|
||||||
|
|
||||||
|
## 🎨 界面预览
|
||||||
|
|
||||||
|
🧩 **现代化深色主题**
|
||||||
|
- 渐变标题与毛玻璃效果
|
||||||
|
- 流畅的消息气泡动画
|
||||||
|
- Markdown 代码块高亮
|
||||||
|
- 流式响应动画指示器
|
||||||
|
|
||||||
|
📝 **Markdown 支持**
|
||||||
|
- 代码块与行内代码
|
||||||
|
- 加粗、斜体、删除线
|
||||||
|
- 有序/无序列表
|
||||||
|
- 引用块、表格、链接
|
||||||
|
|
||||||
|
## 🛠️ 配置说明
|
||||||
|
|
||||||
|
### 模型配置 (`application.yaml`)
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
spring:
|
||||||
|
ai:
|
||||||
|
openai:
|
||||||
|
base-url: http://localhost:11434 # Ollama 服务地址
|
||||||
|
chat:
|
||||||
|
options:
|
||||||
|
model: gpt-oss:120b-cloud # 当前模型
|
||||||
|
temperature: 0.7 # 生成温度
|
||||||
|
```
|
||||||
|
|
||||||
|
**支持模型**（需在 Ollama 中预先拉取）：
|
||||||
|
- `gpt-oss:120b-cloud` - 默认模型
|
||||||
|
- `kimi-k2.5:cloud` - Kimi 模型
|
||||||
|
- `gemma4:e2b` - Google Gemma 模型
|
||||||
|
|
||||||
|
## 🎬 架构图
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────┐ ┌──────────────────┐ ┌─────────────────┐
|
||||||
|
│ Client │────▶│ ChatController │────▶│ ChatClient │
|
||||||
|
│ (HTTP) │ │ (Spring MVC) │ │ (Spring AI) │
|
||||||
|
└─────────────┘ └──────────────────┘ └────────┬────────┘
|
||||||
|
│
|
||||||
|
▼
|
||||||
|
┌─────────────────┐
|
||||||
|
│ Ollama/OpenAI │
|
||||||
|
│ (LLM Provider) │
|
||||||
|
└─────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
## 📄 预留功能
|
||||||
|
|
||||||
|
以下依赖已集成，可按需启用：
|
||||||
|
|
||||||
|
- 🔍 **Milvus 向量数据库** - RAG 语义搜索
|
||||||
|
- 📔 **PDF 文档解析** - 文档上传与处理
|
||||||
|
- 🗨️ **Embedding 服务** - 文本向量化
|
||||||
|
|
||||||
|
## 👷 已知限制
|
||||||
|
|
||||||
|
1. 暂无对话历史持久化
|
||||||
|
2. 暂未实现请求频率限制
|
||||||
|
3. JUnit 版本较旧（3.8.1），建议升级至 JUnit 5
|
||||||
|
|
||||||
|
## 📖 待办事项
|
||||||
|
|
||||||
|
- [ ] 添加全局异常处理
|
||||||
|
- [ ] 实现 RAG 文档问答
|
||||||
|
- [ ] 对话历史存储
|
||||||
|
- [ ] 动态模型切换 API
|
||||||
|
- [ ] Docker 部署支持
|
||||||
|
- [ ] 单元测试完善
|
||||||
|
|
||||||
|
## 📤 更新日志
|
||||||
|
|
||||||
|
### v1.0.0 (2026-04-17)
|
||||||
|
- 🎉 初始版本发布
|
||||||
|
- 支持流式 AI 对话
|
||||||
|
- Markdown 渲染与代码高亮
|
||||||
|
- 深色主题 Web 界面
|
||||||
|
|
||||||
|
## 📗 License
|
||||||
|
|
||||||
|
MIT © 2026 Spring AI Demo
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
🚀 **Made with Spring AI**
|
||||||
118
pom.xml
Normal file
118
pom.xml
Normal file
@ -0,0 +1,118 @@
|
|||||||
|
<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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
|
||||||
|
<modelVersion>4.0.0</modelVersion>
|
||||||
|
|
||||||
|
<groupId>org.example</groupId>
|
||||||
|
<artifactId>springAiDemo</artifactId>
|
||||||
|
<version>1.0-SNAPSHOT</version>
|
||||||
|
<packaging>jar</packaging>
|
||||||
|
|
||||||
|
<name>springAiDemo</name>
|
||||||
|
<url>http://maven.apache.org</url>
|
||||||
|
|
||||||
|
<parent>
|
||||||
|
<groupId>org.springframework.boot</groupId>
|
||||||
|
<artifactId>spring-boot-starter-parent</artifactId>
|
||||||
|
<version>3.2.0</version>
|
||||||
|
<relativePath/>
|
||||||
|
</parent>
|
||||||
|
<properties>
|
||||||
|
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
|
||||||
|
</properties>
|
||||||
|
|
||||||
|
<dependencies>
|
||||||
|
<!-- spring web 依赖 -->
|
||||||
|
<dependency>
|
||||||
|
<groupId>org.springframework.boot</groupId>
|
||||||
|
<artifactId>spring-boot-starter-web</artifactId>
|
||||||
|
</dependency>
|
||||||
|
|
||||||
|
<!--Spring AI Core -->
|
||||||
|
<dependency>
|
||||||
|
<groupId>org.springframework.ai</groupId>
|
||||||
|
<artifactId>spring-ai-openai-spring-boot-starter</artifactId>
|
||||||
|
</dependency>
|
||||||
|
<!-- <dependency>-->
|
||||||
|
<!-- <groupId>org.springframework.ai</groupId>-->
|
||||||
|
<!-- <artifactId>spring-ai-ollama-spring-boot-starter</artifactId>-->
|
||||||
|
<!-- </dependency>-->
|
||||||
|
<!--spring web 流式接口依赖 -->
|
||||||
|
<dependency>
|
||||||
|
<groupId>org.springframework.boot</groupId>
|
||||||
|
<artifactId>spring-boot-starter-webflux</artifactId>
|
||||||
|
</dependency>
|
||||||
|
|
||||||
|
<!--引入milvus和spring ai的集成包–>-->
|
||||||
|
<dependency>
|
||||||
|
<groupId>org.springframework.ai</groupId>
|
||||||
|
<artifactId>spring-ai-milvus-store-spring-boot-starter</artifactId>
|
||||||
|
</dependency>
|
||||||
|
|
||||||
|
<!-- <!– milvus客户端 –>-->
|
||||||
|
<!-- <dependency>-->
|
||||||
|
<!-- <groupId>io.milvus</groupId>-->
|
||||||
|
<!-- <artifactId>milvus-sdk-java</artifactId>-->
|
||||||
|
<!-- <version>2.3.4</version>-->
|
||||||
|
<!-- </dependency>-->
|
||||||
|
|
||||||
|
|
||||||
|
<!-- spring中用于校验的包 -->
|
||||||
|
<dependency>
|
||||||
|
<groupId>org.springframework.boot</groupId>
|
||||||
|
<artifactId>spring-boot-starter-validation</artifactId>
|
||||||
|
</dependency>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 增加处理pdf的相关依赖 -->
|
||||||
|
<dependency>
|
||||||
|
<groupId>org.apache.pdfbox</groupId>
|
||||||
|
<artifactId>pdfbox</artifactId>
|
||||||
|
<version>2.0.29</version>
|
||||||
|
</dependency>
|
||||||
|
<dependency>
|
||||||
|
<groupId>commons-fileupload</groupId>
|
||||||
|
<artifactId>commons-fileupload</artifactId>
|
||||||
|
<version>1.5</version>
|
||||||
|
</dependency>
|
||||||
|
|
||||||
|
<dependency>
|
||||||
|
<groupId>org.projectlombok</groupId>
|
||||||
|
<artifactId>lombok</artifactId>
|
||||||
|
<optional>true</optional>
|
||||||
|
</dependency>
|
||||||
|
|
||||||
|
|
||||||
|
<dependency>
|
||||||
|
<groupId>junit</groupId>
|
||||||
|
<artifactId>junit</artifactId>
|
||||||
|
<version>3.8.1</version>
|
||||||
|
<scope>test</scope>
|
||||||
|
</dependency>
|
||||||
|
</dependencies>
|
||||||
|
|
||||||
|
|
||||||
|
<dependencyManagement>
|
||||||
|
<dependencies>
|
||||||
|
<dependency>
|
||||||
|
<groupId>org.springframework.ai</groupId>
|
||||||
|
<artifactId>spring-ai-bom</artifactId>
|
||||||
|
<version>1.0.0-M3</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>
|
||||||
|
</repositories>
|
||||||
|
|
||||||
|
</project>
|
||||||
|
|
||||||
10
src/main/java/com/demo/MyApplication.java
Normal file
10
src/main/java/com/demo/MyApplication.java
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
package com.demo;
|
||||||
|
|
||||||
|
import org.springframework.boot.SpringApplication;
|
||||||
|
import org.springframework.boot.autoconfigure.SpringBootApplication;
|
||||||
|
@SpringBootApplication
|
||||||
|
public class MyApplication {
|
||||||
|
public static void main(String[] args) {
|
||||||
|
SpringApplication.run(MyApplication.class, args);
|
||||||
|
}
|
||||||
|
}
|
||||||
49
src/main/java/com/demo/controller/ChatController.java
Normal file
49
src/main/java/com/demo/controller/ChatController.java
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
package com.demo.controller;
|
||||||
|
|
||||||
|
import org.springframework.ai.chat.client.ChatClient;
|
||||||
|
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("/api/chat")
|
||||||
|
public class ChatController {
|
||||||
|
|
||||||
|
private final ChatClient chatClient;
|
||||||
|
|
||||||
|
public ChatController(ChatClient.Builder chatClientBuilder) {
|
||||||
|
this.chatClient = chatClientBuilder.build();
|
||||||
|
}
|
||||||
|
|
||||||
|
@GetMapping("/test")
|
||||||
|
public String test(){
|
||||||
|
return "hello world";
|
||||||
|
}
|
||||||
|
|
||||||
|
@GetMapping("/ai")
|
||||||
|
public String ai(@RequestParam(value = "msg",defaultValue = "你是谁")String msg) {
|
||||||
|
return this.chatClient
|
||||||
|
.prompt()
|
||||||
|
.user(msg)
|
||||||
|
.call()
|
||||||
|
.content();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 流式的聊天接口，要注意如果中文有乱码，就是编码得问题，需要添加produces = "text/html;charset=UTF-8
|
||||||
|
* @param msg
|
||||||
|
* @return
|
||||||
|
*/
|
||||||
|
@GetMapping(value = "/ai/stream",produces = "text/html;charset=UTF-8")
|
||||||
|
public Flux<String> aistream(@RequestParam(value = "msg",defaultValue = "你是谁")String msg) {
|
||||||
|
return this.chatClient
|
||||||
|
.prompt()
|
||||||
|
.user(msg)
|
||||||
|
.stream()
|
||||||
|
.content();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
29
src/main/resources/application.yaml
Normal file
29
src/main/resources/application.yaml
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
server:
|
||||||
|
port: 8080
|
||||||
|
|
||||||
|
spring:
|
||||||
|
ai:
|
||||||
|
openai:
|
||||||
|
api-key: ollama
|
||||||
|
base-url: http://localhost:11434
|
||||||
|
chat:
|
||||||
|
api-key: ollama
|
||||||
|
base-url: http://localhost:11434
|
||||||
|
options:
|
||||||
|
model: gpt-oss:120b-cloud
|
||||||
|
# model: kimi-k2.5:cloud
|
||||||
|
# model: gemma4:e2b
|
||||||
|
# max-tokens: 10000
|
||||||
|
temperature: 0.7
|
||||||
|
# embedding:
|
||||||
|
# api-key: ollama
|
||||||
|
# base-url: http://localhost:11434
|
||||||
|
|
||||||
|
#spring:
|
||||||
|
# ai:
|
||||||
|
# ollama:
|
||||||
|
# base-url: http://localhost:11434
|
||||||
|
# chat:
|
||||||
|
# options:
|
||||||
|
# model: gemma4:e2b
|
||||||
|
# temperature: 0.7
|
||||||
320
src/main/resources/static/css/style.css
Normal file
320
src/main/resources/static/css/style.css
Normal file
@ -0,0 +1,320 @@
|
|||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--primary: #6366f1;
|
||||||
|
--primary-hover: #4f46e5;
|
||||||
|
--bg-dark: #0f172a;
|
||||||
|
--bg-card: #1e293b;
|
||||||
|
--bg-input: #334155;
|
||||||
|
--text-primary: #f1f5f9;
|
||||||
|
--text-secondary: #94a3b8;
|
||||||
|
--border: #334155;
|
||||||
|
--user-bubble: #6366f1;
|
||||||
|
--ai-bubble: #334155;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
background: var(--bg-dark);
|
||||||
|
color: var(--text-primary);
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 800px;
|
||||||
|
height: 100vh;
|
||||||
|
max-height: 900px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
text-align: center;
|
||||||
|
padding: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header h1 {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 700;
|
||||||
|
background: linear-gradient(135deg, #6366f1, #a855f7);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-size: 14px;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-container {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 20px 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome-message, .message {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
animation: fadeIn 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from { opacity: 0; transform: translateY(10px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.message.user {
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-content {
|
||||||
|
max-width: 70%;
|
||||||
|
padding: 12px 16px;
|
||||||
|
border-radius: 16px;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ai-avatar {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
background: linear-gradient(135deg, #6366f1, #a855f7);
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ai-avatar svg {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-avatar {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
background: var(--bg-input);
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-avatar svg {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.message.user .message-content {
|
||||||
|
background: var(--user-bubble);
|
||||||
|
border-bottom-right-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message.ai .message-content {
|
||||||
|
background: var(--ai-bubble);
|
||||||
|
border-bottom-left-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-container {
|
||||||
|
padding: 16px 0;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-wrapper {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
background: var(--bg-card);
|
||||||
|
border-radius: 24px;
|
||||||
|
padding: 6px;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
transition: border-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-wrapper:focus-within {
|
||||||
|
border-color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
#messageInput {
|
||||||
|
flex: 1;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
padding: 12px 16px;
|
||||||
|
font-size: 15px;
|
||||||
|
color: var(--text-primary);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#messageInput::placeholder {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.send-btn {
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
background: var(--primary);
|
||||||
|
border: none;
|
||||||
|
border-radius: 50%;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: background 0.2s, transform 0.15s;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.send-btn:hover {
|
||||||
|
background: var(--primary-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.send-btn:active {
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
.send-btn:disabled {
|
||||||
|
background: var(--bg-input);
|
||||||
|
cursor: not-allowed;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.send-btn svg {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stream-indicator {
|
||||||
|
display: none;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stream-indicator.active {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot {
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
background: var(--primary);
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: bounce 1.4s infinite ease-in-out both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot:nth-child(1) { animation-delay: -0.32s; }
|
||||||
|
.dot:nth-child(2) { animation-delay: -0.16s; }
|
||||||
|
|
||||||
|
@keyframes bounce {
|
||||||
|
0%, 80%, 100% { transform: scale(0); }
|
||||||
|
40% { transform: scale(1); }
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--border);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-content {
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-content pre {
|
||||||
|
background: #0d1117;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 12px;
|
||||||
|
margin: 8px 0;
|
||||||
|
overflow-x: auto;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-content code {
|
||||||
|
background: #0d1117;
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-family: 'Fira Code', Consolas, monospace;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-content pre code {
|
||||||
|
background: transparent;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-content p {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-content p:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-content ul, .message-content ol {
|
||||||
|
padding-left: 20px;
|
||||||
|
margin: 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-content blockquote {
|
||||||
|
border-left: 3px solid var(--primary);
|
||||||
|
padding-left: 12px;
|
||||||
|
margin: 8px 0;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-content a {
|
||||||
|
color: #818cf8;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-content a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-content h1, .message-content h2, .message-content h3,
|
||||||
|
.message-content h4, .message-content h5, .message-content h6 {
|
||||||
|
margin: 12px 0 8px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-content table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
margin: 8px 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-content th, .message-content td {
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
padding: 6px 10px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-content th {
|
||||||
|
background: var(--bg-input);
|
||||||
|
}
|
||||||
57
src/main/resources/static/index.html
Normal file
57
src/main/resources/static/index.html
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Spring AI Chat</title>
|
||||||
|
<link rel="stylesheet" href="css/style.css">
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github-dark.min.css">
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>
|
||||||
|
</head>
|
||||||
|
<script>
|
||||||
|
marked.setOptions({
|
||||||
|
highlight: function(code, lang) {
|
||||||
|
if (lang && hljs.getLanguage(lang)) {
|
||||||
|
return hljs.highlight(code, { language: lang }).value;
|
||||||
|
}
|
||||||
|
return hljs.highlightAuto(code).value;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<header class="header">
|
||||||
|
<h1>Spring AI Chat</h1>
|
||||||
|
<p class="subtitle">基于 Spring AI 的智能对话助手</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="chat-container" id="chatContainer">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-container">
|
||||||
|
<div class="input-wrapper">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="messageInput"
|
||||||
|
placeholder="输入您的问题..."
|
||||||
|
autocomplete="off"
|
||||||
|
>
|
||||||
|
<button id="sendBtn" class="send-btn">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="stream-indicator" id="streamIndicator">
|
||||||
|
<span class="dot"></span>
|
||||||
|
<span class="dot"></span>
|
||||||
|
<span class="dot"></span>
|
||||||
|
AI 正在思考中...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="js/app.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
86
src/main/resources/static/js/app.js
Normal file
86
src/main/resources/static/js/app.js
Normal file
@ -0,0 +1,86 @@
|
|||||||
|
const chatContainer = document.getElementById('chatContainer');
|
||||||
|
const messageInput = document.getElementById('messageInput');
|
||||||
|
const sendBtn = document.getElementById('sendBtn');
|
||||||
|
const streamIndicator = document.getElementById('streamIndicator');
|
||||||
|
|
||||||
|
let isStreaming = false;
|
||||||
|
|
||||||
|
messageInput.addEventListener('keypress', (e) => {
|
||||||
|
if (e.key === 'Enter' && !e.shiftKey) {
|
||||||
|
e.preventDefault();
|
||||||
|
sendMessage();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
sendBtn.addEventListener('click', sendMessage);
|
||||||
|
|
||||||
|
async function sendMessage() {
|
||||||
|
const message = messageInput.value.trim();
|
||||||
|
if (!message || isStreaming) return;
|
||||||
|
|
||||||
|
addMessage(message, 'user');
|
||||||
|
messageInput.value = '';
|
||||||
|
isStreaming = true;
|
||||||
|
sendBtn.disabled = true;
|
||||||
|
streamIndicator.classList.add('active');
|
||||||
|
|
||||||
|
const aiMessageEl = addMessage('', 'ai');
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(`/api/chat/ai/stream?msg=${encodeURIComponent(message)}`);
|
||||||
|
|
||||||
|
const reader = response.body.getReader();
|
||||||
|
const decoder = new TextDecoder();
|
||||||
|
let result = '';
|
||||||
|
|
||||||
|
while (true) {
|
||||||
|
const { done, value } = await reader.read();
|
||||||
|
if (done) break;
|
||||||
|
const chunk = decoder.decode(value);
|
||||||
|
result += chunk;
|
||||||
|
aiMessageEl.querySelector('.message-content').innerHTML = marked.parse(result);
|
||||||
|
chatContainer.scrollTop = chatContainer.scrollHeight;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
aiMessageEl.querySelector('.message-content').textContent = '抱歉，发生了错误: ' + error.message;
|
||||||
|
} finally {
|
||||||
|
isStreaming = false;
|
||||||
|
sendBtn.disabled = false;
|
||||||
|
streamIndicator.classList.remove('active');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function addMessage(text, type) {
|
||||||
|
const messageDiv = document.createElement('div');
|
||||||
|
messageDiv.className = `message ${type}`;
|
||||||
|
|
||||||
|
const avatar = type === 'ai'
|
||||||
|
? `<div class="ai-avatar">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z"/>
|
||||||
|
<circle cx="12" cy="12" r="3"/>
|
||||||
|
<path d="M12 2v4m0 12v4M2 12h4m12 0h4"/>
|
||||||
|
</svg>
|
||||||
|
</div>`
|
||||||
|
: `<div class="user-avatar">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
|
||||||
|
<circle cx="12" cy="7" r="4"/>
|
||||||
|
</svg>
|
||||||
|
</div>`;
|
||||||
|
|
||||||
|
messageDiv.innerHTML = `
|
||||||
|
${avatar}
|
||||||
|
<div class="message-content"><p>${escapeHtml(text)}</p></div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
chatContainer.appendChild(messageDiv);
|
||||||
|
chatContainer.scrollTop = chatContainer.scrollHeight;
|
||||||
|
return messageDiv;
|
||||||
|
}
|
||||||
|
|
||||||
|
function escapeHtml(text) {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.textContent = text;
|
||||||
|
return div.innerHTML;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user