Skip to content

Commit

Permalink
Ch 3,4,5,6,21 - Add table of contents
Browse files Browse the repository at this point in the history 
* Ch 2 - Add table of contents and links to sention aimacode#98

* Ch - 2 Add table of contents and links to section - update to aimacode#98

* Remove navbar curved cornors

* Ch -3,4,5,6,21 Add table of contents and link to sections
  • Loading branch information
@toastmasters-snu @redblobgames
toastmasters-snu authored and redblobgames committed Aug 26, 2017
1 parent d2944ac commit db7a4bd
Show file tree
Hide file tree
Showing 5 changed files with 83 additions and 40 deletions.
18 changes: 11 additions & 7 deletions 21-Reinforcement-Learning/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,24 +6,24 @@
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/two.js/0.6.0/two.min.js"></script>
<script type="text/javascript" src="../main.js"></script>

<!-- D3 -->
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>

<!-- Helpers -->
<script type="text/javascript" src="./mdp.js"></script>
<script type="text/javascript" src="./policyEvaluation.js"></script>

<!-- Model -->
<script type="text/javascript" src="./pe_model.js"></script>

<!-- View -->
<script type="text/javascript" src="./pe_view.js"></script>

<!-- Controller -->
<script type="text/javascript" src="./interactive.js"></script>
<script type="text/javascript" src="./pe_controller.js"></script>

<!-- Main -->
<script type="text/javascript" src="./main.js"></script>
<link rel="stylesheet" href="state.css">
Expand All @@ -35,16 +35,20 @@
<div class="row">
<div class="col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3" id="content">
<h1>Reinforcement Learning</h1>
<h3>Table of contents</h3>
<ul class="content-table">
<li><a href="#policy-evaluation">Policy Evaluation</a></li>
</ul>
<h2>Policy Evaluation</h2>

<ul>
<li>The intensity of the blue bar shows the influence of the state value in the weighted average</li>
<li>The state value history gets visualized as a bar chart in each state</li>
<li>Green indicates positive state value</li>
<li>Red indicates negative state value</li>
<li>Dark gray indicates the terminal states</li>
</ul>

<div>
<div id='canvas'></div>
<div class="text-center">
Expand Down
34 changes: 23 additions & 11 deletions 3-Solving-Problems-By-Searching/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,20 @@
<div class="row">
<div class="col-md-6 col-sm-6">
<h1>Solving Problems By Searching</h1>

<h2>Node Expansion</h2>
<h3>Table of contents</h3>
<ul class="content-table">
<li><a href="#node-expansion">Node Expansion</a></li>
<li><a href="#search-agent">Getting in the shoes of a Search Agent</a></li>
<li><a href="#breadth-first-search">Breadth First Search</a></li>
<li><a href="#depth-first-search">Depth First Search</a></li>
<li><a href="#step-costs">Step Costs</a></li>
<li><a href="#uniform-cost-search">Uniform Cost Search</a></li>
<li><a href="#depth-limited-search">Depth Limited Search</a></li>
<li><a href="#iterative-deepening">Iterative Deepening Depth-First Search</a></li>
<li><a href="#bi-directional-bfs">Bi-directional BFS</a></li>
<li><a href="#a-star-search">A Star Search</a></li>
</ul>
<h2 id="node-expansion">Node Expansion</h2>
<p>
To search through a graph, a Search Agent needs to <b>expand</b> nodes. The nodes which can be expanded by the Agent together forms the
<b>frontier</b>. Expanding a node refers to marking the node as 'expanded' or 'visited' and adding its immediate neighbors to the frontier.
Expand Down Expand Up @@ -82,7 +94,7 @@ <h4>Frontier Nodes</h4>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<h2>Getting in the shoes of a Search Agent</h2>
<h2 id="search-agent">Getting in the shoes of a Search Agent</h2>
<p>
Let's see the prespective of a Search Agent as it searches through the graph.
<br> Remember, the Agent can only see the nodes which are either expanded or currently present in the frontier.
Expand All @@ -104,7 +116,7 @@ <h2>Getting in the shoes of a Search Agent</h2>
</p>
<div class="row">
<div class="col-md-6 col-sm-6">
<h2>Breadth First Search</h2>
<h2 id="breadth-first-search">Breadth First Search</h2>
<p>In Breadth First Search, the node which was discovered the earliest is expanded next i.e. the node which joined the frontier earlier, is expanded earlier.</p>
<p>
To achieve this, Breadth First Search Algorithm uses a FIFO(First In First Out) Queue. The following graph is explored by a Breadth First Search Algorithm with 'A' as the initial node.
Expand Down Expand Up @@ -140,7 +152,7 @@ <h4>FIFO Queue</h4>

