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

前后端分离项目集成：Vue前端调用Pixel Couplet Gen生成动态春联

news 2026/5/9 17:44:25

Vue前端集成Pixel Couplet Gen生成动态春联实战指南

1. 项目背景与价值

春节将至，很多网站和应用都希望增加节日氛围。传统做法是设计师手动制作几套春联模板，但这样缺乏个性化和互动性。Pixel Couplet Gen作为AI生成对联的服务，可以根据用户输入的关键词实时生成个性化春联，为前端项目带来全新体验。

通过Vue3前端集成这个服务，我们可以实现：

用户自定义输入关键词生成专属春联
多种风格选择满足不同审美需求
实时预览效果提升用户体验
减少设计师重复劳动，降低内容生产成本

2. 技术方案设计

2.1 整体架构

我们的前端架构采用Vue3 + TypeScript + Pinia的组合：

Vue3：使用Composition API编写更清晰的逻辑
TypeScript：提供更好的类型检查和代码提示
Pinia：管理生成状态和用户偏好
Axios：处理API请求
WebSocket：接收长任务进度通知

2.2 关键流程

用户在前端输入关键词并选择风格
前端调用Pixel Couplet Gen API
服务端返回任务ID并开始处理
前端建立WebSocket连接监听进度
服务端完成生成后返回图片URL
前端加载并展示生成的春联

3. 核心实现步骤

3.1 API接口封装

首先我们封装调用Pixel Couplet Gen的API服务：

// src/services/coupletService.ts import axios from 'axios'; const API_BASE = 'https://api.pixelcouplet.gen/v1'; export interface GenerateParams { keywords: string; style: 'traditional' | 'modern' | 'cute'; size?: 'small' | 'medium' | 'large'; } export const generateCouplet = async (params: GenerateParams) => { const response = await axios.post(`${API_BASE}/generate`, params); return response.data; // { taskId: string, estimatedTime: number } };

3.2 WebSocket连接管理

对于长任务，我们使用WebSocket接收进度通知：

// src/services/wsService.ts let socket: WebSocket | null = null; export const connectWebSocket = (taskId: string, callbacks: { onProgress: (percent: number) => void; onComplete: (imageUrl: string) => void; onError: (message: string) => void; }) => { socket = new WebSocket(`wss://api.pixelcouplet.gen/ws?taskId=${taskId}`); socket.onmessage = (event) => { const data = JSON.parse(event.data); switch (data.type) { case 'progress': callbacks.onProgress(data.percent); break; case 'complete': callbacks.onComplete(data.imageUrl); break; case 'error': callbacks.onError(data.message); break; } }; return () => { socket?.close(); socket = null; }; };

3.3 Vue组件实现

创建生成春联的主组件：

<!-- src/components/CoupletGenerator.vue --> <script setup lang="ts"> import { ref } from 'vue'; import { generateCouplet } from '../services/coupletService'; import { connectWebSocket } from '../services/wsService'; const keywords = ref(''); const style = ref('traditional'); const progress = ref(0); const imageUrl = ref(''); const isLoading = ref(false); const error = ref(''); const handleGenerate = async () => { try { isLoading.value = true; error.value = ''; const { taskId } = await generateCouplet({ keywords: keywords.value, style: style.value }); const disconnect = connectWebSocket(taskId, { onProgress: (percent) => progress.value = percent, onComplete: (url) => { imageUrl.value = url; isLoading.value = false; }, onError: (message) => { error.value = message; isLoading.value = false; } }); // 组件卸载时断开连接 onUnmounted(disconnect); } catch (err) { error.value = '生成失败，请稍后重试'; isLoading.value = false; } }; </script>

4. 用户体验优化

4.1 图片加载优化

生成的春联图片可能较大，我们可以采取以下优化措施：

<template> <div class="result-container"> <template v-if="imageUrl"> <img :src="imageUrl" alt="生成的春联" loading="lazy" @load="handleImageLoad" /> <div v-if="isImageLoading" class="loading-overlay"> 图片加载中... </div> </template> </div> </template> <script setup> const isImageLoading = ref(true); const handleImageLoad = () => { isImageLoading.value = false; }; </script>

4.2 进度反馈设计

对于长任务，良好的进度反馈很重要：

<template> <div class="progress-container" v-if="isLoading"> <div class="progress-bar" :style="{ width: `${progress}%` }"></div> <div class="progress-text">{{ progress }}%</div> <div class="tips">AI正在创作您的专属春联...</div> </div> </template> <style scoped> .progress-container { margin: 20px 0; background: #f5f5f5; border-radius: 8px; padding: 10px; position: relative; } .progress-bar { height: 8px; background: linear-gradient(90deg, #ff4d4f, #ff7d45); border-radius: 4px; transition: width 0.3s ease; } .progress-text { position: absolute; right: 10px; top: 10px; font-size: 12px; color: #666; } </style>

5. 实际应用与扩展

5.1 保存与分享功能

增加保存和分享功能提升用户参与感：

const handleSave = async () => { if (!imageUrl.value) return; try { const response = await fetch(imageUrl.value); const blob = await response.blob(); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = `春联-${keywords.value}.png`; a.click(); } catch (err) { console.error('保存失败:', err); } }; const handleShare = () => { if (navigator.share) { navigator.share({ title: '我的专属AI春联', text: `看看我用AI生成的"${keywords.value}"主题春联`, url: imageUrl.value }).catch(console.error); } else { // 降级方案 alert('复制链接分享给朋友: ' + imageUrl.value); } };

5.2 多风格预览

提供多种风格选择，并展示预览效果：

<template> <div class="style-selector"> <div v-for="s in styles" :key="s.value" :class="['style-option', { active: style === s.value }]" @click="style = s.value" > <img :src="s.preview" :alt="s.label" /> <span>{{ s.label }}</span> </div> </div> </template> <script setup> const styles = [ { value: 'traditional', label: '传统风格', preview: '/styles/traditional-preview.jpg' }, { value: 'modern', label: '现代风格', preview: '/styles/modern-preview.jpg' }, { value: 'cute', label: '可爱风格', preview: '/styles/cute-preview.jpg' } ]; </script>