Spaces:

tenxlenx
/

cuda-visionary-debugger

Running

make sure all css is handles such as the navigation bars, fill the screen nicely with better panel layout and usage metrics, adding breakpoints, stepping etc

a8ccd27 verified 11 months ago

Raw History Blame Contribute Delete

7.18 kB

document.addEventListener('DOMContentLoaded', function() {
    // Initialize UI elements
    const stepValueElement = document.querySelector('.step-value');
    let currentStep = 0;

    // Step control functions
    function updateStep(increment = 1) {
        currentStep += increment;
        stepValueElement.textContent = `0x${currentStep.toString(16).toUpperCase()}`;
        // Update other UI elements as needed
    }

    // Setup control button event listeners
    document.querySelectorAll('.control-button').forEach(button => {
        if (button.querySelector('[data-feather="play"]')) {
            button.addEventListener('click', () => {
                // Run logic
            });
        }
        if (button.querySelector('[data-feather="pause"]')) {
            button.addEventListener('click', () => {
                // Pause logic
            });
        }
        if (button.querySelector('[data-feather="skip-back"]')) {
            button.addEventListener('click', () => updateStep(-1));
        }
        if (button.querySelector('[data-feather="skip-forward"]')) {
            button.addEventListener('click', () => updateStep(1));
        }
    });

    // Initialize charts
const gpuOptions = {
        series: [{
            name: 'Utilization',
            data: [30, 40, 35, 50, 49, 60, 70, 91]
        }],
        chart: {
            type: 'area',
            height: '100%',
            sparkline: {
                enabled: true
            },
            toolbar: {
                show: false
            }
        },
        colors: ['#6366f1'],
        fill: {
            type: 'gradient',
            gradient: {
                shadeIntensity: 1,
                opacityFrom: 0.7,
                opacityTo: 0.3,
            }
        },
        stroke: {
            curve: 'smooth',
            width: 2
        },
        tooltip: {
            enabled: false
        }
    };

    const timeOptions = {
        series: [{
            name: 'Time',
            data: [12, 14, 10, 8, 6, 5, 4]
        }],
        chart: {
            type: 'line',
            height: '100%',
            sparkline: {
                enabled: true
            },
            toolbar: {
                show: false
            }
        },
        colors: ['#8b5cf6'],
        stroke: {
            curve: 'smooth',
            width: 2
        },
        tooltip: {
            enabled: false
        }
    };

    const memoryOptions = {
        series: [75],
        chart: {
            type: 'radialBar',
            height: '100%',
            sparkline: {
                enabled: true
            }
        },
        plotOptions: {
            radialBar: {
                startAngle: -90,
                endAngle: 90,
                track: {
                    background: "#374151",
                    strokeWidth: '97%',
                    margin: 5,
                },
                dataLabels: {
                    name: {
                        show: false
                    },
                    value: {
                        offsetY: -2,
                        fontSize: '16px',
                        color: '#f3f4f6'
                    }
                }
            }
        },
        colors: ['#ec4899'],
    };

    const gpuChart = new ApexCharts(document.querySelector("#gpuChart"), gpuOptions);
    const timeChart = new ApexCharts(document.querySelector("#timeChart"), timeOptions);
    const memoryChart = new ApexCharts(document.querySelector("#memoryChart"), memoryOptions);
    
    gpuChart.render();
    timeChart.render();
    memoryChart.render();
    // Generate thread visualization
    const threadGrid = document.getElementById('threadGrid');
    for (let i = 0; i < 64; i++) {
        const thread = document.createElement('div');
        thread.className = 'bg-gray-700 rounded p-2 text-center text-xs flex flex-col items-center justify-center hover:bg-gray-600 transition cursor-pointer';
        thread.innerHTML = `
            <div class="w-4 h-4 rounded-full mb-1 ${i % 8 === 0 ? 'bg-red-500' : i % 3 === 0 ? 'bg-primary-500' : 'bg-secondary-500'} ${i % 5 === 0 ? 'thread-active' : ''}"></div>
            <div>${i}</div>
        `;
        thread.addEventListener('click', () => showThreadDetails(i));
        threadGrid.appendChild(thread);
    }

    // Generate register table
    const registerTable = document.getElementById('registerTable');
    const registerTypes = ['%r', '%f', '%p', '%rd'];
    const registerNames = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
    const valueTypes = ['u32', 'f32', 'pred', 'u64'];

    function generateRandomValue(type) {
        switch(type) {
            case 'u32': return `0x${Math.floor(Math.random() * 0xFFFFFFFF).toString(16).padStart(8, '0')}`;
            case 'f32': return (Math.random() * 100).toFixed(4);
            case 'pred': return Math.random() > 0.5 ? 'true' : 'false';
            case 'u64': return `0x${Math.floor(Math.random() * Number.MAX_SAFE_INTEGER).toString(16).padStart(16, '0')}`;
        }
    }

    function populateRegisterTable(threadId = 0) {
        registerTable.innerHTML = '';
        for (let i = 0; i < 15; i++) {
            const typeIndex = i % registerTypes.length;
            const regType = registerTypes[typeIndex];
            const valueType = valueTypes[typeIndex];
            const row = document.createElement('tr');
            row.className = 'border-b border-gray-700 hover:bg-gray-800 transition';
            row.innerHTML = `
                <td class="py-2 px-4 text-purple-400">${regType}${registerNames[i % registerNames.length]}</td>
                <td class="py-2 px-4 text-gray-400">${valueType}</td>
                <td class="py-2 px-4 font-mono">${generateRandomValue(valueType)}</td>
                <td class="py-2 px-4">${threadId}</td>
            `;
            registerTable.appendChild(row);
        }
    }

    function showThreadDetails(threadId) {
        populateRegisterTable(threadId);
        // Highlight the selected thread
        document.querySelectorAll('#threadGrid div').forEach((el, idx) => {
            el.classList.toggle('ring-2', idx === threadId);
            el.classList.toggle('ring-primary-500', idx === threadId);
        });
    }

    // Initial population
    populateRegisterTable();
// Simulate data updates
    setInterval(() => {
        const randomData = Array.from({length: 8}, () => Math.floor(Math.random() * 30) + 70);
        gpuChart.updateSeries([{data: randomData}]);
        
        const randomTime = Array.from({length: 7}, () => Math.floor(Math.random() * 10) + 2);
        timeChart.updateSeries([{data: randomTime}]);
        
        const randomMemory = Math.floor(Math.random() * 20) + 70;
        memoryChart.updateSeries([randomMemory]);
        
        // Randomly activate some threads
        document.querySelectorAll('#threadGrid div div:first-child').forEach((el, idx) => {
            if (Math.random() > 0.7) {
                el.classList.add('thread-active');
            } else {
                el.classList.remove('thread-active');
            }
        });
    }, 2000);
});


	document.addEventListener('DOMContentLoaded', function() {
	// Initialize UI elements
	const stepValueElement = document.querySelector('.step-value');
	let currentStep = 0;

	// Step control functions
	function updateStep(increment = 1) {
	currentStep += increment;
	stepValueElement.textContent = `0x${currentStep.toString(16).toUpperCase()}`;
	// Update other UI elements as needed
	}

	// Setup control button event listeners
	document.querySelectorAll('.control-button').forEach(button => {
	if (button.querySelector('[data-feather="play"]')) {
	button.addEventListener('click', () => {
	// Run logic
	});
	}
	if (button.querySelector('[data-feather="pause"]')) {
	button.addEventListener('click', () => {
	// Pause logic
	});
	}
	if (button.querySelector('[data-feather="skip-back"]')) {
	button.addEventListener('click', () => updateStep(-1));
	}
	if (button.querySelector('[data-feather="skip-forward"]')) {
	button.addEventListener('click', () => updateStep(1));
	}
	});

	// Initialize charts
	const gpuOptions = {
	series: [{
	name: 'Utilization',
	data: [30, 40, 35, 50, 49, 60, 70, 91]
	}],
	chart: {
	type: 'area',
	height: '100%',
	sparkline: {
	enabled: true
	},
	toolbar: {
	show: false
	}
	},
	colors: ['#6366f1'],
	fill: {
	type: 'gradient',
	gradient: {
	shadeIntensity: 1,
	opacityFrom: 0.7,
	opacityTo: 0.3,
	}
	},
	stroke: {
	curve: 'smooth',
	width: 2
	},
	tooltip: {
	enabled: false
	}
	};

	const timeOptions = {
	series: [{
	name: 'Time',
	data: [12, 14, 10, 8, 6, 5, 4]
	}],
	chart: {
	type: 'line',
	height: '100%',
	sparkline: {
	enabled: true
	},
	toolbar: {
	show: false
	}
	},
	colors: ['#8b5cf6'],
	stroke: {
	curve: 'smooth',
	width: 2
	},
	tooltip: {
	enabled: false
	}
	};

	const memoryOptions = {
	series: [75],
	chart: {
	type: 'radialBar',
	height: '100%',
	sparkline: {
	enabled: true
	}
	},
	plotOptions: {
	radialBar: {
	startAngle: -90,
	endAngle: 90,
	track: {
	background: "#374151",
	strokeWidth: '97%',
	margin: 5,
	},
	dataLabels: {
	name: {
	show: false
	},
	value: {
	offsetY: -2,
	fontSize: '16px',
	color: '#f3f4f6'
	}
	}
	}
	},
	colors: ['#ec4899'],
	};

	const gpuChart = new ApexCharts(document.querySelector("#gpuChart"), gpuOptions);
	const timeChart = new ApexCharts(document.querySelector("#timeChart"), timeOptions);
	const memoryChart = new ApexCharts(document.querySelector("#memoryChart"), memoryOptions);

	gpuChart.render();
	timeChart.render();
	memoryChart.render();
	// Generate thread visualization
	const threadGrid = document.getElementById('threadGrid');
	for (let i = 0; i < 64; i++) {
	const thread = document.createElement('div');
	thread.className = 'bg-gray-700 rounded p-2 text-center text-xs flex flex-col items-center justify-center hover:bg-gray-600 transition cursor-pointer';
	thread.innerHTML = `
	<div class="w-4 h-4 rounded-full mb-1 ${i % 8 === 0 ? 'bg-red-500' : i % 3 === 0 ? 'bg-primary-500' : 'bg-secondary-500'} ${i % 5 === 0 ? 'thread-active' : ''}"></div>
	<div>${i}</div>
	`;
	thread.addEventListener('click', () => showThreadDetails(i));
	threadGrid.appendChild(thread);
	}

	// Generate register table
	const registerTable = document.getElementById('registerTable');
	const registerTypes = ['%r', '%f', '%p', '%rd'];
	const registerNames = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
	const valueTypes = ['u32', 'f32', 'pred', 'u64'];

	function generateRandomValue(type) {
	switch(type) {
	case 'u32': return `0x${Math.floor(Math.random() * 0xFFFFFFFF).toString(16).padStart(8, '0')}`;
	case 'f32': return (Math.random() * 100).toFixed(4);
	case 'pred': return Math.random() > 0.5 ? 'true' : 'false';
	case 'u64': return `0x${Math.floor(Math.random() * Number.MAX_SAFE_INTEGER).toString(16).padStart(16, '0')}`;
	}
	}

	function populateRegisterTable(threadId = 0) {
	registerTable.innerHTML = '';
	for (let i = 0; i < 15; i++) {
	const typeIndex = i % registerTypes.length;
	const regType = registerTypes[typeIndex];
	const valueType = valueTypes[typeIndex];
	const row = document.createElement('tr');
	row.className = 'border-b border-gray-700 hover:bg-gray-800 transition';
	row.innerHTML = `
	<td class="py-2 px-4 text-purple-400">${regType}${registerNames[i % registerNames.length]}</td>
	<td class="py-2 px-4 text-gray-400">${valueType}</td>
	<td class="py-2 px-4 font-mono">${generateRandomValue(valueType)}</td>
	<td class="py-2 px-4">${threadId}</td>
	`;
	registerTable.appendChild(row);
	}
	}

	function showThreadDetails(threadId) {
	populateRegisterTable(threadId);
	// Highlight the selected thread
	document.querySelectorAll('#threadGrid div').forEach((el, idx) => {
	el.classList.toggle('ring-2', idx === threadId);
	el.classList.toggle('ring-primary-500', idx === threadId);
	});
	}

	// Initial population
	populateRegisterTable();
	// Simulate data updates
	setInterval(() => {
	const randomData = Array.from({length: 8}, () => Math.floor(Math.random() * 30) + 70);
	gpuChart.updateSeries([{data: randomData}]);

	const randomTime = Array.from({length: 7}, () => Math.floor(Math.random() * 10) + 2);
	timeChart.updateSeries([{data: randomTime}]);

	const randomMemory = Math.floor(Math.random() * 20) + 70;
	memoryChart.updateSeries([randomMemory]);

	// Randomly activate some threads
	document.querySelectorAll('#threadGrid div div:first-child').forEach((el, idx) => {
	if (Math.random() > 0.7) {
	el.classList.add('thread-active');
	} else {
	el.classList.remove('thread-active');
	}
	});
	}, 2000);
	});