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
}
})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
