:gem: [Feature] New temperature select

apps/llm_mixer/index.html

@@ -22,34 +22,47 @@
         <div class="container">
             <div id="messagers-container" class="container mt-3"></div>
             <div id="user-interactions" class="container fixed-bottom mb-3">
-                <div class="mt-2">
+                <div class="mt-2 row no-gutters">
                     <div class="col-auto">
                         <select
                             class="form-select"
                             id="available-models-select"
+                            title="Available Models"
+                        ></select>
+                    </div>
+                    <div class="col-auto">
+                        <select
+                            class="form-select"
+                            id="temperature-select"
+                            title="Temperature"
+                        ></select>
+                    </div>
+                    <div class="col-4">
+                        <select
+                            class="form-select"
+                            id="chat-history-select"
+                            title="Chat History"
                         ></select>
                     </div>
                 </div>
-                <div class="mt-2">
-                    <div class="row no-gutters">
-                        <div class="col-auto pl-3 pr-0">
-                            <button id="new-chat-session" class="btn px-0">
-                                <i class="fa fa-circle-plus"></i>
-                            </button>
-                        </div>
-                        <div class="col px-0">
-                            <textarea
-                                id="user-input"
-                                class="form-control"
-                                rows="1"
-                                placeholder="Typing here ..."
-                            ></textarea>
-                        </div>
-                        <div class="col-auto pr-3 pl-0">
-                            <button id="send-user-input" class="btn px-0">
-                                <i class="fa fa-paper-plane"></i>
-                            </button>
-                        </div>
+                <div class="mt-2 row no-gutters">
+                    <div class="col-auto pl-3 pr-0">
+                        <button id="new-chat-session" class="btn px-0">
+                            <i class="fa fa-circle-plus"></i>
+                        </button>
+                    </div>
+                    <div class="col px-0">
+                        <textarea
+                            id="user-input"
+                            class="form-control"
+                            rows="1"
+                            placeholder="Typing here ..."
+                        ></textarea>
+                    </div>
+                    <div class="col-auto pr-3 pl-0">
+                        <button id="send-user-input" class="btn px-0">
+                            <i class="fa fa-paper-plane"></i>
+                        </button>
                     </div>
                 </div>
                 <div class="mt-3">

apps/llm_mixer/js/chat_operator.js

@@ -2,8 +2,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");
+let temperature_select = $("#temperature-select");
 
 export function create_messager(
     role,
@@ -25,6 +25,10 @@ export function get_selected_llm_model() {
     return available_models_select.val();
 }
 
+export function get_selected_temperature() {
+    return temperature_select.val();
+}
+
 export function get_latest_messager_container() {
     return messager_list.messagers_container.children().last();
 }

apps/llm_mixer/js/llm_models_loader.js

@@ -17,3 +17,20 @@ export async function setup_available_models_on_select(default_option = null) {
     });
     console.log(`Default model: ${select.val()}`);
 }
+
+export async function setup_temperature_on_select(default_option = null) {
+    var select = $("#temperature-select");
+    select.empty();
+    if (default_option === null) {
+        default_option = "0";
+    }
+    for (let i = 10; i >= 0; i--) {
+        const value = i / 10;
+        const option = new Option(value, value);
+        select.append(option);
+        if (value === Number(default_option)) {
+            $(option).prop("selected", true);
+        }
+    }
+    console.log(`Default temperature: ${select.val()}`);
+}

apps/llm_mixer/js/main.js

@@ -1,4 +1,7 @@
-import { setup_available_models_on_select } from "./llm_models_loader.js";
+import {
+    setup_available_models_on_select,
+    setup_temperature_on_select,
+} from "./llm_models_loader.js";
 import { ButtonsBinder } from "./buttons_binder.js";
 var user_input_history = [];
 var user_input_history_idx = 0;
@@ -30,6 +33,7 @@ function register_user_input_callbacks() {
     // console.log(user_input_history);
     // request_llm();
     setup_available_models_on_select();
+    setup_temperature_on_select();
     let buttons_binder = new ButtonsBinder();
     buttons_binder.bind();