Create dropdown box to select which model to use in the GUI on startup

This commit is contained in:
Wizzard 2024-03-09 05:43:40 -05:00
parent e5419b0108
commit 437831aea5
6 changed files with 54 additions and 9 deletions

View File

@ -72,6 +72,37 @@ body {
background-color: #2980b9;
color: #ecf0f1;
}
#modelSelectionContainer {
margin-bottom: 20px;
color: #ecf0f1;
}
#modelSelect {
padding: 10px;
border: 1px solid #34495e;
border-radius: 5px;
background-color: #2c3e50;
color: #ecf0f1;
font-family: Arial, sans-serif;
cursor: pointer;
}
#modelSelect:focus {
outline: none;
border-color: #2980b9;
}
label {
color: #ecf0f1;
margin-right: 10px;
}
#modelSelectionContainer {
display: flex;
align-items: center;
justify-content: start;
gap: 10px;
margin-bottom: 10px;
}
@keyframes ellipsis {
0%, 20% {
content: '';

View File

@ -10,6 +10,13 @@
<header>
<h1>Welcome to Kuzco Chat</h1>
</header>
<div id="modelSelectionContainer">
<label for="modelSelect">Choose AI Model:</label>
<select id="modelSelect">
<option value="mistral">Mistral</option>
<option value="llama2">Llama2</option>
</select>
</div>
<main id="chatHistory" class="chat-history">
</main>
<footer>

View File

@ -72,6 +72,7 @@ app.on('window-all-closed', () => {
const kuzcoCore = new KuzcoCore();
ipcMain.handle('send-prompt', async (event, prompt) => {
return await kuzcoCore.sendPrompt(prompt);
});
ipcMain.handle('send-prompt', async (event, { prompt, model }) => {
console.log("Received model in main process:", model);
return await kuzcoCore.sendPrompt(prompt, model);
});

View File

@ -36,7 +36,8 @@ class KuzcoCore {
return fs.existsSync(this.configPath) && this.API_KEY !== '';
}
async sendPrompt(prompt) {
async sendPrompt(prompt, model) {
console.log("Model received in sendPrompt:", model)
try {
const response = await fetch('https://relay.kuzco.xyz/v1/chat/completions', {
method: 'POST',
@ -46,7 +47,7 @@ class KuzcoCore {
},
body: JSON.stringify({
messages: [{ role: 'user', 'content': prompt + '\n' }],
model: 'mistral',
model: model,
stream: false,
}),
});

View File

@ -1,6 +1,6 @@
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('electronAPI', {
sendPrompt: (prompt) => ipcRenderer.invoke('send-prompt', prompt),
sendPrompt: (prompt, model) => ipcRenderer.invoke('send-prompt', { prompt, model }),
onApiKeySaved: (callback) => ipcRenderer.on('api-key-saved', callback),
});
});

View File

@ -17,13 +17,18 @@ function displayMessage(message, sender) {
document.addEventListener('DOMContentLoaded', () => {
const chatForm = document.getElementById('chatForm');
const promptInput = document.getElementById('promptInput');
const modelSelect = document.getElementById('modelSelect');
const sendButton = document.getElementById('sendButton');
const modelSelectionContainer = document.getElementById('modelSelectionContainer');
if (chatForm && promptInput) {
if (chatForm && promptInput && modelSelect) {
chatForm.addEventListener('submit', async (event) => {
event.preventDefault();
const userInput = promptInput.value;
const selectedModel = modelSelect.value;
promptInput.value = '';
modelSelectionContainer.style.display = 'none';
sendButton.disabled = true;
promptInput.disabled = true;
@ -33,7 +38,7 @@ document.addEventListener('DOMContentLoaded', () => {
const typingIndicator = displayTypingIndicator();
try {
const response = await window.electronAPI.sendPrompt(userInput);
const response = await window.electronAPI.sendPrompt(userInput, selectedModel);
const assistantMessage = response.choices[0].message.content.trim();
displayMessage(assistantMessage, 'assistant');
} catch (error) {