ai-char/ai-service-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

likes

Browse Source
This commit is contained in:
xds
2026-02-26 11:27:01 +03:00
parent dea0916f6c
commit 7d7cd25040
3 changed files with 249 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

292
src/views/FlexibleGenerationView.vue
View File

@@ -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'"