mirror of
https://github.com/Wan-Video/Wan2.1.git
synced 2025-06-07 15:54:52 +00:00
128 lines
3.7 KiB
Markdown
128 lines
3.7 KiB
Markdown
# Wan2.1 Web Interface
|
|
|
|
This is a web interface for the Wan2.1 video generation model, built with Express.js and EJS templating engine. The interface provides an easy-to-use web UI for creating videos with Wan2.1's powerful AI models.
|
|
|
|
## Features
|
|
|
|
- **Text-to-Video**: Generate videos from textual descriptions
|
|
- **Image-to-Video**: Convert still images into dynamic videos
|
|
- **First-Last-Frame-to-Video**: Create videos from first and last frames
|
|
- Responsive and modern UI with Bootstrap
|
|
- File upload support
|
|
- Video preview and download
|
|
- Parameter customization for video generation
|
|
|
|
## Installation
|
|
|
|
1. Make sure you have Node.js (14+) and npm installed
|
|
2. Install the dependencies:
|
|
|
|
```bash
|
|
cd web_interface
|
|
npm install
|
|
```
|
|
|
|
3. Make sure you have the Python dependencies installed for Wan2.1:
|
|
|
|
```bash
|
|
pip install -r ../requirements.txt
|
|
```
|
|
|
|
## Usage
|
|
|
|
Start the server:
|
|
|
|
```bash
|
|
cd web_interface
|
|
npm start
|
|
```
|
|
|
|
For development with auto-reloading:
|
|
|
|
```bash
|
|
cd web_interface
|
|
npm run dev
|
|
```
|
|
|
|
The web interface will be available at http://localhost:3000
|
|
|
|
## Available Routes
|
|
|
|
- `/` - Home page with overview of available features
|
|
- `/text-to-video` - Generate videos from text descriptions
|
|
- `/image-to-video` - Convert images to videos
|
|
- `/fl-to-video` - Create videos from first and last frames
|
|
|
|
## Directory Structure
|
|
|
|
- `app.js` - Main Express.js application file
|
|
- `public/` - Static files
|
|
- `css/` - Stylesheets
|
|
- `js/` - Client-side JavaScript
|
|
- `images/` - Images used in the interface
|
|
- `uploads/` - Temporary storage for uploaded images
|
|
- `generated/` - Output directory for generated videos
|
|
- `scripts/` - Python scripts that interface with Wan2.1 models
|
|
- `t2v_script.py` - Text-to-video script
|
|
- `i2v_script.py` - Image-to-video script
|
|
- `fl2v_script.py` - First-Last-Frame-to-video script
|
|
- `views/` - EJS templates
|
|
- `index.ejs` - Home page
|
|
- `text-to-video.ejs` - Text to video page
|
|
- `image-to-video.ejs` - Image to video page
|
|
- `fl-to-video.ejs` - First-Last frame to video page
|
|
- `result.ejs` - Video result display page
|
|
- `partials/` - Reusable EJS components
|
|
- `head.ejs` - HTML head section
|
|
- `header.ejs` - Navigation header
|
|
- `footer.ejs` - Page footer
|
|
- `scripts.ejs` - Common JavaScript includes
|
|
|
|
## Requirements
|
|
|
|
- Node.js 14+
|
|
- Python 3.8+
|
|
- CUDA-compatible GPU for video generation
|
|
- Required disk space for video storage
|
|
|
|
## Customization
|
|
|
|
- Modify the EJS templates in `views/` to customize the UI
|
|
- Adjust the video generation parameters in `scripts/` directory
|
|
- Add your own CSS styles in `public/css/style.css`
|
|
- Extend the functionality with new routes in `app.js`
|
|
|
|
## Integrating with Other Websites
|
|
|
|
To integrate this web interface with another website:
|
|
|
|
1. **API Approach**:
|
|
- Create additional API routes in `app.js` that return JSON responses
|
|
- Make AJAX calls from your main website to these endpoints
|
|
|
|
2. **Iframe Embedding**:
|
|
- Host this application on a subdomain
|
|
- Embed specific pages using iframes in your main website
|
|
|
|
3. **Direct Integration**:
|
|
- Copy the relevant EJS templates and adapt them to your existing website template system
|
|
- Make sure to include the necessary scripts and stylesheets
|
|
- Update your server-side code to call the Python scripts in a similar way
|
|
|
|
## For Developers
|
|
|
|
If you're developing an extension to this web interface:
|
|
|
|
1. Use nodemon for hot reloading during development:
|
|
```
|
|
npx nodemon app.js
|
|
```
|
|
|
|
2. The `run_in_terminal` function in app.js handles Python script execution. This can be extended to support more Wan2.1 features.
|
|
|
|
3. The Python scripts in the `scripts/` directory serve as adapters between the web interface and the actual Wan2.1 Python modules.
|
|
|
|
## License
|
|
|
|
The Wan2.1 Web Interface is under the same license as the Wan2.1 project.
|