likes
This commit is contained in:
181
src/components/GenerationImage.vue
Normal file
181
src/components/GenerationImage.vue
Normal file
@@ -0,0 +1,181 @@
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import Button from 'primevue/button'
|
||||
|
||||
const props = defineProps({
|
||||
generation: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
apiUrl: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
isSelectMode: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isSelected: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showNsfwGlobal: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
activeOverlayId: {
|
||||
type: [String, Number],
|
||||
default: null
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['toggle-select', 'open-preview', 'toggle-like', 'delete', 'reuse-prompt', 'reuse-asset', 'use-result', 'toggle-overlay'])
|
||||
|
||||
const isTemporarilyUnblurred = ref(false)
|
||||
|
||||
const isBlurred = computed(() => {
|
||||
return props.generation.nsfw && !props.showNsfwGlobal && !isTemporarilyUnblurred.value
|
||||
})
|
||||
|
||||
const toggleBlur = () => {
|
||||
isTemporarilyUnblurred.value = !isTemporarilyUnblurred.value
|
||||
}
|
||||
|
||||
const handleImageClick = (e) => {
|
||||
if (props.isSelectMode) {
|
||||
emit('toggle-select', props.generation.result_list[0])
|
||||
} else {
|
||||
if (isBlurred.value) {
|
||||
// If blurred, click might just unblur or do nothing?
|
||||
// Let's let the button handle unblur, and click opens preview if unblurred?
|
||||
// Or maybe click unblurs? Let's stick to button for unblur to be explicit.
|
||||
// But if user clicks image, maybe show preview anyway?
|
||||
// Usually blurred images shouldn't be previewed full size unless unblurred.
|
||||
// Let's allow preview, but maybe preview also needs to handle blur?
|
||||
// For now, let's just open preview. The preview modal might need its own blur logic or just show it.
|
||||
// Let's assume preview shows it.
|
||||
emit('open-preview', props.apiUrl + '/assets/' + props.generation.result_list[0])
|
||||
} else {
|
||||
emit('open-preview', props.apiUrl + '/assets/' + props.generation.result_list[0])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleOverlayClick = () => {
|
||||
emit('toggle-overlay', props.generation.id)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full h-full relative group" @click="handleOverlayClick">
|
||||
|
||||
<!-- Image -->
|
||||
<div class="w-full h-full overflow-hidden relative">
|
||||
<img v-if="generation.result_list && generation.result_list.length > 0"
|
||||
:src="apiUrl + '/assets/' + generation.result_list[0] + '?thumbnail=true'"
|
||||
class="w-full h-full object-cover transition-all duration-300"
|
||||
:class="{ 'blur-xl scale-110': isBlurred, 'cursor-pointer': !isSelectMode }"
|
||||
@click.stop="handleImageClick"
|
||||
/>
|
||||
|
||||
<!-- NSFW Badge / Unblur Button -->
|
||||
<div v-if="isBlurred" class="absolute inset-0 flex flex-col items-center justify-center z-20 pointer-events-none">
|
||||
<div class="bg-black/60 backdrop-blur-md px-3 py-1.5 rounded-full border border-white/10 flex items-center gap-2 pointer-events-auto cursor-pointer hover:bg-black/80 transition-colors" @click.stop="toggleBlur">
|
||||
<i class="pi pi-eye-slash text-red-400 text-xs"></i>
|
||||
<span class="text-[10px] font-bold text-red-400 uppercase tracking-wider">NSFW</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Liked badge -->
|
||||
<div v-if="generation.is_liked && !isBlurred"
|
||||
class="absolute top-2 right-2 z-20 w-6 h-6 rounded-full bg-pink-500 shadow-lg flex items-center justify-center border border-pink-400">
|
||||
<i class="pi pi-heart-fill text-white text-[10px]"></i>
|
||||
</div>
|
||||
|
||||
<!-- FAILED state -->
|
||||
<div v-if="generation.status === 'failed'"
|
||||
class="absolute inset-0 flex flex-col items-center justify-between p-3 text-center bg-red-500/10 border border-red-500/20">
|
||||
<div class="w-full flex justify-end">
|
||||
<Button icon="pi pi-trash" 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="emit('delete', generation)" />
|
||||
</div>
|
||||
<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="generation.failed_reason" class="text-[8px] text-red-300/70 mt-1 line-clamp-3 leading-tight"
|
||||
v-tooltip.top="generation.failed_reason">{{ generation.failed_reason }}</span>
|
||||
</div>
|
||||
<div class="w-full flex gap-1 z-10">
|
||||
<Button icon="pi pi-comment" class="!w-6 !h-6 flex-1 !bg-white/10 !border-white/10 !text-slate-200 text-[10px] hover:!bg-white/20"
|
||||
@click.stop="emit('reuse-prompt', generation)" />
|
||||
<Button icon="pi pi-images" class="!w-6 !h-6 flex-1 !bg-white/10 !border-white/10 !text-slate-200 text-[10px] hover:!bg-white/20"
|
||||
@click.stop="emit('reuse-asset', generation)" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PROCESSING state -->
|
||||
<div v-else-if="['processing', 'starting', 'running'].includes(generation.status)"
|
||||
class="absolute inset-0 flex flex-col items-center justify-center 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>
|
||||
<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">{{ generation.status }}...</span>
|
||||
</div>
|
||||
|
||||
<!-- HOVER OVERLAY (Success & Not Blurred) -->
|
||||
<div v-if="generation.result_list && generation.result_list.length > 0 && !isBlurred"
|
||||
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 !== generation.id, 'opacity-100 pointer-events-auto': activeOverlayId === generation.id }">
|
||||
|
||||
<!-- Top Right -->
|
||||
<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 :icon="generation.is_liked ? 'pi pi-heart-fill' : 'pi pi-heart'"
|
||||
class="!w-6 !h-6 !rounded-full !border-none !text-[10px] transition-colors"
|
||||
:class="generation.is_liked ? '!bg-pink-500 !text-white' : '!bg-white/20 !text-white hover:!bg-pink-500'"
|
||||
@click.stop="emit('toggle-like', generation)" />
|
||||
<Button icon="pi pi-pencil"
|
||||
class="!w-6 !h-6 !rounded-full !bg-white/20 !border-none !text-white text-[10px] hover:!bg-violet-500"
|
||||
@click.stop="emit('use-result', generation)" />
|
||||
<Button icon="pi pi-trash"
|
||||
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="emit('delete', generation)" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Center -->
|
||||
<div class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none z-0">
|
||||
<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">{{ generation.cost }} $</span>
|
||||
<span v-if="generation.execution_time_seconds" class="text-[8px] text-slate-500 font-mono">{{ generation.execution_time_seconds.toFixed(1) }}s</span>
|
||||
</div>
|
||||
<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="emit('open-preview', apiUrl + '/assets/' + generation.result_list[0])" />
|
||||
</div>
|
||||
|
||||
<!-- Bottom -->
|
||||
<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" class="!w-6 !h-6 flex-1 !bg-white/10 !border-white/10 !text-slate-200 text-[10px] hover:!bg-white/20"
|
||||
@click.stop="emit('reuse-prompt', generation)" />
|
||||
<Button icon="pi pi-images" class="!w-6 !h-6 flex-1 !bg-white/10 !border-white/10 !text-slate-200 text-[10px] hover:!bg-white/20"
|
||||
@click.stop="emit('reuse-asset', generation)" />
|
||||
</div>
|
||||
<p class="text-[10px] text-white/70 line-clamp-1 leading-tight">{{ generation.prompt }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Select mode checkbox overlay -->
|
||||
<div v-if="isSelectMode && generation.result_list && generation.result_list.length > 0"
|
||||
class="absolute inset-0 z-30 cursor-pointer"
|
||||
@click.stop="emit('toggle-select', generation.result_list[0])">
|
||||
<div class="absolute top-2 left-2 w-6 h-6 rounded-lg flex items-center justify-center transition-all"
|
||||
:class="isSelected ? 'bg-violet-600 text-white' : 'bg-black/40 border border-white/30 text-transparent hover:border-white/60'">
|
||||
<i class="pi pi-check" style="font-size: 12px"></i>
|
||||
</div>
|
||||
<div v-if="isSelected" class="absolute inset-0 bg-violet-600/20 pointer-events-none"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -12,12 +12,14 @@ import Checkbox from 'primevue/checkbox'
|
||||
import Dropdown from 'primevue/dropdown'
|
||||
import DatePicker from 'primevue/datepicker'
|
||||
import Tag from 'primevue/tag'
|
||||
import InputSwitch from 'primevue/inputswitch'
|
||||
|
||||
import Skeleton from 'primevue/skeleton'
|
||||
import {useAlbumStore} from '../stores/albums'
|
||||
import {useToast} from 'primevue/usetoast'
|
||||
import Toast from 'primevue/toast'
|
||||
import GenerationPreviewModal from '../components/GenerationPreviewModal.vue'
|
||||
import GenerationImage from '../components/GenerationImage.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const API_URL = import.meta.env.VITE_API_URL
|
||||
@@ -161,6 +163,13 @@ const isImprovingPrompt = ref(false)
|
||||
const previousPrompt = ref('')
|
||||
let _savedEnvironmentId = null
|
||||
|
||||
// NSFW Toggle
|
||||
const showNsfwGlobal = ref(localStorage.getItem('show_nsfw_global') === 'true')
|
||||
|
||||
watch(showNsfwGlobal, (val) => {
|
||||
localStorage.setItem('show_nsfw_global', val)
|
||||
})
|
||||
|
||||
const loadEnvironments = async (charId) => {
|
||||
if (!charId) {
|
||||
environments.value = []
|
||||
@@ -923,111 +932,24 @@ const confirmAddToAlbum = async () => {
|
||||
<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" />
|
||||
class="relative group overflow-hidden">
|
||||
|
||||
<!-- Child: Liked badge -->
|
||||
<div v-if="child.is_liked"
|
||||
class="absolute top-1 right-1 z-20 w-4 h-4 rounded-full bg-pink-500 shadow-lg flex items-center justify-center border border-pink-400">
|
||||
<i class="pi pi-heart-fill text-white text-[6px]"></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>
|
||||
|
||||
<!-- 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, delete -->
|
||||
<div class="flex justify-end items-start gap-0.5">
|
||||
<Button :icon="child.is_liked ? 'pi pi-heart-fill' : 'pi pi-heart'" size="small"
|
||||
class="!w-5 !h-5 !rounded-full !border-none !text-[8px] transition-colors"
|
||||
:class="child.is_liked ? '!bg-pink-500 !text-white' : '!bg-white/20 !text-white hover:!bg-pink-500'"
|
||||
@click.stop="toggleLike(child)" />
|
||||
<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-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>
|
||||
|
||||
<!-- Selection overlay for group children -->
|
||||
<div v-if="isSelectMode" class="absolute inset-0 z-30 pointer-events-none">
|
||||
<div class="absolute top-1 left-1 z-30 flex flex-col gap-0.5 pointer-events-auto">
|
||||
<template v-for="child in item.children" :key="'chk-'+child.id">
|
||||
<div v-if="child.result_list && child.result_list.length > 0"
|
||||
@click.stop="toggleImageSelection(child.result_list[0])"
|
||||
class="w-5 h-5 rounded-md flex items-center justify-center cursor-pointer transition-all"
|
||||
:class="selectedAssetIds.has(child.result_list[0]) ? 'bg-violet-600 text-white' : 'bg-black/40 border border-white/30 text-transparent'">
|
||||
<i class="pi pi-check" style="font-size: 10px"></i>
|
||||
</div>
|
||||
</template>
|
||||
<GenerationImage
|
||||
:generation="child"
|
||||
:api-url="API_URL"
|
||||
:is-select-mode="isSelectMode"
|
||||
:is-selected="selectedAssetIds.has(child.result_list?.[0])"
|
||||
:show-nsfw-global="showNsfwGlobal"
|
||||
:active-overlay-id="activeOverlayId"
|
||||
@toggle-select="toggleImageSelection"
|
||||
@open-preview="openImagePreview"
|
||||
@toggle-like="toggleLike"
|
||||
@delete="deleteGeneration"
|
||||
@reuse-prompt="reusePrompt"
|
||||
@reuse-asset="reuseAsset"
|
||||
@use-result="useResultAsAsset"
|
||||
@toggle-overlay="toggleMobileOverlay"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1036,144 +958,22 @@ const confirmAddToAlbum = async () => {
|
||||
<!-- 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="isSelectMode ? toggleImageSelection(item.result_list[0]) : openImagePreview(API_URL + '/assets/' + item.result_list[0])" />
|
||||
|
||||
<!-- Liked badge for single item -->
|
||||
<div v-if="item.is_liked"
|
||||
class="absolute top-2 right-2 z-20 w-6 h-6 rounded-full bg-pink-500 shadow-lg flex items-center justify-center border border-pink-400">
|
||||
<i class="pi pi-heart-fill text-white text-[10px]"></i>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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-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 :icon="item.is_liked ? 'pi pi-heart-fill' : 'pi pi-heart'"
|
||||
class="!w-6 !h-6 !rounded-full !border-none !text-[10px] transition-colors"
|
||||
:class="item.is_liked ? '!bg-pink-500 !text-white' : '!bg-white/20 !text-white hover:!bg-pink-500'"
|
||||
@click.stop="toggleLike(item)" />
|
||||
<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-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>
|
||||
|
||||
<!-- 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/' + 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(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>
|
||||
|
||||
<!-- Select mode checkbox overlay -->
|
||||
<div v-if="isSelectMode && item.result_list && item.result_list.length > 0"
|
||||
class="absolute inset-0 z-20 cursor-pointer"
|
||||
@click.stop="toggleImageSelection(item.result_list[0])">
|
||||
<div class="absolute top-2 left-2 w-6 h-6 rounded-lg flex items-center justify-center transition-all"
|
||||
:class="selectedAssetIds.has(item.result_list[0]) ? 'bg-violet-600 text-white' : 'bg-black/40 border border-white/30 text-transparent hover:border-white/60'">
|
||||
<i class="pi pi-check" style="font-size: 12px"></i>
|
||||
</div>
|
||||
<div v-if="selectedAssetIds.has(item.result_list[0])"
|
||||
class="absolute inset-0 bg-violet-600/20 pointer-events-none"></div>
|
||||
</div>
|
||||
</div>
|
||||
<GenerationImage
|
||||
:generation="item"
|
||||
:api-url="API_URL"
|
||||
:is-select-mode="isSelectMode"
|
||||
:is-selected="selectedAssetIds.has(item.result_list?.[0])"
|
||||
:show-nsfw-global="showNsfwGlobal"
|
||||
:active-overlay-id="activeOverlayId"
|
||||
@toggle-select="toggleImageSelection"
|
||||
@open-preview="openImagePreview"
|
||||
@toggle-like="toggleLike"
|
||||
@delete="deleteGeneration"
|
||||
@reuse-prompt="reusePrompt"
|
||||
@reuse-asset="reuseAsset"
|
||||
@use-result="useResultAsAsset"
|
||||
@toggle-overlay="toggleMobileOverlay"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1393,6 +1193,14 @@ const confirmAddToAlbum = async () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- NSFW Toggle -->
|
||||
<div class="flex flex-col gap-2 bg-slate-800/50 p-3 rounded-xl border border-white/5">
|
||||
<div class="flex items-center justify-between">
|
||||
<label class="text-xs text-slate-300 cursor-pointer">Show NSFW</label>
|
||||
<InputSwitch v-model="showNsfwGlobal" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-auto">
|
||||
<Button :label="isSubmitting ? 'Starting...' : 'Generate'"
|
||||
:icon="isSubmitting ? 'pi pi-spin pi-spinner' : 'pi pi-sparkles'"
|
||||
|
||||
@@ -27,7 +27,9 @@ import ConfirmDialog from 'primevue/confirmdialog'
|
||||
import InputText from 'primevue/inputtext'
|
||||
import DatePicker from 'primevue/datepicker'
|
||||
import Tag from 'primevue/tag'
|
||||
import InputSwitch from 'primevue/inputswitch'
|
||||
import GenerationPreviewModal from '../components/GenerationPreviewModal.vue'
|
||||
import GenerationImage from '../components/GenerationImage.vue'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
@@ -98,6 +100,13 @@ const previousPrompt = ref('')
|
||||
let _savedCharacterId = null
|
||||
let _savedEnvironmentId = null
|
||||
|
||||
// NSFW Toggle
|
||||
const showNsfwGlobal = ref(localStorage.getItem('show_nsfw_global') === 'true')
|
||||
|
||||
watch(showNsfwGlobal, (val) => {
|
||||
localStorage.setItem('show_nsfw_global', val)
|
||||
})
|
||||
|
||||
const loadEnvironments = async (charId) => {
|
||||
if (!charId) {
|
||||
environments.value = []
|
||||
@@ -1364,7 +1373,7 @@ watch(viewMode, (v) => {
|
||||
class="flex-shrink-0 flex items-center gap-2 px-2 py-1.5 rounded-lg border-2 transition-all cursor-pointer group bg-slate-800/40"
|
||||
:class="[
|
||||
(selectedEnvironment?.id === (env.id || env._id) || selectedEnvironment?._id === (env.id || env._id))
|
||||
? 'border-violet-500 bg-violet-500/10 shadow-[0_0_15px_rgba(124,58,237,0.1)]'
|
||||
? 'border-violet-500 bg-violet-500/10 shadow-[0_0_15px_rgba(124,58,237,0.15)]'
|
||||
: 'border-white/5 hover:border-white/20'
|
||||
]"
|
||||
>
|
||||
@@ -1435,6 +1444,14 @@ watch(viewMode, (v) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- NSFW Toggle -->
|
||||
<div class="flex flex-col gap-1 bg-slate-800/50 p-2 rounded-lg border border-white/5">
|
||||
<div class="flex items-center justify-between">
|
||||
<label class="text-xs text-slate-300 cursor-pointer">Show NSFW</label>
|
||||
<InputSwitch v-model="showNsfwGlobal" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-auto">
|
||||
<Button :label="isSubmitting ? 'Starting...' : 'Generate'"
|
||||
:icon="isSubmitting ? 'pi pi-spin pi-spinner' : 'pi pi-sparkles'"
|
||||
|
||||
Reference in New Issue
Block a user