feat: Add FlexibleGenerationView for customizable AI content generation with character, asset, quality, and aspect ratio controls, including persistence and status polling.
This commit is contained in:
682
src/views/FlexibleGenerationView.vue
Normal file
682
src/views/FlexibleGenerationView.vue
Normal file
@@ -0,0 +1,682 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, watch, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { dataService } from '../services/dataService'
|
||||
import { aiService } from '../services/aiService'
|
||||
import Button from 'primevue/button'
|
||||
import Textarea from 'primevue/textarea'
|
||||
import InputText from 'primevue/inputtext'
|
||||
import Dialog from 'primevue/dialog'
|
||||
import Checkbox from 'primevue/checkbox'
|
||||
import Dropdown from 'primevue/dropdown'
|
||||
import MultiSelect from 'primevue/multiselect'
|
||||
import ProgressSpinner from 'primevue/progressspinner'
|
||||
import ProgressBar from 'primevue/progressbar'
|
||||
import Message from 'primevue/message'
|
||||
|
||||
const router = useRouter()
|
||||
const API_URL = import.meta.env.VITE_API_URL
|
||||
|
||||
// --- State ---
|
||||
const prompt = ref('')
|
||||
const selectedCharacter = ref(null)
|
||||
const selectedAssets = ref([])
|
||||
const quality = ref({ key: 'TWOK', value: '2K' })
|
||||
const aspectRatio = ref({ key: "NINESIXTEEN", value: "9:16" })
|
||||
const sendToTelegram = ref(false)
|
||||
const telegramId = ref('')
|
||||
const isTelegramIdSaved = ref(false)
|
||||
const useProfileImage = ref(true)
|
||||
const isImprovingPrompt = ref(false)
|
||||
const previousPrompt = ref('')
|
||||
|
||||
const characters = ref([])
|
||||
const allAssets = ref([])
|
||||
const historyGenerations = ref([])
|
||||
const historyTotal = ref(0)
|
||||
const historyRows = ref(20)
|
||||
const historyFirst = ref(0)
|
||||
|
||||
const isSettingsVisible = ref(false)
|
||||
const isGenerating = ref(false)
|
||||
const generationStatus = ref('')
|
||||
const generationProgress = ref(0)
|
||||
const generationError = ref(null)
|
||||
const generatedResult = ref(null) // For immediate feedback if needed
|
||||
|
||||
// Options
|
||||
const qualityOptions = ref([
|
||||
{ key: 'ONEK', value: '1K' },
|
||||
{ key: 'TWOK', value: '2K' },
|
||||
{ key: 'FOURK', value: '4K' }
|
||||
])
|
||||
const aspectRatioOptions = ref([
|
||||
{ key: "NINESIXTEEN", value: "9:16" },
|
||||
{ key: "FOURTHREE", value: "4:3" },
|
||||
{ key: "THREEFOUR", value: "3:4" },
|
||||
{ key: "SIXTEENNINE", value: "16:9" }
|
||||
])
|
||||
|
||||
// --- Persistence ---
|
||||
const STORAGE_KEY = 'flexible_gen_settings'
|
||||
|
||||
const saveSettings = () => {
|
||||
const settings = {
|
||||
prompt: prompt.value,
|
||||
selectedCharacterId: selectedCharacter.value?.id,
|
||||
selectedAssetIds: selectedAssets.value.map(a => a.id),
|
||||
quality: quality.value,
|
||||
aspectRatio: aspectRatio.value,
|
||||
sendToTelegram: sendToTelegram.value,
|
||||
telegramId: telegramId.value,
|
||||
useProfileImage: useProfileImage.value
|
||||
}
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(settings))
|
||||
|
||||
// Also save Telegram ID separately as it's used elsewhere
|
||||
if (telegramId.value) {
|
||||
localStorage.setItem('telegram_id', telegramId.value)
|
||||
isTelegramIdSaved.value = true
|
||||
}
|
||||
}
|
||||
|
||||
const restoreSettings = () => {
|
||||
const stored = localStorage.getItem(STORAGE_KEY)
|
||||
if (stored) {
|
||||
try {
|
||||
const settings = JSON.parse(stored)
|
||||
prompt.value = settings.prompt || ''
|
||||
|
||||
// We need characters and assets loaded to fully restore objects
|
||||
// For now, we'll store IDs and restore in loadData
|
||||
if (settings.quality) quality.value = settings.quality
|
||||
if (settings.aspectRatio) aspectRatio.value = settings.aspectRatio
|
||||
sendToTelegram.value = settings.sendToTelegram || false
|
||||
telegramId.value = settings.telegramId || localStorage.getItem('telegram_id') || ''
|
||||
if (telegramId.value) isTelegramIdSaved.value = true
|
||||
if (settings.useProfileImage !== undefined) useProfileImage.value = settings.useProfileImage
|
||||
|
||||
return settings // Return to use in loadData
|
||||
} catch (e) {
|
||||
console.error('Failed to parse settings', e)
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
// Watchers for auto-save
|
||||
watch([prompt, selectedCharacter, selectedAssets, quality, aspectRatio, sendToTelegram, telegramId, useProfileImage], () => {
|
||||
saveSettings()
|
||||
}, { deep: true })
|
||||
|
||||
|
||||
// --- Data Loading ---
|
||||
const loadData = async () => {
|
||||
try {
|
||||
const [charsRes, assetsRes, historyRes] = await Promise.all([
|
||||
dataService.getCharacters(), // Assuming this exists and returns list
|
||||
dataService.getAssets(100, 0, 'all'), // Load a batch of assets
|
||||
aiService.getGenerations(historyRows.value, historyFirst.value)
|
||||
])
|
||||
|
||||
// Characters
|
||||
characters.value = charsRes || []
|
||||
|
||||
// Assets
|
||||
if (assetsRes && assetsRes.assets) {
|
||||
allAssets.value = assetsRes.assets
|
||||
} else {
|
||||
allAssets.value = Array.isArray(assetsRes) ? assetsRes : []
|
||||
}
|
||||
|
||||
// History
|
||||
if (historyRes && historyRes.generations) {
|
||||
historyGenerations.value = historyRes.generations
|
||||
historyTotal.value = historyRes.total_count || 0
|
||||
} else {
|
||||
historyGenerations.value = Array.isArray(historyRes) ? historyRes : []
|
||||
historyTotal.value = historyGenerations.value.length
|
||||
}
|
||||
|
||||
// Restore complex objects from IDs
|
||||
const savedSettings = restoreSettings()
|
||||
if (savedSettings) {
|
||||
if (savedSettings.selectedCharacterId) {
|
||||
selectedCharacter.value = characters.value.find(c => c.id === savedSettings.selectedCharacterId) || null
|
||||
}
|
||||
if (savedSettings.selectedAssetIds && savedSettings.selectedAssetIds.length > 0) {
|
||||
// Determine which assets to select.
|
||||
// Note: saved assets might not be in the first 100 loaded.
|
||||
// For a robust implementation, we might need to fetch specific assets if not found.
|
||||
// For now, we filter from available.
|
||||
selectedAssets.value = allAssets.value.filter(a => savedSettings.selectedAssetIds.includes(a.id))
|
||||
}
|
||||
}
|
||||
|
||||
} catch (e) {
|
||||
console.error('Failed to load data', e)
|
||||
}
|
||||
}
|
||||
|
||||
const loadMoreHistory = async () => {
|
||||
// Implement pagination/infinite scroll logic here
|
||||
}
|
||||
|
||||
// --- Generation ---
|
||||
const handleGenerate = async () => {
|
||||
if (!prompt.value.trim()) return
|
||||
|
||||
if (sendToTelegram.value && !telegramId.value) {
|
||||
alert("Please enter your Telegram ID")
|
||||
return
|
||||
}
|
||||
|
||||
isGenerating.value = true
|
||||
generationError.value = null
|
||||
generationStatus.value = 'starting'
|
||||
generationProgress.value = 0
|
||||
|
||||
// Close settings to show gallery/progress (optional preference)
|
||||
// isSettingsVisible.value = false
|
||||
|
||||
try {
|
||||
const payload = {
|
||||
aspect_ratio: aspectRatio.value.key,
|
||||
quality: quality.value.key,
|
||||
prompt: prompt.value,
|
||||
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
|
||||
}
|
||||
|
||||
const response = await aiService.runGeneration(payload)
|
||||
|
||||
if (response && response.id) {
|
||||
pollStatus(response.id)
|
||||
} else {
|
||||
// Immediate result
|
||||
isGenerating.value = false
|
||||
loadHistory() // Refresh gallery
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Generation failed', e)
|
||||
generationError.value = e.message || 'Generation failed'
|
||||
isGenerating.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const pollStatus = async (id) => {
|
||||
let completed = false
|
||||
while (!completed && isGenerating.value) {
|
||||
try {
|
||||
const response = await aiService.getGenerationStatus(id)
|
||||
generationStatus.value = response.status
|
||||
generationProgress.value = response.progress || 0
|
||||
|
||||
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
|
||||
}
|
||||
} else if (response.status === 'failed') {
|
||||
completed = true
|
||||
generationError.value = response.failed_reason || 'Generation failed'
|
||||
throw new Error(generationError.value)
|
||||
} else {
|
||||
await new Promise(resolve => setTimeout(resolve, 2000))
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Polling failed', e)
|
||||
completed = true
|
||||
isGenerating.value = false
|
||||
}
|
||||
}
|
||||
isGenerating.value = false
|
||||
}
|
||||
|
||||
// --- 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
|
||||
})
|
||||
|
||||
// --- Sidebar Logic (Duplicated for now) ---
|
||||
const handleLogout = () => {
|
||||
localStorage.removeItem('auth_code')
|
||||
router.push('/login')
|
||||
}
|
||||
|
||||
// Image Preview
|
||||
const isImagePreviewVisible = ref(false)
|
||||
const previewImage = ref(null)
|
||||
const openImagePreview = (url) => {
|
||||
previewImage.value = { url }
|
||||
isImagePreviewVisible.value = true
|
||||
}
|
||||
|
||||
const reusePrompt = (gen) => {
|
||||
if (gen.prompt) {
|
||||
prompt.value = gen.prompt
|
||||
isSettingsVisible.value = true
|
||||
}
|
||||
}
|
||||
|
||||
const reuseAsset = (gen) => {
|
||||
const assetIds = gen.assets_list || []
|
||||
if (assetIds.length > 0) {
|
||||
// We need to find these assets in allAssets to get full objects for MultiSelect
|
||||
// If not loaded, we might need value to just be objects with ID and URL (MultiSelect supports object value)
|
||||
// Let's try to map what we can
|
||||
const assets = assetIds.map(id => {
|
||||
const found = allAssets.value.find(a => a.id === id)
|
||||
if (found) return found
|
||||
return { id, url: `/assets/${id}`, name: 'Asset ' + id.substring(0, 4) }
|
||||
})
|
||||
selectedAssets.value = assets
|
||||
isSettingsVisible.value = true
|
||||
}
|
||||
}
|
||||
|
||||
const useResultAsAsset = (gen) => {
|
||||
if (gen.result_list && gen.result_list.length > 0) {
|
||||
const resultId = gen.result_list[0]
|
||||
const asset = {
|
||||
id: resultId,
|
||||
url: `/assets/${resultId}`,
|
||||
name: 'Gen ' + gen.id.substring(0, 4)
|
||||
}
|
||||
|
||||
// Replace existing selection or add? User said "automatically replaced the attached asset". so Replace.
|
||||
selectedAssets.value = [asset]
|
||||
isSettingsVisible.value = true
|
||||
}
|
||||
}
|
||||
|
||||
const handleImprovePrompt = async () => {
|
||||
if (!prompt.value || prompt.value.length <= 10) return
|
||||
isImprovingPrompt.value = true
|
||||
try {
|
||||
const linkedAssetIds = selectedAssets.value.map(a => a.id)
|
||||
const response = await aiService.improvePrompt(prompt.value, linkedAssetIds)
|
||||
if (response && response.prompt) {
|
||||
previousPrompt.value = prompt.value
|
||||
prompt.value = response.prompt
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Prompt improvement failed', e)
|
||||
} finally {
|
||||
isImprovingPrompt.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const undoImprovePrompt = () => {
|
||||
if (previousPrompt.value) {
|
||||
const temp = prompt.value
|
||||
prompt.value = previousPrompt.value
|
||||
previousPrompt.value = temp
|
||||
}
|
||||
}
|
||||
|
||||
const clearPrompt = () => {
|
||||
prompt.value = ''
|
||||
previousPrompt.value = ''
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex h-screen bg-slate-900 overflow-hidden text-slate-100 font-sans">
|
||||
<!-- Sidebar -->
|
||||
<nav
|
||||
class="glass-panel w-20 m-4 flex flex-col items-center py-6 rounded-3xl z-10 border border-white/5 bg-slate-900/50 backdrop-blur-md">
|
||||
<div class="mb-12">
|
||||
<div
|
||||
class="w-10 h-10 bg-gradient-to-br from-violet-600 to-cyan-500 rounded-xl flex items-center justify-center font-bold text-white text-xl shadow-lg shadow-violet-500/20">
|
||||
AI
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 flex flex-col gap-6 w-full items-center">
|
||||
<div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
|
||||
@click="router.push('/')" v-tooltip.right="'Home'">
|
||||
<span class="text-2xl">🏠</span>
|
||||
</div>
|
||||
<div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
|
||||
@click="router.push('/assets')" v-tooltip.right="'Assets'">
|
||||
<span class="text-2xl">📂</span>
|
||||
</div>
|
||||
<!-- Image Generation -->
|
||||
<div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
|
||||
@click="router.push('/generation')" v-tooltip.right="'Image Generation'">
|
||||
<span class="text-2xl">🎨</span>
|
||||
</div>
|
||||
<!-- Active State for Flexible Generation -->
|
||||
<div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 bg-white/10 text-slate-50 shadow-inner"
|
||||
v-tooltip.right="'Flexible Generation'">
|
||||
<span class="text-2xl">🖌️</span>
|
||||
</div>
|
||||
<div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
|
||||
@click="router.push('/characters')" v-tooltip.right="'Characters'">
|
||||
<span class="text-2xl">👥</span>
|
||||
</div>
|
||||
<div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
|
||||
@click="router.push('/image-to-prompt')" v-tooltip.right="'Image to Prompt'">
|
||||
<span class="text-2xl">✨</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-auto">
|
||||
<div @click="handleLogout"
|
||||
class="w-10 h-10 rounded-xl bg-red-500/10 text-red-400 flex items-center justify-center cursor-pointer hover:bg-red-500/20 transition-all font-bold">
|
||||
<i class="pi pi-power-off"></i>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 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">
|
||||
<h1
|
||||
class="text-xl font-bold bg-gradient-to-r from-white to-slate-400 bg-clip-text text-transparent m-0">
|
||||
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" />
|
||||
</header>
|
||||
|
||||
<!-- Gallery Grid -->
|
||||
<div class="flex-1 overflow-y-auto p-4 pb-32"> <!-- pb-32 to allow space for bottom panel -->
|
||||
|
||||
<div v-if="historyGenerations.length > 0"
|
||||
class="grid grid-cols-3 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-8 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">
|
||||
|
||||
<!-- 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"
|
||||
@click="openImagePreview(API_URL + '/assets/' + gen.result_list[0])" />
|
||||
<div v-else class="w-full h-full flex items-center justify-center text-slate-600">
|
||||
<i class="pi pi-image text-4xl"></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">
|
||||
|
||||
<!-- Top Actions -->
|
||||
<div
|
||||
class="flex justify-end gap-1 translate-y-[-10px] group-hover:translate-y-0 transition-transform duration-200">
|
||||
<Button 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)" />
|
||||
</div>
|
||||
|
||||
<!-- Bottom Actions -->
|
||||
<div class="translate-y-[10px] group-hover:translate-y-0 transition-transform duration-200">
|
||||
<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>
|
||||
<p class="text-[10px] text-white/70 line-clamp-1 leading-tight">{{ gen.prompt }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="!isGenerating"
|
||||
class="flex flex-col items-center justify-center h-full text-slate-600 opacity-50">
|
||||
<i class="pi pi-images text-6xl mb-4"></i>
|
||||
<p class="text-xl">Your creations will appear here</p>
|
||||
</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-20 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 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>
|
||||
</transition>
|
||||
|
||||
<!-- Toggle Button (when hidden) -->
|
||||
<transition name="fade">
|
||||
<div v-if="!isSettingsVisible" class="absolute bottom-8 left-1/2 -translate-x-1/2 z-10">
|
||||
<Button label="Open Controls" icon="pi pi-chevron-up" @click="isSettingsVisible = true" rounded
|
||||
class="!bg-violet-600 !border-none !shadow-xl !font-bold shadow-violet-500/40 !px-6 !py-3" />
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- 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);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.slide-up-enter-active,
|
||||
.slide-up-leave-active {
|
||||
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.slide-up-enter-from,
|
||||
.slide-up-leave-to {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Custom Scrollbar for the gallery */
|
||||
.overflow-y-auto::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.overflow-y-auto::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
|
||||
.overflow-y-auto::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.overflow-y-auto::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user