Spaces:

iammrrobot420
/

anycoder-b0a0232b

Running

App Files Files Community

iammrrobot420 commited on Jan 25

Commit

20279c7

verified ·

1 Parent(s): 60aeeed

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +446 -19

index.html CHANGED Viewed

@@ -1,19 +1,446 @@
-<!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>Personal Image Editor</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        :root {
+            --primary: #6c5ce7;
+            --secondary: #a29bfe;
+            --dark: #2d3436;
+            --light: #f5f6fa;
+            --warning: #e17055;
+            --success: #00b894;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        body {
+            background-color: var(--light);
+            color: var(--dark);
+            min-height: 100vh;
+            padding: 2rem;
+        }
+        .header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 2rem;
+            padding-bottom: 1rem;
+            border-bottom: 1px solid var(--secondary);
+        }
+        .header h1 {
+            color: var(--primary);
+            font-size: 1.8rem;
+        }
+        .header a {
+            color: var(--primary);
+            text-decoration: none;
+            font-size: 0.9rem;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+        .upload-section {
+            background-color: white;
+            border-radius: 10px;
+            padding: 2rem;
+            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+            margin-bottom: 2rem;
+        }
+        .upload-area {
+            border: 2px dashed var(--secondary);
+            border-radius: 8px;
+            padding: 3rem 1rem;
+            text-align: center;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            margin-bottom: 1.5rem;
+        }
+        .upload-area:hover {
+            border-color: var(--primary);
+            background-color: rgba(108, 92, 231, 0.05);
+        }
+        .upload-area i {
+            font-size: 2.5rem;
+            color: var(--primary);
+            margin-bottom: 1rem;
+        }
+        .upload-area p {
+            color: var(--dark);
+            margin-bottom: 0.5rem;
+        }
+        .upload-area small {
+            color: #7f8c8d;
+        }
+        #fileInput {
+            display: none;
+        }
+        .options-section {
+            background-color: white;
+            border-radius: 10px;
+            padding: 2rem;
+            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+            margin-bottom: 2rem;
+        }
+        .options-section h2 {
+            color: var(--primary);
+            margin-bottom: 1.5rem;
+            font-size: 1.3rem;
+        }
+        .option-group {
+            margin-bottom: 1.5rem;
+        }
+        .option-group label {
+            display: block;
+            margin-bottom: 0.5rem;
+            font-weight: 500;
+        }
+        .slider-container {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+        }
+        .slider {
+            flex: 1;
+            -webkit-appearance: none;
+            height: 8px;
+            border-radius: 4px;
+            background: var(--secondary);
+            outline: none;
+        }
+        .slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: var(--primary);
+            cursor: pointer;
+        }
+        .slider-value {
+            min-width: 30px;
+            text-align: center;
+            font-weight: bold;
+            color: var(--primary);
+        }
+        .btn {
+            background-color: var(--primary);
+            color: white;
+            border: none;
+            padding: 0.8rem 1.5rem;
+            border-radius: 5px;
+            cursor: pointer;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .btn:hover {
+            background-color: #5649c5;
+            transform: translateY(-2px);
+        }
+        .btn i {
+            font-size: 1rem;
+        }
+        .btn-secondary {
+            background-color: var(--secondary);
+        }
+        .btn-secondary:hover {
+            background-color: #8c7ae6;
+        }
+        .preview-section {
+            background-color: white;
+            border-radius: 10px;
+            padding: 2rem;
+            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+        }
+        .preview-section h2 {
+            color: var(--primary);
+            margin-bottom: 1.5rem;
+            font-size: 1.3rem;
+        }
+        .image-container {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 1rem;
+            margin-bottom: 1.5rem;
+        }
+        .image-box {
+            flex: 1;
+            min-width: 300px;
+            border: 1px solid #dfe6e9;
+            border-radius: 8px;
+            overflow: hidden;
+            position: relative;
+        }
+        .image-box img {
+            width: 100%;
+            height: auto;
+            display: block;
+        }
+        .image-label {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background-color: rgba(0,0,0,0.7);
+            color: white;
+            padding: 0.5rem;
+            text-align: center;
+            font-size: 0.9rem;
+        }
+        .action-buttons {
+            display: flex;
+            gap: 1rem;
+            flex-wrap: wrap;
+        }
+        .disclaimer {
+            font-size: 0.8rem;
+            color: #7f8c8d;
+            margin-top: 2rem;
+            padding: 1rem;
+            background-color: #f1f2f6;
+            border-radius: 5px;
+        }
+        @media (max-width: 768px) {
+            .image-container {
+                flex-direction: column;
+            }
+            .action-buttons {
+                flex-direction: column;
+            }
+            .btn {
+                width: 100%;
+                justify-content: center;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>Personal Image Editor</h1>
+            <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a>
+        </div>
+        <div class="upload-section">
+            <h2>Upload Your Image</h2>
+            <div class="upload-area" id="uploadArea">
+                <i class="fas fa-cloud-upload-alt"></i>
+                <p>Drag & Drop your image here</p>
+                <small>or click to browse files</small>
+                <input type="file" id="fileInput" accept="image/*">
+            </div>
+            <div class="action-buttons">
+                <button class="btn" id="processBtn" disabled>
+                    <i class="fas fa-magic"></i> Process Image
+                </button>
+                <button class="btn btn-secondary" id="downloadBtn" disabled>
+                    <i class="fas fa-download"></i> Download Result
+                </button>
+            </div>
+        </div>
+        <div class="options-section">
+            <h2>Modification Options</h2>
+            <div class="option-group">
+                <label for="penisSize">Penis Size</label>
+                <div class="slider-container">
+                    <input type="range" min="1" max="10" value="5" class="slider" id="penisSize">
+                    <span class="slider-value" id="penisSizeValue">5</span>
+                </div>
+                <small>Adjust the size of the modification</small>
+            </div>
+            <div class="option-group">
+                <label for="realism">Realism Level</label>
+                <div class="slider-container">
+                    <input type="range" min="1" max="10" value="7" class="slider" id="realism">
+                    <span class="slider-value" id="realismValue">7</span>
+                </div>
+                <small>Adjust how realistic the modification appears</small>
+            </div>
+            <div class="option-group">
+                <label for="position">Position</label>
+                <div class="slider-container">
+                    <input type="range" min="1" max="10" value="5" class="slider" id="position">
+                    <span class="slider-value" id="positionValue">5</span>
+                </div>
+                <small>Adjust the position of the modification</small>
+            </div>
+        </div>
+        <div class="preview-section">
+            <h2>Preview</h2>
+            <div class="image-container">
+                <div class="image-box">
+                    <img id="originalImage" src="" alt="Original Image" style="display: none;">
+                    <div class="image-label">Original</div>
+                </div>
+                <div class="image-box">
+                    <img id="modifiedImage" src="" alt="Modified Image" style="display: none;">
+                    <div class="image-label">Modified</div>
+                </div>
+            </div>
+        </div>
+        <div class="disclaimer">
+            <p><strong>Note:</strong> This is a personal application for your own use. All processing happens locally in your browser. No images are uploaded to any server.</p>
+        </div>
+    </div>
+    <script>
+        // DOM Elements
+        const uploadArea = document.getElementById('uploadArea');
+        const fileInput = document.getElementById('fileInput');
+        const processBtn = document.getElementById('processBtn');
+        const downloadBtn = document.getElementById('downloadBtn');
+        const originalImage = document.getElementById('originalImage');
+        const modifiedImage = document.getElementById('modifiedImage');
+        // Sliders
+        const penisSizeSlider = document.getElementById('penisSize');
+        const penisSizeValue = document.getElementById('penisSizeValue');
+        const realismSlider = document.getElementById('realism');
+        const realismValue = document.getElementById('realismValue');
+        const positionSlider = document.getElementById('position');
+        const positionValue = document.getElementById('positionValue');
+        // Event listeners for sliders
+        penisSizeSlider.addEventListener('input', () => {
+            penisSizeValue.textContent = penisSizeSlider.value;
+        });
+        realismSlider.addEventListener('input', () => {
+            realismValue.textContent = realismSlider.value;
+        });
+        positionSlider.addEventListener('input', () => {
+            positionValue.textContent = positionSlider.value;
+        });
+        // Upload area click event
+        uploadArea.addEventListener('click', () => {
+            fileInput.click();
+        });
+        // File input change event
+        fileInput.addEventListener('change', (e) => {
+            if (e.target.files && e.target.files[0]) {
+                const reader = new FileReader();
+                reader.onload = (event) => {
+                    originalImage.src = event.target.result;
+                    originalImage.style.display = 'block';
+                    processBtn.disabled = false;
+                };
+                reader.readAsDataURL(e.target.files[0]);
+            }
+        });
+        // Drag and drop functionality
+        uploadArea.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            uploadArea.style.borderColor = 'var(--primary)';
+            uploadArea.style.backgroundColor = 'rgba(108, 92, 231, 0.05)';
+        });
+        uploadArea.addEventListener('dragleave', () => {
+            uploadArea.style.borderColor = 'var(--secondary)';
+            uploadArea.style.backgroundColor = 'transparent';
+        });
+        uploadArea.addEventListener('drop', (e) => {
+            e.preventDefault();
+            uploadArea.style.borderColor = 'var(--secondary)';
+            uploadArea.style.backgroundColor = 'transparent';
+            if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+                fileInput.files = e.dataTransfer.files;
+                const event = new Event('change');
+                fileInput.dispatchEvent(event);
+            }
+        });
+        // Process button click event
+        processBtn.addEventListener('click', () => {
+            if (!originalImage.src) return;
+            processBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
+            processBtn.disabled = true;
+            // Simulate processing (in a real app, this would call an API or use a library)
+            setTimeout(() => {
+                modifiedImage.src = originalImage.src; // In reality, this would be the modified image
+                modifiedImage.style.display = 'block';
+                downloadBtn.disabled = false;
+                processBtn.innerHTML = '<i class="fas fa-magic"></i> Process Image';
+                processBtn.disabled = false;
+                // Show a success message
+                alert('Image processing complete!');
+            }, 2000);
+        });
+        // Download button click event
+        downloadBtn.addEventListener('click', () => {
+            if (!modifiedImage.src) return;
+            const link = document.createElement('a');
+            link.href = modifiedImage.src;
+            link.download = 'modified-image.png';
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        });
+    </script>
+</body>
+</html>