GithubHelp home page GithubHelp logo

Comments (18)

gitkonio avatar gitkonio commented on August 20, 2024 1

@ggomaeng tried imageOptions, but still does not render image in warpcast.

export const app = new Frog({
  imageOptions: {
    format: 'png',
  }
});

or you meant some other imageOptions property? Also above imageOptions requires to set font, at least it gives a ts error for that.

from frog.

jxom avatar jxom commented on August 20, 2024 1

Fixed a670972

from frog.

jxom avatar jxom commented on August 20, 2024

Try setting the origin property to your proxy URL on the Frog instance.

from frog.

gitkonio avatar gitkonio commented on August 20, 2024

@jxom that does not help, og:image url stays http, and I provided https here

export const app = new Frog({
  origin: 'https://...'
});

from frog.

gitkonio avatar gitkonio commented on August 20, 2024

@jxom I just tried creating brand new/empty project with bun and node as presets, and even for these projects when I access frame via proxy (https, ngrok) images do not render on the farcaster. however they render in the frame validator tool.

could you please reopen this issue, as it seems to be quite a serious bug?

from frog.

ggomaeng avatar ggomaeng commented on August 20, 2024

Same issue happening to me - it works in the validator, but not in the post.

It seems like satori image output is svg, which is not supported in warpcast posts.

Here is the Warpcast Proxy link

Which is this image

--

I'm using latest version of frog and Bun

from frog.

ggomaeng avatar ggomaeng commented on August 20, 2024

Seems like this could be related? hono-og seems to use svg as default encoding settings if format is not provided.

https://github.com/wevm/hono-og/blob/5cc0ddb25e4f8423276549cde6a4267607e7146c/src/response.ts#L25

from frog.

ggomaeng avatar ggomaeng commented on August 20, 2024

Can confirm prioritizing png format works.

Before:

class ImageResponseBase extends Response {
  constructor(element: HonoElement, options: ImageResponseOptions = {}) {
    const { format, headers = {}, status = 200, statusText } = options;

    const body = new ReadableStream({
      async start(controller) {
        await initializeWasm();
        const svg = await elementToSvg(element, options);
        const data =
          format === "png"
            ? await svgToPng(svg, options)
            : new TextEncoder().encode(svg);

        controller.enqueue(data);
        controller.close();
      },
    });

    super(body, {
      headers: {
        "Content-Type": format === "png" ? "image/png" : "image/svg+xml",
        "Cache-Control": options.debug
          ? "no-cache, no-store"
          : "public, immutable, no-transform, max-age=31536000",
        ...headers,
      },
      status,
      statusText,
    });
  }
}

After:

class ImageResponseBase extends Response {
  constructor(element: HonoElement, options: ImageResponseOptions = {}) {
    const { format, headers = {}, status = 200, statusText } = options;

    const body = new ReadableStream({
      async start(controller) {
        await initializeWasm();
        const svg = await elementToSvg(element, options);
        const data =
          format === "svg"
            ? new TextEncoder().encode(svg)
            : await svgToPng(svg, options)

        controller.enqueue(data);
        controller.close();
      },
    });

    super(body, {
      headers: {
        "Content-Type": format === "svg" ? "image/svg+xml":"image/png" ,
        "Cache-Control": options.debug
          ? "no-cache, no-store"
          : "public, immutable, no-transform, max-age=31536000",
        ...headers,
      },
      status,
      statusText,
    });
  }
}

from frog.

ggomaeng avatar ggomaeng commented on August 20, 2024

@gitkonio You could pass "png" format in the imageOptions, but I think "png" format should be the default behavior - it was pretty tough to find this bug since it does not print out any error messages

Edit: On the second thought, I'm not sure if this is the main reason why. svg format seems to only problematic for .transaction routes. Would this be considered a different issue? @jxom

wevm/hono-og#33

from frog.

ggomaeng avatar ggomaeng commented on August 20, 2024

@ggomaeng tried imageOptions, but still does not render image in warpcast.

export const app = new Frog({
  imageOptions: {
    format: 'png',
  }
});

or you meant some other imageOptions property? Also above imageOptions requires to set font, at least it gives a ts error for that.

Where is your frame being hosted? Are you using proxy like ngrok or cloudflared?

Could you please share the frame link you tested?

from frog.

gitkonio avatar gitkonio commented on August 20, 2024

