Spaces:

chriswingler
/

deepsite

Running

App Files Files Community

chriswingler commited on Mar 31

Commit

e530823

verified ·

1 Parent(s): cc06bdb

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +537 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Deepsite
-emoji: 💻
-colorFrom: red
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: deepsite
+emoji: 🐳
+colorFrom: blue
+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,537 @@
-<!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>2D Wildfire Simulation</title>
+    <style>
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
+            margin: 0;
+            padding: 20px;
+            color: #fff;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 20px;
+        }
+        h1 {
+            text-align: center;
+            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+            margin-bottom: 0;
+        }
+        .simulation-container {
+            display: flex;
+            gap: 30px;
+            flex-wrap: wrap;
+            justify-content: center;
+        }
+        .controls {
+            background-color: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+            width: 300px;
+        }
+        .control-group {
+            margin-bottom: 15px;
+        }
+        label {
+            display: block;
+            margin-bottom: 5px;
+            font-weight: bold;
+        }
+        input, select {
+            width: 100%;
+            padding: 8px;
+            border-radius: 5px;
+            border: 1px solid #ccc;
+            background-color: rgba(255, 255, 255, 0.8);
+        }
+        button {
+            background: linear-gradient(45deg, #ff416c, #ff4b2b);
+            color: white;
+            border: none;
+            padding: 10px 15px;
+            border-radius: 5px;
+            cursor: pointer;
+            font-weight: bold;
+            width: 100%;
+            margin-top: 5px;
+            transition: all 0.3s;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+        button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
+        }
+        .stats {
+            background-color: rgba(0, 0, 0, 0.3);
+            padding: 15px;
+            border-radius: 10px;
+            margin-top: 15px;
+        }
+        .simulation {
+            position: relative;
+        }
+        canvas {
+            background-color: #123524;
+            border-radius: 10px;
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+        }
+        .legend {
+            display: flex;
+            gap: 15px;
+            justify-content: center;
+            margin-top: 10px;
+        }
+        .legend-item {
+            display: flex;
+            align-items: center;
+            gap: 5px;
+        }
+        .legend-color {
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            border: 1px solid #fff;
+        }
+        .wind-indicator {
+            text-align: center;
+            font-weight: bold;
+            margin-top: 10px;
+        }
+        .credits {
+            text-align: center;
+            font-size: 0.8em;
+            margin-top: 20px;
+            opacity: 0.7;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🌲 Wildfire Simulation 🔥</h1>
+        <div class="simulation-container">
+            <div class="simulation">
+                <canvas id="simulationCanvas" width="600" height="600"></canvas>
+                <div class="legend">
+                    <div class="legend-item">
+                        <div class="legend-color" style="background-color: #228B22;"></div>
+                        <span>Unburned</span>
+                    </div>
+                    <div class="legend-item">
+                        <div class="legend-color" style="background-color: #FF4500;"></div>
+                        <span>Burning</span>
+                    </div>
+                    <div class="legend-item">
+                        <div class="legend-color" style="background-color: #8B4513;"></div>
+                        <span>Burned</span>
+                    </div>
+                    <div class="legend-item">
+                        <div class="legend-color" style="background-color: #696969;"></div>
+                        <span>Empty</span>
+                    </div>
+                </div>
+            </div>
+            <div class="controls">
+                <div class="control-group">
+                    <label for="gridSize">Grid Size:</label>
+                    <input type="range" id="gridSize" min="10" max="100" value="40">
+                </div>
+                <div class="control-group">
+                    <label for="treeDensity">Tree Density:</label>
+                    <input type="range" id="treeDensity" min="10" max="100" value="70">
+                </div>
+                <div class="control-group">
+                    <label for="spreadProbability">Spread Probability:</label>
+                    <input type="range" id="spreadProbability" min="1" max="100" value="40">
+                </div>
+                <div class="control-group">
+                    <label for="windDirection">Wind Direction:</label>
+                    <select id="windDirection">
+                        <option value="0">None</option>
+                        <option value="1">North</option>
+                        <option value="2">East</option>
+                        <option value="3">South</option>
+                        <option value="4">West</option>
+                    </select>
+                </div>
+                <div class="control-group">
+                    <label for="windStrength">Wind Strength:</label>
+                    <input type="range" id="windStrength" min="0" max="100" value="20">
+                </div>
+                <button id="resetBtn">Reset Simulation</button>
+                <button id="startFireBtn">Start Fire</button>
+                <button id="stepBtn">Step Simulation</button>
+                <button id="runBtn">Run Simulation</button>
+                <div class="stats" id="stats">
+                    <div>Unburned: <span id="unburnedCount">0</span></div>
+                    <div>Burning: <span id="burningCount">0</span></div>
+                    <div>Burned: <span id="burnedCount">0</span></div>
+                    <div>Empty: <span id="emptyCount">0</span></div>
+                    <div>Iteration: <span id="iteration">0</span></div>
+                    <div class="wind-indicator">Wind: <span id="windDisplay">None</span></div>
+                </div>
+            </div>
+        </div>
+        <div class="credits">
+            <p>A 2D wildfire simulation showing how fires spread through a forest based on various parameters.</p>
+        </div>
+    </div>
+    <script>
+        // Constants
+        const CELL_STATES = {
+            EMPTY: 0,      // gray
+            UNBURNED: 1,   // green
+            BURNING: 2,    // orange/red
+            BURNED: 3      // brown
+        };
+        const CELL_COLORS = {
+            [CELL_STATES.EMPTY]: '#696969',
+            [CELL_STATES.UNBURNED]: '#228B22',
+            [CELL_STATES.BURNING]: '#FF4500',
+            [CELL_STATES.BURNED]: '#8B4513'
+        };
+        const WIND_DIRECTIONS = {
+            0: 'None',
+            1: 'North',
+            2: 'East',
+            3: 'South',
+            4: 'West'
+        };
+        // Simulation variables
+        let grid = [];
+        let gridSize = 40;
+        let cellSize;
+        let treeDensity = 70;
+        let spreadProbability = 40;
+        let windDirection = 0;
+        let windStrength = 20;
+        let isRunning = false;
+        let iteration = 0;
+        let animationId;
+        // DOM elements
+        const canvas = document.getElementById('simulationCanvas');
+        const ctx = canvas.getContext('2d');
+        const gridSizeSlider = document.getElementById('gridSize');
+        const treeDensitySlider = document.getElementById('treeDensity');
+        const spreadProbabilitySlider = document.getElementById('spreadProbability');
+        const windDirectionSelect = document.getElementById('windDirection');
+        const windStrengthSlider = document.getElementById('windStrength');
+        const resetBtn = document.getElementById('resetBtn');
+        const startFireBtn = document.getElementById('startFireBtn');
+        const stepBtn = document.getElementById('stepBtn');
+        const runBtn = document.getElementById('runBtn');
+        const unburnedCountSpan = document.getElementById('unburnedCount');
+        const burningCountSpan = document.getElementById('burningCount');
+        const burnedCountSpan = document.getElementById('burnedCount');
+        const emptyCountSpan = document.getElementById('emptyCount');
+        const iterationSpan = document.getElementById('iteration');
+        const windDisplaySpan = document.getElementById('windDisplay');
+        // Initialize the simulation
+        function init() {
+            resetSimulation();
+            addEventListeners();
+            updateStats();
+            updateWindDisplay();
+        }
+        // Add event listeners
+        function addEventListeners() {
+            resetBtn.addEventListener('click', resetSimulation);
+            startFireBtn.addEventListener('click', startFire);
+            stepBtn.addEventListener('click', stepSimulation);
+            runBtn.addEventListener('click', toggleRunSimulation);
+            // Canvas click to manually set fires
+            canvas.addEventListener('click', (e) => {
+                if (isRunning) return;
+                const rect = canvas.getBoundingClientRect();
+                const x = e.clientX - rect.left;
+                const y = e.clientY - rect.top;
+                const col = Math.floor(x / cellSize);
+                const row = Math.floor(y / cellSize);
+                if (grid[row] && grid[row][col] && grid[row][col] === CELL_STATES.UNBURNED) {
+                    grid[row][col] = CELL_STATES.BURNING;
+                    drawGrid();
+                    updateStats();
+                }
+            });
+            // Parameter change listeners
+            gridSizeSlider.addEventListener('input', () => {
+                gridSize = parseInt(gridSizeSlider.value);
+                resetSimulation();
+            });
+            treeDensitySlider.addEventListener('input', () => {
+                treeDensity = parseInt(treeDensitySlider.value);
+                resetSimulation();
+            });
+            spreadProbabilitySlider.addEventListener('input', () => {
+                spreadProbability = parseInt(spreadProbabilitySlider.value);
+            });
+            windDirectionSelect.addEventListener('change', () => {
+                windDirection = parseInt(windDirectionSelect.value);
+                updateWindDisplay();
+            });
+            windStrengthSlider.addEventListener('input', () => {
+                windStrength = parseInt(windStrengthSlider.value);
+                updateWindDisplay();
+            });
+        }
+        // Reset the simulation
+        function resetSimulation() {
+            // Stop any running simulation
+            if (isRunning) {
+                toggleRunSimulation();
+            }
+            iteration = 0;
+            grid = [];
+            cellSize = canvas.width / gridSize;
+            // Initialize grid with random trees
+            for (let i = 0; i < gridSize; i++) {
+                grid[i] = [];
+                for (let j = 0; j < gridSize; j++) {
+                    // Randomly decide if this cell is a tree or empty
+                    const isTree = Math.random() * 100 < treeDensity;
+                    grid[i][j] = isTree ? CELL_STATES.UNBURNED : CELL_STATES.EMPTY;
+                }
+            }
+            drawGrid();
+            updateStats();
+        }
+        // Start a fire at a random location
+        function startFire() {
+            if (isRunning) return;
+            // Find all unburned trees
+            const unburnedCells = [];
+            for (let i = 0; i < gridSize; i++) {
+                for (let j = 0; j < gridSize; j++) {
+                    if (grid[i][j] === CELL_STATES.UNBURNED) {
+                        unburnedCells.push({row: i, col: j});
+                    }
+                }
+            }
+            // If there are unburned trees, start a fire at a random one
+            if (unburnedCells.length > 0) {
+                const randomIndex = Math.floor(Math.random() * unburnedCells.length);
+                const {row, col} = unburnedCells[randomIndex];
+                grid[row][col] = CELL_STATES.BURNING;
+                drawGrid();
+                updateStats();
+            }
+        }
+        // Run one step of the simulation
+        function stepSimulation() {
+            if (isRunning) return;
+            const newGrid = JSON.parse(JSON.stringify(grid));
+            let burningCells = 0;
+            for (let i = 0; i < gridSize; i++) {
+                for (let j = 0; j < gridSize; j++) {
+                    // If this cell is burning, it will turn to burned in the next step
+                    if (grid[i][j] === CELL_STATES.BURNING) {
+                        newGrid[i][j] = CELL_STATES.BURNED;
+                        burningCells++;
+                        // Try to spread the fire to adjacent cells
+                        spreadFire(i, j, newGrid);
+                    }
+                }
+            }
+            grid = newGrid;
+            iteration++;
+            drawGrid();
+            updateStats();
+            // If no burning cells left, fire has burned out
+            return burningCells > 0;
+        }
+        // Spread fire to adjacent cells
+        function spreadFire(row, col, newGrid) {
+            // Directions in row, col offsets: north, east, south, west
+            const directions = [[-1, 0], [0, 1], [1, 0], [0, -1]];
+            for (const [dr, dc] of directions) {
+                const newRow = row + dr;
+                const newCol = col + dc;
+                // Check if the new position is within bounds
+                if (newRow >= 0 && newRow < gridSize && newCol >= 0 && newCol < gridSize) {
+                    // Only spread to unburned trees
+                    if (grid[newRow][newCol] === CELL_STATES.UNBURNED) {
+                        // Base probability
+                        let prob = spreadProbability;
+                        // Adjust probability based on wind direction
+                        switch (windDirection) {
+                            case 1: // North
+                                if (dr === -1) prob += windStrength; // Favor north
+                                if (dr === 1) prob -= windStrength; // Reduce south
+                                break;
+                            case 2: // East
+                                if (dc === 1) prob += windStrength; // Favor east
+                                if (dc === -1) prob -= windStrength; // Reduce west
+                                break;
+                            case 3: // South
+                                if (dr === 1) prob += windStrength; // Favor south
+                                if (dr === -1) prob -= windStrength; // Reduce north
+                                break;
+                            case 4: // West
+                                if (dc === -1) prob += windStrength; // Favor west
+                                if (dc === 1) prob -= windStrength; // Reduce east
+                                break;
+                        }
+                        // Ensure probability is within bounds
+                        prob = Math.max(1, Math.min(100, prob));
+                        // Random chance to spread fire
+                        if (Math.random() * 100 < prob) {
+                            newGrid[newRow][newCol] = CELL_STATES.BURNING;
+                        }
+                    }
+                }
+            }
+        }
+        // Run the simulation continuously
+        function runSimulation() {
+            if (!isRunning) return;
+            const hasBurningCells = stepSimulation();
+            if (hasBurningCells) {
+                animationId = requestAnimationFrame(runSimulation);
+            } else {
+                toggleRunSimulation();
+            }
+        }
+        // Toggle between running and paused states
+        function toggleRunSimulation() {
+            isRunning = !isRunning;
+            if (isRunning) {
+                runBtn.textContent = 'Pause Simulation';
+                runSimulation();
+            } else {
+                runBtn.textContent = 'Run Simulation';
+                cancelAnimationFrame(animationId);
+            }
+        }
+        // Draw the grid on canvas
+        function drawGrid() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            for (let i = 0; i < gridSize; i++) {
+                for (let j = 0; j < gridSize; j++) {
+                    const x = j * cellSize;
+                    const y = i * cellSize;
+                    // Draw cell background
+                    ctx.fillStyle = CELL_COLORS[grid[i][j]];
+                    ctx.fillRect(x, y, cellSize, cellSize);
+                    // Draw grid lines
+                    ctx.strokeStyle = 'rgba(0, 0, 0, 0.1)';
+                    ctx.strokeRect(x, y, cellSize, cellSize);
+                }
+            }
+        }
+        // Update the statistics display
+        function updateStats() {
+            let unburned = 0;
+            let burning = 0;
+            let burned = 0;
+            let empty = 0;
+            for (let i = 0; i < gridSize; i++) {
+                for (let j = 0; j < gridSize; j++) {
+                    switch (grid[i][j]) {
+                        case CELL_STATES.UNBURNED: unburned++; break;
+                        case CELL_STATES.BURNING: burning++; break;
+                        case CELL_STATES.BURNED: burned++; break;
+                        case CELL_STATES.EMPTY: empty++; break;
+                    }
+                }
+            }
+            unburnedCountSpan.textContent = unburned;
+            burningCountSpan.textContent = burning;
+            burnedCountSpan.textContent = burned;
+            emptyCountSpan.textContent = empty;
+            iterationSpan.textContent = iteration;
+        }
+        // Update the wind direction display
+        function updateWindDisplay() {
+            const direction = WIND_DIRECTIONS[windDirection];
+            const strengthText = windDirection === 0 ? '' : ` (Strength: ${windStrength}%)`;
+            windDisplaySpan.textContent = direction + strengthText;
+        }
+        // Initialize when the page loads
+        window.onload = init;
+    </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 <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
+</html>