ui: rebase and resolve conflict

examples/server/public/index.html

@@ -10,6 +10,7 @@
     body {
       font-family: system-ui;
       font-size: 90%;
+      width: 100%;
     }
 
     #container {
@@ -18,6 +19,7 @@
       flex-direction: column;
       justify-content: space-between;
       height: 100%;
+      width: 100%;
     }
 
     main {
@@ -29,18 +31,15 @@
 
       flex-grow: 1;
       overflow-y: auto;
-
-      border: 1px solid #ccc;
-      border-radius: 5px;
       padding: 0.5em;
     }
 
     body {
-      max-width: 600px;
       min-width: 300px;
       line-height: 1.2;
       margin: 0 auto;
       padding: 0 0.5em;
+      box-sizing: border-box;
     }
 
     p {
@@ -142,6 +141,81 @@
       display: inline;
     }
 
+    header {
+      display: flex;
+      justify-content: space-between;
+      align-items: baseline;
+    }
+
+    .header_controls {
+      gap: 0.5rem;
+      display: flex;
+    }
+
+    .flexform {
+      display: flex;
+      max-height: 100%;
+      height: 100%;
+      flex-wrap: wrap;
+    }
+
+    .column {
+      flex-grow: 1;
+      padding: 1rem;
+      box-sizing: border-box;
+    }
+
+    .aside {
+      max-width: 300px;
+      overflow: auto;
+      background: rgba(220, 220, 220, 0.2);
+    }
+
+    @media (max-width:600px) {
+      .aside {
+        max-width: 100%;
+      }
+    }
+
+    .range_field {
+      border-bottom: 1px dashed;
+      padding-bottom: 0.5em;
+    }
+
+    .range_field:last-child {
+      border-bottom: none;
+    }
+
+    .range_field label {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .range_field input {
+      width: 100%;
+    }
+
+    .basecontainer {
+      display: flex;
+      flex-direction: column;
+      height: 100vh;
+      overflow: hidden;
+    }
+
+    #content {
+      overflow: auto;
+    }
+
+    .response p {
+      padding: 0.5em;
+      margin: 0;
+      border-radius: 0.5em;
+    }
+
+    .response p:nth-child(even) {
+      background-color: rgba(242, 242, 242, 0.5);
+    }
+
     header,
     footer {
       text-align: center;
@@ -150,8 +224,18 @@
     footer {
       font-size: 80%;
       color: #888;
+      box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(229, 231, 235, 0.53) 0px -1px 0px 0px, rgba(0, 0, 0, 0.24) 0px 5px 20px -5px;
+      padding-top: 0.5em;
     }
 
+
+    @media (max-width:600px) {
+      .footernote {
+        display: block;
+      }
+    }
+
+
     .mode-chat textarea[name=prompt] {
       height: 4.5em;
     }
@@ -615,7 +699,7 @@
       return html`
       <div id="chat" ref=${container} key=${messages.length}>
         <img style="width: 60%;${!session.value.image_selected ? `display: none;` : ``}" src="${session.value.image_selected}"/>
-          <span contenteditable=${isCompletionMode} ref=${container} oninput=${handleCompletionEdit}>
+        <span class="response" contenteditable=${isCompletionMode} ref=${container} oninput=${handleCompletionEdit}>
           ${messages.flatMap(chatLine)}
         </span>
       </div>`;
@@ -649,20 +733,18 @@
 
       const FloatField = ({ label, max, min, name, step, value }) => {
         return html`
-          <div>
+        <div class="range_field">
-            <label for="${name}">${label}</label>
+          <label for="${name}">${label} <span>${value}</span></label>
           <input  type="range" id="${name}" min="${min}" max="${max}" step="${step}" name="${name}" value="${value}" oninput=${updateParamsFloat} />
-            <span>${value}</span>
         </div>
       `
       };
 
       const IntField = ({ label, max, min, name, value }) => {
         return html`
-          <div>
+        <div class="range_field">
-            <label for="${name}">${label}</label>
+          <label for="${name}">${label} <span>${value}</span></label>
           <input type="range" id="${name}" min="${min}" max="${max}" name="${name}" value="${value}" oninput=${updateParamsInt} />
-            <span>${value}</span>
         </div>
       `
       };
@@ -687,16 +769,17 @@
       useEffect(() => {
         // autosave template on every change
         userTemplateAutosave()
-      }, [session.value, params.value])
+      }, [session.value])// removed params.value as it would re render the page.
 
       const GrammarControl = () => (
         html`
-          <div>
+        <details>
+        <summary>Grammer Configuration</summary>
           <label for="template">Grammar</label>
           <textarea id="grammar" name="grammar" placeholder="Use gbnf or JSON Schema+convert" value="${params.value.grammar}" rows=4 oninput=${updateParams}/>
           <input  type="text" name="prop-order" placeholder="order: prop1,prop2,prop3" oninput=${updateGrammarJsonSchemaPropOrder} />
           <button type="button" onclick=${convertJSONSchemaGrammar}>Convert JSON Schema</button>
-          </div>
+        </details>
         `
       );
 
