tfjs-evolution 0.0.4 → 0.0.5

package/fesm2022/tfjs-evolution.mjs

@@ -2,6 +2,8 @@ import * as i0 from '@angular/core';
 import { Injectable, Component } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import * as tf from '@tensorflow/tfjs';
+import * as tfvis from '@tensorflow/tfjs-vis';
 
 class TfjsEvolutionService {
     constructor() { }
@@ -32,12 +34,805 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
   ` }]
         }] });
 
+const IMAGE_SIZE = 224;
+const DEFAULT_MOBILENET_VERSION = 2;
+const DEFAULT_TRAINING_LAYER_V1 = 'conv_pw_13_relu';
+const DEFAULT_TRAINING_LAYER_V2 = "out_relu";
+const DEFAULT_ALPHA_V1_v2 = 0.35;
+const DEFAULT_ALPHA_V1 = 0.25; //256
+const DEFAULT_ALPHA_V2 = 0.5; //512
+const DEFAULT_ALPHA_V3 = 0.75; //768 features
+const DEFAULT_ALPHA_V4 = 1; //1024 features
+const DEFAULT_ALPHA = 1; //1024 features
+// v2: 0.35, 0.50, 0.75 or 1.00.
+const isAlphaValid = (version, alpha) => {
+    if (version === 1) {
+        if (alpha !== 0.25 && alpha !== 0.5 && alpha !== 0.75 && alpha !== 1) {
+            console.warn("Invalid alpha. Options are: 0.25, 0.50, 0.75 or 1.00.");
+            console.log("Loading model with alpha: ", DEFAULT_ALPHA_V1.toFixed(2));
+            return DEFAULT_ALPHA_V1;
+        }
+    }
+    else {
+        if (alpha !== 0.35 && alpha !== 0.5 && alpha !== 0.75 && alpha !== 1) {
+            console.warn("Invalid alpha. Options are: 0.35, 0.50, 0.75 or 1.00.");
+            console.log("Loading model with alpha: ", DEFAULT_ALPHA_V2.toFixed(2));
+            return DEFAULT_ALPHA_V2;
+        }
+    }
+    return alpha;
+};
+const parseModelOptions = (options) => {
+    options = options || {};
+    if (options.checkpointUrl && options.trainingLayer) {
+        if (options.alpha || options.version) {
+            console.warn("Checkpoint URL passed to modelOptions, alpha options are ignored");
+        }
+        return [options.checkpointUrl, options.trainingLayer];
+    }
+    else {
+        options.version = options.version || DEFAULT_MOBILENET_VERSION;
+        if (options.version === 1) {
+            options.alpha = options.alpha || DEFAULT_ALPHA_V4;
+            options.alpha = isAlphaValid(options.version, options.alpha);
+            console.log(`Loading mobilenet ${options.version} and alpha ${options.alpha}`);
+            // exception is alpha o f 1 can only be 1.0
+            let alphaString = options.alpha.toFixed(2);
+            if (alphaString === "1.00") {
+                alphaString = "1.0";
+            }
+            console.log("Using the model: ");
+            return [
+                // tslint:disable-next-line:max-line-length
+                //They are loading MobileNet_v1        
+                `https://storage.googleapis.com/tfjs-models/tfjs/mobilenet_v1_${alphaString}_${IMAGE_SIZE}/model.json`,
+                DEFAULT_TRAINING_LAYER_V1
+            ];
+        }
+        else if (options.version === 2) {
+            options.alpha = options.alpha || DEFAULT_ALPHA_V4;
+            options.alpha = isAlphaValid(options.version, options.alpha);
+            console.log(`Loading mobilenet ${options.version} and alpha ${options.alpha}`);
+            console.log(`Loading mobilenet ${options.version} and alpha ${options.alpha}`);
+            return [
+                // tslint:disable-next-line:max-line-length        
+                `https://storage.googleapis.com/teachable-machine-models/mobilenet_v2_weights_tf_dim_ordering_tf_kernels_${options.alpha.toFixed(2)}_${IMAGE_SIZE}_no_top/model.json`,
+                DEFAULT_TRAINING_LAYER_V2
+            ];
+        }
+        else {
+            throw new Error(`MobileNet V${options.version} doesn't exist`);
+        }
+    }
+};
+/**
+ * load the base mobilenet model
+ * @param modelOptions options determining what model to load
+ */
+async function loadTruncatedMobileNet(modelOptions) {
+    const [checkpointUrl, trainingLayer] = parseModelOptions(modelOptions);
+    const mobilenet = await tf.loadLayersModel(checkpointUrl);
+    if (modelOptions && modelOptions.version === 1) {
+        const layer = mobilenet.getLayer(trainingLayer);
+        const truncatedModel = tf.model({ inputs: mobilenet.inputs, outputs: layer.output });
+        console.log("Feature model loaded, memory: ", tf.memory().numBytes);
+        const model = tf.sequential();
+        model.add(truncatedModel);
+        model.add(tf.layers.flatten());
+        return model;
+    }
+    else {
+        const layer = mobilenet.getLayer(trainingLayer);
+        const truncatedModel = tf.model({ inputs: mobilenet.inputs, outputs: layer.output });
+        console.log("Feature model loaded, memory: ", tf.memory().numBytes);
+        const model = tf.sequential();
+        model.add(truncatedModel);
+        model.add(tf.layers.globalAveragePooling2d({})); // go from shape [7, 7, 1280] to [1280]
+        return model;
+    }
+}
+class CustomMobileNet {
+    static getinputShape() {
+        /**truncatedModel is the base model, the model used to apply transfer learning */
+        const inputShape = this.truncatedModel.outputs[0].shape.slice(1); // [ 7 x 7 x 1280] (not sure about those dimensions)
+        //   console.log("Input Shape(complete): ", this.truncatedModel.outputs[0].shape);
+        //   console.log("Input Shape: ", inputShape);
+        const inputSize = tf.util.sizeFromShape(inputShape);
+        //   console.log("Input Size: ", inputSize);
+        return inputSize;
+    }
+    static get EXPECTED_IMAGE_SIZE() {
+        return IMAGE_SIZE;
+    }
+    getMetadata() {
+        return this._metadata;
+    }
+    constructor() {
+        // this._metadata = fillMetadata(metadata);
+        //Loading the truncated model
+        // loadTruncatedMobileNet();
+        // this.loadFeatureModel();
+    }
+    static async loadFeatureModel() {
+        this.truncatedModel = await loadTruncatedMobileNet();
+    }
+    /**
+     * get the total number of classes existing within model
+     */
+    // getTotalClasses() {
+    //     const output = this.model.output as SymbolicTensor;
+    //     const totalClasses = output.shape[1];
+    //     return totalClasses;
+    // }
+    /**
+     * get the model labels
+     */
+    getClassLabels() {
+        return this._metadata.labels;
+    }
+    /**
+     * Given an image element, makes a prediction through mobilenet returning the
+     * probabilities of the top K classes.
+     * @param image the image to classify
+     * @param maxPredictions the maximum number of classification predictions
+     */
+    // async predictTopK(image: ClassifierInputSource, maxPredictions = 10, flipped = false) {
+    //     const croppedImage = cropTo(image, this._metadata.imageSize, flipped);
+    //     const logits = tf.tidy(() => {
+    //         const captured = capture(croppedImage, this._metadata.grayscale);
+    //         return this.model.predict(captured);
+    //     });
+    //     // Convert logits to probabilities and class names.
+    //     const classes = await getTopKClasses(this._metadata.labels, logits as tf.Tensor<tf.Rank>, maxPredictions);
+    //     dispose(logits);
+    //     return classes;
+    // }
+    /**
+     * Given an image element, makes a prediction through mobilenet returning the
+     * probabilities for ALL classes.
+     * @param image the image to classify
+     * @param flipped whether to flip the image on X
+     */
+    // async predict(image: ClassifierInputSource, flipped = false) {
+    //     const croppedImage = cropTo(image, this._metadata.imageSize, flipped);
+    //     const logits = tf.tidy(() => {
+    //         const captured = capture(croppedImage, this._metadata.grayscale);
+    //         return this.model.predict(captured);
+    //     });
+    //     const values = await (logits as tf.Tensor<tf.Rank>).data();
+    //     const classes = [];
+    //     for (let i = 0; i < values.length; i++) {
+    //         classes.push({
+    //             className: this._metadata.labels[i],
+    //             probability: values[i]
+    //         });
+    //     }
+    //     dispose(logits);
+    //     return classes;
+    // }
+    dispose() {
+        this.truncatedModel.dispose();
+    }
+} // end of CustomMobileNet
+
+/**
+ * Receives an image and normalizes it between -1 and 1.
+ * Returns a batched image (1 - element batch) of shape [1, w, h, c]
+ * @param rasterElement the element with pixels to convert to a Tensor
+ * @param grayscale optinal flag that changes the crop to [1, w, h, 1]
+ */
+function capture(rasterElement, grayscale) {
+    return tf.tidy(() => {
+        // console.log("Not a tensor....")
+        const pixels = tf.browser.fromPixels(rasterElement);
+        // crop the image so we're using the center square
+        const cropped = cropTensor(pixels);
+        // Expand the outer most dimension so we have a batch size of 1
+        const batchedImage = cropped.expandDims(0);
+        // Normalize the image between -1 and a1. The image comes in between 0-255
+        // so we divide by 127 and subtract 1.
+        return batchedImage.toFloat().div(tf.scalar(127)).sub(tf.scalar(1));
+    });
+}
+function cropTensor(img) {
+    const size = Math.min(img.shape[0], img.shape[1]);
+    const centerHeight = img.shape[0] / 2;
+    const beginHeight = centerHeight - (size / 2);
+    const centerWidth = img.shape[1] / 2;
+    const beginWidth = centerWidth - (size / 2);
+    return img.slice([beginHeight, beginWidth, 0], [size, size, 3]);
+}
+
+class Util {
+    /**
+     * Receives an image and normalizes it between -1 and 1.
+     * Returns a batched image (1 - element batch) of shape [1, w, h, c]
+     * @param rasterElement the element with pixels to convert to a Tensor
+     * @param grayscale optinal flag that changes the crop to [1, w, h, 1]
+     */
+    capture(rasterElement, grayscale) {
+        return tf.tidy(() => {
+            const pixels = tf.browser.fromPixels(rasterElement);
+            // // crop the image so we're using the center square
+            const cropped = this.cropTensor(pixels, grayscale);
+            // // Expand the outer most dimension so we have a batch size of 1
+            const batchedImage = cropped.expandDims(0);
+            // // Normalize the image between -1 and a1. The image comes in between 0-255
+            // // so we divide by 127 and subtract 1.
+            return batchedImage.toFloat().div(tf.scalar(127)).sub(tf.scalar(1));
+        });
+    }
+    cropTensor(img, grayscaleModel, grayscaleInput) {
+        const size = Math.min(img.shape[0], img.shape[1]);
+        const centerHeight = img.shape[0] / 2;
+        const beginHeight = centerHeight - (size / 2);
+        const centerWidth = img.shape[1] / 2;
+        const beginWidth = centerWidth - (size / 2);
+        if (grayscaleModel && !grayscaleInput) {
+            //cropped rgb data
+            let grayscale_cropped = img.slice([beginHeight, beginWidth, 0], [size, size, 3]);
+            grayscale_cropped = grayscale_cropped.reshape([size * size, 1, 3]);
+            const rgb_weights = [0.2989, 0.5870, 0.1140];
+            grayscale_cropped = tf.mul(grayscale_cropped, rgb_weights);
+            grayscale_cropped = grayscale_cropped.reshape([size, size, 3]);
+            grayscale_cropped = tf.sum(grayscale_cropped, -1);
+            grayscale_cropped = tf.expandDims(grayscale_cropped, -1);
+            return grayscale_cropped;
+        }
+        return img.slice([beginHeight, beginWidth, 0], [size, size, 3]);
+    }
+    /**
+     * This function will make a copy of a model on the weight level
+     * This is an attempt to avoid influencing the new mode when the old one
+     * is eliminated.
+     *
+     * @param originalModel - the model to be copied
+     * @param recipient - the new model
+     */
+    async copyModel_v3(originalModel, recipient) {
+        originalModel.layers.forEach((layer, index) => {
+            recipient.layers[index].setWeights(layer.getWeights());
+        });
+        // originalModel.dispose();
+    }
+    /**
+     * This function will make a copy of a TFJS model, as so it would be possible
+     * to erase the original.
+     * @param model - model to be copied
+     * @returns - copy of the model
+     */
+    async copyModel_v2(originalModel) {
+        // Serialize the original model
+        const modelTopology = originalModel.toJSON();
+        // Load the serialized model into a new model
+        const copiedModel = await tf.loadLayersModel(tf.io.fromMemory(modelTopology, undefined, undefined));
+        // Compile the copied model with the same settings as the original
+        copiedModel.compile({
+            loss: originalModel.loss,
+            optimizer: originalModel.optimizer
+        });
+        return copiedModel;
+    }
+    /**
+     * This function will make a copy of a TFJS model, as so it would be possible
+     * to erase the original.
+     * @param model - model to be copied
+     * @returns - copy of the model
+     */
+    copyModel(model) {
+        const copy = tf.sequential();
+        `
+        `;
+        model.layers.forEach(layer => {
+            const aux = layer;
+            // layer.dispose();
+            copy.add(aux);
+        });
+        copy.compile({
+            loss: model.loss,
+            optimizer: model.optimizer
+        });
+        return copy;
+    }
+    removeElementByIndex(arr, index) {
+        // Check if the index is within bounds
+        if (index >= 0 && index < arr.length) {
+            // Remove the element at the specified index
+            arr.splice(index, 1);
+        }
+        return arr;
+    }
+    removeElement(arr, element) {
+        // Remove all occurrences of the specified element from the array
+        return arr.filter((item) => item !== element);
+    }
+    clean_array_of_tensors(tensors) {
+        tensors.forEach((elem, index) => {
+            // if(!index_selection.includes(index))  
+            elem.dispose();
+        });
+    }
+    getClassNameBySignature(classes, signature) {
+        const class_name = classes.find(p => {
+            let match = true;
+            p.signature?.forEach((elem, index) => {
+                if (elem !== signature[index])
+                    match = false;
+            });
+            return match;
+        });
+        return class_name ? class_name.name : "not found";
+    }
+    identityMatrix(n) {
+        return Array.from({ length: n }, (_, i) => Array.from({ length: n }, (_, j) => (i === j ? 1 : 0)));
+    }
+    indexOfMax(arr) {
+        if (arr.length === 0) {
+            return -1; // Return -1 for an empty array
+        }
+        let max = arr[0];
+        let maxIndex = 0;
+        for (let i = 1; i < arr.length; i++) {
+            if (arr[i] > max) {
+                maxIndex = i;
+                max = arr[i];
+            }
+        }
+        return maxIndex;
+    }
+    suffle(array1, array2) {
+        // Shuffle the order of elements
+        for (let i = array1.length - 1; i > 0; i--) {
+            const j = Math.floor(Math.random() * (i + 1));
+            // Swap elements in both arrays
+            [array1[i], array1[j]] = [array1[j], array1[i]];
+            [array2[i], array2[j]] = [array2[j], array2[i]];
+        }
+    }
+    sortByValuePreservingIndex(arr1, arr2) {
+        // console.log("Vector for organizing: ", arr1)
+        // arr2[0].summary()
+        // Create an array of objects with value, index from arr1, and original index
+        const pairingArray = arr1.map((value, index) => ({
+            value,
+            index,
+            originalIndex: index,
+            elementFromArr2: arr2[index], // Preserve the corresponding element from arr2
+        }));
+        // Sort the pairing array by value (largest to smallest)
+        pairingArray.sort((a, b) => b.value - a.value);
+        // Extract the sorted elements from arr2 based on the original index
+        const sortedElementsFromArr2 = pairingArray.map(pair => pair.elementFromArr2);
+        return sortedElementsFromArr2;
+    }
+}
+
+const VALIDATION_FRACTION = 0.15;
+/**
+ * Receives a Metadata object and fills in the optional fields such as timeStamp
+ * @param data a Metadata object
+ */
+const fillMetadata = (data) => {
+    // util.assert(typeof data.tfjsVersion === 'string', () => `metadata.tfjsVersion is invalid`);
+    // data.packageVersion = data.packageVersion || version;
+    data.packageName = data.packageName || '@teachablemachine/image';
+    data.timeStamp = data.timeStamp || new Date().toISOString();
+    data.userMetadata = data.userMetadata || {};
+    data.modelName = data.modelName || 'untitled';
+    data.labels = data.labels || [];
+    // data.imageSize = data.imageSize || IMAGE_SIZE;
+    return data;
+};
+class TeachableMobileNet extends CustomMobileNet {
+    // Array of all the examples collected.
+    /**
+      It is static since all the instance will share the same features, for saving memory and time.
+      The idea is avoiding restoring the features individually and having the recalculate them for every new
+      individuals.
+     */
+    static { this.examples = []; }
+    // Number of total samples
+    static { this.totalSamples = 0; }
+    static { this.classes_names = []; }
+    constructor() {
+        super();
+        this.classes = [];
+        this.createHead();
+    }
+    /**
+     * This method will return the head, the trainable part, the part under evolution.
+     */
+    getHead() {
+        return this.trainingModel;
+    }
+    /**
+     * Create the head for transfer learning.
+     * This is the trainable section of the transfer learning.
+     */
+    createHead() {
+        const inputSize = TeachableMobileNet.getinputShape();
+        this.trainingModel = tf.sequential({
+            layers: [
+                tf.layers.dense({
+                    inputShape: [inputSize],
+                    units: 100,
+                    activation: 'relu',
+                    useBias: true
+                }),
+                tf.layers.dense({
+                    useBias: false,
+                    activation: 'softmax',
+                    units: TeachableMobileNet.classes_names.length
+                })
+            ]
+        });
+        const optimizer = tf.train.adam();
+        // const optimizer = tf.train.rmsprop(params.learningRate);
+        this.trainingModel.compile({
+            optimizer,
+            // loss: 'binaryCrossentropy',
+            loss: 'categoricalCrossentropy',
+            metrics: ['accuracy']
+        });
+    }
+    async train() {
+        const trainingSurface = { name: 'Loss and MSE', tab: 'Training' };
+        const dataset = TeachableMobileNet.convertToTfDataset();
+        //Salving a copy of the validation dataset, for later
+        TeachableMobileNet.validationDataset = dataset.validationDataset;
+        // console.log("Dataset for training: ", dataset.trainDataset);
+        const trainData = dataset.trainDataset.batch(30);
+        const validationData = dataset.validationDataset.batch(10);
+        // this.createHead();
+        const callbacks = [
+            // Show on a tfjs-vis visor the loss and accuracy values at the end of each epoch.
+            tfvis.show.fitCallbacks(trainingSurface, ['loss', 'acc', "val_loss", "val_acc"], {
+                callbacks: ['onEpochEnd'],
+            }),
+            {},
+        ];
+        const history = await this.trainingModel.fitDataset(trainData, {
+            epochs: 100,
+            validationData,
+            callbacks
+        }).then((info) => {
+            console.log('Precisão final', info.history.val_acc[info.history.acc.length - 1]);
+        });
+        // await this.accuracy_per_class();
+        // console.log("History: ", history.history.acc);
+        // await this.trainingModel.fit(this.featureX, this.target, {})
+    }
+    async accuracy_per_class(confusion_matrix_recipient) {
+        /**Calculating Accuracy per class */
+        const accuracyperclass = await this.calculateAccuracyPerClass(TeachableMobileNet.validationDataset);
+        // console.log("Accuracy per class: ", accuracyperclass);
+        //Confusion matrix
+        // Calling tf.confusionMatrix() method 
+        const output = tf.math.confusionMatrix(accuracyperclass.reference, accuracyperclass.predictions, TeachableMobileNet.classes_names.length);
+        // Printing output 
+        output.print();
+        const confusion_matrix = output.dataSync();
+        // console.log(confusion_matrix);
+        // console.log(confusion_matrix[TeachableMobileNet.classes_names.length + TeachableMobileNet.classes_names.length]);
+        const accuracy = [];
+        for (let i = 0; i < TeachableMobileNet.classes_names.length; i++) {
+            accuracy.push(confusion_matrix[TeachableMobileNet.classes_names.length * i + i] / TeachableMobileNet.numValidation);
+        }
+        console.log("Accuracy per class: ", accuracy);
+        for (let i = 0; i < TeachableMobileNet.classes_names.length; i++) {
+            confusion_matrix_recipient.push([]);
+            for (let j = 0; j < TeachableMobileNet.classes_names.length; j++) {
+                confusion_matrix_recipient[i].push([]);
+                confusion_matrix_recipient[i][j] = confusion_matrix[TeachableMobileNet.classes_names.length * i + j] / TeachableMobileNet.numValidation;
+                confusion_matrix_recipient[i][j] = (confusion_matrix_recipient[i][j].toFixed(2)) * 100;
+            }
+            // accuracy.push(confusion_matrix[TeachableMobileNet.classes_names.length*i+ i]/TeachableMobileNet.numValidation)
+        }
+        console.log("Confusion matrix as a matrix");
+        console.log(confusion_matrix_recipient);
+        return accuracy.map((elem) => elem.toFixed(2) * 100);
+    }
+    async loadImages(number_of_species, classes_names, options) {
+        TeachableMobileNet.classes_names = classes_names;
+        await this.add_species(number_of_species, options);
+    }
+    async add_species(number_of_species, options) {
+        //Loading feature model, used to create features from images
+        //  await this.loadFeatureModel();
+        for (let i = 0; i < TeachableMobileNet.classes_names.length; i++) {
+            // this.add_images(this.classes_names[i], number_of_species, options);
+        }
+    }
+    /**
+     *
+     * @param name - name of the class receiving an example
+     * @param number_of_species - how many images to add
+     * @param options - details on the location of the images
+     */
+    async add_images(name, number_of_species, options) {
+        const class_add = [];
+        for (let i = 0; i < number_of_species; i++) {
+            //   class_add.push(`${options.base}/${name}/${options.file_name} ${i}.${options.file_extension}`);
+            //Uploading images
+            const cake = new Image();
+            // cake.src = `${options.base}/${name}/${options.file_name} ${i}.${options.file_extension}`;
+            cake.height = 224;
+            cake.width = 224;
+            cake.src = "./assets/dataset/Can%C3%A1rio-da-Terra/image%200.jpeg";
+            // console.log("Image location: ", cake.src )
+            await new Promise((resolve, reject) => {
+                cake.onload = () => {
+                    //Finding the correspondent index of the class with name given
+                    const index = TeachableMobileNet.classes_names.findIndex((elem) => elem === name);
+                    // this.addExample(index, cake);
+                    resolve();
+                };
+                cake.onerror = (error) => {
+                    // Handle error if the image fails to load
+                    reject(error);
+                };
+            });
+        }
+        // this.classes.push({name: name, images: class_add})  
+    }
+    /**
+     * This method will transform images into tensors
+     * @param number_of_classes - number of classes
+     * @param classes_names - name of each class
+     */
+    async createTensors(number_of_classes, classes_names) {
+        let output = [];
+        /** There is a function on TensorFlow.js that also does that */
+        const signatures = new Util().identityMatrix(number_of_classes);
+        for (let i = 0; i < number_of_classes; i++) {
+            this.classes[i].signature = signatures[i];
+            this.classes[i].name = classes_names[i];
+            for (let j = 0; j < this.classes[i].images.length; j++) {
+            }
+        }
+    }
+    /**
+     * Add a sample of data under the provided className
+     * @param className the classification this example belongs to
+     * @param sample the image / tensor that belongs in this classification
+     */
+    // public async addExample(className: number, sample: HTMLCanvasElement | tf.Tensor) {
+    static async addExample(className, name, sample) {
+        // console.log("Adding a new example...") 
+        const cap = isTensor(sample) ? sample : capture(sample);
+        //Getting the features
+        const example = this.truncatedModel.predict(cap);
+        // console.log("Shape after feature extraction: ", example.shape)          
+        const activation = example.dataSync();
+        //Very important to clean the memory aftermath, it makes the difference
+        cap.dispose();
+        example.dispose();
+        // //Accessing the instance variable, not the local ones
+        // // save samples of each class separately 
+        if (!TeachableMobileNet.examples[className])
+            //and an empty array, make sure there is not empty elements. 
+            //it will create issue when transforming to tensors
+            TeachableMobileNet.examples[className] = [];
+        if (!TeachableMobileNet.classes_names[className])
+            //Saving the lable when it first appears
+            TeachableMobileNet.classes_names[className] = name;
+        TeachableMobileNet.examples[className].push(activation);
+        // // increase our sample counter
+        TeachableMobileNet.totalSamples++;
+    }
+    /**
+      * process the current examples provided to calculate labels and format
+      * into proper tf.data.Dataset
+      */
+    static prepare() {
+        for (const classes in TeachableMobileNet.examples) {
+            if (classes.length === 0) {
+                throw new Error('Add some examples before training');
+            }
+        }
+        const datasets = this.convertToTfDataset();
+        this.trainDataset = datasets.trainDataset;
+        this.validationDataset = datasets.validationDataset;
+    }
+    prepareDataset() {
+        for (let i = 0; i < TeachableMobileNet.numClasses; i++) {
+            //Different from the original implementation of TM, mine is using example as static.
+            //The goal is saving memory by using a single instance of the variable
+            TeachableMobileNet.examples[i] = [];
+        }
+    }
+    /**
+         * Process the examples by first shuffling randomly per class, then adding
+         * one-hot labels, then splitting into training/validation datsets, and finally
+         * sorting one last time
+         */
+    static convertToTfDataset() {
+        // first shuffle each class individually
+        // TODO: we could basically replicate this by insterting randomly
+        for (let i = 0; i < TeachableMobileNet.examples.length; i++) {
+            TeachableMobileNet.examples[i] = fisherYates(TeachableMobileNet.examples[i], this.seed);
+        }
+        // then break into validation and test datasets
+        let trainDataset = [];
+        let validationDataset = [];
+        // for each class, add samples to train and validation dataset
+        for (let i = 0; i < TeachableMobileNet.examples.length; i++) {
+            // console.log("Number of classes: ", TeachableMobileNet.classes_names.length);
+            const y = flatOneHot(i, TeachableMobileNet.classes_names.length);
+            const classLength = TeachableMobileNet.examples[i].length;
+            // console.log("Number of elements per class: ", classLength);
+            const numValidation = Math.ceil(VALIDATION_FRACTION * classLength);
+            const numTrain = classLength - numValidation;
+            this.numValidation = numValidation;
+            /**It is visiting per class, thus, it is possible to fix y, the target label */
+            const classTrain = this.examples[i].slice(0, numTrain).map((dataArray) => {
+                return { data: dataArray, label: y };
+            });
+            const classValidation = this.examples[i].slice(numTrain).map((dataArray) => {
+                return { data: dataArray, label: y };
+            });
+            trainDataset = trainDataset.concat(classTrain);
+            validationDataset = validationDataset.concat(classValidation);
+        }
+        // console.log("Training element: ", trainDataset[trainDataset.length-1])      
+        // console.log("Training length: ", trainDataset.length)
+        // console.log("validation length: ", validationDataset.length);
+        // finally shuffle both train and validation datasets
+        trainDataset = fisherYates(trainDataset, this.seed);
+        validationDataset = fisherYates(validationDataset, this.seed);
+        const trainX = tf.data.array(trainDataset.map(sample => sample.data));
+        const validationX = tf.data.array(validationDataset.map(sample => sample.data));
+        const trainY = tf.data.array(trainDataset.map(sample => sample.label));
+        const validationY = tf.data.array(validationDataset.map(sample => sample.label));
+        // return tf.data dataset objects
+        return {
+            trainDataset: tf.data.zip({ xs: trainX, ys: trainY }),
+            validationDataset: tf.data.zip({ xs: validationX, ys: validationY })
+        };
+    }
+    datasetForEvaluation() {
+    }
+    async evaluate() {
+        if (!TeachableMobileNet.feature_aux) {
+            const features = [];
+            const targets = [];
+            for (let i = 0; i < TeachableMobileNet.examples.length; i++) {
+                const y = flatOneHot(i, TeachableMobileNet.classes_names.length);
+                //For class i, push all the examples.
+                TeachableMobileNet.examples[i].forEach((elemn) => {
+                    //Pushing the target signature
+                    targets.push(y);
+                    //Pushing features
+                    features.push(elemn);
+                });
+            }
+            TeachableMobileNet.feature_aux = tf.tensor(features);
+            TeachableMobileNet.target_aux = tf.tensor(targets);
+        }
+        const aux = this.trainingModel.evaluate(TeachableMobileNet.feature_aux, TeachableMobileNet.target_aux);
+        return aux[1].dataSync()[0];
+    }
+    // async evaluate(){
+    //   const features: any=[];
+    //   const targets: any=[];
+    //   for (let i = 0; i < TeachableMobileNet.examples.length; i++) {
+    //     const y = flatOneHot(i, TeachableMobileNet.classes_names.length);
+    //     //For class i, push all the examples.
+    //     TeachableMobileNet.examples[i].forEach((elemn)=>{
+    //        //Pushing the target signature
+    //        targets.push(y);
+    //        //Pushing features
+    //        features.push(elemn)
+    //     })
+    //   }  
+    //   const aux_features= tf.tensor(features);
+    //   const aux_target= tf.tensor(targets);
+    //   // console.log("Tensor stack for evaluation: ", aux_features.shape)
+    //   const aux: any = this.trainingModel.evaluate(aux_features, aux_target);
+    //   return aux[1].dataSync()[0];
+    // }
+    /*** Final statistics */
+    /*
+         * Calculate each class accuracy using the validation dataset
+    */
+    async calculateAccuracyPerClass(validationData) {
+        const validationXs = TeachableMobileNet.validationDataset.mapAsync(async (dataset) => {
+            return dataset.xs;
+        });
+        const validationYs = TeachableMobileNet.validationDataset.mapAsync(async (dataset) => {
+            return dataset.ys;
+        });
+        // console.log("validation dataset: ", validationXs);
+        // console.log("For calculating batch size: ", validationYs);
+        // we need to split our validation data into batches in case it is too large to fit in memory
+        const batchSize = Math.min(validationYs.size, 32);
+        // const batchSize =1;
+        const iterations = Math.ceil(validationYs.size / batchSize);
+        // console.log("Batch size: ", batchSize);
+        const batchesX = validationXs.batch(batchSize);
+        const batchesY = validationYs.batch(batchSize);
+        const itX = await batchesX.iterator();
+        const itY = await batchesY.iterator();
+        const allX = [];
+        const allY = [];
+        for (let i = 0; i < iterations; i++) {
+            // 1. get the prediction values in batches
+            const batchedXTensor = await itX.next();
+            //  console.log("Batch size on accuracy per class: ", batchedXTensor.value.shape);
+            const batchedXPredictionTensor = this.trainingModel.predict(batchedXTensor.value);
+            const argMaxX = batchedXPredictionTensor.argMax(1); // Returns the indices of the max values along an axis
+            allX.push(argMaxX);
+            // 2. get the ground truth label values in batches
+            const batchedYTensor = await itY.next();
+            const argMaxY = batchedYTensor.value.argMax(1); // Returns the indices of the max values along an axis
+            allY.push(argMaxY);
+            // 3. dispose of all our tensors
+            batchedXTensor.value.dispose();
+            batchedXPredictionTensor.dispose();
+            batchedYTensor.value.dispose();
+        }
+        // concatenate all the results of the batches
+        const reference = tf.concat(allY); // this is the ground truth
+        const predictions = tf.concat(allX); // this is the prediction our model is guessing
+        // console.log("this is the ground truth: ",  reference.dataSync())
+        // console.log("This is the prediction our model is guessing: ",  predictions.dataSync())
+        // only if we concatenated more than one tensor for preference and reference
+        if (iterations !== 1) {
+            for (let i = 0; i < allX.length; i++) {
+                allX[i].dispose();
+                allY[i].dispose();
+            }
+        }
+        //  console.log("Lengtth: ", await reference.dataSync().length)  
+        // const accuracyperclass=[];
+        // const reference_aux= await reference.dataSync();
+        // const prediction_aux= await predictions.dataSync();
+        // console.log( predictions.dataSync());
+        // reference_aux.forEach((element, index) => {
+        //   if()
+        // });  
+        return { reference, predictions };
+    }
+} //end of class
+/***Support methods (helpers) */
+const isTensor = (c) => typeof c.dataId === 'object' && typeof c.shape === 'object';
+/**
+ * Converts an integer into its one-hot representation and returns
+ * the data as a JS Array.
+ */
+function flatOneHot(label, numClasses) {
+    const labelOneHot = new Array(numClasses).fill(0);
+    labelOneHot[label] = 1;
+    return labelOneHot;
+}
+/**
+ * Shuffle an array of Float32Array or Samples using Fisher-Yates algorithm
+ * Takes an optional seed value to make shuffling predictable
+ */
+function fisherYates(array, seed) {
+    const length = array.length;
+    // need to clone array or we'd be editing original as we goo
+    const shuffled = array.slice();
+    for (let i = (length - 1); i > 0; i -= 1) {
+        let randomIndex;
+        if (seed) {
+            randomIndex = Math.floor(seed() * (i + 1));
+        }
+        else {
+            randomIndex = Math.floor(Math.random() * (i + 1));
+        }
+        [shuffled[i], shuffled[randomIndex]] = [shuffled[randomIndex], shuffled[i]];
+    }
+    return shuffled;
+}
+
 class DisplayPanelComponent {
     constructor() {
         this.classes = [];
     }
     loadImages(number_of_species, classes_names, options) {
         this.classes_names = classes_names;
+        this.number_of_samples_per_class = number_of_species;
         this.add_species(number_of_species, options);
     }
     add_species(number_of_species, options) {
@@ -47,17 +842,42 @@ class DisplayPanelComponent {
     }
     add_images(name, number_of_species, options) {
         const class_add = [];
-        for (let i = 1; i < number_of_species; i++) {
-            class_add.push(`${options.base}/${name}/${options.file_name} ${i}.${options.file_extension}`);
+        for (let i = 0; i < number_of_species; i++) {
+            class_add.push(`${options.base}/${name}/${options.file_name} ${i + 1}.${options.file_extension}`);
         }
         this.classes.push({ name: name, images: class_add });
     }
+    async addexamples() {
+        //This is needed to make sure it gives time for the images to upload
+        //The images upload very fast, what makes this method execute before the images are on HTML
+        //It can be removed if somehow this method is just called after the images are available.
+        // console.log("Loading examples as tensors....")
+        await this.delay(0);
+        for (let i = 0; i < this.classes_names.length; i++) {
+            await this.add_example(this.classes_names[i], this.number_of_samples_per_class);
+        }
+    }
+    async add_example(name, number_of_species) {
+        const class_add = [];
+        // console.log(name)
+        for (let i = 0; i < number_of_species; i++) {
+            //Collecting the images from HTML
+            const aux = document.getElementById(`class-${name}-${i}`);
+            //Adding the example
+            const index = this.classes_names.findIndex((elem) => elem === name);
+            await TeachableMobileNet.addExample(index, name, aux);
+        }
+        // this.classes.push({name: name, images: class_add})  
+    }
+    delay(ms) {
+        return new Promise((resolve) => setTimeout(resolve, ms));
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: DisplayPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: DisplayPanelComponent, isStandalone: true, selector: "neuroevolution-display-panel", ngImport: i0, template: "<div *ngFor=\"let class of classes; index as i\">\r\n  <h1>{{class.name}}</h1>\r\n  <img  *ngFor=\"let item of class.images; index as i\" [src]=\"item\" width=\"10%\" height=\"10%\" [id]=\"'class-1-' + i\" crossorigin=\"anonymous\" >\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: DisplayPanelComponent, isStandalone: true, selector: "neuroevolution-display-panel", ngImport: i0, template: "<div *ngFor=\"let class of classes; index as i\">\r\n  <h1>{{class.name}}</h1>\r\n  <img  *ngFor=\"let item of class.images; index as i\" [src]=\"item\" width=\"224\" height=\"224\" [id]=\"'class-' + class.name + '-' + i\" crossorigin=\"anonymous\" >\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: DisplayPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'neuroevolution-display-panel', standalone: true, imports: [CommonModule], template: "<div *ngFor=\"let class of classes; index as i\">\r\n  <h1>{{class.name}}</h1>\r\n  <img  *ngFor=\"let item of class.images; index as i\" [src]=\"item\" width=\"10%\" height=\"10%\" [id]=\"'class-1-' + i\" crossorigin=\"anonymous\" >\r\n</div>\r\n" }]
+            args: [{ selector: 'neuroevolution-display-panel', standalone: true, imports: [CommonModule], template: "<div *ngFor=\"let class of classes; index as i\">\r\n  <h1>{{class.name}}</h1>\r\n  <img  *ngFor=\"let item of class.images; index as i\" [src]=\"item\" width=\"224\" height=\"224\" [id]=\"'class-' + class.name + '-' + i\" crossorigin=\"anonymous\" >\r\n</div>\r\n" }]
         }] });
 
 /*