<div class="row">
<div class="col-md-6 col-sm-6">
<h2>Depth First Search</h2>
<h2 id="depth-first-search">Depth First Search</h2>
<p>In Depth First Search, the node which was discovered the latest is expanded next i.e. the node which joined the frontier later, is expanded later.</p>
<p>
To achieve this, Depth First Search Algorithm uses a LIFO(Last In First Out) Queue. The following graph is explored by a Depth First Search Algorithm with 'A' as the initial node.
Expand Down Expand Up @@ -177,7 +189,7 @@ <h4>LIFO Queue</h4>

<div class="row">
<div class="col-md-6 col-sm-6">
<h2>Step Costs</h2>
<h2 id="step-costs">Step Costs</h2>
<p>
Until now, all the edges in our graph had the same cost.(That's why we didn't bother to mention the cost on the graph). For those kind of graphs, Breadth First Search is optimal because it always pops the shallowest node first. For the case when some
step costs are involved when exploring the nodes, the BFS algorithm needs be extended.
Expand Down Expand Up @@ -231,7 +243,7 @@ <h5>Uniform Cost Search (Extension of BFS)</h5>

<div class="row">
<div class="col-md-6 col-sm-6">
<h2>Uniform Cost Search</h2>
<h2 id="uniform-cost-search">Uniform Cost Search</h2>
<p>
For Unifrom Cost Search, instead of using a simple LIFO queue, A priority Queue is used where the cost of reaching that node from the initial node is considered as its priority. On each iteration, the node with the smallest cost is extracted from the
frontier for expansion.
Expand Down Expand Up @@ -290,7 +302,7 @@ <h4> costs <= <span class = 'ucsSeparation' style="font-size:150%;color:green">0

<div class="row">
<div class="col-md-6 col-sm-6">
<h2>Depth Limited Search</h2>
<h2 id="depth-limited-search">Depth Limited Search</h2>
<p>
The Depth Limited Search is the same as Depth First Search except that there is an upper limit to the depth of the nodes which the algorithm traverses. The nodes which have depths greater than this limit is not expanded by the Depth Limited Search.
</p>
Expand Down Expand Up @@ -331,7 +343,7 @@ <h4>Depth Limit : </h4>

<div class="row">
<div class="col-md-6 col-sm-6">
<h2>Iterative Deepening Depth-First Search</h2>
<h2 id="iterative-deepening">Iterative Deepening Depth-First Search</h2>
<p>
Iterative Deepening Depth-First Search is a general strategy that is used to find the best depth limit. It does this by applying Depth Limited Search to the given problem with increasing depth limit. (0, 1, 2, 3 and so on.)
</p>
Expand Down Expand Up @@ -370,7 +382,7 @@ <h4>Depth Limit : </h4>
</div>
</div>
</div>
<h2>Bi-directional BFS</h2>
<h2 id="bi-directional-bfs">Bi-directional BFS</h2>
<p>In bi-directional BFS, we run two simultaneous searches, one from the initial state and one from the goal state. We stop when these searches meet in the middle (ie, a node is explored by both the BFS)</p>
<p>The motivation behind this is that <b>b<sup>d/2</sup> + b<sup>d/2</sup> is smaller than b<sup>d</sup></b></p>
<p>In the diagram below, we compare the performance between bi-directional BFS and standard BFS side by side. The total number of nodes generated for each strategy is given below the diagram.</p>
Expand All @@ -394,7 +406,7 @@ <h1 id='biStepCount' style="text-align:center;margin-top:0%;"></h1>
</div>


