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

Refactor: Extract sidebar navigation from individual views into a new AppSidebar component.

Browse Source
This commit is contained in:
xds
2026-02-07 15:04:12 +03:00
parent 7f8ce19cb1
commit 1b9fddd209
8 changed files with 774 additions and 948 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/App.vue
View File

@@ -1,13 +1,28 @@
<script setup>
import { RouterView } from 'vue-router'
import { RouterView, useRoute } from 'vue-router'
import AppSidebar from './components/AppSidebar.vue'
const route = useRoute()
</script>
<template>
<RouterView v-slot="{ Component }">
<transition name="fade" mode="out-in">
<component :is="Component" />
</transition>
</RouterView>
<!-- Login Layout (Full Screen) -->
<div v-if="route.name === 'login'" class="h-screen w-full">
<RouterView />
</div>
<!-- Main Layout (Sidebar + Content) -->
<div v-else class="flex h-screen bg-slate-900 text-slate-100 font-sans overflow-hidden">
<AppSidebar />
<div class="flex-1 h-full overflow-hidden relative">
<RouterView v-slot="{ Component }">
<transition name="fade" mode="out-in">
<component :is="Component" />
</transition>
</RouterView>
</div>
</div>
</template>
<style>

89
src/components/AppSidebar.vue Normal file
View File

