Spaces:
Running
Running
| <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> |