I am trying to import a npm package called @gradio/client

Ask the community
1

I am trying to import a npm package called gradio/client .
I installed the NPM package but it throwing the below error.

{
“message”: "Error loading web module backend/events.js: Both resolutions failed at _load!\n\nOriginal resolver: Both resolutions failed at _load!\n\nOriginal resolver: Both resolutions failed at _load!\n\nOriginal resolver: Cannot find module ‘gradio/client’\nRequire stack:\n- /user-code/backend/chat.web.js\n- /user-code/backend/events.js\n- /user-code/stubmodule-that-does-the-require.js\n- /cloud-runtime-code/node_modules/scoped-require/index.js\n- /cloud-runtime-code/packages/elementory/cloud-runtime/factories.js\n- /cloud-runtime-code/packages/elementory/cloud-runtime/create-app.js\n- /cloud-runtime-code/packages/elementory/cloud-runtime/cloud-grid-runner.js\nYarnPNP

What is the correct way to import the npm package?

2

Hi, Guru_Lokesh !!

Not all npm packages are available for use on Wix, and some can only be used on the backend, while others are limited to the frontend. Additionally, providing details on how the error occurred will make it easier for community members to assist you. :smiley:

3

Hi @onemoretime ,

Thanks for the response.
I am installed the (@)gradio/client package in the packages and backend options.
And I created a .web.js file in the backend where I am importing the package.

I used two methods to import it.

  1. import {Client} from (@)gradio/client
  2. const app= require(‘(@)gradio/client’).

There were no compilation errors when I am using these two lines(trying one , got failed and trying another one and got failed ) in the program. But during publishing it, my log throws the error that it cannot find the package.

So, here, can’t wix support the (@)gradio/client package? if that is the case, why it has the option to install it in the first place?

Kindly let me know if you need more info.

4

I also tried using the following sample code in web.js, but encountered an error saying @gradio/client could not be found.

import { Client, handle_file } from "@gradio/client";

const response = await fetch(
	"https://github.com/audio-samples/audio-samples.github.io/raw/master/samples/wav/ted_speakers/SalmanKhan/sample-1.wav"
);
const audio_file = await response.blob();

const app = await Client.connect("abidlabs/whisper");
const transcription = await app.predict("/predict", [handle_file(audio_file)]);

console.log(transcription.data);
// [ "I said the same phrase 30 times." ]

from: Getting Started With The Js Client

5

Hi @onemoretime ,

As I mentioned, I used import{Client} from statement like your sample code, but it is not recognizing the package.

are you still facing the same error that you encountered? If not, could you please guide me to resolve this?.

I also followed the steps that has given in the link that you pasted. But no luck.

6

Hi, @Guru_Lokesh !!

Yesterday, based on my experiments, I believe the current state of compatibility between Wix’s backend environment and the library isn’t ideal. I think the error message I experienced was the same one you encountered. I’m not very familiar with Gradio—I only have a basic understanding that it’s used for things like Web UIs—but I do understand that the goal is to send instructions to some AI and receive results in return. The link I shared yesterday included instructions for importing using a CDN, right? I tried that method today. I also asked ChatGPT to improve the code so the results would be easier to understand, and I believe it’s working now. Could you try writing this code directly into Wix’s HTML Component (iframe)? It seems to be functioning correctly.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gradio Client Test</title>
</head>
<body>
    <h1>Gradio Translation Test</h1>
    <p>Translating: <strong>Hello!! My name is Onemoretime!! How are you? Are you working now?</strong></p>
    <p id="result">Translation result will appear here...</p>

    <script type="module">

        import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";

        async function translateText() {
            try {
                // Connect to the Gradio client
                const client = await Client.connect("abidlabs/en2fr");

                // Perform the prediction
                const result = await client.predict("/predict", {
                    text: "Hello!! My name is Onemoretime!! How are you? Are your working?"
                });

                // Log the result to the console
                console.log("Translation result:", result);

                // Update the result on the page
                document.getElementById("result").textContent = result.data || "No data received.";
            } catch (error) {
                console.error("An error occurred:", error);

                // Display error message on the page
                document.getElementById("result").textContent = `Error: ${error.message}`;
            }
        }

        // Execute the translation function
        translateText();

    </script>
</body>
</html>

Thank you, Lokesh! It seems like I can do a lot of interesting things with this. Thanks to you, I’ve discovered something exciting. :rofl:

2 Likes