Add Prompt Builder sets/framing and harden mobile draft look settings.
Sets and beats filter by shot size; scenes reorder/delete; portrait links Prompt Builder; landscape queue collapses; per-engine look settings and prompt Clear persist across iOS resumes.
This commit is contained in:
Towsty
+137
-63
@@ -120,7 +120,10 @@
|
||||
</div>
|
||||
|
||||
<label>
|
||||
<span class="field-label">Prompt</span>
|
||||
<span class="field-label flex items-center justify-between gap-2">
|
||||
Prompt
|
||||
<button type="button" class="text-[11px] font-normal text-[var(--muted)] hover:text-[var(--amber)]" @click.prevent="clearPrompt">Clear</button>
|
||||
</span>
|
||||
<textarea
|
||||
ref="promptArea"
|
||||
v-model="form.promptSections.action"
|
||||
@@ -373,12 +376,15 @@
|
||||
</section>
|
||||
|
||||
<!-- RIGHT queue -->
|
||||
<aside class="bench-panel queue-col">
|
||||
<aside class="bench-panel queue-col" :data-collapsed="queueCollapsed ? '1' : undefined">
|
||||
<div class="queue-head">
|
||||
Queue
|
||||
<span class="queue-badge">{{ queueCount }}</span>
|
||||
<button type="button" class="queue-toggle" :aria-expanded="queueCollapsed ? 'false' : 'true'" @click="queueCollapsed=!queueCollapsed">
|
||||
Queue
|
||||
<span class="queue-badge">{{ queueCount }}</span>
|
||||
<span class="queue-toggle-mark" aria-hidden="true">{{ queueCollapsed ? '▸' : '▾' }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="queue-list">
|
||||
<div v-show="!queueCollapsed" class="queue-list">
|
||||
<div
|
||||
v-for="card in queueCards"
|
||||
:key="card.id"
|
||||
@@ -410,7 +416,7 @@
|
||||
</div>
|
||||
<p v-if="!queueCards.length" class="px-1 text-[var(--type-sm)] text-[var(--muted)]">No active jobs</p>
|
||||
</div>
|
||||
<div class="queue-foot">
|
||||
<div v-show="!queueCollapsed" class="queue-foot">
|
||||
<button type="button" class="generate-cta" :disabled="submitting" @click="queue">
|
||||
<span aria-hidden="true">▶</span>
|
||||
{{ submitting ? 'Queuing…' : (batchMode && imagePromptCount > 1 ? `Generate · ${imagePromptCount} prompts` : 'Generate') }}
|
||||
@@ -506,7 +512,14 @@ const NEG_STORAGE_KEY='studio2-negative-chips'
|
||||
const ENHANCE_STORAGE_KEY='studio2-qwen21-enhance-prompt'
|
||||
const TURBO_STORAGE_KEY='studio2-qwen21-turbo'
|
||||
const BENCH_DRAFT_KEY='aigen:bench-draft'
|
||||
const BENCH_DRAFT_SESSION_KEY='aigen:bench-draft:session'
|
||||
let draftTimer:ReturnType<typeof setTimeout>|null=null
|
||||
let restoringDraft=false
|
||||
type EngineLook={steps:number;cfg:number;aspect:string;seed:number|null;seedMode:string;loraStack:any[]}
|
||||
function defaultEngineLook(engine:string):EngineLook{
|
||||
if(engine==='qwen21') return {steps:25,cfg:1,aspect:'auto',seed:null,seedMode:'random',loraStack:[]}
|
||||
return {steps:24,cfg:4,aspect:'auto',seed:null,seedMode:'random',loraStack:[]}
|
||||
}
|
||||
function readStoredNegatives(){
|
||||
if(!import.meta.client)return [...defaultNegatives]
|
||||
try{
|
||||
@@ -537,8 +550,9 @@ function writeStoredTurbo(on:boolean){
|
||||
try{localStorage.setItem(TURBO_STORAGE_KEY,on?'1':'0')}catch{/* ignore */}
|
||||
}
|
||||
function benchDraftPayload(){
|
||||
if(['flux','krea','qwen21'].includes(form.engine)) rememberEngineSampling(form.engine)
|
||||
return {
|
||||
v:1,
|
||||
v:2,
|
||||
mode:form.mode,
|
||||
engine:form.engine,
|
||||
folderId:form.folderId,
|
||||
@@ -563,67 +577,95 @@ function benchDraftPayload(){
|
||||
batchMode:!!batchMode.value,
|
||||
eyeOpen:!!eyeOpen.value,
|
||||
hideInputs:!!hideInputs.value,
|
||||
queueCollapsed:!!queueCollapsed.value,
|
||||
selectedId:selected.value?.id||'',
|
||||
music:structuredClone({tags:music.tags,lyrics:music.lyrics,duration:music.duration,seed:music.seed,name:music.name})
|
||||
}
|
||||
}
|
||||
function writeDraftStores(payload:string){
|
||||
try{localStorage.setItem(BENCH_DRAFT_KEY,payload)}catch{/* ignore */}
|
||||
try{sessionStorage.setItem(BENCH_DRAFT_SESSION_KEY,payload)}catch{/* ignore */}
|
||||
}
|
||||
function readDraftRaw(){
|
||||
let session=''
|
||||
let local=''
|
||||
try{session=sessionStorage.getItem(BENCH_DRAFT_SESSION_KEY)||''}catch{/* ignore */}
|
||||
try{local=localStorage.getItem(BENCH_DRAFT_KEY)||''}catch{/* ignore */}
|
||||
return session || local
|
||||
}
|
||||
function saveBenchDraft(immediate=false){
|
||||
if(!import.meta.client)return
|
||||
if(!import.meta.client || restoringDraft)return
|
||||
const write=()=>{
|
||||
try{localStorage.setItem(BENCH_DRAFT_KEY,JSON.stringify(benchDraftPayload()))}catch{/* ignore */}
|
||||
try{writeDraftStores(JSON.stringify(benchDraftPayload()))}catch{/* ignore */}
|
||||
}
|
||||
if(draftTimer)clearTimeout(draftTimer)
|
||||
if(immediate){write();return}
|
||||
draftTimer=setTimeout(write,400)
|
||||
}
|
||||
function mergeEngineLook(row:any, fallback:EngineLook):EngineLook{
|
||||
return {
|
||||
steps:Number.isFinite(Number(row?.steps))?Number(row.steps):fallback.steps,
|
||||
cfg:Number.isFinite(Number(row?.cfg))?Number(row.cfg):fallback.cfg,
|
||||
aspect:typeof row?.aspect==='string' && row.aspect ? row.aspect : fallback.aspect,
|
||||
seed:row?.seed==null || row?.seed==='' ? null : Number(row.seed),
|
||||
seedMode:row?.seedMode==='locked'?'locked':'random',
|
||||
loraStack:Array.isArray(row?.loraStack)?structuredClone(row.loraStack):structuredClone(fallback.loraStack)
|
||||
}
|
||||
}
|
||||
function restoreBenchDraft(){
|
||||
if(!import.meta.client)return
|
||||
let raw=''
|
||||
try{raw=localStorage.getItem(BENCH_DRAFT_KEY)||''}catch{return}
|
||||
const raw=readDraftRaw()
|
||||
if(!raw)return
|
||||
let draft:any
|
||||
try{draft=JSON.parse(raw)}catch{return}
|
||||
if(!draft||draft.v!==1)return
|
||||
if(draft.mode)form.mode=draft.mode
|
||||
if(draft.engine)form.engine=draft.engine
|
||||
if(draft.folderId)form.folderId=draft.folderId
|
||||
if(draft.enhancePrompt!=null)form.enhancePrompt=!!draft.enhancePrompt
|
||||
if(draft.turbo!=null)form.turbo=!!draft.turbo
|
||||
if(draft.lockFace!=null)form.lockFace=!!draft.lockFace
|
||||
if(draft.lockOutfit!=null)form.lockOutfit=!!draft.lockOutfit
|
||||
if(draft.promptSections)form.promptSections=sectionsFrom(draft.promptSections)
|
||||
if(Array.isArray(draft.photos))form.photos=draft.photos.filter((p:any)=>p?.stillId).map((p:any)=>({stillId:String(p.stillId),role:String(p.role||'change')}))
|
||||
if(draft.imageStyles)form.imageStyles={positive:draft.imageStyles.positive||[],negative:draft.imageStyles.negative||[]}
|
||||
if(draft.settings){
|
||||
Object.assign(form.settings,{
|
||||
aspect:draft.settings.aspect||form.settings.aspect,
|
||||
seed:draft.settings.seed ?? form.settings.seed,
|
||||
seedMode:draft.settings.seedMode||form.settings.seedMode,
|
||||
steps:draft.settings.steps ?? form.settings.steps,
|
||||
cfg:draft.settings.cfg ?? form.settings.cfg,
|
||||
duration:draft.settings.duration ?? form.settings.duration,
|
||||
fps:draft.settings.fps ?? form.settings.fps,
|
||||
loraStack:Array.isArray(draft.settings.loraStack)?draft.settings.loraStack:form.settings.loraStack
|
||||
})
|
||||
}
|
||||
if(draft.engineSampling && typeof draft.engineSampling==='object'){
|
||||
for(const key of ['flux','krea','qwen21'] as const){
|
||||
const row=draft.engineSampling[key]
|
||||
if(row && Number.isFinite(Number(row.steps)) && Number.isFinite(Number(row.cfg))){
|
||||
engineSampling[key]={steps:Number(row.steps),cfg:Number(row.cfg)}
|
||||
if(!draft|| (draft.v!==1 && draft.v!==2))return
|
||||
restoringDraft=true
|
||||
try{
|
||||
if(draft.engineSampling && typeof draft.engineSampling==='object'){
|
||||
for(const key of ['flux','krea','qwen21'] as const){
|
||||
const row=draft.engineSampling[key]
|
||||
if(!row) continue
|
||||
engineSampling[key]=mergeEngineLook(row, defaultEngineLook(key))
|
||||
}
|
||||
}
|
||||
if(draft.mode)form.mode=draft.mode
|
||||
if(draft.engine)form.engine=draft.engine
|
||||
if(draft.folderId)form.folderId=draft.folderId
|
||||
if(draft.enhancePrompt!=null)form.enhancePrompt=!!draft.enhancePrompt
|
||||
if(draft.turbo!=null)form.turbo=!!draft.turbo
|
||||
if(draft.lockFace!=null)form.lockFace=!!draft.lockFace
|
||||
if(draft.lockOutfit!=null)form.lockOutfit=!!draft.lockOutfit
|
||||
if(draft.promptSections)form.promptSections=sectionsFrom(draft.promptSections)
|
||||
if(Array.isArray(draft.photos))form.photos=draft.photos.filter((p:any)=>p?.stillId).map((p:any)=>({stillId:String(p.stillId),role:String(p.role||'change')}))
|
||||
if(draft.imageStyles)form.imageStyles={positive:draft.imageStyles.positive||[],negative:draft.imageStyles.negative||[]}
|
||||
if(draft.settings){
|
||||
Object.assign(form.settings,{
|
||||
aspect:draft.settings.aspect||form.settings.aspect,
|
||||
seed:draft.settings.seed ?? form.settings.seed,
|
||||
seedMode:draft.settings.seedMode||form.settings.seedMode,
|
||||
steps:draft.settings.steps ?? form.settings.steps,
|
||||
cfg:draft.settings.cfg ?? form.settings.cfg,
|
||||
duration:draft.settings.duration ?? form.settings.duration,
|
||||
fps:draft.settings.fps ?? form.settings.fps,
|
||||
loraStack:Array.isArray(draft.settings.loraStack)?draft.settings.loraStack:form.settings.loraStack
|
||||
})
|
||||
}
|
||||
if(['flux','krea','qwen21'].includes(form.engine)) applyEngineSampling(form.engine)
|
||||
if(draft.batchMode!=null)batchMode.value=!!draft.batchMode
|
||||
if(draft.eyeOpen!=null)eyeOpen.value=!!draft.eyeOpen
|
||||
if(draft.hideInputs!=null)hideInputs.value=!!draft.hideInputs
|
||||
if(draft.queueCollapsed!=null)queueCollapsed.value=!!draft.queueCollapsed
|
||||
if(draft.music){
|
||||
music.tags=String(draft.music.tags||music.tags)
|
||||
music.lyrics=String(draft.music.lyrics||music.lyrics)
|
||||
if(draft.music.duration!=null)music.duration=Number(draft.music.duration)||music.duration
|
||||
if(draft.music.seed!=null)music.seed=String(draft.music.seed)
|
||||
if(draft.music.name!=null)music.name=String(draft.music.name)
|
||||
}
|
||||
syncPhotosBindings()
|
||||
} finally {
|
||||
restoringDraft=false
|
||||
}
|
||||
if(draft.batchMode!=null)batchMode.value=!!draft.batchMode
|
||||
if(draft.eyeOpen!=null)eyeOpen.value=!!draft.eyeOpen
|
||||
if(draft.hideInputs!=null)hideInputs.value=!!draft.hideInputs
|
||||
if(draft.music){
|
||||
music.tags=String(draft.music.tags||music.tags)
|
||||
music.lyrics=String(draft.music.lyrics||music.lyrics)
|
||||
if(draft.music.duration!=null)music.duration=Number(draft.music.duration)||music.duration
|
||||
if(draft.music.seed!=null)music.seed=String(draft.music.seed)
|
||||
if(draft.music.name!=null)music.name=String(draft.music.name)
|
||||
}
|
||||
syncPhotosBindings()
|
||||
}
|
||||
|
||||
const xaigen=isXaigenStudio(useRuntimeConfig().public)
|
||||
@@ -662,11 +704,12 @@ const route=useRoute()
|
||||
const tasks=['generate','edit','compose','refine','video','extend','music']
|
||||
const settingsOpen=ref(false),detailsOpen=ref(false),submitting=ref(false),error=ref(''),batchText=ref('')
|
||||
const batchMode=ref(false)
|
||||
const queueCollapsed=ref(false)
|
||||
const selectionPinned=ref(false)
|
||||
const engineSampling=reactive<Record<string,{steps:number;cfg:number}>>({
|
||||
flux:{steps:24,cfg:4},
|
||||
krea:{steps:24,cfg:4},
|
||||
qwen21:{steps:25,cfg:1}
|
||||
const engineSampling=reactive<Record<string,EngineLook>>({
|
||||
flux:defaultEngineLook('flux'),
|
||||
krea:defaultEngineLook('krea'),
|
||||
qwen21:defaultEngineLook('qwen21')
|
||||
})
|
||||
const viewerVideo=ref<HTMLVideoElement|null>(null)
|
||||
const viewerMuted=ref(false)
|
||||
@@ -696,22 +739,36 @@ function defaultSamplingFor(engine:string){
|
||||
}
|
||||
function rememberEngineSampling(engine:string){
|
||||
if(!['flux','krea','qwen21'].includes(engine)) return
|
||||
const fallback=defaultEngineLook(engine)
|
||||
engineSampling[engine]={
|
||||
steps:Number(form.settings.steps)||defaultSamplingFor(engine).steps,
|
||||
cfg:Number(form.settings.cfg)||defaultSamplingFor(engine).cfg
|
||||
steps:Number(form.settings.steps)||defaultSamplingFor(engine).steps||fallback.steps,
|
||||
cfg:Number(form.settings.cfg)||defaultSamplingFor(engine).cfg||fallback.cfg,
|
||||
aspect:String(form.settings.aspect||fallback.aspect),
|
||||
seed:form.settings.seed==null || form.settings.seed==='' ? null : Number(form.settings.seed),
|
||||
seedMode:form.settings.seedMode==='locked'?'locked':'random',
|
||||
loraStack:Array.isArray(form.settings.loraStack)?structuredClone(form.settings.loraStack):[]
|
||||
}
|
||||
}
|
||||
function applyEngineSampling(engine:string){
|
||||
const saved=engineSampling[engine]
|
||||
if(!['flux','krea','qwen21'].includes(engine)) return
|
||||
const saved=engineSampling[engine] || defaultEngineLook(engine)
|
||||
const fallback=defaultSamplingFor(engine)
|
||||
form.settings.steps=saved?.steps ?? fallback.steps
|
||||
form.settings.cfg=saved?.cfg ?? fallback.cfg
|
||||
form.settings.steps=saved.steps ?? fallback.steps
|
||||
form.settings.cfg=saved.cfg ?? fallback.cfg
|
||||
form.settings.aspect=saved.aspect || form.settings.aspect || 'auto'
|
||||
form.settings.seed=saved.seed
|
||||
form.settings.seedMode=saved.seedMode || 'random'
|
||||
form.settings.loraStack=Array.isArray(saved.loraStack)?structuredClone(saved.loraStack):[]
|
||||
}
|
||||
function clearPrompt(){
|
||||
if(form.promptSections) form.promptSections.action=''
|
||||
}
|
||||
watch(engineOptions,opts=>{
|
||||
const current=opts.find(o=>o.value===form.engine)
|
||||
if(!current || current.disabled)form.engine=opts.find(o=>!o.disabled)?.value || form.engine
|
||||
})
|
||||
watch(()=>form.engine,(engine,prev)=>{
|
||||
if(restoringDraft) return
|
||||
if(prev && prev!==engine) rememberEngineSampling(prev)
|
||||
if(['flux','krea','qwen21'].includes(engine)) applyEngineSampling(engine)
|
||||
if(engine==='qwen21'){
|
||||
@@ -722,14 +779,17 @@ watch(()=>form.engine,(engine,prev)=>{
|
||||
watch(()=>form.enhancePrompt,on=>writeStoredEnhancePrompt(!!on))
|
||||
watch(()=>form.turbo,on=>{
|
||||
writeStoredTurbo(!!on)
|
||||
if(form.engine!=='qwen21')return
|
||||
if(restoringDraft || form.engine!=='qwen21')return
|
||||
form.settings.steps=on?6:25
|
||||
form.settings.cfg=1
|
||||
rememberEngineSampling('qwen21')
|
||||
})
|
||||
watch(()=>[form.settings.steps,form.settings.cfg],()=>{
|
||||
watch(()=>[
|
||||
form.settings.steps,form.settings.cfg,form.settings.aspect,form.settings.seed,form.settings.seedMode,form.settings.loraStack
|
||||
],()=>{
|
||||
if(restoringDraft) return
|
||||
if(['flux','krea','qwen21'].includes(form.engine)) rememberEngineSampling(form.engine)
|
||||
})
|
||||
},{deep:true})
|
||||
watch(()=>[form.mode,form.engine],([mode,engine])=>{
|
||||
if(engine==='qwen21' && mode==='edit'){
|
||||
form.lockFace=false
|
||||
@@ -1753,9 +1813,16 @@ async function fetchHealth(){
|
||||
watch(()=>[
|
||||
form.mode,form.engine,form.folderId,form.enhancePrompt,form.turbo,form.lockFace,form.lockOutfit,
|
||||
form.promptSections,form.photos,form.imageStyles,form.settings,
|
||||
eyeOpen.value,hideInputs.value,batchMode.value,
|
||||
eyeOpen.value,hideInputs.value,batchMode.value,queueCollapsed.value,
|
||||
music.tags,music.lyrics,music.duration,music.seed,music.name
|
||||
],()=>saveBenchDraft(),{deep:true})
|
||||
function onPageHide(){saveBenchDraft(true)}
|
||||
function onVisibilityFlush(){
|
||||
if(typeof document!=='undefined' && document.visibilityState==='hidden') saveBenchDraft(true)
|
||||
}
|
||||
function onPageShow(event:PageTransitionEvent){
|
||||
if(!event.persisted) restoreBenchDraft()
|
||||
}
|
||||
let timer:ReturnType<typeof setTimeout>,clock:ReturnType<typeof setInterval>,disposed=false
|
||||
onMounted(()=>{
|
||||
submitting.value=false
|
||||
@@ -1791,6 +1858,9 @@ onMounted(()=>{
|
||||
if(import.meta.client){
|
||||
window.addEventListener('keydown',onStageHotkey)
|
||||
window.addEventListener('pointerdown',onStagePointerDown,true)
|
||||
window.addEventListener('pagehide',onPageHide)
|
||||
window.addEventListener('pageshow',onPageShow)
|
||||
document.addEventListener('visibilitychange',onVisibilityFlush)
|
||||
}
|
||||
})
|
||||
onBeforeUnmount(()=>{
|
||||
@@ -1800,6 +1870,9 @@ onBeforeUnmount(()=>{
|
||||
saveBenchDraft(true)
|
||||
window.removeEventListener('keydown',onStageHotkey)
|
||||
window.removeEventListener('pointerdown',onStagePointerDown,true)
|
||||
window.removeEventListener('pagehide',onPageHide)
|
||||
window.removeEventListener('pageshow',onPageShow)
|
||||
document.removeEventListener('visibilitychange',onVisibilityFlush)
|
||||
}
|
||||
})
|
||||
|
||||
@@ -1828,6 +1901,7 @@ const mobileCtx=computed(()=>({
|
||||
eyeOpen:eyeOpen.value,
|
||||
hideInputs:hideInputs.value,
|
||||
photoFilledCount:photoFilledCount.value,
|
||||
clearPrompt,
|
||||
openLibrary:()=>{libraryOpen.value=true},
|
||||
closeLibrary:()=>{libraryOpen.value=false},
|
||||
toggleHideInputs:()=>{hideInputs.value=!hideInputs.value;saveBenchDraft(true)},
|
||||
|
||||
Reference in New Issue
Block a user