Wunjo Community Edition

https://github.com/wladradchenko/wunjo.wladradchenko.ru
Admin
Wunjo Community Edition is an open-source AI-powered tool that uses neural networks to transform...
Tokens:30,347
Snippets:191
Trust Score:7.9
License:MIT
Update:3 months ago
Show doc for...
Tokens:
Raw
### Install and Run WebGUI

Source: https://github.com/wladradchenko/wunjo.wladradchenko.ru/blob/main/tools/js/browser/README.md

Commands to clone the repository, install dependencies, and start the application locally.

```bash
git clone https://github.com/wladradchenko/webgui.wladradchenko.ru.git
cd webgui.wladradchenko.ru
npm install
npm start
```

--------------------------------

### Package Application

Source: https://github.com/wladradchenko/wunjo.wladradchenko.ru/wiki/How-to-install-the-application

Creates an installer for the application.

```bash
briefcase package
```

--------------------------------

### Install WebGUI on Linux

Source: https://github.com/wladradchenko/wunjo.wladradchenko.ru/blob/main/portable/src/README.md

Creates a directory and downloads the AppImage executable.

```bash
 mkdir linux
 cd linux
 wget https://github.com/wladradchenko/wunjo.wladradchenko.ru/releases/download/build-v1.6.1/webgui.AppImage
```

--------------------------------

### Setup Virtual Environment

Source: https://github.com/wladradchenko/wunjo.wladradchenko.ru/wiki/How-to-install-the-application

Creates and activates a Python virtual environment.

```bash
python -m venv venv
source venv/bin/activate
```

--------------------------------

### Install WebGUI on Windows

Source: https://github.com/wladradchenko/wunjo.wladradchenko.ru/blob/main/portable/src/README.md

Creates a directory, downloads the zip archive, extracts it, and removes the archive.

```bash
 mkdir win
 cd win
 wget https://github.com/wladradchenko/wunjo.wladradchenko.ru/releases/download/build-v1.6.1/webgui.zip
 unzip webgui.zip
 rm webgui.zip
```

--------------------------------

### Install Application on Ubuntu

Source: https://github.com/wladradchenko/wunjo.wladradchenko.ru/wiki/How-to-install-the-application

Installs the Wunjo deb package.

```bash
sudo dpkg -i wunjo_{vesrion}.deb
```

--------------------------------

### Install Dependencies on Ubuntu

Source: https://github.com/wladradchenko/wunjo.wladradchenko.ru/wiki/How-to-install-the-application

Installs the required ffmpeg library via apt.

```bash
sudo apt install ffmpeg
```

--------------------------------

### Install flash-attn

Source: https://github.com/wladradchenko/wunjo.wladradchenko.ru/wiki/How-to-use-the-GPU-in-the-application

Optional command to install flash-attn for improved performance.

```bash
MAX_JOBS=4 pip install flash-attn
```

--------------------------------

### Run Development Environment

Source: https://github.com/wladradchenko/wunjo.wladradchenko.ru/wiki/How-to-install-the-application

Starts the application in development mode using briefcase.

```bash
briefcase dev
```

--------------------------------

### Install Docker on Linux

Source: https://github.com/wladradchenko/wunjo.wladradchenko.ru/blob/main/docker/README.md

Commands to install Docker and configure user permissions on Ubuntu/Debian systems.

```bash
sudo apt-get update
sudo apt-get install -y docker.io
sudo systemctl enable --now docker
sudo usermod -aG docker $USER
newgrp docker  # Refresh group permissions
```

--------------------------------

### Install ffmpeg on MacOS

Source: https://github.com/wladradchenko/wunjo.wladradchenko.ru/wiki/How-to-install-the-application

Installs ffmpeg using Homebrew.

```bash
brew install ffmpeg 
```

--------------------------------

### Install Python Dependencies

Source: https://github.com/wladradchenko/wunjo.wladradchenko.ru/wiki/How-to-install-the-application

Installs requirements based on the target hardware (CPU/GPU) and OS.

```bash
// CPU
pip install -r requirements_cpu.txt  // Not MacOS
// CPU only MacOS
pip install -r requirements_macos.txt
// GPU
pip install -r requirements_gpu.txt  // Not MacOS
```

--------------------------------

### Windows Installer Filename

Source: https://github.com/wladradchenko/wunjo.wladradchenko.ru/wiki/How-to-install-the-application

The naming convention for the Windows installer file.

```text
wunjo_{vesrion}.msi
```

--------------------------------

### Install GPU dependencies

Source: https://github.com/wladradchenko/wunjo.wladradchenko.ru/wiki/How-to-use-the-GPU-in-the-application

Commands to install required packages including PyTorch with CUDA support and xformers.

```bash
python -m pip install --upgrade pip
python -m pip install --upgrade setuptools
python -m pip install --upgrade wheel
python -m pip install -r requirements_gpu.txt
python -m pip install torch==2.0.0+cu118 torchvision==0.15.1+cu118 --extra-index-url https://download.pytorch.org/whl/cu118
python -m pip install xformers==0.0.19
```

--------------------------------

### Run Docker Container

Source: https://github.com/wladradchenko/wunjo.wladradchenko.ru/blob/main/docker/README.md

Commands to start the container with GPU support in foreground or detached mode.

```bash
docker run --gpus all -p 8000:8000 wunjo-run
```

```bash
docker run -d --gpus all -p 8000:8000 --restart unless-stopped --name wunjo-container wunjo-run
```

--------------------------------

