SmolVLA与Node.js全栈开发构建AI赋能的后台管理系统你是不是也遇到过这样的场景后台管理系统里每天有大量用户上传的图片需要审核有堆积如山的文本内容需要分类或者需要从一堆数据里自动生成报告。这些工作重复、枯燥还容易出错人工处理效率实在太低。最近我尝试把SmolVLA这个多模态模型集成到了一个Node.js全栈项目里用它来给后台管理系统“装上大脑”。效果还挺让人惊喜的以前需要人工盯着看的活儿现在大部分都能自动完成省时省力。这篇文章我就来跟你分享一下具体的做法。我会用一个内容审核和数据报告生成的场景作为例子带你走一遍从前端到后端的完整集成流程。即使你对AI模型不太熟悉跟着步骤走也能在自己的Node.js项目里用上这个能力。1. 项目准备与环境搭建在开始敲代码之前我们得先把“舞台”搭好。这包括准备好Node.js环境、初始化项目以及把SmolVLA模型部署起来。别担心每一步我都会说清楚。1.1 Node.js环境与项目初始化首先确保你的电脑上已经安装了Node.js。打开终端输入node -v和npm -v如果能显示出版本号说明已经装好了。如果没有可以去Node.js官网下载安装包选择LTS长期支持版本安装过程基本就是一路点“下一步”。环境准备好之后我们创建一个新的项目目录并初始化它。# 创建一个新的项目文件夹 mkdir ai-backend-admin cd ai-backend-admin # 初始化一个新的Node.js项目一路按回车用默认设置就行 npm init -y初始化完成后你会看到一个package.json文件它就像是项目的“身份证”和“说明书”。接下来安装我们后端需要的核心依赖。我们使用Express来快速搭建Web服务器。# 安装Express框架和一些常用的中间件 npm install express cors dotenv # 安装一个用于处理文件上传的中间件后面上传图片给AI分析时会用到 npm install multer # 安装axios用于在服务器端向SmolVLA的API发送请求 npm install axios同时我们安装一些开发时用的工具让写代码更顺畅。# -D 表示这些是开发依赖只在写代码时需要项目上线后不需要 npm install -D nodemon安装完依赖修改package.json文件添加一个启动脚本这样以后每次运行项目就不用输入长长的命令了。{ scripts: { start: node server.js, dev: nodemon server.js } }现在基础的Node.js后端环境就准备好了。你可以运行npm run dev来启动服务器虽然我们还没写服务器代码它会监控文件变化并自动重启非常适合开发阶段。1.2 SmolVLA模型部署与API准备我们的后台系统需要一个“智能核心”这就是SmolVLA模型。对于全栈开发者来说最方便的方式不是自己去训练或部署完整的模型而是通过API来调用已经部署好的模型服务。这里有两种常见的思路使用云服务提供的API一些AI平台提供了现成的多模态模型API你只需要申请一个密钥API Key就可以像调用普通Web接口一样调用它。这种方式最简单无需关心服务器和显卡。本地部署API服务如果你对数据隐私要求极高或者希望网络延迟更低可以在自己的服务器上部署SmolVLA模型并封装成HTTP API供你的Node.js后端调用。这需要一台带有GPU的服务器并有一定的模型部署经验。为了演示的通用性我们假设采用第一种方式。你需要在某个AI云服务平台这里不指定具体平台注册账号创建一个项目并获取你的API密钥。这个密钥就像一把钥匙你的代码用它来证明身份并调用服务。在项目根目录下创建一个.env文件用来安全地存储这个密钥和其他配置。这个文件不要提交到代码仓库。# .env 文件内容示例 PORT3000 AI_API_BASE_URLhttps://api.example-ai-platform.com/v1 AI_API_KEYyour_super_secret_api_key_here记得把your_super_secret_api_key_here替换成你实际获得的密钥。然后在项目中安装dotenv包前面已经装了并在代码开头加载它就能通过process.env.AI_API_KEY来安全地使用密钥了。2. 后端核心构建Node.js与AI的桥梁环境搭好了钥匙也拿到了接下来就是构建后端的逻辑。这部分是系统的“中枢神经”负责接收前端的请求去调用AI API然后把结果整理好返回给前端。2.1 设计数据模型与API接口我们先规划一下系统需要做什么。以一个简单的“智能内容管理”模块为例它可能包含以下功能图片智能审核上传一张图片AI自动识别其中是否包含违规内容如暴力、敏感文字并返回审核结果和理由。文本分类与打标输入一段文本如用户反馈、文章草稿AI自动将其分类如“投诉”、“咨询”、“表扬”并提取关键词作为标签。数据报告生成输入一组结构化的业务数据如本周销售数字AI自动生成一段简洁的文本总结报告。根据这些功能我们来设计对应的数据模型和API路由。在项目根目录下创建server.js作为我们的主服务器文件。// server.js - 主服务器入口文件 require(‘dotenv’).config(); // 加载环境变量 const express require(‘express’); const cors require(‘cors’); const multer require(‘multer’); const axios require(‘axios’); const app express(); const port process.env.PORT || 3000; // 基础中间件 app.use(cors()); // 允许前端跨域请求 app.use(express.json()); // 解析JSON格式的请求体 app.use(express.urlencoded({ extended: true })); // 解析URL编码的请求体 // 配置multer用于处理文件上传将图片暂存到 ‘uploads/’ 目录 const upload multer({ dest: ‘uploads/’ }); // 配置一个全局的axios实例用于调用AI API统一添加认证头 const aiApiClient axios.create({ baseURL: process.env.AI_API_BASE_URL, headers: { ‘Authorization’: Bearer ${process.env.AI_API_KEY}, ‘Content-Type’: ‘application/json’ } }); // 定义我们的API路由 // 1. 健康检查端点 app.get(‘/api/health’, (req, res) { res.json({ status: ‘OK’, message: ‘AI后台管理系统服务运行正常’ }); }); // 2. 图片智能审核接口 app.post(‘/api/ai/audit-image’, upload.single(‘image’), async (req, res) { // 具体逻辑在后面实现 }); // 3. 文本分类与打标接口 app.post(‘/api/ai/analyze-text’, async (req, res) { // 具体逻辑在后面实现 }); // 4. 数据报告生成接口 app.post(‘/api/ai/generate-report’, async (req, res) { // 具体逻辑在后面实现 }); // 启动服务器 app.listen(port, () { console.log(服务器已启动监听端口${port}); });这个框架搭好了接下来我们逐一实现这三个核心的AI功能接口。2.2 实现核心AI功能接口接口一图片智能审核这个接口接收前端上传的图片文件将其发送给SmolVLA模型要求模型识别图片内容并判断是否违规。// 在 server.js 中完善 /api/ai/audit-image 接口 app.post(‘/api/ai/audit-image’, upload.single(‘image’), async (req, res) { try { if (!req.file) { return res.status(400).json({ error: ‘请上传图片文件’ }); } // 构建发送给AI模型的请求数据。 // 假设AI API接收一个包含图片base64编码和提示词的JSON const imageBuffer require(‘fs’).readFileSync(req.file.path); const imageBase64 imageBuffer.toString(‘base64’); const requestData { model: ‘smolvla’, // 指定模型名称根据实际API调整 messages: [ { role: ‘user’, content: [ { type: ‘text’, text: ‘请详细描述这张图片的内容。并判断内容是否可能涉及暴力、血腥、敏感政治或违规信息。请用JSON格式回答包含字段description描述, is_violated是否违规布尔值, reason判断理由, categories涉及的风险分类数组。’ }, { type: ‘image_url’, image_url: { url: data:image/jpeg;base64,${imageBase64} } } ] } ] }; // 调用AI API const aiResponse await aiApiClient.post(‘/chat/completions’, requestData); const aiResult aiResponse.data.choices[0].message.content; // 清理上传的临时文件 require(‘fs’).unlinkSync(req.file.path); // 尝试解析AI返回的JSON并返回给前端 let parsedResult; try { parsedResult JSON.parse(aiResult); } catch (e) { parsedResult { raw_response: aiResult }; // 如果AI没返回标准JSON返回原始文本 } res.json({ success: true, data: parsedResult, fileInfo: { originalname: req.file.originalname } }); } catch (error) { console.error(‘图片审核接口错误:’, error); res.status(500).json({ success: false, error: ‘图片审核处理失败’, detail: error.message }); } });接口二文本分类与打标这个接口接收一段文本让AI理解其内容并进行分类和关键词提取。// 在 server.js 中完善 /api/ai/analyze-text 接口 app.post(‘/api/ai/analyze-text’, async (req, res) { try { const { text } req.body; if (!text || text.trim().length 0) { return res.status(400).json({ error: ‘请输入需要分析的文本’ }); } const requestData { model: ‘smolvla’, messages: [ { role: ‘user’, content: 请分析以下文本完成以下任务 1. 判断其主要类别[投诉建议, 产品咨询, 售后服务, 表扬感谢, 其他]。 2. 提取3-5个关键词或短语作为标签。 3. 总结文本的核心情绪[积极, 消极, 中性]。 请将结果以JSON格式返回包含字段category类别, tags标签数组, sentiment情绪, summary一句话摘要。 待分析文本${text} } ] }; const aiResponse await aiApiClient.post(‘/chat/completions’, requestData); const aiResult aiResponse.data.choices[0].message.content; let parsedResult; try { parsedResult JSON.parse(aiResult); } catch (e) { parsedResult { raw_response: aiResult }; } res.json({ success: true, data: parsedResult }); } catch (error) { console.error(‘文本分析接口错误:’, error); res.status(500).json({ success: false, error: ‘文本分析失败’ }); } });接口三数据报告生成这个接口接收结构化的业务数据让AI扮演一个分析师生成一段描述性报告。// 在 server.js 中完善 /api/ai/generate-report 接口 app.post(‘/api/ai/generate-report’, async (req, res) { try { const { data, reportType ‘weekly_summary’ } req.body; // data 是一个对象例如销售数据 if (!data) { return res.status(400).json({ error: ‘请提供需要生成报告的数据’ }); } // 将数据转换为易于理解的文本描述作为提示词的一部分 const dataDescription JSON.stringify(data, null, 2); const requestData { model: ‘smolvla’, messages: [ { role: ‘system’, content: ‘你是一个专业的业务数据分析师擅长将枯燥的数据转化为清晰、有洞察力的文字报告。’ }, { role: ‘user’, content: 请根据以下${reportType}的业务数据生成一段约200字的分析报告。报告需突出关键变化、亮点和潜在问题语言简洁专业。 业务数据 ${dataDescription} } ] }; const aiResponse await aiApiClient.post(‘/chat/completions’, requestData); const reportText aiResponse.data.choices[0].message.content; res.json({ success: true, data: { report: reportText, generated_at: new Date().toISOString(), report_type: reportType } }); } catch (error) { console.error(‘报告生成接口错误:’, error); res.status(500).json({ success: false, error: ‘报告生成失败’ }); } });这样三个核心的AI功能接口就实现了。后端现在具备了接收请求、调用AI、返回结果的能力。3. 前端界面Vue/React与AI功能交互后端逻辑通了我们还需要一个界面让用户能方便地使用这些功能。这里我以Vue 3配合Element Plus UI库为例快速搭建几个功能页面。React的思路是类似的。3.1 构建图片审核组件创建一个图片上传和审核结果展示的组件。template div class“image-audit” h3图片内容智能审核/h3 el-upload class“upload-demo” action“” // 置空我们自定义上传逻辑 :auto-upload“false” :on-change“handleFileChange” :show-file-list“false” el-button type“primary”点击上传图片/el-button template #tip div class“el-upload__tip”支持上传JPG/PNG格式图片用于AI内容安全审核/div /template /el-upload div v-if“uploadedImage” class“image-preview” h4上传的图片/h4 img :src“uploadedImage” alt“预览” style“max-width: 300px;” / el-button type“success” click“submitForAudit” :loading“auditLoading” {{ auditLoading ? ‘AI分析中…’ : ‘开始AI审核’ }} /el-button /div div v-if“auditResult” class“result-section” h4AI审核结果/h4 el-alert :title“auditResult.data.is_violated ? ‘⚠️ 内容疑似违规’ : ‘✅ 内容安全’” :type“auditResult.data.is_violated ? ‘warning’ : ‘success’” :closable“false” show-icon / pstrong图片描述/strong{{ auditResult.data.description }}/p pstrong判断理由/strong{{ auditResult.data.reason }}/p pstrong风险分类/strong{{ (auditResult.data.categories || []).join(‘, ‘) }}/p /div /div /template script setup import { ref } from ‘vue’; import { ElMessage } from ‘element-plus’; import axios from ‘axios’; const uploadedImage ref(null); const auditResult ref(null); const auditLoading ref(false); const currentFile ref(null); const handleFileChange (file) { const reader new FileReader(); reader.onload (e) { uploadedImage.value e.target.result; }; reader.readAsDataURL(file.raw); currentFile.value file.raw; }; const submitForAudit async () { if (!currentFile.value) { ElMessage.warning(‘请先选择图片’); return; } auditLoading.value true; auditResult.value null; const formData new FormData(); formData.append(‘image’, currentFile.value); try { const response await axios.post(‘/api/ai/audit-image’, formData, { headers: { ‘Content-Type’: ‘multipart/form-data’ } }); auditResult.value response.data; ElMessage.success(‘图片审核完成’); } catch (error) { console.error(‘审核失败:’, error); ElMessage.error(‘审核失败’ (error.response?.data?.error || error.message)); } finally { auditLoading.value false; } }; /script3.2 构建文本分析与报告生成组件再创建一个组件包含文本输入分析和报告生成两个功能块。template div class“text-analysis” h3文本智能分析与报告生成/h3 div class“function-block” h4文本分类与打标/h4 el-input v-model“inputText” type“textarea” :rows“5” placeholder“请输入需要分析的文本例如用户反馈、文章内容等…” / el-button type“primary” click“analyzeText” :loading“textLoading” style“margin-top: 10px;” 开始AI分析 /el-button div v-if“textResult” class“result-box” pstrong分类/strongel-tag{{ textResult.data.category }}/el-tag/p pstrong情绪/strongel-tag :type“getSentimentType(textResult.data.sentiment)” {{ textResult.data.sentiment }} /el-tag/p pstrong关键词标签/strong el-tag v-for“tag in textResult.data.tags” :key“tag” style“margin-right: 5px;”{{ tag }}/el-tag /p pstrong摘要/strong{{ textResult.data.summary }}/p /div /div div class“function-block” h4数据报告生成/h4 el-input v-model“reportDataStr” type“textarea” :rows“4” placeholder‘请输入JSON格式的业务数据例如{“sales”: {“monday”: 12000, “tuesday”: 15000}, “new_users”: 45}’ / el-button type“success” click“generateReport” :loading“reportLoading” style“margin-top: 10px;” 生成AI报告 /el-button div v-if“reportResult” class“result-box” pstrong生成的报告/strong/p el-card style“white-space: pre-wrap;”{{ reportResult.data.report }}/el-card p class“report-meta”报告类型{{ reportResult.data.report_type }} | 生成于{{ formatDate(reportResult.data.generated_at) }}/p /div /div /div /template script setup import { ref } from ‘vue’; import { ElMessage } from ‘element-plus’; import axios from ‘axios’; const inputText ref(‘’); const reportDataStr ref(‘’); const textResult ref(null); const reportResult ref(null); const textLoading ref(false); const reportLoading ref(false); const getSentimentType (sentiment) { const map { ‘积极’: ‘success’, ‘消极’: ‘danger’, ‘中性’: ‘info’ }; return map[sentiment] || ‘info’; }; const formatDate (isoString) new Date(isoString).toLocaleString(); const analyzeText async () { if (!inputText.value.trim()) { ElMessage.warning(‘请输入文本内容’); return; } textLoading.value true; try { const response await axios.post(‘/api/ai/analyze-text’, { text: inputText.value }); textResult.value response.data; } catch (error) { ElMessage.error(‘文本分析失败’); } finally { textLoading.value false; } }; const generateReport async () { let dataObj; try { dataObj JSON.parse(reportDataStr.value || ‘{}’); } catch (e) { ElMessage.warning(‘请输入有效的JSON数据’); return; } reportLoading.value true; try { const response await axios.post(‘/api/ai/generate-report’, { data: dataObj }); reportResult.value response.data; } catch (error) { ElMessage.error(‘报告生成失败’); } finally { reportLoading.value false; } }; /script这样一个具备图片审核、文本分析和报告生成功能的简易管理后台前端界面就有了。你可以将这些组件整合到你的Vue或React项目路由中。4. 项目整合与部署建议前后端代码都写好了最后一步是把它们串起来让整个系统跑起来并且考虑一下怎么部署上线。4.1 前后端联调与测试首先确保后端服务已经运行在http://localhost:3000。在前端项目中你需要配置代理或者直接调用后端地址以解决开发时的跨域问题。如果你使用ViteVue/React现代项目常用可以在vite.config.js中配置代理// vite.config.js import { defineConfig } from ‘vite’ import vue from ‘vitejs/plugin-vue’ export default defineConfig({ plugins: [vue()], server: { proxy: { ‘/api’: { target: ‘http://localhost:3000’, // 你的后端地址 changeOrigin: true, } } } })配置好后前端通过/api/ai/audit-image发起的请求就会被代理到http://localhost:3000/api/ai/audit-image从而避免跨域错误。然后你就可以启动前端开发服务器通常是npm run dev在浏览器里访问尝试上传图片、输入文本看看整个流程是否畅通AI返回的结果是否正确展示。4.2 项目结构优化与部署一个清晰的项目结构有助于团队协作和后期维护。一个典型的全栈项目可能这样组织ai-backend-admin/ ├── server/ # 后端Node.js代码 │ ├── server.js # 主入口文件 │ ├── routes/ # 路由模块可拆分 │ │ └── ai.routes.js │ ├── controllers/ # 控制器处理业务逻辑 │ │ └── ai.controller.js │ ├── services/ # 服务层如AI API调用封装 │ │ └── ai.service.js │ ├── utils/ # 工具函数 │ ├── .env # 环境变量不上传git │ └── package.json ├── client/ # 前端Vue/React代码 │ ├── src/ │ ├── public/ │ └── package.json ├── uploads/ # 文件上传临时目录应在.gitignore中忽略 └── README.md关于部署对于个人项目或小型团队可以考虑以下方案前后端分离部署这是主流做法。将构建好的前端静态文件如dist文件夹托管到Vercel、Netlify或对象存储如AWS S3、阿里云OSS。后端Node.js服务则可以部署到Heroku、Railway或任何支持Node.js的云服务器如AWS EC2、阿里云ECS。使用Docker容器化编写Dockerfile将后端服务容器化可以极大地简化部署流程并保证环境一致性。结合Docker Compose还可以轻松管理数据库等其他服务。环境变量管理务必确保生产环境的.env文件中的AI_API_KEY等敏感信息与开发环境不同并且通过安全的渠道配置在服务器上切勿写入代码。5. 总结走完这一整套流程你会发现在Node.js全栈项目里集成像SmolVLA这样的多模态AI模型并没有想象中那么复杂。核心思路就是后端充当一个“翻译官”和“调度员”接收前端的请求转换成AI模型能理解的格式调用API再把结果整理好返回给前端。这次我们实现了三个很实用的后台管理功能图片审核、文本分类和报告生成。你可以根据自己的业务需求举一反三比如让AI自动给商品图片打标签、分析用户评论的情感趋势或者生成周会摘要等等。关键在于设计好提示词Prompt让AI明白你想要它做什么。在实际开发中你可能会遇到网络超时、API限流、结果格式不稳定等问题。这就需要你在后端代码中加入更完善的错误处理、重试机制以及对AI返回的内容做校验和兜底处理。另外对于图片、文件的上传也要考虑大小限制、格式校验和存储安全。总的来说AI能力的引入能让传统的后台管理系统变得“聪明”很多把开发者从一些规则固定但繁琐的任务中解放出来。希望这个实践能给你带来一些启发动手试试把它应用到你的下一个项目里吧。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
SmolVLA与Node.js全栈开发：构建AI赋能的后台管理系统
SmolVLA与Node.js全栈开发构建AI赋能的后台管理系统你是不是也遇到过这样的场景后台管理系统里每天有大量用户上传的图片需要审核有堆积如山的文本内容需要分类或者需要从一堆数据里自动生成报告。这些工作重复、枯燥还容易出错人工处理效率实在太低。最近我尝试把SmolVLA这个多模态模型集成到了一个Node.js全栈项目里用它来给后台管理系统“装上大脑”。效果还挺让人惊喜的以前需要人工盯着看的活儿现在大部分都能自动完成省时省力。这篇文章我就来跟你分享一下具体的做法。我会用一个内容审核和数据报告生成的场景作为例子带你走一遍从前端到后端的完整集成流程。即使你对AI模型不太熟悉跟着步骤走也能在自己的Node.js项目里用上这个能力。1. 项目准备与环境搭建在开始敲代码之前我们得先把“舞台”搭好。这包括准备好Node.js环境、初始化项目以及把SmolVLA模型部署起来。别担心每一步我都会说清楚。1.1 Node.js环境与项目初始化首先确保你的电脑上已经安装了Node.js。打开终端输入node -v和npm -v如果能显示出版本号说明已经装好了。如果没有可以去Node.js官网下载安装包选择LTS长期支持版本安装过程基本就是一路点“下一步”。环境准备好之后我们创建一个新的项目目录并初始化它。# 创建一个新的项目文件夹 mkdir ai-backend-admin cd ai-backend-admin # 初始化一个新的Node.js项目一路按回车用默认设置就行 npm init -y初始化完成后你会看到一个package.json文件它就像是项目的“身份证”和“说明书”。接下来安装我们后端需要的核心依赖。我们使用Express来快速搭建Web服务器。# 安装Express框架和一些常用的中间件 npm install express cors dotenv # 安装一个用于处理文件上传的中间件后面上传图片给AI分析时会用到 npm install multer # 安装axios用于在服务器端向SmolVLA的API发送请求 npm install axios同时我们安装一些开发时用的工具让写代码更顺畅。# -D 表示这些是开发依赖只在写代码时需要项目上线后不需要 npm install -D nodemon安装完依赖修改package.json文件添加一个启动脚本这样以后每次运行项目就不用输入长长的命令了。{ scripts: { start: node server.js, dev: nodemon server.js } }现在基础的Node.js后端环境就准备好了。你可以运行npm run dev来启动服务器虽然我们还没写服务器代码它会监控文件变化并自动重启非常适合开发阶段。1.2 SmolVLA模型部署与API准备我们的后台系统需要一个“智能核心”这就是SmolVLA模型。对于全栈开发者来说最方便的方式不是自己去训练或部署完整的模型而是通过API来调用已经部署好的模型服务。这里有两种常见的思路使用云服务提供的API一些AI平台提供了现成的多模态模型API你只需要申请一个密钥API Key就可以像调用普通Web接口一样调用它。这种方式最简单无需关心服务器和显卡。本地部署API服务如果你对数据隐私要求极高或者希望网络延迟更低可以在自己的服务器上部署SmolVLA模型并封装成HTTP API供你的Node.js后端调用。这需要一台带有GPU的服务器并有一定的模型部署经验。为了演示的通用性我们假设采用第一种方式。你需要在某个AI云服务平台这里不指定具体平台注册账号创建一个项目并获取你的API密钥。这个密钥就像一把钥匙你的代码用它来证明身份并调用服务。在项目根目录下创建一个.env文件用来安全地存储这个密钥和其他配置。这个文件不要提交到代码仓库。# .env 文件内容示例 PORT3000 AI_API_BASE_URLhttps://api.example-ai-platform.com/v1 AI_API_KEYyour_super_secret_api_key_here记得把your_super_secret_api_key_here替换成你实际获得的密钥。然后在项目中安装dotenv包前面已经装了并在代码开头加载它就能通过process.env.AI_API_KEY来安全地使用密钥了。2. 后端核心构建Node.js与AI的桥梁环境搭好了钥匙也拿到了接下来就是构建后端的逻辑。这部分是系统的“中枢神经”负责接收前端的请求去调用AI API然后把结果整理好返回给前端。2.1 设计数据模型与API接口我们先规划一下系统需要做什么。以一个简单的“智能内容管理”模块为例它可能包含以下功能图片智能审核上传一张图片AI自动识别其中是否包含违规内容如暴力、敏感文字并返回审核结果和理由。文本分类与打标输入一段文本如用户反馈、文章草稿AI自动将其分类如“投诉”、“咨询”、“表扬”并提取关键词作为标签。数据报告生成输入一组结构化的业务数据如本周销售数字AI自动生成一段简洁的文本总结报告。根据这些功能我们来设计对应的数据模型和API路由。在项目根目录下创建server.js作为我们的主服务器文件。// server.js - 主服务器入口文件 require(‘dotenv’).config(); // 加载环境变量 const express require(‘express’); const cors require(‘cors’); const multer require(‘multer’); const axios require(‘axios’); const app express(); const port process.env.PORT || 3000; // 基础中间件 app.use(cors()); // 允许前端跨域请求 app.use(express.json()); // 解析JSON格式的请求体 app.use(express.urlencoded({ extended: true })); // 解析URL编码的请求体 // 配置multer用于处理文件上传将图片暂存到 ‘uploads/’ 目录 const upload multer({ dest: ‘uploads/’ }); // 配置一个全局的axios实例用于调用AI API统一添加认证头 const aiApiClient axios.create({ baseURL: process.env.AI_API_BASE_URL, headers: { ‘Authorization’: Bearer ${process.env.AI_API_KEY}, ‘Content-Type’: ‘application/json’ } }); // 定义我们的API路由 // 1. 健康检查端点 app.get(‘/api/health’, (req, res) { res.json({ status: ‘OK’, message: ‘AI后台管理系统服务运行正常’ }); }); // 2. 图片智能审核接口 app.post(‘/api/ai/audit-image’, upload.single(‘image’), async (req, res) { // 具体逻辑在后面实现 }); // 3. 文本分类与打标接口 app.post(‘/api/ai/analyze-text’, async (req, res) { // 具体逻辑在后面实现 }); // 4. 数据报告生成接口 app.post(‘/api/ai/generate-report’, async (req, res) { // 具体逻辑在后面实现 }); // 启动服务器 app.listen(port, () { console.log(服务器已启动监听端口${port}); });这个框架搭好了接下来我们逐一实现这三个核心的AI功能接口。2.2 实现核心AI功能接口接口一图片智能审核这个接口接收前端上传的图片文件将其发送给SmolVLA模型要求模型识别图片内容并判断是否违规。// 在 server.js 中完善 /api/ai/audit-image 接口 app.post(‘/api/ai/audit-image’, upload.single(‘image’), async (req, res) { try { if (!req.file) { return res.status(400).json({ error: ‘请上传图片文件’ }); } // 构建发送给AI模型的请求数据。 // 假设AI API接收一个包含图片base64编码和提示词的JSON const imageBuffer require(‘fs’).readFileSync(req.file.path); const imageBase64 imageBuffer.toString(‘base64’); const requestData { model: ‘smolvla’, // 指定模型名称根据实际API调整 messages: [ { role: ‘user’, content: [ { type: ‘text’, text: ‘请详细描述这张图片的内容。并判断内容是否可能涉及暴力、血腥、敏感政治或违规信息。请用JSON格式回答包含字段description描述, is_violated是否违规布尔值, reason判断理由, categories涉及的风险分类数组。’ }, { type: ‘image_url’, image_url: { url: data:image/jpeg;base64,${imageBase64} } } ] } ] }; // 调用AI API const aiResponse await aiApiClient.post(‘/chat/completions’, requestData); const aiResult aiResponse.data.choices[0].message.content; // 清理上传的临时文件 require(‘fs’).unlinkSync(req.file.path); // 尝试解析AI返回的JSON并返回给前端 let parsedResult; try { parsedResult JSON.parse(aiResult); } catch (e) { parsedResult { raw_response: aiResult }; // 如果AI没返回标准JSON返回原始文本 } res.json({ success: true, data: parsedResult, fileInfo: { originalname: req.file.originalname } }); } catch (error) { console.error(‘图片审核接口错误:’, error); res.status(500).json({ success: false, error: ‘图片审核处理失败’, detail: error.message }); } });接口二文本分类与打标这个接口接收一段文本让AI理解其内容并进行分类和关键词提取。// 在 server.js 中完善 /api/ai/analyze-text 接口 app.post(‘/api/ai/analyze-text’, async (req, res) { try { const { text } req.body; if (!text || text.trim().length 0) { return res.status(400).json({ error: ‘请输入需要分析的文本’ }); } const requestData { model: ‘smolvla’, messages: [ { role: ‘user’, content: 请分析以下文本完成以下任务 1. 判断其主要类别[投诉建议, 产品咨询, 售后服务, 表扬感谢, 其他]。 2. 提取3-5个关键词或短语作为标签。 3. 总结文本的核心情绪[积极, 消极, 中性]。 请将结果以JSON格式返回包含字段category类别, tags标签数组, sentiment情绪, summary一句话摘要。 待分析文本${text} } ] }; const aiResponse await aiApiClient.post(‘/chat/completions’, requestData); const aiResult aiResponse.data.choices[0].message.content; let parsedResult; try { parsedResult JSON.parse(aiResult); } catch (e) { parsedResult { raw_response: aiResult }; } res.json({ success: true, data: parsedResult }); } catch (error) { console.error(‘文本分析接口错误:’, error); res.status(500).json({ success: false, error: ‘文本分析失败’ }); } });接口三数据报告生成这个接口接收结构化的业务数据让AI扮演一个分析师生成一段描述性报告。// 在 server.js 中完善 /api/ai/generate-report 接口 app.post(‘/api/ai/generate-report’, async (req, res) { try { const { data, reportType ‘weekly_summary’ } req.body; // data 是一个对象例如销售数据 if (!data) { return res.status(400).json({ error: ‘请提供需要生成报告的数据’ }); } // 将数据转换为易于理解的文本描述作为提示词的一部分 const dataDescription JSON.stringify(data, null, 2); const requestData { model: ‘smolvla’, messages: [ { role: ‘system’, content: ‘你是一个专业的业务数据分析师擅长将枯燥的数据转化为清晰、有洞察力的文字报告。’ }, { role: ‘user’, content: 请根据以下${reportType}的业务数据生成一段约200字的分析报告。报告需突出关键变化、亮点和潜在问题语言简洁专业。 业务数据 ${dataDescription} } ] }; const aiResponse await aiApiClient.post(‘/chat/completions’, requestData); const reportText aiResponse.data.choices[0].message.content; res.json({ success: true, data: { report: reportText, generated_at: new Date().toISOString(), report_type: reportType } }); } catch (error) { console.error(‘报告生成接口错误:’, error); res.status(500).json({ success: false, error: ‘报告生成失败’ }); } });这样三个核心的AI功能接口就实现了。后端现在具备了接收请求、调用AI、返回结果的能力。3. 前端界面Vue/React与AI功能交互后端逻辑通了我们还需要一个界面让用户能方便地使用这些功能。这里我以Vue 3配合Element Plus UI库为例快速搭建几个功能页面。React的思路是类似的。3.1 构建图片审核组件创建一个图片上传和审核结果展示的组件。template div class“image-audit” h3图片内容智能审核/h3 el-upload class“upload-demo” action“” // 置空我们自定义上传逻辑 :auto-upload“false” :on-change“handleFileChange” :show-file-list“false” el-button type“primary”点击上传图片/el-button template #tip div class“el-upload__tip”支持上传JPG/PNG格式图片用于AI内容安全审核/div /template /el-upload div v-if“uploadedImage” class“image-preview” h4上传的图片/h4 img :src“uploadedImage” alt“预览” style“max-width: 300px;” / el-button type“success” click“submitForAudit” :loading“auditLoading” {{ auditLoading ? ‘AI分析中…’ : ‘开始AI审核’ }} /el-button /div div v-if“auditResult” class“result-section” h4AI审核结果/h4 el-alert :title“auditResult.data.is_violated ? ‘⚠️ 内容疑似违规’ : ‘✅ 内容安全’” :type“auditResult.data.is_violated ? ‘warning’ : ‘success’” :closable“false” show-icon / pstrong图片描述/strong{{ auditResult.data.description }}/p pstrong判断理由/strong{{ auditResult.data.reason }}/p pstrong风险分类/strong{{ (auditResult.data.categories || []).join(‘, ‘) }}/p /div /div /template script setup import { ref } from ‘vue’; import { ElMessage } from ‘element-plus’; import axios from ‘axios’; const uploadedImage ref(null); const auditResult ref(null); const auditLoading ref(false); const currentFile ref(null); const handleFileChange (file) { const reader new FileReader(); reader.onload (e) { uploadedImage.value e.target.result; }; reader.readAsDataURL(file.raw); currentFile.value file.raw; }; const submitForAudit async () { if (!currentFile.value) { ElMessage.warning(‘请先选择图片’); return; } auditLoading.value true; auditResult.value null; const formData new FormData(); formData.append(‘image’, currentFile.value); try { const response await axios.post(‘/api/ai/audit-image’, formData, { headers: { ‘Content-Type’: ‘multipart/form-data’ } }); auditResult.value response.data; ElMessage.success(‘图片审核完成’); } catch (error) { console.error(‘审核失败:’, error); ElMessage.error(‘审核失败’ (error.response?.data?.error || error.message)); } finally { auditLoading.value false; } }; /script3.2 构建文本分析与报告生成组件再创建一个组件包含文本输入分析和报告生成两个功能块。template div class“text-analysis” h3文本智能分析与报告生成/h3 div class“function-block” h4文本分类与打标/h4 el-input v-model“inputText” type“textarea” :rows“5” placeholder“请输入需要分析的文本例如用户反馈、文章内容等…” / el-button type“primary” click“analyzeText” :loading“textLoading” style“margin-top: 10px;” 开始AI分析 /el-button div v-if“textResult” class“result-box” pstrong分类/strongel-tag{{ textResult.data.category }}/el-tag/p pstrong情绪/strongel-tag :type“getSentimentType(textResult.data.sentiment)” {{ textResult.data.sentiment }} /el-tag/p pstrong关键词标签/strong el-tag v-for“tag in textResult.data.tags” :key“tag” style“margin-right: 5px;”{{ tag }}/el-tag /p pstrong摘要/strong{{ textResult.data.summary }}/p /div /div div class“function-block” h4数据报告生成/h4 el-input v-model“reportDataStr” type“textarea” :rows“4” placeholder‘请输入JSON格式的业务数据例如{“sales”: {“monday”: 12000, “tuesday”: 15000}, “new_users”: 45}’ / el-button type“success” click“generateReport” :loading“reportLoading” style“margin-top: 10px;” 生成AI报告 /el-button div v-if“reportResult” class“result-box” pstrong生成的报告/strong/p el-card style“white-space: pre-wrap;”{{ reportResult.data.report }}/el-card p class“report-meta”报告类型{{ reportResult.data.report_type }} | 生成于{{ formatDate(reportResult.data.generated_at) }}/p /div /div /div /template script setup import { ref } from ‘vue’; import { ElMessage } from ‘element-plus’; import axios from ‘axios’; const inputText ref(‘’); const reportDataStr ref(‘’); const textResult ref(null); const reportResult ref(null); const textLoading ref(false); const reportLoading ref(false); const getSentimentType (sentiment) { const map { ‘积极’: ‘success’, ‘消极’: ‘danger’, ‘中性’: ‘info’ }; return map[sentiment] || ‘info’; }; const formatDate (isoString) new Date(isoString).toLocaleString(); const analyzeText async () { if (!inputText.value.trim()) { ElMessage.warning(‘请输入文本内容’); return; } textLoading.value true; try { const response await axios.post(‘/api/ai/analyze-text’, { text: inputText.value }); textResult.value response.data; } catch (error) { ElMessage.error(‘文本分析失败’); } finally { textLoading.value false; } }; const generateReport async () { let dataObj; try { dataObj JSON.parse(reportDataStr.value || ‘{}’); } catch (e) { ElMessage.warning(‘请输入有效的JSON数据’); return; } reportLoading.value true; try { const response await axios.post(‘/api/ai/generate-report’, { data: dataObj }); reportResult.value response.data; } catch (error) { ElMessage.error(‘报告生成失败’); } finally { reportLoading.value false; } }; /script这样一个具备图片审核、文本分析和报告生成功能的简易管理后台前端界面就有了。你可以将这些组件整合到你的Vue或React项目路由中。4. 项目整合与部署建议前后端代码都写好了最后一步是把它们串起来让整个系统跑起来并且考虑一下怎么部署上线。4.1 前后端联调与测试首先确保后端服务已经运行在http://localhost:3000。在前端项目中你需要配置代理或者直接调用后端地址以解决开发时的跨域问题。如果你使用ViteVue/React现代项目常用可以在vite.config.js中配置代理// vite.config.js import { defineConfig } from ‘vite’ import vue from ‘vitejs/plugin-vue’ export default defineConfig({ plugins: [vue()], server: { proxy: { ‘/api’: { target: ‘http://localhost:3000’, // 你的后端地址 changeOrigin: true, } } } })配置好后前端通过/api/ai/audit-image发起的请求就会被代理到http://localhost:3000/api/ai/audit-image从而避免跨域错误。然后你就可以启动前端开发服务器通常是npm run dev在浏览器里访问尝试上传图片、输入文本看看整个流程是否畅通AI返回的结果是否正确展示。4.2 项目结构优化与部署一个清晰的项目结构有助于团队协作和后期维护。一个典型的全栈项目可能这样组织ai-backend-admin/ ├── server/ # 后端Node.js代码 │ ├── server.js # 主入口文件 │ ├── routes/ # 路由模块可拆分 │ │ └── ai.routes.js │ ├── controllers/ # 控制器处理业务逻辑 │ │ └── ai.controller.js │ ├── services/ # 服务层如AI API调用封装 │ │ └── ai.service.js │ ├── utils/ # 工具函数 │ ├── .env # 环境变量不上传git │ └── package.json ├── client/ # 前端Vue/React代码 │ ├── src/ │ ├── public/ │ └── package.json ├── uploads/ # 文件上传临时目录应在.gitignore中忽略 └── README.md关于部署对于个人项目或小型团队可以考虑以下方案前后端分离部署这是主流做法。将构建好的前端静态文件如dist文件夹托管到Vercel、Netlify或对象存储如AWS S3、阿里云OSS。后端Node.js服务则可以部署到Heroku、Railway或任何支持Node.js的云服务器如AWS EC2、阿里云ECS。使用Docker容器化编写Dockerfile将后端服务容器化可以极大地简化部署流程并保证环境一致性。结合Docker Compose还可以轻松管理数据库等其他服务。环境变量管理务必确保生产环境的.env文件中的AI_API_KEY等敏感信息与开发环境不同并且通过安全的渠道配置在服务器上切勿写入代码。5. 总结走完这一整套流程你会发现在Node.js全栈项目里集成像SmolVLA这样的多模态AI模型并没有想象中那么复杂。核心思路就是后端充当一个“翻译官”和“调度员”接收前端的请求转换成AI模型能理解的格式调用API再把结果整理好返回给前端。这次我们实现了三个很实用的后台管理功能图片审核、文本分类和报告生成。你可以根据自己的业务需求举一反三比如让AI自动给商品图片打标签、分析用户评论的情感趋势或者生成周会摘要等等。关键在于设计好提示词Prompt让AI明白你想要它做什么。在实际开发中你可能会遇到网络超时、API限流、结果格式不稳定等问题。这就需要你在后端代码中加入更完善的错误处理、重试机制以及对AI返回的内容做校验和兜底处理。另外对于图片、文件的上传也要考虑大小限制、格式校验和存储安全。总的来说AI能力的引入能让传统的后台管理系统变得“聪明”很多把开发者从一些规则固定但繁琐的任务中解放出来。希望这个实践能给你带来一些启发动手试试把它应用到你的下一个项目里吧。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
![3分钟掌握VideoDownloadHelper：简单高效的网页视频下载插件终极指南 [特殊字符]](images/news3.jpg)
