Spaces:

Keeg42069
/

anycoder-74027d45

Running

App Files Files Community

Keeg42069 commited on Jan 16

Commit

5a4e91b

verified ·

1 Parent(s): 9a69261

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +547 -19

index.html CHANGED Viewed

@@ -1,19 +1,547 @@
-<!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>RGB Spectrum Generator | 100 Unique Colors</title>
+    <style>
+        :root {
+            --bg-color: #0f172a;
+            --card-bg: #1e293b;
+            --text-primary: #f8fafc;
+            --text-secondary: #94a3b8;
+            --accent: #3b82f6;
+            --accent-hover: #2563eb;
+            --border: #334155;
+            --success: #22c55e;
+            --font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+        }
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+        body {
+            font-family: var(--font-family);
+            background-color: var(--bg-color);
+            color: var(--text-primary);
+            line-height: 1.6;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
+        /* Header Styling */
+        header {
+            background-color: rgba(30, 41, 59, 0.8);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border);
+            padding: 1rem 2rem;
+            position: sticky;
+            top: 0;
+            z-index: 100;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        }
+        .brand {
+            display: flex;
+            flex-direction: column;
+        }
+        h1 {
+            font-size: 1.5rem;
+            font-weight: 700;
+            letter-spacing: -0.025em;
+        }
+        .subtitle {
+            font-size: 0.875rem;
+            color: var(--text-secondary);
+        }
+        .anycoder-link {
+            font-size: 0.85rem;
+            color: var(--accent);
+            text-decoration: none;
+            font-weight: 600;
+            transition: color 0.2s;
+            border: 1px solid var(--accent);
+            padding: 0.4rem 0.8rem;
+            border-radius: 6px;
+        }
+        .anycoder-link:hover {
+            color: var(--text-primary);
+            background-color: var(--accent);
+        }
+        /* Main Content */
+        main {
+            flex: 1;
+            padding: 2rem;
+            max-width: 1400px;
+            margin: 0 auto;
+            width: 100%;
+        }
+        .controls {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 2rem;
+            flex-wrap: wrap;
+            gap: 1rem;
+        }
+        .stats {
+            color: var(--text-secondary);
+            font-size: 0.9rem;
+        }
+        .btn {
+            background-color: var(--accent);
+            color: white;
+            border: none;
+            padding: 0.75rem 1.5rem;
+            border-radius: 8px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            font-size: 1rem;
+        }
+        .btn:hover {
+            background-color: var(--accent-hover);
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+        }
+        .btn:active {
+            transform: translateY(0);
+        }
+        .btn-secondary {
+            background-color: transparent;
+            border: 1px solid var(--border);
+            color: var(--text-secondary);
+        }
+        .btn-secondary:hover {
+            border-color: var(--text-primary);
+            color: var(--text-primary);
+            background-color: transparent;
+            box-shadow: none;
+        }
+        /* Grid System */
+        .gallery-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            gap: 1.5rem;
+        }
+        /* Color Card Styling */
+        .color-card {
+            background-color: var(--card-bg);
+            border: 1px solid var(--border);
+            border-radius: 12px;
+            overflow: hidden;
+            transition: transform 0.2s, box-shadow 0.2s;
+            display: flex;
+            flex-direction: column;
+            position: relative;
+        }
+        .color-card:hover {
+            transform: translateY(-4px);
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
+            border-color: var(--accent);
+        }
+        .preview-container {
+            width: 100%;
+            aspect-ratio: 1;
+            background-color: #000;
+            position: relative;
+            overflow: hidden;
+        }
+        .preview-img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            image-rendering: pixelated; /* Keeps the 256x256 crisp */
+        }
+        .card-info {
+            padding: 1rem;
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+        }
+        .rgb-label {
+            font-family: 'Courier New', monospace;
+            font-size: 0.85rem;
+            color: var(--text-primary);
+            font-weight: 600;
+            word-break: break-all;
+        }
+        .hex-label {
+            font-size: 0.75rem;
+            color: var(--text-secondary);
+        }
+        .download-btn {
+            margin-top: auto;
+            background-color: var(--card-bg);
+            border: 1px solid var(--border);
+            color: var(--text-secondary);
+            padding: 0.5rem;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 0.8rem;
+            transition: all 0.2s;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 0.4rem;
+        }
+        .download-btn:hover {
+            border-color: var(--accent);
+            color: var(--accent);
+            background-color: rgba(59, 130, 246, 0.1);
+        }
+        /* Footer */
+        footer {
+            text-align: center;
+            padding: 2rem;
+            color: var(--text-secondary);
+            border-top: 1px solid var(--border);
+            margin-top: 2rem;
+            font-size: 0.875rem;
+        }
+        /* Toast Notification */
+        .toast {
+            position: fixed;
+            bottom: 2rem;
+            right: 2rem;
+            background-color: var(--success);
+            color: white;
+            padding: 1rem 1.5rem;
+            border-radius: 8px;
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
+            transform: translateY(150%);
+            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+            z-index: 1000;
+            font-weight: 600;
+        }
+        .toast.show {
+            transform: translateY(0);
+        }
+        /* Loading State */
+        .loading-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(15, 23, 42, 0.7);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            backdrop-filter: blur(2px);
+            z-index: 10;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.3s;
+        }
+        .loading-overlay.active {
+            opacity: 1;
+            pointer-events: all;
+        }
+        .spinner {
+            width: 40px;
+            height: 40px;
+            border: 4px solid var(--border);
+            border-top-color: var(--accent);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        /* Responsive adjustments */
+        @media (max-width: 600px) {
+            header {
+                flex-direction: column;
+                gap: 1rem;
+                text-align: center;
+            }
+            .controls {
+                flex-direction: column;
+                align-items: stretch;
+            }
+            .btn {
+                justify-content: center;
+            }
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <div class="brand">
+            <h1>RGB Spectrum Generator</h1>
+            <span class="subtitle">100 Unique 256x256 Images</span>
+        </div>
+        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
+            Built with anycoder
+        </a>
+    </header>
+    <main>
+        <section class="controls">
+            <div class="stats" id="status-text">Ready to generate spectrum.</div>
+            <div style="display: flex; gap: 10px;">
+                <button class="btn btn-secondary" onclick="clearGallery()">Clear</button>
+                <button class="btn" onclick="generateSpectrum()">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path><line x1="9" y1="9" x2="9" y2="9"></line><line x1="15" y1="9" x2="15" y2="9"></line><line x1="9" y1="15" x2="9" y2="15"></line><line x1="15" y1="15" x2="15" y2="15"></line></svg>
+                    Generate Images
+                </button>
+                <button class="btn" id="download-all-btn" onclick="downloadAll()" style="display: none;">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
+                    Download All
+                </button>
+            </div>
+        </section>
+        <section class="gallery-grid" id="gallery">
+            <!-- Items will be injected here via JavaScript -->
+        </section>
+        <div class="loading-overlay" id="loader">
+            <div class="spinner"></div>
+        </div>
+    </main>
+    <footer>
+        <p>Generated entirely in-browser using HTML5 Canvas.</p>
+    </footer>
+    <div class="toast" id="toast">Images Generated Successfully!</div>
+    <script>
+        // Configuration
+        const TOTAL_IMAGES = 100;
+        const IMAGE_SIZE = 256;
+        const gallery = document.getElementById('gallery');
+        const statusText = document.getElementById('status-text');
+        const downloadAllBtn = document.getElementById('download-all-btn');
+        const loader = document.getElementById('loader');
+        const toast = document.getElementById('toast');
+        // State to store generated blob URLs for downloading later
+        let generatedItems = [];
+        /**
+         * Helper: Convert HSL to RGB
+         * h, s, l are in [0, 1]
+         * returns [r, g, b] in [0, 255]
+         */
+        function hslToRgb(h, s, l) {
+            let r, g, b;
+            if (s === 0) {
+                r = g = b = l; // achromatic
+            } else {
+                const hue2rgb = (p, q, t) => {
+                    if (t < 0) t += 1;
+                    if (t > 1) t -= 1;
+                    if (t < 1 / 6) return p + (q - p) * 6 * t;
+                    if (t < 1 / 2) return q;
+                    if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+                    return p;
+                };
+                const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+                const p = 2 * l - q;
+                r = hue2rgb(p, q, h + 1 / 3);
+                g = hue2rgb(p, q, h);
+                b = hue2rgb(p, q, h - 1 / 3);
+            }
+            return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
+        }
+        /**
+         * Helper: Convert RGB to Hex (for display purposes)
+         */
+        function rgbToHex(r, g, b) {
+            return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();
+        }
+        /**
+         * Generates a 256x256 canvas for a specific color and returns the Data URL
+         */
+        function createColorImage(r, g, b) {
+            const canvas = document.createElement('canvas');
+            canvas.width = IMAGE_SIZE;
+            canvas.height = IMAGE_SIZE;
+            const ctx = canvas.getContext('2d');
+            // Fill background
+            ctx.fillStyle = `rgb(${r}, ${g}, ${b})`;
+            ctx.fillRect(0, 0, IMAGE_SIZE, IMAGE_SIZE);
+            // Optional: Add a subtle text overlay in the corner indicating it's 256x256
+            // (Commented out to keep image pure color as requested, but useful for verification)
+            /*
+            ctx.fillStyle = 'rgba(0,0,0,0.1)';
+            ctx.font = '20px Arial';
+            ctx.fillText('256x256', 10, 30);
+            */
+            return canvas.toDataURL('image/png');
+        }
+        /**
+         * Main function to generate the spectrum
+         */
+        function generateSpectrum() {
+            // UI Updates
+            loader.classList.add('active');
+            statusText.textContent = "Generating 100 images...";
+            downloadAllBtn.style.display = 'none';
+            generatedItems = []; // Reset state
+            // Use setTimeout to allow UI to update (show loader) before heavy processing
+            setTimeout(() => {
+                const fragment = document.createDocumentFragment();
+                for (let i = 0; i < TOTAL_IMAGES; i++) {
+                    // Calculate Hue (0 to 360 degrees)
+                    // We step through the spectrum evenly
+                    const hue = i / TOTAL_IMAGES;
+                    const saturation = 1; // 100% saturation for vivid colors
+                    const lightness = 0.5; // 50% lightness
+                    const [r, g, b] = hslToRgb(hue, saturation, lightness);
+                    const rgbString = `rgb(${r},${g},${b})`;
+                    const hexString = rgbToHex(r, g, b);
+                    const dataUrl = createColorImage(r, g, b);
+                    // Store for bulk download
+                    generatedItems.push({
+                        name: `${rgbString}.png`,
+                        url: dataUrl
+                    });
+                    // Create Card Elements
+                    const card = document.createElement('div');
+                    card.className = 'color-card';
+                    card.innerHTML = `
+                        <div class="preview-container">
+                            <img src="${dataUrl}" class="preview-img" alt="Color patch ${rgbString}">
+                        </div>
+                        <div class="card-info">
+                            <div class="rgb-label" title="${rgbString}">${rgbString}</div>
+                            <div class="hex-label">${hexString}</div>
+                            <button class="download-btn" onclick="triggerDownload('${rgbString}.png', '${dataUrl}')">
+                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
+                                Download
+                            </button>
+                        </div>
+                    `;
+                    fragment.appendChild(card);
+                }
+                gallery.innerHTML = '';
+                gallery.appendChild(fragment);
+                // Final UI Updates
+                loader.classList.remove('active');
+                statusText.textContent = `Successfully generated ${TOTAL_IMAGES} images.`;
+                downloadAllBtn.style.display = 'inline-flex';
+                showToast();
+            }, 100); // Small delay to let the loader render
+        }
+        /**
+         * Triggers a single file download
+         */
+        function triggerDownload(filename, url) {
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = filename;
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
+        /**
+         * Triggers download for all generated images
+         * Note: Browsers may block multiple automatic downloads.
+         */
+        async function downloadAll() {
+            if (generatedItems.length === 0) return;
+            statusText.textContent = "Bulk download initiated...";
+            // Iterate with a small delay to prevent browser choking
+            for (let i = 0; i < generatedItems.length; i++) {
+                const item = generatedItems[i];
+                triggerDownload(item.name, item.url);
+                // Wait 200ms between downloads
+                await new Promise(r => setTimeout(r, 200));
+            }
+            statusText.textContent = "Bulk download finished.";
+        }
+        function clearGallery() {
+            gallery.innerHTML = '';
+            generatedItems = [];
+            downloadAllBtn.style.display = 'none';
+            statusText.textContent = "Gallery cleared.";
+        }
+        function showToast() {
+            toast.classList.add('show');
+            setTimeout(() => {
+                toast.classList.remove('show');
+            }, 3000);
+        }
+        // Generate automatically on load for better UX
+        window.addEventListener('DOMContentLoaded', () => {
+            generateSpectrum();
+        });
+    </script>
+</body>
+</html>