### Configure AMD GPU for Wunjo CE

Source: https://github.com/wladradchenko/wunjo.wladradchenko.ru/blob/main/README.md

Commands to install necessary firmware and set up the Python environment with ROCm-compatible PyTorch for AMD GPU support.

```bash
sudo apt update
sudo apt install firmware-linux-nonfree

cd wunjo.wladradchenko.ru

python3.10 -m venv venv
source venv/bin/activate

python -m pip install -r requirements_zluda.txt
python -m pip install -U torch torchaudio torchvision --extra-index-url https://download.pytorch.org/whl/rocm6.1
python -m pip install -U xformers --extra-index-url https://download.pytorch.org/whl/rocm6.1

cd portable
briefcase dev
```

--------------------------------

### Initialize Clone Voice Module Script

Source: https://github.com/wladradchenko/wunjo.wladradchenko.ru/blob/main/portable/src/wunjo/templates/clone_voice.html

Configures module variables and initializes the script environment, including loading external JS files and starting the user tour.

```javascript
const userContentId = {{ user_content_id|tojson|safe }}; const userFileTree = {{ user_file_tree|tojson|safe }}; const pageFileFormats = ["audio"]; let userFileFormats = pageFileFormats; const moduleName = {{ folder_name|tojson|safe }}; const analysisModuleName = {{ analysis_method|tojson|safe }}; const maxDurationToShow = {{ max_duration_sec|tojson|safe }}; // Set the maximum file size to read (in bytes) const maxFileSize = {{ max_files_size|tojson|safe }}; // Limit for symbols const maxNumberSymbols = {{ max_number_symbols|tojson|safe }}; function initScript() { // Import and initialize the content script here const scriptView = document.createElement('script'); scriptView.src = "{{ url_for('static', filename='content/js/view.min.js') }}"; document.body.appendChild(scriptView); document.querySelector('.view-filter').appendChild(createViewFilter()); const scriptCloneVoice = document.createElement('script'); scriptCloneVoice.src = "{{ url_for('static', filename='modules/js/clone.voice.min.js') }}"; document.body.appendChild(scriptCloneVoice); getModuleTaskEventWithIntervalImmediately(); // Tour for new users const tour = {{ tour|tojson|safe }}; if (tour === true) { setTimeout(() => { const footer = document.querySelector('footer'); footer.setAttribute("data-tour", "module"); footer.setAttribute("data-position", "bottom-right"); footer.setAttribute("data-title", `{{ _('Upload file') }}`); footer.setAttribute("data-step", "1"); footer.setAttribute("data-intro", `{{ _('Drag and drop a file or select one. You can upload an audio. About module Clone Voice, look this') }} <a target="_blank" rel="noopener noreferrer" class="pb-1 rounded-md items-center justify-center transition-colors font-normal disabled:cursor-not-allowed px-2 basis-1/3 flex-1 hover:bg-dark-elements-hover text-light-primary bg-dark-elements !bg-accent-primary !text-dark-background" href="https://youtu.be/LIMlsOZdzWM?feature=shared&t=510">{{ _('tutorial') }}</a>.<br><br><text class="text-accent-primary">{{ _('Briefly') }}:</text> {{ _('All red blocks should turn green. Also, use the toggle and make sure to select the right clone language before pressing') }} <button class="p-1 rounded-md items-center justify-center transition-colors font-normal disabled:cursor-not-allowed px-2 basis-1/3 flex-1 hover:bg-dark-elements-hover text-light-primary bg-dark-elements !bg-accent-primary !text-dark-background"><svg class="paper" width="14px" height="14px" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><path d="M231.626,128a16.015,16.015,0,0,1-8.18262,13.96094L54.53027,236.55273a15.87654,15.87654,0,0,1-18.14648-1.74023,15.87132,15.87132,0,0,1-4.74024-17.60156L60.64746,136H136a8,8,0,0,0,0-16H60.64746L31.64355,38.78906A16.00042,16.00042,0,0,1,54.5293,19.44727l168.915,94.59179A16.01613,16.01613,0,0,1,231.626,128Z"></path></svg></button>.`); startDataTour('module', true); }, 100); }; }
```

--------------------------------

### Install CUDA dependencies on Ubuntu/Debian

Source: https://github.com/wladradchenko/wunjo.wladradchenko.ru/wiki/How-to-use-the-GPU-in-the-application

Run these commands in the terminal to update the repository and install essential build tools before proceeding with the CUDA toolkit installation.

```bash
sudo apt update
sudo apt install build-essential dkms
```

--------------------------------

### Set up virtual environment

Source: https://github.com/wladradchenko/wunjo.wladradchenko.ru/wiki/How-to-use-the-GPU-in-the-application

Commands to create and activate a Python virtual environment on Windows.

```bash
python -m venv venv
venv\Scripts\activate.bat
```

--------------------------------

### Initialize Live Portrait Module Script

Source: https://github.com/wladradchenko/wunjo.wladradchenko.ru/blob/main/portable/src/wunjo/templates/live_portrait.html

Sets up configuration variables and initializes the module scripts and user tour.

