Z-Image-Turbo-rinaiqiao-huiyewunv 跨平台交互设计JavaScript动态页面与模型实时交互案例最近在折腾一些前端和AI结合的小项目发现一个挺有意思的事儿很多朋友觉得AI模型部署好了做个简单的接口调用就算完事了。但真正能让用户“哇”一声的往往是那个交互的过程——那种输入文字页面上的内容就跟着实时变化、仿佛模型在和你对话的感觉。今天想和大家分享的就是这样一个纯前端JavaScript项目。它不涉及复杂的后端架构核心就是通过浏览器里的JavaScript与后台的Z-Image-Turbo-rinaiqiao-huiyewunv模型服务“手拉手”实现一个低延迟的实时交互界面。我们以构建一个“交互式故事生成器”为例看看怎么让用户的每一个输入都立刻变成屏幕上流淌的创意文字。1. 项目效果核心展示当输入框遇见AI大脑在深入代码之前我们先看看最终要实现什么样的效果。这能帮你快速判断这个案例是不是你正需要的。想象一下这样一个页面左侧是一个简洁的文本输入框你在这里写下故事的开头比如“在一个雨夜侦探推开了那扇吱呀作响的木门...”。几乎在你敲下回车或句号的瞬间右侧的内容区域就开始“生长”出新的文字。模型基于你的开头续写出接下来的情节“门后是一片漆黑只有远处壁炉里微弱的火光映照出一个坐在摇椅上的模糊身影。”整个过程没有页面刷新没有等待转圈文字就像流水一样自然涌现。你可以继续在左侧添加新的指令或描述比如“让侦探发现一把钥匙”右侧的故事又会实时地沿着这个新方向续写下去。这种体验的关键在于“实时”和“低延迟”。它不再是传统的“提交-等待-返回”模式而是变成了“输入-即时反馈”的对话模式。对于故事创作、头脑风暴、甚至是代码补全稍后我们会提到变体这类场景这种流畅的交互能极大地提升沉浸感和创作效率。下面这张简单的对比图可以帮你理解传统方式和实时交互方式的区别交互方式用户操作体验感受适用场景传统请求/响应输入完整内容 - 点击提交 - 等待 - 查看结果割裂感强等待中断思路内容审核、批量处理、不要求即时性的任务实时流式交互边输入边看到模型生成的补充内容流畅、自然像在与一个智能助手协同工作创意写作、对话聊天、代码补全、实时翻译我们这个案例要打造的就是第二种体验。接下来我们看看怎么用JavaScript把它实现出来。2. 技术方案与交互设计思路要实现上面描述的效果我们需要解决两个核心问题第一如何建立前端与AI服务之间的实时通信通道第二如何在前端优雅地处理并展示持续到达的数据流。2.1 通信技术选型为什么是WebSocket前端与后端服务实时通信常见的有轮询、长轮询、Server-Sent Events (SSE) 和 WebSocket 几种方式。对于AI模型生成这种需要双向、低延迟、持续流式数据的场景WebSocket通常是更优选择。轮询/长轮询需要不断主动询问延迟高且浪费资源不适合实时流。Server-Sent Events (SSE)很棒但它只允许服务器向客户端单向推送数据。在我们的故事生成器里虽然主要是服务器推送生成文本但建立连接、传递初始参数等仍需客户端主动发送信息纯SSE略显不便。WebSocket它在单个TCP连接上提供全双工通信。连接一旦建立客户端和服务器可以随时相互发送数据几乎没有协议开销延迟极低。这完美匹配了我们“用户随时输入模型持续输出”的需求。因此我们这个案例将采用 WebSocket 作为通信基石。你需要确保你的 Z-Image-Turbo-rinaiqiao-huiyewunv 模型服务端已经暴露了一个 WebSocket 端点例如ws://your-model-server/ws能够接收文本并流式返回生成的token。2.2 前端交互与UI设计核心技术通道确定了前端的任务就是用好这个通道。我们的设计围绕以下几个核心点展开即时触发为了获得“实时”感我们不能等到用户写完整段话再发送。这里采用一个简单的策略监听输入框的特定事件如onInput或onKeyUp并在用户短暂停止输入后例如使用防抖debounce自动将当前文本发送给模型。你也可以设计一个“手动触发”按钮作为备选。流式渲染服务器返回的不是一整段完整文本而是一个个词或token。前端需要像“打字机效果”一样将这些token逐个追加到显示区域营造出内容正在被实时创作出来的感觉。这比等待全部生成完再一次性显示要生动得多。状态与反馈在通信过程中界面需要给用户明确的反馈。比如连接建立时、数据接收中、发生错误时都应该通过UI元素如状态指示灯、加载动画、提示信息告知用户。会话管理为了保持故事的连贯性每次请求可能需要携带之前的部分上下文让模型知道“故事讲到哪儿了”。这可以通过在客户端维护一个会话历史数组并在每次请求时将其一并发送来实现。有了这些设计思路打底我们就可以开始动手编码了。3. 从零构建JavaScript实时交互页面我们从一个最简单的HTML页面开始逐步添加功能。请将下面的代码保存为一个.html文件用浏览器打开即可运行当然你需要将WebSocket地址替换成你实际的模型服务地址。3.1 基础页面结构首先搭建一个极简的双栏布局界面。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title实时交互式故事生成器/title style * { box-sizing: border-box; margin: 0; padding: 0; font-family: Segoe UI, system-ui, sans-serif; } body { background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); min-height: 100vh; padding: 20px; } .container { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 25px; } header { text-align: center; padding: 20px; } h1 { color: #2c3e50; margin-bottom: 10px; } .subtitle { color: #7f8c8d; font-size: 1.1em; } .main-content { display: flex; flex-wrap: wrap; gap: 25px; } .panel { flex: 1; min-width: 300px; background: white; border-radius: 16px; padding: 25px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; } .panel h2 { color: #3498db; border-bottom: 2px solid #eee; padding-bottom: 10px; margin-bottom: 20px; } #inputArea { flex: 1; border: 2px solid #e0e0e0; border-radius: 10px; padding: 18px; font-size: 16px; line-height: 1.6; resize: none; transition: border-color 0.3s; } #inputArea:focus { outline: none; border-color: #3498db; } #outputArea { flex: 1; border: 2px dashed #e0e0e0; border-radius: 10px; padding: 18px; font-size: 16px; line-height: 1.6; background-color: #fafafa; overflow-y: auto; min-height: 300px; white-space: pre-wrap; } .controls { display: flex; gap: 15px; margin-top: 20px; flex-wrap: wrap; } button { padding: 12px 24px; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; transition: all 0.2s; } #sendBtn { background-color: #2ecc71; color: white; } #sendBtn:hover { background-color: #27ae60; } #clearBtn { background-color: #e74c3c; color: white; } #clearBtn:hover { background-color: #c0392b; } #connectBtn { background-color: #3498db; color: white; } #connectBtn:hover { background-color: #2980b9; } button:disabled { background-color: #bdc3c7 !important; cursor: not-allowed; } .status-bar { margin-top: 20px; padding: 12px; border-radius: 8px; font-size: 0.9em; display: flex; align-items: center; gap: 10px; } #statusIndicator { width: 12px; height: 12px; border-radius: 50%; background-color: #95a5a6; } .status-connected { background-color: #2ecc71 !important; } .status-disconnected { background-color: #e74c3c !important; } .status-connecting { background-color: #f39c12 !important; animation: pulse 1.5s infinite; } keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } /style /head body div classcontainer header h1 实时交互式故事生成器/h1 p classsubtitle输入你的创意开头让AI为你实时续写接下来的故事.../p /header div classmain-content div classpanel h2 你的创意输入/h2 textarea idinputArea placeholder在这里写下你的故事开头例如在遥远的银河系边缘有一个从未被记载的星球... 输入后故事将自动开始生长。/textarea div classcontrols button idconnectBtn连接AI服务/button button idsendBtn disabled发送并生成/button button idclearBtn清空故事/button /div div classstatus-bar div idstatusIndicator/div span idstatusText状态等待连接/span /div /div div classpanel h2 AI生成的故事/h2 div idoutputArea连接成功后你输入的故事将在这里被实时续写.../div /div /div /div script // 我们的JavaScript代码将写在这里 /script /body /html现在你有了一个看起来不错的静态界面。左侧是输入区右侧是输出区下方有控制按钮和状态栏。接下来我们要注入灵魂——JavaScript逻辑。3.2 实现WebSocket连接与流式渲染在script标签内我们添加核心逻辑。// 替换成你实际的Z-Image-Turbo-rinaiqiao-huiyewunv模型WebSocket服务地址 const MODEL_WS_URL ws://localhost:8000/ws; // 在实际项目中这里应该是你部署好的服务地址例如wss://your-domain.com/ai-ws let socket null; let isConnected false; // 用于存储当前会话的上下文让模型知道故事背景 let conversationContext []; // DOM 元素 const inputArea document.getElementById(inputArea); const outputArea document.getElementById(outputArea); const connectBtn document.getElementById(connectBtn); const sendBtn document.getElementById(sendBtn); const clearBtn document.getElementById(clearBtn); const statusIndicator document.getElementById(statusIndicator); const statusText document.getElementById(statusText); // 更新UI状态 function updateStatus(status, message) { statusIndicator.className ; switch(status) { case connected: statusIndicator.classList.add(status-connected); statusText.textContent 状态已连接 - ${message}; connectBtn.disabled true; sendBtn.disabled false; break; case disconnected: statusIndicator.classList.add(status-disconnected); statusText.textContent 状态未连接 - ${message}; connectBtn.disabled false; sendBtn.disabled true; break; case connecting: statusIndicator.classList.add(status-connecting); statusText.textContent 状态连接中...; connectBtn.disabled true; sendBtn.disabled true; break; case error: statusIndicator.classList.add(status-disconnected); statusText.textContent 状态错误 - ${message}; connectBtn.disabled false; sendBtn.disabled true; break; } } // 建立WebSocket连接 function connectWebSocket() { if (socket socket.readyState WebSocket.OPEN) { console.log(WebSocket 已经连接); return; } updateStatus(connecting, ); socket new WebSocket(MODEL_WS_URL); socket.onopen function(event) { console.log(WebSocket 连接成功); isConnected true; updateStatus(connected, 可以开始创作了); // 连接成功后可以发送一个初始问候或测试消息 // socket.send(JSON.stringify({type: greeting, message: Hello AI!})); }; socket.onmessage function(event) { // 假设服务器返回的是JSON格式的流式数据 try { const data JSON.parse(event.data); // 根据你的服务端协议解析数据这里假设有 token 和 is_finished 字段 if (data.token) { // 流式渲染将收到的token逐个追加到输出区域 outputArea.textContent data.token; // 自动滚动到底部方便查看最新内容 outputArea.scrollTop outputArea.scrollHeight; } if (data.is_finished) { // 本次生成结束可以做一些清理或状态更新 console.log(本次故事片段生成完毕。); // 将本次完整的生成内容加入到上下文中以便后续连贯 const fullGeneratedText outputArea.textContent; // 这里简化处理实际可能需更精细的上下文管理 conversationContext.push({role: assistant, content: fullGeneratedText}); } } catch (error) { // 如果服务端返回的是纯文本流可以直接追加 outputArea.textContent event.data; outputArea.scrollTop outputArea.scrollHeight; } }; socket.onerror function(error) { console.error(WebSocket 错误:, error); updateStatus(error, 连接发生错误); isConnected false; }; socket.onclose function(event) { console.log(WebSocket 连接关闭); isConnected false; updateStatus(disconnected, 连接已断开); socket null; }; } // 发送用户输入到AI模型 function sendToModel() { if (!isConnected || !socket) { alert(请先连接AI服务); return; } const userInput inputArea.value.trim(); if (!userInput) { alert(请输入一些内容吧); return; } // 将用户输入加入到上下文 conversationContext.push({role: user, content: userInput}); // 构建请求数据格式需匹配你的模型服务端API const requestData { prompt: userInput, // 可以携带更多参数如max_tokens, temperature等 // context: conversationContext.slice(-5), // 发送最近5轮对话作为上下文 stream: true // 明确要求流式输出 }; // 清空输入框准备接收新的输入可选根据交互设计决定 // inputArea.value ; // 在输出区域添加一个提示表示新的生成开始了 outputArea.textContent \n\n--- [基于你的输入开始续写] ---\n; // 发送请求 socket.send(JSON.stringify(requestData)); console.log(已发送请求:, requestData); } // 设置自动发送的防抖函数可选功能 let debounceTimer; function setupAutoSend() { inputArea.addEventListener(input, function() { clearTimeout(debounceTimer); // 设置防抖延迟例如用户停止输入1.5秒后自动发送 debounceTimer setTimeout(() { if (inputArea.value.trim().length 10) { // 至少输入10个字符才触发 sendToModel(); } }, 1500); }); } // 清空输出和上下文 function clearStory() { if (confirm(确定要清空当前生成的故事和上下文吗)) { outputArea.textContent ; conversationContext []; inputArea.value ; outputArea.textContent 故事已清空。输入新的开头开始创作吧; } } // 绑定按钮事件 connectBtn.addEventListener(click, connectWebSocket); sendBtn.addEventListener(click, sendToModel); clearBtn.addEventListener(click, clearStory); // 初始化可以设置自动发送功能 // setupAutoSend(); // 页面加载时可以尝试自动连接如果服务地址固定且允许 // window.addEventListener(load, () { // connectWebSocket(); // });3.3 代码变体打造一个实时代码补全工具同样的架构只需稍作修改就能变身成一个酷炫的“代码补全工具”。想象一下在代码编辑器里输入函数名的一部分右侧或下方实时显示模型建议的完整代码块。主要修改点UI调整将inputArea和outputArea换成更适合代码编辑和显示的组件比如使用CodeMirror或Monaco EditorVS Code 使用的编辑器。交互逻辑触发自动补全的逻辑可以更精细。例如监听编辑器内容变化当检测到特定符号如.、(或空格后提取当前行或上一个单词作为提示词发送。数据格式发送给模型的数据结构可能不同提示词prompt需要围绕代码上下文构建。渲染方式补全建议的渲染可能不是简单的追加而是以下拉列表、悬浮框或行内提示的形式展示。这里提供一个概念性的修改片段// 假设使用了某个代码编辑器库 const editor CodeMirror.fromTextArea(document.getElementById(codeInput), { lineNumbers: true, mode: javascript }); // 监听编辑器变化实现智能补全触发 editor.on(change, (instance, changeObj) { const cursor instance.getCursor(); const lineContent instance.getLine(cursor.line); const textBeforeCursor lineContent.substring(0, cursor.ch); // 简单的触发逻辑当输入点号后获取前面的变量名 if (textBeforeCursor.endsWith(.)) { const potentialVar textBeforeCursor.match(/(\w)\.$/)?.[1]; if (potentialVar isConnected) { // 发送补全请求 const requestData { type: code_completion, prefix: textBeforeCursor, // 可以发送更多上下文如前后几行代码 suffix: instance.getLine(cursor.line).substring(cursor.ch) }; socket.send(JSON.stringify(requestData)); } } }); // 处理服务器返回的补全建议 socket.onmessage function(event) { const data JSON.parse(event.data); if (data.type completion_suggestions) { // 在编辑器附近显示一个补全建议下拉框 showCompletionWidget(data.suggestions); } };通过这样的改造你就拥有了一个具备实时AI代码补全能力的在线编辑器原型。这展示了同一套实时交互框架的强大适应性和扩展性。4. 效果体验与优化思考把上面的代码跑起来记得将MODEL_WS_URL指向你真正的服务你应该能体验到开头描述的那种流畅的交互感。输入文字看着故事一点点“长”出来这个过程本身就有一种独特的魅力。在实际使用和开发中你可能会遇到一些可以进一步优化的点连接稳定性网络环境复杂WebSocket连接可能会中断。需要增加自动重连机制在onclose事件中尝试间隔重连。上下文管理我们这个简单例子里的conversationContext数组管理比较粗糙。对于长故事需要设计更智能的上下文窗口比如只保留最近N条消息或者对历史消息进行摘要以适配模型的最大上下文长度。性能与节流如果用户输入非常频繁防抖可能不够。需要结合节流throttle和更智能的触发判断避免向服务器发送过多无效请求。错误处理与用户提示除了连接错误还要处理服务器返回的业务错误如生成失败、内容过滤等并在前端友好地提示用户。UI/UX增强可以增加生成动画如闪烁的光标、支持Markdown渲染如果模型输出包含格式、提供多种生成风格创意/严谨/幽默的选择按钮等。把这些点做好你的实时交互应用就会从“能用”变得“好用”甚至“爱不释手”。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
Z-Image-Turbo-rinaiqiao-huiyewunv 跨平台交互设计：JavaScript动态页面与模型实时交互案例
Z-Image-Turbo-rinaiqiao-huiyewunv 跨平台交互设计JavaScript动态页面与模型实时交互案例最近在折腾一些前端和AI结合的小项目发现一个挺有意思的事儿很多朋友觉得AI模型部署好了做个简单的接口调用就算完事了。但真正能让用户“哇”一声的往往是那个交互的过程——那种输入文字页面上的内容就跟着实时变化、仿佛模型在和你对话的感觉。今天想和大家分享的就是这样一个纯前端JavaScript项目。它不涉及复杂的后端架构核心就是通过浏览器里的JavaScript与后台的Z-Image-Turbo-rinaiqiao-huiyewunv模型服务“手拉手”实现一个低延迟的实时交互界面。我们以构建一个“交互式故事生成器”为例看看怎么让用户的每一个输入都立刻变成屏幕上流淌的创意文字。1. 项目效果核心展示当输入框遇见AI大脑在深入代码之前我们先看看最终要实现什么样的效果。这能帮你快速判断这个案例是不是你正需要的。想象一下这样一个页面左侧是一个简洁的文本输入框你在这里写下故事的开头比如“在一个雨夜侦探推开了那扇吱呀作响的木门...”。几乎在你敲下回车或句号的瞬间右侧的内容区域就开始“生长”出新的文字。模型基于你的开头续写出接下来的情节“门后是一片漆黑只有远处壁炉里微弱的火光映照出一个坐在摇椅上的模糊身影。”整个过程没有页面刷新没有等待转圈文字就像流水一样自然涌现。你可以继续在左侧添加新的指令或描述比如“让侦探发现一把钥匙”右侧的故事又会实时地沿着这个新方向续写下去。这种体验的关键在于“实时”和“低延迟”。它不再是传统的“提交-等待-返回”模式而是变成了“输入-即时反馈”的对话模式。对于故事创作、头脑风暴、甚至是代码补全稍后我们会提到变体这类场景这种流畅的交互能极大地提升沉浸感和创作效率。下面这张简单的对比图可以帮你理解传统方式和实时交互方式的区别交互方式用户操作体验感受适用场景传统请求/响应输入完整内容 - 点击提交 - 等待 - 查看结果割裂感强等待中断思路内容审核、批量处理、不要求即时性的任务实时流式交互边输入边看到模型生成的补充内容流畅、自然像在与一个智能助手协同工作创意写作、对话聊天、代码补全、实时翻译我们这个案例要打造的就是第二种体验。接下来我们看看怎么用JavaScript把它实现出来。2. 技术方案与交互设计思路要实现上面描述的效果我们需要解决两个核心问题第一如何建立前端与AI服务之间的实时通信通道第二如何在前端优雅地处理并展示持续到达的数据流。2.1 通信技术选型为什么是WebSocket前端与后端服务实时通信常见的有轮询、长轮询、Server-Sent Events (SSE) 和 WebSocket 几种方式。对于AI模型生成这种需要双向、低延迟、持续流式数据的场景WebSocket通常是更优选择。轮询/长轮询需要不断主动询问延迟高且浪费资源不适合实时流。Server-Sent Events (SSE)很棒但它只允许服务器向客户端单向推送数据。在我们的故事生成器里虽然主要是服务器推送生成文本但建立连接、传递初始参数等仍需客户端主动发送信息纯SSE略显不便。WebSocket它在单个TCP连接上提供全双工通信。连接一旦建立客户端和服务器可以随时相互发送数据几乎没有协议开销延迟极低。这完美匹配了我们“用户随时输入模型持续输出”的需求。因此我们这个案例将采用 WebSocket 作为通信基石。你需要确保你的 Z-Image-Turbo-rinaiqiao-huiyewunv 模型服务端已经暴露了一个 WebSocket 端点例如ws://your-model-server/ws能够接收文本并流式返回生成的token。2.2 前端交互与UI设计核心技术通道确定了前端的任务就是用好这个通道。我们的设计围绕以下几个核心点展开即时触发为了获得“实时”感我们不能等到用户写完整段话再发送。这里采用一个简单的策略监听输入框的特定事件如onInput或onKeyUp并在用户短暂停止输入后例如使用防抖debounce自动将当前文本发送给模型。你也可以设计一个“手动触发”按钮作为备选。流式渲染服务器返回的不是一整段完整文本而是一个个词或token。前端需要像“打字机效果”一样将这些token逐个追加到显示区域营造出内容正在被实时创作出来的感觉。这比等待全部生成完再一次性显示要生动得多。状态与反馈在通信过程中界面需要给用户明确的反馈。比如连接建立时、数据接收中、发生错误时都应该通过UI元素如状态指示灯、加载动画、提示信息告知用户。会话管理为了保持故事的连贯性每次请求可能需要携带之前的部分上下文让模型知道“故事讲到哪儿了”。这可以通过在客户端维护一个会话历史数组并在每次请求时将其一并发送来实现。有了这些设计思路打底我们就可以开始动手编码了。3. 从零构建JavaScript实时交互页面我们从一个最简单的HTML页面开始逐步添加功能。请将下面的代码保存为一个.html文件用浏览器打开即可运行当然你需要将WebSocket地址替换成你实际的模型服务地址。3.1 基础页面结构首先搭建一个极简的双栏布局界面。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title实时交互式故事生成器/title style * { box-sizing: border-box; margin: 0; padding: 0; font-family: Segoe UI, system-ui, sans-serif; } body { background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); min-height: 100vh; padding: 20px; } .container { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 25px; } header { text-align: center; padding: 20px; } h1 { color: #2c3e50; margin-bottom: 10px; } .subtitle { color: #7f8c8d; font-size: 1.1em; } .main-content { display: flex; flex-wrap: wrap; gap: 25px; } .panel { flex: 1; min-width: 300px; background: white; border-radius: 16px; padding: 25px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; } .panel h2 { color: #3498db; border-bottom: 2px solid #eee; padding-bottom: 10px; margin-bottom: 20px; } #inputArea { flex: 1; border: 2px solid #e0e0e0; border-radius: 10px; padding: 18px; font-size: 16px; line-height: 1.6; resize: none; transition: border-color 0.3s; } #inputArea:focus { outline: none; border-color: #3498db; } #outputArea { flex: 1; border: 2px dashed #e0e0e0; border-radius: 10px; padding: 18px; font-size: 16px; line-height: 1.6; background-color: #fafafa; overflow-y: auto; min-height: 300px; white-space: pre-wrap; } .controls { display: flex; gap: 15px; margin-top: 20px; flex-wrap: wrap; } button { padding: 12px 24px; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; transition: all 0.2s; } #sendBtn { background-color: #2ecc71; color: white; } #sendBtn:hover { background-color: #27ae60; } #clearBtn { background-color: #e74c3c; color: white; } #clearBtn:hover { background-color: #c0392b; } #connectBtn { background-color: #3498db; color: white; } #connectBtn:hover { background-color: #2980b9; } button:disabled { background-color: #bdc3c7 !important; cursor: not-allowed; } .status-bar { margin-top: 20px; padding: 12px; border-radius: 8px; font-size: 0.9em; display: flex; align-items: center; gap: 10px; } #statusIndicator { width: 12px; height: 12px; border-radius: 50%; background-color: #95a5a6; } .status-connected { background-color: #2ecc71 !important; } .status-disconnected { background-color: #e74c3c !important; } .status-connecting { background-color: #f39c12 !important; animation: pulse 1.5s infinite; } keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } /style /head body div classcontainer header h1 实时交互式故事生成器/h1 p classsubtitle输入你的创意开头让AI为你实时续写接下来的故事.../p /header div classmain-content div classpanel h2 你的创意输入/h2 textarea idinputArea placeholder在这里写下你的故事开头例如在遥远的银河系边缘有一个从未被记载的星球... 输入后故事将自动开始生长。/textarea div classcontrols button idconnectBtn连接AI服务/button button idsendBtn disabled发送并生成/button button idclearBtn清空故事/button /div div classstatus-bar div idstatusIndicator/div span idstatusText状态等待连接/span /div /div div classpanel h2 AI生成的故事/h2 div idoutputArea连接成功后你输入的故事将在这里被实时续写.../div /div /div /div script // 我们的JavaScript代码将写在这里 /script /body /html现在你有了一个看起来不错的静态界面。左侧是输入区右侧是输出区下方有控制按钮和状态栏。接下来我们要注入灵魂——JavaScript逻辑。3.2 实现WebSocket连接与流式渲染在script标签内我们添加核心逻辑。// 替换成你实际的Z-Image-Turbo-rinaiqiao-huiyewunv模型WebSocket服务地址 const MODEL_WS_URL ws://localhost:8000/ws; // 在实际项目中这里应该是你部署好的服务地址例如wss://your-domain.com/ai-ws let socket null; let isConnected false; // 用于存储当前会话的上下文让模型知道故事背景 let conversationContext []; // DOM 元素 const inputArea document.getElementById(inputArea); const outputArea document.getElementById(outputArea); const connectBtn document.getElementById(connectBtn); const sendBtn document.getElementById(sendBtn); const clearBtn document.getElementById(clearBtn); const statusIndicator document.getElementById(statusIndicator); const statusText document.getElementById(statusText); // 更新UI状态 function updateStatus(status, message) { statusIndicator.className ; switch(status) { case connected: statusIndicator.classList.add(status-connected); statusText.textContent 状态已连接 - ${message}; connectBtn.disabled true; sendBtn.disabled false; break; case disconnected: statusIndicator.classList.add(status-disconnected); statusText.textContent 状态未连接 - ${message}; connectBtn.disabled false; sendBtn.disabled true; break; case connecting: statusIndicator.classList.add(status-connecting); statusText.textContent 状态连接中...; connectBtn.disabled true; sendBtn.disabled true; break; case error: statusIndicator.classList.add(status-disconnected); statusText.textContent 状态错误 - ${message}; connectBtn.disabled false; sendBtn.disabled true; break; } } // 建立WebSocket连接 function connectWebSocket() { if (socket socket.readyState WebSocket.OPEN) { console.log(WebSocket 已经连接); return; } updateStatus(connecting, ); socket new WebSocket(MODEL_WS_URL); socket.onopen function(event) { console.log(WebSocket 连接成功); isConnected true; updateStatus(connected, 可以开始创作了); // 连接成功后可以发送一个初始问候或测试消息 // socket.send(JSON.stringify({type: greeting, message: Hello AI!})); }; socket.onmessage function(event) { // 假设服务器返回的是JSON格式的流式数据 try { const data JSON.parse(event.data); // 根据你的服务端协议解析数据这里假设有 token 和 is_finished 字段 if (data.token) { // 流式渲染将收到的token逐个追加到输出区域 outputArea.textContent data.token; // 自动滚动到底部方便查看最新内容 outputArea.scrollTop outputArea.scrollHeight; } if (data.is_finished) { // 本次生成结束可以做一些清理或状态更新 console.log(本次故事片段生成完毕。); // 将本次完整的生成内容加入到上下文中以便后续连贯 const fullGeneratedText outputArea.textContent; // 这里简化处理实际可能需更精细的上下文管理 conversationContext.push({role: assistant, content: fullGeneratedText}); } } catch (error) { // 如果服务端返回的是纯文本流可以直接追加 outputArea.textContent event.data; outputArea.scrollTop outputArea.scrollHeight; } }; socket.onerror function(error) { console.error(WebSocket 错误:, error); updateStatus(error, 连接发生错误); isConnected false; }; socket.onclose function(event) { console.log(WebSocket 连接关闭); isConnected false; updateStatus(disconnected, 连接已断开); socket null; }; } // 发送用户输入到AI模型 function sendToModel() { if (!isConnected || !socket) { alert(请先连接AI服务); return; } const userInput inputArea.value.trim(); if (!userInput) { alert(请输入一些内容吧); return; } // 将用户输入加入到上下文 conversationContext.push({role: user, content: userInput}); // 构建请求数据格式需匹配你的模型服务端API const requestData { prompt: userInput, // 可以携带更多参数如max_tokens, temperature等 // context: conversationContext.slice(-5), // 发送最近5轮对话作为上下文 stream: true // 明确要求流式输出 }; // 清空输入框准备接收新的输入可选根据交互设计决定 // inputArea.value ; // 在输出区域添加一个提示表示新的生成开始了 outputArea.textContent \n\n--- [基于你的输入开始续写] ---\n; // 发送请求 socket.send(JSON.stringify(requestData)); console.log(已发送请求:, requestData); } // 设置自动发送的防抖函数可选功能 let debounceTimer; function setupAutoSend() { inputArea.addEventListener(input, function() { clearTimeout(debounceTimer); // 设置防抖延迟例如用户停止输入1.5秒后自动发送 debounceTimer setTimeout(() { if (inputArea.value.trim().length 10) { // 至少输入10个字符才触发 sendToModel(); } }, 1500); }); } // 清空输出和上下文 function clearStory() { if (confirm(确定要清空当前生成的故事和上下文吗)) { outputArea.textContent ; conversationContext []; inputArea.value ; outputArea.textContent 故事已清空。输入新的开头开始创作吧; } } // 绑定按钮事件 connectBtn.addEventListener(click, connectWebSocket); sendBtn.addEventListener(click, sendToModel); clearBtn.addEventListener(click, clearStory); // 初始化可以设置自动发送功能 // setupAutoSend(); // 页面加载时可以尝试自动连接如果服务地址固定且允许 // window.addEventListener(load, () { // connectWebSocket(); // });3.3 代码变体打造一个实时代码补全工具同样的架构只需稍作修改就能变身成一个酷炫的“代码补全工具”。想象一下在代码编辑器里输入函数名的一部分右侧或下方实时显示模型建议的完整代码块。主要修改点UI调整将inputArea和outputArea换成更适合代码编辑和显示的组件比如使用CodeMirror或Monaco EditorVS Code 使用的编辑器。交互逻辑触发自动补全的逻辑可以更精细。例如监听编辑器内容变化当检测到特定符号如.、(或空格后提取当前行或上一个单词作为提示词发送。数据格式发送给模型的数据结构可能不同提示词prompt需要围绕代码上下文构建。渲染方式补全建议的渲染可能不是简单的追加而是以下拉列表、悬浮框或行内提示的形式展示。这里提供一个概念性的修改片段// 假设使用了某个代码编辑器库 const editor CodeMirror.fromTextArea(document.getElementById(codeInput), { lineNumbers: true, mode: javascript }); // 监听编辑器变化实现智能补全触发 editor.on(change, (instance, changeObj) { const cursor instance.getCursor(); const lineContent instance.getLine(cursor.line); const textBeforeCursor lineContent.substring(0, cursor.ch); // 简单的触发逻辑当输入点号后获取前面的变量名 if (textBeforeCursor.endsWith(.)) { const potentialVar textBeforeCursor.match(/(\w)\.$/)?.[1]; if (potentialVar isConnected) { // 发送补全请求 const requestData { type: code_completion, prefix: textBeforeCursor, // 可以发送更多上下文如前后几行代码 suffix: instance.getLine(cursor.line).substring(cursor.ch) }; socket.send(JSON.stringify(requestData)); } } }); // 处理服务器返回的补全建议 socket.onmessage function(event) { const data JSON.parse(event.data); if (data.type completion_suggestions) { // 在编辑器附近显示一个补全建议下拉框 showCompletionWidget(data.suggestions); } };通过这样的改造你就拥有了一个具备实时AI代码补全能力的在线编辑器原型。这展示了同一套实时交互框架的强大适应性和扩展性。4. 效果体验与优化思考把上面的代码跑起来记得将MODEL_WS_URL指向你真正的服务你应该能体验到开头描述的那种流畅的交互感。输入文字看着故事一点点“长”出来这个过程本身就有一种独特的魅力。在实际使用和开发中你可能会遇到一些可以进一步优化的点连接稳定性网络环境复杂WebSocket连接可能会中断。需要增加自动重连机制在onclose事件中尝试间隔重连。上下文管理我们这个简单例子里的conversationContext数组管理比较粗糙。对于长故事需要设计更智能的上下文窗口比如只保留最近N条消息或者对历史消息进行摘要以适配模型的最大上下文长度。性能与节流如果用户输入非常频繁防抖可能不够。需要结合节流throttle和更智能的触发判断避免向服务器发送过多无效请求。错误处理与用户提示除了连接错误还要处理服务器返回的业务错误如生成失败、内容过滤等并在前端友好地提示用户。UI/UX增强可以增加生成动画如闪烁的光标、支持Markdown渲染如果模型输出包含格式、提供多种生成风格创意/严谨/幽默的选择按钮等。把这些点做好你的实时交互应用就会从“能用”变得“好用”甚至“爱不释手”。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
