Frog-FM框架下Farcaster Frame无法渲染HuggingFace生成图片问题

核心问题原因 #

1. 异步响应处理失效
   createImage是异步函数，但在status === 'response'分支中，使用.then()异步处理结果时，app.frame的回调已经同步返回了初始响应。Frog框架不会处理后续异步触发的c.res，导致生成的图片无法更新到Frame中。

2. 图片数据格式错误
   直接将Uint8Array类型的二进制数据拼接到data:image/jpeg;base64,前缀后，不符合base64格式要求——base64需要的是字符串形式的编码结果，而非原始二进制数组。

3. 状态更新逻辑无效
   imageData作为局部变量，异步赋值后无法触发renderContent的重新执行，初始返回的c.res已经固定了Frame内容，不会随变量变化更新。

修复后的完整代码 #

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

const app = new Frog({
  assetsPath: '/',
  basePath: '/api',
})

// 改为异步handler
app.frame('/', async (c) => {
  const { buttonValue, inputText, status } = c
  const imgdescription = inputText

  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']
    const base64data = Buffer.from(response.data).toString('base64')
    // 返回完整的data URL
    return `data:${type};base64,${base64data}`
  }

  // 定义渲染函数，接受图片URL参数
  const renderContent = (imageUrl?: string) => {
    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>  
          { imageUrl ? (
            <img src={imageUrl} alt="Generated Image" />
          ) : (
            'Welcome!'
          )}
        </div>
      </div>
    );
  };

  if (status === 'response') {
    // 等待图片生成完成，再返回响应
    const imageUrl = await createImage()
    return c.res({
      image: renderContent(imageUrl),
      intents: [
        <TextInput placeholder="Enter custom fruit..." />,
        <Button value="abc" >Generate Image</Button>,
        <Button.Reset>Reset</Button.Reset>,
      ],
    })
  }

  // 初始状态返回
  return c.res({
    image: renderContent(),
    intents: [
      <TextInput placeholder="Enter custom fruit..." />,
      <Button value="abc" >Generate Image</Button>,
    ],
  })
})

devtools(app, { serveStatic })

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

关键改动说明 #

1. 改为异步Frame Handler：将app.frame的回调函数标记为async，直接使用await等待图片生成，保证响应在图片准备好后再返回。
2. 返回正确的Data URL：修改createImage函数，直接返回完整的base64格式图片URL，避免后续格式转换错误。
3. 渲染函数参数化：让renderContent接受图片URL作为参数，根据传入的值渲染对应内容，不再依赖局部变量的状态变化。
4. 同步返回响应：在status === 'response'分支中，等待图片生成后直接返回包含图片的响应，确保Frame能拿到最新的内容。

内容的提问来源于stack exchange，提问作者Shubham