Frame image error: Invalid ContentType: 'text/html'.

[walegg]

Describe the bug
I get this error: "Frame image error: Invalid ContentType: 'text/html'." when testing my /spin frame in production (Vercel) on Warpcast.
The base path /api renders properly, it's just when I'm trying to get to my /spin by clicking on the button that I get this error
Everything works fine in localhost with frog debugger.

This is the frame in local:

Idea
Maybe using the --max-http-header-size is not behaving properly when the app is deployed to Vercel? Without it on local, the header request was too large and it was impossible to load that many images on the frame.

api/index.tsx

import { Button, Frog, FrameContext } from "frog";
import { devtools } from "frog/dev";
import { serveStatic } from "frog/serve-static";
import { pinata } from "frog/hubs";
import { handle } from "frog/vercel";
import { neynar } from "frog/middlewares";
import { createSystem } from "frog/ui";

export const {
  Box,
  HStack,
  Text,
  VStack,
} = createSystem();

// Uncomment to use Edge Runtime.
export const config = {
  runtime: "edge",
};

interface CustomFrameContext extends FrameContext {
  icons?: string[];
}

export const app = new Frog({
  assetsPath: "/",
  basePath: "/api",
  hub: pinata(),
}).use(
  neynar({
    apiKey: "NEYNAR_FROG_FM",
    features: ["interactor", "cast"],
  })
);

app.frame("/", (c) => {
  const iconsContext = c as CustomFrameContext;
  return iconsContext.res({
    image: (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height: "100vh",

          backgroundColor: "#282c34",
        }}
      >
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            marginRight: "50px",
          }}
        >
          <h1 style={{ color: "white", marginBottom: "10px" }}>
            Spin the Farcaster Slot Machine ✌️
          </h1>
          <h2 style={{ color: "white" }}>
            Find 3x your profile picture to win!
          </h2>
        </div>

        <div
          style={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
          }}
        >
          <div
            style={{
              display: "flex",
              flexWrap: "wrap",
              width: "280px",
              gap: "10px",
              padding: "10px",
              backgroundColor: "#f0f0f0",
              borderRadius: "10px",
              boxShadow: "0 4px rgba(0, 0, 0, 0.1)",
            }}
          >
            {[...Array(9)].map((_, i) => (
              <div
                key={i}
                style={{
                  display: "flex",
                  justifyContent: "center",
                  alignItems: "center",
                  width: "80px",
                  height: "80px",
                  backgroundColor: "#fff",
                  borderRadius: "5px",
                  fontSize: "32px",
                  border: "5px",
                }}
              >
                {iconsContext.icons?.[i] || "?"}
              </div>
            ))}
          </div>
        </div>
      </div>
    ),
    intents: [<Button action="/spin">Spin</Button>],
  });
});

app.frame("/spin", (c) => {
  const iconsContext = c as CustomFrameContext;
  const { displayName, pfpUrl } = c.var.interactor || {};
  const icons = [
    "/1Bar.png",
    "/2Bars.png",
    "/3Bars.png",
    "/10.png",
    "/A.png",
    "/Bell.png",
    "/Cherry.png",
    "/Grape.png",
    "/J.png",
    "/K.png",
    "/Lemon.png",
    "/Melon.png",
    "/Orange.png",
    "/Q.png",
    "/Seven.png",
  ];
  const newIcons = Array.from(
    { length: 9 },
    () => icons[Math.floor(Math.random() * icons.length)]
  );

  const checkWin = (icons: string[]) => {
    const winPatterns = [
      [0, 1, 2],
      [3, 4, 5],
      [6, 7, 8], // rows

      [0, 3, 6],
      [1, 4, 7],
      [2, 5, 8], // columns

      [0, 4, 8],
      [2, 4, 6], // diagonals
    ];
    const randomChance = Math.random();
    if (randomChance <= 0.25) {
      return (
        winPatterns.find((pattern) =>
          pattern.every((index) => icons[index] === icons[pattern[0]])
        ) || winPatterns[Math.floor(Math.random() * winPatterns.length)]
      );
    }
    return null;
  };

  const winningPattern = checkWin(newIcons);
  const userWon = Boolean(winningPattern);

  if (userWon && winningPattern) {
    winningPattern.forEach((index) => {
      newIcons[index] = "WINNER";
    });
  }

  return iconsContext.res({
    image: (
      <div
        style={{
          display: "flex",
          backgroundColor: "#FEC841",
          flexDirection: "column",
          alignItems: "center",
        }}
      >
        <div style={{ display: "flex" }}>
          <h1 color="white" decoration="underline">
            Farcaster Slot Machine
          </h1>
        </div>
        <div
          style={{
            display: "flex",
            alignItems: "center",
            flexDirection: "column",
          }}
        >
          <img
            src={pfpUrl}
            alt={displayName}
            height="50px"
            width="50px"
            borderRadius="50px"
            marginRight="10px"
          />
          <div style={{ display: "flex" }}>{displayName}</div>
          <h2 size="32">{userWon ? "You win!" : "Try again!"}</h2>
        </div>

        <VStack gap="2">
          {[0, 3, 6].map((startIndex) => (
            <HStack gap="2">
              {newIcons.slice(startIndex, startIndex + 3).map((icon) => (
                <Box
                  alignVertical="center"
                  alignHorizontal="center"
                  height="256"
                  width="256"
                  backgroundColor="gray500"
                  borderColor="text100"
                  borderWidth="2"
                  borderRadius="8"
                >
                  {icon === "WINNER" ? (
                    <img
                      src={pfpUrl}
                      alt={displayName}
                      height="135px"
                      width="135px"
                    />
                  ) : (
                    <img src={icon} alt="icon" height="135px" width="135px" />
                  )}
                </Box>
              ))}
            </HStack>
          ))}
        </VStack>
      </div>
    ),
    intents: [
      userWon ? (
        <Button.Mint target="eip155:7777777:0x060f3edd18c47f59bd23d063bbeb9aa4a8fec6df:69420">
          Mint
        </Button.Mint>
      ) : (
        <Button action="/spin">Spin Again</Button>
      ),
    ],
  });
});

