An interactive web-based cache algorithm simulator and visualizer that demonstrates the performance differences between LRU (Least Recently Used) and LFU (Least Frequently Used) cache replacement policies.
Interactive dashboard showing real-time cache simulation with live statistics
Side-by-side comparison of LRU and LFU algorithm performance
- Real-time Cache Simulation: Watch cache operations unfold step by step
- Live Statistics: Monitor hit ratio, bandwidth savings, and load times in real-time
- Visual Cache State: See which pages are cached with color-coded indicators
- Access Log Timeline: Track request history with hit/miss highlighting
- Side-by-side Analysis: Compare LRU vs LFU performance metrics
- Performance Charts: Interactive graphs showing hit ratio trends
- Detailed Statistics: Comprehensive performance breakdown for each algorithm
- Modern UI: Dark theme with responsive design
- Step-by-step Control: Manual stepping or auto-play mode
- Configurable Cache Size: Adjustable cache capacity (1-10 MB)
- Keyboard Shortcuts: Spacebar for step forward
This project simulates a web browser cache system that stores frequently accessed pages to reduce bandwidth usage and improve load times. It demonstrates how different cache replacement algorithms perform under the same access patterns.
-
LRU (Least Recently Used)
- Evicts the page that hasn't been accessed for the longest time
- Better for scenarios with temporal locality
- Uses
OrderedDictfor efficient tracking
-
LFU (Least Frequently Used)
- Evicts the page with the lowest access frequency
- Better for scenarios with frequently accessed content
- Tracks access counts for each cached page
The simulator tracks and visualizes:
- Cache Hit Ratio: Percentage of requests served from cache
- Bandwidth Saved: Total data (KB) not re-downloaded due to caching
- Average Load Time: Mean page load time with caching benefits
- Request Progress: Real-time tracking of simulation steps
- Python 3.8+: Core programming language
- Flask 3.0+: Web framework for API and serving the dashboard
- Flask-CORS: Cross-origin resource sharing support
- HTML5: Semantic markup
- CSS3: Modern styling with CSS Grid, Flexbox, and custom properties
- JavaScript (ES6+): Interactive functionality
- Chart.js: Data visualization library
- Python 3.8 or higher
- pip (Python package manager)
- Modern web browser (Chrome, Firefox, Edge, Safari)
-
Clone the repository
git clone https://github.com/yourusername/SmartCacheOptimizer.git cd SmartCacheOptimizer -
Install dependencies
pip install -r requirements.txt
-
Run the application
python app.py
-
Open in browser
http://127.0.0.1:5000
- Select Algorithm: Choose LRU or LFU from the dropdown
- Set Cache Size: Use the slider to adjust cache capacity (1-10 MB)
- Run Simulation: Click the "Run Simulation" button
- Step Through: Use "Step Forward" or "Auto Play" to watch the simulation
- View Statistics: Watch the real-time metrics update
- Click the "Compare LRU vs LFU" button
- View the side-by-side comparison modal
- Analyze the performance charts
- Close the modal to continue
- Spacebar: Step forward in simulation (when active)
- Escape: Close modal dialogs
SmartCacheOptimizer/
├── app.py # Flask web application
├── lru_cache.py # LRU cache implementation
├── lfu_cache.py # LFU cache implementation
├── requirements.txt # Python dependencies
├── README.md # This file
├── templates/
│ └── index.html # Main dashboard HTML
├── static/
│ ├── style.css # CSS styling
│ └── app.js # JavaScript functionality
└── data/
└── sample_access_log.csv # Sample access log data
How it works:
- Tracks the order of page accesses
- When cache is full, removes the least recently accessed page
- Uses an ordered dictionary to maintain access order
Best for:
- Workloads with temporal locality
- Scenarios where recent access patterns predict future access
- Web browsing with sequential page navigation
Example:
Cache: [A, B, C] (capacity = 3)
Access D → Evict A (least recent) → [B, C, D]
Access B → Move B to end → [C, D, B]
How it works:
- Counts how many times each page is accessed
- When cache is full, removes the page with lowest access count
- Maintains a frequency dictionary alongside the cache
Best for:
- Workloads with popular/frequently accessed content
- Scenarios where some content is accessed much more than others
- Content delivery with "hot" items
Example:
Cache: [A(freq:1), B(freq:3), C(freq:2)]
Access D → Evict A (lowest frequency) → [B(freq:3), C(freq:2), D(freq:1)]
The project includes a sample access log (data/sample_access_log.csv) with realistic web page access patterns:
- Pages: HTML pages, images, videos
- Sizes: Range from 100 KB to 2000 KB
- Load Times: 60-800 ms
- Access Patterns: Mix of frequently and rarely accessed content
- Green Border: Recently accessed page (cache hit)
- Orange Border: New page being added (cache miss)
- Frequency Display: Shows access count for LFU algorithm
- Hit Ratio Over Time: Line chart showing how hit ratio evolves
- Performance Comparison: Bar chart comparing hits vs misses
- Works on desktop, tablet, and mobile devices
- Adapts layout based on screen size
- Touch-friendly controls
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- Chart.js for the excellent charting library
- Flask for the lightweight web framework
- Inter Font for beautiful typography
Made with ❤️ using Python and Flask
⭐ Star this repo if you find it helpful!