Commit dc2a970e authored by Elijah Justin Medina's avatar Elijah Justin Medina
Browse files

initial commit

parents
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/slider.css">
<!-- <link rel="stylesheet" type="text/css" href="css/style.css"> -->
<style>
body {
height: 100%;
}
.slider::-webkit-slider-thumb {
background: #575252;
width: 5px;
}
.slider::-moz-range-thumb {
background: #ffffff ;
width: 5px;
}
.slider {
position: relative;
margin-left: 10px;
}
.slider#higher {
top: -30px;
}
.slider.red {
background: linear-gradient(to right, rgb(0,0,0) , rgb(255,0,0) );
}
.slider.green {
background: linear-gradient(to right, rgb(0,0,0) , rgb(0,255,0) );
}
.slider.blue {
background: linear-gradient(to right, rgb(0,0,0) , rgb(0,0,255) );
}
.slidecontainer {
width: 33%;
display: inline-block;
padding: 0px;
}
#img-container {
width: 250px;
height: 250px;
text-align: center;
}
#morphed-container {
width: 550px;
height: 275px;
text-align: center;
}
img {
max-width: 100%;
max-height: 100%;
margin: 15px 5px;
}
#select-image {
width: 25%;
padding-right: 2%;
float: left;
position: fixed;
height: 100%;
}
#results {
margin-top: 25px;
margin-left: 27%;
width: 70%;
float: left;
overflow: auto;
z-index: 10;
}
#mask, #dilateerode {
float: left;
width: 50%;
z-index: 10;
}
#dilateerode{
padding-right: 10px;
}
.slider.morph {
width: 65%;
margin-right: 10px;
float: right;
}
div#morphological-operations h4 {
margin-top: 100px;
padding-top: 250px;
}
</style>
</head>
<body>
<div id='select-image'>
<h3>Image Pre-processing</h3>
<p>Image segmentation, an image processing technique, is the process of getting the foreground or removing the background of an image.
With emergence of deep learning architectures like Mask R-CNN, this process has become more accurate, overshadowing traditional image segmentation techniques.
<br>
However, for simple images, these traditional techniques are sufficient, which will be explored in this project.</p>
<h4>Select Image</h4>
<select name="img" id="img">
<option value="none" disabled hidden selected>--SELECT IMAGE--</option>
</select>
<br/>
<div id="img-container">
<img src="">
</div>
</div>
<div id='results'>
<div id='thresholding'>
<h4>Basic mask creation</h4>
<p>Similar to how eyes perceive colors using receptors (red, green, and blue cones), images are composed of three channels or dimension corresponding to RGB.
Using simple thresholding for one of these channels, certain pixels/parts in the image can be removed.
The sliders below set the range of values for red, green, and blue channels that will be retained in the image.
</p>
<div>
<div class="slidecontainer">
<label for="lower">Red Channel</label>
<br/>
<input type="range" min="0" max="255" value="50" class="slider red" id="lower">
<input type="range" min="0" max="255" value="255" class="slider red" id="higher">
</div>
<div class="slidecontainer">
<label for="lower">Green Channel</label>
<br/>
<input type="range" min="0" max="255" value="50" class="slider green" id="lower">
<input type="range" min="0" max="255" value="255" class="slider green" id="higher">
</div>
<div class="slidecontainer">
<label for="lower">Blue Channel</label>
<br/>
<input type="range" min="0" max="255" value="50" class="slider blue" id="lower">
<input type="range" min="0" max="255" value="255" class="slider blue" id="higher">
</div>
</div>
<div class="threshold">
<div id="mask">
<button id="get-mask">Get mask</button>
<div id="img-container">
<img src="" alt="Select image first">
</div>
</div>
<div id="mask">
<button id="apply-mask">Apply mask</button>
<div id="img-container">
<img src="" alt="Generate mask first">
</div>
</div>
</div>
</div>
<div id="morphological-operations">
<h4>Morphological Operations</h4>
<p>When the colors of the images are too mixed, i.e. the foreground is not easily separable from the background using thresholding techniques, some operations can be done on the mask in order to improve the results.
There are many operations but most of them can be traced back to two fundamental operations: erosion and dilation.
<b>Erosion</b> is the process of "enlarging" the background pixels, transforming any surrounding foreground pixel to background pixel.
<b>Dilation</b> is the opposite, it enlarges the foreground pixels by transforming background to foreground.
Note that both operations have a concept of "surrounding" or a neighborhood.
This is defined by a structuring element which is also a matrix of ones and zeros that take any shape.
For this project, our structuring element will be a circle with radius set by the user.
</p>
<div class="morph">
<div id="dilateerode">
<input type="range" min="1" max="20" value="1" step="1" class="slider morph" id="erosion">
<label for="erosion-slider" style="float: right;">Radius (erosion): 10px</label>
<br>
<button id="erode">Erode</button>
</div>
<div id="dilateerode">
<input type="range" min="1" max="20" value="1" step="1" class="slider morph" id="dilation">
<label for="dilation-slider" style="float: right;">Radius (dilation): 10px</label>
<br>
<button id="dilate">Dilate</button>
</div>
<div id="morphed-container">
<img src="" alt="Select image first" id="morphed">
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="js/imageselect.js"></script>
<script>
function getMask() {
let R_min = document.querySelector("input.slider.red#lower").value
let G_min = document.querySelector("input.slider.green#lower").value
let B_min = document.querySelector("input.slider.blue#lower").value
let R_max = document.querySelector("input.slider.red#higher").value
let G_max = document.querySelector("input.slider.green#higher").value
let B_max = document.querySelector("input.slider.blue#higher").value
let selImg = document.querySelector("select#img").value
fetch("/threshold/"+selImg+'/'+R_min+'/'+R_max+'/'+G_min+'/'+G_max+'/'+B_min+'/'+B_max).then(
function (r){
document.querySelector("button#get-mask+div img").src = "data/thresholded/"+selImg.slice(0, -4)+ '-' + selImg.slice(selImg.length - 3) + '-' + R_min + '-' + R_max + '-' + G_min + '-' + G_max + '-' + B_min + '-' + B_max +'.png'
}
)
}
function applyMask() {
let R_min = document.querySelector("input.slider.red#lower").value
let G_min = document.querySelector("input.slider.green#lower").value
let B_min = document.querySelector("input.slider.blue#lower").value
let R_max = document.querySelector("input.slider.red#higher").value
let G_max = document.querySelector("input.slider.green#higher").value
let B_max = document.querySelector("input.slider.blue#higher").value
let selImg = document.querySelector("select#img").value
fetch("/apply_mask/"+selImg+'/'+R_min+'/'+R_max+'/'+G_min+'/'+G_max+'/'+B_min+'/'+B_max).then(
function (r){
document.querySelector("button#apply-mask+div img").src = "data/masked_img/"+selImg.slice(0, -4)+ '-' + selImg.slice(selImg.length - 3) + '-' + R_min + '-' + R_max + '-' + G_min + '-' + G_max + '-' + B_min + '-' + B_max +'.png'
}
)
}
function erodeImage() {
let rad = document.querySelector("input#erosion").value
// console.log(rad)
let selImg = document.querySelector("select#img").value
fetch('/morph/erosion/'+selImg+'/'+rad).then(
function (r){
document.querySelector("img#morphed").src = "data/morph/morph_new_"+selImg.slice(0, -4)+ '-' + selImg.slice(selImg.length - 3)+"-" + rad + "-" + "erosion.png"
}
)
}
function dilateImage() {
let rad = document.querySelector("input#dilation").value
// console.log(rad)
let selImg = document.querySelector("select#img").value
fetch('/morph/dilation/'+selImg+'/'+rad).then(
function (r){
document.querySelector("img#morphed").src = "data/morph/morph_new_"+selImg.slice(0, -4)+ '-' + selImg.slice(selImg.length - 3)+"-" + rad + "-" + "dilation.png"
}
)
}
document.querySelector("button#get-mask").addEventListener("click", getMask)
document.querySelector("button#apply-mask").addEventListener("click", applyMask)
document.querySelector("button#erode").addEventListener("click", erodeImage)
document.querySelector("button#dilate").addEventListener("click", dilateImage)
</script>
</body>
</html>
\ No newline at end of file
imgOpt = document.querySelector("select#img")
fetch('/images').then(
function(r){
return r.json();
}
).then(
function(r){
for(let i of r) {
let opt_elem = document.createElement("option");
opt_elem.value = i
opt_elem.innerHTML = i
imgOpt.appendChild(opt_elem)
}
}
)
function img_change(){
document.querySelector("img").src = "data/images/" + imgOpt.value
}
imgOpt.addEventListener('change', img_change)
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment