How to use Gradio API

šŸ”’ Gradio
1

Hello everyone!

I hope you are all doing well. I recently discovered the Falcon Chat language model by Hugging Face (link: Falcon-Chat - a Hugging Face Space by HuggingFaceH4), and Iā€™m very excited to use it to enhance my chat and conversation applications. However, Iā€™m facing some difficulties in setting up the Gradio APIs for this model.

I have already tried following the provided documentation, but it seems there is an issue with file paths. When running the code, I receive a ā€œFileNotFoundError: [Errno 2] No such file or directory: ā€˜nullā€™ā€ error.

At this point, Iā€™m stuck and unsure about how to proceed. Iā€™m sure some of you have experience with Gradio APIs and could help me troubleshoot this problem step by step.

1 Like
2

Hi @Codericcardo - can you share the code you have? Will make it easier to help you!

3

Sure! Hereā€™s how I proceeded:

Step 1: Install Dependencies
I have Node.js installed on my computer from the official Node.js website. Then, I created a new directory and opened a terminal in that directory. I ran the following commands to initialize a new Node.js project and install the necessary dependencies:

npm init -y
npm install @gradio/client axios

Step 3: Created app.js and Ran the Code

I created a new file named app.js and pasted the provided code into it. The code imports the @gradio/client module and defines an asynchronous function called run.

In app.js, I executed the run function:

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

async function run() {
  const app = await client("https://huggingfaceh4-falcon-chat.hf.space/");
  const result = await app.predict(1, [
    "Howdy!", // string  in 'Type an input and press Enter' Textbox component
    "null", // any (any valid json) in 'parameter_9' Chatbot component
    "Howdy!", // string  in 'Instructions' Textbox component
    0.1, // number (numeric value between 0.1 and 2.0) in 'Temperature' Slider component
    0.1, // number (numeric value between 0.1 and 0.99) in 'p (nucleus sampling)' Slider component
  ]);

  console.log(result?.data);
}

run();

To run the code, I used the following command in the Windows CMD:

node app.js

The code connects to the host application at the specified URL (https://huggingfaceh4-falcon-chat.hf.space/) However, it seems that the code did not work as expected.

I would like to use these APIs to prototype my Chatbot, I also tried with the official Huggingface APIs, but the default API limit cuts the response generated by the Text model.

4

Hi @Codericcardo ,

This Gradio app doesnā€™t have named API, so you need to use submit with the fn_index

Hereā€™s a fully functional code with callback for data and status code

<script type="module">
  import {
  client
} from "https://cdn.jsdelivr.net/npm/@gradio/client/+esm";


  const SYSTEM =
    "The following is a conversation between a highly knowledgeable and intelligent AI assistant, called Falcon, and a human user, called User. In the following interactions, User and Falcon will converse in natural language, and Falcon will answer User's questions. Falcon was built to be respectful, polite and inclusive. Falcon was built by the Technology Innovation Institute in Abu Dhabi. Falcon will never decline to answer a question, and always attempts to give an answer that User would be satisfied with. It knows a lot, and always tells the truth. The conversation begins.\n";

  async function run() {
    const falcon = await client(
      "https://huggingfaceh4-falcon-chat.hf.space"
    );

    let message = "What's python?";
    let history = [];
    let status = "";
    let data = null;
    function callback(msg) {
      if (msg.type == "data") {
        console.log(msg.data[0]);
      }
      if (msg.type == "data") {
        console.log(msg.data[0]);
      }
    }

    falcon
      .submit(1, [message, history, SYSTEM, 0.8, 0.9])
      .on("status", (evt) => {
        status = evt.stage;
        callback({ type: evt.type, data: evt.state });
      })
      .on("data", (evt) => {
        data = evt.data[0];
        callback({ type: evt.type, data: evt.data[0] });
      });
  }

  run();

</script>
5

Hi there, thank you for sending over this code example for interacting with Falcon through the Gradio API. I noticed you are using some more advanced features like submitfn_index and callbacks that werenā€™t in the basic documentation example. Iā€™m wondering where you found information on these specific API usage patterns? Were there any particular resources, documentation sections, open source projects, or examples that you used? Asking so I can learn more about these advanced use cases. Any pointers to where you learned these techniques would be greatly appreciated!

6

While the documentation is WIP, you canā€™t find a bit more info here

and here