296 lines
13 KiB
Vue
296 lines
13 KiB
Vue
<script setup>
|
|
import { ref, onMounted, computed } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { useAlbumStore } from '../stores/albums'
|
|
import { albumService } from '../services/albumService'
|
|
import { aiService } from '../services/aiService'
|
|
import { storeToRefs } from 'pinia'
|
|
import Skeleton from 'primevue/skeleton'
|
|
import Button from 'primevue/button'
|
|
import ConfirmDialog from 'primevue/confirmdialog'
|
|
import { useConfirm } from 'primevue/useconfirm'
|
|
import Dialog from 'primevue/dialog'
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const albumStore = useAlbumStore()
|
|
const { currentAlbum, loading } = storeToRefs(albumStore)
|
|
const confirm = useConfirm()
|
|
|
|
const generations = ref([])
|
|
const loadingGenerations = ref(false)
|
|
|
|
// Gen Picker State
|
|
const isGenerationPickerVisible = ref(false)
|
|
const availableGenerations = ref([])
|
|
const loadingAvailableGenerations = ref(false)
|
|
const selectedGenerations = ref([])
|
|
const API_URL = import.meta.env.VITE_API_URL
|
|
|
|
onMounted(async () => {
|
|
const id = route.params.id
|
|
if (id) {
|
|
await albumStore.fetchAlbum(id)
|
|
if (currentAlbum.value) {
|
|
fetchGenerations(id)
|
|
}
|
|
}
|
|
})
|
|
|
|
const fetchGenerations = async (albumId) => {
|
|
loadingGenerations.value = true
|
|
try {
|
|
const response = await albumService.getAlbumGenerations(albumId, 100) // Increase limit for now
|
|
generations.value = response.data.generations || [] // Adjust based on actual API response structure
|
|
// If API returns list directly:
|
|
if (Array.isArray(response.data)) {
|
|
generations.value = response.data
|
|
}
|
|
} catch (e) {
|
|
console.error('Failed to load generations', e)
|
|
} finally {
|
|
loadingGenerations.value = false
|
|
}
|
|
}
|
|
|
|
const confirmDelete = () => {
|
|
confirm.require({
|
|
message: 'Are you sure you want to delete this album? This action cannot be undone.',
|
|
header: 'Delete Album',
|
|
icon: 'pi pi-exclamation-triangle',
|
|
acceptClass: 'p-button-danger',
|
|
accept: async () => {
|
|
await albumStore.deleteAlbum(currentAlbum.value.id)
|
|
router.push('/albums')
|
|
}
|
|
})
|
|
}
|
|
|
|
const copyPrompt = (prompt) => {
|
|
navigator.clipboard.writeText(prompt)
|
|
// Could add a toast notification here
|
|
}
|
|
|
|
// --- Generation Picker ---
|
|
const openGenerationPicker = async () => {
|
|
isGenerationPickerVisible.value = true
|
|
selectedGenerations.value = []
|
|
await loadAvailableGenerations()
|
|
}
|
|
|
|
const loadAvailableGenerations = async () => {
|
|
loadingAvailableGenerations.value = true
|
|
try {
|
|
// Fetch recent generations to add
|
|
const response = await aiService.getGenerations(50, 0)
|
|
availableGenerations.value = response.generations || []
|
|
} catch (e) {
|
|
console.error('Failed to load available generations', e)
|
|
} finally {
|
|
loadingAvailableGenerations.value = false
|
|
}
|
|
}
|
|
|
|
const toggleGenerationSelection = (gen) => {
|
|
const index = selectedGenerations.value.findIndex(g => g.id === gen.id)
|
|
if (index === -1) {
|
|
selectedGenerations.value.push(gen)
|
|
} else {
|
|
selectedGenerations.value.splice(index, 1)
|
|
}
|
|
}
|
|
|
|
const addSelectedGenerations = async () => {
|
|
if (selectedGenerations.value.length === 0) return
|
|
|
|
try {
|
|
// Add sequentially
|
|
for (const gen of selectedGenerations.value) {
|
|
await albumService.addGenerationToAlbum(currentAlbum.value.id, gen.id)
|
|
}
|
|
isGenerationPickerVisible.value = false
|
|
// Refresh album generations
|
|
await fetchGenerations(currentAlbum.value.id)
|
|
} catch (e) {
|
|
console.error('Failed to add generations to album', e)
|
|
}
|
|
}
|
|
|
|
const removeGeneration = (gen) => {
|
|
confirm.require({
|
|
message: 'Are you sure you want to remove this generation from the album?',
|
|
header: 'Remove Generation',
|
|
icon: 'pi pi-exclamation-triangle',
|
|
acceptClass: 'p-button-danger',
|
|
accept: async () => {
|
|
await albumStore.removeGenerationFromAlbum(currentAlbum.value.id, gen.id)
|
|
await fetchGenerations(currentAlbum.value.id)
|
|
}
|
|
})
|
|
}
|
|
|
|
// --- Image Preview ---
|
|
const isImagePreviewVisible = ref(false)
|
|
const previewImage = ref(null)
|
|
const openImagePreview = (url) => {
|
|
previewImage.value = { url }
|
|
isImagePreviewVisible.value = true
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col h-full p-8 overflow-y-auto text-slate-100">
|
|
<ConfirmDialog></ConfirmDialog>
|
|
|
|
<!-- Loading State -->
|
|
<div v-if="loading" class="flex flex-col gap-8">
|
|
<div class="flex justify-between items-start">
|
|
<div>
|
|
<Skeleton width="15rem" height="3rem" class="mb-4" />
|
|
<Skeleton width="20rem" height="1.5rem" />
|
|
</div>
|
|
<Skeleton width="8rem" height="2.5rem" />
|
|
</div>
|
|
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
|
<Skeleton v-for="i in 8" :key="i" height="16rem" class="rounded-xl" />
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else-if="currentAlbum">
|
|
<!-- Header -->
|
|
<header class="flex justify-between items-start mb-8 pb-8 border-b border-white/10">
|
|
<div>
|
|
<div class="flex items-center gap-4 mb-2">
|
|
<Button icon="pi pi-arrow-left" text rounded @click="router.push('/albums')"
|
|
class="!text-slate-400 hover:!text-white hover:!bg-white/10" />
|
|
<h1 class="text-4xl font-bold m-0">{{ currentAlbum.name }}</h1>
|
|
</div>
|
|
<p class="text-slate-400 text-lg ml-14 max-w-2xl">{{ currentAlbum.description }}</p>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<Button label="Add Generation" icon="pi pi-plus" text @click="openGenerationPicker" />
|
|
<Button label="Delete Album" icon="pi pi-trash" severity="danger" text @click="confirmDelete" />
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Generations Grid -->
|
|
<div v-if="loadingGenerations" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
|
<Skeleton v-for="i in 8" :key="i" height="20rem" class="rounded-xl" />
|
|
</div>
|
|
|
|
<div v-else-if="generations.length === 0"
|
|
class="flex flex-col items-center justify-center py-20 text-slate-500">
|
|
<i class="pi pi-image text-5xl mb-4 opacity-50"></i>
|
|
<p class="text-xl">No generations in this album yet.</p>
|
|
<p class="text-sm mt-2">Generate images and add them to this album!</p>
|
|
</div>
|
|
|
|
<div v-else class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
|
<!-- We need to adapt this based on actual generation object structure -->
|
|
<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 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
|
|
class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2 pointer-events-none">
|
|
<div class="pointer-events-auto flex gap-2">
|
|
<Button icon="pi pi-copy" rounded text class="!text-white hover:!bg-white/20"
|
|
v-tooltip.top="'Copy Prompt'" @click="copyPrompt(gen.prompt)" />
|
|
<Button icon="pi pi-trash" rounded text
|
|
class="!text-white hover:!bg-red-500/80 hover:!text-white"
|
|
v-tooltip.top="'Remove from Album'" @click="removeGeneration(gen)" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-3">
|
|
<p class="text-xs text-slate-400 line-clamp-2" :title="gen.prompt">
|
|
{{ gen.prompt }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else class="flex flex-col items-center justify-center h-full text-slate-400">
|
|
<i class="pi pi-exclamation-circle text-4xl mb-4 text-red-400"></i>
|
|
<p class="text-xl">Album not found</p>
|
|
<Button label="Back to Albums" class="mt-4 p-button-text" @click="router.push('/albums')" />
|
|
</div>
|
|
|
|
<Dialog v-model:visible="isGenerationPickerVisible" modal header="Add Generations"
|
|
:style="{ width: '80vw', maxWidth: '1000px' }"
|
|
:pt="{ root: { class: '!bg-slate-900 !border !border-white/10' }, header: { class: '!bg-slate-900 !border-b !border-white/5 !text-white' }, content: { class: '!bg-slate-900 !p-4' }, footer: { class: '!bg-slate-900 !border-t !border-white/5 !p-4' }, closeButton: { class: '!text-slate-400 hover:!text-white' } }">
|
|
|
|
<div class="h-[60vh] overflow-y-auto custom-scrollbar">
|
|
<div v-if="loadingAvailableGenerations" class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
|
|
<Skeleton v-for="i in 10" :key="i" height="150px" class="!bg-slate-800 rounded-xl" />
|
|
</div>
|
|
<div v-else-if="availableGenerations.length > 0"
|
|
class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
|
|
<div v-for="gen in availableGenerations" :key="gen.id" @click="toggleGenerationSelection(gen)"
|
|
class="relative aspect-[2/3] rounded-xl overflow-hidden cursor-pointer border-2 transition-all group"
|
|
: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]}`)"
|
|
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">
|
|
<i class="pi pi-image text-2xl"></i>
|
|
</div>
|
|
|
|
<div class="absolute bottom-0 left-0 right-0 p-2 bg-black/60 backdrop-blur-sm">
|
|
<p class="text-[10px] text-white line-clamp-2">{{ gen.prompt }}</p>
|
|
</div>
|
|
|
|
<!-- Checkmark -->
|
|
<div v-if="selectedGenerations.some(g => g.id === gen.id)"
|
|
class="absolute top-2 right-2 w-6 h-6 bg-violet-500 rounded-full flex items-center justify-center shadow-lg animate-in zoom-in duration-200">
|
|
<i class="pi pi-check text-white text-xs"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="flex flex-col items-center justify-center h-full text-slate-500">
|
|
<p>No generations found.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<template #footer>
|
|
<div class="flex justify-end gap-2">
|
|
<Button label="Cancel" @click="isGenerationPickerVisible = false"
|
|
class="!text-slate-300 hover:!bg-white/5" text />
|
|
<Button :label="'Add (' + selectedGenerations.length + ')'" @click="addSelectedGenerations"
|
|
class="!bg-violet-600 !border-none hover:!bg-violet-500" />
|
|
</div>
|
|
</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>
|
|
|
|
<style scoped>
|
|
.glass-panel {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
</style>
|