Skip to content

Commit e24c8fe

Browse files
gabymorpheus2448
gaby
and
morpheus2448
authored
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 <41052975+morpheus2448@users.noreply.github.com>
1 parent 494f2df commit e24c8fe

File tree

9 files changed

+348
-1147
lines changed

9 files changed

+348
-1147
lines changed

‎.github/workflows/ci.yml

+4-4
Original file line numberDiff line numberDiff line change
@@ -83,12 +83,12 @@ jobs:
8383
uses: chartboost/ruff-action@v1
8484
with:
8585
src: "./api"
86-
args: "--verbose"
87-
- name: Run black check
88-
uses: psf/black@stable
86+
args: "check --verbose"
87+
- name: Run ruff format check
88+
uses: chartboost/ruff-action@v1
8989
with:
90-
options: "--check --diff --verbose"
9190
src: "./api"
91+
args: "format --check --verbose"
9292
check-web-code:
9393
runs-on: ubuntu-latest
9494
steps:

‎api/poetry.lock

+4-799
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎api/pyproject.toml

+1-34
Original file line numberDiff line numberDiff line change
@@ -21,47 +21,17 @@ requires = ["poetry-core>=1.0.0"]
2121
build-backend = "poetry.core.masonry.api"
2222

2323
[tool.poetry.dependencies]
24-
python=">=3.9,<4.0"
24+
python=">=3.10,<4.0"
2525
asyncio = "^3.4.3"
2626
packaging = "^23.2"
2727
pydantic = "^1.10.14"
28-
python-dotenv = "^1.0.1"
29-
python-multipart = "^0.0.9"
30-
pyyaml = "^6.0"
31-
rfc3986 = "^2.0.0"
32-
sentencepiece = "^0.1.99"
33-
sniffio = "^1.3.0"
3428
sse-starlette = "^1.8.2"
3529
starlette = "^0.26.1"
36-
toml = "^0.10.2"
37-
tqdm = "^4.66.2"
3830
typing-extensions = "^4.9.0"
39-
ujson = "^5.9.0"
4031
urllib3 = "^2.2.0"
41-
uvloop = "^0.19.0"
42-
watchfiles = "^0.21.0"
43-
websockets = "^12.0"
44-
anyio = "^4.2.0"
45-
certifi = "^2024.2.2"
46-
charset-normalizer = "^3.3.2"
47-
click = "^8.1.7"
48-
email-validator = "^2.0.0"
4932
fastapi = "^0.95.1"
50-
filelock = "^3.13.1"
51-
h11 = "^0.14.0"
52-
httpcore = "^1.0.2"
53-
httptools = "^0.6.1"
5433
huggingface-hub = "^0.20.3"
55-
idna = "^3.6"
56-
itsdangerous = "^2.1.2"
57-
jinja2 = "^3.1.3"
58-
markupsafe = "^2.1.5"
59-
motor = "^3.3.2"
60-
orjson = "^3.9.13"
61-
dnspython = "^2.5.0"
62-
lazy-model = "^0.2.0"
6334
requests = "^2.31.0"
64-
numpy = "^1.25.2"
6535
langchain = "^0.0.180"
6636
loguru = "^0.7.2"
6737
redis = {extras = ["hiredis"], version = "^5.0.1"}
@@ -118,6 +88,3 @@ target-version = "py311"
11888
# Unlike Flake8, default to a complexity level of 10.
11989
max-complexity = 10
12090

121-
[tool.black]
122-
line-length = 150
123-
target-version = ['py311']

‎scripts/dev.sh

+1-1
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ npm run dev -- --host 0.0.0.0 --port 8008 &
5858

5959
# Start the API
6060
cd /usr/src/app/api || exit 1
61-
hypercorn_cmd="hypercorn src.serge.main:app --bind 0.0.0.0:9124"
61+
hypercorn_cmd="hypercorn src.serge.main:api_app --reload --bind 0.0.0.0:9124"
6262
[ "$SERGE_ENABLE_IPV6" = true ] && hypercorn_cmd+=" --bind [::]:9124"
6363

