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

Pixel Couplet Gen实操手册：像素春联生成结果导出PNG/SVG格式的前端实现方案

news 2026/6/2 14:45:33

Pixel Couplet Gen实操手册：像素春联生成结果导出PNG/SVG格式的前端实现方案

1. 项目背景与核心价值

Pixel Couplet Gen是一款融合传统春节文化与现代像素艺术风格的创新工具。通过ModelScope大模型的文本生成能力，结合精心设计的8-bit视觉元素，为用户提供独特的数字春联创作体验。

核心创新点：

视觉突破：将传统春联转化为像素游戏风格，采用高饱和度的红晶、金块配色方案
技术融合：前端使用纯CSS实现像素卷轴效果，后端依托大模型智能生成对联内容
交互友好：模拟实体按键反馈，让数字创作过程更具仪式感

2. 环境准备与快速部署

2.1 基础环境要求

确保你的开发环境满足以下条件：

# 检查Python版本 python --version # 需要3.8+

2.2 一键安装依赖

项目使用Streamlit作为前端框架，安装所有依赖只需一条命令：

pip install streamlit==1.30.0 pillow svglib

2.3 快速启动应用

克隆仓库后直接运行：

streamlit run pixel_couplet.py

3. 导出功能实现详解

3.1 PNG导出实现方案

PNG格式适合需要高质量像素表现的场景，以下是核心代码逻辑：

from PIL import Image, ImageDraw def export_to_png(text, output_path="couplet.png"): # 创建画布 (800x600像素) img = Image.new("RGB", (800, 600), color=(222, 53, 49)) # 传统红色背景 draw = ImageDraw.Draw(img) # 加载像素字体 (需提前准备.ttf文件) try: font = ImageFont.truetype("pixel_font.ttf", 40) except: font = ImageFont.load_default() # 绘制对联文字 draw.text((100, 200), text["upper"], font=font, fill=(255, 215, 0)) # 金色上联 draw.text((100, 300), text["lower"], font=font, fill=(255, 215, 0)) # 金色下联 draw.text((300, 150), text["horizontal"], font=font, fill=(255, 255, 255)) # 白色横批 # 保存文件 img.save(output_path) return output_path

关键参数说明：

color=(222, 53, 49)：标准春节红底色值
fill=(255, 215, 0)：金色文字RGB值
字体大小40px：保持8-bit风格的清晰度

3.2 SVG导出实现方案

SVG格式适合需要无损缩放和后期编辑的场景：

from svglib.svglib import svg2rlg from reportlab.graphics import renderPM def export_to_svg(text, output_path="couplet.svg"): svg_template = f""" <svg width="800" height="600" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" fill="#DE3531"/> <text x="100" y="220" font-family="'ZCOOL QingKe HuangYou'" font-size="40" fill="#FFD700">{text['upper']}</text> <text x="100" y="320" font-family="'ZCOOL QingKe HuangYou'" font-size="40" fill="#FFD700">{text['lower']}</text> <text x="300" y="170" font-family="'ZCOOL QingKe HuangYou'" font-size="40" fill="#FFFFFF">{text['horizontal']}</text> </svg> """ with open(output_path, "w") as f: f.write(svg_template) # 可选：转换为PNG drawing = svg2rlg(output_path) renderPM.drawToFile(drawing, "couplet_from_svg.png", fmt="PNG") return output_path

技术亮点：

直接使用CSS字体ZCOOL QingKe HuangYou保持像素风格
SVG原生支持无损缩放，适合不同尺寸输出需求
可通过svg2rlg库轻松转换为其他格式

4. 前端交互实现

4.1 Streamlit界面布局

import streamlit as st # 设置页面标题和图标 st.set_page_config(page_title="Pixel Couplet Gen", page_icon="🧧") # 侧边栏控制面板 with st.sidebar: st.header("导出设置") format_type = st.radio("导出格式", ["PNG", "SVG"]) resolution = st.slider("分辨率系数", 1.0, 3.0, 2.0) # 主内容区 st.title("Pixel Couplet Gen") user_input = st.text_input("输入你的新年愿望...") if st.button("生成春联"): couplet = generate_couplet(user_input) # 调用大模型生成对联 if format_type == "PNG": export_to_png(couplet) else: export_to_svg(couplet) st.success("导出成功！")

4.2 交互效果增强

添加像素风格的按钮反馈：

// 在Streamlit组件中注入自定义JS components.html(""" <script> document.querySelector(".stButton>button").addEventListener("click", function(){ this.style.transform = "translateY(2px)"; setTimeout(() => { this.style.transform = ""; }, 100); }); </script> """)

5. 常见问题解决

5.1 字体显示异常

问题现象：导出的图片中文字体显示为默认字体

解决方案：

确保像素字体文件pixel_font.ttf存放在项目目录
添加字体回退机制：

try: font = ImageFont.truetype("pixel_font.ttf", 40) except: font = ImageFont.truetype("simhei.ttf", 40) # 使用系统黑体

5.2 SVG在部分浏览器不显示

问题现象：导出的SVG文件在某些编辑器中无法正常渲染

解决方案：

添加XML命名空间声明
明确指定字体：

svg_template = f"""<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> {svg_template} """