feat: Support grouped generation responses and improve generation ID extraction for polling.

src/components/AppSidebar.vue

@@ -72,10 +72,9 @@ const navItems = computed(() => {
     const items = [
         { path: '/', icon: '🏠', tooltip: 'Home' },
         { path: '/projects', icon: '📂', tooltip: 'Projects' },
-        { path: '/flexible', icon: '🖌️', tooltip: 'Flexible Generation' },
+        { path: '/flexible', icon: '🖌️', tooltip: 'Flexible' },
         { path: '/albums', icon: '🖼️', tooltip: 'Library' },
-        { path: '/characters', icon: '👥', tooltip: 'Characters' },
-        { path: '/image-to-prompt', icon: '✨', tooltip: 'Image to Prompt' }
+        { path: '/characters', icon: '👥', tooltip: 'Characters' }
     ]
 
     if (authStore.isAdmin()) {

src/views/AlbumDetailView.vue

@@ -9,7 +9,6 @@ import Skeleton from 'primevue/skeleton'
 import Button from 'primevue/button'
 import ConfirmDialog from 'primevue/confirmdialog'
 import { useConfirm } from 'primevue/useconfirm'
-import Image from 'primevue/image'
 import Dialog from 'primevue/dialog'
 
 const route = useRoute()
@@ -129,6 +128,14 @@ const removeGeneration = (gen) => {
         }
     })
 }
+
+// --- Image Preview ---
+const isImagePreviewVisible = ref(false)
+const previewImage = ref(null)
+const openImagePreview = (url) => {
+    previewImage.value = { url }
+    isImagePreviewVisible.value = true
+}
 </script>
 
 <template>
