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

feat: Implement multi-generation support with individual status tracking and history grouping.

Browse Source
This commit is contained in:
xds
2026-02-16 16:35:29 +03:00
parent 55e8db92ed
commit 9a9d50a900
5 changed files with 911 additions and 355 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
package-lock.json generated
View File

@@ -15,7 +15,8 @@
"primeicons": "^7.0.0", "primeicons": "^7.0.0",
"primevue": "^4.5.4", "primevue": "^4.5.4",
"vue": "^3.5.27", "vue": "^3.5.27",
"vue-router": "^5.0.1" "vue-router": "^5.0.1",
"vuedraggable": "^4.1.0"
}, },
"devDependencies": { "devDependencies": {
"@tailwindcss/postcss": "^4.1.18", "@tailwindcss/postcss": "^4.1.18",
@@ -6780,6 +6781,12 @@
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/sortablejs": {
"version": "1.14.0",
"resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz",
"integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==",
"license": "MIT"
},
"node_modules/source-map": { "node_modules/source-map": {
"version": "0.8.0-beta.0", "version": "0.8.0-beta.0",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.8.0-beta.0.tgz", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.8.0-beta.0.tgz",
@@ -7812,6 +7819,18 @@
"integrity": "sha512-LjgdTytVFXeUgtHZr9WYViYSM/g8MkcTPYDlPa3cDqMirHjKiSZPYd6DoL7pK8AJQr+uWkQvCjHNdiMqsrJs+g==", "integrity": "sha512-LjgdTytVFXeUgtHZr9WYViYSM/g8MkcTPYDlPa3cDqMirHjKiSZPYd6DoL7pK8AJQr+uWkQvCjHNdiMqsrJs+g==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/vuedraggable": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz",
"integrity": "sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==",
"license": "MIT",
"dependencies": {
"sortablejs": "1.14.0"
},
"peerDependencies": {
"vue": "^3.0.1"
}
},
"node_modules/webidl-conversions": { "node_modules/webidl-conversions": {
"version": "4.0.2", "version": "4.0.2",
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz", "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",

3
package.json
View File

@@ -16,7 +16,8 @@
"primeicons": "^7.0.0", "primeicons": "^7.0.0",
"primevue": "^4.5.4", "primevue": "^4.5.4",
"vue": "^3.5.27", "vue": "^3.5.27",
"vue-router": "^5.0.1" "vue-router": "^5.0.1",
"vuedraggable": "^4.1.0"
}, },
"devDependencies": { "devDependencies": {
"@tailwindcss/postcss": "^4.1.18", "@tailwindcss/postcss": "^4.1.18",

377
src/views/CharacterDetailView.vue
View File

@@ -94,6 +94,40 @@ const handleDownloadResults = () => {
} }
} }
const generationCount = ref(1)
const groupedHistoryGenerations = computed(() => {
const groups = new Map()
const result = []
for (const gen of historyGenerations.value) {
if (gen.generation_group_id) {
if (groups.has(gen.generation_group_id)) {
groups.get(gen.generation_group_id).children.push(gen)
} else {
const group = {
id: gen.generation_group_id,
generation_group_id: gen.generation_group_id,
prompt: gen.prompt,
created_at: gen.created_at,
isGroup: true,
children: [gen],
// Use first child status for group status if needed, or derived
status: gen.status
}
groups.set(gen.generation_group_id, group)
result.push(group)
}
} else {
result.push(gen)
}
}
return result
})
const hasActiveGeneration = computed(() => {
return isGenerating.value || historyGenerations.value.some(g => ['starting', 'processing', 'running'].includes(g.status))
})
const loadData = async () => { const loadData = async () => {
loading.value = true loading.value = true
const charId = route.params.id const charId = route.params.id
@@ -116,6 +150,13 @@ const loadData = async () => {
if (historyResponse && historyResponse.generations) { if (historyResponse && historyResponse.generations) {
historyGenerations.value = historyResponse.generations historyGenerations.value = historyResponse.generations
historyTotal.value = historyResponse.total_count || 0 historyTotal.value = historyResponse.total_count || 0
// Resume polling for active generations
historyGenerations.value.forEach(gen => {
if (['starting', 'processing', 'running'].includes(gen.status)) {
pollGeneration(gen.id)
}
})
} else { } else {
historyGenerations.value = Array.isArray(historyResponse) ? historyResponse : [] historyGenerations.value = Array.isArray(historyResponse) ? historyResponse : []
historyTotal.value = historyGenerations.value.length historyTotal.value = historyGenerations.value.length
@@ -158,6 +199,13 @@ const loadHistory = async () => {
if (response && response.generations) { if (response && response.generations) {
historyGenerations.value = response.generations historyGenerations.value = response.generations
historyTotal.value = response.total_count || 0 historyTotal.value = response.total_count || 0
// Resume polling for newly loaded active generations if any
historyGenerations.value.forEach(gen => {
if (['starting', 'processing', 'running'].includes(gen.status)) {
pollGeneration(gen.id)
}
})
} else { } else {
historyGenerations.value = Array.isArray(response) ? response : [] historyGenerations.value = Array.isArray(response) ? response : []
historyTotal.value = historyGenerations.value.length historyTotal.value = historyGenerations.value.length
@@ -306,50 +354,79 @@ const onModalAssetsPage = (event) => {
loadAllAssets() loadAllAssets()
} }
const pollStatus = async (id) => { const pollGeneration = async (id) => {
let completed = false let completed = false
while (!completed && isGenerating.value) { let attempts = 0
// Find the generation object in our list to update it specifically
// We poll and update the object in historyGenerations
while (!completed) {
// Check if generation is still needed to be polled (e.g. if we navigated away? logic handles this by default)
const genIndex = historyGenerations.value.findIndex(g => g.id === id)
if (genIndex === -1) {
// Maybe it's a new one not yet in history list?
// Logic in handleGenerate adds it first, so it should be there.
// If not found, maybe stop polling?
if (attempts > 5) return // Stop if keep failing to find it
}
const gen = historyGenerations.value[genIndex]
try { try {
const response = await aiService.getGenerationStatus(id) const response = await aiService.getGenerationStatus(id)
generationStatus.value = response.status
generationProgress.value = response.progress || 0 if (gen) {
Object.assign(gen, response)
// Update specific legacy ref if this is the latest one user is looking at in the "Creating..." block
if (isGenerating.value && generatedResult.value === null) {
generationStatus.value = response.status
generationProgress.value = response.progress || 0
}
}
if (response.status === 'done') { if (response.status === 'done') {
completed = true completed = true
generationSuccess.value = true if (isGenerating.value && (!generatedResult.value || generatedResult.value === id)) {
// only finish the "generating" blocking state if *all* active ones are done?
// Refresh assets list // No, simpler: isGenerating tracks the *submission* process mainly,
const assets = await loadAssets() // but we also use it to show the big spinner.
// If we support multiple, we should probably stop showing the big spinner
// Display created assets from the list (without selecting them) // once submission is done and just show history status.
if (response.assets_list && response.assets_list.length > 0) { }
const resultAssets = assets.filter(a => response.assets_list.includes(a.id))
generatedResult.value = { // If we want to show the result of the *just finished* one in the big box:
type: 'assets', if (isGenerating.value) {
assets: resultAssets, // logic for "main" result display
tech_prompt: response.tech_prompt,
execution_time: response.execution_time_seconds,
api_execution_time: response.api_execution_time_seconds,
token_usage: response.token_usage
}
} }
loadHistory()
} else if (response.status === 'failed') { } else if (response.status === 'failed') {
completed = true completed = true
generationError.value = response.failed_reason || 'Generation failed on server' if (gen) gen.failed_reason = response.failed_reason
throw new Error(generationError.value)
} else { } else {
// Wait before next poll
await new Promise(resolve => setTimeout(resolve, 2000)) await new Promise(resolve => setTimeout(resolve, 2000))
} }
} catch (e) { } catch (e) {
console.error('Polling failed', e) console.error(`Polling failed for ${id}`, e)
completed = true attempts++
isGenerating.value = false if (attempts > 10) {
completed = true
if (gen) {
gen.status = 'failed'
gen.failed_reason = 'Polling connection lost'
}
}
await new Promise(resolve => setTimeout(resolve, 5000))
} }
} }
isGenerating.value = false
// Check if we can turn off global loading
// Actually, let's turn off "isGenerating" immediately after submission success,
// and let the history handle the progress.
// BUT user wants to see it in the main slot?
// "display 4 copies in one slot in the feed"
// "track status of generations after sending"
// "block sending next if active"
} }
const restoreGeneration = async (gen) => { const restoreGeneration = async (gen) => {
@@ -495,6 +572,7 @@ const handleGenerate = async () => {
try { try {
if (sendToTelegram.value && !telegramId.value) { if (sendToTelegram.value && !telegramId.value) {
alert("Please enter your Telegram ID") alert("Please enter your Telegram ID")
isGenerating.value = false
return return
} }
@@ -510,27 +588,55 @@ const handleGenerate = async () => {
prompt: prompt.value, 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, telegram_id: sendToTelegram.value ? telegramId.value : null,
use_profile_image: useProfileImage.value use_profile_image: useProfileImage.value,
count: generationCount.value
} }
const response = await aiService.runGeneration(payload) const response = await aiService.runGeneration(payload)
// response is expected to have an 'id' for the generation task
if (response && response.id) { let generations = []
pollStatus(response.id) if (response && response.generations) {
generations = response.generations
} else if (Array.isArray(response)) {
generations = response
} else { } else {
// Fallback if it returns data immediately generations = [response]
generatedResult.value = response
generationSuccess.value = true
isGenerating.value = false
} }
// Add to history and start polling
for (const gen of generations) {
if (gen && gen.id) {
const newGen = {
...gen,
status: gen.status || 'starting',
created_at: new Date().toISOString()
}
historyGenerations.value.unshift(newGen)
historyTotal.value++
pollGeneration(gen.id)
}
}
// We set isGenerating to false immediately after successful submission
// because we want detailed status to be tracked in the history list.
// However, if we want to block the UI, hasActiveGeneration will do that.
// But for the 'big spinner', if we want to show it, we can keep it for a bit or just rely on history.
// User requested: "block next if active".
// Let's reset isGenerating so the big spinner goes away, and the user sees the progress in the history list.
isGenerating.value = false
prompt.value = '' prompt.value = ''
// Scroll to history?
// Maybe open/switch history tab or ensure it is visible?
// For now, let's just let the user see it in the history section.
} catch (e) { } catch (e) {
console.error('Generation failed', e) console.error('Generation failed', e)
isGenerating.value = false isGenerating.value = false
generationError.value = e.message || 'Failed to start generation'
} }
} }
</script> </script>
<template> <template>
@@ -636,6 +742,19 @@ const handleGenerate = async () => {
</div> </div>
<div class="flex flex-col gap-1.5">
<label
class="text-slate-400 text-[9px] font-semibold uppercase tracking-wider">Count</label>
<div
class="!flex !w-full !justify-between items-center justify-center !bg-slate-900/50 !p-1 gap-1 !rounded-lg !border !border-white/10">
<div v-for="n in 4" :key="n" @click="generationCount = n"
class="w-full items-center justify-center justify-items-center !text-center hover:bg-white/5 hover:text-white p-1 hover:rounded-lg cursor-pointer transition-all"
:class="generationCount === n ? 'bg-white/10 text-white rounded-lg shadow-sm' : 'text-slate-500'">
<span class="text-[10px] font-bold">{{ n }}</span>
</div>
</div>
</div>
<div class="flex flex-col gap-1.5"> <div class="flex flex-col gap-1.5">
<label <label
class="text-slate-400 text-[9px] font-semibold uppercase tracking-wider">Description</label> class="text-slate-400 text-[9px] font-semibold uppercase tracking-wider">Description</label>
@@ -712,10 +831,12 @@ const handleGenerate = async () => {
</div> </div>
</div> </div>
<Button :label="isGenerating ? 'Wait...' : `Generate`" <Button
:icon="isGenerating ? 'pi pi-spin pi-spinner' : 'pi pi-magic'" :label="hasActiveGeneration ? 'Processing...' : (isGenerating ? 'Wait...' : `Generate`)"
:loading="isGenerating" @click="handleGenerate" :icon="hasActiveGeneration || isGenerating ? 'pi pi-spin pi-spinner' : 'pi pi-magic'"
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]" /> :loading="hasActiveGeneration || isGenerating" :disabled="hasActiveGeneration"
@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] disabled:opacity-50 disabled:cursor-not-allowed" />
<Message v-if="generationSuccess" severity="success" :closable="true" <Message v-if="generationSuccess" severity="success" :closable="true"
@close="generationSuccess = false"> @close="generationSuccess = false">
@@ -739,7 +860,7 @@ const handleGenerate = async () => {
value: { class: '!bg-gradient-to-r !from-violet-600 !to-cyan-500 !transition-all !duration-500' } 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 class="text-[10px] text-slate-500 font-mono">{{ generationProgress
}}%</span> }}%</span>
</div> </div>
<div v-else-if="generationError" <div v-else-if="generationError"
@@ -839,78 +960,130 @@ const handleGenerate = async () => {
class="!p-1 !w-6 !h-6 text-slate-500" @click="loadHistory" /> class="!p-1 !w-6 !h-6 text-slate-500" @click="loadHistory" />
</div> </div>
<div v-if="historyGenerations.length === 0" <div v-if="groupedHistoryGenerations.length === 0"
class="py-10 text-center text-slate-600 italic text-xs"> class="py-10 text-center text-slate-600 italic text-xs">
No previous generations. No previous generations.
</div> </div>
<div v-else <div v-else
class="flex-1 overflow-y-auto pr-2 custom-scrollbar flex flex-col gap-2"> class="flex-1 overflow-y-auto pr-2 custom-scrollbar flex flex-col gap-2">
<div v-for="gen in historyGenerations" :key="gen.id" <div v-for="gen in groupedHistoryGenerations" :key="gen.id"
@click="restoreGeneration(gen)" @click="gen.isGroup ? null : 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"> 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.result_list[0] + '?thumbnail=true')" <!-- Grouped (Grid) -->
@mouseleave="onThumbnailLeave"> <div v-if="gen.isGroup" class="w-full">
<img v-if="gen.result_list && gen.result_list.length > 0" <div class="flex justify-between items-start mb-1.5">
:src="API_URL + '/assets/' + gen.result_list[0] + '?thumbnail=true'" <div
class="w-full h-full object-cover rounded opacity-100" /> class="text-[10px] font-bold text-slate-400 bg-white/5 px-1.5 py-0.5 rounded flex items-center gap-1">
<div v-else <i class="pi pi-images text-[9px]"></i>
class="w-full h-full flex items-center justify-center text-slate-700 overflow-hidden rounded"> {{ gen.children.length }} variations
<i class="pi pi-image text-lg" /> </div>
<span class="text-[9px] text-slate-600">{{ new
Date(gen.created_at).toLocaleDateString() }}</span>
</div> </div>
<div class="grid gap-1.5"
:class="gen.children.length > 2 ? 'grid-cols-4' : 'grid-cols-2'">
<div v-for="child in gen.children" :key="child.id"
class="relative aspect-[9/16] rounded-md overflow-hidden bg-black/30 border border-white/5 group/child"
@click.stop="restoreGeneration(child)">
<img v-if="child.result_list && child.result_list.length > 0"
:src="API_URL + '/assets/' + child.result_list[0] + '?thumbnail=true'"
class="w-full h-full object-cover hover:scale-105 transition-transform" />
<div v-else-if="['starting', 'processing', 'running'].includes(child.status)"
class="w-full h-full flex flex-col items-center justify-center bg-violet-500/10">
<i
class="pi pi-spin pi-spinner text-violet-400 text-xs"></i>
</div>
<div v-else-if="child.status === 'failed'"
class="w-full h-full flex items-center justify-center bg-red-500/10"
v-tooltip.bottom="child.failed_reason">
<i
class="pi pi-exclamation-circle text-red-500 text-xs"></i>
</div>
<div v-if="child.result_list && child.result_list.length > 0"
class="absolute inset-0 bg-black/40 opacity-0 group-hover/child:opacity-100 flex items-center justify-center transition-opacity">
<i class="pi pi-eye text-white text-xs"></i>
</div>
</div>
</div>
<p class="text-[10px] text-slate-400 mt-1.5 px-0.5 truncate">{{
gen.prompt }}</p>
</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 --> <!-- Single -->
<p v-if="gen.tech_prompt" <div v-else class="flex gap-3 w-full">
class="text-[9px] text-slate-500 truncate w-full text-left font-mono opacity-80"> <div class="w-12 h-12 rounded bg-black/40 border border-white/10 flex-shrink-0 mt-0.5 relative z-0"
{{ gen.tech_prompt }} @mouseenter="gen.result_list && gen.result_list[0] ? onThumbnailEnter($event, API_URL + '/assets/' + gen.result_list[0] + '?thumbnail=true') : null"
</p> @mouseleave="onThumbnailLeave">
<img v-if="gen.result_list && gen.result_list.length > 0"
<div class="flex items-center gap-2 text-[10px] text-slate-500"> :src="API_URL + '/assets/' + gen.result_list[0] + '?thumbnail=true'"
<span>{{ new Date(gen.created_at).toLocaleDateString() }}</span> class="w-full h-full object-cover rounded opacity-100" />
<span class="capitalize" <div v-else
:class="gen.status === 'done' ? 'text-green-500' : (gen.status === 'failed' ? 'text-red-500' : 'text-amber-500')">{{ class="w-full h-full flex items-center justify-center text-slate-700 overflow-hidden rounded">
gen.status }}</span> <i class="pi pi-image text-lg" />
<i v-if="gen.failed_reason" v-tooltip.right="gen.failed_reason" </div>
class="pi pi-exclamation-circle text-red-500"
style="font-size: 12px;" />
</div> </div>
<!-- Metrics in history --> <div class="flex-1 min-w-0 flex flex-col items-start gap-0.5">
<div v-if="gen.execution_time_seconds || gen.token_usage" <p
class="flex flex-wrap gap-2 text-[9px] text-slate-500 font-mono opacity-70"> class="text-xs text-slate-300 truncate font-medium w-full text-left">
<span v-if="gen.execution_time_seconds" title="Total Time"><i {{
class="pi pi-clock mr-0.5"></i>{{ gen.prompt }}</p>
gen.execution_time_seconds.toFixed(1) }}s</span>
<span v-if="gen.api_execution_time_seconds" title="API Time"><i <!-- Tech Prompt Preview -->
class="pi pi-server mr-0.5"></i>{{ <p v-if="gen.tech_prompt"
gen.api_execution_time_seconds.toFixed(1) }}s</span> class="text-[9px] text-slate-500 truncate w-full text-left font-mono opacity-80">
<span v-if="gen.token_usage" title="Tokens"><i {{ gen.tech_prompt }}
class="pi pi-bolt mr-0.5"></i>{{ gen.token_usage </p>
<div class="flex items-center gap-2 text-[10px] text-slate-500">
<span>{{ new Date(gen.created_at).toLocaleDateString()
}}</span> }}</span>
</div> <span class="capitalize"
:class="gen.status === 'done' ? 'text-green-500' : (gen.status === 'failed' ? 'text-red-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>
<!-- 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>
<!-- Action Buttons --> <!-- Action Buttons -->
<div class="flex gap-2 mt-1 border-t border-white/5 pt-2 w-full"> <div
<Button icon="pi pi-copy" label="Prompt" size="small" text class="flex gap-2 mt-1 border-t border-white/5 pt-2 w-full">
class="!text-[10px] !py-0.5 !px-1.5 text-slate-400 hover:bg-white/5 flex-1" <Button icon="pi pi-copy" label="Prompt" size="small" text
@click.stop="reusePrompt(gen)" class="!text-[10px] !py-0.5 !px-1.5 text-slate-400 hover:bg-white/5 flex-1"
v-tooltip.bottom="'Use this prompt'" /> @click.stop="reusePrompt(gen)"
<Button icon="pi pi-images" label="Asset" size="small" text v-tooltip.bottom="'Use this prompt'" />
class="!text-[10px] !py-0.5 !px-2 text-slate-400 hover:bg-white/5 flex-1" <Button icon="pi pi-images" label="Asset" size="small" text
@click.stop="reuseAsset(gen)" class="!text-[10px] !py-0.5 !px-2 text-slate-400 hover:bg-white/5 flex-1"
v-tooltip.bottom="'Use original assets'" @click.stop="reuseAsset(gen)"
:disabled="gen.status !== 'done' || gen.assets_list.length == 0" /> v-tooltip.bottom="'Use original assets'"
<Button icon="pi pi-reply" label="Result" size="small" text :disabled="gen.status !== 'done' || gen.assets_list.length == 0" />
class="!text-[10px] !py-0.5 !px-2 text-slate-400 hover:bg-white/5 flex-1" <Button icon="pi pi-reply" label="Result" size="small" text
:disabled="gen.status !== 'done' || gen.result_list.length == 0" class="!text-[10px] !py-0.5 !px-2 text-slate-400 hover:bg-white/5 flex-1"
@click.stop="useResultAsReference(gen)" :disabled="gen.status !== 'done' || gen.result_list.length == 0"
v-tooltip.bottom="'Use result as reference'" /> @click.stop="useResultAsReference(gen)"
v-tooltip.bottom="'Use result as reference'" />
</div>
</div> </div>
</div> </div>
</div> </div>

861
src/views/IdeaDetailView.vue
View File

File diff suppressed because it is too large Load Diff

4
src/views/IdeasView.vue
View File

@@ -83,8 +83,8 @@ const createIdea = async () => {
<!-- Cover Image --> <!-- Cover Image -->
<div class="aspect-video w-full bg-slate-800 relative overflow-hidden"> <div class="aspect-video w-full bg-slate-800 relative overflow-hidden">
<div v-if="idea.cover_asset_id" class="w-full h-full"> <div v-if="idea.last_generation && idea.last_generation.status == 'done' && idea.last_generation.result_list.length > 0" class="w-full h-full">
<img :src="API_URL + '/assets/' + idea.cover_asset_id + '?thumbnail=true'" <img :src="API_URL + '/assets/' + idea.last_generation.result_list[0] + '?thumbnail=true'"
class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" /> class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" />
</div> </div>
<div v-else <div v-else