Working selection models

This commit is contained in:
Adrien Bouvais 2024-05-21 22:25:54 +02:00
parent 4505d50a11
commit fd4adcc136
4 changed files with 73 additions and 44 deletions

19
Chat.go
View File

@ -394,12 +394,17 @@ func LoadModelSelectionHandler(c *fiber.Ctx) error {
var llms []LLM
err := edgeClient.Query(context.Background(), `
SELECT LLM {
id,
name,
context,
temperature,
modelInfo : {
modelID,
name
name,
company : {
name,
icon
}
}
}
FILTER .user = global currentUser AND .name != 'none'
@ -408,12 +413,12 @@ func LoadModelSelectionHandler(c *fiber.Ctx) error {
panic(err)
}
for i := 0; i < len(llms); i++ {
// If the modelID len is higher than 15, truncate it
if len(llms[i].Model.ModelID) > 12 {
llms[i].Model.ModelID = llms[i].Model.ModelID[0:12] + "..."
}
}
//for i := 0; i < len(llms); i++ {
// // If the modelID len is higher than 15, truncate it
// if len(llms[i].Model.ModelID) > 12 {
// llms[i].Model.ModelID = llms[i].Model.ModelID[0:12] + "..."
// }
//}
out, err := pongo2.Must(pongo2.FromFile("views/partials/popover-models.html")).Execute(pongo2.Context{
"IsLogin": checkIfLogin(),

View File

@ -2,6 +2,7 @@ package main
import (
"context"
"encoding/json"
"fmt"
"strings"
"sync"
@ -23,7 +24,15 @@ func GeneratePlaceholderHandler(c *fiber.Ctx) error {
// Step 1 I create a User message and send it as output with a placeholder
// that will make a request to GenerateMultipleMessagesHandler when loading
message := c.FormValue("message", "")
selectedLLMIds := []string{"1e5a07c4-12fe-11ef-8da6-67d29b408c53", "3cd15ca8-1433-11ef-9f22-93f2b78c78de", "95774e62-1447-11ef-bfea-33f555b75c17", "af3d8686-1447-11ef-bfea-07d880a979ff", "be7a922a-1478-11ef-a819-238de8775b87"} // TODO Hanle in the UI
var selectedLLMIds []string
err := json.Unmarshal([]byte(c.FormValue("selectedLLMIds")), &selectedLLMIds)
if err != nil {
// Handle the error
panic(err)
}
fmt.Println("SelectedLLMIds:", selectedLLMIds)
var selectedLLMs []LLM
var selectedLLM LLM

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>

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>