使用Gradio JavaScript Client调用Hugging Face接口报错求助

问题背景 #

我基于Gradio构建了提示词生成应用并托管为Hugging Face Space，尝试用Gradio JavaScript Client在网页中调用其API，代码如下：

<!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>

报错信息 #

点击生成按钮后无服务器响应，浏览器控制台输出以下错误：

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

解决方法 #

1. 核心问题分析

• 原脚本标签的type="module"属性位置错误，导致脚本未以模块模式加载
• 浏览器环境无法直接通过包名导入模块，必须使用完整的CDN模块路径

2. 修改后的完整代码

<!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">
    // 从CDN的ES模块地址直接导入client
    import { client } from "https://cdn.jsdelivr.net/npm/@gradio/client@0.1.4/dist/index.esm.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;
            if (!textInput) return; // 避免空输入发起无效请求

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

        } catch (error){
             console.log("Error:",error.message);         
        }
    });
</script>
</html>

关键修改说明

• 将脚本改为标准的type="module"模式，直接从CDN提供的ES模块地址导入client
• 移除了无效的<script src="..."></script>标签，统一使用模块导入逻辑
• 增加空输入判断，减少不必要的API请求

内容的提问来源于stack exchange，提问作者Ifeanyi Idiaye