```javascript
const userContentId = {{ user_content_id|tojson|safe }};
const userFileTree = {{ user_file_tree|tojson|safe }};
const pageFileFormats = ["video", "image"];
let userFileFormats = pageFileFormats;
const moduleName = {{ folder_name|tojson|safe }};
const modelMNET = `{{ url_for('static', filename='modules/models/mnet/mnet.25_v2.simplify.onnx') }}`;
const moduleRetargetName = {{ retarget_method|tojson|safe }};
const moduleScenedetectName = {{ scenedetect_method|tojson|safe }};
const analysisModuleName = {{ analysis_method|tojson|safe }};
const maxDurationToShow = {{ max_duration_sec|tojson|safe }};
// Set the maximum file size to read (in bytes)
const maxFileSize = {{ max_files_size|tojson|safe }};
function initScript() {
	// Import and initialize the content script here
	const scriptView = document.createElement('script');
	scriptView.src = "{{ url_for('static', filename='content/js/view.min.js') }}";
	document.body.appendChild(scriptView);
	document.querySelector('.view-filter').appendChild(createViewFilter());
	const scriptLivePortrait = document.createElement('script');
	scriptLivePortrait.src = "{{ url_for('static', filename='modules/js/live.portrait.min.js') }}";
	document.body.appendChild(scriptLivePortrait);
	getModuleTaskEventWithIntervalImmediately();
	// Tour for new users
	const tour = {{ tour|tojson|safe }};
	if (tour === true) {
		setTimeout(() => {
			const footer = document.querySelector('footer');
			footer.setAttribute("data-tour", "module");
			footer.setAttribute("data-position", "bottom-right");
			footer.setAttribute("data-title", `{{ _('Upload file') }}`);
			footer.setAttribute("data-step", "1");
			footer.setAttribute("data-intro", `{{ _('Drag and drop a file or select one. You can upload either a video or an image. For instructions on how to use the Live Portrait module, check out this') }} <a target="_blank" rel="noopener noreferrer" class="pb-1 rounded-md items-center justify-center transition-colors font-normal disabled:cursor-not-allowed px-2 basis-1/3 flex-1 hover:bg-dark-elements-hover text-light-primary bg-dark-elements !bg-accent-primary !text-dark-background" href="https://youtu.be/g_GkhKI3JhA?feature=shared&t=4">{{ _('tutorial') }}</a>.<br><br><text class="text-accent-primary">{{ _('Briefly') }}:</text> {{ _('All red blocks should turn green, and then press the') }} <button class="p-1 rounded-md items-center justify-center transition-colors font-normal disabled:cursor-not-allowed px-2 basis-1/3 flex-1 hover:bg-dark-elements-hover text-light-primary bg-dark-elements !bg-accent-primary !text-dark-background"><svg class="paper" width="14px" height="14px" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><path d="M231.626,128a16.015,16.015,0,0,1-8.18262,13.96094L54.53027,236.55273a15.87654,15.87654,0,0,1-18.14648-1.74023,15.87132,15.87132,0,0,1-4.74024-17.60156L60.64746,136H136a8,8,0,0,0,0-16H60.64746L31.64355,38.78906A16.00042,16.00042,0,0,1,54.5293,19.44727l168.915,94.59179A16.01613,16.01613,0,0,1,231.626,128Z"></path></svg></button>.`);
			startDataTour('module', true);
		}, 100);
	};
}
```

--------------------------------

### Build Application

Source: https://github.com/wladradchenko/wunjo.wladradchenko.ru/wiki/How-to-install-the-application

Creates a build of the application.

```bash
briefcase build
```

--------------------------------

### Configure Project Settings

Source: https://github.com/wladradchenko/wunjo.wladradchenko.ru/wiki/How-to-install-the-application

Copies the appropriate configuration file for CPU or GPU usage.

```bash
// CPU
cp pyproject_cpu.toml pyproject.toml
// GPU
cp pyproject_gpu.toml pyproject.toml  // Not work for MacOS
```

--------------------------------

### Run Build

Source: https://github.com/wladradchenko/wunjo.wladradchenko.ru/wiki/How-to-install-the-application

Executes the built application.

```bash
briefcase run
```

--------------------------------

### Initialize Lip Sync Module

Source: https://github.com/wladradchenko/wunjo.wladradchenko.ru/blob/main/portable/src/wunjo/templates/lip_sync.html

Initializes the module environment, loads required JavaScript files, and triggers the user onboarding tour if enabled.

