Merge pull request 'ideas' (#2) from ideas into main
Reviewed-on: #2
This commit was merged in pull request #2.
This commit is contained in:
21
package-lock.json
generated
21
package-lock.json
generated
@@ -15,7 +15,8 @@
|
||||
"primeicons": "^7.0.0",
|
||||
"primevue": "^4.5.4",
|
||||
"vue": "^3.5.27",
|
||||
"vue-router": "^5.0.1"
|
||||
"vue-router": "^5.0.1",
|
||||
"vuedraggable": "^4.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4.1.18",
|
||||
@@ -6780,6 +6781,12 @@
|
||||
"dev": true,
|
||||
"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": {
|
||||
"version": "0.8.0-beta.0",
|
||||
"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==",
|
||||
"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": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
|
||||
|
||||
@@ -16,7 +16,8 @@
|
||||
"primeicons": "^7.0.0",
|
||||
"primevue": "^4.5.4",
|
||||
"vue": "^3.5.27",
|
||||
"vue-router": "^5.0.1"
|
||||
"vue-router": "^5.0.1",
|
||||
"vuedraggable": "^4.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4.1.18",
|
||||
|
||||
@@ -72,6 +72,7 @@ const navItems = computed(() => {
|
||||
const items = [
|
||||
{ path: '/', icon: '🏠', tooltip: 'Home' },
|
||||
{ path: '/projects', icon: '📂', tooltip: 'Projects' },
|
||||
{ path: '/ideas', icon: '💡', tooltip: 'Ideas' },
|
||||
{ path: '/flexible', icon: '🖌️', tooltip: 'Flexible' },
|
||||
{ path: '/albums', icon: '🖼️', tooltip: 'Library' },
|
||||
{ path: '/characters', icon: '👥', tooltip: 'Characters' }
|
||||
|
||||
@@ -62,6 +62,16 @@ const router = createRouter({
|
||||
name: 'albums',
|
||||
component: () => import('../views/AlbumsView.vue')
|
||||
},
|
||||
{
|
||||
path: '/ideas',
|
||||
name: 'ideas',
|
||||
component: () => import('../views/IdeasView.vue')
|
||||
},
|
||||
{
|
||||
path: '/ideas/:id',
|
||||
name: 'idea-detail',
|
||||
component: () => import('../views/IdeaDetailView.vue')
|
||||
},
|
||||
{
|
||||
path: '/projects',
|
||||
name: 'projects',
|
||||
|
||||
12
src/services/ideaService.js
Normal file
12
src/services/ideaService.js
Normal file
@@ -0,0 +1,12 @@
|
||||
import api from './api';
|
||||
|
||||
export const ideaService = {
|
||||
getIdeas: (limit = 10, offset = 0) => api.get('/ideas', { params: { limit, offset } }),
|
||||
createIdea: (data) => api.post('/ideas', data),
|
||||
getIdea: (id) => api.get(`/ideas/${id}`),
|
||||
updateIdea: (id, data) => api.put(`/ideas/${id}`, data),
|
||||
deleteIdea: (id) => api.delete(`/ideas/${id}`),
|
||||
addGenerationToIdea: (ideaId, generationId) => api.post(`/ideas/${ideaId}/generations/${generationId}`),
|
||||
removeGenerationFromIdea: (ideaId, generationId) => api.delete(`/ideas/${ideaId}/generations/${generationId}`),
|
||||
getIdeaGenerations: (ideaId, limit = 10, offset = 0) => api.get(`/ideas/${ideaId}/generations`, { params: { limit, offset } })
|
||||
};
|
||||
161
src/stores/ideas.js
Normal file
161
src/stores/ideas.js
Normal file
@@ -0,0 +1,161 @@
|
||||
import { defineStore } from 'pinia';
|
||||
import { ref } from 'vue';
|
||||
import { ideaService } from '../services/ideaService';
|
||||
|
||||
export const useIdeaStore = defineStore('ideas', () => {
|
||||
const ideas = ref([]);
|
||||
const currentIdea = ref(null);
|
||||
const loading = ref(false);
|
||||
const error = ref(null);
|
||||
const totalIdeas = ref(0);
|
||||
|
||||
async function fetchIdeas(limit = 10, offset = 0) {
|
||||
loading.value = true;
|
||||
error.value = null;
|
||||
try {
|
||||
const response = await ideaService.getIdeas(limit, offset);
|
||||
if (response.data.ideas) {
|
||||
ideas.value = response.data.ideas;
|
||||
totalIdeas.value = response.data.total_count;
|
||||
} else {
|
||||
ideas.value = response.data;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error fetching ideas:', err);
|
||||
error.value = err.response?.data?.detail || 'Failed to fetch ideas';
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function createIdea(data) {
|
||||
loading.value = true;
|
||||
error.value = null;
|
||||
try {
|
||||
await ideaService.createIdea(data);
|
||||
await fetchIdeas(); // Refresh list
|
||||
return true;
|
||||
} catch (err) {
|
||||
console.error('Error creating idea:', err);
|
||||
error.value = err.response?.data?.detail || 'Failed to create idea';
|
||||
return false;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchIdea(id) {
|
||||
loading.value = true;
|
||||
error.value = null;
|
||||
currentIdea.value = null;
|
||||
try {
|
||||
const response = await ideaService.getIdea(id);
|
||||
currentIdea.value = response.data;
|
||||
return response.data;
|
||||
} catch (err) {
|
||||
console.error('Error fetching idea:', err);
|
||||
error.value = err.response?.data?.detail || 'Failed to fetch idea';
|
||||
return null;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function updateIdea(id, data) {
|
||||
loading.value = true;
|
||||
error.value = null;
|
||||
try {
|
||||
await ideaService.updateIdea(id, data);
|
||||
if (currentIdea.value && currentIdea.value.id === id) {
|
||||
await fetchIdea(id);
|
||||
}
|
||||
await fetchIdeas();
|
||||
return true;
|
||||
} catch (err) {
|
||||
console.error('Error updating idea:', err);
|
||||
error.value = err.response?.data?.detail || 'Failed to update idea';
|
||||
return false;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteIdea(id) {
|
||||
loading.value = true;
|
||||
error.value = null;
|
||||
try {
|
||||
await ideaService.deleteIdea(id);
|
||||
await fetchIdeas(); // Refresh list
|
||||
return true;
|
||||
} catch (err) {
|
||||
console.error('Error deleting idea:', err);
|
||||
error.value = err.response?.data?.detail || 'Failed to delete idea';
|
||||
return false;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function addGenerationToIdea(ideaId, generationId) {
|
||||
loading.value = true;
|
||||
error.value = null;
|
||||
try {
|
||||
await ideaService.addGenerationToIdea(ideaId, generationId);
|
||||
if (currentIdea.value && currentIdea.value.id === ideaId) {
|
||||
await fetchIdea(ideaId);
|
||||
}
|
||||
return true;
|
||||
} catch (err) {
|
||||
console.error('Error adding generation to idea:', err);
|
||||
error.value = err.response?.data?.detail || 'Failed to add generation to idea';
|
||||
return false;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function removeGenerationFromIdea(ideaId, generationId) {
|
||||
loading.value = true;
|
||||
error.value = null;
|
||||
try {
|
||||
await ideaService.removeGenerationFromIdea(ideaId, generationId);
|
||||
if (currentIdea.value && currentIdea.value.id === ideaId) {
|
||||
await fetchIdea(ideaId);
|
||||
}
|
||||
return true;
|
||||
} catch (err) {
|
||||
console.error('Error removing generation from idea:', err);
|
||||
error.value = err.response?.data?.detail || 'Failed to remove generation from idea';
|
||||
return false;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Assuming getIdeaGenerations is separate from getIdea
|
||||
async function fetchIdeaGenerations(ideaId, limit = 100, offset = 0) {
|
||||
try {
|
||||
const response = await ideaService.getIdeaGenerations(ideaId, limit, offset);
|
||||
return response;
|
||||
} catch (err) {
|
||||
console.error('Error fetching idea generations:', err);
|
||||
return { data: [] };
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
ideas,
|
||||
currentIdea,
|
||||
loading,
|
||||
error,
|
||||
totalIdeas,
|
||||
fetchIdeas,
|
||||
createIdea,
|
||||
fetchIdea,
|
||||
updateIdea,
|
||||
deleteIdea,
|
||||
addGenerationToIdea,
|
||||
removeGenerationFromIdea,
|
||||
fetchIdeaGenerations
|
||||
};
|
||||
});
|
||||
@@ -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 () => {
|
||||
loading.value = true
|
||||
const charId = route.params.id
|
||||
@@ -116,6 +150,13 @@ const loadData = async () => {
|
||||
if (historyResponse && historyResponse.generations) {
|
||||
historyGenerations.value = historyResponse.generations
|
||||
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 {
|
||||
historyGenerations.value = Array.isArray(historyResponse) ? historyResponse : []
|
||||
historyTotal.value = historyGenerations.value.length
|
||||
@@ -158,6 +199,13 @@ const loadHistory = async () => {
|
||||
if (response && response.generations) {
|
||||
historyGenerations.value = response.generations
|
||||
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 {
|
||||
historyGenerations.value = Array.isArray(response) ? response : []
|
||||
historyTotal.value = historyGenerations.value.length
|
||||
@@ -306,50 +354,79 @@ const onModalAssetsPage = (event) => {
|
||||
loadAllAssets()
|
||||
}
|
||||
|
||||
const pollStatus = async (id) => {
|
||||
const pollGeneration = async (id) => {
|
||||
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 {
|
||||
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') {
|
||||
completed = true
|
||||
generationSuccess.value = true
|
||||
|
||||
// Refresh assets list
|
||||
const assets = await loadAssets()
|
||||
|
||||
// Display created assets from the list (without selecting them)
|
||||
if (response.assets_list && response.assets_list.length > 0) {
|
||||
const resultAssets = assets.filter(a => response.assets_list.includes(a.id))
|
||||
generatedResult.value = {
|
||||
type: 'assets',
|
||||
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
|
||||
}
|
||||
if (isGenerating.value && (!generatedResult.value || generatedResult.value === id)) {
|
||||
// only finish the "generating" blocking state if *all* active ones are done?
|
||||
// No, simpler: isGenerating tracks the *submission* process mainly,
|
||||
// but we also use it to show the big spinner.
|
||||
// If we support multiple, we should probably stop showing the big spinner
|
||||
// once submission is done and just show history status.
|
||||
}
|
||||
|
||||
// If we want to show the result of the *just finished* one in the big box:
|
||||
if (isGenerating.value) {
|
||||
// logic for "main" result display
|
||||
}
|
||||
|
||||
loadHistory()
|
||||
} else if (response.status === 'failed') {
|
||||
completed = true
|
||||
generationError.value = response.failed_reason || 'Generation failed on server'
|
||||
throw new Error(generationError.value)
|
||||
if (gen) gen.failed_reason = response.failed_reason
|
||||
} else {
|
||||
// Wait before next poll
|
||||
await new Promise(resolve => setTimeout(resolve, 2000))
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Polling failed', e)
|
||||
completed = true
|
||||
isGenerating.value = false
|
||||
console.error(`Polling failed for ${id}`, e)
|
||||
attempts++
|
||||
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) => {
|
||||
@@ -495,6 +572,7 @@ const handleGenerate = async () => {
|
||||
try {
|
||||
if (sendToTelegram.value && !telegramId.value) {
|
||||
alert("Please enter your Telegram ID")
|
||||
isGenerating.value = false
|
||||
return
|
||||
}
|
||||
|
||||
@@ -510,27 +588,55 @@ const handleGenerate = async () => {
|
||||
prompt: prompt.value,
|
||||
assets_list: selectedAssets.value.map(a => a.id),
|
||||
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)
|
||||
// response is expected to have an 'id' for the generation task
|
||||
if (response && response.id) {
|
||||
pollStatus(response.id)
|
||||
|
||||
let generations = []
|
||||
if (response && response.generations) {
|
||||
generations = response.generations
|
||||
} else if (Array.isArray(response)) {
|
||||
generations = response
|
||||
} else {
|
||||
// Fallback if it returns data immediately
|
||||
generatedResult.value = response
|
||||
generationSuccess.value = true
|
||||
isGenerating.value = false
|
||||
generations = [response]
|
||||
}
|
||||
|
||||
// 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 = ''
|
||||
|
||||
// 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) {
|
||||
console.error('Generation failed', e)
|
||||
isGenerating.value = false
|
||||
generationError.value = e.message || 'Failed to start generation'
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -636,6 +742,19 @@ const handleGenerate = async () => {
|
||||
|
||||
</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">
|
||||
<label
|
||||
class="text-slate-400 text-[9px] font-semibold uppercase tracking-wider">Description</label>
|
||||
@@ -712,10 +831,12 @@ const handleGenerate = async () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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]" />
|
||||
<Button
|
||||
:label="hasActiveGeneration ? 'Processing...' : (isGenerating ? 'Wait...' : `Generate`)"
|
||||
:icon="hasActiveGeneration || isGenerating ? 'pi pi-spin pi-spinner' : 'pi pi-magic'"
|
||||
: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"
|
||||
@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' }
|
||||
}" />
|
||||
<span class="text-[10px] text-slate-500 font-mono">{{ generationProgress
|
||||
}}%</span>
|
||||
}}%</span>
|
||||
</div>
|
||||
|
||||
<div v-else-if="generationError"
|
||||
@@ -839,78 +960,130 @@ const handleGenerate = async () => {
|
||||
class="!p-1 !w-6 !h-6 text-slate-500" @click="loadHistory" />
|
||||
</div>
|
||||
|
||||
<div v-if="historyGenerations.length === 0"
|
||||
<div v-if="groupedHistoryGenerations.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)"
|
||||
<div v-for="gen in groupedHistoryGenerations" :key="gen.id"
|
||||
@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">
|
||||
<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')"
|
||||
@mouseleave="onThumbnailLeave">
|
||||
<img v-if="gen.result_list && gen.result_list.length > 0"
|
||||
:src="API_URL + '/assets/' + gen.result_list[0] + '?thumbnail=true'"
|
||||
class="w-full h-full object-cover 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" />
|
||||
|
||||
<!-- Grouped (Grid) -->
|
||||
<div v-if="gen.isGroup" class="w-full">
|
||||
<div class="flex justify-between items-start mb-1.5">
|
||||
<div
|
||||
class="text-[10px] font-bold text-slate-400 bg-white/5 px-1.5 py-0.5 rounded flex items-center gap-1">
|
||||
<i class="pi pi-images text-[9px]"></i>
|
||||
{{ gen.children.length }} variations
|
||||
</div>
|
||||
<span class="text-[9px] text-slate-600">{{ new
|
||||
Date(gen.created_at).toLocaleDateString() }}</span>
|
||||
</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 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 items-center 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>
|
||||
<i v-if="gen.failed_reason" v-tooltip.right="gen.failed_reason"
|
||||
class="pi pi-exclamation-circle text-red-500"
|
||||
style="font-size: 12px;" />
|
||||
<!-- Single -->
|
||||
<div v-else class="flex gap-3 w-full">
|
||||
<div class="w-12 h-12 rounded bg-black/40 border border-white/10 flex-shrink-0 mt-0.5 relative z-0"
|
||||
@mouseenter="gen.result_list && gen.result_list[0] ? onThumbnailEnter($event, API_URL + '/assets/' + gen.result_list[0] + '?thumbnail=true') : null"
|
||||
@mouseleave="onThumbnailLeave">
|
||||
<img v-if="gen.result_list && gen.result_list.length > 0"
|
||||
:src="API_URL + '/assets/' + gen.result_list[0] + '?thumbnail=true'"
|
||||
class="w-full h-full object-cover 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>
|
||||
<!-- 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
|
||||
<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 items-center gap-2 text-[10px] text-slate-500">
|
||||
<span>{{ new Date(gen.created_at).toLocaleDateString()
|
||||
}}</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 -->
|
||||
<div class="flex gap-2 mt-1 border-t border-white/5 pt-2 w-full">
|
||||
<Button icon="pi pi-copy" label="Prompt" size="small" text
|
||||
class="!text-[10px] !py-0.5 !px-1.5 text-slate-400 hover:bg-white/5 flex-1"
|
||||
@click.stop="reusePrompt(gen)"
|
||||
v-tooltip.bottom="'Use this prompt'" />
|
||||
<Button icon="pi pi-images" label="Asset" size="small" text
|
||||
class="!text-[10px] !py-0.5 !px-2 text-slate-400 hover:bg-white/5 flex-1"
|
||||
@click.stop="reuseAsset(gen)"
|
||||
v-tooltip.bottom="'Use original assets'"
|
||||
:disabled="gen.status !== 'done' || gen.assets_list.length == 0" />
|
||||
<Button icon="pi pi-reply" label="Result" size="small" text
|
||||
class="!text-[10px] !py-0.5 !px-2 text-slate-400 hover:bg-white/5 flex-1"
|
||||
:disabled="gen.status !== 'done' || gen.result_list.length == 0"
|
||||
@click.stop="useResultAsReference(gen)"
|
||||
v-tooltip.bottom="'Use result as reference'" />
|
||||
<!-- Action Buttons -->
|
||||
<div
|
||||
class="flex gap-2 mt-1 border-t border-white/5 pt-2 w-full">
|
||||
<Button icon="pi pi-copy" label="Prompt" size="small" text
|
||||
class="!text-[10px] !py-0.5 !px-1.5 text-slate-400 hover:bg-white/5 flex-1"
|
||||
@click.stop="reusePrompt(gen)"
|
||||
v-tooltip.bottom="'Use this prompt'" />
|
||||
<Button icon="pi pi-images" label="Asset" size="small" text
|
||||
class="!text-[10px] !py-0.5 !px-2 text-slate-400 hover:bg-white/5 flex-1"
|
||||
@click.stop="reuseAsset(gen)"
|
||||
v-tooltip.bottom="'Use original assets'"
|
||||
:disabled="gen.status !== 'done' || gen.assets_list.length == 0" />
|
||||
<Button icon="pi pi-reply" label="Result" size="small" text
|
||||
class="!text-[10px] !py-0.5 !px-2 text-slate-400 hover:bg-white/5 flex-1"
|
||||
:disabled="gen.status !== 'done' || gen.result_list.length == 0"
|
||||
@click.stop="useResultAsReference(gen)"
|
||||
v-tooltip.bottom="'Use result as reference'" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1052,7 +1052,12 @@ const confirmAddToAlbum = async () => {
|
||||
|
||||
<div v-if="selectedCharacter"
|
||||
class="flex items-center gap-2 mt-2 px-1 animate-in fade-in slide-in-from-top-1">
|
||||
<Checkbox v-model="useProfileImage" :binary="true" inputId="use-profile-img" />
|
||||
<Checkbox v-model="useProfileImage" :binary="true" inputId="use-profile-img"
|
||||
class="!border-white/20" :pt="{
|
||||
box: ({ props, state }) => ({
|
||||
class: ['!bg-slate-800 !border-white/20', { '!bg-violet-600 !border-violet-600': props.modelValue }]
|
||||
})
|
||||
}" />
|
||||
<label for="use-profile-img"
|
||||
class="text-xs text-slate-300 cursor-pointer select-none">Use
|
||||
Character
|
||||
|
||||
1133
src/views/IdeaDetailView.vue
Normal file
1133
src/views/IdeaDetailView.vue
Normal file
File diff suppressed because it is too large
Load Diff
163
src/views/IdeasView.vue
Normal file
163
src/views/IdeasView.vue
Normal file
@@ -0,0 +1,163 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useIdeaStore } from '../stores/ideas'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import Skeleton from 'primevue/skeleton'
|
||||
import Dialog from 'primevue/dialog'
|
||||
import InputText from 'primevue/inputtext'
|
||||
import Textarea from 'primevue/textarea'
|
||||
import Button from 'primevue/button'
|
||||
import Image from 'primevue/image'
|
||||
|
||||
const router = useRouter()
|
||||
const ideaStore = useIdeaStore()
|
||||
const { ideas, loading } = storeToRefs(ideaStore)
|
||||
|
||||
const showCreateDialog = ref(false)
|
||||
const newIdea = ref({ name: '', description: '' })
|
||||
const submitting = ref(false)
|
||||
const API_URL = import.meta.env.VITE_API_URL
|
||||
|
||||
onMounted(async () => {
|
||||
await ideaStore.fetchIdeas()
|
||||
})
|
||||
|
||||
const goToDetail = (id) => {
|
||||
router.push(`/ideas/${id}`) // Navigate to IdeaDetailView
|
||||
}
|
||||
|
||||
const createIdea = async () => {
|
||||
if (!newIdea.value.name) return
|
||||
submitting.value = true
|
||||
try {
|
||||
await ideaStore.createIdea(newIdea.value)
|
||||
showCreateDialog.value = false
|
||||
newIdea.value = { name: '', description: '' }
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col h-full p-8 overflow-y-auto text-slate-100 font-sans">
|
||||
<!-- Top Bar -->
|
||||
<header class="flex justify-between items-end mb-8 border-b border-white/5 pb-6">
|
||||
<div>
|
||||
<h1
|
||||
class="text-4xl font-bold m-0 bg-gradient-to-r from-violet-400 to-fuchsia-400 bg-clip-text text-transparent">
|
||||
Ideas</h1>
|
||||
<p class="mt-2 mb-0 text-slate-400">Your creative sessions and experiments</p>
|
||||
</div>
|
||||
<Button label="New Idea" icon="pi pi-plus" @click="showCreateDialog = true"
|
||||
class="!bg-violet-600 hover:!bg-violet-500 !border-none" />
|
||||
</header>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div v-if="loading && ideas.length === 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div v-for="i in 6" :key="i" class="glass-panel rounded-2xl p-6 flex flex-col gap-4">
|
||||
<Skeleton height="12rem" class="w-full rounded-xl" />
|
||||
<Skeleton width="60%" height="1.5rem" />
|
||||
<Skeleton width="40%" height="1rem" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div v-else-if="ideas.length === 0"
|
||||
class="flex flex-col items-center justify-center h-96 text-slate-400 bg-slate-900/30 rounded-3xl border border-dashed border-white/10">
|
||||
<div class="w-20 h-20 rounded-full bg-violet-500/10 flex items-center justify-center mb-6">
|
||||
<i class="pi pi-lightbulb text-4xl text-violet-400"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-white mb-2">No ideas yet</h3>
|
||||
<p class="text-slate-400 mb-6 max-w-sm text-center">Start a new creative session to organize your
|
||||
generations and prompts.</p>
|
||||
<Button label="Create your first idea" icon="pi pi-plus" @click="showCreateDialog = true" />
|
||||
</div>
|
||||
|
||||
<!-- Ideas Grid -->
|
||||
<div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div v-for="idea in ideas" :key="idea.id"
|
||||
class="glass-panel rounded-2xl p-0 flex flex-col gap-0 transition-all duration-300 cursor-pointer border border-white/5 hover:-translate-y-1 hover:bg-slate-800/80 hover:border-violet-500/30 group overflow-hidden"
|
||||
@click="goToDetail(idea.id)">
|
||||
|
||||
<!-- Cover Image -->
|
||||
<div class="aspect-video w-full bg-slate-800 relative overflow-hidden">
|
||||
<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.last_generation.result_list[0] + '?thumbnail=true'"
|
||||
class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" />
|
||||
</div>
|
||||
<div v-else
|
||||
class="w-full h-full flex items-center justify-center bg-gradient-to-br from-slate-800 to-slate-900 group-hover:from-violet-900/20 group-hover:to-slate-900 transition-colors">
|
||||
<i
|
||||
class="pi pi-lightbulb text-4xl text-slate-700 group-hover:text-violet-500/50 transition-colors"></i>
|
||||
</div>
|
||||
|
||||
<!-- Overlay Gradient -->
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-t from-slate-900 via-transparent to-transparent opacity-60">
|
||||
</div>
|
||||
|
||||
<!-- Count Badge -->
|
||||
<div
|
||||
class="absolute top-3 right-3 bg-black/40 backdrop-blur-md text-white text-xs font-bold px-2 py-1 rounded-lg border border-white/10 flex items-center gap-1">
|
||||
<i class="pi pi-images text-[10px]"></i>
|
||||
<span>{{ idea.generation_ids?.length || 0 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-5">
|
||||
<h3
|
||||
class="m-0 mb-2 text-xl font-bold truncate text-slate-100 group-hover:text-violet-300 transition-colors">
|
||||
{{ idea.name }}</h3>
|
||||
<p class="m-0 text-sm text-slate-400 line-clamp-2 min-h-[2.5em] leading-relaxed">
|
||||
{{ idea.description || 'No description provided.' }}
|
||||
</p>
|
||||
|
||||
<div class="mt-4 pt-4 border-t border-white/5 flex justify-between items-center">
|
||||
<span class="text-xs text-slate-500 font-mono">ID: {{ idea.id.substring(0, 8) }}...</span>
|
||||
<div
|
||||
class="text-xs text-violet-400 font-medium opacity-0 group-hover:opacity-100 transition-opacity flex items-center gap-1">
|
||||
Open Session <i class="pi pi-arrow-right text-[10px]"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Create Idea Dialog -->
|
||||
<Dialog v-model:visible="showCreateDialog" modal header="New Idea Session" :style="{ width: '500px' }"
|
||||
:breakpoints="{ '960px': '75vw', '641px': '90vw' }"
|
||||
:pt="{ root: { class: '!bg-slate-900 !border !border-white/10' }, header: { class: '!bg-slate-900 !border-b !border-white/5 !text-white' }, content: { class: '!bg-slate-900 !p-6' }, footer: { class: '!bg-slate-900 !border-t !border-white/5 !p-4' }, closeButton: { class: '!text-slate-400 hover:!text-white' } }">
|
||||
<div class="flex flex-col gap-5">
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="name" class="font-semibold text-slate-300">Session Name</label>
|
||||
<InputText id="name" v-model="newIdea.name"
|
||||
class="w-full !bg-slate-800 !border-white/10 !text-white focus:!border-violet-500"
|
||||
placeholder="e.g., Cyberpunk Character Study" autofocus />
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="description" class="font-semibold text-slate-300">Description</label>
|
||||
<Textarea id="description" v-model="newIdea.description" rows="3"
|
||||
class="w-full !bg-slate-800 !border-white/10 !text-white focus:!border-violet-500"
|
||||
placeholder="What are you exploring in this session?" />
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="flex justify-end gap-2">
|
||||
<Button label="Cancel" @click="showCreateDialog = false" text
|
||||
class="!text-slate-400 hover:!text-white" />
|
||||
<Button label="Start Session" icon="pi pi-check" @click="createIdea" :loading="submitting"
|
||||
class="!bg-violet-600 hover:!bg-violet-500 !border-none" />
|
||||
</div>
|
||||
</template>
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.glass-panel {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user