zhangqi
/
swOperation


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
							<!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>