:gem: [Feature] Support chat with selected llm models

apps/llm_mixer/index.html

@@ -14,16 +14,18 @@
         <div class="container">
             <div id="messagers-container" class="mt-3"></div>
             <div class="fixed-bottom m-3">
-                <div class="container-fluid">
+                <div class="container-fluid mt-2">
+                    <div class="col-auto">
+                        <select
+                            class="form-select"
+                            id="available-models-select"
+                        >
+                            <option value="gpt-3.5-turbo">GPT-3.5</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="container-fluid mt-2">
                     <div class="row no-gutters">
-                        <div class="col-auto">
-                            <select
-                                class="form-select"
-                                id="available-models-select"
-                            >
-                                <option value="gpt-3.5-turbo">GPT-3.5</option>
-                            </select>
-                        </div>
                         <div class="col">
                             <textarea
                                 id="user-input"

apps/llm_mixer/js/chat_operator.js

@@ -3,6 +3,8 @@ import { Messager, MessagerList } from "./messager.js";
 let messagers_container = $("#messagers-container");
 let messager_list = new MessagerList(messagers_container);
 
+let available_models_select = $("#available-models-select");
+
 export function create_messager(
     role,
     content = "",
@@ -19,6 +21,10 @@ export function create_messager(
     messager_list.push(messager);
 }
 
+export function get_selected_llm_model() {
+    return available_models_select.val();
+}
+
 export function get_latest_message_viewer() {
     return messagers_container.children().last();
 }

apps/llm_mixer/js/default.css

@@ -31,5 +31,5 @@
 }
 
 #available-models-select {
-    max-width: 180px;
+    max-width: 250px;
 }

apps/llm_mixer/js/llm_models_loader.js

@@ -9,10 +9,11 @@ export async function setup_available_models_on_select(default_option = null) {
     }
 
     available_models.forEach((value, index) => {
-        const option = new Option(value, index);
+        const option = new Option(value, value);
         select.append(option);
         if (value === default_option) {
             $(option).prop("selected", true);
         }
     });
+    console.log(`Default model: ${select.val()}`);
 }

apps/llm_mixer/js/llm_requester.js

@@ -7,21 +7,20 @@ import {
     update_message,
     create_messager,
     get_request_messages,
+    get_selected_llm_model,
 } from "./chat_operator.js";
 
 export class ChatCompletionsRequester {
     constructor(
         prompt,
-        model = "gpt-3.5-turbo",
-        temperature = 0,
-        messages = [],
-        endpoint,
-        cors_proxy
+        model = null,
+        temperature = null,
+        endpoint = null,
+        cors_proxy = null
     ) {
         this.prompt = prompt;
-        this.model = model;
-        this.temperature = temperature;
-        this.messages = messages;
+        this.model = model || get_selected_llm_model() || "gpt-turbo-3.5";
+        this.temperature = temperature !== null ? temperature : 0;
         this.endpoint = endpoint || secrets.openai_endpoint;
         this.cors_proxy = cors_proxy || secrets.cors_proxy;
         this.request_endpoint = this.cors_proxy + this.endpoint;