<h2>A Star Search</h2>
<h2 id="a-star-search">A Star Search</h2>
<p>Click on the canvas to restart the simulation</p>
<div class="canvas" id="aStarSearchCanvas" height="300px" style="background: rgb(154, 255, 255);">
</div>
Expand Down
38 changes: 26 additions & 12 deletions 4-Beyond-Classical-Search/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,21 @@
<div class="row">
<div class="col-sm-6 col-md-10 col-md-offset-1" id="content">
<h1>Beyond classical search</h1>

<h2>Optimization Problem</h2>
<h3>Table of contents</h3>
<ul class="content-table">
<li><a href="#optimization-problem">Node Expansion</a></li>
<li><a href="#hill-climbing">Hill Climbing Search</a></li>
<li><a href="#simulated-annealing">Simulated Annealing</a></li>
<li><a href="#genetic-algorith">Genetic Algorithm</a></li>
<li><a href="#searching-with-non-deterministic-actions">Searching with non-deterministic actions</a></li>
<li><a href="#erratic-vacuum-world">he erratic vacuum world</a></li>
<li><a href="#searching-with-partial-observations">Searching with Partial Observations</a></li>
<li><a href="#vacuum-world-with-no-observation">Vacuum World with no observation</a></li>
<li><a href="#and-or-graph-search">And-Or-Graph-Search</a></li>
<li><a href="#online-dfs-agent">Online DFS Agent</a></li>
<li><a href="#lrta-agent">LRTA*-Agent</a></li>
</ul>
<h2 id="optimization-problem">Optimization Problem</h2>
<p>In many optimization problems, the path to the solution is irrelevant. In pure optimization problems, the best state is defined by the objective function. To represent such problems, a <b>state-space</b> landscape is used. It has a location (state)
represented by x-axis and elevation(objective function value) represented by y-axis. The best state is hence the state with the highest objective value</p>
<p>The given diagram is a state-space representation of an objective function. You can click anywhere inside the box to reveal the elevation there. You are allowed <i>25 moves</i> to <b>find the highest peak</b> before the hill is revealed.</p>
Expand All @@ -51,7 +64,7 @@ <h2 id='hillMoves'></h2>
<div id="hillCanvas">
</div>

<h2>Hill Climbing Search</h2>
<h2 id="hill-climbing">Hill Climbing Search</h2>
<p>In hill climbing search, the current node is replaced by the best neighbor. In this case, the objective function is represented by elevation, neighbors of a state are the states to the left and right of it and the best neigbor is the neigbor state
with the highest elevation.</p>
<p>The <span class='inline-legend maxima'></span> represents global maximas and <span class='inline-legend gmra'></span> represents the states from where the hill climbing search can reach a global maxima.</p>
Expand All @@ -65,7 +78,7 @@ <h2>Hill Climbing Search</h2>
<div id="hillSearchCanvas">
</div>

<h2>Simulated Annealing</h2>
<h2 id="simulated-annealing">Simulated Annealing</h2>
<p>Simulated Annealing is a combination of Hill Climbing and Random Walk to gain more efficiency and completeness. In this procedure, instead of always moving to the best neighbor, a random neighbor is chosen. If the new state has better objective
value than the current state, it is always chosen. If not, the algorithm accept the new state with a probability less than one. The probability of choosing a <b>bad state</b> depends on :
<ol>
Expand All @@ -88,16 +101,16 @@ <h2>Simulated Annealing</h2>
<div id="annealingCanvas"></div>


