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

大家好，我是讯享网，很高兴认识大家。这里提供最前沿的Ai技术和互联网信息。
 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   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   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() , 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 206  } 207 208 function appendMessage(message, sender)  214  messageEl.innerHTML = 215 <div class=“avatar”> 216  \({isUser ? '' : ''} 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) => 231  }) 232  
                    script> 233  
                     body> 234  
                      html>
【原】无脑操作：SpringAI + 讯飞星火大模型（OpenAI接口方式）实现简单智能对话

相关推荐
