---
sidebar_label: 'Hugging Face'
---


import {PlatformSelector} from '@site/src/components/PlatformSelector/PlatformSelector';
import {PlatformSection} from '@site/src/components/PlatformSection/PlatformSection';

import InstallationJavaScript from './_004-hugging-face/#js/installation.mdx';
import InstallationReactJs from './_004-hugging-face/#react/installation.mdx';

import UsageJavaScript from './_004-hugging-face/#js/usage.mdx';
import UsageReactJs from './_004-hugging-face/#react/usage.mdx';

import UsageWithGenericsJavaScript from './_004-hugging-face/#js/usage-generics.mdx';
import UsageWithGenericsReactJs from './_004-hugging-face/#react/usage-generics.mdx';

import ConfigJavaScript from './_004-hugging-face/#js/config.mdx';
import ConfigReactJs from './_004-hugging-face/#react/config.mdx';

import ConfigModelJavaScript from './_004-hugging-face/#js/config/model.mdx';
import ConfigModelReactJs from './_004-hugging-face/#react/config/model.mdx';

import ConfigEndpointJavaScript from './_004-hugging-face/#js/config/endpoint.mdx';
import ConfigEndpointReactJs from './_004-hugging-face/#react/config/endpoint.mdx';

import ConfigAuthTokenJavaScript from './_004-hugging-face/#js/config/authToken.mdx';
import ConfigAuthTokenReactJs from './_004-hugging-face/#react/config/authToken.mdx';

import ConfigDataTransferModeJavaScript from './_004-hugging-face/#js/config/dataTransferMode.mdx';
import ConfigDataTransferModeReactJs from './_004-hugging-face/#react/config/dataTransferMode.mdx';

import ConfigSystemMessageJavaScript from './_004-hugging-face/#js/config/systemMessage.mdx';
import ConfigSystemMessageReactJs from './_004-hugging-face/#react/config/systemMessage.mdx';

import ConfigInputPreProcessorJavaScript from './_004-hugging-face/#js/config/inputPreProcessor.mdx';
import ConfigInputPreProcessorReactJs from './_004-hugging-face/#react/config/inputPreProcessor.mdx';

import ConfigOutputPreProcessorJavaScript from './_004-hugging-face/#js/config/outputPreProcessor.mdx';
import ConfigOutputPreProcessorReactJs from './_004-hugging-face/#react/config/outputPreProcessor.mdx';

import ConfigMaxNewTokensJavaScript from './_004-hugging-face/#js/config/maxNewTokens.mdx';
import ConfigMaxNewTokensReactJs from './_004-hugging-face/#react/config/maxNewTokens.mdx';

# Hugging Face

Hugging Face is a popular platform for hosting and accessing machine learning models. It provides a unified
interface and inference API to interact with many state-of-the-art open-source models such as LLAMA3, DeciLM,
and more.

This documentation page is about the standard adapter provided by `NLUX` for [Hugging Face Inference API](https://huggingface.co/inference-endpoints/serverless).

---

## Installation

<PlatformSelector reactJs={InstallationReactJs} javascript={InstallationJavaScript}/>

---

## Usage

<PlatformSelector reactJs={UsageReactJs} javascript={UsageJavaScript}/>

> ### Response Type and Generics

By default, the `Hugging Face` adapter assumes that the parsed response returned from the model is a `string`.<br />
If you provide an output pre-processor that returns a different type, you can specify the type of the response using
generics, so it can be used in custom renderers, and other parts of the `NLUX` library.

<PlatformSelector reactJs={UsageWithGenericsReactJs} javascript={UsageWithGenericsJavaScript}/>

---

## Configuration

<PlatformSection reactJs={ConfigReactJs} javascript={ConfigJavaScript}/>

---

> ### Model

<PlatformSelector reactJs={ConfigModelReactJs} javascript={ConfigModelJavaScript}/>

---

> ### Endpoint

<PlatformSelector reactJs={ConfigEndpointReactJs} javascript={ConfigEndpointJavaScript}/>

---

> ### Auth Token

This is the authorization token to use for Hugging Face Inference API.
This will be passed to the `Authorization` header of the HTTP request.
If no token is provided, the request will be sent without an `Authorization` header as in this example:

```
"Authorization": "Bearer {AUTH_TOKEN}"
```

Public models on Hugging face do not require an authorization token, but if your model is private, you will
need to provide one.

<PlatformSelector reactJs={ConfigAuthTokenReactJs} javascript={ConfigAuthTokenJavaScript}/>

---

> ### Data Transfer Mode

<PlatformSelector reactJs={ConfigDataTransferModeReactJs} javascript={ConfigDataTransferModeJavaScript}/>

---

> ### System Message

The initial system to send to the Hugging Face Inference API.
This will be used during the pre-processing step to construct the payload that will be sent to the API.

<PlatformSelector reactJs={ConfigSystemMessageReactJs} javascript={ConfigSystemMessageJavaScript}/>

---

> ### Input Pre-Processor

The `inputPreProcessor` is a function that takes the user input and some additional options, and returns
the string that will be sent to the Hugging Face Inference API. It is used to transform the user input
to the format expected by the model.

<PlatformSelector reactJs={ConfigInputPreProcessorReactJs} javascript={ConfigInputPreProcessorJavaScript}/>

---

> ### Output Pre-Processor

The `outputPreProcessor` is a function that takes the response from the model and returns a string that
will be displayed to the user.

<PlatformSelector reactJs={ConfigOutputPreProcessorReactJs} javascript={ConfigOutputPreProcessorJavaScript}/>

---

> ### Max New Tokens

The maximum number of new tokens that can be generated by the Hugging Face Inference API.<br />
This is useful if you want to limit the number of tokens that can be generated by the API.

<PlatformSelector reactJs={ConfigMaxNewTokensReactJs} javascript={ConfigMaxNewTokensJavaScript}/>
