【原】无脑操作：SpringAI + 讯飞星火大模型（OpenAI接口方式）实现简单智能对话

1、实现效果

2、设置pom.xml

 1 <?xml version="1.0" encoding="UTF-8"?>
 2 <project xmlns="http://maven.apache.org/POM/4.0.0"
 3          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 4          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
 5     <modelVersion>4.0.0</modelVersion>
 6 
 7     <groupId>cn.temptation</groupId>
 8     <artifactId>studyAI20251026</artifactId>
 9     <version>1.0-SNAPSHOT</version>
10 
11     <parent>
12         <groupId>org.springframework.boot</groupId>
13         <artifactId>spring-boot-starter-parent</artifactId>
14         <version>3.4.4</version>
15         <relativePath/> <!-- lookup parent from repository -->
16     </parent>
17 
18     <properties>
19         <maven.compiler.source>17</maven.compiler.source>
20         <maven.compiler.target>17</maven.compiler.target>
21         <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
22         <spring-ai.version>1.0.3</spring-ai.version>
23         <spring-ai-alibaba.version>1.0.0.2</spring-ai-alibaba.version>
24     </properties>
25 
26     <dependencyManagement>
27         <dependencies>
28             <dependency>
29                 <groupId>org.springframework.ai</groupId>
30                 <artifactId>spring-ai-bom</artifactId>
31                 <version>1.0.3</version>
32                 <type>pom</type>
33                 <scope>import</scope>
34             </dependency>
35         </dependencies>
36     </dependencyManagement>
37 
38     <dependencies>
39         <!-- Lombok -->
40         <dependency>
41             <groupId>org.projectlombok</groupId>
42             <artifactId>lombok</artifactId>
43             <version>1.18.22</version>
44         </dependency>
45         <!-- web -->
46         <dependency>
47             <groupId>org.springframework.boot</groupId>
48             <artifactId>spring-boot-starter-web</artifactId>
49         </dependency>
50         <!-- thymeleaf -->
51         <dependency>
52             <groupId>org.springframework.boot</groupId>
53             <artifactId>spring-boot-starter-thymeleaf</artifactId>
54         </dependency>
55 
56         <dependency>
57             <groupId>com.alibaba.cloud.ai</groupId>
58             <artifactId>spring-ai-alibaba-bom</artifactId>
59             <version>${spring-ai-alibaba.version}</version>
60             <type>pom</type>
61             <scope>import</scope>
62         </dependency>
63 
64         <dependency>
65             <groupId>org.springframework.ai</groupId>
66             <artifactId>spring-ai-starter-model-openai</artifactId>
67         </dependency>
68     </dependencies>
69 
70 </project>

3、设置application.yaml

server:
  port: 80

spring:
  application:
    name: iFly-openai-chat-demo
  ai:
    openai:
      api-key: apikey值:apisecret值  # ws协议的apikey和apisecret 按照ak:sk格式拼接
      base-url: https://spark-api-open.xf-yun.com # 不同模型需选择对应的base-url
      chat:
        options:
          model: lite

4、整个程序结构如下图所示：

5、编写聊天处理类ChatWithController.java

 1 @Controller
 2 public class ChatWithController {
 3     private final ChatModel iFlyOpenAiChatModel;
 4 
 5     public ChatWithController(ChatModel chatModel) {
 6         this.iFlyOpenAiChatModel = chatModel;
 7     }
 8 
 9     // 跳转前端页面
10     @RequestMapping("/")
11     public String index() {
12         return "index";
13     }
14 
15     // 和讯飞星火大模型Spark Lite对话
16     @RequestMapping(value = "/chat", produces = "application/json")
17     public ResponseEntity<?> sendHttpToSpark(@RequestBody Map<String, String> map) {
18         // 获取前端输入的对话内容
19         String prompt = map.get("message");
20 
21         // 获取星火大模型反馈
22         String responseContent = iFlyOpenAiChatModel.call(new Prompt(prompt)).getResult().getOutput().getText();
23 
24         Map<String, Object> response = new HashMap<>();
25         response.put("response", responseContent);
26 
27         return ResponseEntity.ok(response);
28     }
29 }

