0

I have built a prompt-generating demo app with gradio hosted as a Hugging Face space. Now, I want to use the gradio javascript client to call the api in a website. Here is my code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prompt Generator</title>
    <style>
        body {
            text-align: center;
            background-color:whitesmoke;
          }

        #phrase {
            padding: 15px;
            width: 20%;
            border: 5px solid rgb(49, 47, 68);
            text-align: center;
        }

        #prompt-holder {
            width: 50%;
            height: 50%;
            margin: 0 auto;
            border: 5px solid rgb(50, 31, 221);
            padding: 20px;
            text-align: center;
            background-color:rgb(246, 247, 248)
    }
    </style>
</head>
<body>
    <h3><strong>AI Text-To-Image Prompt Generator</strong></h3>
    <br><br>
    <div id="text-input"><input type="text" title="Starting Phrase" id="phrase" placeholder="Enter phrase here"></div>
    <br><br><br><br>
    <button id="run"><strong>Generate Prompt</strong></button>
    <br><br><br><br><br>
    <div id="prompt-holder"></div>
</body>

<script src="https://cdn.jsdelivr.net/npm/@gradio/client@0.1.4/dist/index.min.js"></script type="module">
<script>
    import { client } from "@gradio/client";
    const inputText = document.getElementById("phrase");
    const generate = document.getElementById("run");
    const prompt_holder = document.getElementById("prompt-holder");

    generate.addEventListener("click", async () =>{
        try {
            const textInput = inputText.value;

            const app = await client("https://ifeanyi-promptgenerator.hf.space/");
            const result = await app.predict("/predict", [      
            textInput, // string  in 'prompt' Textbox component
        ]);
            prompt_holder.textContent = result.data;            

            } catch (error){
                 console.log("Error:",error.message);         
            }
    
        }

        
);
</script>
</html>

But when I run the app and try to generate a prompt from a phrase, I do not get any response from the server. In the browser console, I get the following errors:

Uncaught SyntaxError: Unexpected token 'export'
Uncaught TypeError: Failed to resolve module specifier "@gradio/client". Relative references must start with either "/", "./", or "../".

Please, if you have successfully used the gradio javascript client in your project, I will highly appreciate your helpful advice. Thanks!

Zac Anger
  • 6,983
  • 2
  • 15
  • 42
Idiaye
  • 39
  • 8
  • `type="module"` needs to go on the opening script tag, not the closing one. – Zac Anger Jul 31 '23 at 20:21
  • Thanks Zac for your response. I corrected it but there is no difference in outcome. The api call is still not working. Instead, I am getting a new error: "Uncaught SyntaxError: Cannot use import statement outside a module" – Idiaye Jul 31 '23 at 20:42
  • Ah, did you add `type="module"` to your inline JS? That's also using modules. – Zac Anger Jul 31 '23 at 21:09

2 Answers2

1
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prompt Generator</title>
    <style>
        body {
            text-align: center;
            background-color:whitesmoke;
          }

        #phrase {
            padding: 15px;
            width: 20%;
            border: 5px solid rgb(49, 47, 68);
            text-align: center;
        }

        #prompt-holder {
            width: 50%;
            height: 50%;
            margin: 0 auto;
            border: 5px solid rgb(50, 31, 221);
            padding: 20px;
            text-align: center;
            background-color:rgb(246, 247, 248)
    }
    </style>
</head>
<body>
    <h3><strong>AI Text-To-Image Prompt Generator</strong></h3>
    <br><br>
    <div id="text-input"><input type="text" title="Starting Phrase" id="phrase" placeholder="Enter phrase here"></div>
    <br><br><br><br>
    <button id="run"><strong>Generate Prompt</strong></button>
    <br><br><br><br><br>
    <div id="prompt-holder"></div>
</body>

<script type="module" src="https://cdn.jsdelivr.net/npm/@gradio/client@0.1.4/dist/index.min.js"></script>
<script type="module">
    import { client } from "https://cdn.jsdelivr.net/npm/@gradio/client@0.1.4/dist/index.min.js";
    const inputText = document.getElementById("phrase");
    const generate = document.getElementById("run");
    const prompt_holder = document.getElementById("prompt-holder");

    generate.addEventListener("click", async () =>{
        try {
            const textInput = inputText.value;

            const app = await client("https://ifeanyi-promptgenerator.hf.space/");
            const result = await app.predict("/predict", [      
            textInput, // string  in 'prompt' Textbox component
        ]);
            prompt_holder.textContent = result.data;            

            } catch (error){
                 console.log("Error:",error.message);         
            }
    
        }

        
);
</script>
</html>

here is your project on static HTML

Морфей
  • 50
  • 6
  • so you actually dont need to use this line "" – Морфей Jul 31 '23 at 21:00
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 04 '23 at 00:05
1

I would suggest to use Browserify, as it is used to bundle CommonJS modules for use in web browsers. you can install browserify and esmify as global dependency as

npm i -g browserify esmify

Create a separate App.js file

#Filename: app.js

import {
    client
} from "@gradio/client";


window.onload = () => {
    const inputText = document.getElementById("phrase");
    const generate = document.getElementById("run");
    const prompt_holder = document.getElementById("prompt-holder");

    generate.addEventListener("click", async () => {
        try {
            const textInput = inputText.value;

            const app = await client("https://ifeanyi-promptgenerator.hf.space/");
            const result = await app.predict("/predict", [
                textInput, // string  in 'prompt' Textbox component
            ]);
            prompt_holder.textContent = result.data;

        } catch (error) {
            console.log("Error:", error.message);
        }

    });
}

Run browserify to build bundle file and include it in HTML script tag

browserify app.js -p esmify > bundle.js

Include it in your html like

<script src="./bundle.js"></script>
Syed M Sohaib
  • 307
  • 1
  • 8