From b0cae7053433cd801b8b0881d4bee1d2b02500bc Mon Sep 17 00:00:00 2001
From: jrtechs <jrtechs@hotmail.com>
Date: Sat, 23 Feb 2019 15:57:59 -0500
Subject: [PATCH] Updated system to embed custom html files in a blog post.

---
 blog/renderBlogPost.js                        |  13 +
 .../html/lets-build-a-genetic-algorithm.html  | 485 ++++++++++++++++++
 .../lets-build-a-genetic-algorithm.md         |   5 +
 3 files changed, 503 insertions(+)
 create mode 100644 blogContent/posts/data-science/html/lets-build-a-genetic-algorithm.html
 create mode 100644 blogContent/posts/data-science/lets-build-a-genetic-algorithm.md

diff --git a/blog/renderBlogPost.js b/blog/renderBlogPost.js
index b20178e..eb076b3 100644
--- a/blog/renderBlogPost.js
+++ b/blog/renderBlogPost.js
@@ -127,6 +127,19 @@ module.exports=
                     }
 
 
+                    var regExp = /\<customHTML .*?>/;
+                    while (result.search(regExp) != -1)
+                    {
+                        const pathName =  "blogContent/posts/" + categoryURL + "/html/"
+                            + postURL + ".html";
+
+                        var htmlContent = utils.getFileContents(pathName).toString();
+                        console.log(htmlContent);
+
+                        result = result.split("<customHTML />").join(htmlContent);
+                    }
+
+
                     if(blocks == -1)
                         resolve(result);
 
