Decode the labels on your skincare products

Snap a tag to identify the ingredients & detect harmful substances.

<div style="text-align:left; margin-top: 2rem;">
  <label for="label-upload" style="background-color: #1A7B76; color: white; padding: 0.75rem 1.5rem; border-radius: 8px; cursor: pointer; font-size: 1rem; display: inline-flex; align-items: center; gap: 0.5rem;">
    
    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="white">
      <path d="M7 2C5.9 2 5 2.9 5 4v1H4c-1.1 0-2 .9-2 2v11c0 
               1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2h-1V4c0-1.1-.9-2-2-2H7zm10 
               3v1H7V5h10zm-5 3a5 5 0 110 10 5 5 0 010-10zm0 2a3 3 0 100 6 3 3 0 000-6z"/>
    </svg>

    Upload or take a photo
  </label>

  <input type="file" id="label-upload" accept="image/*" capture="environment" style="display: none;" />

  <!-- Status text -->
  <p id="upload-status" style="margin-top:10px; color:#3F4B50; font-family: Urbanist, sans-serif;"></p>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {

  const input = document.getElementById("label-upload");
  const status = document.getElementById("upload-status");

  if (!input) return;

  input.addEventListener("change", async function() {

    const file = input.files[0];
    if (!file) return;

    status.innerText = "🔍 Compressing image...";

    try {
      const compressedBlob = await compressImage(file);

      status.innerText = "📤 Uploading for analysis...";

      const formData = new FormData();
      formData.append("file", compressedBlob, "compressed.jpg");

      await fetch("https://hook.eu2.make.com/dod9ppjkk1uk50ew6jis9bjov50zlevr", {
        method: "POST",
        body: formData
      });

      status.innerText = "✅ Image sent! Analyzing...";

    } catch (error) {
      console.error("Upload error:", error);
      status.innerText = "❌ Something went wrong. Try again.";
    }

  });

});

// 🔧 IMAGE COMPRESSION FUNCTION
function compressImage(file) {
  return new Promise((resolve) => {

    const img = new Image();
    const reader = new FileReader();

    reader.onload = function(e) {
      img.src = e.target.result;
    };

    img.onload = function() {

      const canvas = document.createElement("canvas");
      const ctx = canvas.getContext("2d");

      const maxWidth = 1200;
      const scale = maxWidth / img.width;

      canvas.width = maxWidth;
      canvas.height = img.height * scale;

      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

      canvas.toBlob(
        (blob) => resolve(blob),
        "image/jpeg",
        0.6
      );
    };

    reader.readAsDataURL(file);
  });
}
</script>