Qwen3.5-4B-AWQ代码实例：React前端对接Qwen3.5 WebUI API完整示例

Qwen3.5-4B-AWQ代码实例React前端对接Qwen3.5 WebUI API完整示例1. 项目概述Qwen3.5-4B-AWQ-4bit是阿里云通义千问团队推出的轻量级大语言模型采用4bit AWQ量化技术在保持高性能的同时大幅降低资源需求极致低资源量化后显存仅需约3GBRTX 3060/4060等消费级显卡即可流畅运行性能均衡MMLU-Pro得分接近Qwen3-30B-A3BOmniDocBench表现优于GPT-5-Nano全能力覆盖支持201种语言、原生多模态(图文)、长上下文、工具调用等能力部署友好适配llama.cpp、Ollama等多种推理框架本文将展示如何在React前端应用中对接Qwen3.5的WebUI API实现完整的对话交互功能。2. 环境准备2.1 后端服务部署确保已按照以下配置部署Qwen3.5-4B-AWQ服务# 模型路径 /root/ai-models/cyankiwi/Qwen3___5-4B-AWQ-4bit # 使用vLLM引擎运行 supervisorctl start qwen35-4b-awq # 访问地址 http://localhost:78602.2 前端项目初始化创建React项目并安装必要依赖npx create-react-app qwen-demo cd qwen-demo npm install axios mui/material mui/icons-material3. API接口分析Qwen3.5 WebUI提供以下核心API端点端点方法描述参数/api/chatPOST对话接口{messages: array, stream: boolean}/api/modelsGET获取模型信息-重点对接/api/chat接口其请求/响应格式如下请求示例{ messages: [ {role: user, content: 你好} ], stream: false }响应示例{ message: { role: assistant, content: 你好我是Qwen助手有什么可以帮您的吗 } }4. React实现步骤4.1 创建API服务模块在src/api.js中封装API调用import axios from axios; const API_BASE http://localhost:7860; export const chatWithQwen async (messages) { try { const response await axios.post(${API_BASE}/api/chat, { messages, stream: false }); return response.data.message; } catch (error) { console.error(API调用失败:, error); throw error; } };4.2 构建聊天界面组件创建src/ChatInterface.jsimport React, { useState } from react; import { TextField, Button, Box, List, ListItem, Paper } from mui/material; import SendIcon from mui/icons-material/Send; import { chatWithQwen } from ./api; function ChatInterface() { const [messages, setMessages] useState([]); const [input, setInput] useState(); const [isLoading, setIsLoading] useState(false); const handleSend async () { if (!input.trim()) return; const userMessage { role: user, content: input }; const newMessages [...messages, userMessage]; setMessages(newMessages); setInput(); setIsLoading(true); try { const response await chatWithQwen(newMessages); setMessages([...newMessages, response]); } finally { setIsLoading(false); } }; return ( Box sx{{ maxWidth: 800, margin: auto, p: 2 }} Paper elevation{3} sx{{ p: 2, height: 60vh, overflow: auto }} List {messages.map((msg, idx) ( ListItem key{idx} sx{{ justifyContent: msg.role user ? flex-end : flex-start }} Paper sx{{ p: 2, bgcolor: msg.role user ? primary.light : secondary.light }} {msg.content} /Paper /ListItem ))} /List /Paper Box sx{{ display: flex, mt: 2 }} TextField fullWidth value{input} onChange{(e) setInput(e.target.value)} onKeyPress{(e) e.key Enter handleSend()} disabled{isLoading} placeholder输入消息... / Button variantcontained onClick{handleSend} disabled{isLoading || !input.trim()} sx{{ ml: 2 }} SendIcon / /Button /Box /Box ); } export default ChatInterface;4.3 集成到主应用修改src/App.jsimport React from react; import ChatInterface from ./ChatInterface; function App() { return ( div classNameApp header h1Qwen3.5-4B-AWQ 对话演示/h1 /header ChatInterface / /div ); } export default App;5. 功能扩展建议5.1 流式响应支持修改API调用实现流式响应export const streamChatWithQwen async (messages, onData) { const response await fetch(${API_BASE}/api/chat, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ messages, stream: true }) }); const reader response.body.getReader(); const decoder new TextDecoder(); let buffer ; while (true) { const { done, value } await reader.read(); if (done) break; buffer decoder.decode(value, { stream: true }); const lines buffer.split(\n); buffer lines.pop(); for (const line of lines) { if (line.startsWith(data:)) { const data JSON.parse(line.slice(5)); onData(data); } } } };5.2 多模态支持处理图片上传和展示// 在ChatInterface中添加图片上传逻辑 const handleImageUpload (e) { const file e.target.files[0]; if (!file) return; const reader new FileReader(); reader.onload (event) { const imageMessage { role: user, content: , image: event.target.result }; setMessages([...messages, imageMessage]); }; reader.readAsDataURL(file); }; // 在消息展示中添加图片渲染 {messages.map((msg, idx) ( ListItem key{idx} sx{{ justifyContent: msg.role user ? flex-end : flex-start }} Paper sx{{ p: 2, bgcolor: msg.role user ? primary.light : secondary.light }} {msg.image ? ( img src{msg.image} alt上传图片 style{{ maxWidth: 100%, maxHeight: 200 }} / ) : ( msg.content )} /Paper /ListItem ))}6. 总结通过本文的完整示例我们实现了React前端与Qwen3.5 WebUI API的对接使用axios封装API调用完整的聊天界面支持消息发送、接收和展示扩展功能流式响应和多模态支持方案Qwen3.5-4B-AWQ作为轻量级大模型非常适合在消费级硬件上部署结合React可以快速构建各类AI应用前端。开发者可以基于此示例进一步扩展添加对话历史管理实现更丰富的UI交互集成工具调用等高级功能获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。