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>