Skip to content

Main #250

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
ryanj77729-art wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Main #250

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
ee9aceb
Add vision blind spot visualization module
ryanj77729-art May 16, 2026
b89f4ac
Add blind spot controls to HTML interface
ryanj77729-art May 16, 2026
11783a5
Add blind spot dataset generation functions
ryanj77729-art May 16, 2026
457f059
Add blind spot integration guide for playground.ts
ryanj77729-art May 17, 2026
599baf0
Integrate blind spot controls into playground.ts
ryanj77729-art May 17, 2026
0c42b72
Implement blind spot controls and UI updates
ryanj77729-art May 17, 2026
d02f921
fix: resolve critical issues in blind spot implementation
ryanj77729-art May 18, 2026
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
152 changes: 152 additions & 0 deletions BLINDSPOT_INTEGRATION.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,152 @@
/* Vision Blind Spot Integration Module
*
* This code should be added to src/playground.ts to integrate blind spot controls
* Place this near the top of the file after imports and before makeGUI()
*/

// ============================================================================
// BLIND SPOT INTEGRATION ADDITIONS
// ============================================================================

// Add these imports at the top of playground.ts:
// import {VisionBlindSpot} from "./vision-blindspot";
// import {applyGradientBlindSpotMask, BlindSpotDatasetConfig} from "./blindspot-dataset";

// Add these global variables after the player and lineChart declarations:
let blindSpot: VisionBlindSpot = new VisionBlindSpot({
centerX: 1.5,
centerY: 0,
radius: 0.4,
showBlindSpot: false,
fillMethod: 'predict'
});

let blindSpotEnabled = false;

// Add this function to handle blind spot checkbox:
function setupBlindSpotControls() {
// Enable/disable blind spot
d3.select("#enable-blindspot").on("change", function() {
blindSpotEnabled = this.checked;
blindSpot.updateConfig({ showBlindSpot: blindSpotEnabled });
generateData();
parametersChanged = true;
reset();
});
d3.select("#enable-blindspot").property("checked", blindSpotEnabled);

// Blind spot size slider
let blindSpotSizeSlider = d3.select("#blindSpotSize").on("input", function() {
let size = +this.value;
d3.select("label[for='blindSpotSize'] .value").text(size.toFixed(2));
blindSpot.updateConfig({ radius: size });
if (blindSpotEnabled) {
generateData();
parametersChanged = true;
reset();
}
});
blindSpotSizeSlider.property("value", blindSpot.getConfig().radius);
d3.select("label[for='blindSpotSize'] .value").text(blindSpot.getConfig().radius.toFixed(2));

// Blind spot X position slider
let blindSpotXSlider = d3.select("#blindSpotX").on("input", function() {
let x = +this.value;
d3.select("label[for='blindSpotX'] .value").text(x.toFixed(2));
blindSpot.updateConfig({ centerX: x });
if (blindSpotEnabled) {
generateData();
parametersChanged = true;
reset();
}
});
blindSpotXSlider.property("value", blindSpot.getConfig().centerX);
d3.select("label[for='blindSpotX'] .value").text(blindSpot.getConfig().centerX.toFixed(2));

// Blind spot Y position slider
let blindSpotYSlider = d3.select("#blindSpotY").on("input", function() {
let y = +this.value;
d3.select("label[for='blindSpotY'] .value").text(y.toFixed(2));
blindSpot.updateConfig({ centerY: y });
if (blindSpotEnabled) {
generateData();
parametersChanged = true;
reset();
}
});
blindSpotYSlider.property("value", blindSpot.getConfig().centerY);
d3.select("label[for='blindSpotY'] .value").text(blindSpot.getConfig().centerY.toFixed(2));

// Blind spot fill method dropdown
d3.select("#blindSpotFill").on("change", function() {
let method = this.value as 'predict' | 'average' | 'context';
blindSpot.updateConfig({ fillMethod: method });
if (blindSpotEnabled) {
generateData();
parametersChanged = true;
reset();
}
});
d3.select("#blindSpotFill").property("value", blindSpot.getConfig().fillMethod);
}

