Skip to content

Commit 16632ac

Browse files
r7rohanr7rohan
authored
Update index.html
1 parent d0ce9fe commit 16632ac

File tree

1 file changed

+91
-99
lines changed

1 file changed

+91
-99
lines changed

‎Logistic Regression/index.html

Lines changed: 91 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,44 @@
11
<html>
2-
3-
<head>
4-
<title>VisualML | Logistic Regression</title>
5-
<link rel="shortcut icon" href="../img/favicon.ico" type="image/x-icon">
6-
<style>
7-
label {
8-
font-size: 3vh;
9-
}
10-
11-
input {
12-
font-size: 3vh;
13-
}
14-
15-
select {
16-
font-size: 3vh;
17-
}
18-
19-
button {
20-
border-radius: 20px;
21-
border-color: #00FFFF;
22-
background-color: #CCFFFF;
23-
font-size: 3vh;
24-
}
25-
26-
pre {
27-
overflow-x: auto;
28-
white-space: pre-wrap;
29-
white-space: -moz-pre-wrap;
30-
white-space: -pre-wrap;
31-
white-space: -o-pre-wrap;
32-
word-wrap: break-word;
33-
}
34-
</style>
35-
<script>
36-
function update(d, c) {
37-
document.getElementById(c).innerHTML = Number(document.getElementById(d).value);
38-
}
39-
</script>
40-
</head>
41-
42-
<body style="text-align:center;background-color:#EFEFEF;margin-top:0%;">
43-
<p style="font-size:8vh;color:#DD3333;background-color:#FFEFEFCC;width:100%;position:fixed;margin-top:0%;padding-top:0.6%;">LOGISTIC REGRESSION</p>
44-
<div id="body" style="text-align:center;width:60%;margin-left:20%;background-color:white;">
45-
<br>
46-
47-
48-
<br><br><br>
49-
50-
<pre style="text-align:left;margin-left:7%; width:86%; font-family:Times; font-size:1.3vw; color:#003333;">
2+
<head>
3+
<title>VisualML | Logistic Regression</title>
4+
<link rel="shortcut icon" href="../img/favicon.ico" type="image/x-icon">
5+
<style>
6+
label{
7+
font-size:3vh;
8+
}
9+
input{
10+
font-size:3vh;
11+
}
12+
select{
13+
font-size:3vh;
14+
}
15+
button{
16+
border-radius: 20px;
17+
border-color:#00FFFF;
18+
background-color: #CCFFFF;
19+
font-size:3vh;
20+
}
21+
pre {
22+
overflow-x: auto;
23+
white-space: pre-wrap;
24+
white-space: -moz-pre-wrap;
25+
white-space: -pre-wrap;
26+
white-space: -o-pre-wrap;
27+
word-wrap: break-word;
28+
}
29+
</style>
30+
<script>
31+
function update(d,c){
32+
document.getElementById(c).innerHTML=Number(document.getElementById(d).value);
33+
}
34+
</script>
35+
</head>
36+
<body style="text-align:center;background-color:#EFEFEF;margin-top:0%;">
37+
<p style="font-size:8vh;color:#DD3333;background-color:#FFEFEFCC;width:100%;position:fixed;margin-top:0%;padding-top:0.6%;">LOGISTIC REGRESSION</p>
38+
<div id="body" style="text-align:center;width:60%;margin-left:20%;background-color:white;">
39+
<br>
40+
<br><br><br>
41+
<pre style="text-align:left;margin-left:7%; width:86%; font-family:Times; font-size:1.3vw; color:#003333;">
5142
Logistic regression is a classification algorithm used to assign observations to a discrete set of
5243

5344
classes. Unlike linear regression which outputs continuous number values, logistic regression
@@ -72,57 +63,58 @@ <h3 style="background-color:#0000FF11">Decision Boundary</h3>
7263
To predict which class a data belongs, a threshold can be set. Based upon this threshold, the obtained estimated probability is classified into classes.
7364

