Skip to content

Commit

Permalink
Add Built-in UIs section
Browse files Browse the repository at this point in the history
  • Loading branch information
@mythz
mythz committed Oct 16, 2024
1 parent 6064ae7 commit 8286d00
Show file tree
Hide file tree
Showing 4 changed files with 168 additions and 22 deletions.
7 changes: 2 additions & 5 deletions AiServer/wwwroot/Ui.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import SpeechToText from "/mjs/components/SpeechToText.mjs"
import TextToSpeech from "/mjs/components/TextToSpeech.mjs"
import Transform from "/mjs/components/Transform.mjs"
import UiHome from "/mjs/components/UiHome.mjs"
import { prefixes, icons } from "/mjs/utils.mjs"
import { prefixes, icons, uiLabel } from "/mjs/utils.mjs"

const HomeSection = {
id: '',
Expand Down Expand Up @@ -148,12 +148,9 @@ export default {
const refreshKey = ref(1)
const showUserMenu = ref(false)

function toLabel(id) {
return humanify(id).replace('To','to')
}
const sections = Object.keys(components).map(id => ({
id,
label: toLabel(id),
label: uiLabel(id),
component: components[id],
icon: icons[prefixes[id]],
prefix: prefixes[id],
Expand Down
104 changes: 104 additions & 0 deletions AiServer/wwwroot/css/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1067,6 +1067,10 @@ select{
margin: auto;
}

.-m-2 {
margin: -0.5rem;
}

.-mx-1\.5 {
margin-left: -0.375rem;
margin-right: -0.375rem;
Expand Down Expand Up @@ -1318,6 +1322,10 @@ select{
margin-top: auto;
}

.mt-32 {
margin-top: 8rem;
}

.block {
display: block;
}
Expand Down Expand Up @@ -1346,6 +1354,10 @@ select{
display: table-cell;
}

.flow-root {
display: flow-root;
}

.grid {
display: grid;
}
Expand Down Expand Up @@ -1851,6 +1863,10 @@ select{
gap: 1.5rem;
}

.gap-8 {
gap: 2rem;
}

.gap-x-1 {
-moz-column-gap: 0.25rem;
column-gap: 0.25rem;
Expand Down Expand Up @@ -2020,6 +2036,10 @@ select{
white-space: pre;
}

.text-balance {
text-wrap: balance;
}

.rounded {
border-radius: 0.25rem;
}
Expand All @@ -2044,6 +2064,10 @@ select{
border-radius: 0.125rem;
}

.rounded-xl {
border-radius: 0.75rem;
}

.rounded-l-md {
border-top-left-radius: 0.375rem;
border-bottom-left-radius: 0.375rem;
Expand Down Expand Up @@ -2405,6 +2429,10 @@ select{
background-color: rgb(254 252 232 / var(--tw-bg-opacity));
}

.bg-gray-900\/5 {
background-color: rgb(17 24 39 / 0.05);
}

.bg-opacity-75 {
--tw-bg-opacity: 0.75;
}
Expand Down Expand Up @@ -2607,6 +2635,21 @@ select{
padding-bottom: 2rem;
}

.px-12 {
padding-left: 3rem;
padding-right: 3rem;
}

.px-16 {
padding-left: 4rem;
padding-right: 4rem;
}

.px-3\.5 {
padding-left: 0.875rem;
padding-right: 0.875rem;
}

.pb-0 {
padding-bottom: 0px;
}
Expand Down Expand Up @@ -2830,6 +2873,11 @@ select{
line-height: 1rem;
}

.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}

.font-bold {
font-weight: 700;
}
Expand Down Expand Up @@ -3216,6 +3264,12 @@ select{
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-2xl {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-slate-200\/80 {
--tw-shadow-color: rgb(226 232 240 / 0.8);
--tw-shadow: var(--tw-shadow-colored);
Expand Down Expand Up @@ -3301,6 +3355,10 @@ select{
--tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
}

.ring-gray-900\/10 {
--tw-ring-color: rgb(17 24 39 / 0.1);
}

.ring-opacity-5 {
--tw-ring-opacity: 0.05;
}
Expand Down Expand Up @@ -3628,6 +3686,11 @@ select{
background-color: rgb(254 252 232 / var(--tw-bg-opacity));
}

.hover\:bg-indigo-500:hover {
--tw-bg-opacity: 1;
background-color: rgb(99 102 241 / var(--tw-bg-opacity));
}

.hover\:text-blue-800:hover {
--tw-text-opacity: 1;
color: rgb(30 64 175 / var(--tw-text-opacity));
Expand Down Expand Up @@ -3869,10 +3932,26 @@ select{
outline-offset: 2px;
}

.focus-visible\:outline:focus-visible {
outline-style: solid;
}

.focus-visible\:outline-2:focus-visible {
outline-width: 2px;
}

.focus-visible\:outline-offset-2:focus-visible {
outline-offset: 2px;
}

.focus-visible\:outline-black:focus-visible {
outline-color: #000;
}

.focus-visible\:outline-indigo-600:focus-visible {
outline-color: #4f46e5;
}

.focus-visible\:ring-0:focus-visible {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
Expand Down Expand Up @@ -4621,6 +4700,10 @@ select{
margin-top: 5rem;
}

.sm\:mt-24 {
margin-top: 6rem;
}

.sm\:block {
display: block;
}
Expand Down Expand Up @@ -4813,6 +4896,11 @@ select{
line-height: 1.25rem;
}

.sm\:text-6xl {
font-size: 3.75rem;
line-height: 1;
}

.sm\:duration-700 {
transition-duration: 700ms;
}
Expand Down Expand Up @@ -4980,6 +5068,10 @@ select{
z-index: 10;
}

.lg\:-m-4 {
margin: -1rem;
}

.lg\:-mx-8 {
margin-left: -2rem;
margin-right: -2rem;
Expand Down Expand Up @@ -5062,6 +5154,14 @@ select{
gap: 1.5rem;
}

.lg\:rounded-2xl {
border-radius: 1rem;
}

.lg\:p-4 {
padding: 1rem;
}

.lg\:px-1 {
padding-left: 0.25rem;
padding-right: 0.25rem;
Expand Down Expand Up @@ -5093,6 +5193,10 @@ select{
padding-top: 1rem;
}

.lg\:pb-40 {
padding-bottom: 10rem;
}

.lg\:text-center {
text-align: center;
}
Expand Down
69 changes: 54 additions & 15 deletions AiServer/wwwroot/mjs/components/UiHome.mjs
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { ref, inject, watch, onMounted } from "vue"
import { langs, openAi } from "../langs.mjs"
import { icons } from "../utils.mjs"
import { prefixes, icons, uiLabel } from "../utils.mjs"

export default {
template: `
Expand All @@ -17,15 +17,15 @@ export default {
</p>
</div>
<div class="mt-8 flex justify-center">
<img class="h-[500px]" src="/img/overview.svg" alt="">
<a href="https://docs.servicestack.net/ai-server/">
<img class="h-[500px]" src="/img/overview.svg" alt="">
</a>
</div>
<div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
<dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3">
<div class="flex flex-col">
<dt class="flex items-center gap-x-3 text-base font-semibold leading-7 text-gray-900">
<svg class="h-5 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M5.5 17a4.5 4.5 0 0 1-1.44-8.765 4.5 4.5 0 0 1 8.302-3.046 3.5 3.5 0 0 1 4.504 4.272A4 4 0 0 1 15 17H5.5Zm3.75-2.75a.75.75 0 0 0 1.5 0V9.66l1.95 2.1a.75.75 0 1 0 1.1-1.02l-3.25-3.5a.75.75 0 0 0-1.1 0l-3.25 3.5a.75.75 0 1 0 1.1 1.02l1.95-2.1v4.59Z" clip-rule="evenodd" />
</svg>
<img :src="icons.one" class="h-5 w-5 flex-none text-indigo-600">
Simple Unified API
</dt>
<dd class="mt-4 flex flex-auto flex-col text-base leading-7 text-gray-600">
Expand All @@ -37,9 +37,7 @@ export default {
</div>
<div class="flex flex-col">
<dt class="flex items-center gap-x-3 text-base font-semibold leading-7 text-gray-900">
<svg class="h-5 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M10 1a4.5 4.5 0 0 0-4.5 4.5V9H5a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2h-.5V5.5A4.5 4.5 0 0 0 10 1Zm3 8V5.5a3 3 0 1 0-6 0V9h6Z" clip-rule="evenodd" />
</svg>
<img :src="icons.typed" class="h-5 w-5 flex-none text-indigo-600">
Native Typed Integrations
</dt>
<dd class="mt-4 flex flex-auto flex-col text-base leading-7 text-gray-600">
Expand All @@ -51,9 +49,7 @@ export default {
</div>
<div class="flex flex-col">
<dt class="flex items-center gap-x-3 text-base font-semibold leading-7 text-gray-900">
<svg class="h-5 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219Z" clip-rule="evenodd" />
</svg>
<img :src="icons.monitoring" class="h-5 w-5 flex-none text-indigo-600">
Live Monitoring and Analytics
</dt>
<dd class="mt-4 flex flex-auto flex-col text-base leading-7 text-gray-600">
Expand Down Expand Up @@ -180,10 +176,46 @@ export default {
</div>
</div>
<div class="py-12 lg:pb-40">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl text-center">
<h1 class="text-balance text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">Built-in UIs</h1>
<p class="mt-6 text-lg leading-8 text-gray-600">
Users also have access to custom UIs to access AI features protected by API Keys
</p>
</div>
<div class="mt-12 border-b border-gray-200">
<nav class="-mb-px flex" aria-label="Tabs">
<div v-for="ui in uis" @click="routes.to({ op:ui.id })"
:class="['cursor-pointer w-1/4 border-b-2 px-1 py-2 text-center text-sm font-medium text-gray-500', ui.id == (routes.op || 'Chat') ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700']">
<div class="flex flex-col justify-center items-center">
<img :src="ui.icon" class="w-8 h-8">
<span class="hidden md:inline mt-3">{{ui.label}}</span>
</div>
</div>
</nav>
</div>
<div class="mt-8 flow-root">
<div class="-m-2 rounded-xl bg-gray-900/5 p-2 ring-1 ring-inset ring-gray-900/10 lg:-m-4 lg:rounded-2xl lg:p-4">
<img src="https://tailwindui.com/plus/img/component-images/project-app-screenshot.png" alt="App screenshot" width="2432" height="1442" class="rounded-md shadow-2xl ring-1 ring-gray-900/10">
</div>
</div>
</div>
</div>
<div class="mx-auto max-w-md px-4 text-center sm:max-w-3xl sm:px-6 lg:max-w-7xl lg:px-8">
<h3 class="mt-24 mb-3 text-3xl font-extrabold tracking-tight text-gray-900 dark:text-gray-50 sm:text-4xl">
<div class="py-8 flex justify-center gap-8">
<a href="https://docs.servicestack.net/ai-server/" class="rounded-full bg-indigo-600 px-16 py-6 text-2xl 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">Read the docs</a>
<a href="https://github.com/ServiceStack/ai-server" class="rounded-full bg-white px-16 py-6 text-2xl text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">View the source</a>
</div>
<h3 class="mt-32 mb-3 text-3xl font-extrabold tracking-tight text-gray-900 dark:text-gray-50 sm:text-4xl">
Explore
</h3>
<p class="mx-auto mb-5 max-w-prose text-xl text-gray-500">
Expand Down Expand Up @@ -245,7 +277,7 @@ export default {
</div>
</div>
<h3 class="mt-24 mb-3 text-3xl font-extrabold tracking-tight text-gray-900 dark:text-gray-50 sm:text-4xl">
<h3 class="mt-32 mb-3 text-3xl font-extrabold tracking-tight text-gray-900 dark:text-gray-50 sm:text-4xl">
Admin
</h3>
<p class="mx-auto mb-5 max-w-prose text-xl text-gray-500">
Expand Down Expand Up @@ -321,7 +353,14 @@ export default {
onMounted(() => {
})

return { routes, langs, openAi, icons }
const uis = Object.keys(prefixes).map(id => ({
id,
label: uiLabel(id),
icon: icons[prefixes[id]],
prefix: prefixes[id],
}))

return { routes, langs, openAi, icons, uis }
}
}

Expand Down
Loading

0 comments on commit 8286d00

Please sign in to comment.