adrien/Jade
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Working custom endpoint

Browse Source
This commit is contained in:
adrien
2024-05-23 00:26:13 +02:00
parent 1603532150
commit 103d6371c8
9 changed files with 102 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/partials/popover-models.html
+33 -7
View File
@@ -1,14 +1,14 @@
<div class="dropdown is-hoverable is-up is-right" id="models-dropdown">
<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-menu4">
<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-menu4" role="menu">
<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 %}
<!-- Added "has-text" as a default class -->
<div class="icon-text has-text unselected" onclick="toggleSelection(this)" style="cursor: pointer;"
value="{{ LLM.ID.String() }}">
<span class="icon">
@@ -17,7 +17,7 @@
<span>{{ LLM.Name }}</span>
</div>
{% endfor %}
<div class="is-flex is-justify-content-space-between mt-3">
<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()}">
@@ -38,7 +38,6 @@
</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">
@@ -46,12 +45,18 @@
placeholder="Model name">
<div class="select is-fullwidth is-small mb-3" id="model-id-input">
<select name="selectedLLMId">
<option value="custom">Custom endpoint</option>
{% 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">
@@ -79,6 +84,27 @@
</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;
})