如何显示从梦境/稳定扩散模型返回的图像数据？

Question

我正在使用推理API从拥抱脸中查询一个梦境模型，并得到一个巨大的数据响应字符串，它的开头是：����çx00çx10JFIFçx00çx01çx01çx00çx00çx01çx0.

内容类型是: image/jpeg

如何将其解码并在javascript中显示为图像？

Answer 1

不是百分之百肯定，但我认为类似的东西应该可以做到这一点。

for (var e = atob("����çx00çx10JFIFçx00çx01çx01çx00çx00çx01çx0..."), t = new Array(e.length), r = 0; r < e.length; r++) t[r] = e.charCodeAt(r);
var n = new Uint8Array(t),
    a = new Blob([n], {
        type: "image/jpeg"
    }),
    x = (window.URL || window.webkitURL).createObjectURL(a);

let img = document.createElement("img")

img.src = x;

Answer 2

它是通过在axios请求中包含一个responseType参数来工作的。

Node.js代码：

const inputData = {
    inputs: prompt,
    options: {
        wait_for_model: true,
    },
}

const response = await axios({
    url: `https://api-inference.huggingface.co/models/${model}`,
    method: 'POST',
    headers: {
        Authorization: `Bearer ${process.env.HUGGING_FACE_TOKEN}`,
        Accept: 'application/json',
        'Content-Type': 'application/json',
    },
    data: JSON.stringify(inputData),
    responseType: 'arraybuffer',
})

const mimeType = response.headers['content-type']

const result = response.data

const base64data = Buffer.from(result).toString('base64')

const img = `data:${mimeType};base64,` + base64data

return img

反应代码：

<img src={img} />