Spaces:

Hansimov
/

llm-mixer

Running

App Files Files Community

Hansimov commited on Nov 7, 2023

Commit

4a1d039

•

1 Parent(s): 82b5a4a

:gem: [Feature] Replace text with icon for buttons

Browse files

Files changed (3) hide show

apps/llm_mixer/index.html +13 -7
apps/llm_mixer/js/buttons_binder.js +23 -36
apps/llm_mixer/js/llm_models_loader.js +1 -1

apps/llm_mixer/index.html CHANGED Viewed

@@ -4,11 +4,15 @@
     <head>
         <title>LLM Mixer</title>
-        <link href="./js/common/bootstrap.min.css" rel="stylesheet" />
-        <script src="./js/common/bootstrap.bundle.min.js"></script>
         <script src="./js/common/jquery.min.js"></script>
         <script type="text/javascript" src="./js/common/live.js"></script>
         <link rel="stylesheet" href="./js/default.css" />
     </head>
     <body>
         <div class="container">
@@ -24,6 +28,11 @@
                 </div>
                 <div class="mt-2">
                     <div class="row no-gutters">
                         <div class="col">
                             <textarea
                                 id="user-input"
@@ -33,11 +42,8 @@
                             ></textarea>
                         </div>
                         <div class="col-auto">
-                            <button
-                                id="send-user-input"
-                                class="btn btn-primary"
-                            >
-                                Send
                             </button>
                         </div>
                     </div>

     <head>
         <title>LLM Mixer</title>
+        <link rel="stylesheet" href="./js/common/bootstrap.min.css" />
         <script src="./js/common/jquery.min.js"></script>
         <script type="text/javascript" src="./js/common/live.js"></script>
+        <script src="./js/common/bootstrap.bundle.min.js"></script>
         <link rel="stylesheet" href="./js/default.css" />
+        <link
+            rel="stylesheet"
+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
+        />
     </head>
     <body>
         <div class="container">
                 </div>
                 <div class="mt-2">
                     <div class="row no-gutters">
+                        <div class="col-auto">
+                            <button id="new-chat-session" class="btn">
+                                <i class="fa fa-circle-plus"></i>
+                            </button>
+                        </div>
                         <div class="col">
                             <textarea
                                 id="user-input"
                             ></textarea>
                         </div>
                         <div class="col-auto">
+                            <button id="send-user-input" class="btn">
+                                <i class="fa-solid fa-paper-plane"></i>
                             </button>
                         </div>
                     </div>

apps/llm_mixer/js/buttons_binder.js CHANGED Viewed

@@ -7,13 +7,17 @@ export class ButtonsBinder {
     }
     bind_send_user_input() {
         const button = $("#send-user-input");
         button.click(async () => {
             await this.handle_user_input(button);
         });
         $("#user-input").keypress(async (event) => {
-            let status = button.text().trim();
-            if (event.key === "Enter" && !event.shiftKey && status !== "Stop") {
                 event.preventDefault();
                 await this.send(button);
             }
@@ -24,12 +28,10 @@ export class ButtonsBinder {
         if (user_input_content === "") {
             return;
         }
-        let status = button.text().trim();
-        if (status === "Send") {
             this.send(button);
-        } else if (status === "Regenerate") {
-            this.regenerate(button);
-        } else if (status === "Stop") {
             this.stop(button);
             return;
         } else {
@@ -46,40 +48,25 @@ export class ButtonsBinder {
     async send(button) {
         console.log("Send");
-        button
-            .text("Stop")
-            .removeClass("btn-primary btn-success")
-            .addClass("btn-warning");
         await this.post_user_input();
-        button
-            .text("Regenerate")
-            .removeClass("btn-warning")
-            .addClass("btn-success")
-            .attr("disabled", false);
-    }
-    async regenerate(button) {
-        console.log("Regenerate");
-        button
-            .text("Stop")
-            .removeClass("btn-primary btn-success")
-            .addClass("btn-warning");
-        pop_messager(2);
-        await this.post_user_input();
-        button
-            .text("Regenerate")
-            .removeClass("btn-warning")
-            .addClass("btn-success")
-            .attr("disabled", false);
     }
     async stop(button) {
         console.log("Stop");
         this.requester.stop();
-        button
-            .attr("disabled", true)
-            .removeClass("btn-warning")
-            .addClass("btn-success")
-            .text("Regenerate")
-            .attr("disabled", false);
     }
     bind() {
         this.bind_send_user_input();

     }
     bind_send_user_input() {
         const button = $("#send-user-input");
+        button.attr("status", "send");
         button.click(async () => {
             await this.handle_user_input(button);
         });
         $("#user-input").keypress(async (event) => {
+            if (
+                event.key === "Enter" &&
+                !event.shiftKey &&
+                button.attr("status") === "send"
+            ) {
                 event.preventDefault();
                 await this.send(button);
             }
         if (user_input_content === "") {
             return;
         }
+        let status = button.attr("status");
+        if (status === "send") {
             this.send(button);
+        } else if (status === "stop") {
             this.stop(button);
             return;
         } else {
     async send(button) {
         console.log("Send");
+        let button_icon = button.find("i");
+        button.attr("status", "stop");
+        button_icon
+            .removeClass()
+            .addClass("fa fa-circle-pause fa-fade")
+            .css("color", "orange");
         await this.post_user_input();
+        button.attr("status", "send");
+        button_icon.removeClass().addClass("fa fa-paper-plane");
     }
     async stop(button) {
         console.log("Stop");
+        let button_icon = button.find("i");
         this.requester.stop();
+        button.attr("status", "send");
+        button_icon
+            .removeClass()
+            .addClass("fa fa-paper-plane")
+            .css("color", "red");
     }
     bind() {
         this.bind_send_user_input();

apps/llm_mixer/js/llm_models_loader.js CHANGED Viewed

@@ -5,7 +5,7 @@ export async function setup_available_models_on_select(default_option = null) {
     select.empty();
     await request_available_models();
     if (default_option === null) {
-        default_option = "gpt-4";
     }
     available_models.forEach((value, index) => {

     select.empty();
     await request_available_models();
     if (default_option === null) {
+        default_option = "gpt-3.5-turbo";
     }
     available_models.forEach((value, index) => {