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

Pixel Language Portal保姆级教程：从零开始构建支持WebSocket实时翻译的前端界面

news 2026/4/20 8:30:25

Pixel Language Portal保姆级教程：从零开始构建支持WebSocket实时翻译的前端界面

1. 项目介绍与核心价值

Pixel Language Portal（像素语言·跨维传送门）是一款融合了复古像素风格与现代AI翻译技术的创新工具。它基于腾讯Hunyuan-MT-7B翻译引擎构建，通过WebSocket实现实时翻译交互，将传统翻译体验转变为充满游戏感的冒险旅程。

核心亮点：

实时翻译引擎：基于WebSocket的即时通讯架构，响应速度<200ms
像素游戏UI：完全自定义的16-bit风格界面元素和交互动效
多语言支持：覆盖33种语言的互译能力
沉浸式体验：隐藏浏览器默认UI，打造类原生应用感受

2. 环境准备与项目初始化

2.1 基础环境要求

在开始前，请确保你的开发环境满足以下条件：

Node.js v16+（推荐使用LTS版本）
npm/yarn包管理器
现代浏览器（Chrome/Firefox/Edge最新版）
可访问的Hunyuan-MT-7B API端点（或本地模拟服务）

2.2 创建项目骨架

使用Vite快速初始化项目（React版本）：

npm create vite@latest pixel-language-portal --template react-ts cd pixel-language-portal npm install

2.3 安装核心依赖

npm install styled-components @emotion/react @emotion/styled npm install recoil react-use-websocket npm install pixel-fonts

3. 构建像素风格UI框架

3.1 基础样式设置

在src/styles/global.ts中定义像素风格基础样式：

import { createGlobalStyle } from 'styled-components'; export const PixelGlobalStyle = createGlobalStyle` body { background-color: #e3f2fd; font-family: 'Press Start 2P', cursive; margin: 0; overflow: hidden; image-rendering: pixelated; } button { background: #FFD700; border: 4px solid #000; padding: 12px 24px; font-family: inherit; cursor: pointer; box-shadow: 4px 4px 0 #000; &:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #000; } } `;

3.2 创建主界面组件

src/components/PortalInterface.tsx：

import styled from '@emotion/styled'; const InterfaceContainer = styled.div` width: 100vw; height: 100vh; display: grid; grid-template-rows: 80px 1fr; background: url('/pixel-bg.png'); background-size: 200px; `; const HUD = styled.div` background: rgba(0,0,0,0.7); color: #FFD700; padding: 16px; display: flex; justify-content: space-between; border-bottom: 4px solid #FFD700; `; export default function PortalInterface() { return ( <InterfaceContainer> <HUD> <span>HP: ▮▮▮▮▮▮▮▮▮▮</span> <span>LANG: EN → ZH</span> </HUD> {/* 翻译区域将放在这里 */} </InterfaceContainer> ); }

4. 实现WebSocket实时翻译

4.1 配置WebSocket连接

创建src/hooks/useTranslationSocket.ts：

import { useWebSocket } from 'react-use-websocket'; export default function useTranslationSocket() { const { sendMessage, lastMessage, readyState } = useWebSocket( 'wss://your-hunyuan-endpoint/translate', { shouldReconnect: () => true, reconnectAttempts: 10, reconnectInterval: 3000, } ); const translate = (text: string, from: string, to: string) => { sendMessage(JSON.stringify({ text, source_lang: from, target_lang: to })); }; return { translate, translation: lastMessage ? JSON.parse(lastMessage.data).result : null, isConnected: readyState === 1 }; }

4.2 构建翻译交互界面

更新PortalInterface组件：

import { useState } from 'react'; import useTranslationSocket from '../hooks/useTranslationSocket'; import styled from '@emotion/styled'; const TranslationArea = styled.div` display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 24px; `; const TextBox = styled.textarea` background: rgba(255,255,255,0.9); border: 4px solid #000; padding: 16px; font-size: 18px; resize: none; font-family: 'PixelFont', monospace; box-shadow: inset 4px 4px 0 rgba(0,0,0,0.1); `; export default function PortalInterface() { const [inputText, setInputText] = useState(''); const { translate, translation } = useTranslationSocket(); const handleTranslate = () => { if (inputText.trim()) { translate(inputText, 'en', 'zh'); } }; return ( <InterfaceContainer> <HUD> <span>HP: ▮▮▮▮▮▮▮▮▮▮</span> <span>LANG: EN → ZH</span> </HUD> <TranslationArea> <TextBox value={inputText} onChange={(e) => setInputText(e.target.value)} placeholder="输入要翻译的文字..." /> <TextBox value={translation || ''} readOnly placeholder="翻译结果将出现在这里..." style={{ background: '#f0f8ff' }} /> </TranslationArea> <button onClick={handleTranslate}> 启动转码传送! </button> </InterfaceContainer> ); }

5. 添加像素风格特效

5.1 实现翻译成功动画

创建src/utils/effects.ts：

export const showSuccessEffect = () => { const effect = document.createElement('div'); effect.style.position = 'fixed'; effect.style.top = '50%'; effect.style.left = '50%'; effect.style.transform = 'translate(-50%, -50%)'; effect.style.fontSize = '32px'; effect.style.color = '#FFD700'; effect.style.textShadow = '2px 2px 0 #000'; effect.style.zIndex = '1000'; effect.textContent = 'LEVEL UP!'; document.body.appendChild(effect); setTimeout(() => { effect.style.transition = 'all 0.5s'; effect.style.opacity = '0'; effect.style.transform = 'translate(-50%, -100%)'; setTimeout(() => { document.body.removeChild(effect); }, 500); }, 1000); };

5.2 在翻译完成后触发特效

修改useTranslationSockethook：

import { showSuccessEffect } from '../utils/effects'; // ...在useTranslationSocket函数内... useEffect(() => { if (lastMessage) { showSuccessEffect(); } }, [lastMessage]);

6. 项目优化与部署

6.1 添加语言选择功能

创建语言选择组件src/components/LanguageSelector.tsx：

import styled from '@emotion/styled'; const Select = styled.select` background: #000; color: #FFD700; border: 2px solid #FFD700; padding: 8px; font-family: 'Press Start 2P', cursive; margin-left: 16px; `; interface LanguageSelectorProps { value: string; onChange: (lang: string) => void; } export default function LanguageSelector({ value, onChange }: LanguageSelectorProps) { const languages = [ { code: 'en', name: '英语' }, { code: 'zh', name: '中文' }, { code: 'ja', name: '日语' }, // 添加更多语言... ]; return ( <Select value={value} onChange={(e) => onChange(e.target.value)} > {languages.map((lang) => ( <option key={lang.code} value={lang.code}> {lang.name} </option> ))} </Select> ); }

6.2 部署准备

创建vite.config.ts的生产配置：

import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; export default defineConfig({ plugins: [react()], build: { outDir: 'dist', assetsDir: 'pixel-assets', rollupOptions: { output: { manualChunks: { vendor: ['react', 'react-dom', 'styled-components'], }, }, }, }, server: { port: 3000, }, });