Merge remote-tracking branch 'origin/main'

Author: Layoric

AiServer/wwwroot/css/app.css

@@ -975,6 +975,10 @@ select{
   z-index: 40;
 }
 
+.z-30 {
+  z-index: 30;
+}
+
 .col-span-12 {
   grid-column: span 12 / span 12;
 }
@@ -1217,6 +1221,18 @@ select{
   margin-top: auto;
 }
 
+.me-5 {
+  margin-inline-end: 1.25rem;
+}
+
+.me-4 {
+  margin-inline-end: 1rem;
+}
+
+.me-2 {
+  margin-inline-end: 0.5rem;
+}
+
 .block {
   display: block;
 }

AiServer/wwwroot/lib/mjs/servicestack-vue.min.mjs

@@ -4362,7 +4362,7 @@ const ti = { key: 0 }, si = { class: "md:p-4" }, lo = /* @__PURE__ */ de({
         }, u0),
         n.value ? (o(), i("ul", {
           key: 0,
-          class: "absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white dark:bg-black py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm",
+          class: "absolute z-20 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white dark:bg-black py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm",
           onKeydown: L,
           id: `${T.id}-options`,
           role: "listbox"

AiServer/wwwroot/lib/mjs/servicestack-vue.mjs

@@ -1,24 +1,25 @@
-import { ref, computed, onMounted } from "vue"
+import { ref, computed, watch, onMounted } from "vue"
 import { useClient } from "@servicestack/vue"
 import { createErrorStatus } from "@servicestack/client"
 import { ActiveAiModels, QueryPrompts, OpenAiChatCompletion } from "dtos"
 
 export default {
     template:`
     <div v-if="system">
-        <button @click="show=!show" type="button" class="-ml-3 bg-white text-gray-600 hover:text-gray-900 group w-full flex items-center pr-2 py-2 text-left text-sm font-medium">
-            <svg v-if="show" class="text-gray-400 rotate-90 mr-0.5 flex-shrink-0 h-5 w-5 transform group-hover:text-gray-400 transition-colors ease-in-out duration-150" viewBox="0 0 20 20" aria-hidden="true"><path d="M6 6L14 10L6 14V6Z" fill="currentColor"></path></svg>
+        <button @click="toggleShow()" type="button" class="-ml-3 bg-white text-gray-600 hover:text-gray-900 group w-full flex items-center pr-2 py-2 text-left text-sm font-medium">
+            <svg v-if="prefs.show" class="text-gray-400 rotate-90 mr-0.5 flex-shrink-0 h-5 w-5 transform group-hover:text-gray-400 transition-colors ease-in-out duration-150" viewBox="0 0 20 20" aria-hidden="true"><path d="M6 6L14 10L6 14V6Z" fill="currentColor"></path></svg>
             <svg v-else class="text-gray-300 mr-0.5 flex-shrink-0 h-5 w-5 transform group-hover:text-gray-400 transition-colors ease-in-out duration-150" viewBox="0 0 20 20" aria-hidden="true"><path d="M6 6L14 10L6 14V6Z" fill="currentColor"></path></svg>
             AI Prompt Generator 
         </button>
-        <div v-if="show">
+        <div v-if="prefs.show">
             <form class="grid grid-cols-6 gap-4" @submit.prevent="send()" :disabled="!validPrompt">
                 <div class="col-span-6 sm:col-span-2">
-                    <TextInput id="subject" v-model="subject" label="subject" placeholder="Use AI to generate image prompts for..." />
+                    <TextInput id="subject" v-model="prefs.subject" label="subject" placeholder="Use AI to generate image prompts for..." />
                 </div>
                 <div class="col-span-6 sm:col-span-2">
-                   <Autocomplete id="model" :options="models" v-model="model" label="model"
+                   <Autocomplete id="model" :options="models" v-model="prefs.model" label="model"
                         :match="(x, value) => x.toLowerCase().includes(value.toLowerCase())"
+                        class="z-20"
                         placeholder="Select Model...">
                         <template #item="name">
                             <div class="flex items-center">
@@ -29,53 +30,57 @@ export default {
                     </Autocomplete>                
                 </div>
                 <div class="col-span-6 sm:col-span-1">
-                    <TextInput type="number" id="count" v-model="count" label="count" min="1" />
+                    <TextInput type="number" id="count" v-model="prefs.count" label="count" min="1" />
                 </div>
                 <div class="col-span-6 sm:col-span-1 align-bottom">
                     <div>&nbsp;</div>
                     <PrimaryButton :disabled="!validPrompt">Generate</PrimaryButton>
                 </div>
             </form>
-            <Loading v-if="client.loading.value">Asking {{model}}...</Loading>
+            <Loading v-if="client.loading.value">Asking {{prefs.model}}...</Loading>
             <ErrorSummary v-else-if="error" :status="error" />
-            <div v-else-if="results.length" class="mt-4">
-                <div v-for="result in results" @click="$emit('selected',result)" class="message mb-2 cursor-pointer rounded-lg inline-flex justify-center rounded-lg text-sm py-3 px-4 bg-gray-50 text-slate-900 ring-1 ring-slate-900/10 hover:bg-white/25 hover:ring-slate-900/15">
+            <div v-else-if="prefs.results.length" class="mt-4">
+                <div v-for="result in prefs.results" @click="$emit('selected',result)" class="message mb-2 cursor-pointer rounded-lg inline-flex justify-center rounded-lg text-sm py-3 px-4 bg-gray-50 text-slate-900 ring-1 ring-slate-900/10 hover:bg-white/25 hover:ring-slate-900/15">
                     {{result}}
                 </div>
             </div>
         </div>
     </div>
     `,
-    emits:['selected'],
+    emits:['save','selected'],
     props: {
+        thread: Object,
         promptId: String,
         systemPrompt: String,
     },
-    setup(props) {
+    setup(props, { emit }) {
         const client = useClient()
         const request = ref(new OpenAiChatCompletion({ }))
         const system = ref(props.systemPrompt)
-        const subject = ref('')
         const defaults = {
             show: false,
-            model: 'gemini-flash',
+            subject: '',
+            model: '',
             count: 3,
+            results: [],
         }
-        const prefsKey = 'img2txt.gen.prefs'
-        const prefs = JSON.parse(localStorage.getItem(prefsKey) ?? JSON.stringify(defaults))
-        const show = ref(prefs.show)
-        const count = ref(prefs.count)
-        const model = ref(prefs.model)
+        const prefs = ref(Object.assign({}, defaults, props.thread?.generator))
         const error = ref()
         const models = ref([])
-        const results = ref([])
-        const validPrompt = computed(() => subject.value && model.value && count.value)
+        const validPrompt = computed(() => prefs.value.subject && prefs.value.model && prefs.value.count)
+        
+        watch(() => props.thread, () => {
+            Object.assign(prefs.value, defaults, props.thread?.generator)
+        })
+        
+        function toggleShow() {
+            prefs.value.show = !prefs.value.show
+            savePrefs()
+        }
 
         function savePrefs() {
-            prefs.show = show.value
-            prefs.model = model.value
-            prefs.count = count.value
-            localStorage.setItem(prefsKey, JSON.stringify(prefs))
+            if (props.thread) props.thread.generator = prefs
+            emit('save', prefs)
         }
 
         if (!system.value && props.promptId) {
@@ -95,7 +100,7 @@ export default {
             if (!validPrompt.value) return
             savePrefs()
 
-            const content = `Provide ${count.value} great descriptive prompts to generate images of ${subject.value} in Stable Diffusion SDXL and Mid Journey. Respond with only the prompts in a JSON array. Example ["prompt1","prompt2"]`
+            const content = `Provide ${prefs.value.count} great descriptive prompts to generate images of ${prefs.value.subject} in Stable Diffusion SDXL and Mid Journey. Respond with only the prompts in a JSON array. Example ["prompt1","prompt2"]`
 
             const msgs = [
                 { role:'system', content:system.value },
@@ -104,7 +109,7 @@ export default {
 
             const request = new OpenAiChatCompletion({
                 tag: "admin",
-                model: model.value,
+                model: prefs.value.model,
                 messages: msgs,
                 temperature: 0.7,
                 maxTokens: 2048,
@@ -116,7 +121,7 @@ export default {
                 let json = api.response?.choices[0]?.message?.content?.trim() ?? ''
                 console.debug(api.response)
                 if (json) {
-                    results.value = []
+                    prefs.value.results = []
                     const docPrefix = '```json'
                     if (json.startsWith(docPrefix)) {
                         json = json.substring(docPrefix.length, json.length - 3)
@@ -125,18 +130,20 @@ export default {
                         console.log('json', json)
                         const obj = JSON.parse(json)
                         if (Array.isArray(obj)) {
-                            results.value = obj
+                            prefs.value.results = obj
                         }
                     } catch(e) {
                         console.warn('could not parse json', e, json)
                     }
                 }
-                if (!results.value.length) {
+                if (!prefs.value.results.length) {
                     error.value = createErrorStatus('Could not parse prompts')
+                } else {
+                    savePrefs()
                 }
             }
         }
 
-        return { client, system, request, show, subject, count, models, model, error, results, validPrompt, send }
+        return { client, system, request, prefs, models, error, validPrompt, toggleShow, send }
     }
 }

AiServer/wwwroot/mjs/components/PromptGenerator.mjs

@@ -55,15 +55,15 @@ export default {
                                     </div>
 
                                     <div class="mt-4 flex w-full flex-col gap-1.5 rounded-lg p-1.5 transition-colors bg-[#f4f4f4]">
-                                        <div class="flex items-end gap-1.5 md:gap-2">
+                                        <div class="flex items-center gap-1.5 md:gap-2">
                                             <div class="pl-4 flex min-w-0 flex-1 flex-col">
-                                                <textarea ref="refMessage" id="txtMessage" v-model="request.positivePrompt" :disabled="waitingOnResponse" rows="1" 
+                                                <textarea ref="refMessage" id="txtMessage" v-model="request.positivePrompt" :disabled="waitingOnResponse" rows="2" 
                                                     placeholder="Generate Image Prompt..." @keydown.enter.prevent="send"
                                                     :class="[{'opacity-50' : waitingOnResponse},'m-0 resize-none border-0 bg-transparent px-0 text-token-text-primary focus:ring-0 focus-visible:ring-0 max-h-[25dvh] max-h-52']" 
-                                                    style="height: 40px; overflow-y: hidden;"></textarea>
+                                                    style="height:60px; overflow-y: hidden;"></textarea>
                                             </div>
                                             <button :disabled="!validPrompt || waitingOnResponse" title="Send (Enter)" 
-                                                class="mb-1 me-1 flex h-8 w-8 items-center justify-center rounded-full bg-black text-white transition-colors hover:opacity-70 focus-visible:outline-none focus-visible:outline-black disabled:bg-[#D7D7D7] disabled:text-[#f4f4f4] disabled:hover:opacity-100 dark:bg-white dark:text-black dark:focus-visible:outline-white disabled:dark:bg-token-text-quaternary dark:disabled:text-token-main-surface-secondary">
+                                                class="mb-1 me-2 flex h-8 w-8 items-center justify-center rounded-full bg-black text-white transition-colors hover:opacity-70 focus-visible:outline-none focus-visible:outline-black disabled:bg-[#D7D7D7] disabled:text-[#f4f4f4] disabled:hover:opacity-100 dark:bg-white dark:text-black dark:focus-visible:outline-white disabled:dark:bg-token-text-quaternary dark:disabled:text-token-main-surface-secondary">
                                                 <svg v-if="!waitingOnResponse" class="ml-1 w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" d="M3 3.732a1.5 1.5 0 0 1 2.305-1.265l6.706 4.267a1.5 1.5 0 0 1 0 2.531l-6.706 4.268A1.5 1.5 0 0 1 3 12.267z"/></svg>
                                                 <svg v-else class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M8 16h8V8H8zm4 6q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22"/></svg>
                                             </button>
@@ -74,7 +74,9 @@ export default {
                         </div>
                     </form>
                 </div>
-                <PromptGenerator promptId="midjourney-prompt-generator" @selected="selectPrompt($event)" />
+
+                <PromptGenerator :thread="thread" promptId="midjourney-prompt-generator" 
+                    @save="saveThread()" @selected="selectPrompt($event)" />
                 
                 <div class="pb-20">
                     
@@ -131,10 +133,13 @@ export default {
         const waitingOnResponse = ref(false)
         const storage = new ThreadStorage(`img2txt`, {
             model: 'jib-mix-realistic',
+            positivePrompt: "",
             negativePrompt: '(nsfw),(explicit),(gore),(violence),(blood)',
             width: 1024,
             height: 1024,
             batchSize: 1,
+            seed: '',
+            tag: '',
         })
         const error = ref()
 
@@ -162,6 +167,12 @@ export default {
         function saveHistory() {
             storage.saveHistory(history.value)
         }
+        function saveThread() {
+            console.log('saveThread', thread.value)
+            if (thread.value) {
+                storage.saveThread(thread.value)
+            }
+        }
 
         async function send() {
             savePrefs()
@@ -189,7 +200,7 @@ export default {
                         response: r
                     }
                     thread.value.results.push(result)
-                    storage.saveThread(thread.value)
+                    saveThread()
 
                     const id = parseInt(routes.id) || storage.createId()
                     if (!history.value.find(x => x.id === id)) {
@@ -230,7 +241,6 @@ export default {
 
         function getThreadResults() {
             const ret = Array.from(thread.value?.results ?? [])
-            console.log('getThreadResults',ret,thread.value)
             ret.reverse()
             return ret
         }
@@ -256,7 +266,7 @@ export default {
 
         function discardResult(result) {
             thread.value.results = thread.value.results.filter(x => x.id != result.id)
-            storage.saveThread(thread.value)
+            saveThread()
         }
 
         function toggleIcon(item) {
@@ -273,20 +283,24 @@ export default {
                 const id = parseInt(routes.id)
                 thread.value = storage.getThread(storage.getThreadId(id))
                 threadRef.value = history.value.find(x => x.id === parseInt(routes.id))
-                // console.log('thread', id, thread.value)
-                // console.log('threadRef', threadRef.value)
+                Object.keys(storage.defaults).forEach(field => 
+                    request.value[field] = thread.value[field] ?? storage.defaults[field])
             } else {
                 thread.value = null
             }
         }
 
         function updated() {
-            // console.debug('updated', routes.admin, routes.id)
             onRouteChange()
         }
 
         function saveHistoryItem(item) {
             storage.saveHistory(history.value)
+            console.log('saveHistoryItem',item)
+            if (thread.value && item.title) {
+                thread.value.title = item.title
+                saveThread()
+            }
         }
 
         function removeHistoryItem(item) {
@@ -302,6 +316,20 @@ export default {
         }
 
         watch(() => routes.id, updated)
+        watch(() => [
+            request.value.model,
+            request.value.positivePrompt,
+            request.value.negativePrompt,
+            request.value.width,
+            request.value.height,
+            request.value.batchSize,
+            request.value.seed,
+            request.value.tag,
+        ], () => {
+            Object.keys(storage.defaults).forEach(field =>
+                thread.value[field] = request.value[field] ?? storage.defaults[field])
+            saveThread()
+        })
 
         onMounted(async () => {
             const api = await client.api(new ActiveMediaModels())
@@ -330,6 +358,7 @@ export default {
             defaultIcon,
             send,
             saveHistory,
+            saveThread,
             toArtifacts,
             toggleIcon,
             selectRequest,

AiServer/wwwroot/mjs/components/TextToImage.mjs

@@ -59,7 +59,7 @@ export const HistoryGroups = {
                     <div class="w-64 overflow-hidden whitespace-nowrap text-ellipsis" 
                         @contextmenu.prevent.stop="showThreadMenu=showThreadMenu==item.id ? null : item.id">
                         <input v-if="renameThreadId === item.id" id="txtItemTitle" type="text" v-model="item.title" class="text-sm py-1 px-2 font-normal text-gray-700" 
-                            @keypress.enter="renameItem" @keydown.esc="renameThreadId=null">                  
+                            @keypress.enter="renameItem(item)" @keydown.esc="renameThreadId=null">                  
                         <div v-else class="flex items-center">
                             <slot :item="item"></slot>
                         </div>