-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
126 lines (107 loc) · 4.88 KB
/
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
<!doctype html>
<html lang="en">
<head>
<title>Single Perceptron and Adaline Neuron</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/style.css" >
</head>
<body class="container">
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark navbar-dark">
<div class="container">
<a class="navbar-brand" href="#">Single Artificial Neuron</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link" href="#" data-toggle="modal" data-target=".bd-example-modal-sm">Explanation</a>
<a class="nav-item nav-link" href="gradient.html" >Gradient Descent</a>
</div>
</div>
</div>
</nav>
<div class="row" id="content">
<div class="col-12 col-md-8">
<div class="card">
<div id="myPlot"><!-- Plotly chart will be drawn inside this DIV --></div>
<div id="demo"></div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card border-light">
<div class="card-header">Options</div>
<div class="card-body">
<form>
<div class="card text-white bg-info">
<div class="card-header">Algorithm</div>
<div class="card-body">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="algorithm" id="algorithm1" value="perceptron" checked>
Perceptron
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="algorithm" id="algorithm2" value="adaline">
Adaline
</label>
</div>
</div>
</div>
<hr />
<div class="form-group">
<label for="alphaInput">Learning Rate</label>
<input type="text" class="form-control" id="alphaInput" placeholder="0.1">
</div>
<div class="form-group">
<label for="epsilonInput">Epsilon</label>
<input type="text" class="form-control" id="epsilonInput" placeholder="0.000001">
</div>
<div class="form-group">
<label for="maxIntInput">Max. number of epochs</label>
<input type="text" class="form-control" id="maxIntInput" placeholder="100">
</div>
<div class="form-group">
<label for="delayInput">Delay (ms)</label>
<input type="text" class="form-control" id="delayInput" placeholder="100">
</div>
<button type="button" class="btn btn-primary" onclick="solve()">Solve</button>
<br />
<hr />
</form>
</div>
</div>
</div>
</div>
<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Explanation</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>This page presents a visual example of a single artificial neuron fiting over the logical port 'AND' problem.</p>
<p>The parameters at 'Options' section can be used to control Perceptron or Adaline behavior. </p>
<p>The initial values of weights (W) and bias are randomly generated, then, they are updated according to the selected algorithm.</p>
</div>
</div>
</div>
</div>
<div class="fixed-bottom bg-light" id="footer">
<div class="container">I4soft - Intelligence for Software</div>
</div>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="assets/js/main.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>
</html>