maintain state per thread

Author: mythz

AiServer/wwwroot/mjs/components/PromptGenerator.mjs

@@ -6,7 +6,7 @@ import { ActiveAiModels, QueryPrompts, OpenAiChatCompletion } from "dtos"
 export default {
     template:`
     <div v-if="system">
-        <button @click="prefs.show=!prefs.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">
+        <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 
@@ -71,9 +71,13 @@ export default {
 
         watch(() => props.thread, () => {
             Object.assign(prefs.value, defaults, props.thread?.generator)
-            console.log('watch', prefs.value)
         })
 
+        function toggleShow() {
+            prefs.value.show = !prefs.value.show
+            savePrefs()
+        }
+        
         function savePrefs() {
             if (props.thread) props.thread.generator = prefs
             emit('save', prefs)
@@ -140,6 +144,6 @@ export default {
             }
         }
 
-        return { client, system, request, prefs, models, error, validPrompt, send }
+        return { client, system, request, prefs, models, error, validPrompt, toggleShow, send }
     }
 }

AiServer/wwwroot/mjs/components/TextToImage.mjs

@@ -133,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()
 
@@ -165,6 +168,7 @@ export default {
             storage.saveHistory(history.value)
         }
         function saveThread() {
+            console.log('saveThread', thread.value)
             if (thread.value) {
                 storage.saveThread(thread.value)
             }
@@ -279,15 +283,14 @@ 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()
         }
 
@@ -313,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())