genetic-js/examples/string-solver-async.html at f9762c19ff18dedfabfdfbd437d0bd2f4e4d0c05 · subprotocol/genetic-js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Genetic.js String Solver</title>
	<script src="../lib/genetic.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>

<h1>Genetic String Solver</h1>

<textarea id="quote" style="width: 300px; height: 100px;">Insanity is doing the same thing over and over again and expecting different results</textarea>

<button id="solve">Solve</button>

<table id="results">
	<thead>
		<tr>
			<th>Generation</th>
			<th>Fitness</th>
			<th>Solution</th>
		</tr>
	</thead>
	<tbody style="font-family: monospace;">
	</tbody>
</table>

<script>

var genetic = Genetic.create();

genetic.optimize = Genetic.Optimize.Maximize;
genetic.select1 = Genetic.Select1.Tournament2;
genetic.select2 = Genetic.Select2.Tournament2;

genetic.seed = function() {

	function randomString(len) {
		var text = "";
		var charset = "abcdefghijklmnopqrstuvwxyz0123456789";
		for(var i=0;i<len;i++)
			text += charset.charAt(Math.floor(Math.random() * charset.length));

		return text;
	}

	// create random strings that are equal in length to solution
	return randomString(this.userData["solution"].length);
};

genetic.mutate = function(entity) {

	function replaceAt(str, index, character) {
		return str.substr(0, index) + character + str.substr(index+character.length);
	}

	// chromosomal drift
	var i = Math.floor(Math.random()*entity.length)
	return replaceAt(entity, i, String.fromCharCode(entity.charCodeAt(i) + (Math.floor(Math.random()*2) ? 1 : -1)));
};

genetic.crossover = function(mother, father) {

	// two-point crossover
	var len = mother.length;
	var ca = Math.floor(Math.random()*len);
	var cb = Math.floor(Math.random()*len);
	if (ca > cb) {
		var tmp = cb;
		cb = ca;
		ca = tmp;
	}

	var son = father.substr(0,ca) + mother.substr(ca, cb-ca) + father.substr(cb);
	var daughter = mother.substr(0,ca) + father.substr(ca, cb-ca) + mother.substr(cb);

	return [son, daughter];
};

genetic.fitness = function(entity) {
	var fitness = 0;

	var i;
	for (i=0;i<entity.length;++i) {
		// increase fitness for each character that matches
		if (entity[i] == this.userData["solution"][i])
			fitness += 1;

		// award fractions of a point as we get warmer
		fitness += (127-Math.abs(entity.charCodeAt(i) - this.userData["solution"].charCodeAt(i)))/50;
	}
    //To test async fitness functions
    return new Promise(function(resolve, reject){
        setTimeout(resolve.bind(null, fitness), 100);
    });
};

genetic.generation = function(pop, generation, stats) {
	// stop running once we've reached the solution
	return pop[0].entity != this.userData["solution"];
};

genetic.notification = function(pop, generation, stats, isFinished) {

	function lerp(a, b, p) {
		return a + (b-a)*p;
	}

	var value = pop[0].entity;
	this.last = this.last||value;

	if (pop != 0 && value == this.last)
		return;


	var solution = [];
	var i;
	for (i=0;i<value.length;++i) {
		var diff = value.charCodeAt(i) - this.last.charCodeAt(i);
		var style = "background: transparent;";
		if (diff > 0) {
			style = "background: rgb(0,200,50); color: #fff;";
		} else if (diff < 0) {
			style = "background: rgb(0,100,50); color: #fff;";
		}

		solution.push("<span style=\"" + style + "\">" + value[i] + "</span>");
	}

	var buf = "";
	buf += "<tr>";
	buf += "<td>" + generation + "</td>";
	buf += "<td>" + pop[0].fitness.toPrecision(5) + "</td>";
	buf += "<td>" + solution.join("") + "</td>";
	buf += "</tr>";
	$("#results tbody").prepend(buf);

	this.last = value;
};


$(document).ready(function () {
	$("#solve").click(function () {

		$("#results tbody").html("");

		var config = {
			"iterations": 4000
			, "size": 250
			, "crossover": 0.3
			, "mutation": 0.3
			, "skip": 20
		};

		var userData = {
			"solution": $("#quote").val()
		};

		genetic.evolve(config, userData);
	});
});

</script>


</body>
</html>