feat: Add image generation and image-to-prompt features, integrate Telegram for generation results, and enhance asset management.
This commit is contained in:
@@ -28,6 +28,16 @@ const router = createRouter({
|
||||
path: '/characters/:id',
|
||||
name: 'character-detail',
|
||||
component: () => import('../views/CharacterDetailView.vue')
|
||||
},
|
||||
{
|
||||
path: '/image-to-prompt',
|
||||
name: 'image-to-prompt',
|
||||
component: () => import('../views/ImageToPromptView.vue')
|
||||
},
|
||||
{
|
||||
path: '/generation',
|
||||
name: 'generation',
|
||||
component: () => import('../views/ImageGenerationView.vue')
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
@@ -41,5 +41,27 @@ export const dataService = {
|
||||
}
|
||||
})
|
||||
return response.data
|
||||
},
|
||||
|
||||
generatePromptFromImage: async (files, prompt) => {
|
||||
const formData = new FormData()
|
||||
|
||||
// Handle single or multiple files
|
||||
const fileArray = Array.isArray(files) ? files : [files]
|
||||
fileArray.forEach(file => {
|
||||
formData.append('images', file)
|
||||
})
|
||||
|
||||
if (prompt) {
|
||||
formData.append('prompt', prompt)
|
||||
}
|
||||
|
||||
const response = await api.post('/generations/prompt-from-image', formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
})
|
||||
|
||||
return response.data.prompt
|
||||
}
|
||||
}
|
||||
|
||||
@@ -96,17 +96,26 @@ const handleLogout = () => {
|
||||
|
||||
<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('/')">
|
||||
@click="router.push('/')" v-tooltip.right="'Home'">
|
||||
<span class="text-2xl">🏠</span>
|
||||
</div>
|
||||
<div
|
||||
<div v-tooltip.right="'Assets'"
|
||||
class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 bg-white/10 text-slate-50">
|
||||
<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('/characters')">
|
||||
@click="router.push('/generation')" v-tooltip.right="'Image 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>
|
||||
|
||||
<!-- Pagination
|
||||
<div v-if="totalRecords > rows" class="mt-auto py-6">
|
||||
@@ -167,7 +176,8 @@ const handleLogout = () => {
|
||||
class="glass-panel rounded-2xl overflow-hidden transition-all duration-300 cursor-pointer border border-white/5 hover:-translate-y-1 hover:border-white/20 hover:shadow-2xl">
|
||||
<!-- Media Preview -->
|
||||
<div class="h-70 bg-black/30 relative overflow-hidden">
|
||||
<img :src="API_URL + asset.url || 'https://via.placeholder.com/300'" :alt="asset.name"
|
||||
<img :src="(API_URL + asset.url + '?thumbnail=true') || 'https://via.placeholder.com/300'"
|
||||
:alt="asset.name"
|
||||
class="w-full h-full object-cover transition-transform duration-500 hover:scale-105" />
|
||||
<div
|
||||
class="absolute top-2.5 right-2.5 bg-black/60 backdrop-blur-sm px-3 py-1 rounded-full text-xs uppercase font-semibold text-white z-10">
|
||||
|
||||
@@ -10,9 +10,11 @@ import Dialog from 'primevue/dialog'
|
||||
import Textarea from 'primevue/textarea'
|
||||
import SelectButton from 'primevue/selectbutton'
|
||||
import FileUpload from 'primevue/fileupload'
|
||||
import Checkbox from 'primevue/checkbox'
|
||||
import ProgressBar from 'primevue/progressbar'
|
||||
import Message from 'primevue/message'
|
||||
import ProgressSpinner from 'primevue/progressspinner'
|
||||
import InputText from 'primevue/inputtext'
|
||||
import Tabs from 'primevue/tabs'
|
||||
import TabList from 'primevue/tablist'
|
||||
import Tab from 'primevue/tab'
|
||||
@@ -176,6 +178,16 @@ const prompt = ref('')
|
||||
const isGenerating = ref(false)
|
||||
const generationStatus = ref('')
|
||||
const generationProgress = ref(0)
|
||||
const sendToTelegram = ref(false)
|
||||
const telegramId = ref(localStorage.getItem('telegram_id') || '')
|
||||
const isTelegramIdSaved = ref(!!localStorage.getItem('telegram_id'))
|
||||
|
||||
const saveTelegramId = () => {
|
||||
if (telegramId.value) {
|
||||
localStorage.setItem('telegram_id', telegramId.value)
|
||||
isTelegramIdSaved.value = true
|
||||
}
|
||||
}
|
||||
const generationSuccess = ref(false)
|
||||
const generatedResult = ref(null)
|
||||
|
||||
@@ -197,6 +209,10 @@ const toggleAssetSelection = (asset) => {
|
||||
}
|
||||
}
|
||||
|
||||
const removeSelectedAsset = (index) => {
|
||||
selectedAssets.value.splice(index, 1)
|
||||
}
|
||||
|
||||
const quality = ref({
|
||||
key: 'TWOK',
|
||||
value: '2K'
|
||||
@@ -231,6 +247,63 @@ const onAssetsPage = (event) => {
|
||||
loadAssets()
|
||||
}
|
||||
|
||||
// Hover Zoom Logic
|
||||
const hoveredThumbnail = ref(null)
|
||||
let hoverTimeout = null
|
||||
|
||||
const onThumbnailEnter = (event, url) => {
|
||||
if (hoverTimeout) clearTimeout(hoverTimeout)
|
||||
const rect = event.target.getBoundingClientRect()
|
||||
hoveredThumbnail.value = {
|
||||
url,
|
||||
style: {
|
||||
top: rect.top + 'px',
|
||||
left: rect.left + 'px',
|
||||
width: rect.width + 'px',
|
||||
height: rect.height + 'px'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const onThumbnailLeave = () => {
|
||||
hoverTimeout = setTimeout(() => {
|
||||
hoveredThumbnail.value = null
|
||||
}, 50)
|
||||
}
|
||||
|
||||
// Global Asset Selection
|
||||
const allAssets = ref([])
|
||||
const isAssetSelectionVisible = ref(false)
|
||||
const modalAssetsFirst = ref(0)
|
||||
const modalAssetsRows = ref(20)
|
||||
const modalAssetsTotal = ref(0)
|
||||
|
||||
const loadAllAssets = async () => {
|
||||
try {
|
||||
const response = await dataService.getAssets(modalAssetsRows.value, modalAssetsFirst.value, 'all')
|
||||
if (response && response.assets) {
|
||||
allAssets.value = response.assets
|
||||
modalAssetsTotal.value = response.total_count || 0
|
||||
} else {
|
||||
allAssets.value = []
|
||||
modalAssetsTotal.value = 0
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to load all assets', e)
|
||||
}
|
||||
}
|
||||
|
||||
const openAssetSelectionModal = () => {
|
||||
isAssetSelectionVisible.value = true
|
||||
loadAllAssets()
|
||||
}
|
||||
|
||||
const onModalAssetsPage = (event) => {
|
||||
modalAssetsFirst.value = event.first
|
||||
modalAssetsRows.value = event.rows
|
||||
loadAllAssets()
|
||||
}
|
||||
|
||||
const pollStatus = async (id) => {
|
||||
let completed = false
|
||||
while (!completed && isGenerating.value) {
|
||||
@@ -251,7 +324,11 @@ const pollStatus = async (id) => {
|
||||
const resultAssets = assets.filter(a => response.assets_list.includes(a.id))
|
||||
generatedResult.value = {
|
||||
type: 'assets',
|
||||
assets: resultAssets
|
||||
assets: resultAssets,
|
||||
tech_prompt: response.tech_prompt,
|
||||
execution_time: response.execution_time_seconds,
|
||||
api_execution_time: response.api_execution_time_seconds,
|
||||
token_usage: response.token_usage
|
||||
}
|
||||
}
|
||||
|
||||
@@ -291,7 +368,11 @@ const restoreGeneration = async (gen) => {
|
||||
selectedAssets.value = assets.filter(a => gen.assets_list.includes(a.id))
|
||||
generatedResult.value = {
|
||||
type: 'assets',
|
||||
assets: selectedAssets.value
|
||||
assets: selectedAssets.value,
|
||||
tech_prompt: gen.tech_prompt,
|
||||
execution_time: gen.execution_time_seconds,
|
||||
api_execution_time: gen.api_execution_time_seconds,
|
||||
token_usage: gen.token_usage
|
||||
}
|
||||
generationSuccess.value = true
|
||||
}
|
||||
@@ -357,12 +438,23 @@ const handleGenerate = async () => {
|
||||
generatedResult.value = null
|
||||
|
||||
try {
|
||||
if (sendToTelegram.value && !telegramId.value) {
|
||||
alert("Please enter your Telegram ID")
|
||||
return
|
||||
}
|
||||
|
||||
if (telegramId.value && telegramId.value !== localStorage.getItem('telegram_id')) {
|
||||
localStorage.setItem('telegram_id', telegramId.value)
|
||||
isTelegramIdSaved.value = true
|
||||
}
|
||||
|
||||
const payload = {
|
||||
linked_character_id: character.value?.id,
|
||||
aspect_ratio: aspectRatio.value.key,
|
||||
quality: quality.value.key,
|
||||
prompt: prompt.value,
|
||||
assets_list: selectedAssets.value.map(a => a.id)
|
||||
assets_list: selectedAssets.value.map(a => a.id),
|
||||
telegram_id: sendToTelegram.value ? telegramId.value : null
|
||||
}
|
||||
|
||||
const response = await aiService.runGeneration(payload)
|
||||
@@ -393,31 +485,40 @@ const handleLogout = () => {
|
||||
<nav
|
||||
class="glass-panel w-14 lg:w-20 m-2 lg:m-4 flex flex-col items-center py-4 lg:py-6 rounded-2xl lg:rounded-3xl z-10 border border-white/5">
|
||||
<div class="mb-4 lg:mb-12 cursor-pointer" @click="goBack">
|
||||
<div
|
||||
class="w-8 lg:w-10 h-8 lg:h-10 bg-white/10 rounded-lg lg:rounded-xl flex items-center justify-center font-bold text-white text-lg lg:text-xl transition-all duration-300 hover:bg-white/20">
|
||||
<div class="w-8 lg:w-10 h-8 lg:h-10 bg-white/10 rounded-lg lg:rounded-xl flex items-center justify-center font-bold text-white text-lg lg:text-xl transition-all duration-300 hover:bg-white/20"
|
||||
v-tooltip.right="'Back'">
|
||||
←
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 flex flex-col gap-4 lg:gap-6 w-full items-center">
|
||||
<div class="w-10 lg:w-12 h-10 lg:h-12 flex items-center justify-center rounded-lg lg:rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
|
||||
@click="router.push('/')">
|
||||
@click="router.push('/')" v-tooltip.right="'Home'">
|
||||
<span class="text-xl lg:text-2xl">🏠</span>
|
||||
</div>
|
||||
<div class="w-10 lg:w-12 h-10 lg:h-12 flex items-center justify-center rounded-lg lg:rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
|
||||
@click="router.push('/assets')">
|
||||
@click="router.push('/assets')" v-tooltip.right="'Assets'">
|
||||
<span class="text-xl lg:text-2xl">📂</span>
|
||||
</div>
|
||||
<!-- Image Generation -->
|
||||
<div class="w-10 lg:w-12 h-10 lg:h-12 flex items-center justify-center rounded-lg lg: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-xl lg:text-2xl">🎨</span>
|
||||
</div>
|
||||
<div class="w-10 lg:w-12 h-10 lg:h-12 flex items-center justify-center rounded-lg lg:rounded-xl cursor-pointer transition-all duration-300 bg-white/10 text-slate-50 shadow-inner"
|
||||
@click="router.push('/')">
|
||||
@click="router.push('/')" v-tooltip.right="'Characters'">
|
||||
<span class="text-xl lg:text-2xl">👥</span>
|
||||
</div>
|
||||
<div class="w-10 lg:w-12 h-10 lg:h-12 flex items-center justify-center rounded-lg lg: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-xl lg:text-2xl">✨</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-auto flex flex-col items-center gap-4">
|
||||
<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"
|
||||
title="Logout">
|
||||
v-tooltip.right="'Logout'">
|
||||
<i class="pi pi-power-off"></i>
|
||||
</div>
|
||||
</div>
|
||||
@@ -543,291 +644,392 @@ const handleLogout = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="characterAssets.length > 0" class="flex flex-col gap-1.5">
|
||||
<label class="text-slate-400 text-[9px] font-semibold uppercase tracking-wider">Ref
|
||||
Assets ({{ selectedAssets.length }})</label>
|
||||
<div class="grid grid-cols-6 gap-1">
|
||||
<div v-for="asset in characterAssets" :key="asset.id"
|
||||
@click="toggleAssetSelection(asset)"
|
||||
class="relative aspect-[9/16] rounded overflow-hidden cursor-pointer border transition-all duration-200 hover:scale-200 hover:z-10"
|
||||
:class="selectedAssets.some(a => a.id === asset.id) ? 'border-violet-500 ring-1 ring-violet-500/20 shadow-lg' : 'border-white/5 opacity-60 hover:opacity-100 hover:border-white/20'">
|
||||
<img :src="API_URL + asset.url" class="w-full h-full object-cover" />
|
||||
<div v-if="selectedAssets.some(a => a.id === asset.id)"
|
||||
class="absolute inset-0 bg-violet-600/20 flex items-center justify-center">
|
||||
<i class="pi pi-check text-white text-[8px] drop-shadow-md" />
|
||||
<!-- Assets Selection -->
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<div class="flex justify-between items-center">
|
||||
<label
|
||||
class="text-slate-400 text-[9px] font-semibold uppercase tracking-wider">Ref
|
||||
Assets ({{ selectedAssets.length }})</label>
|
||||
<Button label="Add Asset" icon="pi pi-plus" size="small" text
|
||||
class="!text-[10px] !py-0.5 !px-1.5 text-violet-400 hover:bg-violet-500/10"
|
||||
@click="openAssetSelectionModal" />
|
||||
</div>
|
||||
|
||||
<div v-if="selectedAssets.length > 0" class="flex flex-wrap gap-1">
|
||||
<div v-for="(asset, index) in selectedAssets" :key="asset.id"
|
||||
class="relative w-10 h-10 rounded 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-[8px]"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else
|
||||
class="text-center py-2 text-[10px] text-slate-500 border border-dashed border-white/10 rounded-lg">
|
||||
No assets selected
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Removed Ref Assets section if characterAssets is empty, but it's already conditional -->
|
||||
|
||||
<div class="flex flex-col gap-1.5 mt-auto pt-1.5 border-t border-white/5">
|
||||
<Button :label="isGenerating ? 'Wait...' : `Generate`"
|
||||
:icon="isGenerating ? 'pi pi-spin pi-spinner' : 'pi pi-magic'"
|
||||
:loading="isGenerating" @click="handleGenerate"
|
||||
class="w-full py-2 text-[11px] font-bold bg-gradient-to-r from-violet-600 to-cyan-500 border-none rounded shadow transition-all hover:scale-[1.01] active:scale-[0.99]" />
|
||||
<div class="flex flex-col gap-2 mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox v-model="sendToTelegram" :binary="true" inputId="tg-check-char" />
|
||||
<label for="tg-check-char"
|
||||
class="text-[10px] 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-[10px] !py-1" @blur="saveTelegramId" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Message v-if="generationSuccess" severity="success" :closable="true"
|
||||
@close="generationSuccess = false">
|
||||
Success!
|
||||
</Message>
|
||||
<Button :label="isGenerating ? 'Wait...' : `Generate`"
|
||||
:icon="isGenerating ? 'pi pi-spin pi-spinner' : 'pi pi-magic'"
|
||||
:loading="isGenerating" @click="handleGenerate"
|
||||
class="w-full py-2 text-[11px] font-bold bg-gradient-to-r from-violet-600 to-cyan-500 border-none rounded shadow transition-all hover:scale-[1.01] active:scale-[0.99]" />
|
||||
|
||||
<Message v-if="generationSuccess" severity="success" :closable="true"
|
||||
@close="generationSuccess = false">
|
||||
Success!
|
||||
</Message>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="lg:col-span-3 glass-panel p-3 rounded-xl border border-white/5 bg-white/5 min-h-[300px] flex flex-col items-center justify-center text-center relative overflow-hidden">
|
||||
<div v-if="isGenerating" class="flex flex-col items-center gap-3 z-10 w-full px-12">
|
||||
<ProgressSpinner style="width: 40px; height: 40px" strokeWidth="4"
|
||||
animationDuration=".8s" fill="transparent" />
|
||||
<div class="text-center">
|
||||
<h3
|
||||
class="text-lg font-bold mb-0.5 bg-gradient-to-r from-violet-400 to-cyan-400 bg-clip-text text-transparent capitalize">
|
||||
{{ generationStatus || 'Creating...' }}</h3>
|
||||
<p class="text-[10px] text-slate-400">Processing using AI</p>
|
||||
</div>
|
||||
<ProgressBar :value="generationProgress" style="height: 6px; width: 100%"
|
||||
:showValue="false" class="rounded-full overflow-hidden !bg-slate-800" :pt="{
|
||||
value: { class: '!bg-gradient-to-r !from-violet-600 !to-cyan-500 !transition-all !duration-500' }
|
||||
}" />
|
||||
<span class="text-[10px] text-slate-500 font-mono">{{ generationProgress }}%</span>
|
||||
</div>
|
||||
|
||||
<div v-else-if="generatedResult"
|
||||
class="w-full h-full flex flex-col gap-3 animate-in fade-in zoom-in duration-300">
|
||||
<div class="flex justify-between items-center mb-1">
|
||||
<h2 class="text-lg font-bold m-0">Result</h2>
|
||||
<div class="flex gap-1">
|
||||
<Button icon="pi pi-download" text class="hover:bg-white/10 p-1 text-xs"
|
||||
@click="handleDownloadResults" title="Download results" />
|
||||
<Button icon="pi pi-share-alt" text class="hover:bg-white/10 p-1 text-xs" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="generatedResult.type === 'assets'"
|
||||
class="grid grid-cols-1 md:grid-cols-2 gap-2 overflow-y-auto">
|
||||
<div v-for="asset in generatedResult.assets" :key="asset.id"
|
||||
@click="openModal(asset)"
|
||||
class="h-80 rounded-xl overflow-hidden border border-white/10 shadow-xl aspect-[9/16] bg-black/20 cursor-pointer hover:border-violet-500/50 hover:scale-[1.01] transition-all duration-300">
|
||||
<img :src="API_URL + asset.url + '?thumbnail=true'"
|
||||
class="w-full h-full object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="generatedResult.type === 'image'"
|
||||
@click="openModal({ url: generatedResult.url, name: 'Generated Image', type: 'IMAGE' })"
|
||||
class="flex-1 rounded-xl overflow-hidden border border-white/10 shadow-xl cursor-pointer hover:border-violet-500/50 transition-all duration-300">
|
||||
<img :src="generatedResult.url" class="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div v-else-if="generatedResult.type === 'text'"
|
||||
class="flex-1 bg-slate-900/50 p-4 rounded-xl border border-white/10 text-left font-mono text-[11px] leading-tight overflow-y-auto">
|
||||
{{ generatedResult.content || generatedResult }}
|
||||
</div>
|
||||
|
||||
<!-- Tech Prompt Display -->
|
||||
<div v-if="generatedResult.tech_prompt" class="w-full mt-2">
|
||||
<div class="bg-black/20 rounded-lg p-2 border border-white/5 text-left">
|
||||
<p class="text-[9px] text-slate-500 font-bold uppercase mb-1">Technical
|
||||
Prompt</p>
|
||||
<p class="text-[10px] text-slate-400 font-mono leading-relaxed">{{
|
||||
generatedResult.tech_prompt }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Generation Metrics -->
|
||||
<div v-if="generatedResult.execution_time || generatedResult.token_usage"
|
||||
class="w-full mt-1 flex flex-wrap gap-2">
|
||||
<div v-if="generatedResult.execution_time"
|
||||
class="bg-black/20 px-2 py-1 rounded text-[9px] 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-[9px] 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-[9px] 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 class="flex flex-col items-center gap-2 text-slate-500 opacity-60">
|
||||
<i class="pi pi-image text-4xl" />
|
||||
<p class="text-sm font-medium">Ready</p>
|
||||
</div>
|
||||
|
||||
<!-- Generation History Section -->
|
||||
<div
|
||||
class="w-full mt-6 pt-4 border-t border-white/5 flex flex-col max-h-[400px] relative z-10">
|
||||
<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 v-if="historyTotal > 0" icon="pi pi-refresh" text size="small"
|
||||
class="!p-1 !w-6 !h-6 text-slate-500" @click="loadHistory" />
|
||||
</div>
|
||||
|
||||
<div v-if="historyGenerations.length === 0"
|
||||
class="py-10 text-center text-slate-600 italic text-xs">
|
||||
No previous generations.
|
||||
</div>
|
||||
|
||||
<div v-else class="flex-1 overflow-y-auto pr-2 custom-scrollbar flex flex-col gap-2">
|
||||
<div v-for="gen in historyGenerations" :key="gen.id" @click="restoreGeneration(gen)"
|
||||
class="glass-panel p-2 rounded-lg border border-white/5 flex gap-3 items-start hover:bg-white/10 cursor-pointer transition-colors group">
|
||||
<div class="w-12 h-12 rounded bg-black/40 border border-white/10 flex-shrink-0 mt-0.5 relative z-0"
|
||||
@mouseenter="onThumbnailEnter($event, API_URL + '/assets/' + gen.assets_list[0] + '?thumbnail=true')"
|
||||
@mouseleave="onThumbnailLeave">
|
||||
<img v-if="gen.assets_list && gen.assets_list.length > 0"
|
||||
:src="API_URL + '/assets/' + gen.assets_list[0] + '?thumbnail=true'"
|
||||
class="w-full h-full object-cover rounded opacity-100" />
|
||||
<div v-else
|
||||
class="w-full h-full flex items-center justify-center text-slate-700 overflow-hidden rounded">
|
||||
<i class="pi pi-image text-lg" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0 flex flex-col items-start gap-0.5">
|
||||
<p class="text-xs text-slate-300 truncate font-medium w-full text-left">
|
||||
{{
|
||||
gen.prompt }}</p>
|
||||
|
||||
<!-- Tech Prompt Preview -->
|
||||
<p v-if="gen.tech_prompt"
|
||||
class="text-[9px] text-slate-500 truncate w-full text-left font-mono opacity-80">
|
||||
{{ gen.tech_prompt }}
|
||||
</p>
|
||||
|
||||
<div class="flex gap-2 text-[10px] text-slate-500">
|
||||
<span>{{ new Date(gen.created_at).toLocaleDateString() }}</span>
|
||||
<span class="capitalize"
|
||||
:class="gen.status === 'done' ? 'text-green-500' : (gen.status === 'failed' ? 'text-red-500' : 'text-amber-500')">{{
|
||||
gen.status }}</span>
|
||||
</div>
|
||||
<!-- Metrics in history -->
|
||||
<div v-if="gen.execution_time_seconds || gen.token_usage"
|
||||
class="flex flex-wrap gap-2 text-[9px] text-slate-500 font-mono opacity-70">
|
||||
<span v-if="gen.execution_time_seconds" title="Total Time"><i
|
||||
class="pi pi-clock mr-0.5"></i>{{
|
||||
gen.execution_time_seconds.toFixed(1) }}s</span>
|
||||
<span v-if="gen.api_execution_time_seconds" title="API Time"><i
|
||||
class="pi pi-server mr-0.5"></i>{{
|
||||
gen.api_execution_time_seconds.toFixed(1) }}s</span>
|
||||
<span v-if="gen.token_usage" title="Tokens"><i
|
||||
class="pi pi-bolt mr-0.5"></i>{{ gen.token_usage }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Compact Pagination -->
|
||||
<div v-if="historyTotal > historyRows" class="mt-2 text-xs">
|
||||
<Paginator :first="historyFirst" :rows="historyRows" :totalRecords="historyTotal"
|
||||
@page="onHistoryPage" :template="{
|
||||
default: 'PrevPageLink PageLinks NextPageLink'
|
||||
}" class="!bg-transparent !border-none !p-0 !text-[10px]" :pt="{
|
||||
root: { class: '!p-0' },
|
||||
pcPageButton: { root: ({ context }) => ({ class: ['!min-w-[24px] !h-6 !text-[10px] !rounded-md', context.active ? '!bg-violet-600/20 !text-violet-400' : '!bg-transparent'] }) },
|
||||
pcNextPageButton: { root: { class: '!min-w-[24px] !h-6 !text-[10px]' } },
|
||||
pcPreviousPageButton: { root: { class: '!min-w-[24px] !h-6 !text-[10px]' } }
|
||||
}" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="absolute -bottom-20 -right-20 w-64 h-64 bg-violet-600/10 blur-[100px] rounded-full pointer-events-none">
|
||||
</div>
|
||||
<div
|
||||
class="absolute -top-20 -left-20 w-64 h-64 bg-cyan-600/10 blur-[100px] rounded-full pointer-events-none">
|
||||
</div>
|
||||
</div>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel value="1">
|
||||
<div class="glass-panel p-8 rounded-3xl border border-white/5 bg-white/5">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h2 class="text-2xl font-bold m-0">Linked Assets ({{ assetsTotalRecords }})</h2>
|
||||
<div class="flex gap-3">
|
||||
<Button v-if="isMultiSelectMode" :label="`Use in Generation (${bulkSelectedAssetIds.length})`"
|
||||
icon="pi pi-bolt" severity="success" :disabled="bulkSelectedAssetIds.length === 0"
|
||||
@click="handleUseInGeneration"
|
||||
class="!py-2 !px-4 !text-sm font-bold rounded-xl transition-all shadow-lg shadow-green-500/20" />
|
||||
|
||||
<Button :icon="isMultiSelectMode ? 'pi pi-times' : 'pi pi-list-check'"
|
||||
:severity="isMultiSelectMode ? 'danger' : 'secondary'"
|
||||
@click="isMultiSelectMode = !isMultiSelectMode" text
|
||||
class="!p-2 hover:bg-white/10 rounded-xl transition-all"
|
||||
:title="isMultiSelectMode ? 'Cancel Selection' : 'Multi-select'" />
|
||||
|
||||
<input type="file" ref="fileInput" class="hidden" accept="image/*" @change="onFileSelected" />
|
||||
<Button :label="isUploading ? 'Uploading...' : 'Upload Asset'"
|
||||
:icon="isUploading ? 'pi pi-spin pi-spinner' : 'pi pi-upload'" :loading="isUploading"
|
||||
@click="triggerFileUpload"
|
||||
class="!py-2 !px-4 !text-sm font-bold bg-white/5 hover:bg-white/10 border-white/10 text-white rounded-xl transition-all" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="characterAssets.length === 0"
|
||||
class="text-center py-16 text-slate-400 bg-white/[0.02] rounded-2xl">
|
||||
No assets linked to this character.
|
||||
</div>
|
||||
|
||||
<div v-else class="flex-1 flex flex-col">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-6">
|
||||
<div v-for="asset in paginatedCharacterAssets" :key="asset.id" @click="openModal(asset)"
|
||||
class="glass-panel rounded-2xl overflow-hidden border transition-all duration-300 cursor-pointer hover:-translate-y-1 relative"
|
||||
:class="[
|
||||
bulkSelectedAssetIds.includes(asset.id)
|
||||
? 'border-violet-500 bg-violet-500/10 shadow-lg shadow-violet-500/10'
|
||||
: isMultiSelectMode ? 'border-white/10 opacity-70 scale-[0.98]' : 'border-white/5 hover:border-white/20'
|
||||
]">
|
||||
<div class="h-70 relative overflow-hidden">
|
||||
<img :src="(API_URL + asset.url + '?thumbnail=true') || 'https://via.placeholder.com/300'"
|
||||
:alt="asset.name" class="w-full h-full object-cover" />
|
||||
|
||||
<div v-if="isMultiSelectMode"
|
||||
class="absolute inset-0 flex items-center justify-center bg-violet-900/20 backdrop-blur-[1px] transition-all"
|
||||
:class="bulkSelectedAssetIds.includes(asset.id) ? 'opacity-100' : 'opacity-0 hover:opacity-100'">
|
||||
<div class="w-12 h-12 rounded-full flex items-center justify-center border-2 transition-all"
|
||||
:class="bulkSelectedAssetIds.includes(asset.id) ? 'bg-violet-600 border-violet-400 scale-110 shadow-lg' : 'bg-black/40 border-white/40 scale-100'">
|
||||
<i class="pi pi-check text-white text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="lg:col-span-3 glass-panel p-3 rounded-xl border border-white/5 bg-white/5 min-h-[300px] flex flex-col items-center justify-center text-center relative overflow-hidden">
|
||||
<div v-if="isGenerating" class="flex flex-col items-center gap-3 z-10 w-full px-12">
|
||||
<ProgressSpinner style="width: 40px; height: 40px" strokeWidth="4"
|
||||
animationDuration=".8s" fill="transparent" />
|
||||
<div class="text-center">
|
||||
<h3
|
||||
class="text-lg font-bold mb-0.5 bg-gradient-to-r from-violet-400 to-cyan-400 bg-clip-text text-transparent capitalize">
|
||||
{{ generationStatus || 'Creating...' }}</h3>
|
||||
<p class="text-[10px] text-slate-400">Processing using AI</p>
|
||||
</div>
|
||||
<ProgressBar :value="generationProgress" style="height: 6px; width: 100%"
|
||||
class="rounded-full overflow-hidden !bg-slate-800" :pt="{
|
||||
value: { class: '!bg-gradient-to-r !from-violet-600 !to-cyan-500 !transition-all !duration-500' }
|
||||
}" />
|
||||
<span class="text-[10px] text-slate-500 font-mono">{{ generationProgress }}%</span>
|
||||
</div>
|
||||
|
||||
<div v-else-if="generatedResult"
|
||||
class="w-full h-full flex flex-col gap-3 animate-in fade-in zoom-in duration-300">
|
||||
<div class="flex justify-between items-center mb-1">
|
||||
<h2 class="text-lg font-bold m-0">Result</h2>
|
||||
<div class="flex gap-1">
|
||||
<Button icon="pi pi-download" text class="hover:bg-white/10 p-1 text-xs"
|
||||
@click="handleDownloadResults" title="Download results" />
|
||||
<Button icon="pi pi-share-alt" text class="hover:bg-white/10 p-1 text-xs" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="generatedResult.type === 'assets'"
|
||||
class="grid grid-cols-1 md:grid-cols-2 gap-2 overflow-y-auto">
|
||||
<div v-for="asset in generatedResult.assets" :key="asset.id"
|
||||
@click="openModal(asset)"
|
||||
class="h-80 rounded-xl overflow-hidden border border-white/10 shadow-xl aspect-[9/16] bg-black/20 cursor-pointer hover:border-violet-500/50 hover:scale-[1.01] transition-all duration-300">
|
||||
<img :src="API_URL + asset.url" class="w-full h-full object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="generatedResult.type === 'image'"
|
||||
@click="openModal({ url: generatedResult.url, name: 'Generated Image', type: 'IMAGE' })"
|
||||
class="flex-1 rounded-xl overflow-hidden border border-white/10 shadow-xl cursor-pointer hover:border-violet-500/50 transition-all duration-300">
|
||||
<img :src="generatedResult.url" class="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div v-else
|
||||
class="flex-1 bg-slate-900/50 p-4 rounded-xl border border-white/10 text-left font-mono text-[11px] leading-tight overflow-y-auto">
|
||||
{{ generatedResult.content || generatedResult }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="flex flex-col items-center gap-2 text-slate-500 opacity-60">
|
||||
<i class="pi pi-image text-4xl" />
|
||||
<p class="text-sm font-medium">Ready</p>
|
||||
</div>
|
||||
|
||||
<!-- Generation History Section -->
|
||||
<div class="w-full mt-6 pt-6 border-t border-white/5 flex flex-col gap-3 relative z-10">
|
||||
<div class="flex justify-between items-center px-1">
|
||||
<h3 class="text-xs font-bold text-slate-400 uppercase tracking-wider">Recent
|
||||
Generations ({{ historyTotal }})</h3>
|
||||
<Button v-if="historyTotal > 0" icon="pi pi-refresh" text
|
||||
class="!p-1 hover:bg-white/5 text-xs text-slate-500" @click="loadHistory" />
|
||||
</div>
|
||||
|
||||
<div v-if="historyGenerations.length === 0"
|
||||
class="py-10 text-center text-slate-600 italic text-[11px]">
|
||||
No previous generations.
|
||||
</div>
|
||||
|
||||
<div v-else
|
||||
class="flex flex-col gap-2 max-h-[400px] overflow-y-auto pr-2 custom-scrollbar">
|
||||
<div v-for="gen in historyGenerations" :key="gen.id"
|
||||
@click="restoreGeneration(gen)"
|
||||
class="glass-panel p-2.5 rounded-xl border border-white/5 flex gap-3 items-center bg-white/[0.02] hover:bg-white/[0.05] transition-all cursor-pointer group active:scale-[0.98]">
|
||||
<div
|
||||
class="w-14 h-14 rounded-lg overflow-hidden border border-white/10 bg-black/20 flex-shrink-0 relative">
|
||||
<img v-if="gen.assets_list && gen.assets_list.length > 0"
|
||||
:src="API_URL + '/assets/' + gen.assets_list[0]"
|
||||
class="w-full h-full object-cover transition-transform group-hover:scale-110" />
|
||||
<div v-else
|
||||
class="w-full h-full flex items-center justify-center text-slate-700">
|
||||
<i class="pi pi-image text-lg" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0 flex flex-col gap-1">
|
||||
<div class="flex justify-between items-start gap-2">
|
||||
<p class="text-[11px] text-slate-300 truncate font-medium">{{
|
||||
gen.prompt }}</p>
|
||||
<Tag :value="gen.status"
|
||||
:severity="gen.status === 'done' ? 'success' : (gen.status === 'failed' ? 'danger' : 'warning')"
|
||||
class="text-[8px] px-1 py-0 !h-auto uppercase" />
|
||||
</div>
|
||||
<div class="flex gap-2 text-[9px] text-slate-500 font-mono">
|
||||
<span>{{ new Date(gen.created_at).toLocaleDateString() }}</span>
|
||||
<span>•</span>
|
||||
<span>{{ gen.quality }}</span>
|
||||
<span>•</span>
|
||||
<span>{{ gen.aspect_ratio }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<Button icon="pi pi-chevron-right" text rounded size="small"
|
||||
class="opacity-0 group-hover:opacity-100 transition-opacity text-slate-400 !p-1" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Compact Pagination -->
|
||||
<div v-if="historyTotal > historyRows" class="mt-2 border-t border-white/5 pt-2">
|
||||
<Paginator :first="historyFirst" :rows="historyRows"
|
||||
:totalRecords="historyTotal" @page="onHistoryPage" :template="{
|
||||
default: 'PrevPageLink PageLinks NextPageLink'
|
||||
}" class="!bg-transparent !border-none !p-0 !text-[10px]" :pt="{
|
||||
root: { class: '!p-0' },
|
||||
pcPageButton: { root: ({ context }) => ({ class: ['!min-w-[24px] !h-6 !text-[10px] !rounded-md', context.active ? '!bg-violet-600/20 !text-violet-400' : '!bg-transparent'] }) },
|
||||
pcNextPageButton: { root: { class: '!min-w-[24px] !h-6 !text-[10px]' } },
|
||||
pcPreviousPageButton: { root: { class: '!min-w-[24px] !h-6 !text-[10px]' } }
|
||||
}" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="absolute -bottom-20 -right-20 w-64 h-64 bg-violet-600/10 blur-[100px] rounded-full pointer-events-none">
|
||||
</div>
|
||||
<div
|
||||
class="absolute -top-20 -left-20 w-64 h-64 bg-cyan-600/10 blur-[100px] rounded-full pointer-events-none">
|
||||
</div>
|
||||
class="absolute top-2 right-2 bg-black/60 backdrop-blur-sm px-2 py-1 rounded text-xs uppercase text-white">
|
||||
{{ asset.type }}
|
||||
</div>
|
||||
</div>
|
||||
</TabPanel>
|
||||
<div class="p-4">
|
||||
<h3 class="text-sm font-semibold m-0 whitespace-nowrap overflow-hidden text-ellipsis">
|
||||
{{ asset.name }}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TabPanel value="1">
|
||||
<div class="glass-panel p-8 rounded-3xl border border-white/5 bg-white/5">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h2 class="text-2xl font-bold m-0">Linked Assets ({{ assetsTotalRecords }})</h2>
|
||||
<div class="flex gap-3">
|
||||
<Button v-if="isMultiSelectMode"
|
||||
:label="`Use in Generation (${bulkSelectedAssetIds.length})`" icon="pi pi-bolt"
|
||||
severity="success" :disabled="bulkSelectedAssetIds.length === 0"
|
||||
@click="handleUseInGeneration"
|
||||
class="!py-2 !px-4 !text-sm font-bold rounded-xl transition-all shadow-lg shadow-green-500/20" />
|
||||
<!-- Pagination -->
|
||||
<div v-if="assetsTotalRecords > assetsRows" class="mt-8">
|
||||
<Paginator :first="assetsFirst" :rows="assetsRows" :totalRecords="assetsTotalRecords"
|
||||
@page="onAssetsPage" :template="{
|
||||
default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink'
|
||||
}" class="!bg-transparent !border-none !p-0" :pt="{
|
||||
root: { class: '!bg-transparent' },
|
||||
pcPageButton: {
|
||||
root: ({ context }) => ({
|
||||
class: [
|
||||
'!min-w-[40px] !h-10 !rounded-xl !border-none !transition-all !duration-300 !font-bold',
|
||||
context.active ? '!bg-violet-600 !text-white !shadow-lg' : '!bg-white/5 !text-slate-400 hover:!bg-white/10 hover:!text-slate-50'
|
||||
]
|
||||
})
|
||||
},
|
||||
pcFirstPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-xl !min-w-[40px] !h-10 hover:!bg-white/10 hover:!text-slate-50 transition-all' } },
|
||||
pcPreviousPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-xl !min-w-[40px] !h-10 hover:!bg-white/10 hover:!text-slate-50 transition-all' } },
|
||||
pcNextPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-xl !min-w-[40px] !h-10 hover:!bg-white/10 hover:!text-slate-50 transition-all' } },
|
||||
pcLastPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-xl !min-w-[40px] !h-10 hover:!bg-white/10 hover:!text-slate-50 transition-all' } }
|
||||
}" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TabPanel>
|
||||
|
||||
<Button :icon="isMultiSelectMode ? 'pi pi-times' : 'pi pi-list-check'"
|
||||
:severity="isMultiSelectMode ? 'danger' : 'secondary'"
|
||||
@click="isMultiSelectMode = !isMultiSelectMode" text
|
||||
class="!p-2 hover:bg-white/10 rounded-xl transition-all"
|
||||
:title="isMultiSelectMode ? 'Cancel Selection' : 'Multi-select'" />
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
</main>
|
||||
|
||||
<input type="file" ref="fileInput" class="hidden" accept="image/*"
|
||||
@change="onFileSelected" />
|
||||
<Button :label="isUploading ? 'Uploading...' : 'Upload Asset'"
|
||||
:icon="isUploading ? 'pi pi-spin pi-spinner' : 'pi pi-upload'"
|
||||
:loading="isUploading" @click="triggerFileUpload"
|
||||
class="!py-2 !px-4 !text-sm font-bold bg-white/5 hover:bg-white/10 border-white/10 text-white rounded-xl transition-all" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="loading" class="flex-1 p-8 overflow-y-auto flex flex-col gap-8">
|
||||
<Skeleton width="10rem" height="2rem" />
|
||||
<div class="glass-panel p-8 rounded-3xl">
|
||||
<div class="flex gap-8 items-center">
|
||||
<Skeleton shape="circle" size="9.5rem" />
|
||||
<div class="flex-1">
|
||||
<Skeleton width="20rem" height="3rem" class="mb-4" />
|
||||
<Skeleton width="15rem" height="2rem" class="mb-6" />
|
||||
<Skeleton width="100%" height="4rem" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="characterAssets.length === 0"
|
||||
class="text-center py-16 text-slate-400 bg-white/[0.02] rounded-2xl">
|
||||
No assets linked to this character.
|
||||
</div>
|
||||
<div v-else class="flex-1 flex items-center justify-center text-slate-400">
|
||||
Character not found.
|
||||
</div>
|
||||
|
||||
<div v-else class="flex-1 flex flex-col">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-6">
|
||||
<div v-for="asset in paginatedCharacterAssets" :key="asset.id"
|
||||
@click="openModal(asset)"
|
||||
class="glass-panel rounded-2xl overflow-hidden border transition-all duration-300 cursor-pointer hover:-translate-y-1 relative"
|
||||
:class="[
|
||||
bulkSelectedAssetIds.includes(asset.id)
|
||||
? 'border-violet-500 bg-violet-500/10 shadow-lg shadow-violet-500/10'
|
||||
: isMultiSelectMode ? 'border-white/10 opacity-70 scale-[0.98]' : 'border-white/5 hover:border-white/20'
|
||||
]">
|
||||
<div class="h-70 relative overflow-hidden">
|
||||
<img :src="API_URL + asset.url || 'https://via.placeholder.com/300'"
|
||||
:alt="asset.name" class="w-full h-full object-cover" />
|
||||
|
||||
<div v-if="isMultiSelectMode"
|
||||
class="absolute inset-0 flex items-center justify-center bg-violet-900/20 backdrop-blur-[1px] transition-all"
|
||||
:class="bulkSelectedAssetIds.includes(asset.id) ? 'opacity-100' : 'opacity-0 hover:opacity-100'">
|
||||
<div class="w-12 h-12 rounded-full flex items-center justify-center border-2 transition-all"
|
||||
:class="bulkSelectedAssetIds.includes(asset.id) ? 'bg-violet-600 border-violet-400 scale-110 shadow-lg' : 'bg-black/40 border-white/40 scale-100'">
|
||||
<i class="pi pi-check text-white text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="absolute top-2 right-2 bg-black/60 backdrop-blur-sm px-2 py-1 rounded text-xs uppercase text-white">
|
||||
{{ asset.type }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h3
|
||||
class="text-sm font-semibold m-0 whitespace-nowrap overflow-hidden text-ellipsis">
|
||||
{{ asset.name }}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div v-if="assetsTotalRecords > assetsRows" class="mt-8">
|
||||
<Paginator :first="assetsFirst" :rows="assetsRows"
|
||||
:totalRecords="assetsTotalRecords" @page="onAssetsPage" :template="{
|
||||
default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink'
|
||||
}" class="!bg-transparent !border-none !p-0" :pt="{
|
||||
root: { class: '!bg-transparent' },
|
||||
pcPageButton: {
|
||||
root: ({ context }) => ({
|
||||
class: [
|
||||
'!min-w-[40px] !h-10 !rounded-xl !border-none !transition-all !duration-300 !font-bold',
|
||||
context.active ? '!bg-violet-600 !text-white !shadow-lg' : '!bg-white/5 !text-slate-400 hover:!bg-white/10 hover:!text-slate-50'
|
||||
]
|
||||
})
|
||||
},
|
||||
pcFirstPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-xl !min-w-[40px] !h-10 hover:!bg-white/10 hover:!text-slate-50 transition-all' } },
|
||||
pcPreviousPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-xl !min-w-[40px] !h-10 hover:!bg-white/10 hover:!text-slate-50 transition-all' } },
|
||||
pcNextPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-xl !min-w-[40px] !h-10 hover:!bg-white/10 hover:!text-slate-50 transition-all' } },
|
||||
pcLastPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-xl !min-w-[40px] !h-10 hover:!bg-white/10 hover:!text-slate-50 transition-all' } }
|
||||
}" />
|
||||
</div>
|
||||
<Dialog v-model:visible="isModalVisible" modal dismissableMask header="Asset View"
|
||||
:style="{ width: '90vw', maxWidth: '800px' }" class="glass-panel rounded-2xl">
|
||||
<div v-if="selectedAsset" class="flex flex-col items-center">
|
||||
<img :src="selectedAsset.link ? API_URL + selectedAsset.link : (selectedAsset.url ? API_URL + selectedAsset.url : 'https://via.placeholder.com/800')"
|
||||
:alt="selectedAsset.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">{{ selectedAsset.name }}</h2>
|
||||
<p class="text-slate-400">{{ selectedAsset.type }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
<!-- Asset Selection Modal (Global) -->
|
||||
<Dialog v-model:visible="isAssetSelectionVisible" 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="selectedAssets.some(a => a.id === 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="selectedAssets.some(a => a.id === 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>
|
||||
</TabPanel>
|
||||
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
</main>
|
||||
|
||||
<div v-else-if="loading" class="flex-1 p-8 overflow-y-auto flex flex-col gap-8">
|
||||
<Skeleton width="10rem" height="2rem" />
|
||||
<div class="glass-panel p-8 rounded-3xl">
|
||||
<div class="flex gap-8 items-center">
|
||||
<Skeleton shape="circle" size="9.5rem" />
|
||||
<div class="flex-1">
|
||||
<Skeleton width="20rem" height="3rem" class="mb-4" />
|
||||
<Skeleton width="15rem" height="2rem" class="mb-6" />
|
||||
<Skeleton width="100%" height="4rem" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="flex-1 flex items-center justify-center text-slate-500">
|
||||
No assets found
|
||||
</div>
|
||||
|
||||
<div v-else class="flex-1 flex items-center justify-center text-slate-400">
|
||||
Character not found.
|
||||
</div>
|
||||
|
||||
<Dialog v-model:visible="isModalVisible" modal dismissableMask header="Asset View"
|
||||
:style="{ width: '90vw', maxWidth: '800px' }" class="glass-panel rounded-2xl">
|
||||
<div v-if="selectedAsset" class="flex flex-col items-center">
|
||||
<img :src="selectedAsset.link ? API_URL + selectedAsset.link : (selectedAsset.url ? API_URL + selectedAsset.url : 'https://via.placeholder.com/800')"
|
||||
:alt="selectedAsset.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">{{ selectedAsset.name }}</h2>
|
||||
<p class="text-slate-400">{{ selectedAsset.type }}</p>
|
||||
<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="modalAssetsFirst" :rows="modalAssetsRows" :totalRecords="modalAssetsTotal"
|
||||
@page="onModalAssetsPage" class="!bg-transparent !border-none !p-0" />
|
||||
<Button label="Done" @click="isAssetSelectionVisible = false" class="!px-6" />
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</div>
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
|
||||
@@ -43,23 +43,34 @@ const handleLogout = () => {
|
||||
|
||||
<div class="flex-1 flex flex-col gap-6 w-full items-center">
|
||||
<div
|
||||
v-tooltip.right="'Home'"
|
||||
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">
|
||||
<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')">
|
||||
@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>
|
||||
<div
|
||||
v-tooltip.right="'Characters'"
|
||||
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">
|
||||
<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 flex flex-col items-center gap-4">
|
||||
<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"
|
||||
title="Logout">
|
||||
v-tooltip.right="'Logout'">
|
||||
<i class="pi pi-power-off"></i>
|
||||
</div>
|
||||
<div class="w-10 h-10 rounded-full bg-slate-800 border-2 border-violet-600 flex items-center justify-center font-bold text-slate-50 cursor-pointer hover:scale-105 transition-all"
|
||||
|
||||
693
src/views/ImageGenerationView.vue
Normal file
693
src/views/ImageGenerationView.vue
Normal file
@@ -0,0 +1,693 @@
|
||||
<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 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 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: "FOURTHIREE", value: "4:3" },
|
||||
{ key: "THIRDFOUR", 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)
|
||||
}
|
||||
|
||||
// --- 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
|
||||
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)
|
||||
|
||||
if (response && response.id) {
|
||||
pollStatus(response.id)
|
||||
} 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.assets_list && response.assets_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
|
||||
throw new Error('Generation failed on server')
|
||||
} 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.assets_list && gen.assets_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.assets_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.assets_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
|
||||
}
|
||||
}
|
||||
|
||||
// --- Utils ---
|
||||
|
||||
const copyToClipboard = () => {
|
||||
// Implement if needed for prompt copying
|
||||
}
|
||||
|
||||
const handleLogout = () => {
|
||||
localStorage.removeItem('auth_code')
|
||||
router.push('/login')
|
||||
}
|
||||
|
||||
// --- Lifecycle ---
|
||||
onMounted(() => {
|
||||
loadHistory()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex h-screen bg-slate-900 overflow-hidden text-slate-100">
|
||||
<!-- Sidebar -->
|
||||
<nav class="glass-panel w-20 m-4 flex flex-col items-center py-6 rounded-3xl z-10 border border-white/5">
|
||||
<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 (Active) -->
|
||||
<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="'Image 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 flex flex-col items-center gap-4">
|
||||
<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"
|
||||
v-tooltip.right="'Logout'">
|
||||
<i class="pi pi-power-off"></i>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="flex-1 p-8 overflow-y-auto 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" :loading="isImprovingPrompt"
|
||||
:disabled="prompt.length <= 10"
|
||||
class="!p-1 !w-6 !h-6 !text-[10px] bg-violet-600/20 hover:bg-violet-600/30 border-violet-500/30 text-violet-400 disabled:opacity-50"
|
||||
@click="handleImprovePrompt" title="Improve Prompt" />
|
||||
</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>
|
||||
<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 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="generatedResult && !isGenerating" 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"
|
||||
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" @click="restoreGeneration(gen)"
|
||||
class="glass-panel p-2 rounded-lg border border-white/5 flex gap-3 items-start hover:bg-white/10 cursor-pointer transition-colors group">
|
||||
<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.assets_list && gen.assets_list.length > 0"
|
||||
:src="API_URL + '/assets/' + gen.assets_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 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>
|
||||
</div>
|
||||
<div v-if="gen.execution_time_seconds || gen.token_usage"
|
||||
class="flex flex-wrap gap-2 text-[9px] text-slate-500 font-mono mt-1 opacity-70">
|
||||
<span v-if="gen.execution_time_seconds" title="Total Time"><i
|
||||
class="pi pi-clock mr-0.5"></i>{{
|
||||
gen.execution_time_seconds.toFixed(1) }}s</span>
|
||||
<span v-if="gen.api_execution_time_seconds" title="API Time"><i
|
||||
class="pi pi-server mr-0.5"></i>{{
|
||||
gen.api_execution_time_seconds.toFixed(1) }}s</span>
|
||||
<span v-if="gen.token_usage" title="Tokens"><i class="pi pi-bolt mr-0.5"></i>{{
|
||||
gen.token_usage
|
||||
}}</span>
|
||||
</div>
|
||||
</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>
|
||||
</main>
|
||||
|
||||
<!-- 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>
|
||||
</div>
|
||||
</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>
|
||||
238
src/views/ImageToPromptView.vue
Normal file
238
src/views/ImageToPromptView.vue
Normal file
@@ -0,0 +1,238 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { dataService } from '../services/dataService'
|
||||
import Button from 'primevue/button'
|
||||
|
||||
const router = useRouter()
|
||||
const imageFiles = ref([])
|
||||
const imagePreviews = ref([])
|
||||
const userPrompt = ref('')
|
||||
const generatedPrompt = ref('')
|
||||
const loading = ref(false)
|
||||
const API_URL = import.meta.env.VITE_API_URL
|
||||
|
||||
const onFileSelect = (event) => {
|
||||
const files = Array.from(event.target.files)
|
||||
if (!files.length) return
|
||||
|
||||
const remainingSlots = 3 - imageFiles.value.length
|
||||
if (remainingSlots <= 0) return
|
||||
|
||||
const filesToAdd = files.slice(0, remainingSlots)
|
||||
|
||||
filesToAdd.forEach(file => {
|
||||
imageFiles.value.push(file)
|
||||
imagePreviews.value.push(URL.createObjectURL(file))
|
||||
})
|
||||
|
||||
// Reset input so same file can be selected again if needed
|
||||
event.target.value = ''
|
||||
}
|
||||
|
||||
const removeImage = (index) => {
|
||||
URL.revokeObjectURL(imagePreviews.value[index])
|
||||
imageFiles.value.splice(index, 1)
|
||||
imagePreviews.value.splice(index, 1)
|
||||
}
|
||||
|
||||
const generate = async () => {
|
||||
if (imageFiles.value.length === 0) return
|
||||
loading.value = true
|
||||
try {
|
||||
const result = await dataService.generatePromptFromImage(imageFiles.value, userPrompt.value)
|
||||
generatedPrompt.value = result
|
||||
} catch (e) {
|
||||
console.error('Generation failed', e)
|
||||
// Fallback for demo if service fails
|
||||
generatedPrompt.value = "Failed to generate prompt. Please try again."
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const copyToClipboard = () => {
|
||||
navigator.clipboard.writeText(generatedPrompt.value)
|
||||
}
|
||||
|
||||
const handleLogout = () => {
|
||||
localStorage.removeItem('auth_code')
|
||||
router.push('/login')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex h-screen bg-slate-900 overflow-hidden text-slate-100">
|
||||
<!-- Sidebar -->
|
||||
<nav class="glass-panel w-20 m-4 flex flex-col items-center py-6 rounded-3xl z-10 border border-white/5">
|
||||
<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>
|
||||
<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>
|
||||
<!-- New Image to Prompt Item (Active) -->
|
||||
<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="'Image to Prompt'">
|
||||
<span class="text-2xl">✨</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-auto flex flex-col items-center gap-4">
|
||||
<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"
|
||||
v-tooltip.right="'Logout'">
|
||||
<i class="pi pi-power-off"></i>
|
||||
</div>
|
||||
<div class="w-10 h-10 rounded-full bg-slate-800 border-2 border-violet-600 flex items-center justify-center font-bold text-slate-50 cursor-pointer hover:scale-105 transition-all"
|
||||
title="Profile">
|
||||
U
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="flex-1 p-8 overflow-y-auto flex flex-col">
|
||||
<header class="mb-8">
|
||||
<h1 class="text-4xl font-bold m-0">Image to Prompt</h1>
|
||||
<p class="mt-2 mb-0 text-slate-400">Transform your images into descriptive prompts</p>
|
||||
</header>
|
||||
|
||||
<div class="flex flex-col lg:flex-row gap-8 h-full pb-8">
|
||||
<!-- Input Section -->
|
||||
<div class="flex-1 flex flex-col gap-6">
|
||||
<!-- Image Upload -->
|
||||
<div
|
||||
class="glass-panel p-6 rounded-2xl border-dashed border-2 border-white/10 hover:border-violet-500/50 transition-colors relative flex flex-col items-center justify-center min-h-[300px] bg-black/20 group">
|
||||
|
||||
<!-- Upload Input (only if < 3 images) -->
|
||||
<input v-if="imageFiles.length < 3" type="file" @change="onFileSelect" accept="image/*" multiple
|
||||
class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-20" title=" " />
|
||||
|
||||
<!-- Empty State -->
|
||||
<div v-if="imageFiles.length === 0"
|
||||
class="text-center p-8 transition-transform duration-300 group-hover:scale-105 pointer-events-none">
|
||||
<span class="text-6xl mb-6 block opacity-50">🖼️</span>
|
||||
<h3 class="font-bold text-xl mb-2">Drop images here</h3>
|
||||
<p class="text-slate-400 text-sm">Upload up to 3 images<br />JPG, PNG, WEBP</p>
|
||||
</div>
|
||||
|
||||
<!-- Images Grid -->
|
||||
<div v-else class="w-full h-full p-4">
|
||||
<div class="grid grid-cols-3 gap-4 h-full">
|
||||
<!-- Existing Images -->
|
||||
<div v-for="(preview, index) in imagePreviews" :key="index"
|
||||
class="relative rounded-xl overflow-hidden border border-white/10 group/img aspect-square bg-black/40">
|
||||
<img :src="preview" class="w-full h-full object-cover" />
|
||||
<!-- Remove Button -->
|
||||
<div @click.stop="removeImage(index)"
|
||||
class="absolute top-2 right-2 bg-red-500/80 hover:bg-red-500 text-white rounded-full p-1.5 cursor-pointer opacity-0 group-hover/img:opacity-100 transition-opacity z-30">
|
||||
<i class="pi pi-times text-xs"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add More Placeholder (if < 3) -->
|
||||
<div v-if="imageFiles.length < 3"
|
||||
class="relative rounded-xl border-2 border-dashed border-white/20 flex flex-col items-center justify-center bg-white/5 hover:bg-white/10 transition-colors aspect-square text-slate-400 hover:text-white">
|
||||
<span class="text-3xl mb-2">+</span>
|
||||
<span class="text-xs font-bold text-center">Add<br>Image</span>
|
||||
<!-- Input for just this square is handled by the main absolute input covering container,
|
||||
but to make it intuitive when grid exists, we might need z-index adjustments or a specific label.
|
||||
Actually, the big input covers everything. Let's make sure it doesn't block delete buttons.
|
||||
Better approach: Input covers everything ONLY when empty. When not empty, input should specific 'Add' button or similar/
|
||||
-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hint -->
|
||||
<div class="absolute bottom-4 left-0 w-full text-center pointer-events-none">
|
||||
<span v-if="imageFiles.length < 3"
|
||||
class="text-xs text-violet-400 bg-black/50 px-3 py-1 rounded-full backdrop-blur-sm">
|
||||
Click empty space or drop more files
|
||||
</span>
|
||||
<span v-else
|
||||
class="text-xs text-orange-400 bg-black/50 px-3 py-1 rounded-full backdrop-blur-sm">
|
||||
Max 3 images reached
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Optional Prompt -->
|
||||
<div class="glass-panel p-1 rounded-2xl border border-white/5">
|
||||
<div class="p-4 border-b border-white/5">
|
||||
<label class="text-sm font-bold text-slate-300 flex items-center gap-2">
|
||||
<i class="pi pi-align-left"></i> Additional Instructions <span
|
||||
class="text-slate-500 font-normal">(Optional)</span>
|
||||
</label>
|
||||
</div>
|
||||
<textarea v-model="userPrompt"
|
||||
class="w-full bg-transparent border-none p-4 text-slate-100 focus:outline-none focus:ring-0 placeholder-slate-600 min-h-[100px] resize-none"
|
||||
placeholder="e.g. Focus on the lighting and atmosphere..."></textarea>
|
||||
</div>
|
||||
|
||||
<Button label="Generate Prompt" @click="generate" :loading="loading"
|
||||
:disabled="imageFiles.length === 0" icon="pi pi-sparkles"
|
||||
class="w-full py-4 text-lg font-bold !bg-gradient-to-r !from-violet-600 !to-cyan-600 hover:!from-violet-500 hover:!to-cyan-500 !border-none !rounded-xl !shadow-lg !shadow-violet-500/20 !text-white transition-all transform hover:scale-[1.01] active:scale-[0.99]" />
|
||||
</div>
|
||||
|
||||
<!-- Output Section -->
|
||||
<div
|
||||
class="flex-1 glass-panel p-6 rounded-2xl flex flex-col relative border border-white/5 bg-gradient-to-b from-white/5 to-transparent">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="w-8 h-8 rounded-lg bg-green-500/20 text-green-400 flex items-center justify-center">
|
||||
<i class="pi pi-check-circle"></i>
|
||||
</div>
|
||||
<h2 class="text-xl font-bold m-0">Result</h2>
|
||||
</div>
|
||||
<Button icon="pi pi-copy" @click="copyToClipboard" label="Copy" text size="small"
|
||||
class="!text-slate-400 hover:!text-white hover:!bg-white/10" v-if="generatedPrompt" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex-1 bg-black/40 rounded-xl p-6 font-mono text-sm leading-7 text-slate-300 overflow-y-auto border border-white/5 shadow-inner">
|
||||
<template v-if="loading">
|
||||
<div
|
||||
class="flex flex-col items-center justify-center h-full text-slate-500 gap-6 animate-pulse">
|
||||
<div
|
||||
class="w-16 h-16 rounded-full border-4 border-violet-500/30 border-t-violet-500 animate-spin">
|
||||
</div>
|
||||
<span class="font-medium">Analyzing image details...</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="generatedPrompt">
|
||||
{{ generatedPrompt }}
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="flex flex-col items-center justify-center h-full text-slate-600 gap-4">
|
||||
<i class="pi pi-image text-4xl opacity-50"></i>
|
||||
<span>Upload an image to generate a prompt</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user