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

Added Creation and delete of LLM

Browse Source
This commit is contained in:
Adrien Bouvais 2024-05-22 17:41:21 +02:00
parent 0cb115e560
commit 1aa1968747
12 changed files with 365 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
Chat.go
View File

@ -43,6 +43,8 @@ func DeleteMessageHandler(c *fiber.Ctx) error {
}
func LoadChatHandler(c *fiber.Ctx) error {
deleteLLMtoDelete()
if checkIfLogin() {
if getCurrentUserKeys() == nil {
return c.SendString(generateEnterKeyChatHTML())
@ -134,6 +136,7 @@ func GetMessageContentHandler(c *fiber.Ctx) error {
SELECT Message {
content,
llm : {
name,
modelInfo : {
modelID,
name,
@ -153,7 +156,7 @@ func GetMessageContentHandler(c *fiber.Ctx) error {
out := "<div class='message-header'>"
out += "<p>"
out += selectedMessage.LLM.Model.Name
out += "<strong>" + selectedMessage.LLM.Name + "</strong> <small>" + selectedMessage.LLM.Model.ModelID + "</small>"
out += " </p>"
out += "</div>"
out += "<div class='message-body'>"
@ -222,9 +225,11 @@ func generatePricingTableChatHTML() string {
closeBtn := `
<div class="is-flex is-justify-content-flex-end">
<a class="button is-primary is-small" hx-get="/loadChat" hx-target="#chat-container" hx-swap="outerHTML"
<a class="button is-small is-danger is-outlined" hx-get="/loadChat" hx-target="#chat-container" hx-swap="outerHTML"
hx-trigger="click">
Close
<span class="icon">
<i class="fa-solid fa-xmark"></i>
</span>
</a>
</div>`
@ -425,10 +430,7 @@ func LoadKeysHandler(c *fiber.Ctx) error {
return c.SendString(out)
}
func LoadModelSelectionHandler(c *fiber.Ctx) error {
if !checkIfLogin() || !checkIfHaveKey() {
return c.SendString("")
}
func GenerateModelPopoverHTML(refresh bool) string {
openaiExists, anthropicExists, mistralExists, groqExists, gooseaiExists, googleExists := getExistingKeys()
var llms []LLM
@ -447,7 +449,7 @@ func LoadModelSelectionHandler(c *fiber.Ctx) error {
}
}
}
FILTER .user = global currentUser AND .name != 'none'
FILTER .user = global currentUser AND .name != 'none' AND .to_delete = false
`, &llms)
if err != nil {
panic(err)
@ -460,6 +462,8 @@ func LoadModelSelectionHandler(c *fiber.Ctx) error {
// }
//}
modelInfos := GetAvailableModels()
out, err := pongo2.Must(pongo2.FromFile("views/partials/popover-models.html")).Execute(pongo2.Context{
"IsLogin": checkIfLogin(),
"OpenaiExists": openaiExists,
@ -470,12 +474,20 @@ func LoadModelSelectionHandler(c *fiber.Ctx) error {
"GoogleExists": googleExists,
"AnyExists": openaiExists || anthropicExists || mistralExists || groqExists || gooseaiExists || googleExists,
"LLMs": llms,
"ModelInfos": modelInfos,
"DeleteUpdate": refresh,
})
if err != nil {
panic(err)
}
return out
}
return c.SendString(out)
func LoadModelSelectionHandler(c *fiber.Ctx) error {
if !checkIfLogin() || !checkIfHaveKey() {
return c.SendString("")
}
return c.SendString(GenerateModelPopoverHTML(false))
}
func LoadSettingsHandler(c *fiber.Ctx) error {

76
LLM.go
View File

@ -1,31 +1,77 @@
package main
import (
"encoding/json"
"github.com/edgedb/edgedb-go"
"github.com/flosch/pongo2"
"github.com/gofiber/fiber/v2"
)
// LLM stuff
func deleteLLM(c *fiber.Ctx) error {
id := c.FormValue("id")
idUUID, _ := edgedb.ParseUUID(id)
var selectedLLMIds []string
err := json.Unmarshal([]byte(c.FormValue("selectedLLMIds")), &selectedLLMIds)
if err != nil {
// Handle the error
panic(err)
}
for _, id := range selectedLLMIds {
idUUID, _ := edgedb.ParseUUID(id)
err := edgeClient.Execute(edgeCtx, `
UPDATE LLM
FILTER .id = <uuid>$0 AND .user = global currentUser
SET {
to_delete := true
};
`, idUUID)
if err != nil {
panic(err)
}
}
deleteLLMtoDelete()
return c.SendString(GenerateModelPopoverHTML(true))
}
func deleteLLMtoDelete() {
err := edgeClient.Execute(edgeCtx, `
DELETE LLM
FILTER .id = <uuid>$0;
`, idUUID)
delete LLM
filter .to_delete = true and not exists(
select Message filter .llm = LLM
);
`)
if err != nil {
panic(err)
}
}
func createLLM(c *fiber.Ctx) error {
name := c.FormValue("model-name-input")
modelID := c.FormValue("selectedLLMId")
temperature := c.FormValue("temperature-slider")
systemPrompt := c.FormValue("model-prompt-input")
// Transform the temperature to a float
temperatureparsed, err := json.Marshal(temperature)
if err != nil {
panic(err)
}
temperatureFloat := float32(temperatureparsed[1])
err = edgeClient.Execute(edgeCtx, `
INSERT LLM {
name := <str>$0,
context := <str>$1,
temperature := <float32>$2,
modelInfo := (SELECT ModelInfo FILTER .modelID = <str>$3 LIMIT 1),
user := global currentUser
}
`, name, systemPrompt, temperatureFloat, modelID)
if err != nil {
panic(err)
}
return c.SendString("")
}
func openLlmModal(c *fiber.Ctx) error {
out, err := pongo2.Must(pongo2.FromFile("views/partials/modal-llm-setting.html")).Execute(pongo2.Context{})
if err != nil {
panic(err)
}
return c.SendString(out)
return c.SendString(GenerateModelPopoverHTML(true))
}

2
Request.go
View File

@ -32,8 +32,6 @@ func GeneratePlaceholderHandler(c *fiber.Ctx) error {
panic(err)
}
fmt.Println("SelectedLLMIds:", selectedLLMIds)
var selectedLLMs []LLM
var selectedLLM LLM

11
dbschema/default.esdl
View File

@ -78,8 +78,15 @@ module default {
required name: str;
required context: str;
required temperature: float32;
required modelInfo: ModelInfo;
required user: User;
required to_delete: bool {
default := false;
};
required modelInfo: ModelInfo {
on target delete allow;
};
required user: User {
on target delete allow;
};
}
type Company {

12
dbschema/migrations/00030-m1qq2mn.edgeql Normal file
View File

@ -0,0 +1,12 @@
CREATE MIGRATION m1qq2mnk2l2bepeoatd2gxq2ygi73apnxwojog2g533h36e576rx6q
ONTO m1cokoqujl36nbvnldmofdwszcmsp6ulre23r5gx52d65aqnr64cca
{
ALTER TYPE default::LLM {
ALTER LINK modelInfo {
ON TARGET DELETE ALLOW;
};
ALTER LINK user {
ON TARGET DELETE ALLOW;
};
};
};

9
dbschema/migrations/00031-m1q5wil.edgeql Normal file
View File

@ -0,0 +1,9 @@
CREATE MIGRATION m1q5wildsqhzj62drznyoi2bahpej6errkzhol7xs2qwootecjlcdq
ONTO m1qq2mnk2l2bepeoatd2gxq2ygi73apnxwojog2g533h36e576rx6q
{
ALTER TYPE default::LLM {
CREATE REQUIRED PROPERTY to_delete: std::bool {
SET REQUIRED USING (<std::bool>{false});
};
};
};

9
dbschema/migrations/00032-m1nonmd.edgeql Normal file
View File

@ -0,0 +1,9 @@
CREATE MIGRATION m1nonmddagbu3p7dcqmy3bvxkwinjfosg7iuna5xxwruig4rcnr4yq
ONTO m1q5wildsqhzj62drznyoi2bahpej6errkzhol7xs2qwootecjlcdq
{
ALTER TYPE default::LLM {
ALTER PROPERTY to_delete {
SET default := false;
};
};
};

2
main.go
View File

@ -77,7 +77,6 @@ func main() {
// Settings routes
app.Post("/addKeys", addKeys)
app.Get("/modal", openLlmModal)
// Popovers
app.Get("/loadModelSelection", LoadModelSelectionHandler)
@ -93,6 +92,7 @@ func main() {
// LLM
app.Get("deleteLLM", deleteLLM)
app.Post("/createLLM", createLLM)
app.Get("/test", func(c *fiber.Ctx) error {
fmt.Println("Hello from test")

19
utils.go
View File

@ -133,3 +133,22 @@ func Message2RequestMessage(messages []Message) []RequestMessage {
}
return m
}
func GetAvailableModels() []ModelInfo {
// TODO Filter if key is not available
var models []ModelInfo
err := edgeClient.Query(edgeCtx, `
SELECT ModelInfo {
modelID,
name,
company : {
name,
icon
}
} FILTER .modelID != 'none'
`, &models)
if err != nil {
panic(err)
}
return models
}

2
views/chat.html
View File

@ -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">

283
views/partials/popover-models.html
View File

@ -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 %}

47
views/partials/popover-settings.html
View File

@ -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>