@@ -0,0 +1,89 @@
<script setup>
import { computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import Button from 'primevue/button'
const router = useRouter()
const route = useRoute()
const handleLogout = () => {
localStorage.removeItem('auth_code')
router.push('/login')
}
// Check active route for styling
const isActive = (path) => {
// Exact match for home, startsWith for others
if (path === '/') return route.path === '/'
return route.path.startsWith(path)
}
const navItems = [
{ path: '/', icon: '🏠', tooltip: 'Home' },
{ path: '/assets', icon: '📂', tooltip: 'Assets' },
{ path: '/generation', icon: '🎨', tooltip: 'Image Generation' },
{ path: '/flexible-generation', icon: '🖌️', tooltip: 'Flexible Generation' },
{ path: '/characters', icon: '👥', tooltip: 'Characters' },
{ path: '/image-to-prompt', icon: '✨', tooltip: 'Image to Prompt' }
]
</script>
<template>
<div class="contents">
<!-- Sidebar (Desktop) -->
<nav
class="hidden md:flex glass-panel w-20 m-4 flex-col items-center py-6 rounded-3xl z-40 border border-white/5 bg-slate-900/50 backdrop-blur-md h-[calc(100vh-2rem)]">
<div class="mb-12">
<div
class="w-10 h-10 bg-gradient-to-br from-violet-600 to-cyan-500 rounded-xl flex items-center justify-center font-bold text-white text-xl shadow-lg shadow-violet-500/20">
AI
</div>
</div>
<div class="flex-1 flex flex-col gap-6 w-full items-center">
<div v-for="item in navItems" :key="item.path" :class="[
'w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300',
isActive(item.path)
? 'bg-white/10 text-slate-50 shadow-inner'
: 'text-slate-400 hover:bg-white/10 hover:text-slate-50'
]" @click="router.push(item.path)" v-tooltip.right="item.tooltip">
<span class="text-2xl">{{ item.icon }}</span>
</div>
</div>
<div class="mt-auto flex flex-col items-center gap-4">
<div @click="handleLogout"
class="w-10 h-10 rounded-xl bg-red-500/10 text-red-400 flex items-center justify-center cursor-pointer hover:bg-red-500/20 transition-all font-bold"
v-tooltip.right="'Logout'">
<i class="pi pi-power-off"></i>
</div>
<!-- Profile Avatar Placeholder -->
<div class="w-10 h-10 rounded-full bg-slate-800 border-2 border-violet-600 flex items-center justify-center font-bold text-slate-50 cursor-pointer hover:scale-105 transition-all"
title="Profile">
U
</div>
</div>
</nav>
<!-- Mobile Bottom Nav -->
<nav
class="md:hidden fixed bottom-0 left-0 right-0 h-16 bg-slate-900/90 backdrop-blur-xl border-t border-white/10 z-50 flex justify-around items-center px-2">
<div v-for="item in navItems" :key="item.path" :class="[
'flex flex-col items-center gap-1 p-2 rounded-xl transition-all',
isActive(item.path)
? 'text-white bg-white/10 relative top-[-10px] shadow-lg shadow-violet-500/20 border border-violet-500/30'
: 'text-slate-400 hover:text-slate-200'
]" @click="router.push(item.path)">
<span class="text-xl">{{ item.icon }}</span>
</div>
</nav>
</div>
</template>
<style scoped>
.glass-panel {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
</style>

79
src/views/AssetsView.vue
View File

@@ -18,6 +18,7 @@ const toast = useToast()
const assets = ref<Asset[]>([])
const loading = ref(true)
const activeFilter = ref('all')
// @ts-ignore
const API_URL = import.meta.env.VITE_API_URL
const selectedAsset = ref<Asset | null>(null)
@@ -107,81 +108,13 @@ const formatDate = (dateString: string) => {
if (!dateString) return ''
return new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric' }).format(new Date(dateString))
}
const handleLogout = () => {
localStorage.removeItem('auth_code')
router.push('/login')
}
</script>
<template>
<div class="flex h-screen bg-slate-900 overflow-hidden">
<!-- Sidebar -->
<nav class="glass-panel w-20 m-4 flex flex-col items-center py-6 rounded-3xl z-10">
<div class="mb-12">
<div
class="w-10 h-10 bg-gradient-to-br from-violet-600 to-cyan-500 rounded-xl flex items-center justify-center font-bold text-white text-xl shadow-lg shadow-violet-500/20">
AI
</div>
</div>
<div class="flex-1 flex flex-col gap-6 w-full items-center">
<div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
@click="router.push('/')" v-tooltip.right="'Home'">
<span class="text-2xl">🏠</span>
</div>
<div v-tooltip.right="'Assets'"
class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 bg-white/10 text-slate-50">
<span class="text-2xl">📂</span>
</div>
<!-- Image Generation -->
<div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
@click="router.push('/generation')" v-tooltip.right="'Image Generation'">
<span class="text-2xl">🎨</span>
</div>
<!-- Flexible Generation -->
<div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
@click="router.push('/flexible-generation')" v-tooltip.right="'Flexible Generation'">
<span class="text-2xl">🖌️</span>
</div>
<!-- Flexible Generation -->
<div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
@click="router.push('/flexible-generation')" v-tooltip.right="'Flexible Generation'">
<span class="text-2xl">🖌️</span>
</div>
<div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
@click="router.push('/characters')" v-tooltip.right="'Characters'">
<span class="text-2xl">👥</span>
</div>
<div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
@click="router.push('/image-to-prompt')" v-tooltip.right="'Image to Prompt'">
<span class="text-2xl">✨</span>
</div>
<!-- Pagination
<div v-if="totalRecords > rows" class="mt-auto py-6">
<Paginator :first="first" :rows="rows" :totalRecords="totalRecords" @page="onPage" :template="{
default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink'
}" class="!bg-transparent !border-none !p-0" :pt="{
root: { class: '!bg-transparent' },
pcPageButton: {
root: ({ context }) => ({
class: [
'!min-w-[40px] !h-10 !rounded-xl !border-none !transition-all !duration-300 !font-bold',
context.active ? '!bg-violet-600 !text-white !shadow-lg' : '!bg-white/5 !text-slate-400 hover:!bg-white/10 hover:!text-slate-50'
]
})
},
pcFirstPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-xl !min-w-[40px] !h-10 hover:!bg-white/10 hover:!text-slate-50 transition-all' } },
pcPreviousPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-xl !min-w-[40px] !h-10 hover:!bg-white/10 hover:!text-slate-50 transition-all' } },
pcNextPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-xl !min-w-[40px] !h-10 hover:!bg-white/10 hover:!text-slate-50 transition-all' } },
pcLastPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-xl !min-w-[40px] !h-10 hover:!bg-white/10 hover:!text-slate-50 transition-all' } }
}" />
</div> -->
</div>
</nav>
<!-- Main Content -->
<main class="flex-1 p-8 overflow-y-auto flex flex-col">
<div class="flex flex-col h-full p-8 overflow-y-auto w-full text-slate-100">
<!-- Main Content (Sidebar removed) -->
<div class="flex-1 flex flex-col">
<!-- Top Bar -->
<header class="flex justify-between items-end mb-8">
<div>
@@ -270,7 +203,7 @@ const handleLogout = () => {
}" />
</div>
</div>
</main>
</div>
<Dialog v-model:visible="isModalVisible" modal dismissableMask header="Asset View"
:style="{ width: '90vw', maxWidth: '800px' }" class="glass-panel rounded-2xl">

