Nozomu Posts - Answer Overflow

Nozomu

•Created by Nozomu on 4/16/2024 in #workers-help

Way to respond with multiple images from text to image models

I am want to respond with two or more images in a single response I tried to use encodebase64 from hono but that just returns an empty string here is my route.

avatarRouter.get("/", async(c) => {
    const body = await c.req.json()
    const ai = new Ai(c.env.AI)
    const prompt = body.prompt

    const anime = `anime style ${prompt}`
    const realistic = `photo realistic style ${prompt}`


    try {
        const animeImg = await ai.run("@cf/bytedance/stable-diffusion-xl-lightning", { prompt: anime})
        const realisticImg = await ai.run("@cf/bytedance/stable-diffusion-xl-lightning", { prompt: realistic})

        console.log({
            data: encodeBase64(animeImg)
            // returns an empty string
        })
        //this works for a single image:
        // return c.body(animeImg)

        //this just returns empty strings
        return c.json({
          anime: encodeBase64(animeImg)
          realistic: encodeBase64(realisticImg)
      } catch (e) {
        c.status(400)
        return c.json({
          message: "error while fetching image"
        })
      }
})

avatarRouter.get("/", async(c) => {
    const body = await c.req.json()
    const ai = new Ai(c.env.AI)
    const prompt = body.prompt

    const anime = `anime style ${prompt}`
    const realistic = `photo realistic style ${prompt}`


    try {
        const animeImg = await ai.run("@cf/bytedance/stable-diffusion-xl-lightning", { prompt: anime})
        const realisticImg = await ai.run("@cf/bytedance/stable-diffusion-xl-lightning", { prompt: realistic})

        console.log({
            data: encodeBase64(animeImg)
            // returns an empty string
        })
        //this works for a single image:
        // return c.body(animeImg)

        //this just returns empty strings
        return c.json({
          anime: encodeBase64(animeImg)
          realistic: encodeBase64(realisticImg)
      } catch (e) {
        c.status(400)
        return c.json({
          message: "error while fetching image"
        })
      }
})

I just want to be able to respond with 2 or multiple images (without like adding up the images in a canvas and responding with that image) so I am open to different approaches

8 replies

Gaming

Programming