The AI community building the future.
HFInference = (
await import("https://cdn.jsdelivr.net/npm/@huggingface/inference@2.6.4/+esm")
).HfInference
hf = new HFInference(HF_ACCESS_TOKEN)
fillRes = await hf.fillMask({
model: "bert-base-uncased",
inputs: fillInput
})
summaRes= await hf.summarization({
model: "facebook/bart-large-cnn",
inputs: summInput,
parameters: {
max_length: 100
}
})
qaRes = await hf.questionAnswering({
model: "deepset/roberta-base-squad2",
inputs: {
question: questionInput,
context: contextInput
}
})
tableQResps = {
return await hf.tableQuestionAnswering({
model: "google/tapas-base-finetuned-wtq",
inputs: {
query: tableQuestion,
table: tableData
}
});
}
textClassRes = await hf.textClassification({
model: "distilbert-base-uncased-finetuned-sst-2-english",
inputs: textClassIn
})
textGenRes = await hf.textGeneration({
model: "gpt2",
inputs: textGenIn
})
textStreamRes = {
// invalidation.then(() => controller.abort());
await visibility();
let tokens = [];
for await (const output of hf.textGenerationStream({
model: "google/flan-t5-xxl",
inputs: textGenStreamIn,
parameters: { max_new_tokens: 500 }
})) {
tokens.push(output);
yield tokens;
}
}
nerRes = await hf.tokenClassification({
model: "dbmdz/bert-large-cased-finetuned-conll03-english",
inputs: tokenClassIn
})
transRes = await hf.translation({
model: "t5-base",
inputs: transInput
})
zeroShotRes = await hf.zeroShotClassification({
model: "facebook/bart-large-mnli",
inputs: zeroInput,
parameters: { candidate_labels: zeroClasses.split(",") }
})
viewof chatRequest = {
const v = html`<div></div>`;
let history = ["What's the best action movie?"];
let generated = ["The Matrix"];
v.value = [];
async function newChat(message) {
if (!message) return {};
const res = await hf.conversational({
model: "microsoft/DialoGPT-large",
inputs: {
past_user_inputs: history,
generated_responses: generated,
text: message
}
});
history = res.conversation.past_user_inputs;
generated = res.conversation.generated_responses;
v.value = res;
v.dispatchEvent(new CustomEvent("input"));
}
function clearChat(n) {
history = [];
generated = [];
v.value = [];
v.dispatchEvent(new CustomEvent("input"));
}
return Object.assign(v, { newChat, clearChat });
}
chatResponse = chatRequest
sentenceSimilarityRes = await hf.sentenceSimilarity({
model: "sentence-transformers/paraphrase-xlm-r-multilingual-v1",
inputs: {
source_sentence: sourceSent,
sentences: testSents.split("|")
}
})
featureExtractionRes = await hf.featureExtraction({
model: "sentence-transformers/distilbert-base-nli-mean-tokens",
inputs: sourceFeatureExt
})
// Audio
ASRRes = await hf.automaticSpeechRecognition({
model: "facebook/wav2vec2-large-960h-lv60-self",
data: audioFile
? await audioFile.blob()
: await FileAttachment("sample.mp3").blob()
})
audioClassRes = await hf.audioClassification({
model: "superb/hubert-large-superb-er",
data: audioFile
? await audioFile.blob()
: await FileAttachment("sample.mp3").blob()
})
imageClassRes = await hf.imageClassification({
data: imageClassFile
? await imageClassFile.blob()
: await FileAttachment("cheetah.png").blob(),
model: "google/vit-base-patch16-224"
})
objectDetectionRes = await hf.objectDetection({
data: objectDetFile
? await objectDetFile.blob()
: await FileAttachment("cats.png").blob(),
model: "facebook/detr-resnet-50"
})
{
const img = objectDetFile
? await objectDetFile.image()
: await FileAttachment("cats.png").image();
img.style.width = "100%";
const imgW = img.width;
const imgH = img.height;
return html`<div style="position:relative;">
${img}
${objectDetectionRes.map((obj) => {
const w = (100 * (obj.box.xmax - obj.box.xmin)) / imgW;
const h = (100 * (obj.box.ymax - obj.box.ymin)) / imgH;
const box = html`<div style="position:absolute;border:solid 2px red;"><span style="font-size:small;color:#523838;font-weight:bold; padding: 0 1rem;background-color:lightgray;">${obj.label}</span></div>`;
box.style.top = (100 * obj.box.ymin) / imgH + "%";
box.style.left = (100 * obj.box.xmin) / imgW + "%";
box.style.width = w + "%";
box.style.height = h + "%";
return box;
})}
</div>`;
}
imageSegRes = await hf.imageSegmentation({
data: imageSegFile
? await imageSegFile.blob()
: await FileAttachment("cats.png").blob(),
model: "facebook/detr-resnet-50-panoptic"
})
{
const img = imageSegFile
? await imageSegFile.image()
: await FileAttachment("cats.png").image();
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
canvas.width = img.width;
canvas.height = img.height;
const masks = await Promise.all(
imageSegRes.map(
(obj, index) =>
new Promise((resolve, _) => {
const image = new Image();
image.src = "data:image/png;base64," + obj.mask;
// make mask transparent
image.onload = () => {
const maskcolor = d3.rgb(d3.schemePaired[index]);
const imgcanvas = document.createElement("canvas");
const imgcanvasctx = imgcanvas.getContext("2d");
imgcanvas.width = image.width;
imgcanvas.height = image.height;
imgcanvasctx.drawImage(image, 0, 0);
const imageData = imgcanvasctx.getImageData(
0,
0,
imgcanvas.width,
imgcanvas.height
);
const data = imageData.data;
for (let i = 0; i < data.length; i += 4) {
const white = data[i] === 255;
data[i] = maskcolor.r;
data[i + 1] = maskcolor.g;
data[i + 2] = maskcolor.b;
data[i + 3] = white ? 255 : 0;
}
imgcanvasctx.putImageData(imageData, 0, 0);
resolve(imgcanvas);
};
})
)
);
ctx.drawImage(img, 0, 0);
ctx.globalAlpha = 0.5;
masks.forEach((mask) => {
ctx.drawImage(mask, 0, 0);
});
return canvas;
}
await hf
.textToImage({
inputs: prompt1,
parameters: {
negative_prompt: negprompt1
},
model: "stabilityai/stable-diffusion-2"
})
.then((blob) => {
const image = new Image();
image.src = URL.createObjectURL(blob);
return image;
})
await hf
.textToImage({
inputs: prompt2,
parameters: {
negative_prompt: negprompt2,
width: 2304,
height: 768
},
model: "stabilityai/stable-diffusion-2"
})
.then((blob) => {
const image = new Image();
image.src = URL.createObjectURL(blob);
return image;
})
img2textRes = await hf.imageToText({
data: img2textFile
? await img2textFile.blob()
: await FileAttachment("a.jpg").blob(),
model: "nlpconnect/vit-gpt2-image-captioning"
})
FileAttachment("stormtrooper_depth.png").image({ width: 200 })
await hf
.imageToImage({
inputs: await FileAttachment("stormtrooper_depth.png").blob(),
model: "lllyasviel/control_v11f1p_sd15_depth",
parameters: {
prompt:
"Elmo's Lecture in a tropical beach in the background, and it's rainining"
}
})
.then(async (blob) => {
const image = new Image();
image.src = URL.createObjectURL(blob);
return html`${await FileAttachment(
"stormtrooper_depth.png"
).image()}${image}`;
})
FileAttachment("bird_canny.png").image({ width: 200 })
await hf
.imageToImage({
inputs: await FileAttachment("bird_canny.png").blob(),
model: "lllyasviel/sd-controlnet-canny",
parameters: {
prompt: "Beautiful Blue Jay"
}
})
.then(async (blob) => {
const image = new Image();
image.width = 300;
image.src = URL.createObjectURL(blob);
return html`${await FileAttachment("bird_canny.png").image({
width: 300
})}${image}`;
})
img2imgFile
? await img2imgFile.image({ width: 200 })
: await FileAttachment("base.jpg").image({ width: 200 })
await hf
.imageToImage({
inputs: await FileAttachment("base.jpg").blob(),
model: "radames/stable-diffusion-v1-5-img2img",
parameters: {
prompt: "Beautiful Fantasy Paradise Landscape",
strength: 0.8
}
})
.then(async (blob) => {
const image = new Image();
image.src = URL.createObjectURL(blob);
return html`${await FileAttachment("base.jpg").image()}${image}`;
})
FileAttachment("a@1.jpg").image({ width: 200 })
await hf
.imageToImage({
inputs: await FileAttachment("a@1.jpg").blob(),
model: "radames/instruct-pix2pix-img2img",
parameters: {
prompt: "Make the coat of leather"
}
})
.then(async (blob) => {
const image = new Image();
image.width = 300;
image.src = URL.createObjectURL(blob);
return html`${await FileAttachment("a@1.jpg").image({
width: 300
})}${image}`;
})
visualQRes = await hf.visualQuestionAnswering({
model: "dandelin/vilt-b32-finetuned-vqa",
inputs: {
question: visualQuestion,
image: visualFile
? await visualFile.blob()
: await FileAttachment("kids.jpeg").blob()
}
})
docQRes = await hf.documentQuestionAnswering({
model: "impira/layoutlm-document-qa",
inputs: {
question: documentQuestion,
image: docFile
? await docFile.blob()
: await FileAttachment("invoice.png").blob()
}
})
Inputs.table([docQRes], { sort: "score", reverse: true, maxWidth: "20rem" })
regresionRes = await hf.tabularRegression({
//Fish Height Model https://huggingface.co/scikit-learn/Fish-Weight
model: "scikit-learn/Fish-Weight",
inputs: {
data: regressionData
}
})
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.