feat: Add FlexibleGenerationView for customizable AI content generation with character, asset, quality, and aspect ratio controls, including persistence and status polling.

src/router/index.js

@@ -38,6 +38,11 @@ const router = createRouter({
       path: '/generation',
       name: 'generation',
       component: () => import('../views/ImageGenerationView.vue')
+    },
+    {
+      path: '/flexible-generation',
+      name: 'flexible-generation',
+      component: () => import('../views/FlexibleGenerationView.vue')
     }
   ]
 })

src/views/AssetsView.vue

@@ -138,6 +138,11 @@ const handleLogout = () => {
                     @click="router.push('/generation')" v-tooltip.right="'Image Generation'">
                     <span class="text-2xl">🎨</span>
                 </div>
+                <!-- Flexible 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('/flexible-generation')" 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>

src/views/CharacterDetailView.vue

@@ -561,6 +561,11 @@ const handleLogout = () => {
                     @click="router.push('/generation')" v-tooltip.right="'Image Generation'">
                     <span class="text-xl lg:text-2xl">🎨</span>
                 </div>
+                <!-- Flexible Generation -->
+                <div class="w-10 lg:w-12 h-10 lg:h-12 flex items-center justify-center rounded-lg lg:rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
+                    @click="router.push('/flexible-generation')" v-tooltip.right="'Flexible Generation'">
+                    <span class="text-xl lg:text-2xl">🖌️</span>
+                </div>
                 <div class="w-10 lg:w-12 h-10 lg:h-12 flex items-center justify-center rounded-lg lg:rounded-xl cursor-pointer transition-all duration-300 bg-white/10 text-slate-50 shadow-inner"
                     @click="router.push('/')" v-tooltip.right="'Characters'">
                     <span class="text-xl lg:text-2xl">👥</span>

src/views/CharactersView.vue

@@ -42,22 +42,20 @@ const handleLogout = () => {
             </div>
 
             <div class="flex-1 flex flex-col gap-6 w-full items-center">
-                <div
+                <div v-tooltip.right="'Home'"
-                    v-tooltip.right="'Home'"
                     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">
                     <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'">
+                    @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'">
+                    @click="router.push('/generation')" v-tooltip.right="'Image Generation'">
                     <span class="text-2xl">🎨</span>
                 </div>
-                <div
+                <div v-tooltip.right="'Characters'"
-                    v-tooltip.right="'Characters'"
                     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">
                     <span class="text-2xl">👥</span>
                 </div>

src/views/FlexibleGenerationView.vue

@@ -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(10px);
+    -webkit-backdrop-filter: blur(10px);
+}
+
+.slide-up-enter-active,
+.slide-up-leave-active {
+    transition: all 0.3s 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.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}
+
+/* Custom Scrollbar for the gallery */
+.overflow-y-auto::-webkit-scrollbar {
+    width: 6px;
+}
+
+.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: 10px;
+}
+
+.overflow-y-auto::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.2);
+}
+</style>

src/views/ImageGenerationView.vue

@@ -440,9 +440,8 @@ onMounted(() => {
                     @click="router.push('/assets')" v-tooltip.right="'Assets'">
                     <span class="text-2xl">📂</span>
                 </div>
-                <!-- Image Generation (Active) -->
+                <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"
-                <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"
+                    @click="router.push('/flexible-generation')" v-tooltip.right="'Flexible Generation'">
-                    v-tooltip.right="'Image 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"
@@ -729,10 +728,11 @@ onMounted(() => {
                                         @click.stop="reusePrompt(gen)" v-tooltip.bottom="'Use this prompt'" />
                                     <Button icon="pi pi-images" label="Asset" size="small" text
                                         class="!text-[10px] !py-0.5 !px-2 text-slate-400 hover:bg-white/5 flex-1"
-                                        @click.stop="reuseAsset(gen)" v-tooltip.bottom="'Use original assets'" :disabled="gen.status !== 'done' || gen.assets_list.length==0" />
+                                        @click.stop="reuseAsset(gen)" v-tooltip.bottom="'Use original assets'"
+                                        :disabled="gen.status !== 'done' || gen.assets_list.length == 0" />
                                     <Button icon="pi pi-reply" label="Result" size="small" text
                                         class="!text-[10px] !py-0.5 !px-2 text-slate-400 hover:bg-white/5 flex-1"
-                                        :disabled="gen.status !== 'done' || gen.result_list.length==0"
+                                        :disabled="gen.status !== 'done' || gen.result_list.length == 0"
                                         @click.stop="useResultAsReference(gen)"
                                         v-tooltip.bottom="'Use result as reference'" />
                                 </div>

src/views/ImageToPromptView.vue

@@ -83,7 +83,7 @@ const handleLogout = () => {
                 </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'">
+                    @click="router.push('/generation')" v-tooltip.right="'Image 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"