Harnessing the Power of Agents.js: Your Ultimate Guide
Agents.js is an exciting new library developed by Hugging Face, designed to bring robust tool access to Large Language Models (LLMs) via JavaScript. Whether you’re working in a browser or server environment, this library provides an intuitive way to harness the power of LLMs, complete with multi-modal tools. In this article, we’ll break down how you can get started with Agents.js, explore its key features, as well as usage guidelines.
What is Agents.js?
Agents.js is crafted to be user-friendly, allowing developers to incorporate advanced functionalities of LLMs with minimal hurdles. It comes bundled with several multi-modal tools right out of the box, making it a powerful asset for both novice and seasoned developers. You can also easily extend its capabilities by adding your own tools and LLMs.
Installation: Getting Started
Getting up and running with Agents.js is incredibly simple. You can grab the library directly from npm using this command:
bash
npm install @huggingface/agents
This installation gives you immediate access to the powerful features that Agents.js offers.
More Read
Usage: Entry Point with HfAgent
The library introduces the HfAgent object, which serves as the gateway to its functionalities. Here’s how you can instantiate the agent:
typescript
import { HfAgent } from "@huggingface/agents";
const HF_ACCESSTOKEN = "hf…";
const agent = new HfAgent(HF_ACCESS_TOKEN);
Once initialized, using the agent is straightforward. For instance, if you want to generate code based on a command, you simply provide a plain-text input:
typescript
const code = await agent.generateCode("Draw a picture of a rubber duck with a top hat, then caption this picture.");
The outcome can be an expressive block of code that handles the task you assigned.
Understanding the Generated Code
The generated code is not only functional but offers a structured way to manipulate data. Here’s an example of what the output could look like:
javascript
async function generate() {
const output = await textToImage("rubber duck with a top hat");
message("We generate the duck picture", output);
const caption = await imageToText(output);
message("Now we caption the image", caption);
return output;
}
This illustrates how easily you can generate queries handling images along with their associated texts.
Evaluating Your Code
To evaluate the generated code, you can utilize:
typescript
const messages = await agent.evaluateCode(code);
The returned messages from the evaluation will be structured objects, enabling you to glean pertinent information from the operation’s success or failure.
Important Usage Warnings
While utilizing this library, it’s essential to understand that executing arbitrary code in a potentially untrusted environment could expose security risks. For safety, it’s advisable to utilize the generateCode and evaluateCode methods instead of the run method, which executes input directly.
Customizing LLMs
By default, the HfAgent utilizes the OpenAssistant model hosted via the Inference API. However, you can easily swap this out for a custom LLM. For example, you can integrate an OpenAI API key like this:
typescript
import { Configuration, OpenAIApi } from "openai";
const HF_ACCESSTOKEN = "hf…";
const api = new OpenAIApi(new Configuration({ apiKey: "sk-…" }));
const llmOpenAI = async (prompt: string): Promise
return (
(await api.createCompletion({
model: "text-davinci-003",
prompt: prompt,
max_tokens: 1000,
})).data.choices[0].text ?? ""
);
};
const agent = new HfAgent(HF_ACCESS_TOKEN, llmOpenAI);
This flexibility allows a more tailored approach based on your specific requirements.
Creating Custom Tools
With Agents.js, you can also create custom tools that fit your specific application. For example, if you want a tool to translate English text into German, you could implement it like this:
typescript
import type { Tool } from "@huggingface/agents/src/types";
const englishToGermanTool: Tool = {
name: "englishToGerman",
description: "Translates input string in English to German.",
call: async (input, inference) => {
const result = await inference.translation({
model: "t5-base",
inputs: input,
});
return result.translation_text;
},
};
This tool can then be integrated when initializing your HfAgent, allowing for a seamless user experience.
Including Input Files
Agents.js is versatile enough to handle input files. By passing a FileList to the agent’s methods, you can extend its capabilities even further. Here’s how you can go about it:
typescript
const files = document.getElementById("fileItem").files;
const code = agent.generateCode("Caption the image and then read the text out loud.", files);
This versatility allows you to engage with various input types, making data handling more interactive.
Demo Availability
For developers eager to experiment, Hugging Face has created a demo for Agents.js. This demonstration is powered by an Open Assistant 30B model and showcases how tools can be effectively called from the hub. Check it out and explore the array of capabilities it unlocks.
By utilizing Agents.js, developers are given a powerful toolkit for integrating LLM functionalities, providing opportunities for creativity and innovation in their web applications.
Inspired by: Source
