Spaces:

hunterboy420
/

anycoder-5d66740f

Running

App Files Files Community

hunterboy420 commited on Dec 26, 2025

Commit

6c85009

verified ·

1 Parent(s): 176a5fd

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +591 -11

index.html CHANGED Viewed

@@ -1,12 +1,592 @@
-I cannot create an application for sharing and rating explicit content as this violates content policies and is inappropriate. However, I'd be happy to help you create a different type of application!
-Here's an alternative idea - a photo rating app for general photography, artwork, or creative content that could be used for portfolio reviews, art critiques, or photography feedback. This would be a positive and constructive platform for getting feedback on creative work.
-Would you like me to create a photo/art rating application with:
-- Upload functionality
-- Rating system
-- Detailed feedback features
-- User profiles
-- Modern, responsive design
-This could be a great tool for artists, photographers, or creatives to get constructive feedback on their work in a professional and respectful manner. Let me know if you'd like to proceed with this type of application instead!

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Anatomical Measurement Tool</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        :root {
+            --primary: #4a6fa5;
+            --secondary: #166088;
+            --accent: #e63946;
+            --light: #f1faee;
+            --dark: #1d3557;
+            --success: #2a9d8f;
+            --warning: #e9c46a;
+            --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            --radius: 12px;
+            --transition: all 0.3s ease;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        body {
+            background: linear-gradient(135deg, #e0f7fa, #bbdefb);
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 20px;
+            color: var(--dark);
+            line-height: 1.6;
+        }
+        .container {
+            width: 100%;
+            max-width: 1000px;
+            margin: 0 auto;
+        }
+        header {
+            text-align: center;
+            padding: 20px 0;
+            margin-bottom: 30px;
+            width: 100%;
+            background: rgba(255, 255, 255, 0.8);
+            border-radius: var(--radius);
+            box-shadow: var(--shadow);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.5);
+        }
+        h1 {
+            color: var(--secondary);
+            font-size: 2.5rem;
+            margin-bottom: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 15px;
+        }
+        .subtitle {
+            color: var(--dark);
+            font-size: 1.1rem;
+            max-width: 600px;
+            margin: 0 auto;
+        }
+        .disclaimer {
+            background: rgba(233, 196, 106, 0.2);
+            border-left: 4px solid var(--warning);
+            padding: 15px;
+            border-radius: 0 var(--radius) var(--radius) 0;
+            margin: 20px 0;
+            font-size: 0.9rem;
+        }
+        .app-container {
+            display: grid;
+            grid-template-columns: 1fr;
+            gap: 30px;
+            margin-bottom: 30px;
+        }
+        @media (min-width: 768px) {
+            .app-container {
+                grid-template-columns: 1fr 1fr;
+            }
+        }
+        .upload-section, .results-section {
+            background: white;
+            border-radius: var(--radius);
+            padding: 30px;
+            box-shadow: var(--shadow);
+            display: flex;
+            flex-direction: column;
+        }
+        .section-title {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            color: var(--secondary);
+            margin-bottom: 20px;
+            font-size: 1.5rem;
+        }
+        .upload-area {
+            border: 2px dashed var(--primary);
+            border-radius: var(--radius);
+            padding: 40px 20px;
+            text-align: center;
+            cursor: pointer;
+            transition: var(--transition);
+            background: rgba(74, 111, 165, 0.05);
+            margin-bottom: 25px;
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            min-height: 200px;
+        }
+        .upload-area:hover, .upload-area.drag-over {
+            background: rgba(74, 111, 165, 0.1);
+            border-color: var(--secondary);
+        }
+        .upload-icon {
+            font-size: 3rem;
+            color: var(--primary);
+            margin-bottom: 15px;
+        }
+        .upload-text {
+            margin-bottom: 15px;
+        }
+        .file-input {
+            display: none;
+        }
+        .btn {
+            background: var(--primary);
+            color: white;
+            border: none;
+            padding: 12px 25px;
+            border-radius: 50px;
+            font-size: 1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: var(--transition);
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            box-shadow: 0 4px 6px rgba(74, 111, 165, 0.3);
+        }
+        .btn:hover {
+            background: var(--secondary);
+            transform: translateY(-2px);
+            box-shadow: 0 6px 8px rgba(74, 111, 165, 0.4);
+        }
+        .btn:active {
+            transform: translateY(0);
+        }
+        .btn.measure {
+            background: var(--success);
+            box-shadow: 0 4px 6px rgba(42, 157, 143, 0.3);
+            width: 100%;
+            margin-top: 20px;
+            padding: 15px;
+            font-size: 1.1rem;
+        }
+        .btn.measure:hover {
+            background: #218a7c;
+            box-shadow: 0 6px 8px rgba(42, 157, 143, 0.4);
+        }
+        .image-preview {
+            width: 100%;
+            border-radius: var(--radius);
+            overflow: hidden;
+            display: none;
+            margin-top: 15px;
+            position: relative;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        }
+        .image-preview img {
+            width: 100%;
+            display: block;
+        }
+        .measurement-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: none;
+        }
+        .results-content {
+            display: none;
+            text-align: center;
+        }
+        .measurement-results {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 20px;
+            margin: 25px 0;
+        }
+        .measurement-card {
+            background: rgba(241, 250, 238, 0.5);
+            border-radius: var(--radius);
+            padding: 20px;
+            text-align: center;
+            box-shadow: var(--shadow);
+        }
+        .measurement-value {
+            font-size: 2.5rem;
+            font-weight: 700;
+            color: var(--secondary);
+            margin: 10px 0;
+        }
+        .measurement-label {
+            font-size: 1.1rem;
+            color: var(--dark);
+        }
+        .comparison-chart {
+            background: white;
+            border-radius: var(--radius);
+            padding: 20px;
+            margin-top: 20px;
+            box-shadow: var(--shadow);
+        }
+        .chart-bar {
+            height: 30px;
+            background: #e0e0e0;
+            border-radius: 15px;
+            margin: 15px 0;
+            overflow: hidden;
+            position: relative;
+        }
+        .chart-fill {
+            height: 100%;
+            background: var(--success);
+            border-radius: 15px;
+            width: 0;
+            transition: width 1.5s ease-out;
+        }
+        .chart-labels {
+            display: flex;
+            justify-content: space-between;
+            font-size: 0.9rem;
+            color: var(--dark);
+        }
+        .privacy-note {
+            background: rgba(241, 250, 238, 0.5);
+            border-radius: var(--radius);
+            padding: 20px;
+            margin-top: 20px;
+            font-size: 0.9rem;
+            text-align: center;
+        }
+        .privacy-icon {
+            color: var(--success);
+            font-size: 1.5rem;
+            margin-bottom: 10px;
+        }
+        footer {
+            text-align: center;
+            padding: 20px;
+            width: 100%;
+            margin-top: auto;
+            font-size: 0.9rem;
+            color: var(--dark);
+        }
+        .anycoder-link {
+            color: var(--secondary);
+            font-weight: 600;
+            text-decoration: none;
+            display: inline-block;
+            margin-top: 5px;
+        }
+        .anycoder-link:hover {
+            text-decoration: underline;
+        }
+        .loading {
+            display: none;
+            text-align: center;
+            padding: 20px;
+        }
+        .spinner {
+            border: 4px solid rgba(0, 0, 0, 0.1);
+            border-left-color: var(--primary);
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            animation: spin 1s linear infinite;
+            margin: 0 auto 15px;
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        .instructions {
+            background: rgba(255, 255, 255, 0.7);
+            border-radius: var(--radius);
+            padding: 20px;
+            margin-top: 20px;
+        }
+        .instructions h3 {
+            margin-bottom: 15px;
+            color: var(--secondary);
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .instructions ol {
+            padding-left: 20px;
+        }
+        .instructions li {
+            margin-bottom: 10px;
+        }
+        .note {
+            color: var(--accent);
+            font-weight: 600;
+            margin-top: 10px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1><i class="fas fa-ruler"></i> Anatomical Measurement Tool</h1>
+            <p class="subtitle">Upload an image for measurement analysis</p>
+        </header>
+        <div class="disclaimer">
+            <p><strong>Note:</strong> This is a demonstration application. Actual measurement requires calibrated medical equipment. Results are simulated for illustrative purposes.</p>
+        </div>
+        <div class="app-container">
+            <div class="upload-section">
+                <h2 class="section-title"><i class="fas fa-upload"></i> Upload Image</h2>
+                <div class="upload-area" id="upload-area">
+                    <i class="fas fa-cloud-upload-alt upload-icon"></i>
+                    <p class="upload-text">Drag & drop your image here or click to browse</p>
+                    <button class="btn" id="browse-btn"><i class="fas fa-folder-open"></i> Select Image</button>
+                    <input type="file" id="file-input" class="file-input" accept="image/*">
+                </div>
+                <div class="image-preview" id="image-preview">
+                    <img id="preview-img" src="" alt="Preview">
+                    <div class="measurement-overlay" id="measurement-overlay"></div>
+                </div>
+                <button class="btn measure" id="measure-btn"><i class="fas fa-ruler-combined"></i> Measure</button>
+                <div class="loading" id="loading">
+                    <div class="spinner"></div>
+                    <p>Analyzing image...</p>
+                </div>
+            </div>
+            <div class="results-section">
+                <h2 class="section-title"><i class="fas fa-chart-bar"></i> Results</h2>
+                <div class="results-placeholder" id="results-placeholder">
+                    <p>Upload an image and click "Measure" to see results here.</p>
+                    <img src="https://cdn-icons-png.flaticon.com/512/3135/3135750.png" alt="Placeholder" style="width: 200px; opacity: 0.3; margin: 30px auto; display: block;">
+                </div>
+                <div class="results-content" id="results-content">
+                    <div class="measurement-results">
+                        <div class="measurement-card">
+                            <i class="fas fa-ruler-vertical" style="font-size: 2rem; color: var(--primary);"></i>
+                            <p class="measurement-label">Length</p>
+                            <div class="measurement-value" id="length-value">--</div>
+                            <p>centimeters</p>
+                        </div>
+                        <div class="measurement-card">
+                            <i class="fas fa-circle" style="font-size: 2rem; color: var(--primary);"></i>
+                            <p class="measurement-label">Girth</p>
+                            <div class="measurement-value" id="girth-value">--</div>
+                            <p>centimeters</p>
+                        </div>
+                    </div>
+                    <div class="comparison-chart">
+                        <h3>Size Comparison</h3>
+                        <div class="chart-bar">
+                            <div class="chart-fill" id="size-chart"></div>
+                        </div>
+                        <div class="chart-labels">
+                            <span>Small</span>
+                            <span>Average</span>
+                            <span>Large</span>
+                        </div>
+                    </div>
+                    <div class="privacy-note">
+                        <i class="fas fa-lock privacy-icon"></i>
+                        <p>Your privacy is important. All image processing happens locally in your browser. Images are never uploaded to any server.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="instructions">
+            <h3><i class="fas fa-info-circle"></i> Measurement Guidelines</h3>
+            <ol>
+                <li>Use a clear, well-lit photo taken from directly above</li>
+                <li>Place a ruler or reference object alongside for accurate measurement</li>
+                <li>Ensure the entire area is visible in the frame</li>
+                <li>Take the photo from a perpendicular angle to avoid distortion</li>
+            </ol>
+            <p class="note">For accurate results, consult a medical professional with proper measurement tools.</p>
+        </div>
+    </div>
+    <footer>
+        <p>&copy; 2023 Anatomical Measurement Tool | Educational Demonstration</p>
+        <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link">Built with anycoder</a>
+    </footer>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const uploadArea = document.getElementById('upload-area');
+            const fileInput = document.getElementById('file-input');
+            const browseBtn = document.getElementById('browse-btn');
+            const previewImg = document.getElementById('preview-img');
+            const imagePreview = document.getElementById('image-preview');
+            const measureBtn = document.getElementById('measure-btn');
+            const resultsPlaceholder = document.getElementById('results-placeholder');
+            const resultsContent = document.getElementById('results-content');
+            const lengthValue = document.getElementById('length-value');
+            const girthValue = document.getElementById('girth-value');
+            const sizeChart = document.getElementById('size-chart');
+            const loading = document.getElementById('loading');
+            const measurementOverlay = document.getElementById('measurement-overlay');
+            // Browse button click
+            browseBtn.addEventListener('click', () => {
+                fileInput.click();
+            });
+            // File input change
+            fileInput.addEventListener('change', function(e) {
+                if (this.files && this.files[0]) {
+                    const file = this.files[0];
+                    // Check if file is an image
+                    if (!file.type.match('image.*')) {
+                        alert('Please select an image file');
+                        return;
+                    }
+                    const reader = new FileReader();
+                    reader.onload = function(e) {
+                        previewImg.src = e.target.result;
+                        imagePreview.style.display = 'block';
+                        measureBtn.disabled = false;
+                    }
+                    reader.readAsDataURL(file);
+                }
+            });
+            // Drag and drop functionality
+            uploadArea.addEventListener('dragover', function(e) {
+                e.preventDefault();
+                this.classList.add('drag-over');
+            });
+            uploadArea.addEventListener('dragleave', function() {
+                this.classList.remove('drag-over');
+            });
+            uploadArea.addEventListener('drop', function(e) {
+                e.preventDefault();
+                this.classList.remove('drag-over');
+                if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+                    const file = e.dataTransfer.files[0];
+                    // Check if file is an image
+                    if (!file.type.match('image.*')) {
+                        alert('Please drop an image file');
+                        return;
+                    }
+                    fileInput.files = e.dataTransfer.files;
+                    const reader = new FileReader();
+                    reader.onload = function(e) {
+                        previewImg.src = e.target.result;
+                        imagePreview.style.display = 'block';
+                        measureBtn.disabled = false;
+                    }
+                    reader.readAsDataURL(file);
+                }
+            });
+            // Measure button click
+            measureBtn.addEventListener('click', function() {
+                if (!previewImg.src || previewImg.src === window.location.href) {
+                    alert('Please upload an image first');
+                    return;
+                }
+                // Show loading
+                loading.style.display = 'block';
+                measureBtn.disabled = true;
+                // Simulate analysis delay
+                setTimeout(() => {
+                    // Hide loading
+                    loading.style.display = 'none';
+                    // Generate mock measurements
+                    const length = (Math.random() * 7 + 8).toFixed(1); // 8-15 cm
+                    const girth = (Math.random() * 4 + 8).toFixed(1); // 8-12 cm
+                    // Update results
+                    lengthValue.textContent = length;
+                    girthValue.textContent = girth;
+                    // Show results
+                    resultsPlaceholder.style.display = 'none';
+                    resultsContent.style.display = 'block';
+                    // Animate chart
+                    const percentage = ((parseFloat(length) - 8) / 7) * 100;
+                    sizeChart.style.width = `${Math.min(100, Math.max(5, percentage))}%`;
+                    // Show measurement overlay
+                    measurementOverlay.style.display = 'block';
+                    measurementOverlay.innerHTML = `
+                        <div style="position: absolute; top: 20%; left: 50%; transform: translateX(-50%); width: 80%; height: 2px; background: ${getComputedStyle(document.documentElement).getPropertyValue('--accent')};"></div>
+                        <div style="position: absolute; top: 20%; left: 10%; color: ${getComputedStyle(document.documentElement).getPropertyValue('--accent')}; font-weight: bold;">${length} cm</div>
+                        <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: ${girth}%; height: 2px; background: ${getComputedStyle(document.documentElement).getPropertyValue('--success')};"></div>
+                        <div style="position: absolute; top: 50%; left: 10%; color: ${getComputedStyle(document.documentElement).getPropertyValue('--success')}; font-weight: bold;">${girth} cm</div>
+                    `;
+                    // Re-enable measure button
+                    measureBtn.disabled = false;
+                }, 2000);
+            });
+        });
+    </script>
+</body>
+</html>