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: 80spring:application:name: iFly-openai-chat-demoai:openai:api-key: apikey值:apisecret值 # ws协议的apikey和apisecret 按照ak:sk格式拼接base-url: https://spark-api-open.xf-yun.com # 不同模型需选择对应的base-urlchat: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>
