diff --git a/AiServer/wwwroot/css/app.css b/AiServer/wwwroot/css/app.css index f0a0ce5..85ee2a6 100644 --- a/AiServer/wwwroot/css/app.css +++ b/AiServer/wwwroot/css/app.css @@ -1326,6 +1326,14 @@ select{ margin-top: 8rem; } +.-mt-px { + margin-top: -1px; +} + +.ml-8 { + margin-left: 2rem; +} + .block { display: block; } @@ -1442,6 +1450,10 @@ select{ height: 500px; } +.h-2\.5 { + height: 0.625rem; +} + .max-h-52 { max-height: 13rem; } @@ -1558,6 +1570,14 @@ select{ width: 100vw; } +.w-0 { + width: 0px; +} + +.w-2\.5 { + width: 0.625rem; +} + .min-w-0 { min-width: 0px; } @@ -1959,6 +1979,12 @@ select{ margin-bottom: calc(2rem * var(--tw-space-y-reverse)); } +.space-x-5 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(1.25rem * var(--tw-space-x-reverse)); + margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse))); +} + .divide-x > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 0; border-right-width: calc(1px * var(--tw-divide-x-reverse)); @@ -2123,6 +2149,10 @@ select{ border-top-width: 1px; } +.border-t-2 { + border-top-width: 2px; +} + .border-dashed { border-style: dashed; } @@ -2433,6 +2463,11 @@ select{ background-color: rgb(17 24 39 / 0.05); } +.bg-indigo-200 { + --tw-bg-opacity: 1; + background-color: rgb(199 210 254 / var(--tw-bg-opacity)); +} + .bg-opacity-75 { --tw-bg-opacity: 0.75; } @@ -2535,6 +2570,10 @@ select{ padding: 1.5rem; } +.p-px { + padding: 1px; +} + .px-0 { padding-left: 0px; padding-right: 0px; @@ -2650,6 +2689,21 @@ select{ padding-right: 0.875rem; } +.py-20 { + padding-top: 5rem; + padding-bottom: 5rem; +} + +.py-28 { + padding-top: 7rem; + padding-bottom: 7rem; +} + +.py-32 { + padding-top: 8rem; + padding-bottom: 8rem; +} + .pb-0 { padding-bottom: 0px; } @@ -3691,6 +3745,16 @@ select{ background-color: rgb(99 102 241 / var(--tw-bg-opacity)); } +.hover\:bg-gray-400:hover { + --tw-bg-opacity: 1; + background-color: rgb(156 163 175 / var(--tw-bg-opacity)); +} + +.hover\:bg-indigo-900:hover { + --tw-bg-opacity: 1; + background-color: rgb(49 46 129 / var(--tw-bg-opacity)); +} + .hover\:text-blue-800:hover { --tw-text-opacity: 1; color: rgb(30 64 175 / var(--tw-text-opacity)); @@ -4862,6 +4926,11 @@ select{ padding-bottom: 8rem; } + .sm\:px-0 { + padding-left: 0px; + padding-right: 0px; + } + .sm\:pb-0 { padding-bottom: 0px; } @@ -4915,6 +4984,10 @@ select{ margin-left: 0.25rem; } + .md\:-mt-px { + margin-top: -1px; + } + .md\:block { display: block; } diff --git a/AiServer/wwwroot/img/uis/admin/ai-models.webp b/AiServer/wwwroot/img/uis/admin/ai-models.webp index 89bd49e..0788e9d 100644 Binary files a/AiServer/wwwroot/img/uis/admin/ai-models.webp and b/AiServer/wwwroot/img/uis/admin/ai-models.webp differ diff --git a/AiServer/wwwroot/img/uis/admin/ai-providers-new-ollama.webp b/AiServer/wwwroot/img/uis/admin/ai-providers-new-ollama.webp index 0e23ba6..4c9c003 100644 Binary files a/AiServer/wwwroot/img/uis/admin/ai-providers-new-ollama.webp and b/AiServer/wwwroot/img/uis/admin/ai-providers-new-ollama.webp differ diff --git a/AiServer/wwwroot/img/uis/admin/ai-providers.webp b/AiServer/wwwroot/img/uis/admin/ai-providers.webp index d5aec76..1393a30 100644 Binary files a/AiServer/wwwroot/img/uis/admin/ai-providers.webp and b/AiServer/wwwroot/img/uis/admin/ai-providers.webp differ diff --git a/AiServer/wwwroot/img/uis/admin/ai-types.webp b/AiServer/wwwroot/img/uis/admin/ai-types.webp index 8e9af65..60db8f5 100644 Binary files a/AiServer/wwwroot/img/uis/admin/ai-types.webp and b/AiServer/wwwroot/img/uis/admin/ai-types.webp differ diff --git a/AiServer/wwwroot/img/uis/admin/api-keys-edit.webp b/AiServer/wwwroot/img/uis/admin/api-keys-edit.webp index 2d23078..7488892 100644 Binary files a/AiServer/wwwroot/img/uis/admin/api-keys-edit.webp and b/AiServer/wwwroot/img/uis/admin/api-keys-edit.webp differ diff --git a/AiServer/wwwroot/img/uis/admin/api-keys.webp b/AiServer/wwwroot/img/uis/admin/api-keys.webp index 0082775..549266f 100644 Binary files a/AiServer/wwwroot/img/uis/admin/api-keys.webp and b/AiServer/wwwroot/img/uis/admin/api-keys.webp differ diff --git a/AiServer/wwwroot/img/uis/admin/background-jobs-live.webp b/AiServer/wwwroot/img/uis/admin/background-jobs-live.webp index 13c8cf0..4a5decb 100644 Binary files a/AiServer/wwwroot/img/uis/admin/background-jobs-live.webp and b/AiServer/wwwroot/img/uis/admin/background-jobs-live.webp differ diff --git a/AiServer/wwwroot/img/uis/admin/background-jobs-queue.webp b/AiServer/wwwroot/img/uis/admin/background-jobs-queue.webp index fe02346..0a61696 100644 Binary files a/AiServer/wwwroot/img/uis/admin/background-jobs-queue.webp and b/AiServer/wwwroot/img/uis/admin/background-jobs-queue.webp differ diff --git a/AiServer/wwwroot/img/uis/admin/background-jobs.webp b/AiServer/wwwroot/img/uis/admin/background-jobs.webp index ee05aa9..9c90a7f 100644 Binary files a/AiServer/wwwroot/img/uis/admin/background-jobs.webp and b/AiServer/wwwroot/img/uis/admin/background-jobs.webp differ diff --git a/AiServer/wwwroot/img/uis/admin/dashboard.webp b/AiServer/wwwroot/img/uis/admin/dashboard.webp index 9999563..0d77bd8 100644 Binary files a/AiServer/wwwroot/img/uis/admin/dashboard.webp and b/AiServer/wwwroot/img/uis/admin/dashboard.webp differ diff --git a/AiServer/wwwroot/img/uis/admin/media-providers-comfyui.webp b/AiServer/wwwroot/img/uis/admin/media-providers-comfyui.webp index 9f42630..206588e 100644 Binary files a/AiServer/wwwroot/img/uis/admin/media-providers-comfyui.webp and b/AiServer/wwwroot/img/uis/admin/media-providers-comfyui.webp differ diff --git a/AiServer/wwwroot/img/uis/admin/media-providers-replicate.webp b/AiServer/wwwroot/img/uis/admin/media-providers-replicate.webp index d8091ac..f4f28d5 100644 Binary files a/AiServer/wwwroot/img/uis/admin/media-providers-replicate.webp and b/AiServer/wwwroot/img/uis/admin/media-providers-replicate.webp differ diff --git a/AiServer/wwwroot/img/uis/admin/media-providers.webp b/AiServer/wwwroot/img/uis/admin/media-providers.webp index 45ba66e..667dbe5 100644 Binary files a/AiServer/wwwroot/img/uis/admin/media-providers.webp and b/AiServer/wwwroot/img/uis/admin/media-providers.webp differ diff --git a/AiServer/wwwroot/img/uis/admin/media-types.webp b/AiServer/wwwroot/img/uis/admin/media-types.webp index f9c185f..c720602 100644 Binary files a/AiServer/wwwroot/img/uis/admin/media-types.webp and b/AiServer/wwwroot/img/uis/admin/media-types.webp differ diff --git a/AiServer/wwwroot/mjs/components/Chat.mjs b/AiServer/wwwroot/mjs/components/Chat.mjs index d0a239c..1fe08bd 100644 --- a/AiServer/wwwroot/mjs/components/Chat.mjs +++ b/AiServer/wwwroot/mjs/components/Chat.mjs @@ -30,7 +30,7 @@ export default { - diff --git a/AiServer/wwwroot/mjs/components/UiHome.mjs b/AiServer/wwwroot/mjs/components/UiHome.mjs index 3f0061a..31a8e72 100644 --- a/AiServer/wwwroot/mjs/components/UiHome.mjs +++ b/AiServer/wwwroot/mjs/components/UiHome.mjs @@ -180,11 +180,10 @@ export default {
-

Built-in UIs

- Users also have access to custom UIs to access AI features protected by API Keys + Built-in UIs allow users with API Keys access to custom UIs for different AI features

@@ -209,12 +208,67 @@ export default {
+ +
+
+ +
+

Admin UIs

+

+ {{ adminUis[routes.page] || + "Use Admin UIs to manage AI and Media Providers and API Key Access" }} +

+
+ + + +
+
+ App screenshot +
+
+
+ +
+

Explore

@@ -360,6 +414,23 @@ export default { prefix: prefixes[id], })) - return { routes, langs, openAi, icons, uis } + const adminUis = { + 'ai-providers': 'Increase capacity by adding AI Providers that can process LLM Requests', + 'ai-providers-new-ollama': 'Add local Ollama endpoints and control which of their Models can be used', + 'ai-models': 'Glossary of LLM models available via Ollama or LLM APIs', + 'ai-types': 'List of different AI Provider Types that AI Server supports', + 'media-providers': 'Increase capacity by adding AI Providers that can process Media & FFmpeg Requests', + 'media-providers-replicate': 'Add a new Replicate API Media Provider and which diffusion models to enable', + 'media-providers-comfyui': 'Add a new Comfy UI Agent and control which of its models can be used', + 'media-types': 'Glossary of different Media Provider Types that AI Server supports', + 'background-jobs': 'View completed and failed Background Jobs from Jobs Dashboard', + 'background-jobs-live': 'Monitor Live progress of executing AI Requests', + 'background-jobs-queue': 'View all currently pending and executing AI Requests', + 'api-keys': 'Use Admin UI to manage API Keys that can access AI Server APIs and Features', + 'api-keys-edit': 'Edit API Keys for fine grain control over API Keys access and scope', + } + const adminUiKeys = Object.keys(adminUis) + + return { routes, langs, openAi, icons, uis, adminUis, adminUiKeys } } } diff --git a/README.md b/README.md index 650e8b7..e7cd913 100644 --- a/README.md +++ b/README.md @@ -61,5 +61,58 @@ In addition to its backend APIs, it also includes several built in UI's for utli ## Admin UIs -AI and Media Providers can be managed via the built in admin UIs: +Use Admin UIs to manage AI and Media Providers and API Key Access +![](https://raw.githubusercontent.com/ServiceStack/ai-server/refs/heads/main/AiServer/wwwroot/img/uis/admin/dashboard.webp) + +Increase capacity by adding AI Providers that can process LLM Requests + +![](https://raw.githubusercontent.com/ServiceStack/ai-server/refs/heads/main/AiServer/wwwroot/img/uis/admin/ai-providers.webp) + +Add local Ollama endpoints and control which of their Models can be used + +![](https://raw.githubusercontent.com/ServiceStack/ai-server/refs/heads/main/AiServer/wwwroot/img/uis/admin/ai-providers-new-ollama.webp) + +Glossary of LLM models available via Ollama or LLM APIs + +![](https://raw.githubusercontent.com/ServiceStack/ai-server/refs/heads/main/AiServer/wwwroot/img/uis/admin/ai-models.webp) + +List of different AI Provider Types that AI Server supports + +![](https://raw.githubusercontent.com/ServiceStack/ai-server/refs/heads/main/AiServer/wwwroot/img/uis/admin/ai-types.webp) + +Increase capacity by adding AI Providers that can process Media & FFmpeg Requests + +![](https://raw.githubusercontent.com/ServiceStack/ai-server/refs/heads/main/AiServer/wwwroot/img/uis/admin/media-providers.webp) + +Add a new Replicate API Media Provider and which diffusion models to enable + +![](https://raw.githubusercontent.com/ServiceStack/ai-server/refs/heads/main/AiServer/wwwroot/img/uis/admin/media-providers-replicate.webp) + +Add a new Comfy UI Agent and control which of its models can be used + +![](https://raw.githubusercontent.com/ServiceStack/ai-server/refs/heads/main/AiServer/wwwroot/img/uis/admin/media-providers-comfyui.webp) + +Glossary of different Media Provider Types that AI Server supports + +![](https://raw.githubusercontent.com/ServiceStack/ai-server/refs/heads/main/AiServer/wwwroot/img/uis/admin/media-types.webp) + +View completed and failed Background Jobs from Jobs Dashboard + +![](https://raw.githubusercontent.com/ServiceStack/ai-server/refs/heads/main/AiServer/wwwroot/img/uis/admin/background-jobs.webp) + +Monitor Live progress of executing AI Requests + +![](https://raw.githubusercontent.com/ServiceStack/ai-server/refs/heads/main/AiServer/wwwroot/img/uis/admin/background-jobs-live.webp) + +View all currently pending and executing AI Requests + +![](https://raw.githubusercontent.com/ServiceStack/ai-server/refs/heads/main/AiServer/wwwroot/img/uis/admin/background-jobs-queue.webp) + +Use Admin UI to manage API Keys that can access AI Server APIs and Features + +![](https://raw.githubusercontent.com/ServiceStack/ai-server/refs/heads/main/AiServer/wwwroot/img/uis/admin/api-keys.webp) + +Edit API Keys for fine grain control over API Keys access and scope + +![](https://raw.githubusercontent.com/ServiceStack/ai-server/refs/heads/main/AiServer/wwwroot/img/uis/admin/api-keys-edit.webp)