<h2>Genetic Algorithm</h2>
<h2 id="genetic-algorith">Genetic Algorithm</h2>
<p>Little critters change the color of their fur to match the background to camouflage themselves from predators.</p>
<p>Click on the canvas to generate next generation. Keep clicking to generate another progeny.</p>
<p>Note: Single point crossover might not be suitable for all applications</p>
<div class="canvas" id="geneticCanvas" height="300px" style="background: #87BC5E">
</div>

<h1>Searching with non-deterministic actions</h1>
<h1 id="searching-with-non-deterministic-actions">Searching with non-deterministic actions</h1>
<p>In a world with non-deterministic actions, the result of an action is not known with complete certainty. </p>
<h2>The erratic vacuum world</h2>
<h2 id="erratic-vacuum-world">The erratic vacuum world</h2>
<p>The erratic vacuum world is an extension of vacuum world from Chapter 2. In this world, the behavior of the cleaner is non-deterministic.</p>
<p>To define this behavior more formally, in this world, the <b>Suck</b> action works as follows</p>
<ul>
Expand Down Expand Up @@ -153,8 +166,9 @@ <h5>Moves</h5>



<h1>Searching with Partial Observations</h1> Now we come back to a world where the actions of the robot are deterministic again (no erratic behavior like before) but, the robot no longer has complete sense of its current state or its environment.
<h2>Vacuum World with no observation</h2>
<h1 id="searching-with-partial-observations">Searching with Partial Observations</h1>
<p>Now we come back to a world where the actions of the robot are deterministic again (no erratic behavior like before) but, the robot no longer has complete sense of its current state or its environment.</p>
<h2 id="vacuum-world-with-no-observation">Vacuum World with no observation</h2>
<p>In this world, the vacuum cleaner has no idea initially about its own location and the location of dirt in the world. Since the robot has no percept, it should be able to figure out a sequence of actions that will work despite its current state.</p>
<p>Given below are 8 random initial states. You can record a sequence of actions and see it in action just like before. Assume that illegal moves (like moving right in the right-most tile) have no effect on the world.</p>
<p>Try to find a sequence of actions that will lead to a final state (Clean all the dirt), no matter what the initial state of the world.</p>
Expand Down Expand Up @@ -201,18 +215,18 @@ <h5>Moves</h5>
</div>


<h2>And-Or-Graph-Search</h2>
<h2 id="and-or-graph-search">And-Or-Graph-Search</h2>
<div class="canvas" id="andOrGraphCanvas" height="300px">
</div>

<h2>Online DFS Agent</h2>
<h2 id="online-dfs-agent">Online DFS Agent</h2>
<p>Click to reset. Green tile is destination.</p>
<div class="canvas" id="onlineDfsCanvas" height="300px">
</div>



<h2>LRTA*-Agent</h2>
<h2 id="lrta-agent">LRTA*-Agent</h2>
<p></p>
<div class="canvas" id="lrtaCanvas" height="300px">
<p></p>
Expand Down
12 changes: 8 additions & 4 deletions 5-Adversarial-Search/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<link rel="stylesheet" href="../styles.css">
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="../main.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/two.js/0.6.0/two.min.js"></script>
<script type="text/javascript" src="./minimax.js"></script>
<script type="text/javascript" src="./alphabeta.js"></script>
Expand All @@ -17,15 +17,19 @@
<div class="row">
<div class="col-sm-6 col-md-offset-3" id="content">
<h1>Adversarial Search</h1>

<h2>Minimax</h2>
<h3>Table of contents</h3>
<ul class="content-table">
<li><a href="#minimax">Minimax</a></li>
<li><a href="#alpha-beta-pruning">Alpha Beta Pruning</a></li>
</ul>
<h2 id="minimax">Minimax</h2>
<p>Click on the screen to restart the simulation.</p>
<div class = "canvas" id="minimaxCanvas" height="300px" style="background: rgb(154, 255, 255);">
</div>

