δΈ­ζ–‡ | English

Toonflow Logo # Toonflow Web

Toonflow Frontend Application
Modern Web interface built with Vue 3 + TypeScript + Vite
User frontend for AI Short Drama Factory 🎨

Stars Badge AGPL License Badge release

> 🎯 **Modern Frontend Architecture**: Built with Vue 3 Composition API, TypeScript type safety, and Vite for lightning-fast builds, delivering a smooth user experience!
--- # ⚠️ Important Notice > **This repository only contains the frontend source code, suitable for developers for secondary development or customization.** > > πŸŽ‰ **If you are a regular user wishing to use Toonflow directly, please go to the main repository to download the full client:** > > | Platform | Link | > | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------- | > | GitHub | πŸ‘‰ [github.com/HBAI-Ltd/Toonflow-app](https://github.com/HBAI-Ltd/Toonflow-app) | > | Gitee | πŸ‘‰ [gitee.com/HBAI-Ltd/Toonflow-app](https://gitee.com/HBAI-Ltd/Toonflow-app) | > > The main repository includes: > > - βœ… Complete desktop client > - βœ… Backend service > - βœ… Ready-to-use installer > - βœ… Detailed usage tutorial --- # 🌟 Tech Stack - **Framework**: Vue 3.5+ (Composition API) - **Build Tool**: Vite 5.4+ - **Language**: TypeScript 5.6+ - **State Management**: Pinia 2.2+ (supports persistence) - **Routing**: Vue Router 4.4+ - **UI Component Libraries**: - Ant Design Vue 4.2+ - Element Plus 2.13+ - VXE Table 4.17+ - **Utility Libraries**: - Axios - HTTP requests - VueUse - Vue composition utilities - Day.js - Date handling - Mammoth - Word document parsing --- # 🎨 Main Feature Modules Toonflow Web provides a complete frontend for short drama creation, including these core modules: - βœ… **Project Management** Create, edit, and manage drama projects with project status tracking and multi-project parallel development. - βœ… **Raw Text Editing** Import and edit novel manuscripts, supports Word document parsing, intelligent text cleansing, and chapter splitting. - βœ… **Character Asset Library** Manage character settings and images; supports batch generation, manual upload, and online editing. - βœ… **Outline Management** Visual editing of story outlines and event lines, with drag-and-drop sorting and smart generation. - βœ… **Script Editor** Structured script editing interface, supports labeling dialogues, scenes, emotions, and more dimensions. - βœ… **Storyboard Design** Visual storyboard canvas with drag-and-drop layout, image detection, and AI conversational storyboard generation. - βœ… **Video Configuration** Configure video generation parameters, support switching among multiple AI video providers, and video downloading. - βœ… **Task Monitoring** Real-time monitoring of AI generation tasks, supports task queue management and history search. - βœ… **System Settings** Configure AI providers, prompt templates, user permissions, and other system-level parameters. --- # πŸ“¦ Application Scenarios - Frontend operation interface for short drama content creation - Visual platform for AI-assisted screenwriting tools - Workbench for storyboard design and video generation - Scenario management system for multi-user collaboration --- # πŸš€ Getting Started Quickly ## πŸ’‘ What kind of user are you? | User Type | Recommended Solution | GitHub | Gitee | | ------------------------------------------- | -------------------- | -------------------------------------------------------- | ------------------------------------------------------- | | 🎬 **Regular User** - Want to use Toonflow | Download full client | [Toonflow-app](https://github.com/HBAI-Ltd/Toonflow-app) | [Toonflow-app](https://gitee.com/HBAI-Ltd/Toonflow-app) | | πŸ‘¨β€πŸ’» **Developer** - Want to modify or extend | Continue reading | This repository | This repository | --- ## Prerequisites Before developing and running this project, please ensure you have installed: - βœ… **Node.js**: version 23.11.1 or above - βœ… **Yarn**: version 1.22.0 or above (recommended package manager) - βœ… **Backend service**: Make sure the Toonflow backend service is running and accessible (available from [GitHub](https://github.com/HBAI-Ltd/Toonflow-app) or [Gitee](https://gitee.com/HBAI-Ltd/Toonflow-app)) ## Local Development ### 1. Clone the Project **GitHub:** ```bash git clone https://github.com/HBAI-Ltd/Toonflow-web.git cd Toonflow-web ``` **Gitee (recommended for China):** ```bash git clone https://gitee.com/HBAI-Ltd/Toonflow-web.git cd Toonflow-web ``` ### 2. Install Dependencies ```bash yarn install ``` ### 3. Start the Development Server ```bash yarn dev ``` The dev server runs at `http://localhost:5173` by default, with hot module replacement (HMR) enabled. ### 4. Build for Production ```bash # Development build yarn build:dev # Production build yarn build:prod ``` The build output will be in the `dist` directory. ### 5. Preview Production Build ```bash yarn preview ``` --- ## Production Deployment ### Method 1: Static File Deployment 1. **Build the Project** ```bash yarn build:prod ``` 2. **Deploy to Web Server** Upload all files in the `dist` directory to the root directory of Nginx, Apache, or any other web server. **Sample Nginx configuration:** ```nginx server { listen 80; server_name your-domain.com; root /var/www/toonflow-web/dist; index index.html; location / { try_files $uri $uri/ /index.html; } # API Proxy (optional) location /api/ { proxy_pass http://localhost:10588/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } } ``` ### Method 2: Integrated deployment with backend Copy the contents of the built `dist` directory into the backend's static resources directory `scripts/web`. > πŸ’‘ **Note**: The backend service can be obtained from [GitHub](https://github.com/HBAI-Ltd/Toonflow-app) or [Gitee](https://gitee.com/HBAI-Ltd/Toonflow-app). --- # πŸ”§ Development Guide ## Prepare Development Environment - **Node.js**: version 23.11.1 or above required - **Yarn**: recommended package manager ## Common Commands ```bash # Install dependencies yarn install # Start development server (supports hot reload) yarn dev # Type checking yarn type-check # Code linting and auto-fix yarn lint # Code formatting yarn format # Development build yarn build:dev # Production build yarn build:prod # Preview production build yarn preview # Generate third-party license list yarn license ``` ## Project Structure ``` πŸ“‚ Toonflow-web/ β”œβ”€ πŸ“‚ public/ # Static assets β”œβ”€ πŸ“‚ scripts/ # Build scripts β”‚ └─ πŸ“„ license.ts # License generator script β”œβ”€ πŸ“‚ src/ β”‚ β”œβ”€ πŸ“‚ assets/ # Static assets (styles, images, etc.) β”‚ β”‚ └─ πŸ“„ main.css # Global styles β”‚ β”œβ”€ πŸ“‚ components/ # Common components β”‚ β”‚ β”œβ”€ πŸ“„ sider.vue # Sidebar component β”‚ β”‚ β”œβ”€ πŸ“‚ chat/ # Chat components β”‚ β”‚ β”œβ”€ πŸ“‚ storyboardEditor/ # Storyboard editor β”‚ β”‚ └─ πŸ“‚ videoConfig/ # Video config components β”‚ β”œβ”€ πŸ“‚ config/ # Configuration files β”‚ β”‚ └─ πŸ“„ manufacturerConfig.ts # Manufacturer configuration β”‚ β”œβ”€ πŸ“‚ pages/ # Page components β”‚ β”‚ β”œβ”€ πŸ“‚ error/ # Error pages β”‚ β”‚ β”œβ”€ πŸ“‚ login/ # Login page β”‚ β”‚ └─ πŸ“‚ workbench/ # Workbench β”‚ β”œβ”€ πŸ“‚ router/ # Routing configuration β”‚ β”‚ └─ πŸ“„ index.ts # Route definitions β”‚ β”œβ”€ πŸ“‚ stores/ # Pinia state management β”‚ β”‚ β”œβ”€ πŸ“„ index.ts # Store entry β”‚ β”‚ β”œβ”€ πŸ“„ loadingStore.ts # Loading state β”‚ β”‚ β”œβ”€ πŸ“„ user.ts # User state β”‚ β”‚ └─ πŸ“„ video.ts # Video state β”‚ β”œβ”€ πŸ“‚ types/ # TypeScript type definitions β”‚ β”‚ β”œβ”€ πŸ“„ auto-imports.d.ts # Auto-imported types β”‚ β”‚ β”œβ”€ πŸ“„ components.d.ts # Component types β”‚ β”‚ β”œβ”€ πŸ“„ global.d.ts # Global types β”‚ β”‚ β”œβ”€ πŸ“„ manufacturer.ts # Manufacturer types β”‚ β”‚ └─ πŸ“„ shims-vue.d.ts # Vue module declarations β”‚ β”œβ”€ πŸ“‚ utils/ # Utility functions β”‚ β”‚ β”œβ”€ πŸ“„ axios.ts # HTTP request wrapper β”‚ β”‚ β”œβ”€ πŸ“„ combineImages.ts # Image composition β”‚ β”‚ β”œβ”€ πŸ“„ error.ts # Error handling β”‚ β”‚ β”œβ”€ πŸ“„ parseNovel.ts # Novel parsing β”‚ β”‚ β”œβ”€ πŸ“„ splitGraph.ts # Image segmentation β”‚ β”‚ β”œβ”€ πŸ“„ throttle.ts # Throttling/debouncing β”‚ β”‚ └─ πŸ“„ wsClient.ts # WebSocket client β”‚ β”œβ”€ πŸ“‚ views/ # View pages β”‚ β”‚ β”œβ”€ πŸ“‚ project/ # Project management β”‚ β”‚ β”œβ”€ πŸ“‚ projectDetail/ # Project details β”‚ β”‚ β”‚ β”œβ”€ πŸ“‚ components/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ πŸ“‚ assetsManager/ # Asset management β”‚ β”‚ β”‚ β”‚ β”œβ”€ πŸ“‚ originalText/ # Raw text β”‚ β”‚ β”‚ β”‚ β”œβ”€ πŸ“‚ outlineManager/ # Outline management β”‚ β”‚ β”‚ β”‚ β”œβ”€ πŸ“‚ overview/ # Project overview β”‚ β”‚ β”‚ β”‚ └─ πŸ“‚ scriptManager/ # Script management β”‚ β”‚ β”œβ”€ πŸ“‚ setting/ # System settings β”‚ β”‚ └─ πŸ“‚ taskList/ # Task list β”‚ β”œβ”€ πŸ“„ App.vue # Root component β”‚ └─ πŸ“„ main.ts # App entry point β”œβ”€ πŸ“„ components.d.ts # Global component types β”œβ”€ πŸ“„ eslint.config.js # ESLint config β”œβ”€ πŸ“„ index.html # HTML template β”œβ”€ πŸ“„ package.json # Project config β”œβ”€ πŸ“„ tsconfig.json # TypeScript config β”œβ”€ πŸ“„ tsconfig.app.json # App TS config β”œβ”€ πŸ“„ tsconfig.node.json # Node TS config β”œβ”€ πŸ“„ vite.config.ts # Vite config β”œβ”€ πŸ“„ LICENSE # License β”œβ”€ πŸ“„ NOTICES.txt # Third-party notices └─ πŸ“„ README.md # Project documentation ``` --- # πŸ“ Development Plan We are continuously optimizing the frontend experience. Key development focuses in the near future: 1. **UI/UX Optimization** - `🎨 Dark theme support` Elegant dark mode option to protect eyesight - `πŸ“± Responsive layout` Improved display for mobile and tablet devices - `⌨️ Shortcut system` Adding shortcuts for common operations to improve efficiency 2. **Feature Enhancements** - `πŸ“Š Data visualization` Advanced project statistics and chart displays - `πŸ”„ Real-time collaboration` Multi-user simultaneous editing and real-time sync - `πŸ’Ύ Auto-save` Smart auto-save to prevent data loss 3. **Performance Optimization** - `⚑ Virtual scrolling` High-performance optimization for large lists - `πŸ—œοΈ Asset compression` Optimizing build size for faster loading - `πŸ”Œ Lazy loading optimization` Further optimize route and component lazy loading strategy --- # πŸ› FAQ ### Q: Port is occupied when starting dev server? **A:** Modify the port configuration in `vite.config.ts`: ```typescript export default defineConfig({ server: { port: 3000, // change to another port }, }); ``` ### Q: How to configure the backend API address? **A:** Set the backend address in `.env.dev`: ```bash VITE_TYPE=dev VITE_BASE_URL=http://127.0.0.1:10588 VITE_WS_URL=ws://127.0.0.1:10588 ``` ### Q: I just want to use Toonflow, not develop, what should I do? **A:** Please go to the main repository to download the complete client: - **GitHub**: πŸ‘‰ [Toonflow-app](https://github.com/HBAI-Ltd/Toonflow-app) - **Gitee**: πŸ‘‰ [Toonflow-app](https://gitee.com/HBAI-Ltd/Toonflow-app) --- # πŸ”— Related Repositories | Repository | Description | GitHub | Gitee | | ---------------- | ---------------------------------- | -------------------------------------------------- | ------------------------------------------------ | | **Toonflow-app** | Complete client (recommended user) | [GitHub](https://github.com/HBAI-Ltd/Toonflow-app) | [Gitee](https://gitee.com/HBAI-Ltd/Toonflow-app) | | **Toonflow-web** | Frontend source code (this repo) | [GitHub](https://github.com/HBAI-Ltd/Toonflow-web) | [Gitee](https://gitee.com/HBAI-Ltd/Toonflow-web) | --- # πŸ‘¨β€πŸ‘©β€πŸ‘§β€πŸ‘¦ WeChat Community Group ~~Group 1~~ ~~Group 2~~ ~~Group 3~~ ~~Group 4~~ ~~Group 5~~ Group 6: Toonflow Logo

