Commit 0109100bd26d4ae969d47ddfaf046e8b4ff2a69c
1 parent
1c91a4fd
1
Showing
1 changed file
with
16 additions
and
252 deletions
src/main/resources/static/real_control_v2/zndd/deepseek/deepseek.html
| 1 | -<div class="uk-modal ct-form-modal" id="tts-config-modal"> | 1 | +<div class="uk-modal ct-form-modal deepseek" id="tts-config-modal"> |
| 2 | + | ||
| 3 | + | ||
| 4 | + | ||
| 2 | <div class="uk-modal-dialog" style="width: 1030px;"> | 5 | <div class="uk-modal-dialog" style="width: 1030px;"> |
| 3 | <a href="" class="uk-modal-close uk-close"></a> | 6 | <a href="" class="uk-modal-close uk-close"></a> |
| 4 | <div class="uk-modal-header"> | 7 | <div class="uk-modal-header"> |
| 5 | <h2>调度助手(deepseek)</h2></div> | 8 | <h2>调度助手(deepseek)</h2></div> |
| 6 | - | ||
| 7 | - <div class="chat-container"> | ||
| 8 | - <div class="messages-container" id="messages"></div> | ||
| 9 | - <div class="typing-indicator" id="typing" style="display: none;">DeepSeek 正在思考输入...</div> | ||
| 10 | - <div class="input-container"> | ||
| 11 | - <input type="text" id="input" placeholder="输入你的问题..."> | ||
| 12 | - <button onclick="sendMessage()">发送</button> | ||
| 13 | - </div> | ||
| 14 | - </div> | 9 | + <iframe |
| 10 | + src="http://192.168.168.141/chatbot/MVrlx76fhT2uuFYA" | ||
| 11 | + style="width: 100%; height: 100%; min-height: 700px" | ||
| 12 | + frameborder="0" | ||
| 13 | + allow="microphone"> | ||
| 14 | + </iframe> | ||
| 15 | </div> | 15 | </div> |
| 16 | <style> | 16 | <style> |
| 17 | - | ||
| 18 | - | ||
| 19 | - .chat-container { | ||
| 20 | - max-width: 800px; | ||
| 21 | - margin: 0 auto; | ||
| 22 | - background-color: white; | ||
| 23 | - border-radius: 10px; | ||
| 24 | - box-shadow: 0 2px 10px rgba(0,0,0,0.1); | ||
| 25 | - } | ||
| 26 | - | ||
| 27 | - .messages-container { | ||
| 28 | - height: 500px; | ||
| 29 | - overflow-y: auto; | ||
| 30 | - padding: 20px; | ||
| 31 | - } | ||
| 32 | - | ||
| 33 | - .message { | ||
| 34 | - display: flex; | ||
| 35 | - margin-bottom: 15px; | ||
| 36 | - } | ||
| 37 | - | ||
| 38 | - .message.user { | ||
| 39 | - justify-content: flex-end; | ||
| 40 | - } | ||
| 41 | - | ||
| 42 | - .message.bot { | ||
| 43 | - justify-content: flex-start; | 17 | + .deepseek .uk-modal-dialog{ |
| 18 | + padding:0px | ||
| 44 | } | 19 | } |
| 45 | - | ||
| 46 | - .bubble { | ||
| 47 | - max-width: 70%; | ||
| 48 | - padding: 12px 18px; | ||
| 49 | - border-radius: 15px; | ||
| 50 | - line-height: 1.4; | ||
| 51 | - white-space: pre-line; | ||
| 52 | - } | ||
| 53 | - | ||
| 54 | - .user .bubble { | ||
| 55 | - background-color: #007bff; | ||
| 56 | - color: white; | ||
| 57 | - } | ||
| 58 | - | ||
| 59 | - .bot .bubble { | ||
| 60 | - background-color: #e9ecef; | ||
| 61 | - color: black; | ||
| 62 | - } | ||
| 63 | - | ||
| 64 | - .input-container { | ||
| 65 | - display: flex; | ||
| 66 | - padding: 20px; | ||
| 67 | - border-top: 1px solid #ddd; | 20 | + .deepseek .uk-modal-dialog>.uk-close:first-child{ |
| 21 | + margin:0px; | ||
| 68 | } | 22 | } |
| 69 | - | ||
| 70 | - input[type="text"] { | ||
| 71 | - flex: 1; | ||
| 72 | - padding: 12px; | ||
| 73 | - border: 1px solid #ddd; | ||
| 74 | - border-radius: 5px; | ||
| 75 | - margin-right: 10px; | 23 | + .deepseek .uk-modal-header{ |
| 24 | + margin:0px; | ||
| 76 | } | 25 | } |
| 77 | 26 | ||
| 78 | - button { | ||
| 79 | - padding: 12px 24px; | ||
| 80 | - background-color: #007bff; | ||
| 81 | - color: white; | ||
| 82 | - border: none; | ||
| 83 | - border-radius: 5px; | ||
| 84 | - cursor: pointer; | ||
| 85 | - } | ||
| 86 | 27 | ||
| 87 | - button:hover { | ||
| 88 | - background-color: #0056b3; | ||
| 89 | - } | ||
| 90 | 28 | ||
| 91 | - .typing-indicator { | ||
| 92 | - padding: 0 20px 10px; | ||
| 93 | - color: #666; | ||
| 94 | - font-style: italic; | ||
| 95 | - } | ||
| 96 | </style> | 29 | </style> |
| 97 | - <script> | ||
| 98 | - const messagesContainer = document.getElementById('messages'); | ||
| 99 | - const input = document.getElementById('input'); | ||
| 100 | - const typingIndicator = document.getElementById('typing'); | ||
| 101 | - | ||
| 102 | - // 处理回车键 | ||
| 103 | - input.addEventListener('keypress', (e) => { | ||
| 104 | - if (e.key === 'Enter') { | ||
| 105 | - sendMessage(); | ||
| 106 | - } | ||
| 107 | - }); | ||
| 108 | - | ||
| 109 | - function sendMessage() { | ||
| 110 | - const message = input.value.trim(); | ||
| 111 | - if (!message) return; | ||
| 112 | - | ||
| 113 | - // 添加用户消息 | ||
| 114 | - addMessage(message, 'user'); | ||
| 115 | - input.value = ''; | ||
| 116 | - var tEnum ={ | ||
| 117 | - xl_1 : "线", | ||
| 118 | - xl_2 : "路", | ||
| 119 | - yyqk : "营运情况", | ||
| 120 | - } | ||
| 121 | - | ||
| 122 | - // 模拟AI回复 | ||
| 123 | - let date = { | ||
| 124 | - "message": message/*"遇到大客流帮我推荐一种方案"*/, //消息 | ||
| 125 | - "mode": "query" //chat聊天 query知识库查询 选一个 | ||
| 126 | - } | ||
| 127 | - //线路 | ||
| 128 | - if ((message.includes(tEnum.xl_1) && message.includes(tEnum.yyqk)) || (message.includes(tEnum.xl_2) && message.includes(tEnum.yyqk))){ | ||
| 129 | - bcyyqk(message); | ||
| 130 | - }else { | ||
| 131 | - subtim(date); | ||
| 132 | - } | ||
| 133 | - showTypingIndicator(); | ||
| 134 | - | ||
| 135 | - | ||
| 136 | - | ||
| 137 | - } | ||
| 138 | - | ||
| 139 | - function addMessage(text, sender) { | ||
| 140 | - const messageDiv = document.createElement('div'); | ||
| 141 | - messageDiv.className = `message ${sender}`; | ||
| 142 | - | ||
| 143 | - const bubble = document.createElement('div'); | ||
| 144 | - bubble.className = 'bubble'; | ||
| 145 | - bubble.textContent = text; | ||
| 146 | - if (sender == 'bot'){ | ||
| 147 | - bubble.textContent = ''; | ||
| 148 | - tests = text | ||
| 149 | - bubbles = bubble; | ||
| 150 | - char_index = 0; | ||
| 151 | - //type(text); | ||
| 152 | - } | ||
| 153 | - messageDiv.appendChild(bubble); | ||
| 154 | - messagesContainer.appendChild(messageDiv); | ||
| 155 | - | ||
| 156 | - // 自动滚动到底部 | ||
| 157 | - messagesContainer.scrollTop = messagesContainer.scrollHeight; | ||
| 158 | - } | ||
| 159 | - var tests ="" | ||
| 160 | - var bubbles; | ||
| 161 | - char_index = 0 | ||
| 162 | - | ||
| 163 | - function bcyyqk(message){ | ||
| 164 | - $.get("/logZndd/schDeepSeep",{message:message},function (re){ | ||
| 165 | - if (re.code == 200){ | ||
| 166 | - //根据返回的参数组成一句话，再让deepseep扩充一下 | ||
| 167 | - var mes = "根据后面这些话，解析并优化一下,"+"线路："+re.xlName+",总班次数"+re.bcs | ||
| 168 | - +",进场班次数"+re.inbcs+",出场班次数"+re.outbcs+",临加班次数"+re.ljbcs+",正常班次数"+re.normalbcs | ||
| 169 | - +",区间班次"+re.regionbcs+",未执行班次数"+re.wzxbcs+",正在执行班次数"+re.zzxbcs+",已执行班次数"+re.yzxbcs | ||
| 170 | - +",烂班班次数" +re.lbbcs; | ||
| 171 | - | ||
| 172 | - console.log(mes); | ||
| 173 | - var datas = { | ||
| 174 | - "message": mes/*"遇到大客流帮我推荐一种方案"*/, //消息 | ||
| 175 | - "mode": "chat" //chat聊天 query知识库查询 选一个 | ||
| 176 | - } | ||
| 177 | - | ||
| 178 | - subtim(datas); | ||
| 179 | - }else { | ||
| 180 | - // 弹出添加失败提示消息 | ||
| 181 | - layer.msg('无法找到输入线路...'); | ||
| 182 | - hideTypingIndicator(); | ||
| 183 | - } | ||
| 184 | - }) | ||
| 185 | - } | ||
| 186 | - | ||
| 187 | - | ||
| 188 | - function subtim(date){ | ||
| 189 | - | ||
| 190 | - const apiUrl = 'http://61.169.120.202:3001/api/v1/workspace/deep/stream-chat'; // 替换为实际接口地址 | ||
| 191 | - let xhr = new XMLHttpRequest(); | ||
| 192 | - xhr.open('POST', apiUrl, true); | ||
| 193 | - // 设置请求头 | ||
| 194 | - xhr.setRequestHeader('Content-Type', 'application/json'); | ||
| 195 | - xhr.setRequestHeader('Authorization', `Bearer 701MSMS-JNS4WNG-JSDY4GH-RHD93NM`); | ||
| 196 | - | ||
| 197 | - addMessage("", 'bot'); | ||
| 198 | - var ins = 0; | ||
| 199 | - // 监听数据流 | ||
| 200 | - xhr.onprogress = function (event) { | ||
| 201 | - // 获取当前接收的数据片段 | ||
| 202 | - const responseText = xhr.responseText; | ||
| 203 | - const lines = responseText.split('\n').filter(line => line !== ''); | ||
| 204 | - try { | ||
| 205 | - for (var i = 0 ; i < lines.length ; i ++) { | ||
| 206 | - if (i >= ins || ins == 0) { | ||
| 207 | - ins = i +1; | ||
| 208 | - var line = lines[i].replace(/^data: /, ''); | ||
| 209 | - const data = JSON.parse(line); | ||
| 210 | - let txt = bubbles.textContent; | ||
| 211 | - bubbles.textContent += data.textResponse!= null? data.textResponse :""; | ||
| 212 | - //结束 | ||
| 213 | - if (data.type == "finalizeResponseStream"){ | ||
| 214 | - hideTypingIndicator(); | ||
| 215 | - } | ||
| 216 | - } | ||
| 217 | - } | ||
| 218 | - } catch (e) { | ||
| 219 | - console.error('解析错误:', e); | ||
| 220 | - } | ||
| 221 | - }; | ||
| 222 | - | ||
| 223 | - // 发送请求 | ||
| 224 | - const requestBody = JSON.stringify(date); | ||
| 225 | - xhr.send(requestBody); | ||
| 226 | - | ||
| 227 | - // 错误处理 | ||
| 228 | - xhr.onerror = function () { | ||
| 229 | - console.error('请求失败'); | ||
| 230 | - }; | ||
| 231 | - | ||
| 232 | - | ||
| 233 | - ///一次性请求的方法，慢弃用。 | ||
| 234 | - /* // 提交 | ||
| 235 | - $.ajax({ | ||
| 236 | - type: 'POST', | ||
| 237 | - url: "http://192.168.168.141:3001/api/v1/workspace/deep/stream-chat", | ||
| 238 | - contentType: "application/json", | ||
| 239 | - headers: { | ||
| 240 | - authorization: "Bearer 701MSMS-JNS4WNG-JSDY4GH-RHD93NM", | ||
| 241 | - }, | ||
| 242 | - timeout: 0, | ||
| 243 | - data: JSON.stringify(date), | ||
| 244 | - success: function(datas){ | ||
| 245 | - setTimeout(() => { | ||
| 246 | - hideTypingIndicator(); | ||
| 247 | - addMessage(datas.textResponse, 'bot'); | ||
| 248 | - }, 1500); | ||
| 249 | - }, | ||
| 250 | - error: function(xhr, type){ | ||
| 251 | - alert('错误：TODO'); | ||
| 252 | - } | ||
| 253 | - });*/ | ||
| 254 | - } | ||
| 255 | - | ||
| 256 | - | ||
| 257 | - function showTypingIndicator() { | ||
| 258 | - typingIndicator.style.display = 'block'; | ||
| 259 | - messagesContainer.scrollTop = messagesContainer.scrollHeight; | ||
| 260 | - } | ||
| 261 | - | ||
| 262 | - function hideTypingIndicator() { | ||
| 263 | - typingIndicator.style.display = 'none'; | ||
| 264 | - } | ||
| 265 | 30 | ||
| 266 | - </script> | ||
| 267 | </div> | 31 | </div> |
| 268 | 32 |