Spaces:

ucalyptus
/

quickcdc-visualization

Running

App Files Files Community

quickcdc-visualization / index.html

ucalyptus

Update index.html

bc1737b verified about 1 year ago

raw

history blame contribute delete

19.2 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>AE Content-Defined Chunking Visualization</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
	<style>
	/* Custom styles */
	body {
	font-family: 'Inter', sans-serif;
	background-color: #f3f4f6; /* Tailwind gray-100 */
	}
	canvas {
	background-color: #ffffff; /* White background */
	border-radius: 0.5rem; /* Tailwind rounded-lg */
	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* Tailwind shadow-md */
	}
	/* Style buttons */
	button {
	transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
	}
	button:hover {
	box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); /* Tailwind shadow-sm */
	}
	button:active {
	transform: translateY(1px);
	}
	/* Style sliders */
	input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 8px;
	background: #d1d5db; /* Tailwind gray-300 */
	border-radius: 9999px; /* Tailwind rounded-full */
	outline: none;
	}
	input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	background: #3b82f6; /* Tailwind blue-500 */
	border-radius: 9999px; /* Tailwind rounded-full */
	cursor: pointer;
	}
	input[type="range"]::-moz-range-thumb {
	width: 16px;
	height: 16px;
	background: #3b82f6; /* Tailwind blue-500 */
	border-radius: 9999px; /* Tailwind rounded-full */
	cursor: pointer;
	border: none;
	}
	/* Explanation box styling */
	#explanation {
	background-color: #e0f2fe; /* Tailwind sky-100 */
	border-left: 4px solid #0ea5e9; /* Tailwind sky-500 */
	color: #0369a1; /* Tailwind sky-800 */
	}
	</style>
	</head>
	<body class="p-4 md:p-8 bg-gray-100">

	<div class="max-w-6xl mx-auto bg-white p-6 rounded-lg shadow-lg">
	<h1 class="text-2xl md:text-3xl font-bold mb-4 text-center text-gray-800">Asymmetric Extremum (AE) CDC Visualization</h1>
	<p class="text-sm text-gray-600 mb-6 text-center">Based on the paper by Zhang et al. (INFOCOM 2015). This visualization simplifies the 'value' to be the direct byte value (S=1).</p>

	<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6 items-center bg-gray-50 p-4 rounded-lg border border-gray-200">
	<div class="flex flex-wrap justify-center md:justify-start gap-2">
	<button id="startBtn" class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-md shadow">Start</button>
	<button id="pauseBtn" class="bg-yellow-500 hover:bg-yellow-600 text-white font-semibold py-2 px-4 rounded-md shadow" disabled>Pause</button>
	<button id="stepBtn" class="bg-green-500 hover:bg-green-600 text-white font-semibold py-2 px-4 rounded-md shadow">Step</button>
	<button id="resetBtn" class="bg-red-500 hover:bg-red-600 text-white font-semibold py-2 px-4 rounded-md shadow">Reset</button>
	</div>

	<div class="flex flex-col items-center gap-2">
	<div class="w-full max-w-xs">
	<label for="windowSize" class="block text-sm font-medium text-gray-700 text-center">Window Size (w): <span id="windowSizeValue">8</span></label>
	<input type="range" id="windowSize" min="2" max="20" value="8" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
	</div>
	<div class="w-full max-w-xs">
	<label for="dataSize" class="block text-sm font-medium text-gray-700 text-center">Data Size: <span id="dataSizeValue">100</span></label>
	<input type="range" id="dataSize" min="20" max="300" value="100" step="10" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
	</div>
	</div>

	<div class="flex flex-col items-center md:items-end gap-2">
	<div class="w-full max-w-xs">
	<label for="speed" class="block text-sm font-medium text-gray-700 text-center md:text-right">Animation Speed: <span id="speedValue">500</span> ms</label>
	<input type="range" id="speed" min="50" max="2000" value="500" step="50" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
	</div>
	</div>
	</div>

	<div class="mb-6">
	<canvas id="cdcCanvas" width="1000" height="300" class="w-full"></canvas>
	</div>

	<div id="explanation" class="p-4 rounded-md text-sm mb-4 border-l-4 border-blue-500 bg-blue-50 text-blue-800">
	Click 'Start' or 'Step' to begin the visualization. The algorithm scans the data stream (represented by bars) to find chunk boundaries (cut-points).
	</div>

	<div class="flex flex-wrap justify-center gap-4 text-xs text-gray-600">
	<div class="flex items-center gap-1"><div class="w-3 h-3 rounded-sm bg-gray-400"></div><span>Data Point</span></div>
	<div class="flex items-center gap-1"><div class="w-3 h-3 rounded-sm bg-blue-500"></div><span>Current Scan Position (i)</span></div>
	<div class="flex items-center gap-1"><div class="w-3 h-3 rounded-sm bg-red-500"></div><span>Potential Max Point (max_position)</span></div>
	<div class="flex items-center gap-1"><div class="w-3 h-3 rounded-sm border border-red-500 bg-red-200"></div><span>Right Window (w)</span></div>
	<div class="flex items-center gap-1"><div class="w-1 h-4 bg-green-600"></div><span>Cut-Point</span></div>
	</div>
	</div>

	<script>
	// --- Canvas Setup ---
	const canvas = document.getElementById('cdcCanvas');
	const ctx = canvas.getContext('2d');
	const dpr = window.devicePixelRatio \|\| 1; // Handle high-DPI displays

	function resizeCanvas() {
	const rect = canvas.getBoundingClientRect();
	canvas.width = rect.width * dpr;
	canvas.height = rect.height * dpr;
	ctx.scale(dpr, dpr);
	draw(); // Redraw after resize
	}

	// --- DOM Elements ---
	const startBtn = document.getElementById('startBtn');
	const pauseBtn = document.getElementById('pauseBtn');
	const stepBtn = document.getElementById('stepBtn');
	const resetBtn = document.getElementById('resetBtn');
	const windowSizeSlider = document.getElementById('windowSize');
	const windowSizeValueSpan = document.getElementById('windowSizeValue');
	const dataSizeSlider = document.getElementById('dataSize');
	const dataSizeValueSpan = document.getElementById('dataSizeValue');
	const speedSlider = document.getElementById('speed');
	const speedValueSpan = document.getElementById('speedValue');
	const explanationDiv = document.getElementById('explanation');

	// --- Algorithm State ---
	let dataStream = [];
	let windowSize = parseInt(windowSizeSlider.value);
	let dataSize = parseInt(dataSizeSlider.value);
	let animationSpeed = parseInt(speedSlider.value);
	let isRunning = false;
	let animationFrameId = null;
	let timeoutId = null;

	// AE specific state
	let currentIndex = 0; // Position 'i' in Algorithm 1
	let maxPosition = 0; // Position of the current max value found since last cut-point
	let maxValue = -1; // Value at maxPosition
	let chunkStart = 0; // Index where the current chunk search started
	let cutPoints = []; // Array to store found cut-point indices

	// --- Initialization ---
	function init() {
	isRunning = false;
	if (animationFrameId) cancelAnimationFrame(animationFrameId);
	if (timeoutId) clearTimeout(timeoutId);
	animationFrameId = null;
	timeoutId = null;

	windowSize = parseInt(windowSizeSlider.value);
	dataSize = parseInt(dataSizeSlider.value);
	animationSpeed = parseInt(speedSlider.value);

	// Generate random data (byte values 0-255)
	dataStream = Array.from({ length: dataSize }, () => Math.floor(Math.random() * 256));

	// Reset AE state
	currentIndex = 0;
	maxPosition = 0;
	maxValue = dataStream.length > 0 ? dataStream[0] : -1; // Initialize with first value
	chunkStart = 0;
	cutPoints = [];

	// Update UI
	startBtn.disabled = false;
	pauseBtn.disabled = true;
	stepBtn.disabled = false;
	windowSizeSlider.disabled = false;
	dataSizeSlider.disabled = false;
	updateExplanation(`Ready. Data Size: ${dataSize}, Window Size (w): ${windowSize}. Click Start or Step.`);

	resizeCanvas(); // Initial draw
	}

	// --- Drawing Functions ---
	function draw() {
	if (!ctx) return;

	const width = canvas.width / dpr;
	const height = canvas.height / dpr;
	const barWidth = width / dataStream.length;
	const maxBarHeight = height * 0.9; // Leave some margin at top

	// Clear canvas
	ctx.clearRect(0, 0, width, height);

	// Draw data bars
	dataStream.forEach((value, index) => {
	const barHeight = (value / 255) * maxBarHeight;
	const x = index * barWidth;
	const y = height - barHeight;

	// Default color
	ctx.fillStyle = '#9ca3af'; // Tailwind gray-400

	// Highlight current scan position
	if (index === currentIndex && currentIndex < dataStream.length) {
	ctx.fillStyle = '#3b82f6'; // Tailwind blue-500
	}

	// Highlight potential max point
	if (index === maxPosition && currentIndex < dataStream.length) {
	ctx.fillStyle = '#ef4444'; // Tailwind red-500
	}

	// Highlight right window
	if (index > maxPosition && index <= maxPosition + windowSize && currentIndex < dataStream.length) {
	// Check if it's also the current index or max position
	if (index !== currentIndex && index !== maxPosition) {
	ctx.fillStyle = '#fecaca'; // Tailwind red-200
	}
	// Draw border for window
	ctx.strokeStyle = '#ef4444'; // Tailwind red-500
	ctx.lineWidth = 1;
	ctx.strokeRect(x, y, barWidth, barHeight);
	}


	ctx.fillRect(x, y, barWidth * 0.9, barHeight); // Add small gap between bars
	});

	// Draw cut points
	ctx.strokeStyle = '#16a34a'; // Tailwind green-600
	ctx.lineWidth = 2;
	cutPoints.forEach(cutIndex => {
	const x = (cutIndex + 1) * barWidth; // Cut point is after the index
	if (x <= width) { // Ensure cut point is within canvas bounds
	ctx.beginPath();
	ctx.moveTo(x, height * 0.05);
	ctx.lineTo(x, height * 0.95);
	ctx.stroke();
	}
	});
	}

	// --- AE Algorithm Step Logic ---
	function algorithmStep() {
	if (currentIndex >= dataStream.length) {
	updateExplanation(`End of data stream reached. Found ${cutPoints.length} cut-points.`);
	stop();
	return false; // Indicate end
	}

	const currentValue = dataStream[currentIndex];
	let explanation = `Step: Scanning index ${currentIndex} (Value: ${currentValue}). Current Max: Value ${maxValue} at index ${maxPosition}.`;

	// Algorithm 1 Logic (simplified for visualization)
	// Check if current value is less than or equal to the tracked max value
	if (currentValue <= maxValue) {
	explanation += `\nValue ${currentValue} <= Max Value ${maxValue}. Checking window condition.`;
	// Check if we've reached the end of the potential max point's window
	if (currentIndex === maxPosition + windowSize) {
	explanation += `\nIndex ${currentIndex} == Max Position ${maxPosition} + Window Size ${windowSize}. Found Cut-Point!`;
	// Found a cut point!
	const cutPointIndex = currentIndex;
	// Ensure cut point isn't beyond data length and avoid duplicate points
	if (cutPointIndex < dataStream.length && !cutPoints.includes(cutPointIndex)) {
	cutPoints.push(cutPointIndex);
	}

	// Start search for the next chunk from the byte after the cut-point
	chunkStart = cutPointIndex + 1;
	currentIndex = chunkStart; // Move to the start of the next potential chunk

	// Reset max for the new chunk search
	if (currentIndex < dataStream.length) {
	maxPosition = currentIndex;
	maxValue = dataStream[currentIndex];
	explanation += `\nResetting search for next chunk starting at index ${chunkStart}. New Max: Value ${maxValue} at index ${maxPosition}.`;
	} else {
	explanation += `\nEnd of data stream reached after finding cut-point.`;
	updateExplanation(explanation);
	stop();
	return false; // End of stream
	}
	} else {
	explanation += `\nIndex ${currentIndex} != Max Position ${maxPosition} + Window Size ${windowSize}. Continue scanning.`;
	currentIndex++; // Continue scanning
	}
	}
	// Current value is greater than the tracked max value
	else {
	explanation += `\nValue ${currentValue} > Max Value ${maxValue}. Updating Max Point.`;
	// Update the maximum point
	maxValue = currentValue;
	maxPosition = currentIndex;
	explanation += `\nNew Max: Value ${maxValue} at index ${maxPosition}. Continue scanning.`;
	currentIndex++; // Continue scanning
	}

	updateExplanation(explanation);
	return true; // Indicate continue
	}

	// --- Animation Loop ---
	function loop() {
	if (!isRunning) return;

	const continueProcessing = algorithmStep();
	draw();

	if (continueProcessing) {
	// Schedule next step
	timeoutId = setTimeout(() => {
	animationFrameId = requestAnimationFrame(loop);
	}, animationSpeed);
	} else {
	// Stop if algorithm indicated end
	stop();
	}
	}

	// --- Control Functions ---
	function start() {
	if (isRunning) return;
	isRunning = true;
	startBtn.disabled = true;
	pauseBtn.disabled = false;
	stepBtn.disabled = true;
	windowSizeSlider.disabled = true;
	dataSizeSlider.disabled = true;
	updateExplanation("Running...");
	loop();
	}

	function pause() {
	if (!isRunning) return;
	isRunning = false;
	if (animationFrameId) cancelAnimationFrame(animationFrameId);
	if (timeoutId) clearTimeout(timeoutId);
	animationFrameId = null;
	timeoutId = null;
	startBtn.disabled = false;
	pauseBtn.disabled = true;
	stepBtn.disabled = false; // Allow stepping after pause
	updateExplanation("Paused.");
	}

	function step() {
	if (isRunning) pause(); // Pause if running before stepping
	isRunning = false; // Ensure not running
	startBtn.disabled = false;
	pauseBtn.disabled = true;
	stepBtn.disabled = false;
	windowSizeSlider.disabled = true; // Keep disabled during step
	dataSizeSlider.disabled = true; // Keep disabled during step

	algorithmStep();
	draw();
	if (currentIndex >= dataStream.length) {
	stepBtn.disabled = true; // Disable step if at the end
	}
	}

	function reset() {
	pause(); // Ensure stopped
	init();
	}

	function updateExplanation(text) {
	explanationDiv.innerHTML = text.replace(/\n/g, '<br>'); // Replace newlines with <br> for HTML
	}

	// --- Event Listeners ---
	startBtn.addEventListener('click', start);
	pauseBtn.addEventListener('click', pause);
	stepBtn.addEventListener('click', step);
	resetBtn.addEventListener('click', reset);

	windowSizeSlider.addEventListener('input', (e) => {
	windowSizeValueSpan.textContent = e.target.value;
	if (!isRunning) { // Only reset if not running
	windowSize = parseInt(e.target.value);
	init(); // Re-initialize with new parameter
	}
	});
	dataSizeSlider.addEventListener('input', (e) => {
	dataSizeValueSpan.textContent = e.target.value;
	if (!isRunning) {
	dataSize = parseInt(e.target.value);
	init();
	}
	});
	speedSlider.addEventListener('input', (e) => {
	animationSpeed = parseInt(e.target.value);
	speedValueSpan.textContent = e.target.value;
	// If running, clear the current timeout and set a new one with the updated speed
	if (isRunning && timeoutId) {
	clearTimeout(timeoutId);
	timeoutId = setTimeout(() => {
	animationFrameId = requestAnimationFrame(loop);
	}, animationSpeed);
	}
	});

	window.addEventListener('resize', resizeCanvas);

	// --- Initial Setup ---
	init();

	</script>
	</body>
	</html>