### 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') }} {{ _('tutorial') }}.

{{ _('Briefly') }}: {{ _('All red blocks should turn green. Also, use the toggle and make sure to select the right clone language before pressing') }} .`); 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') }} {{ _('tutorial') }}.

{{ _('Briefly') }}: {{ _('All red blocks should turn green, and then press the') }} .`); 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') }} {{ _('tutorial') }}.

{{ _('For better video, use the «silence» mode in') }} {{ _('manually retargeting live portrait') }} {{ _('to pre-process the mouth to a closed state before applying lip sync.') }}

{{ _('Briefly') }}: {{ _('All red blocks should turn green, and then press the') }} .`); 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') }} {{ _('tutorial') }}.

{{ _('Briefly') }}: {{ _('Use a video, and then press the') }} .`); 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') }} /submit-module-task {{ _('and') }} /submit-cpu-task.`); // 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') }} .cache/wunjo/tmp, {{ _('so ensure file names are unique. Test files like image.jpg, video.mp4, and audio.wav can be found at') }} GitHub. {{ _('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 = "{{ _('IMPORTANT') }}: {{ _('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') }} GitHub.`); 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