Compare commits
10 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| ff07ca6ae0 | |||
| 6bda0db181 | |||
| fc9048fc94 | |||
| 073c94140f | |||
| 9a9d50a900 | |||
| 2aa9156a20 | |||
| 55e8db92ed | |||
| 75e33cca9a | |||
| 3910c79848 | |||
| 0406b175e9 |
@@ -2,6 +2,7 @@
|
||||
ssh root@31.59.58.220 "
|
||||
cd /root/ai/ai-service-front &&
|
||||
git pull &&
|
||||
npm install &&
|
||||
npm run build &&
|
||||
cp -r dist/* /var/www/ai.luminic.space/
|
||||
"
|
||||
2234
openapi/openapi.json
2234
openapi/openapi.json
File diff suppressed because it is too large
Load Diff
127
package-lock.json
generated
127
package-lock.json
generated
@@ -11,11 +11,13 @@
|
||||
"@primeuix/themes": "^2.0.3",
|
||||
"@primevue/themes": "^4.5.4",
|
||||
"axios": "^1.13.4",
|
||||
"jszip": "^3.10.1",
|
||||
"pinia": "^3.0.4",
|
||||
"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",
|
||||
@@ -3895,6 +3897,12 @@
|
||||
"url": "https://opencollective.com/core-js"
|
||||
}
|
||||
},
|
||||
"node_modules/core-util-is": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
|
||||
"integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/cross-spawn": {
|
||||
"version": "7.0.6",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
|
||||
@@ -4860,6 +4868,18 @@
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/immediate": {
|
||||
"version": "3.0.6",
|
||||
"resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
|
||||
"integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/inherits": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
|
||||
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/internal-slot": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
|
||||
@@ -5473,6 +5493,18 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/jszip": {
|
||||
"version": "3.10.1",
|
||||
"resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
|
||||
"integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
|
||||
"license": "(MIT OR GPL-3.0-or-later)",
|
||||
"dependencies": {
|
||||
"lie": "~3.3.0",
|
||||
"pako": "~1.0.2",
|
||||
"readable-stream": "~2.3.6",
|
||||
"setimmediate": "^1.0.5"
|
||||
}
|
||||
},
|
||||
"node_modules/kolorist": {
|
||||
"version": "1.8.0",
|
||||
"resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.8.0.tgz",
|
||||
@@ -5490,6 +5522,15 @@
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/lie": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
|
||||
"integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"immediate": "~3.0.5"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss": {
|
||||
"version": "1.30.2",
|
||||
"resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz",
|
||||
@@ -6057,6 +6098,12 @@
|
||||
"dev": true,
|
||||
"license": "BlueOak-1.0.0"
|
||||
},
|
||||
"node_modules/pako": {
|
||||
"version": "1.0.11",
|
||||
"resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
|
||||
"integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
|
||||
"license": "(MIT AND Zlib)"
|
||||
},
|
||||
"node_modules/path-key": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
|
||||
@@ -6243,6 +6290,12 @@
|
||||
"node": ">=12.11.0"
|
||||
}
|
||||
},
|
||||
"node_modules/process-nextick-args": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
|
||||
"integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/proxy-from-env": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
||||
@@ -6285,6 +6338,33 @@
|
||||
"safe-buffer": "^5.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/readable-stream": {
|
||||
"version": "2.3.8",
|
||||
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
|
||||
"integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"core-util-is": "~1.0.0",
|
||||
"inherits": "~2.0.3",
|
||||
"isarray": "~1.0.0",
|
||||
"process-nextick-args": "~2.0.0",
|
||||
"safe-buffer": "~5.1.1",
|
||||
"string_decoder": "~1.1.1",
|
||||
"util-deprecate": "~1.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/readable-stream/node_modules/isarray": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
|
||||
"integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/readable-stream/node_modules/safe-buffer": {
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
|
||||
"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/readdirp": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.0.0.tgz",
|
||||
@@ -6646,6 +6726,12 @@
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/setimmediate": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
|
||||
"integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/shebang-command": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
|
||||
@@ -6780,6 +6866,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",
|
||||
@@ -6855,6 +6947,21 @@
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/string_decoder": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
|
||||
"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"safe-buffer": "~5.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/string_decoder/node_modules/safe-buffer": {
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
|
||||
"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/string-width": {
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
|
||||
@@ -7457,6 +7564,12 @@
|
||||
"browserslist": ">= 4.21.0"
|
||||
}
|
||||
},
|
||||
"node_modules/util-deprecate": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
|
||||
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "7.3.1",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
|
||||
@@ -7812,6 +7925,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",
|
||||
|
||||
@@ -12,11 +12,13 @@
|
||||
"@primeuix/themes": "^2.0.3",
|
||||
"@primevue/themes": "^4.5.4",
|
||||
"axios": "^1.13.4",
|
||||
"jszip": "^3.10.1",
|
||||
"pinia": "^3.0.4",
|
||||
"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",
|
||||
|
||||
@@ -70,12 +70,13 @@ const isActive = (path) => {
|
||||
|
||||
const navItems = computed(() => {
|
||||
const items = [
|
||||
{ path: '/', icon: '🏠', tooltip: 'Home' },
|
||||
// { path: '/', icon: '🏠', tooltip: 'Home' },
|
||||
{ path: '/projects', icon: '📂', tooltip: 'Projects' },
|
||||
{ path: '/flexible', icon: '🖌️', tooltip: 'Flexible Generation' },
|
||||
{ path: '/albums', icon: '🖼️', tooltip: 'Library' },
|
||||
{ path: '/characters', icon: '👥', tooltip: 'Characters' },
|
||||
{ path: '/image-to-prompt', icon: '✨', tooltip: 'Image to Prompt' }
|
||||
{ path: '/content-plan', icon: '📅', tooltip: 'Plan' },
|
||||
{ path: '/ideas', icon: '💡', tooltip: 'Ideas' },
|
||||
{ path: '/flexible', icon: '🖌️', tooltip: 'Flexible' },
|
||||
// { path: '/albums', icon: '🖼️', tooltip: 'Library' },
|
||||
{ path: '/characters', icon: '👥', tooltip: 'Characters' }
|
||||
]
|
||||
|
||||
if (authStore.isAdmin()) {
|
||||
|
||||
@@ -57,11 +57,26 @@ const router = createRouter({
|
||||
name: 'flexible',
|
||||
component: () => import('../views/FlexibleGenerationView.vue')
|
||||
},
|
||||
{
|
||||
path: '/content-plan',
|
||||
name: 'content-plan',
|
||||
component: () => import('../views/ContentPlanView.vue')
|
||||
},
|
||||
{
|
||||
path: '/albums',
|
||||
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 } })
|
||||
};
|
||||
24
src/services/postService.js
Normal file
24
src/services/postService.js
Normal file
@@ -0,0 +1,24 @@
|
||||
import api from './api';
|
||||
|
||||
export const postService = {
|
||||
getPosts: (dateFrom, dateTo) => {
|
||||
const params = {};
|
||||
if (dateFrom) params.date_from = dateFrom;
|
||||
if (dateTo) params.date_to = dateTo;
|
||||
return api.get('/posts', { params }).then(r => r.data);
|
||||
},
|
||||
|
||||
createPost: (data) => api.post('/posts', data).then(r => r.data),
|
||||
|
||||
getPost: (id) => api.get(`/posts/${id}`).then(r => r.data),
|
||||
|
||||
updatePost: (id, data) => api.put(`/posts/${id}`, data).then(r => r.data),
|
||||
|
||||
deletePost: (id) => api.delete(`/posts/${id}`).then(r => r.data),
|
||||
|
||||
addGenerations: (postId, generationIds) =>
|
||||
api.post(`/posts/${postId}/generations`, { generation_ids: generationIds }).then(r => r.data),
|
||||
|
||||
removeGeneration: (postId, generationId) =>
|
||||
api.delete(`/posts/${postId}/generations/${generationId}`).then(r => r.data),
|
||||
};
|
||||
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 {
|
||||
const response = await ideaService.createIdea(data);
|
||||
await fetchIdeas(); // Refresh list
|
||||
return response.data;
|
||||
} catch (err) {
|
||||
console.error('Error creating idea:', err);
|
||||
error.value = err.response?.data?.detail || 'Failed to create idea';
|
||||
return null;
|
||||
} 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
|
||||
};
|
||||
});
|
||||
@@ -9,7 +9,6 @@ import Skeleton from 'primevue/skeleton'
|
||||
import Button from 'primevue/button'
|
||||
import ConfirmDialog from 'primevue/confirmdialog'
|
||||
import { useConfirm } from 'primevue/useconfirm'
|
||||
import Image from 'primevue/image'
|
||||
import Dialog from 'primevue/dialog'
|
||||
|
||||
const route = useRoute()
|
||||
@@ -129,6 +128,14 @@ const removeGeneration = (gen) => {
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// --- Image Preview ---
|
||||
const isImagePreviewVisible = ref(false)
|
||||
const previewImage = ref(null)
|
||||
const openImagePreview = (url) => {
|
||||
previewImage.value = { url }
|
||||
isImagePreviewVisible.value = true
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -183,9 +190,11 @@ const removeGeneration = (gen) => {
|
||||
<div v-for="gen in generations" :key="gen.id"
|
||||
class="glass-panel rounded-xl overflow-hidden group relative transition-all hover:bg-white/5">
|
||||
|
||||
<div class="aspect-[2/3] w-full bg-slate-800 relative overflow-hidden">
|
||||
<Image :src="gen.result || API_URL + `/assets/${gen.result_list[0]}` + '?thumbnail=true'"
|
||||
preview class="w-full h-full object-cover" imageClass="w-full h-full object-cover" />
|
||||
<div class="aspect-[2/3] w-full bg-slate-800 relative overflow-hidden cursor-pointer"
|
||||
@click="gen.result_list && gen.result_list.length > 0 ? openImagePreview(API_URL + '/assets/' + gen.result_list[0]) : null">
|
||||
<img v-if="gen.result_list && gen.result_list.length > 0"
|
||||
:src="gen.result || API_URL + `/assets/${gen.result_list[0]}` + '?thumbnail=true'"
|
||||
class="w-full h-full object-cover" />
|
||||
|
||||
<!-- Overlay Actions -->
|
||||
<div
|
||||
@@ -230,7 +239,7 @@ const removeGeneration = (gen) => {
|
||||
:class="selectedGenerations.some(g => g.id === gen.id) ? 'border-violet-500 ring-2 ring-violet-500/30' : 'border-transparent hover:border-white/20'">
|
||||
|
||||
<img v-if="gen.result_list && gen.result_list.length > 0"
|
||||
:src="gen.result_list[0].includes('http') ? gen.result_list[0] : (gen.result || API_URL + `/assets/${gen.result_list[0]}` + '?thumbnail=true')"
|
||||
:src="gen.result_list[0].includes('http') ? gen.result_list[0] : (gen.result || API_URL + `/assets/${gen.result_list[0]}`)"
|
||||
class="w-full h-full object-cover" />
|
||||
<!-- Fallback for no result -->
|
||||
<div v-else class="w-full h-full bg-slate-800 flex items-center justify-center text-slate-500">
|
||||
@@ -263,6 +272,18 @@ const removeGeneration = (gen) => {
|
||||
</template>
|
||||
</Dialog>
|
||||
|
||||
<!-- Image Preview Modal -->
|
||||
<Dialog v-model:visible="isImagePreviewVisible" modal dismissableMask
|
||||
:style="{ width: '90vw', maxWidth: '1000px', background: 'transparent', boxShadow: 'none' }"
|
||||
:pt="{ root: { class: '!bg-transparent !border-none !shadow-none' }, header: { class: '!hidden' }, content: { class: '!bg-transparent !p-0' } }">
|
||||
<div class="relative flex items-center justify-center" @click="isImagePreviewVisible = false">
|
||||
<img v-if="previewImage" :src="previewImage.url"
|
||||
class="max-w-full max-h-[85vh] object-contain rounded-xl shadow-2xl" />
|
||||
<Button icon="pi pi-times" @click="isImagePreviewVisible = false" rounded text
|
||||
class="!absolute -top-4 -right-4 !text-white !bg-black/50 hover:!bg-black/70 !w-10 !h-10" />
|
||||
</div>
|
||||
</Dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -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)
|
||||
|
||||
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)
|
||||
console.error(`Polling failed for ${id}`, e)
|
||||
attempts++
|
||||
if (attempts > 10) {
|
||||
completed = true
|
||||
isGenerating.value = false
|
||||
if (gen) {
|
||||
gen.status = 'failed'
|
||||
gen.failed_reason = 'Polling connection lost'
|
||||
}
|
||||
}
|
||||
isGenerating.value = false
|
||||
await new Promise(resolve => setTimeout(resolve, 5000))
|
||||
}
|
||||
}
|
||||
|
||||
// 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">
|
||||
@@ -839,18 +960,66 @@ 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">
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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="onThumbnailEnter($event, API_URL + '/assets/' + gen.result_list[0] + '?thumbnail=true')"
|
||||
@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'"
|
||||
@@ -873,22 +1042,24 @@ const handleGenerate = async () => {
|
||||
</p>
|
||||
|
||||
<div class="flex items-center gap-2 text-[10px] text-slate-500">
|
||||
<span>{{ new Date(gen.created_at).toLocaleDateString() }}</span>
|
||||
<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"
|
||||
<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>{{
|
||||
<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>{{
|
||||
<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
|
||||
@@ -896,7 +1067,8 @@ const handleGenerate = async () => {
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="flex gap-2 mt-1 border-t border-white/5 pt-2 w-full">
|
||||
<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)"
|
||||
@@ -915,6 +1087,7 @@ const handleGenerate = async () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Compact Pagination -->
|
||||
<div v-if="historyTotal > historyRows" class="mt-2 text-xs">
|
||||
|
||||
955
src/views/ContentPlanView.vue
Normal file
955
src/views/ContentPlanView.vue
Normal file
@@ -0,0 +1,955 @@
|
||||
<script setup>
|
||||
import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { postService } from '../services/postService'
|
||||
import { aiService } from '../services/aiService'
|
||||
import { useConfirm } from 'primevue/useconfirm'
|
||||
import { useToast } from 'primevue/usetoast'
|
||||
import Button from 'primevue/button'
|
||||
import Dialog from 'primevue/dialog'
|
||||
import InputText from 'primevue/inputtext'
|
||||
import DatePicker from 'primevue/datepicker'
|
||||
import ConfirmDialog from 'primevue/confirmdialog'
|
||||
import Toast from 'primevue/toast'
|
||||
import JSZip from 'jszip'
|
||||
|
||||
const confirm = useConfirm()
|
||||
const toast = useToast()
|
||||
|
||||
const API_URL = import.meta.env.VITE_API_URL || ''
|
||||
|
||||
// --- Timezone helpers ---
|
||||
// Normalize a date to noon local time before converting to ISO
|
||||
// This prevents day-shift when UTC offset crosses midnight
|
||||
function toLocalNoonISO(date) {
|
||||
const d = new Date(date)
|
||||
d.setHours(12, 0, 0, 0)
|
||||
return d.toISOString()
|
||||
}
|
||||
|
||||
// Parse date string from API — ensure it's treated as UTC
|
||||
// Server may return "2026-02-16T21:00:00" without Z, which browsers
|
||||
// would interpret as local time. We append Z to force UTC parsing.
|
||||
function parseUTCDate(dateStr) {
|
||||
if (typeof dateStr === 'string' && !dateStr.endsWith('Z') && !/[+-]\d{2}(:\d{2})?$/.test(dateStr)) {
|
||||
return new Date(dateStr + 'Z')
|
||||
}
|
||||
return new Date(dateStr)
|
||||
}
|
||||
|
||||
// --- Calendar state ---
|
||||
const currentDate = ref(new Date()) // tracks currently viewed month
|
||||
const viewMode = ref('month') // 'month' | 'week' | 'day'
|
||||
const selectedDay = ref(null)
|
||||
const posts = ref([])
|
||||
const loading = ref(false)
|
||||
|
||||
// --- New/Edit post dialog ---
|
||||
const showPostDialog = ref(false)
|
||||
const editingPost = ref(null) // null = create, object = edit
|
||||
const postForm = ref({ date: new Date(), topic: '' })
|
||||
|
||||
// --- Day names (Monday first) ---
|
||||
const dayNames = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс']
|
||||
const monthNames = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь']
|
||||
|
||||
// --- Computeds ---
|
||||
const currentMonthName = computed(() => monthNames[currentDate.value.getMonth()])
|
||||
const currentYear = computed(() => currentDate.value.getFullYear())
|
||||
|
||||
const headerTitle = computed(() => {
|
||||
if (viewMode.value === 'day' && selectedDay.value) {
|
||||
const d = selectedDay.value
|
||||
return `${d.getDate()} ${monthNames[d.getMonth()]} ${d.getFullYear()}`
|
||||
}
|
||||
if (viewMode.value === 'week' && selectedDay.value) {
|
||||
const ws = getWeekStart(selectedDay.value)
|
||||
const we = new Date(ws)
|
||||
we.setDate(we.getDate() + 6)
|
||||
const m1 = monthNames[ws.getMonth()].substring(0, 3)
|
||||
const m2 = monthNames[we.getMonth()].substring(0, 3)
|
||||
if (ws.getMonth() === we.getMonth()) {
|
||||
return `${ws.getDate()} – ${we.getDate()} ${m1} ${ws.getFullYear()}`
|
||||
}
|
||||
return `${ws.getDate()} ${m1} – ${we.getDate()} ${m2} ${we.getFullYear()}`
|
||||
}
|
||||
return `${currentMonthName.value} ${currentYear.value}`
|
||||
})
|
||||
|
||||
// Get Monday of the week containing a date
|
||||
function getWeekStart(date) {
|
||||
const d = new Date(date)
|
||||
const day = d.getDay()
|
||||
const diff = d.getDate() - day + (day === 0 ? -6 : 1) // Monday
|
||||
d.setDate(diff)
|
||||
d.setHours(0, 0, 0, 0)
|
||||
return d
|
||||
}
|
||||
|
||||
// Calendar grid cells for month view
|
||||
const calendarDays = computed(() => {
|
||||
const year = currentDate.value.getFullYear()
|
||||
const month = currentDate.value.getMonth()
|
||||
|
||||
const firstDay = new Date(year, month, 1)
|
||||
const lastDay = new Date(year, month + 1, 0)
|
||||
|
||||
// Day of week for first day (0=Sun, we want Mon=0)
|
||||
let startDow = firstDay.getDay() - 1
|
||||
if (startDow < 0) startDow = 6
|
||||
|
||||
const days = []
|
||||
|
||||
// Previous month padding
|
||||
for (let i = startDow - 1; i >= 0; i--) {
|
||||
const d = new Date(year, month, -i)
|
||||
days.push({ date: d, isOtherMonth: true })
|
||||
}
|
||||
|
||||
// Current month
|
||||
for (let i = 1; i <= lastDay.getDate(); i++) {
|
||||
const d = new Date(year, month, i)
|
||||
days.push({ date: d, isOtherMonth: false })
|
||||
}
|
||||
|
||||
// Next month padding (fill to 42 cells = 6 rows)
|
||||
const remaining = 42 - days.length
|
||||
for (let i = 1; i <= remaining; i++) {
|
||||
const d = new Date(year, month + 1, i)
|
||||
days.push({ date: d, isOtherMonth: true })
|
||||
}
|
||||
|
||||
return days
|
||||
})
|
||||
|
||||
// Week view days
|
||||
const weekDays = computed(() => {
|
||||
const start = selectedDay.value ? getWeekStart(selectedDay.value) : getWeekStart(new Date())
|
||||
const days = []
|
||||
for (let i = 0; i < 7; i++) {
|
||||
const d = new Date(start)
|
||||
d.setDate(d.getDate() + i)
|
||||
days.push({ date: d, isOtherMonth: false })
|
||||
}
|
||||
return days
|
||||
})
|
||||
|
||||
// Today check
|
||||
const isToday = (date) => {
|
||||
const today = new Date()
|
||||
return date.getDate() === today.getDate() &&
|
||||
date.getMonth() === today.getMonth() &&
|
||||
date.getFullYear() === today.getFullYear()
|
||||
}
|
||||
|
||||
const isSameDay = (a, b) => {
|
||||
if (!a || !b) return false
|
||||
return a.getDate() === b.getDate() && a.getMonth() === b.getMonth() && a.getFullYear() === b.getFullYear()
|
||||
}
|
||||
|
||||
// Posts for a given date
|
||||
const getPostsForDate = (date) => {
|
||||
return posts.value.filter(p => {
|
||||
const pd = parseUTCDate(p.date)
|
||||
return isSameDay(pd, date)
|
||||
})
|
||||
}
|
||||
|
||||
// Day view posts
|
||||
const dayPosts = computed(() => {
|
||||
if (!selectedDay.value) return []
|
||||
return getPostsForDate(selectedDay.value)
|
||||
})
|
||||
|
||||
// --- API calls ---
|
||||
async function fetchPosts() {
|
||||
loading.value = true
|
||||
try {
|
||||
const year = currentDate.value.getFullYear()
|
||||
const month = currentDate.value.getMonth()
|
||||
// Fetch the full visible range (prev month padding + next)
|
||||
const dateFrom = toLocalNoonISO(new Date(year, month - 1, 1))
|
||||
const dateTo = toLocalNoonISO(new Date(year, month + 2, 0))
|
||||
const result = await postService.getPosts(dateFrom, dateTo)
|
||||
posts.value = Array.isArray(result) ? result : []
|
||||
} catch (e) {
|
||||
console.error('Failed to fetch posts', e)
|
||||
posts.value = []
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// --- Navigation ---
|
||||
function prevPeriod() {
|
||||
if (viewMode.value === 'month') {
|
||||
const d = new Date(currentDate.value)
|
||||
d.setMonth(d.getMonth() - 1)
|
||||
currentDate.value = d
|
||||
} else if (viewMode.value === 'week') {
|
||||
const d = new Date(selectedDay.value || new Date())
|
||||
d.setDate(d.getDate() - 7)
|
||||
selectedDay.value = d
|
||||
currentDate.value = new Date(d.getFullYear(), d.getMonth(), 1)
|
||||
} else {
|
||||
const d = new Date(selectedDay.value || new Date())
|
||||
d.setDate(d.getDate() - 1)
|
||||
selectedDay.value = d
|
||||
currentDate.value = new Date(d.getFullYear(), d.getMonth(), 1)
|
||||
}
|
||||
}
|
||||
|
||||
function nextPeriod() {
|
||||
if (viewMode.value === 'month') {
|
||||
const d = new Date(currentDate.value)
|
||||
d.setMonth(d.getMonth() + 1)
|
||||
currentDate.value = d
|
||||
} else if (viewMode.value === 'week') {
|
||||
const d = new Date(selectedDay.value || new Date())
|
||||
d.setDate(d.getDate() + 7)
|
||||
selectedDay.value = d
|
||||
currentDate.value = new Date(d.getFullYear(), d.getMonth(), 1)
|
||||
} else {
|
||||
const d = new Date(selectedDay.value || new Date())
|
||||
d.setDate(d.getDate() + 1)
|
||||
selectedDay.value = d
|
||||
currentDate.value = new Date(d.getFullYear(), d.getMonth(), 1)
|
||||
}
|
||||
}
|
||||
|
||||
function goToday() {
|
||||
const today = new Date()
|
||||
currentDate.value = new Date(today.getFullYear(), today.getMonth(), 1)
|
||||
selectedDay.value = today
|
||||
}
|
||||
|
||||
function selectDay(dayObj) {
|
||||
selectedDay.value = dayObj.date
|
||||
if (viewMode.value === 'month') {
|
||||
viewMode.value = 'day'
|
||||
}
|
||||
}
|
||||
|
||||
// --- Post CRUD ---
|
||||
function openNewPostDialog(date) {
|
||||
editingPost.value = null
|
||||
postForm.value = {
|
||||
date: date ? new Date(date) : new Date(),
|
||||
topic: ''
|
||||
}
|
||||
showPostDialog.value = true
|
||||
}
|
||||
|
||||
function openEditPostDialog(post) {
|
||||
editingPost.value = post
|
||||
postForm.value = {
|
||||
date: parseUTCDate(post.date),
|
||||
topic: post.topic
|
||||
}
|
||||
showPostDialog.value = true
|
||||
}
|
||||
|
||||
async function savePost() {
|
||||
if (!postForm.value.topic.trim()) {
|
||||
toast.add({ severity: 'warn', summary: 'Тема обязательна', life: 2000 })
|
||||
return
|
||||
}
|
||||
try {
|
||||
if (editingPost.value) {
|
||||
await postService.updatePost(editingPost.value.id, {
|
||||
date: toLocalNoonISO(postForm.value.date),
|
||||
topic: postForm.value.topic
|
||||
})
|
||||
toast.add({ severity: 'success', summary: 'Пост обновлён', life: 2000 })
|
||||
} else {
|
||||
await postService.createPost({
|
||||
date: toLocalNoonISO(postForm.value.date),
|
||||
topic: postForm.value.topic,
|
||||
generation_ids: []
|
||||
})
|
||||
toast.add({ severity: 'success', summary: 'Пост создан', life: 2000 })
|
||||
}
|
||||
showPostDialog.value = false
|
||||
await fetchPosts()
|
||||
} catch (e) {
|
||||
console.error('Save post failed', e)
|
||||
toast.add({ severity: 'error', summary: 'Ошибка', detail: 'Не удалось сохранить', life: 3000 })
|
||||
}
|
||||
}
|
||||
|
||||
function deletePost(post) {
|
||||
confirm.require({
|
||||
message: `Удалить пост "${post.topic}"?`,
|
||||
header: 'Удаление поста',
|
||||
icon: 'pi pi-trash',
|
||||
acceptClass: 'p-button-danger',
|
||||
accept: async () => {
|
||||
try {
|
||||
await postService.deletePost(post.id)
|
||||
toast.add({ severity: 'info', summary: 'Удалено', life: 2000 })
|
||||
await fetchPosts()
|
||||
} catch (e) {
|
||||
console.error('Delete post failed', e)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
async function removeGenerationFromPost(post, genId) {
|
||||
try {
|
||||
await postService.removeGeneration(post.id, genId)
|
||||
// Optimistic update
|
||||
const idx = post.generation_ids.indexOf(genId)
|
||||
if (idx > -1) post.generation_ids.splice(idx, 1)
|
||||
toast.add({ severity: 'info', summary: 'Генерация удалена из поста', life: 2000 })
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
}
|
||||
|
||||
// --- Download Post Assets ---
|
||||
const isDownloading = ref(false)
|
||||
|
||||
async function downloadPostAssets(post) {
|
||||
const ids = post.generation_ids || []
|
||||
if (ids.length === 0) return
|
||||
isDownloading.value = true
|
||||
try {
|
||||
const user = JSON.parse(localStorage.getItem('user'))
|
||||
const headers = {}
|
||||
if (user && user.access_token) headers['Authorization'] = `Bearer ${user.access_token}`
|
||||
else if (user && user.token) headers['Authorization'] = `${user.tokenType} ${user.token}`
|
||||
const projectId = localStorage.getItem('active_project_id')
|
||||
if (projectId) headers['X-Project-ID'] = projectId
|
||||
|
||||
// Multi-file ZIP (if > 1)
|
||||
if (ids.length > 1) {
|
||||
const zip = new JSZip()
|
||||
// Sanitize topic for filename
|
||||
const safeTopic = (post.topic || 'post').replace(/[^a-z0-9_\-а-яё ]/gi, '').trim().replace(/\s+/g, '_')
|
||||
const folderName = `${safeTopic}_assets`
|
||||
|
||||
let successCount = 0
|
||||
|
||||
await Promise.all(ids.map(async (assetId) => {
|
||||
try {
|
||||
const url = API_URL + '/assets/' + assetId
|
||||
const resp = await fetch(url, { headers })
|
||||
if (!resp.ok) return
|
||||
const blob = await resp.blob()
|
||||
const mime = blob.type
|
||||
const ext = mime.split('/')[1] || 'png'
|
||||
zip.file(`${assetId}.${ext}`, blob)
|
||||
successCount++
|
||||
} catch (err) {
|
||||
console.error('Failed to zip asset', assetId, err)
|
||||
}
|
||||
}))
|
||||
|
||||
if (successCount === 0) throw new Error('No images available for zip')
|
||||
|
||||
const content = await zip.generateAsync({ type: 'blob' })
|
||||
const filename = `${folderName}.zip`
|
||||
|
||||
const a = document.createElement('a')
|
||||
a.href = URL.createObjectURL(content)
|
||||
a.download = filename
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
document.body.removeChild(a)
|
||||
URL.revokeObjectURL(a.href)
|
||||
|
||||
toast.add({ severity: 'success', summary: 'Архив создан', detail: `Скачано ${successCount} файлов`, life: 3000 })
|
||||
|
||||
} else {
|
||||
// Single File
|
||||
const assetId = ids[0]
|
||||
const url = API_URL + '/assets/' + assetId
|
||||
const resp = await fetch(url, { headers })
|
||||
const blob = await resp.blob()
|
||||
|
||||
const file = new File([blob], assetId + '.png', { type: blob.type || 'image/png' })
|
||||
const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent) || navigator.maxTouchPoints > 1
|
||||
if (isMobile && navigator.canShare && navigator.canShare({ files: [file] })) {
|
||||
await navigator.share({ files: [file] })
|
||||
} else {
|
||||
const a = document.createElement('a')
|
||||
a.href = URL.createObjectURL(file)
|
||||
a.download = file.name
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
document.body.removeChild(a)
|
||||
URL.revokeObjectURL(a.href)
|
||||
}
|
||||
toast.add({ severity: 'success', summary: 'Скачано', detail: `Файл сохранен`, life: 2000 })
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Download failed', e)
|
||||
toast.add({ severity: 'error', summary: 'Ошибка скачивания', life: 3000 })
|
||||
} finally {
|
||||
isDownloading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// --- Watchers ---
|
||||
watch(currentDate, fetchPosts)
|
||||
|
||||
onMounted(() => {
|
||||
selectedDay.value = new Date()
|
||||
fetchPosts()
|
||||
})
|
||||
|
||||
// --- Generation Picker ---
|
||||
const showGenPicker = ref(false)
|
||||
const genPickerPost = ref(null)
|
||||
const availableGenerations = ref([])
|
||||
const selectedGenIds = ref(new Set())
|
||||
const genLoading = ref(false)
|
||||
const genLoadingMore = ref(false)
|
||||
const genOffset = ref(0)
|
||||
const genHasMore = ref(true)
|
||||
const GEN_LIMIT = 30
|
||||
|
||||
function openGenPicker(post) {
|
||||
genPickerPost.value = post
|
||||
selectedGenIds.value = new Set()
|
||||
availableGenerations.value = []
|
||||
genOffset.value = 0
|
||||
genHasMore.value = true
|
||||
showGenPicker.value = true
|
||||
loadGenerations(true)
|
||||
}
|
||||
|
||||
async function loadGenerations(initial = false) {
|
||||
if (initial) {
|
||||
genLoading.value = true
|
||||
genOffset.value = 0
|
||||
} else {
|
||||
genLoadingMore.value = true
|
||||
}
|
||||
try {
|
||||
const response = await aiService.getGenerations(GEN_LIMIT, genOffset.value)
|
||||
const list = response && response.generations ? response.generations : (Array.isArray(response) ? response : [])
|
||||
if (initial) {
|
||||
availableGenerations.value = list
|
||||
} else {
|
||||
availableGenerations.value.push(...list)
|
||||
}
|
||||
genOffset.value += list.length
|
||||
genHasMore.value = list.length >= GEN_LIMIT
|
||||
} catch (e) {
|
||||
console.error('Load generations failed', e)
|
||||
} finally {
|
||||
genLoading.value = false
|
||||
genLoadingMore.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function toggleGenSelection(assetId) {
|
||||
const s = new Set(selectedGenIds.value)
|
||||
if (s.has(assetId)) s.delete(assetId)
|
||||
else s.add(assetId)
|
||||
selectedGenIds.value = s
|
||||
}
|
||||
|
||||
async function confirmAddGenerations() {
|
||||
if (!genPickerPost.value || selectedGenIds.value.size === 0) return
|
||||
try {
|
||||
await postService.addGenerations(genPickerPost.value.id, [...selectedGenIds.value])
|
||||
toast.add({ severity: 'success', summary: `Добавлено ${selectedGenIds.value.size} изображений`, life: 2000 })
|
||||
showGenPicker.value = false
|
||||
await fetchPosts()
|
||||
} catch (e) {
|
||||
console.error('Add generations failed', e)
|
||||
toast.add({ severity: 'error', summary: 'Ошибка', detail: 'Не удалось добавить', life: 3000 })
|
||||
}
|
||||
}
|
||||
|
||||
function onGenPickerScroll(e) {
|
||||
const el = e.target
|
||||
if (el.scrollTop + el.clientHeight >= el.scrollHeight - 100 && genHasMore.value && !genLoadingMore.value) {
|
||||
loadGenerations(false)
|
||||
}
|
||||
}
|
||||
|
||||
// --- Image Preview ---
|
||||
const previewVisible = ref(false)
|
||||
const previewImages = ref([])
|
||||
const previewIndex = ref(0)
|
||||
|
||||
const previewCurrent = computed(() => previewImages.value[previewIndex.value] || null)
|
||||
|
||||
function openPreview(assetIds, clickedId) {
|
||||
previewImages.value = assetIds.map(id => API_URL + '/assets/' + id)
|
||||
const idx = assetIds.indexOf(clickedId)
|
||||
previewIndex.value = idx >= 0 ? idx : 0
|
||||
previewVisible.value = true
|
||||
}
|
||||
|
||||
function previewNav(dir) {
|
||||
if (previewImages.value.length === 0) return
|
||||
let i = previewIndex.value + dir
|
||||
if (i < 0) i = previewImages.value.length - 1
|
||||
if (i >= previewImages.value.length) i = 0
|
||||
previewIndex.value = i
|
||||
}
|
||||
|
||||
function onPreviewKey(e) {
|
||||
if (!previewVisible.value) return
|
||||
if (e.key === 'ArrowLeft') { e.preventDefault(); previewNav(-1) }
|
||||
else if (e.key === 'ArrowRight') { e.preventDefault(); previewNav(1) }
|
||||
else if (e.key === 'Escape') { previewVisible.value = false }
|
||||
}
|
||||
|
||||
watch(previewVisible, (v) => {
|
||||
if (v) window.addEventListener('keydown', onPreviewKey)
|
||||
else window.removeEventListener('keydown', onPreviewKey)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('keydown', onPreviewKey)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col h-full w-full bg-slate-900 text-slate-100 font-sans overflow-hidden">
|
||||
<ConfirmDialog />
|
||||
<Toast />
|
||||
|
||||
<!-- Header -->
|
||||
<header
|
||||
class="h-16 border-b border-white/5 flex items-center justify-between px-6 bg-slate-900/80 backdrop-blur z-20 shrink-0">
|
||||
<div class="flex items-center gap-4">
|
||||
<h1 class="text-lg font-bold text-slate-200">📅 Content plan</h1>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<!-- Navigation Arrows -->
|
||||
<div class="flex items-center gap-1">
|
||||
<button @click="prevPeriod"
|
||||
class="w-8 h-8 rounded-lg bg-slate-800 border border-white/10 flex items-center justify-center text-slate-400 hover:text-white hover:bg-slate-700 transition-all">
|
||||
<i class="pi pi-chevron-left text-xs"></i>
|
||||
</button>
|
||||
<button @click="goToday"
|
||||
class="px-3 py-1.5 rounded-lg text-xs font-medium bg-slate-800 border border-white/10 text-slate-400 hover:text-white hover:bg-slate-700 transition-all">
|
||||
Сегодня
|
||||
</button>
|
||||
<button @click="nextPeriod"
|
||||
class="w-8 h-8 rounded-lg bg-slate-800 border border-white/10 flex items-center justify-center text-slate-400 hover:text-white hover:bg-slate-700 transition-all">
|
||||
<i class="pi pi-chevron-right text-xs"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Period Title -->
|
||||
<span class="text-sm font-semibold text-slate-200 min-w-[180px] text-center hidden md:block">{{
|
||||
headerTitle }}</span>
|
||||
|
||||
<!-- View Toggle -->
|
||||
<div class="flex bg-slate-800 rounded-lg p-1 border border-white/5">
|
||||
<button @click="viewMode = 'month'"
|
||||
class="px-3 py-1.5 rounded-md text-xs font-medium transition-all"
|
||||
:class="viewMode === 'month' ? 'bg-violet-600 text-white shadow-lg' : 'text-slate-400 hover:text-slate-200'">
|
||||
Месяц
|
||||
</button>
|
||||
<button @click="viewMode = 'week'; if (!selectedDay) selectedDay = new Date()"
|
||||
class="px-3 py-1.5 rounded-md text-xs font-medium transition-all"
|
||||
:class="viewMode === 'week' ? 'bg-violet-600 text-white shadow-lg' : 'text-slate-400 hover:text-slate-200'">
|
||||
Неделя
|
||||
</button>
|
||||
<button @click="viewMode = 'day'; if (!selectedDay) selectedDay = new Date()"
|
||||
class="px-3 py-1.5 rounded-md text-xs font-medium transition-all"
|
||||
:class="viewMode === 'day' ? 'bg-violet-600 text-white shadow-lg' : 'text-slate-400 hover:text-slate-200'">
|
||||
День
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Mobile Period Title -->
|
||||
<div class="md:hidden text-center py-2 text-sm font-semibold text-slate-200 border-b border-white/5">
|
||||
{{ headerTitle }}
|
||||
</div>
|
||||
|
||||
<!-- Content Area -->
|
||||
<div class="flex-1 overflow-y-auto custom-scrollbar">
|
||||
|
||||
<!-- ====== MONTH VIEW ====== -->
|
||||
<div v-if="viewMode === 'month'" class="h-full flex flex-col p-2 md:p-4">
|
||||
<!-- Day headers -->
|
||||
<div class="grid grid-cols-7 mb-1">
|
||||
<div v-for="d in dayNames" :key="d"
|
||||
class="text-center text-[10px] font-bold text-slate-500 uppercase tracking-wider py-2">
|
||||
{{ d }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Day cells -->
|
||||
<div class="grid grid-cols-7 flex-1 gap-px bg-white/5 rounded-xl overflow-hidden">
|
||||
<div v-for="(dayObj, idx) in calendarDays" :key="idx" @click="selectDay(dayObj)" :class="[
|
||||
'bg-slate-900 p-1.5 min-h-[80px] md:min-h-[100px] cursor-pointer transition-all hover:bg-slate-800/80 relative group',
|
||||
dayObj.isOtherMonth ? 'opacity-30' : '',
|
||||
isToday(dayObj.date) ? 'ring-1 ring-violet-500/50 ring-inset' : '',
|
||||
isSameDay(dayObj.date, selectedDay) ? 'bg-violet-900/20' : ''
|
||||
]">
|
||||
<!-- Day number -->
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<span :class="[
|
||||
'text-xs font-bold w-6 h-6 flex items-center justify-center rounded-full',
|
||||
isToday(dayObj.date) ? 'bg-violet-600 text-white' : 'text-slate-400'
|
||||
]">
|
||||
{{ dayObj.date.getDate() }}
|
||||
</span>
|
||||
<!-- Add button (show on hover) -->
|
||||
<button v-if="!dayObj.isOtherMonth" @click.stop="openNewPostDialog(dayObj.date)"
|
||||
class="w-5 h-5 rounded-md bg-violet-600/30 text-violet-300 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity hover:bg-violet-600/50">
|
||||
<i class="pi pi-plus" style="font-size: 8px"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Posts in cell -->
|
||||
<div class="flex flex-col gap-0.5 overflow-hidden">
|
||||
<div v-for="post in getPostsForDate(dayObj.date)" :key="post.id"
|
||||
@click.stop="openEditPostDialog(post)"
|
||||
class="px-1.5 py-0.5 rounded text-[10px] font-medium truncate transition-all hover:scale-[1.02] cursor-pointer"
|
||||
:class="post.generation_ids?.length > 0
|
||||
? 'bg-violet-600/30 text-violet-200 border border-violet-500/20'
|
||||
: 'bg-slate-700/50 text-slate-300 border border-white/5'">
|
||||
{{ post.topic }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ====== WEEK VIEW ====== -->
|
||||
<div v-else-if="viewMode === 'week'" class="h-full flex flex-col p-2 md:p-4">
|
||||
<!-- Day headers -->
|
||||
<div class="grid grid-cols-7 mb-1">
|
||||
<div v-for="(dayObj, idx) in weekDays" :key="idx"
|
||||
class="text-center text-[10px] font-bold uppercase tracking-wider py-2"
|
||||
:class="isToday(dayObj.date) ? 'text-violet-400' : 'text-slate-500'">
|
||||
{{ dayNames[idx] }} {{ dayObj.date.getDate() }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Day columns -->
|
||||
<div class="grid grid-cols-7 flex-1 gap-px bg-white/5 rounded-xl overflow-hidden">
|
||||
<div v-for="(dayObj, idx) in weekDays" :key="idx"
|
||||
@click="selectedDay = dayObj.date; viewMode = 'day'" :class="[
|
||||
'bg-slate-900 p-2 min-h-[300px] cursor-pointer transition-all hover:bg-slate-800/80 relative group',
|
||||
isToday(dayObj.date) ? 'ring-1 ring-violet-500/50 ring-inset' : '',
|
||||
isSameDay(dayObj.date, selectedDay) ? 'bg-violet-900/20' : ''
|
||||
]">
|
||||
<!-- Add button -->
|
||||
<button @click.stop="openNewPostDialog(dayObj.date)"
|
||||
class="w-full mb-2 py-1 rounded-lg border border-dashed border-white/10 text-slate-500 text-xs opacity-0 group-hover:opacity-100 transition-opacity hover:border-violet-500/30 hover:text-violet-400">
|
||||
<i class="pi pi-plus mr-1" style="font-size: 9px"></i> Добавить
|
||||
</button>
|
||||
|
||||
<!-- Posts -->
|
||||
<div class="flex flex-col gap-2">
|
||||
<div v-for="post in getPostsForDate(dayObj.date)" :key="post.id"
|
||||
class="bg-slate-800/80 rounded-lg border border-white/5 p-2 hover:border-violet-500/30 transition-all cursor-pointer"
|
||||
@click.stop="openEditPostDialog(post)">
|
||||
<p class="text-xs font-semibold text-slate-200 mb-1 line-clamp-2">{{ post.topic }}</p>
|
||||
|
||||
<!-- Generation thumbnails -->
|
||||
<div v-if="post.generation_ids?.length > 0" class="flex gap-1 flex-wrap">
|
||||
<img v-for="gid in post.generation_ids.slice(0, 4)" :key="gid"
|
||||
:src="API_URL + '/assets/' + gid + '?thumbnail=true'"
|
||||
class="w-8 h-8 rounded object-cover border border-white/10" />
|
||||
<span v-if="post.generation_ids.length > 4"
|
||||
class="w-8 h-8 rounded bg-slate-700 border border-white/10 flex items-center justify-center text-[10px] text-slate-400">
|
||||
+{{ post.generation_ids.length - 4 }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex gap-1 mt-1.5 justify-end">
|
||||
<button @click.stop="openGenPicker(post)"
|
||||
class="w-5 h-5 rounded bg-violet-500/10 text-violet-400 flex items-center justify-center hover:bg-violet-500/20 transition-colors"
|
||||
title="Добавить изображения">
|
||||
<i class="pi pi-images" style="font-size: 9px"></i>
|
||||
</button>
|
||||
<button @click.stop="deletePost(post)"
|
||||
class="w-5 h-5 rounded bg-red-500/10 text-red-400 flex items-center justify-center hover:bg-red-500/20 transition-colors">
|
||||
<i class="pi pi-trash" style="font-size: 9px"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ====== DAY VIEW ====== -->
|
||||
<div v-else class="max-w-3xl mx-auto p-4 md:p-8">
|
||||
<!-- Add Post Button -->
|
||||
<button @click="openNewPostDialog(selectedDay)"
|
||||
class="w-full mb-6 py-3 rounded-xl border-2 border-dashed border-white/10 text-slate-400 text-sm font-medium hover:border-violet-500/40 hover:text-violet-300 hover:bg-violet-500/5 transition-all">
|
||||
<i class="pi pi-plus mr-2"></i> Новый пост
|
||||
</button>
|
||||
|
||||
<!-- No posts -->
|
||||
<div v-if="dayPosts.length === 0 && !loading"
|
||||
class="flex flex-col items-center justify-center py-20 text-slate-500 opacity-60">
|
||||
<i class="pi pi-calendar text-5xl mb-4"></i>
|
||||
<p>Нет постов на этот день</p>
|
||||
</div>
|
||||
|
||||
<!-- Posts list -->
|
||||
<div class="flex flex-col gap-4">
|
||||
<div v-for="post in dayPosts" :key="post.id"
|
||||
class="bg-slate-800/60 rounded-2xl border border-white/5 p-5 hover:border-violet-500/20 transition-all">
|
||||
|
||||
<!-- Header: topic + date -->
|
||||
<div class="flex items-start justify-between mb-3">
|
||||
<div class="flex-1">
|
||||
<h3 class="text-base font-bold text-slate-100 mb-1">{{ post.topic }}</h3>
|
||||
<p class="text-xs text-slate-500">
|
||||
{{ parseUTCDate(post.date).toLocaleDateString('ru-RU', {
|
||||
weekday: 'long', day: 'numeric', month: 'long'
|
||||
}) }}
|
||||
</p>
|
||||
</div>
|
||||
<button @click="deletePost(post)"
|
||||
class="w-8 h-8 rounded-lg bg-slate-700/50 text-slate-400 flex items-center justify-center hover:bg-red-600/30 hover:text-red-300 transition-all"
|
||||
title="Удалить">
|
||||
<i class="pi pi-trash text-xs"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Images section header with actions -->
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">
|
||||
Изображения ({{ post.generation_ids?.length || 0 }})
|
||||
</label>
|
||||
<div class="flex gap-1">
|
||||
<Button icon="pi pi-download" label="Скачать" size="small" text :loading="isDownloading"
|
||||
:disabled="!post.generation_ids?.length" @click="downloadPostAssets(post)"
|
||||
class="!text-slate-400 hover:!text-white !text-xs !py-1" />
|
||||
<Button icon="pi pi-plus" label="Добавить" size="small" text
|
||||
@click="openGenPicker(post)"
|
||||
class="!text-violet-400 hover:!text-violet-300 !text-xs !py-1" />
|
||||
<Button icon="pi pi-pencil" size="small" text @click="openEditPostDialog(post)"
|
||||
class="!text-slate-400 hover:!text-white !text-xs !py-1" title="Редактировать" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Generation grid -->
|
||||
<div v-if="post.generation_ids?.length > 0"
|
||||
class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-2">
|
||||
<div v-for="gid in post.generation_ids" :key="gid"
|
||||
class="aspect-square relative rounded-xl overflow-hidden bg-slate-900 border border-white/5 group/img">
|
||||
<img :src="API_URL + '/assets/' + gid + '?thumbnail=true'"
|
||||
class="w-full h-full object-cover cursor-pointer"
|
||||
@click="openPreview(post.generation_ids, gid)" />
|
||||
<button @click="removeGenerationFromPost(post, gid)"
|
||||
class="absolute top-1 right-1 w-5 h-5 rounded-md bg-red-600/80 text-white flex items-center justify-center opacity-0 group-hover/img:opacity-100 transition-opacity hover:bg-red-500">
|
||||
<i class="pi pi-times" style="font-size: 8px"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else
|
||||
class="py-6 text-center text-slate-600 text-xs border border-dashed border-white/5 rounded-xl cursor-pointer hover:border-violet-500/30 hover:text-violet-400 transition-all"
|
||||
@click="openGenPicker(post)">
|
||||
<i class="pi pi-images mr-1"></i> Нажмите, чтобы добавить изображения
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ====== NEW / EDIT POST DIALOG ====== -->
|
||||
<Dialog v-model:visible="showPostDialog" :header="editingPost ? 'Редактировать пост' : 'Новый пост'" modal
|
||||
:style="{ width: '600px', maxWidth: '95vw' }"
|
||||
:pt="{ root: { class: '!bg-slate-800 !border-white/10' }, header: { class: '!bg-slate-800' }, content: { class: '!bg-slate-800' } }">
|
||||
<div class="flex flex-col gap-4">
|
||||
<!-- Date & Topic row -->
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Дата</label>
|
||||
<DatePicker v-model="postForm.date" dateFormat="dd.mm.yy" showIcon class="w-full" :pt="{
|
||||
root: { class: '!bg-slate-700 !border-white/10' },
|
||||
pcInputText: { root: { class: '!bg-slate-700 !border-white/10 !text-white' } }
|
||||
}" />
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Тема</label>
|
||||
<InputText v-model="postForm.topic" placeholder="Тема поста..."
|
||||
class="w-full !bg-slate-700 !border-white/10 !text-white" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Attached Generations (edit mode only) -->
|
||||
<div v-if="editingPost">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">
|
||||
Изображения ({{ editingPost.generation_ids?.length || 0 }})
|
||||
</label>
|
||||
<div class="flex gap-1">
|
||||
<Button icon="pi pi-download" label="Скачать" size="small" text :loading="isDownloading"
|
||||
:disabled="!editingPost.generation_ids?.length" @click="downloadPostAssets(editingPost)"
|
||||
class="!text-slate-400 hover:!text-white !text-xs !py-1" />
|
||||
<Button icon="pi pi-plus" label="Добавить" size="small" text
|
||||
@click="openGenPicker(editingPost)"
|
||||
class="!text-violet-400 hover:!text-violet-300 !text-xs !py-1" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Generation grid -->
|
||||
<div v-if="editingPost.generation_ids?.length > 0" class="grid grid-cols-4 sm:grid-cols-5 gap-2">
|
||||
<div v-for="gid in editingPost.generation_ids" :key="gid"
|
||||
class="aspect-square relative rounded-xl overflow-hidden bg-slate-900 border border-white/5 group/img">
|
||||
<img :src="API_URL + '/assets/' + gid + '?thumbnail=true'"
|
||||
class="w-full h-full object-cover cursor-pointer"
|
||||
@click="openPreview(editingPost.generation_ids, gid)" />
|
||||
<button @click="removeGenerationFromPost(editingPost, gid)"
|
||||
class="absolute top-1 right-1 w-5 h-5 rounded-md bg-red-600/80 text-white flex items-center justify-center opacity-0 group-hover/img:opacity-100 transition-opacity hover:bg-red-500">
|
||||
<i class="pi pi-times" style="font-size: 8px"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else
|
||||
class="py-6 text-center text-slate-600 text-xs border border-dashed border-white/5 rounded-xl cursor-pointer hover:border-violet-500/30 hover:text-violet-400 transition-all"
|
||||
@click="openGenPicker(editingPost)">
|
||||
<i class="pi pi-images mr-1"></i> Нажмите, чтобы добавить изображения
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-2 mt-2">
|
||||
<Button label="Отмена" text @click="showPostDialog = false"
|
||||
class="!text-slate-400 hover:!text-white" />
|
||||
<Button :label="editingPost ? 'Сохранить' : 'Создать'" @click="savePost"
|
||||
class="!bg-violet-600 !border-none hover:!bg-violet-500" />
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
|
||||
<!-- ====== GENERATION PICKER DIALOG ====== -->
|
||||
<Dialog v-model:visible="showGenPicker" header="Добавить изображения" modal
|
||||
:style="{ width: '700px', maxWidth: '95vw' }"
|
||||
:pt="{ root: { class: '!bg-slate-800 !border-white/10' }, header: { class: '!bg-slate-800' }, content: { class: '!bg-slate-800 !p-0' } }">
|
||||
|
||||
<!-- Selected count bar -->
|
||||
<div v-if="selectedGenIds.size > 0"
|
||||
class="sticky top-0 z-10 flex items-center justify-between px-4 py-2 bg-violet-600/20 border-b border-violet-500/20">
|
||||
<span class="text-sm text-violet-200 font-medium">
|
||||
<i class="pi pi-check-circle mr-1"></i> Выбрано: {{ selectedGenIds.size }}
|
||||
</span>
|
||||
<Button label="Добавить" icon="pi pi-plus" @click="confirmAddGenerations" size="small"
|
||||
class="!bg-violet-600 !border-none hover:!bg-violet-500 !text-sm !py-1" />
|
||||
</div>
|
||||
|
||||
<!-- Loading -->
|
||||
<div v-if="genLoading" class="flex items-center justify-center py-20">
|
||||
<i class="pi pi-spin pi-spinner text-3xl text-violet-400"></i>
|
||||
</div>
|
||||
|
||||
<!-- Grid -->
|
||||
<div v-else class="p-4 max-h-[60vh] overflow-y-auto custom-scrollbar" @scroll="onGenPickerScroll">
|
||||
<div v-if="availableGenerations.length === 0"
|
||||
class="flex flex-col items-center justify-center py-16 text-slate-500">
|
||||
<i class="pi pi-image text-4xl mb-3"></i>
|
||||
<p class="text-sm">Нет доступных генераций</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-2">
|
||||
<template v-for="gen in availableGenerations" :key="gen.id">
|
||||
<div v-for="assetId in (gen.result_list || [])" :key="assetId"
|
||||
@click="toggleGenSelection(assetId)"
|
||||
class="aspect-square relative rounded-xl overflow-hidden cursor-pointer transition-all group/gen border-2"
|
||||
:class="selectedGenIds.has(assetId)
|
||||
? 'border-violet-500 ring-2 ring-violet-500/30 scale-[0.95]'
|
||||
: 'border-transparent hover:border-white/20'">
|
||||
<img :src="API_URL + '/assets/' + assetId + '?thumbnail=true'"
|
||||
class="w-full h-full object-cover" loading="lazy" />
|
||||
|
||||
<!-- Selection overlay -->
|
||||
<div v-if="selectedGenIds.has(assetId)"
|
||||
class="absolute inset-0 bg-violet-600/30 flex items-center justify-center">
|
||||
<div
|
||||
class="w-7 h-7 rounded-full bg-violet-600 flex items-center justify-center shadow-lg">
|
||||
<i class="pi pi-check text-white" style="font-size: 12px"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hover overlay -->
|
||||
<div v-else
|
||||
class="absolute inset-0 bg-black/0 group-hover/gen:bg-black/20 transition-all flex items-center justify-center">
|
||||
<div
|
||||
class="w-7 h-7 rounded-full border-2 border-white/40 opacity-0 group-hover/gen:opacity-100 transition-opacity">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Load more spinner -->
|
||||
<div v-if="genLoadingMore" class="flex justify-center py-4">
|
||||
<i class="pi pi-spin pi-spinner text-xl text-slate-500"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer with action -->
|
||||
<div class="flex justify-end gap-2 px-4 py-3 border-t border-white/5">
|
||||
<Button label="Отмена" text @click="showGenPicker = false" class="!text-slate-400 hover:!text-white" />
|
||||
<Button label="Добавить" icon="pi pi-plus" :disabled="selectedGenIds.size === 0"
|
||||
@click="confirmAddGenerations" class="!bg-violet-600 !border-none hover:!bg-violet-500" />
|
||||
</div>
|
||||
</Dialog>
|
||||
|
||||
<!-- ====== FULLSCREEN IMAGE PREVIEW ====== -->
|
||||
<div v-if="previewVisible" class="fixed inset-0 z-[9999] bg-black/95 flex items-center justify-center"
|
||||
@click.self="previewVisible = false">
|
||||
|
||||
<!-- Close -->
|
||||
<button @click="previewVisible = false"
|
||||
class="absolute top-4 right-4 w-10 h-10 rounded-full bg-white/10 text-white flex items-center justify-center hover:bg-white/20 transition-colors z-10">
|
||||
<i class="pi pi-times text-lg"></i>
|
||||
</button>
|
||||
|
||||
<!-- Counter -->
|
||||
<div v-if="previewImages.length > 1"
|
||||
class="absolute top-4 left-1/2 -translate-x-1/2 text-white/60 text-sm bg-black/40 px-3 py-1 rounded-full">
|
||||
{{ previewIndex + 1 }} / {{ previewImages.length }}
|
||||
</div>
|
||||
|
||||
<!-- Left arrow -->
|
||||
<button v-if="previewImages.length > 1" @click="previewNav(-1)"
|
||||
class="absolute left-3 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-white/10 text-white flex items-center justify-center hover:bg-white/20 transition-colors">
|
||||
<i class="pi pi-chevron-left"></i>
|
||||
</button>
|
||||
|
||||
<!-- Image -->
|
||||
<img v-if="previewCurrent" :src="previewCurrent"
|
||||
class="max-h-[90vh] max-w-[90vw] object-contain rounded-lg shadow-2xl" />
|
||||
|
||||
<!-- Right arrow -->
|
||||
<button v-if="previewImages.length > 1" @click="previewNav(1)"
|
||||
class="absolute right-3 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-white/10 text-white flex items-center justify-center hover:bg-white/20 transition-colors">
|
||||
<i class="pi pi-chevron-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
</style>
|
||||
@@ -1,14 +1,16 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, watch, computed } from 'vue'
|
||||
import { ref, onMounted, onBeforeUnmount, watch, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { dataService } from '../services/dataService'
|
||||
import { aiService } from '../services/aiService'
|
||||
import { postService } from '../services/postService'
|
||||
import Button from 'primevue/button'
|
||||
import Textarea from 'primevue/textarea'
|
||||
import InputText from 'primevue/inputtext'
|
||||
import Dialog from 'primevue/dialog'
|
||||
import Checkbox from 'primevue/checkbox'
|
||||
import Dropdown from 'primevue/dropdown'
|
||||
import DatePicker from 'primevue/datepicker'
|
||||
import MultiSelect from 'primevue/multiselect'
|
||||
import ProgressSpinner from 'primevue/progressspinner'
|
||||
import ProgressBar from 'primevue/progressbar'
|
||||
@@ -16,10 +18,122 @@ import Message from 'primevue/message'
|
||||
|
||||
import Skeleton from 'primevue/skeleton'
|
||||
import { useAlbumStore } from '../stores/albums'
|
||||
import { useToast } from 'primevue/usetoast'
|
||||
import Toast from 'primevue/toast'
|
||||
|
||||
const router = useRouter()
|
||||
const API_URL = import.meta.env.VITE_API_URL
|
||||
const albumStore = useAlbumStore()
|
||||
const toast = useToast()
|
||||
|
||||
// --- Multi-Select ---
|
||||
const isSelectMode = ref(false)
|
||||
const selectedAssetIds = ref(new Set())
|
||||
const isDownloading = ref(false)
|
||||
|
||||
const toggleSelectMode = () => {
|
||||
isSelectMode.value = !isSelectMode.value
|
||||
if (!isSelectMode.value) selectedAssetIds.value = new Set()
|
||||
}
|
||||
|
||||
const toggleImageSelection = (assetId) => {
|
||||
const s = new Set(selectedAssetIds.value)
|
||||
if (s.has(assetId)) s.delete(assetId)
|
||||
else s.add(assetId)
|
||||
selectedAssetIds.value = s
|
||||
}
|
||||
|
||||
const selectAllImages = () => {
|
||||
const s = new Set()
|
||||
for (const gen of historyGenerations.value) {
|
||||
if (gen.result_list) {
|
||||
for (const id of gen.result_list) s.add(id)
|
||||
}
|
||||
}
|
||||
selectedAssetIds.value = s
|
||||
}
|
||||
|
||||
const downloadSelected = async () => {
|
||||
const ids = [...selectedAssetIds.value]
|
||||
if (ids.length === 0) return
|
||||
isDownloading.value = true
|
||||
try {
|
||||
const user = JSON.parse(localStorage.getItem('user'))
|
||||
const headers = {}
|
||||
if (user && user.access_token) headers['Authorization'] = `Bearer ${user.access_token}`
|
||||
else if (user && user.token) headers['Authorization'] = `${user.tokenType} ${user.token}`
|
||||
const projectId = localStorage.getItem('active_project_id')
|
||||
if (projectId) headers['X-Project-ID'] = projectId
|
||||
|
||||
const files = []
|
||||
for (const assetId of ids) {
|
||||
const url = API_URL + '/assets/' + assetId
|
||||
const resp = await fetch(url, { headers })
|
||||
const blob = await resp.blob()
|
||||
files.push(new File([blob], assetId + '.png', { type: blob.type || 'image/png' }))
|
||||
}
|
||||
|
||||
const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent) || navigator.maxTouchPoints > 1
|
||||
if (isMobile && navigator.canShare && navigator.canShare({ files })) {
|
||||
await navigator.share({ files })
|
||||
} else {
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
const file = files[i]
|
||||
const a = document.createElement('a')
|
||||
a.href = URL.createObjectURL(file)
|
||||
a.download = file.name
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
document.body.removeChild(a)
|
||||
URL.revokeObjectURL(a.href)
|
||||
if (i < files.length - 1) await new Promise(r => setTimeout(r, 300))
|
||||
}
|
||||
}
|
||||
toast.add({ severity: 'success', summary: `Скачано ${ids.length} файлов`, life: 2000 })
|
||||
} catch (e) {
|
||||
console.error('Download failed', e)
|
||||
toast.add({ severity: 'error', summary: 'Ошибка скачивания', life: 3000 })
|
||||
} finally {
|
||||
isDownloading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// --- Add to Content Plan ---
|
||||
const showAddToPlanDialog = ref(false)
|
||||
const planPostDate = ref(new Date())
|
||||
const planPostTopic = ref('')
|
||||
const isSavingToPlan = ref(false)
|
||||
|
||||
const openAddToPlan = () => {
|
||||
planPostDate.value = new Date()
|
||||
planPostTopic.value = ''
|
||||
showAddToPlanDialog.value = true
|
||||
}
|
||||
|
||||
const confirmAddToPlan = async () => {
|
||||
if (!planPostTopic.value.trim()) {
|
||||
toast.add({ severity: 'warn', summary: 'Укажите тему', life: 2000 })
|
||||
return
|
||||
}
|
||||
isSavingToPlan.value = true
|
||||
try {
|
||||
const d = new Date(planPostDate.value); d.setHours(12, 0, 0, 0)
|
||||
await postService.createPost({
|
||||
date: d.toISOString(),
|
||||
topic: planPostTopic.value,
|
||||
generation_ids: [...selectedAssetIds.value]
|
||||
})
|
||||
toast.add({ severity: 'success', summary: 'Добавлено в контент-план', life: 2000 })
|
||||
showAddToPlanDialog.value = false
|
||||
isSelectMode.value = false
|
||||
selectedAssetIds.value = new Set()
|
||||
} catch (e) {
|
||||
console.error('Add to plan failed', e)
|
||||
toast.add({ severity: 'error', summary: 'Ошибка', detail: 'Не удалось добавить', life: 3000 })
|
||||
} finally {
|
||||
isSavingToPlan.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// --- State ---
|
||||
const prompt = ref('')
|
||||
@@ -37,6 +151,7 @@ const isModalLoading = ref(false)
|
||||
const tempSelectedAssets = ref([])
|
||||
const quality = ref({ key: 'TWOK', value: '2K' })
|
||||
const aspectRatio = ref({ key: "NINESIXTEEN", value: "9:16" })
|
||||
const generationCount = ref(1)
|
||||
const sendToTelegram = ref(false)
|
||||
const telegramId = ref('')
|
||||
const isTelegramIdSaved = ref(false)
|
||||
@@ -54,6 +169,7 @@ const historyFirst = ref(0)
|
||||
const isSettingsVisible = ref(false)
|
||||
const isSubmitting = ref(false)
|
||||
const activeOverlayId = ref(null) // For mobile tap-to-show overlay
|
||||
const filterCharacter = ref(null) // Character filter for gallery
|
||||
|
||||
// Options
|
||||
const qualityOptions = ref([
|
||||
@@ -80,7 +196,8 @@ const saveSettings = () => {
|
||||
aspectRatio: aspectRatio.value,
|
||||
sendToTelegram: sendToTelegram.value,
|
||||
telegramId: telegramId.value,
|
||||
useProfileImage: useProfileImage.value
|
||||
useProfileImage: useProfileImage.value,
|
||||
generationCount: generationCount.value
|
||||
}
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(settings))
|
||||
|
||||
@@ -106,6 +223,7 @@ const restoreSettings = () => {
|
||||
telegramId.value = settings.telegramId || localStorage.getItem('telegram_id') || ''
|
||||
if (telegramId.value) isTelegramIdSaved.value = true
|
||||
if (settings.useProfileImage !== undefined) useProfileImage.value = settings.useProfileImage
|
||||
if (settings.generationCount) generationCount.value = Math.min(settings.generationCount, 4)
|
||||
|
||||
return settings // Return to use in loadData
|
||||
} catch (e) {
|
||||
@@ -116,10 +234,18 @@ const restoreSettings = () => {
|
||||
}
|
||||
|
||||
// Watchers for auto-save
|
||||
watch([prompt, selectedCharacter, selectedAssets, quality, aspectRatio, sendToTelegram, telegramId, useProfileImage], () => {
|
||||
watch([prompt, selectedCharacter, selectedAssets, quality, aspectRatio, sendToTelegram, telegramId, useProfileImage, generationCount], () => {
|
||||
saveSettings()
|
||||
}, { deep: true })
|
||||
|
||||
// Watcher for character filter — reload history when filter changes
|
||||
watch(filterCharacter, async () => {
|
||||
historyGenerations.value = []
|
||||
historyTotal.value = 0
|
||||
historyFirst.value = 0
|
||||
await refreshHistory()
|
||||
})
|
||||
|
||||
|
||||
// --- Data Loading ---
|
||||
const loadData = async () => {
|
||||
@@ -127,7 +253,7 @@ const loadData = async () => {
|
||||
const [charsRes, assetsRes, historyRes] = await Promise.all([
|
||||
dataService.getCharacters(), // Assuming this exists and returns list
|
||||
dataService.getAssets(100, 0, 'all'), // Load a batch of assets
|
||||
aiService.getGenerations(historyRows.value, historyFirst.value)
|
||||
aiService.getGenerations(historyRows.value, historyFirst.value, filterCharacter.value?.id)
|
||||
])
|
||||
|
||||
// Characters
|
||||
@@ -197,7 +323,7 @@ const loadData = async () => {
|
||||
|
||||
const refreshHistory = async () => {
|
||||
try {
|
||||
const response = await aiService.getGenerations(historyRows.value, 0)
|
||||
const response = await aiService.getGenerations(historyRows.value, 0, filterCharacter.value?.id)
|
||||
if (response && response.generations) {
|
||||
// Update existing items and add new ones at the top
|
||||
const newGenerations = []
|
||||
@@ -251,38 +377,43 @@ const handleGenerate = async () => {
|
||||
assets_list: selectedAssets.value.map(a => a.id),
|
||||
linked_character_id: selectedCharacter.value?.id || null,
|
||||
telegram_id: sendToTelegram.value ? telegramId.value : null,
|
||||
use_profile_image: selectedCharacter.value ? useProfileImage.value : false
|
||||
use_profile_image: selectedCharacter.value ? useProfileImage.value : false,
|
||||
count: generationCount.value
|
||||
}
|
||||
|
||||
const response = await aiService.runGeneration(payload)
|
||||
|
||||
if (response && response.id) {
|
||||
// Create optimistic generation items
|
||||
// If response is the full generation object, use it.
|
||||
// If it's just { id: '...' }, create a placeholder.
|
||||
// aiService.runGeneration returns response.data.
|
||||
|
||||
const newGen = {
|
||||
id: response.id,
|
||||
prompt: prompt.value,
|
||||
status: 'starting',
|
||||
created_at: new Date().toISOString(),
|
||||
// Add other fields as necessary for display
|
||||
// Response can be a single generation, an array, or a Group response with 'generations'
|
||||
let generations = []
|
||||
if (response && response.generations) {
|
||||
generations = response.generations
|
||||
} else if (Array.isArray(response)) {
|
||||
generations = response
|
||||
} else {
|
||||
generations = [response]
|
||||
}
|
||||
|
||||
for (const gen of generations) {
|
||||
if (gen && gen.id) {
|
||||
const newGen = {
|
||||
id: gen.id,
|
||||
prompt: prompt.value,
|
||||
status: gen.status || 'starting',
|
||||
created_at: new Date().toISOString(),
|
||||
generation_group_id: gen.generation_group_id || null,
|
||||
}
|
||||
|
||||
// Add to history immediately
|
||||
historyGenerations.value.unshift(newGen)
|
||||
historyTotal.value++
|
||||
|
||||
// Start polling
|
||||
pollGeneration(response.id)
|
||||
|
||||
// Clear prompt if desired, or keep for reuse
|
||||
// prompt.value = ''
|
||||
pollGeneration(gen.id)
|
||||
}
|
||||
}
|
||||
|
||||
// Refresh history after a short delay to get full generation data from server
|
||||
setTimeout(() => refreshHistory(), 2000)
|
||||
} catch (e) {
|
||||
console.error('Generation failed', e)
|
||||
// Ideally show a toast error here
|
||||
alert(e.message || 'Generation failed to start')
|
||||
} finally {
|
||||
isSubmitting.value = false
|
||||
@@ -352,7 +483,7 @@ const loadMoreHistory = async () => {
|
||||
|
||||
try {
|
||||
const nextOffset = historyGenerations.value.length
|
||||
const response = await aiService.getGenerations(historyRows.value, nextOffset)
|
||||
const response = await aiService.getGenerations(historyRows.value, nextOffset, filterCharacter.value?.id)
|
||||
|
||||
if (response && response.generations) {
|
||||
const newGenerations = response.generations.filter(gen =>
|
||||
@@ -380,14 +511,98 @@ onMounted(() => {
|
||||
// --- Sidebar Logic (Duplicated for now) ---
|
||||
// handleLogout removed - handled in AppSidebar
|
||||
|
||||
// Image Preview
|
||||
// Image Preview with navigation
|
||||
const isImagePreviewVisible = ref(false)
|
||||
const previewImage = ref(null)
|
||||
const previewIndex = ref(0)
|
||||
|
||||
// Grouped history: merge generations with the same generation_group_id into a single gallery item
|
||||
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],
|
||||
}
|
||||
groups.set(gen.generation_group_id, group)
|
||||
result.push(group)
|
||||
}
|
||||
} else {
|
||||
result.push(gen)
|
||||
}
|
||||
}
|
||||
return result
|
||||
})
|
||||
|
||||
// Collect all preview-able images from history
|
||||
const allPreviewImages = computed(() => {
|
||||
const images = []
|
||||
for (const gen of historyGenerations.value) {
|
||||
if (gen.result_list && gen.result_list.length > 0) {
|
||||
for (const assetId of gen.result_list) {
|
||||
images.push({
|
||||
url: API_URL + '/assets/' + assetId,
|
||||
genId: gen.id,
|
||||
prompt: gen.prompt
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
return images
|
||||
})
|
||||
|
||||
const openImagePreview = (url) => {
|
||||
previewImage.value = { url }
|
||||
// Find index of this image in the flat list
|
||||
const idx = allPreviewImages.value.findIndex(img => img.url === url)
|
||||
previewIndex.value = idx >= 0 ? idx : 0
|
||||
previewImage.value = allPreviewImages.value[previewIndex.value] || { url }
|
||||
isImagePreviewVisible.value = true
|
||||
}
|
||||
|
||||
const navigatePreview = (direction) => {
|
||||
const images = allPreviewImages.value
|
||||
if (images.length === 0) return
|
||||
let newIndex = previewIndex.value + direction
|
||||
if (newIndex < 0) newIndex = images.length - 1
|
||||
if (newIndex >= images.length) newIndex = 0
|
||||
previewIndex.value = newIndex
|
||||
previewImage.value = images[newIndex]
|
||||
}
|
||||
|
||||
const onPreviewKeydown = (e) => {
|
||||
if (!isImagePreviewVisible.value) return
|
||||
if (e.key === 'ArrowLeft') {
|
||||
e.preventDefault()
|
||||
navigatePreview(-1)
|
||||
} else if (e.key === 'ArrowRight') {
|
||||
e.preventDefault()
|
||||
navigatePreview(1)
|
||||
} else if (e.key === 'Escape') {
|
||||
isImagePreviewVisible.value = false
|
||||
}
|
||||
}
|
||||
|
||||
watch(isImagePreviewVisible, (visible) => {
|
||||
if (visible) {
|
||||
window.addEventListener('keydown', onPreviewKeydown)
|
||||
} else {
|
||||
window.removeEventListener('keydown', onPreviewKeydown)
|
||||
}
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('keydown', onPreviewKeydown)
|
||||
})
|
||||
|
||||
const reusePrompt = (gen) => {
|
||||
if (gen.prompt) {
|
||||
prompt.value = gen.prompt
|
||||
@@ -602,8 +817,37 @@ const confirmAddToAlbum = async () => {
|
||||
<span class="text-xs text-slate-500 border-l border-white/10 pl-3">History</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<Dropdown v-model="filterCharacter" :options="characters" optionLabel="name"
|
||||
placeholder="All Characters" showClear
|
||||
class="!w-48 !bg-slate-800/60 !border-white/10 !text-white !rounded-xl !text-sm" :pt="{
|
||||
root: { class: '!bg-slate-800/60 !h-8' },
|
||||
input: { class: '!text-white !text-xs !py-1 !px-2' },
|
||||
trigger: { class: '!text-slate-400 !w-6' },
|
||||
panel: { class: '!bg-slate-800 !border-white/10' },
|
||||
item: { class: '!text-slate-300 hover:!bg-white/10 hover:!text-white !text-xs !py-1.5' },
|
||||
clearIcon: { class: '!text-slate-400 hover:!text-white' }
|
||||
}">
|
||||
<template #value="slotProps">
|
||||
<div v-if="slotProps.value" class="flex items-center gap-1.5">
|
||||
<img v-if="slotProps.value.avatar_image" :src="API_URL + slotProps.value.avatar_image"
|
||||
class="w-5 h-5 rounded-full object-cover" />
|
||||
<span class="text-xs">{{ slotProps.value.name }}</span>
|
||||
</div>
|
||||
<span v-else class="text-xs text-slate-400">{{ slotProps.placeholder }}</span>
|
||||
</template>
|
||||
<template #option="slotProps">
|
||||
<div class="flex items-center gap-2">
|
||||
<img v-if="slotProps.option.avatar_image" :src="API_URL + slotProps.option.avatar_image"
|
||||
class="w-6 h-6 rounded-full object-cover" />
|
||||
<span>{{ slotProps.option.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</Dropdown>
|
||||
<Button icon="pi pi-refresh" @click="refreshHistory" rounded text
|
||||
class="!text-slate-400 hover:!bg-white/10 !w-8 !h-8 md:hidden" />
|
||||
<Button :icon="isSelectMode ? 'pi pi-times' : 'pi pi-check-square'" @click="toggleSelectMode"
|
||||
rounded text class="!w-8 !h-8"
|
||||
:class="isSelectMode ? '!text-violet-400 !bg-violet-500/20' : '!text-slate-400 hover:!bg-white/10'" />
|
||||
<Button icon="pi pi-cog" @click="isSettingsVisible = true" rounded text
|
||||
class="!text-slate-400 hover:!bg-white/10 !w-8 !h-8" v-if="!isSettingsVisible" />
|
||||
</div>
|
||||
@@ -613,97 +857,254 @@ const confirmAddToAlbum = async () => {
|
||||
:class="{ 'pb-[300px]': isSettingsVisible, 'pb-32': !isSettingsVisible }">
|
||||
<div v-if="historyGenerations.length > 0"
|
||||
class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-6 gap-2 md:gap-1">
|
||||
<div v-for="gen in historyGenerations" :key="gen.id"
|
||||
class="aspect-[9/16] relative group overflow-hidden bg-slate-800 transition-all duration-300"
|
||||
@click="toggleMobileOverlay(gen.id)">
|
||||
<div v-for="item in groupedHistoryGenerations" :key="item.id"
|
||||
class="aspect-[9/16] relative overflow-hidden bg-slate-800 transition-all duration-300">
|
||||
|
||||
<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 cursor-pointer"
|
||||
@click.stop="openImagePreview(API_URL + '/assets/' + gen.result_list[0])" />
|
||||
|
||||
<div v-else-if="gen.status === 'failed'"
|
||||
class="w-full h-full flex flex-col items-center justify-center p-2 text-center bg-red-500/10 border border-red-500/20">
|
||||
<i class="pi pi-times-circle text-red-500 text-2xl mb-1"></i>
|
||||
<span class="text-[10px] font-bold text-red-400 uppercase tracking-wide">Failed</span>
|
||||
<span v-if="gen.failed_reason"
|
||||
class="text-[8px] text-red-300/70 mt-1 line-clamp-2 leading-tight"
|
||||
v-tooltip.top="gen.failed_reason">{{ gen.failed_reason }}</span>
|
||||
<!-- ============================================ -->
|
||||
<!-- GROUPED GENERATION (multiple in one slot) -->
|
||||
<!-- ============================================ -->
|
||||
<template v-if="item.isGroup">
|
||||
<!-- Group badge -->
|
||||
<div v-if="!isSelectMode"
|
||||
class="absolute top-1.5 left-1.5 z-20 bg-violet-600/80 backdrop-blur-sm text-white text-[9px] font-bold px-1.5 py-0.5 rounded-md pointer-events-none">
|
||||
{{ item.children.length }}x
|
||||
</div>
|
||||
|
||||
<div v-else-if="['processing', 'starting', 'running'].includes(gen.status)"
|
||||
class="w-full h-full flex flex-col items-center justify-center relative overflow-hidden bg-slate-800/50 border border-violet-500/20 group">
|
||||
<!-- Shimmer Background -->
|
||||
<div class="w-full h-full grid gap-0.5"
|
||||
:class="item.children.length <= 2 ? 'grid-cols-1' : 'grid-cols-2'">
|
||||
<div v-for="child in item.children" :key="child.id"
|
||||
class="relative group overflow-hidden" @click="toggleMobileOverlay(child.id)">
|
||||
|
||||
<!-- Child: has result -->
|
||||
<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" />
|
||||
|
||||
<!-- Child: processing -->
|
||||
<div v-else-if="['processing', 'starting', 'running'].includes(child.status)"
|
||||
class="w-full h-full flex flex-col items-center justify-center relative overflow-hidden bg-slate-800/50">
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-tr from-violet-500/5 via-violet-500/10 to-cyan-500/5 animate-pulse">
|
||||
</div>
|
||||
|
||||
<!-- Moving Highlight -->
|
||||
<div
|
||||
class="absolute inset-0 -translate-x-full animate-[shimmer_2s_infinite] bg-gradient-to-r from-transparent via-white/5 to-transparent">
|
||||
</div>
|
||||
|
||||
<i class="pi pi-spin pi-spinner text-violet-500 text-xl mb-2 relative z-10"></i>
|
||||
<span class="text-[10px] text-violet-300/70 relative z-10 capitalize">{{ gen.status
|
||||
}}...</span>
|
||||
<span v-if="gen.progress"
|
||||
class="text-[9px] text-violet-400/60 font-mono mt-1 relative z-10">{{
|
||||
gen.progress }}%</span>
|
||||
<i class="pi pi-spin pi-spinner text-violet-500 text-sm relative z-10"></i>
|
||||
</div>
|
||||
|
||||
<div v-else class="w-full h-full flex items-center justify-center text-slate-600 bg-slate-800">
|
||||
<!-- Child: FAILED -->
|
||||
<div v-else-if="child.status === 'failed'"
|
||||
class="w-full h-full flex flex-col items-center justify-center bg-red-500/10 relative group p-2 text-center"
|
||||
v-tooltip.bottom="item.children.length > 1 ? (child.failed_reason || 'Generation failed') : null">
|
||||
<i class="pi pi-times-circle text-red-500 text-lg mb-0.5"></i>
|
||||
<span
|
||||
class="text-[8px] font-bold text-red-400 uppercase tracking-wide leading-tight">Failed</span>
|
||||
|
||||
<!-- Show error text if only 1 child -->
|
||||
<span v-if="item.children.length === 1 && child.failed_reason"
|
||||
class="text-[8px] text-red-300/70 mt-1 line-clamp-3 leading-tight">
|
||||
{{ child.failed_reason }}
|
||||
</span>
|
||||
|
||||
<!-- Delete Persistent for failed child -->
|
||||
<div class="absolute top-0 right-0 p-1 z-10">
|
||||
<Button icon="pi pi-trash" size="small"
|
||||
class="!w-5 !h-5 !rounded-full !bg-red-500/20 !border-none !text-red-400 !text-[8px] hover:!bg-red-500 hover:!text-white pointer-events-auto"
|
||||
@click.stop="deleteGeneration(child)" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Child: other -->
|
||||
<div v-else class="w-full h-full flex items-center justify-center bg-slate-800">
|
||||
<i class="pi pi-image text-lg opacity-20 text-slate-600"></i>
|
||||
</div>
|
||||
|
||||
<!-- SUCCESS overlay per child (hover) -->
|
||||
<div v-if="child.result_list && child.result_list.length > 0"
|
||||
class="absolute inset-0 bg-black/60 transition-opacity duration-200 flex flex-col justify-between p-1 z-10"
|
||||
:class="{ 'opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto': activeOverlayId !== child.id, 'opacity-100 pointer-events-auto': activeOverlayId === child.id }">
|
||||
|
||||
<!-- Top right: edit, delete -->
|
||||
<div class="flex justify-end items-start gap-0.5">
|
||||
<Button icon="pi pi-pencil" size="small"
|
||||
class="!w-5 !h-5 !rounded-full !bg-white/20 !border-none !text-white !text-[8px] hover:!bg-violet-500"
|
||||
@click.stop="useResultAsAsset(child)" />
|
||||
<Button icon="pi pi-trash" size="small"
|
||||
class="!w-5 !h-5 !rounded-full !bg-red-500/20 !border-none !text-red-400 !text-[8px] hover:!bg-red-500 hover:!text-white"
|
||||
@click.stop="deleteGeneration(child)" />
|
||||
</div>
|
||||
|
||||
<!-- Center: view button + cost -->
|
||||
<div
|
||||
class="flex-1 flex flex-col items-center justify-center pointer-events-none">
|
||||
<span class="text-[8px] font-bold text-slate-300 font-mono mb-1">{{
|
||||
child.cost }} $</span>
|
||||
<Button icon="pi pi-eye" rounded text
|
||||
class="!bg-black/50 !text-white !w-8 !h-8 !rounded-full hover:!bg-black/70 hover:!scale-110 transition-all pointer-events-auto !border !border-white/20"
|
||||
@click.stop="openImagePreview(API_URL + '/assets/' + child.result_list[0])" />
|
||||
</div>
|
||||
|
||||
<!-- Bottom: reuse prompt + reuse assets -->
|
||||
<div class="flex gap-0.5">
|
||||
<Button icon="pi pi-comment" size="small"
|
||||
class="!w-5 !h-5 flex-1 !bg-white/10 !border-white/10 !text-slate-200 !text-[8px] hover:!bg-white/20"
|
||||
@click.stop="reusePrompt(child)" />
|
||||
<Button icon="pi pi-images" size="small"
|
||||
class="!w-5 !h-5 flex-1 !bg-white/10 !border-white/10 !text-slate-200 !text-[8px] hover:!bg-white/20"
|
||||
@click.stop="reuseAsset(child)" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Selection overlay for group children -->
|
||||
<div v-if="isSelectMode" class="absolute inset-0 z-30 pointer-events-none">
|
||||
<div class="absolute top-1 left-1 z-30 flex flex-col gap-0.5 pointer-events-auto">
|
||||
<template v-for="child in item.children" :key="'chk-'+child.id">
|
||||
<div v-if="child.result_list && child.result_list.length > 0"
|
||||
@click.stop="toggleImageSelection(child.result_list[0])"
|
||||
class="w-5 h-5 rounded-md flex items-center justify-center cursor-pointer transition-all"
|
||||
:class="selectedAssetIds.has(child.result_list[0]) ? 'bg-violet-600 text-white' : 'bg-black/40 border border-white/30 text-transparent'">
|
||||
<i class="pi pi-check" style="font-size: 10px"></i>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- ============================================ -->
|
||||
<!-- SINGLE GENERATION (full slot) -->
|
||||
<!-- ============================================ -->
|
||||
<template v-else>
|
||||
<div class="w-full h-full relative group" @click="toggleMobileOverlay(item.id)">
|
||||
|
||||
<!-- SUCCESS: image -->
|
||||
<img v-if="item.result_list && item.result_list.length > 0"
|
||||
:src="API_URL + '/assets/' + item.result_list[0] + '?thumbnail=true'"
|
||||
class="w-full h-full object-cover cursor-pointer"
|
||||
@click.stop="isSelectMode ? toggleImageSelection(item.result_list[0]) : openImagePreview(API_URL + '/assets/' + item.result_list[0])" />
|
||||
|
||||
<!-- FAILED: error display -->
|
||||
<div v-else-if="item.status === 'failed'"
|
||||
class="w-full h-full flex flex-col items-center justify-between p-3 text-center bg-red-500/10 border border-red-500/20 relative group">
|
||||
|
||||
<!-- Top Right: Delete (Persistent) -->
|
||||
<div class="w-full flex justify-end">
|
||||
<Button icon="pi pi-trash" v-tooltip.right="'Delete'"
|
||||
class="!w-6 !h-6 !rounded-full !bg-red-500/20 !border-none !text-red-400 text-[10px] hover:!bg-red-500 hover:!text-white z-10"
|
||||
@click.stop="deleteGeneration(item)" />
|
||||
</div>
|
||||
|
||||
<!-- Center: Error Info -->
|
||||
<div class="flex flex-col items-center justify-center flex-1">
|
||||
<i class="pi pi-times-circle text-red-500 text-2xl mb-1"></i>
|
||||
<span
|
||||
class="text-[10px] font-bold text-red-400 uppercase tracking-wide">Failed</span>
|
||||
<span v-if="item.failed_reason"
|
||||
class="text-[8px] text-red-300/70 mt-1 line-clamp-3 leading-tight"
|
||||
v-tooltip.top="item.failed_reason">{{ item.failed_reason }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Bottom: Reuse Buttons (Persistent) -->
|
||||
<div class="w-full flex gap-1 z-10">
|
||||
<Button icon="pi pi-comment" v-tooltip.bottom="'Reuse Prompt'"
|
||||
class="!w-6 !h-6 flex-1 !bg-white/10 !border-white/10 !text-slate-200 text-[10px] hover:!bg-white/20"
|
||||
@click.stop="reusePrompt(item)" />
|
||||
<Button icon="pi pi-images" v-tooltip.bottom="'Reuse Assets'"
|
||||
class="!w-6 !h-6 flex-1 !bg-white/10 !border-white/10 !text-slate-200 text-[10px] hover:!bg-white/20"
|
||||
@click.stop="reuseAsset(item)" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PROCESSING -->
|
||||
<div v-else-if="['processing', 'starting', 'running'].includes(item.status)"
|
||||
class="w-full h-full flex flex-col items-center justify-center relative overflow-hidden bg-slate-800/50 border border-violet-500/20">
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-tr from-violet-500/5 via-violet-500/10 to-cyan-500/5 animate-pulse">
|
||||
</div>
|
||||
<div
|
||||
class="absolute inset-0 -translate-x-full animate-[shimmer_2s_infinite] bg-gradient-to-r from-transparent via-white/5 to-transparent">
|
||||
</div>
|
||||
<i class="pi pi-spin pi-spinner text-violet-500 text-xl mb-2 relative z-10"></i>
|
||||
<span class="text-[10px] text-violet-300/70 relative z-10 capitalize">{{ item.status
|
||||
}}...</span>
|
||||
<span v-if="item.progress"
|
||||
class="text-[9px] text-violet-400/60 font-mono mt-1 relative z-10">{{
|
||||
item.progress }}%</span>
|
||||
</div>
|
||||
|
||||
<!-- EMPTY -->
|
||||
<div v-else
|
||||
class="w-full h-full flex items-center justify-center text-slate-600 bg-slate-800">
|
||||
<i class="pi pi-image text-4xl opacity-20"></i>
|
||||
</div>
|
||||
|
||||
<div class="absolute inset-0 bg-black/60 transition-opacity duration-200 flex flex-col justify-between p-2"
|
||||
:class="{ 'opacity-0 group-hover:opacity-100': activeOverlayId !== gen.id, 'opacity-100': activeOverlayId === gen.id }">
|
||||
<!-- HOVER OVERLAY (for successful single gen state only) -->
|
||||
<div v-if="item.result_list && item.result_list.length > 0"
|
||||
class="absolute inset-0 bg-black/60 transition-opacity duration-200 flex flex-col justify-between p-2 z-10"
|
||||
:class="{ 'opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto': activeOverlayId !== item.id, 'opacity-100 pointer-events-auto': activeOverlayId === item.id }">
|
||||
|
||||
<!-- Top Right: buttons -->
|
||||
<div
|
||||
class="flex justify-between items-start translate-y-[-10px] group-hover:translate-y-0 transition-transform duration-200 w-full z-10">
|
||||
<Button icon="pi pi-trash" v-tooltip.right="'Delete'"
|
||||
class="!w-6 !h-6 !rounded-full !bg-red-500/20 !border-none !text-red-400 text-[10px] hover:!bg-red-500 hover:!text-white"
|
||||
@click.stop="deleteGeneration(gen)" />
|
||||
|
||||
<div class="flex flex-col items-center gap-0.5 pointer-events-none">
|
||||
<span class="text-[10px] font-bold text-slate-300 font-mono tracking-wider">{{
|
||||
gen.cost }} $</span>
|
||||
<span v-if="gen.execution_time_seconds"
|
||||
class="text-[8px] text-slate-500 font-mono">{{
|
||||
gen.execution_time_seconds.toFixed(1) }}s</span>
|
||||
</div>
|
||||
|
||||
class="flex justify-end items-start translate-y-[-10px] group-hover:translate-y-0 transition-transform duration-200 w-full z-10">
|
||||
<div class="flex gap-1">
|
||||
<Button v-if="gen.result_list && gen.result_list.length > 0" icon="pi pi-pencil"
|
||||
v-tooltip.left="'Edit (Use Result)'"
|
||||
<Button v-if="item.result_list && item.result_list.length > 0"
|
||||
icon="pi pi-pencil" v-tooltip.left="'Edit (Use Result)'"
|
||||
class="!w-6 !h-6 !rounded-full !bg-white/20 !border-none !text-white text-[10px] hover:!bg-violet-500"
|
||||
@click.stop="useResultAsAsset(gen)" />
|
||||
<Button icon="pi pi-folder-plus" v-tooltip.left="'Add to Album'"
|
||||
class="!w-6 !h-6 !rounded-full !bg-white/20 !border-none !text-white text-[10px] hover:!bg-violet-500"
|
||||
@click.stop="openAlbumPicker(gen)" />
|
||||
@click.stop="useResultAsAsset(item)" />
|
||||
<Button icon="pi pi-trash" v-tooltip.left="'Delete'"
|
||||
class="!w-6 !h-6 !rounded-full !bg-red-500/20 !border-none !text-red-400 text-[10px] hover:!bg-red-500 hover:!text-white"
|
||||
@click.stop="deleteGeneration(item)" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Centered View Button -->
|
||||
<div v-if="gen.result_list && gen.result_list.length > 0"
|
||||
class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none">
|
||||
<!-- Center: View button + Cost/Time -->
|
||||
<div
|
||||
class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none z-0">
|
||||
<!-- Cost & Time -->
|
||||
<div class="flex flex-col items-center gap-0.5 mb-2 pointer-events-none">
|
||||
<span
|
||||
class="text-[10px] font-bold text-slate-300 font-mono tracking-wider">{{
|
||||
item.cost }} $</span>
|
||||
<span v-if="item.execution_time_seconds"
|
||||
class="text-[8px] text-slate-500 font-mono">{{
|
||||
item.execution_time_seconds.toFixed(1) }}s</span>
|
||||
</div>
|
||||
<!-- View Button -->
|
||||
<Button icon="pi pi-eye" rounded text
|
||||
class="!bg-black/50 !text-white !w-12 !h-12 !rounded-full hover:!bg-black/70 hover:!scale-110 transition-all pointer-events-auto !border-2 !border-white/20"
|
||||
@click.stop="openImagePreview(API_URL + '/assets/' + gen.result_list[0])" />
|
||||
@click.stop="openImagePreview(API_URL + '/assets/' + item.result_list[0])" />
|
||||
</div>
|
||||
|
||||
<!-- Bottom: reuse buttons -->
|
||||
<div
|
||||
class="translate-y-[10px] group-hover:translate-y-0 transition-transform duration-200 z-10">
|
||||
<div class="flex gap-1 mb-1">
|
||||
<Button icon="pi pi-comment" v-tooltip.bottom="'Reuse Prompt'"
|
||||
class="!w-6 !h-6 flex-1 !bg-white/10 !border-white/10 !text-slate-200 text-[10px] hover:!bg-white/20"
|
||||
@click.stop="reusePrompt(gen)" />
|
||||
@click.stop="reusePrompt(item)" />
|
||||
<Button icon="pi pi-images" v-tooltip.bottom="'Reuse Assets'"
|
||||
class="!w-6 !h-6 flex-1 !bg-white/10 !border-white/10 !text-slate-200 text-[10px] hover:!bg-white/20"
|
||||
@click.stop="reuseAsset(gen)" />
|
||||
@click.stop="reuseAsset(item)" />
|
||||
</div>
|
||||
<p class="text-[10px] text-white/70 line-clamp-1 leading-tight">{{ gen.prompt }}</p>
|
||||
<p class="text-[10px] text-white/70 line-clamp-1 leading-tight">{{ item.prompt
|
||||
}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Select mode checkbox overlay -->
|
||||
<div v-if="isSelectMode && item.result_list && item.result_list.length > 0"
|
||||
class="absolute inset-0 z-20 cursor-pointer"
|
||||
@click.stop="toggleImageSelection(item.result_list[0])">
|
||||
<div class="absolute top-2 left-2 w-6 h-6 rounded-lg flex items-center justify-center transition-all"
|
||||
:class="selectedAssetIds.has(item.result_list[0]) ? 'bg-violet-600 text-white' : 'bg-black/40 border border-white/30 text-transparent hover:border-white/60'">
|
||||
<i class="pi pi-check" style="font-size: 12px"></i>
|
||||
</div>
|
||||
<div v-if="selectedAssetIds.has(item.result_list[0])"
|
||||
class="absolute inset-0 bg-violet-600/20 pointer-events-none"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -723,7 +1124,7 @@ const confirmAddToAlbum = async () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="isSettingsVisible"
|
||||
<div v-if="isSettingsVisible && !isSelectMode"
|
||||
class="absolute bottom-2 left-1/2 -translate-x-1/2 w-[98%] max-w-6xl glass-panel border border-white/10 bg-slate-900/95 backdrop-blur-xl p-4 z-[60] !rounded-[2.5rem] shadow-2xl flex flex-col gap-3 max-h-[85vh] overflow-y-auto">
|
||||
|
||||
<div class="w-full flex justify-center -mt-2 mb-2 cursor-pointer" @click="isSettingsVisible = false">
|
||||
@@ -750,7 +1151,7 @@ const confirmAddToAlbum = async () => {
|
||||
</div>
|
||||
<Textarea v-model="prompt" rows="3" autoResize
|
||||
placeholder="Describe what you want to create..."
|
||||
class="w-full bg-slate-800 border-white/10 text-white rounded-xl p-3 focus:border-violet-500 focus:ring-1 focus:ring-violet-500/50 transition-all resize-none shadow-inner" />
|
||||
class="w-full bg-slate-800 !text-[16px] border-white/10 text-white rounded-xl p-3 focus:border-violet-500 focus:ring-1 focus:ring-violet-500/50 transition-all resize-none shadow-inner" />
|
||||
|
||||
</div>
|
||||
|
||||
@@ -788,9 +1189,15 @@ 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
|
||||
class="text-xs text-slate-300 cursor-pointer select-none">Use
|
||||
Character
|
||||
Photo</label>
|
||||
</div>
|
||||
</div>
|
||||
@@ -801,7 +1208,8 @@ const confirmAddToAlbum = async () => {
|
||||
<div @click="openAssetPicker"
|
||||
class="w-full bg-slate-800 border border-white/10 rounded-xl p-3 min-h-[46px] cursor-pointer hover:bg-slate-700/50 transition-colors flex flex-wrap gap-2">
|
||||
<span v-if="selectedAssets.length === 0"
|
||||
class="text-slate-400 text-sm py-0.5">Select Assets</span>
|
||||
class="text-slate-400 text-sm py-0.5">Select
|
||||
Assets</span>
|
||||
<div v-for="asset in selectedAssets" :key="asset.id"
|
||||
class="px-2 py-1 bg-violet-600/30 border border-violet-500/30 text-violet-200 text-xs rounded-md flex items-center gap-2 animate-in fade-in zoom-in duration-200"
|
||||
@click.stop>
|
||||
@@ -834,6 +1242,20 @@ const confirmAddToAlbum = async () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Generation Count -->
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Count</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="flex-1 flex bg-slate-800 rounded-xl border border-white/10 overflow-hidden">
|
||||
<button v-for="n in 4" :key="n" @click="generationCount = n"
|
||||
class="flex-1 py-2 text-sm font-bold transition-all"
|
||||
:class="generationCount === n ? 'bg-violet-600 text-white' : 'text-slate-400 hover:text-white hover:bg-white/5'">
|
||||
{{ n }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2 bg-slate-800/50 p-3 rounded-xl border border-white/5">
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox v-model="sendToTelegram" :binary="true" inputId="tg-check" />
|
||||
@@ -870,13 +1292,41 @@ const confirmAddToAlbum = async () => {
|
||||
|
||||
|
||||
<Dialog v-model:visible="isImagePreviewVisible" modal dismissableMask
|
||||
:style="{ width: '90vw', maxWidth: '1000px', background: 'transparent', boxShadow: 'none' }"
|
||||
:style="{ width: '95vw', maxWidth: '1100px', background: 'transparent', boxShadow: 'none' }"
|
||||
:pt="{ root: { class: '!bg-transparent !border-none !shadow-none' }, header: { class: '!hidden' }, content: { class: '!bg-transparent !p-0' } }">
|
||||
<div class="relative flex items-center justify-center" @click="isImagePreviewVisible = false">
|
||||
<div class="relative flex items-center justify-center" @click.self="isImagePreviewVisible = false">
|
||||
|
||||
<!-- Previous Button -->
|
||||
<Button v-if="allPreviewImages.length > 1" icon="pi pi-chevron-left" @click.stop="navigatePreview(-1)"
|
||||
rounded text
|
||||
class="!absolute left-2 top-1/2 -translate-y-1/2 z-20 !text-white !bg-black/50 hover:!bg-black/70 !w-12 !h-12 !rounded-full !border !border-white/20 backdrop-blur-sm transition-all hover:!scale-110" />
|
||||
|
||||
<!-- Image -->
|
||||
<img v-if="previewImage" :src="previewImage.url"
|
||||
class="max-w-full max-h-[85vh] object-contain rounded-xl shadow-2xl" />
|
||||
class="max-w-full max-h-[85vh] object-contain rounded-xl shadow-2xl select-none"
|
||||
draggable="false" />
|
||||
|
||||
<!-- Next Button -->
|
||||
<Button v-if="allPreviewImages.length > 1" icon="pi pi-chevron-right" @click.stop="navigatePreview(1)"
|
||||
rounded text
|
||||
class="!absolute right-2 top-1/2 -translate-y-1/2 z-20 !text-white !bg-black/50 hover:!bg-black/70 !w-12 !h-12 !rounded-full !border !border-white/20 backdrop-blur-sm transition-all hover:!scale-110" />
|
||||
|
||||
<!-- Close Button -->
|
||||
<Button icon="pi pi-times" @click="isImagePreviewVisible = false" rounded text
|
||||
class="!absolute -top-4 -right-4 !text-white !bg-black/50 hover:!bg-black/70 !w-10 !h-10" />
|
||||
class="!absolute -top-4 -right-4 z-20 !text-white !bg-black/50 hover:!bg-black/70 !w-10 !h-10" />
|
||||
|
||||
<!-- Counter -->
|
||||
<div v-if="allPreviewImages.length > 1"
|
||||
class="absolute bottom-4 left-1/2 -translate-x-1/2 z-20 bg-black/60 backdrop-blur-sm text-white text-sm font-mono px-4 py-1.5 rounded-full border border-white/10">
|
||||
{{ previewIndex + 1 }} / {{ allPreviewImages.length }}
|
||||
</div>
|
||||
|
||||
<!-- Prompt (click to copy) -->
|
||||
<div v-if="previewImage?.prompt"
|
||||
class="absolute bottom-14 left-1/2 -translate-x-1/2 z-20 bg-black/60 backdrop-blur-sm text-white/80 text-xs px-4 py-2 rounded-xl border border-white/10 max-w-md text-center line-clamp-2 cursor-pointer hover:bg-black/80 hover:border-white/20 transition-all"
|
||||
v-tooltip.top="'Click to copy'" @click.stop="navigator.clipboard.writeText(previewImage.prompt)">
|
||||
{{ previewImage.prompt }}
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
|
||||
@@ -969,6 +1419,53 @@ const confirmAddToAlbum = async () => {
|
||||
</template>
|
||||
</Dialog>
|
||||
|
||||
<Toast />
|
||||
|
||||
<!-- Multi-select floating bar -->
|
||||
<Transition name="slide-up">
|
||||
<div v-if="isSelectMode && selectedAssetIds.size > 0"
|
||||
class="fixed bottom-6 left-1/2 -translate-x-1/2 z-[100] bg-slate-800/95 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl px-5 py-3 flex items-center gap-3">
|
||||
<span class="text-sm text-slate-300 font-medium">
|
||||
<i class="pi pi-check-circle mr-1 text-violet-400"></i>
|
||||
{{ selectedAssetIds.size }} selected
|
||||
</span>
|
||||
<div class="w-px h-6 bg-white/10"></div>
|
||||
<Button icon="pi pi-check-square" label="All" size="small" text @click="selectAllImages"
|
||||
class="!text-slate-400 hover:!text-white !text-xs" />
|
||||
<Button icon="pi pi-download" label="Download" size="small" :loading="isDownloading"
|
||||
@click="downloadSelected" class="!bg-violet-600 !border-none hover:!bg-violet-500 !text-sm" />
|
||||
<Button icon="pi pi-calendar" label="To plan" size="small" @click="openAddToPlan"
|
||||
class="!bg-emerald-600 !border-none hover:!bg-emerald-500 !text-sm" />
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
<!-- Add to Plan Dialog -->
|
||||
<Dialog v-model:visible="showAddToPlanDialog" header="Добавить в контент-план" modal :style="{ width: '400px' }"
|
||||
:pt="{ root: { class: '!bg-slate-800 !border-white/10' }, header: { class: '!bg-slate-800' }, content: { class: '!bg-slate-800' } }">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Дата</label>
|
||||
<DatePicker v-model="planPostDate" dateFormat="dd.mm.yy" showIcon class="w-full" :pt="{
|
||||
root: { class: '!bg-slate-700 !border-white/10' },
|
||||
pcInputText: { root: { class: '!bg-slate-700 !border-white/10 !text-white' } }
|
||||
}" />
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Тема</label>
|
||||
<InputText v-model="planPostTopic" placeholder="Тема поста..."
|
||||
class="w-full !bg-slate-700 !border-white/10 !text-white" />
|
||||
</div>
|
||||
<p class="text-xs text-slate-500"><i class="pi pi-images mr-1"></i>{{ selectedAssetIds.size }}
|
||||
изображений
|
||||
будет добавлено</p>
|
||||
<div class="flex justify-end gap-2">
|
||||
<Button label="Отмена" text @click="showAddToPlanDialog = false"
|
||||
class="!text-slate-400 hover:!text-white" />
|
||||
<Button label="Добавить" icon="pi pi-check" :loading="isSavingToPlan" @click="confirmAddToPlan"
|
||||
class="!bg-violet-600 !border-none hover:!bg-violet-500" />
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
1387
src/views/IdeaDetailView.vue
Normal file
1387
src/views/IdeaDetailView.vue
Normal file
File diff suppressed because it is too large
Load Diff
547
src/views/IdeasView.vue
Normal file
547
src/views/IdeasView.vue
Normal file
@@ -0,0 +1,547 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useIdeaStore } from '../stores/ideas'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { dataService } from '../services/dataService' // Added import
|
||||
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'
|
||||
import Dropdown from 'primevue/dropdown'
|
||||
import Checkbox from 'primevue/checkbox'
|
||||
|
||||
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
|
||||
|
||||
// --- Generation Settings ---
|
||||
const prompt = ref('')
|
||||
const selectedModel = ref('flux-schnell')
|
||||
const quality = ref({ key: 'TWOK', value: '2K' })
|
||||
const aspectRatio = ref({ key: 'NINESIXTEEN', value: '9:16' })
|
||||
const imageCount = ref(1)
|
||||
const sendToTelegram = ref(false)
|
||||
const telegramId = ref('')
|
||||
const useProfileImage = ref(true)
|
||||
const isSubmittingGen = ref(false)
|
||||
|
||||
// Character & Assets
|
||||
const characters = ref([])
|
||||
const selectedCharacter = ref(null)
|
||||
const selectedAssets = ref([])
|
||||
let _savedCharacterId = null
|
||||
|
||||
const qualityOptions = ref([
|
||||
{ key: 'ONEK', value: '1K' },
|
||||
{ key: 'TWOK', value: '2K' },
|
||||
{ key: 'FOURK', value: '4K' }
|
||||
])
|
||||
const aspectRatioOptions = ref([
|
||||
{ key: "NINESIXTEEN", value: "9:16" },
|
||||
{ key: "FOURTHREE", value: "4:3" },
|
||||
{ key: "THREEFOUR", value: "3:4" },
|
||||
{ key: "SIXTEENNINE", value: "16:9" }
|
||||
])
|
||||
|
||||
// Restore settings
|
||||
const SETTINGS_KEY = 'idea-gen-settings'
|
||||
const restoreSettings = () => {
|
||||
const stored = localStorage.getItem(SETTINGS_KEY)
|
||||
if (!stored) return
|
||||
try {
|
||||
const s = JSON.parse(stored)
|
||||
if (s.prompt) prompt.value = s.prompt
|
||||
if (s.quality) quality.value = s.quality
|
||||
if (s.aspectRatio) aspectRatio.value = s.aspectRatio
|
||||
if (s.imageCount) imageCount.value = Math.min(s.imageCount, 4)
|
||||
if (s.selectedModel) selectedModel.value = s.selectedModel
|
||||
sendToTelegram.value = s.sendToTelegram || false
|
||||
telegramId.value = s.telegramId || localStorage.getItem('telegram_id') || ''
|
||||
if (s.useProfileImage !== undefined) useProfileImage.value = s.useProfileImage
|
||||
_savedCharacterId = s.selectedCharacterId || null
|
||||
if (s.selectedAssetIds && s.selectedAssetIds.length > 0) {
|
||||
selectedAssets.value = s.selectedAssetIds.map(id => ({
|
||||
id,
|
||||
url: `/assets/${id}`,
|
||||
name: 'Asset ' + id.substring(0, 4)
|
||||
}))
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to restore settings', e)
|
||||
}
|
||||
}
|
||||
|
||||
const saveSettings = () => {
|
||||
const settings = {
|
||||
prompt: prompt.value,
|
||||
quality: quality.value,
|
||||
aspectRatio: aspectRatio.value,
|
||||
imageCount: imageCount.value,
|
||||
selectedModel: selectedModel.value,
|
||||
sendToTelegram: sendToTelegram.value,
|
||||
telegramId: telegramId.value,
|
||||
useProfileImage: useProfileImage.value,
|
||||
selectedCharacterId: selectedCharacter.value?.id || null,
|
||||
selectedAssetIds: selectedAssets.value.map(a => a.id),
|
||||
}
|
||||
localStorage.setItem(SETTINGS_KEY, JSON.stringify(settings))
|
||||
if (telegramId.value) localStorage.setItem('telegram_id', telegramId.value)
|
||||
}
|
||||
|
||||
watch([prompt, quality, aspectRatio, imageCount, selectedModel, sendToTelegram, telegramId, useProfileImage, selectedCharacter, selectedAssets], saveSettings, { deep: true })
|
||||
|
||||
onMounted(async () => {
|
||||
restoreSettings()
|
||||
await Promise.all([
|
||||
ideaStore.fetchIdeas(),
|
||||
loadCharacters()
|
||||
])
|
||||
})
|
||||
|
||||
const loadCharacters = async () => {
|
||||
try {
|
||||
characters.value = await dataService.getCharacters()
|
||||
if (_savedCharacterId && characters.value.length > 0) {
|
||||
const found = characters.value.find(c => c.id === _savedCharacterId)
|
||||
if (found) selectedCharacter.value = found
|
||||
_savedCharacterId = null
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to load characters', e)
|
||||
}
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
// Auto-generation flow
|
||||
const handleGenerate = async () => {
|
||||
if (!prompt.value) return
|
||||
|
||||
isSubmittingGen.value = true
|
||||
try {
|
||||
// 1. Create a random name idea
|
||||
const randomName = 'Session ' + new Date().toLocaleString()
|
||||
const newIdea = await ideaStore.createIdea({
|
||||
name: randomName,
|
||||
description: 'Auto-generated from quick start'
|
||||
})
|
||||
|
||||
// 2. Save settings (already handled by watch, but ensure latest)
|
||||
saveSettings()
|
||||
|
||||
// 3. Navigate with autostart param
|
||||
router.push({ path: `/ideas/${newIdea.id}`, query: { autostart: 'true' } })
|
||||
|
||||
} catch (e) {
|
||||
console.error('Failed to start session', e)
|
||||
} finally {
|
||||
isSubmittingGen.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// --- Asset Picker Logic ---
|
||||
const isAssetPickerVisible = ref(false)
|
||||
const assetPickerTab = ref('all') // 'all', 'uploaded', 'generated'
|
||||
const modalAssets = ref([])
|
||||
const isModalLoading = ref(false)
|
||||
const tempSelectedAssets = ref([])
|
||||
const assetPickerFileInput = ref(null)
|
||||
|
||||
const loadModalAssets = async () => {
|
||||
isModalLoading.value = true
|
||||
try {
|
||||
const typeParam = assetPickerTab.value === 'all' ? undefined : assetPickerTab.value
|
||||
const response = await dataService.getAssets(100, 0, typeParam)
|
||||
if (response && response.assets) {
|
||||
modalAssets.value = response.assets
|
||||
} else {
|
||||
modalAssets.value = Array.isArray(response) ? response : []
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to load modal assets', e)
|
||||
modalAssets.value = []
|
||||
} finally {
|
||||
isModalLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const openAssetPicker = () => {
|
||||
tempSelectedAssets.value = [...selectedAssets.value]
|
||||
isAssetPickerVisible.value = true
|
||||
loadModalAssets()
|
||||
}
|
||||
|
||||
const toggleAssetSelection = (asset) => {
|
||||
const index = tempSelectedAssets.value.findIndex(a => a.id === asset.id)
|
||||
if (index === -1) {
|
||||
tempSelectedAssets.value.push(asset)
|
||||
} else {
|
||||
tempSelectedAssets.value.splice(index, 1)
|
||||
}
|
||||
}
|
||||
|
||||
const confirmAssetSelection = () => {
|
||||
selectedAssets.value = [...tempSelectedAssets.value]
|
||||
isAssetPickerVisible.value = false
|
||||
}
|
||||
|
||||
const removeAsset = (asset) => {
|
||||
selectedAssets.value = selectedAssets.value.filter(a => a.id !== asset.id)
|
||||
}
|
||||
|
||||
watch(assetPickerTab, () => {
|
||||
if (isAssetPickerVisible.value) {
|
||||
loadModalAssets()
|
||||
}
|
||||
})
|
||||
|
||||
const triggerAssetPickerUpload = () => {
|
||||
assetPickerFileInput.value?.click()
|
||||
}
|
||||
|
||||
const handleAssetPickerUpload = async (event) => {
|
||||
const target = event.target
|
||||
if (target.files && target.files[0]) {
|
||||
const file = target.files[0]
|
||||
try {
|
||||
isModalLoading.value = true
|
||||
await dataService.uploadAsset(file)
|
||||
assetPickerTab.value = 'uploaded'
|
||||
loadModalAssets()
|
||||
} catch (e) {
|
||||
console.error('Failed to upload asset', e)
|
||||
} finally {
|
||||
isModalLoading.value = false
|
||||
target.value = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col h-full font-sans relative">
|
||||
<!-- Content Area (Scrollable) -->
|
||||
<div class="flex-1 overflow-y-auto p-8 pb-48 custom-scrollbar">
|
||||
<!-- 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>
|
||||
<!-- REMOVED NEW IDEA BUTTON -->
|
||||
</header>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div v-if="loading && ideas.length === 0" class="flex flex-col gap-4">
|
||||
<div v-for="i in 6" :key="i" class="glass-panel rounded-2xl p-4 flex gap-4 items-center">
|
||||
<Skeleton width="4rem" height="4rem" class="rounded-lg" />
|
||||
<div class="flex-1">
|
||||
<Skeleton width="40%" height="1.5rem" class="mb-2" />
|
||||
<Skeleton width="60%" height="1rem" />
|
||||
</div>
|
||||
</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">Use the panel below to start a new creative session.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Ideas List (Vertical) -->
|
||||
<div v-else class="flex flex-col gap-3">
|
||||
<div v-for="idea in ideas" :key="idea.id"
|
||||
class="glass-panel rounded-xl p-3 flex gap-4 items-center cursor-pointer border border-white/5 hover:bg-slate-800/80 hover:border-violet-500/30 group transition-all"
|
||||
@click="goToDetail(idea.id)">
|
||||
|
||||
<!-- Thumbnail -->
|
||||
<div
|
||||
class="w-16 h-16 rounded-lg bg-slate-800 flex-shrink-0 overflow-hidden relative border border-white/10">
|
||||
<img v-if="idea.last_generation && idea.last_generation.status == 'done' && idea.last_generation.result_list.length > 0"
|
||||
:src="API_URL + '/assets/' + idea.last_generation.result_list[0] + '?thumbnail=true'"
|
||||
class="w-full h-full object-cover" />
|
||||
<div v-else class="w-full h-full flex items-center justify-center bg-slate-800 text-slate-600">
|
||||
<i class="pi pi-image text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Details -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3
|
||||
class="m-0 text-lg font-bold text-slate-200 group-hover:text-violet-300 transition-colors truncate">
|
||||
{{ idea.name }}</h3>
|
||||
<p class="m-0 text-sm text-slate-500 truncate">{{ idea.description || 'No description' }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Meta -->
|
||||
<div class="flex items-center gap-4 text-xs text-slate-500">
|
||||
<div class="flex items-center gap-1 bg-slate-900/50 px-2 py-1 rounded-md">
|
||||
<i class="pi pi-images text-[10px]"></i>
|
||||
<span>{{ idea.generation_ids?.length || 0 }}</span>
|
||||
</div>
|
||||
<i class="pi pi-chevron-right text-slate-600 group-hover:text-white transition-colors"></i>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Create Idea Dialog (Removed) -->
|
||||
|
||||
|
||||
<!-- SETTINGS PANEL (Bottom - Persistent) -->
|
||||
<div
|
||||
class="absolute bottom-4 left-1/2 -translate-x-1/2 w-[95%] max-w-4xl glass-panel border border-white/10 bg-slate-900/95 backdrop-blur-xl px-4 py-3 z-[60] !rounded-[2rem] shadow-2xl flex flex-col gap-1 max-h-[60vh] overflow-y-auto">
|
||||
|
||||
<div class="flex flex-col lg:flex-row gap-3">
|
||||
<!-- LEFT COLUMN: Prompt + Character + Assets -->
|
||||
<div class="flex-1 flex flex-col gap-2">
|
||||
<!-- Prompt -->
|
||||
<div class="flex flex-col gap-1">
|
||||
<div class="flex justify-between items-center">
|
||||
<label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Prompt</label>
|
||||
<!-- Optional: Add Clear/Improve buttons here if desired, keeping simple for now to match layout -->
|
||||
</div>
|
||||
<Textarea v-model="prompt" rows="2" autoResize
|
||||
placeholder="Describe what you want to create... (Auto-starts new session)"
|
||||
class="w-full bg-slate-800 !text-sm border-white/10 text-white rounded-lg p-2 focus:border-violet-500 focus:ring-1 focus:ring-violet-500/50 transition-all resize-none shadow-inner" />
|
||||
</div>
|
||||
|
||||
<!-- Character & Assets Row -->
|
||||
<div class="flex flex-col md:flex-row gap-2">
|
||||
<div class="flex-1 flex flex-col gap-1">
|
||||
<label
|
||||
class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Character</label>
|
||||
<Dropdown v-model="selectedCharacter" :options="characters" optionLabel="name"
|
||||
placeholder="Select Character" filter showClear
|
||||
class="w-full !bg-slate-800 !border-white/10 !text-white !rounded-xl" :pt="{
|
||||
root: { class: '!bg-slate-800' },
|
||||
input: { class: '!text-white' },
|
||||
trigger: { class: '!text-slate-400' },
|
||||
panel: { class: '!bg-slate-800 !border-white/10' },
|
||||
item: { class: '!text-slate-300 hover:!bg-white/10 hover:!text-white' }
|
||||
}">
|
||||
<template #value="slotProps">
|
||||
<div v-if="slotProps.value" class="flex items-center gap-2">
|
||||
<img v-if="slotProps.value.avatar_image"
|
||||
:src="API_URL + slotProps.value.avatar_image"
|
||||
class="w-6 h-6 rounded-full object-cover" />
|
||||
<span>{{ slotProps.value.name }}</span>
|
||||
</div>
|
||||
<span v-else>{{ slotProps.placeholder }}</span>
|
||||
</template>
|
||||
<template #option="slotProps">
|
||||
<div class="flex items-center gap-2">
|
||||
<img v-if="slotProps.option.avatar_image"
|
||||
:src="API_URL + slotProps.option.avatar_image"
|
||||
class="w-8 h-8 rounded-full object-cover" />
|
||||
<span>{{ slotProps.option.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</Dropdown>
|
||||
|
||||
<div v-if="selectedCharacter"
|
||||
class="flex items-center gap-2 mt-2 px-1 animate-in fade-in slide-in-from-top-1">
|
||||
<Checkbox v-model="useProfileImage" :binary="true" inputId="idea-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="idea-use-profile-img"
|
||||
class="text-xs text-slate-300 cursor-pointer select-none">Use
|
||||
Character
|
||||
Photo</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 flex flex-col gap-1">
|
||||
<label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Assets</label>
|
||||
<div @click="openAssetPicker"
|
||||
class="w-full bg-slate-800 border border-white/10 rounded-lg p-2 min-h-[38px] cursor-pointer hover:bg-slate-700/50 transition-colors flex flex-wrap gap-1.5">
|
||||
<span v-if="selectedAssets.length === 0" class="text-slate-400 text-sm py-0.5">Select
|
||||
Assets</span>
|
||||
<div v-for="asset in selectedAssets" :key="asset.id"
|
||||
class="px-2 py-1 bg-violet-600/30 border border-violet-500/30 text-violet-200 text-xs rounded-md flex items-center gap-2 animate-in fade-in zoom-in duration-200"
|
||||
@click.stop>
|
||||
<img v-if="asset.url" :src="API_URL + asset.url + '?thumbnail=true'"
|
||||
class="w-4 h-4 rounded object-cover" />
|
||||
<span class="truncate max-w-[100px]">{{ asset.name || 'Asset ' + (asset.id ?
|
||||
asset.id.substring(0, 4) : '') }}</span>
|
||||
<i class="pi pi-times cursor-pointer hover:text-white"
|
||||
@click.stop="removeAsset(asset)"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT COLUMN: Settings & Button -->
|
||||
<div class="w-full lg:w-72 flex flex-col gap-2">
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Quality</label>
|
||||
<Dropdown v-model="quality" :options="qualityOptions" optionLabel="value"
|
||||
class="w-full !bg-slate-800 !border-white/10 !text-white !rounded-xl"
|
||||
:pt="{ input: { class: '!text-white' }, trigger: { class: '!text-slate-400' }, panel: { class: '!bg-slate-800 !border-white/10' }, item: { class: '!text-slate-300 hover:!bg-white/10 hover:!text-white' } }" />
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Ratio</label>
|
||||
<Dropdown v-model="aspectRatio" :options="aspectRatioOptions" optionLabel="value"
|
||||
class="w-full !bg-slate-800 !border-white/10 !text-white !rounded-xl"
|
||||
:pt="{ input: { class: '!text-white' }, trigger: { class: '!text-slate-400' }, panel: { class: '!bg-slate-800 !border-white/10' }, item: { class: '!text-slate-300 hover:!bg-white/10 hover:!text-white' } }" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Generation Count -->
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Count</label>
|
||||
<div class="flex items-center">
|
||||
<div class="flex-1 flex bg-slate-800 rounded-lg border border-white/10 overflow-hidden">
|
||||
<button v-for="n in 4" :key="n" @click="imageCount = n"
|
||||
class="flex-1 py-1 text-xs font-bold transition-all"
|
||||
:class="imageCount === n ? 'bg-violet-600 text-white' : 'text-slate-400 hover:text-white hover:bg-white/5'">
|
||||
{{ n }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Telegram (Copied from Detail View) -->
|
||||
<div class="flex flex-col gap-1 bg-slate-800/50 p-2 rounded-lg border border-white/5">
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox v-model="sendToTelegram" :binary="true" inputId="idea-tg-check" />
|
||||
<label for="idea-tg-check" class="text-xs text-slate-300 cursor-pointer">Send to
|
||||
Telegram</label>
|
||||
</div>
|
||||
<div v-if="sendToTelegram" class="animate-in fade-in slide-in-from-top-1">
|
||||
<InputText v-model="telegramId" placeholder="Telegram ID"
|
||||
class="w-full !text-xs !bg-slate-900 !border-white/10 !text-white !py-1.5" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mt-auto">
|
||||
<Button :label="isSubmittingGen ? 'Starting...' : 'Generate New Session'"
|
||||
:icon="isSubmittingGen ? 'pi pi-spin pi-spinner' : 'pi pi-sparkles'"
|
||||
:loading="isSubmittingGen" :disabled="isSubmittingGen || !prompt" @click="handleGenerate"
|
||||
class="w-full !py-2 !text-sm !font-bold !bg-gradient-to-r from-violet-600 to-cyan-500 !border-none !rounded-lg !shadow-lg !shadow-violet-500/20 hover:!scale-[1.02] transition-all disabled:opacity-50 disabled:cursor-not-allowed" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Dialog v-model:visible="isAssetPickerVisible" modal header="Select Assets"
|
||||
:style="{ width: '80vw', maxWidth: '900px' }"
|
||||
: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-0' }, 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 h-[70vh]">
|
||||
<!-- Tabs -->
|
||||
<div class="flex border-b border-white/5 px-4 items-center">
|
||||
<button v-for="tab in ['all', 'uploaded', 'generated']" :key="tab" @click="assetPickerTab = tab"
|
||||
class="px-4 py-3 text-sm font-medium border-b-2 transition-colors capitalize"
|
||||
:class="assetPickerTab === tab ? 'border-violet-500 text-violet-400' : 'border-transparent text-slate-400 hover:text-slate-200'">
|
||||
{{ tab }}
|
||||
</button>
|
||||
<!-- Upload Action -->
|
||||
<div class="ml-auto flex items-center">
|
||||
<input type="file" ref="assetPickerFileInput" @change="handleAssetPickerUpload" class="hidden"
|
||||
accept="image/*" />
|
||||
<Button icon="pi pi-upload" label="Upload" @click="triggerAssetPickerUpload"
|
||||
class="!text-xs !bg-violet-600/20 !text-violet-300 hover:!bg-violet-600/40 !border-none !px-3 !py-1.5 !rounded-lg" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Grid -->
|
||||
<div class="flex-1 overflow-y-auto p-4 custom-scrollbar">
|
||||
<div v-if="isModalLoading" class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
|
||||
<Skeleton v-for="i in 10" :key="i" height="150px" class="!bg-slate-800 rounded-xl" />
|
||||
</div>
|
||||
<div v-else-if="modalAssets.length > 0"
|
||||
class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
|
||||
<div v-for="asset in modalAssets" :key="asset.id" @click="toggleAssetSelection(asset)"
|
||||
class="relative aspect-square rounded-xl overflow-hidden cursor-pointer border-2 transition-all group"
|
||||
:class="tempSelectedAssets.some(a => a.id === asset.id) ? 'border-violet-500 ring-2 ring-violet-500/30' : 'border-transparent hover:border-white/20'">
|
||||
<img :src="API_URL + asset.url + '?thumbnail=true'" class="w-full h-full object-cover" />
|
||||
<div class="absolute bottom-0 left-0 right-0 p-2 bg-black/60 backdrop-blur-sm">
|
||||
<p class="text-[10px] text-white truncate">{{ asset.name || 'Asset ' + (asset.id ?
|
||||
asset.id.substring(0, 4) : '') }}</p>
|
||||
</div>
|
||||
<!-- Checkmark -->
|
||||
<div v-if="tempSelectedAssets.some(a => a.id === asset.id)"
|
||||
class="absolute top-2 right-2 w-6 h-6 bg-violet-500 rounded-full flex items-center justify-center shadow-lg animate-in zoom-in duration-200">
|
||||
<i class="pi pi-check text-white text-xs"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="flex flex-col items-center justify-center h-full text-slate-500">
|
||||
<i class="pi pi-image text-4xl mb-2 opacity-50"></i>
|
||||
<p>No assets found</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="flex justify-end gap-2">
|
||||
<Button label="Cancel" @click="isAssetPickerVisible = false"
|
||||
class="!text-slate-300 hover:!bg-white/5" text />
|
||||
<Button :label="'Select (' + tempSelectedAssets.length + ')'" @click="confirmAssetSelection"
|
||||
class="!bg-violet-600 !border-none hover:!bg-violet-500" />
|
||||
</div>
|
||||
</template>
|
||||
</Dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.glass-panel {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.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: 10px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
</style>
|
||||
@@ -211,8 +211,15 @@ const handleGenerate = async () => {
|
||||
|
||||
const response = await aiService.runGeneration(payload)
|
||||
|
||||
if (response && response.id) {
|
||||
pollStatus(response.id)
|
||||
let genId = null
|
||||
if (response && response.generations && response.generations.length > 0) {
|
||||
genId = response.generations[0].id
|
||||
} else if (response && response.id) {
|
||||
genId = response.id
|
||||
}
|
||||
|
||||
if (genId) {
|
||||
pollStatus(genId)
|
||||
} else {
|
||||
// Fallback immediate response
|
||||
generatedResult.value = response
|
||||
|
||||
Reference in New Issue
Block a user