Skip to content

Commit

Permalink
Enhance LLM deploy UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@seokho-son
seokho-son committed Jun 16, 2024
1 parent 507cfa6 commit 1bf62bd
Show file tree
Hide file tree
Showing 2 changed files with 86 additions and 26 deletions.
12 changes: 8 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,10 @@
<!-- json-formatter-js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/json-formatter.umd.min.js"></script>

<!-- datatables -->
<link rel="stylesheet" href="https://cdn.datatables.net/2.0.8/css/dataTables.dataTables.css" />
<script src="https://cdn.datatables.net/2.0.8/js/dataTables.js"></script>

<style>
.map {
width: 100%;
Expand Down Expand Up @@ -239,7 +243,7 @@

<!-- MCIS Provisioning Card -->
<div class="card mb-2">
<div class="card-header">MCIS Provisioning</div>
<div class="card-header">MC-Infra Provisioning</div>
<div class="card-body d-flex flex-column">
<form id="mcis-configuration-form" class="form-row">
<!-- Recommendation Policy Field -->
Expand Down Expand Up @@ -415,7 +419,7 @@

<!-- MCIS Control Card -->
<div class="card mb-2">
<div class="card-header">MCIS Control</div>
<div class="card-header">MC-Infra Control</div>
<div class="card-body d-flex flex-column">
<form id="mcis-control-form" class="form-row">

Expand Down Expand Up @@ -653,7 +657,7 @@

<!-- MCIS Application Card -->
<div class="card mb-2">
<div class="card-header">MCIS Application</div>
<div class="card-header">MC-Infra Application</div>
<div class="card-body d-flex flex-column">
<form id="mcis-application-form" class="form-row">

Expand All @@ -667,10 +671,10 @@
aria-describedby="selectAppLabel">
<option value="Xonotic" selected="selected">FPSGame(Xonotic)</option>
<option value="Nvidia">NvidiaDriver</option>
<option value="vLLM">LLM(vLLM+SelfHostAPI)</option>
<option value="Ollama">LLM(Ollama)</option>
<option value="OllamaPull">LLM(Ollama PullModel)</option>
<option value="OpenWebUI">LLMChat(Open WebUI)</option>
<option value="vLLM">LLM(vLLM+SelfHostAPI)</option>
<option value="Westward">MMORPG(Westward)</option>
<option value="Nginx">WebServer(Nginx)</option>
<option value="WeaveScope">Monitor(WeaveScope)</option>
Expand Down
100 changes: 78 additions & 22 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -730,7 +730,7 @@ function outputAlert(jsonData, type) {
html: '<div id="json-output" class="form-control" style="height: auto; background-color: black; text-align: left; white-space: pre-wrap; word-break: break-all; overflow-wrap: break-word; overflow-x: auto;"></div>',
background: "#0e1746",
showConfirmButton: true,
width: '30%',
width: '40%',
//backdrop: false,
didOpen: () => {
const container = document.getElementById("json-output");
Expand Down Expand Up @@ -1215,6 +1215,13 @@ function createMcis() {
}
window.createMcis = createMcis;


// Define the toggleTable function in the global scope
function toggleTable() {
var table = document.getElementById('fullTable');
table.style.display = table.style.display === 'none' ? 'block' : 'none';
}

function getRecommendedSpec(idx, latitude, longitude) {
var hostname = hostnameElement.value;
var port = portElement.value;
Expand Down Expand Up @@ -1279,7 +1286,7 @@ function getRecommendedSpec(idx, latitude, longitude) {

var struct = {
filter: { policy: policies },
limit: "10",
limit: "30",
priority: { policy: [priorities[recommendationPolicy]] }
};

Expand All @@ -1298,24 +1305,13 @@ function getRecommendedSpec(idx, latitude, longitude) {
console.log(res); // for debug
handleAxiosResponse(res);

if (res.data == null) {
errorAlert("No recommended spec found with the given condition");
return;
}
if (res.data.length == 0) {
if (res.data == null || res.data.length == 0) {
errorAlert("No recommended spec found with the given condition");
return;
}

addRegionMarker(res.data[0].id);
//document.getElementById("latLonInputPairArea").innerHTML += `${res.data[0].id}<br>`;

//displayJsonData(res.data, typeInfo);
// messageJsonOutput.scrollTop = messageJsonOutput.scrollHeight;

// if (tableDisplayEnabled.checked){
// jsonToTable(JSON.stringify(res.data));
// }

var createMcisReqVm = $.extend({}, createMcisReqVmTmplt);
var recommendedSpec = res.data[0];
Expand Down Expand Up @@ -1353,14 +1349,61 @@ function getRecommendedSpec(idx, latitude, longitude) {
acceleratorModel = "<tr><th style='width: 50%;'>AcceleratorModel</th><td><b><span style='color: black;'>" + acceleratorModel + "</span></b></td></tr>"
}


// Show all recommended specs in a table if needed
var tableContent = res.data.map((spec, index) => {
let costPerHour = spec.costPerHour === "100000000" || spec.costPerHour === "" ? "unknown" : spec.costPerHour;
let acceleratorType = spec.acceleratorType === "gpu"
? `<span style='color: red; font-size: larger;'>GPU</span>`
: `<span style='color: black;'>None</span>`;
let acceleratorModel = spec.acceleratorModel === "gpu"
? `<span style='color: red; font-size: larger;'>${spec.acceleratorModel}</span>`
: `<span style='color: black;'>${spec.acceleratorModel}</span>`;

return `
<tr>
<th>${index + 1}</th>
<td>${spec.cspSpecName}</td>
<td>${spec.providerName.toUpperCase()}</td>
<td>${spec.regionName}</td>
<td>${spec.vCPU}</td>
<td>${spec.memoryGiB}</td>
<td>$ ${costPerHour}</td>
<td>${spec.acceleratorCount}</td>
<td>${acceleratorModel}</td>
<td>${spec.acceleratorMemoryGB}</td>
</tr>`;
}).join("");

var tableHTML = `
<table id="recommendationTable" class="display nowrap" style="width:100%; text-align:left;">
<thead>
<tr>
<th> </th>
<th>Spec</th>
<th>CSP</th>
<th>Region</th>
<th>vCPU</th>
<th>Mem</th>
<th>Price</th>
<th>GPUs</th>
<th>Model</th>
<th>Mem</th>
</tr>
</thead>
<tbody>
${tableContent}
</tbody>
</table>`;

Swal.fire({
title: "Recommended Spec and CSP region <br>(select the number for scaling VMs (1 ~ 10))",
width: 700,
title: "Recommended Spec and CSP region <br>",
width: 800,
html:
"<font size=3>" +
"<table style='width:80%; text-align:left; margin-top:20px; margin-left:10px; table-layout: auto;'>" +
"<tr><th style='width: 50%;'>Recommended Spec</th><td><b><span style='color: black; font-size: larger;'>" + res.data[0].cspSpecName + "</span></b></td></tr>" +
"<tr><th style='width: 50%;'>Estimated Price(USD/1H)</th><td><b><span style='color: red; font-size: larger;'>$ " + costPerHour + "</span></b></td></tr>" +
"<tr><th style='width: 50%;'>Estimated Price(USD/1H)</th><td><b><span style='color: red; font-size: larger;'> $ " + costPerHour + " (at least)</span></b></td></tr>" +
"<tr><th style='width: 50%;'>Selected Image OS Type</th><td><b><span style='color: green; font-size: larger;'>" + createMcisReqVm.commonImage + "</span></b></td></tr>" +

"<tr><th style='width: 50%;'>------</th><td><b>" + "" + "</b></td></tr>" +
Expand All @@ -1379,14 +1422,22 @@ function getRecommendedSpec(idx, latitude, longitude) {
acceleratorModel +
"<tr><th style='width: 50%;'>AcceleratorCount</th><td><b>" + res.data[0].acceleratorCount + "</b></td></tr>" +
"<tr><th style='width: 50%;'>AcceleratorMemoryGB</th><td><b>" + res.data[0].acceleratorMemoryGB + "</b></td></tr>" +
"</table><br>" +

`<div style="margin-top: 10px;">` +
`<button id="toggleTableButton" class="btn btn-secondary dropdown-toggle w-100">Show All Recommendations</button>` +
`</div>` +
`<div id="fullTable" style="display:none">${tableHTML}</div>`,

"</table>"
,
inputLabel: 'Enter the number of VMs for scaling (1 ~ 10)',
input: "number",
inputValue: 1,
didOpen: () => {
const input = Swal.getInput();
//input.setSelectionRange(0, input.value.length)
const toggleButton = document.getElementById('toggleTableButton');
toggleButton.addEventListener('click', toggleTable);

$('#recommendationTable').DataTable();
},
inputAttributes: {
autocapitalize: "off",
Expand Down Expand Up @@ -1429,6 +1480,7 @@ function getRecommendedSpec(idx, latitude, longitude) {
}
window.getRecommendedSpec = getRecommendedSpec;


function range_change(obj) {
document.getElementById("myvalue").value = obj.value;
}
Expand Down Expand Up @@ -2710,12 +2762,12 @@ function startApp() {
defaultRemoteCommand[0] =
"OLLAMA_HOST=0.0.0.0:3000 ollama pull $$Func(AssignTask(task='llama3, phi3, mistral, gemma, mixtral, llava, yi, falcon2, solar, llama2'))";
defaultRemoteCommand[1] =
"echo '$$Func(GetPublicIP(target=this, prefix=http://, postfix=:3000))";
"echo '$$Func(GetPublicIP(target=this, prefix=http://, postfix=:3000))'";
defaultRemoteCommand[2] =
"OLLAMA_HOST=0.0.0.0:3000 ollama list";
} else if (selectApp.value == "OpenWebUI") {
defaultRemoteCommand[0] =
"curl -fsSL https://raw.githubusercontent.com/cloud-barista/cb-tumblebug/main/scripts/usecases/llm/deployOpenWebUI.sh | bash -s -- ";
"curl -fsSL https://raw.githubusercontent.com/cloud-barista/cb-tumblebug/main/scripts/usecases/llm/deployOpenWebUI.sh | bash -s -- $$Func(GetPublicIPs(target=this, separator=;, prefix=http://, postfix=:3000))";
defaultRemoteCommand[1] =
"echo '$$Func(GetPublicIP(target=this, prefix=http://))'";
defaultRemoteCommand[2] =
Expand Down Expand Up @@ -2861,6 +2913,10 @@ function statusApp() {
);
cmd.push("chmod +x ~/setgame.sh");
cmd.push("sudo ~/setgame.sh");
} else if (selectApp.value == "Nvidia") {
cmd.push( "nvidia-smi" );
cmd.push("");
cmd.push("");
} else if (selectApp.value == "Nginx") {
cmd.push(
"wget wget https://raw.githubusercontent.com/cloud-barista/cb-tumblebug/main/scripts/setweb.sh -O ~/setweb.sh"
Expand Down

0 comments on commit 1bf62bd

Please sign in to comment.