README.md

---
title: Audiogram Studio
emoji: 🎵
colorFrom: indigo
colorTo: pink
sdk: docker
pinned: false
short_description: 在线将语音/音频转换为带有动态波形的精美视频卡片，专为社交媒体分享设计。
app_port: 7860
---

# 声波卡片工坊 (Audiogram Studio)

这是一个专为内容创作者设计的在线工具，可以将语音、播客片段或音乐转换为带有动态波形可视化的精美视频卡片（Audiograms）。生成的视频（WebM/MP4 格式）非常适合在微信朋友圈、抖音、Instagram 或 Twitter 上分享。

## ✨ 核心功能

*   **多源音频支持**：支持上传 MP3/WAV 文件，或直接使用麦克风在线录音。
*   **可视化定制**：
    *   **波形样式**：支持柱状图、线条、圆形、粒子等多种波形效果，可调整颜色和位置。
    *   **背景风格**：内置渐变色背景，支持自定义颜色或上传背景图片。
    *   **水印 Logo**：支持添加自定义水印。
    *   **尺寸适配**：一键切换 1:1 (正方形)、9:16 (手机竖屏)、16:9 (横屏) 比例。
*   **实时预览**：所见即所得的画布编辑和播放预览。
*   **智能生成**：
    *   前端实时录制生成 WebM。
    *   后端自动转码为 MP4 (H.264)，兼容所有平台 (iOS, Android, PC)。
    *   如果服务器未安装 FFmpeg，将自动降级为 WebM 格式。
*   **Docker 部署**：支持一键部署到 Hugging Face Spaces。

## 🚀 快速开始

### Docker 部署

```bash
# 构建镜像
docker build -t audiogram-studio .

# 运行容器
docker run -p 7860:7860 audiogram-studio
```

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

### 本地运行

1.  安装依赖：
    ```bash
    pip install -r requirements.txt
    ```
2.  运行应用：
    ```bash
    python app.py
    ```

## 🛠️ 技术栈

- **Frontend**: Vue 3, Tailwind CSS, HTML5 Canvas, Web Audio API, MediaRecorder API
- **Backend**: Python Flask, FFmpeg
- **Deployment**: Docker

## 📝 注意事项

- 推荐使用 Chrome 或 Edge 浏览器以获得最佳的录制性能。
- 导出视频时请保持当前标签页处于激活状态，以确保画面录制流畅。
- 文件上传限制：音频 100MB，图片 10MB。

---
*Created for the "Startup Incubation MVP" initiative.*