783 lines
37 KiB
Vue
783 lines
37 KiB
Vue
<script setup>
|
|
import { ref, onMounted, computed, watch } 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 ProgressSpinner from 'primevue/progressspinner'
|
|
import ProgressBar from 'primevue/progressbar'
|
|
import Message from 'primevue/message'
|
|
import Tag from 'primevue/tag'
|
|
import Checkbox from 'primevue/checkbox'
|
|
import Dialog from 'primevue/dialog'
|
|
import Paginator from 'primevue/paginator'
|
|
import InputText from 'primevue/inputtext'
|
|
|
|
const router = useRouter()
|
|
const API_URL = import.meta.env.VITE_API_URL
|
|
|
|
// Generation State
|
|
const prompt = ref('')
|
|
const isGenerating = ref(false)
|
|
const generationStatus = ref('')
|
|
const generationProgress = ref(0)
|
|
const generationSuccess = ref(false)
|
|
const generationError = ref(null)
|
|
const generatedResult = ref(null)
|
|
|
|
// History State
|
|
const historyGenerations = ref([])
|
|
const historyTotal = ref(0)
|
|
const historyRows = ref(10)
|
|
const historyFirst = ref(0)
|
|
|
|
// Prompt Assistant state
|
|
const isImprovingPrompt = ref(false)
|
|
const previousPrompt = ref('')
|
|
|
|
// Asset Selection State
|
|
const selectedAssets = ref([])
|
|
const isAssetModalVisible = ref(false)
|
|
const allAssets = ref([])
|
|
const assetsTotalRecords = ref(0)
|
|
const assetsRows = ref(12)
|
|
const assetsFirst = ref(0)
|
|
const activeAssetFilter = ref('all')
|
|
const sendToTelegram = ref(false)
|
|
const telegramId = ref(localStorage.getItem('telegram_id') || '')
|
|
const isTelegramIdSaved = ref(!!localStorage.getItem('telegram_id'))
|
|
const isUploading = ref(false)
|
|
const fileInput = ref(null)
|
|
|
|
const saveTelegramId = () => {
|
|
if (telegramId.value) {
|
|
localStorage.setItem('telegram_id', telegramId.value)
|
|
isTelegramIdSaved.value = true
|
|
}
|
|
}
|
|
|
|
const quality = ref({ key: 'TWOK', value: '2K' })
|
|
const qualityOptions = ref([
|
|
{ key: 'ONEK', value: '1K' },
|
|
{ key: 'TWOK', value: '2K' },
|
|
{ key: 'FOURK', value: '4K' }
|
|
])
|
|
|
|
const aspectRatio = ref({ key: "NINESIXTEEN", value: "9:16" })
|
|
const aspectRatioOptions = ref([
|
|
{ key: "NINESIXTEEN", value: "9:16" },
|
|
{ key: "FOURTHREE", value: "4:3" },
|
|
{ key: "THREEFOUR", value: "3:4" },
|
|
{ key: "SIXTEENNINE", value: "16:9" }
|
|
])
|
|
|
|
// --- Data Loading ---
|
|
|
|
const loadHistory = async () => {
|
|
try {
|
|
const response = await aiService.getGenerations(historyRows.value, historyFirst.value)
|
|
if (response && response.generations) {
|
|
historyGenerations.value = response.generations
|
|
historyTotal.value = response.total_count || 0
|
|
} else {
|
|
historyGenerations.value = Array.isArray(response) ? response : []
|
|
historyTotal.value = historyGenerations.value.length
|
|
}
|
|
} catch (e) {
|
|
console.error('Failed to load history', e)
|
|
}
|
|
}
|
|
|
|
const loadAssets = async () => {
|
|
try {
|
|
const response = await dataService.getAssets(assetsRows.value, assetsFirst.value, activeAssetFilter.value)
|
|
console.log("Loaded assets:", response)
|
|
if (response && response.assets) {
|
|
allAssets.value = response.assets
|
|
assetsTotalRecords.value = response.total_count || 0
|
|
} else {
|
|
allAssets.value = Array.isArray(response) ? response : []
|
|
assetsTotalRecords.value = allAssets.value.length
|
|
}
|
|
} catch (e) {
|
|
console.error('Failed to load assets', e)
|
|
}
|
|
}
|
|
|
|
const onHistoryPage = (event) => {
|
|
historyFirst.value = event.first
|
|
historyRows.value = event.rows
|
|
loadHistory()
|
|
}
|
|
|
|
const onAssetsPage = (event) => {
|
|
assetsFirst.value = event.first
|
|
assetsRows.value = event.rows
|
|
loadAssets()
|
|
}
|
|
|
|
// --- Asset Selection Logic ---
|
|
|
|
const openAssetModal = () => {
|
|
assetsFirst.value = 0
|
|
loadAssets()
|
|
isAssetModalVisible.value = true
|
|
}
|
|
|
|
const toggleAssetSelection = (asset) => {
|
|
const index = selectedAssets.value.findIndex(a => a.id === asset.id)
|
|
if (index > -1) {
|
|
selectedAssets.value.splice(index, 1)
|
|
} else {
|
|
selectedAssets.value.push(asset)
|
|
}
|
|
}
|
|
|
|
const isAssetSelected = (assetId) => {
|
|
return selectedAssets.value.some(a => a.id === assetId)
|
|
}
|
|
|
|
const removeSelectedAsset = (index) => {
|
|
selectedAssets.value.splice(index, 1)
|
|
}
|
|
|
|
const triggerFileUpload = () => {
|
|
if (fileInput.value) fileInput.value.click()
|
|
}
|
|
|
|
const onFileSelected = async (event) => {
|
|
const file = event.target.files[0]
|
|
if (!file) return
|
|
|
|
isUploading.value = true
|
|
try {
|
|
// Upload without linked character (global asset)
|
|
await dataService.uploadAsset(file, null)
|
|
|
|
// Reload assets to show the new one.
|
|
// ideally uploadAsset returns the new asset, but if not we reload.
|
|
// If it does return, we could push it to selectedAssets immediately.
|
|
// Let's assume we reload for now to be safe.
|
|
assetsFirst.value = 0
|
|
await loadAssets()
|
|
|
|
// Optional: Select the most recent asset if we want to be helpful
|
|
if (allAssets.value.length > 0) {
|
|
// Assuming the newest is first, we could:
|
|
// toggleAssetSelection(allAssets.value[0])
|
|
}
|
|
} catch (e) {
|
|
console.error('Failed to upload asset', e)
|
|
} finally {
|
|
isUploading.value = false
|
|
if (event.target) event.target.value = '' // Clear input
|
|
}
|
|
}
|
|
|
|
// --- Generation Logic ---
|
|
|
|
const handleGenerate = async () => {
|
|
if (!prompt.value.trim()) return
|
|
|
|
// Validation for Telegram
|
|
if (sendToTelegram.value && !telegramId.value) {
|
|
alert("Please enter your Telegram ID")
|
|
return
|
|
}
|
|
|
|
// Save ID if provided
|
|
if (telegramId.value && telegramId.value !== localStorage.getItem('telegram_id')) {
|
|
localStorage.setItem('telegram_id', telegramId.value)
|
|
isTelegramIdSaved.value = true
|
|
}
|
|
|
|
isGenerating.value = true
|
|
generationSuccess.value = false
|
|
generationError.value = null
|
|
generationStatus.value = 'starting'
|
|
generationProgress.value = 0
|
|
generatedResult.value = null
|
|
|
|
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: null, // Explicitly null for global generation
|
|
telegram_id: sendToTelegram.value ? telegramId.value : null
|
|
}
|
|
|
|
const response = await aiService.runGeneration(payload)
|
|
|
|
let genId = null
|
|
if (response && response.generations && response.generations.length > 0) {
|
|
genId = response.generations[0].id
|
|
} else if (response && response.id) {
|
|
genId = response.id
|
|
}
|
|
|
|
if (genId) {
|
|
pollStatus(genId)
|
|
} else {
|
|
// Fallback immediate response
|
|
generatedResult.value = response
|
|
generationSuccess.value = true
|
|
isGenerating.value = false
|
|
loadHistory()
|
|
}
|
|
} catch (e) {
|
|
console.error('Generation failed', e)
|
|
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
|
|
generationSuccess.value = true
|
|
|
|
// For global generation, we might need to fetch the assets by ID if returned
|
|
if (response.result_list && response.result_list.length > 0) {
|
|
// Since we don't have a direct "getAssetsByIds" batch endpoint easily available in dataService yet,
|
|
// we might just fetch the first one or construct objects if URL is provided.
|
|
// Assuming response includes asset details or just IDs.
|
|
// Let's optimize: refresh history first
|
|
}
|
|
|
|
// Just refreshing history is safest to get full object for now
|
|
await loadHistory()
|
|
|
|
// Try to find the new generation in history to show result
|
|
const newGen = historyGenerations.value.find(g => g.id === id) || historyGenerations.value[0]
|
|
if (newGen) {
|
|
restoreGeneration(newGen)
|
|
// ensure tech_prompt is passed if available in response but not yet in history (race condition)
|
|
if (response.tech_prompt && generatedResult.value) {
|
|
generatedResult.value.tech_prompt = response.tech_prompt
|
|
generatedResult.value.execution_time = response.execution_time_seconds
|
|
generatedResult.value.api_execution_time = response.api_execution_time_seconds
|
|
generatedResult.value.token_usage = response.token_usage
|
|
}
|
|
}
|
|
|
|
} else if (response.status === 'failed') {
|
|
completed = true
|
|
generationError.value = response.failed_reason || 'Generation failed on server'
|
|
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
|
|
}
|
|
|
|
const restoreGeneration = async (gen) => {
|
|
prompt.value = gen.prompt
|
|
|
|
const foundQuality = qualityOptions.value.find(opt => opt.key === gen.quality)
|
|
if (foundQuality) quality.value = foundQuality
|
|
|
|
const foundAspect = aspectRatioOptions.value.find(opt => opt.key === gen.aspect_ratio)
|
|
if (foundAspect) aspectRatio.value = foundAspect
|
|
|
|
if (gen.status === 'done' && gen.result_list && gen.result_list.length > 0) {
|
|
// We need to fetch details or just display the image
|
|
// history list usually has the main image preview
|
|
generatedResult.value = {
|
|
type: 'assets',
|
|
// Mocking asset object structure from history usage in DetailView
|
|
assets: gen.result_list.map(id => ({
|
|
id,
|
|
url: `/assets/${id}`, // This might need adjustment based on how API serves files
|
|
// Ideally history API should return full asset objects or URLs.
|
|
// If not, we rely on the implementation in CharacterDetailView:
|
|
// :src="API_URL + '/assets/' + gen.result_list[0]"
|
|
// So let's construct it similarly
|
|
})),
|
|
tech_prompt: gen.tech_prompt,
|
|
execution_time: gen.execution_time_seconds,
|
|
api_execution_time: gen.api_execution_time_seconds,
|
|
token_usage: gen.token_usage
|
|
}
|
|
}
|
|
}
|
|
|
|
// --- Prompt Assistant ---
|
|
|
|
const handleImprovePrompt = async () => {
|
|
if (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
|
|
}
|
|
}
|
|
|
|
// Image Preview Logic
|
|
const isImagePreviewVisible = ref(false)
|
|
const previewImage = ref(null)
|
|
|
|
const openImagePreview = (url, name = 'Image Preview', createdAt = null) => {
|
|
previewImage.value = { url, name, createdAt }
|
|
isImagePreviewVisible.value = true
|
|
}
|
|
|
|
const formatDate = (dateString) => {
|
|
if (!dateString) return ''
|
|
return new Date(dateString).toLocaleString()
|
|
}
|
|
|
|
const undoImprovePrompt = () => {
|
|
if (previousPrompt.value) {
|
|
const temp = prompt.value
|
|
prompt.value = previousPrompt.value
|
|
previousPrompt.value = temp
|
|
}
|
|
}
|
|
|
|
const clearPrompt = () => {
|
|
prompt.value = ''
|
|
}
|
|
|
|
// --- Reuse Logic ---
|
|
|
|
const reusePrompt = (gen) => {
|
|
if (gen.prompt) {
|
|
prompt.value = gen.prompt
|
|
}
|
|
}
|
|
|
|
const reuseAsset = (gen) => {
|
|
// Assets used as INPUT are now explicitly in assets_list (per user request)
|
|
const assetIds = gen.assets_list || []
|
|
|
|
if (assetIds && assetIds.length > 0) {
|
|
selectedAssets.value = assetIds.map(id => {
|
|
// Check if we already have the full asset object loaded to get the name/type
|
|
const existing = allAssets.value.find(a => a.id === id)
|
|
if (existing) return existing
|
|
|
|
// Fallback: Construct object to display thumbnail
|
|
return {
|
|
id,
|
|
url: `/assets/${id}`,
|
|
name: 'Asset ' + id.substring(0, 6) // Placeholder name
|
|
}
|
|
})
|
|
} else {
|
|
console.warn("No linked/input assets found in history object:", gen)
|
|
}
|
|
}
|
|
|
|
const useResultAsReference = (gen) => {
|
|
// Result (output) is now in result_list
|
|
if (gen.result_list && gen.result_list.length > 0) {
|
|
// Appends the generated assets to the selection
|
|
const newAssets = gen.result_list.map(id => ({
|
|
id,
|
|
url: `/assets/${id}`
|
|
}))
|
|
|
|
// Filter out duplicates
|
|
const existingIds = new Set(selectedAssets.value.map(a => a.id))
|
|
newAssets.forEach(asset => {
|
|
if (!existingIds.has(asset.id)) {
|
|
selectedAssets.value.push(asset)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
// --- Utils ---
|
|
|
|
const copyToClipboard = () => {
|
|
// Implement if needed for prompt copying
|
|
}
|
|
|
|
|
|
|
|
// --- Lifecycle ---
|
|
onMounted(() => {
|
|
loadHistory()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col h-full p-8 overflow-y-auto text-slate-100">
|
|
<!-- Main Content (Sidebar removed) -->
|
|
<div class="flex-1 flex flex-col">
|
|
<header class="mb-8">
|
|
<h1 class="text-4xl font-bold m-0">Image Generation</h1>
|
|
<p class="mt-2 mb-0 text-slate-400">Create stunning visuals using your assets</p>
|
|
</header>
|
|
|
|
<div class="flex flex-col lg:flex-row gap-8 h-full pb-8">
|
|
<!-- Left Panel: Settings -->
|
|
<div class="flex-1 max-w-xl flex flex-col gap-6">
|
|
<!-- Settings Card -->
|
|
<div class="glass-panel p-6 rounded-2xl border border-white/5 bg-white/5 flex flex-col gap-6">
|
|
|
|
<!-- Quality & Aspect Ratio -->
|
|
<div class="grid grid-cols-2 gap-6">
|
|
<div class="flex flex-col gap-2">
|
|
<label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Quality</label>
|
|
<div class="flex bg-slate-900/50 p-1 rounded-lg border border-white/10">
|
|
<div v-for="option in qualityOptions" :key="option.key" @click="quality = option"
|
|
class="flex-1 text-center py-1.5 cursor-pointer rounded-md text-xs font-medium transition-all"
|
|
:class="quality.key === option.key ? 'bg-white/10 text-white shadow-sm' : 'text-slate-500 hover:text-slate-300'">
|
|
{{ option.value }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-2">
|
|
<label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Aspect
|
|
Ratio</label>
|
|
<div class="flex bg-slate-900/50 p-1 rounded-lg border border-white/10">
|
|
<div v-for="option in aspectRatioOptions" :key="option.key"
|
|
@click="aspectRatio = option"
|
|
class="flex-1 text-center py-1.5 cursor-pointer rounded-md text-xs font-medium transition-all"
|
|
:class="aspectRatio.key === option.key ? 'bg-white/10 text-white shadow-sm' : 'text-slate-500 hover:text-slate-300'">
|
|
{{ option.value }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Prompt Input -->
|
|
<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">Description</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" title="Undo" />
|
|
<Button icon="pi pi-sparkles" label="Improve" :loading="isImprovingPrompt"
|
|
:disabled="prompt.length <= 10" size="small"
|
|
class="!py-0.5 !px-2 !text-[10px] 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" size="small"
|
|
class="!py-0.5 !px-2 !text-[10px] bg-slate-800 hover:bg-slate-700 border-white/10 text-slate-400"
|
|
@click="clearPrompt" />
|
|
</div>
|
|
</div>
|
|
<Textarea v-model="prompt" rows="5" autoResize
|
|
placeholder="Describe the image you want to generate..."
|
|
class="w-full bg-slate-900 border-white/10 text-white rounded-lg p-3 focus:border-violet-500 transition-all text-sm resize-none" />
|
|
</div>
|
|
|
|
<!-- Assets Selection -->
|
|
<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">Reference
|
|
Assets ({{ selectedAssets.length }})</label>
|
|
<input type="file" ref="fileInput" class="hidden" accept="image/*"
|
|
@change="onFileSelected" />
|
|
<div class="flex gap-2">
|
|
<Button :label="isUploading ? 'Uploading...' : 'Upload'"
|
|
:icon="isUploading ? 'pi pi-spin pi-spinner' : 'pi pi-upload'"
|
|
:loading="isUploading" size="small" text
|
|
class="!text-xs !py-1 !px-2 text-violet-400 hover:bg-violet-500/10"
|
|
@click="triggerFileUpload" />
|
|
<Button label="Add Asset" icon="pi pi-plus" size="small" text
|
|
class="!text-xs !py-1 !px-2 text-violet-400 hover:bg-violet-500/10"
|
|
@click="openAssetModal" />
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="selectedAssets.length > 0" class="flex flex-wrap gap-2">
|
|
<div v-for="(asset, index) in selectedAssets" :key="asset.id"
|
|
class="relative w-16 h-16 rounded-lg overflow-hidden border border-violet-500/50 group">
|
|
<img :src="API_URL + asset.url + '?thumbnail=true'"
|
|
class="w-full h-full object-cover" />
|
|
<div @click="removeSelectedAsset(index)"
|
|
class="absolute inset-0 bg-black/60 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer">
|
|
<i class="pi pi-times text-white text-xs"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else
|
|
class="text-center py-4 text-xs text-slate-500 border border-dashed border-white/10 rounded-lg">
|
|
No assets selected
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Generate Button -->
|
|
<div class="mt-auto">
|
|
<div class="flex flex-col gap-2 mb-3">
|
|
<div class="flex items-center gap-2">
|
|
<Checkbox v-model="sendToTelegram" :binary="true" inputId="tg-check-gen" />
|
|
<label for="tg-check-gen"
|
|
class="text-xs text-slate-400 cursor-pointer select-none">Send result to
|
|
Telegram</label>
|
|
</div>
|
|
<div v-if="sendToTelegram && !isTelegramIdSaved"
|
|
class="animate-in fade-in slide-in-from-top-1 duration-200">
|
|
<InputText v-model="telegramId" placeholder="Enter Telegram ID"
|
|
class="w-full !text-xs !py-1.5" @blur="saveTelegramId" />
|
|
<small class="text-[10px] text-slate-500 block mt-0.5">ID will be saved for future
|
|
use</small>
|
|
</div>
|
|
</div>
|
|
<Button :label="isGenerating ? 'Generating...' : 'Generate Image'"
|
|
:icon="isGenerating ? 'pi pi-spin pi-spinner' : 'pi pi-magic'" :loading="isGenerating"
|
|
@click="handleGenerate"
|
|
class="w-full py-3 text-sm 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.01] transition-all" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Panel: Result & History -->
|
|
<div
|
|
class="flex-1 glass-panel p-6 rounded-2xl border border-white/5 bg-gradient-to-br from-white/5 to-transparent flex flex-col relative overflow-hidden">
|
|
|
|
<!-- Result View -->
|
|
<div class="flex-1 flex flex-col relative z-10 min-h-[300px]">
|
|
<div v-if="isGenerating"
|
|
class="absolute inset-0 flex flex-col items-center justify-center z-20 bg-black/20 backdrop-blur-sm rounded-xl">
|
|
<ProgressSpinner style="width: 50px; height: 50px" strokeWidth="4"
|
|
animationDuration=".8s" />
|
|
<p
|
|
class="mt-4 text-sm font-bold bg-gradient-to-r from-violet-400 to-cyan-400 bg-clip-text text-transparent">
|
|
{{ generationStatus || 'Initializing...' }}</p>
|
|
<ProgressBar :value="generationProgress" class="w-48 h-1.5 mt-2 !bg-slate-700"
|
|
:pt="{ value: { class: '!bg-violet-500' } }" />
|
|
<span class="text-[10px] text-slate-500 font-mono mt-1">{{ generationProgress }}%</span>
|
|
</div>
|
|
|
|
<div v-if="generationError && !isGenerating"
|
|
class="flex-1 flex flex-col items-center justify-center p-6 text-center animate-in fade-in zoom-in duration-300">
|
|
<div
|
|
class="w-16 h-16 rounded-full bg-red-500/10 flex items-center justify-center mb-4 border border-red-500/20">
|
|
<i class="pi pi-times text-red-400 text-2xl"></i>
|
|
</div>
|
|
<h3 class="text-lg font-bold text-slate-200 mb-2">Generation Failed</h3>
|
|
<p class="text-sm text-red-400 bg-red-500/5 px-4 py-2 rounded-lg border border-red-500/10">
|
|
{{ generationError }}
|
|
</p>
|
|
<Button label="Try Again" icon="pi pi-refresh" class="mt-6" @click="handleGenerate"
|
|
severity="secondary" />
|
|
</div>
|
|
|
|
<div v-if="generatedResult && !isGenerating && !generationError"
|
|
class="flex-1 min-h-0 flex flex-col">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h2 class="text-lg font-bold">Result</h2>
|
|
</div>
|
|
|
|
<div
|
|
class="flex-1 bg-black/20 rounded-xl overflow-hidden border border-white/10 relative group min-h-0">
|
|
<!-- Handling "assets" type result (most common here) -->
|
|
<template
|
|
v-if="generatedResult.type === 'assets' && generatedResult.assets && generatedResult.assets.length > 0">
|
|
<!-- Displaying the first asset as main preview -->
|
|
<img :src="API_URL + '/assets/' + generatedResult.assets[0].id"
|
|
@click="openImagePreview(API_URL + '/assets/' + generatedResult.assets[0].id, 'Generated Result', new Date().toISOString())"
|
|
class="w-full h-full object-contain cursor-pointer hover:scale-[1.01] transition-transform duration-300" />
|
|
</template>
|
|
<template v-else>
|
|
<div class="w-full h-full flex items-center justify-center text-slate-500">
|
|
Image generated (check History)
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- Tech Prompt Display -->
|
|
<div v-if="generatedResult.tech_prompt" class="w-full mt-4 flex-shrink-0">
|
|
<div class="bg-black/20 rounded-lg p-3 border border-white/5 text-left">
|
|
<p class="text-[10px] text-slate-500 font-bold uppercase mb-1">Technical Prompt</p>
|
|
<p
|
|
class="text-xs text-slate-400 font-mono leading-relaxed max-h-24 overflow-y-auto custom-scrollbar">
|
|
{{
|
|
generatedResult.tech_prompt }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Generation Metrics -->
|
|
<div v-if="generatedResult.execution_time || generatedResult.token_usage"
|
|
class="w-full mt-2 flex flex-wrap gap-2 flex-shrink-0">
|
|
<div v-if="generatedResult.execution_time"
|
|
class="bg-black/20 px-2 py-1 rounded text-[10px] text-slate-500 font-mono border border-white/5"
|
|
title="Total Execution Time">
|
|
<i class="pi pi-clock mr-1"></i>{{ generatedResult.execution_time.toFixed(2) }}s
|
|
</div>
|
|
<div v-if="generatedResult.api_execution_time"
|
|
class="bg-black/20 px-2 py-1 rounded text-[10px] text-slate-500 font-mono border border-white/5"
|
|
title="API Execution Time">
|
|
<i class="pi pi-server mr-1"></i>{{ generatedResult.api_execution_time.toFixed(2)
|
|
}}s
|
|
</div>
|
|
<div v-if="generatedResult.token_usage"
|
|
class="bg-black/20 px-2 py-1 rounded text-[10px] text-slate-500 font-mono border border-white/5"
|
|
title="Token Usage">
|
|
<i class="pi pi-bolt mr-1"></i>{{ generatedResult.token_usage }} toks
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else-if="!isGenerating && !generatedResult && !generationError"
|
|
class="flex-1 flex flex-col items-center justify-center text-slate-500 gap-4 opacity-50">
|
|
<i class="pi pi-image text-4xl"></i>
|
|
<p class="text-sm">Ready to generate</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- History List -->
|
|
<div class="mt-6 border-t border-white/5 pt-4 flex flex-col max-h-[250px]">
|
|
<div class="flex justify-between items-center mb-2 px-1">
|
|
<h3 class="text-xs font-bold text-slate-400 uppercase tracking-wider">History ({{
|
|
historyTotal }})</h3>
|
|
<Button icon="pi pi-refresh" text size="small" class="!p-1 !w-6 !h-6 text-slate-500"
|
|
@click="loadHistory" />
|
|
</div>
|
|
|
|
<div class="flex-1 overflow-y-auto pr-2 custom-scrollbar flex flex-col gap-2">
|
|
<div v-for="gen in historyGenerations" :key="gen.id"
|
|
class="glass-panel p-2 rounded-lg border border-white/5 flex flex-col gap-2 hover:bg-white/10 transition-colors group">
|
|
<div class="flex gap-3 items-start cursor-pointer" @click="restoreGeneration(gen)">
|
|
<div
|
|
class="w-12 h-12 rounded bg-black/40 border border-white/10 overflow-hidden flex-shrink-0 mt-0.5">
|
|
<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" />
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-xs text-slate-300 truncate font-medium">{{ gen.prompt }}</p>
|
|
|
|
<!-- Tech Prompt Preview -->
|
|
<p v-if="gen.tech_prompt"
|
|
class="text-[9px] text-slate-500 truncate mt-0.5 font-mono opacity-80">
|
|
{{ gen.tech_prompt }}
|
|
</p>
|
|
|
|
<div class="flex gap-2 items-center text-[10px] text-slate-500 mt-1">
|
|
<span>{{ new Date(gen.created_at).toLocaleDateString() }}</span>
|
|
<span class="capitalize"
|
|
:class="gen.status === 'done' ? 'text-green-500' : 'text-amber-500'">{{
|
|
gen.status }}</span>
|
|
<i v-if="gen.failed_reason" v-tooltip.right="gen.failed_reason"
|
|
class="pi pi-exclamation-circle text-red-500"
|
|
style="font-size: 12px;" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="flex gap-2 mt-1 border-t border-white/5 pt-2">
|
|
<Button icon="pi pi-copy" label="Prompt" size="small" text
|
|
class="!text-[10px] !py-0.5 !px-2 text-slate-400 hover:bg-white/5 flex-1"
|
|
@click.stop="reusePrompt(gen)" v-tooltip.bottom="'Use this prompt'" />
|
|
<Button icon="pi pi-images" label="Asset" size="small" text
|
|
class="!text-[10px] !py-0.5 !px-2 text-slate-400 hover:bg-white/5 flex-1"
|
|
@click.stop="reuseAsset(gen)" v-tooltip.bottom="'Use original assets'"
|
|
:disabled="gen.status !== 'done' || gen.assets_list.length == 0" />
|
|
<Button icon="pi pi-reply" label="Result" size="small" text
|
|
class="!text-[10px] !py-0.5 !px-2 text-slate-400 hover:bg-white/5 flex-1"
|
|
:disabled="gen.status !== 'done' || gen.result_list.length == 0"
|
|
@click.stop="useResultAsReference(gen)"
|
|
v-tooltip.bottom="'Use result as reference'" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="historyTotal > historyRows" class="mt-2">
|
|
<Paginator :first="historyFirst" :rows="historyRows" :totalRecords="historyTotal"
|
|
@page="onHistoryPage" :template="{ default: 'PrevPageLink PageLinks NextPageLink' }"
|
|
class="!bg-transparent !border-none !p-0 !text-xs" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Asset Selection Modal -->
|
|
<Dialog v-model:visible="isAssetModalVisible" modal header="Select Reference Assets"
|
|
:style="{ width: '80vw', maxWidth: '1000px' }" class="glass-panel rounded-2xl">
|
|
<div class="flex flex-col h-[70vh]">
|
|
<div v-if="allAssets.length > 0" class="flex-1 overflow-y-auto p-1 text-slate-100">
|
|
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
|
|
<div v-for="asset in allAssets" :key="asset.id" @click="toggleAssetSelection(asset)"
|
|
class="aspect-square rounded-xl overflow-hidden cursor-pointer relative border transition-all"
|
|
:class="isAssetSelected(asset.id) ? 'border-violet-500 ring-2 ring-violet-500/20' : 'border-white/10 hover:border-white/30'">
|
|
<img :src="API_URL + asset.url + '?thumbnail=true'" class="w-full h-full object-cover" />
|
|
<div v-if="isAssetSelected(asset.id)"
|
|
class="absolute inset-0 bg-violet-600/30 flex items-center justify-center">
|
|
<div class="bg-violet-600 rounded-full p-1 shadow-lg">
|
|
<i class="pi pi-check text-white text-xs font-bold"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="flex-1 flex items-center justify-center text-slate-500">
|
|
No assets found
|
|
</div>
|
|
|
|
<div class="mt-4 pt-4 border-t border-white/10 flex justify-between items-center text-slate-100">
|
|
<span class="text-sm text-slate-400">{{ selectedAssets.length }} selected</span>
|
|
<div class="flex gap-4 items-center">
|
|
<Paginator :first="assetsFirst" :rows="assetsRows" :totalRecords="assetsTotalRecords"
|
|
@page="onAssetsPage" class="!bg-transparent !border-none !p-0" />
|
|
<Button label="Done" @click="isAssetModalVisible = false" class="!px-6" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Dialog>
|
|
|
|
<!-- Image Preview Modal -->
|
|
<Dialog v-model:visible="isImagePreviewVisible" modal dismissableMask
|
|
:header="previewImage?.name || 'Image Preview'" :style="{ width: '90vw', maxWidth: '800px' }"
|
|
class="glass-panel rounded-2xl">
|
|
<div v-if="previewImage" class="flex flex-col items-center">
|
|
<img :src="previewImage.url" :alt="previewImage.name"
|
|
class="max-w-full max-h-[70vh] rounded-xl object-contain shadow-2xl" />
|
|
<div class="mt-6 text-center">
|
|
<h2 class="text-2xl font-bold mb-2">{{ previewImage.name }}</h2>
|
|
<p v-if="previewImage.createdAt" class="text-slate-400">{{ formatDate(previewImage.createdAt) }}</p>
|
|
</div>
|
|
</div>
|
|
</Dialog>
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-track {
|
|
background: rgba(255, 255, 255, 0.02);
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
}
|
|
</style>
|