Added Creation and delete of LLM
This commit is contained in:
+1
-1
@@ -3,7 +3,7 @@
|
||||
|
||||
<div class="chat-input-container mb-5">
|
||||
<div class="textarea-wrapper">
|
||||
<textarea {% if not IsLogin or not HaveKey %}disabled{% endif %} class="textarea"
|
||||
<textarea {% if not IsLogin or not HaveKey %}disabled{% endif %} class="textarea has-fixed-size"
|
||||
placeholder="Type your message here..." name="message" oninput="toggleSendButton()"
|
||||
id="chat-input-textarea"></textarea>
|
||||
<div class="button-group">
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div class="dropdown is-hoverable is-up is-right">
|
||||
<div class="dropdown is-hoverable is-up is-right" id="models-dropdown">
|
||||
<div class="dropdown-trigger">
|
||||
<button class="button is-small" aria-haspopup="true" aria-controls="dropdown-menu4">
|
||||
<span class="icon"><i class="fa-solid fa-robot"></i></span>
|
||||
@@ -6,7 +6,7 @@
|
||||
</div>
|
||||
<div class="dropdown-menu" id="dropdown-menu4" role="menu">
|
||||
<div class="dropdown-content is-small">
|
||||
<div class="dropdown-item">
|
||||
<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;"
|
||||
@@ -17,122 +17,211 @@
|
||||
<span>{{ LLM.Name }}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div class="is-flex is-justify-content-flex-end">
|
||||
<button class="button is-small is-primary is-outlined mr-2">
|
||||
<div class="is-flex is-justify-content-space-between mt-3">
|
||||
<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-pen"></i>
|
||||
</span>
|
||||
</button>
|
||||
<button class="button is-small is-success is-outlined">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-plus"></i>
|
||||
<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 %}
|
||||
</select>
|
||||
</div>
|
||||
<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>
|
||||
let lastSelectedIndex = null;
|
||||
<script>
|
||||
document.getElementById('temperature-slider').addEventListener('input', function () {
|
||||
document.getElementById('temperature-slider-output').innerHTML = this.value;
|
||||
})
|
||||
|
||||
document.addEventListener('keydown', function (event) {
|
||||
if (event.key === 'Shift') {
|
||||
document.body.classList.add('shift-pressed');
|
||||
}
|
||||
});
|
||||
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.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.body.classList.remove('shift-pressed');
|
||||
lastSelectedIndex = null;
|
||||
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');
|
||||
});
|
||||
|
||||
// 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');
|
||||
}
|
||||
document.addEventListener('keydown', function (event) {
|
||||
if (event.key === 'Shift') {
|
||||
document.body.classList.add('shift-pressed');
|
||||
}
|
||||
});
|
||||
|
||||
window.getSelection().removeAllRanges();
|
||||
}
|
||||
});
|
||||
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.body.classList.remove('shift-pressed');
|
||||
lastSelectedIndex = null;
|
||||
|
||||
function toggleSelection(element) {
|
||||
// Remove all "shiftselected" classes
|
||||
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');
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
elements[i].classList.remove('shiftselected');
|
||||
}
|
||||
toggleSendButton();
|
||||
}
|
||||
|
||||
document.addEventListener('click', function (event) {
|
||||
if (event.shiftKey) {
|
||||
event.preventDefault();
|
||||
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;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function getSelectedModelsIDs() {
|
||||
var selectedModelsIDs = [];
|
||||
var selectedModels = document.getElementsByClassName('selected');
|
||||
for (var i = 0; i < selectedModels.length; i++) {
|
||||
selectedModelsIDs.push(selectedModels[i].getAttribute('value'));
|
||||
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');
|
||||
}
|
||||
}
|
||||
return selectedModelsIDs.length > 0 ? JSON.stringify(selectedModelsIDs) : '[]';
|
||||
}
|
||||
</script>
|
||||
lastSelectedIndex = null;
|
||||
|
||||
<style>
|
||||
.selected {
|
||||
border: 2px solid #126d0f;
|
||||
border-radius: 4px;
|
||||
padding: 1px;
|
||||
margin: 2px;
|
||||
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();
|
||||
}
|
||||
|
||||
.unselected {
|
||||
border-radius: 4px;
|
||||
padding: 3px;
|
||||
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>
|
||||
|
||||
.shiftselected {
|
||||
background: #126d0f;
|
||||
border-radius: 4px;
|
||||
padding: 1px;
|
||||
margin: 2px;
|
||||
}
|
||||
<style>
|
||||
.selected {
|
||||
border: 2px solid #126d0f;
|
||||
border-radius: 4px;
|
||||
padding: 1px;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.shift-pressed *::selection {
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
.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 %}
|
||||
@@ -10,7 +10,7 @@
|
||||
<div class="dropdown-item">
|
||||
<div class="field">
|
||||
<form id="api-keys-form" hx-post="/addKeys" hx-trigger="submit" hx-target="#api-keys-status">
|
||||
<div class="field has-addons">
|
||||
<div class="field has-addons is-hidden" id="openai-field">
|
||||
<p class="control has-icons-left is-expanded">
|
||||
<input class="input is-small {% if OpenaiExists %}is-success{% endif %}" type="text"
|
||||
{%if not IsLogin %}disabled{% endif %} placeholder="OpenAI API key"
|
||||
@@ -20,7 +20,7 @@
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="field has-addons">
|
||||
<div class="field has-addons is-hidden" id="anthropic-field">
|
||||
<p class="control has-icons-left is-expanded">
|
||||
<input class="input is-small {% if AnthropicExists %}is-success{% endif %}" type="text"
|
||||
{% if not IsLogin %}disabled{% endif %} placeholder="Anthropic API key"
|
||||
@@ -30,7 +30,7 @@
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="field has-addons">
|
||||
<div class="field has-addons is-hidden" id="mistral-field">
|
||||
<p class="control has-icons-left is-expanded">
|
||||
<input class="input is-small {% if MistralExists %}is-success{% endif %}" type="text"
|
||||
{%if not IsLogin %}disabled{% endif %} placeholder="Mistral API key"
|
||||
@@ -40,7 +40,8 @@
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="field has-addons" title="Gemini is unavailable because of Europe">
|
||||
<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">
|
||||
<input class="input is-small {% if GoogleExists %}is-success{% endif %}" type="text"
|
||||
disabled placeholder="Google API key" name="google_key" autocomplete="off">
|
||||
@@ -49,17 +50,17 @@
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="field has-addons">
|
||||
<div class="field has-addons is-hidden" id="goose-field">
|
||||
<p class="control has-icons-left is-expanded">
|
||||
<input class="input is-small {% if GooseaiExists %}is-success{% endif %}" type="text"
|
||||
placeholder="Gooseai API key" {%if not IsLogin %}disabled{% endif %}
|
||||
{%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">
|
||||
<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"
|
||||
@@ -69,15 +70,23 @@
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="field has-addons">
|
||||
<div class="field has-addons" id="save-field">
|
||||
<p class="control">
|
||||
<button {% if not IsLogin %}disabled{% endif %} type="submit" class="button is-small">
|
||||
<button disabled id="save-keys-button" type="submit" class="button is-small">
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-check"></i>
|
||||
</span>
|
||||
<span>Save keys</span>
|
||||
</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button id="toggle-keys-button" type="button"
|
||||
class="button is-small {% if not AnyExists %}is-danger{% endif %}">
|
||||
<span class="icon is-small">
|
||||
<i class="fa-solid fa-chevron-down"></i>
|
||||
</span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
<p id="api-keys-status"></p>
|
||||
@@ -98,4 +107,22 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.getElementById('toggle-keys-button').addEventListener('click', function () {
|
||||
// Do not take the id="save-field"
|
||||
var fields = document.querySelectorAll("#api-keys-form .field.has-addons");
|
||||
var saveButton = document.getElementById('save-keys-button');
|
||||
var toggleIcon = this.querySelector('i');
|
||||
|
||||
fields.forEach(function (field) {
|
||||
if (field.id == "save-field") return;
|
||||
field.classList.toggle('is-hidden');
|
||||
});
|
||||
|
||||
saveButton.disabled = !saveButton.disabled;
|
||||
toggleIcon.classList.toggle('fa-chevron-up');
|
||||
toggleIcon.classList.toggle('fa-chevron-down');
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user