2f:T57e, * [@huggingface/hub](https://huggingface.co/docs/huggingface.js/hub/README): Interact with huggingface.co to create or delete repos and commit / download files * [@huggingface/inference](https://huggingface.co/docs/huggingface.js/inference/README): Use the Inference API to make calls to Machine Learning models This notebook will focus on the Inference. ### Supported Tasks You can learn about all available tasks [here](https://huggingface.co/tasks) and browser all models on our hub [here](https://huggingface.co/models) ### Natural Language Processing * [Fill mask](#FillMask) * [Summarization](#Summarization) * [Question answering](#QuestionandAnswer) * [Table question answering](#TableQuestionAnswer) * [Text classification](#TextClassification) * [Text generation](#TextGeneration) * [Text2Text generation](#TextGeneration) * [Token classification](#TokenClassification) * [Named entity recognition](#TokenClassification) * [Translation](#Translation) * [Zero-shot classification](#ZeroShotClassification) * [Conversational](#Conversational) * [Feature extraction](#FeatureExtraction) ### Audio * [Automatic speech recognition](#AutomaticSpeechRecognition) * [Audio classification](#AudioClassification) ### Computer Vision * [Image classification](#ImageClassification) * [Object detection](#ObjectDetection) * [Image segmentation](#ImageSegmentation) * [Text to image](#TexttoImage) 30:T557,viewof zeroInput = Inputs.textarea({ label: "Zero Shot Classification", width: "100%", value: "A new model offers an explanation for how the Galilean satellites formed around the solar system’s largest world. Konstantin Batygin did not set out to solve one of the solar system’s most puzzling mysteries when he went for a run up a hill in Nice, France. Dr. Batygin, a Caltech researcher, best known for his contributions to the search for the solar system’s missing “Planet Nine,” spotted a beer bottle. At a steep, 20 degree grade, he wondered why it wasn’t rolling down the hill. He realized there was a breeze at his back holding the bottle in place. Then he had a thought that would only pop into the mind of a theoretical astrophysicist: “Oh! This is how Europa formed.” Europa is one of Jupiter’s four large Galilean moons. And in a paper published Monday in the Astrophysical Journal, Dr. Batygin and a co-author, Alessandro Morbidelli, a planetary scientist at the Côte d’Azur Observatory in France, present a theory explaining how some moons form around gas giants like Jupiter and Saturn, suggesting that millimeter-sized grains of hail produced during the solar system’s formation became trapped around these massive worlds, taking shape one at a time into the potentially habitable moons we know today.", submit: true })31:T619,{ const img = 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; }32:[{"id":"7ab746fb85eebfc0529328d89facdcb1d9ff17c08fff4841e18e0e17a3885d2aaa99f75b176961301eaebf4478ffa03a3aafdd6259a0f85ef2a381c4f832d9b6","href":"https://static.observableusercontent.com/files/7ab746fb85eebfc0529328d89facdcb1d9ff17c08fff4841e18e0e17a3885d2aaa99f75b176961301eaebf4478ffa03a3aafdd6259a0f85ef2a381c4f832d9b6","name":"data@1.csv","type":"text/csv","lastModified":1681719606327.223,"size":1191},{"id":"49d711282ecb2378f618581bacd35749ed5825ca1d2ca6c9ba679a1f9f72dc9d431d4d1952e28042bb15f34ef4058ca7d0b8f17f5524267f18074fd321567783","href":"https://static.observableusercontent.com/files/49d711282ecb2378f618581bacd35749ed5825ca1d2ca6c9ba679a1f9f72dc9d431d4d1952e28042bb15f34ef4058ca7d0b8f17f5524267f18074fd321567783","name":"sample.mp3","type":"audio/mpeg","lastModified":1681719606327.223,"size":96156},{"id":"b24b526166e85a8151e12d0d02afe946ef85baff3873e35f60bac9297db687576d54e30f2fed7493107ea57772b43d171249011b7a33d06be7bae49d5c607187","href":"https://static.observableusercontent.com/files/b24b526166e85a8151e12d0d02afe946ef85baff3873e35f60bac9297db687576d54e30f2fed7493107ea57772b43d171249011b7a33d06be7bae49d5c607187","name":"cheetah.png","type":"image/png","lastModified":1681719606327.223,"size":182825},{"id":"4af18790d50f983fede0ff95632fd8bdcf4b11a787d075470814fdcf25611d0eabdb211bfff19c532cba3e1c71a8dbce16eb778d56796d634c69c9432d0325c8","href":"https://static.observableusercontent.com/files/4af18790d50f983fede0ff95632fd8bdcf4b11a787d075470814fdcf25611d0eabdb211bfff19c532cba3e1c71a8dbce16eb778d56796d634c69c9432d0325c8","name":"cats.png","type":"image/png","lastModified":1681719606327.223,"size":522676}] 2d:{"title":"Hello Huggingface.js Inference","cells":[{"id":0,"value":"# Hello Huggingface.js Inference","pinned":false,"hidden":false,"mode":"md"},{"id":126,"value":"$2f","pinned":false,"hidden":false,"mode":"md"},{"id":132,"value":"----\n\n### Loading\n\nThe library runs on Node.js and browser environments and is available on npm [@huggingface/inference](https://www.npmjs.com/package/@huggingface/inference). To load it in a browser, you can use ES modules via [skypack.dev](https://skypack.dev)","pinned":false,"hidden":false,"mode":"md"},{"id":58,"value":"HFInference = (\n await import(\"https://cdn.skypack.dev/@huggingface/inference@1.8.0\")\n).HfInference","pinned":true,"hidden":false,"mode":"ojs"},{"id":135,"value":"#### ❗Access token❗\nUsing an API key is optional to get started, however you will be rate limited eventually. To get a a new token go to [setting/tokens](https://huggingface.co/settings/tokens). Please note that this access token is intended to be kept private and only used here for experimental purposes.","pinned":false,"hidden":false,"mode":"md"},{"id":108,"value":"viewof HF_ACCESS_TOKEN = {\n const token = localStorage.getItem(\"HF_ACCESS_TOKEN\") || \"\";\n\n const input = Inputs.text({\n label: \"HF Access Token\\n localStorage\",\n width: \"100%\",\n type: \"password\",\n value: token\n });\n input.addEventListener(\"change\", (e) =>\n localStorage.setItem(\"HF_ACCESS_TOKEN\", e.target.value)\n );\n return input;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"hf = new HFInference(HF_ACCESS_TOKEN)","pinned":true,"hidden":false,"mode":"ojs"},{"id":819,"value":"---\n\n# Natural Language","pinned":false,"hidden":false,"mode":"md"},{"id":823,"value":"-----\n### Fill Mask","pinned":false,"hidden":false,"mode":"md"},{"id":842,"value":"viewof fillInput = Inputs.text({\n width: \"100%\",\n\n label: \"Fill mask\",\n value: \"the rain is [MASK]!\",\n submit: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":826,"value":"fillRes = await hf.fillMask({\n model: \"bert-base-uncased\",\n inputs: fillInput\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":835,"value":"Inputs.table(fillRes, { sort: \"score\", reverse: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":868,"value":"-----\n\n### Summarization","pinned":false,"hidden":false,"mode":"md"},{"id":853,"value":"viewof summInput = Inputs.textarea({\n label: \"Summarization\",\n width: \"100%\",\n\n rows: 5,\n value:\n \"The tower is 324 metres (1,063 ft) tall, about the same height as an 81-storey building, and the tallest structure in Paris. Its base is square, measuring 125 metres (410 ft) on each side. During its construction, the Eiffel Tower surpassed the Washington Monument to become the tallest man-made structure in the world, a title it held for 41 years until the Chrysler Building in New York City was finished in 1930.\",\n submit: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":860,"value":"summaRes= await hf.summarization({\n model: \"facebook/bart-large-cnn\",\n inputs: summInput,\n parameters: {\n max_length: 100\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":862,"value":"$${summaRes.summary_text}","pinned":false,"hidden":false,"mode":"md"},{"id":873,"value":"-----\n\n### Question and Answer","pinned":false,"hidden":false,"mode":"md"},{"id":879,"value":"viewof questionInput = Inputs.text({\n label: \"Question\",\n width: \"100%\",\n value: \"What is the capital of France?\",\n submit: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":882,"value":"viewof contextInput = Inputs.text({\n label: \"Context\",\n width: \"100%\",\n value: \"The capital of France is Paris\",\n submit: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":875,"value":"qaRes = await hf.questionAnswer({\n model: \"deepset/roberta-base-squad2\",\n inputs: {\n question: questionInput,\n context: contextInput\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":910,"value":"html`

\n${[...contextInput].map((c, i) => {\n const isColor = i >= qaRes.start && i <= qaRes.end;\n return html`\n${\n c === \" \" ? \" \" : c\n }`;\n})}\n\nscore: ${qaRes.score.toFixed(3)}\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1010,"value":"-----\n\n### Table Question Answer","pinned":false,"hidden":false,"mode":"md"},{"id":1112,"value":"tableData = {\n // \tA table of data represented as a dict of list where entries are headers and the lists are all the values, all lists must have the same size.\n const tableData = await FileAttachment(\"data@1.csv\").csv();\n return Object.fromEntries(\n tableData.columns.map((col) => [col, tableData.map((row) => row[col])])\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1852,"value":"**I don't know where this table comes from, but it's cool**","pinned":false,"hidden":false,"mode":"md"},{"id":1114,"value":"indyTable = Inputs.table(await FileAttachment(\"data@1.csv\").csv())","pinned":false,"hidden":false,"mode":"ojs"},{"id":1072,"value":"viewof tableQuestion = Inputs.text({\n label: \"Table Question\",\n width: \"100%\",\n value:\n \"of these, which points did patrick carpentier and bruno junqueira score?\",\n submit: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1014,"value":"tableQResps = {\n return await hf.tableQuestionAnswer({\n model: \"google/tapas-base-finetuned-wtq\",\n inputs: {\n query: tableQuestion,\n table: tableData\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1142,"value":"racingAnswers = {\n const aggregator = {\n none: \"NONE\",\n lowest: \"LOWEST\",\n greatest: \"GREATEST\",\n first: \"FIRST\",\n last: \"LAST\",\n sum: \"SUM\",\n range: \"RANGE\",\n average: \"AVERAGE\"\n };\n // todo\n let aggregation;\n\n switch (tableQResps.aggregator) {\n case aggregator.none:\n aggregation = \"\";\n case aggregator.sum: {\n aggregation = d3.sum(tableQResps.cells);\n }\n }\n\n return md`\n**Answer**: ${tableQResps.answer} \n**Values**: ${tableQResps.cells.map((v) => v + \" \")} \n${aggregation ? `**Aggregation**: ${aggregation}` : \"\"}\n`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1106,"value":"-----\n### Text Classification","pinned":false,"hidden":false,"mode":"md"},{"id":1536,"value":"viewof textClassIn = Inputs.text({\n label: \"Question\",\n width: \"100%\",\n value: \"I like you. I love you\",\n submit: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1110,"value":"textClassRes = await hf.textClassification({\n model: \"distilbert-base-uncased-finetuned-sst-2-english\",\n inputs: textClassIn\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1181,"value":"Inputs.table(textClassRes, { sort: \"score\", reverse: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1187,"value":"-----\n\n### Text Generation","pinned":false,"hidden":false,"mode":"md"},{"id":1190,"value":"viewof textGenIn = Inputs.text({\n label: \"Text Generation\",\n width: \"100%\",\n value: \"The answer to the universe \",\n submit: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1185,"value":"textGenRes = await hf.textGeneration({\n model: \"gpt2\",\n inputs: textGenIn\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1195,"value":"$${textGenRes.generated_text}","pinned":false,"hidden":false,"mode":"md"},{"id":1198,"value":"-----\n\n### Token Classification","pinned":false,"hidden":false,"mode":"md"},{"id":1205,"value":"viewof tokenClassIn = Inputs.text({\n label: \"Token classification\",\n width: \"100%\",\n value:\n \"My name is Sarah Jessica Parker but you can call me Jessica, I want to work for Google and maybe Apple\",\n submit: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1203,"value":"nerRes = await hf.tokenClassification({\n model: \"dbmdz/bert-large-cased-finetuned-conll03-english\",\n inputs: tokenClassIn\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1573,"value":"{\n let s = tokenClassIn;\n let delta = 0;\n for (const res of nerRes) {\n const newseg = ` ${res.word} ${res.entity_group}`;\n s = s.slice(0, res.start + delta) + newseg + s.slice(res.end + 1 + delta);\n delta += newseg.length - (res.end - res.start) - 1;\n }\n return html`\n\n

${s}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1211,"value":"-----\n\n### Translation","pinned":false,"hidden":false,"mode":"md"},{"id":1216,"value":"viewof transInput = Inputs.text({\n label: \"Translation\",\n width: \"100%\",\n value: \"My name is Wolfgang and I live in Berlin\",\n submit: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1219,"value":"transRes = await hf.translation({\n model: \"t5-base\",\n inputs: transInput\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1224,"value":"$${transRes.translation_text}","pinned":false,"hidden":false,"mode":"md"},{"id":1228,"value":"-----\n\n### Zero Shot Classification\n","pinned":false,"hidden":false,"mode":"md"},{"id":1237,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1265,"value":"viewof zeroClasses = Inputs.text({\n label: \"Possible class names (comma-separated)\",\n width: \"100%\",\n value:\n \"space & cosmos, scientific discovery, microbiology, robots, archeology\",\n submit: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1232,"value":"zeroShotRes = await hf.zeroShotClassification({\n model: \"facebook/bart-large-mnli\",\n inputs: zeroInput,\n parameters: { candidate_labels: zeroClasses.split(\",\") }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1290,"value":"Inputs.table(\n zeroShotRes[0].labels.map(\n (label, i) => ({\n label: label,\n score: zeroShotRes[0].scores[i]\n }),\n { sort: \"score\", reverse: true }\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1307,"value":"-----\n\n### Conversational\n","pinned":false,"hidden":false,"mode":"md"},{"id":1311,"value":"viewof chatMessage = Inputs.text({\n label: \"Chat\",\n width: \"100%\",\n value: \"Why?\",\n submit: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1693,"value":"viewof clearChat = Inputs.button(\"Clear Chat\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1352,"value":"html`\n\n

\n${chatParsed?.map((row) => {\n return html`\n

\n ${row.content}\n

\n`;\n})}\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1234,"value":"viewof chatRequest = {\n const v = html`

`;\n let history = [\"What's the best action movie?\"];\n let generated = [\"The Matrix\"];\n v.value = [];\n async function newChat(message) {\n if (!message) return {};\n const res = await hf.conversational({\n model: \"microsoft/DialoGPT-large\",\n inputs: {\n past_user_inputs: history,\n generated_responses: generated,\n text: message\n }\n });\n history = res.conversation.past_user_inputs;\n generated = res.conversation.generated_responses;\n v.value = res;\n v.dispatchEvent(new CustomEvent(\"input\"));\n }\n function clearChat(n) {\n history = [];\n generated = [];\n v.value = [];\n v.dispatchEvent(new CustomEvent(\"input\"));\n }\n return Object.assign(v, { newChat, clearChat });\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":1764,"value":"chatResponse = chatRequest","pinned":true,"hidden":false,"mode":"ojs"},{"id":1675,"value":"viewof chatRequest.newChat(chatMessage)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1719,"value":"{\n if (clearChat > 0) {\n viewof chatRequest.clearChat();\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1395,"value":"chatParsed = chatResponse.conversation?.past_user_inputs\n .map((u, i) => {\n const sys = chatResponse.conversation.generated_responses[i];\n return [\n { from: \"user\", content: u },\n { from: \"sys\", content: sys }\n ];\n })\n .flat()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1449,"value":"-----\n\n### Feature Extraction","pinned":false,"hidden":false,"mode":"md"},{"id":1544,"value":"viewof sourceSent = Inputs.text({\n label: \"Source sentence\",\n value: \"That is a happy person\",\n width: \"100%\",\n submit: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1552,"value":"viewof testSents = Inputs.text({\n label: \"Test sentences\",\n value:\n \"That is a happy dog | That is a very happy person | Today is a sunny day\",\n width: \"100%\",\n submit: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":821,"value":"featureRes = await hf.featureExtraction({\n model: \"sentence-transformers/paraphrase-xlm-r-multilingual-v1\",\n inputs: {\n source_sentence: sourceSent,\n sentences: testSents.split(\"|\")\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1562,"value":"Inputs.table(\n testSents.split(\"|\").map((sent, i) => ({ Test: sent, score: featureRes[i] })),\n { sort: \"score\", reverse: true }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"---\n## Audio","pinned":false,"hidden":false,"mode":"md"},{"id":748,"value":"-----\n\n### Automatic SpeechRecognition","pinned":false,"hidden":false,"mode":"md"},{"id":753,"value":"html`