hrishiksh/blur-index.js

## blur-index.js
async function blurImage(faceCoordinate, imageUrl) {
  try {
    let blurimageResponse = await fetch("http://localhost:5000/mogrify", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        url: imageUrl,
        coord: faceCoordinate,
      }),
    });return blurimageResponse.json();
  } catch (error) {
    throw "Blur image function is not working";
  }
}

## btn-index.html
<button id="btn-process">Process</button>

## dom-index.js
const imageInput = document.getElementById("imageinput");
const image = document.getElementById("image");
const finalImage = document.getElementById("finalimage");
const processBtn = document.getElementById("btn-process");

## face-detect-index.js
async function facedetect(imageurl) {
  try {
    let faceDetectionResult = await fetch("http://localhost:5000/facedetect", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        url: imageurl,
      }),
    });let tempjson = await faceDetectionResult.json();
    return tempjson.faces;
  } catch (error) {
    throw "Face detection not working";
  }
}

## file-index.html
<input
 type="file"
    accept="image/jpeg,image/png"
    id="imageinput"
/>

## fileinput-index.js
function readFileAsync(file) {
  return new Promise((resolve, reject) => {
    let reader = new FileReader();
    reader.onload = () => {
      resolve(reader.result);
    };
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}imageInput.addEventListener("change", async (e) => {
  const fileList = e.target.files;
  if (fileList.length > 0) {
    let data = await readFileAsync(fileList[0]);
    image.src = data;
    file = fileList[0];
  }
});

## img-index.html
<img id="image" />
<img id="finalimage" />

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pixlab web</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <script src="./index.js"></script>
  </body>
</html>

## processBtn-index.js
processBtn.onclick = async () => {
  if (file) {
    let imageUploadResponse = await uploadToStore(file);
    if (imageUploadResponse["ssl_link"]) {
      let faceCoordinates = await facedetect(imageUploadResponse["ssl_link"]);
      if (faceCoordinates) {
        let blurimage = await blurImage(
          faceCoordinates,
          imageUploadResponse["ssl_link"]
        );
        finalImage.src = blurimage["ssl_link"];
      }
    }
  } else {
    throw "No file present to process";
  }
};

## proxy-facedetect-server.js
app.post("/facedetect", (req, res) => {
  axios
    .get("https://api.pixlab.io/facedetect", {
      params: {
        img: req.body.url,
        key: process.env.PIXLAB_KEY,
      },
    })
    .then((resp) => res.json(resp.data))
    .catch((err) => console.error(err));
});

## proxy-mogrify-server.js
app.post("/mogrify", (req, res) => {
  axios
    .post("https://api.pixlab.io/mogrify", {
      img: req.body.url,
      key: process.env.PIXLAB_KEY,
      cord: req.body.coord,
    })
    .then((resp) => res.json(resp.data))
    .catch((err) => console.error(err));
});

## proxy-upload-server.js
app.post("/upload", (req, res) => {
  try {
    if (!req.files || Object.keys(req.files).length === 0) {
      return res.status(400).send("No files were uploaded.");
    }
    let image = req.files.image;// If you want to save the image
    // image.mv(__dirname + "/uploads/" + image.name);const form = new FormData();
    form.append("file", image.data, image.name);
    form.append("key", process.env.PIXLAB_KEY);form.submit(
      {
        protocol: "https:",
        host: "api.pixlab.io",
        path: "/store",
        method: "POST",
        headers: {
          "Content-Type": `multipart/form-data; boundary=${form.getBoundary()}`,
        },
      },
      (err, resp) => {
        if (err) {
          res.status(503).send("File server is currently unavailable");
        }
        resp.pipe(res);
      }
    );
  } catch (error) {
    res.status(500).send(error);
  }
});

## upload-index.js
async function uploadToStore(image) {
  const formData = new FormData();
  formData.append("image", image);
  try {
    let response = await fetch("http://localhost:5000/upload", {
      method: "POST",
      body: formData,
    });
    return await response.json();
  } catch (error) {
    throw "Fetch request give some error";
  }
}
	async function blurImage(faceCoordinate, imageUrl) {
	try {
	let blurimageResponse = await fetch("http://localhost:5000/mogrify", {
	method: "POST",
	headers: {
	"Content-Type": "application/json",
	},
	body: JSON.stringify({
	url: imageUrl,
	coord: faceCoordinate,
	}),
	});return blurimageResponse.json();
	} catch (error) {
	throw "Blur image function is not working";
	}
	}
	const imageInput = document.getElementById("imageinput");
	const image = document.getElementById("image");
	const finalImage = document.getElementById("finalimage");
	const processBtn = document.getElementById("btn-process");
	async function facedetect(imageurl) {
	try {
	let faceDetectionResult = await fetch("http://localhost:5000/facedetect", {
	method: "POST",
	headers: {
	"Content-Type": "application/json",
	},
	body: JSON.stringify({
	url: imageurl,
	}),
	});let tempjson = await faceDetectionResult.json();
	return tempjson.faces;
	} catch (error) {
	throw "Face detection not working";
	}
	}
	<input
	type="file"
	accept="image/jpeg,image/png"
	id="imageinput"
	/>
	function readFileAsync(file) {
	return new Promise((resolve, reject) => {
	let reader = new FileReader();
	reader.onload = () => {
	resolve(reader.result);
	};
	reader.onerror = reject;
	reader.readAsDataURL(file);
	});
	}imageInput.addEventListener("change", async (e) => {
	const fileList = e.target.files;
	if (fileList.length > 0) {
	let data = await readFileAsync(fileList[0]);
	image.src = data;
	file = fileList[0];
	}
	});
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Pixlab web</title>
	<link rel="stylesheet" href="./style.css" />
	</head>
	<body>
	<script src="./index.js"></script>
	</body>
	</html>
	processBtn.onclick = async () => {
	if (file) {
	let imageUploadResponse = await uploadToStore(file);
	if (imageUploadResponse["ssl_link"]) {
	let faceCoordinates = await facedetect(imageUploadResponse["ssl_link"]);
	if (faceCoordinates) {
	let blurimage = await blurImage(
	faceCoordinates,
	imageUploadResponse["ssl_link"]
	);
	finalImage.src = blurimage["ssl_link"];
	}
	}
	} else {
	throw "No file present to process";
	}
	};
	app.post("/facedetect", (req, res) => {
	axios
	.get("https://api.pixlab.io/facedetect", {
	params: {
	img: req.body.url,
	key: process.env.PIXLAB_KEY,
	},
	})
	.then((resp) => res.json(resp.data))
	.catch((err) => console.error(err));
	});
	app.post("/mogrify", (req, res) => {
	axios
	.post("https://api.pixlab.io/mogrify", {
	img: req.body.url,
	key: process.env.PIXLAB_KEY,
	cord: req.body.coord,
	})
	.then((resp) => res.json(resp.data))
	.catch((err) => console.error(err));
	});
	app.post("/upload", (req, res) => {
	try {
	if (!req.files \|\| Object.keys(req.files).length === 0) {
	return res.status(400).send("No files were uploaded.");
	}
	let image = req.files.image;// If you want to save the image
	// image.mv(__dirname + "/uploads/" + image.name);const form = new FormData();
	form.append("file", image.data, image.name);
	form.append("key", process.env.PIXLAB_KEY);form.submit(
	{
	protocol: "https:",
	host: "api.pixlab.io",
	path: "/store",
	method: "POST",
	headers: {
	"Content-Type": `multipart/form-data; boundary=${form.getBoundary()}`,
	},
	},
	(err, resp) => {
	if (err) {
	res.status(503).send("File server is currently unavailable");
	}
	resp.pipe(res);
	}
	);
	} catch (error) {
	res.status(500).send(error);
	}
	});