// Modify the generateData function to apply blind spot masking:
// Replace the existing generateData function body with this enhanced version
function generateDataWithBlindSpot(firstTime = false) {
if (!firstTime) {
state.seed = Math.random().toFixed(5);
state.serialize();
userHasInteracted();
}
Math.seedrandom(state.seed);
let numSamples = (state.problem === Problem.REGRESSION) ?
NUM_SAMPLES_REGRESS : NUM_SAMPLES_CLASSIFY;
let generator = state.problem === Problem.CLASSIFICATION ?
state.dataset : state.regDataset;
let data = generator(numSamples, state.noise / 100);

// Apply blind spot masking if enabled
if (blindSpotEnabled) {
data = applyGradientBlindSpotMask({
blindSpot: blindSpot,
baseDatasetGenerator: generator
}, numSamples, state.noise / 100);
}

shuffle(data);
let splitIndex = Math.floor(data.length * state.percTrainData / 100);
trainData = data.slice(0, splitIndex);
testData = data.slice(splitIndex);
heatMap.updatePoints(trainData);
heatMap.updateTestPoints(state.showTestData ? testData : []);
}

// Add this line to makeGUI() after all other setup:
// setupBlindSpotControls();

// ============================================================================
// END BLIND SPOT INTEGRATION
// ============================================================================

/* INSTRUCTIONS FOR INTEGRATION:

1. At the top of src/playground.ts, add these imports:
import {VisionBlindSpot} from "./vision-blindspot";
import {applyGradientBlindSpotMask, BlindSpotDatasetConfig} from "./blindspot-dataset";

2. After the line: let lineChart = new AppendingLineChart(...)
Add the global variables above

3. In the makeGUI() function, after all existing setup, call:
setupBlindSpotControls();

4. Replace the existing generateData() function call in the code with
generateDataWithBlindSpot() or modify generateData() to use the
blind spot logic shown in generateDataWithBlindSpot()

5. Make sure the import of Problem type is available:
import {Problem} from "./state";

After these changes, rebuild with: npm run build
Then test with: npm run serve
*/
82 changes: 70 additions & 12 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,12 +45,12 @@
<a class="github-link" href="https://github.com/tensorflow/playground" title="Source on GitHub" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60.5 60.5" width="60" height="60">
<polygon class="bg" points="60.5,60.5 0,0 60.5,0 "/>
<path class="icon" d="M43.1,5.8c-6.6,0-12,5.4-12,12c0,5.3,3.4,9.8,8.2,11.4c0.6,0.1,0.8-0.3,0.8-0.6c0-0.3,0-1,0-2c-3.3,0.7-4-1.6-4-1.6c-0.5-1.4-1.3-1.8-1.3-1.8c-1.1-0.7,0.1-0.7,0.1-0.7c1.2,0.1,1.8,1.2,1.8,1.2c1.1,1.8,2.8,1.3,3.5,1c0.1-0.8,0.4-1.3,0.8-1.6c-2.7-0.3-5.5-1.3-5.5-5.9c0-1.3,0.5-2.4,1.2-3.2c-0.1-0.3-0.5-1.5,0.1-3.2c0,0,1-0.3,3.3,1.2c1-0.3,2-0.4,3-0.4c1,0,2,0.1,3,0.4c2.3-1.6,3.3-1.2,3.3-1.2c0.7,1.7,0.2,2.9,0.1,3.2c0.8,0.8,1.2,1.9,1.2,3.2c0,4.6-2.8,5.6-5.5,5.9c0.4,0.4,0.8,1.1,0.8,2.2c0,1.6,0,2.9,0,3.3c0,0.3,0.2,0.7,0.8,0.6c4.8-1.6,8.2-6.1,8.2-11.4C55.1,11.2,49.7,5.8,43.1,5.8z"/>
<path class="icon" d="M43.1,5.8c-6.6,0-12,5.4-12,12c0,5.3,3.4,9.8,8.2,11.4c0.6,0.1,0.8-0.3,0.8-0.6c0-0.3,0-1,0-2c-3.3,0.7-4-1.6-4-1.6c-0.5-1.4-1.3-1.8-1.3-1.8c-1.1-0.7,0.1-0.7,0.1-0.7c1.2,0.[...]
</svg>
</a>
<!-- Header -->
<header>
<h1 class="l--page">Tinker With a <b>Neural Network</b> <span class="optional">Right Here </span>in Your Browser.<br>Don’t Worry, You Can’t Break It. We Promise.</h1>
<h1 class="l--page">Tinker With a <b>Neural Network</b> <span class="optional">Right Here </span>in Your Browser.<br>Don't Worry, You Can't Break It. We Promise.</h1>
</header>

