Spaces:

Saad4web
/

pixelarts

Running

App Files Files Community

Saad4web commited on Jul 9, 2025

Commit

db3dca3

verified ·

1 Parent(s): e1e17a1

good job now improve to make it able Export Options PNG Image Schematic Blueprint Commands - Initial Deployment

Browse files

Files changed (2) hide show

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

README.md CHANGED Viewed

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

 ---
+title: pixelarts
+emoji: 🐳
+colorFrom: blue
+colorTo: green
 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,787 @@
-<!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>Minecraft Pixel Art Converter</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.11.0/dist/tf.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        minecraft: {
+                            green: '#5b9c64',
+                            dark: '#3a3a3a',
+                            light: '#f0f0f0',
+                            accent: '#7aa3d9'
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        .block-item {
+            transition: all 0.2s ease;
+        }
+        .block-item:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        }
+        .pixel-grid {
+            display: grid;
+            gap: 0;
+            margin: 0 auto;
+        }
+        .pixel {
+            border: 1px solid rgba(0,0,0,0.1);
+        }
+        .drop-area {
+            border: 2px dashed #cbd5e0;
+            transition: all 0.3s ease;
+        }
+        .drop-area.active {
+            border-color: #7aa3d9;
+            background-color: rgba(122, 163, 217, 0.1);
+        }
+        .canvas-container {
+            position: relative;
+            overflow: auto;
+            max-width: 100%;
+        }
+        canvas {
+            max-width: 100%;
+            height: auto;
+            display: block;
+        }
+        .category-title {
+            position: sticky;
+            top: 0;
+            z-index: 10;
+        }
+        .export-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(20px, 1fr));
+            gap: 1px;
+        }
+        .export-cell {
+            width: 100%;
+            padding-bottom: 100%;
+            position: relative;
+        }
+        .export-cell-inner {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            font-size: 8px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+    </style>
+</head>
+<body class="bg-minecraft-light min-h-screen font-sans">
+    <!-- Header -->
+    <header class="bg-minecraft-dark text-white py-4 shadow-md">
+        <div class="container mx-auto px-4 flex items-center">
+            <i class="fas fa-cube text-minecraft-green text-2xl mr-3"></i>
+            <h1 class="text-2xl font-bold">Minecraft Pixel Art Converter</h1>
+        </div>
+    </header>
+    <main class="container mx-auto px-4 py-8">
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <!-- Left Column: Image Upload and Preview -->
+            <div class="lg:col-span-1">
+                <div class="bg-white rounded-lg shadow-md p-6 mb-6">
+                    <h2 class="text-xl font-bold text-gray-800 mb-4">Upload Image</h2>
+                    <div class="drop-area rounded-lg p-8 text-center cursor-pointer mb-4" id="drop-area">
+                        <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-3"></i>
+                        <p class="text-gray-600 mb-2">Drag & drop your image here</p>
+                        <p class="text-gray-500 text-sm mb-4">or</p>
+                        <label for="file-upload" class="bg-minecraft-green hover:bg-green-600 text-white font-medium py-2 px-4 rounded cursor-pointer transition">
+                            <i class="fas fa-folder-open mr-2"></i>Choose File
+                        </label>
+                        <input type="file" id="file-upload" class="hidden" accept="image/jpeg,image/png">
+                    </div>
+                    <p class="text-gray-500 text-sm text-center">Supported formats: JPG, PNG</p>
+                </div>
+                <div class="bg-white rounded-lg shadow-md p-6 mb-6">
+                    <h2 class="text-xl font-bold text-gray-800 mb-4">Original Image</h2>
+                    <div class="border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center min-h-[200px]">
+                        <img id="original-preview" class="max-w-full max-h-80 object-contain hidden">
+                        <div id="original-placeholder" class="text-gray-500 text-center p-4">
+                            <i class="fas fa-image text-4xl mb-3"></i>
+                            <p>Your image will appear here</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-lg shadow-md p-6">
+                    <h2 class="text-xl font-bold text-gray-800 mb-4">Conversion Settings</h2>
+                    <div class="mb-4">
+                        <label class="block text-gray-700 mb-2">Pixel Art Size</label>
+                        <div class="flex items-center">
+                            <input type="range" id="resolution-slider" min="16" max="128" value="64" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
+                            <span id="resolution-value" class="ml-4 text-gray-700 font-medium">64x64</span>
+                        </div>
+                    </div>
+                    <div class="flex space-x-4">
+                        <button id="convert-btn" class="flex-1 bg-minecraft-green hover:bg-green-600 text-white font-medium py-2 px-4 rounded transition disabled:opacity-50 disabled:cursor-not-allowed" disabled>
+                            <i class="fas fa-magic mr-2"></i>Convert to Pixel Art
+                        </button>
+                        <button id="reset-btn" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-medium py-2 px-4 rounded transition">
+                            <i class="fas fa-redo mr-2"></i>Reset
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <!-- Middle Column: Pixel Art Preview -->
+            <div class="lg:col-span-1">
+                <div class="bg-white rounded-lg shadow-md p-6 mb-6">
+                    <div class="flex justify-between items-center mb-4">
+                        <h2 class="text-xl font-bold text-gray-800">Minecraft Pixel Art</h2>
+                        <div class="flex items-center">
+                            <span class="text-gray-600 mr-2">Zoom:</span>
+                            <div class="flex space-x-1">
+                                <button id="zoom-out" class="w-8 h-8 bg-gray-200 hover:bg-gray-300 rounded flex items-center justify-center">
+                                    <i class="fas fa-search-minus"></i>
+                                </button>
+                                <button id="zoom-in" class="w-8 h-8 bg-gray-200 hover:bg-gray-300 rounded flex items-center justify-center">
+                                    <i class="fas fa-search-plus"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="canvas-container border-2 border-gray-300 rounded-lg min-h-[300px] flex items-center justify-center" id="canvas-container">
+                        <canvas id="pixel-art-canvas" class="hidden"></canvas>
+                        <div id="pixel-art-placeholder" class="text-gray-500 text-center p-4">
+                            <i class="fas fa-cubes text-4xl mb-3"></i>
+                            <p>Your Minecraft pixel art will appear here</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-lg shadow-md p-6">
+                    <h2 class="text-xl font-bold text-gray-800 mb-4">Export Minecraft Art</h2>
+                    <button id="export-btn" class="w-full bg-minecraft-accent hover:bg-blue-600 text-white font-medium py-3 px-4 rounded transition mb-4 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
+                        <i class="fas fa-download mr-2"></i>Export Minecraft Blueprint
+                    </button>
+                    <div id="export-results" class="hidden">
+                        <div class="mb-4">
+                            <h3 class="font-bold text-gray-700 mb-2">Art Dimensions</h3>
+                            <p id="dimensions" class="text-gray-800">64x64 blocks</p>
+                        </div>
+                        <div class="mb-4">
+                            <h3 class="font-bold text-gray-700 mb-2">Blocks Required</h3>
+                            <div id="block-counts" class="bg-gray-50 rounded-lg p-4 max-h-60 overflow-y-auto">
+                                <!-- Block counts will be inserted here -->
+                            </div>
+                        </div>
+                        <div>
+                            <h3 class="font-bold text-gray-700 mb-2">Placement Guide</h3>
+                            <div class="bg-gray-50 rounded-lg p-4">
+                                <div class="export-grid mb-4" id="placement-grid">
+                                    <!-- Miniature grid will be inserted here -->
+                                </div>
+                                <div class="flex justify-between">
+                                    <button id="download-txt" class="text-minecraft-accent hover:text-blue-600 font-medium">
+                                        <i class="fas fa-file-alt mr-2"></i>Download Text Guide
+                                    </button>
+                                    <button id="download-grid" class="text-minecraft-accent hover:text-blue-600 font-medium">
+                                        <i class="fas fa-table mr-2"></i>Download Grid Guide
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Right Column: Block Palette -->
+            <div class="lg:col-span-1">
+                <div class="bg-white rounded-lg shadow-md p-6">
+                    <div class="flex justify-between items-center mb-4">
+                        <h2 class="text-xl font-bold text-gray-800">Minecraft Block Palette</h2>
+                        <div class="flex space-x-2">
+                            <button id="select-all" class="text-sm bg-gray-200 hover:bg-gray-300 text-gray-800 py-1 px-3 rounded transition">
+                                <i class="fas fa-check-square mr-1"></i>Select All
+                            </button>
+                            <button id="deselect-all" class="text-sm bg-gray-200 hover:bg-gray-300 text-gray-800 py-1 px-3 rounded transition">
+                                <i class="fas fa-square mr-1"></i>Deselect All
+                            </button>
+                        </div>
+                    </div>
+                    <div class="mb-4">
+                        <input type="text" id="block-search" placeholder="Search blocks..." class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-minecraft-accent">
+                    </div>
+                    <div class="block-palette-container max-h-[calc(100vh-250px)] overflow-y-auto pr-2">
+                        <!-- Block categories will be inserted here -->
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    <script>
+        // Minecraft block data with representative colors
+        const blockPalette = [
+            // Easily Findable Blocks
+            { name: "Clay", category: "Easily Findable", color: [158, 164, 176] },
+            { name: "Jungle log", category: "Easily Findable", color: [87, 68, 27] },
+            { name: "Birch log", category: "Easily Findable", color: [207, 206, 201] },
+            { name: "Oak log", category: "Easily Findable", color: [102, 81, 50] },
+            { name: "Spruce log", category: "Easily Findable", color: [46, 29, 12] },
+            { name: "Stone slab", category: "Easily Findable", color: [125, 125, 125] },
+            { name: "Gravel", category: "Easily Findable", color: [132, 127, 127] },
+            { name: "Sandstone", category: "Easily Findable", color: [219, 211, 160] },
+            { name: "White wool", category: "Easily Findable", color: [233, 236, 236] },
+            { name: "Blue wool", category: "Easily Findable", color: [53, 57, 157] },
+            { name: "Yellow wool", category: "Easily Findable", color: [248, 198, 40] },
+            { name: "Red wool", category: "Easily Findable", color: [161, 39, 35] },
+            { name: "Green wool", category: "Easily Findable", color: [86, 110, 44] },
+            { name: "Snow block", category: "Easily Findable", color: [240, 251, 251] },
+            { name: "Cobblestone", category: "Easily Findable", color: [125, 125, 125] },
+            { name: "Sand", category: "Easily Findable", color: [219, 211, 160] },
+            { name: "Dirt", category: "Easily Findable", color: [134, 96, 67] },
+            // Manufactured Blocks
+            { name: "Bookshelf", category: "Manufactured", color: [178, 141, 86] },
+            { name: "Block of Iron", category: "Manufactured", color: [220, 220, 220] },
+            { name: "Bricks", category: "Manufactured", color: [150, 99, 83] },
+            { name: "Stone brick", category: "Manufactured", color: [122, 122, 122] },
+            { name: "Blue terracotta", category: "Manufactured", color: [74, 60, 91] },
+            { name: "White terracotta", category: "Manufactured", color: [210, 178, 162] },
+            { name: "Black concrete", category: "Manufactured", color: [9, 11, 16] },
+            { name: "Block of Copper", category: "Manufactured", color: [198, 112, 100] },
+            // Blocks on Transparent Background
+            { name: "Glass", category: "Transparent", color: [155, 186, 178, 200] },
+            { name: "Black stained glass", category: "Transparent", color: [25, 25, 25, 200] },
+            { name: "Blue stained glass", category: "Transparent", color: [51, 76, 178, 200] },
+            { name: "Green stained glass", category: "Transparent", color: [102, 127, 51, 200] },
+            { name: "Oak leaves", category: "Transparent", color: [48, 112, 20, 200] },
+            // Rare Blocks
+            { name: "Block of Diamond", category: "Rare", color: [99, 219, 213] },
+            { name: "Block of Emerald", category: "Rare", color: [42, 204, 112] },
+            { name: "Block of Gold", category: "Rare", color: [249, 236, 50] },
+            { name: "Obsidian", category: "Rare", color: [20, 18, 30] },
+            { name: "Prismarine bricks", category: "Rare", color: [100, 160, 144] },
+            { name: "Slime Block", category: "Rare", color: [128, 189, 90] }
+        ];
+        // App state
+        let state = {
+            originalImage: null,
+            pixelArtData: null,
+            selectedBlocks: new Set(blockPalette.map(block => block.name)),
+            resolution: 64,
+            zoomLevel: 5,
+            conversionInProgress: false
+        };
+        // DOM Elements
+        const dom = {
+            dropArea: document.getElementById('drop-area'),
+            fileUpload: document.getElementById('file-upload'),
+            originalPreview: document.getElementById('original-preview'),
+            originalPlaceholder: document.getElementById('original-placeholder'),
+            convertBtn: document.getElementById('convert-btn'),
+            resetBtn: document.getElementById('reset-btn'),
+            pixelArtCanvas: document.getElementById('pixel-art-canvas'),
+            pixelArtPlaceholder: document.getElementById('pixel-art-placeholder'),
+            canvasContainer: document.getElementById('canvas-container'),
+            blockPaletteContainer: document.querySelector('.block-palette-container'),
+            blockSearch: document.getElementById('block-search'),
+            selectAllBtn: document.getElementById('select-all'),
+            deselectAllBtn: document.getElementById('deselect-all'),
+            resolutionSlider: document.getElementById('resolution-slider'),
+            resolutionValue: document.getElementById('resolution-value'),
+            zoomInBtn: document.getElementById('zoom-in'),
+            zoomOutBtn: document.getElementById('zoom-out'),
+            exportBtn: document.getElementById('export-btn'),
+            exportResults: document.getElementById('export-results'),
+            dimensions: document.getElementById('dimensions'),
+            blockCounts: document.getElementById('block-counts'),
+            placementGrid: document.getElementById('placement-grid'),
+            downloadTxt: document.getElementById('download-txt'),
+            downloadGrid: document.getElementById('download-grid')
+        };
+        // Initialize the application
+        function init() {
+            renderBlockPalette();
+            setupEventListeners();
+        }
+        // Render block palette with categories
+        function renderBlockPalette() {
+            // Group blocks by category
+            const categories = {};
+            blockPalette.forEach(block => {
+                if (!categories[block.category]) {
+                    categories[block.category] = [];
+                }
+                categories[block.category].push(block);
+            });
+            // Generate HTML for each category
+            let html = '';
+            for (const category in categories) {
+                html += `
+                    <div class="mb-6">
+                        <h3 class="category-title bg-gray-100 text-gray-800 font-bold py-2 px-3 rounded-t-lg">${category}</h3>
+                        <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 p-3 bg-gray-50 rounded-b-lg">
+                            ${categories[category].map(block => `
+                                <div class="block-item bg-white rounded-lg overflow-hidden shadow-sm border border-gray-200 ${state.selectedBlocks.has(block.name) ? 'border-minecraft-green' : ''}">
+                                    <label class="flex items-center p-2 cursor-pointer">
+                                        <input type="checkbox" class="block-checkbox mr-2" data-block="${block.name}" ${state.selectedBlocks.has(block.name) ? 'checked' : ''}>
+                                        <div class="flex items-center">
+                                            <div class="w-4 h-4 rounded-sm mr-2" style="background-color: rgb(${block.color.join(',')})"></div>
+                                            <span class="text-sm text-gray-700 truncate">${block.name}</span>
+                                        </div>
+                                    </label>
+                                </div>
+                            `).join('')}
+                        </div>
+                    </div>
+                `;
+            }
+            dom.blockPaletteContainer.innerHTML = html;
+        }
+        // Set up event listeners
+        function setupEventListeners() {
+            // File upload handling
+            dom.dropArea.addEventListener('dragover', (e) => {
+                e.preventDefault();
+                dom.dropArea.classList.add('active');
+            });
+            dom.dropArea.addEventListener('dragleave', () => {
+                dom.dropArea.classList.remove('active');
+            });
+            dom.dropArea.addEventListener('drop', (e) => {
+                e.preventDefault();
+                dom.dropArea.classList.remove('active');
+                if (e.dataTransfer.files.length) {
+                    handleFileUpload(e.dataTransfer.files[0]);
+                }
+            });
+            dom.fileUpload.addEventListener('change', (e) => {
+                if (e.target.files.length) {
+                    handleFileUpload(e.target.files[0]);
+                }
+            });
+            // Block selection
+            dom.blockPaletteContainer.addEventListener('change', (e) => {
+                if (e.target.classList.contains('block-checkbox')) {
+                    const blockName = e.target.dataset.block;
+                    if (e.target.checked) {
+                        state.selectedBlocks.add(blockName);
+                    } else {
+                        state.selectedBlocks.delete(blockName);
+                    }
+                    // Update UI
+                    const blockItem = e.target.closest('.block-item');
+                    if (e.target.checked) {
+                        blockItem.classList.add('border-minecraft-green');
+                    } else {
+                        blockItem.classList.remove('border-minecraft-green');
+                    }
+                }
+            });
+            // Block search
+            dom.blockSearch.addEventListener('input', (e) => {
+                const searchTerm = e.target.value.toLowerCase();
+                document.querySelectorAll('.block-item').forEach(item => {
+                    const blockName = item.querySelector('span').textContent.toLowerCase();
+                    if (blockName.includes(searchTerm)) {
+                        item.style.display = 'block';
+                    } else {
+                        item.style.display = 'none';
+                    }
+                });
+            });
+            // Select all/deselect all
+            dom.selectAllBtn.addEventListener('click', () => {
+                state.selectedBlocks = new Set(blockPalette.map(block => block.name));
+                document.querySelectorAll('.block-checkbox').forEach(checkbox => {
+                    checkbox.checked = true;
+                });
+                document.querySelectorAll('.block-item').forEach(item => {
+                    item.classList.add('border-minecraft-green');
+                });
+            });
+            dom.deselectAllBtn.addEventListener('click', () => {
+                state.selectedBlocks.clear();
+                document.querySelectorAll('.block-checkbox').forEach(checkbox => {
+                    checkbox.checked = false;
+                });
+                document.querySelectorAll('.block-item').forEach(item => {
+                    item.classList.remove('border-minecraft-green');
+                });
+            });
+            // Resolution slider
+            dom.resolutionSlider.addEventListener('input', (e) => {
+                state.resolution = parseInt(e.target.value);
+                dom.resolutionValue.textContent = `${state.resolution}x${state.resolution}`;
+            });
+            // Zoom controls
+            dom.zoomInBtn.addEventListener('click', () => {
+                state.zoomLevel = Math.min(state.zoomLevel + 1, 10);
+                renderPixelArt();
+            });
+            dom.zoomOutBtn.addEventListener('click', () => {
+                state.zoomLevel = Math.max(state.zoomLevel - 1, 1);
+                renderPixelArt();
+            });
+            // Convert button
+            dom.convertBtn.addEventListener('click', convertImageToPixelArt);
+            // Reset button
+            dom.resetBtn.addEventListener('click', resetApp);
+            // Export button
+            dom.exportBtn.addEventListener('click', exportArt);
+            // Download buttons
+            dom.downloadTxt.addEventListener('click', downloadTextGuide);
+            dom.downloadGrid.addEventListener('click', downloadGridGuide);
+        }
+        // Handle file upload
+        function handleFileUpload(file) {
+            if (!file.type.match('image.*')) {
+                alert('Please upload an image file (JPG or PNG)');
+                return;
+            }
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                state.originalImage = new Image();
+                state.originalImage.onload = () => {
+                    // Show preview
+                    dom.originalPreview.src = e.target.result;
+                    dom.originalPreview.classList.remove('hidden');
+                    dom.originalPlaceholder.classList.add('hidden');
+                    // Enable convert button
+                    dom.convertBtn.disabled = false;
+                };
+                state.originalImage.src = e.target.result;
+            };
+            reader.readAsDataURL(file);
+        }
+        // Convert image to pixel art using TensorFlow.js
+        async function convertImageToPixelArt() {
+            if (!state.originalImage || state.conversionInProgress) return;
+            state.conversionInProgress = true;
+            dom.convertBtn.disabled = true;
+            dom.convertBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Processing...';
+            try {
+                // Get selected blocks
+                const selectedBlocks = blockPalette.filter(block =>
+                    state.selectedBlocks.has(block.name)
+                );
+                if (selectedBlocks.length === 0) {
+                    alert('Please select at least one block from the palette');
+                    state.conversionInProgress = false;
+                    dom.convertBtn.disabled = false;
+                    dom.convertBtn.innerHTML = '<i class="fas fa-magic mr-2"></i>Convert to Pixel Art';
+                    return;
+                }
+                // Prepare TensorFlow.js operations
+                const tensor = tf.browser.fromPixels(state.originalImage);
+                const resized = tf.image.resizeBilinear(tensor, [state.resolution, state.resolution]);
+                // Convert to pixel art by finding nearest block color
+                const blockColors = selectedBlocks.map(block => {
+                    const color = block.color.length === 4 ? block.color.slice(0, 3) : block.color;
+                    return tf.tensor1d(color);
+                });
+                const pixelArtData = [];
+                const pixels = resized.arraySync();
+                for (let y = 0; y < state.resolution; y++) {
+                    const row = [];
+                    for (let x = 0; x < state.resolution; x++) {
+                        const pixel = pixels[y][x];
+                        let minDistance = Infinity;
+                        let closestBlockIndex = 0;
+                        // Find closest block color
+                        for (let i = 0; i < blockColors.length; i++) {
+                            const color = blockColors[i];
+                            const distance = Math.sqrt(
+                                Math.pow(pixel[0] - color.arraySync()[0], 2) +
+                                Math.pow(pixel[1] - color.arraySync()[1], 2) +
+                                Math.pow(pixel[2] - color.arraySync()[2], 2)
+                            );
+                            if (distance < minDistance) {
+                                minDistance = distance;
+                                closestBlockIndex = i;
+                            }
+                        }
+                        row.push({
+                            block: selectedBlocks[closestBlockIndex],
+                            index: closestBlockIndex
+                        });
+                    }
+                    pixelArtData.push(row);
+                }
+                // Clean up tensors
+                tf.dispose([tensor, resized]);
+                blockColors.forEach(t => t.dispose());
+                // Update state
+                state.pixelArtData = pixelArtData;
+                // Render pixel art
+                renderPixelArt();
+                // Enable export button
+                dom.exportBtn.disabled = false;
+            } catch (error) {
+                console.error('Conversion error:', error);
+                alert('An error occurred during conversion. Please try again.');
+            } finally {
+                state.conversionInProgress = false;
+                dom.convertBtn.disabled = false;
+                dom.convertBtn.innerHTML = '<i class="fas fa-magic mr-2"></i>Convert to Pixel Art';
+            }
+        }
+        // Render pixel art on canvas
+        function renderPixelArt() {
+            if (!state.pixelArtData) return;
+            const canvas = dom.pixelArtCanvas;
+            const ctx = canvas.getContext('2d');
+            const resolution = state.resolution;
+            const pixelSize = state.zoomLevel;
+            canvas.width = resolution * pixelSize;
+            canvas.height = resolution * pixelSize;
+            canvas.classList.remove('hidden');
+            dom.pixelArtPlaceholder.classList.add('hidden');
+            // Clear canvas
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            // Draw each pixel
+            for (let y = 0; y < resolution; y++) {
+                for (let x = 0; x < resolution; x++) {
+                    const pixel = state.pixelArtData[y][x];
+                    const color = pixel.block.color;
+                    ctx.fillStyle = `rgb(${color.slice(0, 3).join(',')})`;
+                    ctx.fillRect(x * pixelSize, y * pixelSize, pixelSize, pixelSize);
+                    // Add grid for larger pixels
+                    if (pixelSize > 3) {
+                        ctx.strokeStyle = 'rgba(0,0,0,0.1)';
+                        ctx.strokeRect(x * pixelSize, y * pixelSize, pixelSize, pixelSize);
+                    }
+                }
+            }
+        }
+        // Export art results
+        function exportArt() {
+            if (!state.pixelArtData) return;
+            // Show dimensions
+            dom.dimensions.textContent = `${state.resolution}x${state.resolution} blocks`;
+            // Calculate block counts
+            const blockCounts = {};
+            state.pixelArtData.flat().forEach(pixel => {
+                const blockName = pixel.block.name;
+                blockCounts[blockName] = (blockCounts[blockName] || 0) + 1;
+            });
+            // Render block counts
+            let countsHTML = '';
+            Object.entries(blockCounts).sort((a, b) => b[1] - a[1]).forEach(([block, count]) => {
+                countsHTML += `
+                    <div class="flex justify-between py-2 border-b border-gray-200">
+                        <span>${block}</span>
+                        <span class="font-medium">${count}</span>
+                    </div>
+                `;
+            });
+            dom.blockCounts.innerHTML = countsHTML;
+            // Render miniature placement grid
+            dom.placementGrid.innerHTML = '';
+            const gridSize = Math.min(20, state.resolution); // Max 20x20 for preview
+            for (let y = 0; y < gridSize; y++) {
+                for (let x = 0; x < gridSize; x++) {
+                    const pixel = state.pixelArtData[y][x];
+                    const color = pixel.block.color;
+                    const cell = document.createElement('div');
+                    cell.className = 'export-cell';
+                    const inner = document.createElement('div');
+                    inner.className = 'export-cell-inner';
+                    inner.style.backgroundColor = `rgb(${color.slice(0, 3).join(',')})`;
+                    inner.title = pixel.block.name;
+                    cell.appendChild(inner);
+                    dom.placementGrid.appendChild(cell);
+                }
+            }
+            // Show export results
+            dom.exportResults.classList.remove('hidden');
+            // Scroll to export results
+            dom.exportResults.scrollIntoView({ behavior: 'smooth' });
+        }
+        // Download text guide
+        function downloadTextGuide() {
+            if (!state.pixelArtData) return;
+            let content = `Minecraft Pixel Art Blueprint\n`;
+            content += `Dimensions: ${state.resolution}x${state.resolution} blocks\n\n`;
+            content += "Block Placement Guide:\n\n";
+            for (let y = 0; y < state.resolution; y++) {
+                for (let x = 0; x < state.resolution; x++) {
+                    const pixel = state.pixelArtData[y][x];
+                    content += `(${x},${y}): ${pixel.block.name}\n`;
+                }
+            }
+            content += "\nBlock Quantities:\n";
+            const blockCounts = {};
+            state.pixelArtData.flat().forEach(pixel => {
+                const blockName = pixel.block.name;
+                blockCounts[blockName] = (blockCounts[blockName] || 0) + 1;
+            });
+            Object.entries(blockCounts).sort((a, b) => b[1] - a[1]).forEach(([block, count]) => {
+                content += `${block}: ${count}\n`;
+            });
+            const blob = new Blob([content], { type: 'text/plain' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = 'minecraft-pixel-art-blueprint.txt';
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+        }
+        // Download grid guide
+        function downloadGridGuide() {
+            if (!state.pixelArtData) return;
+            // Create a canvas for the grid guide
+            const canvas = document.createElement('canvas');
+            const ctx = canvas.getContext('2d');
+            const resolution = state.resolution;
+            const pixelSize = 20; // Fixed size for download
+            canvas.width = resolution * pixelSize;
+            canvas.height = resolution * pixelSize;
+            // Draw each pixel
+            for (let y = 0; y < resolution; y++) {
+                for (let x = 0; x < resolution; x++) {
+                    const pixel = state.pixelArtData[y][x];
+                    const color = pixel.block.color;
+                    ctx.fillStyle = `rgb(${color.slice(0, 3).join(',')})`;
+                    ctx.fillRect(x * pixelSize, y * pixelSize, pixelSize, pixelSize);
+                    // Add grid
+                    ctx.strokeStyle = 'rgba(0,0,0,0.1)';
+                    ctx.strokeRect(x * pixelSize, y * pixelSize, pixelSize, pixelSize);
+                }
+            }
+            // Add title and dimensions
+            ctx.fillStyle = '#000';
+            ctx.font = '20px Arial';
+            ctx.textAlign = 'center';
+            ctx.fillText(`Minecraft Pixel Art Blueprint - ${resolution}x${resolution}`, canvas.width / 2, 30);
+            // Convert to data URL and download
+            const url = canvas.toDataURL('image/png');
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = 'minecraft-pixel-art-grid.png';
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+        }
+        // Reset application
+        function resetApp() {
+            state.originalImage = null;
+            state.pixelArtData = null;
+            state.selectedBlocks = new Set(blockPalette.map(block => block.name));
+            // Reset UI
+            dom.originalPreview.classList.add('hidden');
+            dom.originalPlaceholder.classList.remove('hidden');
+            dom.pixelArtCanvas.classList.add('hidden');
+            dom.pixelArtPlaceholder.classList.remove('hidden');
+            dom.convertBtn.disabled = true;
+            dom.exportBtn.disabled = true;
+            dom.exportResults.classList.add('hidden');
+            // Reset file input
+            dom.fileUpload.value = '';
+            // Reset block selections
+            renderBlockPalette();
+        }
+        // Initialize when DOM is loaded
+        document.addEventListener('DOMContentLoaded', 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 <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=Saad4web/pixelarts" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>