1110
src/views/CharacterDetailView.vue
View File

File diff suppressed because it is too large Load Diff

116
src/views/CharactersView.vue
View File

@@ -24,99 +24,47 @@ const goToDetail = (id) => {
router.push({ name: 'character-detail', params: { id } })
}
const handleLogout = () => {
localStorage.removeItem('auth_code')
router.push('/login')
}
</script>
<template>
<div class="flex h-screen bg-slate-900 overflow-hidden text-slate-100">
<!-- Sidebar -->
<nav class="glass-panel w-20 m-4 flex flex-col items-center py-6 rounded-3xl z-10 border border-white/5">
<div class="mb-12">
<div
class="w-10 h-10 bg-gradient-to-br from-violet-600 to-cyan-500 rounded-xl flex items-center justify-center font-bold text-white text-xl shadow-lg shadow-violet-500/20">
AI
<div class="flex flex-col h-full p-8 overflow-y-auto text-slate-100">
<!-- Top Bar -->
<header class="flex justify-between items-end mb-8">
<div>
<h1 class="text-4xl font-bold m-0">Characters</h1>
<p class="mt-2 mb-0 text-slate-400">Manage your AI personas</p>
</div>
</header>
<!-- Loading State -->
<div v-if="loading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div v-for="i in 6" :key="i" class="glass-panel rounded-2xl p-6 flex items-center gap-6">
<Skeleton shape="circle" size="5rem" />
<div class="flex-1">
<Skeleton class="mb-2" height="1.5rem" />
<Skeleton height="1rem" />
</div>
</div>
</div>
<div class="flex-1 flex flex-col gap-6 w-full items-center">
<div v-tooltip.right="'Home'"
class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 bg-white/10 text-slate-50 shadow-inner">
<span class="text-2xl">🏠</span>
<!-- Characters Grid -->
<div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div v-for="char in characters" :key="char.id"
class="glass-panel rounded-2xl p-6 flex items-center gap-6 transition-all duration-300 cursor-pointer border border-white/5 hover:-translate-y-1 hover:bg-white/5 hover:border-white/10"
@click="goToDetail(char.id)">
<div class="w-20 h-20 rounded-full overflow-hidden flex-shrink-0 border-3 border-white/10">
<img :src="API_URL + char.avatar_image || 'https://via.placeholder.com/150'" :alt="char.name"
class="w-full h-full object-cover" />
</div>
<div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
@click="router.push('/assets')" v-tooltip.right="'Assets'">
<span class="text-2xl">📂</span>
</div>
<!-- Image Generation -->
<div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
@click="router.push('/generation')" v-tooltip.right="'Image Generation'">
<span class="text-2xl">🎨</span>
</div>
<div v-tooltip.right="'Characters'"
class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50">
<span class="text-2xl">👥</span>
</div>
<div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
@click="router.push('/image-to-prompt')" v-tooltip.right="'Image to Prompt'">
<span class="text-2xl">✨</span>
<div class="flex-1 overflow-hidden">
<h3 class="m-0 mb-2 text-xl font-semibold">{{ char.name }}</h3>
<p class="m-0 text-sm text-slate-400 line-clamp-2">
{{ char.character_bio }}
</p>
</div>
</div>
<div class="mt-auto flex flex-col items-center gap-4">
<div @click="handleLogout"
class="w-10 h-10 rounded-xl bg-red-500/10 text-red-400 flex items-center justify-center cursor-pointer hover:bg-red-500/20 transition-all font-bold"
v-tooltip.right="'Logout'">
<i class="pi pi-power-off"></i>
</div>
<div class="w-10 h-10 rounded-full bg-slate-800 border-2 border-violet-600 flex items-center justify-center font-bold text-slate-50 cursor-pointer hover:scale-105 transition-all"
title="Profile">
U
</div>
</div>
</nav>
<!-- Main Content -->
<main class="flex-1 p-8 overflow-y-auto flex flex-col">
<!-- Top Bar -->
<header class="flex justify-between items-end mb-8">
<div>
<h1 class="text-4xl font-bold m-0">Characters</h1>
<p class="mt-2 mb-0 text-slate-400">Manage your AI personas</p>
</div>
</header>
<!-- Loading State -->
<div v-if="loading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div v-for="i in 6" :key="i" class="glass-panel rounded-2xl p-6 flex items-center gap-6">
<Skeleton shape="circle" size="5rem" />
<div class="flex-1">
<Skeleton class="mb-2" height="1.5rem" />
<Skeleton height="1rem" />
</div>
</div>
</div>
<!-- Characters Grid -->
<div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div v-for="char in characters" :key="char.id"
class="glass-panel rounded-2xl p-6 flex items-center gap-6 transition-all duration-300 cursor-pointer border border-white/5 hover:-translate-y-1 hover:bg-white/5 hover:border-white/10"
@click="goToDetail(char.id)">
<div class="w-20 h-20 rounded-full overflow-hidden flex-shrink-0 border-3 border-white/10">
<img :src="API_URL + char.avatar_image || 'https://via.placeholder.com/150'" :alt="char.name"
class="w-full h-full object-cover" />
</div>
<div class="flex-1 overflow-hidden">
<h3 class="m-0 mb-2 text-xl font-semibold">{{ char.name }}</h3>
<p class="m-0 text-sm text-slate-400 line-clamp-2">
{{ char.character_bio }}
</p>
</div>
</div>
</div>
</main>
</div>
</div>
</template>

