228 lines
12 KiB
HTML
228 lines
12 KiB
HTML
<div class="dropdown is-up is-right" id="models-dropdown">
|
|
<div class="dropdown-trigger">
|
|
<button class="button is-small" aria-haspopup="true" aria-controls="dropdown-menu3"
|
|
onclick="this.parentElement.parentElement.classList.toggle('is-active')">
|
|
<span class="icon"><i class="fa-solid fa-robot"></i></span>
|
|
</button>
|
|
</div>
|
|
<div class="dropdown-menu" id="dropdown-menu3" role="menu">
|
|
<div class="dropdown-content">
|
|
<div class="dropdown-item" id="models-list">
|
|
<div id="llm-list">
|
|
{% for LLM in LLMs %}
|
|
<div class="icon-text has-text unselected icon-llm" data-id="{{ LLM.ID.String() }}"
|
|
style="cursor: pointer;" onclick="toggleSelection(this)">
|
|
<span class="icon">
|
|
<img src="{{ LLM.Model.Company.Icon }}" />
|
|
</span>
|
|
<span>{{ LLM.Name }}</span>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="is-flex is-justify-content-space-between mt-4">
|
|
<button disabled class="button is-small is-danger" hx-get="/deleteLLM" hx-swap="outerHTML"
|
|
hx-target="#models-dropdown" hx-confirm="Are you sure?" hx-trigger="click"
|
|
hx-vals="js:{selectedLLMIds: getSelectedModelsIDs()}" id="delete-model-button">
|
|
<span class="icon">
|
|
<i class="fa-solid fa-trash"></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" autocomplete="off">
|
|
<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 %}
|
|
{% if IsSub %}<option value="custom">Inference Endpoints</option> {% endif %}
|
|
</select>
|
|
</div>
|
|
<input class="input is-small mb-3 is-hidden" type="text" id="model-cid-input" name="model-cid-input"
|
|
placeholder="Model id" autocomplete="off">
|
|
<input class="input is-small mb-3 is-hidden" type="text" id="model-url-input" name="model-url-input"
|
|
placeholder="URL (with /v1/chat/completions)" autocomplete="off">
|
|
<input class="input is-small mb-3 is-hidden" type="text" id="model-key-input" name="model-key-input"
|
|
placeholder="Token" autocomplete="off">
|
|
<p><small>Temperature:</small></p>
|
|
<input class="slider is-small mb-3" step="0.05" min="0" max="2" 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-3" id="cancel-create-model-button"
|
|
type="button">
|
|
<span class="icon">
|
|
<i class="fa-solid fa-xmark"></i>
|
|
</span>
|
|
</button>
|
|
<button disabled class="button is-small is-success" id="confirm-create-model-button"
|
|
type="submit">
|
|
<span class="icon">
|
|
<i class="fa-solid fa-check"></i>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
var sortable = new Sortable(document.getElementById('llm-list'), {
|
|
animation: 150,
|
|
onEnd: function (evt) {
|
|
var items = evt.to.children;
|
|
var updates = [];
|
|
for (var i = 0; i < items.length; i++) {
|
|
var id = items[i].getAttribute('data-id');
|
|
var position = i + 1;
|
|
updates.push({ id: id, position: position });
|
|
}
|
|
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open('POST', '/updateLLMPositionBatch', true);
|
|
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
|
|
xhr.send(JSON.stringify(updates));
|
|
}
|
|
});
|
|
|
|
|
|
|
|
document.getElementById('model-name-input').addEventListener('input', function () {
|
|
document.getElementById('confirm-create-model-button').disabled = this.value === '';
|
|
})
|
|
|
|
document.addEventListener('click', function (event) {
|
|
if (!document.getElementById('models-dropdown').contains(event.target)) {
|
|
document.getElementById('models-dropdown').classList.remove('is-active');
|
|
}
|
|
});
|
|
|
|
document.getElementById('model-id-input').querySelector('select').addEventListener('change', function () {
|
|
const customEndpoint = this.value === 'custom';
|
|
document.getElementById('model-url-input').classList.toggle('is-hidden', !customEndpoint);
|
|
document.getElementById('model-key-input').classList.toggle('is-hidden', !customEndpoint);
|
|
document.getElementById('model-cid-input').classList.toggle('is-hidden', !customEndpoint);
|
|
});
|
|
|
|
document.getElementById('temperature-slider').addEventListener('input', function () {
|
|
document.getElementById('temperature-slider-output').innerHTML = this.value;
|
|
})
|
|
|
|
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.getElementById('cancel-create-model-button').addEventListener('click', function () {
|
|
document.getElementById('models-list').classList.remove('is-hidden');
|
|
document.getElementById('models-creation').classList.add('is-hidden');
|
|
});
|
|
|
|
document.addEventListener('keydown', function (event) {
|
|
if (event.key === 'Shift' && document.activeElement.id !== 'chat-input-textarea' && document.getElementById('models-creation').classList.contains('is-hidden') && document.getElementById('models-dropdown').classList.contains('is-active')) {
|
|
document.body.classList.add('shift-pressed');
|
|
}
|
|
});
|
|
|
|
document.addEventListener('keyup', function (event) {
|
|
if (event.key === 'Shift' && document.activeElement.id !== 'chat-input-textarea' && document.getElementById('models-creation').classList.contains('is-hidden') && document.getElementById('models-dropdown').classList.contains('is-active')) {
|
|
document.body.classList.remove('shift-pressed');
|
|
lastSelectedIndex = null;
|
|
|
|
const elements = Array.from(document.getElementsByClassName('icon-text'));
|
|
for (let i = 0; i < elements.length; i++) {
|
|
elements[i].classList.remove('shiftselected');
|
|
}
|
|
|
|
window.getSelection().removeAllRanges();
|
|
}
|
|
});
|
|
|
|
document.addEventListener('click', function (event) {
|
|
if (event.shiftKey) {
|
|
event.preventDefault();
|
|
}
|
|
});
|
|
|
|
let lastSelectedIndex = null;
|
|
|
|
function toggleSelection(element) {
|
|
const elements = Array.from(document.getElementsByClassName('icon-llm'));
|
|
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');
|
|
}
|
|
|
|
// If at least one model is selected, enable the delete button
|
|
if (document.getElementsByClassName('selected icon-llm').length > 0) {
|
|
document.getElementById('delete-model-button').disabled = false;
|
|
} else {
|
|
document.getElementById('delete-model-button').disabled = true;
|
|
}
|
|
|
|
toggleSendButton();
|
|
}
|
|
|
|
function getSelectedModelsIDs() {
|
|
var selectedModelsIDs = [];
|
|
var selectedModels = document.getElementsByClassName('selected icon-llm');
|
|
for (var i = 0; i < selectedModels.length; i++) {
|
|
selectedModelsIDs.push(selectedModels[i].getAttribute('data-id'));
|
|
}
|
|
return selectedModelsIDs.length > 0 ? JSON.stringify(selectedModelsIDs) : '[]';
|
|
}
|
|
|
|
function toggleSendButton() {
|
|
var selectedModels = document.getElementsByClassName('selected');
|
|
var sendButton = document.getElementById('chat-input-send-btn');
|
|
sendButton.disabled = selectedModels.length === 0;
|
|
}
|
|
</script>
|
|
</div> |