```javascript
const userContentId = {{ user_content_id|tojson|safe }};
const userFileTree = {{ user_file_tree|tojson|safe }};
const pageFileFormats = ["video","image"];
let userFileFormats = pageFileFormats;
const moduleName = {{ folder_name|tojson|safe }};
const modelMNET = `{{ url_for('static', filename='modules/models/mnet/mnet.25_v2.simplify.onnx') }}`;
const analysisModuleName = {{ analysis_method|tojson|safe }};
const maxDurationToShow = {{ max_duration_sec|tojson|safe }};
const totalVRAMGB = {{ total_vram_gb|tojson|safe }};
// Set the maximum file size to read (in bytes)
const maxFileSize = {{ max_files_size|tojson|safe }};
function initScript() {
	// Import and initialize the content script here
	const scriptView = document.createElement('script');
	scriptView.src = "{{ url_for('static', filename='content/js/view.min.js') }}";
	document.body.appendChild(scriptView);
	document.querySelector('.view-filter').appendChild(createViewFilter());
	const scriptLipSync = document.createElement('script');
	scriptLipSync.src = "{{ url_for('static', filename='modules/js/lip.sync.min.js') }}";
	document.body.appendChild(scriptLipSync);
	getModuleTaskEventWithIntervalImmediately();
	// Tour for new users
	const tour = {{ tour|tojson|safe }};
	if (tour === true) {
		setTimeout(() => {
			const footer = document.querySelector('footer');
			footer.setAttribute("data-tour", "module");
			footer.setAttribute("data-position", "bottom-right");
			footer.setAttribute("data-title", `{{ _('Upload file') }}`);
			footer.setAttribute("data-step", "1");
			footer.setAttribute("data-intro", `{{ _('Drag and drop a file or select one. You can upload either a video or an image. For instructions on how to use the Lip Sync module, check out this') }} <a target="_blank" rel="noopener noreferrer" class="pb-1 rounded-md items-center justify-center transition-colors font-normal disabled:cursor-not-allowed px-2 basis-1/3 flex-1 hover:bg-dark-elements-hover text-light-primary bg-dark-elements !bg-accent-primary !text-dark-background" href="https://youtu.be/-MGow5zCZUQ?feature=shared&t=477">{{ _('tutorial') }}</a>.<br><br>{{ _('For better video, use the «silence» mode in') }} <text class="text-accent-primary">{{ _('manually retargeting live portrait') }}</text> {{ _('to pre-process the mouth to a closed state before applying lip sync.') }}<br><br><text class="text-accent-primary">{{ _('Briefly') }}:</text> {{ _('All red blocks should turn green, and then press the') }} <button class="p-1 rounded-md items-center justify-center transition-colors font-normal disabled:cursor-not-allowed px-2 basis-1/3 flex-1 hover:bg-dark-elements-hover text-light-primary bg-dark-elements !bg-accent-primary !text-dark-background"><svg class="paper" width="14px" height="14px" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><path d="M231.626,128a16.015,16.015,0,0,1-8.18262,13.96094L54.53027,236.55273a15.87654,15.87654,0,0,1-18.14648-1.74023,15.87132,15.87132,0,0,1-4.74024-17.60156L60.64746,136H136a8,8,0,0,0,0-16H60.64746L31.64355,38.78906A16.00042,16.00042,0,0,1,54.5293,19.44727l168.915,94.59179A16.01613,16.01613,0,0,1,231.626,128Z"></path></svg></button>.`);
			startDataTour('module', true);
		}, 100);
	};
}
```

--------------------------------

### Uninstall Application on Ubuntu

Source: https://github.com/wladradchenko/wunjo.wladradchenko.ru/wiki/How-to-install-the-application

Removes the installed Wunjo package.

```bash
sudo dpkg -r wunjo
```

--------------------------------

### Clone Repository

Source: https://github.com/wladradchenko/wunjo.wladradchenko.ru/blob/main/docker/README.md

Initial steps to download the project source code.

```bash
git clone https://github.com/wladradchenko/wunjo.wladradchenko.ru.git
cd wunjo.wladradchenko.ru
```

--------------------------------

### Build and manage application

Source: https://github.com/wladradchenko/wunjo.wladradchenko.ru/wiki/How-to-use-the-GPU-in-the-application

Commands for building, running, and packaging the application, including a note on a common build error.

```bash
briefcase build
```

```text
'NoneType' object has no attribute 'flush'
```

```bash
briefcase run
```

```bash
briefcase package
```

--------------------------------

### Verify CUDA installation

Source: https://github.com/wladradchenko/wunjo.wladradchenko.ru/wiki/How-to-use-the-GPU-in-the-application

Python script to check if PyTorch can access the GPU.

```bash
python
```

```python
import torch

if torch.cuda.is_available():
    print("CUDA is available")
else:
    print("CUDA is not available")
```

--------------------------------

### Initialize module scripts and user tour

Source: https://github.com/wladradchenko/wunjo.wladradchenko.ru/blob/main/portable/src/wunjo/templates/highlights.html

Configures global variables, loads external JavaScript modules, and triggers the user tour if enabled.

```javascript
const userContentId = {{ user_content_id|tojson|safe }};
const userFileTree = {{ user_file_tree|tojson|safe }};
const pageFileFormats = ["video", "audio"];
let userFileFormats = pageFileFormats;
const moduleName = {{ folder_name|tojson|safe }};
const moduleCutName = {{ cut_method|tojson|safe }};
const maxDurationToShow = {{ max_duration_sec|tojson|safe }};
// Set the maximum file size to read (in bytes)
const maxFileSize = {{ max_files_size|tojson|safe }};
function initScript() {
// Import and initialize the content script here
const scriptView = document.createElement('script');
scriptView.src = "{{ url_for('static', filename='content/js/view.min.js') }}";
document.body.appendChild(scriptView);
document.querySelector('.view-filter').appendChild(createViewFilter());
const scriptGeneration = document.createElement('script');
scriptGeneration.src = "{{ url_for('static', filename='modules/js/highlights.min.js') }}";
document.body.appendChild(scriptGeneration);
getModuleTaskEventWithIntervalImmediately();
// Tour for new users
const tour = {{ tour|tojson|safe }};
if (tour === true) {
setTimeout(() => {
const footer = document.querySelector('footer');
footer.setAttribute("data-tour", "module");
footer.setAttribute("data-position", "bottom-right");
footer.setAttribute("data-title", `{{ _('Upload file') }}`);
footer.setAttribute("data-step", "1");
footer.setAttribute("data-intro", `{{ _('Drag and drop a file or select one. You can upload a video and write how to edit the video, but the latter is not necessary. For instructions on how to use the Highlights module, check out this') }} <a target="_blank" rel="noopener noreferrer" class="pb-1 rounded-md items-center justify-center transition-colors font-normal disabled:cursor-not-allowed px-2 basis-1/3 flex-1 hover:bg-dark-elements-hover text-light-primary bg-dark-elements !bg-accent-primary !text-dark-background" href="https://youtu.be/LIMlsOZdzWM?feature=shared&t=354">{{ _('tutorial') }}</a>.<br><br><text class="text-accent-primary">{{ _('Briefly') }}:</text> {{ _('Use a video, and then press the') }} <button class="p-1 rounded-md items-center justify-center transition-colors font-normal disabled:cursor-not-allowed px-2 basis-1/3 flex-1 hover:bg-dark-elements-hover text-light-primary bg-dark-elements !bg-accent-primary !text-dark-background"><svg class="paper" width="14px" height="14px" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><path d="M231.626,128a16.015,16.015,0,0,1-8.18262,13.96094L54.53027,236.55273a15.87654,15.87654,0,0,1-18.14648-1.74023,15.87132,15.87132,0,0,1-4.74024-17.60156L60.64746,136H136a8,8,0,0,0,0-16H60.64746L31.64355,38.78906A16.00042,16.00042,0,0,1,54.5293,19.44727l168.915,94.59179A16.01613,16.01613,0,0,1,231.626,128Z"></path></svg></button>.`);
startDataTour('module', true);
}, 100);
};
}
```