@@ -737,7 +820,6 @@
             <label for="template">Chat history template</label>
             <textarea id="template" name="historyTemplate" value="${session.value.historyTemplate}" rows=1 oninput=${updateSession}/>
           </div>
-            ${GrammarControl()}
         </fieldset>
     `
       );
@@ -745,23 +827,16 @@
       const CompletionConfigForm = () => (
         html`
         ${PromptControlFieldSet()}
-          <fieldset>${GrammarControl()}</fieldset>
       `
       );
 
-      return html`
-        <form>
-          <fieldset class="two">
-            <${UserTemplateResetButton}/>
-            <div>
-              <label class="slim"><input type="radio" name="type" value="chat" checked=${session.value.type === "chat"} oninput=${updateSession} /> Chat</label>
-              <label class="slim"><input type="radio" name="type" value="completion" checked=${session.value.type === "completion"} oninput=${updateSession} /> Completion</label>
-            </div>
-          </fieldset>
 
-          ${session.value.type === 'chat' ? ChatConfigForm() : CompletionConfigForm()}
+      const ModelOptions = () => (
+        html`
 
-          <fieldset class="two">
+        <details>
+        <summary>Settings</summary>
+        <fieldset>
           ${IntField({ label: "Predictions", max: 2048, min: -1, name: "n_predict", value: params.value.n_predict })}
           ${FloatField({ label: "Temperature", max: 2.0, min: 0.0, name: "temperature", step: 0.01, value: params.value.temperature })}
           ${FloatField({ label: "Penalize repeat sequence", max: 2.0, min: 0.0, name: "repeat_penalty", step: 0.01, value: params.value.repeat_penalty })}
@@ -769,17 +844,23 @@
           ${IntField({ label: "Top-K sampling", max: 100, min: -1, name: "top_k", value: params.value.top_k })}
           ${FloatField({ label: "Top-P sampling", max: 1.0, min: 0.0, name: "top_p", step: 0.01, value: params.value.top_p })}
           ${FloatField({ label: "Min-P sampling", max: 1.0, min: 0.0, name: "min_p", step: 0.01, value: params.value.min_p })}
+          ${IntField({ label: "Show Probabilities", max: 10, min: 0, name: "n_probs", value: params.value.n_probs })}
         </fieldset>
+        </details>
+
+        ${GrammarControl()}
         <details>
             <summary>More options</summary>
-            <fieldset class="two">
+            <fieldset>
             ${FloatField({ label: "TFS-Z", max: 1.0, min: 0.0, name: "tfs_z", step: 0.01, value: params.value.tfs_z })}
             ${FloatField({ label: "Typical P", max: 1.0, min: 0.0, name: "typical_p", step: 0.01, value: params.value.typical_p })}
             ${FloatField({ label: "Presence penalty", max: 1.0, min: 0.0, name: "presence_penalty", step: 0.01, value: params.value.presence_penalty })}
             ${FloatField({ label: "Frequency penalty", max: 1.0, min: 0.0, name: "frequency_penalty", step: 0.01, value: params.value.frequency_penalty })}
             </fieldset>
-            <hr />
+        </details>
-            <fieldset class="three">
+        <details>
+        <summary>Mirostat</summary>
+        <fieldset>
         <div>
             <label><input type="radio" name="mirostat" value="0" checked=${params.value.mirostat == 0} oninput=${updateParamsInt} /> no Mirostat</label>
             <label><input type="radio" name="mirostat" value="1" checked=${params.value.mirostat == 1} oninput=${updateParamsInt} /> Mirostat v1</label>
@@ -788,14 +869,31 @@
         ${FloatField({ label: "Mirostat tau", max: 10.0, min: 0.0, name: "mirostat_tau", step: 0.01, value: params.value.mirostat_tau })}
         ${FloatField({ label: "Mirostat eta", max: 1.0, min: 0.0, name: "mirostat_eta", step: 0.01, value: params.value.mirostat_eta })}
         </fieldset>
-            <fieldset>
-              ${IntField({ label: "Show Probabilities", max: 10, min: 0, name: "n_probs", value: params.value.n_probs })}
-            </fieldset>
-            <fieldset>
-              <label for="api_key">API Key</label>
-              <input type="text" name="api_key" value="${params.value.api_key}" placeholder="Enter API key" oninput=${updateParams} />
-            </fieldset>
         </details>
+      `
+      );
+
+      const ModeSelector = () => (
+        html`
+            <div class="header_controls">
+                <label class="slim"><input type="radio" name="type" value="chat" checked=${session.value.type === "chat"} oninput=${updateSession} /> Chat</label>
+                <label class="slim"><input type="radio" name="type" value="completion" checked=${session.value.type === "completion"} oninput=${updateSession} /> Completion</label>
+                <${UserTemplateResetButton}/>
+            </div>
+        `
+      )
+
+      if (props?.header)
+        return html`<${ModeSelector} />`
+
+      return html`
+      <form class="flexform">
+        <div class="column">
+        ${session.value.type === 'chat' ? ChatConfigForm() : CompletionConfigForm()}
+        </div>
+        <div class="column aside">
+            <${ModelOptions} />
+        </div>
       </form>
     `
     }