7465
</pre>
75-
76-
<p style="font-family:fantasy; font-size:2.5vw;color:#334444;background-color:#77FF77">Visualization for decision boundary of 2 Classes</p>
77-
<div style="display:block;">
78-
<div style="width:20vw;margin-left:10vh;background-color:#EFEFEF;text-align:left;padding-left:3%;padding-top:3%;padding-bottom:2%;display:inline-block;float:left;">
79-
80-
<label for="d">Polynomial Degree:</label><label id="dg"> 3</label><br><br>
81-
<input type="range" id="d" name="points" min="1" max="11" onchange="update('d','dg');" value=3>
82-
<div style="height:4vh;"></div>
83-
84-
<label for="r">Lambda (reg):</label><label id="rg"> 0</label><br><br>
85-
<input type="range" id="r" name="points" min="0" max="20" onchange="update('r','rg');" value=0>
86-
<div style="height:4vh;"></div>
87-
88-
<label for="r">Learning Rate:(10 power) </label><label id="lg">0</label><br><br>
89-
<input type="range" id="l" name="points" min="-15" max="1" onchange="update('l','lg');" value=0>
90-
<div style="height:4vh;"></div>
91-
92-
<label for="data">Dataset:</label>
93-
<select name="cars" id="data">
94-
<option value="moon">Moons</option>
95-
<option value="circle">Circles</option>
96-
<option value="xor">XOR</option>
97-
<option value="gauss">Gauss</option>
98-
<option value="spiral">Spiral</option>
99-
<option value="all">All</option>
100-
</select>
101-
<div style="height:3vh;"></div>
102-
103-
<button id='train'>Train</button>
66+
<p style="font-family:fantasy; font-size:2.5vw;color:#334444;background-color:#77FF77">Visualization for decision boundary of 2 Classes</p>
67+
<div style="display:block;">
68+
<div style="width:20vw;margin-left:10vh;background-color:#EFEFEF;text-align:left;padding-left:3%;padding-top:3%;padding-bottom:2%;display:inline-block;float:left;" >
69+
<label for="d">Polynomial Degree:</label><label id="dg"> 7</label><br><br>
70+
<input type="range" id="d" name="points" min="1" max="11" onchange="update('d','dg');" value=7>
71+
<div style="height:4vh;"></div>
72+
<label for="r">Lambda (reg):</label><label id="rg"> 0</label><br><br>
73+
<input type="range" id="r" name="points" min="0" max="20" onchange="update('r','rg');" value=0>
74+
<div style="height:4vh;"></div>
75+
<label for="r">Learning Rate:(10 power) </label><label id="lg">0</label><br><br>
76+
<input type="range" id="l" name="points" min="-7" max="3" onchange="update('l','lg');" value=0>
77+
<div style="height:4vh;"></div>
78+
<label for="data">Dataset:</label>
79+
<select name="cars" id="data" >
80+
<option value="spiral">Spiral</option>
81+
<option value="moon">Moons</option>
82+
<option value="circle">Circles</option>
83+
<option value="xor">XOR</option>
84+
<option value="gauss">Gauss</option>
85+
<option value="all">All</option>
86+
</select>
87+
<div style="height:3vh;"></div>
88+
<button id='train' >Train</button>
10489
</div>
105-
<img src="logreg.jpg" style="height:33vh;width:30vw;padding-bottom:3%;border:solid 3px #EFEFEF;"></img>
106-
<br><br><br><br>
90+
<div style="height:29vh;width:30vw;padding-bottom:3%;"></div>
91+
92+
<br><br><br><br>
93+
10794
<div style="float:right;margin-right:3vw;">
108-
<label for="res">Resol:</label>
109-
<input id='res' value='100'></input><br><br>
110-
<label for="epoch">Epoch:</label>
111-
<input id='epoch' value='100'></input>
95+
<label for="res">Resol:</label>
96+
<input id='res' value='130'></input><br><br>
97+
<label for="epoch">Epoch:</label>
98+
<input id='epoch' value='50'></input>
11299
</div>
113-
</div>
114-
100+
</div>
101+
115102
<br>
116-
<div id="plt" style="clear:both;margin-top:15vh;font-family:fantasy; font-size:2.5vw;color:#334444;background-color:#FFFF00;">Plot Area</div>
117-
<div id="pl" style="height:60vh;width:50vw;margin-left:7vw;margin-top:5vh;display:none;"></div>
118-
<div style="font-family:fantasy; font-size:2.5vw;color:#334444;clear:both;margin-top:15vh;background-color:#FFFF00;">Loss Area</div>
119-
<div id='training' style="width:50vw;height:30vh;margin-left:7vw;display:none"></div>
120-
<br><br> DSG-IITR
121-
</div>
122-
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-vis@1.0.2/dist/tfjs-vis.umd.min.js"></script>
123-
<script src='https://cdnjs.cloudflare.com/ajax/libs/tensorflow/1.2.7/tf.min.js'></script>
124-
<script src="script.js" type="module"></script>
125-
126-
</body>
127-
128-
</html>
103+
104+
<div id="plt" style="clear:both;margin-top:15vh;font-family:fantasy; font-size:2.5vw;color:#334444;background-color:#FFFF00;">Plot Area</div>
105+
<div id="barc" style='background-color:#BBBBBB;height:30px;width:60%;margin-left:20%;display:none;margin-top:5%;'>
106+
<div id="bar" style='background-color:#3333FF;height:25px;width:0%;color:white;padding-top:5px;'>0%</div>
107+
</div>
108+
<div id="pl" style="height:60vh;width:50vw;margin-left:7vw;margin-top:5vh;display:none;"></div>
109+
<div style="font-family:fantasy; font-size:2.5vw;color:#334444;clear:both;margin-top:10vh;background-color:#FFFF00;">Loss Area</div>
110+
<br><br>
111+
112+
<div id='training' style="width:50vw;height:30vh;margin-left:7vw;display:none"></div>
113+
<br><br>
114+
DSG-IITR
115+
</div>
116+
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-vis@1.0.2/dist/tfjs-vis.umd.min.js"></script>
117+
<script src='https://cdnjs.cloudflare.com/ajax/libs/tensorflow/1.2.7/tf.min.js'></script>
118+
<script src="script.js" type="module"></script>
119+
</body>
120+
</html>

0 commit comments

Comments
 (0)