Add support for ImageToText

Author: mythz

AiServer/wwwroot/Ui.mjs

@@ -62,7 +62,7 @@ export default {
             </a>
           </div>
           <div class="hidden sm:-my-px sm:ml-2 lg:ml-4 sm:flex sm:space-x-4 xl:space-x-6">
-            <a v-href="{admin:section.id}" v-for="section in sections" 
+            <a v-href="{admin:section.id,id:undefined}" v-for="section in sections" 
                 :class="['inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium', routes.admin==section.id ? 'border-indigo-500 text-gray-900' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700']" aria-current="page">
                 <span class="lg:hidden xl:inline mr-2" :title="section.label">
                     <img :src="section.icon" class="w-6 h-6" :alt="section.label">
@@ -120,7 +120,7 @@ export default {
     <div class="sm:hidden" id="mobile-menu">
       <div class="space-y-1 pb-3 pt-2">
         <!-- Current: "border-indigo-500 bg-indigo-50 text-indigo-700", Default: "border-transparent text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800" -->
-        <a v-href="{admin:section.id}" v-for="section in sections" 
+        <a v-href="{admin:section.id,id:undefined}" v-for="section in sections" 
             :class="['block border-l-4 py-2 pl-3 pr-4 text-base font-medium', routes.admin==section.id 
                 ? 'border-indigo-500 bg-indigo-50 text-indigo-700' 
                 : 'border-transparent text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800']" aria-current="page">

AiServer/wwwroot/css/app.css

@@ -911,6 +911,10 @@ select{
   left: 1.5rem;
 }
 
+.left-8 {
+  left: 2rem;
+}
+
 .left-\[calc\(50\%\+3rem\)\] {
   left: calc(50% + 3rem);
 }
@@ -955,6 +959,10 @@ select{
   top: 1.5rem;
 }
 
+.top-8 {
+  top: 2rem;
+}
+
 .top-\[calc\(100\%-13rem\)\] {
   top: calc(100% - 13rem);
 }
@@ -1078,6 +1086,10 @@ select{
   margin-bottom: -1px;
 }
 
+.-ml-0\.5 {
+  margin-left: -0.125rem;
+}
+
 .-ml-1 {
   margin-left: -0.25rem;
 }
@@ -1318,6 +1330,10 @@ select{
   height: 1rem;
 }
 
+.h-48 {
+  height: 12rem;
+}
+
 .h-5 {
   height: 1.25rem;
 }
@@ -1326,6 +1342,10 @@ select{
   height: 1.5rem;
 }
 
+.h-64 {
+  height: 16rem;
+}
+
 .h-7 {
   height: 1.75rem;
 }
@@ -1988,6 +2008,10 @@ select{
   border-top-width: 1px;
 }
 
+.border-dashed {
+  border-style: dashed;
+}
+
 .border-dotted {
   border-style: dotted;
 }
@@ -2001,6 +2025,11 @@ select{
   border-color: rgb(96 165 250 / var(--tw-border-opacity));
 }
 
+.border-blue-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(59 130 246 / var(--tw-border-opacity));
+}
+
 .border-gray-100 {
   --tw-border-opacity: 1;
   border-color: rgb(243 244 246 / var(--tw-border-opacity));
@@ -2316,14 +2345,6 @@ select{
   fill: #4b5563;
 }
 
-.fill-indigo-600 {
-  fill: #4f46e5;
-}
-
-.stroke-indigo-600 {
-  stroke: #4f46e5;
-}
-
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -3132,6 +3153,10 @@ select{
   --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
 }
 
+.ring-transparent {
+  --tw-ring-color: transparent;
+}
+
 .ring-opacity-5 {
   --tw-ring-opacity: 0.05;
 }
@@ -3594,6 +3619,14 @@ select{
   outline-offset: 2px;
 }
 
+.focus\:outline:focus {
+  outline-style: solid;
+}
+
+.focus\:outline-indigo-700:focus {
+  outline-color: #4338ca;
+}
+
 .focus\:ring-0:focus {
   --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);
@@ -3652,6 +3685,11 @@ select{
   --tw-ring-color: rgb(14 165 233 / var(--tw-ring-opacity));
 }
 
+.focus\:ring-indigo-700:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(67 56 202 / var(--tw-ring-opacity));
+}
+
 .focus\:ring-offset-1:focus {
   --tw-ring-offset-width: 1px;
 }