@@ -880,7 +978,7 @@
       }
       return html`
       <span>
-          ${llamaStats.value.predicted_per_token_ms.toFixed()}ms per token, ${llamaStats.value.predicted_per_second.toFixed(2)} tokens per second
+        ${llamaStats.value.predicted_per_token_ms.toFixed()}ms per token, ${llamaStats.value.predicted_per_second.toFixed(2)} tokens per second | 
       </span>
     `
     }
@@ -999,22 +1097,21 @@
     function App(props) {
 
       return html`
-        <div class="mode-${session.value.type}">
+      <div class="basecontainer mode-${session.value.type}">
         <header>
           <h1>llama.cpp</h1>
+          <${ConfigForm} header/>
         </header>
 
         <main id="content">
           <${chatStarted.value ? ChatLog : ConfigForm} />
         </main>
 
+        <footer>
             <section id="write">
                 <${session.value.type === 'chat' ? MessageInput : CompletionControls} />
             </section>
-
+          <p><${ModelGenerationInfo} /> <span class="footernote">Powered by <a href="https://github.com/ggerganov/llama.cpp">llama.cpp</a> and <a href="https://ggml.ai">ggml.ai</a></span></p>
-          <footer>
-            <p><${ModelGenerationInfo} /></p>
-            <p>Powered by <a href="https://github.com/ggerganov/llama.cpp">llama.cpp</a> and <a href="https://ggml.ai">ggml.ai</a>.</p>
         </footer>
       </div>
     `;
@@ -1022,6 +1119,7 @@
 
     render(h(App), document.querySelector('#container'));
   </script>
+
 </head>
 
 <body>
@@ -1032,4 +1130,3 @@
 </body>
 
 </html>
-