regal-dashboard

byashi singh

Build a professional AI analytics dashboard-style website for a Deep Learning project named: VisionDigits AI AI-Powered Handwritten Digit Recognition Dashboard Project Goal: Create an interactive web application where users can draw or upload handwritten digits (0–9) and receive predictions using a trained CNN model based on the MNIST dataset. Tech Stack: Python, Convolutional Neural Network (CNN), MNIST dataset, FastAPI backend API, Streamlit frontend interface, OpenCV for image preprocessing, Plotly or Matplotlib for visualization. Core Features: • Canvas input to draw handwritten digits • Image upload option for prediction • Large predicted digit display in bold format • Top-3 prediction confidence scores • Full probability distribution chart for digits (0–9) • Bright colorful visible confidence bars • Confidence gauge meter visualization • Grad-CAM attention heatmap visualization • Prediction history panel storing last 5 predictions • Download prediction result option • Demo sample digit buttons for quick testing without drawing Explainable AI Features: • Confidence interpretation panel explaining whether prediction confidence is high, medium, or low • Panel showing top 3 similar digit predictions with comparison confidence • Attention heatmap explaining which image region influenced prediction Dashboard UI Requirements: • Fix overlapping layout issues • Add proper spacing between all components • Use high-contrast typography (primary text white, secondary text light gray) • Replace thin fonts with modern fonts like Inter or Poppins • Keep dark theme but add theme toggle button (dark/light mode switch) • Save theme preference after page reload • Use bright distinct colors for probability bars (digits 0–9) • Highlight prediction output clearly • Center-align dashboard layout professionally • Add clean card-style UI sections like real AI analytics dashboards Workflow Section (visible pipeline): Capture → Pre-process → CNN Inference → Visualization Explain steps clearly: Capture: user draws or uploads digit Pre-process: resize image to 28×28 pixels, grayscale conversion, normalization CNN Inference: trained CNN model predicts digit probabilities Visualization: display predicted digit, charts, and Grad-CAM heatmap Navigation Menu: Home | About | Architecture | Dataset | Workflow | Model Training Add About Page Section: Include explanation describing what VisionDigits AI is and how it works step-by-step using CNN and MNIST dataset. Explain preprocessing, prediction pipeline, visualization outputs, and dashboard workflow clearly. Dataset Information Panel: Dataset: MNIST handwritten digit dataset Images: 70,000 samples Classes: digits 0–9 Image size: 28×28 pixels Model Architecture Panel: Model Type: Convolutional Neural Network Layers: Convolution → ReLU → Pooling → Dense → Softmax Display model accuracy (~98%) Model Training Details Panel: Epochs used during training Optimizer: Adam Loss function: categorical cross-entropy Training accuracy visualization chart Visualization Panel: Confidence gauge meter Colorful probability distribution chart Grad-CAM attention heatmap explanation Top 3 similar digit prediction comparison chart Prediction Intelligence Panels: Confidence interpretation panel (high / medium / low confidence explanation) Prediction history panel storing last 5 predictions Footer Status Bar: System Active indicator API connection status Inference latency indicator Model type: CNN MNIST Precision level indicator System Performance Panel: Display inference time in milliseconds Show model loaded status Show API connected status Design Requirement: Create a modern professional AI analytics dashboard interface with structured layout, readable typography, colorful charts, card-style UI panels, and responsive spacing similar to real-world machine learning product demo dashboards. Additional UX Enhancements: Add demo sample digit buttons Add download prediction report option Add prediction history tracking panel Add similar digit comparison visualization Add confidence explanation logic panel Goal: Build a resume-level interactive AI deployment website demonstrating Deep Learning classification, Explainable AI visualization, CNN prediction workflow understanding, API integration using FastAPI, and a professional dashboard interface suitable for portfolio presentation and job interviews.