Updates to UI components, cleanup of unused dependencies (#1136)

Fixes to UI components, accessibility labels. Removal of unused python dependencies. Migrate from black to ruff for formatting. --------- Co-authored-by: morpheus2448 <[email protected]>
serge-chat · Feb 14, 2024 · e24c8fe · e24c8fe
1 parent 494f2df
commit e24c8fe
Show file tree

Hide file tree

Showing 9 changed files with 348 additions and 1,147 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -83,12 +83,12 @@ jobs:
         uses: chartboost/ruff-action@v1
         with:
           src: "./api"
-          args: "--verbose"
-      - name: Run black check
-        uses: psf/black@stable
+          args: "check --verbose"
+      - name: Run ruff format check
+        uses: chartboost/ruff-action@v1
         with:
-          options: "--check --diff --verbose"
           src: "./api"
+          args: "format --check --verbose"
   check-web-code:
     runs-on: ubuntu-latest
     steps:

diff --git a/api/poetry.lock b/api/poetry.lock
diff --git a/api/pyproject.toml b/api/pyproject.toml
@@ -21,47 +21,17 @@ requires = ["poetry-core>=1.0.0"]
 build-backend = "poetry.core.masonry.api"
 
 [tool.poetry.dependencies]
-python=">=3.9,<4.0"
+python=">=3.10,<4.0"
 asyncio = "^3.4.3"
 packaging = "^23.2"
 pydantic = "^1.10.14"
-python-dotenv = "^1.0.1"
-python-multipart = "^0.0.9"
-pyyaml = "^6.0"
-rfc3986 = "^2.0.0"
-sentencepiece = "^0.1.99"
-sniffio = "^1.3.0"
 sse-starlette = "^1.8.2"
 starlette = "^0.26.1"
-toml = "^0.10.2"
-tqdm = "^4.66.2"
 typing-extensions = "^4.9.0"
-ujson = "^5.9.0"
 urllib3 = "^2.2.0"
-uvloop = "^0.19.0"
-watchfiles = "^0.21.0"
-websockets = "^12.0"
-anyio = "^4.2.0"
-certifi = "^2024.2.2"
-charset-normalizer = "^3.3.2"
-click = "^8.1.7"
-email-validator = "^2.0.0"
 fastapi = "^0.95.1"
-filelock = "^3.13.1"
-h11 = "^0.14.0"
-httpcore = "^1.0.2"
-httptools = "^0.6.1"
 huggingface-hub = "^0.20.3"
-idna = "^3.6"
-itsdangerous = "^2.1.2"
-jinja2 = "^3.1.3"
-markupsafe = "^2.1.5"
-motor = "^3.3.2"
-orjson = "^3.9.13"
-dnspython = "^2.5.0"
-lazy-model = "^0.2.0"
 requests = "^2.31.0"
-numpy = "^1.25.2"
 langchain = "^0.0.180"
 loguru = "^0.7.2"
 redis = {extras = ["hiredis"], version = "^5.0.1"}
@@ -118,6 +88,3 @@ target-version = "py311"
 # Unlike Flake8, default to a complexity level of 10.
 max-complexity = 10
 
-[tool.black]
-line-length = 150
-target-version = ['py311']
diff --git a/scripts/dev.sh b/scripts/dev.sh
@@ -58,7 +58,7 @@ npm run dev -- --host 0.0.0.0 --port 8008 &
 
 # Start the API
 cd /usr/src/app/api || exit 1
-hypercorn_cmd="hypercorn src.serge.main:app --bind 0.0.0.0:9124"
+hypercorn_cmd="hypercorn src.serge.main:api_app --reload --bind 0.0.0.0:9124"
 [ "$SERGE_ENABLE_IPV6" = true ] && hypercorn_cmd+=" --bind [::]:9124"
 
 $hypercorn_cmd || {

diff --git a/web/src/app.css b/web/src/app.css
@@ -90,9 +90,11 @@ markdown. .hljs {
 .models-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 20px;
-  padding: 30px;
-  padding-top: 10px;
+  gap: 25px;
+  padding-left: 80px;
+  padding-right: 40px;
+  padding-top: 40px;
+  padding-bottom: 10px;
 }
 
 /* Model Accordion Styles */
@@ -132,9 +134,14 @@ markdown. .hljs {
 }
 
 .search-row {
+  position: fixed;
+  top: 5px;
+  left: 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  padding: 0 2rem;
+  padding-left: 80px;
+  padding-right: 40px;
+  padding-bottom: 0px;
 }
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
@@ -24,6 +24,10 @@
     isSidebarOpen = !isSidebarOpen;
   }
 
+  function hideSidebar(): void {
+    isSidebarOpen = false;
+  }
+
   onMount(() => {
     theme = localStorage.getItem("data-theme") || "dark";
     document.documentElement.setAttribute("data-theme", theme);
@@ -116,7 +120,10 @@
   });
 </script>
 
-<button on:click={toggleSidebar} class="btn btn-square z-10 fixed">
+<button
+  on:click={toggleSidebar}
+  class="border-base-content/[.2] btn btn-square z-10 my-1 mx-2 fixed border"
+>
   <svg
     xmlns="http://www.w3.org/2000/svg"
     fill="none"
@@ -130,27 +137,32 @@
     ></path></svg
   >
 </button>
+
 <aside
-  id="default-sidebar"
-  class="border-base-content/[.2] fixed left-0 top-0 z-40 h-screen -translate-x-full border-r transition-transform overflow-hidden translate-x-0 aria-label=Sidebar"
-  class:w-75={isSidebarOpen}
-  class:w-0={!isSidebarOpen}
+  class="border-base-content/[.2] fixed top-0 z-40 min-h-full border-r transition-all overflow-hidden aria-label=Sidebar"
+  class:left-0={isSidebarOpen}
+  class:-left-80={!isSidebarOpen}
 >
   <div
     class="bg-base-200 relative h-screen py-1 px-2 overflow-hidden flex flex-col items-center justify-between"
   >
-    <div
-      class="w-full flex items-center border-b border-base-content/[.2] pb-1"
-    >
-      <button class="btn btn-ghost flex-shrink-0" on:click={goToHome}>
+    <div class="w-full flex items-center pb-1">
+      <button
+        on:click={toggleSidebar}
+        class="border-base-content/[.2] btn btn-square border"
+      >
         <svg
           xmlns="http://www.w3.org/2000/svg"
+          fill="none"
           viewBox="0 0 24 24"
-          fill="currentColor"
-          class="w-5 h-5"
+          class="inline-block w-5 h-5 stroke-current"
+          ><path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M4 6h16M4 12h16M4 18h16"
+          ></path></svg
         >
-          <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
-        </svg>
       </button>
       <button
         disabled={isLoading || !modelAvailable}
@@ -172,69 +184,87 @@
         </svg>
         <span>New Chat</span>
       </button>
-      <button
-        id="toggle-sidebar-btn"
-        tabindex="0"
-        on:click={toggleSidebar}
-        on:keydown={(event) => {
-          if (event.key === "Escape") {
-            toggleSidebar();
-          }
-        }}
-        aria-label="Close Sidebar"
-        class="btn btn-ghost flex-shrink-0"
-        >&#10005;
+
+      <button class="btn btn-ghost flex-shrink-0" on:click={goToHome}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          class="w-5 h-5"
+        >
+          <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
+        </svg>
+        <span class="sr-only">Home</span>
       </button>
     </div>
     <ul
-      class="my-1 w-full h-[85%] overflow-y-auto no-scrollbar firefox-no-scrollbar ie-edge-no-scrollbar"
+      class="my-1 w-full flex-grow overflow-y-auto no-scrollbar firefox-no-scrollbar ie-edge-no-scrollbar"
     >
-      {#each data.chats as chat (chat.id)}
-        <li in:fly={{ x: -100, duration: 900 }}>
-          <a
-            href={"/chat/" + chat.id}
-            class="group hover:from-base-100 hover:text-base-content flex items-center rounded-lg py-2 pl-2 text-base font-normal hover:bg-gradient-to-r hover:to-transparent"
-            class:bg-base-300={id === chat.id}
-          >
-            <div class="flex w-full flex-col">
-              <div class="flex w-full flex-col items-start justify-start">
-                <div
-                  class="relative flex w-full flex-row items-center justify-between"
-                >
-                  <div class="flex flex-col">
-                    <p class="text-sm font-light">
-                      {truncate(chat.subtitle, 42)}
-                    </p>
-                    <span class="text-xs font-semibold">{chat.model}</span>
-                    <span class="text-xs"
-                      >{timeSince(chat.created) + " ago"}</span
-                    >
-                  </div>
+      {#if data && data.chats}
+        {#each data.chats as chat (chat.id)}
+          <li in:fly={{ x: -100, duration: 900 }}>
+            <a
+              href={"/chat/" + chat.id}
+              class="group hover:from-base-100 hover:text-base-content flex items-center rounded-lg py-2 pl-2 text-base font-normal hover:bg-gradient-to-r hover:to-transparent"
+              class:bg-base-300={id === chat.id}
+            >
+              <div class="flex w-full flex-col">
+                <div class="flex w-full flex-col items-start justify-start">
                   <div
-                    class="absolute right-0 opacity-0 group-hover:opacity-100 transition"
+                    class="relative flex w-full flex-row items-center justify-between"
                   >
-                    <!-- {#if $page.params.id === chat.id} -->
-                    {#if deleteConfirm}
-                      <div class="flex flex-row items-center">
-                        <button
-                          name="confirm-delete"
-                          class="btn-ghost btn-sm btn"
-                          on:click|preventDefault={() => deleteChat(chat.id)}
-                        >
-                          <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            viewBox="0 0 16 16"
-                            width="16"
-                            height="16"
+                    <div class="flex flex-col">
+                      <p class="text-sm font-light">
+                        {truncate(chat.subtitle, 42)}
+                      </p>
+                      <span class="text-xs font-semibold">{chat.model}</span>
+                      <span class="text-xs"
+                        >{timeSince(chat.created) + " ago"}</span
+                      >
+                    </div>
+                    <div
+                      class="absolute right-0 opacity-0 group-hover:opacity-100 transition"
+                    >
+                      <!-- {#if $page.params.id === chat.id} -->
+                      {#if deleteConfirm}
+                        <div class="flex flex-row items-center">
+                          <button
+                            name="confirm-delete"
+                            class="btn-ghost btn-sm btn"
+                            on:click|preventDefault={() => deleteChat(chat.id)}
                           >
-                            <path
-                              class="fill-base-content"
-                              d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm1.5 0a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm10.28-1.72-4.5 4.5a.75.75 0 0 1-1.06 0l-2-2a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018l1.47 1.47 3.97-3.97a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"
-                            />
-                          </svg>
-                        </button>
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              viewBox="0 0 16 16"
+                              width="16"
+                              height="16"
+                            >
+                              <path
+                                class="fill-base-content"
+                                d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm1.5 0a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm10.28-1.72-4.5 4.5a.75.75 0 0 1-1.06 0l-2-2a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018l1.47 1.47 3.97-3.97a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"
+                              />
+                            </svg>
+                          </button>
+                          <button
+                            name="cancel-delete"
+                            class="btn-ghost btn-sm btn"
+                            on:click|preventDefault={toggleDeleteConfirm}
+                          >
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              viewBox="0 0 16 16"
+                              width="16"
+                              height="16"
+                            >
+                              <path
+                                class="fill-base-content"
+                                d="M2.344 2.343h-.001a8 8 0 0 1 11.314 11.314A8.002 8.002 0 0 1 .234 10.089a8 8 0 0 1 2.11-7.746Zm1.06 10.253a6.5 6.5 0 1 0 9.108-9.275 6.5 6.5 0 0 0-9.108 9.275ZM6.03 4.97 8 6.94l1.97-1.97a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l1.97 1.97a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-1.97 1.97a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L6.94 8 4.97 6.03a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018Z"
+                              />
+                            </svg>
+                          </button>
+                        </div>
+                      {:else}
                         <button
-                          name="cancel-delete"
                           class="btn-ghost btn-sm btn"
                           on:click|preventDefault={toggleDeleteConfirm}
                         >
@@ -246,37 +276,20 @@
                           >
                             <path
                               class="fill-base-content"
-                              d="M2.344 2.343h-.001a8 8 0 0 1 11.314 11.314A8.002 8.002 0 0 1 .234 10.089a8 8 0 0 1 2.11-7.746Zm1.06 10.253a6.5 6.5 0 1 0 9.108-9.275 6.5 6.5 0 0 0-9.108 9.275ZM6.03 4.97 8 6.94l1.97-1.97a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l1.97 1.97a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-1.97 1.97a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L6.94 8 4.97 6.03a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018Z"
+                              d="M11 1.75V3h2.25a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75ZM4.496 6.675l.66 6.6a.25.25 0 0 0 .249.225h5.19a.25.25 0 0 0 .249-.225l.66-6.6a.75.75 0 0 1 1.492.149l-.66 6.6A1.748 1.748 0 0 1 10.595 15h-5.19a1.75 1.75 0 0 1-1.741-1.575l-.66-6.6a.75.75 0 1 1 1.492-.15ZM6.5 1.75V3h3V1.75a.25.25 0 0 0-.25-.25h-2.5a.25.25 0 0 0-.25.25Z"
                             />
                           </svg>
                         </button>
-                      </div>
-                    {:else}
-                      <button
-                        class="btn-ghost btn-sm btn"
-                        on:click|preventDefault={toggleDeleteConfirm}
-                      >
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          viewBox="0 0 16 16"
-                          width="16"
-                          height="16"
-                        >
-                          <path
-                            class="fill-base-content"
-                            d="M11 1.75V3h2.25a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75ZM4.496 6.675l.66 6.6a.25.25 0 0 0 .249.225h5.19a.25.25 0 0 0 .249-.225l.66-6.6a.75.75 0 0 1 1.492.149l-.66 6.6A1.748 1.748 0 0 1 10.595 15h-5.19a1.75 1.75 0 0 1-1.741-1.575l-.66-6.6a.75.75 0 1 1 1.492-.15ZM6.5 1.75V3h3V1.75a.25.25 0 0 0-.25-.25h-2.5a.25.25 0 0 0-.25.25Z"
-                          />
-                        </svg>
-                      </button>
-                    {/if}
-                    <!-- {/if} -->
+                      {/if}
+                      <!-- {/if} -->
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-          </a>
-        </li>
-      {/each}
+            </a>
+          </li>
+        {/each}
+      {/if}
     </ul>
     <div class="w-full border-t border-base-content/[.2] pt-1">
       {#if deleteAllConfirm}
@@ -361,8 +374,7 @@
         on:click={toggleTheme}
         class="btn btn-ghost w-full flex justify-start items-center p-2.5 text-left text-sm capitalize"
       >
-        <label class="swap swap-rotate">
-          <input type="checkbox" />
+        <label class="swap swap-rotate" for="theme-toggle">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 16 16"
@@ -415,6 +427,6 @@
   </div>
 </aside>
 
-<div class={"h-full" + (isSidebarOpen ? " ml-64 min-w-64" : " min-w-0")}>
+<button class="h-full w-full" on:click={hideSidebar} type="button">
   <slot />
-</div>
+</button>