How to incorporate Wav2Lip in ReactJS

Question

I want to incorporate Wav2Lip (A Python package) into ReactJS using NodeJS, I found a package on NPM called wav2lip but its incompatible with ReactJS. I tried editing the webpack using craco but did not succeed. Do you guys know a way for me to use Wav2Lip in ReactJS?

Here is the code for App.js using wav2lip NPM package and the methods I tried for fixing it:

import React, { useState } from 'react';
import Wav2Lip from 'wav2lip';
import { remote } from 'electron';
import fs from 'fs-extra';

function App() {
  const [isProcessing, setIsProcessing] = useState(false);
  const [videoSrc, setVideoSrc] = useState('');

  const handleRun = async () => {
    setIsProcessing(true);

    const inputDir = remote.app.getAppPath();
    const outputDir = remote.app.getAppPath();
    const instance = new Wav2Lip({ inputDir, outputDir, fs });

    try {
      const result = await instance.Run('./game.mp4', './game.wav');
      setIsProcessing(false);
      setVideoSrc(result.outputFilePath);
    } catch (err) {
      console.log(err);
      setIsProcessing(false);
    }
  };

  return (
    <div>
      {isProcessing ? (
        <p>Processing...</p>
      ) : (
        <>
          {videoSrc && (
            <video controls>
              <source src={videoSrc} type="video/mp4" />
            </video>
          )}
          <button onClick={handleRun}>Run Wav2Lip</button>
        </>
      )}
    </div>
  );
}

export default App;

craco.config.js file

const webpack = require("webpack");
const util = require("util");
module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      delete webpackConfig.node;
      webpackConfig.module.rules.push({
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
          },
        },
      });
      webpackConfig.plugins.push(
        new webpack.DefinePlugin({
          "process.env": {
            NODE_ENV: JSON.stringify("production"),
          },
        })
      );
      webpackConfig.resolve.fallback = {
        path: require.resolve("path-browserify"),
        fs: false,
        child_process: false,
        crypto: require.resolve("crypto-browserify"),
        stream: require.resolve("stream-browserify"),
        util: require.resolve("util"),
        assert: require.resolve("assert/"),
        constants: require.resolve("constants-browserify"),
      };
      return webpackConfig;
    },
    plugins: [],
  },
};

package.json file

{
  "name": "face",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@craco/craco": "^7.0.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "browserify-zlib": "^0.2.0",
    "constants-browserify": "^1.0.0",
    "crypto-browserify": "^3.12.0",
    "electron": "^23.1.1",
    "fs": "^0.0.1-security",
    "fs-extra": "^11.1.0",
    "path-browserify": "^1.0.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "stream-browserify": "^3.0.0",
    "wav2lip": "^1.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.21.0",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.18.6",
    "babel-loader": "^9.1.2"
  }
}

Any help will be greatly appreciated.

Answer 1

You are trying to call a Python package from NodeJS, it seems.

1. Install python-shell using npm

   npm install python-shell

2. Write your script in python, for example app.py containing:

    import wav2lip
    
    def my_function(input_str):
        # Do some processing using the wav2lip package
        output_str = "Processed " + input_str
        return output_str

3. In your Node.js script, import the python-shell module and use it to spawn a Python process and call the function defined in the app.py script.

    const { PythonShell } = require('python-shell');
    
    // Set up the PythonShell object 
    let options = {
      mode: 'text',
      pythonPath: 'python', // Path to your Python executable
      pythonOptions: ['-u'], // Allows stdout to be displayed in real-time
      scriptPath: '.', // Path to the directory containing app.py
      args: ['input string'], // Arguments to pass to the function
    };
    
    PythonShell.run('app.py', options, function (err, results) {
      if (err) throw err;
      console.log('Output:', results[0]); 
    });