Skip to content

Commit

Permalink
Update website for correspondence visualization
Browse files Browse the repository at this point in the history
  • Loading branch information
@zhuyifengzju
zhuyifengzju committed Oct 23, 2023
1 parent 34208e4 commit a8c0365
Show file tree
Hide file tree
Showing 6 changed files with 33 additions and 78 deletions.
4 changes: 2 additions & 2 deletions docs/_layouts/home.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ <h1 class="title is-2 publication-title">GROOT: Learning Generalizable Manipulat
frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div class="subtitle">
1-min spotlight video. Better view with audio or turn on captions.
1-min spotlight video. Turn on audio or the caption to learn about the narrative.
</div>
</div>
</div>
Expand Down Expand Up @@ -261,7 +261,7 @@ <h3 class="title is-4">SAM result</h3>
<div class="column">
<div id="canvas-container">
<canvas id="dino-image-canvas" width="480" height="480"></canvas>
<!-- <canvas id="mask-canvas" width="480" height="480"></canvas> -->
<canvas id="dino-mask-canvas" width="480" height="480"></canvas>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion docs/static/css/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -220,7 +220,7 @@ hr
width: 480px;
height: 480px;
}
#mask-canvas, #image-canvas {
#mask-canvas, #image-canvas, #dino-image-canvas, #dino-mask-canvas{
position: absolute;
top: 0;
left: 0;
Expand Down
Binary file added docs/static/images/new_image.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions docs/static/images/ref_mask.json
View file

Large diffs are not rendered by default.

