⏩ HandiJS
HandiJS is a simple Gradio for NodeJS.
For quickly building form-based applications - like Machine Learning applications.
Built with Fastify, Tailwind, DaisyUI.
Installation
npm i handijs
Usage
Quick example
A web form asking the user for Name and Surname and returning a greeting.
import { title, textInput, launchApp, buildApp } from "../index.js" const app = buildApp({ ui: [ title("My example app"), textInput({ name: "Name", defaultValue: "" }), textInput({ name: "Surname", defaultValue: "" }), ], onSubmit: async ({ Name, Surname }) => { return `Hi ${Name} ${Surname}` }, }) launchApp(app) // start the app on http://localhost:3000
More complex example
An image generator using OpenAI's DALL-E.
import OpenAI from "openai" import { title, textInput, select, textarea, checkbox, range, launchApp, buildApp, } from "../index.js" const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY }) const ui = [ title("My example app"), textInput({ name: "Name", defaultValue: "A peaceful beach at sunset" }), select({ name: "Style", options: ["Realistic", "Cartoon", "Abstract", "Vintage", "Futuristic"], }), textarea({ name: "AdditionalDetails", defaultValue: "Add a small cat" }), checkbox({ name: "IncludeCharacters" }), range({ name: "Brightness", min: 1, max: 10, defaultValue: 5 }), ] const onSubmit = async ({ ImageDescription, Style, AdditionalDetails, IncludeCharacters, Brightness, }) => { const prompt = ` ImageDescription: ${ImageDescription} Style: ${Style} Brightness: ${Brightness} IncludeCharacters: ${IncludeCharacters} AdditionalDetails: ${AdditionalDetails} ` const response = await openai.images.generate({ model: "dall-e-3", prompt, n: 1, size: "1024x1024", }) return response.data[0].url } const app = buildApp({ ui, onSubmit, outputType: "image" }) launchApp(app)
Result will be:
