gui ml modal view

This commit is contained in:
David Brazda
2023-12-08 19:11:08 +01:00
parent ac11c37e77
commit 523905ece6
8 changed files with 144 additions and 12 deletions

View File

@ -1,3 +1,8 @@
//ML Model GUI section
let model_editor_json
let model_editor_python
$(document).ready(function() {
function fetchModels() {
$.ajax({
@ -14,7 +19,8 @@ $(document).ready(function() {
const models = response.models;
models.forEach(function(model) {
$('#model-list').append(`
<p>${model}
<p>${model}
<span class="inspect-model" data-model="${model}">[🔍]</span>
<span class="download-model" data-model="${model}">[↓]</span>
<span class="delete-model" data-model="${model}">[x]</span>
</p>
@ -24,7 +30,7 @@ $(document).ready(function() {
}
},
error: function(xhr, status, error) {
$('#model-list').html('An error occurred: ' + error);
$('#model-list').html('An error occurred: ' + error + xhr.responseText + status);
}
});
}
@ -40,7 +46,7 @@ $(document).ready(function() {
fetchModels(); // Refresh the list after deletion
},
error: function(xhr, status, error) {
alert('Error deleting model: ' + error);
alert('Error deleting model: ' + error + xhr.responseText + status);
}
});
}
@ -60,7 +66,7 @@ $(document).ready(function() {
alert('Model uploaded successfully');
},
error: function(xhr, status, error) {
alert('Error uploading model: ' + error);
alert('Error uploading model: ' + error + xhr.responseText + status);
}
});
}
@ -86,11 +92,53 @@ $(document).ready(function() {
a.remove();
},
error: function(xhr, status, error) {
alert('Error downloading model: ' + error);
alert('Error downloading model: ' + error + xhr.responseText + status);
}
});
}
}
// Function to fetch metadata
function fetchMetadata(modelName) {
$.ajax({
url: '/model/metadata/' + modelName,
type: 'GET',
beforeSend: function (xhr) {
xhr.setRequestHeader('X-API-Key', API_KEY);
},
success: function(response) {
show_metadata(response, modelName)
},
error: function(xhr, status, error) {
$('#metadata-container').html('Error fetching metadata: ' + error + xhr.responseText + status);
}
});
}
function show_metadata(response, name) {
// var formattedMetadata = '<pre>cfg:' + JSON.stringify(response.cfg, null, 4) + '</pre>';
// formattedMetadata += '<pre>arch_function:' + response.arch_function + '</pre>';
// $('#metadata-container').html(formattedMetadata);
//console.log(response)
console.log(JSON.stringify(response,null,4))
$('#metadata_label').html(name);
require(["vs/editor/editor.main"], () => {
model_editor_json = monaco.editor.create(document.getElementById('toml-editor-container'), {
value: response.cfg_toml,
language: 'toml',
theme: 'tomlTheme-dark',
automaticLayout: true,
readOnly: true
});
model_editor_python = monaco.editor.create(document.getElementById('python-editor-container'), {
value: response.arch_function,
language: 'python',
theme: 'tomlTheme-dark',
automaticLayout: true,
readOnly: true
});
});
}
// Fetch models on page load
fetchModels();
@ -119,6 +167,15 @@ $(document).ready(function() {
uploadModel(formData);
});
// Event handler for the inspect icon
$('#model-list').on('click', '.inspect-model', function() {
if (model_editor_json) {model_editor_json.dispose()}
if (model_editor_python) {model_editor_python.dispose()}
const modelName = $(this).data('model');
fetchMetadata(modelName);
window.$('#modelModal').modal('show');
});
//Handler to download the model
$('#model-list').on('click', '.download-model', function() {
const modelName = $(this).data('model');