Skip to content

Commit f250f57

Browse files
mishig25mishig25
committed
format
1 parent ba51e63 commit f250f57

File tree

4 files changed

+66
-37
lines changed

4 files changed

+66
-37
lines changed

‎src/lib/components/InferencePlayground/InferencePlayground.svelte

Lines changed: 41 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -186,11 +186,11 @@
186186

187187
<!-- svelte-ignore a11y-no-static-element-interactions -->
188188
<div
189-
class="w-dvh grid divide-gray-200 overflow-hidden bg-gray-100/50 max-md:divide-y h-dvh max-md:grid-rows-[120px,1fr] md:grid-cols-[clamp(220px,20%,350px),minmax(0,1fr),clamp(270px,25%,300px)] dark:divide-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:[color-scheme:dark]"
189+
class="w-dvh grid h-dvh divide-gray-200 overflow-hidden bg-gray-100/50 max-md:grid-rows-[120px,1fr] max-md:divide-y md:grid-cols-[clamp(220px,20%,350px),minmax(0,1fr),clamp(270px,25%,300px)] dark:divide-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:[color-scheme:dark]"
190190
>
191-
<div class="flex flex-col overflow-y-auto py-3 max-md:pl-3 pr-3">
191+
<div class="flex flex-col overflow-y-auto py-3 pr-3 max-md:pl-3">
192192
<div
193-
class="relative flex flex-1 flex-col gap-6 overflow-y-hidden max-md:rounded-xl rounded-r-xl border-x border-y border-gray-200/80 bg-gradient-to-b from-white via-white p-3 shadow-sm dark:border-white/5 dark:from-gray-800/40 dark:via-gray-800/40"
193+
class="relative flex flex-1 flex-col gap-6 overflow-y-hidden rounded-r-xl border-x border-y border-gray-200/80 bg-gradient-to-b from-white via-white p-3 shadow-sm max-md:rounded-xl dark:border-white/5 dark:from-gray-800/40 dark:via-gray-800/40"
194194
class:pointer-events-none={!systemPromptSupported}
195195
class:opacity-70={!systemPromptSupported}
196196
>
@@ -220,17 +220,43 @@
220220
/>
221221
</div>
222222
<div
223-
class="fixed inset-x-0 bottom-0 flex h-20 items-center gap-2 overflow-hidden whitespace-nowrap px-3 md:absolute bg-white dark:bg-gray-900"
223+
class="fixed inset-x-0 bottom-0 flex h-20 items-center gap-2 overflow-hidden whitespace-nowrap bg-white px-3 md:absolute dark:bg-gray-900"
224224
>
225-
<button
226-
type="button"
227-
on:click={() => (viewSettings = !viewSettings)}
228-
class="md:hidden flex h-[39px] items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
229-
>
230-
<svg class="text-black dark:text-white" style="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path class="uim-quaternary" d="M20.23 7.24L12 12L3.77 7.24a1.98 1.98 0 0 1 .7-.71L11 2.76c.62-.35 1.38-.35 2 0l6.53 3.77c.29.173.531.418.7.71z" opacity=".25" fill="currentColor"></path><path class="uim-tertiary" d="M12 12v9.5a2.09 2.09 0 0 1-.91-.21L4.5 17.48a2.003 2.003 0 0 1-1-1.73v-7.5a2.06 2.06 0 0 1 .27-1.01L12 12z" opacity=".5" fill="currentColor"></path><path class="uim-primary" d="M20.5 8.25v7.5a2.003 2.003 0 0 1-1 1.73l-6.62 3.82c-.275.13-.576.198-.88.2V12l8.23-4.76c.175.308.268.656.27 1.01z" fill="currentColor"></path></svg>
231-
{!viewSettings ? "Settings" : "Hide Settings"}
232-
</button
233-
>
225+
<button
226+
type="button"
227+
on:click={() => (viewSettings = !viewSettings)}
228+
class="flex h-[39px] items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-100 md:hidden dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
229+
>
230+
<svg
231+
class="text-black dark:text-white"
232+
style=""
233+
xmlns="http://www.w3.org/2000/svg"
234+
xmlns:xlink="http://www.w3.org/1999/xlink"
235+
aria-hidden="true"
236+
focusable="false"
237+
role="img"
238+
width="1em"
239+
height="1em"
240+
preserveAspectRatio="xMidYMid meet"
241+
viewBox="0 0 24 24"
242+
><path
243+
class="uim-quaternary"
244+
d="M20.23 7.24L12 12L3.77 7.24a1.98 1.98 0 0 1 .7-.71L11 2.76c.62-.35 1.38-.35 2 0l6.53 3.77c.29.173.531.418.7.71z"
245+
opacity=".25"
246+
fill="currentColor"
247+
></path><path
248+
class="uim-tertiary"
249+
d="M12 12v9.5a2.09 2.09 0 0 1-.91-.21L4.5 17.48a2.003 2.003 0 0 1-1-1.73v-7.5a2.06 2.06 0 0 1 .27-1.01L12 12z"
250+
opacity=".5"
251+
fill="currentColor"
252+
></path><path
253+
class="uim-primary"
254+
d="M20.5 8.25v7.5a2.003 2.003 0 0 1-1 1.73l-6.62 3.82c-.275.13-.576.198-.88.2V12l8.23-4.76c.175.308.268.656.27 1.01z"
255+
fill="currentColor"
256+
></path></svg
257+
>
258+
{!viewSettings ? "Settings" : "Hide Settings"}
259+
</button>
234260
<button
235261
type="button"
236262
on:click={reset}
@@ -283,9 +309,9 @@
283309
</button>
284310
</div>
285311
</div>
286-
<div class="flex flex-col p-3 {viewSettings ? 'max-md:fixed' : 'max-md:hidden'} max-md:inset-x-0 max-md:bottom-20 ">
312+
<div class="flex flex-col p-3 {viewSettings ? 'max-md:fixed' : 'max-md:hidden'} max-md:inset-x-0 max-md:bottom-20">
287313
<div
288-
class="flex flex-1 flex-col gap-6 overflow-y-hidden rounded-xl border bg-white dark:bg-gray-900 border-gray-200/80 bg-gradient-to-b from-white via-white p-3 shadow-sm dark:border-white/5 dark:from-gray-800/40 dark:via-gray-800/40"
314+
class="flex flex-1 flex-col gap-6 overflow-y-hidden rounded-xl border border-gray-200/80 bg-white bg-gradient-to-b from-white via-white p-3 shadow-sm dark:border-white/5 dark:bg-gray-900 dark:from-gray-800/40 dark:via-gray-800/40"
289315
>
290316
<ModelSelector {models} bind:conversation />
291317

