README.md

metadata

title: 社交对话生成工坊
emoji: 💬
colorFrom: green
colorTo: gray
sdk: docker
app_port: 7860
short_description: 逼真的微信/聊天记录生成工具，支持文本、图片、红包、转账等多种消息类型，一键导出长截图。
pinned: false

社交对话生成工坊 (Chat Mockup Studio)

一个专注于生成逼真社交聊天记录的工具，专为内容创作者、营销人员和产品经理设计。支持微信风格，提供高度可定制的编辑器和即时预览。

✨ 核心功能

• 多类型消息支持：
  • 💬 文本消息：支持换行、表情。
  • 📸 图片消息：上传本地图片。
  • 🔊 语音消息：自定义时长，支持红点标记。
  • 🧧 红包/转账：逼真的卡片样式。
  • 🕒 时间显示：自定义系统时间标签。
• 高度可定制：
  • 🔋 状态栏：自定义电量、WiFi、信号、运营商、顶部标题。
  • 🌓 深色模式：一键切换黑夜/白天模式。
  • 🖼 自定义背景：支持上传聊天背景图。
  • 👤 头像定制：左右侧头像自由上传。
• 一键导出：
  • 📷 智能长截图：自动根据消息长度生成完整长图，不再受限于屏幕高度。
  • ⚡ 本地处理：所有数据在浏览器端处理，保护隐私。

🛠️ 技术栈

• Frontend: Vue 3, Tailwind CSS
• Rendering: HTML2Canvas
• Backend: Flask (Serving Static Files)
• Deployment: Docker

🚀 快速开始

Docker 部署

docker build -t chat-mockup-studio .
docker run -p 7860:7860 chat-mockup-studio

访问 http://localhost:7860 即可使用。

本地开发

pip install -r requirements.txt
python app.py

📝 使用指南

1. 全局设置：在左侧面板设置顶部标题（如"文件传输助手"）、电量、时间等状态栏信息。
2. 添加消息：点击"对方"或"我"添加消息，支持文本、图片、语音等类型。
3. 编辑内容：点击消息列表中的条目，修改内容、上传头像。
4. 调整顺序：使用消息卡片右上角的箭头调整消息顺序。
5. 导出图片：点击左侧底部的"生成长截图"按钮，自动下载 PNG 图片。

⚠️ 免责声明

本工具仅供娱乐、创作和设计用途，请勿用于制作虚假证据或进行欺诈活动。使用者需对生成的图片内容负责。