Page-Replacement-Algorithm---graph-plotter/index.html at main · Bitttu4/Page-Replacement-Algorithm---graph-plotter · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>Page Replacement Algorithm Graph Plotter</title>
    <link rel="stylesheet" href="style.css">
    <!-- Chart.js CDN (same as original) -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
</head>
<body>
    <div class="container">
        <!-- Header Section -->
        <header>
            <h1>Page Replacement Algorithm Graph Plotter</h1>
            <p>Visualize FIFO, LRU, Optimal, LFU & MFU | Step-by-step simulation with frame mapping</p>
        </header>

        <!-- Controls Section -->
        <div class="controls">
            <div class="input-group">
                <label for="refString">Reference String</label>
                <input type="text" id="refString" placeholder="e.g., 7,0,1,2,0,3,0,4,2,3,0,3,2" value="7,0,1,2,0,3,0,4,2,3,0,3,2">
            </div>
            <div class="input-group">
                <label for="numFrames">Number of Frames</label>
                <input type="number" id="numFrames" min="1" max="10" value="3" step="1">
            </div>
            <div class="input-group">
                <label for="algorithm">Algorithm</label>
                <select id="algorithm">
                    <option value="fifo">FIFO</option>
                    <option value="lru">LRU</option>
                    <option value="optimal">Optimal</option>
                    <option value="lfu">LFU</option>
                    <option value="mfu">MFU</option>
                </select>
            </div>
            <div class="button-group">
                <button id="runBtn" class="btn primary">Run Simulation</button>
                <button id="compareBtn" class="btn secondary">Compare All</button>
                <button id="resetBtn" class="btn danger">Reset</button>
            </div>
        </div>

        <!-- Statistics Cards -->
        <div class="stats-grid">
            <div class="stat-card">
                <h3>Page Hits</h3>
                <p id="hitsValue">0</p>
            </div>
            <div class="stat-card">
                <h3>Page Faults</h3>
                <p id="faultsValue">0</p>
            </div>
            <div class="stat-card">
                <h3>Hit Ratio</h3>
                <p id="hitRatio">0.00</p>
            </div>
            <div class="stat-card">
                <h3>Fault Ratio</h3>
                <p id="faultRatio">0.00</p>
            </div>
            <div class="stat-card">
                <h3>Frames Used</h3>
                <p id="framesUsed">0</p>
            </div>
        </div>

        <!-- Frame Visualization -->
        <div class="visualization-section">
            <h2>Frame State</h2>
            <div id="frameContainer" class="frame-container">
                <!-- Frames dynamically injected -->
            </div>
        </div>

        <!-- Playback Controls -->
        <div class="playback-controls">
            <button id="playBtn" class="playback" disabled>Play</button>
            <button id="pauseBtn" class="playback" disabled>Pause</button>
            <button id="nextBtn" class="playback" disabled>Next</button>
            <button id="prevBtn" class="playback" disabled>Previous</button>
            <button id="resetSimBtn" class="playback" disabled>Reset Sim</button>
        </div>

        <!-- Step Table -->
        <div class="table-section">
            <h2>Simulation Steps</h2>
            <div class="table-wrapper">
                <table id="stepTable">
                    <thead>
                        <tr><th>Step</th><th>Ref Page</th><th>Frames (after access)</th><th>Hit/Fault</th><th>Replaced Page</th></tr>
                    </thead>
                    <tbody id="stepTableBody">
                        <tr><td colspan="5">Run simulation to see steps</td></tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Graphs -->
        <div class="graph-section">
            <h2>Page Fault Timeline</h2>
            <canvas id="faultTimelineChart" width="800" height="400"></canvas>
        </div>
        <div class="graph-section">
            <h2>Frame Utilization (Occupancy per step)</h2>
            <canvas id="frameUtilChart" width="800" height="400"></canvas>
        </div>
        <div class="graph-section comparison-graph">
            <h2>Algorithm Comparison</h2>
            <canvas id="comparisonChart" width="800" height="400"></canvas>
            <div id="comparisonTableContainer" class="comparison-table"></div>
        </div>

        <!-- Algorithm Info Cards -->
        <div class="algo-info-section">
            <h2>Algorithm Information</h2>
            <div id="algoInfoGrid" class="algo-info-grid"></div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>