mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-14 21:41:09 +02:00
4b08c41547
Integrate new transcriber application for AI-powered YouTube video
transcription with full monorepo structure and Groq Whisper API support.
## App Structure
- apps/transcriber/apps/backend - NestJS API server (port 3006)
- apps/transcriber/apps/web - SvelteKit web application
- apps/transcriber/apps/landing - Astro marketing/content site
- apps/transcriber/apps/mobile - Expo React Native app
- apps/transcriber/packages/shared-types - Shared TypeScript types
## Backend Features
- YouTube video download via yt-dlp (child_process)
- Ultra-fast transcription via Groq Whisper API (~300x realtime)
- Fallback to local Whisper for offline use
- Job queue with background processing
- Real-time progress updates via WebSocket (Socket.io)
- Playlist management for batch processing
- Health check endpoints
## API Endpoints
- POST /transcription - Start transcription job
- GET /transcription - List all jobs
- GET /transcription/:id - Get job status
- DELETE /transcription/:id - Cancel job
- GET /transcription/stats - Statistics
- GET /whisper/models - Available models
- GET/POST/DELETE /playlist - Playlist management
- GET /health - Health checks
## Whisper Models
- Groq: whisper-large-v3-turbo (fast, $0.04/hr)
- Groq: whisper-large-v3 (accurate, $0.111/hr)
- Local: tiny, base, small, medium, large
## Monorepo Integration
- Added to pnpm workspace via apps/*/apps/* pattern
- Root scripts: transcriber:dev, dev:transcriber:*
- Package naming: @transcriber/{backend,web,landing,mobile}
- Turbo tasks: dev, build, lint, type-check
- CLAUDE.md documentation
## Technology Stack
- Backend: NestJS 10, TypeScript, Socket.io
- Web: SvelteKit 2, Svelte 5, Tailwind CSS
- Landing: Astro 4, Solid.js, Tailwind CSS
- Mobile: Expo 52, React Native, NativeWind, Zustand
- Transcription: Groq Whisper API (OpenAI-compatible)
## Migration from Python
- Original Python/FastAPI code preserved in legacy/
- Full rewrite to TypeScript/NestJS
- Same functionality with improved architecture
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
164 lines
No EOL
6 KiB
CSS
164 lines
No EOL
6 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
/* Ocean Theme - Light Mode */
|
|
[data-theme="ocean"] {
|
|
--color-primary: 0 102 204; /* #0066cc */
|
|
--color-primary-hover: 0 82 163; /* #0052a3 */
|
|
--color-secondary: 0 168 232; /* #00a8e8 */
|
|
--color-accent: 0 199 255; /* #00c7ff */
|
|
--color-background: 255 255 255; /* #ffffff */
|
|
--color-surface: 240 248 255; /* #f0f8ff - Alice Blue */
|
|
--color-surface-hover: 225 240 255; /* #e1f0ff */
|
|
--color-text: 26 26 26; /* #1a1a1a */
|
|
--color-text-muted: 102 102 102; /* #666666 */
|
|
--color-border: 200 220 240; /* #c8dcf0 */
|
|
--color-shadow: 0 51 102; /* #003366 */
|
|
}
|
|
|
|
/* Ocean Theme - Dark Mode */
|
|
[data-theme="ocean"].dark {
|
|
--color-primary: 0 168 232; /* #00a8e8 */
|
|
--color-primary-hover: 0 199 255; /* #00c7ff */
|
|
--color-secondary: 0 102 204; /* #0066cc */
|
|
--color-accent: 100 181 246; /* #64b5f6 */
|
|
--color-background: 10 25 41; /* #0a1929 */
|
|
--color-surface: 0 30 60; /* #001e3c */
|
|
--color-surface-hover: 0 40 80; /* #002850 */
|
|
--color-text: 224 224 224; /* #e0e0e0 */
|
|
--color-text-muted: 156 163 175; /* #9ca3af */
|
|
--color-border: 30 58 86; /* #1e3a56 */
|
|
--color-shadow: 0 0 0; /* #000000 */
|
|
}
|
|
|
|
/* Forest Theme - Light Mode */
|
|
[data-theme="forest"] {
|
|
--color-primary: 34 139 34; /* #228b22 - Forest Green */
|
|
--color-primary-hover: 25 111 25; /* #196f19 */
|
|
--color-secondary: 107 142 35; /* #6b8e23 - Olive Drab */
|
|
--color-accent: 154 205 50; /* #9acd32 - Yellow Green */
|
|
--color-background: 255 255 255; /* #ffffff */
|
|
--color-surface: 245 255 240; /* #f5fff0 - Honeydew */
|
|
--color-surface-hover: 235 248 230; /* #ebf8e6 */
|
|
--color-text: 26 26 26; /* #1a1a1a */
|
|
--color-text-muted: 85 107 47; /* #556b2f - Dark Olive Green */
|
|
--color-border: 188 220 188; /* #bcdcbc */
|
|
--color-shadow: 34 68 34; /* #224422 */
|
|
}
|
|
|
|
/* Forest Theme - Dark Mode */
|
|
[data-theme="forest"].dark {
|
|
--color-primary: 124 179 66; /* #7cb342 - Light Green */
|
|
--color-primary-hover: 139 195 74; /* #8bc34a */
|
|
--color-secondary: 85 139 47; /* #558b2f - Dark Green */
|
|
--color-accent: 178 223 138; /* #b2df8a */
|
|
--color-background: 18 28 18; /* #121c12 */
|
|
--color-surface: 28 48 28; /* #1c301c */
|
|
--color-surface-hover: 38 58 38; /* #263a26 */
|
|
--color-text: 224 224 224; /* #e0e0e0 */
|
|
--color-text-muted: 156 175 156; /* #9caf9c */
|
|
--color-border: 56 87 35; /* #385723 */
|
|
--color-shadow: 0 0 0; /* #000000 */
|
|
}
|
|
|
|
/* Sunset Theme - Light Mode */
|
|
[data-theme="sunset"] {
|
|
--color-primary: 255 87 34; /* #ff5722 - Deep Orange */
|
|
--color-primary-hover: 230 74 25; /* #e64a19 */
|
|
--color-secondary: 255 167 38; /* #ffa726 - Orange */
|
|
--color-accent: 255 193 7; /* #ffc107 - Amber */
|
|
--color-background: 255 255 255; /* #ffffff */
|
|
--color-surface: 255 248 241; /* #fff8f1 */
|
|
--color-surface-hover: 255 243 229; /* #fff3e5 */
|
|
--color-text: 26 26 26; /* #1a1a1a */
|
|
--color-text-muted: 121 85 72; /* #795548 - Brown */
|
|
--color-border: 255 224 203; /* #ffe0cb */
|
|
--color-shadow: 139 69 19; /* #8b4513 */
|
|
}
|
|
|
|
/* Sunset Theme - Dark Mode */
|
|
[data-theme="sunset"].dark {
|
|
--color-primary: 255 138 101; /* #ff8a65 - Light Deep Orange */
|
|
--color-primary-hover: 255 112 67; /* #ff7043 */
|
|
--color-secondary: 255 183 77; /* #ffb74d - Light Orange */
|
|
--color-accent: 255 213 79; /* #ffd54f - Light Amber */
|
|
--color-background: 33 18 18; /* #211212 */
|
|
--color-surface: 56 28 28; /* #381c1c */
|
|
--color-surface-hover: 76 38 38; /* #4c2626 */
|
|
--color-text: 255 235 225; /* #ffebe1 */
|
|
--color-text-muted: 188 156 145; /* #bc9c91 */
|
|
--color-border: 97 48 35; /* #613023 */
|
|
--color-shadow: 0 0 0; /* #000000 */
|
|
}
|
|
|
|
/* Monochrome Theme - Light Mode */
|
|
[data-theme="monochrome"] {
|
|
--color-primary: 33 33 33; /* #212121 - Gray 900 */
|
|
--color-primary-hover: 0 0 0; /* #000000 */
|
|
--color-secondary: 97 97 97; /* #616161 - Gray 700 */
|
|
--color-accent: 66 66 66; /* #424242 - Gray 800 */
|
|
--color-background: 255 255 255; /* #ffffff */
|
|
--color-surface: 250 250 250; /* #fafafa - Gray 50 */
|
|
--color-surface-hover: 245 245 245; /* #f5f5f5 - Gray 100 */
|
|
--color-text: 33 33 33; /* #212121 */
|
|
--color-text-muted: 117 117 117; /* #757575 - Gray 600 */
|
|
--color-border: 224 224 224; /* #e0e0e0 - Gray 300 */
|
|
--color-shadow: 66 66 66; /* #424242 */
|
|
}
|
|
|
|
/* Monochrome Theme - Dark Mode */
|
|
[data-theme="monochrome"].dark {
|
|
--color-primary: 250 250 250; /* #fafafa - Gray 50 */
|
|
--color-primary-hover: 255 255 255; /* #ffffff */
|
|
--color-secondary: 189 189 189; /* #bdbdbd - Gray 400 */
|
|
--color-accent: 224 224 224; /* #e0e0e0 - Gray 300 */
|
|
--color-background: 18 18 18; /* #121212 */
|
|
--color-surface: 33 33 33; /* #212121 - Gray 900 */
|
|
--color-surface-hover: 48 48 48; /* #303030 */
|
|
--color-text: 250 250 250; /* #fafafa */
|
|
--color-text-muted: 158 158 158; /* #9e9e9e - Gray 500 */
|
|
--color-border: 66 66 66; /* #424242 - Gray 800 */
|
|
--color-shadow: 0 0 0; /* #000000 */
|
|
}
|
|
|
|
/* Default to Ocean Light if no theme is set */
|
|
:root {
|
|
--color-primary: 0 102 204;
|
|
--color-primary-hover: 0 82 163;
|
|
--color-secondary: 0 168 232;
|
|
--color-accent: 0 199 255;
|
|
--color-background: 255 255 255;
|
|
--color-surface: 240 248 255;
|
|
--color-surface-hover: 225 240 255;
|
|
--color-text: 26 26 26;
|
|
--color-text-muted: 102 102 102;
|
|
--color-border: 200 220 240;
|
|
--color-shadow: 0 51 102;
|
|
}
|
|
|
|
/* Smooth transitions for theme changes */
|
|
* {
|
|
@apply transition-colors duration-200;
|
|
}
|
|
}
|
|
|
|
/* Custom utility classes for theme colors */
|
|
@layer utilities {
|
|
.bg-theme-gradient {
|
|
@apply bg-gradient-to-br from-theme-primary to-theme-secondary;
|
|
}
|
|
|
|
.text-gradient {
|
|
@apply bg-gradient-to-r from-theme-primary to-theme-accent bg-clip-text text-transparent;
|
|
}
|
|
|
|
.glass {
|
|
@apply bg-theme-surface/80 backdrop-blur-md border border-theme-border;
|
|
}
|
|
|
|
.glass-dark {
|
|
@apply bg-theme-surface/60 backdrop-blur-lg border border-theme-border;
|
|
}
|
|
} |