@@ -0,0 +1,682 @@
< script setup >
import { ref , onMounted , watch , computed } from 'vue'
import { useRouter } from 'vue-router'
import { dataService } from '../services/dataService'
import { aiService } from '../services/aiService'
import Button from 'primevue/button'
import Textarea from 'primevue/textarea'
import InputText from 'primevue/inputtext'
import Dialog from 'primevue/dialog'
import Checkbox from 'primevue/checkbox'
import Dropdown from 'primevue/dropdown'
import MultiSelect from 'primevue/multiselect'
import ProgressSpinner from 'primevue/progressspinner'
import ProgressBar from 'primevue/progressbar'
import Message from 'primevue/message'
const router = useRouter ( )
const API _URL = import . meta . env . VITE _API _URL
// --- State ---
const prompt = ref ( '' )
const selectedCharacter = ref ( null )
const selectedAssets = ref ( [ ] )
const quality = ref ( { key : 'TWOK' , value : '2K' } )
const aspectRatio = ref ( { key : "NINESIXTEEN" , value : "9:16" } )
const sendToTelegram = ref ( false )
const telegramId = ref ( '' )
const isTelegramIdSaved = ref ( false )
const useProfileImage = ref ( true )
const isImprovingPrompt = ref ( false )
const previousPrompt = ref ( '' )
const characters = ref ( [ ] )
const allAssets = ref ( [ ] )
const historyGenerations = ref ( [ ] )
const historyTotal = ref ( 0 )
const historyRows = ref ( 20 )
const historyFirst = ref ( 0 )
const isSettingsVisible = ref ( false )
const isGenerating = ref ( false )
const generationStatus = ref ( '' )
const generationProgress = ref ( 0 )
const generationError = ref ( null )
const generatedResult = ref ( null ) // For immediate feedback if needed
// Options
const qualityOptions = ref ( [
{ key : 'ONEK' , value : '1K' } ,
{ key : 'TWOK' , value : '2K' } ,
{ key : 'FOURK' , value : '4K' }
] )
const aspectRatioOptions = ref ( [
{ key : "NINESIXTEEN" , value : "9:16" } ,
{ key : "FOURTHREE" , value : "4:3" } ,
{ key : "THREEFOUR" , value : "3:4" } ,
{ key : "SIXTEENNINE" , value : "16:9" }
] )
// --- Persistence ---
const STORAGE _KEY = 'flexible_gen_settings'
const saveSettings = ( ) => {
const settings = {
prompt : prompt . value ,
selectedCharacterId : selectedCharacter . value ? . id ,
selectedAssetIds : selectedAssets . value . map ( a => a . id ) ,
quality : quality . value ,
aspectRatio : aspectRatio . value ,
sendToTelegram : sendToTelegram . value ,
telegramId : telegramId . value ,
useProfileImage : useProfileImage . value
}
localStorage . setItem ( STORAGE _KEY , JSON . stringify ( settings ) )
// Also save Telegram ID separately as it's used elsewhere
if ( telegramId . value ) {
localStorage . setItem ( 'telegram_id' , telegramId . value )
isTelegramIdSaved . value = true
}
}
const restoreSettings = ( ) => {
const stored = localStorage . getItem ( STORAGE _KEY )
if ( stored ) {
try {
const settings = JSON . parse ( stored )
prompt . value = settings . prompt || ''
// We need characters and assets loaded to fully restore objects
// For now, we'll store IDs and restore in loadData
if ( settings . quality ) quality . value = settings . quality
if ( settings . aspectRatio ) aspectRatio . value = settings . aspectRatio
sendToTelegram . value = settings . sendToTelegram || false
telegramId . value = settings . telegramId || localStorage . getItem ( 'telegram_id' ) || ''
if ( telegramId . value ) isTelegramIdSaved . value = true
if ( settings . useProfileImage !== undefined ) useProfileImage . value = settings . useProfileImage
return settings // Return to use in loadData
} catch ( e ) {
console . error ( 'Failed to parse settings' , e )
}
}
return null
}
// Watchers for auto-save
watch ( [ prompt , selectedCharacter , selectedAssets , quality , aspectRatio , sendToTelegram , telegramId , useProfileImage ] , ( ) => {
saveSettings ( )
} , { deep : true } )
// --- Data Loading ---
const loadData = async ( ) => {
try {
const [ charsRes , assetsRes , historyRes ] = await Promise . all ( [
dataService . getCharacters ( ) , // Assuming this exists and returns list
dataService . getAssets ( 100 , 0 , 'all' ) , // Load a batch of assets
aiService . getGenerations ( historyRows . value , historyFirst . value )
] )
// Characters
characters . value = charsRes || [ ]
// Assets
if ( assetsRes && assetsRes . assets ) {
allAssets . value = assetsRes . assets
} else {
allAssets . value = Array . isArray ( assetsRes ) ? assetsRes : [ ]
}
// History
if ( historyRes && historyRes . generations ) {
historyGenerations . value = historyRes . generations
historyTotal . value = historyRes . total _count || 0
} else {
historyGenerations . value = Array . isArray ( historyRes ) ? historyRes : [ ]
historyTotal . value = historyGenerations . value . length
}
// Restore complex objects from IDs
const savedSettings = restoreSettings ( )
if ( savedSettings ) {
if ( savedSettings . selectedCharacterId ) {
selectedCharacter . value = characters . value . find ( c => c . id === savedSettings . selectedCharacterId ) || null
}
if ( savedSettings . selectedAssetIds && savedSettings . selectedAssetIds . length > 0 ) {
// Determine which assets to select.
// Note: saved assets might not be in the first 100 loaded.
// For a robust implementation, we might need to fetch specific assets if not found.
// For now, we filter from available.
selectedAssets . value = allAssets . value . filter ( a => savedSettings . selectedAssetIds . includes ( a . id ) )
}
}
} catch ( e ) {
console . error ( 'Failed to load data' , e )
}
}
const loadMoreHistory = async ( ) => {
// Implement pagination/infinite scroll logic here
}
// --- Generation ---
const handleGenerate = async ( ) => {
if ( ! prompt . value . trim ( ) ) return
if ( sendToTelegram . value && ! telegramId . value ) {
alert ( "Please enter your Telegram ID" )
return
}
isGenerating . value = true
generationError . value = null
generationStatus . value = 'starting'
generationProgress . value = 0
// Close settings to show gallery/progress (optional preference)
// isSettingsVisible.value = false
try {
const payload = {
aspect _ratio : aspectRatio . value . key ,
quality : quality . value . key ,
prompt : prompt . value ,
assets _list : selectedAssets . value . map ( a => a . id ) ,
linked _character _id : selectedCharacter . value ? . id || null ,
telegram _id : sendToTelegram . value ? telegramId . value : null ,
use _profile _image : selectedCharacter . value ? useProfileImage . value : false
}
const response = await aiService . runGeneration ( payload )
if ( response && response . id ) {
pollStatus ( response . id )
} else {
// Immediate result
isGenerating . value = false
loadHistory ( ) // Refresh gallery
}
} catch ( e ) {
console . error ( 'Generation failed' , e )
generationError . value = e . message || 'Generation failed'
isGenerating . value = false
}
}
const pollStatus = async ( id ) => {
let completed = false
while ( ! completed && isGenerating . value ) {
try {
const response = await aiService . getGenerationStatus ( id )
generationStatus . value = response . status
generationProgress . value = response . progress || 0
if ( response . status === 'done' ) {
completed = true
// Refresh history to show new item
const historyRes = await aiService . getGenerations ( historyRows . value , 0 )
if ( historyRes && historyRes . generations ) {
historyGenerations . value = historyRes . generations
historyTotal . value = historyRes . total _count || 0
}
} else if ( response . status === 'failed' ) {
completed = true
generationError . value = response . failed _reason || 'Generation failed'
throw new Error ( generationError . value )
} else {
await new Promise ( resolve => setTimeout ( resolve , 2000 ) )
}
} catch ( e ) {
console . error ( 'Polling failed' , e )
completed = true
isGenerating . value = false
}
}
isGenerating . value = false
}
// --- Initial Load ---
onMounted ( ( ) => {
loadData ( )
// Open settings by default if it's a new user or explicitly requested?
// Maybe better to keep it closed or open based on layout preference.
// Let's keep it open initially for better UX as they likely want to generate.
isSettingsVisible . value = true
} )
// --- Sidebar Logic (Duplicated for now) ---
const handleLogout = ( ) => {
localStorage . removeItem ( 'auth_code' )
router . push ( '/login' )
}
// Image Preview
const isImagePreviewVisible = ref ( false )
const previewImage = ref ( null )
const openImagePreview = ( url ) => {
previewImage . value = { url }
isImagePreviewVisible . value = true
}
const reusePrompt = ( gen ) => {
if ( gen . prompt ) {
prompt . value = gen . prompt
isSettingsVisible . value = true
}
}
const reuseAsset = ( gen ) => {
const assetIds = gen . assets _list || [ ]
if ( assetIds . length > 0 ) {
// We need to find these assets in allAssets to get full objects for MultiSelect
// If not loaded, we might need value to just be objects with ID and URL (MultiSelect supports object value)
// Let's try to map what we can
const assets = assetIds . map ( id => {
const found = allAssets . value . find ( a => a . id === id )
if ( found ) return found
return { id , url : ` /assets/ ${ id } ` , name : 'Asset ' + id . substring ( 0 , 4 ) }
} )
selectedAssets . value = assets
isSettingsVisible . value = true
}
}
const useResultAsAsset = ( gen ) => {
if ( gen . result _list && gen . result _list . length > 0 ) {
const resultId = gen . result _list [ 0 ]
const asset = {
id : resultId ,
url : ` /assets/ ${ resultId } ` ,
name : 'Gen ' + gen . id . substring ( 0 , 4 )
}
// Replace existing selection or add? User said "automatically replaced the attached asset". so Replace.
selectedAssets . value = [ asset ]
isSettingsVisible . value = true
}
}
const handleImprovePrompt = async ( ) => {
if ( ! prompt . value || prompt . value . length <= 10 ) return
isImprovingPrompt . value = true
try {
const linkedAssetIds = selectedAssets . value . map ( a => a . id )
const response = await aiService . improvePrompt ( prompt . value , linkedAssetIds )
if ( response && response . prompt ) {
previousPrompt . value = prompt . value
prompt . value = response . prompt
}
} catch ( e ) {
console . error ( 'Prompt improvement failed' , e )
} finally {
isImprovingPrompt . value = false
}
}
const undoImprovePrompt = ( ) => {
if ( previousPrompt . value ) {
const temp = prompt . value
prompt . value = previousPrompt . value
previousPrompt . value = temp
}
}
const clearPrompt = ( ) => {
prompt . value = ''
previousPrompt . value = ''
}
< / script >
< template >
< div class = "flex h-screen bg-slate-900 overflow-hidden text-slate-100 font-sans" >
<!-- Sidebar -- >
< nav
class = "glass-panel w-20 m-4 flex flex-col items-center py-6 rounded-3xl z-10 border border-white/5 bg-slate-900/50 backdrop-blur-md" >
< div class = "mb-12" >
< div
class = "w-10 h-10 bg-gradient-to-br from-violet-600 to-cyan-500 rounded-xl flex items-center justify-center font-bold text-white text-xl shadow-lg shadow-violet-500/20" >
AI
< / div >
< / div >
< div class = "flex-1 flex flex-col gap-6 w-full items-center" >
< div class = "w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
@click ="router.push('/')" v -tooltip .right = " ' Home ' " >
< span class = "text-2xl" > 🏠 < / span >
< / div >
< div class = "w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
@click ="router.push('/assets')" v -tooltip .right = " ' Assets ' " >
< span class = "text-2xl" > 📂 < / span >
< / div >
<!-- Image Generation -- >
< div class = "w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
@click ="router.push('/generation')" v -tooltip .right = " ' Image Generation ' " >
< span class = "text-2xl" > 🎨 < / span >
< / div >
<!-- Active State for Flexible Generation -- >
< div class = "w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 bg-white/10 text-slate-50 shadow-inner"
v -tooltip .right = " ' Flexible Generation ' " >
< span class = "text-2xl" > 🖌 ️ < / span >
< / div >
< div class = "w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
@click ="router.push('/characters')" v -tooltip .right = " ' Characters ' " >
< span class = "text-2xl" > 👥 < / span >
< / div >
< div class = "w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
@click ="router.push('/image-to-prompt')" v -tooltip .right = " ' Image to Prompt ' " >
< span class = "text-2xl" > ✨ < / span >
< / div >
< / div >
< div class = "mt-auto" >
< div @click ="handleLogout"
class = "w-10 h-10 rounded-xl bg-red-500/10 text-red-400 flex items-center justify-center cursor-pointer hover:bg-red-500/20 transition-all font-bold" >
< i class = "pi pi-power-off" > < / i >
< / div >
< / div >
< / nav >
<!-- Main Content -- >
< main class = "flex-1 relative flex flex-col h-full overflow-hidden" >
<!-- Header -- >
< header
class = "p-4 flex justify-between items-center z-10 border-b border-white/5 bg-slate-900/80 backdrop-blur-sm" >
< div class = "flex items-center gap-3" >
< h1
class = "text-xl font-bold bg-gradient-to-r from-white to-slate-400 bg-clip-text text-transparent m-0" >
Gallery < / h1 >
< span class = "text-xs text-slate-500 border-l border-white/10 pl-3" > History < / span >
< / div >
< Button icon = "pi pi-cog" @click ="isSettingsVisible = true" rounded text
class = "!text-slate-400 hover:!bg-white/10 !w-8 !h-8" v-if = "!isSettingsVisible" / >
< / header >
<!-- Gallery Grid -- >
< div class = "flex-1 overflow-y-auto p-4 pb-32" > <!-- pb - 32 to allow space for bottom panel -- >
< div v-if = "historyGenerations.length > 0"
class = "grid grid-cols-3 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-8 gap-1" >
< div v-for = "gen in historyGenerations" :key="gen.id"
class = "aspect-[9/16] relative group overflow-hidden bg-slate-800 transition-all duration-300" >
<!-- Image -- >
< img v-if = "gen.result_list && gen.result_list.length > 0"
: src = "API_URL + '/assets/' + gen.result_list[0] + '?thumbnail=true'"
class = "w-full h-full object-cover"
@click ="openImagePreview(API_URL + '/assets/' + gen.result_list[0])" / >
< div v-else class = "w-full h-full flex items-center justify-center text-slate-600" >
< i class = "pi pi-image text-4xl" > < / i >
< / div >
<!-- Overlay Info -- >
< div
class = "absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex flex-col justify-between p-2" >
<!-- Top Actions -- >
< div
class = "flex justify-end gap-1 translate-y-[-10px] group-hover:translate-y-0 transition-transform duration-200" >
< Button icon = "pi pi-pencil" v -tooltip .left = " ' Edit ( Use Result ) ' "
class = "!w-6 !h-6 !rounded-full !bg-white/20 !border-none !text-white text-[10px] hover:!bg-violet-500"
@click.stop ="useResultAsAsset(gen)" / >
< / div >
<!-- Bottom Actions -- >
< div class = "translate-y-[10px] group-hover:translate-y-0 transition-transform duration-200" >
< div class = "flex gap-1 mb-1" >
< Button icon = "pi pi-comment" v -tooltip .bottom = " ' Reuse Prompt ' "
class = "!w-6 !h-6 flex-1 !bg-white/10 !border-white/10 !text-slate-200 text-[10px] hover:!bg-white/20"
@click.stop ="reusePrompt(gen)" / >
< Button icon = "pi pi-images" v -tooltip .bottom = " ' Reuse Assets ' "
class = "!w-6 !h-6 flex-1 !bg-white/10 !border-white/10 !text-slate-200 text-[10px] hover:!bg-white/20"
@click.stop ="reuseAsset(gen)" / >
< / div >
< p class = "text-[10px] text-white/70 line-clamp-1 leading-tight" > { { gen . prompt } } < / p >
< / div >
< / div >
< / div >
< / div >
< div v-else-if = "!isGenerating"
class = "flex flex-col items-center justify-center h-full text-slate-600 opacity-50" >
< i class = "pi pi-images text-6xl mb-4" > < / i >
< p class = "text-xl" > Your creations will appear here < / p >
< / div >
< / div >
<!-- Bottom Settings Panel -- >
< transition name = "slide-up" >
< div v-if = "isSettingsVisible"
class = "absolute bottom-0 left-0 right-0 glass-panel border-t border-white/10 bg-slate-900/95 backdrop-blur-xl p-6 z-20 rounded-t-3xl shadow-[0_-10px_40px_rgba(0,0,0,0.5)] flex flex-col gap-4 max-h-[85vh] overflow-y-auto" >
<!-- Handle / Close Button -- >
< div class = "w-full flex justify-center -mt-2 mb-2 cursor-pointer"
@click ="isSettingsVisible = false" >
< div class = "w-16 h-1 bg-white/20 rounded-full hover:bg-white/40 transition-colors" > < / div >
< / div >
< div class = "flex flex-col lg:flex-row gap-8" >
<!-- Left Column : Inputs -- >
< div class = "flex-1 flex flex-col gap-4" >
<!-- Prompt -- >
< div class = "flex flex-col gap-2" >
< div class = "flex justify-between items-center" >
< label
class = "text-xs font-bold text-slate-400 uppercase tracking-wider" > Prompt < / label >
< div class = "flex gap-1" >
< Button v-if = "previousPrompt" icon="pi pi-undo"
class = "!p-1 !w-6 !h-6 !text-[10px] !bg-slate-800 hover:!bg-slate-700 !border-white/10 !text-slate-300"
@click ="undoImprovePrompt" v -tooltip .top = " ' Undo ' " / >
< Button icon = "pi pi-sparkles" label = "Improve" :loading = "isImprovingPrompt"
: disabled = "!prompt || prompt.length <= 10"
class = "!py-0.5 !px-2 !text-[10px] !h-6 !bg-violet-600/20 hover:!bg-violet-600/30 !border-violet-500/30 !text-violet-400 disabled:opacity-50"
@click ="handleImprovePrompt" / >
< Button icon = "pi pi-times" label = "Clear"
class = "!py-0.5 !px-2 !text-[10px] !h-6 !bg-slate-800 hover:!bg-slate-700 !border-white/10 !text-slate-400"
@click ="clearPrompt" / >
< / div >
< / div >
< Textarea v-model = "prompt" rows="3" autoResize
placeholder = "Describe what you want to create..."
class = "w-full bg-slate-800 border-white/10 text-white rounded-xl p-3 focus:border-violet-500 focus:ring-1 focus:ring-violet-500/50 transition-all resize-none shadow-inner" / >
< / div >
<!-- Assets & Character Row -- >
< div class = "flex gap-4" >
< div class = "flex-1 flex flex-col gap-2" >
< label class = "text-xs font-bold text-slate-400 uppercase tracking-wider" > Character
( Optional ) < / label >
< Dropdown v-model = "selectedCharacter" :options="characters" optionLabel="name"
placeholder = "Select Character" filter showClear
class = "w-full !bg-slate-800 !border-white/10 !text-white !rounded-xl" : pt = "{
root: { class: '!bg-slate-800' },
input: { class: '!text-white' },
trigger: { class: '!text-slate-400' },
panel: { class: '!bg-slate-800 !border-white/10' },
item: { class: '!text-slate-300 hover:!bg-white/10 hover:!text-white' }
}" >
< template # value = "slotProps" >
< div v-if = "slotProps.value" class="flex items-center gap-2" >
< img v-if = "slotProps.value.avatar_image"
: src = "API_URL + slotProps.value.avatar_image"
class = "w-6 h-6 rounded-full object-cover" / >
< span > { { slotProps . value . name } } < / span >
< / div >
< span v-else > {{ slotProps.placeholder }} < / span >
< / template >
< template # option = "slotProps" >
< div class = "flex items-center gap-2" >
< img v-if = "slotProps.option.avatar_image"
: src = "API_URL + slotProps.option.avatar_image"
class = "w-8 h-8 rounded-full object-cover" / >
< span > { { slotProps . option . name } } < / span >
< / div >
< / template >
< / Dropdown >
< div v-if = "selectedCharacter"
class = "flex items-center gap-2 mt-2 px-1 animate-in fade-in slide-in-from-top-1" >
< Checkbox v-model = "useProfileImage" :binary="true" inputId="use-profile-img" / >
< label for = "use-profile-img"
class = "text-xs text-slate-300 cursor-pointer select-none" > Use Character
Photo < / label >
< / div >
< / div >
< div class = "flex-1 flex flex-col gap-2" >
< label class = "text-xs font-bold text-slate-400 uppercase tracking-wider" > Reference
Assets < / label >
< MultiSelect v-model = "selectedAssets" :options="allAssets" optionLabel="id"
placeholder = "Select Assets" display = "chip"
class = "w-full !bg-slate-800 !border-white/10 !text-white !rounded-xl" : pt = "{
root: { class: '!bg-slate-800' },
labelContainer: { class: '!text-white' },
trigger: { class: '!text-slate-400' },
panel: { class: '!bg-slate-800 !border-white/10' },
item: { class: '!text-slate-300 hover:!bg-white/10 hover:!text-white' },
token: { class: '!bg-violet-600/30 !text-violet-200' }
}" >
< template # option = "slotProps" >
< div class = "flex items-center gap-2" >
< img : src = "API_URL + slotProps.option.url + '?thumbnail=true'"
class = "w-8 h-8 rounded object-cover border border-white/10" / >
< span class = "text-xs truncate max-w-[150px]" > { { slotProps . option . name ||
'Asset ' + slotProps . option . id . substring ( 0 , 4 ) } } < / span >
< / div >
< / template >
< / MultiSelect >
< / div >
< / div >
< / div >
<!-- Right Column : Specs & Action -- >
< div class = "w-full lg:w-80 flex flex-col gap-4" >
<!-- Specs -- >
< div class = "grid grid-cols-2 gap-4" >
< div class = "flex flex-col gap-2" >
< label
class = "text-xs font-bold text-slate-400 uppercase tracking-wider" > Quality < / label >
< Dropdown v-model = "quality" :options="qualityOptions" optionLabel="value"
class = "w-full !bg-slate-800 !border-white/10 !text-white !rounded-xl"
: pt = "{ input: { class: '!text-white' }, trigger: { class: '!text-slate-400' }, panel: { class: '!bg-slate-800 !border-white/10' }, item: { class: '!text-slate-300 hover:!bg-white/10 hover:!text-white' } }" / >
< / div >
< div class = "flex flex-col gap-2" >
< label class = "text-xs font-bold text-slate-400 uppercase tracking-wider" > Aspect
Ratio < / label >
< Dropdown v-model = "aspectRatio" :options="aspectRatioOptions" optionLabel="value"
class = "w-full !bg-slate-800 !border-white/10 !text-white !rounded-xl"
: pt = "{ input: { class: '!text-white' }, trigger: { class: '!text-slate-400' }, panel: { class: '!bg-slate-800 !border-white/10' }, item: { class: '!text-slate-300 hover:!bg-white/10 hover:!text-white' } }" / >
< / div >
< / div >
<!-- Telegram -- >
< div class = "flex flex-col gap-2 bg-slate-800/50 p-3 rounded-xl border border-white/5" >
< div class = "flex items-center gap-2" >
< Checkbox v-model = "sendToTelegram" :binary="true" inputId="tg-check" / >
< label for = "tg-check" class = "text-xs text-slate-300 cursor-pointer" > Send to
Telegram < / label >
< / div >
< div v-if = "sendToTelegram" class="animate-in fade-in slide-in-from-top-1" >
< InputText v-model = "telegramId" placeholder="Telegram ID"
class = "w-full !text-xs !bg-slate-900 !border-white/10 !text-white !py-1.5" / >
< / div >
< / div >
<!-- Generate Button -- >
< div class = "mt-auto" >
< Button : label = "isGenerating ? 'Generating...' : 'Generate'"
: icon = "isGenerating ? 'pi pi-spin pi-spinner' : 'pi pi-sparkles'"
:loading = "isGenerating" @click ="handleGenerate"
class = "w-full !py-3 !text-base !font-bold !bg-gradient-to-r from-violet-600 to-cyan-500 !border-none !rounded-xl !shadow-lg !shadow-violet-500/20 hover:!scale-[1.02] transition-all" / >
< div v-if = "isGenerating" class="mt-2 text-center" >
< ProgressBar :value = "generationProgress" class = "h-1 bg-slate-700"
: pt = "{ value: { class: '!bg-violet-500' } }" :showValue = "false" / >
< span class = "text-[10px] text-slate-500" > { { generationStatus } } < / span >
< / div >
< div v-if = "generationError"
class = "mt-2 text-center text-xs text-red-400 bg-red-500/10 p-2 rounded border border-red-500/20" >
{ { generationError } }
< / div >
< / div >
< / div >
< / div >
< / div >
< / transition >
<!-- Toggle Button ( when hidden ) -- >
< transition name = "fade" >
< div v-if = "!isSettingsVisible" class="absolute bottom-8 left-1/2 -translate-x-1/2 z-10" >
< Button label = "Open Controls" icon = "pi pi-chevron-up" @click ="isSettingsVisible = true" rounded
class = "!bg-violet-600 !border-none !shadow-xl !font-bold shadow-violet-500/40 !px-6 !py-3" / >
< / div >
< / transition >
< / main >
<!-- Image Preview Modal -- >
< Dialog v -model :visible = "isImagePreviewVisible" modal dismissableMask
: style = "{ width: '90vw', maxWidth: '1000px', background: 'transparent', boxShadow: 'none' }"
: pt = "{ root: { class: '!bg-transparent !border-none !shadow-none' }, header: { class: '!hidden' }, content: { class: '!bg-transparent !p-0' } }" >
< div class = "relative flex items-center justify-center" @click ="isImagePreviewVisible = false" >
< img v-if = "previewImage" :src="previewImage.url"
class = "max-w-full max-h-[85vh] object-contain rounded-xl shadow-2xl" / >
< Button icon = "pi pi-times" @click ="isImagePreviewVisible = false" rounded text
class = "!absolute -top-4 -right-4 !text-white !bg-black/50 hover:!bg-black/70 !w-10 !h-10" / >
< / div >
< / Dialog >
< / div >
< / template >
< style scoped >
. glass - panel {
background : rgba ( 255 , 255 , 255 , 0.03 ) ;
backdrop - filter : blur ( 10 px ) ;
- webkit - backdrop - filter : blur ( 10 px ) ;
}
. slide - up - enter - active ,
. slide - up - leave - active {
transition : all 0.3 s cubic - bezier ( 0.16 , 1 , 0.3 , 1 ) ;
}
. slide - up - enter - from ,
. slide - up - leave - to {
transform : translateY ( 100 % ) ;
opacity : 0 ;
}
. fade - enter - active ,
. fade - leave - active {
transition : opacity 0.3 s ease ;
}
. fade - enter - from ,
. fade - leave - to {
opacity : 0 ;
}
/* Custom Scrollbar for the gallery */
. overflow - y - auto : : - webkit - scrollbar {
width : 6 px ;
}
. overflow - y - auto : : - webkit - scrollbar - track {
background : rgba ( 255 , 255 , 255 , 0.02 ) ;
}
. overflow - y - auto : : - webkit - scrollbar - thumb {
background : rgba ( 255 , 255 , 255 , 0.1 ) ;
border - radius : 10 px ;
}
. overflow - y - auto : : - webkit - scrollbar - thumb : hover {
background : rgba ( 255 , 255 , 255 , 0.2 ) ;
}
< / style >
