Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(frontend): npm localhost3000 not found #28

Merged
merged 12 commits into from
Aug 1, 2024
Merged

fix(frontend): npm localhost3000 not found #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
b01c199
Fixed app.py
YuanhuanO Aug 1, 2024
634f682
fix
YuanhuanO Aug 1, 2024
914de0f
odify gitignore
YuanhuanO Aug 1, 2024
502b9a1
Update README.md
YuanhuanO Aug 1, 2024
3d7cf6f
fix access
YuanhuanO Aug 1, 2024
200e59f
Resolved conflicts
YuanhuanO Aug 1, 2024
cbd573a
merge with main
lwaekfjlk Aug 1, 2024
e3340aa
[pre-commit.ci] auto fixes from pre-commit.com hooks
pre-commit-ci[bot] Aug 1, 2024
59b0f32
fix pre-commit error
lwaekfjlk Aug 1, 2024
079ce87
Merge branch 'bug/fix-npm-localhost3000-not-found' of https://github.…
lwaekfjlk Aug 1, 2024
2628917
update the code and revoert the merge
lwaekfjlk Aug 1, 2024
1b08e27
[pre-commit.ci] auto fixes from pre-commit.com hooks
pre-commit-ci[bot] Aug 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ __pycache__/
.Python
build/
develop-eggs/
dist/
downloads/
eggs/
.eggs/
Expand Down
3 changes: 2 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ Estimate the GPU VRAM usage in modern LLM training.
2. Navigate to the root directory:

```bash
cd gpu-bartender
cd frontend
```

3. Install dependencies:
Expand All @@ -32,6 +32,7 @@ Estimate the GPU VRAM usage in modern LLM training.
5. Start the application:

```bash
cd gpu-bartender
npm start
```

Expand Down
2 changes: 2 additions & 0 deletions frontend/dist/bundle.js
View file
Open in desktop

Large diffs are not rendered by default.

13 changes: 13 additions & 0 deletions frontend/dist/bundle.js.LICENSE.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
/*!
* @kurkle/color v0.3.2
* https://github.com/kurkle/color#readme
* (c) 2023 Jukka Kurkela
* Released under the MIT License
*/

/*!
* Chart.js v4.4.3
* https://www.chartjs.org
* (c) 2024 Chart.js Contributors
* Released under the MIT License
*/
1 change: 1 addition & 0 deletions frontend/dist/bundle.js.map
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

168 changes: 168 additions & 0 deletions frontend/dist/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,168 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GPU Usage Calculator</title>
<link href="styles.css" rel="stylesheet" />
<script src="bundle.js" defer></script>
</head>
<body>
<div class="container">
<h1>GPU Usage Calculator for AI Model Training</h1>
<img
src="https://images.pexels.com/photos/17483874/pexels-photo-17483874.png?auto=compress&cs=tinysrgb&h=350"
alt="AI Neural Network"
class="hero-image"
/>

<div class="calculator">
<div class="input-section">
<h2>
<img
src="https://images.pexels.com/photos/4937226/pexels-photo-4937226.jpeg?auto=compress&cs=tinysrgb&h=350"
alt="AI Model Architecture"
/>
Model Parameters
</h2>
<div class="form-group">
<label>Precision:</label>
<div class="toggle-buttons">
<button class="toggle-btn active" id="mixedPrecision">
mixed
</button>
<button class="toggle-btn" id="fullPrecision">full (fp32)</button>
</div>
</div>
<div class="form-group">
<label>Optimizer:</label>
<div class="toggle-buttons">
<button class="toggle-btn active" id="adamOptimizer">Adam</button>
<button class="toggle-btn" id="sgdOptimizer">SGD</button>
</div>
<div class="checkbox-container">
<label for="momentum"
>Momentum <input type="checkbox" id="momentum" checked
/></label>
</div>
<div class="form-group">
<label for="numGPUs">Sequence Length:</label>
<input type="number" id="sequenceLength" value="128" />
</div>
<div class="form-group">
<label for="batchSize">Batch size:</label>
<input type="number" id="batchSize" min="1" value="32" required />
</div>
<div class="form-group">
<label for="numGPUs">Number of GPUs:</label>
<input type="number" id="numGPUs" value="4" />
</div>

<!-- <h2>
<img
src="https://images.pexels.com/photos/3993917/pexels-photo-3993917.jpeg?auto=compress&cs=tinysrgb&h=350"
alt="GPU Chip"
/>
GPU Selection
</h2> -->
<!-- <div class="form-group">
<label for="gpuModel">Select GPU model:</label>
<select id="gpuModel" required>
<option value="">Choose a GPU</option>
<option value="rtx3090">NVIDIA RTX 3090</option>
<option value="rtx3080">NVIDIA RTX 3080</option>
<option value="v100">NVIDIA Tesla V100</option>
<option value="a100">NVIDIA A100</option>
</select>
</div> -->

<h2>
<img
src="https://images.pexels.com/photos/8520081/pexels-photo-8520081.jpeg?auto=compress&cs=tinysrgb&h=350"
alt="Training Progress"
/>
Training Details
</h2>
<div class="form-group">
<label for="parametersPreset">Parameters Preset:</label>
<select id="parametersPreset">
<option value="microsoft/phi-1_5">microsoft/phi-1_5</option>
</select>
</div>
<div class="form-group">
<label for="numParameters"
>Number of Parameters (billions):</label
>
<input
type="number"
id="numParameters"
value="123456789"
step="0.001"
/>
</div>
<div class="form-group">
<label for="numLayers">Number of Layers:</label>
<input type="number" id="numLayers" value="12" />
</div>
<div class="form-group">
<label for="vocabSize">Vocab Size:</label>
<input type="number" id="vocabSize" value="30522" />
</div>
<div class="form-group">
<label for="hiddenSize">Hidden Size:</label>
<input type="number" id="hiddenSize" value="768" />
</div>
<div class="form-group">
<label for="numAttentionHeads">Number of Attention Heads:</label>
<input type="number" id="numAttentionHeads" value="12" />
</div>
<div class="form-group">
<label for="intermediateSize">Intermediate Size:</label>
<input type="number" id="intermediateSize" value="3072" />
</div>
<div class="form-group">
<label for="numKeyValueHeads">Number of Key Value Heads:</label>
<input type="number" id="numKeyValueHeads" value="12" />
</div>
</div>

<button id="calculateBtn">Calculate GPU Usage</button>
</div>

<div class="results-section">
<h2>Estimation Result</h2>
<div class="toggle-buttons">
<button class="toggle-btn active" id="mibBtn">MiB</button>
<button class="toggle-btn" id="gibBtn">GiB</button>
</div>
<div id="vramChart">
<canvas id="vramChartCanvas"></canvas>
</div>
<p id="totalVRAM"></p>
<div class="vram-details"></div>
</div>
</div>
</div>

<footer>
<div class="social-icons">
<a href="#"
><img
src="https://images.pexels.com/photos/267350/pexels-photo-267350.jpeg?auto=compress&cs=tinysrgb&h=350"
alt="Social Media"
/></a>
<a href="#"
><img
src="https://images.pexels.com/photos/267350/pexels-photo-267350.jpeg?auto=compress&cs=tinysrgb&h=350"
alt="Social Media"
/></a>
<a href="#"
><img
src="https://images.pexels.com/photos/267350/pexels-photo-267350.jpeg?auto=compress&cs=tinysrgb&h=350"
alt="Social Media"
/></a>
</div>
<p>&copy; 2023 GPU Usage Calculator. All rights reserved.</p>
</footer>
</body>
</html>
Loading
Loading