ui: adding logo and spacing fixes

examples/server/public/index.html

@@ -20,15 +20,17 @@
       justify-content: space-between;
       height: 100%;
       width: 100%;
+      max-width: 900px;
     }
 
     main {
-      margin: 3px;
+      margin: 3px auto;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       gap: 1em;
-
+      width: 100%;
+      align-items: center;
       flex-grow: 1;
       overflow-y: auto;
       padding: 0.5em;
@@ -144,7 +146,11 @@
     header {
       display: flex;
       justify-content: space-between;
-      align-items: baseline;
+      align-items: center;
+      background: #1c2020;
+      color: #f2f2f2;
+      padding: 0.25em 0.5em;
+      border-bottom: 2px solid color(srgb 0.9999 0.5095 0.2057);
     }
 
     .header_controls {
@@ -157,6 +163,7 @@
       max-height: 100%;
       height: 100%;
       flex-wrap: wrap;
+      width: 100%;
     }
 
     .column {
@@ -177,6 +184,14 @@
       }
     }
 
+    #chat {
+      width: 100%;
+    }
+
+    button{
+      padding: 0.5em;
+    }
+
     .range_field {
       border-bottom: 1px dashed;
       padding-bottom: 0.5em;
@@ -1099,7 +1114,7 @@
       return html`
       <div class="basecontainer mode-${session.value.type}">
         <header>
-          <h1>llama.cpp</h1>
+          <img src="/llama1-logo.png" alt="llama.cpp" height="40px" width="auto" />
           <${ConfigForm} header/>
         </header>