aima-javascript/2-Intelligent-Agents/index.html at master · aimacode/aima-javascript · GitHub

Name: aima-javascript/2-Intelligent-Agents/index.html at master · aimacode/aima-javascript · GitHub
Rating: 4.5 (248 reviews)
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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<htmllang="en">
<head>
<title>2 Intelligent Agents</title>
<linkrel="stylesheet" href="../styles.css">
<scriptsrc="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<scripttype="text/javascript" src="../main.js"></script>

<scriptsrc="https://d3js.org/d3.v4.min.js"></script>
<style>
 .floor:hover { cursor: pointer; }
 .agent-actions { margin-left: auto; margin-right: auto; border-collapse: collapse; }
 .agent-actionsth { padding:0.5ex; border:1px solid hsl(240,10%,90%); background:hsl(240,10%,85%); text-align: center; }
 .agent-actionstd { padding:0.25ex; border:1px solid hsl(240,20%,80%); text-align: center; }

 .robot { transition: transform 2.0s; }
 .floor { fill: white; }
 .floor.clean { fill:hsl(240,10%,90%); transition: fill 2.0s; }
 .floor.dirty { fill:hsl(0,50%,50%); transition: fill 0.1s; }

</style>
</head>
<body>

<divclass="row">
<divclass="col-sm-6 col-md-offset-3" id="content">
<h1>Intelligent Agents</h1>
<h3>Table of contents</h3>
<ulclass="content-table">
<li><ahref="#vacuum-cleaner-problem">Vacuum cleaner problem</a></li>
<li><ahref="#simple-cleaning-robot">Simple cleaning robot</a></li>
<li><ahref="#rules-to-follow">Rules for the agent to follow</a></li>
<li><ahref="#performance-measures">Performance measures</a></li>
</ul>

<h2id="vacuum-cleaner-problem">Vacuum cleaner problem</h2>

<p>
 Choose an action for the robot. Click on a box to make it dirty.
</p>

<divid="reader-controlled-diagram">
<divclass="buttons" style="position:relative"></div>
<svgwidth="600" height="300"></svg>
</div>

<h2id="simple-cleaning-robot">Simple cleaning robot</h2>

<divid="agent-controlled-diagram">

<p>
 The robot will choose its own actions based on simple rules. Click on a box to make it dirty.
</p>

<svgwidth="600" height="300"></svg>

</div>

<h2id="rules-to-follow">Rules for the agent to follow</h2>

<divid="table-controlled-diagram">

<p>
 The robot will follow the rules you choose. Click on a rule in the table to change it.
</p>

<tableclass="agent-actions">
<thead>
<tr>
<throwspan="2" valign="bottom">Percept</th>
<thcolspan="2">Position</th>
</tr>
<tr>
<thdata-input="left">Left</th>
<thdata-input="right">Right</th>
</tr>
</thead>
<tbody>
<tr>
<thdata-input="clean">Clean</th>
<tddata-action="left-clean">
<selectclass="custom-select">
<optionvalue="LEFT">LEFT</option>
<optionvalue="RIGHT" selected>RIGHT</option>
<optionvalue="SUCK">SUCK</option>
</select>
</td>
<tddata-action="right-clean">
<selectclass="custom-select">
<optionvalue="LEFT" selected>LEFT</option>
<optionvalue="RIGHT">RIGHT</option>
<optionvalue="SUCK">SUCK</option>
</select>
</td>
</tr>
<tr>
<thdata-input="dirty">Dirty</th>
<tddata-action="left-dirty">
<selectclass="custom-select">
<optionvalue="LEFT">LEFT</option>
<optionvalue="RIGHT">RIGHT</option>
<optionvalue="SUCK" selected>SUCK</option>
</select>
</td>
<tddata-action="right-dirty">
<selectclass="custom-select">
<optionvalue="LEFT">LEFT</option>
<optionvalue="RIGHT">RIGHT</option>
<optionvalue="SUCK" selected>SUCK</option>
</select>
</td>
</tr>
</tbody>
</table>

<svgwidth="600" height="300"></svg>

<p>
 In this simple example there's only one set of rules that
 works well, but in more complex examples it won't be as
 obvious what set of rules to use. How would we find the
 rules?
</p>

<h2id="performance-measures">Performance measures</h2>

<p>
 We can choose a metric that evaluates how well the agent
 performs on the given problem.
</p>

 TODO: dirty/clean should be controlled automatically,
 reproducibly (seeded RNG), and then display a line chart
 with the performance measure

<h3>Evaluating multiple agents</h3>

 TODO: many different agents on the same data sequence

<h3>Evaluating many data sets</h3>

 TODO: one agent on many different data sequences (avoid overfitting)
</div>
</div>
</div>

<scripttype="text/javascript" src="./cleaningRobot.js"></script>
<scripttype="text/javascript" src="./c_cleaningRobot.js"></script>
</body>
</html>