Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Digit Recognition - Home</title> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"> | |
| </head> | |
| <body> | |
| <!-- Neural network background --> | |
| <div class="neural-network" id="neuralNetwork"> | |
| <!-- Neurons and connections will be generated by JavaScript --> | |
| </div> | |
| <div class="container"> | |
| <!-- Hero Section --> | |
| <div class="flex flex-col items-center justify-center" style="min-height: 80vh;"> | |
| <div class="content-container text-center" style="max-width: 800px;"> | |
| <h1 class="hero-title">AI Digit Recognition</h1> | |
| <p class="hero-subtitle">Speak a digit, let our AI recognize it with advanced speech processing</p> | |
| <a href="{{ url_for('predict_page') }}" class="btn btn-primary"> | |
| Start Recognition | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M5 12h14"></path> | |
| <path d="m12 5 7 7-7 7"></path> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Features Section --> | |
| <div class="my-8"> | |
| <h2 class="text-center mb-4">Key Features</h2> | |
| <div class="flex flex-wrap justify-center gap-4"> | |
| <!-- Feature 1 --> | |
| <div class="feature-card"> | |
| <div class="feature-icon">🎤</div> | |
| <h3 class="feature-title">Voice Recognition</h3> | |
| <p class="feature-description"> | |
| Record your voice saying a digit (0-9) and let our advanced AI model recognize it with high accuracy. | |
| </p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="feature-card"> | |
| <div class="feature-icon">📊</div> | |
| <h3 class="feature-title">Probability Analysis</h3> | |
| <p class="feature-description"> | |
| See detailed probability breakdown for all possible digits, with visual representation of confidence levels. | |
| </p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="feature-card"> | |
| <div class="feature-icon">🧠</div> | |
| <h3 class="feature-title">TensorFlow Powered</h3> | |
| <p class="feature-description"> | |
| Built with TensorFlow and Librosa for state-of-the-art audio processing and neural network classification. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tech Stack Section --> | |
| <div class="content-container my-8" style="max-width: 800px; margin: 2rem auto;"> | |
| <h2 class="text-center mb-4">Technology Stack</h2> | |
| <div class="flex flex-wrap justify-center gap-4"> | |
| <div class="flex flex-col items-center" style="width: 120px;"> | |
| <div style="font-size: 2.5rem;">🐍</div> | |
| <p>Python</p> | |
| </div> | |
| <div class="flex flex-col items-center" style="width: 120px;"> | |
| <div style="font-size: 2.5rem;">🔊</div> | |
| <p>Librosa</p> | |
| </div> | |
| <div class="flex flex-col items-center" style="width: 120px;"> | |
| <div style="font-size: 2.5rem;">🧠</div> | |
| <p>TensorFlow</p> | |
| </div> | |
| <div class="flex flex-col items-center" style="width: 120px;"> | |
| <div style="font-size: 2.5rem;">🌐</div> | |
| <p>Flask</p> | |
| </div> | |
| <div class="flex flex-col items-center" style="width: 120px;"> | |
| <div style="font-size: 2.5rem;">🎨</div> | |
| <p>HTML/CSS/JS</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Call to Action --> | |
| <div class="flex justify-center my-8"> | |
| <a href="{{ url_for('predict_page') }}" class="btn btn-primary"> | |
| Try It Now | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"></path> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| <script> | |
| // Neural network animation | |
| function createNeuralNetwork() { | |
| const container = document.getElementById('neuralNetwork'); | |
| const neurons = []; | |
| const numNeurons = 15; | |
| // Create neurons | |
| for (let i = 0; i < numNeurons; i++) { | |
| const neuron = document.createElement('div'); | |
| neuron.className = 'neuron'; | |
| const x = Math.random() * window.innerWidth; | |
| const y = Math.random() * window.innerHeight; | |
| neuron.style.left = x + 'px'; | |
| neuron.style.top = y + 'px'; | |
| neuron.style.animationDelay = Math.random() * 3 + 's'; | |
| container.appendChild(neuron); | |
| neurons.push({ element: neuron, x, y }); | |
| } | |
| // Create connections between nearby neurons | |
| for (let i = 0; i < neurons.length; i++) { | |
| for (let j = i + 1; j < neurons.length; j++) { | |
| const neuron1 = neurons[i]; | |
| const neuron2 = neurons[j]; | |
| const distance = Math.sqrt( | |
| Math.pow(neuron1.x - neuron2.x, 2) + | |
| Math.pow(neuron1.y - neuron2.y, 2) | |
| ); | |
| // Only connect neurons that are close enough | |
| if (distance < 200) { | |
| const connection = document.createElement('div'); | |
| connection.className = 'connection'; | |
| const angle = Math.atan2(neuron2.y - neuron1.y, neuron2.x - neuron1.x); | |
| const length = distance; | |
| connection.style.left = neuron1.x + 'px'; | |
| connection.style.top = neuron1.y + 'px'; | |
| connection.style.width = length + 'px'; | |
| connection.style.transform = `rotate(${angle}rad)`; | |
| connection.style.animationDelay = Math.random() * 5 + 's'; | |
| container.appendChild(connection); | |
| } | |
| } | |
| } | |
| } | |
| // Initialize neural network on page load | |
| document.addEventListener('DOMContentLoaded', createNeuralNetwork); | |
| // Recreate neural network on window resize | |
| window.addEventListener('resize', () => { | |
| const container = document.getElementById('neuralNetwork'); | |
| container.innerHTML = ''; | |
| createNeuralNetwork(); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |