Skip to content

Commit f681691

Browse files
author
Adelino Ngomacha
committed
feat: add ai form page
1 parent f964768 commit f681691

File tree

11 files changed

+841
-545
lines changed

11 files changed

+841
-545
lines changed

‎bun.lockb

-98 KB
Binary file not shown.

‎libs/components/Dashboard/Settings/Forms/AIForm.vue

+271
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,271 @@
1+
<script setup lang="ts">
2+
3+
</script>
4+
5+
<template>
6+
<form>
7+
<div class="space-y-12">
8+
<div class="border-b border-gray-900/10 pb-12">
9+
<div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
10+
<div class="sm:col-span-3">
11+
<label for="default-config" class="block text-sm font-medium leading-6 text-gray-900">Deploy AI
12+
Endpoints</label>
13+
<div class="mt-2">
14+
<!-- Enabled: "bg-indigo-600", Not Enabled: "bg-gray-200" -->
15+
<button
16+
type="button"
17+
class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-gray-200 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"
18+
role="switch" aria-checked="false"
19+
>
20+
<span class="sr-only">Deploy</span>
21+
<!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" -->
22+
<span
23+
aria-hidden="true"
24+
class="pointer-events-none inline-block h-5 w-5 translate-x-0 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
25+
/>
26+
</button>
27+
</div>
28+
</div>
29+
30+
<div class="sm:col-span-3"></div>
31+
32+
<div class="sm:col-span-3">
33+
<div>
34+
<label for="combobox" class="block text-sm font-medium leading-6 text-gray-900">Models</label>
35+
<div class="relative mt-2">
36+
<input
37+
id="combobox" type="text"
38+
class="w-full rounded-md border-0 bg-white py-1.5 pl-3 pr-12 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
39+
role="combobox" aria-controls="options" aria-expanded="false"
40+
value="meta.llama2-70b-chat-v1"
41+
>
42+
<button
43+
type="button"
44+
class="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none"
45+
>
46+
<svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
47+
<path
48+
fill-rule="evenodd"
49+
d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"
50+
clip-rule="evenodd"
51+
/>
52+
</svg>
53+
</button>
54+
55+
<ul
56+
id="options"
57+
class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
58+
role="listbox"
59+
>
60+
<!--
61+
Combobox option, manage highlight styles based on mouseenter/mouseleave and keyboard navigation.
62+
63+
Active: "text-white bg-indigo-600", Not Active: "text-gray-900"
64+
-->
65+
<li
66+
id="option-2"
67+
class="relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900 hover:text-white hover:bg-indigo-600"
68+
role="option" tabindex="-1"
69+
>
70+
<div class="flex items-center">
71+
<!-- Online: "bg-green-400", Not Online: "bg-gray-200" -->
72+
<span class="inline-block h-2 w-2 flex-shrink-0 rounded-full bg-gray-200" aria-hidden="true" />
73+
<!-- Selected: "font-semibold" -->
74+
<span class="ml-3 truncate">
75+
amazon.titan-embed-text-v1
76+
<span class="sr-only"> is offline</span>
77+
</span>
78+
</div>
79+
</li>
80+
<li
81+
id="option-1"
82+
class="relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900 hover:text-white hover:bg-indigo-600"
83+
role="option" tabindex="-1"
84+
>
85+
<div class="flex items-center">
86+
<!-- Online: "bg-green-400", Not Online: "bg-gray-200" -->
87+
<span class="inline-block h-2 w-2 flex-shrink-0 rounded-full bg-green-400" aria-hidden="true" />
88+
<!-- Selected: "font-semibold" -->
89+
<span class="ml-3 truncate">
90+
amazon.titan-text-express-v1
91+
<span class="sr-only"> is online</span>
92+
</span>
93+
</div>
94+
</li>
95+
<li
96+
id="option-1"
97+
class="relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900 hover:text-white hover:bg-indigo-600"
98+
role="option" tabindex="-1"
99+
>
100+
<div class="flex items-center">
101+
<!-- Online: "bg-green-400", Not Online: "bg-gray-200" -->
102+
<span class="inline-block h-2 w-2 flex-shrink-0 rounded-full bg-green-400" aria-hidden="true" />
103+
<!-- Selected: "font-semibold" -->
104+
<span class="ml-3 truncate">
105+
amazon.titan-text-lite-v1
106+
<span class="sr-only"> is online</span>
107+
</span>
108+
</div>
109+
</li>
110+
<li
111+
id="option-2"
112+
class="relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900 hover:text-white hover:bg-indigo-600"
113+
role="option" tabindex="-1"
114+
>
115+
<div class="flex items-center">
116+
<!-- Online: "bg-green-400", Not Online: "bg-gray-200" -->
117+
<span class="inline-block h-2 w-2 flex-shrink-0 rounded-full bg-gray-200" aria-hidden="true" />
118+
<!-- Selected: "font-semibold" -->
119+
<span class="ml-3 truncate">
120+
amazon.titan-embed-image-v1
121+
<span class="sr-only"> is offline</span>
122+
</span>
123+
</div>
124+
</li>
125+
<li
126+
id="option-2"
127+
class="relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900 hover:text-white hover:bg-indigo-600"
128+
role="option" tabindex="-1"
129+
>
130+
<div class="flex items-center">
131+
<!-- Online: "bg-green-400", Not Online: "bg-gray-200" -->
132+
<span class="inline-block h-2 w-2 flex-shrink-0 rounded-full bg-gray-200" aria-hidden="true" />
133+
<!-- Selected: "font-semibold" -->
134+
<span class="ml-3 truncate">
135+
amazon.titan-image-generator-v1
136+
<span class="sr-only"> is offline</span>
137+
</span>
138+
</div>
139+
</li>
140+
<li
141+
id="option-2"
142+
class="relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900 hover:text-white hover:bg-indigo-600"
143+
role="option" tabindex="-1"
144+
>
145+
<div class="flex items-center">
146+
<!-- Online: "bg-green-400", Not Online: "bg-gray-200" -->
147+
<span class="inline-block h-2 w-2 flex-shrink-0 rounded-full bg-gray-200" aria-hidden="true" />
148+
<!-- Selected: "font-semibold" -->
149+
<span class="ml-3 truncate">
150+
anthropic.claude-v1
151+
<span class="sr-only"> is offline</span>
152+
</span>
153+
</div>
154+
</li>
155+
<li
156+
id="option-2"
157+
class="relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900 hover:text-white hover:bg-indigo-600"
158+
role="option" tabindex="-1"
159+
>
160+
<div class="flex items-center">
161+
<!-- Online: "bg-green-400", Not Online: "bg-gray-200" -->
162+
<span class="inline-block h-2 w-2 flex-shrink-0 rounded-full bg-gray-200" aria-hidden="true" />
163+
<!-- Selected: "font-semibold" -->
164+
<span class="ml-3 truncate">
165+
anthropic.claude-v2
166+
<span class="sr-only"> is offline</span>
167+
</span>
168+
</div>
169+
</li>
170+
<li
171+
id="option-2"
172+
class="relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900 hover:text-white hover:bg-indigo-600"
173+
role="option" tabindex="-1"
174+
>
175+
<div class="flex items-center">
176+
<!-- Online: "bg-green-400", Not Online: "bg-gray-200" -->
177+
<span class="inline-block h-2 w-2 flex-shrink-0 rounded-full bg-gray-200" aria-hidden="true" />
178+
<!-- Selected: "font-semibold" -->
179+
<span class="ml-3 truncate">
180+
anthropic.claude-v2:1
181+
<span class="sr-only"> is offline</span>
182+
</span>
183+
</div>
184+
</li>
185+
<li
186+
id="option-2"
187+
class="relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900 hover:text-white hover:bg-indigo-600"
188+
role="option" tabindex="-1"
189+
>
190+
<div class="flex items-center">
191+
<!-- Online: "bg-green-400", Not Online: "bg-gray-200" -->
192+
<span class="inline-block h-2 w-2 flex-shrink-0 rounded-full bg-gray-200" aria-hidden="true" />
193+
<!-- Selected: "font-semibold" -->
194+
<span class="ml-3 truncate">
195+
anthropic.claude-instant-v1
196+
<span class="sr-only"> is offline</span>
197+
</span>
198+
</div>
199+
</li>
200+
<li
201+
id="option-2"
202+
class="relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900 hover:text-white hover:bg-indigo-600"
203+
role="option" tabindex="-1"
204+
>
205+
<div class="flex items-center">
206+
<!-- Online: "bg-green-400", Not Online: "bg-gray-200" -->
207+
<span class="inline-block h-2 w-2 flex-shrink-0 rounded-full bg-gray-200" aria-hidden="true" />
208+
<!-- Selected: "font-semibold" -->
209+
<span class="ml-3 truncate">
210+
meta.llama2-13b-chat-v1
211+
<span class="sr-only"> is offline</span>
212+
</span>
213+
</div>
214+
</li>
215+
<li
216+
id="option-0"
217+
class="relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900 hover:text-white hover:bg-indigo-600"
218+
role="option" tabindex="-1"
219+
>
220+
<div class="flex items-center">
221+
<!-- Online: "bg-green-400", Not Online: "bg-gray-200" -->
222+
<span class="inline-block h-2 w-2 flex-shrink-0 rounded-full bg-green-400" aria-hidden="true" />
223+
<!-- Selected: "font-semibold" -->
224+
<span class="ml-3 truncate">
225+
amazon.titan-text-express-v1
226+
<span class="sr-only"> is online</span>
227+
</span>
228+
</div>
229+
230+
<!--
231+
Checkmark, only display for selected option.
232+
233+
Active: "text-white", Not Active: "text-indigo-600"
234+
-->
235+
<span class="absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600">
236+
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
237+
<path
238+
fill-rule="evenodd"
239+
d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
240+
clip-rule="evenodd"
241+
/>
242+
</svg>
243+
</span>
244+
</li>
245+
246+
<!-- More items... -->
247+
</ul>
248+
</div>
249+
</div>
250+
</div>
251+
</div>
252+
</div>
253+
</div>
254+
255+
<div class="mt-6 flex items-center justify-end gap-x-6">
256+
<button type="button" class="text-sm font-semibold leading-6 text-gray-900">
257+
Cancel
258+
</button>
259+
<Button
260+
type="submit"
261+
class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
262+
>
263+
Save
264+
</Button>
265+
</div>
266+
</form>
267+
</template>
268+
269+
<style scoped>
270+
271+
</style>

0 commit comments

Comments
 (0)