<pre id="minimaxCode"></pre>

<h2>Alpha Beta Pruning</h2>
<h2 id="alpha-beta-pruning">Alpha Beta Pruning</h2>
<p>Click on the screen to restart the simulation.</p>
<div class = "canvas" id="alphaBetaCanvas" height="300px"></div>

Expand Down
21 changes: 15 additions & 6 deletions 6-Constraint-Satisfaction-Problems/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,16 @@
<div class="row">
<div class="col-sm-8 col-md-10 col-md-offset-1" id="content">
<h1>Constraint Satisfaction Problems</h1>
<h2>Defining CSP with Map Coloring Problem</h2>
<h3>Table of contents</h3>
<ul class="content-table">
<li><a href="#sp-with-map-coloring">Defining CSP with Map Coloring Problem</a></li>
<li><a href="#arc-consistency">Arc consistency</a></li>
<li><a href="#sudoku-example-of-csp">Sudoku Example of CSP</a></li>
<li><a href="#backtracking-search">Backtracking Search</a></li>
<li><a href="#min-conflicts">Min Conflicts</a></li>
<li><a href="#tree-csp">Tree CSP</a></li>
</ul>
<h2 id="csp-with-map-coloring">Defining CSP with Map Coloring Problem</h2>
<p>
A map coloring problem is a type of CSP where each state can be assigned a color from the set (red,green,blue). The constraint involved says that no two neighbouring state is allowed to have the same color.
</p>
Expand All @@ -54,7 +63,7 @@ <h2>Defining CSP with Map Coloring Problem</h2>



<h2>Arc consistency</h2>
<h2 id="arc-consistency">Arc consistency</h2>
<p>
<ul>
<li>Y = X + 1</li>
Expand All @@ -67,7 +76,7 @@ <h2>Arc consistency</h2>
<div class="canvas" id="ac3Canvas" height="300px">
</div>

<h2>Sudoku Example of CSP</h2>
<h2 id="sudoku-example-of-csp">Sudoku Example of CSP</h2>
<p>All sudoku puzzles can be forumulated as CSP by considering each <b>cell</b> as a variable. The initial domain of all cells is {1,2,3,4,5,6,7,8,9}.
<br> The constraints are formulated by the fact that in the solution of a sudoku puzzle, no two cell in a row, column or block can have identical numbers. Thus, there is an
<b>AllDiff( )</b> constraint for all the rows, columns and blocks.</p>
Expand Down Expand Up @@ -99,7 +108,7 @@ <h2>Sudoku Example of CSP</h2>
</div>
</div>

<h2>Backtracking Search</h2>
<h2 id="backtracking-search">Backtracking Search</h2>
<p>Backtracking Search is a type of Search algorithm that is useful to solve CSPs. It interweaves inferences and search to arrive at a solution by pruning parts of the search tree.</p>
<p>It repeatedly chooses an unassigned variable and tries all the possible values for it. If any inconsistency is detected, it backtracks and tries another value for the previous assignment.</p>
<p>In the diagram below, order of selection of variable as well as the order of values for the variable is chosen randomly. Use the <b>Next</b> button to move forward and <b>Previous</b> button to go back. You can also use the slider to go to any state
Expand Down Expand Up @@ -132,13 +141,13 @@ <h5>Assignments : <span class="counter"></span></h5>
</div>
</div>

<h2>Min Conflicts</h2>
<h2 id="min-conflicts">Min Conflicts</h2>
<p>Min conflicts stuff</p>
<div class="canvas" id="minConflictsCanvas" height="300px">
</div>
<pre id="minConflictsCode"></pre>

<h2>Tree CSP</h2>
<h2 id="tree-csp">Tree CSP</h2>
<p>Tree CSP Stuff</p>
<div class="canvas" id="treeCspCanvas" height="300px">
</div>
Expand Down

0 comments on commit db7a4bd

Please sign in to comment.