script.js

const catImages = [
  'chat.jpeg', 'Chat_europeen_573af6e71d.jpeg', 'images_(10).jpeg', 'comment-punir-son-chat-91.jpeg', 'ragdoll-cat-small-kitten-at-home-1024x707.jpg',
  'images_(11)_1.jpeg', 'images_(12)_1.jpeg', 'images_(13)_1.jpeg', 'images_(14)_1.jpeg', 'images_(15).jpeg', 'images_(10)_1.jpeg', 'images_(13)_2.jpeg', 'images_(14)_2.jpeg', '5bec27af5afec.jpeg', 'images_(13)_3.jpeg', 'L21lZGlhLXBhL1dBMTcvNS85L1dBMTc1OTI1MTQzXzEuanBlZz8yMDI1MDcxNTE1NTIwNA_rct.jpeg', 'images_(14)_3.jpeg', 'chat-de-gouttiere.jpg', 'images (29).jpeg', 'images.jpg', 'Chatsiamois.jpg', 'Autrecat.png'
];
const dogImages = [
  'chien1.jpg', 'chien2.jpeg', 'mon-chien-est-agressif-que-faire_520x500_a2b8b85b-8d3d-4b26-a389-edce0c8753b3_1024x1024.png', 'images_(11).jpeg', 'images_(12).jpeg',
  'Carlin_chien_mignon_480x480.jpg', 'goldent-retriever-chien-mignon.jpg', 'Race_de_chien_Chow_Chow_1_large.jpg', 'images_(13).jpeg', 'images_(14).jpeg', 'images_(9).jpeg', 'images_(11)_2.jpeg', 'images_(12)_2.jpeg', 'images_(9)_1.jpeg', 'images_(10)_2.jpeg', 'images_(11)_3.jpeg', 'images_(12)_3.jpeg', 'quelle-est-esperance-vie-chiens-13.jpeg', 'langage-chien-(2)-151744.jpg', 'images (23).jpeg', 'petitchiot.jpg'
];

let model;

// Prétraitement de l’image
async function loadImage(url) {
  return new Promise((resolve, reject) => {
    const img = new window.Image();
    img.crossOrigin = 'anonymous';
    img.src = url;
    img.onload = () => {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      canvas.width = 64;
      canvas.height = 64;
      ctx.drawImage(img, 0, 0, 64, 64);
      const imageData = ctx.getImageData(0, 0, 64, 64);
      resolve(tf.browser.fromPixels(imageData).toFloat().div(255));
    };
    img.onerror = () => {
      reject(new Error(`Failed to load image at URL: ${url}`));
    };
  });
}

// Construction du dataset
async function createDataset() {
  const images = [];
  const labels = [];
  try {
    for (const image of catImages) {
      images.push(await loadImage(image));
      labels.push([1, 0]); // Chat
    }
    for (const image of dogImages) {
      images.push(await loadImage(image));
      labels.push([0, 1]); // Chien
    }
    return {
      xs: tf.stack(images),
      ys: tf.tensor2d(labels)
    };
  } catch (error) {
    console.error('Erreur lors de la création du dataset:', error);
    document.getElementById('result').innerText = 'Erreur lors du chargement des images.';
  }
  }

function createModel() {
  const model = tf.sequential();
  model.add(tf.layers.conv2d({
    inputShape: [64, 64, 3],
    filters: 8,
    kernelSize: 3,
    activation: 'relu'
  }));
  model.add(tf.layers.maxPooling2d({
    poolSize: 2
  }));
  model.add(tf.layers.flatten());
  model.add(tf.layers.dense({
    units: 16,
    activation: 'relu'
  }));
  model.add(tf.layers.dense({
    units: 2,
    activation: 'softmax'
  }));
  model.compile({
    optimizer: 'adam',
    loss: 'categoricalCrossentropy',
    metrics: ['accuracy']
  });
  return model;
}
async function trainModel() {
  document.getElementById('result').innerText = 'Entraînement de Detia en cours... 🧠';
  const dataset = await createDataset();
  if (dataset) {
    model = createModel();
    await model.fit(dataset.xs, dataset.ys, {
      epochs: 30,
      callbacks: {
        onEpochEnd: (epoch, logs) =>
          console.log(`Epoch ${epoch + 1}: loss=${logs.loss.toFixed(4)} accuracy=${(logs.acc * 100).toFixed(2)}%`)
      }
    });
    document.getElementById('result').innerText = "Detia est prête ! ✨";
  }
}
async function predictImage() {
  const fileInput = document.getElementById('image-upload');
  if (!fileInput || !fileInput.files[0]) {
    return alert('Sélectionnez une image !');
  }

  const resultElement = document.getElementById('result');
  resultElement.innerText = 'Analyse de l’image en cours... 🧐';

  const reader = new FileReader();
  reader.onload = async (e) => {
    try {
      const img = new Image();
      img.src = e.target.result;
      img.onload = async () => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = 64;
        canvas.height = 64;
        ctx.drawImage(img, 0, 0, 64, 64);

        const imageData = ctx.getImageData(0, 0, 64, 64);
        const input = tf.browser.fromPixels(imageData).toFloat().div(255).expandDims();
        const prediction = model.predict(input);
        const labelIndex = prediction.as1D().argMax().dataSync()[0];
        const label = labelIndex === 0 ? 'Chat 🐱' : 'Chien 🐶';
        resultElement.innerHTML = `<h2>Detia pense que c’est : <span>${label}</span></h2>`;
      };
    } catch (error) {
      console.error('Erreur lors de la prédiction:', error);
      resultElement.innerText = 'Une erreur est survenue lors de la prédiction.';
    }
  };
  reader.readAsDataURL(fileInput.files[0]);
}
document.addEventListener('DOMContentLoaded', async () => {
  await trainModel();
  const predictButton = document.getElementById('predict-button');
  if (predictButton) {
    predictButton.addEventListener('click', predictImage);
  }
});