feat: Implement multiple image generation and enhance image preview with navigation and grouping.
This commit is contained in:
@@ -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()) {
|
||||
|
||||
@@ -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)
|
||||
@@ -81,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))
|
||||
|
||||
@@ -107,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) {
|
||||
@@ -117,7 +120,7 @@ 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 })
|
||||
|
||||
@@ -260,38 +263,36 @@ 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.
|
||||
// Response can be a single generation or an array of grouped generations
|
||||
const generations = Array.isArray(response) ? response : [response]
|
||||
|
||||
const newGen = {
|
||||
id: response.id,
|
||||
prompt: prompt.value,
|
||||
status: 'starting',
|
||||
created_at: new Date().toISOString(),
|
||||
// Add other fields as necessary for display
|
||||
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,
|
||||
}
|
||||
|
||||
historyGenerations.value.unshift(newGen)
|
||||
historyTotal.value++
|
||||
|
||||
pollGeneration(gen.id)
|
||||
}
|
||||
|
||||
// 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 = ''
|
||||
}
|
||||
|
||||
// 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
|
||||
@@ -389,14 +390,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
|
||||
@@ -648,97 +733,179 @@ 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>
|
||||
</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 -->
|
||||
<!-- GROUPED GENERATION -->
|
||||
<template v-if="item.isGroup">
|
||||
<!-- Group badge -->
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-tr from-violet-500/5 via-violet-500/10 to-cyan-500/5 animate-pulse">
|
||||
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>
|
||||
|
||||
<!-- 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>
|
||||
<!-- All children done or mixed states -->
|
||||
<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)">
|
||||
|
||||
<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>
|
||||
</div>
|
||||
<!-- 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" />
|
||||
|
||||
<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>
|
||||
<!-- 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>
|
||||
<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-sm relative z-10"></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 }">
|
||||
<!-- Child: failed -->
|
||||
<div v-else-if="child.status === 'failed'"
|
||||
class="w-full h-full flex items-center justify-center bg-red-500/10">
|
||||
<i class="pi pi-times-circle text-red-500"></i>
|
||||
</div>
|
||||
|
||||
<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)" />
|
||||
<!-- 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>
|
||||
|
||||
<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>
|
||||
<!-- Individual child overlay -->
|
||||
<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"
|
||||
:class="{ 'opacity-0 group-hover:opacity-100': activeOverlayId !== child.id, 'opacity-100': activeOverlayId === child.id }">
|
||||
|
||||
<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)'"
|
||||
class="!w-6 !h-6 !rounded-full !bg-white/20 !border-none !text-white text-[10px] hover:!bg-violet-500"
|
||||
@click.stop="useResultAsAsset(gen)" />
|
||||
<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)" />
|
||||
<div class="flex justify-between items-start 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"
|
||||
@click.stop="deleteGeneration(child)" />
|
||||
<div class="flex 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)" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
|
||||
<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>
|
||||
|
||||
<div class="z-10">
|
||||
<span class="text-[8px] font-bold text-slate-300 font-mono">{{ child.cost }}
|
||||
$</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 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">
|
||||
<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])" />
|
||||
</div>
|
||||
<!-- SINGLE GENERATION -->
|
||||
<template v-else>
|
||||
<div class="w-full h-full relative group" @click="toggleMobileOverlay(item.id)">
|
||||
<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])" />
|
||||
|
||||
<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)" />
|
||||
<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 v-else-if="item.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="item.failed_reason"
|
||||
class="text-[8px] text-red-300/70 mt-1 line-clamp-2 leading-tight"
|
||||
v-tooltip.top="item.failed_reason">{{ item.failed_reason }}</span>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<!-- Single generation overlay -->
|
||||
<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 !== item.id, 'opacity-100': activeOverlayId === item.id }">
|
||||
|
||||
<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(item)" />
|
||||
|
||||
<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">{{
|
||||
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>
|
||||
|
||||
<div class="flex gap-1">
|
||||
<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(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(item)" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Centered View Button -->
|
||||
<div v-if="item.result_list && item.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">
|
||||
<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/' + item.result_list[0])" />
|
||||
</div>
|
||||
|
||||
<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(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>
|
||||
<p class="text-[10px] text-white/70 line-clamp-1 leading-tight">{{ item.prompt
|
||||
}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-[10px] text-white/70 line-clamp-1 leading-tight">{{ gen.prompt }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -785,7 +952,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>
|
||||
|
||||
@@ -871,6 +1038,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" />
|
||||
@@ -907,13 +1088,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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user