@tiki720/

Language Detection

HTML, CSS, JS

Neural net made to tell the difference between English and Finnish

fork
loading
Files
  • index.html
  • Charting.js
  • Data.js
  • Functions.js
  • NN.js
  • Website.js
index.html
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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Neural Network</title>
  </head>
	<style>
/* The container */
.container {
    display: block;
    position: relative;
    padding-left: 25px;
    margin: 7px 0px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 16px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
    background-color: #4CAF50;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
input {
		font-family: Arial, Helvetica, sans-serif;
		padding: 3px 10px;
		margin: 2px 0px;
		display: inline-block;
		border: 2px solid #999999;
		box-sizing: border-box;
    background-color: #fcfcfc;
    font-weight:bold;
    color: #4d4d4d;
}
button {
		font-family: Arial, Helvetica, sans-serif;
		border: none;
    color: white;
    padding: 2px 2px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    cursor: pointer;
}
p {
font-family: Arial, Helvetica, sans-serif;
}
</style>
  <body onload="x=0;y=0;drawChart();drawGraph();">
		<button style="background-color: #4CAF50;width: 260px; position: absolute; left: 6px; top: 10px;" name="start" id="start" onClick="run = true; this.disabled=true; Training(); this.innerHTML = 'Running...';">Train the Network</button>
		<button style="background-color: #7a7ab8;width: 60px; position: absolute; left: 141px; top: 35px;" onClick="Save();">Save</button>
		<button style="background-color: #7a7ab8;width: 60px; position: absolute; left: 206px; top: 35px;" onClick="Test();">Test</button><br>
		<button style="background-color: #999999;width: 130px; position: absolute; left: 6px; top: 35px;" onClick="Create();">Test to Console</button><br><br>
		<input style="width: 7em" type="text" name="WordE" id="WordE" value="state" maxlength="10">	English (Blue) input word</input><br>
		<input style="width: 7em" type="text" name="WordF" id="WordF" value="taika" maxlength="10">	Finnish (Red) input word</input><br>
		<input style="width: 7em" type="number" name="number" id="number" value="100" max="200" min="10" step="10">	Training Speed (mil-sec)<br>
		<input style="width: 7em" type="number" name="rate" id="rate" value="0.03" max="0.07" min="0" step="0.01">	Training Rate<br>		
    <label class="container">
      <input name="train" id="train" value="true" type="checkbox" checked="checked">Train with the Input words</input>
      <span class="checkmark"></span>
    </label>
    <label id="p1">Press Train to run the Neural Network</label><br>
		<label id="p2">Input new words to see the result</label><br>
    <label id="p3">Cycles : N/A</label><br>
    <br>
		<canvas onmousemove="CoordsA(event)" onmouseout="clearCoordsA()" onclick="smallChart *= -1;drawChart(0);" style="background-color: #fcfcfc; border: 2px solid #999999;" id="myChart" width="260" height="100"></canvas><br>
    <canvas onmousemove="CoordsB(event)" onmouseout="clearCoordsB()" onclick="smallGraph *= -1;drawGraph(0);"style="background-color: #fcfcfc; border: 2px solid #999999;" id="myGraph" width="260" height="100"></canvas>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/synaptic/1.1.4/synaptic.js"></script>
    <script src="Data.js"></script>
    <script src="Charting.js"></script>
    <script src="Functions.js"></script>
    <script src="Website.js"></script>
		<script src="NN.js"></script>
  </body>
</html>
result
console