Question 220113 in Html Question posted in
Some basic documentation can be found here.

Html – How to Use the Gradio Javascript Client

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/[email protected]/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!

Tags:

2

Answers


  1. 0 
    <!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/[email protected]/dist/index.min.js"></script>
<script type="module">
    import { client } from "https://cdn.jsdelivr.net/npm/@gradio/[email protected]/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

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search