scrimba
Note at 1:38
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Note at 1:38
AboutCommentsNotes
Note at 1:38
Expand for more info
index.js
run
preview
console
import { HfInference } from '@huggingface/inference'
const hf = new HfInference(process.env.HUGGING_FACE_API_KEY)
import { blobToBase64 } from '/utils'

const dialogModal = document.getElementById('dialog-modal')
dialogModal.show()

document.addEventListener('submit', function(e) {
e.preventDefault()
const imageDescription = document.getElementById('user-input').value
dialogModal.close()
generateImage(imageDescription)
})

async function generateImage(imageToGenerate) {
const response = await hf.textToImage({
inputs: imageToGenerate,
model: "stabilityai/stable-diffusion-2",
})
const imageUrl = await blobToBase64(response)
if(response) generateAltText(response, imageUrl)
}

async function generateAltText(blob, imageUrl) {
const altText = await hf.imageToText({
data: blob,
model: "nlpconnect/vit-gpt2-image-captioning",
})
renderImage(imageUrl, altText.generated_text)
}

function renderImage(imageUrl, altText) {
console.log(altText)
const imageContainer = document.getElementById('image-container')
imageContainer.innerHTML = ''
const image = document.createElement('img')
image.src = imageUrl
image.alt = altText
imageContainer.appendChild(image)
}
Console
"a table with a bunch of different pictures on it "
,
/index.html
LIVE