wip

library/CushyStudio/examples/tutorial/widgets/example-widget-numbers.ts

@@ -0,0 +1,27 @@
+/**
+ *
+ * 🔶 This example is pretty complex and very advanced.
+ * 🔶 don't' copy what is in this file unless you know what you are doing
+ * 🔶 and really need this.
+ *
+ */
+
+app({
+    ui: (form) => ({
+        int: form.int({
+            min: 10,
+            default: 12,
+            max: 20,
+        }),
+
+        float: form.float({
+            default: 1.0,
+            min: 0.0,
+            max: 1.0,
+            step: 0.01,
+            hideSlider: true,
+        }),
+    }),
+
+    run: async (flow, form) => {},
+})

src/config/ConfigFile.ts

@@ -33,6 +33,7 @@ export type ConfigFile = {
     /** defaults to 48px */
     outputPreviewSize?: number
     historyAppSize?: number
+    latentPreviewSize?: number
     /** defaults to 48px */
     galleryImageSize?: number
     /** defaults to 50 */

src/panels/Panel_Output.tsx

@@ -1,21 +1,19 @@
 import { observer } from 'mobx-react-lite'
 import { AppIllustrationUI } from 'src/cards/fancycard/AppIllustrationUI'
 import { OutputPreviewUI } from 'src/outputs/OutputUI'
-import { Dropdown } from 'src/rsuite/Dropdown'
 import { InputNumberUI } from 'src/rsuite/InputNumberUI'
-import { Slider } from 'src/rsuite/shims'
-import { parseFloatNoRoundingErr } from 'src/utils/misc/parseFloatNoRoundingErr'
+import { RevealUI } from 'src/rsuite/RevealUI'
 import { FieldAndLabelUI } from 'src/widgets/misc/FieldAndLabelUI'
 import { useSt } from '../state/stateContext'
 import { Panel_ViewImage } from './Panel_ViewImage'
-import { RevealUI } from 'src/rsuite/RevealUI'
+
+const mode: 'H' | 'V' = 1 - 1 == 0 ? 'V' : 'H'
+const dir = mode === 'H' ? 'flex-col' : 'flex-row'
 
 export const Panel_Output = observer(function Panel_Output_(p: {}) {
     const st = useSt()
     const steps = st.db.steps.values.slice(-st.__TEMPT__maxStepsToShow).reverse()
     const step = st.db.steps.last()
-    const mode: 'H' | 'V' = 1 - 1 == 0 ? 'V' : 'H'
-    const dir = mode === 'H' ? 'flex-col' : 'flex-row'
     return (
         <div tw={[mode === 'H' ? 'flex-row' : 'flex-col', 'flex flex-grow h-full w-full']}>
             {/* HISTORY */}
@@ -64,8 +62,8 @@ export const Panel_Output = observer(function Panel_Output_(p: {}) {
                     <div tw='btn btn-sm btn-primary'>
                         <span className='material-symbols-outlined'>present_to_all</span>
                     </div>
-                    <div>
-                        <FieldAndLabelUI label='Size'>
+                    <div tw='flex flex-col gap-1'>
+                        <FieldAndLabelUI label='Output Preview Size'>
                             <InputNumberUI
                                 style={{ width: '5rem' }}
                                 mode={'int'}
@@ -75,6 +73,16 @@ export const Panel_Output = observer(function Panel_Output_(p: {}) {
                                 value={st.outputPreviewSize}
                             />
                         </FieldAndLabelUI>
+                        <FieldAndLabelUI label='Latent Size'>
+                            <InputNumberUI
+                                style={{ width: '5rem' }}
+                                mode={'int'}
+                                min={3}
+                                max={100}
+                                onValueChange={(next) => (st.latentSize = next)}
+                                value={st.latentSize}
+                            />
+                        </FieldAndLabelUI>
                     </div>
                 </RevealUI>
                 <div tw={[dir, 'flex gap-1 overflow-auto']}>

src/panels/Panel_ViewImage.tsx

@@ -4,7 +4,7 @@ import type { STATE } from 'src/state/state'
 import { observer } from 'mobx-react-lite'
 import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch'
 import { Dropdown, MenuItem } from 'src/rsuite/Dropdown'
-import { Rate, Toggle } from 'src/rsuite/shims'
+import { Button, Rate, Toggle } from 'src/rsuite/shims'
 import { useSt } from 'src/state/stateContext'
 import { openExternal, showItemInFolder } from '../app/layout/openExternal'
 import { assets } from 'src/utils/assets/assets'
@@ -14,7 +14,7 @@ export const Panel_ViewImage = observer(function Panel_ViewImage_(p: { imageID?:
     // const img: Maybe<ImageL> = p.imageID //
     //     ? st.db.images.get(p.imageID)
     //     : st.db.images.last()
-    const { img, url } = getPreviewType(st, p.imageID)
+    const { img, url, latentUrl } = getPreviewType(st, p.imageID)
     const imgPathWithFileProtocol = img ? `file://${img.localAbsolutePath}` : null
     // if (img == null) return null
     const background = st.configFile.value.galleryBgColor
@@ -88,6 +88,14 @@ export const Panel_ViewImage = observer(function Panel_ViewImage_(p: { imageID?:
                     wrapperStyle={{ /* border: '5px solid #b53737', */ height: '100%', width: '100%' }}
                     contentStyle={{ /* border: '5px solid #38731f', */ height: '100%', width: '100%' }}
                 >
+                    {latentUrl && (
+                        <img //
+                            tw='absolute top-0 left-0 shadow-xl'
+                            style={{ width: st.latentSizeStr, height: st.latentSizeStr, objectFit: 'contain' }}
+                            src={latentUrl}
+                            alt='last generated image'
+                        />
+                    )}
                     {url ? (
                         <img //
                             style={{ width: '100%', height: '100%', objectFit: 'contain' }}
@@ -121,9 +129,10 @@ const getPreviewType = (
     imageID: Maybe<ImageID | 'latent'>,
 ): {
     url: string
+    latentUrl?: string
     img?: Maybe<ImageL>
 } => {
-    const errorURL = ''
+    const errorURL = assets.public_illustrations_image_home_jpg
     if (imageID === 'latent') return { url: st.preview?.url ?? errorURL }
     if (imageID != null) {
         const img = st.db.images.get(imageID)
@@ -138,10 +147,13 @@ const getPreviewType = (
             const latent = st.preview
             if (latent == null) return { url: lastImage?.url ?? errorURL, img: lastImage }
             if (lastImage == null) return { url: latent.url }
-            if (latent.receivedAt > lastImage.createdAt) {
-                return { url: latent.url }
-            } else {
-                return { url: lastImage.url, img: lastImage }
+            return {
+                url: lastImage.url,
+                img: lastImage,
+                latentUrl:
+                    latent.receivedAt > lastImage.createdAt //
+                        ? latent.url
+                        : undefined,
             }
         } else {
             const lastImage = st.db.images.last()

src/state/state.ts

@@ -163,6 +163,11 @@ export class STATE {
     set historySize(v: number) { this.configFile.update({ historyAppSize: v }) } // prettier-ignore
     get historySize() { return this.configFile.value.historyAppSize ?? 48 } // prettier-ignore
 
+    // latent size pct
+    get latentSizeStr() { return `${this.latentSize}%` } // prettier-ignore
+    set latentSize(v: number) { this.configFile.update({ latentPreviewSize: v }) } // prettier-ignore
+    get latentSize() { return this.configFile.value.latentPreviewSize ?? 25 } // prettier-ignore
+
     //
     get githubUsername(): Maybe<GithubUserName> { return this.configFile.value.githubUsername as Maybe<GithubUserName> } // prettier-ignore
     get favoriteActions(): AppPath[] { return this.configFile.value.favoriteCards ?? [] } // prettier-ignore