Add Admin UI screenshots

ServiceStack · Oct 17, 2024 · 703c50b · 703c50b
1 parent fc30a47
commit 703c50b
Show file tree

Hide file tree

Showing 4 changed files with 203 additions and 6 deletions.
diff --git 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/mjs/components/Chat.mjs b/AiServer/wwwroot/mjs/components/Chat.mjs
@@ -30,7 +30,7 @@ export default {
                         </template>
                     </Autocomplete>                
                     
-                   <Autocomplete id="prompt" :options="prompts" v-model="selectedPrompt" label="Prompt"
+                   <Autocomplete id="prompt" :options="prompts" v-model="selectedPrompt" label="System Prompt"
                         :match="(x, value) => x.name.toLowerCase().includes(value.toLowerCase())"
                         placeholder="Select a System Prompt..."
                         :disabled="!!routes.id">

diff --git a/AiServer/wwwroot/mjs/components/UiHome.mjs b/AiServer/wwwroot/mjs/components/UiHome.mjs
@@ -180,11 +180,10 @@ export default {
     <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
+            Built-in UIs allow users with API Keys access to custom UIs for different AI features
           </p>
         </div>
         
@@ -209,12 +208,67 @@ export default {
     </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">
-
         <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>
+    </div>
+    
+    <div class="py-32 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">Admin UIs</h1>
+          <p class="mt-4 text-lg leading-8 text-gray-600">
+            {{ adminUis[routes.page] || 
+            "Use Admin UIs to manage AI and Media Providers and API Key Access" }}
+          </p>
+        </div>
+        
+        <nav class="py-4 flex items-center justify-between px-4 sm:px-0">
+          <div class="-mt-px flex w-0 flex-1">
+            <a v-href="{ page:adminUiKeys[adminUiKeys.findIndex(x => x == routes.page) - 1] ?? adminUiKeys[adminUiKeys.length-1] }" class="inline-flex items-center pr-1 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700">
+              <svg class="mr-3 h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+                <path fill-rule="evenodd" d="M18 10a.75.75 0 0 1-.75.75H4.66l2.1 1.95a.75.75 0 1 1-1.02 1.1l-3.5-3.25a.75.75 0 0 1 0-1.1l3.5-3.25a.75.75 0 1 1 1.02 1.1l-2.1 1.95h12.59A.75.75 0 0 1 18 10Z" clip-rule="evenodd" />
+              </svg>
+              Previous
+            </a>
+          </div>
+          <div class="hidden md:-mt-px md:flex">
+            <!-- Current: "border-indigo-500 text-indigo-600", Default: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" -->
+            <div>
+                <nav class="flex items-center justify-center" aria-label="Progress">
+                  <ol role="list" class="ml-8 flex items-center space-x-5">
+                    <li v-for="(label,id,index) in adminUis">
+                      <a v-href="{ page:id }" class="block h-2.5 w-2.5 rounded-full bg-gray-200 hover:bg-gray-400">
+                        <span class="sr-only">Step 1</span>
+                        <span v-if="(routes.page) == id" class="relative block h-2.5 w-2.5 rounded-full bg-indigo-600" aria-hidden="true"></span>
+                      </a>
+                    </li>
+                  </ol>
+                </nav>
+            </div>
+          </div>
+          <div class="-mt-px flex w-0 flex-1 justify-end">
+            <a v-href="{ page:adminUiKeys[adminUiKeys.findIndex(x => x == routes.page) + 1] }" class="inline-flex items-center pl-1 pt-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700">
+              Next
+              <svg class="ml-3 h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+                <path fill-rule="evenodd" d="M2 10a.75.75 0 0 1 .75-.75h12.59l-2.1-1.95a.75.75 0 1 1 1.02-1.1l3.5 3.25a.75.75 0 0 1 0 1.1l-3.5 3.25a.75.75 0 1 1-1.02-1.1l2.1-1.95H2.75A.75.75 0 0 1 2 10Z" clip-rule="evenodd" />
+              </svg>
+            </a>
+          </div>
+        </nav>
+                
+        <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="'/img/uis/admin/'+(routes.page || 'dashboard')+'.webp'" 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-32 mb-3 text-3xl font-extrabold tracking-tight text-gray-900 dark:text-gray-50 sm:text-4xl">
             Explore
         </h3>
@@ -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
@@ -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)