JSFiddle - React, Tailwind, and code Playground

HTML

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