Wan2.1/web_interface

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:

cd web_interface
npm install

3. 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:

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.