成都网站logo设计快速做网站前端的视频教程

张

张建站

2026/5/2 16:13:55

10分钟阅读

成都网站logo设计,快速做网站前端的视频教程,宁波微信小程序开发公司,公司logo图片大全SEERS EYE 预言家之眼从零部署#xff1a;Node.js后端服务集成教程你是不是已经体验过SEERS EYE预言家之眼模型在星图GPU平台上的强大推理能力#xff0c;但总觉得通过网页点点划划不够过瘾#xff1f;或者#xff0c;你正在开发一个游戏应用#xff0c;想把这个酷炫的模…SEERS EYE 预言家之眼从零部署Node.js后端服务集成教程你是不是已经体验过SEERS EYE预言家之眼模型在星图GPU平台上的强大推理能力但总觉得通过网页点点划划不够过瘾或者你正在开发一个游戏应用想把这个酷炫的模型能力无缝集成到自己的产品里却不知道从何下手别担心今天我们就来搞定这件事。我将手把手带你用Node.js搭建一个属于自己的后端服务把预言家之眼的能力封装成API让你可以随时随地调用。整个过程就像搭积木我们一步步来从零开始直到你能通过自己写的网页前端和模型愉快地“对话”。无论你是全栈新手还是想快速整合AI能力的老手这篇教程都能让你轻松上车。我们的目标是搭建一个轻量、可靠的后端服务它既能通过HTTP接口处理常规请求也能用WebSocket支持像游戏那样的实时交互最后再用PM2把它稳稳地跑在服务器上。听起来是不是有点小激动那咱们就开始吧。1. 万事开头环境准备与项目初始化在开始敲代码之前我们得先把“厨房”收拾好把需要的“食材”和“工具”备齐。这一步做好了后面就会顺畅很多。1.1 安装Node.js与npmNode.js是我们的运行环境npm是管理各种工具包我们叫它“依赖包”的管家。首先我们得确保电脑上已经安装了它们。打开你的终端Windows上是命令提示符或PowerShellMac/Linux上是Terminal输入以下命令来检查node -v npm -v如果这两条命令都返回了版本号比如v18.17.0和9.6.7恭喜你可以跳过这一步。如果没有或者版本太旧我们就需要安装或更新。对于新手最推荐的方法是使用Node版本管理工具nvmNode Version Manager。它能让你轻松安装、切换不同版本的Node.js。在Mac或Linux上安装nvm 打开终端运行官方安装脚本curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash安装完成后关闭并重新打开终端然后安装最新的长期支持版LTSNode.jsnvm install --lts nvm use --lts在Windows上安装nvm 你需要安装nvm-windows。去它的GitHub发布页面https://github.com/coreybutler/nvm-windows/releases下载最新的nvm-setup.exe安装程序双击运行即可。安装完成后在PowerShell或命令提示符中运行nvm install lts nvm use lts安装完成后再次运行node -v和npm -v确认安装成功。1.2 创建你的项目目录接下来我们为这个后端服务项目创建一个专属的文件夹并初始化它。在你喜欢的位置比如桌面或开发目录新建一个文件夹名字可以叫seers-eye-backend。打开终端进入到这个文件夹cd /path/to/your/seers-eye-backend初始化一个新的Node.js项目。这会在文件夹里生成一个package.json文件用来记录项目信息和依赖包。npm init -y这个-y参数的意思是快速初始化全部采用默认配置。如果你想仔细填写项目名、描述等信息可以去掉-y然后根据提示一步步来。好了我们的项目“空房子”已经建好了接下来该往里添置“家具”了。2. 搭建服务骨架选择框架与基础依赖Node.js本身很强大但直接用它写复杂的网络服务会比较繁琐。所以我们选用一个Web框架来简化工作。这里我以更流行、生态更丰富的Express.js为例如果你更喜欢Koa思路也完全一样。2.1 安装核心依赖包在项目根目录下运行以下命令来安装Express和其他几个必不可少的帮手npm install express cors axios npm install -D nodemon我来解释一下这几个包是干什么的express: 我们的主角一个极简的Web应用框架用来快速搭建服务器和定义API路由。cors: 一个中间件用来处理“跨域资源共享”。简单说就是允许你的前端网页运行在浏览器里来调用这个后端服务而不会因为域名或端口不同被浏览器拦截。axios: 一个非常好用的HTTP客户端库。我们后端服务需要去调用星图GPU平台上的模型APIaxios就是负责去“敲门”并取回结果的工具。nodemon(开发依赖): 一个开发工具。安装时加了-D参数表示它只在开发阶段需要。它的作用是监听你代码文件的变化一旦你保存了修改它会自动重启服务器省得你手动停止再启动非常方便。2.2 创建第一个服务器文件现在在项目根目录下创建一个名为app.js的文件或者index.js看你喜好。这个文件将是我们后端服务的入口。用你喜欢的代码编辑器比如VSCode打开这个文件输入以下代码// 引入所需的包 const express require(express); const cors require(cors); // 创建一个Express应用实例 const app express(); // 定义服务运行的端口优先使用环境变量PORT没有则用3000 const PORT process.env.PORT || 3000; // 应用中间件 // 1. 使用cors中间件允许所有来源的前端访问生产环境建议配置具体来源 app.use(cors()); // 2. 使用express.json()中间件自动解析请求中JSON格式的数据 app.use(express.json()); // 定义一个最简单的根路由用于测试服务是否运行 app.get(/, (req, res) { res.json({ message: SEER\S EYE 后端服务正在运行 }); }); // 启动服务器监听指定端口 app.listen(PORT, () { console.log( 后端服务已启动正在监听 http://localhost:${PORT}); });这段代码做了几件事引入了Express和CORS。创建了app对象代表我们的Web应用。告诉app使用CORS和JSON解析这两个中间件。定义了一个GET请求的路由当有人访问根路径/时返回一条欢迎消息。最后让服务器在3000端口跑起来。2.3 试运行你的服务器是骡子是马拉出来遛遛。回到终端确保你在项目目录下然后运行npx nodemon app.js你会看到终端输出后端服务已启动正在监听 http://localhost:3000。打开你的浏览器访问http://localhost:3000。如果一切顺利你会看到一个JSON页面显示着{message:SEERS EYE 后端服务正在运行}。恭喜你的Node.js后端服务骨架已经成功立起来了。按CtrlC可以停止服务器。因为用了nodemon之后你修改代码并保存它会自动重启。3. 核心功能连接预言家之眼模型API骨架有了现在要注入“灵魂”——让我们的服务能够与星图GPU平台上的SEERS EYE模型对话。这里的关键是你需要先获得模型的API访问端点Endpoint和必要的密钥API Key。3.1 准备模型API信息假设你已经成功在星图GPU平台部署了SEERS EYE模型并获得了以下信息请替换为你的实际信息API端点URL: 比如https://your-mirror-instance.csdn.net/v1/chat/completionsAPI密钥: 一串用于身份验证的密钥通常以sk-开头。安全提示绝对不要将API密钥硬编码在代码里或上传到GitHub等公开仓库我们使用环境变量来管理它。在项目根目录下创建一个名为.env的文件注意最前面有个点内容如下SEERS_EYE_API_URLhttps://your-mirror-instance.csdn.net/v1/chat/completions SEERS_EYE_API_KEYyour_actual_api_key_here PORT3000同时我们需要一个包来读取这个.env文件。安装dotenvnpm install dotenv然后在app.js文件的最顶部在所有require之前添加这行代码来加载环境变量require(dotenv).config();3.2 编写模型调用函数接下来我们在app.js中或者新建一个services/modelService.js文件来保持代码整洁这里为了教程直观先写在一起创建一个函数专门负责调用远程的模型API。在app.js里引入axios并在定义路由之前添加这个函数const axios require(axios); // 从环境变量中读取配置 const MODEL_API_URL process.env.SEERS_EYE_API_URL; const API_KEY process.env.SEERS_EYE_API_KEY; /** * 调用 SEERS EYE 模型进行对话 * param {Array} messages - 对话消息历史格式为 [{role: user, content: 你的问题}] * returns {PromiseObject} - 模型返回的响应 */ async function callSeersEyeModel(messages) { try { const response await axios({ method: post, url: MODEL_API_URL, headers: { Authorization: Bearer ${API_KEY}, Content-Type: application/json, }, data: { model: seers-eye, // 根据实际模型名称调整 messages: messages, stream: false, // 我们先使用非流式响应 max_tokens: 500, }, timeout: 30000, // 设置30秒超时 }); return response.data; } catch (error) { console.error(调用模型API失败:, error.message); // 这里可以更精细地处理不同的错误类型如网络错误、API错误等 throw new Error(模型服务暂时不可用: ${error.response?.data?.error?.message || error.message}); } }这个函数callSeersEyeModel接收一个消息数组然后使用axios向模型API发送一个POST请求。请求头里包含了授权信息你的API Key请求体里指明了模型、对话历史和参数。3.3 创建对话API路由现在我们来创建一个前端可以调用的API接口。在定义根路由的下方添加一个新的路由// API路由与SEERS EYE对话 app.post(/api/chat, async (req, res) { // 1. 从请求体中获取用户发送的消息 const userMessage req.body.message; // 2. 简单的输入验证 if (!userMessage || typeof userMessage ! string) { return res.status(400).json({ error: 请输入有效的消息内容。 }); } try { console.log(收到用户消息: ${userMessage}); // 3. 构造符合模型API要求的消息格式 const messages [ { role: user, content: userMessage } ]; // 4. 调用我们上面写的函数与模型交互 const modelResponse await callSeersEyeModel(messages); // 5. 从模型响应中提取回复文本 // 注意实际响应结构需要根据星图平台API的返回格式调整 const reply modelResponse.choices?.[0]?.message?.content || 模型未返回有效内容。; // 6. 将模型的回复返回给前端 res.json({ success: true, reply: reply, // 可以附带一些原始数据或请求ID用于调试 // requestId: modelResponse.id }); } catch (error) { console.error(处理聊天请求时出错:, error); // 7. 如果出错返回500错误和友好提示 res.status(500).json({ success: false, error: error.message || 服务器内部错误请稍后重试。 }); } });这个/api/chat路由的工作流程很清晰接收前端发来的用户消息 - 验证 - 调用模型 - 处理回复 - 返回给前端。现在重启你的服务器如果nodemon在运行它应该已经自动重启了。我们可以用工具测试一下这个API。4. 实时交互集成WebSocket支持对于游戏或者需要实时反馈的应用HTTP的“一问一答”模式可能不够及时。WebSocket可以提供全双工的持久连接非常适合实时场景。我们将使用流行的socket.io库来实现。4.1 安装Socket.io停止当前的服务器CtrlC然后安装socket.io和对应的客户端库用于后面的前端测试npm install socket.io4.2 改造服务器以支持WebSocket我们需要修改app.js让Express服务器同时支持HTTP和WebSocket。我们将使用Node.js内置的http模块。首先在文件顶部引入所需模块const http require(http); // 新增 const { Server } require(socket.io); // 新增然后修改服务器启动部分。不再直接用app.listen而是先创建一个HTTP服务器再将Express应用挂载上去最后附加Socket.io。找到app.js末尾的app.listen部分替换为以下代码// 创建HTTP服务器 const server http.createServer(app); // 创建Socket.io实例并附加到HTTP服务器上 // 同时配置CORS允许前端连接 const io new Server(server, { cors: { origin: *, // 生产环境应替换为具体的前端地址如 http://your-frontend.com methods: [GET, POST] } }); // 监听WebSocket连接事件 io.on(connection, (socket) { console.log( 新的客户端已连接:, socket.id); // 监听前端通过socket.emit(chat_message, ...)发送的消息 socket.on(chat_message, async (data) { console.log(收到实时消息 (${socket.id}):, data.message); // 可以在这里向客户端发送一个“正在思考”的状态 socket.emit(status, { status: thinking }); try { const messages [{ role: user, content: data.message }]; const modelResponse await callSeersEyeModel(messages); const reply modelResponse.choices?.[0]?.message?.content || 模型未返回有效内容。; // 将模型的回复通过WebSocket发回给对应的客户端 socket.emit(chat_reply, { reply: reply, timestamp: new Date().toISOString() }); console.log(已回复客户端 ${socket.id}); } catch (error) { console.error(处理实时消息出错:, error); socket.emit(error, { message: 处理您的消息时出现了问题。 }); } }); // 监听客户端断开连接 socket.on(disconnect, () { console.log(客户端断开连接:, socket.id); }); }); // 启动服务器同时支持HTTP和WebSocket server.listen(PORT, () { console.log( 后端服务已启动正在监听 http://localhost:${PORT}); console.log( WebSocket 服务也已就绪); });现在你的服务就同时具备了HTTP API (/api/chat) 和 WebSocket 实时通信两种能力。前端可以通过连接ws://localhost:3000实际上是Socket.io管理的连接来发送和接收实时消息。5. 进程管理使用PM2让服务稳定运行在开发时我们用nodemon很方便但真正部署到服务器上时我们需要一个更强大的进程管理工具确保服务在崩溃后能自动重启并且能方便地查看日志。PM2就是这样一个专业工具。5.1 全局安装PM2在终端中运行以下命令进行全局安装npm install -g pm25.2 使用PM2启动你的服务首先确保你的.env文件中的配置是正确的。然后在项目根目录下使用PM2启动应用pm2 start app.js --name seers-eye-api这条命令告诉PM2以app.js为入口文件启动一个应用并给它起名叫seers-eye-api。你会看到PM2输出一个漂亮的表格显示你的应用状态是“online”。这意味着你的服务已经在后台稳定运行了即使你关闭了终端窗口它也不会停止。5.3 常用的PM2命令掌握这几个命令你就能轻松管理你的服务查看所有应用状态pm2 list查看某个应用的日志pm2 logs seers-eye-api按CtrlC退出日志查看停止应用pm2 stop seers-eye-api重启应用pm2 restart seers-eye-api删除应用pm2 delete seers-eye-api设置开机自启以Ubuntu为例pm2 startup pm2 save # 保存当前进程列表现在你的后端服务已经是一个“打不死的小强”了。6. 最后一步编写前端界面进行测试后端服务跑起来了我们总得有个界面来测试它是否工作正常。我们来创建一个最简单的HTML页面既能测试HTTP接口也能测试WebSocket。在项目根目录下创建一个名为public的文件夹然后在里面创建一个index.html文件。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleSEERS EYE 测试界面/title style body { font-family: sans-serif; max-width: 800px; margin: 40px auto; padding: 20px; } .container { display: flex; flex-direction: column; gap: 30px; } .section { border: 1px solid #ccc; padding: 20px; border-radius: 8px; } h2 { margin-top: 0; color: #333; } textarea, input[typetext] { width: 100%; padding: 10px; margin: 10px 0; box-sizing: border-box; } button { padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #0056b3; } #response, #ws-response { margin-top: 15px; padding: 15px; background-color: #f8f9fa; border-radius: 4px; white-space: pre-wrap; min-height: 50px; } .status { color: #6c757d; font-style: italic; } .error { color: #dc3545; } .success { color: #28a745; } /style /head body div classcontainer h1 SEERS EYE 预言家之眼 - 后端服务测试/h1 !-- 测试 HTTP API 部分 -- div classsection h21. 测试 HTTP API (POST /api/chat)/h2 p输入一条消息通过传统的HTTP请求与模型交互。/p input typetext idhttp-input placeholder输入你想问预言家的话... value你好请介绍一下你自己。 button onclicksendHttpRequest()发送HTTP请求/button div idresponse等待响应.../div /div !-- 测试 WebSocket 部分 -- div classsection h22. 测试 WebSocket 实时聊天/h2 p连接WebSocket体验实时对话。连接状态: span idws-status classstatus未连接/span/p button onclickconnectWebSocket() idconnect-btn连接WebSocket/button button onclickdisconnectWebSocket() iddisconnect-btn disabled断开连接/button brbr input typetext idws-input placeholder输入实时消息... disabled button onclicksendWsMessage() idsend-ws-btn disabled发送实时消息/button div idws-response实时对话记录将显示在这里.../div /div /div script srchttps://cdn.socket.io/4.7.2/socket.io.min.js/script script const backendUrl http://localhost:3000; // 确保与你的后端端口一致 let socket null; // 1. HTTP API 测试函数 async function sendHttpRequest() { const input document.getElementById(http-input).value.trim(); const responseDiv document.getElementById(response); if (!input) { responseDiv.innerHTML span classerror请输入消息。/span; return; } responseDiv.innerHTML span classstatus请求发送中.../span; try { const resp await fetch(${backendUrl}/api/chat, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ message: input }) }); const data await resp.json(); if (data.success) { responseDiv.innerHTML span classsuccessstrong模型回复/strong\n${data.reply}/span; } else { responseDiv.innerHTML span classerror请求失败${data.error}/span; } } catch (error) { responseDiv.innerHTML span classerror网络或服务器错误${error.message}/span; } } // 2. WebSocket 相关函数 function connectWebSocket() { if (socket?.connected) return; socket io(backendUrl); // 连接到后端Socket.io服务 const statusSpan document.getElementById(ws-status); const connectBtn document.getElementById(connect-btn); const disconnectBtn document.getElementById(disconnect-btn); const wsInput document.getElementById(ws-input); const sendWsBtn document.getElementById(send-ws-btn); const wsResponseDiv document.getElementById(ws-response); socket.on(connect, () { statusSpan.textContent 已连接; statusSpan.className success; connectBtn.disabled true; disconnectBtn.disabled false; wsInput.disabled false; sendWsBtn.disabled false; wsResponseDiv.innerHTML \n[系统] WebSocket连接已建立。; }); socket.on(status, (data) { wsResponseDiv.innerHTML \n[状态] ${data.status}; }); socket.on(chat_reply, (data) { wsResponseDiv.innerHTML \n[预言家] ${data.reply}; wsResponseDiv.scrollTop wsResponseDiv.scrollHeight; // 自动滚动到底部 }); socket.on(error, (data) { wsResponseDiv.innerHTML \n[错误] ${data.message}; }); socket.on(disconnect, () { statusSpan.textContent 已断开; statusSpan.className error; connectBtn.disabled false; disconnectBtn.disabled true; wsInput.disabled true; sendWsBtn.disabled true; wsResponseDiv.innerHTML \n[系统] WebSocket连接已断开。; }); } function disconnectWebSocket() { if (socket) { socket.disconnect(); socket null; } } function sendWsMessage() { const input document.getElementById(ws-input); const message input.value.trim(); const wsResponseDiv document.getElementById(ws-response); if (!message) return; wsResponseDiv.innerHTML \n[我] ${message}; socket.emit(chat_message, { message: message }); input.value ; // 清空输入框 wsResponseDiv.scrollTop wsResponseDiv.scrollHeight; } /script /body /html为了让Express能够提供这个静态HTML文件我们需要在app.js中添加一行中间件。在app.use(cors())和app.use(express.json())之后添加// 提供静态文件服务将 public 文件夹下的文件如index.html暴露出去 app.use(express.static(public));现在重启你的PM2服务pm2 restart seers-eye-api然后在浏览器中访问http://localhost:3000。你应该能看到一个测试页面可以分别测试HTTP接口和WebSocket实时聊天功能了7. 回顾与下一步跟着走完这一趟一个能够调用SEERS EYE预言家之眼模型的Node.js后端服务就完整地搭建起来了。我们从一个空文件夹开始安装了环境用Express搭起了服务器写好了调用模型API的核心函数还增加了WebSocket支持来应对实时场景最后用PM2让它稳定运行并做了个简单的前端来验证功能。整个过程其实就是在做“连接”和“封装”的工作把前端、你的服务器、以及星图平台上的强大模型连接起来并把复杂的模型调用过程封装成简单易用的API。现在你的游戏或者应用就可以通过调用http://你的服务器地址/api/chat或者建立WebSocket连接来使用预言家之眼的能力了。当然这只是一个起点。在实际项目中你可能还需要考虑更多比如用户认证、请求频率限制、更完善的错误处理、数据库集成来保存对话历史以及使用Nginx等反向代理来做负载均衡和HTTPS加密。但有了这个坚实的基础后续的扩展都会变得有章可循。希望这个教程能帮你顺利迈出第一步祝你开发顺利获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。