Working selection models

This commit is contained in:
2024-05-21 22:25:54 +02:00
parent 4505d50a11
commit fd4adcc136
4 changed files with 73 additions and 44 deletions
+2 -1
View File
@@ -25,7 +25,8 @@
</button-->
<button disabled type="submit" class="send-button button is-primary is-small"
hx-get="/generatePlaceholder" hx-swap="beforeend settle:200ms" hx-target="#chat-messages"
id="chat-input-send-btn" class="chat-input" hx-include="[name='message']" onclick="clearTextArea()">
id="chat-input-send-btn" class="chat-input" hx-include="[name='message']"
hx-vals="js:{selectedLLMIds: getSelectedModelsIDs()}" onclick="clearTextArea()">
<span class="icon">
<i class="fa-solid fa-chevron-right"></i>
</span>
+49 -35
View File
@@ -7,41 +7,55 @@
<div class="dropdown-menu" id="dropdown-menu4" role="menu">
<div class="dropdown-content is-small">
<div class="dropdown-item">
<table class="table is-hoverable is-fullwidth is-narrow is-small">
<thead>
<tr>
<th class="is-size-7">Name</th>
<th class="is-size-7">Model</th>
<th class="is-size-7"></th>
<th class="is-size-7"></th>
</tr>
</thead>
<tbody>
{% for LLM in LLMs %}
<tr>
<td class="is-size-6">{{ LLM.Name }}</td>
<td class="is-size-7">{{ LLM.Model.ModelID }}</td>
<td class="is-size-6">
<button hx-get="/modal" hx-target="body" hx-swap="beforeend"
class="button is-primary is-small is-inline-block is-outlined">
<span class="icon">
<i class="fa-solid fa-gear"></i>
</span>
</button>
</td>
<td class="is-size-6">
<button class="button is-danger is-small is-inline-block is-outlined"
style="min-width: auto;">
<span class="icon">
<i class="fa-solid fa-xmark"></i>
</span>
</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% 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">
<img src="{{ LLM.Model.Company.Icon }}" />
</span>
<span>{{ LLM.Name }}</span>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
<script>
function toggleSelection(element) {
// Check if the element currently has the 'has-text-info' class
if (element.classList.contains('selected')) {
// It has 'has-text-info', so remove it and add 'has-text'
element.classList.add('unselected');
element.classList.remove('selected');
} else {
// It doesn't have 'has-text-info', so add it and remove 'has-text'
element.classList.remove('unselected');
element.classList.add('selected');
}
}
function getSelectedModelsIDs() {
var selectedModelsIDs = [];
var selectedModels = document.getElementsByClassName('selected');
for (var i = 0; i < selectedModels.length; i++) {
selectedModelsIDs.push(selectedModels[i].getAttribute('value'));
}
return JSON.stringify(selectedModelsIDs);
}
</script>
<style>
.selected {
border: 2px solid #3273dc;
/* Bulma's primary color */
border-radius: 4px;
padding: 2px;
}
.unselected {
border-radius: 4px;
padding: 4px;
}
</style>