Added Creation and delete of LLM
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
<div class="dropdown is-hoverable is-up is-right">
|
||||
<div class="dropdown is-hoverable is-up is-right" id="models-dropdown">
|
||||
<div class="dropdown-trigger">
|
||||
<button class="button is-small" aria-haspopup="true" aria-controls="dropdown-menu4">
|
||||
<span class="icon"><i class="fa-solid fa-robot"></i></span>
|
||||
@@ -6,7 +6,7 @@
|
||||
</div>
|
||||
<div class="dropdown-menu" id="dropdown-menu4" role="menu">
|
||||
<div class="dropdown-content is-small">
|
||||
<div class="dropdown-item">
|
||||
<div class="dropdown-item" id="models-list">
|
||||
{% for LLM in LLMs %}
|
||||
<!-- Added "has-text" as a default class -->
|
||||
<div class="icon-text has-text unselected" onclick="toggleSelection(this)" style="cursor: pointer;"
|
||||
@@ -17,122 +17,211 @@
|
||||
<span>{{ LLM.Name }}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div class="is-flex is-justify-content-flex-end">
|
||||
<button class="button is-small is-primary is-outlined mr-2">
|
||||
<div class="is-flex is-justify-content-space-between mt-3">
|
||||
<button class="button is-small is-danger is-outlined" hx-get="/deleteLLM" hx-swap="outerHTML"
|
||||
hx-target="#models-dropdown" hx-confirm="Are you sure?" hx-trigger="click"
|
||||
hx-vals="js:{selectedLLMIds: getSelectedModelsIDs()}">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-pen"></i>
|
||||
</span>
|
||||
</button>
|
||||
<button class="button is-small is-success is-outlined">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-plus"></i>
|
||||
<i class="fa-solid fa-xmark"></i>
|
||||
</span>
|
||||
</button>
|
||||
<div>
|
||||
<button disabled class="button is-small is-primary mr-2 ml-5">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-pen"></i>
|
||||
</span>
|
||||
</button>
|
||||
<button class="button is-small is-success is-outlined" id="create-model-button">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-plus"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="dropdown-item is-hidden" id="models-creation">
|
||||
<form id="create-model-form" hx-post="/createLLM" hx-target="#models-dropdown" hx-swap="outerHTML">
|
||||
<input class="input is-small mb-3" type="text" id="model-name-input" name="model-name-input"
|
||||
placeholder="Model name">
|
||||
<div class="select is-fullwidth is-small mb-3" id="model-id-input">
|
||||
<select name="selectedLLMId">
|
||||
{% for modelInfo in ModelInfos %}
|
||||
<option value="{{ modelInfo.ModelID }}">{{ modelInfo.ModelID }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<p><small>Temperature:</small></p>
|
||||
<input class="slider is-small mb-3" step="0.05" min="0" max="1" value="0" type="range"
|
||||
id="temperature-slider" name="temperature-slider">
|
||||
<output id="temperature-slider-output">0</output>
|
||||
<p><small>System prompt:</small></p>
|
||||
<textarea class="textarea is-small mb-5 has-fixed-size" id="model-prompt-input"
|
||||
name="model-prompt-input"></textarea>
|
||||
<div class="is-flex is-justify-content-flex-end">
|
||||
<button class="button is-small is-danger is-outlined mr-2" id="cancel-create-model-button"
|
||||
type="button">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-xmark"></i>
|
||||
</span>
|
||||
</button>
|
||||
<button class="button is-small is-success is-outlined" id="create-model-button" type="submit">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-check"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let lastSelectedIndex = null;
|
||||
<script>
|
||||
document.getElementById('temperature-slider').addEventListener('input', function () {
|
||||
document.getElementById('temperature-slider-output').innerHTML = this.value;
|
||||
})
|
||||
|
||||
document.addEventListener('keydown', function (event) {
|
||||
if (event.key === 'Shift') {
|
||||
document.body.classList.add('shift-pressed');
|
||||
}
|
||||
});
|
||||
document.getElementById('create-model-button').addEventListener('click', function () {
|
||||
document.getElementById('models-list').classList.add('is-hidden');
|
||||
document.getElementById('models-creation').classList.remove('is-hidden');
|
||||
});
|
||||
|
||||
document.addEventListener('keyup', function (event) {
|
||||
// If Shift is press and id="chat-input-textarea" not focused
|
||||
if (event.key === 'Shift' && document.activeElement.id !== 'chat-input-textarea') {
|
||||
document.body.classList.remove('shift-pressed');
|
||||
lastSelectedIndex = null;
|
||||
document.getElementById('cancel-create-model-button').addEventListener('click', function () {
|
||||
document.getElementById('models-list').classList.remove('is-hidden');
|
||||
document.getElementById('models-creation').classList.add('is-hidden');
|
||||
});
|
||||
|
||||
// Remove all "shiftselected" classes
|
||||
const elements = Array.from(document.getElementsByClassName('icon-text'));
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
elements[i].classList.remove('shiftselected');
|
||||
}
|
||||
document.addEventListener('keydown', function (event) {
|
||||
if (event.key === 'Shift') {
|
||||
document.body.classList.add('shift-pressed');
|
||||
}
|
||||
});
|
||||
|
||||
window.getSelection().removeAllRanges();
|
||||
}
|
||||
});
|
||||
document.addEventListener('keyup', function (event) {
|
||||
// If Shift is press and id="chat-input-textarea" not focused
|
||||
if (event.key === 'Shift' && document.activeElement.id !== 'chat-input-textarea') {
|
||||
document.body.classList.remove('shift-pressed');
|
||||
lastSelectedIndex = null;
|
||||
|
||||
function toggleSelection(element) {
|
||||
// Remove all "shiftselected" classes
|
||||
const elements = Array.from(document.getElementsByClassName('icon-text'));
|
||||
const index = elements.indexOf(element);
|
||||
|
||||
if (document.body.classList.contains('shift-pressed') && lastSelectedIndex !== null) {
|
||||
const [start, end] = [lastSelectedIndex, index].sort((a, b) => a - b);
|
||||
let allSelected = true;
|
||||
for (let i = start; i <= end; i++) {
|
||||
if (!elements[i].classList.contains('selected')) {
|
||||
allSelected = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
for (let i = start; i <= end; i++) {
|
||||
if (allSelected) {
|
||||
elements[i].classList.remove('selected');
|
||||
elements[i].classList.add('unselected');
|
||||
} else {
|
||||
elements[i].classList.add('selected');
|
||||
elements[i].classList.remove('unselected');
|
||||
}
|
||||
}
|
||||
lastSelectedIndex = null;
|
||||
|
||||
const elements2 = Array.from(document.getElementsByClassName('icon-text'));
|
||||
for (let i = 0; i < elements2.length; i++) {
|
||||
elements2[i].classList.remove('shiftselected');
|
||||
}
|
||||
} else if (document.body.classList.contains('shift-pressed') && lastSelectedIndex === null) {
|
||||
lastSelectedIndex = index;
|
||||
element.classList.toggle('shiftselected');
|
||||
} else {
|
||||
element.classList.toggle('selected');
|
||||
element.classList.toggle('unselected');
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
elements[i].classList.remove('shiftselected');
|
||||
}
|
||||
toggleSendButton();
|
||||
}
|
||||
|
||||
document.addEventListener('click', function (event) {
|
||||
if (event.shiftKey) {
|
||||
event.preventDefault();
|
||||
window.getSelection().removeAllRanges();
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('click', function (event) {
|
||||
if (event.shiftKey) {
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
{% if not DeleteUpdate %}
|
||||
<script>
|
||||
let lastSelectedIndex = null;
|
||||
|
||||
function toggleSelection(element) {
|
||||
const elements = Array.from(document.getElementsByClassName('icon-text'));
|
||||
const index = elements.indexOf(element);
|
||||
|
||||
if (document.body.classList.contains('shift-pressed') && lastSelectedIndex !== null) {
|
||||
const [start, end] = [lastSelectedIndex, index].sort((a, b) => a - b);
|
||||
let allSelected = true;
|
||||
for (let i = start; i <= end; i++) {
|
||||
if (!elements[i].classList.contains('selected')) {
|
||||
allSelected = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function getSelectedModelsIDs() {
|
||||
var selectedModelsIDs = [];
|
||||
var selectedModels = document.getElementsByClassName('selected');
|
||||
for (var i = 0; i < selectedModels.length; i++) {
|
||||
selectedModelsIDs.push(selectedModels[i].getAttribute('value'));
|
||||
for (let i = start; i <= end; i++) {
|
||||
if (allSelected) {
|
||||
elements[i].classList.remove('selected');
|
||||
elements[i].classList.add('unselected');
|
||||
} else {
|
||||
elements[i].classList.add('selected');
|
||||
elements[i].classList.remove('unselected');
|
||||
}
|
||||
}
|
||||
return selectedModelsIDs.length > 0 ? JSON.stringify(selectedModelsIDs) : '[]';
|
||||
}
|
||||
</script>
|
||||
lastSelectedIndex = null;
|
||||
|
||||
<style>
|
||||
.selected {
|
||||
border: 2px solid #126d0f;
|
||||
border-radius: 4px;
|
||||
padding: 1px;
|
||||
margin: 2px;
|
||||
const elements2 = Array.from(document.getElementsByClassName('icon-text'));
|
||||
for (let i = 0; i < elements2.length; i++) {
|
||||
elements2[i].classList.remove('shiftselected');
|
||||
}
|
||||
} else if (document.body.classList.contains('shift-pressed') && lastSelectedIndex === null) {
|
||||
lastSelectedIndex = index;
|
||||
element.classList.toggle('shiftselected');
|
||||
} else {
|
||||
element.classList.toggle('selected');
|
||||
element.classList.toggle('unselected');
|
||||
}
|
||||
toggleSendButton();
|
||||
}
|
||||
|
||||
.unselected {
|
||||
border-radius: 4px;
|
||||
padding: 3px;
|
||||
function getSelectedModelsIDs() {
|
||||
var selectedModelsIDs = [];
|
||||
var selectedModels = document.getElementsByClassName('selected');
|
||||
for (var i = 0; i < selectedModels.length; i++) {
|
||||
selectedModelsIDs.push(selectedModels[i].getAttribute('value'));
|
||||
}
|
||||
return selectedModelsIDs.length > 0 ? JSON.stringify(selectedModelsIDs) : '[]';
|
||||
}
|
||||
</script>
|
||||
|
||||
.shiftselected {
|
||||
background: #126d0f;
|
||||
border-radius: 4px;
|
||||
padding: 1px;
|
||||
margin: 2px;
|
||||
}
|
||||
<style>
|
||||
.selected {
|
||||
border: 2px solid #126d0f;
|
||||
border-radius: 4px;
|
||||
padding: 1px;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.shift-pressed *::selection {
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
.unselected {
|
||||
border-radius: 4px;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.shiftselected {
|
||||
background: #126d0f;
|
||||
border-radius: 4px;
|
||||
padding: 1px;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.shift-pressed *::selection {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
input[type="range"].slider {
|
||||
-webkit-appearance: none;
|
||||
width: 80%;
|
||||
background: transparent;
|
||||
border: 1px solid #2c2c2c;
|
||||
border-radius: 4px;
|
||||
height: 6px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
input[type="range"].slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 2px;
|
||||
background: #126d0f;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type="range"].slider::-moz-range-thumb {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 2px;
|
||||
background: #ffffff;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
{% endif %}
|
||||
Reference in New Issue
Block a user