<!-- Top Controls -->
Expand Down Expand Up @@ -190,9 +190,54 @@ <h4>
<input class="mdl-slider mdl-js-slider" type="range" id="batchSize" min="1" max="30" step="1">
</p>
</div>
<button class="basic-button" id="data-regen-button" title="Regenerate data">
Regenerate
</button>
<!-- Vision Blind Spot Controls -->
<div class="ui-blindSpot" style="margin-top: 20px; padding: 15px; background: #f5f5f5; border-radius: 4px;">
<h4 style="margin: 0 0 10px 0;">Vision Blind Spot</h4>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="enable-blindspot">
<input type="checkbox" id="enable-blindspot" class="mdl-checkbox__input">
<span class="mdl-checkbox__label">Show blind spot</span>
</label>

<div class="ui-blindSpotSize" style="margin-top: 10px;">
<label for="blindSpotSize">Size:&nbsp;&nbsp;<span class="value">0.4</span></label>
<p class="slider">
<input class="mdl-slider mdl-js-slider" type="range" id="blindSpotSize" min="0.1" max="1.5" step="0.1" value="0.4">
</p>
</div>

<div class="ui-blindSpotX" style="margin-top: 10px;">
<label for="blindSpotX">X Position:&nbsp;&nbsp;<span class="value">1.5</span></label>
<p class="slider">
<input class="mdl-slider mdl-js-slider" type="range" id="blindSpotX" min="-6" max="6" step="0.1" value="1.5">
</p>
</div>

<div class="ui-blindSpotY" style="margin-top: 10px;">
<label for="blindSpotY">Y Position:&nbsp;&nbsp;<span class="value">0</span></label>
<p class="slider">
<input class="mdl-slider mdl-js-slider" type="range" id="blindSpotY" min="-6" max="6" step="0.1" value="0">
</p>
</div>

<div class="ui-blindSpotFill" style="margin-top: 10px;">
<label for="blindSpotFill">Fill Method</label>
<div class="select">
<select id="blindSpotFill">
<option value="predict">Predict</option>
<option value="average">Average</option>
<option value="context">Context</option>
</select>
</div>
</div>

<p style="font-size: 12px; margin-top: 10px; color: #666;">
The brain has a natural blind spot where the optic nerve exits the eye.
Train the network to predict what should be there!
</p>
</div>
<button class="basic-button" id="data-regen-button" title="Regenerate data">
Regenerate
</button>
</div>
</div>