--------------------------------

### Initialize Application Script

Source: https://github.com/wladradchenko/wunjo.wladradchenko.ru/blob/main/portable/src/wunjo/templates/index.html

Handles URL parameter parsing, UI animations, user tours, and dynamic loading of the index JavaScript bundle.

```javascript
function initScript() { // Parse the query string and get the search parameters const paramsUrl = new URLSearchParams(window.location.search); // Check if a parameter exists in the URL if (paramsUrl.has('message')) { // If email is set open modal feedback createModalMessage(paramsUrl.get('message')); }; // Run animation grayscale moduleTileAnimation(); // Tour for new users const tour = {{ tour|tojson|safe }}; const invalidPath = {{ invalid_path|tojson|safe }}; if (invalidPath === true) { createModalInvalidPathMessage(); }; if (tour === true && invalidPath === false) { setTimeout(() => { startDataTour('index', true); }, 100); }; // Update button index logical const scriptIndex = document.createElement('script'); scriptIndex.src = "{{ url_for('static', filename='index/js/index.min.js') }}"; document.body.appendChild(scriptIndex); };
```

--------------------------------

### Initialize Settings Script

Source: https://github.com/wladradchenko/wunjo.wladradchenko.ru/blob/main/portable/src/wunjo/templates/settings.html

Initializes the settings environment by injecting the settings.min.js script and cleaning up the system processor element.

```javascript
const models = {{ models|tojson|safe }}; const tour = {{ tour|tojson|safe }}; function initScript() { const systemProcessor = document.querySelector('.system-processor') || null; if (systemProcessor){ systemProcessor.remove(); } const scriptSettings = document.createElement('script'); scriptSettings.src = "{{ url_for('static', filename='settings/js/settings.min.js') }}"; document.body.appendChild(scriptSettings); };
```

--------------------------------

### Configure User Tour

Source: https://github.com/wladradchenko/wunjo.wladradchenko.ru/blob/main/portable/src/wunjo/templates/flasgger/body_scripts.html

Sets up an interactive tour for API documentation elements if enabled in the configuration.

