init
This commit is contained in:
2
.env.development
Normal file
2
.env.development
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
VITE_API_URL=http://localhost:8090/api
|
||||||
|
VITE_ENABLE_DEVTOOLS=true
|
||||||
2
.env.production
Normal file
2
.env.production
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
VITE_API_URL=https://ai.luminic.space/api
|
||||||
|
VITE_ENABLE_DEVTOOLS=false
|
||||||
39
.gitignore
vendored
Normal file
39
.gitignore
vendored
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
.DS_Store
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
coverage
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|
||||||
|
*.tsbuildinfo
|
||||||
|
|
||||||
|
.eslintcache
|
||||||
|
|
||||||
|
# Cypress
|
||||||
|
/cypress/videos/
|
||||||
|
/cypress/screenshots/
|
||||||
|
|
||||||
|
# Vitest
|
||||||
|
__screenshots__/
|
||||||
|
|
||||||
|
# Vite
|
||||||
|
*.timestamp-*-*.mjs
|
||||||
3
.vscode/extensions.json
vendored
Normal file
3
.vscode/extensions.json
vendored
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"recommendations": ["Vue.volar"]
|
||||||
|
}
|
||||||
153
MIGRATION_COMPLETE.md
Normal file
153
MIGRATION_COMPLETE.md
Normal file
@@ -0,0 +1,153 @@
|
|||||||
|
# ✅ Migration Complete: Tailwind CSS v4 + PrimeVue v4
|
||||||
|
|
||||||
|
## 🎉 Successfully Converted!
|
||||||
|
|
||||||
|
Your AI project has been fully migrated to use:
|
||||||
|
|
||||||
|
- **Tailwind CSS v4** (latest version with new CSS-first configuration)
|
||||||
|
- **PrimeVue v4** (latest Vue 3 UI component library)
|
||||||
|
|
||||||
|
## 🔧 What Was Fixed
|
||||||
|
|
||||||
|
### 1. **Tailwind CSS v4 Setup**
|
||||||
|
|
||||||
|
- ✅ Installed `@tailwindcss/postcss` (new PostCSS plugin for v4)
|
||||||
|
- ✅ Updated `postcss.config.js` to use `@tailwindcss/postcss`
|
||||||
|
- ✅ Converted `main.css` to use `@import "tailwindcss"` (v4 syntax)
|
||||||
|
- ✅ Simplified `tailwind.config.js` (v4 uses CSS-based config)
|
||||||
|
- ✅ Added `@theme` directive for custom theme values
|
||||||
|
|
||||||
|
### 2. **PrimeVue v4 Setup**
|
||||||
|
|
||||||
|
- ✅ Fixed import path: `primevue/themes/aura` (not `@primevue/themes/aura`)
|
||||||
|
- ✅ Configured Aura theme with dark mode support
|
||||||
|
- ✅ Set up CSS layer ordering for Tailwind compatibility
|
||||||
|
|
||||||
|
### 3. **Case Sensitivity Issue**
|
||||||
|
|
||||||
|
- ✅ Fixed import: `@/models/asset` (lowercase, matching filename)
|
||||||
|
- ✅ Updated Asset interface to include `link` property
|
||||||
|
|
||||||
|
## 📦 Installed Packages
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"dependencies": {
|
||||||
|
"primevue": "^4.5.4",
|
||||||
|
"primeicons": "^7.0.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@tailwindcss/postcss": "^4.1.18",
|
||||||
|
"tailwindcss": "^4.1.18",
|
||||||
|
"postcss": "^8.5.6",
|
||||||
|
"autoprefixer": "^10.4.24"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🎨 Converted Components
|
||||||
|
|
||||||
|
All views now use Tailwind utility classes and PrimeVue components:
|
||||||
|
|
||||||
|
| View | Tailwind Classes | PrimeVue Components |
|
||||||
|
| ----------------------- | ------------------------- | ------------------------------------ |
|
||||||
|
| **AssetsView** | ✅ Grid, Flexbox, Spacing | Button, Skeleton |
|
||||||
|
| **CharactersView** | ✅ Grid, Flexbox, Spacing | Skeleton |
|
||||||
|
| **WorkspaceView** | ✅ Flexbox, Chat Layout | Button, Textarea |
|
||||||
|
| **DashboardView** | ✅ Grid, Cards | Button |
|
||||||
|
| **LoginView** | ✅ Form Layout | InputText, Password, Button, Message |
|
||||||
|
| **CharacterDetailView** | ✅ Grid, Flexbox | Button, Skeleton, Tag |
|
||||||
|
|
||||||
|
## 🚀 Key Features
|
||||||
|
|
||||||
|
### Tailwind CSS v4 Benefits
|
||||||
|
|
||||||
|
- **CSS-first configuration** using `@theme` directive
|
||||||
|
- **Smaller bundle size** with optimized CSS
|
||||||
|
- **Better performance** with new engine
|
||||||
|
- **All utility classes** available out of the box
|
||||||
|
|
||||||
|
### PrimeVue v4 Benefits
|
||||||
|
|
||||||
|
- **Aura theme** - Modern, beautiful design system
|
||||||
|
- **Dark mode ready** - Configured with `.dark` selector
|
||||||
|
- **Accessible components** - WCAG compliant
|
||||||
|
- **TypeScript support** - Full type definitions
|
||||||
|
|
||||||
|
## 💡 How to Use
|
||||||
|
|
||||||
|
### Using Tailwind Classes
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<div class="flex items-center gap-4 p-6 bg-slate-900 rounded-xl">
|
||||||
|
<span class="text-2xl">🎨</span>
|
||||||
|
<h2 class="text-xl font-bold">Title</h2>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Using PrimeVue Components
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<script setup>
|
||||||
|
import Button from "primevue/button";
|
||||||
|
import InputText from "primevue/inputtext";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<InputText v-model="value" placeholder="Enter text" />
|
||||||
|
<Button label="Submit" icon="pi pi-check" />
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Custom Glassmorphism
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<div class="glass-panel p-8">
|
||||||
|
<!-- Your content with glassmorphism effect -->
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🎯 Custom CSS Variables
|
||||||
|
|
||||||
|
Available throughout the app:
|
||||||
|
|
||||||
|
```css
|
||||||
|
--color-background: #0f172a --color-surface: #1e293b
|
||||||
|
--color-surface-glass: rgba(30, 41, 59, 0.7) --color-primary: #8b5cf6
|
||||||
|
--color-primary-hover: #7c3aed --color-secondary: #06b6d4
|
||||||
|
--color-text: #f8fafc --color-text-muted: #94a3b8 --color-error: #ef4444;
|
||||||
|
```
|
||||||
|
|
||||||
|
## 📚 Documentation
|
||||||
|
|
||||||
|
- **Tailwind CSS v4**: https://tailwindcss.com/docs
|
||||||
|
- **PrimeVue v4**: https://primevue.org/
|
||||||
|
- **PrimeIcons**: https://primevue.org/icons/
|
||||||
|
|
||||||
|
## ✨ What's Preserved
|
||||||
|
|
||||||
|
✅ Glassmorphism effects
|
||||||
|
✅ Dark theme with gradients
|
||||||
|
✅ Smooth animations and transitions
|
||||||
|
✅ Responsive layouts
|
||||||
|
✅ Loading states with skeletons
|
||||||
|
✅ All existing functionality
|
||||||
|
|
||||||
|
## 🔄 Dev Server
|
||||||
|
|
||||||
|
The dev server should now be running without errors. If you see any issues, try:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Stop the current dev server (Ctrl+C)
|
||||||
|
# Then restart it
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🎨 Next Steps
|
||||||
|
|
||||||
|
1. **Explore PrimeVue components**: Add DataTable, Dialog, Toast, Dropdown, etc.
|
||||||
|
2. **Customize theme**: Modify colors in `@theme` directive in `main.css`
|
||||||
|
3. **Add dark mode toggle**: Use PrimeVue's theme switching API
|
||||||
|
4. **Optimize bundle**: Tailwind v4 automatically purges unused CSS
|
||||||
|
|
||||||
|
Enjoy your modern, performant UI! 🚀
|
||||||
129
MIGRATION_SUMMARY.md
Normal file
129
MIGRATION_SUMMARY.md
Normal file
@@ -0,0 +1,129 @@
|
|||||||
|
# Tailwind CSS & PrimeVue Migration Summary
|
||||||
|
|
||||||
|
## ✅ Completed Migration
|
||||||
|
|
||||||
|
Your AI project has been successfully converted from vanilla CSS to **Tailwind CSS** and **PrimeVue** component library!
|
||||||
|
|
||||||
|
## 📦 Installed Dependencies
|
||||||
|
|
||||||
|
- `tailwindcss` - Utility-first CSS framework
|
||||||
|
- `postcss` - CSS processor
|
||||||
|
- `autoprefixer` - Automatic vendor prefixing
|
||||||
|
- `primevue` - Vue 3 UI component library
|
||||||
|
- `primeicons` - Icon library for PrimeVue
|
||||||
|
|
||||||
|
## 🔧 Configuration Files Created/Updated
|
||||||
|
|
||||||
|
### 1. `tailwind.config.js`
|
||||||
|
|
||||||
|
- Configured content paths for Vue files and PrimeVue components
|
||||||
|
- Extended theme with custom colors
|
||||||
|
- Added custom animations
|
||||||
|
|
||||||
|
### 2. `postcss.config.js`
|
||||||
|
|
||||||
|
- Configured PostCSS to process Tailwind CSS
|
||||||
|
|
||||||
|
### 3. `src/main.js`
|
||||||
|
|
||||||
|
- Integrated PrimeVue with Aura theme
|
||||||
|
- Configured CSS layer ordering for Tailwind compatibility
|
||||||
|
|
||||||
|
### 4. `src/assets/main.css`
|
||||||
|
|
||||||
|
- Converted to use Tailwind directives (`@tailwind`, `@layer`)
|
||||||
|
- Preserved custom design system (glassmorphism, gradients)
|
||||||
|
- Maintained CSS custom properties for consistency
|
||||||
|
|
||||||
|
## 🎨 Converted Views
|
||||||
|
|
||||||
|
All views have been converted to use Tailwind CSS utilities and PrimeVue components:
|
||||||
|
|
||||||
|
### 1. **AssetsView.vue**
|
||||||
|
|
||||||
|
- Tailwind utility classes for layout
|
||||||
|
- PrimeVue `Button` and `Skeleton` components
|
||||||
|
- Maintained glassmorphism and grid layout
|
||||||
|
|
||||||
|
### 2. **CharactersView.vue**
|
||||||
|
|
||||||
|
- Tailwind responsive grid
|
||||||
|
- PrimeVue `Skeleton` for loading states
|
||||||
|
- Custom line-clamp utility preserved
|
||||||
|
|
||||||
|
### 3. **WorkspaceView.vue**
|
||||||
|
|
||||||
|
- Tailwind flexbox layout
|
||||||
|
- PrimeVue `Button` and `Textarea` components
|
||||||
|
- Chat interface with typing animation
|
||||||
|
|
||||||
|
### 4. **DashboardView.vue**
|
||||||
|
|
||||||
|
- Tailwind grid system
|
||||||
|
- PrimeVue `Button` component
|
||||||
|
- AI model cards with hover effects
|
||||||
|
|
||||||
|
### 5. **LoginView.vue**
|
||||||
|
|
||||||
|
- PrimeVue `InputText`, `Password`, `Button`, and `Message` components
|
||||||
|
- Gradient text effects with Tailwind
|
||||||
|
- Form validation maintained
|
||||||
|
|
||||||
|
### 6. **CharacterDetailView.vue**
|
||||||
|
|
||||||
|
- PrimeVue `Button`, `Skeleton`, and `Tag` components
|
||||||
|
- Responsive layout with Tailwind
|
||||||
|
- Asset grid display
|
||||||
|
|
||||||
|
## 🎯 Key Features Preserved
|
||||||
|
|
||||||
|
✅ **Glassmorphism effects** - Maintained with `.glass-panel` class
|
||||||
|
✅ **Dark theme** - Slate color palette
|
||||||
|
✅ **Animations** - Hover effects, transitions, typing indicators
|
||||||
|
✅ **Responsive design** - Tailwind responsive utilities
|
||||||
|
✅ **Custom gradients** - Background and text gradients
|
||||||
|
✅ **Loading states** - PrimeVue Skeleton components
|
||||||
|
|
||||||
|
## 🚀 Next Steps
|
||||||
|
|
||||||
|
1. **Restart the dev server** to see the changes:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **Verify all pages** are rendering correctly:
|
||||||
|
- Dashboard (`/`)
|
||||||
|
- Assets (`/assets`)
|
||||||
|
- Characters (`/characters`)
|
||||||
|
- Character Detail (`/characters/:id`)
|
||||||
|
- Workspace (`/workspace/:id`)
|
||||||
|
- Login (`/login`)
|
||||||
|
|
||||||
|
3. **Optional Enhancements**:
|
||||||
|
- Add more PrimeVue components (DataTable, Dialog, Toast, etc.)
|
||||||
|
- Customize PrimeVue theme colors to match your design
|
||||||
|
- Add dark mode toggle using PrimeVue's theme switching
|
||||||
|
|
||||||
|
## 📚 Documentation
|
||||||
|
|
||||||
|
- **Tailwind CSS**: https://tailwindcss.com/docs
|
||||||
|
- **PrimeVue**: https://primevue.org/
|
||||||
|
- **PrimeVue Aura Theme**: https://primevue.org/theming/
|
||||||
|
|
||||||
|
## 🐛 Fixed Issues
|
||||||
|
|
||||||
|
1. ✅ Fixed case sensitivity error in Asset model import
|
||||||
|
2. ✅ Added `link` property to Asset interface
|
||||||
|
3. ✅ Added standard `line-clamp` property for compatibility
|
||||||
|
4. ✅ Configured proper CSS layer ordering for Tailwind + PrimeVue
|
||||||
|
|
||||||
|
## 💡 Tips
|
||||||
|
|
||||||
|
- Use Tailwind's utility classes for quick styling
|
||||||
|
- Leverage PrimeVue components for complex UI elements
|
||||||
|
- The `.glass-panel` class is still available for glassmorphism
|
||||||
|
- Custom CSS variables are preserved in `main.css`
|
||||||
|
- PrimeVue components can be styled with Tailwind classes
|
||||||
|
|
||||||
|
Enjoy your modernized codebase! 🎉
|
||||||
38
README.md
Normal file
38
README.md
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
# ai-project
|
||||||
|
|
||||||
|
This template should help get you started developing with Vue 3 in Vite.
|
||||||
|
|
||||||
|
## Recommended IDE Setup
|
||||||
|
|
||||||
|
[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
|
||||||
|
|
||||||
|
## Recommended Browser Setup
|
||||||
|
|
||||||
|
- Chromium-based browsers (Chrome, Edge, Brave, etc.):
|
||||||
|
- [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
|
||||||
|
- [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
|
||||||
|
- Firefox:
|
||||||
|
- [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
|
||||||
|
- [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
|
||||||
|
|
||||||
|
## Customize configuration
|
||||||
|
|
||||||
|
See [Vite Configuration Reference](https://vite.dev/config/).
|
||||||
|
|
||||||
|
## Project Setup
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compile and Hot-Reload for Development
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compile and Minify for Production
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
17
index.html
Normal file
17
index.html
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en" class="dark">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" href="/favicon.ico" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="AI Workspace for managing multiple AI assistants like ChatGPT, Gemini, and more."
|
||||||
|
/>
|
||||||
|
<title>AI Workspace - Your Intelligent Hub</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
8
jsconfig.json
Normal file
8
jsconfig.json
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"exclude": ["node_modules", "dist"]
|
||||||
|
}
|
||||||
8411
package-lock.json
generated
Normal file
8411
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
34
package.json
Normal file
34
package.json
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
{
|
||||||
|
"name": "ai-project",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@primeuix/themes": "^2.0.3",
|
||||||
|
"@primevue/themes": "^4.5.4",
|
||||||
|
"axios": "^1.13.4",
|
||||||
|
"pinia": "^3.0.4",
|
||||||
|
"primeicons": "^7.0.0",
|
||||||
|
"primevue": "^4.5.4",
|
||||||
|
"vue": "^3.5.27",
|
||||||
|
"vue-router": "^5.0.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@tailwindcss/postcss": "^4.1.18",
|
||||||
|
"@vitejs/plugin-vue": "^6.0.3",
|
||||||
|
"autoprefixer": "^10.4.24",
|
||||||
|
"postcss": "^8.5.6",
|
||||||
|
"tailwindcss": "^4.1.18",
|
||||||
|
"vite": "^7.3.1",
|
||||||
|
"vite-plugin-pwa": "^1.2.0",
|
||||||
|
"vite-plugin-vue-devtools": "^8.0.5"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": "^20.19.0 || >=22.12.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
'@tailwindcss/postcss': {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
15
src/App.vue
Normal file
15
src/App.vue
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
<script setup>
|
||||||
|
import { RouterView } from 'vue-router'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<RouterView v-slot="{ Component }">
|
||||||
|
<transition name="fade" mode="out-in">
|
||||||
|
<component :is="Component" />
|
||||||
|
</transition>
|
||||||
|
</RouterView>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* Global styles are already imported in main.js */
|
||||||
|
</style>
|
||||||
86
src/assets/base.css
Normal file
86
src/assets/base.css
Normal file
@@ -0,0 +1,86 @@
|
|||||||
|
/* color palette from <https://github.com/vuejs/theme> */
|
||||||
|
:root {
|
||||||
|
--vt-c-white: #ffffff;
|
||||||
|
--vt-c-white-soft: #f8f8f8;
|
||||||
|
--vt-c-white-mute: #f2f2f2;
|
||||||
|
|
||||||
|
--vt-c-black: #181818;
|
||||||
|
--vt-c-black-soft: #222222;
|
||||||
|
--vt-c-black-mute: #282828;
|
||||||
|
|
||||||
|
--vt-c-indigo: #2c3e50;
|
||||||
|
|
||||||
|
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
|
||||||
|
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
|
||||||
|
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
|
||||||
|
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
|
||||||
|
|
||||||
|
--vt-c-text-light-1: var(--vt-c-indigo);
|
||||||
|
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
|
||||||
|
--vt-c-text-dark-1: var(--vt-c-white);
|
||||||
|
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* semantic color variables for this project */
|
||||||
|
:root {
|
||||||
|
--color-background: var(--vt-c-white);
|
||||||
|
--color-background-soft: var(--vt-c-white-soft);
|
||||||
|
--color-background-mute: var(--vt-c-white-mute);
|
||||||
|
|
||||||
|
--color-border: var(--vt-c-divider-light-2);
|
||||||
|
--color-border-hover: var(--vt-c-divider-light-1);
|
||||||
|
|
||||||
|
--color-heading: var(--vt-c-text-light-1);
|
||||||
|
--color-text: var(--vt-c-text-light-1);
|
||||||
|
|
||||||
|
--section-gap: 160px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--color-background: var(--vt-c-black);
|
||||||
|
--color-background-soft: var(--vt-c-black-soft);
|
||||||
|
--color-background-mute: var(--vt-c-black-mute);
|
||||||
|
|
||||||
|
--color-border: var(--vt-c-divider-dark-2);
|
||||||
|
--color-border-hover: var(--vt-c-divider-dark-1);
|
||||||
|
|
||||||
|
--color-heading: var(--vt-c-text-dark-1);
|
||||||
|
--color-text: var(--vt-c-text-dark-2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
min-height: 100vh;
|
||||||
|
color: var(--color-text);
|
||||||
|
background: var(--color-background);
|
||||||
|
transition:
|
||||||
|
color 0.5s,
|
||||||
|
background-color 0.5s;
|
||||||
|
line-height: 1.6;
|
||||||
|
font-family:
|
||||||
|
Inter,
|
||||||
|
-apple-system,
|
||||||
|
BlinkMacSystemFont,
|
||||||
|
'Segoe UI',
|
||||||
|
Roboto,
|
||||||
|
Oxygen,
|
||||||
|
Ubuntu,
|
||||||
|
Cantarell,
|
||||||
|
'Fira Sans',
|
||||||
|
'Droid Sans',
|
||||||
|
'Helvetica Neue',
|
||||||
|
sans-serif;
|
||||||
|
font-size: 15px;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
1
src/assets/logo.svg
Normal file
1
src/assets/logo.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
|
||||||
|
After Width: | Height: | Size: 276 B |
276
src/assets/main.css
Normal file
276
src/assets/main.css
Normal file
@@ -0,0 +1,276 @@
|
|||||||
|
@import "tailwindcss";
|
||||||
|
|
||||||
|
@theme {
|
||||||
|
--color-primary-50: #f0f9ff;
|
||||||
|
--color-primary-100: #e0f2fe;
|
||||||
|
--color-primary-200: #bae6fd;
|
||||||
|
--color-primary-300: #7dd3fc;
|
||||||
|
--color-primary-400: #38bdf8;
|
||||||
|
--color-primary-500: #0ea5e9;
|
||||||
|
--color-primary-600: #0284c7;
|
||||||
|
--color-primary-700: #0369a1;
|
||||||
|
--color-primary-800: #075985;
|
||||||
|
--color-primary-900: #0c4a6e;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
|
||||||
|
--color-background: #0f172a;
|
||||||
|
--color-surface: #1e293b;
|
||||||
|
--color-surface-glass: rgba(30, 41, 59, 0.7);
|
||||||
|
--color-primary: #8b5cf6;
|
||||||
|
--color-primary-hover: #7c3aed;
|
||||||
|
--color-secondary: #06b6d4;
|
||||||
|
--color-text: #f8fafc;
|
||||||
|
--color-text-muted: #94a3b8;
|
||||||
|
--color-error: #ef4444;
|
||||||
|
--p-tabs-tablist-background: #0f172a;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
background-color: #0f172a;
|
||||||
|
color: #f8fafc;
|
||||||
|
min-height: 100vh;
|
||||||
|
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||||
|
line-height: 1.4;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
background-image:
|
||||||
|
radial-gradient(circle at 15% 50%, rgba(139, 92, 246, 0.08), transparent 25%),
|
||||||
|
radial-gradient(circle at 85% 30%, rgba(6, 182, 212, 0.08), transparent 25%);
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Glassmorphism utility */
|
||||||
|
.glass-panel {
|
||||||
|
background: var(--color-surface-glass) !important;
|
||||||
|
backdrop-filter: blur(16px);
|
||||||
|
-webkit-backdrop-filter: blur(16px);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Typography */
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: -0.025em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* =========================================
|
||||||
|
GLOBAL PRIMEVUE COMPONENT OVERRIDES
|
||||||
|
========================================= */
|
||||||
|
|
||||||
|
/* --- Buttons --- */
|
||||||
|
.p-button {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
border-radius: 8px;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
gap: 0.3rem;
|
||||||
|
padding: 0.35rem 0.75rem;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
color: #f8fafc;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-button:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
border-color: rgba(255, 255, 255, 0.2);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-button:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- SelectButton (Segmented Control) --- */
|
||||||
|
/* Контейнер */
|
||||||
|
.p-selectbutton {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
background: rgba(15, 23, 42, 0.6);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 14px;
|
||||||
|
padding: 4px;
|
||||||
|
gap: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Кнопки внутри */
|
||||||
|
.p-selectbutton .p-button {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: transparent !important; /* Убираем фон по умолчанию */
|
||||||
|
border: none !important; /* Убираем рамки по умолчанию */
|
||||||
|
color: #94a3b8; /* Цвет неактивного текста */
|
||||||
|
padding: 0.6rem 0.5rem;
|
||||||
|
border-radius: 10px;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
margin: 0;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Активная кнопка */
|
||||||
|
.p-selectbutton .p-button.p-highlight {
|
||||||
|
background: rgba(139, 92, 246, 0.2) !important;
|
||||||
|
color: #a78bfa !important;
|
||||||
|
box-shadow: 0 2px 10px rgba(139, 92, 246, 0.15) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ховер на неактивной кнопке */
|
||||||
|
.p-selectbutton .p-button:not(.p-highlight):hover {
|
||||||
|
background: rgba(255, 255, 255, 0.05) !important;
|
||||||
|
color: #f1f5f9 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Фокус */
|
||||||
|
.p-selectbutton .p-button:focus-visible {
|
||||||
|
outline: none;
|
||||||
|
box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.5) !important;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- FileUpload --- */
|
||||||
|
.p-fileupload {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-fileupload-buttonbar {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.75rem;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-fileupload-content {
|
||||||
|
background: transparent;
|
||||||
|
border: 1px dashed rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 2rem;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-fileupload-content:hover {
|
||||||
|
border-color: rgba(139, 92, 246, 0.3);
|
||||||
|
background: rgba(139, 92, 246, 0.02);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Tabs --- */
|
||||||
|
.p-tabs {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-tablist {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-tablist-tab-list {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.25rem;
|
||||||
|
background: rgba(15, 23, 42, 0.4);
|
||||||
|
padding: 3px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-tab {
|
||||||
|
padding: 0.3rem 0.6rem;
|
||||||
|
border-radius: 6px;
|
||||||
|
color: #94a3b8;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
cursor: pointer;
|
||||||
|
border: none !important;
|
||||||
|
background: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-tab-active {
|
||||||
|
background: rgba(139, 92, 246, 0.1) !important;
|
||||||
|
color: #a78bfa !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-tab-active-bar {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Textarea / Inputs --- */
|
||||||
|
.p-textarea,
|
||||||
|
.p-inputtext {
|
||||||
|
width: 100%;
|
||||||
|
background: rgba(15, 23, 42, 0.6) !important;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1) !important;
|
||||||
|
border-radius: 8px !important;
|
||||||
|
padding: 0.5rem !important;
|
||||||
|
color: white !important;
|
||||||
|
font-size: 0.8125rem !important;
|
||||||
|
transition: all 0.3s ease !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-textarea:focus,
|
||||||
|
.p-inputtext:focus {
|
||||||
|
outline: none !important;
|
||||||
|
border-color: #8b5cf6 !important;
|
||||||
|
box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- ProgressSpinner --- */
|
||||||
|
.p-progress-spinner-circle {
|
||||||
|
stroke: #8b5cf6 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Dialog --- */
|
||||||
|
.p-dialog {
|
||||||
|
background: #1e293b !important;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 1rem;
|
||||||
|
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dialog-header {
|
||||||
|
background: transparent !important;
|
||||||
|
padding: 1.5rem;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dialog-title {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dialog-content {
|
||||||
|
background: transparent !important;
|
||||||
|
padding: 1.5rem;
|
||||||
|
color: #f8fafc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-dialog-header-icon {
|
||||||
|
color: #94a3b8 !important;
|
||||||
|
}
|
||||||
|
.p-dialog-header-icon:hover {
|
||||||
|
background: rgba(255,255,255,0.1) !important;
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
44
src/components/HelloWorld.vue
Normal file
44
src/components/HelloWorld.vue
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
<script setup>
|
||||||
|
defineProps({
|
||||||
|
msg: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="greetings">
|
||||||
|
<h1 class="green">{{ msg }}</h1>
|
||||||
|
<h3>
|
||||||
|
You’ve successfully created a project with
|
||||||
|
<a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
|
||||||
|
<a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
h1 {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 2.6rem;
|
||||||
|
position: relative;
|
||||||
|
top: -10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.greetings h1,
|
||||||
|
.greetings h3 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.greetings h1,
|
||||||
|
.greetings h3 {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
95
src/components/TheWelcome.vue
Normal file
95
src/components/TheWelcome.vue
Normal file
@@ -0,0 +1,95 @@
|
|||||||
|
<script setup>
|
||||||
|
import WelcomeItem from './WelcomeItem.vue'
|
||||||
|
import DocumentationIcon from './icons/IconDocumentation.vue'
|
||||||
|
import ToolingIcon from './icons/IconTooling.vue'
|
||||||
|
import EcosystemIcon from './icons/IconEcosystem.vue'
|
||||||
|
import CommunityIcon from './icons/IconCommunity.vue'
|
||||||
|
import SupportIcon from './icons/IconSupport.vue'
|
||||||
|
|
||||||
|
const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<WelcomeItem>
|
||||||
|
<template #icon>
|
||||||
|
<DocumentationIcon />
|
||||||
|
</template>
|
||||||
|
<template #heading>Documentation</template>
|
||||||
|
|
||||||
|
Vue’s
|
||||||
|
<a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
|
||||||
|
provides you with all information you need to get started.
|
||||||
|
</WelcomeItem>
|
||||||
|
|
||||||
|
<WelcomeItem>
|
||||||
|
<template #icon>
|
||||||
|
<ToolingIcon />
|
||||||
|
</template>
|
||||||
|
<template #heading>Tooling</template>
|
||||||
|
|
||||||
|
This project is served and bundled with
|
||||||
|
<a href="https://vite.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
|
||||||
|
recommended IDE setup is
|
||||||
|
<a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a>
|
||||||
|
+
|
||||||
|
<a href="https://github.com/vuejs/language-tools" target="_blank" rel="noopener"
|
||||||
|
>Vue - Official</a
|
||||||
|
>. If you need to test your components and web pages, check out
|
||||||
|
<a href="https://vitest.dev/" target="_blank" rel="noopener">Vitest</a>
|
||||||
|
and
|
||||||
|
<a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a>
|
||||||
|
/
|
||||||
|
<a href="https://playwright.dev/" target="_blank" rel="noopener">Playwright</a>.
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|
More instructions are available in
|
||||||
|
<a href="javascript:void(0)" @click="openReadmeInEditor"><code>README.md</code></a
|
||||||
|
>.
|
||||||
|
</WelcomeItem>
|
||||||
|
|
||||||
|
<WelcomeItem>
|
||||||
|
<template #icon>
|
||||||
|
<EcosystemIcon />
|
||||||
|
</template>
|
||||||
|
<template #heading>Ecosystem</template>
|
||||||
|
|
||||||
|
Get official tools and libraries for your project:
|
||||||
|
<a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
|
||||||
|
<a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
|
||||||
|
<a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
|
||||||
|
<a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
|
||||||
|
you need more resources, we suggest paying
|
||||||
|
<a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
|
||||||
|
a visit.
|
||||||
|
</WelcomeItem>
|
||||||
|
|
||||||
|
<WelcomeItem>
|
||||||
|
<template #icon>
|
||||||
|
<CommunityIcon />
|
||||||
|
</template>
|
||||||
|
<template #heading>Community</template>
|
||||||
|
|
||||||
|
Got stuck? Ask your question on
|
||||||
|
<a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>
|
||||||
|
(our official Discord server), or
|
||||||
|
<a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
|
||||||
|
>StackOverflow</a
|
||||||
|
>. You should also follow the official
|
||||||
|
<a href="https://bsky.app/profile/vuejs.org" target="_blank" rel="noopener">@vuejs.org</a>
|
||||||
|
Bluesky account or the
|
||||||
|
<a href="https://x.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
|
||||||
|
X account for latest news in the Vue world.
|
||||||
|
</WelcomeItem>
|
||||||
|
|
||||||
|
<WelcomeItem>
|
||||||
|
<template #icon>
|
||||||
|
<SupportIcon />
|
||||||
|
</template>
|
||||||
|
<template #heading>Support Vue</template>
|
||||||
|
|
||||||
|
As an independent project, Vue relies on community backing for its sustainability. You can help
|
||||||
|
us by
|
||||||
|
<a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
|
||||||
|
</WelcomeItem>
|
||||||
|
</template>
|
||||||
87
src/components/WelcomeItem.vue
Normal file
87
src/components/WelcomeItem.vue
Normal file
@@ -0,0 +1,87 @@
|
|||||||
|
<template>
|
||||||
|
<div class="item">
|
||||||
|
<i>
|
||||||
|
<slot name="icon"></slot>
|
||||||
|
</i>
|
||||||
|
<div class="details">
|
||||||
|
<h3>
|
||||||
|
<slot name="heading"></slot>
|
||||||
|
</h3>
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.item {
|
||||||
|
margin-top: 2rem;
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.details {
|
||||||
|
flex: 1;
|
||||||
|
margin-left: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
display: flex;
|
||||||
|
place-items: center;
|
||||||
|
place-content: center;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
|
||||||
|
color: var(--color-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 0.4rem;
|
||||||
|
color: var(--color-heading);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.item {
|
||||||
|
margin-top: 0;
|
||||||
|
padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
top: calc(50% - 25px);
|
||||||
|
left: -26px;
|
||||||
|
position: absolute;
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
background: var(--color-background);
|
||||||
|
border-radius: 8px;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item:before {
|
||||||
|
content: ' ';
|
||||||
|
border-left: 1px solid var(--color-border);
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: calc(50% + 25px);
|
||||||
|
height: calc(50% - 25px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.item:after {
|
||||||
|
content: ' ';
|
||||||
|
border-left: 1px solid var(--color-border);
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: calc(50% + 25px);
|
||||||
|
height: calc(50% - 25px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.item:first-of-type:before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item:last-of-type:after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
7
src/components/icons/IconCommunity.vue
Normal file
7
src/components/icons/IconCommunity.vue
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
<template>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
7
src/components/icons/IconDocumentation.vue
Normal file
7
src/components/icons/IconDocumentation.vue
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
<template>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
7
src/components/icons/IconEcosystem.vue
Normal file
7
src/components/icons/IconEcosystem.vue
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
<template>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
7
src/components/icons/IconSupport.vue
Normal file
7
src/components/icons/IconSupport.vue
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
<template>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
19
src/components/icons/IconTooling.vue
Normal file
19
src/components/icons/IconTooling.vue
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
|
||||||
|
<template>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
aria-hidden="true"
|
||||||
|
role="img"
|
||||||
|
class="iconify iconify--mdi"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
preserveAspectRatio="xMidYMid meet"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
|
||||||
|
fill="currentColor"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
40
src/main.ts
Normal file
40
src/main.ts
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
import { createApp } from 'vue'
|
||||||
|
import { createPinia } from 'pinia'
|
||||||
|
import PrimeVue from 'primevue/config'
|
||||||
|
import Aura from '@primevue/themes/aura';
|
||||||
|
import Tooltip from 'primevue/tooltip';
|
||||||
|
import 'primeicons/primeicons.css'
|
||||||
|
import App from './App.vue'
|
||||||
|
import router from './router'
|
||||||
|
import './assets/main.css'
|
||||||
|
|
||||||
|
const app = createApp(App)
|
||||||
|
|
||||||
|
app.use(createPinia())
|
||||||
|
app.use(router)
|
||||||
|
app.use(PrimeVue, {
|
||||||
|
theme: {
|
||||||
|
preset: Aura,
|
||||||
|
options: {
|
||||||
|
darkModeSelector: '.dark',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
app.config.globalProperties.$primevue.config.locale = {
|
||||||
|
firstDayOfWeek: 1,
|
||||||
|
dayNames: ["Воскресенье", "Понедельник", "Вторник", "Среда", "Четверг", "Пятница", "Суббота"],
|
||||||
|
dayNamesShort: ["Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"],
|
||||||
|
dayNamesMin: ["Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"],
|
||||||
|
monthNames: ["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"],
|
||||||
|
monthNamesShort: ["Янв", "Фев", "Мар", "Апр", "Май", "Июн", "Июл", "Авг", "Сен", "Окт", "Ноя", "Дек"],
|
||||||
|
today: "Сегодня",
|
||||||
|
clear: "Очистить",
|
||||||
|
dateFormat: "dd.mm.yy",
|
||||||
|
weekHeader: "Нед",
|
||||||
|
fileSizeTypes: []
|
||||||
|
};
|
||||||
|
|
||||||
|
app.directive('tooltip', Tooltip);
|
||||||
|
|
||||||
|
app.mount('#app')
|
||||||
9
src/models/asset.ts
Normal file
9
src/models/asset.ts
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
export interface Asset {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
type: string;
|
||||||
|
link: string;
|
||||||
|
url?: string;
|
||||||
|
created_at: string;
|
||||||
|
linked_char_id: string;
|
||||||
|
}
|
||||||
53
src/router/index.js
Normal file
53
src/router/index.js
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
import { createRouter, createWebHistory } from 'vue-router'
|
||||||
|
import DashboardView from '../views/DashboardView.vue'
|
||||||
|
import LoginView from '../views/LoginView.vue'
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHistory(import.meta.env.BASE_URL),
|
||||||
|
routes: [
|
||||||
|
{
|
||||||
|
path: '/login',
|
||||||
|
name: 'login',
|
||||||
|
component: LoginView
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
name: 'dashboard',
|
||||||
|
component: DashboardView
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/assets',
|
||||||
|
name: 'assets',
|
||||||
|
component: () => import('../views/AssetsView.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/characters',
|
||||||
|
name: 'characters',
|
||||||
|
component: () => import('../views/CharactersView.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/characters/:id',
|
||||||
|
name: 'character-detail',
|
||||||
|
component: () => import('../views/CharacterDetailView.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/workspace/:id',
|
||||||
|
name: 'workspace',
|
||||||
|
component: () => import('../views/WorkspaceView.vue')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
|
router.beforeEach((to, from, next) => {
|
||||||
|
const isAuth = localStorage.getItem('auth_code')
|
||||||
|
|
||||||
|
if (to.name !== 'login' && !isAuth) {
|
||||||
|
next({ name: 'login' })
|
||||||
|
} else if (to.name === 'login' && isAuth) {
|
||||||
|
next({ name: 'dashboard' })
|
||||||
|
} else {
|
||||||
|
next()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
70
src/services/aiService.js
Normal file
70
src/services/aiService.js
Normal file
@@ -0,0 +1,70 @@
|
|||||||
|
import api from './api'
|
||||||
|
|
||||||
|
// Mock responses for demo purposes since we don't have real backend/keys yet
|
||||||
|
const mockResponses = {
|
||||||
|
'chatgpt': "I'm ChatGPT. I can help you with code, writing, and more.",
|
||||||
|
'gemini': "I'm Gemini. I can reason across text, code, images, and video.",
|
||||||
|
'nana-banana': "I'm Nana Banana! Let's make something fun and creative.",
|
||||||
|
'kling': "I'm Kling. I specialize in high-quality video generation."
|
||||||
|
}
|
||||||
|
|
||||||
|
export const aiService = {
|
||||||
|
// Send message to specific AI model
|
||||||
|
async sendMessage(modelId, message, history = []) {
|
||||||
|
// In a real app, this would be:
|
||||||
|
// return api.post(`/ai/${modelId}/chat`, { message, history })
|
||||||
|
|
||||||
|
// Simulating API call
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const response = mockResponses[modelId] || "I'm an AI assistant.";
|
||||||
|
resolve({
|
||||||
|
id: Date.now(),
|
||||||
|
role: 'assistant',
|
||||||
|
content: `${response} (Response to: "${message.substring(0, 20)}...")`,
|
||||||
|
timestamp: new Date()
|
||||||
|
})
|
||||||
|
}, 1000 + Math.random() * 1000)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// Get available models
|
||||||
|
async getModels() {
|
||||||
|
// return api.get('/models')
|
||||||
|
return [
|
||||||
|
{ id: 'chatgpt', name: 'ChatGPT', provider: 'OpenAI' },
|
||||||
|
{ id: 'gemini', name: 'Gemini', provider: 'Google' },
|
||||||
|
{ id: 'nana-banana', name: 'Nana Banana', provider: 'Custom' },
|
||||||
|
{ id: 'kling', name: 'Kling', provider: 'Kling AI' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
// Run generation task
|
||||||
|
async runGeneration(payload) {
|
||||||
|
const response = await api.post('/generations/_run', payload)
|
||||||
|
return response.data
|
||||||
|
},
|
||||||
|
|
||||||
|
// Get generation status
|
||||||
|
async getGenerationStatus(id) {
|
||||||
|
const response = await api.get(`/generations/${id}`)
|
||||||
|
return response.data
|
||||||
|
},
|
||||||
|
|
||||||
|
// Get generations history
|
||||||
|
async getGenerations(limit, offset, characterId) {
|
||||||
|
const params = { limit, offset }
|
||||||
|
if (characterId) params.character_id = characterId
|
||||||
|
const response = await api.get('/generations', { params })
|
||||||
|
return response.data
|
||||||
|
},
|
||||||
|
|
||||||
|
// Improve prompt using assistant
|
||||||
|
async improvePrompt(prompt, linkedAssets = []) {
|
||||||
|
const response = await api.post('/generations/prompt-assistant', {
|
||||||
|
prompt,
|
||||||
|
linked_assets: linkedAssets
|
||||||
|
})
|
||||||
|
return response.data
|
||||||
|
}
|
||||||
|
}
|
||||||
20
src/services/api.js
Normal file
20
src/services/api.js
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
import axios from 'axios'
|
||||||
|
|
||||||
|
|
||||||
|
const api = axios.create({
|
||||||
|
baseURL: import.meta.env.VITE_API_URL || '/api',
|
||||||
|
timeout: 60000,
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// Request interceptor handling can be added here if needed
|
||||||
|
api.interceptors.response.use(
|
||||||
|
response => response,
|
||||||
|
error => {
|
||||||
|
return Promise.reject(error)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
export default api
|
||||||
45
src/services/dataService.js
Normal file
45
src/services/dataService.js
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
import api from './api'
|
||||||
|
|
||||||
|
export const dataService = {
|
||||||
|
getAssets: async (limit, offset, type) => {
|
||||||
|
const params = { limit, offset }
|
||||||
|
if (type && type !== 'all') params.type = type
|
||||||
|
const response = await api.get('/assets', { params })
|
||||||
|
return response.data
|
||||||
|
},
|
||||||
|
|
||||||
|
getAsset: async (id) => {
|
||||||
|
const response = await api.get(`/assets/${id}`)
|
||||||
|
return response.data
|
||||||
|
},
|
||||||
|
|
||||||
|
getCharacters: async () => {
|
||||||
|
// Spec says /api/characters/ (with trailing slash) but usually client shouldn't matter too much if config is good,
|
||||||
|
// but let's follow spec if strictly needed. Axios usually handles this.
|
||||||
|
const response = await api.get('/characters/')
|
||||||
|
return response.data
|
||||||
|
},
|
||||||
|
|
||||||
|
getCharacterById: async (id) => {
|
||||||
|
const response = await api.get(`/characters/${id}`)
|
||||||
|
return response.data
|
||||||
|
},
|
||||||
|
|
||||||
|
getAssetsByCharacterId: async (charId, limit, offset) => {
|
||||||
|
const response = await api.get(`/characters/${charId}/assets`, { params: { limit, offset } })
|
||||||
|
return response.data
|
||||||
|
},
|
||||||
|
|
||||||
|
uploadAsset: async (file, linkedCharId) => {
|
||||||
|
const formData = new FormData()
|
||||||
|
formData.append('file', file)
|
||||||
|
if (linkedCharId) formData.append('linked_char_id', linkedCharId)
|
||||||
|
|
||||||
|
const response = await api.post('/assets/upload', formData, {
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'multipart/form-data'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return response.data
|
||||||
|
}
|
||||||
|
}
|
||||||
53
src/stores/auth.js
Normal file
53
src/stores/auth.js
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
import { defineStore } from "pinia";
|
||||||
|
import { ref } from "vue";
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
|
export const useAuthStore = defineStore("auth", () => {
|
||||||
|
const user = ref(JSON.parse(localStorage.getItem("user")) || null);
|
||||||
|
const isAuthenticated = ref(!!user.value);
|
||||||
|
const error = ref(null);
|
||||||
|
|
||||||
|
async function login({ username, password }) {
|
||||||
|
error.value = null;
|
||||||
|
try {
|
||||||
|
const formData = new URLSearchParams();
|
||||||
|
formData.append('username', username);
|
||||||
|
formData.append('password', password);
|
||||||
|
|
||||||
|
const response = await axios.post(
|
||||||
|
`${import.meta.env.VITE_API_URL}/login/access-token`,
|
||||||
|
formData,
|
||||||
|
{
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/x-www-form-urlencoded'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const { access_token, token_type } = response.data;
|
||||||
|
|
||||||
|
const userData = {
|
||||||
|
username,
|
||||||
|
token: access_token,
|
||||||
|
tokenType: token_type
|
||||||
|
};
|
||||||
|
|
||||||
|
user.value = userData;
|
||||||
|
isAuthenticated.value = true;
|
||||||
|
localStorage.setItem("user", JSON.stringify(userData));
|
||||||
|
return true;
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Login failed:', err);
|
||||||
|
error.value = err.response?.data?.detail || 'Login failed. Please check your credentials.';
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function logout() {
|
||||||
|
user.value = null;
|
||||||
|
isAuthenticated.value = false;
|
||||||
|
localStorage.removeItem("user");
|
||||||
|
}
|
||||||
|
|
||||||
|
return { user, isAuthenticated, error, login, logout };
|
||||||
|
});
|
||||||
232
src/views/AssetsView.vue
Normal file
232
src/views/AssetsView.vue
Normal file
@@ -0,0 +1,232 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted, computed } from 'vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import { dataService } from '../services/dataService'
|
||||||
|
import type { Asset } from '@/models/asset'
|
||||||
|
import Button from 'primevue/button'
|
||||||
|
import Skeleton from 'primevue/skeleton'
|
||||||
|
import Dialog from 'primevue/dialog'
|
||||||
|
import Paginator from 'primevue/paginator'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const assets = ref<Asset[]>([])
|
||||||
|
const loading = ref(true)
|
||||||
|
const activeFilter = ref('all')
|
||||||
|
const API_URL = import.meta.env.VITE_API_URL
|
||||||
|
|
||||||
|
const selectedAsset = ref<Asset | null>(null)
|
||||||
|
const isModalVisible = ref(false)
|
||||||
|
|
||||||
|
const first = ref(0)
|
||||||
|
const rows = ref(12)
|
||||||
|
const totalRecords = ref(0)
|
||||||
|
|
||||||
|
const openModal = (asset: Asset) => {
|
||||||
|
selectedAsset.value = asset
|
||||||
|
isModalVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const loadAssets = async () => {
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
const response = await dataService.getAssets(rows.value, first.value, activeFilter.value)
|
||||||
|
if (response && response.assets) {
|
||||||
|
assets.value = response.assets
|
||||||
|
totalRecords.value = response.total_count || 0
|
||||||
|
} else {
|
||||||
|
// Fallback for unexpected response structure
|
||||||
|
assets.value = Array.isArray(response) ? response : []
|
||||||
|
totalRecords.value = assets.value.length
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Failed to load assets', e)
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
loadAssets()
|
||||||
|
})
|
||||||
|
|
||||||
|
// Server-side filtering is now used, so we don't need a local filteredAssets computed property
|
||||||
|
// unless we want to do secondary filtering, but usually it's better to let the server handle it.
|
||||||
|
|
||||||
|
const paginatedAssets = computed(() => {
|
||||||
|
// With server-side pagination, assets.value already contains only the current page
|
||||||
|
return assets.value
|
||||||
|
})
|
||||||
|
|
||||||
|
const onPage = (event: any) => {
|
||||||
|
first.value = event.first
|
||||||
|
rows.value = event.rows
|
||||||
|
loadAssets()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleFilterChange = (filter: string) => {
|
||||||
|
activeFilter.value = filter
|
||||||
|
first.value = 0 // Reset to first page when filter changes
|
||||||
|
loadAssets()
|
||||||
|
}
|
||||||
|
|
||||||
|
const goBack = () => {
|
||||||
|
router.push('/')
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatDate = (dateString: string) => {
|
||||||
|
if (!dateString) return ''
|
||||||
|
return new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric' }).format(new Date(dateString))
|
||||||
|
}
|
||||||
|
</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 cursor-pointer" @click="goBack">
|
||||||
|
<div
|
||||||
|
class="w-10 h-10 bg-white/10 rounded-xl flex items-center justify-center font-bold text-white text-xl transition-all duration-300 hover:bg-white/20">
|
||||||
|
←
|
||||||
|
</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('/')">
|
||||||
|
<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 bg-white/10 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('/characters')">
|
||||||
|
<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">
|
||||||
|
<!-- Top Bar -->
|
||||||
|
<header class="flex justify-between items-end mb-8">
|
||||||
|
<div>
|
||||||
|
<h1 class="text-4xl font-bold m-0">Assets Library</h1>
|
||||||
|
<p class="mt-2 mb-0 text-slate-400">Manage all your assets</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="glass-panel p-2 flex gap-2 rounded-xl">
|
||||||
|
<Button v-for="filter in ['all', 'image']" :key="filter"
|
||||||
|
:label="filter.charAt(0).toUpperCase() + filter.slice(1)"
|
||||||
|
:class="activeFilter === filter ? 'bg-white/10 text-slate-50' : 'bg-transparent text-slate-400'"
|
||||||
|
class="px-4 py-2 rounded-lg font-medium transition-all duration-300 hover:text-slate-50" text
|
||||||
|
@click="handleFilterChange(filter)" />
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Loading State -->
|
||||||
|
<div v-if="loading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 pb-8">
|
||||||
|
<div v-for="i in 8" :key="i" class="glass-panel rounded-2xl overflow-hidden">
|
||||||
|
<Skeleton height="180px" />
|
||||||
|
<div class="p-5">
|
||||||
|
<Skeleton class="mb-2" />
|
||||||
|
<Skeleton width="60%" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Assets Grid -->
|
||||||
|
<div v-else class="flex-1 flex flex-col">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-6 pb-8">
|
||||||
|
<div v-for="asset in paginatedAssets" :key="asset.id" @click="openModal(asset)"
|
||||||
|
class="glass-panel rounded-2xl overflow-hidden transition-all duration-300 cursor-pointer border border-white/5 hover:-translate-y-1 hover:border-white/20 hover:shadow-2xl">
|
||||||
|
<!-- Media Preview -->
|
||||||
|
<div class="h-70 bg-black/30 relative overflow-hidden">
|
||||||
|
<img :src="API_URL + asset.url || 'https://via.placeholder.com/300'" :alt="asset.name"
|
||||||
|
class="w-full h-full object-cover transition-transform duration-500 hover:scale-105" />
|
||||||
|
<div
|
||||||
|
class="absolute top-2.5 right-2.5 bg-black/60 backdrop-blur-sm px-3 py-1 rounded-full text-xs uppercase font-semibold text-white z-10">
|
||||||
|
{{ asset.type }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Asset Info -->
|
||||||
|
<div class="p-5">
|
||||||
|
<div class="flex justify-between items-start mb-2">
|
||||||
|
<h3
|
||||||
|
class="m-0 text-base font-semibold whitespace-nowrap overflow-hidden text-ellipsis flex-1 mr-2">
|
||||||
|
{{ asset.name }}
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between items-center text-xs text-slate-400">
|
||||||
|
<span>{{ formatDate(asset.created_at) }}</span>
|
||||||
|
<span v-if="asset.linked_char_id"
|
||||||
|
class="bg-emerald-500/10 text-emerald-400 px-2 py-0.5 rounded">
|
||||||
|
🔗 Linked
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<Dialog v-model:visible="isModalVisible" modal dismissableMask header="Asset View"
|
||||||
|
:style="{ width: '90vw', maxWidth: '800px' }" class="glass-panel rounded-2xl">
|
||||||
|
<div v-if="selectedAsset" class="flex flex-col items-center">
|
||||||
|
<img :src="selectedAsset.link ? API_URL + selectedAsset.link : (selectedAsset.url ? API_URL + selectedAsset.url : 'https://via.placeholder.com/800')"
|
||||||
|
:alt="selectedAsset.name" class="max-w-full max-h-[70vh] rounded-xl object-contain shadow-2xl" />
|
||||||
|
<div class="mt-6 text-center">
|
||||||
|
<h2 class="text-2xl font-bold mb-2">{{ selectedAsset.name }}</h2>
|
||||||
|
<p class="text-slate-400">{{ formatDate(selectedAsset.created_at) }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* Additional custom styles if needed */
|
||||||
|
</style>
|
||||||
753
src/views/CharacterDetailView.vue
Normal file
753
src/views/CharacterDetailView.vue
Normal file
@@ -0,0 +1,753 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref, onMounted, computed } from 'vue'
|
||||||
|
import { useRoute, useRouter } from 'vue-router'
|
||||||
|
import { dataService } from '../services/dataService'
|
||||||
|
import { aiService } from '../services/aiService'
|
||||||
|
import Button from 'primevue/button'
|
||||||
|
import Skeleton from 'primevue/skeleton'
|
||||||
|
import Tag from 'primevue/tag'
|
||||||
|
import Dialog from 'primevue/dialog'
|
||||||
|
import Textarea from 'primevue/textarea'
|
||||||
|
import SelectButton from 'primevue/selectbutton'
|
||||||
|
import FileUpload from 'primevue/fileupload'
|
||||||
|
import ProgressBar from 'primevue/progressbar'
|
||||||
|
import Message from 'primevue/message'
|
||||||
|
import ProgressSpinner from 'primevue/progressspinner'
|
||||||
|
import Tabs from 'primevue/tabs'
|
||||||
|
import TabList from 'primevue/tablist'
|
||||||
|
import Tab from 'primevue/tab'
|
||||||
|
import TabPanels from 'primevue/tabpanels'
|
||||||
|
import TabPanel from 'primevue/tabpanel'
|
||||||
|
import Paginator from 'primevue/paginator'
|
||||||
|
|
||||||
|
const route = useRoute()
|
||||||
|
const router = useRouter()
|
||||||
|
const character = ref(null)
|
||||||
|
const characterAssets = ref([])
|
||||||
|
const assetsTotalRecords = ref(0)
|
||||||
|
const historyGenerations = ref([])
|
||||||
|
const historyTotal = ref(0)
|
||||||
|
const historyRows = ref(10)
|
||||||
|
const historyFirst = ref(0)
|
||||||
|
const loading = ref(true)
|
||||||
|
const API_URL = import.meta.env.VITE_API_URL
|
||||||
|
|
||||||
|
const selectedAsset = ref(null)
|
||||||
|
const isModalVisible = ref(false)
|
||||||
|
|
||||||
|
const openModal = (asset) => {
|
||||||
|
selectedAsset.value = asset
|
||||||
|
isModalVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const loadData = async () => {
|
||||||
|
loading.value = true
|
||||||
|
const charId = route.params.id
|
||||||
|
try {
|
||||||
|
const [char, assetsResponse, historyResponse] = await Promise.all([
|
||||||
|
dataService.getCharacterById(charId),
|
||||||
|
dataService.getAssetsByCharacterId(charId, assetsRows.value, assetsFirst.value),
|
||||||
|
aiService.getGenerations(historyRows.value, historyFirst.value, charId)
|
||||||
|
])
|
||||||
|
character.value = char
|
||||||
|
|
||||||
|
if (assetsResponse && assetsResponse.assets) {
|
||||||
|
characterAssets.value = assetsResponse.assets
|
||||||
|
assetsTotalRecords.value = assetsResponse.total_count || 0
|
||||||
|
} else {
|
||||||
|
characterAssets.value = Array.isArray(assetsResponse) ? assetsResponse : []
|
||||||
|
assetsTotalRecords.value = characterAssets.value.length
|
||||||
|
}
|
||||||
|
|
||||||
|
if (historyResponse && historyResponse.generations) {
|
||||||
|
historyGenerations.value = historyResponse.generations
|
||||||
|
historyTotal.value = historyResponse.total_count || 0
|
||||||
|
} else {
|
||||||
|
historyGenerations.value = Array.isArray(historyResponse) ? historyResponse : []
|
||||||
|
historyTotal.value = historyGenerations.value.length
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Failed to load character details', e)
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
loadData()
|
||||||
|
})
|
||||||
|
|
||||||
|
const goBack = () => {
|
||||||
|
router.push('/characters')
|
||||||
|
}
|
||||||
|
|
||||||
|
const loadAssets = async () => {
|
||||||
|
const charId = route.params.id
|
||||||
|
try {
|
||||||
|
const response = await dataService.getAssetsByCharacterId(charId, assetsRows.value, assetsFirst.value)
|
||||||
|
if (response && response.assets) {
|
||||||
|
characterAssets.value = response.assets
|
||||||
|
assetsTotalRecords.value = response.total_count || 0
|
||||||
|
} else {
|
||||||
|
characterAssets.value = Array.isArray(response) ? response : []
|
||||||
|
assetsTotalRecords.value = characterAssets.value.length
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Failed to load assets', e)
|
||||||
|
}
|
||||||
|
return characterAssets.value
|
||||||
|
}
|
||||||
|
const loadHistory = async () => {
|
||||||
|
const charId = route.params.id
|
||||||
|
try {
|
||||||
|
const response = await aiService.getGenerations(historyRows.value, historyFirst.value, charId)
|
||||||
|
if (response && response.generations) {
|
||||||
|
historyGenerations.value = response.generations
|
||||||
|
historyTotal.value = response.total_count || 0
|
||||||
|
} else {
|
||||||
|
historyGenerations.value = Array.isArray(response) ? response : []
|
||||||
|
historyTotal.value = historyGenerations.value.length
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Failed to load history', e)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const onHistoryPage = (event) => {
|
||||||
|
historyFirst.value = event.first
|
||||||
|
historyRows.value = event.rows
|
||||||
|
loadHistory()
|
||||||
|
}
|
||||||
|
|
||||||
|
// Generation State
|
||||||
|
const prompt = ref('')
|
||||||
|
const isGenerating = ref(false)
|
||||||
|
const generationStatus = ref('')
|
||||||
|
const generationProgress = ref(0)
|
||||||
|
const generationSuccess = ref(false)
|
||||||
|
const generatedResult = ref(null)
|
||||||
|
|
||||||
|
// Prompt Assistant state
|
||||||
|
const isImprovingPrompt = ref(false)
|
||||||
|
const previousPrompt = ref('')
|
||||||
|
|
||||||
|
// File Upload state
|
||||||
|
const isUploading = ref(false)
|
||||||
|
const fileInput = ref(null)
|
||||||
|
|
||||||
|
const selectedAssets = ref([])
|
||||||
|
const toggleAssetSelection = (asset) => {
|
||||||
|
const index = selectedAssets.value.findIndex(a => a.id === asset.id)
|
||||||
|
if (index > -1) {
|
||||||
|
selectedAssets.value.splice(index, 1)
|
||||||
|
} else {
|
||||||
|
selectedAssets.value.push(asset)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const quality = ref({
|
||||||
|
key: 'TWOK',
|
||||||
|
value: '2K'
|
||||||
|
})
|
||||||
|
const qualityOptions = ref([{
|
||||||
|
key: 'ONEK',
|
||||||
|
value: '1K'
|
||||||
|
}, {
|
||||||
|
key: 'TWOK',
|
||||||
|
value: '2K'
|
||||||
|
}, {
|
||||||
|
key: 'FOURK',
|
||||||
|
value: '4K'
|
||||||
|
}])
|
||||||
|
const aspectRatio = ref({ key: "NINESIXTEEN", value: "9:16" })
|
||||||
|
const aspectRatioOptions = ref([
|
||||||
|
{ key: "NINESIXTEEN", value: "9:16" },
|
||||||
|
{ key: "FOURTHIREE", value: "4:3" },
|
||||||
|
{ key: "THIRDFOUR", value: "3:4" },
|
||||||
|
{ key: "SIXTEENNINE", value: "16:9" }
|
||||||
|
])
|
||||||
|
|
||||||
|
const assetsFirst = ref(0)
|
||||||
|
const assetsRows = ref(12)
|
||||||
|
const paginatedCharacterAssets = computed(() => {
|
||||||
|
return characterAssets.value
|
||||||
|
})
|
||||||
|
|
||||||
|
const onAssetsPage = (event) => {
|
||||||
|
assetsFirst.value = event.first
|
||||||
|
assetsRows.value = event.rows
|
||||||
|
loadAssets()
|
||||||
|
}
|
||||||
|
|
||||||
|
const pollStatus = async (id) => {
|
||||||
|
let completed = false
|
||||||
|
while (!completed && isGenerating.value) {
|
||||||
|
try {
|
||||||
|
const response = await aiService.getGenerationStatus(id)
|
||||||
|
generationStatus.value = response.status
|
||||||
|
generationProgress.value = response.progress || 0
|
||||||
|
|
||||||
|
if (response.status === 'done') {
|
||||||
|
completed = true
|
||||||
|
generationSuccess.value = true
|
||||||
|
|
||||||
|
// 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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
loadHistory()
|
||||||
|
} else if (response.status === 'failed') {
|
||||||
|
completed = true
|
||||||
|
throw new Error('Generation failed on server')
|
||||||
|
} else {
|
||||||
|
// Wait before next poll
|
||||||
|
await new Promise(resolve => setTimeout(resolve, 2000))
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Polling failed', e)
|
||||||
|
completed = true
|
||||||
|
isGenerating.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
isGenerating.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
const restoreGeneration = async (gen) => {
|
||||||
|
// 1. Set prompt
|
||||||
|
prompt.value = gen.prompt
|
||||||
|
|
||||||
|
// 2. Set Quality
|
||||||
|
const foundQuality = qualityOptions.value.find(opt => opt.key === gen.quality)
|
||||||
|
if (foundQuality) quality.value = foundQuality
|
||||||
|
|
||||||
|
// 3. Set Aspect Ratio
|
||||||
|
const foundAspect = aspectRatioOptions.value.find(opt => opt.key === gen.aspect_ratio)
|
||||||
|
if (foundAspect) aspectRatio.value = foundAspect
|
||||||
|
|
||||||
|
// 4. Set Result if status is 'done'
|
||||||
|
if (gen.status === 'done') {
|
||||||
|
const assets = characterAssets.value
|
||||||
|
if (gen.assets_list && gen.assets_list.length > 0) {
|
||||||
|
selectedAssets.value = assets.filter(a => gen.assets_list.includes(a.id))
|
||||||
|
generatedResult.value = {
|
||||||
|
type: 'assets',
|
||||||
|
assets: selectedAssets.value
|
||||||
|
}
|
||||||
|
generationSuccess.value = true
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
generatedResult.value = null
|
||||||
|
generationSuccess.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleImprovePrompt = async () => {
|
||||||
|
if (prompt.value.length <= 10) return
|
||||||
|
|
||||||
|
isImprovingPrompt.value = true
|
||||||
|
try {
|
||||||
|
const linkedAssetIds = selectedAssets.value.map(a => a.id)
|
||||||
|
const response = await aiService.improvePrompt(prompt.value, linkedAssetIds)
|
||||||
|
if (response && response.prompt) {
|
||||||
|
previousPrompt.value = prompt.value
|
||||||
|
prompt.value = response.prompt
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Prompt improvement failed', e)
|
||||||
|
} finally {
|
||||||
|
isImprovingPrompt.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const undoImprovePrompt = () => {
|
||||||
|
if (previousPrompt.value) {
|
||||||
|
const temp = prompt.value
|
||||||
|
prompt.value = previousPrompt.value
|
||||||
|
previousPrompt.value = temp
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const triggerFileUpload = () => {
|
||||||
|
if (fileInput.value) fileInput.value.click()
|
||||||
|
}
|
||||||
|
|
||||||
|
const onFileSelected = async (event) => {
|
||||||
|
const file = event.target.files[0]
|
||||||
|
if (!file) return
|
||||||
|
|
||||||
|
isUploading.value = true
|
||||||
|
try {
|
||||||
|
await dataService.uploadAsset(file, route.params.id)
|
||||||
|
await loadAssets()
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Failed to upload asset', e)
|
||||||
|
} finally {
|
||||||
|
isUploading.value = false
|
||||||
|
if (event.target) event.target.value = '' // Clear input
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleGenerate = async () => {
|
||||||
|
if (!prompt.value.trim()) return
|
||||||
|
|
||||||
|
isGenerating.value = true
|
||||||
|
generationSuccess.value = false
|
||||||
|
generationStatus.value = 'starting'
|
||||||
|
generationProgress.value = 0
|
||||||
|
generatedResult.value = null
|
||||||
|
|
||||||
|
try {
|
||||||
|
const payload = {
|
||||||
|
linked_character_id: character.value?.id,
|
||||||
|
aspect_ratio: aspectRatio.value.key,
|
||||||
|
quality: quality.value.key,
|
||||||
|
prompt: prompt.value,
|
||||||
|
assets_list: selectedAssets.value.map(a => a.id)
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await aiService.runGeneration(payload)
|
||||||
|
// response is expected to have an 'id' for the generation task
|
||||||
|
if (response && response.id) {
|
||||||
|
pollStatus(response.id)
|
||||||
|
} else {
|
||||||
|
// Fallback if it returns data immediately
|
||||||
|
generatedResult.value = response
|
||||||
|
generationSuccess.value = true
|
||||||
|
isGenerating.value = false
|
||||||
|
}
|
||||||
|
prompt.value = ''
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Generation failed', e)
|
||||||
|
isGenerating.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="flex h-screen bg-slate-900 overflow-hidden">
|
||||||
|
<nav class="glass-panel w-14 m-2 flex flex-col items-center py-4 rounded-2xl z-10">
|
||||||
|
<div class="mb-6 cursor-pointer" @click="router.push('/')">
|
||||||
|
<div
|
||||||
|
class="w-8 h-8 bg-white/10 rounded-lg flex items-center justify-center font-bold text-white text-lg transition-all duration-300 hover:bg-white/20">
|
||||||
|
←
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex-1 flex flex-col gap-4 w-full items-center">
|
||||||
|
<div class="w-10 h-10 flex items-center justify-center rounded-lg cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
|
||||||
|
@click="router.push('/')">
|
||||||
|
<span class="text-xl">🏠</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-10 h-10 flex items-center justify-center rounded-lg cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
|
||||||
|
@click="router.push('/assets')">
|
||||||
|
<span class="text-xl">📂</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-10 h-10 flex items-center justify-center rounded-lg cursor-pointer transition-all duration-300 bg-white/10 text-slate-50"
|
||||||
|
@click="router.push('/characters')">
|
||||||
|
<span class="text-xl">👥</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<main v-if="!loading && character" class="flex-1 p-4 lg:p-6 overflow-y-auto flex flex-col gap-4">
|
||||||
|
<header class="mb-0">
|
||||||
|
<Button label="Back" icon="pi pi-arrow-left" @click="goBack" text
|
||||||
|
class="text-slate-400 hover:text-slate-50 p-1" />
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="glass-panel p-2 lg:p-3 rounded-xl border border-white/5">
|
||||||
|
<div class="flex gap-4 items-center">
|
||||||
|
<div class="w-16 h-16 rounded-full overflow-hidden border border-white/10 flex-shrink-0">
|
||||||
|
<img :src="API_URL + character.avatar_image || 'https://via.placeholder.com/200'"
|
||||||
|
:alt="character.name" class="w-full h-full object-cover" />
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 overflow-hidden">
|
||||||
|
<h1 class="text-xl font-bold m-0 mb-1 leading-tight">{{ character.name }}</h1>
|
||||||
|
<div class="flex gap-2 mb-1">
|
||||||
|
<Tag :value="`ID: ${character.id.substring(0, 8)}`" severity="secondary"
|
||||||
|
class="text-[9px] px-1 py-0" />
|
||||||
|
</div>
|
||||||
|
<p class="text-[11px] leading-tight text-slate-400 max-w-full">
|
||||||
|
{{ character.character_bio }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Tabs value="0" class="glass-panel p-1.5 rounded-xl border border-white/5"
|
||||||
|
style="--p-tabs-tablist-background: transparent !important">
|
||||||
|
<TabList :pt="{
|
||||||
|
root: { class: 'border-none p-0 mb-2 inline-flex' },
|
||||||
|
tab: ({ context }) => ({
|
||||||
|
class: [
|
||||||
|
'flex items-center gap-1.5 px-4 py-2 rounded-lg font-bold transition-all duration-300 border-none outline-none cursor-pointer text-xs',
|
||||||
|
context.active
|
||||||
|
? 'bg-violet-600/20 text-violet-400 shadow-[0_0_20px_rgba(124,58,237,0.1)] border border-violet-500/20'
|
||||||
|
: 'text-slate-500 hover:text-slate-300 !bg-transparent border border-transparent'
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
activeBar: { class: 'hidden' }
|
||||||
|
}">
|
||||||
|
<Tab value="0">
|
||||||
|
<div class="!flex !flex-row !gap-1">
|
||||||
|
<i class="pi pi-sparkles text-[10px]" />
|
||||||
|
<span>Generation</span>
|
||||||
|
</div>
|
||||||
|
</Tab>
|
||||||
|
<Tab value="1">
|
||||||
|
<div class="!flex !flex-row !gap-1">
|
||||||
|
<i class="pi pi-images text-[10px]" />
|
||||||
|
<span>Assets ({{ assetsTotalRecords }})</span>
|
||||||
|
</div>
|
||||||
|
</Tab>
|
||||||
|
<Tab value="2" class="hidden">
|
||||||
|
<div class="!flex !flex-row !gap-1">
|
||||||
|
<i class="pi pi-history text-[10px]" />
|
||||||
|
<span>History ({{ historyTotal }})</span>
|
||||||
|
</div>
|
||||||
|
</Tab>
|
||||||
|
</TabList>
|
||||||
|
|
||||||
|
<TabPanels class="bg-transparent p-0">
|
||||||
|
<TabPanel value="0">
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-4 gap-2">
|
||||||
|
<div
|
||||||
|
class="lg:col-span-1 glass-panel p-2 rounded-xl border border-white/5 bg-white/5 flex flex-col gap-3">
|
||||||
|
<div class="flex justify-between items-center flex-col">
|
||||||
|
<h2 class="text-sm font-bold m-0">Settings</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-col gap-1.5">
|
||||||
|
<label
|
||||||
|
class="text-slate-400 text-[9px] font-semibold uppercase tracking-wider">Quality</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="option in qualityOptions" :key="option.key"
|
||||||
|
@click="quality = option"
|
||||||
|
class="w-full items-center justify-center justify-items-center !text-center hover:bg-white/5 hover:text-white p-1 hover:rounded-lg"
|
||||||
|
:class="quality.key === option.key ? 'bg-white/9 text-white rounded-lg' : ''">
|
||||||
|
<span class="text-white w-full text-center">{{ option.value }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-col gap-1.5">
|
||||||
|
<label
|
||||||
|
class="text-slate-400 text-[9px] font-semibold uppercase tracking-wider">Aspect</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="option in aspectRatioOptions" :key="option.key"
|
||||||
|
@click="aspectRatio = option"
|
||||||
|
class="w-full items-center justify-center justify-items-center !text-center hover:bg-white/5 hover:text-white p-1 hover:rounded-lg"
|
||||||
|
:class="aspectRatio.key === option.key ? 'bg-white/9 text-white rounded-lg' : ''">
|
||||||
|
<span class="text-white w-full text-center">{{ option.value }}</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>
|
||||||
|
|
||||||
|
<div class="relative w-full">
|
||||||
|
<Textarea v-model="prompt" rows="3" autoResize placeholder="Describe..."
|
||||||
|
class="w-full bg-slate-900 border-white/10 text-white rounded-lg p-2 focus:border-violet-500 transition-all text-xs pr-10" />
|
||||||
|
|
||||||
|
<div class="absolute top-1.5 right-1.5 flex gap-1">
|
||||||
|
<Button v-if="previousPrompt" icon="pi pi-undo"
|
||||||
|
class="!p-1 !w-6 !h-6 !text-[10px] bg-slate-800 hover:bg-slate-700 border-white/10 text-slate-300"
|
||||||
|
@click="undoImprovePrompt" v-tooltip.top="'Rollback'" />
|
||||||
|
|
||||||
|
<Button icon="pi pi-sparkles" :loading="isImprovingPrompt"
|
||||||
|
:disabled="prompt.length <= 10"
|
||||||
|
class="!p-1 !w-6 !h-6 !text-[10px] bg-violet-600/20 hover:bg-violet-600/30 border-violet-500/30 text-violet-400 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
@click="handleImprovePrompt"
|
||||||
|
v-tooltip.top="prompt.length <= 10 ? 'Enter at least 10 characters' : 'Improve prompt'" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="characterAssets.length > 0" class="flex flex-col gap-1.5">
|
||||||
|
<label class="text-slate-400 text-[9px] font-semibold uppercase tracking-wider">Ref
|
||||||
|
Assets ({{ selectedAssets.length }})</label>
|
||||||
|
<div class="grid grid-cols-6 gap-1">
|
||||||
|
<div v-for="asset in characterAssets" :key="asset.id"
|
||||||
|
@click="toggleAssetSelection(asset)"
|
||||||
|
class="relative aspect-[9/16] rounded overflow-hidden cursor-pointer border transition-all duration-200 hover:scale-200 hover:z-10"
|
||||||
|
:class="selectedAssets.some(a => a.id === asset.id) ? 'border-violet-500 ring-1 ring-violet-500/20 shadow-lg' : 'border-white/5 opacity-60 hover:opacity-100 hover:border-white/20'">
|
||||||
|
<img :src="API_URL + asset.url" class="w-full h-full object-cover" />
|
||||||
|
<div v-if="selectedAssets.some(a => a.id === asset.id)"
|
||||||
|
class="absolute inset-0 bg-violet-600/20 flex items-center justify-center">
|
||||||
|
<i class="pi pi-check text-white text-[8px] drop-shadow-md" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Removed Ref Assets section if characterAssets is empty, but it's already conditional -->
|
||||||
|
|
||||||
|
<div class="flex flex-col gap-1.5 mt-auto pt-1.5 border-t border-white/5">
|
||||||
|
<Button :label="isGenerating ? 'Wait...' : `Generate`"
|
||||||
|
:icon="isGenerating ? 'pi pi-spin pi-spinner' : 'pi pi-magic'"
|
||||||
|
:loading="isGenerating" @click="handleGenerate"
|
||||||
|
class="w-full py-2 text-[11px] font-bold bg-gradient-to-r from-violet-600 to-cyan-500 border-none rounded shadow transition-all hover:scale-[1.01] active:scale-[0.99]" />
|
||||||
|
|
||||||
|
<Message v-if="generationSuccess" severity="success" :closable="true"
|
||||||
|
@close="generationSuccess = false">
|
||||||
|
Success!
|
||||||
|
</Message>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="lg:col-span-3 glass-panel p-3 rounded-xl border border-white/5 bg-white/5 min-h-[300px] flex flex-col items-center justify-center text-center relative overflow-hidden">
|
||||||
|
<div v-if="isGenerating" class="flex flex-col items-center gap-3 z-10 w-full px-12">
|
||||||
|
<ProgressSpinner style="width: 40px; height: 40px" strokeWidth="4"
|
||||||
|
animationDuration=".8s" fill="transparent" />
|
||||||
|
<div class="text-center">
|
||||||
|
<h3
|
||||||
|
class="text-lg font-bold mb-0.5 bg-gradient-to-r from-violet-400 to-cyan-400 bg-clip-text text-transparent capitalize">
|
||||||
|
{{ generationStatus || 'Creating...' }}</h3>
|
||||||
|
<p class="text-[10px] text-slate-400">Processing using AI</p>
|
||||||
|
</div>
|
||||||
|
<ProgressBar :value="generationProgress" style="height: 6px; width: 100%"
|
||||||
|
class="rounded-full overflow-hidden !bg-slate-800" :pt="{
|
||||||
|
value: { class: '!bg-gradient-to-r !from-violet-600 !to-cyan-500 !transition-all !duration-500' }
|
||||||
|
}" />
|
||||||
|
<span class="text-[10px] text-slate-500 font-mono">{{ generationProgress }}%</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else-if="generatedResult"
|
||||||
|
class="w-full h-full flex flex-col gap-3 animate-in fade-in zoom-in duration-300">
|
||||||
|
<div class="flex justify-between items-center mb-1">
|
||||||
|
<h2 class="text-lg font-bold m-0">Result</h2>
|
||||||
|
<div class="flex gap-1">
|
||||||
|
<Button icon="pi pi-download" text class="hover:bg-white/10 p-1 text-xs" />
|
||||||
|
<Button icon="pi pi-share-alt" text class="hover:bg-white/10 p-1 text-xs" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="generatedResult.type === 'assets'"
|
||||||
|
class="grid grid-cols-1 md:grid-cols-2 gap-2 overflow-y-auto">
|
||||||
|
<div v-for="asset in generatedResult.assets" :key="asset.id"
|
||||||
|
class="rounded-xl overflow-hidden border border-white/10 shadow-xl aspect-square bg-black/20">
|
||||||
|
<img :src="API_URL + asset.url" class="w-full h-full object-cover" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-else-if="generatedResult.type === 'image'"
|
||||||
|
class="flex-1 rounded-xl overflow-hidden border border-white/10 shadow-xl">
|
||||||
|
<img :src="generatedResult.url" class="w-full h-full object-cover" />
|
||||||
|
</div>
|
||||||
|
<div v-else
|
||||||
|
class="flex-1 bg-slate-900/50 p-4 rounded-xl border border-white/10 text-left font-mono text-[11px] leading-tight overflow-y-auto">
|
||||||
|
{{ generatedResult.content || generatedResult }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else class="flex flex-col items-center gap-2 text-slate-500 opacity-60">
|
||||||
|
<i class="pi pi-image text-4xl" />
|
||||||
|
<p class="text-sm font-medium">Ready</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Generation History Section -->
|
||||||
|
<div class="w-full mt-6 pt-6 border-t border-white/5 flex flex-col gap-3 relative z-10">
|
||||||
|
<div class="flex justify-between items-center px-1">
|
||||||
|
<h3 class="text-xs font-bold text-slate-400 uppercase tracking-wider">Recent
|
||||||
|
Generations ({{ historyTotal }})</h3>
|
||||||
|
<Button v-if="historyTotal > 0" icon="pi pi-refresh" text
|
||||||
|
class="!p-1 hover:bg-white/5 text-xs text-slate-500" @click="loadHistory" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="historyGenerations.length === 0"
|
||||||
|
class="py-10 text-center text-slate-600 italic text-[11px]">
|
||||||
|
No previous generations.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else
|
||||||
|
class="flex flex-col gap-2 max-h-[400px] overflow-y-auto pr-2 custom-scrollbar">
|
||||||
|
<div v-for="gen in historyGenerations" :key="gen.id"
|
||||||
|
@click="restoreGeneration(gen)"
|
||||||
|
class="glass-panel p-2.5 rounded-xl border border-white/5 flex gap-3 items-center bg-white/[0.02] hover:bg-white/[0.05] transition-all cursor-pointer group active:scale-[0.98]">
|
||||||
|
<div
|
||||||
|
class="w-14 h-14 rounded-lg overflow-hidden border border-white/10 bg-black/20 flex-shrink-0 relative">
|
||||||
|
<img v-if="gen.assets_list && gen.assets_list.length > 0"
|
||||||
|
:src="API_URL + '/assets/' + gen.assets_list[0]"
|
||||||
|
class="w-full h-full object-cover transition-transform group-hover:scale-110" />
|
||||||
|
<div v-else
|
||||||
|
class="w-full h-full flex items-center justify-center text-slate-700">
|
||||||
|
<i class="pi pi-image text-lg" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 min-w-0 flex flex-col gap-1">
|
||||||
|
<div class="flex justify-between items-start gap-2">
|
||||||
|
<p class="text-[11px] text-slate-300 truncate font-medium">{{
|
||||||
|
gen.prompt }}</p>
|
||||||
|
<Tag :value="gen.status"
|
||||||
|
:severity="gen.status === 'done' ? 'success' : (gen.status === 'failed' ? 'danger' : 'warning')"
|
||||||
|
class="text-[8px] px-1 py-0 !h-auto uppercase" />
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-2 text-[9px] text-slate-500 font-mono">
|
||||||
|
<span>{{ new Date(gen.created_at).toLocaleDateString() }}</span>
|
||||||
|
<span>•</span>
|
||||||
|
<span>{{ gen.quality }}</span>
|
||||||
|
<span>•</span>
|
||||||
|
<span>{{ gen.aspect_ratio }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button icon="pi pi-chevron-right" text rounded size="small"
|
||||||
|
class="opacity-0 group-hover:opacity-100 transition-opacity text-slate-400 !p-1" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Compact Pagination -->
|
||||||
|
<div v-if="historyTotal > historyRows" class="mt-2 border-t border-white/5 pt-2">
|
||||||
|
<Paginator :first="historyFirst" :rows="historyRows"
|
||||||
|
:totalRecords="historyTotal" @page="onHistoryPage" :template="{
|
||||||
|
default: 'PrevPageLink PageLinks NextPageLink'
|
||||||
|
}" class="!bg-transparent !border-none !p-0 !text-[10px]" :pt="{
|
||||||
|
root: { class: '!p-0' },
|
||||||
|
pcPageButton: { root: ({ context }) => ({ class: ['!min-w-[24px] !h-6 !text-[10px] !rounded-md', context.active ? '!bg-violet-600/20 !text-violet-400' : '!bg-transparent'] }) },
|
||||||
|
pcNextPageButton: { root: { class: '!min-w-[24px] !h-6 !text-[10px]' } },
|
||||||
|
pcPreviousPageButton: { root: { class: '!min-w-[24px] !h-6 !text-[10px]' } }
|
||||||
|
}" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="absolute -bottom-20 -right-20 w-64 h-64 bg-violet-600/10 blur-[100px] rounded-full pointer-events-none">
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="absolute -top-20 -left-20 w-64 h-64 bg-cyan-600/10 blur-[100px] rounded-full pointer-events-none">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</TabPanel>
|
||||||
|
|
||||||
|
<TabPanel value="1">
|
||||||
|
<div class="glass-panel p-8 rounded-3xl border border-white/5 bg-white/5">
|
||||||
|
<div class="flex justify-between items-center mb-6">
|
||||||
|
<h2 class="text-2xl font-bold m-0">Linked Assets ({{ assetsTotalRecords }})</h2>
|
||||||
|
<div>
|
||||||
|
<input type="file" ref="fileInput" class="hidden" accept="image/*"
|
||||||
|
@change="onFileSelected" />
|
||||||
|
<Button :label="isUploading ? 'Uploading...' : 'Upload Asset'"
|
||||||
|
:icon="isUploading ? 'pi pi-spin pi-spinner' : 'pi pi-upload'"
|
||||||
|
:loading="isUploading" @click="triggerFileUpload"
|
||||||
|
class="!py-2 !px-4 !text-sm font-bold bg-white/5 hover:bg-white/10 border-white/10 text-white rounded-xl transition-all" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="characterAssets.length === 0"
|
||||||
|
class="text-center py-16 text-slate-400 bg-white/[0.02] rounded-2xl">
|
||||||
|
No assets linked to this character.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else class="flex-1 flex flex-col">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-6">
|
||||||
|
<div v-for="asset in paginatedCharacterAssets" :key="asset.id"
|
||||||
|
@click="openModal(asset)"
|
||||||
|
class="glass-panel rounded-2xl overflow-hidden border border-white/5 transition-all duration-300 cursor-pointer hover:-translate-y-1 hover:border-white/20">
|
||||||
|
<div class="h-70 relative overflow-hidden">
|
||||||
|
<img :src="API_URL + asset.url || 'https://via.placeholder.com/300'"
|
||||||
|
:alt="asset.name" class="w-full h-full object-cover" />
|
||||||
|
<div
|
||||||
|
class="absolute top-2 right-2 bg-black/60 backdrop-blur-sm px-2 py-1 rounded text-xs uppercase text-white">
|
||||||
|
{{ asset.type }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-4">
|
||||||
|
<h3
|
||||||
|
class="text-sm font-semibold m-0 whitespace-nowrap overflow-hidden text-ellipsis">
|
||||||
|
{{ asset.name }}
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pagination -->
|
||||||
|
<div v-if="assetsTotalRecords > assetsRows" class="mt-8">
|
||||||
|
<Paginator :first="assetsFirst" :rows="assetsRows"
|
||||||
|
:totalRecords="assetsTotalRecords" @page="onAssetsPage" :template="{
|
||||||
|
default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink'
|
||||||
|
}" class="!bg-transparent !border-none !p-0" :pt="{
|
||||||
|
root: { class: '!bg-transparent' },
|
||||||
|
pcPageButton: {
|
||||||
|
root: ({ context }) => ({
|
||||||
|
class: [
|
||||||
|
'!min-w-[40px] !h-10 !rounded-xl !border-none !transition-all !duration-300 !font-bold',
|
||||||
|
context.active ? '!bg-violet-600 !text-white !shadow-lg' : '!bg-white/5 !text-slate-400 hover:!bg-white/10 hover:!text-slate-50'
|
||||||
|
]
|
||||||
|
})
|
||||||
|
},
|
||||||
|
pcFirstPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-xl !min-w-[40px] !h-10 hover:!bg-white/10 hover:!text-slate-50 transition-all' } },
|
||||||
|
pcPreviousPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-xl !min-w-[40px] !h-10 hover:!bg-white/10 hover:!text-slate-50 transition-all' } },
|
||||||
|
pcNextPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-xl !min-w-[40px] !h-10 hover:!bg-white/10 hover:!text-slate-50 transition-all' } },
|
||||||
|
pcLastPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-xl !min-w-[40px] !h-10 hover:!bg-white/10 hover:!text-slate-50 transition-all' } }
|
||||||
|
}" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</TabPanel>
|
||||||
|
|
||||||
|
</TabPanels>
|
||||||
|
</Tabs>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<div v-else-if="loading" class="flex-1 p-8 overflow-y-auto flex flex-col gap-8">
|
||||||
|
<Skeleton width="10rem" height="2rem" />
|
||||||
|
<div class="glass-panel p-8 rounded-3xl">
|
||||||
|
<div class="flex gap-8 items-center">
|
||||||
|
<Skeleton shape="circle" size="9.5rem" />
|
||||||
|
<div class="flex-1">
|
||||||
|
<Skeleton width="20rem" height="3rem" class="mb-4" />
|
||||||
|
<Skeleton width="15rem" height="2rem" class="mb-6" />
|
||||||
|
<Skeleton width="100%" height="4rem" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else class="flex-1 flex items-center justify-center text-slate-400">
|
||||||
|
Character not found.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Dialog v-model:visible="isModalVisible" modal dismissableMask header="Asset View"
|
||||||
|
:style="{ width: '90vw', maxWidth: '800px' }" class="glass-panel rounded-2xl">
|
||||||
|
<div v-if="selectedAsset" class="flex flex-col items-center">
|
||||||
|
<img :src="selectedAsset.link ? API_URL + selectedAsset.link : (selectedAsset.url ? API_URL + selectedAsset.url : 'https://via.placeholder.com/800')"
|
||||||
|
:alt="selectedAsset.name" class="max-w-full max-h-[70vh] rounded-xl object-contain shadow-2xl" />
|
||||||
|
<div class="mt-6 text-center">
|
||||||
|
<h2 class="text-2xl font-bold mb-2">{{ selectedAsset.name }}</h2>
|
||||||
|
<p class="text-slate-400">{{ selectedAsset.type }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style scoped>
|
||||||
|
.p-tablist {
|
||||||
|
background: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-tablist-tab-list {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-tabpanels {
|
||||||
|
background: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-togglebutton-content {
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
110
src/views/CharactersView.vue
Normal file
110
src/views/CharactersView.vue
Normal file
@@ -0,0 +1,110 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import { dataService } from '../services/dataService'
|
||||||
|
import Skeleton from 'primevue/skeleton'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const characters = ref([])
|
||||||
|
const loading = ref(true)
|
||||||
|
const API_URL = import.meta.env.VITE_API_URL
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
characters.value = await dataService.getCharacters()
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Failed to load characters', e)
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const goBack = () => {
|
||||||
|
router.push('/')
|
||||||
|
}
|
||||||
|
|
||||||
|
const goToDetail = (id) => {
|
||||||
|
router.push(`/characters/${id}`)
|
||||||
|
}
|
||||||
|
</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 cursor-pointer" @click="goBack">
|
||||||
|
<div
|
||||||
|
class="w-10 h-10 bg-white/10 rounded-xl flex items-center justify-center font-bold text-white text-xl transition-all duration-300 hover:bg-white/20">
|
||||||
|
←
|
||||||
|
</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('/')">
|
||||||
|
<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')">
|
||||||
|
<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 bg-white/10 text-slate-50">
|
||||||
|
<span class="text-2xl">👥</span>
|
||||||
|
</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>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* Line clamp utility for older browsers */
|
||||||
|
.line-clamp-2 {
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
153
src/views/DashboardView.vue
Normal file
153
src/views/DashboardView.vue
Normal file
@@ -0,0 +1,153 @@
|
|||||||
|
<script setup>
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import Button from 'primevue/button'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
|
const aiModels = [
|
||||||
|
{
|
||||||
|
id: 'chatgpt',
|
||||||
|
name: 'ChatGPT',
|
||||||
|
provider: 'OpenAI',
|
||||||
|
description: 'Advanced conversational AI for coding, writing, and analysis.',
|
||||||
|
icon: '🤖',
|
||||||
|
color: '#10a37f'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'gemini',
|
||||||
|
name: 'Gemini',
|
||||||
|
provider: 'Google',
|
||||||
|
description: 'Multimodal AI model with reasoning and coding capabilities.',
|
||||||
|
icon: '✨',
|
||||||
|
color: '#4285f4'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'nana-banana',
|
||||||
|
name: 'Nana Banana',
|
||||||
|
provider: 'Custom',
|
||||||
|
description: 'Specialized creative assistant for unique tasks.',
|
||||||
|
icon: '🍌',
|
||||||
|
color: '#eab308'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'kling',
|
||||||
|
name: 'Kling',
|
||||||
|
provider: 'Kling AI',
|
||||||
|
description: 'Next-generation video generation and processing.',
|
||||||
|
icon: '🎥',
|
||||||
|
color: '#ef4444'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const selectModel = (id) => {
|
||||||
|
console.log(`Selected model: ${id}`)
|
||||||
|
router.push(`/workspace/${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>
|
||||||
|
</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 bg-white/10 text-slate-50 shadow-inner">
|
||||||
|
<span class="text-2xl">🏠</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
|
||||||
|
@click="router.push('/assets')">
|
||||||
|
<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')">
|
||||||
|
<span class="text-2xl">👥</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-10 h-px bg-white/10 my-2"></div>
|
||||||
|
|
||||||
|
<div v-for="model in aiModels" :key="model.id"
|
||||||
|
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"
|
||||||
|
:style="{ '--model-color': model.color }" @click="selectModel(model.id)" :title="model.name">
|
||||||
|
<span class="text-2xl">{{ model.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"
|
||||||
|
title="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-12">
|
||||||
|
<div>
|
||||||
|
<h1
|
||||||
|
class="text-5xl font-bold m-0 italic tracking-tight bg-gradient-to-r from-white to-slate-500 bg-clip-text text-transparent">
|
||||||
|
Workspace</h1>
|
||||||
|
<p class="mt-2 mb-0 text-slate-400 font-medium tracking-wide">Welcome back to your controlled
|
||||||
|
environment</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Button label="New Project" icon="pi pi-plus" class="btn-secondary" outlined />
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Models Grid -->
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 gap-8">
|
||||||
|
<div v-for="model in aiModels" :key="model.id"
|
||||||
|
class="glass-panel p-8 relative overflow-hidden cursor-pointer transition-all duration-300 flex flex-col h-60 rounded-2xl border border-white/5 hover:-translate-y-2 hover:border-white/20"
|
||||||
|
@click="selectModel(model.id)" :style="{ '--accent-color': model.color }">
|
||||||
|
<div class="flex justify-between items-start mb-6">
|
||||||
|
<span class="text-5xl">{{ model.icon }}</span>
|
||||||
|
<span
|
||||||
|
class="text-xs px-3 py-1 bg-white/10 rounded-full text-slate-400 font-bold tracking-wider uppercase">
|
||||||
|
{{ model.provider }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-2xl font-bold mb-2">{{ model.name }}</h3>
|
||||||
|
<p class="text-slate-400 text-sm leading-relaxed mb-auto">
|
||||||
|
{{ model.description }}
|
||||||
|
</p>
|
||||||
|
<div class="mt-6">
|
||||||
|
<button
|
||||||
|
class="bg-transparent border-none font-bold p-0 cursor-pointer transition-all duration-300 flex items-center gap-2 group"
|
||||||
|
:style="{ color: model.color }">
|
||||||
|
Initialize Workspace <i
|
||||||
|
class="pi pi-arrow-right text-xs transition-transform group-hover:translate-x-1"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- Glow Effect -->
|
||||||
|
<div class="absolute top-0 right-0 w-38 h-38 opacity-10 transition-opacity duration-300 pointer-events-none blur-3xl"
|
||||||
|
:style="{ background: `radial-gradient(circle, ${model.color} 0%, transparent 70%)` }"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.model-nav-item:hover {
|
||||||
|
box-shadow: 0 0 10px var(--model-color);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
98
src/views/LoginView.vue
Normal file
98
src/views/LoginView.vue
Normal file
@@ -0,0 +1,98 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import Button from 'primevue/button'
|
||||||
|
import InputText from 'primevue/inputtext'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const code = ref('')
|
||||||
|
const error = ref('')
|
||||||
|
const loading = ref(false)
|
||||||
|
|
||||||
|
const handleLogin = () => {
|
||||||
|
if (!code.value.trim()) {
|
||||||
|
error.value = 'Please enter your access code'
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
loading.value = true
|
||||||
|
// Simulate a brief delay for feel
|
||||||
|
if (code.value == 'NE_LEZ_SUDA_SUK') {
|
||||||
|
localStorage.setItem('auth_code', code.value.trim())
|
||||||
|
router.push('/')
|
||||||
|
} else {
|
||||||
|
error.value = 'Pshel nah'
|
||||||
|
}
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="h-screen w-full flex items-center justify-center bg-slate-950 overflow-hidden relative">
|
||||||
|
<!-- Animated Background Blur -->
|
||||||
|
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-violet-600/20 blur-[120px] rounded-full animate-pulse"></div>
|
||||||
|
<div class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-cyan-600/20 blur-[120px] rounded-full animate-pulse"
|
||||||
|
style="animation-delay: 1s;"></div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="glass-panel p-10 rounded-3xl border border-white/10 bg-white/5 backdrop-blur-xl w-full max-w-md z-10 flex flex-col items-center gap-8 shadow-2xl">
|
||||||
|
<div class="text-center">
|
||||||
|
<div
|
||||||
|
class="w-16 h-16 bg-gradient-to-tr from-violet-600 to-cyan-500 rounded-2xl flex items-center justify-center text-3xl mb-6 mx-auto shadow-lg shadow-violet-500/20">
|
||||||
|
✨
|
||||||
|
</div>
|
||||||
|
<h1 class="text-3xl font-bold text-white mb-2 tracking-tight">Access Gate</h1>
|
||||||
|
<p class="text-slate-400 text-sm">Please enter your authorized access code</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-full flex flex-col gap-4">
|
||||||
|
<div class="flex flex-col gap-1.5">
|
||||||
|
<label class="text-slate-400 text-[10px] font-bold uppercase tracking-widest ml-1">Secure
|
||||||
|
Code</label>
|
||||||
|
<div class="relative">
|
||||||
|
<InputText v-model="code" type="password" placeholder="••••••••"
|
||||||
|
class="w-full !bg-slate-900/50 !border-white/10 !text-white !p-4 !rounded-xl focus:!border-violet-500 !transition-all"
|
||||||
|
@keyup.enter="handleLogin" />
|
||||||
|
<i class="pi pi-lock absolute right-4 top-1/2 -translate-y-1/2 text-slate-500"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="error" class="text-red-400 text-xs ml-1 flex items-center gap-1.5 animate-bounce">
|
||||||
|
<i class="pi pi-exclamation-circle"></i>
|
||||||
|
{{ error }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button label="Initialize Session" icon="pi pi-bolt" :loading="loading" @click="handleLogin"
|
||||||
|
class="w-full !py-4 !rounded-xl !bg-gradient-to-r !from-violet-600 !to-cyan-500 !border-none !font-bold !text-lg !shadow-xl !shadow-violet-900/20 hover:scale-[1.02] active:scale-[0.98] transition-all" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pt-4 border-t border-white/5 w-full text-center">
|
||||||
|
<p class="text-slate-600 text-[10px] uppercase font-bold tracking-widest">Authorized Personnel Only</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.glass-panel {
|
||||||
|
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
transform: scale(1.1);
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-pulse {
|
||||||
|
animation: pulse 8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
215
src/views/WorkspaceView.vue
Normal file
215
src/views/WorkspaceView.vue
Normal file
@@ -0,0 +1,215 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref, onMounted, computed, nextTick } from 'vue'
|
||||||
|
import { useRoute, useRouter } from 'vue-router'
|
||||||
|
import { aiService } from '../services/aiService'
|
||||||
|
import Button from 'primevue/button'
|
||||||
|
import Textarea from 'primevue/textarea'
|
||||||
|
|
||||||
|
const route = useRoute()
|
||||||
|
const router = useRouter()
|
||||||
|
const modelId = route.params.id
|
||||||
|
|
||||||
|
// Mock data for models - in a real app this might come from a store or config
|
||||||
|
const models = {
|
||||||
|
'chatgpt': { name: 'ChatGPT', provider: 'OpenAI', icon: '🤖', color: '#10a37f' },
|
||||||
|
'gemini': { name: 'Gemini', provider: 'Google', icon: '✨', color: '#4285f4' },
|
||||||
|
'nana-banana': { name: 'Nana Banana', provider: 'Custom', icon: '🍌', color: '#eab308' },
|
||||||
|
'kling': { name: 'Kling', provider: 'Kling AI', icon: '🎥', color: '#ef4444' }
|
||||||
|
}
|
||||||
|
|
||||||
|
const currentModel = computed(() => models[modelId] || { name: 'Unknown', color: '#888' })
|
||||||
|
|
||||||
|
const messages = ref([
|
||||||
|
{ id: 1, role: 'assistant', content: `Hello! I'm ${currentModel.value.name}. How can I help you today?`, timestamp: new Date() }
|
||||||
|
])
|
||||||
|
|
||||||
|
const userInput = ref('')
|
||||||
|
const isTyping = ref(false)
|
||||||
|
const chatContainer = ref(null)
|
||||||
|
|
||||||
|
const scrollToBottom = async () => {
|
||||||
|
await nextTick()
|
||||||
|
if (chatContainer.value) {
|
||||||
|
chatContainer.value.scrollTop = chatContainer.value.scrollHeight
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const sendMessage = async () => {
|
||||||
|
if (!userInput.value.trim()) return
|
||||||
|
|
||||||
|
// Add user message
|
||||||
|
const userMsg = {
|
||||||
|
id: Date.now(),
|
||||||
|
role: 'user',
|
||||||
|
content: userInput.value,
|
||||||
|
timestamp: new Date()
|
||||||
|
}
|
||||||
|
messages.value.push(userMsg)
|
||||||
|
|
||||||
|
const msgContent = userInput.value
|
||||||
|
userInput.value = ''
|
||||||
|
scrollToBottom()
|
||||||
|
|
||||||
|
// Simulate API call/Typing
|
||||||
|
isTyping.value = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await aiService.sendMessage(modelId, msgContent, messages.value)
|
||||||
|
messages.value.push(response)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to get response:', error)
|
||||||
|
messages.value.push({
|
||||||
|
id: Date.now(),
|
||||||
|
role: 'system',
|
||||||
|
content: 'Error: Could not connect to AI service.',
|
||||||
|
timestamp: new Date()
|
||||||
|
})
|
||||||
|
} finally {
|
||||||
|
isTyping.value = false
|
||||||
|
scrollToBottom()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const goBack = () => {
|
||||||
|
router.push('/')
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="flex h-screen bg-slate-900 text-slate-50 overflow-hidden">
|
||||||
|
<!-- Sidebar -->
|
||||||
|
<aside class="glass-panel w-70 m-4 flex flex-col rounded-2xl overflow-hidden">
|
||||||
|
<div class="p-6 border-b border-white/5 flex items-center gap-4">
|
||||||
|
<button @click="goBack"
|
||||||
|
class="bg-white/10 border-none text-slate-50 w-8 h-8 rounded-full cursor-pointer flex items-center justify-center transition-all duration-300 hover:bg-white/20"
|
||||||
|
title="Back to Dashboard">
|
||||||
|
←
|
||||||
|
</button>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-10 h-10 rounded-xl flex items-center justify-center text-xl"
|
||||||
|
:style="{ background: currentModel.color }">
|
||||||
|
{{ currentModel.icon }}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 class="text-base m-0">{{ currentModel.name }}</h2>
|
||||||
|
<span class="text-xs text-green-400 flex items-center gap-1">
|
||||||
|
<span class="w-1.5 h-1.5 bg-green-400 rounded-full"></span>
|
||||||
|
Online
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex-1 p-6 overflow-y-auto">
|
||||||
|
<div class="text-xs uppercase tracking-wider text-slate-400 mb-4">History</div>
|
||||||
|
<div class="space-y-1">
|
||||||
|
<div
|
||||||
|
class="flex items-center gap-3 px-4 py-3 rounded-lg cursor-pointer transition-all duration-300 bg-white/10 text-slate-50">
|
||||||
|
<span>💬</span>
|
||||||
|
<span class="text-sm">New Conversation</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="flex items-center gap-3 px-4 py-3 rounded-lg cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/5 hover:text-slate-50">
|
||||||
|
<span>📅</span>
|
||||||
|
<span class="text-sm">Previous Session</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 border-t border-white/5">
|
||||||
|
<button
|
||||||
|
class="w-full bg-transparent border-none text-slate-400 px-3 py-3 cursor-pointer flex items-center gap-3 transition-all duration-300 hover:text-slate-50">
|
||||||
|
<span>⚙️</span>
|
||||||
|
<span>Settings</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- Main Chat Area -->
|
||||||
|
<main class="flex-1 flex flex-col relative mr-4 my-4">
|
||||||
|
<div ref="chatContainer" class="flex-1 overflow-y-auto p-8 flex flex-col gap-6 scroll-smooth">
|
||||||
|
<div v-for="msg in messages" :key="msg.id"
|
||||||
|
:class="['flex gap-4 max-w-4/5', msg.role === 'user' ? 'ml-auto flex-row-reverse' : '']">
|
||||||
|
<div v-if="msg.role === 'assistant'"
|
||||||
|
class="w-9 h-9 rounded-full flex items-center justify-center flex-shrink-0 text-base"
|
||||||
|
:style="{ background: currentModel.color }">
|
||||||
|
{{ currentModel.icon }}
|
||||||
|
</div>
|
||||||
|
<div :class="[
|
||||||
|
'px-6 py-4 rounded-xl relative',
|
||||||
|
msg.role === 'user'
|
||||||
|
? 'bg-violet-600 rounded-tr-sm border-none'
|
||||||
|
: 'glass-panel rounded-tl-sm'
|
||||||
|
]">
|
||||||
|
<p class="m-0 leading-relaxed">{{ msg.content }}</p>
|
||||||
|
<span class="text-xs opacity-50 mt-2 block">
|
||||||
|
{{ msg.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="isTyping" class="flex gap-4 max-w-4/5">
|
||||||
|
<div class="w-9 h-9 rounded-full flex items-center justify-center flex-shrink-0 text-base"
|
||||||
|
:style="{ background: currentModel.color }">
|
||||||
|
{{ currentModel.icon }}
|
||||||
|
</div>
|
||||||
|
<div class="glass-panel px-5 py-5 flex gap-1 rounded-tl-sm rounded-xl">
|
||||||
|
<span class="w-1.5 h-1.5 bg-white/50 rounded-full animate-bounce"
|
||||||
|
style="animation-delay: -0.32s;"></span>
|
||||||
|
<span class="w-1.5 h-1.5 bg-white/50 rounded-full animate-bounce"
|
||||||
|
style="animation-delay: -0.16s;"></span>
|
||||||
|
<span class="w-1.5 h-1.5 bg-white/50 rounded-full animate-bounce"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="glass-panel mx-8 mb-8 p-2 rounded-2xl">
|
||||||
|
<div class="flex items-end gap-2 bg-black/20 rounded-xl p-2">
|
||||||
|
<Textarea v-model="userInput" @keydown.enter.prevent="sendMessage" placeholder="Type a message..."
|
||||||
|
rows="1" auto-resize
|
||||||
|
class="flex-1 bg-transparent border-none p-3 text-slate-50 resize-none max-h-30 focus:outline-none focus:shadow-none" />
|
||||||
|
<Button @click="sendMessage" :disabled="!userInput.trim()"
|
||||||
|
class="bg-violet-600 text-white border-none w-10 h-10 rounded-lg flex items-center justify-center cursor-pointer transition-all duration-300 hover:bg-violet-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
icon="pi pi-send" text />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* Custom scrollbar */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
@apply bg-white/10 rounded;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
@apply bg-white/20;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Typing animation */
|
||||||
|
@keyframes bounce {
|
||||||
|
|
||||||
|
0%,
|
||||||
|
80%,
|
||||||
|
100% {
|
||||||
|
transform: scale(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
40% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-bounce {
|
||||||
|
animation: bounce 1.4s infinite ease-in-out both;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
19
tailwind.config.js
Normal file
19
tailwind.config.js
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
// tailwind.config.js
|
||||||
|
export default {
|
||||||
|
content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
|
||||||
|
safelist: [
|
||||||
|
"!bg-slate-900/50",
|
||||||
|
"!bg-transparent",
|
||||||
|
"!bg-white/10",
|
||||||
|
"!bg-violet-600",
|
||||||
|
"!text-white",
|
||||||
|
"!text-slate-500",
|
||||||
|
"!text-slate-300",
|
||||||
|
"!text-slate-600",
|
||||||
|
"!border",
|
||||||
|
"!border-white/10",
|
||||||
|
"!border-none",
|
||||||
|
"!rounded-xl",
|
||||||
|
"!rounded-lg",
|
||||||
|
],
|
||||||
|
}
|
||||||
62
vite.config.js
Normal file
62
vite.config.js
Normal file
@@ -0,0 +1,62 @@
|
|||||||
|
import { fileURLToPath, URL } from 'node:url'
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
import vueDevTools from 'vite-plugin-vue-devtools'
|
||||||
|
import { VitePWA } from 'vite-plugin-pwa'
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [
|
||||||
|
vue(),
|
||||||
|
vueDevTools(),
|
||||||
|
VitePWA({
|
||||||
|
registerType: 'autoUpdate',
|
||||||
|
workbox: {
|
||||||
|
runtimeCaching: [
|
||||||
|
{
|
||||||
|
urlPattern: ({ request }) => request.destination === 'image',
|
||||||
|
handler: 'CacheFirst',
|
||||||
|
options: {
|
||||||
|
cacheName: 'images-cache',
|
||||||
|
expiration: {
|
||||||
|
maxEntries: 100,
|
||||||
|
maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
urlPattern: /^https:\/\/.*\/api\/v1\/.*/, // Cache API responses if needed, but focus on images
|
||||||
|
handler: 'NetworkFirst',
|
||||||
|
options: {
|
||||||
|
cacheName: 'api-cache',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
manifest: {
|
||||||
|
name: 'AI Workspace',
|
||||||
|
short_name: 'AIWS',
|
||||||
|
theme_color: '#0f172a',
|
||||||
|
icons: [
|
||||||
|
{
|
||||||
|
src: 'pwa-192x192.png',
|
||||||
|
sizes: '192x192',
|
||||||
|
type: 'image/png'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
src: 'pwa-512x512.png',
|
||||||
|
sizes: '512x512',
|
||||||
|
type: 'image/png'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
Reference in New Issue
Block a user