Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/munya-marinda/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.
https://github.com/munya-marinda/huggingface-inference-api-with-javascript
ai aiwebapp artificialintelligence digitalart huggingfaceapi javascript opensource textsummarization texttoimage webdevelopment webtech
Last synced: 28 days ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/munya-marinda/huggingface-inference-api-with-javascript
- Owner: Munya-Marinda
- Created: 2024-05-05T13:41:17.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-05-23T09:18:00.000Z (8 months ago)
- Last Synced: 2024-05-23T10:31:28.090Z (8 months ago)
- Topics: ai, aiwebapp, artificialintelligence, digitalart, huggingfaceapi, javascript, opensource, textsummarization, texttoimage, webdevelopment, webtech
- Language: HTML
- Homepage:
- Size: 3.91 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://huggingface.co/) and obtain your API token.
2. **Clone the repository:**
```bash
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:
```javascript
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:
```javascript
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;
});
};
```
## Note
- Make sure you replace the placeholder `xxxxxxxxxxxxxxxxxxx` with your actual Hugging Face API token.
- The input text provided can be any description you want to summarize.
## License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
## Contributing
Contributions are welcome! Please open an issue or submit a pull request if you have any improvements or suggestions.
## Contact
For any questions or support, please contact [[email protected]].