Unable to render image on frame

[orangesantra]

This code isn't throwing any error, also able to fetch AI generated image from huggingface API and consol.log fetched data, but the issue is image not rendering on the frame, What could be the reason?

Any help appreciated thanks!

/** @jsxImportSource frog/jsx */
import { Button, Frog, TextInput } from 'frog'
import { devtools } from 'frog/dev'
// import { neynar } from 'frog/hubs'
import { handle } from 'frog/next'
import { serveStatic } from 'frog/serve-static'
import axios from 'axios'

const app = new Frog({
  assetsPath: '/',
  basePath: '/api',
  // Supply a Hub to enable frame verification.
  // hub: neynar({ apiKey: 'NEYNAR_FROG_FM' })
})

// Uncomment to use Edge Runtime
// export const runtime = 'edge'

app.frame('/', async(c) => {
  const { inputText, status } = c
  const imgdescription = inputText

  let imageData: Uint8Array | null = null;
  let shouldRenderImage = false;
  
  const createImage = async () => {

    const URL = `https://api-inference.huggingface.co/models/stabilityai/stable-diffusion-2`
  
    const response = await axios({
      url: URL,
      method: 'POST',
      headers: {
        Authorization: `Bearer ${process.env.REACT_APP_HUGGING_FACE_API_KEY}`,
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      data: JSON.stringify({
        inputs: imgdescription, options: { wait_for_model: true },
      }),
      responseType: 'arraybuffer',
    })
  
    const type = response.headers['content-type'] // server is giveing the image type as jpeg.
    const data = response.data
  
    const base64data = Buffer.from(data).toString('base64')
    const img = `data:${type};base64,` + base64data // <-- This is so we can render it on the page
    console.log("aaaaaaaaaaaaaaaaa", img);
    console.log("bbbbbbbbbbbbbbbbb", data);
    return data
  }

  if (status === 'response') {
    createImage().then(data => {
      imageData = data;
      shouldRenderImage = true;
      c.res({
        image: renderContent()
      });
    });
  }

  const renderContent = () => {
    return (
      <div
        style={{
          alignItems: 'center',
          background:
            status === 'response'
              ? 'linear-gradient(to right, #432889, #17101F)'
              : 'black',
          backgroundSize: '100% 100%',
          display: 'flex',
          flexDirection: 'column',
          flexWrap: 'nowrap',
          height: '100%',
          justifyContent: 'center',
          textAlign: 'center',
          width: '100%',
        }}
      >
        <div>  
          {shouldRenderImage && imageData ? (
            <img src={`data:image/jpeg;base64,${imageData}`} alt="Generated Image" />
          ) : (
            'Welcome!'
          )}
        </div>
      </div>
    );
  };

  return c.res({
    image: renderContent(),
    intents: [
      <TextInput placeholder="Enter custom fruit..." />,
      <Button value="abc" >Generate Image</Button>,
      status === 'response' && <Button.Reset>Reset</Button.Reset>,
    ],
  })
})

devtools(app, { serveStatic })

export const GET = handle(app)
export const POST = handle(app)

[dalechyn]

Hi. Please reopen the discussion if you're still having issues.