Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Ch 2 - Add Performance measure visualisation #133

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Ch 2 - Add Performance measure visualisation #133

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b75caaf
design agents
Dragneel7 Dec 20, 2017
70ec10e
amend changes
Dragneel7 Dec 23, 2017
183709f
amend changes
Dragneel7 Dec 23, 2017
d9f8434
Merge branch 'master' of https://github.com/aimacode/aima-javascript …
Dragneel7 Jan 5, 2018
3d426d2
add chart js performance plot
Dragneel7 Jan 5, 2018
88cef71
align agents
Dragneel7 Jan 17, 2018
a2b435e
modify update function
Dragneel7 Feb 9, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
137 changes: 137 additions & 0 deletions 2-Intelligent-Agents/c_cleaningRobot.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ function makeDiagram(selector) {
function renderWorld(diagram) {
for (let floorNumber = 0; floorNumber < diagram.world.floors.length; floorNumber++) {
diagram.floors[floorNumber].attr('class', diagram.world.floors[floorNumber].dirty? 'dirty floor' : 'clean floor');

}
diagram.robot.style('transform', `translate(${diagram.xPosition(diagram.world.location)}px,100px)`);
}
Expand Down Expand Up @@ -233,7 +234,143 @@ function makeTableControlledDiagram() {
}
}

/*Control the diagram based on the performance parameters set
by the reader that the AI is supposed to follow.The animation flow
is similar to the first agent controlled diagram but there is an
additional table UI that lets the reader view the percepts and actions
being followed as well as change the rules followed by the agent.
*/
function makePerformanceControlledDaigram(){
// variable declarations for the agents
let diagram_agent1 = makeDiagram('#performance-controlled-diagram-agent1 svg');
let diagram_agent2 = makeDiagram('#performance-controlled-diagram-agent2 svg');
let parameters = getRulesFromPage(); //reader defined agent parameters
let score_agent1 = 0;
let score_agent2 = 0;
let agent2_interval;
let performance_agent1 = [];
let performance_agent2 = [];


// update agent1's environment
function update_agent(agent_number) {
let agent = 0;
let agent_score = 0;
let performance_agent = 0;
let speed_agent = 0;

if(agent_number==0){
agent = diagram_agent1;
agent_score = score_agent1;
performance_agent = performance_agent1;
speed_agent = 1;
}
if(agent_number==1){
agent = diagram_agent2;
agent_score = score_agent1;
performance_agent = performance_agent2;
speed_agent = 2;
}

let location = agent.world.location;
let percept = agent.world.floors[location].dirty;
let table = getRulesFromPage();
let action = reflexVacuumAgent(agent.world, table);
setTimeout(function(){ if(action=='SUCK'){ agent_score = agent_score+50; }
else{ agent_score = agent_score-10; }
if(agent.world.floors[0].dirty || agent.world.floors[1].dirty)
{ agent_score = agent_score-5; }
performance_agent.push(agent_score);
agent.world.simulate(action);
renderWorld(agent);
renderAgentPercept(agent, percept);
renderAgentAction(agent, action);},table[speed_agent]*1000);
}

setInterval(function(){plotPerformance(performance_agent1, performance_agent2);} ,STEP_TIME_MS);

// get reader defined parameters
function getRulesFromPage() {
let table = d3.select("#performance-controlled-diagram table");
let dirt_freq = table.select("[data-action=dirt-freq] select").node().value;
let speed_agent1 = table.select("[data-action=speed-agent1] select").node().value;
let speed_agent2 = table.select("[data-action=speed-agent2] select").node().value;
let interval_agent2 = table.select("[data-action=interval-agent2] select").node().value;
return [dirt_freq, speed_agent1, speed_agent2, interval_agent2]
}

function makefloordirty() {
let floorNumber = Math.floor(Math.random() * 2);
diagram_agent1.world.markFloorDirty(floorNumber);
diagram_agent1.floors[floorNumber].attr('class', 'dirty floor');
diagram_agent2.world.markFloorDirty(floorNumber);
diagram_agent2.floors[floorNumber].attr('class', 'dirty floor');
}
setInterval(makefloordirty,parameters[0]*1000);

//control agent1's state
update_agent(0);
setInterval(function(){update_agent(0);}, STEP_TIME_MS);

//control agent2's state
function controlAgent2(){
clearInterval(agent2_interval);
setTimeout(function(){ agent2_interval = setInterval(function(){update_agent(1)},1000); },5000);

}
controlAgent2();
setInterval(controlAgent2,5000+parameters[3]*1000) // parameter[3] defines the working interval of agent2

}

//Plotting the performance of the agents on a dynamic line chart
var label = ['', '', ''] // create a empty array to print on x-axis
var iter = ''
function plotPerformance(performance_agent1,performance_agent2){
var ctx = document.getElementById('chartContainer').getContext('2d');
if(performance_agent1.length != 0 || performance_agent2.length != 0){
var chart = new Chart(ctx, {
type: 'line',

data: {
labels:label,
datasets: [{
label: "Performance Agent1",
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: performance_agent1,
fill: false,
},
{
label: "Performance Agent2",
backgroundColor: 'rgb(0, 99, 132)',
borderColor: 'rgb(0, 99, 132)',
data: performance_agent2,
fill: false,
}
]
},


options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
animation: {
duration: 0
}
}
});
label.push(iter);
}

}

makeAgentControlledDiagram();
makeReaderControlledDiagram();
makeTableControlledDiagram();
makePerformanceControlledDaigram();
3 changes: 2 additions & 1 deletion 2-Intelligent-Agents/cleaningRobot.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,10 @@ class World {

// Rules are defined in code
function reflexVacuumAgent(world) {
if (world.floors[world.location].dirty) { return 'SUCK'; }
if (world.floors[world.location].dirty) { return 'SUCK'; }
else if (world.location == 0) { return 'RIGHT'; }
else if (world.location == 1) { return 'LEFT'; }
return action;
}

// Rules are defined in data, in a table indexed by [location][dirty]
Expand Down
93 changes: 85 additions & 8 deletions 2-Intelligent-Agents/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,9 @@
<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; }
Expand Down Expand Up @@ -64,7 +65,7 @@ <h2 id="rules-to-follow">Rules for the agent to follow</h2>
The robot will follow the rules you choose. Click on a rule in the table to change it.
</p>

<table class="agent-actions"
<table class="agent-actions">
<thead>
<tr>
<th rowspan="2" valign="bottom">Percept</th>
Expand Down Expand Up @@ -120,26 +121,102 @@ <h2 id="rules-to-follow">Rules for the agent to follow</h2>
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>

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

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

Expand Down