Node.js全栈开发：快速搭建Phi-3-vision模型演示网站与API网关

Node.js全栈开发快速搭建Phi-3-vision模型演示网站与API网关1. 项目概述与学习目标今天我们要用Node.js搭建一个完整的Web应用用来展示Phi-3-vision-128k-instruct模型的能力。这个项目特别适合前端和全栈开发者通过实际动手你将掌握如何配置Node.js开发环境用Express.js构建API网关开发前端界面与模型交互部署完整的Web应用整个过程大约需要1-2小时最终你会得到一个可以上传图片、获取模型分析结果的完整应用。即使你之前没有接触过AI模型集成跟着步骤走也能顺利完成。2. 环境准备与项目初始化2.1 Node.js安装与验证首先确保你的系统已经安装了Node.js。打开终端运行以下命令检查版本node -v npm -v如果看到版本号建议Node.js 16说明已经安装。如果没有去Node.js官网下载LTS版本安装。2.2 创建项目目录新建项目文件夹并初始化mkdir phi3-vision-demo cd phi3-vision-demo npm init -y这会生成package.json文件记录项目依赖和配置。2.3 安装必要依赖安装Express.js等后端依赖npm install express axios body-parser cors dotenv安装前端开发依赖这里以Vue 3为例npm install vuenext vue-router4 vitejs/plugin-vue3. 后端API网关开发3.1 创建Express基础服务新建server.js文件搭建基础服务const express require(express); const axios require(axios); const bodyParser require(body-parser); const cors require(cors); require(dotenv).config(); const app express(); const PORT process.env.PORT || 3000; // 中间件 app.use(cors()); app.use(bodyParser.json({ limit: 10mb })); app.use(express.static(public)); // 路由 app.get(/, (req, res) { res.send(Phi-3 Vision Demo API); }); // 启动服务 app.listen(PORT, () { console.log(Server running on http://localhost:${PORT}); });3.2 添加模型API转发路由在server.js中添加模型请求转发逻辑// 模型API转发 app.post(/api/analyze, async (req, res) { try { const { image, question } req.body; const response await axios.post(YOUR_MODEL_API_ENDPOINT, { image, question, }, { headers: { Content-Type: application/json, Authorization: Bearer ${process.env.API_KEY} } }); res.json(response.data); } catch (error) { console.error(Model API error:, error); res.status(500).json({ error: Model request failed }); } });记得将YOUR_MODEL_API_ENDPOINT替换为实际的模型API地址并在项目根目录创建.env文件存储API密钥API_KEYyour_api_key_here PORT30004. 前端界面开发4.1 创建基础前端结构在项目根目录创建public文件夹里面新建index.html!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titlePhi-3 Vision Demo/title script srchttps://unpkg.com/vue3/dist/vue.global.js/script style body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; } .upload-area { border: 2px dashed #ccc; padding: 20px; text-align: center; margin: 20px 0; } #preview { max-width: 100%; max-height: 300px; } .result { margin-top: 20px; padding: 15px; background: #f5f5f5; border-radius: 5px; } /style /head body div idapp h1Phi-3 Vision 演示/h1 div classupload-area dragover.prevent drophandleDrop p拖放图片到这里或点击上传/p input typefile acceptimage/* changehandleFileSelect img v-ifimagePreview :srcimagePreview idpreview /div div v-ifimagePreview input v-modelquestion placeholder输入关于图片的问题... button clickanalyzeImage分析图片/button /div div classresult v-ifresult h3分析结果/h3 p{{ result }}/p /div /div script const { createApp, ref } Vue; createApp({ setup() { const imagePreview ref(null); const question ref(); const result ref(); function handleFileSelect(e) { const file e.target.files[0]; if (file) previewImage(file); } function handleDrop(e) { e.preventDefault(); const file e.dataTransfer.files[0]; if (file file.type.startsWith(image/)) { previewImage(file); } } function previewImage(file) { const reader new FileReader(); reader.onload (e) { imagePreview.value e.target.result; }; reader.readAsDataURL(file); } async function analyzeImage() { if (!imagePreview.value || !question.value) return; try { const response await fetch(/api/analyze, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ image: imagePreview.value, question: question.value }) }); const data await response.json(); result.value data.answer || data.result; } catch (error) { console.error(Error:, error); result.value 分析失败请重试; } } return { imagePreview, question, result, handleFileSelect, handleDrop, analyzeImage }; } }).mount(#app); /script /body /html5. 项目部署5.1 使用Nginx配置反向代理安装Nginx后编辑配置文件通常在/etc/nginx/sites-available/defaultserver { listen 80; server_name your_domain.com; location / { proxy_pass http://localhost:3000; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection upgrade; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; } }5.2 启动项目首先启动Node.js服务node server.js然后重启Nginx使配置生效sudo systemctl restart nginx6. 项目测试与优化现在你可以通过浏览器访问你的网站了。测试流程上传一张图片输入关于图片的问题如图片中有什么查看模型返回的分析结果如果遇到问题可以检查确保Node.js服务正在运行检查Nginx错误日志sudo tail -f /var/log/nginx/error.log确认API密钥和环境变量配置正确7. 总结与扩展建议通过这个项目我们成功搭建了一个完整的Phi-3-vision模型演示网站。整个过程涵盖了从环境配置到前后端开发再到部署的全栈开发流程。实际使用中你可能会发现一些可以优化的地方添加加载状态指示器提升用户体验实现历史记录功能保存之前的分析结果增加多语言支持优化图片上传大小限制和处理这个基础框架也可以轻松适配其他AI模型只需修改API转发逻辑即可。希望这个教程能帮助你快速上手AI模型与Web开发的结合应用。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。