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

Make sure you have Node.js (14+) and npm installed
Install the dependencies:

cd web_interface
npm install

Make sure you have the Python dependencies installed for Wan2.1:

pip install -r ../requirements.txt

Usage

Start the server:

cd web_interface
npm start

For development with auto-reloading:

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:

API Approach:
- Create additional API routes in app.js that return JSON responses
- Make AJAX calls from your main website to these endpoints
Iframe Embedding:
- Host this application on a subdomain
- Embed specific pages using iframes in your main website
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:

Use nodemon for hot reloading during development:
```
npx nodemon app.js
```
The run_in_terminal function in app.js handles Python script execution. This can be extended to support more Wan2.1 features.
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.

3.7 KiB Raw Blame History