Spaces:

HassanStar
/

dse-cva6

Running

App Files Files Community

HassanStar commited on Jun 2

Commit

4e14875

verified ·

1 Parent(s): d48dbd3

Add 3 files

Browse files

Files changed (3) hide show

README.md +6 -4
index.html +559 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Dse Cva6
-emoji: 🏢
-colorFrom: indigo
 colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: dse-cva6
+emoji: 🐳
+colorFrom: yellow
 colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,559 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AutoML for RISC-V CVA6 DSE | Performance vs Power Analysis</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        riscv: '#3a7ca5',
+                        riscvDark: '#2c3e50',
+                        accent: '#f39c12',
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        .gradient-bg {
+            background: linear-gradient(135deg, #3a7ca5 0%, #2c3e50 100%);
+        }
+        .chart-container {
+            position: relative;
+            height: 400px;
+            width: 100%;
+        }
+        .tooltip {
+            position: absolute;
+            padding: 8px;
+            background: rgba(0, 0, 0, 0.8);
+            color: white;
+            border-radius: 4px;
+            pointer-events: none;
+            font-size: 12px;
+            z-index: 10;
+            display: none;
+        }
+        .parameter-slider {
+            -webkit-appearance: none;
+            width: 100%;
+            height: 8px;
+            border-radius: 4px;
+            background: #e0e0e0;
+            outline: none;
+        }
+        .parameter-slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 18px;
+            height: 18px;
+            border-radius: 50%;
+            background: #3a7ca5;
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body class="bg-gray-100 font-sans">
+    <!-- Header -->
+    <header class="gradient-bg text-white shadow-lg">
+        <div class="container mx-auto px-4 py-6">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <div class="flex items-center mb-4 md:mb-0">
+                    <i class="fas fa-microchip text-3xl mr-3"></i>
+                    <h1 class="text-2xl font-bold">RISC-V CVA6 AutoML DSE</h1>
+                </div>
+                <nav class="flex space-x-6">
+                    <a href="#overview" class="hover:text-accent transition">Overview</a>
+                    <a href="#explore" class="hover:text-accent transition">Explore</a>
+                    <a href="#predict" class="hover:text-accent transition">Predict</a>
+                    <a href="#about" class="hover:text-accent transition">About</a>
+                </nav>
+            </div>
+        </div>
+    </header>
+    <!-- Main Content -->
+    <main class="container mx-auto px-4 py-8">
+        <!-- Hero Section -->
+        <section id="overview" class="mb-16">
+            <div class="bg-white rounded-xl shadow-md overflow-hidden">
+                <div class="md:flex">
+                    <div class="md:w-1/2 p-8">
+                        <h2 class="text-3xl font-bold text-riscvDark mb-4">Automated Design Space Exploration for RISC-V CVA6</h2>
+                        <p class="text-gray-600 mb-6">
+                            Our AutoML platform enables rapid exploration of the performance-power trade-offs in RISC-V CVA6 processors using Dhrystone benchmark metrics.
+                            Optimize your processor configuration with machine learning predictions.
+                        </p>
+                        <div class="flex space-x-4">
+                            <button class="bg-riscv hover:bg-riscvDark text-white px-6 py-2 rounded-lg transition">
+                                <i class="fas fa-rocket mr-2"></i> Quick Start
+                            </button>
+                            <button class="border border-riscv text-riscv hover:bg-gray-100 px-6 py-2 rounded-lg transition">
+                                <i class="fas fa-book mr-2"></i> Documentation
+                            </button>
+                        </div>
+                    </div>
+                    <div class="md:w-1/2 bg-gray-100 flex items-center justify-center p-8">
+                        <img src="https://via.placeholder.com/500x300?text=RISC-V+CVA6+Architecture" alt="RISC-V CVA6 Architecture" class="rounded-lg shadow-sm">
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Key Metrics -->
+        <section class="mb-16">
+            <h2 class="text-2xl font-bold text-riscvDark mb-8 text-center">Key Design Space Metrics</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
+                    <div class="text-accent text-4xl mb-4">
+                        <i class="fas fa-tachometer-alt"></i>
+                    </div>
+                    <h3 class="font-bold text-lg mb-2">Performance</h3>
+                    <p class="text-gray-600">
+                        Dhrystone MIPS (DMIPS) and IPC (Instructions Per Cycle) metrics across different configurations.
+                    </p>
+                </div>
+                <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
+                    <div class="text-accent text-4xl mb-4">
+                        <i class="fas fa-bolt"></i>
+                    </div>
+                    <h3 class="font-bold text-lg mb-2">Power Efficiency</h3>
+                    <p class="text-gray-600">
+                        Power consumption (mW) and energy per instruction (EPI) measurements.
+                    </p>
+                </div>
+                <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
+                    <div class="text-accent text-4xl mb-4">
+                        <i class="fas fa-project-diagram"></i>
+                    </div>
+                    <h3 class="font-bold text-lg mb-2">Microarchitecture</h3>
+                    <p class="text-gray-600">
+                        Pipeline depth, cache sizes, branch prediction, and other key parameters.
+                    </p>
+                </div>
+            </div>
+        </section>
+        <!-- Design Space Explorer -->
+        <section id="explore" class="mb-16 bg-white rounded-xl shadow-md p-6">
+            <h2 class="text-2xl font-bold text-riscvDark mb-6">Design Space Explorer</h2>
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
+                <!-- Parameter Controls -->
+                <div class="bg-gray-50 p-4 rounded-lg">
+                    <h3 class="font-semibold mb-4 text-riscvDark">Configuration Parameters</h3>
+                    <div class="space-y-6">
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Pipeline Depth</label>
+                            <input type="range" min="5" max="15" value="10" class="parameter-slider" id="pipelineDepth">
+                            <div class="flex justify-between text-xs text-gray-500 mt-1">
+                                <span>5 stages</span>
+                                <span>15 stages</span>
+                            </div>
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">L1 Cache Size</label>
+                            <input type="range" min="8" max="64" value="32" class="parameter-slider" id="l1Cache">
+                            <div class="flex justify-between text-xs text-gray-500 mt-1">
+                                <span>8KB</span>
+                                <span>64KB</span>
+                            </div>
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Branch Predictor</label>
+                            <select class="w-full p-2 border rounded-md">
+                                <option>Static</option>
+                                <option selected>Dynamic 1-bit</option>
+                                <option>Dynamic 2-bit</option>
+                                <option>Tournament</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Clock Frequency</label>
+                            <input type="range" min="500" max="2500" value="1500" class="parameter-slider" id="clockFreq">
+                            <div class="flex justify-between text-xs text-gray-500 mt-1">
+                                <span>500MHz</span>
+                                <span>2.5GHz</span>
+                            </div>
+                        </div>
+                    </div>
+                    <button class="mt-6 w-full bg-riscv hover:bg-riscvDark text-white py-2 rounded-md transition">
+                        <i class="fas fa-calculator mr-2"></i> Evaluate Configuration
+                    </button>
+                </div>
+                <!-- Visualization -->
+                <div class="lg:col-span-2">
+                    <div class="bg-gray-50 p-4 rounded-lg h-full">
+                        <div class="flex justify-between items-center mb-4">
+                            <h3 class="font-semibold text-riscvDark">Performance-Power Trade-off</h3>
+                            <div class="flex space-x-2">
+                                <button class="px-3 py-1 bg-gray-200 rounded-md text-sm">DMIPS</button>
+                                <button class="px-3 py-1 bg-gray-200 rounded-md text-sm">IPC</button>
+                                <button class="px-3 py-1 bg-accent text-white rounded-md text-sm">Power</button>
+                            </div>
+                        </div>
+                        <div class="chart-container">
+                            <canvas id="designSpaceChart"></canvas>
+                            <div class="tooltip" id="chartTooltip"></div>
+                        </div>
+                        <div class="mt-4 flex justify-center space-x-4">
+                            <div class="text-center">
+                                <div class="text-2xl font-bold text-riscv">4.2 DMIPS/MHz</div>
+                                <div class="text-sm text-gray-500">Performance</div>
+                            </div>
+                            <div class="text-center">
+                                <div class="text-2xl font-bold text-accent">18.7 mW</div>
+                                <div class="text-sm text-gray-500">Power</div>
+                            </div>
+                            <div class="text-center">
+                                <div class="text-2xl font-bold text-gray-700">0.87 nJ/instr</div>
+                                <div class="text-sm text-gray-500">Energy Efficiency</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="bg-gray-50 p-4 rounded-lg">
+                <h3 class="font-semibold mb-4 text-riscvDark">Pareto Frontier Analysis</h3>
+                <div class="chart-container">
+                    <canvas id="paretoChart"></canvas>
+                </div>
+            </div>
+        </section>
+        <!-- Prediction Section -->
+        <section id="predict" class="mb-16 bg-white rounded-xl shadow-md p-6">
+            <h2 class="text-2xl font-bold text-riscvDark mb-6">AutoML Prediction Engine</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                <div>
+                    <h3 class="font-semibold mb-4 text-riscvDark">Optimization Target</h3>
+                    <div class="space-y-4">
+                        <div class="flex items-center">
+                            <input type="radio" id="optPerf" name="optimization" class="mr-2" checked>
+                            <label for="optPerf" class="font-medium">Maximize Performance (DMIPS)</label>
+                        </div>
+                        <div class="flex items-center">
+                            <input type="radio" id="optPower" name="optimization" class="mr-2">
+                            <label for="optPower" class="font-medium">Minimize Power Consumption</label>
+                        </div>
+                        <div class="flex items-center">
+                            <input type="radio" id="optEfficiency" name="optimization" class="mr-2">
+                            <label for="optEfficiency" class="font-medium">Maximize Energy Efficiency</label>
+                        </div>
+                        <div class="mt-6">
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Power Constraint (mW)</label>
+                            <input type="range" min="5" max="50" value="20" class="parameter-slider" id="powerConstraint">
+                            <div class="flex justify-between text-xs text-gray-500 mt-1">
+                                <span>5mW</span>
+                                <span>50mW</span>
+                            </div>
+                        </div>
+                        <button class="mt-6 w-full bg-accent hover:bg-yellow-700 text-white py-2 rounded-md transition">
+                            <i class="fas fa-brain mr-2"></i> Run AutoML Optimization
+                        </button>
+                    </div>
+                </div>
+                <div>
+                    <h3 class="font-semibold mb-4 text-riscvDark">Recommended Configuration</h3>
+                    <div class="bg-gray-50 p-4 rounded-lg">
+                        <div class="grid grid-cols-2 gap-4 mb-4">
+                            <div>
+                                <div class="text-sm text-gray-500">Pipeline Depth</div>
+                                <div class="font-bold">12 stages</div>
+                            </div>
+                            <div>
+                                <div class="text-sm text-gray-500">L1 Cache</div>
+                                <div class="font-bold">32KB</div>
+                            </div>
+                            <div>
+                                <div class="text-sm text-gray-500">Branch Predictor</div>
+                                <div class="font-bold">Tournament</div>
+                            </div>
+                            <div>
+                                <div class="text-sm text-gray-500">Clock Frequency</div>
+                                <div class="font-bold">1.8GHz</div>
+                            </div>
+                        </div>
+                        <div class="border-t pt-4">
+                            <div class="text-sm text-gray-500">Predicted Metrics</div>
+                            <div class="grid grid-cols-3 gap-2 mt-2">
+                                <div class="bg-riscv text-white text-center p-2 rounded">
+                                    <div class="text-xl font-bold">4.8</div>
+                                    <div class="text-xs">DMIPS/MHz</div>
+                                </div>
+                                <div class="bg-accent text-white text-center p-2 rounded">
+                                    <div class="text-xl font-bold">19.2</div>
+                                    <div class="text-xs">mW</div>
+                                </div>
+                                <div class="bg-gray-700 text-white text-center p-2 rounded">
+                                    <div class="text-xl font-bold">0.72</div>
+                                    <div class="text-xs">nJ/instr</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <button class="mt-4 w-full border border-riscv text-riscv hover:bg-gray-50 py-2 rounded-md transition">
+                        <i class="fas fa-download mr-2"></i> Export Configuration
+                    </button>
+                </div>
+            </div>
+        </section>
+        <!-- About Section -->
+        <section id="about" class="mb-16 bg-white rounded-xl shadow-md p-6">
+            <h2 class="text-2xl font-bold text-riscvDark mb-6">About This Project</h2>
+            <div class="prose max-w-none">
+                <p>
+                    This AutoML platform for RISC-V CVA6 Design Space Exploration (DSE) was developed to help computer architects and
+                    hardware designers quickly evaluate performance-power trade-offs using the Dhrystone benchmark.
+                </p>
+                <h3 class="text-xl font-semibold mt-6 text-riscvDark">Methodology</h3>
+                <p>
+                    Our system uses machine learning models trained on extensive simulation data to predict processor metrics across
+                    the design space without requiring time-consuming RTL simulations for every configuration.
+                </p>
+                <h3 class="text-xl font-semibold mt-6 text-riscvDark">Technical Details</h3>
+                <ul class="list-disc pl-5 space-y-2">
+                    <li>Based on the open-source CVA6 (formerly Ariane) RISC-V core</li>
+                    <li>Dhrystone benchmark as the performance metric</li>
+                    <li>Power estimation using industry-standard models</li>
+                    <li>Gradient boosting and neural network prediction models</li>
+                    <li>Multi-objective optimization for Pareto frontier analysis</li>
+                </ul>
+                <div class="mt-8 p-4 bg-gray-50 rounded-lg">
+                    <h3 class="font-semibold text-riscvDark mb-2">Get Involved</h3>
+                    <p class="mb-4">This is an open-source project. Contributions are welcome!</p>
+                    <button class="bg-gray-800 hover:bg-black text-white px-4 py-2 rounded-md transition">
+                        <i class="fab fa-github mr-2"></i> View on GitHub
+                    </button>
+                </div>
+            </div>
+        </section>
+    </main>
+    <!-- Footer -->
+    <footer class="gradient-bg text-white py-8">
+        <div class="container mx-auto px-4">
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div>
+                    <h3 class="text-lg font-semibold mb-4">RISC-V CVA6 AutoML</h3>
+                    <p class="text-gray-300">
+                        Automated design space exploration for RISC-V processors using machine learning techniques.
+                    </p>
+                </div>
+                <div>
+                    <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-300 hover:text-white transition">Documentation</a></li>
+                        <li><a href="#" class="text-gray-300 hover:text-white transition">API Reference</a></li>
+                        <li><a href="#" class="text-gray-300 hover:text-white transition">Tutorials</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-lg font-semibold mb-4">Contact</h3>
+                    <ul class="space-y-2">
+                        <li class="flex items-center">
+                            <i class="fas fa-envelope mr-2"></i>
+                            <span class="text-gray-300">contact@riscv-automl.org</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fab fa-twitter mr-2"></i>
+                            <span class="text-gray-300">@riscv_automl</span>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400">
+                <p>&copy; 2023 RISC-V AutoML DSE Project. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+    <!-- Chart.js for visualizations -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script>
+        // Initialize design space chart
+        const designSpaceCtx = document.getElementById('designSpaceChart').getContext('2d');
+        const designSpaceChart = new Chart(designSpaceCtx, {
+            type: 'scatter',
+            data: {
+                datasets: [{
+                    label: 'Design Points',
+                    data: [
+                        {x: 3.2, y: 5.1},
+                        {x: 3.8, y: 7.3},
+                        {x: 4.1, y: 12.5},
+                        {x: 4.5, y: 18.7},
+                        {x: 4.8, y: 25.2},
+                        {x: 3.5, y: 8.4},
+                        {x: 3.9, y: 10.2},
+                        {x: 4.2, y: 15.8},
+                        {x: 4.6, y: 22.1},
+                        {x: 4.0, y: 11.3}
+                    ],
+                    backgroundColor: 'rgba(58, 124, 165, 0.7)',
+                    borderColor: 'rgba(58, 124, 165, 1)',
+                    borderWidth: 1,
+                    pointRadius: 6,
+                    pointHoverRadius: 8
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                scales: {
+                    x: {
+                        title: {
+                            display: true,
+                            text: 'Performance (DMIPS/MHz)'
+                        }
+                    },
+                    y: {
+                        title: {
+                            display: true,
+                            text: 'Power Consumption (mW)'
+                        }
+                    }
+                },
+                plugins: {
+                    tooltip: {
+                        callbacks: {
+                            label: function(context) {
+                                return `DMIPS: ${context.parsed.x.toFixed(2)}, Power: ${context.parsed.y.toFixed(2)}mW`;
+                            }
+                        }
+                    }
+                }
+            }
+        });
+        // Initialize pareto frontier chart
+        const paretoCtx = document.getElementById('paretoChart').getContext('2d');
+        const paretoChart = new Chart(paretoCtx, {
+            type: 'line',
+            data: {
+                labels: ['Config A', 'Config B', 'Config C', 'Config D', 'Config E'],
+                datasets: [
+                    {
+                        label: 'Performance (DMIPS/MHz)',
+                        data: [3.2, 3.8, 4.1, 4.5, 4.8],
+                        borderColor: 'rgba(58, 124, 165, 1)',
+                        backgroundColor: 'rgba(58, 124, 165, 0.1)',
+                        borderWidth: 2,
+                        fill: true,
+                        yAxisID: 'y'
+                    },
+                    {
+                        label: 'Power (mW)',
+                        data: [5.1, 7.3, 12.5, 18.7, 25.2],
+                        borderColor: 'rgba(243, 156, 18, 1)',
+                        backgroundColor: 'rgba(243, 156, 18, 0.1)',
+                        borderWidth: 2,
+                        fill: true,
+                        yAxisID: 'y1'
+                    }
+                ]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                interaction: {
+                    mode: 'index',
+                    intersect: false,
+                },
+                scales: {
+                    y: {
+                        type: 'linear',
+                        display: true,
+                        position: 'left',
+                        title: {
+                            display: true,
+                            text: 'Performance (DMIPS/MHz)'
+                        }
+                    },
+                    y1: {
+                        type: 'linear',
+                        display: true,
+                        position: 'right',
+                        title: {
+                            display: true,
+                            text: 'Power (mW)'
+                        },
+                        grid: {
+                            drawOnChartArea: false,
+                        },
+                    }
+                }
+            }
+        });
+        // Slider interactivity
+        const sliders = document.querySelectorAll('.parameter-slider');
+        sliders.forEach(slider => {
+            slider.addEventListener('input', function() {
+                // In a real application, this would update the charts and predictions
+                console.log(`${this.id} updated to ${this.value}`);
+            });
+        });
+        // Tooltip for design space chart
+        const chartContainer = document.querySelector('.chart-container');
+        const tooltip = document.getElementById('chartTooltip');
+        chartContainer.addEventListener('mousemove', function(e) {
+            const rect = designSpaceChart.canvas.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            const y = e.clientY - rect.top;
+            const points = designSpaceChart.getElementsAtEventForMode(e, 'nearest', { intersect: true }, false);
+            if (points.length) {
+                const point = points[0];
+                const dataset = designSpaceChart.data.datasets[point.datasetIndex];
+                const data = dataset.data[point.index];
+                tooltip.style.display = 'block';
+                tooltip.style.left = `${x + 10}px`;
+                tooltip.style.top = `${y + 10}px`;
+                tooltip.innerHTML = `
+                    <strong>Configuration ${point.index + 1}</strong><br>
+                    DMIPS: ${data.x.toFixed(2)}<br>
+                    Power: ${data.y.toFixed(2)}mW
+                `;
+            } else {
+                tooltip.style.display = 'none';
+            }
+        });
+        chartContainer.addEventListener('mouseout', function() {
+            tooltip.style.display = 'none';
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=HassanStar/dse-cva6" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ make automl site for semiconductore risc-v cva6 performance vs power DSE desgin space exploration for dhrystone bench space app demo prediction