Comments (18)
@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.
Fixed a670972
from frog.
Try setting the origin
property to your proxy URL on the Frog
instance.
from frog.
@jxom that does not help, og:image url stays http, and I provided https here
export const app = new Frog({
origin: 'https://...'
});
from frog.
@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.
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.
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.
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.
@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
from frog.
@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.
tested it locally with ngrok proxy in front of the frog server. used https ngrok url
from frog.
seem to be having this issue as well
from frog.
@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.
Could be related. Next.js + frog running with nginx
from frog.
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;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;previousButtonValues=%2523A_"/><meta name="frog:version" content="0.7.16"/>
from frog.
@jxom please reopen, issue is still present
from frog.
works now after frog upgrade to 0.8.0
from frog.
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)
- Failed external API calls kill the frame, even if that frame doesn't use the awaited data HOT 4
- /api/dev shows blank screen in nextjs when initialised using npm HOT 2
- devtools don't work in next template with edge runtime enabled HOT 1
- Image created using frog cannot be validated nor casted in warpcast HOT 3
- npm template frame image isn't working in devtools HOT 1
- ERC20 Support? HOT 1
- Missing docs on error handling
- Neynar will throw undefined type error if billing expires
- Image created using node frog template cannot be validated nor casted in warpcast HOT 2
- DevTools: incorrect parsing behavior for image URLs from frame responses HOT 2
- Cast Action Middlewares HOT 1
- External fonts are rendered inconsistently HOT 5
- Image created using node frog template cannot be validated nor casted in warpcast HOT 2
- ButtonLink componet will escape '&' to '&' when the href includes '&' HOT 1
- Rows / Columns aren't properly configured for 1:1 AR frames. HOT 1
- Developer experience improvement: twice api key declaration HOT 2
- FrogUI: Malformed apostrophes in State HOT 1
- Unable to use `children` prop in separate component after v0.9 HOT 1
- Have `createSystem` extend the default system values HOT 1
- NPM->Vercel template has incorrect typings issue HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from frog.