diff --git a/blogContent/posts/data-science/html/lets-build-a-genetic-algorithm.html b/blogContent/posts/data-science/html/lets-build-a-genetic-algorithm.html
new file mode 100644
index 0000000..ec20828
--- /dev/null
+++ b/blogContent/posts/data-science/html/lets-build-a-genetic-algorithm.html
@@ -0,0 +1,485 @@
+<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
+<script
+        src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
+        integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
+        crossorigin="anonymous">
+</script>
+<script>
+    class Gene
+    {
+        /**
+         * Constructs a new Gene to store in a chromosome.
+         * @param min minimum value that this gene can store
+         * @param max value this gene can possibly be
+         * @param value normalized value
+         */
+        constructor(min, max, value)
+        {
+            this.min = min;
+            this.max = max;
+            this.value = value;
+        }
+        /**
+         * De-normalizes the value of the gene
+         * @returns {*}
+         */
+        getRealValue()
+        {
+            return (this.max - this.min) * this.value + this.min;
+        }
+        getValue()
+        {
+            return this.value;
+        }
+        setValue(val)
+        {
+            this.value = val;
+        }
+        makeClone()
+        {
+            return new Gene(this.min, this.max, this.value);
+        }
+        makeRandomGene()
+        {
+            return new Gene(this.min, this.max, Math.random());
+        }
+    }
+    class Chromosome
+    {
+        /**
+         * Constructs a chromosome by making a copy of
+         * a list of genes.
+         * @param geneArray
+         */
+        constructor(geneArray)
+        {
+            this.genes = [];
+            for(let i = 0; i < geneArray.length; i++)
+            {
+                this.genes.push(geneArray[i].makeClone());
+            }
+        }
+        getGenes()
+        {
+            return this.genes;
+        }
+        /**
+         * Mutates a random gene.
+         */
+        mutate()
+        {
+            this.genes[Math.round(Math.random() * (this.genes.length-1))].setValue(Math.random());
+        }
+        /**
+         * Creates a totally new chromosome with same
+         * genetic structure as this chromosome but different
+         * values.
+         * @returns {Chromosome}
+         */
+        createRandomChromosome()
+        {
+            let geneAr = [];
+            for(let i = 0; i < this.genes.length; i++)
+            {
+                geneAr.push(this.genes[i].makeRandomGene());
+            }
+            return new Chromosome(geneAr);
+        }
+    }
+    /**
+     * Mates two chromosomes using the blending method
+     * and returns a list of 2 offspring.
+     * @param father
+     * @param mother
+     * @returns {Chromosome[]}
+     */
+    const breed = function(father, mother)
+    {
+        let son = new Chromosome(father.getGenes());
+        let daughter = new Chromosome(mother.getGenes());
+        for(let i = 0;i < son.getGenes().length; i++)
+        {
+            let blendCoef = Math.random();
+            blendGene(son.getGenes()[i], daughter.getGenes()[i], blendCoef);
+        }
+        return [son, daughter];
+    };
+    /**
+     * Blends two genes together based on a random blend
+     * coefficient.
+     **/
+    const blendGene = function(gene1, gene2, blendCoef)
+    {
+        let value1 = (blendCoef * gene1.getValue()) +
+            (gene2.getValue() * (1- blendCoef));
+        let value2 = ((1-blendCoef) * gene1.getValue()) +
+            (gene2.getValue() * blendCoef);
+        gene1.setValue(value1);
+        gene2.setValue(value2);
+    };
+    /**
+     * Helper function to sort an array
+     *
+     * @param prop name of JSON property to sort by
+     * @returns {function(*, *): number}
+     */
+    function predicateBy(prop)
+    {
+        return function(a,b)
+        {
+            var result;
+            if(a[prop] > b[prop])
+            {
+                result =  1;
+            }
+            else if(a[prop] < b[prop])
+            {
+                result = -1;
+            }
+            return result;
+        }
+    }
+    /**
+     * Function which computes the fitness of everyone in the
+     * population and returns the most fit survivors. Method
+     * known as elitism.
+     *
+     * @param population
+     * @param keepNumber
+     * @param fitnessFunction
+     * @returns {{average: number,
+     * survivors: Array, bestFit: Chromosome }}
+     */
+    const naturalSelection = function(population, keepNumber, fitnessFunction)
+    {
+        let fitnessArray = [];
+        let total = 0;
+        for(let i = 0; i < population.length; i++)
+        {
+            const fitness = fitnessFunction(population[i]);
+            console.log(fitness);
+            fitnessArray.push({fit:fitness, chrom: population[i]});
+            total+= fitness;
+        }
+        fitnessArray.sort(predicateBy("fit"));
+        let survivors = [];
+        let bestFitness = fitnessArray[0].fit;
+        let bestChromosome = fitnessArray[0].chrom;
+        for(let i = 0; i < keepNumber; i++)
+        {
+            survivors.push(fitnessArray[i].chrom);
+        }
+        return {average: total/population.length, survivors: survivors, bestFit: bestFitness, bestChrom: bestChromosome};
+    };
+    /**
+     * Randomly  everyone in the population
+     *
+     * @param population
+     * @param desiredPopulationSize
+     */
+    const matePopulation = function(population, desiredPopulationSize)
+    {
+        const originalLength = population.length;
+        while(population.length < desiredPopulationSize)
+        {
+            let index1 = Math.round(Math.random() * (originalLength-1));
+            let index2 = Math.round(Math.random() * (originalLength-1));
+            if(index1 !== index2)
+            {
+                const babies = breed(population[index1], population[index2]);
+                population.push(babies[0]);
+                population.push(babies[1]);
+            }
+        }
+    };
+    /**
+     * Randomly mutates the population
+     **/
+    const mutatePopulation = function(population, mutatePercentage)
+    {
+        if(population.length >= 2)
+        {
+            let mutations = mutatePercentage *
+                population.length *
+                population[0].getGenes().length;
+            for(let i = 0; i < mutations; i++)
+            {
+                population[i].mutate();
+            }
+        }
+        else
+        {
+            console.log("Error, population too small to mutate");
+        }
+    };
+    /**
+     * Introduces x random chromosomes to the population.
+     * @param population
+     * @param immigrationSize
+     */
+    const newBlood = function(population, immigrationSize)
+    {
+        for(let i = 0; i < immigrationSize; i++)
+        {
+            let geneticChromosome = population[0];
+            population.push(geneticChromosome.createRandomChromosome());
+        }
+    };
+    let costx = Math.random() * 10;
+    let costy = Math.random() * 10;
+    /** Defines the cost as the "distance" to a 2-d point.
+     * @param chromosome
+     * @returns {number}
+     */
+    const basicCostFunction = function(chromosome)
+    {
+        return Math.abs(chromosome.getGenes()[0].getRealValue() - costx) +
+            Math.abs(chromosome.getGenes()[1].getRealValue() - costy);
+    };
+    /**
+     * Creates a totally random population based  on a desired size
+     * and a prototypical chromosome.
+     *
+     * @param geneticChromosome
+     * @param populationSize
+     * @returns {Array}
+     */
+    const createRandomPopulation = function(geneticChromosome, populationSize)
+    {
+        let population = [];
+        for(let i = 0; i < populationSize; i++)
+        {
+            population.push(geneticChromosome.createRandomChromosome());
+        }
+        return population;
+    };
+    /**
+     * Runs the genetic algorithm by going through the processes of
+     * natural selection, mutation, mating, and immigrations. This
+     * process will continue until an adequately performing chromosome
+     * is found or a generation threshold is passed.
+     *
+     * @param geneticChromosome Prototypical chromosome: used so algo knows
+     *                            what the dna of the population looks like.
+     * @param costFunction Function which defines how bad a Chromosome is
+     * @param populationSize Desired population size for population
+     * @param maxGenerations Cut off level for number of generations to run
+     * @param desiredCost Sufficient cost to terminate program at
+     * @param mutationRate Number between [0,1] representing proportion of genes
+     * to mutate each generation
+     * @param keepNumber Number of Organisms which survive each generation
+     * @param newBloodNumber Number of random immigrants to introduce into
+     * the population each generation.
+     * @returns {*}
+     */
+    const runGeneticOptimization = function(geneticChromosome, costFunction,
+                                            populationSize, maxGenerations,
+                                            desiredCost, mutationRate, keepNumber,
+                                            newBloodNumber)
+    {
+        let population = createRandomPopulation(geneticChromosome, populationSize);
+        let generation = 0;
+        let bestCost = Number.MAX_VALUE;
+        let bestChromosome = geneticChromosome;
+        do
+        {
+            matePopulation(population, populationSize);
+            newBlood(population, newBloodNumber);
+            mutatePopulation(population, mutationRate);
+            let generationResult = naturalSelection(population, keepNumber, costFunction);
+            if(bestCost > generationResult.bestFit)
+            {
+                bestChromosome = generationResult.bestChrom;
+                bestCost = generationResult.bestFit;
+            }
+            population = generationResult.survivors;
+            generation++;
+            console.log("Generation " + generation + " Best Cost: " + bestCost);
+        }while(generation < maxGenerations && bestCost > desiredCost);
+        return bestChromosome;
+    };
+    /**
+     * Ugly globals used to keep track of population state for the graph.
+     */
+    let genericChromosomeG, costFunctionG,
+        populationSizeG, maxGenerationsG,
+        desiredCostG, mutationRateG, keepNumberG,
+        newBloodNumberG, populationG, generationG,
+        bestCostG = Number.MAX_VALUE, bestChromosomeG = genericChromosomeG;
+    const runGeneticOptimizationForGraph = function()
+    {
+        let generationResult = naturalSelection(populationG, keepNumberG, costFunctionG);
+        stats.push([generationG, generationResult.bestFit, generationResult.average]);
+        if(bestCostG > generationResult.bestFit)
+        {
+            bestChromosomeG = generationResult.bestChrom;
+            bestCostG = generationResult.bestFit;
+        }
+        populationG = generationResult.survivors;
+        generationG++;
+        console.log("Generation " + generationG + " Best Cost: " + bestCostG);
+        console.log(generationResult);
+        matePopulation(populationG, populationSizeG);
+        newBlood(populationG, newBloodNumberG);
+        mutatePopulation(populationG, mutationRateG);
+        createGraph();
+    };
+    let stats = [];
+    const createGraph = function()
+    {
+        var dataPoints = [];
+        console.log(dataPoints);
+        var data = new google.visualization.DataTable();
+        data.addColumn('number', 'Gene 1');
+        data.addColumn('number', 'Gene 2');
+        for(let i = 0; i < populationG.length; i++)
+        {
+            data.addRow([populationG[i].getGenes()[0].getRealValue(),
+                populationG[i].getGenes()[1].getRealValue()]);
+        }
+        var options = {
+            title: 'Genetic Evolution On Two Genes Generation: ' + generationG,
+            hAxis: {title: 'Gene 1', minValue: 0, maxValue: 10},
+            vAxis: {title: 'Gene 2', minValue: 0, maxValue: 10},
+        };
+        var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
+        chart.draw(data, options);
+        //line chart stuff
+        var line_data = new google.visualization.DataTable();
+        line_data.addColumn('number', 'Generation');
+        line_data.addColumn('number', 'Best');
+        line_data.addColumn('number', 'Average');
+        line_data.addRows(stats);
+        console.log(stats);
+        var lineChartOptions = {
+            hAxis: {
+                title: 'Generation'
+            },
+            vAxis: {
+                title: 'Cost'
+            },
+            colors: ['#AB0D06', '#007329']
+        };
+        var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
+        chart.draw(line_data, lineChartOptions);
+    };
+    let gene1 = new Gene(1,10,10);
+    let gene2 = new Gene(1,10,0.4);
+    let geneList = [gene1, gene2];
+    let exampleOrganism = new Chromosome(geneList);
+    genericChromosomeG = exampleOrganism;
+    costFunctionG = basicCostFunction;
+    populationSizeG = 100;
+    maxGenerationsG = 30;
+    desiredCostG = 0.00001;
+    mutationRateG = 0.3;
+    keepNumberG = 30;
+    newBloodNumberG = 10;
+    generationG = 0;
+    function verifyForm()
+    {
+        if(Number($("#populationSize").val()) <= 1)
+        {
+            alert("Population size must be greater than one.");
+            return false;
+        }
+        if(Number($("#mutationRate").val()) > 1 ||
+            Number($("#mutationRate").val()) < 0)
+        {
+            alert("Mutation rate must be between zero and one.");
+            return false;
+        }
+        if(Number($("#survivalSize").val()) < 0)
+        {
+            alert("Survival size can't be less than one.");
+            return false;
+        }
+        if(Number($("#newBlood").val()) < 0)
+        {
+            alert("New organisms can't be a negative number.");
+            return false;
+        }
+        return true;
+    }
+    function resetPopulation()
+    {
+        if(verifyForm())
+        {
+            stats = [];
+            autoRunning = false;
+            $("#runAutoOptimizer").val("Auto Run");
+            populationSizeG = $("#populationSize").val();
+            mutationRateG = $("#mutationRate").val();
+            keepNumberG = $("#survivalSize").val();
+            newBloodNumberG = $("#newBlood").val();
+            generationG = 0;
+            populationG = createRandomPopulation(genericChromosomeG, populationSizeG);
+            createGraph();
+        }
+    }
+    populationG = createRandomPopulation(genericChromosomeG, populationSizeG);
+    window.onload = function (){
+        google.charts.load('current', {packages: ['corechart', 'line']});
+        google.charts.load('current', {'packages':['corechart']}).then(function()
+        {
+            createGraph();
+        })
+    };
+    let autoRunning = false;
+    function runAutoOptimizer()
+    {
+        if(autoRunning === true)
+        {
+            runGeneticOptimizationForGraph();
+            setTimeout(runAutoOptimizer, 1000);
+        }
+    }
+    function startStopAutoRun()
+    {
+        autoRunning = !autoRunning;
+        if(autoRunning)
+        {
+            $("#runAutoOptimizer").val("Stop Auto Run");
+        }
+        else
+        {
+            $("#runAutoOptimizer").val("Resume Auto Run");
+        }
+        runAutoOptimizer();
+    }
+</script>
+<div id="chart_div"></div>
+<div id="line_chart"></div>
+<input class='btn btn-primary' id="runOptimizer" onclick='runGeneticOptimizationForGraph()' type="button" value="Next Generation">
+<input class='btn btn-primary' id="runAutoOptimizer" onclick='startStopAutoRun()' type="button" value="Auto Run">
+<br>
+<br>
+<div class="card">
+    <div class="card-header">
+        <h2>Population Variables</h2>
+    </div>
+    <form class="card-body">
+        <div class="row p-2">
+            <div class="col">
+                <label for="populationSize">Population Size</label>
+                <input type="text" class="form-control" value="100" id="populationSize" placeholder="Population Size" required>
+            </div>
+            <div class="col">
+                <label for="populationSize">Survival Size</label>
+                <input type="text" class="form-control" value="20" id="survivalSize" placeholder="Survival Size" required>
+            </div>
+        </div>
+        <div class="row p-2">
+            <div class="col">
+                <label for="populationSize">Mutation Rate</label>
+                <input type="text" class="form-control" value="0.03" id="mutationRate" placeholder="Mutation Rate" required>
+            </div>
+            <div class="col">
+                <label for="populationSize">New Organisms Per Generation</label>
+                <input type="text" class="form-control" value="5" id="newBlood" placeholder="New Organisms" required>
+            </div>
+        </div>
+        <br>
+        <input class='btn btn-primary' id="reset" onclick='resetPopulation()' type="button" value="Reset Population">
+    </form>
+</div>
\ No newline at end of file
diff --git a/blogContent/posts/data-science/lets-build-a-genetic-algorithm.md b/blogContent/posts/data-science/lets-build-a-genetic-algorithm.md
new file mode 100644
index 0000000..1bd7563
--- /dev/null
+++ b/blogContent/posts/data-science/lets-build-a-genetic-algorithm.md
@@ -0,0 +1,5 @@
+# Background
+
+<customHTML />
+
+# Set Up
\ No newline at end of file