Skip to content

Commit

Permalink
Merge pull request #198 from Insiyaa/feature_segment
Browse files Browse the repository at this point in the history 
Allow to select image preprocessing method
  • Loading branch information
@birm
birm authored Aug 16, 2019
2 parents 1137e93 + 147495a commit 3cca1b4
Show file tree
Hide file tree
Showing 4 changed files with 127 additions and 29 deletions.
67 changes: 57 additions & 10 deletions apps/model/model.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,6 +161,25 @@ async function initUIcomponents() {
}
});

let filterList = [
{
icon: "filter_1",
title: "Normalization",
value: "norm",
checked: true
},{
icon: "filter_2",
title: "Centering",
value: 'center',
checked: false
},{
icon: "filter_3",
title: "Standardization",
value: 'std',
checked: false
}
];

// create toolbar
$UI.toolbar = new CaToolbar({
id: 'ca_tools',
Expand All @@ -180,6 +199,12 @@ async function initUIcomponents() {
dropdownList: dropDownList,
title: 'Select Model',
callback: setValue
},{
icon: 'photo_filter',
type: 'dropdown',
dropdownList: filterList,
title: 'Pixel Scaling',
callback: setFilter
},{
icon: 'insert_photo',
type: 'btn',
Expand Down Expand Up @@ -288,6 +313,10 @@ function setValue(args) {
$UI.args = args;
}

function setFilter(filter) {
$UI.filter = filter;
}

/**
* Toolbar button callback
* @param e
Expand All @@ -311,7 +340,7 @@ function drawRectangle(e) {
let current_zoom = parseInt($CAMIC.viewer.imagingHelper._zoomFactor * 40);
required_zoom = $UI.args? parseInt($UI.args.status.split('_')[1].split('-')[1]):current_zoom;
if (current_zoom != required_zoom) {
alert('You are testing the model for a different zoom level. Performance might be affected.');
alert(`You are testing the model for a different zoom level (recommended: ${required_zoom}). Performance might be affected.`);
}
document.querySelector(".drop_down").classList.add('disabled');
canvasDraw.drawOn();
Expand Down Expand Up @@ -488,8 +517,32 @@ function runPredict(key) {
} else {
img2 = tf.image.resizeBilinear(img, [image_size, image_size]);
}
let offset = tf.scalar(127.5);
let normalized = img2.sub(offset).div(offset);
let scaleMethod = $UI.filter? $UI.filter.status: 'norm';
console.log(scaleMethod);

let normalized;
if (scaleMethod == 'norm') {
// Pixel Normalization: scale pixel values to the range 0-1.

let scale = tf.scalar(255);
normalized = img2.div(scale);

} else if (scaleMethod == 'center') {
// Pixel Centering: scale pixel values to have a zero mean.

let mean = img2.mean();
normalized = img2.sub(mean);
// normalized.mean().print(true); // Uncomment to check mean value.
// let min = img2.min();
// let max = img2.max();
// let normalized = img2.sub(min).div(max.sub(min));
} else {
// Pixel Standardization: scale pixel values to have a zero mean and unit variance.

let mean = img2.mean();
let std = (img2.squaredDifference(mean).sum()).div(img2.flatten().shape).sqrt();
normalized = img2.sub(mean).div(std);
}
let batched = normalized.reshape([1, image_size, image_size, input_channels]);
let values = await model.predict(batched).data();

Expand Down Expand Up @@ -521,13 +574,7 @@ function runPredict(key) {
let i = parseInt(i_max) + 1;
self.showResults('' + i + ': ' + classes[i_max] + ' - ' + final[i_max].toFixed(3));
self.hideProgress()
model = null;
normalized = [];
batched = [];
values = [];
val = [];
imgData = null;
img = null;
model.dispose()
};
}

Expand Down
85 changes: 68 additions & 17 deletions apps/segment/segment.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,6 +156,25 @@ async function initUIcomponents() {
}
});

let filterList = [
{
icon: "filter_1",
title: "Normalization",
value: "norm",
checked: true
},{
icon: "filter_2",
title: "Centering",
value: 'center',
checked: false
},{
icon: "filter_3",
title: "Standardization",
value: 'std',
checked: false
}
];


$UI.toolbar = new CaToolbar({
id: 'ca_tools',
Expand All @@ -172,10 +191,15 @@ async function initUIcomponents() {
},{
icon: 'keyboard_arrow_down',
type: 'dropdown',
value: 'rect',
dropdownList: dropDownList,
title: 'Select Model',
callback: setValue
},{
icon: 'photo_filter',
type: 'dropdown',
dropdownList: filterList,
title: 'Pixel Scaling',
callback: setFilter
},{
icon: 'add',
type: 'btn',
Expand Down Expand Up @@ -263,6 +287,11 @@ function initCore() {
// add stop draw function
viewer.canvasDrawInstance.addHandler('stop-drawing', camicStopDraw);

viewer.addHandler('zoom', (e) => {
let mask = $UI.segmentPanel.__mask;
fitCvs(mask);
});

$UI.segmentPanel = new SegmentPanel(viewer);

//add event for threshold
Expand Down Expand Up @@ -337,9 +366,8 @@ function initCore() {
$UI.segmentPanel.__opacity.addEventListener('change', function(e){
let out = this.__out;
let mask = this.__mask;
const self = this;
const alpha = +this.__opacity.value;
self.__oplabel.innerHTML = alpha;
this.__oplabel.innerHTML = alpha;
out.style.opacity = alpha;
mask.style.opacity = alpha;

Expand All @@ -361,6 +389,10 @@ function initCore() {
function setValue(args) {
$UI.args = args;
}

function setFilter(filter) {
$UI.filter = filter;
}
/**
* Toolbar button callback
* @param e
Expand Down Expand Up @@ -388,9 +420,9 @@ function drawRectangle(e) {
if (e.checked) {
// Warn about zoom level
let current_zoom = parseInt($CAMIC.viewer.imagingHelper._zoomFactor * 40);
required_zoom = $UI.args&&$UI.args.status!="watershed"? parseInt($UI.args.status.split('_')[1].split('-')[1]):current_zoom;
required_zoom = $UI.args&&$UI.args.status!="watershed"? parseInt($UI.args.status.split('_')[0].split('-')[2]):current_zoom;
if (current_zoom != required_zoom) {
alert('You are testing the model for a different zoom level. Performance might be affected.');
alert(`You are testing the model for a different zoom level (recommended: ${required_zoom}). Performance might be affected.`);
}
document.querySelector(".drop_down").classList.add('disabled');
canvasDraw.drawOn();
Expand Down Expand Up @@ -698,8 +730,34 @@ async function segmentModel(key) {
} else {
img2 = tf.image.resizeBilinear(img, [image_size, image_size]);
}
let offset = tf.scalar(127.5);
let normalized = img2.sub(offset).div(offset);
let scaleMethod = $UI.filter? $UI.filter.status: 'norm';
console.log(scaleMethod);

let normalized;
if (scaleMethod == 'norm') {
// Pixel Normalization: scale pixel values to the range 0-1.

let scale = tf.scalar(255);
normalized = img2.div(scale);

} else if (scaleMethod == 'center') {
// Pixel Centering: scale pixel values to have a zero mean.

let mean = img2.mean();
normalized = img2.sub(mean);
// normalized.mean().print(true); // Uncomment to check mean value.
// let min = img2.min();
// let max = img2.max();
// let normalized = img2.sub(min).div(max.sub(min));
} else {
// Pixel Standardization: scale pixel values to have a zero mean and unit variance.

let mean = img2.mean();
let std = (img2.squaredDifference(mean).sum()).div(img2.flatten().shape).sqrt();
normalized = img2.sub(mean).div(std);
}


let batched = normalized.reshape([1, image_size, image_size, input_channels]);
let values = await model.predict(batched).data();
values = Array.from(values);
Expand All @@ -717,19 +775,12 @@ async function segmentModel(key) {


self.hideProgress();
model = null;
fitCvs(finalRes);
finalRes.style.opacity = 0.6;
self.__opacity.value = 0.6;
self.__oplabel = '0.6';

model = null;
normalized = [];
batched = [];
values = [];
val = [];
imgData = null;
img = null;
self.__oplabel.innerHTML = '0.6';

model.dispose();
} // on success

}
Expand Down
2 changes: 1 addition & 1 deletion apps/segment/segmentpanel/segmentpanel.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@
display: flex;
}

.segment-panel .src, .segment-panel .out {
.segment-panel .src, .segment-panel .out, #mask {
width: 100%;
height: 100%;
}
Expand Down
2 changes: 1 addition & 1 deletion apps/segment/segmentpanel/segmentpanel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ function SegmentPanel(viewer){
<div id='mask_vis' class='material-icons settings' title='Toggle Mask'>visibility</div>
<div id='owrap' class='segment-setting settings' style="display: none;">
<label for="threshold">Opacity</label><input type='range' id='opacity' min='0' max='1' step='0.01' value='0.6'><label id='olabel'>0.6</label>
<label for="opacity">Opacity</label><input type='range' id='opacity' min='0' max='1' step='0.01' value='0.6'><label id='olabel'>0.6</label>
</div>
<div id='twrap' class='segment-setting settings' style="display: none;">
Expand Down

0 comments on commit 3cca1b4

Please sign in to comment.