Spaces:

EnovinxSchool
/

wave-collapse-function-not-designed-by-me

Running

App Files Files Community

EnovinxSchool commited on Jun 9

Commit

a6a3528

verified ·

1 Parent(s): 2ba7ab9

undefined - Initial Deployment

Browse files

Files changed (3) hide show

README.md +5 -3
index.html +679 -19
prompts.txt +0 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Wave Collapse Function Not Designed By Me
-emoji: 🦀
 colorFrom: blue
 colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: wave-collapse-function-not-designed-by-me
+emoji: 🐳
 colorFrom: blue
 colorTo: yellow
 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,679 @@
-<!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>Wave Function Collapse (WFC) Demo</title>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            background-color: #f0f2f5;
+            color: #333;
+            margin: 0;
+            padding: 1rem;
+        }
+        h1 {
+            color: #111;
+        }
+        .main-container {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 2rem;
+            justify-content: center;
+            width: 100%;
+            max-width: 1200px;
+        }
+        .canvas-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 1rem;
+            background: #fff;
+            border-radius: 8px;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        }
+        canvas {
+            border: 1px solid #ccc;
+            image-rendering: pixelated;
+            image-rendering: -moz-crisp-edges;
+            image-rendering: crisp-edges;
+            background-color: #e9e9e9;
+        }
+        h2 {
+            margin-top: 0;
+            margin-bottom: 1rem;
+            color: #444;
+        }
+        .controls {
+            padding: 1rem;
+            background: #fff;
+            border-radius: 8px;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+            min-width: 250px;
+        }
+        .control-group {
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+        }
+        .control-group label {
+            font-weight: bold;
+        }
+        .control-group input[type="number"], .control-group input[type="checkbox"] {
+            padding: 0.5rem;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+        }
+        .control-group input[type="checkbox"] {
+            width: 20px;
+            height: 20px;
+        }
+        .checkbox-label {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .palette {
+            display: flex;
+            gap: 0.5rem;
+            flex-wrap: wrap;
+            align-items: center;
+        }
+        .color-swatch {
+            width: 30px;
+            height: 30px;
+            border: 2px solid #ccc;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: transform 0.1s;
+        }
+        .color-swatch.selected {
+            border-color: #007bff;
+            transform: scale(1.1);
+            box-shadow: 0 0 5px #007bff;
+        }
+        input[type="color"] {
+            width: 40px;
+            height: 40px;
+            border: none;
+            padding: 0;
+            background: none;
+            cursor: pointer;
+        }
+        button {
+            padding: 0.75rem 1rem;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 1rem;
+            font-weight: bold;
+            transition: background-color 0.2s;
+        }
+        .btn-generate {
+            background-color: #28a745;
+            color: white;
+        }
+        .btn-generate:hover {
+            background-color: #218838;
+        }
+        .btn-clear {
+            background-color: #dc3545;
+            color: white;
+        }
+        .btn-clear:hover {
+            background-color: #c82333;
+        }
+        #status {
+            margin-top: 1rem;
+            font-weight: bold;
+            font-size: 1.1rem;
+            min-height: 1.5em;
+        }
+    </style>
+</head>
+<body>
+    <h1>Wave Function Collapse</h1>
+    <p>Draw on the left canvas, set your parameters, and click "Generate"!</p>
+    <div class="main-container">
+        <div class="controls">
+            <h2>Controls</h2>
+            <div class="control-group">
+                <label for="n-size">Pattern Size (N)</label>
+                <input type="number" id="n-size" value="3" min="2" max="5">
+            </div>
+            <div class="control-group">
+                <label for="output-width">Output Width</label>
+                <input type="number" id="output-width" value="48" min="10" max="256">
+            </div>
+            <div class="control-group">
+                <label for="output-height">Output Height</label>
+                <input type="number" id="output-height" value="48" min="10" max="256">
+            </div>
+            <div class="control-group">
+                <label class="checkbox-label">
+                    <input type="checkbox" id="augment" checked>
+                    Use Augmentations (Rotations/Reflections)
+                </label>
+            </div>
+             <div class="control-group">
+                <label class="checkbox-label">
+                    <input type="checkbox" id="visualize">
+                    Visualize Generation
+                </label>
+            </div>
+            <div class="control-group">
+                <label>Color Palette</label>
+                <div class="palette">
+                    <div id="palette-container"></div>
+                    <input type="color" id="color-picker" value="#ff0000">
+                </div>
+            </div>
+            <button class="btn-generate" id="generate-btn">Generate</button>
+            <button class="btn-clear" id="clear-btn">Clear Input</button>
+            <div id="status">Ready.</div>
+        </div>
+        <div class="canvas-container">
+            <h2>Input Canvas</h2>
+            <canvas id="input-canvas" width="200" height="200"></canvas>
+        </div>
+        <div class="canvas-container">
+            <h2>Output Canvas</h2>
+            <canvas id="output-canvas" width="480" height="480"></canvas>
+        </div>
+    </div>
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+    // --- DOM ELEMENTS ---
+    const inputCanvas = document.getElementById('input-canvas');
+    const inputCtx = inputCanvas.getContext('2d');
+    const outputCanvas = document.getElementById('output-canvas');
+    const outputCtx = outputCanvas.getContext('2d');
+    const nSizeInput = document.getElementById('n-size');
+    const outputWidthInput = document.getElementById('output-width');
+    const outputHeightInput = document.getElementById('output-height');
+    const augmentCheckbox = document.getElementById('augment');
+    const visualizeCheckbox = document.getElementById('visualize');
+    const generateBtn = document.getElementById('generate-btn');
+    const clearBtn = document.getElementById('clear-btn');
+    const statusDiv = document.getElementById('status');
+    const paletteContainer = document.getElementById('palette-container');
+    const colorPicker = document.getElementById('color-picker');
+    // --- DRAWING STATE ---
+    const INPUT_DIM = 20; // 20x20 grid for input
+    const PIXEL_SIZE = inputCanvas.width / INPUT_DIM;
+    let isDrawing = false;
+    let colors = ['#ffffff', '#000000', '#007bff', '#28a745'];
+    let currentColorIndex = 1;
+    let inputGrid = Array.from({ length: INPUT_DIM }, () => Array(INPUT_DIM).fill(0));
+    // --- HELPER FUNCTIONS ---
+    const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+    // --- PALETTE & DRAWING LOGIC ---
+    function updatePalette() {
+        paletteContainer.innerHTML = '';
+        colors.forEach((color, index) => {
+            const swatch = document.createElement('div');
+            swatch.className = 'color-swatch';
+            swatch.style.backgroundColor = color;
+            if (index === currentColorIndex) {
+                swatch.classList.add('selected');
+            }
+            swatch.addEventListener('click', () => {
+                currentColorIndex = index;
+                updatePalette();
+            });
+            paletteContainer.appendChild(swatch);
+        });
+    }
+    colorPicker.addEventListener('change', (e) => {
+        const newColor = e.target.value;
+        if (!colors.includes(newColor)) {
+            colors.push(newColor);
+            currentColorIndex = colors.length - 1;
+            updatePalette();
+        }
+    });
+    function drawInputGrid() {
+        inputCtx.clearRect(0, 0, inputCanvas.width, inputCanvas.height);
+        for (let y = 0; y < INPUT_DIM; y++) {
+            for (let x = 0; x < INPUT_DIM; x++) {
+                inputCtx.fillStyle = colors[inputGrid[y][x]];
+                inputCtx.fillRect(x * PIXEL_SIZE, y * PIXEL_SIZE, PIXEL_SIZE, PIXEL_SIZE);
+            }
+        }
+        // Draw grid lines for clarity
+        inputCtx.strokeStyle = '#ddd';
+        inputCtx.lineWidth = 0.5;
+        for (let i = 0; i <= INPUT_DIM; i++) {
+            inputCtx.beginPath();
+            inputCtx.moveTo(i * PIXEL_SIZE, 0);
+            inputCtx.lineTo(i * PIXEL_SIZE, inputCanvas.height);
+            inputCtx.stroke();
+            inputCtx.beginPath();
+            inputCtx.moveTo(0, i * PIXEL_SIZE);
+            inputCtx.lineTo(inputCanvas.width, i * PIXEL_SIZE);
+            inputCtx.stroke();
+        }
+    }
+    function handleDraw(event) {
+        if (!isDrawing) return;
+        const rect = inputCanvas.getBoundingClientRect();
+        const x = Math.floor((event.clientX - rect.left) / PIXEL_SIZE);
+        const y = Math.floor((event.clientY - rect.top) / PIXEL_SIZE);
+        if (x >= 0 && x < INPUT_DIM && y >= 0 && y < INPUT_DIM) {
+            if (inputGrid[y][x] !== currentColorIndex) {
+                inputGrid[y][x] = currentColorIndex;
+                drawInputGrid();
+            }
+        }
+    }
+    inputCanvas.addEventListener('mousedown', (e) => { isDrawing = true; handleDraw(e); });
+    inputCanvas.addEventListener('mouseup', () => { isDrawing = false; });
+    inputCanvas.addEventListener('mouseleave', () => { isDrawing = false; });
+    inputCanvas.addEventListener('mousemove', handleDraw);
+    clearBtn.addEventListener('click', () => {
+        inputGrid = Array.from({ length: INPUT_DIM }, () => Array(INPUT_DIM).fill(0));
+        drawInputGrid();
+    });
+    // Default pattern
+    function createDefaultPattern() {
+        inputGrid = Array.from({ length: INPUT_DIM }, () => Array(INPUT_DIM).fill(0));
+        // A simple cross pattern
+        for(let i = 5; i < 15; i++) {
+            inputGrid[10][i] = 1; // black line
+            inputGrid[i][10] = 2; // blue line
+        }
+        inputGrid[10][10] = 3; // green center
+    }
+    // --- WFC ALGORITHM ---
+    class WFC {
+        constructor(inputGrid, N, outputWidth, outputHeight, useAugmentations, visualizeCallback) {
+            this.N = N;
+            this.outputWidth = outputWidth;
+            this.outputHeight = outputHeight;
+            this.useAugmentations = useAugmentations;
+            this.visualizeCallback = visualizeCallback;
+            this.patterns = [];
+            this.patternWeights = {};
+            this.parseInput(inputGrid);
+            this.buildAdjacency();
+            // The "wave" is the main grid for the output
+            this.wave = [];
+            // Track entropy for quick lookup
+            this.entropy = [];
+            this.allPatternIndices = Array.from({ length: this.patterns.length }, (_, i) => i);
+            for (let y = 0; y < outputHeight; y++) {
+                this.wave[y] = [];
+                this.entropy[y] = [];
+                for (let x = 0; x < outputWidth; x++) {
+                    // Each cell in the wave can initially be any pattern
+                    this.wave[y][x] = [...this.allPatternIndices];
+                    this.entropy[y][x] = this.patterns.length;
+                }
+            }
+        }
+        // 1. Read the input and count NxN patterns.
+        parseInput(grid) {
+            const patternMap = new Map();
+            for (let y = 0; y < grid.length - this.N + 1; y++) {
+                for (let x = 0; x < grid[0].length - this.N + 1; x++) {
+                    const pattern = [];
+                    for (let dy = 0; dy < this.N; dy++) {
+                        pattern.push(...grid[y + dy].slice(x, x + this.N));
+                    }
+                    if (this.useAugmentations) {
+                        const augmentations = this.getAugmentations(pattern);
+                        augmentations.forEach(p => {
+                            const hash = p.join(',');
+                            patternMap.set(hash, (patternMap.get(hash) || 0) + 1);
+                        });
+                    } else {
+                        const hash = pattern.join(',');
+                        patternMap.set(hash, (patternMap.get(hash) || 0) + 1);
+                    }
+                }
+            }
+            patternMap.forEach((weight, hash) => {
+                const pattern = hash.split(',').map(Number);
+                this.patterns.push(pattern);
+                this.patternWeights[this.patterns.length - 1] = weight;
+            });
+            if (this.patterns.length === 0) {
+                throw new Error("No patterns found. Try a larger or more varied input, or a smaller N.");
+            }
+        }
+        // (optional) Augment pattern data with rotations and reflections.
+        getAugmentations(pattern) {
+            const augmentations = new Set();
+            let current = pattern;
+            for (let i = 0; i < 4; i++) {
+                augmentations.add(current.join(','));
+                augmentations.add(this.reflect(current).join(','));
+                current = this.rotate(current);
+            }
+            return Array.from(augmentations).map(hash => hash.split(',').map(Number));
+        }
+        rotate(p) {
+            const newPattern = Array(this.N * this.N);
+            for (let y = 0; y < this.N; y++) {
+                for (let x = 0; x < this.N; x++) {
+                    newPattern[x * this.N + (this.N - 1 - y)] = p[y * this.N + x];
+                }
+            }
+            return newPattern;
+        }
+        reflect(p) {
+            const newPattern = Array(this.N * this.N);
+            for (let y = 0; y < this.N; y++) {
+                for (let x = 0; x < this.N; x++) {
+                    newPattern[y * this.N + (this.N - 1 - x)] = p[y * this.N + x];
+                }
+            }
+            return newPattern;
+        }
+        // Pre-calculate which patterns can be placed next to each other.
+        buildAdjacency() {
+            this.adjacency = {}; // { patternIndex: { dx, dy: [valid neighbor indices] } }
+            for (let i = 0; i < this.patterns.length; i++) {
+                this.adjacency[i] = {
+                    '1,0': [],  // Right
+                    '-1,0': [], // Left
+                    '0,1': [],  // Down
+                    '0,-1': []  // Up
+                };
+            }
+            for (let i = 0; i < this.patterns.length; i++) {
+                for (let j = 0; j < this.patterns.length; j++) {
+                    const p1 = this.patterns[i];
+                    const p2 = this.patterns[j];
+                    // Check Right: p2 is to the right of p1
+                    if (this.checkOverlap(p1, p2, 1, 0)) this.adjacency[i]['1,0'].push(j);
+                    // Check Left: p2 is to the left of p1
+                    if (this.checkOverlap(p1, p2, -1, 0)) this.adjacency[i]['-1,0'].push(j);
+                    // Check Down: p2 is below p1
+                    if (this.checkOverlap(p1, p2, 0, 1)) this.adjacency[i]['0,1'].push(j);
+                    // Check Up: p2 is above p1
+                    if (this.checkOverlap(p1, p2, 0, -1)) this.adjacency[i]['0,-1'].push(j);
+                }
+            }
+        }
+        checkOverlap(p1, p2, dx, dy) {
+            // Checks if p2 can be placed at offset (dx, dy) from p1
+            for (let y = 0; y < this.N; y++) {
+                for (let x = 0; x < this.N; x++) {
+                    const nx = x - dx;
+                    const ny = y - dy;
+                    if (nx >= 0 && nx < this.N && ny >= 0 && ny < this.N) {
+                        if (p1[y * this.N + x] !== p2[ny * this.N + nx]) {
+                            return false;
+                        }
+                    }
+                }
+            }
+            return true;
+        }
+        // 4. Main Loop
+        async run() {
+            let iterations = this.outputWidth * this.outputHeight;
+            while(iterations > 0) {
+                const collapsedCoords = this.observe();
+                if (collapsedCoords === null) {
+                    // Finished successfully
+                    return this.generateOutput();
+                }
+                const contradiction = this.propagate(collapsedCoords);
+                if (contradiction) {
+                    throw new Error("Contradiction reached. Cannot continue.");
+                }
+                iterations--;
+                if (this.visualizeCallback) {
+                   await this.visualizeCallback(this.entropy, this.patterns.length);
+                   await sleep(0); // Yield to the browser to render changes
+                }
+            }
+            // If loop finishes, it's also a success
+            return this.generateOutput();
+        }
+        // 4a. Observation: Find the cell with the lowest entropy and collapse it.
+        observe() {
+            let minEntropy = Infinity;
+            let minCoords = null;
+            // Find cell with minimum non-zero entropy
+            for (let y = 0; y < this.outputHeight; y++) {
+                for (let x = 0; x < this.outputWidth; x++) {
+                    const ent = this.entropy[y][x];
+                    if (ent > 1 && ent < minEntropy) {
+                        minEntropy = ent;
+                        minCoords = [{x, y}];
+                    } else if (ent > 1 && ent === minEntropy) {
+                        minCoords.push({x, y});
+                    }
+                }
+            }
+            if (minCoords === null) {
+                return null; // All cells collapsed
+            }
+            // Break ties randomly
+            const choice = minCoords[Math.floor(Math.random() * minCoords.length)];
+            const {x, y} = choice;
+            // Collapse the chosen cell
+            const possiblePatterns = this.wave[y][x];
+            const totalWeight = possiblePatterns.reduce((sum, pIndex) => sum + this.patternWeights[pIndex], 0);
+            let rnd = Math.random() * totalWeight;
+            let chosenPattern;
+            for(const pIndex of possiblePatterns) {
+                rnd -= this.patternWeights[pIndex];
+                if(rnd <= 0) {
+                    chosenPattern = pIndex;
+                    break;
+                }
+            }
+            this.wave[y][x] = [chosenPattern];
+            this.entropy[y][x] = 1;
+            return {x, y};
+        }
+        // 4b. Propagation: Update neighbors based on the recent collapse.
+        propagate(startCoords) {
+            const stack = [startCoords];
+            while(stack.length > 0) {
+                const {x, y} = stack.pop();
+                const currentPatterns = this.wave[y][x];
+                // For each neighbor
+                for (const [dx, dy] of [[0,1], [0,-1], [1,0], [-1,0]]) {
+                    const nx = x + dx;
+                    const ny = y + dy;
+                    if (nx < 0 || nx >= this.outputWidth || ny < 0 || ny >= this.outputHeight) continue;
+                    let neighborPatterns = this.wave[ny][nx];
+                    if(neighborPatterns.length <= 1) continue;
+                    // Get all patterns that are valid neighbors in this direction
+                    const validNeighboringPatterns = new Set();
+                    const directionKey = `${-dx},${-dy}`; // from neighbor's perspective
+                    for (const pIndex of currentPatterns) {
+                        this.adjacency[pIndex][directionKey].forEach(validIndex => {
+                            validNeighboringPatterns.add(validIndex);
+                        });
+                    }
+                    // Filter neighbor's possibilities
+                    const originalLength = neighborPatterns.length;
+                    const newNeighborPatterns = neighborPatterns.filter(pIndex => validNeighboringPatterns.has(pIndex));
+                    if (newNeighborPatterns.length === 0) {
+                        return true; // Contradiction!
+                    }
+                    if (newNeighborPatterns.length < originalLength) {
+                        this.wave[ny][nx] = newNeighborPatterns;
+                        this.entropy[ny][nx] = newNeighborPatterns.length;
+                        stack.push({x: nx, y: ny});
+                    }
+                }
+            }
+            return false; // No contradiction
+        }
+        // 5. Create the final image from the collapsed wave.
+        generateOutput() {
+            const outputGrid = Array.from({ length: this.outputHeight }, () => Array(this.outputWidth));
+            for (let y = 0; y < this.outputHeight; y++) {
+                for (let x = 0; x < this.outputWidth; x++) {
+                    if (this.wave[y][x].length > 0) {
+                        const patternIndex = this.wave[y][x][0];
+                        const pattern = this.patterns[patternIndex];
+                        // Render the top-left pixel of the pattern at this position
+                        outputGrid[y][x] = pattern[0];
+                    } else {
+                         outputGrid[y][x] = 0; // Should not happen in success case
+                    }
+                }
+            }
+            return outputGrid;
+        }
+    }
+    // --- MAIN EXECUTION ---
+    async function handleGenerate() {
+        generateBtn.disabled = true;
+        statusDiv.textContent = 'Starting...';
+        statusDiv.style.color = '#333';
+        // Resize output canvas
+        const outputWidth = parseInt(outputWidthInput.value);
+        const outputHeight = parseInt(outputHeightInput.value);
+        outputCanvas.width = outputWidth * 10;
+        outputCanvas.height = outputHeight * 10;
+        outputCtx.clearRect(0, 0, outputCanvas.width, outputCanvas.height);
+        await sleep(10); // Allow UI to update
+        try {
+            statusDiv.textContent = '1. Parsing input patterns...';
+            const N = parseInt(nSizeInput.value);
+            const useAugmentations = augmentCheckbox.checked;
+            const visualize = visualizeCheckbox.checked;
+            let visualizeCallback = null;
+            if (visualize) {
+                visualizeCallback = (entropyGrid, maxEntropy) => {
+                    const pixelW = outputCanvas.width / outputWidth;
+                    const pixelH = outputCanvas.height / outputHeight;
+                    outputCtx.clearRect(0, 0, outputCanvas.width, outputCanvas.height);
+                    for(let y = 0; y < outputHeight; y++) {
+                        for (let x = 0; x < outputWidth; x++) {
+                           const entropy = entropyGrid[y][x];
+                           if(entropy === 1) {
+                               outputCtx.fillStyle = '#00ff00'; // Green for collapsed
+                           } else {
+                               const grayscale = Math.floor(255 * (1 - (entropy / maxEntropy)));
+                               outputCtx.fillStyle = `rgb(${grayscale}, ${grayscale}, ${grayscale})`;
+                           }
+                           outputCtx.fillRect(x * pixelW, y * pixelH, pixelW, pixelH);
+                        }
+                    }
+                };
+            }
+            const wfc = new WFC(inputGrid, N, outputWidth, outputHeight, useAugmentations, visualizeCallback);
+            statusDiv.textContent = '2. Running WFC algorithm... (this may take a moment)';
+            await sleep(10);
+            const resultGrid = await wfc.run();
+            statusDiv.textContent = '3. Rendering output...';
+            await sleep(10);
+            // Draw final result
+            const pixelW = outputCanvas.width / outputWidth;
+            const pixelH = outputCanvas.height / outputHeight;
+            outputCtx.clearRect(0, 0, outputCanvas.width, outputCanvas.height);
+            for(let y = 0; y < outputHeight; y++) {
+                for (let x = 0; x < outputWidth; x++) {
+                    const colorIndex = resultGrid[y][x];
+                    outputCtx.fillStyle = colors[colorIndex] || '#ff00ff'; // Magenta for errors
+                    outputCtx.fillRect(x * pixelW, y * pixelH, pixelW, pixelH);
+                }
+            }
+            statusDiv.textContent = 'Finished successfully!';
+            statusDiv.style.color = 'green';
+        } catch (error) {
+            console.error(error);
+            statusDiv.textContent = `Error: ${error.message}`;
+            statusDiv.style.color = 'red';
+        } finally {
+            generateBtn.disabled = false;
+        }
+    }
+    generateBtn.addEventListener('click', handleGenerate);
+    // Initial setup
+    createDefaultPattern();
+    updatePalette();
+    drawInputGrid();
+});
+</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=EnovinxSchool/wave-collapse-function-not-designed-by-me" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

File without changes