Skip to content

Commit 347a5bb

Browse files
yujongleeyujonglee
committed
fix query fetching from param
1 parent 9a56646 commit 347a5bb

File tree

1 file changed

+95
-87
lines changed

1 file changed

+95
-87
lines changed

‎src/App.svelte‎

Lines changed: 95 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,13 @@
2222
const RESOURCE_PATH = `${RESOURCE_NAME}`;
2323
const RESOURCE_BACKUP_PATH = `litellm/${RESOURCE_BACKUP_NAME}`;
2424
let providers: string[] = [];
25-
let selectedProvider: string = '';
25+
let selectedProvider: string = "";
2626
let maxInputTokens: number | null = null;
2727
let maxOutputTokens: number | null = null;
2828
2929
onMount(() => {
3030
const urlParams = new URLSearchParams(window.location.search);
31-
query = urlParams.get("q");
31+
query = urlParams.get("q") ?? "";
3232
3333
fetch(
3434
`https://api.github.com/repos/${REPO_FULL_NAME}/commits/${DEFAULT_BRANCH}`,
@@ -128,48 +128,59 @@ We also need to update [${RESOURCE_BACKUP_NAME}](https://github.com/${REPO_FULL_
128128
let loading = true;
129129
130130
$: {
131-
filterResults(query, selectedProvider, maxInputTokens, maxOutputTokens);
131+
if (index) {
132+
filterResults(query, selectedProvider, maxInputTokens, maxOutputTokens);
133+
}
132134
}
133135
134-
function filterResults(query: string, selectedProvider: string, maxInputTokens: number | null, maxOutputTokens: number | null) {
135-
if (index) {
136-
let filteredResults: Item[];
137-
138-
// Get all items from the index
139-
const allItems = index['_docs'] as Item[];
136+
function filterResults(
137+
query: string,
138+
selectedProvider: string,
139+
maxInputTokens: number | null,
140+
maxOutputTokens: number | null,
141+
) {
142+
if (index) {
143+
let filteredResults: Item[];
144+
145+
// Get all items from the index
146+
const allItems = index["_docs"] as Item[];
147+
148+
// Filter by provider and max_input_tokens and max_output_tokens
149+
filteredResults = allItems.filter(
150+
(item) =>
151+
(!selectedProvider || item.litellm_provider === selectedProvider) &&
152+
(maxInputTokens === null ||
153+
(item.max_input_tokens &&
154+
item.max_input_tokens >= maxInputTokens)) &&
155+
(maxOutputTokens === null ||
156+
(item.max_output_tokens &&
157+
item.max_output_tokens >= maxOutputTokens)),
158+
);
140159
141-
// Filter by provider and max_input_tokens and max_output_tokens
142-
filteredResults = allItems.filter(item =>
143-
(!selectedProvider || item.litellm_provider === selectedProvider) &&
144-
(maxInputTokens === null || (item.max_input_tokens && item.max_input_tokens >= maxInputTokens)) &&
145-
(maxOutputTokens === null || (item.max_output_tokens && item.max_output_tokens >= maxOutputTokens))
146-
);
160+
// Then, apply search query if it's not empty
161+
if (query) {
162+
// Create a new Fuse instance with the filtered results
163+
const filteredIndex = new Fuse(filteredResults, {
164+
threshold: 0.3,
165+
keys: [
166+
{
167+
name: "name",
168+
weight: 1.5,
169+
},
170+
"mode",
171+
"litellm_provider",
172+
],
173+
});
147174
148-
// Then, apply search query if it's not empty
149-
if (query !== "" && query !== null) {
150-
// Create a new Fuse instance with the filtered results
151-
const filteredIndex = new Fuse(filteredResults, {
152-
threshold: 0.3,
153-
keys: [
154-
{
155-
name: "name",
156-
weight: 1.5,
157-
},
158-
"mode",
159-
"litellm_provider",
160-
],
161-
});
175+
const searchResults = filteredIndex.search(query);
176+
filteredResults = searchResults.map((result) => result.item);
177+
}
162178
163-
const searchResults = filteredIndex.search(query);
164-
filteredResults = searchResults.map(result => result.item);
179+
// Map the filtered results to the ResultItem format
180+
results = filteredResults.map((item, refIndex) => ({ item, refIndex }));
181+
loading = false;
165182
}
166-
167-
// Map the filtered results to the ResultItem format
168-
results = filteredResults.map((item, refIndex) => ({ item, refIndex }));
169-
loading = false;
170183
}
171-
172-
}
173184
</script>
174185

175186
<main class="container">
@@ -194,60 +205,57 @@ We also need to update [${RESOURCE_BACKUP_NAME}](https://github.com/${REPO_FULL_
194205
<a
195206
href="https://github.com/BerriAI/litellm/blob/main/model_prices_and_context_window.json"
196207
>
197-
🚅 Litellm
208+
🚅 Litellm
198209
</a>.
199210
</section>
200211
{:else}
201212
<section style="height: 1.5em;" />
202213
{/if}
203214

204215
<input
205-
id="query"
206-
bind:value={query}
207-
type="search"
208-
autocomplete="off"
209-
name="query"
210-
aria-label="query"
211-
placeholder="Search for models..."
212-
/>
213-
214-
215-
216-
<div class="filter-container">
217-
218-
<div class="filter-row">
219-
<div class="filter-item">
220-
<label for="provider">Select provider:</label>
221-
<select id="provider" bind:value={selectedProvider}>
222-
<option value="">All Providers</option>
223-
{#each providers as provider}
224-
<option value={provider}>{provider}</option>
225-
{/each}
226-
</select>
227-
</div>
228-
229-
<div class="filter-item">
230-
<label for="maxInputTokens">max_input_tokens >=</label>
231-
<input
232-
id="maxInputTokens"
233-
bind:value={maxInputTokens}
234-
type="number"
235-
min="0"
236-
placeholder="Enter minimum max_input_tokens"
237-
/>
238-
</div>
239-
<div class="filter-item">
240-
<label for="maxOutputTokens">max_output_tokens >=</label>
241-
<input
242-
id="maxOutputTokens"
243-
bind:value={maxOutputTokens}
244-
type="number"
245-
min="0"
246-
placeholder="Enter minimum max_output_tokens"
247-
/>
216+
id="query"
217+
bind:value={query}
218+
type="search"
219+
autocomplete="off"
220+
name="query"
221+
aria-label="query"
222+
placeholder="Search for models..."
223+
/>
224+
225+
<div class="filter-container">
226+
<div class="filter-row">
227+
<div class="filter-item">
228+
<label for="provider">Select provider:</label>
229+
<select id="provider" bind:value={selectedProvider}>
230+
<option value="">All Providers</option>
231+
{#each providers as provider}
232+
<option value={provider}>{provider}</option>
233+
{/each}
234+
</select>
235+
</div>
236+
237+
<div class="filter-item">
238+
<label for="maxInputTokens">max_input_tokens >=</label>
239+
<input
240+
id="maxInputTokens"
241+
bind:value={maxInputTokens}
242+
type="number"
243+
min="0"
244+
placeholder="Enter minimum max_input_tokens"
245+
/>
246+
</div>
247+
<div class="filter-item">
248+
<label for="maxOutputTokens">max_output_tokens >=</label>
249+
<input
250+
id="maxOutputTokens"
251+
bind:value={maxOutputTokens}
252+
type="number"
253+
min="0"
254+
placeholder="Enter minimum max_output_tokens"
255+
/>
256+
</div>
248257
</div>
249258
</div>
250-
</div>
251259

252260
{#if loading}
253261
<span aria-busy="true" />
@@ -288,7 +296,6 @@ We also need to update [${RESOURCE_BACKUP_NAME}](https://github.com/${REPO_FULL_
288296
white-space: nowrap;
289297
}
290298
291-
292299
/* Remove the margin-top from the existing select style */
293300
select {
294301
width: 100%;
@@ -301,10 +308,11 @@ We also need to update [${RESOURCE_BACKUP_NAME}](https://github.com/${REPO_FULL_
301308
h2 {
302309
margin-top: 2rem;
303310
}
304-
input, select {
311+
input,
312+
select {
305313
margin-top: 0.5rem; /* Ensure margin top for all inputs and selects */
306314
}
307-
315+
308316
.truncate {
309317
overflow: hidden;
310318
text-overflow: ellipsis;
@@ -329,9 +337,9 @@ We also need to update [${RESOURCE_BACKUP_NAME}](https://github.com/${REPO_FULL_
329337
}
330338
331339
/* Alignment and full width for inputs inside flex containers */
332-
select, input[type="number"] {
340+
select,
341+
input[type="number"] {
333342
width: 100%; /* makes input take full width of its parent */
334343
margin-top: 0.4rem; /* Add a little top margin for visual spacing */
335344
}
336-
337345
</style>

0 commit comments

Comments
 (0)