From c7803876ce079ea0d209c2d388d6744aa85672ec Mon Sep 17 00:00:00 2001
From: Yazan Agha-Schrader <mountaiin@icloud.com>
Date: Mon, 27 May 2024 22:33:18 +0200
Subject: [PATCH] move API to the top, rearrange param sliders. update css

---
 examples/server/themes/mount-ai/index.html | 36 +++++----
 examples/server/themes/mount-ai/style.css  | 91 ++++++++++++++++++----
 2 files changed, 95 insertions(+), 32 deletions(-)

diff --git a/examples/server/themes/mount-ai/index.html b/examples/server/themes/mount-ai/index.html
index 34d56ecf2..03f9c2639 100644
--- a/examples/server/themes/mount-ai/index.html
+++ b/examples/server/themes/mount-ai/index.html
@@ -569,12 +569,12 @@ function updateSystemPrompt(e) {
         `
       };
 
-      const IntField = ({ label, max, min, step, name, value }) => {
+      const IntField = ({ label, title, max, min, step, name, value }) => {
         return html`
           <div>
-            <label for="${name}">${label}</label>
-              <input type="range" id="${name}" min="${min}" max="${max}" step="${step}" name="${name}" value="${value}" oninput=${updateParamsInt} />
-              <span id="${name}-value">${value}</span>
+            <label for="${name}" title="${title}">${label}</label>
+            <input type="range" id="${name}" min="${min}" max="${max}" step="${step}" name="${name}" value="${value}" oninput=${updateParamsInt} />
+            <span id="${name}-value">${value}</span>
           </div>
         `
       };
@@ -782,13 +782,17 @@ function updateSystemPrompt(e) {
                   <div id="id_toggle-label-chat">Chat</div>
                   <div id="id_toggle-label-complete">Complete</div>
                 </label>
-                <input type="text" id="api_key" name="api_key" value="${params.value.api_key}" placeholder="Enter API key" oninput=${updateParams} />
+          <fieldset>
+
+              <input type="text" id="api_key" class="apiKey" name="api_key" value="${params.value.api_key}" placeholder="Enter API key" oninput=${updateParams} />
+          </fieldset>
+
             <${UserTemplateResetButton}/>
           </fieldset>
 
           ${session.value.type === 'chat' ? ChatConfigForm() : CompletionConfigForm()}
 
-          <fieldset class="two">
+          <fieldset class="params">
             ${IntField({ label: "Prediction", max: 2048, min: -1, step: 16, name: "n_predict", value: params.value.n_predict, })}
             ${FloatField({ label: "Min-P sampling", max: 1.0, min: 0.0, name: "min_p", step: 0.01, value: params.value.min_p })}
             ${FloatField({ label: "Repetition Penalty", max: 2.0, min: 0.0, name: "repeat_penalty", step: 0.01, value: params.value.repeat_penalty })}
@@ -797,7 +801,7 @@ function updateSystemPrompt(e) {
 
           <details>
             <summary><span class="summary-title">Further Options</span></summary>
-            <fieldset class="two">
+            <fieldset class="params">
               ${IntField({ label: "Top-K", max: 100, min: 0, step: 1, name: "top_k", value: params.value.top_k })}
               ${IntField({ label: "Penalize Last N", max: 2048, min: 0, step: 16, name: "repeat_last_n", value: params.value.repeat_last_n })}
               ${FloatField({ label: "Top-P", max: 1.0, min: 0.0, name: "top_p", step: 0.01, value: params.value.top_p })}
@@ -805,27 +809,27 @@ function updateSystemPrompt(e) {
               ${FloatField({ label: "TFS-Z", max: 1.0, min: 0.0, name: "tfs_z", step: 0.01, value: params.value.tfs_z })}
               ${FloatField({ label: "Frequency Penalty", max: 1.0, min: 0.0, name: "frequency_penalty", step: 0.01, value: params.value.frequency_penalty })}
               ${FloatField({ label: "Typical-P", max: 1.0, min: 0.0, name: "typical_p", step: 0.01, value: params.value.typical_p })}
+              ${IntField({ label: "Min Keep", title: "If greater than 0, samplers are forced to return N possible tokens at minimum. Default is 0", max: 10, min: 0, name: "min_keep", value: params.value.min_keep })}
             </fieldset>
 
             <hr style="height: 1px; background-color: #ececf1; border: none;" />
 
             <fieldset class="three">
-              <div>
                 <label><input type="radio" name="mirostat" value="0" checked=${params.value.mirostat == 0} oninput=${updateParamsInt} /> Mirostat off</label>
                 <label><input type="radio" name="mirostat" value="1" checked=${params.value.mirostat == 1} oninput=${updateParamsInt} /> Mirostat v1</label>
                 <label><input type="radio" name="mirostat" value="2" checked=${params.value.mirostat == 2} oninput=${updateParamsInt} /> Mirostat v2</label>
-              </div>
+              </fieldset>
+            <fieldset class="params">
               ${FloatField({ label: "Entropy tau", max: 10.0, min: 0.0, name: "mirostat_tau", step: 0.01, value: params.value.mirostat_tau })}
               ${FloatField({ label: "Learning-rate eta", max: 1.0, min: 0.0, name: "mirostat_eta", step: 0.01, value: params.value.mirostat_eta })}
-
-              ${IntField({ label: "Show Probabilities", max: 10, min: 0, step: 1, name: "n_probs", value: params.value.n_probs })}
-              ${IntField({ label: "Min Probabilities from each Sampler", max: 10, min: 0, name: "min_keep", value: params.value.min_keep })}
             </fieldset>
+
+              <hr style="height: 1px; background-color: #ececf1; border: none;" />
+
+              <fieldset class="params">
+                ${IntField({ label: "Show Probabilities", title: "Tooltip-Text hier", max: 10, min: 0, step: 1, name: "n_probs", value: params.value.n_probs })}
+              </fieldset>
           </details>
-            <fieldset class="apiKey">
-              <label for="api_key">API Key</label>
-
-            </fieldset>
         </form>
       `
     }