// @ts-ignore
const isEdgeFunction = typeof EdgeFunction !== "undefined";
const isProduction = isEdgeFunction || import.meta.env?.MODE !== "development";
devtools(app, isProduction ? { assetsPath: "/.frog" } : { serveStatic });

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

package.json

{
  "name": "slot-machine-frog",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "cross-env NODE_OPTIONS='--max-http-header-size=65536' frog vercel-build",
    "dev": "cross-env NODE_OPTIONS='--max-http-header-size=65536' frog dev",
    "deploy": "vercel",
    "redeploy": "vercel --prod"
  },
  "dependencies": {
    "frog": "latest",
    "hono": "^4",
    "tailwindcss": "^3.4.3"
  },
  "devDependencies": {
    "cross-env": "^7.0.3",
    "tsx": "^4.7.1",
    "typescript": "^5.3.3",
    "vercel": "^32.4.1"
  }
}

.env
NODE_OPTIONS="--max-http-header-size"

[SerhiiShybko810]

Hi walegg!
I just looked your description in upwork.
I think that it appears that the error "Frame image error: Invalid ContentType: 'text/html'" is occurring when testing the /spin frame in production (Vercel) on Warpcast. This issue seems to be related to the content type of the response being returned by the /spin frame.

To resolve this issue, you need to ensure that the response returned by the /spin frame is of type 'image/svg+xml' or 'image/png' instead of 'text/html'. This can be achieved by setting the correct content type in the response headers.

[raining1s0s]

I think the content type is 'application/json'.

[walegg]

contentType doesn't exist on type FrameResponse, I also tried headers: "contentType: image/png" but the error persists.
https://frog.fm/reference/frog-frame-response

[raining1s0s]

iconsContext.res({
image: (...),
headers: {
'Content-Type': 'application/json'
}});

[SerhiiShybko810]

return iconsContext.res({
image: (
<div
style={{
display: "flex",
backgroundColor: "#FEC841",
flexDirection: "column",
alignItems: "center",
}}
>
{/* Your content here */}

),
contentType: "image/svg+xml", // Set the correct content type here
intents: [
userWon ? (
<Button.Mint target="eip155:7777777:0x060f3edd18c47f59bd23d063bbeb9aa4a8fec6df:69420">
Mint
</Button.Mint>
) : (
Spin Again
),
],
});

[SerhiiShybko810]

you need to add content type.

[benbaessler]

Hey I'm facing the same issue, did you find a workaround? @walegg

[walegg]

Hey, yes I did, I generated the images into one image programatically in order to reduce the header size because I couldn't find any way to increase it. I also removef FrogUI

[benbaessler]

how did you manage to put it into a single image with the custom content? i.e. with user's pfp, custom icons etc.

[SerhiiShybko810]

Please contact me to my telegram. @fixdev810

…

On Thu, Jun 13, 2024 at 9:46 AM Ben Bassler ***@***.***> wrote: Hey I'm facing the same issue, did you find a workaround? @walegg <https://github.com/walegg> — Reply to this email directly, view it on GitHub <#331 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BDU4DGN3P5EO4CJLOJAGDDLZHD2WLAVCNFSM6AAAAABIEBENFKVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TONJXHEYTG> . You are receiving this because you commented.Message ID: ***@***.***>

[SerhiiShybko810]

Ok, thanks. Please send ping me to my telegram.

…

On Thu, Jun 13, 2024 at 1:46 PM Louis Mille ***@***.***> wrote: Hey, yes I did, I generated the images into one image programatically in order to reduce the header size because I couldn't find any way to increase it. I also removef FrogUI — Reply to this email directly, view it on GitHub <#331 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BDU4DGJPLHR55QDGRR6UZDLZHEW5BAVCNFSM6AAAAABIEBENFKVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TONJZGE4TA> . You are receiving this because you commented.Message ID: ***@***.***>

[dalechyn]

The issue was raised due to a heavy image and a veeery long image url that browsers didn't support.

The fix is to use Image Handler.