AnimeFace musk

I am using a photo-anime API from replicate

I’m running my express back end on Replic

Backend

app.post("/api/image", upload.single("my-file"), async (req, res) => {
  console.log("Received image for processing");
  console.log(req.file);
  try {
    const imageUrl = `https://${req.get("host")}/images/${req.file.filename}`;
    console.log(`Public URL for the uploaded image: ${imageUrl}`);

    const output = await replicate.run(
      "zf-kbot/photo-to-anime:7936c014091521e64f3721090cc878ab1bceb2d5e0deecc4549092fb7f9ba753",
      {
        input: {
          image: imageUrl,
          width: 1024,
          height: 1024,
          prompt: "anime",
          strength: 0.5,
          scheduler: "K_EULER_ANCESTRAL",
          num_outputs: 1,
          guidance_scale: 6,
          negative_prompt: "",
          num_inference_steps: 20
        }
      }
    );  
    console.log("Replicate API call successful. Output1:", output);
    // downloadAndSaveImage(output1, "result");
    // res.send({ result: output1.result });
    const imageResultUrl = output[0];;
    downloadAndSaveImage(imageResultUrl, "result");

  
    res.send({ result: imageResultUrl });
  } catch (error) {
    console.error("Error during Replicate API call:", error);
    res
      .status(500)
      .send({ error: "Failed to call Replicate API", details: error.message });
  }
});

app.get("/img/:id", (req, res) => {
  console.log(req.params.id);
  res.type("jpeg").send(path.join(__dirname, "public/images/") + req.params.id);
});

app.listen(3000, () => {
  console.log("Express server listening on port 3000");
});

Front end

  document.body.addEventListener("keydown", async () => {
    if (!video.videoWidth) {
      alert("Video is not ready or not playing.");
      return; // Ensure video is ready
    }

    // Set the canvas size same as video size
    canvas2.width = video.videoWidth * 2;
    canvas2.height = video.videoHeight * 2;
    context.drawImage(video, 0, 0, canvas.width, canvas.height);

    canvas.toBlob(async (blob) => {
      console.log(blob);
      let formData = new FormData();
      formData.append("my-file", blob, `capture-${Date.now()}.jpeg`);

      try {
        const response = await fetch("/api/image", {
          method: "POST",
          body: formData,
        });
        if (!response.ok) {
          throw new Error("Failed to fetch from server");
        }

        // setTimeout(() => {
        //   // context.fillRect(0, 0, canvas.width, canvas.height);
        // }, 1000);

        const data = await response.json();
        const resultImage = document.getElementById("resultImage");
        resultImage.src = data.result;
        console.log(resultImage.src);
      } catch (err) {
        console.error("Failed to send image or parse response", err);
      }
    }, "image/jpeg");
    continueDrawing = false;
    canvasCover = true;
    coverVideo();
  });
  // setTimeout(drawImge , 100);
  document.body.addEventListener("keyup", async (event) => {
    continueDrawing = true; 
    canvasCover = false;
    drawVideo();
  });
});

API (JS)

import Replicate from "replicate";
const replicate = new Replicate();

const input = {
    image: "url"
};

const output = await replicate.run("zf-kbot/photo-to-anime:7936c014091521e64f3721090cc878ab1bceb2d5e0deecc4549092fb7f9ba753", { input });
console.log(output)
//=> ["<https://replicate.delivery/pbxt/JYZdeTSLTd3MHyER0NnRYvO>...

Website:

https://15a212a0-f5b0-4b4b-ba3e-23fa2c2963de-00-3806sxe2lh2pn.picard.replit.dev/