Expand Down Expand Up @@ -322,22 +367,31 @@ <h4>Output</h4>
<article id="article-text">
<div class="l--body">
<h2>Um, What Is a Neural Network?</h2>
<p>It’s a technique for building a computer program that learns from data. It is based very loosely on how we think the human brain works. First, a collection of software “neurons” are created and connected together, allowing them to send messages to each other. Next, the network is asked to solve a problem, which it attempts to do over and over, each time strengthening the connections that lead to success and diminishing those that lead to failure. For a more detailed introduction to neural networks, Michael Nielsen’s <a href="http://neuralnetworksanddeeplearning.com/index.html">Neural Networks and Deep Learning</a> is a good place to start. For a more technical overview, try <a href="http://www.deeplearningbook.org/">Deep Learning</a> by Ian Goodfellow, Yoshua Bengio, and Aaron Courville.</p>
<p>It's a technique for building a computer program that learns from data. It is based very loosely on how we think the human brain works. First, a collection of software "neurons" ar[...]
</div>

<div class="l--body">
<h2>How Does This Relate to Vision?</h2>
<p>The blind spot visualization demonstrates a fascinating neuroscience concept: your brain has a natural blind spot!
Where the optic nerve exits your retina, there are no light-sensitive cells, creating a gap in your visual field.
Yet you don't notice it because your brain fills in the missing information using context from surrounding areas.</p>
<p>By training a neural network with masked data (simulating the blind spot), we can show how artificial neural networks
learn to predict and "fill in" missing visual information—just like your brain does!</p>
</div>

<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>
<p>We’ve also provided some controls below to enable you tailor the playground to a specific topic or lesson. Just choose which features you’d like to be visible below then save <a class="hide-controls-link" href="#">this link</a>, or <a href="javascript:location.reload();">refresh</a> the page.</p>
<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 [...]
<p>We've also provided some controls below to enable you tailor the playground to a specific topic or lesson. Just choose which features you'd like to be visible below then save <a clas[...]
<div class="hide-controls"></div>
</div>

<div class="l--body">
<h2>What Do All the Colors Mean?</h2>
<p>Orange and blue are used throughout the visualization in slightly different ways, but in general orange shows negative values while blue shows positive values.</p>
<p>The data points (represented by small circles) are initially colored orange or blue, which correspond to positive one and negative one.</p>
<p>In the hidden layers, the lines are colored by the weights of the connections between neurons. Blue shows a positive weight, which means the network is using that output of the neuron as given. An orange line shows that the network is assiging a negative weight.</p>
<p>In the output layer, the dots are colored orange or blue depending on their original values. The background color shows what the network is predicting for a particular area. The intensity of the color shows how confident that prediction is.</p>
<p>In the hidden layers, the lines are colored by the weights of the connections between neurons. Blue shows a positive weight, which means the network is using that output of the neuron as[...]
<p>In the output layer, the dots are colored orange or blue depending on their original values. The background color shows what the network is predicting for a particular area. The intensit[...]
</div>

<div class="l--body">
Expand All @@ -352,11 +406,15 @@ <h2>What Library Are You Using?</h2>
<h2>Credits</h2>
<p>
This was created by Daniel Smilkov and Shan Carter.
This is a continuation of many people’s previous work — most notably Andrej Karpathy’s <a href="http://cs.stanford.edu/people/karpathy/convnetjs/demo/classify2d.html">convnet.js demo</a>
and Chris Olah’s <a href="http://colah.github.io/posts/2014-03-NN-Manifolds-Topology/">articles</a> about neural networks.
This is a continuation of many people's previous work — most notably Andrej Karpathy's <a href="http://cs.stanford.edu/people/karpathy/convnetjs/demo/classify2d.html">convnet.js dem[...]
and Chris Olah's <a href="http://colah.github.io/posts/2014-03-NN-Manifolds-Topology/">articles</a> about neural networks.
Many thanks also to D. Sculley for help with the original idea and to Fernanda Viégas and Martin Wattenberg and the rest of the
<a href="https://research.google.com/bigpicture/">Big Picture</a> and <a href="https://research.google.com/teams/brain/">Google Brain</a> teams for feedback and guidance.
</p>
<p>
Vision Blind Spot adaptation created to demonstrate how neural networks can learn to predict and fill in missing visual information,
just like the human brain does with the natural blind spot in vision.
</p>
</div>
</article>

Expand Down
Loading