diff --git a/examples/server/themes/mount-ai/style.css b/examples/server/themes/mount-ai/style.css
index ddb3ba604..95289d24c 100644
--- a/examples/server/themes/mount-ai/style.css
+++ b/examples/server/themes/mount-ai/style.css
@@ -68,6 +68,8 @@ p {
 }
 
 .two-columns {
+  width: 97%;
+  max-width: 97%;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1em;
@@ -76,7 +78,8 @@ p {
 
 .json-schema-controls {
   margin-top: 10px;
-  width: 100%;
+  width: 97%;
+  max-width: 97%;
   display: grid;
   grid-template: "a a";
   gap: 1em;
@@ -110,8 +113,9 @@ fieldset {
 
 fieldset.two {
   display: grid;
-  grid-template: "a a";
+  grid-template: "a a a";
   gap: 1em;
+  align-items: center;
   font-size: x-small;
   color: var(--text-color-plain);
 }
@@ -137,6 +141,19 @@ fieldset.names {
   font-weight: 600;
 }
 
+/* titles of name fields*/
+fieldset.params {
+  display: grid;
+  grid-template: "a a";
+  gap: 1em;
+  font-size: x-small;
+  color: var(--theme-nuance-color-4);
+  padding-top: 16px;
+  padding-bottom: 16px;
+  text-transform: uppercase;
+  font-weight: 600;
+}
+
 fieldset.dropdowns {
   -webkit-appearance: none;
   display: flex;
@@ -431,6 +448,7 @@ textarea {
   padding: 5px;
   flex-grow: 1;
   width: 100%;
+  max-width: 100%;
   border-radius: 8px;
   border: 1px solid var(--border-color-1);
   resize: none;
@@ -512,6 +530,8 @@ input[type="radio"] {
 
 .chat-input-container {
   position: relative;
+  max-width: 97%;
+  min-width: 97%;
 }
 
 .chat-input-label {
@@ -539,29 +559,39 @@ textarea#chat-input:focus {
 
 .input-container {
   position: relative;
+  box-sizing: border-box;
+  width: 100%; /* Setzt die Breite auf 100% */
+  max-width: 100%; /* Stellt sicher, dass die Breite nicht größer als 100% wird */
 }
 
 .input-container:focus {
   border: 1px solid var(--border-focus-color);
   box-shadow: 0 0 3px var(--border-focus-shadow);
 }
+/* titles of name fields*/
+/* fieldset.names {
+  display: grid;
+  grid-template: "a a";
+  gap: 1em;
+  font-size: x-small;
+  color: var(--theme-nuance-color-3);
+  padding-top: 16px;
+  padding-bottom: 16px;
+  text-transform: uppercase;
+  font-weight: 600;
+} */
 
-textarea#api_key {
-  margin-left: 20px;
-  padding-top: 10px;
-  padding-left: 10px;
+/* input of name fields*/
+/* .names input[type="text"] {
+  font-family: Arial, sans-serif;
   font-size: medium;
+  font-weight: 500;
+  padding: 5px;
   border: 1px solid var(--border-color-2);
-  resize: vertical;
-}
-
-textarea#api_key:focus {
-  border: 1px solid var(--border-focus-color);
-  box-shadow: 0 0 3px var(--border-focus-shadow);
-}
+} */
 
 fieldset.apiKey {
-  gap: 1em;
+  width: 100%;
   font-size: x-small;
   color: var(--theme-nuance-color-3);
   padding-top: 16px;
@@ -572,7 +602,6 @@ fieldset.apiKey {
 
 .apiKey {
   font-family: Arial, sans-serif;
-  font-size: medium;
   font-weight: 500;
   padding: 5px;
   border: 1px solid var(--border-color-2);
@@ -592,6 +621,19 @@ fieldset.apiKey {
   margin-right: 5px;
 }
 
+textarea#api_key {
+  padding-top: 10px;
+  padding-left: 10px;
+  font-size: medium;
+  border: 1px solid var(--border-color-2);
+  resize: vertical;
+}
+
+textarea#api_key:focus {
+  border: 1px solid var(--border-focus-color);
+  box-shadow: 0 0 3px var(--border-focus-shadow);
+}
+
 /* embedded title of the system prompt text area */
 .input-label {
   position: absolute;
@@ -635,6 +677,8 @@ fieldset.apiKey {
 textarea.persistent-input {
   padding-top: 42px;
   padding-left: 11px;
+  width: 97%;
+  max-width: 97%;
   font-size: medium;
   overscroll-behavior: contain;
 }
@@ -642,7 +686,10 @@ textarea.persistent-input {
 /* chat history box */
 .persistent-input {
   height: auto;
+  width: 100%;
+  max-width: 100%;
   min-height: 150px;
+  padding: 3px;
 }
 
 /* chat history box */
@@ -660,6 +707,8 @@ textarea.persistent-input:focus {
 
 /* prompt style input area */
 textarea.persistent-input-sec {
+  width: 97%;
+  max-width: 97%;
   padding-top: 42px;
   padding-left: 11px;
   font-size: small;
@@ -731,7 +780,7 @@ footer {
   color: var(--background-color-3);
   text-align: center;
   cursor: default;
-  }
+}
 
 footer a {
   color: var(--background-color-4); /* Color of the link */
@@ -878,3 +927,13 @@ footer a:hover {
   font-weight: 600;
   background-color: var(-background-color-4);
 } */
+
+/* .omni {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5em;
+  border: 1px solid var(--border-color-3);
+  border-radius: 5px;
+  margin: 0.5em 0;
+} */