Update documentation, Add titles to sections (#1054)

* Add support for Podman

* Adding tooltips to chat params top bar

* Delete podman-compose.dev.yml

* Add :z labels to mounts for podman compatibility

* Making things prettier

README.md

@@ -106,4 +106,4 @@ To run Serge in development mode:
 git clone https://github.com/serge-chat/serge.git
 cd serge/
 docker compose -f docker-compose.dev.yml up --build
-```
+```

docker-compose.dev.yml

@@ -5,8 +5,8 @@ services:
       context: .
       dockerfile: Dockerfile.dev
     volumes:
-      - ./web:/usr/src/app/web/
-      - ./api:/usr/src/app/api/
+      - ./web:/usr/src/app/web/:z
+      - ./api:/usr/src/app/api/:z
       - datadb:/data/db
       - weights:/usr/src/app/weights/
       - /etc/localtime:/etc/localtime:ro

web/package.json

@@ -29,6 +29,7 @@
     "eslint-plugin-vue": "^9.20.0",
     "postcss": "^8.4.33",
     "prettier": "3.1.1",
+    "prettier-plugin-svelte": "^3.1.2",
     "svelte": "^4.2.8",
     "svelte-check": "^3.6.2",
     "tailwindcss": "^3.4.1",
@@ -45,7 +46,6 @@
     "highlight.js": "^11.9.0",
     "markdown-it": "^14.0.0",
     "markdown-it-highlightjs": "^4.0.1",
-    "prettier-plugin-svelte": "^3.1.2",
     "prettier-plugin-tailwindcss": "^0.5.11"
   }
 }

web/src/routes/chat/[id]/+page.svelte

@@ -282,7 +282,10 @@
   <div class="w-full border-b border-base-content/[.2]">
     <div class="h-8 px-2 md:container md:mx-auto md:px-0">
       <div class="w-full h-full relative flex items-center justify-center">
-        <div class="flex flex-row items-center justify-center color-base-300">
+        <div
+          class="flex flex-row items-center justify-center color-base-300"
+          title="Model"
+        >
           <svg
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 11.12744 16"
@@ -297,7 +300,10 @@
             {data.chat.params.model_path}
           </span>
         </div>
-        <div class="pl-4 hidden sm:flex flex-row items-center justify-center">
+        <div
+          class="pl-4 hidden sm:flex flex-row items-center justify-center"
+          title="Temperature"
+        >
           <svg
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 5.31286 16"
@@ -312,7 +318,10 @@
             {data.chat.params.temperature}
           </span>
         </div>
-        <div class="pl-4 hidden sm:flex flex-row items-center justify-center">
+        <div
+          class="pl-4 hidden sm:flex flex-row items-center justify-center"
+          title="Context Length/Maximum Generated Tokens"
+        >
           <svg
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 16 16"
@@ -328,7 +337,10 @@
           </span>
         </div>
         {#if data.chat.params.n_threads > 0}
-          <div class="pl-4 hidden sm:flex flex-row items-center justify-center">
+          <div
+            class="pl-4 hidden sm:flex flex-row items-center justify-center"
+            title="Threads"
+          >
             <svg
               xmlns="http://www.w3.org/2000/svg"
               fill="none"
@@ -349,7 +361,10 @@
           </div>
         {/if}
         {#if data.chat.params.n_gpu_layers > 0}
-          <div class="pl-4 hidden sm:flex flex-row items-center justify-center">
+          <div
+            class="pl-4 hidden sm:flex flex-row items-center justify-center"
+            title="GPU Layers"
+          >
             <svg
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 16 16"
@@ -365,7 +380,10 @@
             </span>
           </div>
         {/if}
-        <div class="pl-4 hidden sm:flex flex-row items-center justify-center">
+        <div
+          class="pl-4 hidden sm:flex flex-row items-center justify-center"
+          title="Repeat Penalty"
+        >
           <svg
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 16 16"
@@ -384,7 +402,10 @@
             {data.chat.params.repeat_penalty}
           </span>
         </div>
-        <div class="pl-4 hidden sm:flex flex-row items-center justify-center">
+        <div
+          class="pl-4 hidden sm:flex flex-row items-center justify-center"
+          title="Top_k-Top_p"
+        >
           <svg
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 16 16"