254 lines
11 KiB
HTML
254 lines
11 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 is-small">
|
|
<div class="dropdown-item" id="models-list">
|
|
{% for LLM in LLMs %}
|
|
<div class="icon-text has-text unselected" onclick="toggleSelection(this)" style="cursor: pointer;"
|
|
value="{{ LLM.ID.String() }}">
|
|
<span class="icon">
|
|
<img src="{{ LLM.Model.Company.Icon }}" />
|
|
</span>
|
|
<span>{{ LLM.Name }}</span>
|
|
</div>
|
|
{% endfor %}
|
|
<div class="is-flex is-justify-content-space-between mt-4">
|
|
<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-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 %}
|
|
<option value="custom">Custom endpoint</option>
|
|
</select>
|
|
</div>
|
|
<input class="input is-small mb-3 is-hidden" type="text" id="model-cid-input" name="model-cid-input"
|
|
placeholder="Model id">
|
|
<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)">
|
|
<input class="input is-small mb-3 is-hidden" type="text" id="model-key-input" name="model-key-input"
|
|
placeholder="Token">
|
|
<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>
|
|
function toggleDropdown(event) {
|
|
event.stopPropagation();
|
|
document.getElementById('models-dropdown').classList.toggle('is-active');
|
|
}
|
|
|
|
function closeDropdown(event) {
|
|
if (!document.getElementById('models-dropdown').contains(event.target)) {
|
|
document.getElementById('models-dropdown').classList.remove('is-active');
|
|
}
|
|
}
|
|
|
|
document.addEventListener('click', closeDropdown);
|
|
|
|
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.body.classList.add('shift-pressed');
|
|
}
|
|
});
|
|
|
|
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.getElementById('models-creation').classList.contains('is-hidden')) {
|
|
document.body.classList.remove('shift-pressed');
|
|
lastSelectedIndex = null;
|
|
|
|
// 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');
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|
|
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');
|
|
}
|
|
toggleSendButton();
|
|
}
|
|
|
|
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>
|
|
|
|
<style>
|
|
.selected {
|
|
border: 2px solid #126d0f;
|
|
border-radius: 4px;
|
|
padding: 1px;
|
|
margin: 2px;
|
|
}
|
|
|
|
.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 %} |