230 lines
9.7 KiB
HTML
230 lines
9.7 KiB
HTML
<div class="dropdown is-up is-right" id="models-dropdown">
|
|
<div class="dropdown-trigger">
|
|
<button class="button is-small to-reduce-opacity"
|
|
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.Company.Name }} - {{ modelInfo.Name }}
|
|
</option>
|
|
{% endfor %}
|
|
<option value="{% if IsPremium %}custom{% else %}none{% endif %}">Custom Endpoints</option>
|
|
</select>
|
|
</div>
|
|
<p class="is-hidden" style="color: red;" id="endpoint-error">
|
|
<small>Need premium subscription</small>
|
|
</p>
|
|
<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>Max token (optional):</small>
|
|
</p>
|
|
<input class="input is-small mb-3"
|
|
type="number"
|
|
id="max-token-input"
|
|
name="max-token-input"
|
|
placeholder=""
|
|
autocomplete="off">
|
|
<p>
|
|
<small>System prompt (optional):</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.getElementById('endpoint-error').classList.contains('is-hidden');
|
|
})
|
|
|
|
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);
|
|
|
|
if (this.value === 'none') {
|
|
document.getElementById('endpoint-error').classList.remove('is-hidden');
|
|
document.getElementById('confirm-create-model-button').disabled = true;
|
|
} else {
|
|
document.getElementById('endpoint-error').classList.add('is-hidden');
|
|
document.getElementById('confirm-create-model-button').disabled = false;
|
|
}
|
|
});
|
|
|
|
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();
|
|
}
|
|
});
|
|
</script>
|
|
</div>
|