aima-javascript/02-Intelligent-Agents/index.html at 3383777e15b0c4e4991f0ae979b747a929c14dda · 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
<!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 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>
                </td>
              </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>

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

          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>

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