forked from containers/podman-desktop-extension-ai-lab
-
Notifications
You must be signed in to change notification settings - Fork 0
/
InferenceServerDetails.svelte
180 lines (164 loc) · 6.78 KB
/
InferenceServerDetails.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<script lang="ts">
import { inferenceServers } from '/@/stores/inferenceServers';
import NavPage from '/@/lib/NavPage.svelte';
import ServiceStatus from '/@/lib/table/service/ServiceStatus.svelte';
import ServiceAction from '/@/lib/table/service/ServiceAction.svelte';
import Fa from 'svelte-fa';
import { faBuildingColumns, faMicrochip, faScaleBalanced } from '@fortawesome/free-solid-svg-icons';
import type { InferenceServer } from '@shared/src/models/IInference';
import { snippetLanguages } from '/@/stores/snippetLanguages';
import type { LanguageVariant } from 'postman-code-generators';
import { studioClient } from '/@/utils/client';
export let containerId: string | undefined = undefined;
let service: InferenceServer | undefined;
$: service = $inferenceServers.find(server => server.container.containerId === containerId);
let selectedLanguage: string | undefined = undefined;
$: selectedLanguage;
let variants: LanguageVariant[] = [];
$: variants = $snippetLanguages.find(language => language.key === selectedLanguage)?.variants || [];
let selectedVariant: string | undefined = undefined;
$: selectedVariant;
const onLanguageChange = (): void => {
selectedVariant = variants.length > 0 ? variants[0].key : undefined;
generate();
};
let snippet: string | undefined = undefined;
$: snippet;
const generate = async () => {
if (selectedVariant === undefined || selectedLanguage === undefined) return;
snippet = await studioClient.createSnippet(
{
url: `http://localhost:${service?.connection.port || '??'}/v1/chat/completions`,
method: 'POST',
header: [
{
key: 'Content-Type',
value: 'application/json',
},
],
body: {
mode: 'raw',
raw: `{
"messages": [
{
"content": "You are a helpful assistant.",
"role": "system"
},
{
"content": "What is the capital of France?",
"role": "user"
}
]
}`,
},
},
selectedLanguage,
selectedVariant,
);
};
</script>
<NavPage title="Service Details" searchEnabled="{false}">
<svelte:fragment slot="content">
<div slot="content" class="flex flex-col min-w-full min-h-full">
<div class="min-w-full min-h-full flex-1">
<div class="mt-4 px-5 space-y-5">
{#if service !== undefined}
<!-- container details -->
<div class="bg-charcoal-800 rounded-md w-full px-4 pt-2 pb-4">
<!-- container info -->
<span class="text-sm">Container</span>
<div class="w-full bg-charcoal-600 rounded-md p-2 flex items-center">
<div class="grow ml-2 flex flex-row">
<ServiceStatus object="{service}" />
<div class="flex flex-col text-xs ml-2">
<span>{service.container.containerId}</span>
</div>
</div>
<ServiceAction object="{service}" />
</div>
<!-- models info -->
<div class="mt-4">
<span class="text-sm">Models</span>
<div class="w-full bg-charcoal-600 rounded-md p-2 flex flex-col gap-y-4">
{#each service.models as model}
<div class="flex flex-row gap-2 items-center">
<div class="grow text-sm">{model.name}</div>
<div>
<div
class="bg-charcoal-800 rounded-md p-2 flex flex-row w-min h-min text-xs text-charcoal-100 text-nowrap items-center">
<Fa class="mr-2" icon="{faScaleBalanced}" />
{model.license}
</div>
</div>
<div>
<div
class="bg-charcoal-800 rounded-md p-2 flex flex-row w-min h-min text-xs text-charcoal-100 text-nowrap items-center">
<Fa class="mr-2" icon="{faBuildingColumns}" />
{model.registry}
</div>
</div>
</div>
{/each}
</div>
</div>
</div>
<!-- server details -->
<div class="bg-charcoal-800 rounded-md w-full px-4 pt-2 pb-4 mt-2">
<span class="text-sm">Server</span>
<div class="flex flex-row gap-4">
<div class="bg-charcoal-600 rounded-md p-2 flex flex-row w-min h-min text-xs text-nowrap items-center">
http://localhost:{service.connection.port}/v1
</div>
<div class="bg-charcoal-600 rounded-md p-2 flex flex-row w-min h-min text-xs text-nowrap items-center">
CPU Inference
<Fa class="ml-2" icon="{faMicrochip}" />
</div>
</div>
</div>
<!-- code client -->
<div>
<div class="flex flex-row">
<span class="text-base grow">Client code</span>
<!-- language choice -->
<select
required
aria-label="snippet language selection"
bind:value="{selectedLanguage}"
on:change="{onLanguageChange}"
id="languages"
class="border text-sm rounded-lg focus:ring-purple-500 focus:border-purple-500 block p-1 bg-charcoal-900 border-charcoal-900 placeholder-gray-700 text-white"
name="languages">
{#each $snippetLanguages as language}
<option class="my-1" value="{language.key}">{language.label}</option>
{/each}
</select>
{#if selectedVariant !== undefined}
<select
required
aria-label="snippet language variant"
id="variants"
bind:value="{selectedVariant}"
on:change="{generate}"
disabled="{variants.length === 1}"
class="border ml-1 text-sm rounded-lg focus:ring-purple-500 focus:border-purple-500 block p-1 bg-charcoal-900 border-charcoal-900 placeholder-gray-700 text-white"
name="variants">
{#each variants as variant}
<option class="my-1" value="{variant.key}">{variant.key}</option>
{/each}
</select>
{/if}
</div>
{#if snippet !== undefined}
<div class="bg-charcoal-900 rounded-md w-full p-4 mt-2">
<code class="whitespace-break-spaces">
{snippet}
</code>
</div>
{/if}
</div>
{/if}
</div>
</div>
</div>
</svelte:fragment>
</NavPage>