Spaces:

Saad4web
/

pixel-arts

Running

App Files Files Community

Saad4web commited on Jul 9, 2025

Commit

f9f01b6

verified ·

1 Parent(s): 66f052a

I need to create a browser mockup that converts images to Minecraft Pixel Art and also gives me the Minecraft supported images to export in-game. These tools are built on artificial intelligence using TensotFlowJs - Initial Deployment

Browse files

Files changed (2) hide show

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

README.md CHANGED Viewed

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

 ---
+title: pixel-arts
+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,500 @@
-<!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.18.0/dist/tf.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        .browser-window {
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+            border-radius: 12px;
+            overflow: hidden;
+        }
+        .browser-header {
+            background: linear-gradient(to right, #f1f1f1, #e0e0e0);
+            padding: 8px 12px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .browser-button {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+        }
+        .browser-url {
+            flex-grow: 1;
+            background: white;
+            padding: 6px 12px;
+            border-radius: 16px;
+            font-size: 12px;
+            color: #555;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+        .pixel-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(16px, 1fr));
+            gap: 0;
+            border: 2px solid #333;
+        }
+        .pixel {
+            aspect-ratio: 1/1;
+            width: 100%;
+        }
+        .dropzone {
+            border: 2px dashed #ccc;
+            transition: all 0.3s;
+        }
+        .dropzone.active {
+            border-color: #4CAF50;
+            background-color: rgba(76, 175, 80, 0.1);
+        }
+        .minecraft-block {
+            width: 32px;
+            height: 32px;
+            image-rendering: pixelated;
+        }
+        canvas {
+            image-rendering: pixelated;
+        }
+        .loading-bar {
+            height: 4px;
+            background: linear-gradient(to right, #4CAF50, #8BC34A);
+            width: 0%;
+            transition: width 0.3s;
+        }
+    </style>
+</head>
+<body class="bg-gray-100 min-h-screen flex items-center justify-center p-4">
+    <div class="w-full max-w-4xl">
+        <div class="browser-window bg-white">
+            <div class="browser-header">
+                <div class="browser-button bg-red-500"></div>
+                <div class="browser-button bg-yellow-500"></div>
+                <div class="browser-button bg-green-500"></div>
+                <div class="browser-url">https://minecraft-pixel-art-converter.com</div>
+                <div class="text-gray-500 text-sm">
+                    <i class="fas fa-lock"></i>
+                </div>
+            </div>
+            <div class="loading-bar" id="loadingBar"></div>
+            <div class="p-6">
+                <h1 class="text-3xl font-bold text-gray-800 mb-2 flex items-center">
+                    <i class="fas fa-cube mr-2 text-green-600"></i>
+                    Minecraft Pixel Art Converter
+                </h1>
+                <p class="text-gray-600 mb-6">Upload an image to convert it to Minecraft blocks with AI-powered color matching</p>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+                    <!-- Original Image -->
+                    <div class="bg-gray-50 p-4 rounded-lg">
+                        <h2 class="text-lg font-semibold mb-3 text-gray-700 flex items-center">
+                            <i class="fas fa-image mr-2 text-blue-500"></i>
+                            Original Image
+                        </h2>
+                        <div id="dropzone" class="dropzone rounded-lg flex flex-col items-center justify-center p-8 cursor-pointer">
+                            <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-2"></i>
+                            <p class="text-gray-500 text-center">Drag & drop your image here or click to browse</p>
+                            <input type="file" id="imageInput" accept="image/*" class="hidden">
+                        </div>
+                        <div id="originalPreview" class="mt-4 hidden">
+                            <img id="originalImage" class="max-w-full h-auto rounded border border-gray-200" alt="Original preview">
+                        </div>
+                    </div>
+                    <!-- Minecraft Preview -->
+                    <div class="bg-gray-50 p-4 rounded-lg">
+                        <h2 class="text-lg font-semibold mb-3 text-gray-700 flex items-center">
+                            <i class="fas fa-cubes mr-2 text-green-500"></i>
+                            Minecraft Version
+                        </h2>
+                        <div id="minecraftPreview" class="flex items-center justify-center bg-gray-100 rounded-lg p-8 min-h-48">
+                            <p class="text-gray-500 text-center">Converted pixel art will appear here</p>
+                        </div>
+                        <div id="pixelArtContainer" class="mt-4 hidden overflow-auto max-h-64 border border-gray-200 rounded">
+                            <canvas id="pixelArtCanvas"></canvas>
+                        </div>
+                    </div>
+                </div>
+                <!-- Controls -->
+                <div class="bg-gray-50 p-4 rounded-lg mb-6">
+                    <h2 class="text-lg font-semibold mb-3 text-gray-700 flex items-center">
+                        <i class="fas fa-sliders-h mr-2 text-purple-500"></i>
+                        Conversion Settings
+                    </h2>
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Resolution</label>
+                            <select id="resolutionSelect" class="w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-green-500 focus:border-green-500">
+                                <option value="32">32x32 (Small)</option>
+                                <option value="64" selected>64x64 (Medium)</option>
+                                <option value="128">128x128 (Large)</option>
+                                <option value="256">256x256 (Huge)</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Color Palette</label>
+                            <select id="paletteSelect" class="w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-green-500 focus:border-green-500">
+                                <option value="default" selected>Default Blocks</option>
+                                <option value="wool">Wool Only</option>
+                                <option value="concrete">Concrete Only</option>
+                                <option value="terracotta">Terracotta Only</option>
+                                <option value="all">All Available Blocks</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Dithering</label>
+                            <select id="ditherSelect" class="w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-green-500 focus:border-green-500">
+                                <option value="none">None</option>
+                                <option value="floyd" selected>Floyd-Steinberg</option>
+                                <option value="ordered">Ordered</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="mt-4 flex flex-wrap gap-3">
+                        <button id="convertBtn" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded flex items-center disabled:opacity-50">
+                            <i class="fas fa-magic mr-2"></i>
+                            Convert to Pixel Art
+                        </button>
+                        <button id="randomBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded flex items-center">
+                            <i class="fas fa-random mr-2"></i>
+                            Random Example
+                        </button>
+                        <button id="clearBtn" class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded flex items-center">
+                            <i class="fas fa-trash-alt mr-2"></i>
+                            Clear
+                        </button>
+                    </div>
+                </div>
+                <!-- Export Options -->
+                <div class="bg-gray-50 p-4 rounded-lg">
+                    <h2 class="text-lg font-semibold mb-3 text-gray-700 flex items-center">
+                        <i class="fas fa-download mr-2 text-orange-500"></i>
+                        Export Options
+                    </h2>
+                    <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
+                        <button id="exportImageBtn" class="bg-purple-600 hover:bg-purple-700 text-white px-3 py-2 rounded text-sm flex items-center justify-center">
+                            <i class="fas fa-file-image mr-2"></i>
+                            PNG Image
+                        </button>
+                        <button id="exportSchematicBtn" class="bg-yellow-600 hover:bg-yellow-700 text-white px-3 py-2 rounded text-sm flex items-center justify-center">
+                            <i class="fas fa-file-archive mr-2"></i>
+                            Schematic
+                        </button>
+                        <button id="exportBlueprintBtn" class="bg-red-600 hover:bg-red-700 text-white px-3 py-2 rounded text-sm flex items-center justify-center">
+                            <i class="fas fa-file-alt mr-2"></i>
+                            Blueprint
+                        </button>
+                        <button id="exportCommandBtn" class="bg-green-600 hover:bg-green-700 text-white px-3 py-2 rounded text-sm flex items-center justify-center">
+                            <i class="fas fa-terminal mr-2"></i>
+                            Commands
+                        </button>
+                    </div>
+                    <div id="commandOutput" class="mt-4 hidden bg-gray-800 text-green-400 p-3 rounded font-mono text-sm overflow-x-auto"></div>
+                    <div id="blockListContainer" class="mt-4 hidden">
+                        <h3 class="font-medium text-gray-700 mb-2">Required Blocks</h3>
+                        <div id="blockList" class="flex flex-wrap gap-2">
+                            <!-- Blocks will be added here dynamically -->
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="bg-gray-100 p-3 text-center text-sm text-gray-600">
+                <p>Powered by TensorFlow.js AI color matching | Not affiliated with Mojang or Microsoft</p>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Wait for TensorFlow.js to be ready
+        document.addEventListener('DOMContentLoaded', async function() {
+            // Check if TensorFlow.js is loaded
+            if (!tf) {
+                alert('Error: TensorFlow.js not loaded. Please check your internet connection.');
+                return;
+            }
+            // DOM elements
+            const dropzone = document.getElementById('dropzone');
+            const imageInput = document.getElementById('imageInput');
+            const originalPreview = document.getElementById('originalPreview');
+            const originalImage = document.getElementById('originalImage');
+            const minecraftPreview = document.getElementById('minecraftPreview');
+            const pixelArtContainer = document.getElementById('pixelArtContainer');
+            const pixelArtCanvas = document.getElementById('pixelArtCanvas');
+            const convertBtn = document.getElementById('convertBtn');
+            const randomBtn = document.getElementById('randomBtn');
+            const clearBtn = document.getElementById('clearBtn');
+            const loadingBar = document.getElementById('loadingBar');
+            const commandOutput = document.getElementById('commandOutput');
+            const blockListContainer = document.getElementById('blockListContainer');
+            const blockList = document.getElementById('blockList');
+            // Export buttons
+            const exportImageBtn = document.getElementById('exportImageBtn');
+            const exportSchematicBtn = document.getElementById('exportSchematicBtn');
+            const exportBlueprintBtn = document.getElementById('exportBlueprintBtn');
+            const exportCommandBtn = document.getElementById('exportCommandBtn');
+            // Settings
+            const resolutionSelect = document.getElementById('resolutionSelect');
+            const paletteSelect = document.getElementById('paletteSelect');
+            const ditherSelect = document.getElementById('ditherSelect');
+            // Current state
+            let currentImage = null;
+            let pixelArtData = null;
+            // Dropzone events
+            dropzone.addEventListener('click', () => imageInput.click());
+            dropzone.addEventListener('dragover', (e) => {
+                e.preventDefault();
+                dropzone.classList.add('active');
+            });
+            dropzone.addEventListener('dragleave', () => {
+                dropzone.classList.remove('active');
+            });
+            dropzone.addEventListener('drop', (e) => {
+                e.preventDefault();
+                dropzone.classList.remove('active');
+                if (e.dataTransfer.files.length) {
+                    imageInput.files = e.dataTransfer.files;
+                    handleImageUpload();
+                }
+            });
+            // File input change
+            imageInput.addEventListener('change', handleImageUpload);
+            // Button events
+            convertBtn.addEventListener('click', convertToPixelArt);
+            randomBtn.addEventListener('click', loadRandomExample);
+            clearBtn.addEventListener('click', clearAll);
+            // Export buttons
+            exportImageBtn.addEventListener('click', exportAsImage);
+            exportSchematicBtn.addEventListener('click', exportAsSchematic);
+            exportBlueprintBtn.addEventListener('click', exportAsBlueprint);
+            exportCommandBtn.addEventListener('click', exportAsCommands);
+            // Handle image upload
+            function handleImageUpload() {
+                const file = imageInput.files[0];
+                if (!file) return;
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    originalImage.src = e.target.result;
+                    originalPreview.classList.remove('hidden');
+                    minecraftPreview.innerHTML = '<p class="text-gray-500 text-center">Click "Convert to Pixel Art" to generate Minecraft version</p>';
+                    pixelArtContainer.classList.add('hidden');
+                    blockListContainer.classList.add('hidden');
+                    commandOutput.classList.add('hidden');
+                    currentImage = originalImage;
+                };
+                reader.readAsDataURL(file);
+            }
+            // Convert image to pixel art
+            async function convertToPixelArt() {
+                if (!currentImage) {
+                    alert('Please upload an image first');
+                    return;
+                }
+                convertBtn.disabled = true;
+                loadingBar.style.width = '30%';
+                // Simulate processing (in a real app, this would use TensorFlow.js)
+                setTimeout(() => {
+                    loadingBar.style.width = '70%';
+                    // Get settings
+                    const resolution = parseInt(resolutionSelect.value);
+                    const palette = paletteSelect.value;
+                    const dithering = ditherSelect.value;
+                    // Create canvas
+                    const canvas = document.createElement('canvas');
+                    const ctx = canvas.getContext('2d');
+                    // Set canvas dimensions
+                    const maxDimension = Math.min(currentImage.naturalWidth || currentImage.width,
+                                                currentImage.naturalHeight || currentImage.height);
+                    canvas.width = resolution;
+                    canvas.height = resolution;
+                    // Draw image to canvas (this would be replaced with actual TensorFlow processing)
+                    ctx.drawImage(currentImage, 0, 0, resolution, resolution);
+                    // Apply pixelation (simplified - real implementation would use TensorFlow for color matching)
+                    const imageData = ctx.getImageData(0, 0, resolution, resolution);
+                    const data = imageData.data;
+                    // This is where TensorFlow.js would be used to:
+                    // 1. Analyze colors
+                    // 2. Match to closest Minecraft blocks
+                    // 3. Apply dithering if selected
+                    // For demo purposes, we'll just pixelate without AI
+                    for (let i = 0; i < data.length; i += 4) {
+                        // Simple color reduction for demo
+                        data[i] = Math.round(data[i] / 51) * 51;     // R
+                        data[i+1] = Math.round(data[i+1] / 51) * 51; // G
+                        data[i+2] = Math.round(data[i+2] / 51) * 51; // B
+                    }
+                    ctx.putImageData(imageData, 0, 0);
+                    // Display result
+                    pixelArtCanvas.width = resolution;
+                    pixelArtCanvas.height = resolution;
+                    pixelArtCanvas.getContext('2d').drawImage(canvas, 0, 0);
+                    pixelArtContainer.classList.remove('hidden');
+                    minecraftPreview.innerHTML = '<p class="text-gray-500 text-center">Pixel art generated! See export options below.</p>';
+                    // Generate block list (simulated)
+                    generateBlockList();
+                    loadingBar.style.width = '100%';
+                    setTimeout(() => {
+                        loadingBar.style.width = '0%';
+                        convertBtn.disabled = false;
+                    }, 500);
+                }, 1000);
+            }
+            // Generate block list (simulated)
+            function generateBlockList() {
+                blockList.innerHTML = '';
+                // Simulate finding different blocks
+                const blocks = [
+                    { name: 'White Wool', color: '#E9ECEC' },
+                    { name: 'Red Wool', color: '#B02E26' },
+                    { name: 'Blue Wool', color: '#3C44AA' },
+                    { name: 'Green Wool', color: '#5E7C16' },
+                    { name: 'Yellow Wool', color: '#FED83D' },
+                    { name: 'Black Wool', color: '#1D1D21' }
+                ].slice(0, 3 + Math.floor(Math.random() * 3)); // Random number of blocks
+                blocks.forEach(block => {
+                    const blockEl = document.createElement('div');
+                    blockEl.className = 'flex items-center bg-gray-100 px-2 py-1 rounded text-sm';
+                    blockEl.innerHTML = `
+                        <div class="w-4 h-4 rounded mr-2" style="background-color: ${block.color}"></div>
+                        ${block.name}
+                    `;
+                    blockList.appendChild(blockEl);
+                });
+                blockListContainer.classList.remove('hidden');
+            }
+            // Load random example
+            function loadRandomExample() {
+                const examples = [
+                    'https://via.placeholder.com/512/FF5733/FFFFFF?text=Example+1',
+                    'https://via.placeholder.com/512/33FF57/FFFFFF?text=Example+2',
+                    'https://via.placeholder.com/512/3357FF/FFFFFF?text=Example+3',
+                    'https://via.placeholder.com/512/F033FF/FFFFFF?text=Example+4'
+                ];
+                const randomUrl = examples[Math.floor(Math.random() * examples.length)];
+                originalImage.src = randomUrl;
+                originalPreview.classList.remove('hidden');
+                minecraftPreview.innerHTML = '<p class="text-gray-500 text-center">Click "Convert to Pixel Art" to generate Minecraft version</p>';
+                pixelArtContainer.classList.add('hidden');
+                blockListContainer.classList.add('hidden');
+                commandOutput.classList.add('hidden');
+                // Create a fake image element to simulate loading
+                const img = new Image();
+                img.onload = function() {
+                    currentImage = img;
+                };
+                img.src = randomUrl;
+            }
+            // Clear all
+            function clearAll() {
+                originalPreview.classList.add('hidden');
+                minecraftPreview.innerHTML = '<p class="text-gray-500 text-center">Converted pixel art will appear here</p>';
+                pixelArtContainer.classList.add('hidden');
+                blockListContainer.classList.add('hidden');
+                commandOutput.classList.add('hidden');
+                imageInput.value = '';
+                currentImage = null;
+                pixelArtData = null;
+            }
+            // Export functions
+            function exportAsImage() {
+                if (!pixelArtCanvas) {
+                    alert('Please convert an image first');
+                    return;
+                }
+                const link = document.createElement('a');
+                link.download = 'minecraft-pixel-art.png';
+                link.href = pixelArtCanvas.toDataURL('image/png');
+                link.click();
+            }
+            function exportAsSchematic() {
+                alert('Schematic export would be generated here in a real implementation');
+            }
+            function exportAsBlueprint() {
+                alert('Blueprint export would be generated here in a real implementation');
+            }
+            function exportAsCommands() {
+                if (!pixelArtCanvas) {
+                    alert('Please convert an image first');
+                    return;
+                }
+                // Simulate generating commands
+                const resolution = parseInt(resolutionSelect.value);
+                let commands = [
+                    '# Minecraft Pixel Art Commands',
+                    '# Generated by Minecraft Pixel Art Converter',
+                    '# Resolution: ' + resolution + 'x' + resolution,
+                    '',
+                    '# Place these commands in command blocks or run in chat',
+                    ''
+                ];
+                // Add some example commands (in a real app, this would generate actual placement commands)
+                for (let i = 0; i < 5; i++) {
+                    commands.push(`/setblock ~${i} ~ ~ minecraft:white_wool`);
+                }
+                commands.push('', '# Total blocks: ~' + (resolution * resolution));
+                commandOutput.textContent = commands.join('\n');
+                commandOutput.classList.remove('hidden');
+            }
+        });
+    </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/pixel-arts" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>