From aa493e022db8e185d366ffcc788c44e305176d69 Mon Sep 17 00:00:00 2001
From: Yazan Agha-Schrader <mountaiin@icloud.com>
Date: Wed, 29 May 2024 08:45:20 +0200
Subject: [PATCH] add css class

---
 examples/server/themes/mount-ai/colorthemes.css      |  2 ++
 examples/server/themes/mount-ai/index.html           | 10 +++++-----
 examples/server/themes/mount-ai/promptFormats.js     |  4 ++--
 examples/server/themes/mount-ai/style.css            |  6 +++++-
 examples/server/themes/mount-ai/theme-mangotango.css |  2 ++
 examples/server/themes/mount-ai/theme-playground.css |  2 ++
 examples/server/themes/mount-ai/theme-polarnight.css |  2 ++
 examples/server/themes/mount-ai/theme-snowstorm.css  |  2 ++
 8 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/examples/server/themes/mount-ai/colorthemes.css b/examples/server/themes/mount-ai/colorthemes.css
index 435561705..4a8f285db 100755
--- a/examples/server/themes/mount-ai/colorthemes.css
+++ b/examples/server/themes/mount-ai/colorthemes.css
@@ -101,6 +101,8 @@
 
     --textarea-border-color: var(--secondary-color-4);
 
+    --chat-id-color:         var(--theme-nuance-color-4);
+
     /* ------------------------------------------- */
     --button-alert-text-hover:       var(--primary-color-1);
     --button-alert-color-hover:      var(--theme-purple-color);
diff --git a/examples/server/themes/mount-ai/index.html b/examples/server/themes/mount-ai/index.html
index b0767ed51..aa11d65c8 100644
--- a/examples/server/themes/mount-ai/index.html
+++ b/examples/server/themes/mount-ai/index.html
@@ -281,7 +281,7 @@
       await runLlama(prompt, {
         ...params.value,
         slot_id: slot_id,
-        stop: ["</s>", template("{{char}}:"), template("{{user}}:")],
+        stop: ["</s>", template("{{char}}"), template("{{user}}")],
       }, "{{char}}");
     }
 
@@ -357,7 +357,7 @@
       <form onsubmit=${submit}>
         <div class="chat-input-container">
           <textarea
-            id="chat-input" placeholder="Say Something ..."
+            id="chat-input" placeholder="Say Something ...\n(Shift + Enter for new line)"
             class="${generating.value ? 'loading' : null}"
             oninput=${(e) => message.value = e.target.value}
             onkeypress=${enterSubmits}
@@ -418,7 +418,7 @@
             html`<${Markdownish} text=${template(text)} />`
         }
         if (user) {
-          return html`<p key=${index}><strong>${template(user)}:</strong> ${message}</p>`
+          return html`<p key=${index}><strong class="chat-id-color">${template(user)}</strong> ${message}</p>`
         } else {
           return isCompletionMode ?
             html`<span key=${index}>${message}</span>` :
@@ -655,9 +655,9 @@ const BoolField = ({ label, title, name, value }) => {
                   <option value=""></option>
                 <optgroup label="Common Prompt-Styles">
                   <option value="alpaca">Alpaca</option>
-                  <option value="phi3">ChatML</option>
+                  <option value="chatml">ChatML</option>
                   <option value="llama2">Llama 2</option>
-                  <option value="chatml">Phi-3</option>
+                  <option value="phi3">Phi-3</option>
                   <option value="vicuna">Vicuna</option>
                   <option value=""></option>
                 </optgroup>
diff --git a/examples/server/themes/mount-ai/promptFormats.js b/examples/server/themes/mount-ai/promptFormats.js
index 71eafd24b..754ea63fa 100644
--- a/examples/server/themes/mount-ai/promptFormats.js
+++ b/examples/server/themes/mount-ai/promptFormats.js
@@ -314,8 +314,8 @@ user: "Instruction"
 template: `{{history}}
 {{char}}
 `,
-historyTemplate: `{{user}}
-{{message}}<|end|>`,
+historyTemplate: `{{name}}
+{{message}}`,
 char: "<|assistant|>",
 user: "<|user|>"
 },
diff --git a/examples/server/themes/mount-ai/style.css b/examples/server/themes/mount-ai/style.css
index c302869ac..f035c652f 100644
--- a/examples/server/themes/mount-ai/style.css
+++ b/examples/server/themes/mount-ai/style.css
@@ -141,7 +141,7 @@ fieldset.names {
   font-weight: 600;
 }
 
-/* titles of name fields*/
+/* titles of params fields*/
 fieldset.params {
   display: grid;
   grid-template: "a a";
@@ -176,6 +176,10 @@ fieldset.dropdowns {
   border: 1px solid var(--border-color-2);
 }
 
+.chat-id-color {
+  color: var(--chat-id-color);
+}
+
 details {
   border: 1px solid var(--border-color-2);
   border-radius: 5px;
diff --git a/examples/server/themes/mount-ai/theme-mangotango.css b/examples/server/themes/mount-ai/theme-mangotango.css
index 91903a4c4..e43380245 100644
--- a/examples/server/themes/mount-ai/theme-mangotango.css
+++ b/examples/server/themes/mount-ai/theme-mangotango.css
@@ -112,6 +112,8 @@
 
 --textarea-border-color: var(--secondary-color-4);
 
+--chat-id-color:         var(--theme-nuance-color-4);
+
 
 
 /* ------------------------------------------- */
diff --git a/examples/server/themes/mount-ai/theme-playground.css b/examples/server/themes/mount-ai/theme-playground.css
index 2d6321ab3..9d56a7182 100644
--- a/examples/server/themes/mount-ai/theme-playground.css
+++ b/examples/server/themes/mount-ai/theme-playground.css
@@ -106,6 +106,8 @@
 
 --textarea-border-color: var(--secondary-color-4);
 
+--chat-id-color:        var(--theme-nuance-color-4);
+
 
 
 /* ------------------------------------------- */
diff --git a/examples/server/themes/mount-ai/theme-polarnight.css b/examples/server/themes/mount-ai/theme-polarnight.css
index e75cf3798..2bcfb33d8 100644
--- a/examples/server/themes/mount-ai/theme-polarnight.css
+++ b/examples/server/themes/mount-ai/theme-polarnight.css
@@ -106,6 +106,8 @@
 
 --textarea-border-color: var(--secondary-color-4);
 
+--chat-id-color:        var(--theme-nuance-color-4);
+
 
 
 /* ------------------------------------------- */
diff --git a/examples/server/themes/mount-ai/theme-snowstorm.css b/examples/server/themes/mount-ai/theme-snowstorm.css
index 1b26d8ba1..7bb227594 100644
--- a/examples/server/themes/mount-ai/theme-snowstorm.css
+++ b/examples/server/themes/mount-ai/theme-snowstorm.css
@@ -105,6 +105,8 @@
 
 --textarea-border-color: var(--secondary-color-4);
 
+--chat-id-color:         var(--theme-nuance-color-4);
+
 
 
 /* ------------------------------------------- */