当前位置：首页 > news >正文

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

news 2026/6/10 22:32:00

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 vue@next vue-router@4 @vitejs/plugin-vue

3. 后端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_KEY=your_api_key_here PORT=3000

4. 前端界面开发

4.1 创建基础前端结构

在项目根目录创建public文件夹，里面新建index.html：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Phi-3 Vision Demo</title> <script src="https://unpkg.com/vue@3/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 id="app"> <h1>Phi-3 Vision 演示</h1> <div class="upload-area" @dragover.prevent @drop="handleDrop"> <p>拖放图片到这里，或点击上传</p> <input type="file" accept="image/*" @change="handleFileSelect"> <img v-if="imagePreview" :src="imagePreview" id="preview"> </div> <div v-if="imagePreview"> <input v-model="question" placeholder="输入关于图片的问题..."> <button @click="analyzeImage">分析图片</button> </div> <div class="result" v-if="result"> <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> </html>

5. 项目部署

5.1 使用Nginx配置反向代理

安装Nginx后，编辑配置文件（通常在/etc/nginx/sites-available/default）：

server { 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; } }