Spaces:

HI7RAI
/

anycoder-5e172bc8

Running

App Files Files Community

HI7RAI commited on 16 days ago

Commit

433899c

verified ·

1 Parent(s): b1741dd

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +857 -19

index.html CHANGED Viewed

@@ -1,19 +1,857 @@
-<!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>Nexus AI Studio | Stable Diffusion v2.4</title>
+    <!-- Google Fonts: Inter for UI, Monospace for Code -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
+    <!-- FontAwesome for Icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        :root {
+            /* Color Palette - Dark Theme with Neon Accents */
+            --bg-dark: #0a0a0f;
+            --bg-panel: #15151d;
+            --bg-input: #0f0f16;
+            --primary: #6366f1; /* Indigo */
+            --primary-hover: #4f46e5;
+            --accent: #ec4899; /* Pink */
+            --accent-hover: #db2777;
+            --text-main: #f3f4f6;
+            --text-muted: #9ca3af;
+            --border: #2d2d3a;
+            --success: #10b981;
+            --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.3);
+            --font-ui: 'Inter', sans-serif;
+            --font-mono: 'JetBrains Mono', monospace;
+        }
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+        body {
+            font-family: var(--font-ui);
+            background-color: var(--bg-dark);
+            color: var(--text-main);
+            height: 100vh;
+            display: flex;
+            overflow: hidden;
+            background-image:
+                radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 20%),
+                radial-gradient(circle at 90% 80%, rgba(236, 72, 153, 0.15) 0%, transparent 20%);
+        }
+        /* --- Sidebar Navigation --- */
+        .sidebar {
+            width: 260px;
+            background-color: var(--bg-panel);
+            border-right: 1px solid var(--border);
+            display: flex;
+            flex-direction: column;
+            padding: 20px;
+            transition: transform 0.3s ease;
+            z-index: 100;
+        }
+        .brand {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            margin-bottom: 40px;
+        }
+        .logo-icon {
+            width: 36px;
+            height: 36px;
+            background: linear-gradient(135deg, var(--primary), var(--accent));
+            border-radius: 8px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            box-shadow: var(--shadow-glow);
+        }
+        .brand-text {
+            font-weight: 800;
+            font-size: 1.2rem;
+            letter-spacing: -0.5px;
+        }
+        .nav-links {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+        .nav-item {
+            padding: 12px 16px;
+            border-radius: 8px;
+            color: var(--text-muted);
+            text-decoration: none;
+            font-weight: 500;
+            transition: all 0.2s;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            cursor: pointer;
+        }
+        .nav-item:hover, .nav-item.active {
+            background-color: rgba(99, 102, 241, 0.1);
+            color: var(--primary);
+        }
+        .nav-item i {
+            width: 20px;
+            text-align: center;
+        }
+        .sidebar-footer {
+            margin-top: auto;
+            padding-top: 20px;
+            border-top: 1px solid var(--border);
+        }
+        .status-badge {
+            font-size: 0.75rem;
+            background: rgba(16, 185, 129, 0.15);
+            color: var(--success);
+            padding: 4px 8px;
+            border-radius: 4px;
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            font-family: var(--font-mono);
+        }
+        /* --- Main Content Area --- */
+        .main-content {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            overflow-y: auto;
+            position: relative;
+        }
+        /* Header */
+        .top-bar {
+            padding: 25px 40px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .page-title h1 {
+            font-size: 2rem;
+            font-weight: 700;
+            margin-bottom: 4px;
+        }
+        .page-title p {
+            color: var(--text-muted);
+            font-size: 0.9rem;
+        }
+        .user-actions {
+            display: flex;
+            gap: 15px;
+            align-items: center;
+        }
+        .theme-toggle {
+            background: none;
+            border: none;
+            color: var(--text-muted);
+            font-size: 1.2rem;
+            cursor: pointer;
+            transition: color 0.2s;
+        }
+        .theme-toggle:hover {
+            color: var(--text-main);
+        }
+        .profile-circle {
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            background-color: var(--border);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 0.9rem;
+        }
+        /* Generator Workspace */
+        .workspace {
+            padding: 0 40px 40px 40px;
+            display: grid;
+            grid-template-columns: 1.2fr 0.8fr;
+            gap: 30px;
+            height: 100%;
+        }
+        /* Left Panel: Input */
+        .input-panel {
+            display: flex;
+            flex-direction: column;
+            gap: 25px;
+        }
+        .card {
+            background-color: var(--bg-panel);
+            border: 1px solid var(--border);
+            border-radius: 16px;
+            padding: 25px;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
+        }
+        .control-group {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+        label {
+            font-size: 0.85rem;
+            font-weight: 600;
+            color: var(--text-muted);
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+        textarea {
+            background-color: var(--bg-input);
+            border: 1px solid var(--border);
+            color: var(--text-main);
+            padding: 15px;
+            border-radius: 10px;
+            font-family: var(--font-ui);
+            font-size: 1rem;
+            resize: vertical;
+            min-height: 120px;
+            transition: border-color 0.3s, box-shadow 0.3s;
+        }
+        textarea:focus {
+            outline: none;
+            border-color: var(--primary);
+            box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
+        }
+        .settings-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 20px;
+        }
+        .slider-container {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+        .slider-value {
+            font-family: var(--font-mono);
+            font-size: 0.9rem;
+            color: var(--accent);
+            text-align: right;
+        }
+        input[type="range"] {
+            width: 100%;
+            height: 6px;
+            background: var(--border);
+            border-radius: 5px;
+            appearance: none;
+            cursor: pointer;
+        }
+        input[type="range"]::-webkit-slider-thumb {
+            appearance: none;
+            width: 18px;
+            height: 18px;
+            border-radius: 50%;
+            background: var(--accent);
+            cursor: pointer;
+            transition: transform 0.1s;
+        }
+        input[type="range"]::-webkit-slider-thumb:hover {
+            transform: scale(1.2);
+        }
+        .btn-generate {
+            margin-top: auto;
+            background: linear-gradient(90deg, var(--primary), var(--accent));
+            color: white;
+            border: none;
+            padding: 18px;
+            font-size: 1.1rem;
+            font-weight: 700;
+            border-radius: 12px;
+            cursor: pointer;
+            transition: transform 0.2s, box-shadow 0.3s;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
+            position: relative;
+            overflow: hidden;
+        }
+        .btn-generate:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 25px -5px rgba(236, 72, 153, 0.4);
+        }
+        .btn-generate:active {
+            transform: translateY(0);
+        }
+        .btn-generate i {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { opacity: 1; }
+            50% { opacity: 0.5; }
+            100% { opacity: 1; }
+        }
+        /* Right Panel: Output & History */
+        .output-panel {
+            display: flex;
+            flex-direction: column;
+            gap: 25px;
+        }
+        .image-container {
+            height: 450px;
+            background-color: var(--bg-dark);
+            border-radius: 16px;
+            border: 1px dashed var(--border);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+            position: relative;
+            transition: all 0.3s;
+        }
+        .image-container.active {
+            border: 1px solid var(--border);
+        }
+        .placeholder-content {
+            text-align: center;
+            color: var(--text-muted);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 15px;
+        }
+        .placeholder-content i {
+            font-size: 3rem;
+            margin-bottom: 10px;
+            opacity: 0.5;
+        }
+        #generatedImage {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+            display: none;
+            animation: fadeIn 0.5s ease;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: scale(0.95); }
+            to { opacity: 1; transform: scale(1); }
+        }
+        .image-actions {
+            display: flex;
+            gap: 10px;
+        }
+        .icon-btn {
+            flex: 1;
+            background-color: var(--bg-panel);
+            border: 1px solid var(--border);
+            color: var(--text-main);
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: all 0.2s;
+            font-size: 0.9rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+        }
+        .icon-btn:hover {
+            background-color: var(--border);
+        }
+        .history-list {
+            flex: 1;
+            background-color: var(--bg-panel);
+            border-radius: 16px;
+            padding: 20px;
+            overflow-y: auto;
+            max-height: 500px;
+        }
+        .history-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 10px;
+            border-bottom: 1px solid var(--border);
+        }
+        .history-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+            gap: 15px;
+        }
+        .history-item {
+            aspect-ratio: 1;
+            border-radius: 10px;
+            overflow: hidden;
+            cursor: pointer;
+            transition: transform 0.2s;
+            position: relative;
+            background-color: var(--bg-dark);
+        }
+        .history-item:hover {
+            transform: scale(1.05);
+            z-index: 10;
+            box-shadow: 0 5px 15px rgba(0,0,0,0.5);
+        }
+        .history-item img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+        .history-overlay {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
+            padding: 10px;
+            font-size: 0.75rem;
+            color: white;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        /* Responsive Design */
+        @media (max-width: 900px) {
+            .workspace {
+                grid-template-columns: 1fr;
+                overflow-y: auto;
+            }
+            .input-panel {
+                order: 2;
+            }
+            .output-panel {
+                order: 1;
+            }
+            .sidebar {
+                width: 70px;
+                padding: 20px 10px;
+            }
+            .brand-text, .nav-item span {
+                display: none;
+            }
+            .nav-item {
+                justify-content: center;
+                padding: 15px;
+            }
+            .brand {
+                justify-content: center;
+            }
+            .sidebar-footer {
+                display: none; /* Hide footer on mobile to save space */
+            }
+        }
+        @media (max-width: 600px) {
+            .top-bar {
+                padding: 20px;
+                flex-direction: column;
+                gap: 20px;
+                text-align: center;
+            }
+            .user-actions {
+                width: 100%;
+                justify-content: center;
+            }
+            .settings-grid {
+                grid-template-columns: 1fr;
+            }
+        }
+        /* Loader Animation */
+        .loader {
+            border: 4px solid rgba(255,255,255,0.1);
+            border-left-color: var(--accent);
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            animation: spin 1s linear infinite;
+            display: none;
+            margin: 0 auto;
+        }
+        @keyframes spin { 100% { transform: rotate(360deg); } }
+    </style>
+</head>
+<body>
+    <!-- Sidebar -->
+    <nav class="sidebar">
+        <div class="brand">
+            <div class="logo-icon">
+                <i class="fa-solid fa-wand-magic-sparkles"></i>
+            </div>
+            <span class="brand-text">Nexus AI</span>
+        </div>
+        <div class="nav-links">
+            <a class="nav-item active" onclick="switchTab(this)">
+                <i class="fa-solid fa-image"></i>
+                <span>Generator</span>
+            </a>
+            <a class="nav-item" onclick="switchTab(this)">
+                <i class="fa-solid fa-clock-rotate-left"></i>
+                <span>History</span>
+            </a>
+            <a class="nav-item" onclick="switchTab(this)">
+                <i class="fa-solid fa-gear"></i>
+                <span>Settings</span>
+            </a>
+            <a class="nav-item" onclick="switchTab(this)">
+                <i class="fa-solid fa-code"></i>
+                <span>API</span>
+            </a>
+        </div>
+        <div class="sidebar-footer">
+            <div class="status-badge">
+                <i class="fa-solid fa-circle" style="font-size: 6px;"></i>
+                Stable Diffusion v2.4
+            </div>
+        </div>
+    </nav>
+    <!-- Main Content -->
+    <main class="main-content">
+        <!-- Top Bar -->
+        <header class="top-bar">
+            <div class="page-title">
+                <h1>Create Masterpiece</h1>
+                <p>Stable Diffusion XL • 1024x1024 Resolution</p>
+            </div>
+            <div class="user-actions">
+                <button class="theme-toggle" title="Toggle Theme">
+                    <i class="fa-solid fa-moon"></i>
+                </button>
+                <button class="theme-toggle" title="Help">
+                    <i class="fa-solid fa-question-circle"></i>
+                </button>
+                <div class="profile-circle">
+                    <i class="fa-solid fa-user"></i>
+                </div>
+            </div>
+        </header>
+        <!-- Workspace -->
+        <div class="workspace">
+            <!-- Left Side: Inputs -->
+            <div class="input-panel">
+                <div class="card">
+                    <div class="control-group">
+                        <label for="prompt">Prompt (Describe your image)</label>
+                        <textarea id="prompt" placeholder="e.g., A futuristic cyberpunk city with neon lights in the rain, cinematic lighting, 8k resolution...">A futuristic cyberpunk city with neon lights in the rain, cinematic lighting, 8k resolution, highly detailed</textarea>
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="control-group">
+                        <label for="negative">Negative Prompt</label>
+                        <textarea id="negative" placeholder="e.g., blurry, bad anatomy, cartoon, 3D render...">blurry, bad anatomy, cartoon, 3D render, low quality, text, watermark</textarea>
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="settings-grid">
+                        <div class="control-group">
+                            <label>Steps: <span id="stepValue" class="slider-value">30</span></label>
+                            <input type="range" id="steps" min="10" max="150" value="30" oninput="updateSlider('stepValue', this.value)">
+                        </div>
+                        <div class="control-group">
+                            <label>Guidance Scale: <span id="scaleValue" class="slider-value">7.5</span></label>
+                            <input type="range" id="scale" min="1" max="20" step="0.5" value="7.5" oninput="updateSlider('scaleValue', this.value)">
+                        </div>
+                        <div class="control-group">
+                            <label>Width</label>
+                            <select id="width" style="background: var(--bg-input); color: var(--text-main); padding: 10px; border-radius: 8px; border: 1px solid var(--border);">
+                                <option value="1024">1024 px</option>
+                                <option value="768">768 px</option>
+                                <option value="512">512 px</option>
+                            </select>
+                        </div>
+                        <div class="control-group">
+                            <label>Height</label>
+                            <select id="height" style="background: var(--bg-input); color: var(--text-main); padding: 10px; border-radius: 8px; border: 1px solid var(--border);">
+                                <option value="1024">1024 px</option>
+                                <option value="768">768 px</option>
+                                <option value="512">512 px</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+                <button class="btn-generate" onclick="generateImage()">
+                    <i class="fa-solid fa-wand-magic-sparkles"></i>
+                    Generate Image
+                </button>
+                <div id="loader" class="loader"></div>
+                <p id="statusText" style="text-align: center; color: var(--text-muted); font-size: 0.8rem; margin-top: 10px; height: 20px;">Ready to create</p>
+            </div>
+            <!-- Right Side: Output -->
+            <div class="output-panel">
+                <div class="card" style="display: flex; flex-direction: column; height: 100%;">
+                    <div class="image-container" id="imageContainer">
+                        <div class="placeholder-content" id="placeholder">
+                            <i class="fa-solid fa-image"></i>
+                            <p>Image Preview</p>
+                            <p style="font-size: 0.8rem; opacity: 0.7;">Generated results will appear here</p>
+                        </div>
+                        <div id="loaderSmall" style="display:none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
+                            <div class="loader" style="width: 30px; height: 30px; border-width: 3px;"></div>
+                        </div>
+                        <img id="generatedImage" src="" alt="Generated Result">
+                    </div>
+                    <div class="image-actions">
+                        <button class="icon-btn" onclick="downloadImage()">
+                            <i class="fa-solid fa-download"></i> Download
+                        </button>
+                        <button class="icon-btn" onclick="copyPrompt()">
+                            <i class="fa-solid fa-copy"></i> Copy Prompt
+                        </button>
+                        <button class="icon-btn" onclick="shareImage()">
+                            <i class="fa-solid fa-share-nodes"></i> Share
+                        </button>
+                    </div>
+                </div>
+                <div class="history-list">
+                    <div class="history-header">
+                        <h3>Recent Generations</h3>
+                        <button style="background:none; border:none; color: var(--text-muted); cursor: pointer; font-size: 0.8rem;">
+                            Clear All <i class="fa-solid fa-trash"></i>
+                        </button>
+                    </div>
+                    <div class="history-grid" id="historyGrid">
+                        <!-- History items will be injected here via JS -->
+                        <div class="history-item">
+                            <img src="https://picsum.photos/id/237/300/300" alt="Demo History">
+                            <div class="history-overlay">Cyberpunk Street Dog</div>
+                        </div>
+                        <div class="history-item">
+                            <img src="https://picsum.photos/id/182/300/300" alt="Demo History">
+                            <div class="history-overlay">Fantasy Landscape</div>
+                        </div>
+                        <div class="history-item">
+                            <img src="https://picsum.photos/id/533/300/300" alt="Demo History">
+                            <div class="history-overlay">Neon Portrait</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    <script>
+        // --- Logic for the Application ---
+        // 1. Tab Switching Logic
+        function switchTab(activeItem) {
+            const navItems = document.querySelectorAll('.nav-item');
+            navItems.forEach(item => item.classList.remove('active'));
+            activeItem.classList.add('active');
+            // Simple visual feedback
+            const statusText = document.getElementById('statusText');
+            const text = activeItem.innerText.trim();
+            statusText.textContent = `Switched to ${text} mode`;
+        }
+        // 2. Slider Updates
+        function updateSlider(elementId, value) {
+            document.getElementById(elementId).innerText = value;
+        }
+        // 3. Image Generation Logic (Mocked)
+        let isGenerating = false;
+        function generateImage() {
+            if (isGenerating) return;
+            const prompt = document.getElementById('prompt').value;
+            if (prompt.length < 5) {
+                alert("Please enter a more detailed prompt.");
+                return;
+            }
+            isGenerating = true;
+            const loader = document.getElementById('loader');
+            const statusText = document.getElementById('statusText');
+            const placeholder = document.getElementById('placeholder');
+            const generatedImg = document.getElementById('generatedImage');
+            const loaderSmall = document.getElementById('loaderSmall');
+            // UI Updates
+            loader.style.display = 'block';
+            statusText.textContent = `Processing: "${prompt.substring(0, 20)}..."`;
+            statusText.style.color = 'var(--primary)';
+            placeholder.style.display = 'none';
+            generatedImg.style.display = 'none';
+            loaderSmall.style.display = 'block';
+            // Simulate API Delay (2.5 seconds)
+            setTimeout(() => {
+                // Generate a random image URL to simulate different results
+                const randomId = Math.floor(Math.random() * 800) + 100;
+                const mockImageSrc = `https://picsum.photos/id/${randomId}/1024/1024?random=${Date.now()}`;
+                // Update UI
+                generatedImg.src = mockImageSrc;
+                generatedImg.onload = () => {
+                    loader.style.display = 'none';
+                    loaderSmall.style.display = 'none';
+                    generatedImg.style.display = 'block';
+                    statusText.textContent = "Generation Complete!";
+                    statusText.style.color = 'var(--success)';
+                    addToHistory(prompt, mockImageSrc);
+                };
+                isGenerating = false;
+            }, 2500);
+        }
+        // 4. History Management
+        function addToHistory(prompt, imgSrc) {
+            const historyGrid = document.getElementById('historyGrid');
+            const newItem = document.createElement('div');
+            newItem.className = 'history-item';
+            // Truncate prompt for display
+            const displayPrompt = prompt.length > 15 ? prompt.substring(0, 15) + "..." : prompt;
+            newItem.innerHTML = `
+                <img src="${imgSrc}" alt="Generated Image">
+                <div class="history-overlay" title="${prompt}">${displayPrompt}</div>
+            `;
+            // Add click event to view full image
+            newItem.addEventListener('click', () => {
+                const generatedImg = document.getElementById('generatedImage');
+                const placeholder = document.getElementById('placeholder');
+                generatedImg.src = imgSrc;
+                generatedImg.style.display = 'block';
+                placeholder.style.display = 'none';
+                // Scroll to top
+                document.querySelector('.workspace').scrollTop = 0;
+            });
+            // Insert at the beginning
+            historyGrid.insertBefore(newItem, historyGrid.firstChild);
+        }
+        // 5. Utilities
+        function downloadImage() {
+            const img = document.getElementById('generatedImage');
+            if (img.style.display === 'none') {
+                alert("No image to download. Generate one first!");
+                return;
+            }
+            const link = document.createElement('a');
+            link.href = img.src;
+            link.download = `nexus-art-${Date.now()}.jpg`;
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
+        function copyPrompt() {
+            const promptText = document.getElementById('prompt').value;
+            navigator.clipboard.writeText(promptText).then(() => {
+                const btn = document.querySelector('.icon-btn i.fa-copy');
+                const originalTitle = btn.parentElement.title;
+                btn.parentElement.title = "Copied!";
+                alert("Prompt copied to clipboard!");
+                btn.parentElement.title = originalTitle;
+            }).catch(err => {
+                console.error('Failed to copy: ', err);
+            });
+        }
+        function shareImage() {
+            const img = document.getElementById('generatedImage');
+            if (img.style.display === 'none') {
+                alert("No image to share.");
+                return;
+            }
+            alert("Share feature: In a real app, this would open a modal or generate a link.");
+        }
+        // Initialize
+        document.addEventListener('DOMContentLoaded', () => {
+            console.log("Nexus AI Studio v2.4 Loaded");
+        });
+    </script>
+</body>
+</html>