add css class

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);

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>

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|>"
 },

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;

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);
+
 
 
 /* ------------------------------------------- */

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);
+
 
 
 /* ------------------------------------------- */

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);
+
 
 
 /* ------------------------------------------- */

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);
+
 
 
 /* ------------------------------------------- */