Huggingface Inference Api With Javascript

This website utilizes the Hugging Face API to generate image descriptions based on user-provided text input. The application is built with HTML, CSS, and JavaScript, and it leverages the facebook/bart-large-cnn model for generating textual summaries.

Features

• Input a text description and get a summarized version using the Hugging Face API.
• Simple and intuitive user interface.
• Asynchronous API calls for smooth user experience.

Requirements

• A web browser (Chrome, Firefox, Safari, etc.).
• An API token from Hugging Face.

Usage

1. Get your Hugging Face API token:

   If you don't have an API token, you need to create an account on Hugging Face and obtain your API token.

2. Clone the repository:

   git clone https://github.com/Munya-Marinda/huggingface-inference-api-with-javascript
   cd fusion-image-generator-website
   

3. Open the HTML file:

   Open index.html in your preferred web browser.

4. Update the API token:

   Open the script.js file and replace xxxxxxxxxxxxxxxxxxx with your Hugging Face API token:

   Authorization: "Bearer xxxxxxxxxxxxxxxxxxx",
   

5. Enter text and generate summary:

   • Enter your text into the input field.
   • Click the button to generate a summary.
   • The summarized text will be displayed below the input field.

Example Code

Here is a snippet of the JavaScript code used in this application:

const callAPI = () => {
  console.log("callAPI. Hello World!");

  const paragraph = document.getElementById("text-input");
  const output = document.getElementById("text-output");
  const text = paragraph.value;

  async function query(data) {
    const response = await fetch(
      "https://api-inference.huggingface.co/models/facebook/bart-large-cnn",
      {
        headers: {
          Authorization: "Bearer xxxxxxxxxxxxxxxxxxx",
        },
        method: "POST",
        body: JSON.stringify(data),
      }
    );
    const result = await response.json();
    return result;
  }

  query({
    inputs: text,
  }).then((response) => {
    output.innerHTML = response[0]?.summary_text;
  });
};