‎src/lib/components/InferencePlayground/InferencePlaygroundCodeSnippets.svelte

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -293,7 +293,7 @@ print(output.choices[0].message)`,
293293
</div>
294294

295295
{#each snippetsByLanguage[selectedLanguage] as { label, code, language, needsToken }}
296-
<div class="flex items-center justify-between px-2 md:px-4 pb-4 pt-6">
296+
<div class="flex items-center justify-between px-2 pb-4 pt-6 md:px-4">
297297
<h2 class="font-semibold">{label}</h2>
298298
<div class="flex items-center gap-x-4">
299299
{#if needsToken && hfToken}
@@ -302,23 +302,23 @@ print(output.choices[0].message)`,
302302
<p class="leading-none">show token</p>
303303
</label>
304304
{/if}
305-
<button
306-
class="flex items-center gap-x-1.5 rounded-md bg-gray-200 px-1.5 py-0.5 text-sm transition dark:bg-gray-950/80"
307-
on:click={e => {
308-
const el = e.currentTarget;
309-
el.classList.add("text-green-500");
310-
navigator.clipboard.writeText(code);
311-
if (timeout) {
312-
clearTimeout(timeout);
313-
}
314-
timeout = setTimeout(() => {
315-
el.classList.remove("text-green-500");
316-
}, 400);
317-
}}
318-
>
319-
<IconCopyCode /> Copy code
320-
</button>
321-
</div>
305+
<button
306+
class="flex items-center gap-x-1.5 rounded-md bg-gray-200 px-1.5 py-0.5 text-sm transition dark:bg-gray-950/80"
307+
on:click={e => {
308+
const el = e.currentTarget;
309+
el.classList.add("text-green-500");
310+
navigator.clipboard.writeText(code);
311+
if (timeout) {
312+
clearTimeout(timeout);
313+
}
314+
timeout = setTimeout(() => {
315+
el.classList.remove("text-green-500");
316+
}, 400);
317+
}}
318+
>
319+
<IconCopyCode /> Copy code
320+
</button>
321+
</div>
322322
</div>
323323
<pre
324324
class="overflow-x-auto rounded-lg border border-gray-200/80 bg-white px-4 py-6 text-sm shadow-sm dark:border-gray-800 dark:bg-gray-800/50">{@html highlight(

‎src/lib/components/InferencePlayground/InferencePlaygroundModelSelector.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
</label>
5555

5656
<button
57-
class="flex items-center justify-between gap-6 overflow-hidden whitespace-nowrap rounded-lg border bg-gray-100/80 px-3 py-1.5 leading-tight shadow dark:bg-gray-800 dark:border-gray-700"
57+
class="flex items-center justify-between gap-6 overflow-hidden whitespace-nowrap rounded-lg border bg-gray-100/80 px-3 py-1.5 leading-tight shadow dark:border-gray-700 dark:bg-gray-800"
5858
on:click={() => (showModelPickerModal = true)}
5959
>
6060
<div class="flex flex-col items-start">

‎src/lib/components/InferencePlayground/InferencePlaygroundModelSelectorModal.svelte

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -96,9 +96,12 @@
9696
bind:this={backdropEl}
9797
on:click|stopPropagation={handleBackdropClick}
9898
>
99-
<div class="flex w-full max-w-[600px] items-start justify-center p-10 whitespace-nowrap overflow-hidden">
100-
<div class="flex h-full w-full flex-col overflow-hidden rounded-lg border bg-white text-gray-900 shadow-md" bind:this={containerEl}>
101-
<div class="flex items-center border-b px-3">
99+
<div class="flex w-full max-w-[600px] items-start justify-center overflow-hidden whitespace-nowrap p-10">
100+
<div
101+
class="flex h-full w-full flex-col overflow-hidden rounded-lg border bg-white text-gray-900 shadow-md dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300"
102+
bind:this={containerEl}
103+
>
104+
<div class="flex items-center border-b px-3 dark:border-gray-800">
102105
<IconSearch classNames="mr-2 text-sm" />
103106
<input
104107
autofocus

0 commit comments

Comments
 (0)