How to use Gradio API
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.
2023-07-17T22:20:10Z
Hi@Codericcardo- can you share the code you have? Will make it easier to help you!
2023-07-18T08:06:53Z
Sure! Here’s how I proceeded:Step 1: Install DependenciesI 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 axiosStep 3: Created app.js and Ran the CodeI created a new file namedapp.jsand pasted the provided code into it. The code imports the@gradio/clientmodule and defines an asynchronous function calledrun.Inapp.js, I executed therunfunction: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.jsThe 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.
2023-07-19T12:51:03Z
Hi@Codericcardo,This Gradio app doesn’t have named API, so you need to usesubmitwith thefn_indexHere’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>jsfiddle.netEdit fiddle - JSFiddle - Code PlaygroundTest your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
2023-07-19T13:04:50Z
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!
2023-07-19T13:10:19Z
While the documentation is WIP, you can’t find a bit more info heregradio.appGradio Python Client DocsThe lightweight Gradio client library that makes it easy to use any Gradio app as an APIand heregithub.com//github.com/gradio-app/gradio/tree/main/client/js