We will go through a simple AI-infused application where users can login and ask an AI to reimagine their rooms using ControlNet running on Replicate. This app is a drastically simplified fork of an excellent example app https://github.com/Nutlope/roomGPT. The main differences are:

• roomfix.ai doesn’t require you to run Prisma/Postgres for user and rooms database
• roomfix.ai doesn’t require you to run Redis for rate limiting per user

If you would like to jump straight into the code, you can find:

• GitHub repo: https://github.com/meteron-ai/roomfix
• Website: https://roomfix.ai

App features

• Authentication (Google auth)
• Generating images (Meteron and Replicate)
• Getting history for each user (Meteron)
• Rate limits for each user based on the admin settings (Meteron)

Frontend + Backend

Frontend and backend are handled by the fantastic next.js framework running on Vercel. You can find the call to Meteron to generate the image in pages/api/generate.ts file:

let startResponse = await fetch("<https://app.meteron.ai/api/images/generations>", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "X-Cluster": "replicate",
      "X-Async": "false",
      "X-User": session.user.email,
      Authorization: "Bearer " + process.env.METERON_API_KEY,
    },
    body: JSON.stringify({
      version:
        "854e8727697a057c525cdb45ab037f64ecca770a1769cc52287c2e56472a247b",
      input: {
        image: imageUrl,
        prompt: prompt,
        scale: 9,
        a_prompt:
          "best quality, photo from Pinterest, interior, cinematic photo, ultra-detailed, ultra-realistic, award-winning, interior design",
        n_prompt:
          "longbody, lowres, bad anatomy, bad hands, missing fingers, extra digit, fewer digits, cropped, worst quality, low quality",
      },
    }),
  });

Here, the important parts:

• URL needs to be https://app.meteron.ai/api/images/generations for both generating images and retrieving them
• Method: “POST”
• Header X-Cluster must match the cluster name that you gave for this ML endpoint.
• Header X-Async will be blocking until we get the results from the model. This makes it a lot easier to build interactive frontends. You can set it to “true” if you aren’t planning to make the user wait for the results.