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

Working swaping llm icons

Browse Source
This commit is contained in:
adrien
2024-05-24 17:13:57 +02:00
parent 435149ad5e
commit 09193a227e
17 changed files with 138 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/layouts/main.html
+2
View File
@@ -14,6 +14,8 @@
<script src="https://unpkg.com/htmx.org@2.0.0-beta4/dist/htmx.js"></script>
<script src="https://unpkg.com/htmx-ext-sse@2.0.0/sse.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>
<script src="/model-selection-menu.js"></script>
<script async src="https://js.stripe.com/v3/pricing-table.js"></script>
</head>
views/partials/popover-models.html
+31 -65
View File
@@ -8,15 +8,17 @@
<div class="dropdown-menu" id="dropdown-menu3" role="menu">
<div class="dropdown-content">
<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 id="llm-list">
{% for LLM in LLMs %}
<div class="icon-text has-text unselected" 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>
{% 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"
@@ -85,6 +87,26 @@
</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 === '';
})
@@ -102,7 +124,6 @@
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;
})
@@ -124,12 +145,10 @@
});
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.getElementById('models-dropdown').classList.contains('is-active')) {
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');
@@ -146,58 +165,6 @@
});
</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;
@@ -248,5 +215,4 @@
background: #ffffff;
cursor: pointer;
}
</style>
{% endif %}
</style>