Scan with WeChat to add. If the QR code expires, submit an Issue for update.

--- # πŸ’Œ Contact Us πŸ“§ Email: [ltlctools@outlook.com](mailto:ltlctools@outlook.com?subject=Toonflow%20Frontend%20Consultation) --- # πŸ“œ License Toonflow Web is open-sourced under the AGPL-3.0 license. See details: https://www.gnu.org/licenses/agpl-3.0.html You may use Toonflow Web for any purposes, including commercial, as long as you comply with the AGPL-3.0 terms and conditions. If you wish to obtain a proprietary commercial license free from AGPL-3.0 restrictions, please contact us via email. --- # ⭐️ Star History [![Star History Chart](https://api.star-history.com/svg?repos=HBAI-Ltd/Toonflow-web&type=date&legend=top-left)](https://www.star-history.com/#HBAI-Ltd/Toonflow-web&type=date&legend=top-left) --- # πŸ™ Acknowledgements Thanks to the following open source projects for their strong support for Toonflow Web: - [Vue.js](https://vuejs.org/) - Progressive JavaScript framework - [Vite](https://vitejs.dev/) - Next generation frontend build tool - [Ant Design Vue](https://antdv.com/) - Enterprise-level UI component library - [Element Plus](https://element-plus.org/) - Vue 3-based component library - [Pinia](https://pinia.vuejs.org/) - Intuitive state management library for Vue Thanks to the following organizations/units/individuals for supporting Toonflow:
Suan Neng Yun Logo Suan Neng Yun provides compute sponsorship [Official Site]
For a complete list of third-party dependencies, please refer to `NOTICES.txt`