tested it locally with ngrok proxy in front of the frog server. used https ngrok url

from frog.

0x330a avatar 0x330a commented on August 20, 2024

seem to be having this issue as well

from frog.

gitkonio avatar gitkonio commented on August 20, 2024

@jxom still having issues, however now slightly different error. image still does not load in warpcast, loads in frame validator tool.

links to the frame: https://frames.kriptonio.com/frames/simple-gasless-nft-mint

please reopen the issue

from frog.

ggomaeng avatar ggomaeng commented on August 20, 2024

Could be related. Next.js + frog running with nginx

image

from frog.

ggomaeng avatar ggomaeng commented on August 20, 2024

This also happens in getFrameMetadata

export async function generateMetadata(): Promise<Metadata> {
  const frameMetadata = await getFrameMetadata(`${rootUrl}/api/frog`);
  return {
    ...sharedMetadata,
    other: frameMetadata,
  };
}

generated metadata:

<meta name="fc:frame" content="vNext"/><meta name="fc:frame:image:aspect_ratio" content="1:1"/><meta name="fc:frame:image" content="http://derivative.art:3000/api/frog/image?image=N4IgLghg5iBcIBMCWA3EAaEAHATgeywGc5QwB3OEAMwBsBTADwAIALAWioFcaamyPuvWozYBjPLyRg6AW0Ji6AO2k4mAK06EwSKgE8FyuqukMwbAMwNeJs2RZS6IAL6ZR9mghxK4AbVLRKJBkYTFwCYlhQQhxRShYwMCJYAHpkhCNUCG0UOgA6CBwwZJo8KDxcrEUQkDIkBDAWOAA2ABZMFjokKHjmlpcQNyQPL0VfAF1MJEIAUUJRCCw6BDgwHE46F38YeGQ0UPwiEnAKeBkzAFZnV3dPb1gfEAARDJQs1DyCsBAJkCnZ%252BcWy1gq3WTh%252BfzmCyWKzWGyAA"/><meta name="og:image" content="http://derivative.art:3000/api/frog/image?image=N4IgLghg5iBcIBMCWA3EAaEAHATgeywGc5QwB3OEAMwBsBTADwAIALAWioFcaamyPuvWozYBjPLyRg6AW0Ji6AO2k4mAK06EwSKgE8FyuqukMwbAMwNeJs2RZS6IAL6ZR9mghxK4AbVLRKJBkYTFwCYlhQQhxRShYwMCJYAHpkhCNUCG0UOgA6CBwwZJo8KDxcrEUQkDIkBDAWOAA2ABZMFjokKHjmlpcQNyQPL0VfAF1MJEIAUUJRCCw6BDgwHE46F38YeGQ0UPwiEnAKeBkzAFZnV3dPb1gfEAARDJQs1DyCsBAJkCnZ%252BcWy1gq3WTh%252BfzmCyWKzWGyAA"/><meta name="og:title" content="Frog Frame"/><meta name="fc:frame:post_url" content="http://derivative.art:3000/api/frog?initialPath=%252Fapi%252Ffrog&amp;amp;previousButtonValues=%2523A_"/><meta name="fc:frame:input:text" content="Enter image url"/><meta name="fc:frame:button:1" content="Create derivative NFTs"/><meta name="fc:frame:button:1:action" content="post"/><meta name="fc:frame:button:1:target" content="https://derivative.art/api/frog/colors?initialPath=%252Fapi%252Ffrog&amp;amp;previousButtonValues=%2523A_"/><meta name="frog:version" content="0.7.16"/>

from frog.

gitkonio avatar gitkonio commented on August 20, 2024

@jxom please reopen, issue is still present

from frog.

gitkonio avatar gitkonio commented on August 20, 2024

works now after frog upgrade to 0.8.0

from frog.

christopherwxyz avatar christopherwxyz commented on August 20, 2024

i think i'm experiencing this same issue: #157 (comment)

Failure from GCP: https://commerce.unofficial.run/api/example/12345

Success from Vercel:
https://commerce-monorepo.vercel.app/api/example/12345

on failure, the validator will return:

 {
    "errors": [
        {
            "message": "Frame image error: HTTPError: Response code 500 (Internal Server Error)",
            "reason": "unknown_frame_error"
        }
    ]
}

from frog.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.