Binary file added docs/static/images/reference_image.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
104 changes: 29 additions & 75 deletions docs/static/js/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,90 +38,43 @@ $(document).ready(function() {
autoplaySpeed: 3000,
}

// // Initialize all div with carousel class
// var carousels = bulmaCarousel.attach('.carousel', options);

// // Loop on each carousel initialized
// for(var i = 0; i < carousels.length; i++) {
// // Add listener to event
// carousels[i].on('before:show', state => {
// console.log(state);
// });
// }

// // Access to bulmaCarousel instance of an element
// var element = document.querySelector('#my-element');
// if (element && element.bulmaCarousel) {
// // bulmaCarousel instance is available as element.bulmaCarousel
// element.bulmaCarousel.on('before-show', function(state) {
// console.log(state);
// });
// }

/*var player = document.getElementById('interpolation-video');
player.addEventListener('loadedmetadata', function() {
$('#interpolation-slider').on('input', function(event) {
console.log(this.value, player.duration);
player.currentTime = player.duration / 100 * this.value;
})
}, false);*/
// preloadInterpolationImages();

// $('#interpolation-slider').on('input', function(event) {
// setInterpolationImage(this.value);
// });
// setInterpolationImage(0);
// $('#interpolation-slider').prop('max', NUM_INTERP_FRAMES - 1);

// bulmaSlider.attach();



// var trace1 = {
// x: [1, 2, 3, 4, 5],
// y: [1, 6, 3, 6, 8],
// mode: 'markers',
// type: 'scatter',
// name: 'Sample Data',
// marker: {
// color: 'rgb(156, 165, 196)',
// size: 12
// }
// };

// var data = [trace1];

// var layout = {
// title: 'Simple Scatter Plot with Plotly',
// xaxis: {
// title: 'X-axis Label'
// },
// yaxis: {
// title: 'Y-axis Label'
// }
// };
let davisPalette = ['#000000', '#800000', '#008000', '#808000', '#000080', '#800080', '#008080', '#808080', '#400000', '#C00000', '#408000', '#C08000', '#400080', '#C00080', '#408080', '#C08080', '#004000', '#804000', '#00C000', '#80C000', '#004080', '#804080', '#00C080', '#80C080', '#404000', '#C04000', '#40C000', '#C0C000', '#404080', '#C04080', '#40C080', '#C0C080', '#000040', '#800040', '#008040', '#808040', '#0000C0', '#8000C0', '#0080C0', '#8080C0', '#400040', '#C00040', '#408040', '#C08040', '#4000C0', '#C000C0', '#4080C0', '#C080C0', '#004040', '#804040', '#00C040', '#80C040', '#0040C0', '#8040C0', '#00C0C0', '#80C0C0', '#404040', '#C04040', '#40C040', '#C0C040', '#4040C0', '#C040C0', '#40C0C0', '#C0C0C0', '#200000', '#A00000', '#208000', '#A08000', '#200080', '#A00080', '#208080', '#A08080', '#600000', '#E00000', '#608000', '#E08000', '#600080', '#E00080', '#608080', '#E08080', '#204000', '#A04000', '#20C000', '#A0C000', '#204080', '#A04080', '#20C080', '#A0C080', '#604000', '#E04000', '#60C000', '#E0C000', '#604080', '#E04080', '#60C080', '#E0C080', '#200040', '#A00040', '#208040', '#A08040', '#2000C0', '#A000C0', '#2080C0', '#A080C0', '#600040', '#E00040', '#608040', '#E08040', '#6000C0', '#E000C0', '#6080C0', '#E080C0', '#204040', '#A04040', '#20C040', '#A0C040', '#2040C0', '#A040C0', '#20C0C0', '#A0C0C0', '#604040', '#E04040', '#60C040', '#E0C040', '#6040C0', '#E040C0', '#60C0C0', '#E0C0C0', '#002000', '#802000', '#00A000', '#80A000', '#002080', '#802080', '#00A080', '#80A080', '#402000', '#C02000', '#40A000', '#C0A000', '#402080', '#C02080', '#40A080', '#C0A080', '#006000', '#806000', '#00E000', '#80E000', '#006080', '#806080', '#00E080', '#80E080', '#406000', '#C06000', '#40E000', '#C0E000', '#406080', '#C06080', '#40E080', '#C0E080', '#002040', '#802040', '#00A040', '#80A040', '#0020C0', '#8020C0', '#00A0C0', '#80A0C0', '#402040', '#C02040', '#40A040', '#C0A040', '#4020C0', '#C020C0', '#40A0C0', '#C0A0C0', '#006040', '#806040', '#00E040', '#80E040', '#0060C0', '#8060C0', '#00E0C0', '#80E0C0', '#406040', '#C06040', '#40E040', '#C0E040', '#4060C0', '#C060C0', '#40E0C0', '#C0E0C0', '#202000', '#A02000', '#20A000', '#A0A000', '#202080', '#A02080', '#20A080', '#A0A080', '#602000', '#E02000', '#60A000', '#E0A000', '#602080', '#E02080', '#60A080', '#E0A080', '#206000', '#A06000', '#20E000', '#A0E000', '#206080', '#A06080', '#20E080', '#A0E080', '#606000', '#E06000', '#60E000', '#E0E000', '#606080', '#E06080', '#60E080', '#E0E080', '#202040', '#A02040', '#20A040', '#A0A040', '#2020C0', '#A020C0', '#20A0C0', '#A0A0C0', '#602040', '#E02040', '#60A040', '#E0A040', '#6020C0', '#E020C0', '#60A0C0', '#E0A0C0', '#206040', '#A06040', '#20E040', '#A0E040', '#2060C0', '#A060C0', '#20E0C0', '#A0E0C0', '#606040', '#E06040', '#60E040', '#E0E040', '#6060C0', '#E060C0', '#60E0C0', '#E0E0C0'];



// Plotly.newPlot('plotly-sam', data, layout);
$.getJSON("static/images/mask.json", function(data) {
$.getJSON("static/images/ref_mask.json", function(data) {
mask = data;
drawImage(mask);
drawImage(maskCtx, mask);
});

$.getJSON("static/images/new_mask.json", function(data) {
new_mask = data;
console.log(new_mask)
drawImage(dino_maskCtx, new_mask);
});
// This assumes you have an image in the same directory as your HTML file named "your_image.png"
var img = new Image();
img.src = './static/images/example_image.jpg';
var target_img = new Image();

img.src = './static/images/reference_image.jpg';
target_img.src = './static/images/new_image.jpg';
const imageCanvas = document.getElementById('image-canvas');
const imageCtx = imageCanvas.getContext('2d');
const mask_canvas = document.getElementById('mask-canvas');
const maskCtx = mask_canvas.getContext('2d');

const dino_imageCanvas = document.getElementById('dino-image-canvas');
const dino_imageCtx = dino_imageCanvas.getContext('2d');
const dino_mask_canvas = document.getElementById('dino-mask-canvas');
const dino_maskCtx = dino_mask_canvas.getContext('2d');

img.onload = function() {
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
imageCtx.drawImage(img, 0, 0, img.width, img.height);
dino_imageCtx.drawImage(img, 0, 0, img.width, img.height);
dino_imageCtx.drawImage(target_img, 0, 0, target_img.width, target_img.height);
var imageData = imageCtx.getImageData(0, 0, canvas.width, canvas.height).data;
};

Expand All @@ -133,11 +86,11 @@ $(document).ready(function() {
// console.log(x, y);

const hoveredObject = mask[y][x];
drawImage(mask, hoveredObject);
});

let davisPalette = ['#000000', '#800000', '#008000', '#808000', '#000080', '#800080', '#008080', '#808080', '#400000', '#C00000', '#408000', '#C08000', '#400080', '#C00080', '#408080', '#C08080', '#004000', '#804000', '#00C000', '#80C000', '#004080', '#804080', '#00C080', '#80C080', '#404000', '#C04000', '#40C000', '#C0C000', '#404080', '#C04080', '#40C080', '#C0C080', '#000040', '#800040', '#008040', '#808040', '#0000C0', '#8000C0', '#0080C0', '#8080C0', '#400040', '#C00040', '#408040', '#C08040', '#4000C0', '#C000C0', '#4080C0', '#C080C0', '#004040', '#804040', '#00C040', '#80C040', '#0040C0', '#8040C0', '#00C0C0', '#80C0C0', '#404040', '#C04040', '#40C040', '#C0C040', '#4040C0', '#C040C0', '#40C0C0', '#C0C0C0', '#200000', '#A00000', '#208000', '#A08000', '#200080', '#A00080', '#208080', '#A08080', '#600000', '#E00000', '#608000', '#E08000', '#600080', '#E00080', '#608080', '#E08080', '#204000', '#A04000', '#20C000', '#A0C000', '#204080', '#A04080', '#20C080', '#A0C080', '#604000', '#E04000', '#60C000', '#E0C000', '#604080', '#E04080', '#60C080', '#E0C080', '#200040', '#A00040', '#208040', '#A08040', '#2000C0', '#A000C0', '#2080C0', '#A080C0', '#600040', '#E00040', '#608040', '#E08040', '#6000C0', '#E000C0', '#6080C0', '#E080C0', '#204040', '#A04040', '#20C040', '#A0C040', '#2040C0', '#A040C0', '#20C0C0', '#A0C0C0', '#604040', '#E04040', '#60C040', '#E0C040', '#6040C0', '#E040C0', '#60C0C0', '#E0C0C0', '#002000', '#802000', '#00A000', '#80A000', '#002080', '#802080', '#00A080', '#80A080', '#402000', '#C02000', '#40A000', '#C0A000', '#402080', '#C02080', '#40A080', '#C0A080', '#006000', '#806000', '#00E000', '#80E000', '#006080', '#806080', '#00E080', '#80E080', '#406000', '#C06000', '#40E000', '#C0E000', '#406080', '#C06080', '#40E080', '#C0E080', '#002040', '#802040', '#00A040', '#80A040', '#0020C0', '#8020C0', '#00A0C0', '#80A0C0', '#402040', '#C02040', '#40A040', '#C0A040', '#4020C0', '#C020C0', '#40A0C0', '#C0A0C0', '#006040', '#806040', '#00E040', '#80E040', '#0060C0', '#8060C0', '#00E0C0', '#80E0C0', '#406040', '#C06040', '#40E040', '#C0E040', '#4060C0', '#C060C0', '#40E0C0', '#C0E0C0', '#202000', '#A02000', '#20A000', '#A0A000', '#202080', '#A02080', '#20A080', '#A0A080', '#602000', '#E02000', '#60A000', '#E0A000', '#602080', '#E02080', '#60A080', '#E0A080', '#206000', '#A06000', '#20E000', '#A0E000', '#206080', '#A06080', '#20E080', '#A0E080', '#606000', '#E06000', '#60E000', '#E0E000', '#606080', '#E06080', '#60E080', '#E0E080', '#202040', '#A02040', '#20A040', '#A0A040', '#2020C0', '#A020C0', '#20A0C0', '#A0A0C0', '#602040', '#E02040', '#60A040', '#E0A040', '#6020C0', '#E020C0', '#60A0C0', '#E0A0C0', '#206040', '#A06040', '#20E040', '#A0E040', '#2060C0', '#A060C0', '#20E0C0', '#A0E0C0', '#606040', '#E06040', '#60E040', '#E0E040', '#6060C0', '#E060C0', '#60E0C0', '#E0E0C0'];
drawImage(maskCtx, mask, hoveredObject);
const newHoverObject = new_mask[y][x];
drawImage(dino_maskCtx, new_mask, newHoverObject);

});

function hexToRgb(hex) {
// Remove the hash symbol if it exists
Expand Down Expand Up @@ -168,20 +121,21 @@ $(document).ready(function() {
return hexToRgb(palette[colorIndex]);
}

function drawImage(mask, highlightedObject) {
const imgData = maskCtx.createImageData(mask_canvas.width, mask_canvas.height);
function drawImage(targetCtx, maskImage, highlightedObject) {
const imgData = targetCtx.createImageData(mask_canvas.width, mask_canvas.height);
const len = imgData.data.length;
// print mask shape to console
// console.log(mask.length, mask[0].length);
// print the first element of the mask
// console.log(mask[300][0]);

let color = getColorForNumber(highlightedObject, davisPalette);
// console.log(targetCtx, highlightedObject);
// console.log(color);
for (let i = 0; i < len; i += 4) {
const x = (i / 4) % mask_canvas.width;
const y = Math.floor(i / 4 / mask_canvas.width);
const object = mask[y][x];
const object = maskImage[y][x];
if (object === highlightedObject) {
imgData.data[i] = color[0]; // red
imgData.data[i + 1] = color[1];
Expand All @@ -194,7 +148,7 @@ $(document).ready(function() {
imgData.data[i + 3] = 50; // partial opacity
}
}
maskCtx.putImageData(imgData, 0, 0);
targetCtx.putImageData(imgData, 0, 0);
}

// Real Robot Bar Chart
Expand Down Expand Up @@ -256,7 +210,7 @@ $(document).ready(function() {
showarrow: false,
xaxis: {
tickfont: {
size: 24,
size: 20,
family: 'Arial',
color: 'black',
weight: 'bold'
Expand Down

0 comments on commit a8c0365

Please sign in to comment.