@@ -183,9 +190,11 @@ const removeGeneration = (gen) => {
                 <div v-for="gen in generations" :key="gen.id"
                     class="glass-panel rounded-xl overflow-hidden group relative transition-all hover:bg-white/5">
 
-                    <div class="aspect-[2/3] w-full bg-slate-800 relative overflow-hidden">
-                        <Image :src="gen.result || API_URL + `/assets/${gen.result_list[0]}` + '?thumbnail=true'"
-                            preview class="w-full h-full object-cover" imageClass="w-full h-full object-cover" />
+                    <div class="aspect-[2/3] w-full bg-slate-800 relative overflow-hidden cursor-pointer"
+                        @click="gen.result_list && gen.result_list.length > 0 ? openImagePreview(API_URL + '/assets/' + gen.result_list[0]) : null">
+                        <img v-if="gen.result_list && gen.result_list.length > 0"
+                            :src="gen.result || API_URL + `/assets/${gen.result_list[0]}` + '?thumbnail=true'"
+                            class="w-full h-full object-cover" />
 
                         <!-- Overlay Actions -->
                         <div
@@ -230,7 +239,7 @@ const removeGeneration = (gen) => {
                         :class="selectedGenerations.some(g => g.id === gen.id) ? 'border-violet-500 ring-2 ring-violet-500/30' : 'border-transparent hover:border-white/20'">
 
                         <img v-if="gen.result_list && gen.result_list.length > 0"
-                            :src="gen.result_list[0].includes('http') ? gen.result_list[0] : (gen.result || API_URL + `/assets/${gen.result_list[0]}` + '?thumbnail=true')"
+                            :src="gen.result_list[0].includes('http') ? gen.result_list[0] : (gen.result || API_URL + `/assets/${gen.result_list[0]}`)"
                             class="w-full h-full object-cover" />
                         <!-- Fallback for no result -->
                         <div v-else class="w-full h-full bg-slate-800 flex items-center justify-center text-slate-500">
@@ -263,6 +272,18 @@ const removeGeneration = (gen) => {
             </template>
         </Dialog>
 
+        <!-- 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>
 

src/views/FlexibleGenerationView.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, watch, computed } from 'vue'
+import { ref, onMounted, onBeforeUnmount, watch, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { dataService } from '../services/dataService'
 import { aiService } from '../services/aiService'
@@ -37,6 +37,7 @@ const isModalLoading = ref(false)
 const tempSelectedAssets = ref([])
 const quality = ref({ key: 'TWOK', value: '2K' })
 const aspectRatio = ref({ key: "NINESIXTEEN", value: "9:16" })
+const generationCount = ref(1)
 const sendToTelegram = ref(false)
 const telegramId = ref('')
 const isTelegramIdSaved = ref(false)
@@ -54,6 +55,7 @@ const historyFirst = ref(0)
 const isSettingsVisible = ref(false)
 const isSubmitting = ref(false)
 const activeOverlayId = ref(null) // For mobile tap-to-show overlay
+const filterCharacter = ref(null) // Character filter for gallery
 
 // Options
 const qualityOptions = ref([
@@ -80,7 +82,8 @@ const saveSettings = () => {
         aspectRatio: aspectRatio.value,
         sendToTelegram: sendToTelegram.value,
         telegramId: telegramId.value,
-        useProfileImage: useProfileImage.value
+        useProfileImage: useProfileImage.value,
+        generationCount: generationCount.value
     }
     localStorage.setItem(STORAGE_KEY, JSON.stringify(settings))
 
@@ -106,6 +109,7 @@ const restoreSettings = () => {
             telegramId.value = settings.telegramId || localStorage.getItem('telegram_id') || ''
             if (telegramId.value) isTelegramIdSaved.value = true
             if (settings.useProfileImage !== undefined) useProfileImage.value = settings.useProfileImage
+            if (settings.generationCount) generationCount.value = Math.min(settings.generationCount, 4)
 
             return settings // Return to use in loadData
         } catch (e) {
@@ -116,10 +120,18 @@ const restoreSettings = () => {
 }
 
 // Watchers for auto-save
-watch([prompt, selectedCharacter, selectedAssets, quality, aspectRatio, sendToTelegram, telegramId, useProfileImage], () => {
+watch([prompt, selectedCharacter, selectedAssets, quality, aspectRatio, sendToTelegram, telegramId, useProfileImage, generationCount], () => {
     saveSettings()
 }, { deep: true })
 
+// Watcher for character filter — reload history when filter changes
+watch(filterCharacter, async () => {
+    historyGenerations.value = []
+    historyTotal.value = 0
+    historyFirst.value = 0
+    await refreshHistory()
+})
+
 
 // --- Data Loading ---
 const loadData = async () => {
@@ -127,7 +139,7 @@ const loadData = async () => {
         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)
+            aiService.getGenerations(historyRows.value, historyFirst.value, filterCharacter.value?.id)
         ])
 
         // Characters
@@ -197,7 +209,7 @@ const loadData = async () => {
 
 const refreshHistory = async () => {
     try {
-        const response = await aiService.getGenerations(historyRows.value, 0)
+        const response = await aiService.getGenerations(historyRows.value, 0, filterCharacter.value?.id)
         if (response && response.generations) {
             // Update existing items and add new ones at the top
             const newGenerations = []
@@ -251,38 +263,43 @@ const handleGenerate = async () => {
             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
+            use_profile_image: selectedCharacter.value ? useProfileImage.value : false,
+            count: generationCount.value
         }
 
         const response = await aiService.runGeneration(payload)
 
-        if (response && response.id) {
-            // Create optimistic generation items
-            // If response is the full generation object, use it. 
-            // If it's just { id: '...' }, create a placeholder.
-            // aiService.runGeneration returns response.data. 
-
-            const newGen = {
-                id: response.id,
-                prompt: prompt.value,
-                status: 'starting',
-                created_at: new Date().toISOString(),
-                // Add other fields as necessary for display
+        // Response can be a single generation, an array, or a Group response with 'generations'
+        let generations = []
+        if (response && response.generations) {
+            generations = response.generations
+        } else if (Array.isArray(response)) {
+            generations = response
+        } else {
+            generations = [response]
+        }
+
+        for (const gen of generations) {
+            if (gen && gen.id) {
+                const newGen = {
+                    id: gen.id,
+                    prompt: prompt.value,
+                    status: gen.status || 'starting',
+                    created_at: new Date().toISOString(),
+                    generation_group_id: gen.generation_group_id || null,
                 }
 
-            // Add to history immediately
                 historyGenerations.value.unshift(newGen)
                 historyTotal.value++
 
-            // Start polling
-            pollGeneration(response.id)
-
-            // Clear prompt if desired, or keep for reuse
-            // prompt.value = '' 
+                pollGeneration(gen.id)
             }
+        }
+
+        // Refresh history after a short delay to get full generation data from server
+        setTimeout(() => refreshHistory(), 2000)
     } catch (e) {
         console.error('Generation failed', e)
-        // Ideally show a toast error here
         alert(e.message || 'Generation failed to start')
     } finally {
         isSubmitting.value = false
@@ -352,7 +369,7 @@ const loadMoreHistory = async () => {
 
     try {
         const nextOffset = historyGenerations.value.length
-        const response = await aiService.getGenerations(historyRows.value, nextOffset)
+        const response = await aiService.getGenerations(historyRows.value, nextOffset, filterCharacter.value?.id)
 
         if (response && response.generations) {
             const newGenerations = response.generations.filter(gen =>
@@ -380,14 +397,98 @@ onMounted(() => {
 // --- Sidebar Logic (Duplicated for now) ---
 // handleLogout removed - handled in AppSidebar
 
-// Image Preview
+// Image Preview with navigation
 const isImagePreviewVisible = ref(false)
 const previewImage = ref(null)
+const previewIndex = ref(0)
+
+// Grouped history: merge generations with the same generation_group_id into a single gallery item
+const groupedHistoryGenerations = computed(() => {
+    const groups = new Map()
+    const result = []
+    for (const gen of historyGenerations.value) {
+        if (gen.generation_group_id) {
+            if (groups.has(gen.generation_group_id)) {
+                groups.get(gen.generation_group_id).children.push(gen)
+            } else {
+                const group = {
+                    id: gen.generation_group_id,
+                    generation_group_id: gen.generation_group_id,
+                    prompt: gen.prompt,
+                    created_at: gen.created_at,
+                    isGroup: true,
+                    children: [gen],
+                }
+                groups.set(gen.generation_group_id, group)
+                result.push(group)
+            }
+        } else {
+            result.push(gen)
+        }
+    }
+    return result
+})
+
+// Collect all preview-able images from history
+const allPreviewImages = computed(() => {
+    const images = []
+    for (const gen of historyGenerations.value) {
+        if (gen.result_list && gen.result_list.length > 0) {
+            for (const assetId of gen.result_list) {
+                images.push({
+                    url: API_URL + '/assets/' + assetId,
+                    genId: gen.id,
+                    prompt: gen.prompt
+                })
+            }
+        }
+    }
+    return images
+})
+
 const openImagePreview = (url) => {
-    previewImage.value = { url }
+    // Find index of this image in the flat list
+    const idx = allPreviewImages.value.findIndex(img => img.url === url)
+    previewIndex.value = idx >= 0 ? idx : 0
+    previewImage.value = allPreviewImages.value[previewIndex.value] || { url }
     isImagePreviewVisible.value = true
 }
 
+const navigatePreview = (direction) => {
+    const images = allPreviewImages.value
+    if (images.length === 0) return
+    let newIndex = previewIndex.value + direction
+    if (newIndex < 0) newIndex = images.length - 1
+    if (newIndex >= images.length) newIndex = 0
+    previewIndex.value = newIndex
+    previewImage.value = images[newIndex]
+}
+
+const onPreviewKeydown = (e) => {
+    if (!isImagePreviewVisible.value) return
+    if (e.key === 'ArrowLeft') {
+        e.preventDefault()
+        navigatePreview(-1)
+    } else if (e.key === 'ArrowRight') {
+        e.preventDefault()
+        navigatePreview(1)
+    } else if (e.key === 'Escape') {
+        isImagePreviewVisible.value = false
+    }
+}
+
+watch(isImagePreviewVisible, (visible) => {
+    if (visible) {
+        window.addEventListener('keydown', onPreviewKeydown)
+    } else {
+        window.removeEventListener('keydown', onPreviewKeydown)
+    }
+})
+
+onBeforeUnmount(() => {
+    window.removeEventListener('keydown', onPreviewKeydown)
+})
+
 const reusePrompt = (gen) => {
     if (gen.prompt) {
         prompt.value = gen.prompt
@@ -602,6 +703,32 @@ const confirmAddToAlbum = async () => {
                     <span class="text-xs text-slate-500 border-l border-white/10 pl-3">History</span>
                 </div>
                 <div class="flex items-center gap-2">
+                    <Dropdown v-model="filterCharacter" :options="characters" optionLabel="name"
+                        placeholder="All Characters" showClear
+                        class="!w-48 !bg-slate-800/60 !border-white/10 !text-white !rounded-xl !text-sm" :pt="{
+                            root: { class: '!bg-slate-800/60 !h-8' },
+                            input: { class: '!text-white !text-xs !py-1 !px-2' },
+                            trigger: { class: '!text-slate-400 !w-6' },
+                            panel: { class: '!bg-slate-800 !border-white/10' },
+                            item: { class: '!text-slate-300 hover:!bg-white/10 hover:!text-white !text-xs !py-1.5' },
+                            clearIcon: { class: '!text-slate-400 hover:!text-white' }
+                        }">
+                        <template #value="slotProps">
+                            <div v-if="slotProps.value" class="flex items-center gap-1.5">
+                                <img v-if="slotProps.value.avatar_image" :src="API_URL + slotProps.value.avatar_image"
+                                    class="w-5 h-5 rounded-full object-cover" />
+                                <span class="text-xs">{{ slotProps.value.name }}</span>
+                            </div>
+                            <span v-else class="text-xs text-slate-400">{{ 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-6 h-6 rounded-full object-cover" />
+                                <span>{{ slotProps.option.name }}</span>
+                            </div>
+                        </template>
+                    </Dropdown>
                     <Button icon="pi pi-refresh" @click="refreshHistory" rounded text
                         class="!text-slate-400 hover:!bg-white/10 !w-8 !h-8 md:hidden" />
                     <Button icon="pi pi-cog" @click="isSettingsVisible = true" rounded text
@@ -613,98 +740,235 @@ const confirmAddToAlbum = async () => {
                 :class="{ 'pb-[300px]': isSettingsVisible, 'pb-32': !isSettingsVisible }">
                 <div v-if="historyGenerations.length > 0"
                     class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-6 gap-2 md: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"
-                        @click="toggleMobileOverlay(gen.id)">
+                    <div v-for="item in groupedHistoryGenerations" :key="item.id"
+                        class="aspect-[9/16] relative overflow-hidden bg-slate-800 transition-all duration-300">
 
-                        <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 cursor-pointer"
-                            @click.stop="openImagePreview(API_URL + '/assets/' + gen.result_list[0])" />
-
-                        <div v-else-if="gen.status === 'failed'"
-                            class="w-full h-full flex flex-col items-center justify-center p-2 text-center bg-red-500/10 border border-red-500/20">
-                            <i class="pi pi-times-circle text-red-500 text-2xl mb-1"></i>
-                            <span class="text-[10px] font-bold text-red-400 uppercase tracking-wide">Failed</span>
-                            <span v-if="gen.failed_reason"
-                                class="text-[8px] text-red-300/70 mt-1 line-clamp-2 leading-tight"
-                                v-tooltip.top="gen.failed_reason">{{ gen.failed_reason }}</span>
+                        <!-- ============================================ -->
+                        <!-- GROUPED GENERATION (multiple in one slot)    -->
+                        <!-- ============================================ -->
+                        <template v-if="item.isGroup">
+                            <!-- Group badge -->
+                            <div
+                                class="absolute top-1.5 left-1.5 z-20 bg-violet-600/80 backdrop-blur-sm text-white text-[9px] font-bold px-1.5 py-0.5 rounded-md pointer-events-none">
+                                {{ item.children.length }}x
                             </div>
 
-                        <div v-else-if="['processing', 'starting', 'running'].includes(gen.status)"
-                            class="w-full h-full flex flex-col items-center justify-center relative overflow-hidden bg-slate-800/50 border border-violet-500/20 group">
-                            <!-- Shimmer Background -->
+                            <div class="w-full h-full grid gap-0.5"
+                                :class="item.children.length <= 2 ? 'grid-cols-1' : 'grid-cols-2'">
+                                <div v-for="child in item.children" :key="child.id"
+                                    class="relative group overflow-hidden" @click="toggleMobileOverlay(child.id)">
+
+                                    <!-- Child: has result -->
+                                    <img v-if="child.result_list && child.result_list.length > 0"
+                                        :src="API_URL + '/assets/' + child.result_list[0] + '?thumbnail=true'"
+                                        class="w-full h-full object-cover" />
+
+                                    <!-- Child: processing -->
+                                    <div v-else-if="['processing', 'starting', 'running'].includes(child.status)"
+                                        class="w-full h-full flex flex-col items-center justify-center relative overflow-hidden bg-slate-800/50">
                                         <div
                                             class="absolute inset-0 bg-gradient-to-tr from-violet-500/5 via-violet-500/10 to-cyan-500/5 animate-pulse">
                                         </div>
-
-                            <!-- Moving Highlight -->
                                         <div
                                             class="absolute inset-0 -translate-x-full animate-[shimmer_2s_infinite] bg-gradient-to-r from-transparent via-white/5 to-transparent">
                                         </div>
-
-                            <i class="pi pi-spin pi-spinner text-violet-500 text-xl mb-2 relative z-10"></i>
-                            <span class="text-[10px] text-violet-300/70 relative z-10 capitalize">{{ gen.status
-                            }}...</span>
-                            <span v-if="gen.progress"
-                                class="text-[9px] text-violet-400/60 font-mono mt-1 relative z-10">{{
-                                    gen.progress }}%</span>
+                                        <i class="pi pi-spin pi-spinner text-violet-500 text-sm relative z-10"></i>
                                     </div>
 
-                        <div v-else class="w-full h-full flex items-center justify-center text-slate-600 bg-slate-800">
+                                    <!-- Child: FAILED -->
+                                    <div v-else-if="child.status === 'failed'"
+                                        class="w-full h-full flex flex-col items-center justify-center bg-red-500/10 relative group p-2 text-center"
+                                        v-tooltip.bottom="item.children.length > 1 ? (child.failed_reason || 'Generation failed') : null">
+                                        <i class="pi pi-times-circle text-red-500 text-lg mb-0.5"></i>
+                                        <span
+                                            class="text-[8px] font-bold text-red-400 uppercase tracking-wide leading-tight">Failed</span>
+
+                                        <!-- Show error text if only 1 child -->
+                                        <span v-if="item.children.length === 1 && child.failed_reason"
+                                            class="text-[8px] text-red-300/70 mt-1 line-clamp-3 leading-tight">
+                                            {{ child.failed_reason }}
+                                        </span>
+
+                                        <!-- Delete Persistent for failed child -->
+                                        <div class="absolute top-0 right-0 p-1 z-10">
+                                            <Button icon="pi pi-trash" size="small"
+                                                class="!w-5 !h-5 !rounded-full !bg-red-500/20 !border-none !text-red-400 !text-[8px] hover:!bg-red-500 hover:!text-white pointer-events-auto"
+                                                @click.stop="deleteGeneration(child)" />
+                                        </div>
+                                    </div>
+
+                                    <!-- Child: other -->
+                                    <div v-else class="w-full h-full flex items-center justify-center bg-slate-800">
+                                        <i class="pi pi-image text-lg opacity-20 text-slate-600"></i>
+                                    </div>
+
+                                    <!-- SUCCESS overlay per child (hover) -->
+                                    <div v-if="child.result_list && child.result_list.length > 0"
+                                        class="absolute inset-0 bg-black/60 transition-opacity duration-200 flex flex-col justify-between p-1 z-10"
+                                        :class="{ 'opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto': activeOverlayId !== child.id, 'opacity-100 pointer-events-auto': activeOverlayId === child.id }">
+
+                                        <!-- Top right: edit, album, delete -->
+                                        <div class="flex justify-end items-start gap-0.5">
+                                            <Button icon="pi pi-pencil" size="small"
+                                                class="!w-5 !h-5 !rounded-full !bg-white/20 !border-none !text-white !text-[8px] hover:!bg-violet-500"
+                                                @click.stop="useResultAsAsset(child)" />
+                                            <Button icon="pi pi-folder-plus" size="small"
+                                                class="!w-5 !h-5 !rounded-full !bg-white/20 !border-none !text-white !text-[8px] hover:!bg-violet-500"
+                                                @click.stop="openAlbumPicker(child)" />
+                                            <Button icon="pi pi-trash" size="small"
+                                                class="!w-5 !h-5 !rounded-full !bg-red-500/20 !border-none !text-red-400 !text-[8px] hover:!bg-red-500 hover:!text-white"
+                                                @click.stop="deleteGeneration(child)" />
+                                        </div>
+
+                                        <!-- Center: view button + cost -->
+                                        <div
+                                            class="flex-1 flex flex-col items-center justify-center pointer-events-none">
+                                            <span class="text-[8px] font-bold text-slate-300 font-mono mb-1">{{
+                                                child.cost }} $</span>
+                                            <Button icon="pi pi-eye" rounded text
+                                                class="!bg-black/50 !text-white !w-8 !h-8 !rounded-full hover:!bg-black/70 hover:!scale-110 transition-all pointer-events-auto !border !border-white/20"
+                                                @click.stop="openImagePreview(API_URL + '/assets/' + child.result_list[0])" />
+                                        </div>
+
+                                        <!-- Bottom: reuse prompt + reuse assets -->
+                                        <div class="flex gap-0.5">
+                                            <Button icon="pi pi-comment" size="small"
+                                                class="!w-5 !h-5 flex-1 !bg-white/10 !border-white/10 !text-slate-200 !text-[8px] hover:!bg-white/20"
+                                                @click.stop="reusePrompt(child)" />
+                                            <Button icon="pi pi-images" size="small"
+                                                class="!w-5 !h-5 flex-1 !bg-white/10 !border-white/10 !text-slate-200 !text-[8px] hover:!bg-white/20"
+                                                @click.stop="reuseAsset(child)" />
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </template>
+
+                        <!-- ============================================ -->
+                        <!-- SINGLE GENERATION (full slot)                -->
+                        <!-- ============================================ -->
+                        <template v-else>
+                            <div class="w-full h-full relative group" @click="toggleMobileOverlay(item.id)">
+
+                                <!-- SUCCESS: image -->
+                                <img v-if="item.result_list && item.result_list.length > 0"
+                                    :src="API_URL + '/assets/' + item.result_list[0] + '?thumbnail=true'"
+                                    class="w-full h-full object-cover cursor-pointer"
+                                    @click.stop="openImagePreview(API_URL + '/assets/' + item.result_list[0])" />
+
+                                <!-- FAILED: error display -->
+                                <div v-else-if="item.status === 'failed'"
+                                    class="w-full h-full flex flex-col items-center justify-between p-3 text-center bg-red-500/10 border border-red-500/20 relative group">
+
+                                    <!-- Top Right: Delete (Persistent) -->
+                                    <div class="w-full flex justify-end">
+                                        <Button icon="pi pi-trash" v-tooltip.right="'Delete'"
+                                            class="!w-6 !h-6 !rounded-full !bg-red-500/20 !border-none !text-red-400 text-[10px] hover:!bg-red-500 hover:!text-white z-10"
+                                            @click.stop="deleteGeneration(item)" />
+                                    </div>
+
+                                    <!-- Center: Error Info -->
+                                    <div class="flex flex-col items-center justify-center flex-1">
+                                        <i class="pi pi-times-circle text-red-500 text-2xl mb-1"></i>
+                                        <span
+                                            class="text-[10px] font-bold text-red-400 uppercase tracking-wide">Failed</span>
+                                        <span v-if="item.failed_reason"
+                                            class="text-[8px] text-red-300/70 mt-1 line-clamp-3 leading-tight"
+                                            v-tooltip.top="item.failed_reason">{{ item.failed_reason }}</span>
+                                    </div>
+
+                                    <!-- Bottom: Reuse Buttons (Persistent) -->
+                                    <div class="w-full flex gap-1 z-10">
+                                        <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(item)" />
+                                        <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(item)" />
+                                    </div>
+                                </div>
+
+                                <!-- PROCESSING -->
+                                <div v-else-if="['processing', 'starting', 'running'].includes(item.status)"
+                                    class="w-full h-full flex flex-col items-center justify-center relative overflow-hidden bg-slate-800/50 border border-violet-500/20">
+                                    <div
+                                        class="absolute inset-0 bg-gradient-to-tr from-violet-500/5 via-violet-500/10 to-cyan-500/5 animate-pulse">
+                                    </div>
+                                    <div
+                                        class="absolute inset-0 -translate-x-full animate-[shimmer_2s_infinite] bg-gradient-to-r from-transparent via-white/5 to-transparent">
+                                    </div>
+                                    <i class="pi pi-spin pi-spinner text-violet-500 text-xl mb-2 relative z-10"></i>
+                                    <span class="text-[10px] text-violet-300/70 relative z-10 capitalize">{{ item.status
+                                    }}...</span>
+                                    <span v-if="item.progress"
+                                        class="text-[9px] text-violet-400/60 font-mono mt-1 relative z-10">{{
+                                            item.progress }}%</span>
+                                </div>
+
+                                <!-- EMPTY -->
+                                <div v-else
+                                    class="w-full h-full flex items-center justify-center text-slate-600 bg-slate-800">
                                     <i class="pi pi-image text-4xl opacity-20"></i>
                                 </div>
 
-                        <div class="absolute inset-0 bg-black/60 transition-opacity duration-200 flex flex-col justify-between p-2"
-                            :class="{ 'opacity-0 group-hover:opacity-100': activeOverlayId !== gen.id, 'opacity-100': activeOverlayId === gen.id }">
+                                <!-- HOVER OVERLAY (for successful single gen state only) -->
+                                <div v-if="item.result_list && item.result_list.length > 0"
+                                    class="absolute inset-0 bg-black/60 transition-opacity duration-200 flex flex-col justify-between p-2 z-10"
+                                    :class="{ 'opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto': activeOverlayId !== item.id, 'opacity-100 pointer-events-auto': activeOverlayId === item.id }">
 
+                                    <!-- Top Right: buttons -->
                                     <div
-                                class="flex justify-between items-start translate-y-[-10px] group-hover:translate-y-0 transition-transform duration-200 w-full z-10">
-                                <Button icon="pi pi-trash" v-tooltip.right="'Delete'"
-                                    class="!w-6 !h-6 !rounded-full !bg-red-500/20 !border-none !text-red-400 text-[10px] hover:!bg-red-500 hover:!text-white"
-                                    @click.stop="deleteGeneration(gen)" />
-
-                                <div class="flex flex-col items-center gap-0.5 pointer-events-none">
-                                    <span class="text-[10px] font-bold text-slate-300 font-mono tracking-wider">{{
-                                        gen.cost }} $</span>
-                                    <span v-if="gen.execution_time_seconds"
-                                        class="text-[8px] text-slate-500 font-mono">{{
-                                            gen.execution_time_seconds.toFixed(1) }}s</span>
-                                </div>
-
+                                        class="flex justify-end items-start translate-y-[-10px] group-hover:translate-y-0 transition-transform duration-200 w-full z-10">
                                         <div class="flex gap-1">
-                                    <Button v-if="gen.result_list && gen.result_list.length > 0" icon="pi pi-pencil"
-                                        v-tooltip.left="'Edit (Use Result)'"
+                                            <Button v-if="item.result_list && item.result_list.length > 0"
+                                                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)" />
+                                                @click.stop="useResultAsAsset(item)" />
                                             <Button icon="pi pi-folder-plus" v-tooltip.left="'Add to Album'"
                                                 class="!w-6 !h-6 !rounded-full !bg-white/20 !border-none !text-white text-[10px] hover:!bg-violet-500"
-                                        @click.stop="openAlbumPicker(gen)" />
+                                                @click.stop="openAlbumPicker(item)" />
+                                            <Button icon="pi pi-trash" v-tooltip.left="'Delete'"
+                                                class="!w-6 !h-6 !rounded-full !bg-red-500/20 !border-none !text-red-400 text-[10px] hover:!bg-red-500 hover:!text-white"
+                                                @click.stop="deleteGeneration(item)" />
                                         </div>
                                     </div>
 
-                            <!-- Centered View Button -->
-                            <div v-if="gen.result_list && gen.result_list.length > 0"
-                                class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none">
+                                    <!-- Center: View button + Cost/Time -->
+                                    <div
+                                        class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none z-0">
+                                        <!-- Cost & Time -->
+                                        <div class="flex flex-col items-center gap-0.5 mb-2 pointer-events-none">
+                                            <span
+                                                class="text-[10px] font-bold text-slate-300 font-mono tracking-wider">{{
+                                                    item.cost }} $</span>
+                                            <span v-if="item.execution_time_seconds"
+                                                class="text-[8px] text-slate-500 font-mono">{{
+                                                    item.execution_time_seconds.toFixed(1) }}s</span>
+                                        </div>
+                                        <!-- View Button -->
                                         <Button icon="pi pi-eye" rounded text
                                             class="!bg-black/50 !text-white !w-12 !h-12 !rounded-full hover:!bg-black/70 hover:!scale-110 transition-all pointer-events-auto !border-2 !border-white/20"
-                                    @click.stop="openImagePreview(API_URL + '/assets/' + gen.result_list[0])" />
+                                            @click.stop="openImagePreview(API_URL + '/assets/' + item.result_list[0])" />
                                     </div>
 
+                                    <!-- Bottom: reuse buttons -->
                                     <div
                                         class="translate-y-[10px] group-hover:translate-y-0 transition-transform duration-200 z-10">
                                         <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)" />
+                                                @click.stop="reusePrompt(item)" />
                                             <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)" />
+                                                @click.stop="reuseAsset(item)" />
                                         </div>
-                                <p class="text-[10px] text-white/70 line-clamp-1 leading-tight">{{ gen.prompt }}</p>
+                                        <p class="text-[10px] text-white/70 line-clamp-1 leading-tight">{{ item.prompt
+                                        }}</p>
                                     </div>
                                 </div>
                             </div>
+                        </template>
+                    </div>
                 </div>
 
                 <div v-else-if="!isSubmitting && historyGenerations.length === 0"
@@ -750,7 +1014,7 @@ const confirmAddToAlbum = async () => {
                             </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" />
+                                class="w-full bg-slate-800 !text-[16px] 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>
 
@@ -790,7 +1054,8 @@ const confirmAddToAlbum = async () => {
                                     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
+                                        class="text-xs text-slate-300 cursor-pointer select-none">Use
+                                        Character
                                         Photo</label>
                                 </div>
                             </div>
@@ -801,7 +1066,8 @@ const confirmAddToAlbum = async () => {
                                 <div @click="openAssetPicker"
                                     class="w-full bg-slate-800 border border-white/10 rounded-xl p-3 min-h-[46px] cursor-pointer hover:bg-slate-700/50 transition-colors flex flex-wrap gap-2">
                                     <span v-if="selectedAssets.length === 0"
-                                        class="text-slate-400 text-sm py-0.5">Select Assets</span>
+                                        class="text-slate-400 text-sm py-0.5">Select
+                                        Assets</span>
                                     <div v-for="asset in selectedAssets" :key="asset.id"
                                         class="px-2 py-1 bg-violet-600/30 border border-violet-500/30 text-violet-200 text-xs rounded-md flex items-center gap-2 animate-in fade-in zoom-in duration-200"
                                         @click.stop>
@@ -834,6 +1100,20 @@ const confirmAddToAlbum = async () => {
                             </div>
                         </div>
 
+                        <!-- Generation Count -->
+                        <div class="flex flex-col gap-2">
+                            <label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Count</label>
+                            <div class="flex items-center gap-2">
+                                <div class="flex-1 flex bg-slate-800 rounded-xl border border-white/10 overflow-hidden">
+                                    <button v-for="n in 4" :key="n" @click="generationCount = n"
+                                        class="flex-1 py-2 text-sm font-bold transition-all"
+                                        :class="generationCount === n ? 'bg-violet-600 text-white' : 'text-slate-400 hover:text-white hover:bg-white/5'">
+                                        {{ n }}
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+
                         <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" />
@@ -870,13 +1150,41 @@ const confirmAddToAlbum = async () => {
 
 
         <Dialog v-model:visible="isImagePreviewVisible" modal dismissableMask
-            :style="{ width: '90vw', maxWidth: '1000px', background: 'transparent', boxShadow: 'none' }"
+            :style="{ width: '95vw', maxWidth: '1100px', 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">
+            <div class="relative flex items-center justify-center" @click.self="isImagePreviewVisible = false">
+
+                <!-- Previous Button -->
+                <Button v-if="allPreviewImages.length > 1" icon="pi pi-chevron-left" @click.stop="navigatePreview(-1)"
+                    rounded text
+                    class="!absolute left-2 top-1/2 -translate-y-1/2 z-20 !text-white !bg-black/50 hover:!bg-black/70 !w-12 !h-12 !rounded-full !border !border-white/20 backdrop-blur-sm transition-all hover:!scale-110" />
+
+                <!-- Image -->
                 <img v-if="previewImage" :src="previewImage.url"
-                    class="max-w-full max-h-[85vh] object-contain rounded-xl shadow-2xl" />
+                    class="max-w-full max-h-[85vh] object-contain rounded-xl shadow-2xl select-none"
+                    draggable="false" />
+
+                <!-- Next Button -->
+                <Button v-if="allPreviewImages.length > 1" icon="pi pi-chevron-right" @click.stop="navigatePreview(1)"
+                    rounded text
+                    class="!absolute right-2 top-1/2 -translate-y-1/2 z-20 !text-white !bg-black/50 hover:!bg-black/70 !w-12 !h-12 !rounded-full !border !border-white/20 backdrop-blur-sm transition-all hover:!scale-110" />
+
+                <!-- Close Button -->
                 <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" />
+                    class="!absolute -top-4 -right-4 z-20 !text-white !bg-black/50 hover:!bg-black/70 !w-10 !h-10" />
+
+                <!-- Counter -->
+                <div v-if="allPreviewImages.length > 1"
+                    class="absolute bottom-4 left-1/2 -translate-x-1/2 z-20 bg-black/60 backdrop-blur-sm text-white text-sm font-mono px-4 py-1.5 rounded-full border border-white/10">
+                    {{ previewIndex + 1 }} / {{ allPreviewImages.length }}
+                </div>
+
+                <!-- Prompt (click to copy) -->
+                <div v-if="previewImage?.prompt"
+                    class="absolute bottom-14 left-1/2 -translate-x-1/2 z-20 bg-black/60 backdrop-blur-sm text-white/80 text-xs px-4 py-2 rounded-xl border border-white/10 max-w-md text-center line-clamp-2 cursor-pointer hover:bg-black/80 hover:border-white/20 transition-all"
+                    v-tooltip.top="'Click to copy'" @click.stop="navigator.clipboard.writeText(previewImage.prompt)">
+                    {{ previewImage.prompt }}
+                </div>
             </div>
         </Dialog>
 

src/views/ImageGenerationView.vue

@@ -211,8 +211,15 @@ const handleGenerate = async () => {
 
         const response = await aiService.runGeneration(payload)
 
-        if (response && response.id) {
-            pollStatus(response.id)
+        let genId = null
+        if (response && response.generations && response.generations.length > 0) {
+            genId = response.generations[0].id
+        } else if (response && response.id) {
+            genId = response.id
+        }
+
+        if (genId) {
+            pollStatus(genId)
         } else {
             // Fallback immediate response
             generatedResult.value = response