97
src/views/FlexibleGenerationView.vue
View File

@@ -249,10 +249,7 @@ onMounted(() => {
})
// --- Sidebar Logic (Duplicated for now) ---
const handleLogout = () => {
localStorage.removeItem('auth_code')
router.push('/login')
}
// handleLogout removed - handled in AppSidebar
// Image Preview
const isImagePreviewVisible = ref(false)
@@ -330,56 +327,32 @@ const clearPrompt = () => {
previousPrompt.value = ''
}
const deleteGeneration = async (gen) => {
if (!gen) return
try {
// Optimistic update
historyGenerations.value = historyGenerations.value.filter(g => g.id !== gen.id)
historyTotal.value--
// Use deleteAsset since generations are essentially assets in this view's context,
// or we need a way to delete the generation record.
// The user said "delete asset", and these are likely linked.
// If gen has a result list, we delete the first asset.
if (gen.result_list && gen.result_list.length > 0) {
await dataService.deleteAsset(gen.result_list[0])
}
} catch (e) {
console.error('Failed to delete generation', e)
// Reload to restore state if failed
loadData()
}
}
</script>
<template>
<div class="flex h-screen bg-slate-900 overflow-hidden text-slate-100 font-sans">
<!-- Sidebar -->
<nav
class="glass-panel w-20 m-4 flex flex-col items-center py-6 rounded-3xl z-10 border border-white/5 bg-slate-900/50 backdrop-blur-md">
<div class="mb-12">
<div
class="w-10 h-10 bg-gradient-to-br from-violet-600 to-cyan-500 rounded-xl flex items-center justify-center font-bold text-white text-xl shadow-lg shadow-violet-500/20">
AI
</div>
</div>
<div class="flex-1 flex flex-col gap-6 w-full items-center">
<div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
@click="router.push('/')" v-tooltip.right="'Home'">
<span class="text-2xl">🏠</span>
</div>
<div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
@click="router.push('/assets')" v-tooltip.right="'Assets'">
<span class="text-2xl">📂</span>
</div>
<!-- Image Generation -->
<div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
@click="router.push('/generation')" v-tooltip.right="'Image Generation'">
<span class="text-2xl">🎨</span>
</div>
<!-- Active State for Flexible Generation -->
<div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 bg-white/10 text-slate-50 shadow-inner"
v-tooltip.right="'Flexible Generation'">
<span class="text-2xl">🖌️</span>
</div>
<div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
@click="router.push('/characters')" v-tooltip.right="'Characters'">
<span class="text-2xl">👥</span>
</div>
<div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
@click="router.push('/image-to-prompt')" v-tooltip.right="'Image to Prompt'">
<span class="text-2xl">✨</span>
</div>
</div>
<div class="mt-auto">
<div @click="handleLogout"
class="w-10 h-10 rounded-xl bg-red-500/10 text-red-400 flex items-center justify-center cursor-pointer hover:bg-red-500/20 transition-all font-bold">
<i class="pi pi-power-off"></i>
</div>
</div>
</nav>
<div class="flex flex-col h-full font-sans">
<!-- Sidebar and Mobile Nav removed (handled by App.vue) -->
<!-- Main Content -->
<main class="flex-1 relative flex flex-col h-full overflow-hidden">
@@ -397,10 +370,10 @@ const clearPrompt = () => {
</header>
<!-- Gallery Grid -->
<div class="flex-1 overflow-y-auto p-4 pb-32"> <!-- pb-32 to allow space for bottom panel -->
<div class="flex-1 overflow-y-auto p-4 pb-32 md:pb-32"> <!-- pb-32 to allow space for bottom panel -->
<div v-if="historyGenerations.length > 0"
class="grid grid-cols-3 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-8 gap-1">
class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 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">
@@ -419,7 +392,11 @@ const clearPrompt = () => {
<!-- Top Actions -->
<div
class="flex justify-end gap-1 translate-y-[-10px] group-hover:translate-y-0 transition-transform duration-200">
class="flex justify-between items-start translate-y-[-10px] group-hover:translate-y-0 transition-transform duration-200">
<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)" />
<Button 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)" />
@@ -451,7 +428,7 @@ const clearPrompt = () => {
<!-- Bottom Settings Panel -->
<transition name="slide-up">
<div v-if="isSettingsVisible"
class="absolute bottom-0 left-0 right-0 glass-panel border-t border-white/10 bg-slate-900/95 backdrop-blur-xl p-6 z-20 rounded-t-3xl shadow-[0_-10px_40px_rgba(0,0,0,0.5)] flex flex-col gap-4 max-h-[85vh] overflow-y-auto">
class="absolute bottom-0 left-0 right-0 glass-panel border-t border-white/10 bg-slate-900/95 backdrop-blur-xl p-6 z-[60] rounded-t-3xl shadow-[0_-10px_40px_rgba(0,0,0,0.5)] flex flex-col gap-4 max-h-[85vh] overflow-y-auto">
<!-- Handle / Close Button -->
<div class="w-full flex justify-center -mt-2 mb-2 cursor-pointer"
@@ -483,10 +460,11 @@ const clearPrompt = () => {
<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" />
</div>
<!-- Assets & Character Row -->
<div class="flex gap-4">
<div class="flex flex-col md:flex-row gap-4">
<div class="flex-1 flex flex-col gap-2">
<label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Character
(Optional)</label>
@@ -544,7 +522,8 @@ const clearPrompt = () => {
<div class="flex items-center gap-2">
<img :src="API_URL + slotProps.option.url + '?thumbnail=true'"
class="w-8 h-8 rounded object-cover border border-white/10" />
<span class="text-xs truncate max-w-[150px]">{{ slotProps.option.name ||
<span class="text-xs truncate max-w-[150px]">{{
slotProps.option.name ||
'Asset ' + slotProps.option.id.substring(0, 4) }}</span>
</div>
</template>
@@ -611,7 +590,7 @@ const clearPrompt = () => {
<!-- Toggle Button (when hidden) -->
<transition name="fade">
<div v-if="!isSettingsVisible" class="absolute bottom-8 left-1/2 -translate-x-1/2 z-10">
<div v-if="!isSettingsVisible" class="absolute bottom-24 md:bottom-8 left-1/2 -translate-x-1/2 z-10">
<Button label="Open Controls" icon="pi pi-chevron-up" @click="isSettingsVisible = true" rounded
class="!bg-violet-600 !border-none !shadow-xl !font-bold shadow-violet-500/40 !px-6 !py-3" />
</div>
@@ -619,6 +598,8 @@ const clearPrompt = () => {
</main>
<!-- Image Preview Modal -->
<Dialog v-model:visible="isImagePreviewVisible" modal dismissableMask
:style="{ width: '90vw', maxWidth: '1000px', background: 'transparent', boxShadow: 'none' }"

134
src/views/ImageGenerationView.vue
View File

@@ -409,10 +409,7 @@ const copyToClipboard = () => {
// Implement if needed for prompt copying
}
const handleLogout = () => {
localStorage.removeItem('auth_code')
router.push('/login')
}
// --- Lifecycle ---
onMounted(() => {
@@ -421,50 +418,9 @@ onMounted(() => {
</script>
<template>
<div class="flex h-screen bg-slate-900 overflow-hidden text-slate-100">
<!-- Sidebar -->
<nav class="glass-panel w-20 m-4 flex flex-col items-center py-6 rounded-3xl z-10 border border-white/5">
<div class="mb-12">
<div
class="w-10 h-10 bg-gradient-to-br from-violet-600 to-cyan-500 rounded-xl flex items-center justify-center font-bold text-white text-xl shadow-lg shadow-violet-500/20">
AI
</div>
</div>
<div class="flex-1 flex flex-col gap-6 w-full items-center">
<div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
@click="router.push('/')" v-tooltip.right="'Home'">
<span class="text-2xl">🏠</span>
</div>
<div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
@click="router.push('/assets')" v-tooltip.right="'Assets'">
<span class="text-2xl">📂</span>
</div>
<div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
@click="router.push('/flexible-generation')" v-tooltip.right="'Flexible Generation'">
<span class="text-2xl">🎨</span>
</div>
<div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
@click="router.push('/characters')" v-tooltip.right="'Characters'">
<span class="text-2xl">👥</span>
</div>
<div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
@click="router.push('/image-to-prompt')" v-tooltip.right="'Image to Prompt'">
<span class="text-2xl">✨</span>
</div>
</div>
<div class="mt-auto flex flex-col items-center gap-4">
<div @click="handleLogout"
class="w-10 h-10 rounded-xl bg-red-500/10 text-red-400 flex items-center justify-center cursor-pointer hover:bg-red-500/20 transition-all font-bold"
v-tooltip.right="'Logout'">
<i class="pi pi-power-off"></i>
</div>
</div>
</nav>
<!-- Main Content -->
<main class="flex-1 p-8 overflow-y-auto flex flex-col">
<div class="flex flex-col h-full p-8 overflow-y-auto text-slate-100">
<!-- Main Content (Sidebar removed) -->
<div class="flex-1 flex flex-col">
<header class="mb-8">
<h1 class="text-4xl font-bold m-0">Image Generation</h1>
<p class="mt-2 mb-0 text-slate-400">Create stunning visuals using your assets</p>
@@ -747,56 +703,56 @@ onMounted(() => {
</div>
</div>
</div>
</main>
<!-- Asset Selection Modal -->
<Dialog v-model:visible="isAssetModalVisible" modal header="Select Reference Assets"
:style="{ width: '80vw', maxWidth: '1000px' }" class="glass-panel rounded-2xl">
<div class="flex flex-col h-[70vh]">
<div v-if="allAssets.length > 0" class="flex-1 overflow-y-auto p-1 text-slate-100">
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
<div v-for="asset in allAssets" :key="asset.id" @click="toggleAssetSelection(asset)"
class="aspect-square rounded-xl overflow-hidden cursor-pointer relative border transition-all"
:class="isAssetSelected(asset.id) ? 'border-violet-500 ring-2 ring-violet-500/20' : 'border-white/10 hover:border-white/30'">
<img :src="API_URL + asset.url + '?thumbnail=true'" class="w-full h-full object-cover" />
<div v-if="isAssetSelected(asset.id)"
class="absolute inset-0 bg-violet-600/30 flex items-center justify-center">
<div class="bg-violet-600 rounded-full p-1 shadow-lg">
<i class="pi pi-check text-white text-xs font-bold"></i>
</div>
</div>
</div>
<!-- Asset Selection Modal -->
<Dialog v-model:visible="isAssetModalVisible" modal header="Select Reference Assets"
:style="{ width: '80vw', maxWidth: '1000px' }" class="glass-panel rounded-2xl">
<div class="flex flex-col h-[70vh]">
<div v-if="allAssets.length > 0" class="flex-1 overflow-y-auto p-1 text-slate-100">
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
<div v-for="asset in allAssets" :key="asset.id" @click="toggleAssetSelection(asset)"
class="aspect-square rounded-xl overflow-hidden cursor-pointer relative border transition-all"
:class="isAssetSelected(asset.id) ? 'border-violet-500 ring-2 ring-violet-500/20' : 'border-white/10 hover:border-white/30'">
<img :src="API_URL + asset.url + '?thumbnail=true'" class="w-full h-full object-cover" />
<div v-if="isAssetSelected(asset.id)"
class="absolute inset-0 bg-violet-600/30 flex items-center justify-center">
<div class="bg-violet-600 rounded-full p-1 shadow-lg">
<i class="pi pi-check text-white text-xs font-bold"></i>
</div>
</div>
</div>
</div>
<div v-else class="flex-1 flex items-center justify-center text-slate-500">
No assets found
</div>
</div>
<div v-else class="flex-1 flex items-center justify-center text-slate-500">
No assets found
</div>
<div class="mt-4 pt-4 border-t border-white/10 flex justify-between items-center text-slate-100">
<span class="text-sm text-slate-400">{{ selectedAssets.length }} selected</span>
<div class="flex gap-4 items-center">
<Paginator :first="assetsFirst" :rows="assetsRows" :totalRecords="assetsTotalRecords"
@page="onAssetsPage" class="!bg-transparent !border-none !p-0" />
<Button label="Done" @click="isAssetModalVisible = false" class="!px-6" />
</div>
<div class="mt-4 pt-4 border-t border-white/10 flex justify-between items-center text-slate-100">
<span class="text-sm text-slate-400">{{ selectedAssets.length }} selected</span>
<div class="flex gap-4 items-center">
<Paginator :first="assetsFirst" :rows="assetsRows" :totalRecords="assetsTotalRecords"
@page="onAssetsPage" class="!bg-transparent !border-none !p-0" />
<Button label="Done" @click="isAssetModalVisible = false" class="!px-6" />
</div>
</div>
</Dialog>
</div>
</Dialog>
<!-- Image Preview Modal -->
<Dialog v-model:visible="isImagePreviewVisible" modal dismissableMask
:header="previewImage?.name || 'Image Preview'" :style="{ width: '90vw', maxWidth: '800px' }"
class="glass-panel rounded-2xl">
<div v-if="previewImage" class="flex flex-col items-center">
<img :src="previewImage.url" :alt="previewImage.name"
class="max-w-full max-h-[70vh] rounded-xl object-contain shadow-2xl" />
<div class="mt-6 text-center">
<h2 class="text-2xl font-bold mb-2">{{ previewImage.name }}</h2>
<p v-if="previewImage.createdAt" class="text-slate-400">{{ formatDate(previewImage.createdAt) }}</p>
</div>
<!-- Image Preview Modal -->
<Dialog v-model:visible="isImagePreviewVisible" modal dismissableMask
:header="previewImage?.name || 'Image Preview'" :style="{ width: '90vw', maxWidth: '800px' }"
class="glass-panel rounded-2xl">
<div v-if="previewImage" class="flex flex-col items-center">
<img :src="previewImage.url" :alt="previewImage.name"
class="max-w-full max-h-[70vh] rounded-xl object-contain shadow-2xl" />
<div class="mt-6 text-center">
<h2 class="text-2xl font-bold mb-2">{{ previewImage.name }}</h2>
<p v-if="previewImage.createdAt" class="text-slate-400">{{ formatDate(previewImage.createdAt) }}</p>
</div>
</Dialog>
</div>
</div>
</Dialog>
</template>
<style scoped>

70
src/views/ImageToPromptView.vue
View File

@@ -55,68 +55,13 @@ const copyToClipboard = () => {
navigator.clipboard.writeText(generatedPrompt.value)
}
const handleLogout = () => {
localStorage.removeItem('auth_code')
router.push('/login')
}
</script>
<template>
<div class="flex h-screen bg-slate-900 overflow-hidden text-slate-100">
<!-- Sidebar -->
<nav class="glass-panel w-20 m-4 flex flex-col items-center py-6 rounded-3xl z-10 border border-white/5">
<div class="mb-12">
<div
class="w-10 h-10 bg-gradient-to-br from-violet-600 to-cyan-500 rounded-xl flex items-center justify-center font-bold text-white text-xl shadow-lg shadow-violet-500/20">
AI
</div>
</div>
<div class="flex-1 flex flex-col gap-6 w-full items-center">
<div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
@click="router.push('/')" v-tooltip.right="'Home'">
<span class="text-2xl">🏠</span>
</div>
<div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
@click="router.push('/assets')" v-tooltip.right="'Assets'">
<span class="text-2xl">📂</span>
</div>
<!-- Image Generation -->
<div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
@click="router.push('/generation')" v-tooltip.right="'Image Generation'">
<span class="text-2xl">🎨</span>
</div>
<!-- Flexible Generation -->
<div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
@click="router.push('/flexible-generation')" v-tooltip.right="'Flexible Generation'">
<span class="text-2xl">🖌️</span>
</div>
<div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
@click="router.push('/characters')" v-tooltip.right="'Characters'">
<span class="text-2xl">👥</span>
</div>
<!-- New Image to Prompt Item (Active) -->
<div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 bg-white/10 text-slate-50 shadow-inner"
v-tooltip.right="'Image to Prompt'">
<span class="text-2xl">✨</span>
</div>
</div>
<div class="mt-auto flex flex-col items-center gap-4">
<div @click="handleLogout"
class="w-10 h-10 rounded-xl bg-red-500/10 text-red-400 flex items-center justify-center cursor-pointer hover:bg-red-500/20 transition-all font-bold"
v-tooltip.right="'Logout'">
<i class="pi pi-power-off"></i>
</div>
<div class="w-10 h-10 rounded-full bg-slate-800 border-2 border-violet-600 flex items-center justify-center font-bold text-slate-50 cursor-pointer hover:scale-105 transition-all"
title="Profile">
U
</div>
</div>
</nav>
<!-- Main Content -->
<main class="flex-1 p-8 overflow-y-auto flex flex-col">
<div class="flex flex-col h-full p-8 overflow-y-auto w-full text-slate-100">
<!-- Main Content (Sidebar removed) -->
<div class="flex-1 flex flex-col">
<header class="mb-8">
<h1 class="text-4xl font-bold m-0">Image to Prompt</h1>
<p class="mt-2 mb-0 text-slate-400">Transform your images into descriptive prompts</p>
@@ -160,11 +105,6 @@ const handleLogout = () => {
class="relative rounded-xl border-2 border-dashed border-white/20 flex flex-col items-center justify-center bg-white/5 hover:bg-white/10 transition-colors aspect-square text-slate-400 hover:text-white">
<span class="text-3xl mb-2">+</span>
<span class="text-xs font-bold text-center">Add<br>Image</span>
<!-- Input for just this square is handled by the main absolute input covering container,
but to make it intuitive when grid exists, we might need z-index adjustments or a specific label.
Actually, the big input covers everything. Let's make sure it doesn't block delete buttons.
Better approach: Input covers everything ONLY when empty. When not empty, input should specific 'Add' button or similar/
-->
</div>
</div>
@@ -238,6 +178,6 @@ const handleLogout = () => {
</div>
</div>
</div>
</main>
</div>
</div>
</template>