Spaces:
Running
Running
| <html lang="vi"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>{% block title %}Pum's Toolkit{% endblock %}</title> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css"> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='theme.css') }}"> | |
| <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎬</text></svg>"> | |
| {% block styles %}{% endblock %} | |
| </head> | |
| <body> | |
| <div class="sidebar"> | |
| <div class="brand"> | |
| <img src="{{ url_for('static', filename='logo.png') }}" alt="Pum's Toolkit Logo"> | |
| <span class="brand-name">PUM'S TOOLKIT</span> | |
| </div> | |
| <nav class="nav flex-column"> | |
| <!-- 🏠 TRANG CHỦ --> | |
| <a class="nav-link {% if request.path == '/' %}active{% endif %}" href="/"> | |
| <i class="fas fa-th-large"></i> Dashboard | |
| </a> | |
| <!-- 🎙️ ÂM THANH & LỒNG TIẾNG --> | |
| <div class="nav-section-header" data-bs-toggle="collapse" data-bs-target="#audio-group" aria-expanded="true"> | |
| <span>ÂM THANH & LỒNG TIẾNG</span> | |
| <i class="fas fa-chevron-down nav-chevron"></i> | |
| </div> | |
| <div class="collapse show nav-sub-group" id="audio-group"> | |
| <a class="nav-link nav-link-collapsible {% if request.path.startswith('/tts') %}active{% endif %}" | |
| href="/tts/vieneu" | |
| data-bs-toggle="collapse" | |
| data-bs-target="#tts-sub" | |
| aria-expanded="{{ 'true' if request.path.startswith('/tts') else 'false' }}" | |
| onclick="return handleNavCollapse(event, this)"> | |
| <span><i class="fas fa-microphone-alt"></i> Text to Speech</span> | |
| <i class="fas fa-chevron-down nav-chevron {% if not request.path.startswith('/tts') %}collapsed{% endif %}"></i> | |
| </a> | |
| <div class="collapse nav-sub {% if request.path.startswith('/tts') %}show{% endif %}" id="tts-sub"> | |
| <a class="nav-link nav-link-sub {% if request.path == '/tts/vieneu' %}active{% endif %}" href="/tts/vieneu"> | |
| <i class="fas fa-dragon"></i> VieNeu-TTS | |
| </a> | |
| <a class="nav-link nav-link-sub {% if request.path == '/tts/gtts' %}active{% endif %}" href="/tts/gtts"> | |
| <i class="fab fa-google"></i> Google TTS | |
| </a> | |
| <a class="nav-link nav-link-sub {% if request.path == '/tts/edge' %}active{% endif %}" href="/tts/edge"> | |
| <i class="fab fa-microsoft"></i> Edge TTS | |
| </a> | |
| </div> | |
| <a class="nav-link {% if request.path.startswith('/audio-story-studio') %}active{% endif %}" href="/audio-story-studio"> | |
| <i class="fas fa-podcast"></i> AI Audio Story Studio | |
| </a> | |
| <a class="nav-link {% if request.path.startswith('/podcast-studio') %}active{% endif %}" href="/podcast-studio"> | |
| <i class="fas fa-microphone"></i> AI Podcast Studio | |
| </a> | |
| </div> | |
| <!-- 🎬 HÌNH ẢNH & VIDEO AI --> | |
| <div class="nav-section-header" data-bs-toggle="collapse" data-bs-target="#video-group" aria-expanded="true"> | |
| <span>HÌNH ẢNH & VIDEO AI</span> | |
| <i class="fas fa-chevron-down nav-chevron"></i> | |
| </div> | |
| <div class="collapse show nav-sub-group" id="video-group"> | |
| <a class="nav-link nav-link-collapsible {% if request.path.startswith('/image-studio') %}active{% endif %}" | |
| href="/image-studio/remove-bg" | |
| data-bs-toggle="collapse" | |
| data-bs-target="#image-sub" | |
| aria-expanded="{{ 'true' if request.path.startswith('/image-studio') else 'false' }}" | |
| onclick="return handleNavCollapse(event, this)"> | |
| <span><i class="fas fa-image"></i> Image Studio</span> | |
| <i class="fas fa-chevron-down nav-chevron {% if not request.path.startswith('/image-studio') %}collapsed{% endif %}"></i> | |
| </a> | |
| <div class="collapse nav-sub {% if request.path.startswith('/image-studio') %}show{% endif %}" id="image-sub"> | |
| <a class="nav-link nav-link-sub {% if request.path == '/image-studio/remove-bg' %}active{% endif %}" href="/image-studio/remove-bg"> | |
| <i class="fas fa-cut"></i> Xóa nền | |
| </a> | |
| <a class="nav-link nav-link-sub {% if request.path == '/image-studio/upscale' %}active{% endif %}" href="/image-studio/upscale"> | |
| <i class="fas fa-expand-arrows-alt"></i> Nâng cấp ảnh | |
| </a> | |
| </div> | |
| <a class="nav-link {% if request.path.startswith('/comic-creator') %}active{% endif %}" href="/comic-creator"> | |
| <i class="fas fa-book-open"></i> AI Comic Creator | |
| </a> | |
| <a class="nav-link {% if request.path.startswith('/video-ai') %}active{% endif %}" href="/video-ai"> | |
| <i class="fas fa-video"></i> Video AI | |
| </a> | |
| <a class="nav-link {% if request.path.startswith('/shorts-generator') %}active{% endif %}" href="/shorts-generator"> | |
| <i class="fas fa-mobile-alt"></i> AI Shorts Generator | |
| </a> | |
| <a class="nav-link {% if request.path.startswith('/video-chapters') %}active{% endif %}" href="/video-chapters"> | |
| <i class="fas fa-list-ol"></i> AI Video Chapters | |
| </a> | |
| <a class="nav-link {% if request.path.startswith('/thumbnail-designer') %}active{% endif %}" href="/thumbnail-designer"> | |
| <i class="fas fa-palette"></i> AI Thumbnail Designer | |
| </a> | |
| <a class="nav-link {% if request.path.startswith('/batch-generator') %}active{% endif %}" href="/batch-generator"> | |
| <i class="fas fa-cubes"></i> AI Batch Generator | |
| </a> | |
| </div> | |
| <!-- ✍️ TRỢ LÝ NỘI DUNG --> | |
| <div class="nav-section-header" data-bs-toggle="collapse" data-bs-target="#content-group" aria-expanded="true"> | |
| <span>TRỢ LÝ NỘI DUNG</span> | |
| <i class="fas fa-chevron-down nav-chevron"></i> | |
| </div> | |
| <div class="collapse show nav-sub-group" id="content-group"> | |
| <a class="nav-link nav-link-collapsible {% if request.path.startswith('/prompt-generator') %}active{% endif %}" | |
| href="/prompt-generator/code" | |
| data-bs-toggle="collapse" | |
| data-bs-target="#prompt-sub" | |
| aria-expanded="{{ 'true' if request.path.startswith('/prompt-generator') else 'false' }}" | |
| onclick="return handleNavCollapse(event, this)"> | |
| <span><i class="fas fa-magic"></i> AI Prompt Studio</span> | |
| <i class="fas fa-chevron-down nav-chevron {% if not request.path.startswith('/prompt-generator') %}collapsed{% endif %}"></i> | |
| </a> | |
| <div class="collapse nav-sub {% if request.path.startswith('/prompt-generator') %}show{% endif %}" id="prompt-sub"> | |
| <a class="nav-link nav-link-sub {% if request.path == '/prompt-generator/code' %}active{% endif %}" href="/prompt-generator/code"> | |
| <i class="fas fa-code"></i> Lập trình (Code) | |
| </a> | |
| <a class="nav-link nav-link-sub {% if request.path == '/prompt-generator/video' %}active{% endif %}" href="/prompt-generator/video"> | |
| <i class="fas fa-video"></i> Ảnh / Video AI | |
| </a> | |
| <a class="nav-link nav-link-sub {% if request.path == '/prompt-generator/music' %}active{% endif %}" href="/prompt-generator/music"> | |
| <i class="fas fa-music"></i> Nhạc (Suno/Udio) | |
| </a> | |
| <a class="nav-link nav-link-sub {% if request.path == '/prompt-generator/story' %}active{% endif %}" href="/prompt-generator/story"> | |
| <i class="fas fa-book"></i> Kịch bản truyện | |
| </a> | |
| <a class="nav-link nav-link-sub {% if request.path == '/prompt-generator/video-script' %}active{% endif %}" href="/prompt-generator/video-script"> | |
| <i class="fas fa-film"></i> Kịch bản Video | |
| </a> | |
| <a class="nav-link nav-link-sub {% if request.path == '/prompt-generator/audio-story' %}active{% endif %}" href="/prompt-generator/audio-story"> | |
| <i class="fas fa-headphones"></i> Truyện Audio | |
| </a> | |
| <a class="nav-link nav-link-sub {% if request.path == '/prompt-generator/marketing' %}active{% endif %}" href="/prompt-generator/marketing"> | |
| <i class="fas fa-ad"></i> Marketing / Content | |
| </a> | |
| <a class="nav-link nav-link-sub {% if request.path == '/prompt-generator/education' %}active{% endif %}" href="/prompt-generator/education"> | |
| <i class="fas fa-graduation-cap"></i> Học tập / Ngoại ngữ | |
| </a> | |
| <a class="nav-link nav-link-sub {% if request.path == '/prompt-generator/data' %}active{% endif %}" href="/prompt-generator/data"> | |
| <i class="fas fa-chart-line"></i> Phân tích dữ liệu | |
| </a> | |
| <a class="nav-link nav-link-sub {% if request.path == '/prompt-generator/office' %}active{% endif %}" href="/prompt-generator/office"> | |
| <i class="fas fa-briefcase"></i> Trợ lý văn phòng | |
| </a> | |
| <a class="nav-link nav-link-sub {% if request.path == '/prompt-generator/brainstorm' %}active{% endif %}" href="/prompt-generator/brainstorm"> | |
| <i class="fas fa-lightbulb"></i> Lên ý tưởng | |
| </a> | |
| <a class="nav-link nav-link-sub {% if request.path == '/prompt-generator/enhancer' %}active{% endif %}" href="/prompt-generator/enhancer"> | |
| <i class="fas fa-wand-magic-sparkles"></i> Tối ưu Prompt thô | |
| </a> | |
| </div> | |
| <a class="nav-link {% if request.path.startswith('/omnichannel-writer') %}active{% endif %}" href="/omnichannel-writer"> | |
| <i class="fas fa-paper-plane"></i> AI Omnichannel Writer | |
| </a> | |
| <a class="nav-link {% if request.path.startswith('/script-hook-generator') %}active{% endif %}" href="/script-hook-generator"> | |
| <i class="fas fa-cut"></i> AI Script Optimizer | |
| </a> | |
| <a class="nav-link {% if request.path.startswith('/content-planner') %}active{% endif %}" href="/content-planner"> | |
| <i class="fas fa-calendar-alt"></i> AI Content Planner | |
| </a> | |
| </div> | |
| <!-- 💼 DỊCH THUẬT & TÀI LIỆU --> | |
| <div class="nav-section-header" data-bs-toggle="collapse" data-bs-target="#docs-group" aria-expanded="true"> | |
| <span>DỊCH THUẬT & TÀI LIỆU</span> | |
| <i class="fas fa-chevron-down nav-chevron"></i> | |
| </div> | |
| <div class="collapse show nav-sub-group" id="docs-group"> | |
| <a class="nav-link nav-link-collapsible {% if request.path.startswith('/translator') %}active{% endif %}" | |
| href="/translator/text" | |
| data-bs-toggle="collapse" | |
| data-bs-target="#translator-sub" | |
| aria-expanded="{{ 'true' if request.path.startswith('/translator') else 'false' }}" | |
| onclick="return handleNavCollapse(event, this)"> | |
| <span><i class="fas fa-language"></i> AI Translator</span> | |
| <i class="fas fa-chevron-down nav-chevron {% if not request.path.startswith('/translator') %}collapsed{% endif %}"></i> | |
| </a> | |
| <div class="collapse nav-sub {% if request.path.startswith('/translator') %}show{% endif %}" id="translator-sub"> | |
| <a class="nav-link nav-link-sub {% if request.path == '/translator/text' %}active{% endif %}" href="/translator/text"> | |
| <i class="fas fa-font"></i> Văn bản | |
| </a> | |
| <a class="nav-link nav-link-sub {% if request.path == '/translator/file' %}active{% endif %}" href="/translator/file"> | |
| <i class="fas fa-file-alt"></i> Tài liệu | |
| </a> | |
| <a class="nav-link nav-link-sub {% if request.path == '/translator/image' %}active{% endif %}" href="/translator/image"> | |
| <i class="fas fa-image"></i> Dịch ảnh | |
| </a> | |
| </div> | |
| <a class="nav-link nav-link-collapsible {% if request.path.startswith('/pdf') %}active{% endif %}" | |
| href="/pdf/summarize" | |
| data-bs-toggle="collapse" | |
| data-bs-target="#pdf-sub" | |
| aria-expanded="{{ 'true' if request.path.startswith('/pdf') else 'false' }}" | |
| onclick="return handleNavCollapse(event, this)"> | |
| <span><i class="fas fa-file-pdf"></i> Smart PDF</span> | |
| <i class="fas fa-chevron-down nav-chevron {% if not request.path.startswith('/pdf') %}collapsed{% endif %}"></i> | |
| </a> | |
| <div class="collapse nav-sub {% if request.path.startswith('/pdf') %}show{% endif %}" id="pdf-sub"> | |
| <a class="nav-link nav-link-sub {% if request.path == '/pdf/summarize' %}active{% endif %}" href="/pdf/summarize"> | |
| <i class="fas fa-align-left"></i> Tóm tắt | |
| </a> | |
| <a class="nav-link nav-link-sub {% if request.path == '/pdf/extract' %}active{% endif %}" href="/pdf/extract"> | |
| <i class="fas fa-table"></i> Trích xuất dữ liệu | |
| </a> | |
| </div> | |
| </div> | |
| {% if session.get('role') == 'admin' %} | |
| <!-- ⚙️ QUẢN TRỊ VIÊN --> | |
| <div class="nav-section-header" data-bs-toggle="collapse" data-bs-target="#admin-group" aria-expanded="true"> | |
| <span>QUẢN TRỊ VIÊN</span> | |
| <i class="fas fa-chevron-down nav-chevron"></i> | |
| </div> | |
| <div class="collapse show nav-sub-group" id="admin-group"> | |
| <a class="nav-link {% if request.path.startswith('/admin/users') %}active{% endif %}" href="/admin/users"> | |
| <i class="fas fa-users-cog"></i> Quản lý tài khoản | |
| </a> | |
| </div> | |
| {% endif %} | |
| <!-- 🚪 ĐĂNG XUẤT --> | |
| <a class="nav-link text-danger mt-4 border-top pt-3" href="/logout" onclick="return confirm('Bạn có chắc chắn muốn đăng xuất?')"> | |
| <i class="fas fa-sign-out-alt"></i> Đăng xuất | |
| </a> | |
| </nav> | |
| </div> | |
| <div class="main-content w-100"> | |
| {% block content %}{% endblock %} | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> | |
| <script> | |
| // Nav collapse: click khi đã mở → chỉ toggle, không navigate | |
| // Click khi đang đóng → navigate đến link VÀ mở collapse | |
| function handleNavCollapse(e, el) { | |
| const target = document.querySelector(el.getAttribute('data-bs-target')); | |
| if (target && target.classList.contains('show')) { | |
| // Đang mở → chỉ toggle đóng, không navigate | |
| e.preventDefault(); | |
| } | |
| // Nếu đang đóng → để link navigate bình thường (server sẽ render với show) | |
| return true; | |
| } | |
| // ── Paste ảnh (Ctrl+V) cho tất cả drop zone ────────────── | |
| document.addEventListener('paste', (e) => { | |
| const items = e.clipboardData?.items; | |
| if (!items) return; | |
| for (const item of items) { | |
| if (!item.type.startsWith('image/')) continue; | |
| const file = item.getAsFile(); | |
| if (!file) continue; | |
| // Tìm drop zone đầu tiên trên trang (hoặc drop zone đang được hover) | |
| const dropZone = document.querySelector('.drop-zone, .file-upload-wrapper'); | |
| if (!dropZone) return; | |
| // Tìm input[type=file] trong drop zone | |
| const fileInput = dropZone.querySelector('input[type="file"]'); | |
| if (!fileInput) return; | |
| // Inject file vào input | |
| const dt = new DataTransfer(); | |
| dt.items.add(file); | |
| fileInput.files = dt.files; | |
| // Trigger change event để các handler tự xử lý | |
| fileInput.dispatchEvent(new Event('change', { bubbles: true })); | |
| // Hiệu ứng flash để user biết đã paste | |
| dropZone.style.transition = 'background 0.15s'; | |
| dropZone.style.background = 'var(--color-primary-hover)'; | |
| dropZone.style.borderColor = 'var(--color-primary)'; | |
| setTimeout(() => { | |
| dropZone.style.background = ''; | |
| dropZone.style.borderColor = ''; | |
| }, 600); | |
| e.preventDefault(); | |
| break; | |
| } | |
| }); | |
| // Restore collapsible states from localStorage on load | |
| document.querySelectorAll('.sidebar .collapse').forEach(target => { | |
| const id = target.getAttribute('id'); | |
| const state = localStorage.getItem('nav-group-' + id); | |
| const trigger = document.querySelector(`[data-bs-target="#${id}"]`); | |
| if (state === 'collapsed') { | |
| target.classList.remove('show'); | |
| if (trigger) { | |
| trigger.classList.add('collapsed'); | |
| trigger.setAttribute('aria-expanded', 'false'); | |
| trigger.querySelector('.nav-chevron')?.classList.add('collapsed'); | |
| } | |
| } else if (state === 'expanded') { | |
| target.classList.add('show'); | |
| if (trigger) { | |
| trigger.classList.remove('collapsed'); | |
| trigger.setAttribute('aria-expanded', 'true'); | |
| trigger.querySelector('.nav-chevron')?.classList.remove('collapsed'); | |
| } | |
| } | |
| }); | |
| // Listen to collapse show/hide events to save states to localStorage | |
| document.querySelectorAll('[data-bs-toggle="collapse"]').forEach(el => { | |
| const targetId = el.getAttribute('data-bs-target'); | |
| const target = document.querySelector(targetId); | |
| if (!target) return; | |
| target.addEventListener('show.bs.collapse', () => { | |
| el.classList.remove('collapsed'); | |
| el.setAttribute('aria-expanded', 'true'); | |
| el.querySelector('.nav-chevron')?.classList.remove('collapsed'); | |
| const id = target.getAttribute('id'); | |
| localStorage.setItem('nav-group-' + id, 'expanded'); | |
| }); | |
| target.addEventListener('hide.bs.collapse', () => { | |
| el.classList.add('collapsed'); | |
| el.setAttribute('aria-expanded', 'false'); | |
| el.querySelector('.nav-chevron')?.classList.add('collapsed'); | |
| const id = target.getAttribute('id'); | |
| localStorage.setItem('nav-group-' + id, 'collapsed'); | |
| }); | |
| }); | |
| </script> | |
| <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script> | |
| <script> | |
| $(document).ready(function() { | |
| // Automatically skin all select elements having the .form-select class, except inside modals | |
| $('select.form-select').not('.modal select').each(function() { | |
| $(this).select2({ | |
| width: '100%' | |
| }); | |
| }); | |
| }); | |
| </script> | |
| {% block scripts %}{% endblock %} | |
| </body> | |
| </html> | |