@labspc/asciiverse NPM

AsciiVerse - Media to ASCII Art Converter

项目简介

AsciiVerse 是一个创新的Web应用程序，能够将媒体文件（如MP4视频）转换为富有艺术感的ASCII动画。通过将视频帧转换为ASCII字符艺术，创造出独特的视觉体验。本项目使用最新的Web技术栈，提供高性能的客户端媒体处理能力。

项目简介

AsciiVerse 是一个创新的Web应用程序，能够将图片和视频转换为富有艺术感的ASCII艺术作品。它支持多种媒体格式的转换，并提供实时预览功能，让用户能够即时查看转换效果。

在线演示

访问我们的在线演示体验AsciiVerse的功能。

视频处理
- 支持MP4视频上传和实时处理
- 使用ffmpeg.wasm进行高效视频转换
- 支持视频帧提取和分析
ASCII转换
- 支持彩色和灰度ASCII效果
- 可自定义ASCII字符映射
- 实时预览转换效果
性能优化
- 基于WebAssembly的高性能处理
- 支持多线程并行处理
- 内存优化的流式处理
用户体验
- 直观的拖放上传界面
- 可调节播放参数（速度、大小等）
- 支持导出ASCII动画为文件
- 响应式设计，支持移动端

✨ 核心特性

🎥 支持视频转ASCII动画
- MP4视频实时转换
- 可调节帧率和分辨率
- 支持暂停/播放控制
🖼️ 图片转ASCII艺术
- 支持多种图片格式（PNG, JPG, GIF等）
- 实时预览转换效果
- 可调节字符密度和对比度
🎨 丰富的自定义选项
- 支持彩色和灰度ASCII效果
- 可自定义ASCII字符集
- 多种输出样式选择
🚀 高性能处理
- 基于WebAssembly的FFmpeg处理
- 浏览器端本地处理，保护隐私
- 支持大文件处理

🛠️ 技术栈

核心框架: React 18 + TypeScript
状态管理: React Context
路由系统: React Router v6
视频处理: @ffmpeg/ffmpeg + WebAssembly
UI组件:
- Lucide React (图标)
- TailwindCSS (样式)
开发工具:
- Vite (构建工具)
- ESLint + TypeScript (代码质量)
- Swagger UI React (API文档)

🚀 快速开始

环境要求

Node.js >= 18
现代浏览器（支持WebAssembly）
Node.js 18+
npm 9+ 或 yarn 1.22+
npm 或 yarn

安装步骤

# 克隆项目
git clone https://github.com/labspc/asciiverse.git

# 进入项目目录
cd asciiverse

# 安装依赖
npm install

# 启动开发服务器
npm run dev

访问 http://localhost:5173 开始使用

在线演示

访问我们的在线演示网站体验 AsciiVerse 的功能：

🌐 AsciiVerse - https://asciiverse.lamberts.space/

在线演示支持以下功能：

视频转ASCII动画预览
实时参数调整
效果导出
移动端适配

技术栈

核心框架:
- React 18.3.1
- TypeScript 5.5.3
路由: React Router DOM 6.22.0
媒体处理:
- @ffmpeg/ffmpeg 0.12.10
- @ffmpeg/util 0.12.1
UI组件:
- Lucide React 0.344.0
- TailwindCSS 3.4.1
工具链:
- Vite 5.4.2
- ESLint 9.9.1
文档: Swagger UI React 5.11.0

项目结构

asciiverse/
├── src/
│   ├── api/           # API接口定义和实现
│   ├── components/    # 可复用的React组件
│   │   ├── common/    # 通用UI组件
│   │   └── media/     # 媒体处理相关组件
│   ├── context/       # React Context状态管理
│   ├── pages/         # 页面级组件
│   ├── styles/        # 全局样式和主题配置
│   ├── swagger/       # API文档配置
│   └── utils/         # 工具函数和常量
├── packages/          # 项目相关包
├── public/           # 静态资源
└── prompt/           # 提示词配置

NPM包使用

AsciiVerse 提供了 NPM 包供开发者在自己的项目中使用：

# 使用 npm
npm install @labspc/asciiverse

# 使用 yarn
yarn add @labspc/asciiverse

基础使用示例

import { AsciiConverter } from '@labspc/asciiverse';

// 创建转换器实例
const converter = new AsciiConverter({
  // 配置选项
  colorMode: 'color',  // 'color' 或 'grayscale'
  charset: 'default',  // ASCII字符集
  width: 80,          // 输出宽度
  height: 40          // 输出高度
});

// 转换视频
const result = await converter.convertVideo(videoFile, {
  fps: 30,            // 输出帧率
  quality: 'high'     // 输出质量
});

更多使用示例和API文档请访问：NPM包文档

开发

📦 项目结构

asciiverse/
├── src/                # 源代码目录
│   ├── api/           # API接口定义和实现
│   ├── components/    # 可复用React组件
│   ├── context/       # React Context状态管理
│   ├── pages/         # 页面级组件
│   ├── styles/        # 全局样式和主题
│   ├── swagger/       # API文档配置
│   └── utils/         # 工具函数和通用逻辑
├── public/            # 静态资源
└── prompt/            # AI提示配置

🔧 开发命令

# 开发环境
npm run dev

# 生产构建
npm run build

# 预览生产版本
npm run preview

# 代码检查
npm run lint

📝 开发规范

使用TypeScript进行严格的类型检查
遵循ESLint规则进行代码质量控制
使用Prettier进行代码格式化
遵循React最佳实践和Hooks规范
组件采用函数式编程范式
确保代码注释完整性

🤝 贡献指南

Fork 本项目
创建特性分支 (git checkout -b feature/AmazingFeature)
提交更改 (git commit -m 'Add some AmazingFeature')
推送到分支 (git push origin feature/AmazingFeature)
提交Pull Request

📋 开发计划

支持更多视频编码格式
添加AI辅助的ASCII艺术风格生成
优化WebAssembly性能
支持批量处理功能
添加社区分享功能
支持自定义字符映射规则
移动端适配优化

📄 开源协议

本项目采用 Apache 协议 - 查看 LICENSE 文件了解详情

👥 团队成员

Lambert - 项目负责人 - labspc

📞 联系方式

项目仓库：https://github.com/labspc/asciiverse
问题反馈：https://github.com/labspc/asciiverse/issues

支持更多视频格式（WebM、AVI等）
添加更多ASCII艺术风格和滤镜效果
优化WebAssembly性能和内存使用
添加批量处理功能
支持在线分享和社区功能
添加更多自定义选项
支持视频帧编辑功能

🙏 致谢

感谢所有为这个项目做出贡献的开发者！

@ffmpeg/ffmpeg @ffmpeg/util lucide-react react react-dom react-router-dom swagger-ui-react js-yaml jszip

0.9.2

12 months ago

0.9.0

12 months ago