6464
$hypercorn_cmd || {

‎web/src/app.css

+11-4
Original file line numberDiff line numberDiff line change
@@ -90,9 +90,11 @@ markdown. .hljs {
9090
.models-grid {
9191
display: grid;
9292
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
93-
gap: 20px;
94-
padding: 30px;
95-
padding-top: 10px;
93+
gap: 25px;
94+
padding-left: 80px;
95+
padding-right: 40px;
96+
padding-top: 40px;
97+
padding-bottom: 10px;
9698
}
9799

98100
/* Model Accordion Styles */
@@ -132,9 +134,14 @@ markdown. .hljs {
132134
}
133135

134136
.search-row {
137+
position: fixed;
138+
top: 5px;
139+
left: 0;
135140
display: flex;
136141
justify-content: space-between;
137142
align-items: center;
138143
width: 100%;
139-
padding: 0 2rem;
144+
padding-left: 80px;
145+
padding-right: 40px;
146+
padding-bottom: 0px;
140147
}

‎web/src/routes/+layout.svelte

+109-97
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,10 @@
2424
isSidebarOpen = !isSidebarOpen;
2525
}
2626
27+
function hideSidebar(): void {
28+
isSidebarOpen = false;
29+
}
30+
2731
onMount(() => {
2832
theme = localStorage.getItem("data-theme") || "dark";
2933
document.documentElement.setAttribute("data-theme", theme);
@@ -116,7 +120,10 @@
116120
});
117121
</script>
118122

119-
<button on:click={toggleSidebar} class="btn btn-square z-10 fixed">
123+
<button
124+
on:click={toggleSidebar}
125+
class="border-base-content/[.2] btn btn-square z-10 my-1 mx-2 fixed border"
126+
>
120127
<svg
121128
xmlns="http://www.w3.org/2000/svg"
122129
fill="none"
@@ -130,27 +137,32 @@
130137
></path></svg
131138
>
132139
</button>
140+
133141
<aside
134-
id="default-sidebar"
135-
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"
136-
class:w-75={isSidebarOpen}
137-
class:w-0={!isSidebarOpen}
142+
class="border-base-content/[.2] fixed top-0 z-40 min-h-full border-r transition-all overflow-hidden aria-label=Sidebar"
143+
class:left-0={isSidebarOpen}
144+
class:-left-80={!isSidebarOpen}
138145
>
139146
<div
140147
class="bg-base-200 relative h-screen py-1 px-2 overflow-hidden flex flex-col items-center justify-between"
141148
>
142-
<div
143-
class="w-full flex items-center border-b border-base-content/[.2] pb-1"
144-
>
145-
<button class="btn btn-ghost flex-shrink-0" on:click={goToHome}>
149+
<div class="w-full flex items-center pb-1">
150+
<button
151+
on:click={toggleSidebar}
152+
class="border-base-content/[.2] btn btn-square border"
153+
>
146154
<svg
147155
xmlns="http://www.w3.org/2000/svg"
156+
fill="none"
148157
viewBox="0 0 24 24"
149-
fill="currentColor"
150-
class="w-5 h-5"
158+
class="inline-block w-5 h-5 stroke-current"
159+
><path
160+
stroke-linecap="round"
161+
stroke-linejoin="round"
162+
stroke-width="2"
163+
d="M4 6h16M4 12h16M4 18h16"
164+
></path></svg
151165
>
152-
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
153-
</svg>
154166
</button>
155167
<button
156168
disabled={isLoading || !modelAvailable}
@@ -172,69 +184,87 @@
172184
</svg>
173185
<span>New Chat</span>
174186
</button>
175-
<button
176-
id="toggle-sidebar-btn"
177-
tabindex="0"
178-
on:click={toggleSidebar}
179-
on:keydown={(event) => {
180-
if (event.key === "Escape") {
181-
toggleSidebar();
182-
}
183-
}}
184-
aria-label="Close Sidebar"
185-
class="btn btn-ghost flex-shrink-0"
186-
>&#10005;
187+
188+
<button class="btn btn-ghost flex-shrink-0" on:click={goToHome}>
189+
<svg
190+
xmlns="http://www.w3.org/2000/svg"
191+
viewBox="0 0 24 24"
192+
fill="currentColor"
193+
class="w-5 h-5"
194+
>
195+
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
196+
</svg>
197+
<span class="sr-only">Home</span>
187198
</button>
188199
</div>
189200
<ul
190-
class="my-1 w-full h-[85%] overflow-y-auto no-scrollbar firefox-no-scrollbar ie-edge-no-scrollbar"
201+
class="my-1 w-full flex-grow overflow-y-auto no-scrollbar firefox-no-scrollbar ie-edge-no-scrollbar"
191202
>
192-
{#each data.chats as chat (chat.id)}
193-
<li in:fly={{ x: -100, duration: 900 }}>
194-
<a
195-
href={"/chat/" + chat.id}
196-
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"
197-
class:bg-base-300={id === chat.id}
198-
>
199-
<div class="flex w-full flex-col">
200-
<div class="flex w-full flex-col items-start justify-start">
201-
<div
202-
class="relative flex w-full flex-row items-center justify-between"
203-
>
204-
<div class="flex flex-col">
205-
<p class="text-sm font-light">
206-
{truncate(chat.subtitle, 42)}
207-
</p>
208-
<span class="text-xs font-semibold">{chat.model}</span>
209-
<span class="text-xs"
210-
>{timeSince(chat.created) + " ago"}</span
211-
>
212-
</div>
203+
{#if data && data.chats}
204+
{#each data.chats as chat (chat.id)}
205+
<li in:fly={{ x: -100, duration: 900 }}>
206+
<a
207+
href={"/chat/" + chat.id}
208+
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"
209+
class:bg-base-300={id === chat.id}
210+
>
211+
<div class="flex w-full flex-col">
212+
<div class="flex w-full flex-col items-start justify-start">
213213
<div
214-
class="absolute right-0 opacity-0 group-hover:opacity-100 transition"
214+
class="relative flex w-full flex-row items-center justify-between"
215215
>
216-
<!-- {#if $page.params.id === chat.id} -->
217-
{#if deleteConfirm}
218-
<div class="flex flex-row items-center">
219-
<button
220-
name="confirm-delete"
221-
class="btn-ghost btn-sm btn"
222-
on:click|preventDefault={() => deleteChat(chat.id)}
223-
>
224-
<svg
225-
xmlns="http://www.w3.org/2000/svg"
226-
viewBox="0 0 16 16"
227-
width="16"
228-
height="16"
216+
<div class="flex flex-col">
217+
<p class="text-sm font-light">
218+
{truncate(chat.subtitle, 42)}
219+
</p>
220+
<span class="text-xs font-semibold">{chat.model}</span>
221+
<span class="text-xs"
222+
>{timeSince(chat.created) + " ago"}</span
223+
>
224+
</div>
225+
<div
226+
class="absolute right-0 opacity-0 group-hover:opacity-100 transition"
227+
>
228+
<!-- {#if $page.params.id === chat.id} -->
229+
{#if deleteConfirm}
230+
<div class="flex flex-row items-center">
231+
<button
232+
name="confirm-delete"
233+
class="btn-ghost btn-sm btn"
234+
on:click|preventDefault={() => deleteChat(chat.id)}
229235
>
230-
<path
231-
class="fill-base-content"
232-
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"
233-
/>
234-
</svg>
235-
</button>
236+
<svg
237+
xmlns="http://www.w3.org/2000/svg"
238+
viewBox="0 0 16 16"
239+
width="16"
240+
height="16"
241+
>
242+
<path
243+
class="fill-base-content"
244+
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"
245+
/>
246+
</svg>
247+
</button>
248+
<button
249+
name="cancel-delete"
250+
class="btn-ghost btn-sm btn"
251+
on:click|preventDefault={toggleDeleteConfirm}
252+
>
253+
<svg
254+
xmlns="http://www.w3.org/2000/svg"
255+
viewBox="0 0 16 16"
256+
width="16"
257+
height="16"
258+
>
259+
<path
260+
class="fill-base-content"
261+
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"
262+
/>
263+
</svg>
264+
</button>
265+
</div>
266+
{:else}
236267
<button
237-
name="cancel-delete"
238268
class="btn-ghost btn-sm btn"
239269
on:click|preventDefault={toggleDeleteConfirm}
240270
>
@@ -246,37 +276,20 @@
246276
>
247277
<path
248278
class="fill-base-content"
249-
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"
279+
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"
250280
/>
251281
</svg>
252282
</button>
253-
</div>
254-
{:else}
255-
<button
256-
class="btn-ghost btn-sm btn"
257-
on:click|preventDefault={toggleDeleteConfirm}
258-
>
259-
<svg
260-
xmlns="http://www.w3.org/2000/svg"
261-
viewBox="0 0 16 16"
262-
width="16"
263-
height="16"
264-
>
265-
<path
266-
class="fill-base-content"
267-
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"
268-
/>
269-
</svg>
270-
</button>
271-
{/if}
272-
<!-- {/if} -->
283+
{/if}
284+
<!-- {/if} -->
285+
</div>
273286
</div>
274287
</div>
275288
</div>
276-
</div>
277-
</a>
278-
</li>
279-
{/each}
289+
</a>
290+
</li>
291+
{/each}
292+
{/if}
280293
</ul>
281294
<div class="w-full border-t border-base-content/[.2] pt-1">
282295
{#if deleteAllConfirm}
@@ -361,8 +374,7 @@
361374
on:click={toggleTheme}
362375
class="btn btn-ghost w-full flex justify-start items-center p-2.5 text-left text-sm capitalize"
363376
>
364-
<label class="swap swap-rotate">
365-
<input type="checkbox" />
377+
<label class="swap swap-rotate" for="theme-toggle">
366378
<svg
367379
xmlns="http://www.w3.org/2000/svg"
368380
viewBox="0 0 16 16"
@@ -415,6 +427,6 @@
415427
</div>
416428
</aside>
417429

418-
<div class={"h-full" + (isSidebarOpen ? " ml-64 min-w-64" : " min-w-0")}>
430+
<button class="h-full w-full" on:click={hideSidebar} type="button">
419431
<slot />
420-
</div>
432+
</button>

0 commit comments

Comments
 (0)