| <!DOCTYPE html> |
| <html lang="en" data-bs-theme="light"> |
|
|
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>Model RAM Calculator</title> |
| |
| <link rel="stylesheet" href="css/bootstrap.min.css" /> |
| <link rel="stylesheet" href="style.css" /> |
| </head> |
|
|
| <body> |
|
|
| |
| <nav class="navbar navbar-expand-lg bg-body-tertiary"> |
| <div class="container"> |
| <span class="navbar-brand fw-bold"> |
| 🖥️ Model RAM Calculator |
| </span> |
| <div class="d-flex align-items-center gap-2"> |
| <span class="theme-toggle" id="themeToggle" title="Toggle dark/light mode"> |
| <span id="themeIcon">🌙</span> |
| </span> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <div class="container mt-4"> |
| |
| <div class="row g-4"> |
| <div class="col-md-6"> |
| <label for="paramInput" class="form-label fw-semibold"> |
| Model Size (parameters) |
| </label> |
| <div class="input-group"> |
| <input type="text" class="form-control" id="paramInput" placeholder="e.g., 7000000000" min="0" |
| step="1000" value="7000000000" /> |
| <button class="btn btn-outline-secondary" type="button" id="calculateBtn"> |
| Calculate |
| </button> |
| </div> |
| <div class="form-text"> |
| Enter the number of parameters (e.g., 7B = 7,000,000,000). |
| </div> |
| </div> |
| <div class="col-md-6"> |
| <label class="form-label fw-semibold">Quick Presets</label> |
| <div> |
| <button class="btn btn-outline-primary btn-preset" data-value="200000000">200M</button> |
| <button class="btn btn-outline-primary btn-preset" data-value="500000000">500M</button> |
| <button class="btn btn-outline-primary btn-preset" data-value="1000000000">1B</button> |
| <button class="btn btn-outline-primary btn-preset" data-value="2000000000">2B</button> |
| <button class="btn btn-outline-primary btn-preset" data-value="3000000000">3B</button> |
| <button class="btn btn-outline-primary btn-preset" data-value="7000000000">7B</button> |
| <button class="btn btn-outline-primary btn-preset" data-value="10000000000">10B</button> |
| <button class="btn btn-outline-primary btn-preset" data-value="100000000000">100B</button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="row mt-4"> |
| <div class="col-12"> |
| <div class="card shadow-sm"> |
| <div class="card-body"> |
| <h5 class="card-title"> |
| Memory Requirements |
| <span class="badge bg-secondary ms-2" id="paramDisplay">7B parameters</span> |
| </h5> |
| <div class="table-responsive"> |
| <table class="table table-striped table-hover align-middle" id="resultTable"> |
| <thead> |
| <tr> |
| <th>Data Type</th> |
| <th>Bits per Weight</th> |
| <th>Memory (GB)</th> |
| <th>Memory (MiB)</th> |
| <th>Memory (Bytes)</th> |
| </tr> |
| </thead> |
| <tbody id="tableBody"> |
| |
| </tbody> |
| </table> |
| </div> |
| <div class="note text-muted mt-2"> |
| ⓘ This is the approximate memory to load the model weights only. |
| Actual usage may be higher due to activations, gradients, and overhead. |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <footer> |
| <div class="container"> |
| <span class="text-muted small"> |
| Built with ❤️ using Bootstrap • Deploy on Hugging Face Spaces (Static). |
| </span> |
| </div> |
| </footer> |
|
|
| |
| <script src="js/bootstrap.bundle.min.js"></script> |
| |
| <script src="script.js"></script> |
| </body> |
|
|
| </html> |
