Spaces:

mrrobot420
/

anycoder-4c3370b5

Running

App Files Files Community

mrrobot420 commited on Mar 11

Commit

6a59d88

verified ·

1 Parent(s): aede8e5

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +245 -19

index.html CHANGED Viewed

@@ -1,19 +1,245 @@
-<!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>Imaginix Fusion - NSFW Image Combiner</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <style>
+        :root {
+            --primary: #ff4757;
+            --secondary: #2ed573;
+            --dark: #2f3542;
+            --light: #f1f2f6;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Segoe UI', sans-serif;
+        }
+        body {
+            background: linear-gradient(135deg, #2f3542 0%, #1e272e 100%);
+            min-height: 100vh;
+            color: var(--light);
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 2rem;
+        }
+        .header {
+            text-align: center;
+            margin-bottom: 3rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .logo {
+            font-size: 2.5rem;
+            font-weight: 700;
+            background: linear-gradient(45deg, var(--primary), var(--secondary));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .main-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 2rem;
+            margin-bottom: 2rem;
+        }
+        .upload-area {
+            border: 3px dashed var(--primary);
+            border-radius: 15px;
+            padding: 2rem;
+            text-align: center;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            background: rgba(255, 71, 87, 0.1);
+        }
+        .upload-area:hover {
+            transform: translateY(-5px);
+            border-color: var(--secondary);
+        }
+        .preview-image {
+            width: 100%;
+            max-height: 400px;
+            object-fit: cover;
+            border-radius: 10px;
+            display: none;
+        }
+        #prompt-input {
+            width: 100%;
+            padding: 1rem;
+            margin: 2rem 0;
+            background: rgba(255,255,255,0.1);
+            border: 2px solid var(--secondary);
+            border-radius: 8px;
+            color: white;
+            font-size: 1.1rem;
+        }
+        #generate-btn {
+            background: linear-gradient(45deg, var(--primary), var(--secondary));
+            border: none;
+            padding: 1rem 3rem;
+            color: white;
+            font-size: 1.2rem;
+            border-radius: 50px;
+            cursor: pointer;
+            transition: transform 0.3s ease;
+            display: block;
+            margin: 0 auto;
+        }
+        #generate-btn:hover {
+            transform: scale(1.05);
+        }
+        .result-container {
+            margin-top: 3rem;
+            text-align: center;
+        }
+        #combined-result {
+            width: 100%;
+            max-width: 800px;
+            border-radius: 15px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+            display: none;
+        }
+        .loading {
+            display: none;
+            margin: 2rem 0;
+            font-size: 1.2rem;
+        }
+        .warning {
+            color: var(--primary);
+            margin: 1rem 0;
+            font-weight: 500;
+        }
+        @media (max-width: 768px) {
+            .main-grid {
+                grid-template-columns: 1fr;
+            }
+            .container {
+                padding: 1rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <div class="logo">ImaginixFusion</div>
+            <a href="https://huggingface.co/spaces/akhaliq/anycoder" style="color: var(--secondary); text-decoration: none;">Built with anycoder</a>
+        </div>
+        <div class="warning">⚠️ Warning: This tool is intended for creative NSFW content generation. Use responsibly.</div>
+        <input type="text" id="prompt-input" placeholder="Enter your fusion prompt (e.g. 'cyberpunk neon aesthetic')...">
+        <div class="main-grid">
+            <div class="upload-area" onclick="document.getElementById('file1').click()">
+                <i class="fas fa-cloud-upload-alt fa-3x"></i>
+                <p>Upload First Image</p>
+                <input type="file" id="file1" hidden accept="image/*">
+                <img class="preview-image" id="preview1">
+            </div>
+            <div class="upload-area" onclick="document.getElementById('file2').click()">
+                <i class="fas fa-cloud-upload-alt fa-3x"></i>
+                <p>Upload Second Image</p>
+                <input type="file" id="file2" hidden accept="image/*">
+                <img class="preview-image" id="preview2">
+            </div>
+        </div>
+        <button id="generate-btn" onclick="processImages()">Generate Fusion</button>
+        <div class="loading" id="loading">🌀 Synthesizing creative fusion...</div>
+        <div class="result-container">
+            <img id="combined-result">
+        </div>
+    </div>
+    <script>
+        function handleImageUpload(input, previewId) {
+            const file = input.files[0];
+            if (file) {
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    const preview = document.getElementById(previewId);
+                    preview.src = e.target.result;
+                    preview.style.display = 'block';
+                    input.parentNode.querySelector('i, p').style.display = 'none';
+                }
+                reader.readAsDataURL(file);
+            }
+        }
+        document.getElementById('file1').addEventListener('change', function() {
+            handleImageUpload(this, 'preview1');
+        });
+        document.getElementById('file2').addEventListener('change', function() {
+            handleImageUpload(this, 'preview2');
+        });
+        function processImages() {
+            const loading = document.getElementById('loading');
+            const result = document.getElementById('combined-result');
+            const prompt = document.getElementById('prompt-input').value;
+            if (!prompt) {
+                alert('Please enter a fusion prompt!');
+                return;
+            }
+            loading.style.display = 'block';
+            // Simulated processing delay
+            setTimeout(() => {
+                // In a real implementation, this would send the images and prompt to an API
+                // For demonstration, we'll create a canvas combination
+                const canvas = document.createElement('canvas');
+                const ctx = canvas.getContext('2d');
+                // Combine preview images
+                const img1 = document.getElementById('preview1');
+                const img2 = document.getElementById('preview2');
+                if (!img1.src || !img2.src) {
+                    alert('Please upload both images!');
+                    loading.style.display = 'none';
+                    return;
+                }
+                canvas.width = Math.max(img1.width, img2.width);
+                canvas.height = img1.height + img2.height;
+                ctx.drawImage(img1, 0, 0);
+                ctx.drawImage(img2, 0, img1.height);
+                result.src = canvas.toDataURL();
+                result.style.display = 'block';
+                loading.style.display = 'none';
+            }, 2000);
+        }
+    </script>
+</body>
+</html>