Skip to content

Ch 2 - Add Performance measure visualisation #133

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

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 1 commit
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
Next Next commit
design agents
  • Loading branch information
@Dragneel7
Dragneel7 committed Dec 20, 2017
commit b75caaf01af656c8f0ae222fd985430d38734dfb
211 changes: 211 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,217 @@ function makeTableControlledDiagram() {
}
}

/*Control the daigram based on the performance parameters set
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please check spelling, punctuation, spacing everywhere.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I will surely correct them.

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 makePerformanceControlledDaigramAgent1(){
let diagram = makeDiagram('#performance-controlled-diagram-agent1 svg');
var dirt_freq = getRulesFromPage()[0];
var score_agent1 = 0;
var performance = [];

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

function makefloordirty() {
floorNumber = Math.floor(Math.random() * 2);
diagram.world.markFloorDirty(floorNumber);
diagram.floors[floorNumber].attr('class', 'dirty floor');
}


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;
return [dirt_freq, speed_agent1]
}

update();
setInterval(makefloordirty,dirt_freq[0]*1000);
setInterval(update, STEP_TIME_MS);

}


function makePerformanceControlledDaigramAgent2(){
let diagram = makeDiagram('#performance-controlled-diagram-agent2 svg');
var stats_agent2 = getRulesFromPage();
var score_agent2 = 0;
var performance = [];

function update() {
let location = diagram.world.location;
let percept = diagram.world.floors[location].dirty;
let table = getRulesFromPage();
stats_agent2 = table;
let action = reflexVacuumAgent(diagram.world, table);
setTimeout(function(){ if(action=='SUCK'){ score_agent2 = score_agent2+50; }
else{ score_agent2 = score_agent2-10; }
if(diagram.world.floors[0].dirty || diagram.world.floors[1].dirty)
{ score_agent2 = score_agent2-5-2*parseInt(stats_agent2[0]); }
// extra score reduction due to agent2 working for a shorter duration
performance.push(score_agent2);
diagram.world.simulate(action);
renderWorld(diagram);
renderAgentPercept(diagram, percept);
renderAgentAction(diagram, action);},table[1]*1000);
plotPerformance2(performance);
}

function getRulesFromPage() {
let table = d3.select("#performance-controlled-diagram table");
let dirt_freq = table.select("[data-action=dirt-freq] 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_agent2, interval_agent2];
}

function makefloordirty() {
floorNumber = Math.floor(Math.random() * 2);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this a local or a global?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I made some mistakes while setting the scopes of the variable. I will correct it with other changes and be more careful in the future.

diagram.world.markFloorDirty(floorNumber);
diagram.floors[floorNumber].attr('class', 'dirty floor');
}

var agent2_interval;

function run(){
agent2_interval = setInterval(update,1000);
}

//stats_agent2[2] is the inteval in which the agent works which can be set up by the reader.
function executeAgent2(){
clearInterval(agent2_interval);
setTimeout(run,5000);

}
executeAgent2();
setInterval(makefloordirty,stats_agent2[0]*1000);
setInterval(executeAgent2,5000+stats_agent2[2]*1000)
}


//Plotting the performance of the agents on a dynamic line chart
//--TODO-- DRY code may be prevented by declaring the variables with proper scope.
function plotPerformance1(performance){
var performance = performance;

var dps = []; // dataPoints
var chart = new CanvasJS.Chart("chartContainer", {
title :{
text: "Performance of Agent1"
},
axisY: {
includeZero: false
},
data: [{
type: "line",
dataPoints: dps
}]
});

var xVal = 0;
var yVal = 0;
var updateInterval = STEP_TIME_MS;
var dataLength = performance.length; // number of dataPoints visible at any point

var updateChart = function (count) {

count = count || 1;

for (var j = 0; j < count; j++) {
yVal = performance[j];
dps.push({
x: xVal,
y: yVal
});
xVal++;
}

if (dps.length > dataLength) {
dps.shift();
}

chart.render();
dps = [];
};

updateChart(dataLength);
setInterval(function(){updateChart()}, updateInterval);


}


function plotPerformance2(performance){
var performance = performance;

var dps = []; // dataPoints
var chart = new CanvasJS.Chart("chartContainer2", {
title :{
text: "Performance of Agent2"
},
axisY: {
includeZero: false
},
data: [{
type: "line",
dataPoints: dps
}]
});

var xVal = 0;
var yVal = 0;
var updateInterval = STEP_TIME_MS;
var dataLength = performance.length; // number of dataPoints visible at any point

var updateChart = function (count) {

count = count || 1;

for (var j = 0; j < count; j++) {
yVal = performance[j];
dps.push({
x: xVal,
y: yVal
});
xVal++;
}

if (dps.length > dataLength) {
dps.shift();
}

chart.render();
dps= [];
};

updateChart(dataLength);
setInterval(function(){updateChart()}, updateInterval);


}

makeAgentControlledDiagram();
makeReaderControlledDiagram();
makeTableControlledDiagram();
makePerformanceControlledDaigramAgent1();
makePerformanceControlledDaigramAgent2();
5 changes: 3 additions & 2 deletions 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'; }
else if (world.location == 1) { return'LEFT'; }
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't understand what you're trying to do with the change to this function

Copy link
Contributor Author

@Dragneel7 Dragneel7 Jan 23, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It was a mistake I might have committed when I was working to implement the visualization.
I will correct this and all the above mentioned.
Thanks for the Review.

return action;
}

// Rules are defined in data, in a table indexed by [location][dirty]
Expand Down
87 changes: 82 additions & 5 deletions 2-Intelligent-Agents/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@
<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="../third-party/canvasjs.min.js"></script>


<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
Expand Down Expand Up @@ -64,7 +66,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,17 +122,93 @@ <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>
<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="left">speed-agent1</th>
<th data-input="right">speed-agent2</th>
<th data-input="left">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=2 selected>2</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
</select>
</td>
<td data-action="speed-agent2">
<select class="custom-select">
<option value=1 selected>1</option>
<option value=1.5>1.5</option>
<option value=2>2</option>
<option value=2.5>2.5</option>
</select>
</td>
<td data-action="interval-agent2">
<select class="custom-select">
<option value=5 selected>5</option>
<option value=7.5>7.5</option>
<option value=10>10</option>
<option value=12.5>12.5</option>
</select>
</td>
</tr>
</thead>
</table>

TODO: dirty/clean should be controlled automatically,
reproducibly (seeded RNG), and then display a line chart
with the performance measure
<div id="performance-controlled-diagram-agent1">
<h4>Agent1</h4>
<svg width="600" height="300"></svg>
</div>

<div id="performance-controlled-diagram-agent2">
<h4>Agent2</h4>
<svg width="600" height="300"></svg>
</div>

<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<div id="chartContainer2" style="height: 300px; width: 100%;"></div>

<h3>Evaluating multiple agents</h3>

Expand All @@ -139,7 +217,6 @@ <h3>Evaluating multiple agents</h3>
<h3>Evaluating many data sets</h3>

TODO: one agent on many different data sequences (avoid overfitting)

</div>
</div>

Expand Down
Loading