6、编写前端交互页面index.html

  1 <!DOCTYPE html>
  2 <html lang="zh-CN">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6     <title>AI 智能助手</title>
  7     <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
  8     <style>
  9         :root {
 10             --primary-color: #4a90e2;
 11             --secondary-color: #f5f5f5;
 12             --success-color: #34d399;
 13             --error-color: #ef4444;
 14         }
 15 
 16         * {
 17             box-sizing: border-box;
 18             margin: 0;
 19             padding: 0;
 20         }
 21 
 22         body {
 23             font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
 24             background: #f0f2f5;
 25             min-height: 100vh;
 26         }
 27 
 28         .container {
 29             max-width: 1200px;
 30             margin: 0 auto;
 31             padding: 20px;
 32         }
 33 
 34         .chat-container {
 35             background: white;
 36             border-radius: 12px;
 37             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 38             height: 80vh;
 39             display: flex;
 40             flex-direction: column;
 41         }
 42 
 43         #chat-box {
 44             flex: 1;
 45             overflow-y: auto;
 46             padding: 20px;
 47             scroll-behavior: smooth;
 48         }
 49 
 50         .message {
 51             display: flex;
 52             gap: 12px;
 53             margin-bottom: 16px;
 54         }
 55 
 56         .message.user {
 57             flex-direction: row-reverse;
 58         }
 59 
 60         .avatar {
 61             width: 40px;
 62             height: 40px;
 63             border-radius: 50%;
 64             background: var(--secondary-color);
 65             display: flex;
 66             align-items: center;
 67             justify-content: center;
 68             flex-shrink: 0;
 69         }
 70 
 71         .message-content {
 72             max-width: 70%;
 73             padding: 12px 16px;
 74             border-radius: 12px;
 75             position: relative;
 76         }
 77 
 78         .user .message-content {
 79             background: var(--primary-color);
 80             color: white;
 81             border-radius: 12px 12px 0 12px;
 82         }
 83 
 84         .bot .message-content {
 85             background: var(--secondary-color);
 86             border-radius: 12px 12px 12px 0;
 87         }
 88 
 89         .input-area {
 90             border-top: 1px solid #eee;
 91             padding: 16px;
 92             display: flex;
 93             gap: 12px;
 94             background: white;
 95         }
 96 
 97         #user-input {
 98             flex: 1;
 99             padding: 12px;
100             border: 1px solid #e2e8f0;
101             border-radius: 8px;
102             font-size: 16px;
103             transition: all 0.3s ease;
104         }
105 
106         #user-input:focus {
107             outline: none;
108             border-color: var(--primary-color);
109             box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
110         }
111 
112         button {
113             padding: 12px 24px;
114             background: var(--primary-color);
115             color: white;
116             border: none;
117             border-radius: 8px;
118             cursor: pointer;
119             transition: all 0.2s ease;
120             display: flex;
121             align-items: center;
122             gap: 8px;
123         }
124 
125         button:hover {
126             background: #357abd;
127             transform: translateY(-1px);
128         }
129 
130         button:disabled {
131             background: #94a3b8;
132             cursor: not-allowed;
133         }
134 
135         @media (max-width: 768px) {
136             .container {
137                 padding: 10px;
138             }
139 
140             .message-content {
141                 max-width: 85%;
142             }
143         }
144     </style>
145 </head>
146 <body>
147 <div class="container">
148     <h1 style="margin-bottom: 20px; color: #1e293b;">AI 智能助手 <i class="fas fa-robot"></i></h1>
149 
150     <div class="chat-container">
151         <div id="chat-box">
152             <div class="message bot">
153                 <div class="avatar"><i class="fas fa-robot"></i></div>
154                 <div class="message-content">您好！我是智能助手，可以回答各种问题...</div>
155             </div>
156         </div>
157 
158         <div class="input-area">
159             <input type="text" id="user-input" placeholder="输入消息...">
160             <button onclick="sendMessage()" id="send-btn">
161                 <i class="fas fa-paper-plane"></i> 发送
162             </button>
163         </div>
164     </div>
165 </div>
166 
167 <script>
168     let isSending = false
169 
170     // 消息处理
171     async function sendMessage() {
172         if (isSending) return
173 
174         const input = document.getElementById('user-input')
175         const message = input.value.trim()
176         if (!message) return
177 
178         isSending = true
179         input.disabled = true
180         document.getElementById('send-btn').disabled = true
181 
182         try {
183             appendMessage(message, 'user')
184             input.value = ''
185 
186             const response = await fetch('/chat', {
187                 method: 'POST',
188                 headers: {'Content-Type': 'application/json'},
189                 body: JSON.stringify({message})
190             })
191 
192             const data = await response.json()
193             if (response.ok) {
194                 appendMessage(data.response, 'bot')
195             } else {
196                 appendMessage(`错误：${data.error}`, 'bot')
197             }
198         } catch (error) {
199             appendMessage('网络请求失败', 'bot')
200         } finally {
201             isSending = false
202             input.disabled = false
203             document.getElementById('send-btn').disabled = false
204             input.focus()
205         }
206     }
207 
208     function appendMessage(message, sender) {
209         const chatBox = document.getElementById('chat-box')
210         const isUser = sender === 'user'
211 
212         const messageEl = document.createElement('div')
213         messageEl.className = `message ${isUser ? 'user' : 'bot'}`
214         messageEl.innerHTML = `
215                 <div class="avatar">
216                     ${isUser ? '<i class="fas fa-user"></i>' : '<i class="fas fa-robot"></i>'}
217                 </div>
218                 <div class="message-content">${message}</div>
219             `
220 
221         chatBox.appendChild(messageEl)
222         chatBox.scrollTop = chatBox.scrollHeight
223     }
224 
225     // 回车发送
226     document.getElementById('user-input').addEventListener('keypress', (e) => {
227         if (e.key === 'Enter' && !e.shiftKey) {
228             e.preventDefault()
229             sendMessage()
230         }
231     })
232 </script>
233 </body>
234 </html>

posted @ 2025-11-11 11:38 {name:"代码屠夫"} 阅读(3) 评论(0) 收藏举报

刷新页面返回顶部

iflytek

{name:"代码屠夫"}

【原】无脑操作：SpringAI + 讯飞星火大模型（OpenAI接口方式）实现简单智能对话

公告