163 lines
4.5 KiB
HTML
163 lines
4.5 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Linesearch Gradient Example</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="">
|
|
<meta name="author" content="Ben Frederickson">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
|
|
<style>
|
|
|
|
.ticks {
|
|
font: 10px sans-serif;
|
|
}
|
|
|
|
.track,
|
|
.track-inset,
|
|
.track-overlay {
|
|
stroke-linecap: round;
|
|
}
|
|
|
|
.track {
|
|
stroke: #000;
|
|
stroke-opacity: 0.3;
|
|
stroke-width: 10px;
|
|
}
|
|
|
|
.track-inset {
|
|
stroke: #ddd;
|
|
stroke-width: 8px;
|
|
}
|
|
|
|
.track-overlay {
|
|
pointer-events: stroke;
|
|
stroke-width: 50px;
|
|
cursor: crosshair;
|
|
}
|
|
|
|
.handle {
|
|
fill: #fff;
|
|
stroke: #000;
|
|
stroke-opacity: 0.5;
|
|
stroke-width: 1.25px;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<div class = "row"><div class="col-md-6 col-md-offset-3">
|
|
|
|
<h3> Wolfe Line Search Example </h3>
|
|
<hr>
|
|
|
|
<p> This graph attempts to show how a Wolfe Line Search works.
|
|
The goal here is to move downwards along the gradient so that
|
|
the loss is reduced sufficiently (controlled by the c1 parameter)
|
|
and also that the slope of the loss is decreased sufficiently (controlled by the
|
|
c2 parameter). Making sure the slope decreases sufficiently ensures that
|
|
we don't take too many short steps, and is usually the more important parameter
|
|
here. </p>
|
|
|
|
<p>
|
|
The goal here isn't to exactly find the best point along the line, but to
|
|
cheaply find a good enough point. The black dots represent points that were calculated as part of doing the line
|
|
search. Minimizing the total number of samples taken while still converging
|
|
quickly is the goal here:</p>
|
|
|
|
<div id ="linesearch" >
|
|
<div style="text-align:center"><div style="display:inline-block;">
|
|
<h4>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
|
<span class="function_sig">
|
|
\(f(x, y) \)
|
|
</span>
|
|
<span class="caret"></span>
|
|
</button>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li><a class="function_himmelblau">
|
|
\((x^2 + y - 11)^2 + (x+y^2 -7)^2\)
|
|
</a></li>
|
|
<li><a class="function_flower">
|
|
\(x^2 + y^2 + x \sin \left( y \right) + y \sin \left( x \right) \)
|
|
</a></li>
|
|
<li><a class="function_banana">
|
|
\((1-x)^2 + 100 (y - x^2) ^2\)
|
|
</a></li>
|
|
<li><a class="function_matyas">
|
|
\(.26 (x^2 + y^2) + .48 x y \)
|
|
</a></li>
|
|
</ul>
|
|
</div>
|
|
<span>\(=\)</span>
|
|
<span class="function_label">
|
|
\((1-x)^2 + 100 (y - x^2) ^2\)
|
|
</span>
|
|
</h4>
|
|
</div></div>
|
|
|
|
<div id="vis"></div>
|
|
<div class="row">
|
|
<form class="form-inline" role="form">
|
|
<div class="form-group col-xs-6 col-md-6">
|
|
<div style="text-align:center"><div style="display:inline-block;">
|
|
<label class="r-only" for="c1">C1
|
|
<span id="c1value">= 0.00001</span>
|
|
</label>
|
|
</div></div>
|
|
<div id="c1"></div>
|
|
</div>
|
|
<div class="form-group col-xs-6 col-md-6">
|
|
<div style="text-align:center"><div style="display:inline-block;">
|
|
<label class="r-only" for="c2">C2
|
|
<span id="c2value">= 0.1</span>
|
|
</label>
|
|
</div></div>
|
|
<div id="c2"></div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div style="text-align:center"><div style="display:inline-block;">
|
|
<div class="row">
|
|
<div class ="iterations"></div>
|
|
</div>
|
|
</div></div>
|
|
</div>
|
|
|
|
<hr>
|
|
<br>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>
|
|
<script src="../build/fmin.js"></script>
|
|
<script src="../build/fmin_vis.js"></script>
|
|
|
|
<script>
|
|
var line_search_plot = new fmin_vis.LineSearchContour(d3.select("#linesearch"));
|
|
</script>
|
|
|
|
<script type="text/x-mathjax-config">
|
|
MathJax.Hub.Config({
|
|
showMathMenu: false,
|
|
extensions: ["tex2jax.js"],
|
|
jax: ["input/TeX", "output/HTML-CSS"],
|
|
tex2jax: {
|
|
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
|
|
displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
|
|
processEscapes: true
|
|
},
|
|
"HTML-CSS": { availableFonts: ["TeX"] }
|
|
});
|
|
</script>
|
|
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js"></script>
|
|
</html>
|