Spaces:

53dNorthA
/

CarImageClassification

Sleeping

App Files Files Community

SakibAhmed commited on Jun 25, 2025

Commit

9fbd05b

verified ·

1 Parent(s): 92406b9

Delete templates/index - Copy.html

Browse files

Files changed (1) hide show

templates/index - Copy.html +0 -517

templates/index - Copy.html DELETED Viewed

@@ -1,517 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>YOLO Vision AI</title>
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
-            min-height: 100vh;
-            overflow-x: hidden;
-            position: relative;
-        }
-        /* Animated background particles */
-        .particles {
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            overflow: hidden;
-            z-index: 0;
-        }
-        .particle {
-            position: absolute;
-            width: 2px;
-            height: 2px;
-            background: #00d4ff;
-            border-radius: 50%;
-            animation: float 6s ease-in-out infinite;
-            opacity: 0.6;
-        }
-        @keyframes float {
-            0%, 100% { transform: translateY(0px) rotate(0deg); }
-            50% { transform: translateY(-20px) rotate(180deg); }
-        }
-        .container {
-            position: relative;
-            z-index: 1;
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 2rem;
-            min-height: 100vh;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-        }
-        .header {
-            text-align: center;
-            margin-bottom: 3rem;
-            animation: slideDown 1s ease-out;
-        }
-        .title {
-            font-size: 3.5rem;
-            font-weight: 700;
-            background: linear-gradient(45deg, #00d4ff, #ff00ff, #00ff88);
-            background-size: 200% 200%;
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            animation: gradientShift 3s ease-in-out infinite;
-            margin-bottom: 1rem;
-            text-shadow: 0 0 30px rgba(0, 212, 255, 0.5);
-        }
-        .subtitle {
-            font-size: 1.2rem;
-            color: #a0a0a0;
-            font-weight: 300;
-        }
-        .upload-area {
-            width: 100%;
-            max-width: 500px;
-            min-height: 300px;
-            border: 2px dashed #00d4ff;
-            border-radius: 20px;
-            background: rgba(0, 212, 255, 0.05);
-            backdrop-filter: blur(10px);
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            position: relative;
-            overflow: hidden;
-            animation: slideUp 1s ease-out 0.3s both;
-        }
-        .upload-area:hover {
-            border-color: #ff00ff;
-            background: rgba(255, 0, 255, 0.05);
-            transform: translateY(-5px);
-            box-shadow: 0 20px 40px rgba(0, 212, 255, 0.2);
-        }
-        .upload-area.dragover {
-            border-color: #00ff88;
-            background: rgba(0, 255, 136, 0.1);
-            transform: scale(1.02);
-        }
-        .upload-icon {
-            font-size: 4rem;
-            color: #00d4ff;
-            margin-bottom: 1rem;
-            transition: all 0.3s ease;
-        }
-        .upload-area:hover .upload-icon {
-            color: #ff00ff;
-            transform: scale(1.1);
-        }
-        .upload-text {
-            color: #ffffff;
-            font-size: 1.1rem;
-            margin-bottom: 0.5rem;
-            font-weight: 500;
-        }
-        .upload-subtext {
-            color: #a0a0a0;
-            font-size: 0.9rem;
-        }
-        .file-input {
-            display: none;
-        }
-        .preview-container {
-            margin-top: 2rem;
-            text-align: center;
-            animation: fadeIn 0.5s ease-out;
-        }
-        .preview-image {
-            max-width: 100%;
-            max-height: 300px;
-            border-radius: 15px;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
-            border: 2px solid #00d4ff;
-        }
-        .predict-button {
-            background: linear-gradient(45deg, #00d4ff, #0099cc);
-            border: none;
-            color: white;
-            padding: 15px 40px;
-            font-size: 1.1rem;
-            font-weight: 600;
-            border-radius: 50px;
-            cursor: pointer;
-            margin-top: 1.5rem;
-            transition: all 0.3s ease;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            position: relative;
-            overflow: hidden;
-        }
-        .predict-button:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 10px 25px rgba(0, 212, 255, 0.4);
-            background: linear-gradient(45deg, #ff00ff, #cc0099);
-        }
-        .predict-button:disabled {
-            opacity: 0.6;
-            cursor: not-allowed;
-            transform: none;
-        }
-        .loading {
-            display: none;
-            margin-top: 1rem;
-        }
-        .spinner {
-            width: 40px;
-            height: 40px;
-            border: 4px solid rgba(0, 212, 255, 0.3);
-            border-top: 4px solid #00d4ff;
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-            margin: 0 auto;
-        }
-        .result-container {
-            margin-top: 2rem;
-            padding: 2rem;
-            background: rgba(255, 255, 255, 0.05);
-            backdrop-filter: blur(15px);
-            border-radius: 20px;
-            border: 1px solid rgba(0, 212, 255, 0.3);
-            animation: slideUp 0.5s ease-out;
-            text-align: center;
-        }
-        .result-class {
-            font-size: 2rem;
-            font-weight: 700;
-            color: #00ff88;
-            margin-bottom: 1rem;
-            text-transform: uppercase;
-            letter-spacing: 2px;
-        }
-        .result-confidence {
-            font-size: 1.2rem;
-            color: #ffffff;
-            margin-bottom: 0.5rem;
-        }
-        .confidence-bar {
-            width: 100%;
-            height: 10px;
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 5px;
-            overflow: hidden;
-            margin-top: 1rem;
-        }
-        .confidence-fill {
-            height: 100%;
-            background: linear-gradient(90deg, #00d4ff, #00ff88);
-            border-radius: 5px;
-            transition: width 1s ease-out;
-            animation: pulse 2s ease-in-out infinite;
-        }
-        .error {
-            color: #ff4444;
-            background: rgba(255, 68, 68, 0.1);
-            padding: 1rem;
-            border-radius: 10px;
-            border: 1px solid #ff4444;
-            margin-top: 1rem;
-        }
-        @keyframes slideDown {
-            from { opacity: 0; transform: translateY(-50px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        @keyframes slideUp {
-            from { opacity: 0; transform: translateY(50px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        @keyframes fadeIn {
-            from { opacity: 0; }
-            to { opacity: 1; }
-        }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        @keyframes gradientShift {
-            0%, 100% { background-position: 0% 50%; }
-            50% { background-position: 100% 50%; }
-        }
-        @keyframes pulse {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.7; }
-        }
-        /* Responsive design */
-        @media (max-width: 768px) {
-            .title {
-                font-size: 2.5rem;
-            }
-            .container {
-                padding: 1rem;
-            }
-            .upload-area {
-                min-height: 250px;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div class="particles" id="particles"></div>
-    <div class="container">
-        <div class="header">
-            <h1 class="title">YOLO12 Vision AI</h1>
-            <p class="subtitle">Advanced Image Classification with Neural Networks</p>
-        </div>
-        <div class="upload-area" id="uploadArea">
-            <div class="upload-icon">🔮</div>
-            <div class="upload-text">Drop your image here or click to upload</div>
-            <div class="upload-subtext">Supports PNG, JPG, JPEG formats</div>
-            <input type="file" id="fileInput" class="file-input" accept=".png,.jpg,.jpeg">
-        </div>
-        <div class="preview-container" id="previewContainer" style="display: none;">
-            <img id="previewImage" class="preview-image" alt="Preview">
-            <button class="predict-button" id="predictButton">🚀 Analyze Image</button>
-        </div>
-        <div class="loading" id="loading">
-            <div class="spinner"></div>
-            <p style="color: #00d4ff; margin-top: 1rem;">Processing your image...</p>
-        </div>
-        <div class="result-container" id="resultContainer" style="display: none;">
-            <div class="result-class" id="resultClass"></div>
-            <div class="result-confidence">
-                Confidence: <span id="confidencePercentage"></span>
-            </div>
-            <div class="confidence-bar">
-                <div class="confidence-fill" id="confidenceFill"></div>
-            </div>
-        </div>
-        <div class="error" id="errorContainer" style="display: none;"></div>
-    </div>
-    <script>
-        // Create animated particles
-        function createParticles() {
-            const particlesContainer = document.getElementById('particles');
-            const particleCount = 50;
-            for (let i = 0; i < particleCount; i++) {
-                const particle = document.createElement('div');
-                particle.className = 'particle';
-                particle.style.left = Math.random() * 100 + '%';
-                particle.style.top = Math.random() * 100 + '%';
-                particle.style.animationDelay = Math.random() * 6 + 's';
-                particle.style.animationDuration = (3 + Math.random() * 3) + 's';
-                particlesContainer.appendChild(particle);
-            }
-        }
-        // Initialize particles
-        createParticles();
-        // DOM elements
-        const uploadArea = document.getElementById('uploadArea');
-        const fileInput = document.getElementById('fileInput');
-        const previewContainer = document.getElementById('previewContainer');
-        const previewImage = document.getElementById('previewImage');
-        const predictButton = document.getElementById('predictButton');
-        const loading = document.getElementById('loading');
-        const resultContainer = document.getElementById('resultContainer');
-        const errorContainer = document.getElementById('errorContainer');
-        const resultClass = document.getElementById('resultClass');
-        const confidencePercentage = document.getElementById('confidencePercentage');
-        const confidenceFill = document.getElementById('confidenceFill');
-        let selectedFile = null;
-        // Upload area click handler
-        uploadArea.addEventListener('click', () => {
-            fileInput.click();
-        });
-        // File input change handler
-        fileInput.addEventListener('change', handleFileSelect);
-        // Drag and drop handlers
-        uploadArea.addEventListener('dragover', (e) => {
-            e.preventDefault();
-            uploadArea.classList.add('dragover');
-        });
-        uploadArea.addEventListener('dragleave', () => {
-            uploadArea.classList.remove('dragover');
-        });
-        uploadArea.addEventListener('drop', (e) => {
-            e.preventDefault();
-            uploadArea.classList.remove('dragover');
-            const files = e.dataTransfer.files;
-            if (files.length > 0) {
-                handleFile(files[0]);
-            }
-        });
-        // Predict button handler
-        predictButton.addEventListener('click', predictImage);
-        function handleFileSelect(e) {
-            const file = e.target.files[0];
-            if (file) {
-                handleFile(file);
-            }
-        }
-        function handleFile(file) {
-            // Validate file type
-            const allowedTypes = ['image/png', 'image/jpeg', 'image/jpg'];
-            if (!allowedTypes.includes(file.type)) {
-                showError('Please select a valid image file (PNG, JPG, JPEG)');
-                return;
-            }
-            // Validate file size (max 10MB)
-            if (file.size > 10 * 1024 * 1024) {
-                showError('File size too large. Please select a file smaller than 10MB.');
-                return;
-            }
-            selectedFile = file;
-            // Show preview
-            const reader = new FileReader();
-            reader.onload = (e) => {
-                previewImage.src = e.target.result;
-                previewContainer.style.display = 'block';
-                hideError();
-                hideResult();
-            };
-            reader.readAsDataURL(file);
-        }
-        async function predictImage() {
-            if (!selectedFile) {
-                showError('Please select an image first');
-                return;
-            }
-            // Show loading
-            loading.style.display = 'block';
-            predictButton.disabled = true;
-            hideError();
-            hideResult();
-            try {
-                const formData = new FormData();
-                formData.append('file', selectedFile);
-                const response = await fetch('/predict', {
-                    method: 'POST',
-                    body: formData
-                });
-                const data = await response.json();
-                if (response.ok) {
-                    showResult(data);
-                } else {
-                    showError(data.error || 'An error occurred during prediction');
-                }
-            } catch (error) {
-                showError('Failed to connect to the server. Please try again.');
-                console.error('Error:', error);
-            } finally {
-                loading.style.display = 'none';
-                predictButton.disabled = false;
-            }
-        }
-        function showResult(data) {
-            resultClass.textContent = data.class;
-            const confidence = Math.round(data.confidence * 100);
-            confidencePercentage.textContent = confidence + '%';
-            confidenceFill.style.width = confidence + '%';
-            resultContainer.style.display = 'block';
-            // Add some visual flair
-            setTimeout(() => {
-                confidenceFill.style.width = confidence + '%';
-            }, 100);
-        }
-        function showError(message) {
-            errorContainer.textContent = message;
-            errorContainer.style.display = 'block';
-        }
-        function hideError() {
-            errorContainer.style.display = 'none';
-        }
-        function hideResult() {
-            resultContainer.style.display = 'none';
-        }
-        // Add some interactive effects
-        document.addEventListener('mousemove', (e) => {
-            const particles = document.querySelectorAll('.particle');
-            const x = e.clientX / window.innerWidth;
-            const y = e.clientY / window.innerHeight;
-            particles.forEach((particle, index) => {
-                const speed = (index % 3 + 1) * 0.5;
-                const newX = x * speed;
-                const newY = y * speed;
-                particle.style.transform = `translate(${newX}px, ${newY}px)`;
-            });
-        });
-    </script>
-</body>
-</html>