Working custom endpoint

This commit is contained in:
2024-05-23 00:26:13 +02:00
parent 1603532150
commit 103d6371c8
9 changed files with 102 additions and 36 deletions
+1 -1
View File
@@ -29,7 +29,7 @@
{% if not message.Hidden %}
<div class="message-header">
<p>
<strong>{{ message.Name }}</strong> <small>{{ message.Model }}</small>
<strong>{{ message.Name }}</strong> <small>{{ message.ModelID }}</small>
</p>
</div>
<div class="message-body">
+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;
})
+13 -12
View File
@@ -40,6 +40,16 @@
</span>
</p>
</div>
<div class="field has-addons is-hidden" id="groq-field">
<p class="control has-icons-left is-expanded">
<input class="input is-small {% if GroqExists %}is-success{% endif %}" type="text"
placeholder="Groq API key" {%if not IsLogin %}disabled{% endif %} name="groq_key"
autocomplete="off">
<span class="icon is-small is-left">
<i class="fas fa-lock"></i>
</span>
</p>
</div>
<div class="field has-addons is-hidden" title="Gemini is unavailable because of Europe"
id="gemini-field">
<p class="control has-icons-left is-expanded">
@@ -50,21 +60,12 @@
</span>
</p>
</div>
<div class="field has-addons is-hidden" id="goose-field">
<div class="field has-addons is-hidden" id="goose-field"
title="GooseAI chat API soon to be available">
<p class="control has-icons-left is-expanded">
<input class="input is-small {% if GooseaiExists %}is-success{% endif %}" type="text"
{%if not IsLogin %}disabled{% endif %} placeholder="Gooseai API key"
name="goose_key" autocomplete="off">
<span class="icon is-small is-left">
<i class="fas fa-lock"></i>
</span>
</p>
</div>
<div class="field has-addons is-hidden" id="groq-field">
<p class="control has-icons-left is-expanded">
<input class="input is-small {% if GroqExists %}is-success{% endif %}" type="text"
placeholder="Groq API key" {%if not IsLogin %}disabled{% endif %} name="groq_key"
autocomplete="off">
name="goose_key" autocomplete="off" disabled>
<span class="icon is-small is-left">
<i class="fas fa-lock"></i>
</span>