Pixel Couplet Gen部署教程：解决Streamlit在微信小程序WebView中样式丢失问题
Pixel Couplet Gen部署教程：解决Streamlit在微信小程序WebView中样式丢失问题
1. 项目介绍与核心价值
Pixel Couplet Gen是一款融合传统春节文化与现代像素艺术风格的AI春联生成器。它基于ModelScope大模型驱动，通过创新的8-bit游戏界面设计，为用户提供独特的数字春联创作体验。
核心特点：
- 复古像素风格：采用红白机时代的视觉元素，打造怀旧与创新并存的UI
- 智能对联生成：基于大模型自动生成符合传统格律的春联内容
- 跨平台适配：特别优化了微信小程序WebView中的显示效果
- 一键部署：提供完整的Docker镜像和本地运行方案
2. 环境准备与快速部署
2.1 基础环境要求
确保您的系统满足以下条件：
- Python 3.8+
- Docker 20.10+
- 至少2GB可用内存
- 网络连接正常（用于下载模型权重）
2.2 一键部署方案
Docker方式（推荐）：
docker pull registry.cn-hangzhou.aliyuncs.com/pixel_couplet/gen:v1.2 docker run -p 8501:8501 --name pixel-couplet registry.cn-hangzhou.aliyuncs.com/pixel_couplet/gen:v1.2本地运行方式：
git clone https://github.com/pixel-couplet/gen.git cd gen pip install -r requirements.txt python main.py3. 微信小程序WebView样式问题解决方案
3.1 问题现象分析
当Streamlit应用嵌入微信小程序WebView时，常见以下样式问题：
- CSS样式完全丢失
- 布局错乱
- 交互元素无法正常响应
- 字体显示异常
3.2 核心解决思路
我们通过以下技术方案确保完美适配：
- CSS注入重写：
def inject_custom_css(): st.markdown(""" <style> /* 强制覆盖微信默认样式 */ body { font-family: 'ZCOOL QingKe HuangYou' !important; background-color: #FF0000 !important; } /* 像素风格适配 */ .stApp { background-image: url('data:image/png;base64,...') !important; } </style> """, unsafe_allow_html=True)- Viewport元标签优化：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">- 微信特定UA检测：
def is_wechat_webview(request): user_agent = request.headers.get('User-Agent', '').lower() return 'micromessenger' in user_agent3.3 完整适配方案实现
在main.py中添加以下关键代码：
from streamlit.runtime.scriptrunner import RerunData, RerunException from streamlit.source_util import get_pages def configure_for_wechat(): if is_wechat_webview(st.request): # 禁用Streamlit默认样式 st.markdown("<style>#root { all: unset; }</style>", unsafe_allow_html=True) # 加载像素风格CSS inject_custom_css() # 调整布局容器 st.container().markdown(""" <div class="pixel-container"> <!-- 你的像素UI内容 --> </div> """, unsafe_allow_html=True)4. 关键功能使用指南
4.1 生成个性化春联
- 在输入框填写你的新年愿望（如"事业顺利"）
- 点击"生成春联"按钮
- 系统将返回上联、下联和横批
- 可点击"换一批"重新生成
示例代码调用：
import requests def generate_couplet(text): url = "http://localhost:8501/api/generate" payload = {"text": text} response = requests.post(url, json=payload) return response.json() # 使用示例 result = generate_couplet("新年快乐") print(f"上联：{result['upper']}") print(f"下联：{result['lower']}") print(f"横批：{result['horizontal']}")4.2 自定义像素风格
通过修改assets/pixel_theme.css可以调整：
- 颜色方案
- 字体大小
- 像素颗粒度
- 动画效果
常用配置参数：
:root { --pixel-size: 4px; --main-color: #FF3355; --secondary-color: #FFCC00; --font-family: 'ZCOOL QingKe HuangYou'; }5. 常见问题解决
5.1 样式仍然显示异常
解决方案：
- 清除微信缓存：我 → 设置 → 通用 → 存储空间 → 清理
- 确保使用的是最新版微信
- 检查网络连接是否正常
5.2 生成速度较慢
优化建议：
# 在启动命令中添加以下参数 STREAMLIT_SERVER_ENABLE_CORS=false \ STREAMLIT_SERVER_ENABLE_XSRF_PROTECTION=false \ streamlit run main.py5.3 字体显示不正常
解决方法：
- 下载字体文件到本地：
wget https://example.com/ZCOOL_QingKe_HuangYou.ttf- 在CSS中指定本地字体路径：
@font-face { font-family: 'ZCOOL'; src: url('/fonts/ZCOOL_QingKe_HuangYou.ttf'); }6. 总结与下一步
通过本教程，您已经成功部署了Pixel Couplet Gen并解决了微信小程序中的样式问题。这套方案不仅适用于春联生成器，也可应用于其他Streamlit项目的微信适配。
进阶建议：
- 尝试修改
pixel_theme.css创建自己的像素风格 - 探索ModelScope的其他创意应用
- 将项目部署到云服务器实现永久访问
获取更多AI镜像
想探索更多AI镜像和应用场景？访问 CSDN星图镜像广场，提供丰富的预置镜像，覆盖大模型推理、图像生成、视频生成、模型微调等多个领域，支持一键部署。