AiServer/wwwroot/index.html

@@ -4,6 +4,8 @@
     <title>Admin</title>
     <link rel="icon" type="image/svg" href="/img/logo.svg">
     <link rel="stylesheet" href="/css/app.css">
+    <link rel="stylesheet" href="/css/typography.css">
+    <link rel="stylesheet" href="/css/highlight.css">
     <style>
         ::-webkit-scrollbar { width: 8px; height: 8px }
         ::-webkit-scrollbar-thumb { background-color: #ccc }

AiServer/wwwroot/mjs/components/Chat.mjs

@@ -2,12 +2,13 @@ import { ref, computed, onMounted, inject, watch, nextTick } from "vue"
 import { useFormatters, useClient } from "@servicestack/vue"
 import { marked } from "../markdown.mjs"
 import { addCopyButtonToCodeBlocks } from "../dom.mjs"
-import { useUiLayout, UiLayout, ThreadStorage, HistoryGroups } from "../utils.mjs"
+import {useUiLayout, UiLayout, ThreadStorage, HistoryTitle, HistoryGroups } from "../utils.mjs"
 import { QueryPrompts, ActiveAiModels, OpenAiChatCompletion } from "dtos"
 
 export default {
     components: {
         UiLayout,
+        HistoryTitle,
         HistoryGroups,
     },
     template: `
@@ -74,7 +75,7 @@ export default {
         <div class="fixed bottom-0 md:pt-2 dark:border-white/20 md:border-transparent md:dark:border-transparent bg-white pr-8" style="width:calc(max(100% - 18rem - 18rem - 2.25rem, 30rem))">
             <div class="text-base px-3 md:px-4 m-auto md:px-5 lg:px-1 xl:px-5">
                 <div class="flex flex-1 gap-4 text-base md:gap-5 lg:gap-6 md:max-w-3xl lg:max-w-[40rem] xl:max-w-[48rem]">
-                    <form class="w-full" type="button" @submit.prevent="send">
+                    <form class="w-full" @submit.prevent="send">
                         <div class="relative flex h-full max-w-full flex-1 flex-col">
                             <div class="absolute bottom-full left-0 right-0 z-20">
                                 <div class="relative h-full w-full">
@@ -109,7 +110,7 @@ export default {
     </template>
     
     <template #sidebar>
-        <h3 class="p-2 sm:block text-xl md:text-2xl font-semibold">History</h3>
+        <HistoryTitle :prefix="storage.prefix" />
         <HistoryGroups :history="history" v-slot="{ item }" @save="saveHistoryItem($event)" @remove="removeHistoryItem($event)">
             <Icon class="h-4 w-4 flex-shrink-0 mr-1" :src="item.icon" loading="lazy" :alt="item.model" />
             <span :title="item.title">{{item.title}}</span>                       
@@ -196,7 +197,9 @@ export default {
             if (r?.id) {
                 console.debug(`${storage.prefix}.response`, r)
 
+                const id = parseInt(routes.id) || storage.createId()
                 thread.value = thread.value ?? storage.createThread(Object.assign({
+                    id: storage.getThreadId(id),
                     title: prefs.value.userContent,
                     model: prefs.value.model,
                     prompt: prefs.value.prompt,
@@ -224,7 +227,6 @@ export default {
                 thread.value.messages = msgs
                 saveThread()
 
-                const id = parseInt(routes.id) || storage.createId()
                 if (!history.value.find(x => x.id === id)) {
                     history.value.push({
                         id,
@@ -362,7 +364,7 @@ export default {
         })
 
         return {
-            client, routes, refUi, showChatMenu, renameChatId, prefs, validPrompt, 
+            storage, client, routes, refUi, showChatMenu, renameChatId, prefs, validPrompt, 
             thread, history, models, prompts, error, systemPrompt, showSystemPrompt, 
             selectedPrompt, refMessage,
             marked, send, selectPrompt, saveHistoryItem, removeHistoryItem,