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

feat: Implement asset picker functionality and refactor history loading to refresh with new items instead of appending.

Browse Source
This commit is contained in:
xds
2026-02-08 02:15:09 +03:00
parent 2885382f1f
commit 7732856f90
1 changed files with 314 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

533
src/views/FlexibleGenerationView.vue
View File

@@ -13,6 +13,7 @@ import MultiSelect from 'primevue/multiselect'
import ProgressSpinner from 'primevue/progressspinner'
import ProgressBar from 'primevue/progressbar'
import Message from 'primevue/message'
import Skeleton from 'primevue/skeleton'
const router = useRouter()
const API_URL = import.meta.env.VITE_API_URL
@@ -21,6 +22,12 @@ const API_URL = import.meta.env.VITE_API_URL
const prompt = ref('')
const selectedCharacter = ref(null)
const selectedAssets = ref([])
// Asset Picker State
const isAssetPickerVisible = ref(false)
const assetPickerTab = ref('all') // 'all', 'uploaded', 'generated'
const modalAssets = ref([])
const isModalLoading = ref(false)
const tempSelectedAssets = ref([])
const quality = ref({ key: 'TWOK', value: '2K' })
const aspectRatio = ref({ key: "NINESIXTEEN", value: "9:16" })
const sendToTelegram = ref(false)
@@ -34,7 +41,7 @@ const characters = ref([])
const allAssets = ref([])
const historyGenerations = ref([])
const historyTotal = ref(0)
const historyRows = ref(20)
const historyRows = ref(50)
const historyFirst = ref(0)
const isSettingsVisible = ref(false)
@@ -43,7 +50,7 @@ const generationStatus = ref('')
const generationProgress = ref(0)
const generationError = ref(null)
const generatedResult = ref(null) // For immediate feedback if needed
const isLoadingMore = ref(false)
const activeOverlayId = ref(null) // For mobile tap-to-show overlay
// Options
const qualityOptions = ref([
@@ -159,31 +166,35 @@ const loadData = async () => {
}
}
const loadMoreHistory = async () => {
if (isLoadingMore.value || historyGenerations.value.length >= historyTotal.value) return
isLoadingMore.value = true
historyFirst.value += historyRows.value
const refreshHistory = async () => {
try {
const response = await aiService.getGenerations(historyRows.value, historyFirst.value)
const response = await aiService.getGenerations(historyRows.value, 0)
if (response && response.generations) {
historyGenerations.value = [...historyGenerations.value, ...response.generations]
// Update existing items and add new ones at the top
const newGenerations = []
for (const gen of response.generations) {
const existingIndex = historyGenerations.value.findIndex(g => g.id === gen.id)
if (existingIndex !== -1) {
// Update existing item in place to preserve state/reactivity
Object.assign(historyGenerations.value[existingIndex], gen)
} else {
newGenerations.push(gen)
}
}
// Add completely new items to the start of the list
if (newGenerations.length > 0) {
historyGenerations.value = [...newGenerations, ...historyGenerations.value]
}
historyTotal.value = response.total_count || historyTotal.value
}
} catch (e) {
console.error('Failed to load more history', e)
} finally {
isLoadingMore.value = false
console.error('Failed to refresh history', e)
}
}
const onScroll = (event) => {
const { scrollTop, clientHeight, scrollHeight } = event.target
if (scrollTop + clientHeight >= scrollHeight - 50) {
loadMoreHistory()
}
}
// --- Generation ---
const handleGenerate = async () => {
@@ -240,12 +251,8 @@ const pollStatus = async (id) => {
if (response.status === 'done') {
completed = true
// Refresh history to show new item
const historyRes = await aiService.getGenerations(historyRows.value, 0)
if (historyRes && historyRes.generations) {
historyGenerations.value = historyRes.generations
historyTotal.value = historyRes.total_count || 0
}
// Refresh history to show new item without resetting list
await refreshHistory()
} else if (response.status === 'failed') {
completed = true
generationError.value = response.failed_reason || 'Generation failed'
@@ -265,9 +272,6 @@ const pollStatus = async (id) => {
// --- Initial Load ---
onMounted(() => {
loadData()
// Open settings by default if it's a new user or explicitly requested?
// Maybe better to keep it closed or open based on layout preference.
// Let's keep it open initially for better UX as they likely want to generate.
isSettingsVisible.value = true
})
@@ -371,15 +375,73 @@ const deleteGeneration = async (gen) => {
}
}
const toggleMobileOverlay = (id) => {
// Only for touch/small screens if needed, or just general tap behavior
if (activeOverlayId.value === id) {
activeOverlayId.value = null
} else {
activeOverlayId.value = id
}
}
// --- Asset Picker Logic ---
const loadModalAssets = async () => {
isModalLoading.value = true
try {
const typeParam = assetPickerTab.value === 'all' ? undefined : assetPickerTab.value
// Use a larger limit for the modal or implement scrolling/pagination if needed.
// For now, 100 should be enough for a demo, or we can add pagination later.
const response = await dataService.getAssets(100, 0, typeParam)
if (response && response.assets) {
modalAssets.value = response.assets
} else {
modalAssets.value = Array.isArray(response) ? response : []
}
} catch (e) {
console.error('Failed to load modal assets', e)
modalAssets.value = []
} finally {
isModalLoading.value = false
}
}
const openAssetPicker = () => {
tempSelectedAssets.value = [...selectedAssets.value]
isAssetPickerVisible.value = true
loadModalAssets()
}
const toggleAssetSelection = (asset) => {
const index = tempSelectedAssets.value.findIndex(a => a.id === asset.id)
if (index === -1) {
tempSelectedAssets.value.push(asset)
} else {
tempSelectedAssets.value.splice(index, 1)
}
}
const confirmAssetSelection = () => {
selectedAssets.value = [...tempSelectedAssets.value]
isAssetPickerVisible.value = false
}
const removeAsset = (asset) => {
selectedAssets.value = selectedAssets.value.filter(a => a.id !== asset.id)
}
watch(assetPickerTab, () => {
if (isAssetPickerVisible.value) {
loadModalAssets()
}
})
</script>
<template>
<div class="flex flex-col h-full font-sans">
<!-- Sidebar and Mobile Nav removed (handled by App.vue) -->
<!-- Main Content -->
<main class="flex-1 relative flex flex-col h-full overflow-hidden">
<!-- Header -->
<header
class="p-4 flex justify-between items-center z-10 border-b border-white/5 bg-slate-900/80 backdrop-blur-sm">
<div class="flex items-center gap-3">
@@ -388,27 +450,27 @@ const deleteGeneration = async (gen) => {
Gallery</h1>
<span class="text-xs text-slate-500 border-l border-white/10 pl-3">History</span>
</div>
<Button icon="pi pi-cog" @click="isSettingsVisible = true" rounded text
class="!text-slate-400 hover:!bg-white/10 !w-8 !h-8" v-if="!isSettingsVisible" />
<div class="flex items-center gap-2">
<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
class="!text-slate-400 hover:!bg-white/10 !w-8 !h-8" v-if="!isSettingsVisible" />
</div>
</header>
<!-- Gallery Grid -->
<div class="flex-1 overflow-y-auto p-4 pb-32 md:pb-32" @scroll="onScroll">
<!-- pb-32 to allow space for bottom panel -->
<div class="flex-1 overflow-y-auto p-4"
: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-8 gap-2 md:gap-1">
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">
class="aspect-[9/16] relative group overflow-hidden bg-slate-800 transition-all duration-300"
@click="toggleMobileOverlay(gen.id)">
<!-- Image -->
<!-- Image -->
<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="openImagePreview(API_URL + '/assets/' + gen.result_list[0])" />
@click.stop="openImagePreview(API_URL + '/assets/' + gen.result_list[0])" />
<!-- Failed State -->
<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>
@@ -418,35 +480,26 @@ const deleteGeneration = async (gen) => {
v-tooltip.top="gen.failed_reason">{{ gen.failed_reason }}</span>
</div>
<!-- Processing State -->
<div v-else-if="gen.status === 'processing' || gen.status === 'starting'"
class="w-full h-full flex flex-col items-center justify-center bg-slate-800/50 border border-violet-500/20">
<i class="pi pi-spin pi-spinner text-violet-500 text-xl mb-2"></i>
<span class="text-[10px] text-violet-300/70">Creating...</span>
</div>
<!-- Placeholder -->
<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>
<!-- Overlay Info -->
<div
class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex flex-col justify-between p-2">
<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 }">
<!-- Top Actions -->
<div
class="flex justify-between items-start translate-y-[-10px] group-hover:translate-y-0 transition-transform duration-200 w-full">
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 gap-1">
<Button v-if="gen.result_list && gen.result_list.length > 0" icon="pi pi-eye"
v-tooltip.left="'View Full'"
class="!w-6 !h-6 !rounded-full !bg-white/20 !border-none !text-white text-[10px] hover:!bg-blue-500"
@click.stop="openImagePreview(API_URL + '/assets/' + gen.result_list[0])" />
<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"
@@ -454,8 +507,16 @@ const deleteGeneration = async (gen) => {
</div>
</div>
<!-- Bottom Actions -->
<div class="translate-y-[10px] group-hover:translate-y-0 transition-transform duration-200">
<!-- 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>
<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"
@@ -477,170 +538,151 @@ const deleteGeneration = async (gen) => {
</div>
</div>
<!-- Bottom Settings Panel -->
<transition name="slide-up">
<div v-if="isSettingsVisible"
class="absolute bottom-0 left-0 right-0 glass-panel border-t border-white/10 bg-slate-900/95 backdrop-blur-xl p-6 z-[60] rounded-t-3xl shadow-[0_-10px_40px_rgba(0,0,0,0.5)] flex flex-col gap-4 max-h-[85vh] overflow-y-auto">
<!-- Handle / Close Button -->
<div class="w-full flex justify-center -mt-2 mb-2 cursor-pointer"
@click="isSettingsVisible = false">
<div class="w-16 h-1 bg-white/20 rounded-full hover:bg-white/40 transition-colors"></div>
</div>
<div class="flex flex-col lg:flex-row gap-8">
<!-- Left Column: Inputs -->
<div class="flex-1 flex flex-col gap-4">
<!-- Prompt -->
<div class="flex flex-col gap-2">
<div class="flex justify-between items-center">
<label
class="text-xs font-bold text-slate-400 uppercase tracking-wider">Prompt</label>
<div class="flex gap-1">
<Button v-if="previousPrompt" icon="pi pi-undo"
class="!p-1 !w-6 !h-6 !text-[10px] !bg-slate-800 hover:!bg-slate-700 !border-white/10 !text-slate-300"
@click="undoImprovePrompt" v-tooltip.top="'Undo'" />
<Button icon="pi pi-sparkles" label="Improve" :loading="isImprovingPrompt"
:disabled="!prompt || prompt.length <= 10"
class="!py-0.5 !px-2 !text-[10px] !h-6 !bg-violet-600/20 hover:!bg-violet-600/30 !border-violet-500/30 !text-violet-400 disabled:opacity-50"
@click="handleImprovePrompt" />
<Button icon="pi pi-times" label="Clear"
class="!py-0.5 !px-2 !text-[10px] !h-6 !bg-slate-800 hover:!bg-slate-700 !border-white/10 !text-slate-400"
@click="clearPrompt" />
</div>
</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" />
</div>
<!-- Assets & Character Row -->
<div class="flex flex-col md:flex-row gap-4">
<div class="flex-1 flex flex-col gap-2">
<label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Character
(Optional)</label>
<Dropdown v-model="selectedCharacter" :options="characters" optionLabel="name"
placeholder="Select Character" filter showClear
class="w-full !bg-slate-800 !border-white/10 !text-white !rounded-xl" :pt="{
root: { class: '!bg-slate-800' },
input: { class: '!text-white' },
trigger: { class: '!text-slate-400' },
panel: { class: '!bg-slate-800 !border-white/10' },
item: { class: '!text-slate-300 hover:!bg-white/10 hover:!text-white' }
}">
<template #value="slotProps">
<div v-if="slotProps.value" class="flex items-center gap-2">
<img v-if="slotProps.value.avatar_image"
:src="API_URL + slotProps.value.avatar_image"
class="w-6 h-6 rounded-full object-cover" />
<span>{{ slotProps.value.name }}</span>
</div>
<span v-else>{{ 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-8 h-8 rounded-full object-cover" />
<span>{{ slotProps.option.name }}</span>
</div>
</template>
</Dropdown>
<div v-if="selectedCharacter"
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
Photo</label>
</div>
</div>
<div class="flex-1 flex flex-col gap-2">
<label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Reference
Assets</label>
<MultiSelect v-model="selectedAssets" :options="allAssets" optionLabel="id"
placeholder="Select Assets" display="chip"
class="w-full !bg-slate-800 !border-white/10 !text-white !rounded-xl" :pt="{
root: { class: '!bg-slate-800' },
labelContainer: { class: '!text-white' },
trigger: { class: '!text-slate-400' },
panel: { class: '!bg-slate-800 !border-white/10' },
item: { class: '!text-slate-300 hover:!bg-white/10 hover:!text-white' },
token: { class: '!bg-violet-600/30 !text-violet-200' }
}">
<template #option="slotProps">
<div class="flex items-center gap-2">
<img :src="API_URL + slotProps.option.url + '?thumbnail=true'"
class="w-8 h-8 rounded object-cover border border-white/10" />
<span class="text-xs truncate max-w-[150px]">{{
slotProps.option.name ||
'Asset ' + slotProps.option.id.substring(0, 4) }}</span>
</div>
</template>
</MultiSelect>
</div>
</div>
</div>
<!-- Right Column: Specs & Action -->
<div class="w-full lg:w-80 flex flex-col gap-4">
<!-- Specs -->
<div class="grid grid-cols-2 gap-4">
<div class="flex flex-col gap-2">
<label
class="text-xs font-bold text-slate-400 uppercase tracking-wider">Quality</label>
<Dropdown v-model="quality" :options="qualityOptions" optionLabel="value"
class="w-full !bg-slate-800 !border-white/10 !text-white !rounded-xl"
:pt="{ input: { class: '!text-white' }, trigger: { class: '!text-slate-400' }, panel: { class: '!bg-slate-800 !border-white/10' }, item: { class: '!text-slate-300 hover:!bg-white/10 hover:!text-white' } }" />
</div>
<div class="flex flex-col gap-2">
<label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Aspect
Ratio</label>
<Dropdown v-model="aspectRatio" :options="aspectRatioOptions" optionLabel="value"
class="w-full !bg-slate-800 !border-white/10 !text-white !rounded-xl"
:pt="{ input: { class: '!text-white' }, trigger: { class: '!text-slate-400' }, panel: { class: '!bg-slate-800 !border-white/10' }, item: { class: '!text-slate-300 hover:!bg-white/10 hover:!text-white' } }" />
</div>
</div>
<!-- Telegram -->
<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" />
<label for="tg-check" class="text-xs text-slate-300 cursor-pointer">Send to
Telegram</label>
</div>
<div v-if="sendToTelegram" class="animate-in fade-in slide-in-from-top-1">
<InputText v-model="telegramId" placeholder="Telegram ID"
class="w-full !text-xs !bg-slate-900 !border-white/10 !text-white !py-1.5" />
</div>
</div>
<!-- Generate Button -->
<div class="mt-auto">
<Button :label="isGenerating ? 'Generating...' : 'Generate'"
:icon="isGenerating ? 'pi pi-spin pi-spinner' : 'pi pi-sparkles'"
:loading="isGenerating" @click="handleGenerate"
class="w-full !py-3 !text-base !font-bold !bg-gradient-to-r from-violet-600 to-cyan-500 !border-none !rounded-xl !shadow-lg !shadow-violet-500/20 hover:!scale-[1.02] transition-all" />
<div v-if="isGenerating" class="mt-2 text-center">
<ProgressBar :value="generationProgress" class="h-1 bg-slate-700"
:pt="{ value: { class: '!bg-violet-500' } }" :showValue="false" />
<span class="text-[10px] text-slate-500">{{ generationStatus }}</span>
</div>
<div v-if="generationError"
class="mt-2 text-center text-xs text-red-400 bg-red-500/10 p-2 rounded border border-red-500/20">
{{ generationError }}
</div>
</div>
</div>
</div>
<div v-if="isSettingsVisible"
class="absolute bottom-2 left-1/2 -translate-x-1/2 w-[98%] max-w-6xl glass-panel border border-white/10 bg-slate-900/95 backdrop-blur-xl p-4 z-[60] !rounded-[2.5rem] shadow-2xl flex flex-col gap-3 max-h-[85vh] overflow-y-auto">
<div class="w-full flex justify-center -mt-2 mb-2 cursor-pointer" @click="isSettingsVisible = false">
<div class="w-16 h-1 bg-white/20 rounded-full hover:bg-white/40 transition-colors"></div>
</div>
</transition>
<!-- Toggle Button (when hidden) -->
<div class="flex flex-col lg:flex-row gap-8">
<div class="flex-1 flex flex-col gap-4">
<div class="flex flex-col gap-2">
<div class="flex justify-between items-center">
<label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Prompt</label>
<div class="flex gap-1">
<Button v-if="previousPrompt" icon="pi pi-undo"
class="!p-1 !w-6 !h-6 !text-[10px] !bg-slate-800 hover:!bg-slate-700 !border-white/10 !text-slate-300"
@click="undoImprovePrompt" v-tooltip.top="'Undo'" />
<Button icon="pi pi-sparkles" label="Improve" :loading="isImprovingPrompt"
:disabled="!prompt || prompt.length <= 10"
class="!py-0.5 !px-2 !text-[10px] !h-6 !bg-violet-600/20 hover:!bg-violet-600/30 !border-violet-500/30 !text-violet-400 disabled:opacity-50"
@click="handleImprovePrompt" />
<Button icon="pi pi-times" label="Clear"
class="!py-0.5 !px-2 !text-[10px] !h-6 !bg-slate-800 hover:!bg-slate-700 !border-white/10 !text-slate-400"
@click="clearPrompt" />
</div>
</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" />
</div>
<div class="flex flex-col md:flex-row gap-4">
<div class="flex-1 flex flex-col gap-2">
<label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Character
(Optional)</label>
<Dropdown v-model="selectedCharacter" :options="characters" optionLabel="name"
placeholder="Select Character" filter showClear
class="w-full !bg-slate-800 !border-white/10 !text-white !rounded-xl" :pt="{
root: { class: '!bg-slate-800' },
input: { class: '!text-white' },
trigger: { class: '!text-slate-400' },
panel: { class: '!bg-slate-800 !border-white/10' },
item: { class: '!text-slate-300 hover:!bg-white/10 hover:!text-white' }
}">
<template #value="slotProps">
<div v-if="slotProps.value" class="flex items-center gap-2">
<img v-if="slotProps.value.avatar_image"
:src="API_URL + slotProps.value.avatar_image"
class="w-6 h-6 rounded-full object-cover" />
<span>{{ slotProps.value.name }}</span>
</div>
<span v-else>{{ 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-8 h-8 rounded-full object-cover" />
<span>{{ slotProps.option.name }}</span>
</div>
</template>
</Dropdown>
<div v-if="selectedCharacter"
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
Photo</label>
</div>
</div>
<div class="flex-1 flex flex-col gap-2">
<label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Reference
Assets</label>
<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>
<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>
<img v-if="asset.url" :src="API_URL + asset.url + '?thumbnail=true'"
class="w-4 h-4 rounded object-cover" />
<span class="truncate max-w-[100px]">{{ asset.name || 'Asset ' + (asset.id ?
asset.id.substring(0, 4) : '') }}</span>
<i class="pi pi-times cursor-pointer hover:text-white"
@click.stop="removeAsset(asset)"></i>
</div>
</div>
</div>
</div>
</div>
<div class="w-full lg:w-80 flex flex-col gap-4">
<div class="grid grid-cols-2 gap-4">
<div class="flex flex-col gap-2">
<label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Quality</label>
<Dropdown v-model="quality" :options="qualityOptions" optionLabel="value"
class="w-full !bg-slate-800 !border-white/10 !text-white !rounded-xl"
:pt="{ input: { class: '!text-white' }, trigger: { class: '!text-slate-400' }, panel: { class: '!bg-slate-800 !border-white/10' }, item: { class: '!text-slate-300 hover:!bg-white/10 hover:!text-white' } }" />
</div>
<div class="flex flex-col gap-2">
<label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Aspect
Ratio</label>
<Dropdown v-model="aspectRatio" :options="aspectRatioOptions" optionLabel="value"
class="w-full !bg-slate-800 !border-white/10 !text-white !rounded-xl"
:pt="{ input: { class: '!text-white' }, trigger: { class: '!text-slate-400' }, panel: { class: '!bg-slate-800 !border-white/10' }, item: { class: '!text-slate-300 hover:!bg-white/10 hover:!text-white' } }" />
</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" />
<label for="tg-check" class="text-xs text-slate-300 cursor-pointer">Send to
Telegram</label>
</div>
<div v-if="sendToTelegram" class="animate-in fade-in slide-in-from-top-1">
<InputText v-model="telegramId" placeholder="Telegram ID"
class="w-full !text-xs !bg-slate-900 !border-white/10 !text-white !py-1.5" />
</div>
</div>
<div class="mt-auto">
<Button :label="isGenerating ? 'Generating...' : 'Generate'"
:icon="isGenerating ? 'pi pi-spin pi-spinner' : 'pi pi-sparkles'"
:loading="isGenerating" @click="handleGenerate"
class="w-full !py-3 !text-base !font-bold !bg-gradient-to-r from-violet-600 to-cyan-500 !border-none !rounded-xl !shadow-lg !shadow-violet-500/20 hover:!scale-[1.02] transition-all" />
<div v-if="isGenerating" class="mt-2 text-center">
<ProgressBar :value="generationProgress" class="h-1 bg-slate-700"
:pt="{ value: { class: '!bg-violet-500' } }" :showValue="false" />
<span class="text-[10px] text-slate-500">{{ generationStatus }}</span>
</div>
<div v-if="generationError"
class="mt-2 text-center text-xs text-red-400 bg-red-500/10 p-2 rounded border border-red-500/20">
{{ generationError }}
</div>
</div>
</div>
</div>
</div>
<transition name="fade">
<div v-if="!isSettingsVisible" class="absolute bottom-24 md:bottom-8 left-1/2 -translate-x-1/2 z-10">
<Button label="Open Controls" icon="pi pi-chevron-up" @click="isSettingsVisible = true" rounded
@@ -652,7 +694,6 @@ const deleteGeneration = async (gen) => {
<!-- 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' } }">
@@ -664,6 +705,58 @@ const deleteGeneration = async (gen) => {
</div>
</Dialog>
<Dialog v-model:visible="isAssetPickerVisible" modal header="Select Assets"
:style="{ width: '80vw', maxWidth: '900px' }"
: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-0' }, footer: { class: '!bg-slate-900 !border-t !border-white/5 !p-4' }, closeButton: { class: '!text-slate-400 hover:!text-white' } }">
<div class="flex flex-col h-[70vh]">
<!-- Tabs -->
<div class="flex border-b border-white/5 px-4">
<button v-for="tab in ['all', 'uploaded', 'generated']" :key="tab" @click="assetPickerTab = tab"
class="px-4 py-3 text-sm font-medium border-b-2 transition-colors capitalize"
:class="assetPickerTab === tab ? 'border-violet-500 text-violet-400' : 'border-transparent text-slate-400 hover:text-slate-200'">
{{ tab }}
</button>
</div>
<!-- Grid -->
<div class="flex-1 overflow-y-auto p-4 custom-scrollbar">
<div v-if="isModalLoading" 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="modalAssets.length > 0"
class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
<div v-for="asset in modalAssets" :key="asset.id" @click="toggleAssetSelection(asset)"
class="relative aspect-square rounded-xl overflow-hidden cursor-pointer border-2 transition-all group"
:class="tempSelectedAssets.some(a => a.id === asset.id) ? 'border-violet-500 ring-2 ring-violet-500/30' : 'border-transparent hover:border-white/20'">
<img :src="API_URL + asset.url + '?thumbnail=true'" class="w-full h-full object-cover" />
<div class="absolute bottom-0 left-0 right-0 p-2 bg-black/60 backdrop-blur-sm">
<p class="text-[10px] text-white truncate">{{ asset.name || 'Asset ' + (asset.id ?
asset.id.substring(0, 4) : '') }}</p>
</div>
<!-- Checkmark -->
<div v-if="tempSelectedAssets.some(a => a.id === asset.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">
<i class="pi pi-image text-4xl mb-2 opacity-50"></i>
<p>No assets found</p>
</div>
</div>
</div>
<template #footer>
<div class="flex justify-end gap-2">
<Button label="Cancel" @click="isAssetPickerVisible = false"
class="!text-slate-300 hover:!bg-white/5" text />
<Button :label="'Select (' + tempSelectedAssets.length + ')'" @click="confirmAssetSelection"
class="!bg-violet-600 !border-none hover:!bg-violet-500" />
</div>
</template>
</Dialog>
</div>
</template>