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.8Docker 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_htmlTrue)Viewport元标签优化meta nameviewport contentwidthdevice-width, initial-scale1.0, maximum-scale1.0, user-scalableno微信特定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_htmlTrue) # 加载像素风格CSS inject_custom_css() # 调整布局容器 st.container().markdown( div classpixel-container !-- 你的像素UI内容 -- /div , unsafe_allow_htmlTrue)4. 关键功能使用指南4.1 生成个性化春联在输入框填写你的新年愿望如事业顺利点击生成春联按钮系统将返回上联、下联和横批可点击换一批重新生成示例代码调用import requests def generate_couplet(text): url http://localhost:8501/api/generate payload {text: text} response requests.post(url, jsonpayload) 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_CORSfalse \ STREAMLIT_SERVER_ENABLE_XSRF_PROTECTIONfalse \ 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星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。