```javascript
// Tour for new users const tour = {{ flasgger_config.tour|tojson|safe }}; if (tour === true) { setTimeout(() => { // Authorization const operationsAuthorization = document.querySelector('#operations-Authorization-post_authorization_api'); operationsAuthorization.setAttribute("data-tour", "api"); operationsAuthorization.setAttribute("data-position", "bottom-right"); operationsAuthorization.setAttribute("data-title", `{{ _('Authorization') }}`); operationsAuthorization.setAttribute("data-step", "1"); operationsAuthorization.setAttribute("data-intro", `{{ _('Obtain a token through a POST request using your email and password from wunjo.online. This token is available only to Wunjo Pro subscribers. Use the token for the') }} <text class="text-accent-primary">/submit-module-task</text> {{ _('and') }} <text class="text-accent-primary">/submit-cpu-task</text>.`); // File upload const operationsFileUpload = document.querySelector('#operations-File_Upload-post_upload_tmp'); operationsFileUpload.setAttribute("data-tour", "api"); operationsFileUpload.setAttribute("data-position", "bottom-right"); operationsFileUpload.setAttribute("data-title", `{{ _('File upload') }}`); operationsFileUpload.setAttribute("data-step", "2"); operationsFileUpload.setAttribute("data-intro", `{{ _('Before using a module that requires a file, upload it via File upload and then use the file’s name. Files are uploaded to') }} <text class="text-accent-primary">.cache/wunjo/tmp</text>, {{ _('so ensure file names are unique. Test files like image.jpg, video.mp4, and audio.wav can be found at') }} <a target="_blank" rel="noopener noreferrer" class="text-accent-primary underline" href="https://github.com/wladradchenko/wunjo.wladradchenko.ru/tree/main/example/test">GitHub</a>. {{ _('Example requests are configured to work with these files for testing and customization.') }}`); // Submit module task const operationsSubmitModuleTask = document.querySelector('#operations-Module_Task-post_submit_module_task'); operationsSubmitModuleTask.setAttribute("data-tour", "api"); operationsSubmitModuleTask.setAttribute("data-position", "bottom-right"); operationsSubmitModuleTask.setAttribute("data-title", `{{ _('Submit module task') }}`); operationsSubmitModuleTask.setAttribute("data-step", "3"); operationsSubmitModuleTask.setAttribute("data-intro", `{{ _('Use the main modules in Wunjo via POST requests. Refer to Example for ready-to-use setups. Check Schema for detailed descriptions of each parameter, including accepted values and limits. Note that tasks are linked to your IP address. For localhost, it’s 127.0.0.1. On remote connections, tasks and files are IP-specific.`);
```

--------------------------------

### Initialize Content Script and Tour

Source: https://github.com/wladradchenko/wunjo.wladradchenko.ru/blob/main/portable/src/wunjo/templates/content.html

Initializes the content manager script and triggers the user tour if enabled. Requires the content.min.js file and tour state from the backend.

```javascript
function initScript() { // Import and initialize the content script here const scriptContent = document.createElement('script'); scriptContent.src = "{{ url_for('static', filename='content/js/content.min.js') }}"; document.body.appendChild(scriptContent); // Tour for new users const tour = {{ tour|tojson|safe }}; if (tour === true) { setTimeout(() => { startDataTour('manager', true); }, 100); }; } const userContentId = {{ user_content_id|tojson|safe }} const userFileTree = {{ user_file_tree|tojson|safe }}
```

--------------------------------

### Navigate to Project Directory

Source: https://github.com/wladradchenko/wunjo.wladradchenko.ru/wiki/How-to-install-the-application

Changes the current working directory to the project folder.

```bash
cd wunjo.wladradchenko.ru
```

--------------------------------

### Initialize Preload Environment and Modal

Source: https://github.com/wladradchenko/wunjo.wladradchenko.ru/blob/main/portable/src/wunjo/templates/preload.html

Sets up global configuration variables and defines the function to trigger platform-specific preload modals.

```javascript
const host = {{ host|tojson|safe }}; const platform = {{ platform|tojson|safe }}; const nvccVersion = {{ nvcc_version|tojson|safe }}; const onnxruntimeBool = {{ onnxruntime_bool|tojson|safe }}; const isAdminBool = {{ is_admin|tojson|safe }}; function openPreloadModal() { // Modal const modalTemplate = document.querySelector(platform === 'win32' ? '.modal-preload-win32-template' : '.modal-preload-linux-template'); // Create a copy of the modal content from the template const modalContent = modalTemplate.content.cloneNode(true); if (platform === 'win32'){ // Get element for win32 const systemMessage = modalContent.querySelector(".system-message"); const systemMessageSpan = systemMessage.querySelector("span"); // Update the message based on conditions if (isAdminBool !== true) { systemMessageSpan.innerHTML = "<b>{{ _('IMPORTANT') }}:</b> {{ _('Make sure Wunjo has the necessary permissions for installation."
```

--------------------------------

### Configure API Documentation Tours

Source: https://github.com/wladradchenko/wunjo.wladradchenko.ru/blob/main/portable/src/wunjo/templates/flasgger/body_scripts.html

Initializes tour steps for various API operations by setting data attributes on DOM elements.

```javascript
You’ll receive a unique request_id for your task.') }`); // Query module task const operationsQueryModuleTask = document.querySelector('#operations-Module_Task-get_query_module_task__method_'); operationsQueryModuleTask.setAttribute("data-tour", "api"); operationsQueryModuleTask.setAttribute("data-position", "bottom-right"); operationsQueryModuleTask.setAttribute("data-title", `{{ _('Query module task') }}`); operationsQueryModuleTask.setAttribute("data-step", "4"); operationsQueryModuleTask.setAttribute("data-intro", `{{ _('Track the status of your module task with a GET request by using the unique method name. The task status and response will be returned once with a 201 status, identifiable by the previously issued request_id. After retrieval, the task will be marked as not found. The response includes the media file path.') }}`); // Submit CPU task const operationsSubmitCPUTask = document.querySelector('#operations-CPU_Task-post_submit_cpu_task'); operationsSubmitCPUTask.setAttribute("data-tour", "api"); operationsSubmitCPUTask.setAttribute("data-position", "bottom-right"); operationsSubmitCPUTask.setAttribute("data-title", `{{ _('Submit CPU task') }}`); operationsSubmitCPUTask.setAttribute("data-step", "5"); operationsSubmitCPUTask.setAttribute("data-intro", `{{ _('Similar to /submit-module-task, this POST request provides a request_id. More details on parameters can be found in Schema.') }}`); // Query CPU task const operationsQueryCPUTask = document.querySelector('#operations-CPU_Task-get_query_cpu_task__request_id_'); operationsQueryCPUTask.setAttribute("data-tour", "api"); operationsQueryCPUTask.setAttribute("data-position", "bottom-right"); operationsQueryCPUTask.setAttribute("data-title", `{{ _('Query CPU task') }}`); operationsQueryCPUTask.setAttribute("data-step", "6"); operationsQueryCPUTask.setAttribute("data-intro", `{{ _('Check task readiness with a GET request using the request_id. The task response is returned once with a 201 status, and then the task is marked as not found. The response includes the media file path or data.') }}`); // Console log const operationsConsoleLog = document.querySelector('#operations-General-get_console_log'); operationsConsoleLog.setAttribute("data-tour", "api"); operationsConsoleLog.setAttribute("data-position", "bottom-right"); operationsConsoleLog.setAttribute("data-title", `{{ _('Console log') }}`); operationsConsoleLog.setAttribute("data-step", "7"); operationsConsoleLog.setAttribute("data-intro", `{{ _('Use a GET request to view processing progress, steps completed, error statuses, and success messages. All data is logged. For further questions, contact support@wunjo.online or join on') }} <a target="_blank" rel="noopener noreferrer" href="https://github.com/wladradchenko/wunjo.wladradchenko.ru/discussions" class="text-accent-primary underline">GitHub</a>.`); startDataTour('api', true); }, 1000); };
```

--------------------------------

### Initialize Host and Sound Toggle Logic

Source: https://github.com/wladradchenko/wunjo.wladradchenko.ru/blob/main/portable/src/wunjo/templates/login.html

Defines the host variable from the server and provides a function to toggle the muted state of video elements.

```javascript
const host = {{ host|tojson|safe }}; function switchSound(btn) { // Find the <video> element relative to the provided element const btnDiv = btn.parentElement; const teaserDiv = btnDiv.parentElement; const teaser = teaserDiv.querySelector('video'); if (teaser) { // Toggle the muted state of the <video> element teaser.muted = !teaser.muted; // Optionally, update the button text/icon based on the muted state if (teaser.muted) { btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" class="h-4"><path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="0.85" stroke-width="1.5" d="m14.667 6-4 4m0-4 4 4M7.333 3.333 4 6H1.333v4H4l3.333 2.667V3.333Z"></path></svg>'; } else { btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="12" viewBox="0 0 16 12" fill="none" class="h-4"><path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="0.85" stroke-width="1.5" d="M10.36 3.64a3.333 3.333 0 0 1 0 4.713m2.353-7.066a6.667 6.667 0 0 1 0 9.426m-5.38-9.38L4 4H1.333v4H4l3.333 2.667V1.333Z"></path></svg>'; } } } window.addEventListener('load', function() { initTranslationInputLogical(); });
```

--------------------------------

### Open Application Packages via Fetch

Source: https://github.com/wladradchenko/wunjo.wladradchenko.ru/blob/main/portable/src/wunjo/templates/preload.html

Triggers a request to the server to open specific application directories.

```javascript
fetch('/open-app-packages').then(response => { if (response.ok) return response.json(); else throw new Error('Failed to open folder'); }).then(data => console.log(data)).catch(error => console.error('Error:', error));
```

--------------------------------

### Initialize Face Swap Module Scripts

Source: https://github.com/wladradchenko/wunjo.wladradchenko.ru/blob/main/portable/src/wunjo/templates/face_swap.html

Defines global configuration variables and initializes the face swap module, including loading external scripts and triggering the user onboarding tour.

```javascript
const userContentId = {{ user_content_id|tojson|safe }}; const userFileTree = {{ user_file_tree|tojson|safe }}; const pageFileFormats = ["video", "image"]; let userFileFormats = pageFileFormats; const moduleName = {{ folder_name|tojson|safe }}; const modelMNET = `{{ url_for('static', filename='modules/models/mnet/mnet.25_v2.simplify.onnx') }}`; const analysisModuleName = {{ analysis_method|tojson|safe }}; const maxDurationToShow = {{ max_duration_sec|tojson|safe }}; // Set the maximum file size to read (in bytes) const maxFileSize = {{ max_files_size|tojson|safe }}; function initScript() { // Import and initialize the content script here const scriptView = document.createElement('script'); scriptView.src = "{{ url_for('static', filename='content/js/view.min.js') }}"; document.body.appendChild(scriptView); document.querySelector('.view-filter').appendChild(createViewFilter()); const scriptFaceSwap = document.createElement('script'); scriptFaceSwap.src = "{{ url_for('static', filename='modules/js/face.swap.min.js') }}"; document.body.appendChild(scriptFaceSwap); getModuleTaskEventWithIntervalImmediately(); // Tour for new users const tour = {{ tour|tojson|safe }}; if (tour === true) { setTimeout(() => { const footer = document.querySelector('footer'); footer.setAttribute("data-tour", "module"); footer.setAttribute("data-position", "bottom-right"); footer.setAttribute("data-title", `{{ _('Upload file') }}`); footer.setAttribute("data-step", "1"); footer.setAttribute("data-intro", `{{ _('Drag and drop a file or select one. You can upload either a video or an image. For instructions on how to use the Face Swap module, check out this') }} <a target="_blank" rel="noopener noreferrer" class="pb-1 rounded-md items-center justify-center transition-colors font-normal disabled:cursor-not-allowed px-2 basis-1/3 flex-1 hover:bg-dark-elements-hover text-light-primary bg-dark-elements !bg-accent-primary !text-dark-background" href="https://youtu.be/-MGow5zCZUQ?feature=shared&t=173">{{ _('tutorial') }}</a>.<br><br><text class="text-accent-primary">{{ _('Briefly') }}:</text> {{ _('All red blocks should turn green, and then press the') }} <button class="p-1 rounded-md items-center justify-center transition-colors font-normal disabled:cursor-not-allowed px-2 basis-1/3 flex-1 hover:bg-dark-elements-hover text-light-primary bg-dark-elements !bg-accent-primary !text-dark-background"><svg class="paper" width="14px" height="14px" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><path d="M231.626,128a16.015,16.015,0,0,1-8.18262,13.96094L54.53027,236.55273a15.87654,15.87654,0,0,1-18.14648-1.74023,15.87132,15.87132,0,0,1-4.74024-17.60156L60.64746,136H136a8,8,0,0,0,0-16H60.64746L31.64355,38.78906A16.00042,16.00042,0,0,1,54.5293,19.44727l168.915,94.59179A16.01613,16.01613,0,0,1,231.626,128Z"></path></svg></button>.`); startDataTour('module', true); }, 100); }; }
```

--------------------------------

### Initialize Restyling Module JavaScript

Source: https://github.com/wladradchenko/wunjo.wladradchenko.ru/blob/main/portable/src/wunjo/templates/restyling.html

Defines global configuration variables and initializes the module scripts and user tour within the template's script block.

```javascript
const userContentId = {{ user_content_id|tojson|safe }}; const userFileTree = {{ user_file_tree|tojson|safe }}; const pageFileFormats = ["video", "image"]; let userFileFormats = pageFileFormats; const moduleName = {{ folder_name|tojson|safe }}; const modelSAM = {{ model_sam|tojson|safe }}; const moduleScenedetectName = {{ scenedetect_method|tojson|safe }}; const moduleControlName = {{ control_method|tojson|safe }}; const moduleInpaintName = {{ inpaint_method|tojson|safe }}; const maxDurationToShow = {{ max_duration_sec|tojson|safe }}; // Set the maximum file size to read (in bytes) const maxFileSize = {{ max_files_size|tojson|safe }}; // Models const sdModels = {{ sd_models|tojson|safe }}; const downloadModels = {{ download_models|tojson|safe }}; function initScript() { // Import and initialize the content script here const scriptView = document.createElement('script'); scriptView.src = "{{ url_for('static', filename='content/js/view.min.js') }}"; document.body.appendChild(scriptView); document.querySelector('.view-filter').appendChild(createViewFilter()); const scriptRestyling = document.createElement('script'); scriptRestyling.src = "{{ url_for('static', filename='modules/js/restyling.min.js') }}"; document.body.appendChild(scriptRestyling); getModuleTaskEventWithIntervalImmediately(); // Tour for new users const tour = {{ tour|tojson|safe }}; if (tour === true) { setTimeout(() => { const footer = document.querySelector('footer'); footer.setAttribute("data-tour", "module"); footer.setAttribute("data-position", "bottom-right"); footer.setAttribute("data-title", `{{ _('Upload file') }}`); footer.setAttribute("data-step", "1"); footer.setAttribute("data-intro", `{{ _('Drag and drop a file or select one. You can upload either a video or an image. For instructions on how to use the Restyling module, check out this') }} <a target="_blank" rel="noopener noreferrer" class="pb-1 rounded-md items-center justify-center transition-colors font-normal disabled:cursor-not-allowed px-2 basis-1/3 flex-1 hover:bg-dark-elements-hover text-light-primary bg-dark-elements !bg-accent-primary !text-dark-background" href="https://youtu.be/LIMlsOZdzWM?feature=shared&t=15">{{ _('tutorial') }}</a>.<br><br><text class="text-accent-primary">{{ _('Briefly') }}:</text> {{ _('All red blocks should turn green or use toggle to fully restyle, and then press the') }} <button class="p-1 rounded-md items-center justify-center transition-colors font-normal disabled:cursor-not-allowed px-2 basis-1/3 flex-1 hover:bg-dark-elements-hover text-light-primary bg-dark-elements !bg-accent-primary !text-dark-background"><svg class="paper" width="14px" height="14px" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><path d="M231.626,128a16.015,16.015,0,0,1-8.18262,13.96094L54.53027,236.55273a15.87654,15.87654,0,0,1-18.14648-1.74023,15.87132,15.87132,0,0,1-4.74024-17.60156L60.64746,136H136a8,8,0,0,0,0-16H60.64746L31.64355,38.78906A16.00042,16.00042,0,0,1,54.5293,19.44727l168.915,94.59179A16.01613,16.01613,0,0,1,231.626,128Z"></path></svg></button>.`); startDataTour('module', true); }, 100); }; }
```

--------------------------------

### Troubleshoot GPU and Ports

Source: https://github.com/wladradchenko/wunjo.wladradchenko.ru/blob/main/docker/README.md

Commands to verify GPU access and handle port conflicts.

```bash
docker run --rm --gpus all nvidia/cuda:12.4.1-base-ubuntu22.04 nvidia-smi
```

```bash
docker run --gpus all -p 8001:8000 wunjo-run
```

--------------------------------

### Initialize Application Scripts

Source: https://github.com/wladradchenko/wunjo.wladradchenko.ru/blob/main/portable/src/wunjo/templates/app.html

Handles the loading of core scripts and templates, followed by authorization checks and optional lazy script initialization.

```javascript
url_for('static', filename='basic/js/login.min.js') }}", localUrl: "{{ url_for('static', filename='basic/js/login.min.js') }}" } ]).then(() => { isAuthorized().then((isAuthorizedResult) => { if (!isAuthorizedResult) { createDiscountElement(); }; }); if (typeof initLazyScript === 'function') { initLazyScript(); } }).catch(error => { console.error('Error loading lazy scripts:', error); }); }).catch(error => { console.error('Error loading core scripts or templates:', error); }); const serverVersionData = {{ changelog|tojson|safe }}; const currentVersionDiv = document.querySelector(".version"); const languageTooltipTranslation = {{ language_tooltip_translation|tojson|safe }}; const enableTooltipTranslation = {{ enable_tooltip_translation|tojson|safe }};
```

--------------------------------

### Access Application

Source: https://github.com/wladradchenko/wunjo.wladradchenko.ru/blob/main/docker/README.md

The local URL to access the application after launch.

```text
http://localhost:8000
```
Tokens:
Raw