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

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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>2 Intelligent Agents</title>
    <link rel="stylesheet" href="../styles.css">
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
    <script type="text/javascript" src="../main.js"></script>

    <script src="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-actions th { padding: 0.5ex; border: 1px solid hsl(240,10%,90%); background: hsl(240,10%,85%); text-align: center; }
        .agent-actions td { 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>

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

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

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

        <div id="reader-controlled-diagram">
          <div class="buttons" style="position:relative"></div>
          <svg width="600" height="300"></svg>
        </div>

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

        <div id="agent-controlled-diagram">

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

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

        </div>

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

        <div id="table-controlled-diagram">

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

          <table class="agent-actions">
            <thead>
              <tr>
                <th rowspan="2" valign="bottom">Percept</th>
                <th colspan="2">Position</th>
              </tr>
              <tr>
                <th data-input="left">Left</th>
                <th data-input="right">Right</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th data-input="clean">Clean</th>
                <td data-action="left-clean">
                  <select class="custom-select">
                    <option value="LEFT">LEFT</option>
                    <option value="RIGHT" selected>RIGHT</option>
                    <option value="SUCK">SUCK</option>
                  </select>
                </td>
                <td data-action="right-clean">
                  <select class="custom-select">
                    <option value="LEFT" selected>LEFT</option>
                    <option value="RIGHT">RIGHT</option>
                    <option value="SUCK">SUCK</option>
                  </select>
              </tr>
              <tr>
                <th data-input="dirty">Dirty</th>
                <td data-action="left-dirty">
                  <select class="custom-select">
                    <option value="LEFT">LEFT</option>
                    <option value="RIGHT">RIGHT</option>
                    <option value="SUCK" selected>SUCK</option>
                  </select>
                </td>
                <td data-action="right-dirty">
                  <select class="custom-select">
                    <option value="LEFT">LEFT</option>
                    <option value="RIGHT">RIGHT</option>
                    <option value="SUCK" selected>SUCK</option>
                  </select>
                </td>
              </tr>
            </tbody>
          </table>

          <svg width="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>
      </div>

      <div id="performance-controlled-diagram">

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

          <p>
            We can choose a metric that evaluates how well the agent
            performs on the given problem.
          </p>
          <p>
            This is a case study of 2 agents:-
                <ul>
                  <li> Agent1 that cleans continously but is slow in learning the environment</li>
                  <li> Agent2 that takes less time to clean but cleans at regular intervals</li>
                </ul>
          </p>
          <p>
            The performance measure of the agents would be a sum total of scores evaluted from:-
                <ul>
                  <li> The amount of time the agent is working( 10 points would be deducted from the total score for each move)</li>
                  <li> The cleaniness of the environment( 50 points would be awarded for for cleaning the environment and 5 points would be deducted for each time interval the environment remains dirty)</li>
                </ul>
          </p>
          <p>
            Following control the agent's performance in a given environment.
          </p>
          <table class="agent-actions">
            <thead>
              <tr>
                <th colspan="7">Performance Factors</th>
              </tr>
               <tr>
                <th data-input="dirt-freq">dirt-frequency</th>
                <th data-input="speed-agent1">speed-agent1</th>
                <th data-input="speed-agent2">speed-agent2</th>
                <th data-input="interval-agent2">interval-agent2</th>
              </tr>
              <tr>
                <td data-action="dirt-freq">
                  <select class="custom-select">
                    <option value= 8 selected>8</option>
                    <option value= 10>10</option>
                    <option value= 12>12</option>
                    <option value= 14>14</option>
                  </select>
                </td>
                <td data-action="speed-agent1">
                  <select class="custom-select">
                    <option value=3 selected>3</option>
                    <option value=4>4</option>
                    <option value=5>5</option>
                    <option value=6>6</option>
                  </select>
                </td>
                  <td data-action="speed-agent2">
                  <select class="custom-select">
                    <option value=.5 selected>.5</option>
                    <option value=1>1</option>
                    <option value=1.5>1.5</option>
                    <option value=2>2</option>
                  </select>
                </td>
                  <td data-action="interval-agent2">
                  <select class="custom-select">
                    <option value=10 selected>10</option>
                    <option value=15>15</option>
                    <option value=20>20</option>
                    <option value=25>25</option>
                  </select>
                </td>
              </tr>
            </thead>
          </table>

          <div class="performance-agent-container" style="display: inline-flex;position: relative;right:100px; top:20px;">
            <div id="performance-controlled-diagram-agent1" style="text-align: center;" >
              <h4>Agent1</h4>
              <svg width="400" height="300" viewBox="0 0 600 300"></svg>
            </div>

            <div id="performance-controlled-diagram-agent2" style="text-align: center;">
              <h4>Agent2</h4>
              <svg width="400" height="300" viewBox="0 0 600 300"></svg>
            </div>
            </div>
          <h4>Agent's Performance Plot</h3>
          <canvas id="chartContainer" style="height: 300px; width: 100%;"></canvas>

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

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