Create script.js

script.js

@@ -0,0 +1,139 @@
+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'
+];
+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'
+];
+
+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);
+  }
+});