Skip to content

Commit

Permalink
Merge branch 'master' of github.com:tensorflow/playground
Browse files Browse the repository at this point in the history
  • Loading branch information
@shancarter
shancarter committed Apr 11, 2016
2 parents 9439075 + 14c4e36 commit 5499937
Show file tree
Hide file tree
Showing 7 changed files with 157 additions and 11 deletions.
22 changes: 21 additions & 1 deletion dist/bundle.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

54 changes: 51 additions & 3 deletions dist/bundle.js
View file

Large diffs are not rendered by default.

7 changes: 5 additions & 2 deletions dist/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -290,11 +290,11 @@ <h4>Output</h4>
</div>
<br/>
<div style="display:flex;">
<label class="ui-showTestData mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for"show-test-data">
<label class="ui-showTestData mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="show-test-data">
<input type="checkbox" id="show-test-data" class="mdl-checkbox__input" checked>
<span class="mdl-checkbox__label label">Show test data</span>
</label>
<label class="ui-discretize mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for"discretize">
<label class="ui-discretize mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="discretize">
<input type="checkbox" id="discretize" class="mdl-checkbox__input" checked>
<span class="mdl-checkbox__label label">Discretize output</span>
</label>
Expand Down Expand Up @@ -332,6 +332,9 @@ <h2>How Do I Pick an Activation Function?</h2>
<div class="l--body">
<h2>This Is Cool, Can I Repurpose It?</h2>
<p>Please do! We’ve open sourced it on <a href="https://github.com/tensorflow/playground">GitHub</a> with the hope that it can make neural networks a little more accessible and easier to learn. You’re free to use it in any way that follows our <a href="https://github.com/tensorflow/playground/blob/master/LICENSE">Apache License</a>. And if you have any suggestions for additions or changes, please <a href="https://github.com/tensorflow/playground/issues">let us know</a>.</p>
<h3>I'd like to use it in a classroom, but I want to hide some of the options.</h3>
<p>Great! Just uncheck the controls you want to hide and save <a class="hide-controls-link" href="#">this link</a>, or <a href="javascript:location.reload();">refresh</a> the page.</p>
<div class="hide-controls"></div>
</div>

<div class="l--body">
Expand Down
7 changes: 5 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -290,11 +290,11 @@ <h4>Output</h4>
</div>
<br/>
<div style="display:flex;">
<label class="ui-showTestData mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for"show-test-data">
<label class="ui-showTestData mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="show-test-data">
<input type="checkbox" id="show-test-data" class="mdl-checkbox__input" checked>
<span class="mdl-checkbox__label label">Show test data</span>
</label>
<label class="ui-discretize mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for"discretize">
<label class="ui-discretize mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="discretize">
<input type="checkbox" id="discretize" class="mdl-checkbox__input" checked>
<span class="mdl-checkbox__label label">Discretize output</span>
</label>
Expand Down Expand Up @@ -332,6 +332,9 @@ <h2>How Do I Pick an Activation Function?</h2>
<div class="l--body">
<h2>This Is Cool, Can I Repurpose It?</h2>
<p>Please do! We’ve open sourced it on <a href="https://github.com/tensorflow/playground">GitHub</a> with the hope that it can make neural networks a little more accessible and easier to learn. You’re free to use it in any way that follows our <a href="https://github.com/tensorflow/playground/blob/master/LICENSE">Apache License</a>. And if you have any suggestions for additions or changes, please <a href="https://github.com/tensorflow/playground/issues">let us know</a>.</p>
<h3>I'd like to use it in a classroom, but I want to hide some of the options.</h3>
<p>Great! Just uncheck the controls you want to hide and save <a class="hide-controls-link" href="#">this link</a>, or <a href="javascript:location.reload();">refresh</a> the page.</p>
<div class="hide-controls"></div>
</div>

<div class="l--body">
Expand Down
52 changes: 50 additions & 2 deletions playground.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,22 @@ let INPUTS: {[name: string]: InputFeature} = {
"sinY": {f: (x, y) => Math.sin(y), label: "sin(X_2)"},
};

let HIDABLE_CONTROLS = [
["Show test data", "showTestData"],
["Discretize output", "discretize"],
["Play button", "playButton"],
["Learning rate", "learningRate"],
["Activation", "activation"],
["Regularization", "regularization"],
["Regularization rate", "regularizationRate"],
["Problem type", "problem"],
["Which dataset", "dataset"],
["Ratio train data", "percTrainData"],
["Noise level", "noise"],
["Batch size", "batchSize"],
["# of hidden layers", "numHiddenLayers"],
];

class Player {
private timerIndex = 0;
private isPlaying = false;
Expand Down Expand Up @@ -852,9 +868,41 @@ function drawDatasetThumbnails() {

function hideControls() {
// Set display:none to all the UI elements that are hidden.
state.getHiddenProps().forEach(prop => {
d3.selectAll(`.ui-${prop}`).style("display", "none");
let hiddenProps = state.getHiddenProps();
hiddenProps.forEach(prop => {
let controls = d3.selectAll(`.ui-${prop}`);
if (controls.size() == 0) {
console.warn(`0 html elements found with class .ui-${prop}`);
}
controls.style("display", "none");
});

// Also add checkbox for each hidable control in the "use it in classrom"
// section.
let hideControls = d3.select(".hide-controls");
HIDABLE_CONTROLS.forEach(([text, id]) => {
let label = hideControls.append("label")
.attr("class", "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect");
let input = label.append("input")
.attr({
type: "checkbox",
class: "mdl-checkbox__input",
});
if (hiddenProps.indexOf(id) == -1) {
input.attr("checked", "true");
}
input.on("change", function() {
state.setHideProperty(id, !this.checked);
state.serialize();
d3.select(".hide-controls-link")
.attr("href", window.location.href);
});
label.append("span")
.attr("class", "mdl-checkbox__label label")
.text(text);
});
d3.select(".hide-controls-link")
.attr("href", window.location.href);
}

function generateData(firstTime = false) {
Expand Down
4 changes: 4 additions & 0 deletions state.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -271,4 +271,8 @@ export class State {
}
return result;
}

setHideProperty(name: string, hidden: boolean) {
this[name + HIDE_STATE_SUFFIX] = hidden;
}
}
22 changes: 21 additions & 1 deletion styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -784,14 +784,19 @@ article {
/*border-top: 1px solid rgba(0, 0, 0, 0.08);*/
}

article h2 {
article h2, article h3 {
margin: 60px 0 20px 0;
font-size: 22px;
font-weight: 500;
line-height: 1.45em;
color: rgba(0, 0, 0, 0.7);
}

article h3 {
margin: 40px 0 20px 0;
font-size: 18px;
}

article :first-child h2 {
margin-top: 0;
}
Expand Down Expand Up @@ -840,6 +845,21 @@ footer .links a:hover {
text-decoration: underline;
}

.hide-controls {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.hide-controls label.mdl-checkbox {
width: 145px;
height: 30px;
}

.hide-controls .mdl-checkbox__label {
font-size: 13px;
}

/* Material Overrides */

/* Buttons */
Expand Down

0 comments on commit 5499937

Please sign in to comment.