| |
| <!DOCTYPE html> |
| <html lang="fa" dir="rtl"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> |
| <title>استودیو موزیک آلفا (Alpha)</title> |
| <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700;800&display=swap" rel="stylesheet"> |
| <style> |
| :root { |
| --app-font: 'Vazirmatn', sans-serif; |
| --app-bg: #F8F9FC; |
| --panel-bg: #FFFFFF; |
| --panel-border: #EAEFF7; |
| --input-bg: #F6F8FB; |
| --input-border: #E1E7EF; |
| --text-primary: #1A202C; |
| --text-secondary: #626F86; |
| --accent-primary: #4A6CFA; |
| --accent-secondary: #9F7AEA; |
| --accent-glow: rgba(74, 108, 250, 0.2); |
| --success-color: #38A169; |
| --danger-color: #e53e3e; |
| --premium-gold: #FFC107; |
| --premium-gradient: linear-gradient(135deg, #FFC107 0%, #FF9800 100%); |
| --radius-card: 20px; |
| --radius-btn: 14px; |
| } |
| |
| * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } |
| |
| body { |
| font-family: var(--app-font); |
| background-color: var(--app-bg); |
| color: var(--text-primary); |
| margin: 0; |
| padding: 20px 15px; |
| min-height: 100vh; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| } |
| |
| .container { max-width: 650px; width: 100%; z-index: 2; position: relative; } |
| |
| #music-canvas { |
| position: fixed; top: 0; left: 0; width: 100%; height: 400px; |
| z-index: 0; opacity: 0.5; pointer-events: none; |
| mask-image: linear-gradient(to bottom, black, transparent); |
| -webkit-mask-image: linear-gradient(to bottom, black, transparent); |
| } |
| |
| header { text-align: center; margin-bottom: 2rem; position: relative; } |
| |
| .logo-box { |
| width: 80px; height: 80px; margin: 0 auto 15px; |
| background: #fff; border-radius: 50%; |
| display: flex; align-items: center; justify-content: center; |
| box-shadow: 0 10px 25px var(--accent-glow); |
| color: var(--accent-primary); |
| } |
| |
| h1 { |
| font-size: 1.8rem; font-weight: 800; margin: 0; |
| background: linear-gradient(90deg, #2d3748, #4A6CFA); |
| -webkit-background-clip: text; -webkit-text-fill-color: transparent; |
| } |
| .subtitle { font-size: 0.9rem; color: var(--text-secondary); margin-top: 5px; margin-bottom: 10px; } |
| |
| |
| .status-badge { |
| display: inline-block; padding: 6px 16px; border-radius: 20px; |
| font-size: 0.85rem; font-weight: 700; margin-top: 5px; |
| letter-spacing: 0.5px; opacity: 0; transform: translateY(-5px); |
| transition: all 0.5s ease; |
| } |
| .status-badge.visible { opacity: 1; transform: translateY(0); } |
| .badge-free { background: #E2E8F0; color: #64748b; } |
| .badge-premium { |
| background: var(--premium-gradient); color: #fff; |
| box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4); |
| text-shadow: 0 1px 2px rgba(0,0,0,0.1); |
| } |
| |
| .card { |
| background: var(--panel-bg); |
| border-radius: var(--radius-card); |
| box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05); |
| border: 1px solid var(--panel-border); |
| padding: 25px; margin-bottom: 20px; |
| } |
| |
| .form-label { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 12px; color: #2d3748; } |
| .form-label svg { color: var(--accent-primary); width: 20px; } |
| |
| textarea, input[type="text"], input[type="number"], select { |
| width: 100%; background: var(--input-bg); |
| border: 2px solid var(--input-border); |
| border-radius: 12px; padding: 15px; |
| font-family: inherit; font-size: 1rem; color: #2d3748; |
| outline: none; transition: border-color 0.3s; |
| } |
| textarea { min-height: 120px; resize: vertical; } |
| textarea:focus, input:focus, select:focus { border-color: var(--accent-primary); background: #fff; } |
| |
| |
| .file-upload-wrapper { |
| position: relative; |
| background: var(--input-bg); |
| border: 2px dashed var(--input-border); |
| border-radius: 12px; |
| padding: 20px; |
| text-align: center; |
| transition: 0.3s; |
| cursor: pointer; |
| } |
| .file-upload-wrapper:hover { border-color: var(--accent-primary); background: #fff; } |
| .file-upload-wrapper input[type="file"] { |
| position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; cursor: pointer; |
| } |
| .file-info { font-size: 0.9rem; color: var(--text-secondary); pointer-events: none; } |
| |
| |
| @keyframes move-gradient { |
| 0% { background-position: 0% 50%; } |
| 50% { background-position: 100% 50%; } |
| 100% { background-position: 0% 50%; } |
| } |
| .btn-main { |
| width: 100%; padding: 16px; |
| background: linear-gradient(110deg, var(--accent-secondary), var(--accent-primary), var(--accent-secondary)); |
| background-size: 200% 100%; |
| color: #fff; border: none; border-radius: var(--radius-btn); |
| font-size: 1.1rem; font-weight: 700; cursor: pointer; |
| display: flex; justify-content: center; align-items: center; gap: 10px; |
| transition: all 0.3s ease-out; position: relative; z-index: 1; |
| } |
| .btn-main-content { display: flex; align-items: center; justify-content: center; gap: 10px; transition: transform 0.3s ease; } |
| .btn-main:hover { transform: translateY(-4px); box-shadow: 0 12px 28px -5px rgba(124, 93, 250, 0.4); } |
| .btn-main:hover .btn-main-content { transform: scale(1.05); } |
| .btn-main::before { |
| content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; |
| background: linear-gradient(110deg, var(--accent-secondary), var(--accent-primary), var(--accent-secondary)); |
| background-size: 400%; border-radius: 16px; z-index: -1; opacity: 0; transition: opacity 0.4s ease-out; |
| } |
| .btn-main:hover::before { opacity: 1; animation: move-gradient 4s linear infinite; } |
| .btn-main:disabled { opacity: 0.7; cursor: not-allowed; filter: grayscale(1); } |
| |
| .btn-outline { |
| background: transparent; border: 2px solid var(--input-border); |
| color: var(--text-secondary); margin-top: 10px; transition: all 0.2s; |
| } |
| .btn-outline:hover { border-color: var(--accent-primary); color: var(--accent-primary); } |
| |
| |
| .accordion { |
| background-color: var(--input-bg); color: var(--text-primary); cursor: pointer; padding: 15px; width: 100%; border: none; |
| text-align: right; outline: none; font-size: 0.95rem; font-weight: 600; border-radius: 12px; |
| display: flex; justify-content: space-between; align-items: center; margin-top: 15px; border: 1px solid var(--input-border); transition: 0.3s; |
| } |
| .accordion:hover { background-color: #ecf0f7; border-color: var(--accent-primary); } |
| .accordion:after { content: '⚙️'; font-size: 1rem; transition: transform 0.3s; } |
| .accordion.active { border-radius: 12px 12px 0 0; border-bottom: none; } |
| .accordion.active:after { content: '🔼'; } |
| .panel { |
| padding: 0 15px; background-color: var(--input-bg); max-height: 0; overflow: hidden; |
| transition: max-height 0.3s ease-out; border-radius: 0 0 12px 12px; |
| margin-bottom: 0; border: 1px solid var(--input-border); border-top: none; |
| } |
| .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 15px 0; } |
| .checkbox-wrapper { display: flex; align-items: center; gap: 10px; margin-top: 5px; padding-bottom: 15px; border-top: 1px solid #e2e8f0; padding-top: 15px; } |
| .settings-group label { font-size: 0.8rem; color: var(--text-secondary); display: block; margin-bottom: 6px; font-weight: 500; } |
| .full-width { grid-column: span 2; } |
| |
| |
| .player-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid var(--panel-border); } |
| |
| |
| .download-btn-style { |
| background-color: rgba(74, 108, 250, 0.1); color: var(--accent-primary); text-decoration: none; font-size: 0.9rem; |
| font-weight: 700; padding: 8px 16px; border-radius: 10px; transition: 0.2s; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; border: none; |
| } |
| .download-btn-style:hover { background-color: rgba(74, 108, 250, 0.2); } |
| .download-btn-style.locked { background-color: #f1f5f9; color: #94a3b8; } |
| .download-btn-style.locked:hover { background-color: #e2e8f0; } |
| |
| .audio-item { margin-bottom: 10px; } |
| audio { width: 100%; height: 45px; border-radius: 20px; margin-top: 5px; } |
| |
| |
| .lyrics-container { |
| background: var(--input-bg); border-radius: 16px; padding: 20px; max-height: 350px; overflow-y: auto; |
| white-space: pre-wrap; line-height: 2.2; font-size: 1rem; color: #718096; text-align: center; border: 1px solid var(--input-border); margin-top: 15px; |
| position: relative; |
| scroll-behavior: smooth; |
| } |
| .lyrics-line { |
| display: block; margin-bottom: 12px; transition: all 0.3s ease; border-radius: 8px; padding: 2px 10px; |
| } |
| .lyrics-line.active { |
| color: var(--accent-primary); |
| font-weight: 800; |
| transform: scale(1.05); |
| background-color: rgba(74, 108, 250, 0.05); |
| text-shadow: 0 0 1px rgba(74, 108, 250, 0.3); |
| } |
| .lyrics-tag { color: var(--accent-secondary); font-size: 0.85em; margin-bottom: 5px; opacity: 0.8; } |
| |
| |
| #loader { display: none; text-align: center; padding: 20px; } |
| .wave-bars { display: flex; justify-content: center; gap: 4px; height: 30px; align-items: flex-end; } |
| .bar { width: 5px; background: var(--accent-primary); animation: jump 1s infinite; border-radius: 2px; } |
| .bar:nth-child(2) { animation-delay: 0.1s; height: 60%; } |
| .bar:nth-child(3) { animation-delay: 0.2s; height: 80%; } |
| .bar:nth-child(4) { animation-delay: 0.3s; height: 50%; } |
| @keyframes jump { 0%, 100% { height: 20%; } 50% { height: 100%; } } |
| |
| |
| #historySection { margin-top: 30px; width: 100%; } |
| .history-title { font-size: 1.2rem; font-weight: 800; color: var(--text-primary); margin-bottom: 15px; display: flex; align-items: center; gap: 10px; } |
| .history-list { display: grid; gap: 12px; } |
| .history-card { |
| background: white; border-radius: 16px; padding: 15px; display: flex; align-items: center; justify-content: space-between; |
| border: 1px solid var(--panel-border); transition: all 0.3s; cursor: pointer; position: relative; overflow: hidden; |
| } |
| .history-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(74, 108, 250, 0.15); border-color: var(--accent-primary); } |
| .h-info { display: flex; align-items: center; gap: 15px; } |
| .h-icon { width: 45px; height: 45px; background: var(--input-bg); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--accent-primary); font-size: 1.2rem; } |
| .h-details h4 { margin: 0; font-size: 1rem; color: var(--text-primary); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; } |
| .h-details span { font-size: 0.8rem; color: var(--text-secondary); } |
| |
| .h-delete { |
| position: absolute; left: 15px; |
| background: #fee2e2; color: var(--danger-color); |
| width: 38px; height: 38px; border-radius: 50%; |
| display: flex; align-items: center; justify-content: center; |
| opacity: 0; transform: scale(0.8); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
| z-index: 10; box-shadow: 0 4px 10px rgba(229, 62, 62, 0.2); |
| } |
| .history-card:hover .h-delete { opacity: 1; transform: scale(1); } |
| .h-delete:hover { background: var(--danger-color); color: white; transform: scale(1.1); } |
| |
| |
| .modal-overlay { |
| position: fixed; top: 0; left: 0; width: 100%; height: 100%; |
| background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px); |
| z-index: 1000; display: none; align-items: center; justify-content: center; |
| opacity: 0; transition: opacity 0.3s; |
| } |
| .modal-box { |
| background: white; width: 90%; max-width: 400px; |
| border-radius: 24px; padding: 30px; text-align: center; |
| transform: scale(0.9); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
| box-shadow: 0 20px 60px rgba(0,0,0,0.2); |
| } |
| .modal-icon-warn { |
| width: 60px; height: 60px; background: #fee2e2; color: var(--danger-color); |
| border-radius: 50%; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; |
| } |
| .modal-box h3 { margin: 0 0 10px; color: var(--text-primary); } |
| .modal-box p { color: var(--text-secondary); margin: 0 0 25px; font-size: 0.95rem; } |
| .modal-actions { display: flex; gap: 10px; justify-content: center; } |
| .btn-modal { padding: 12px 24px; border-radius: 12px; font-weight: 700; border: none; cursor: pointer; flex: 1; font-size: 1rem; transition: 0.2s; } |
| .btn-cancel { background: var(--input-bg); color: var(--text-secondary); } |
| .btn-cancel:hover { background: #e2e8f0; } |
| .btn-confirm { background: var(--danger-color); color: white; box-shadow: 0 5px 15px rgba(229, 62, 62, 0.3); } |
| .btn-confirm:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(229, 62, 62, 0.4); } |
| |
| |
| @keyframes pulse-gold { 0% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(255, 193, 7, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); } } |
| .upgrade-icon { |
| width: 70px; height: 70px; |
| background: var(--premium-gradient); |
| border-radius: 50%; color: white; margin: 0 auto 20px; |
| display: flex; align-items: center; justify-content: center; |
| font-size: 2rem; animation: pulse-gold 2s infinite; |
| } |
| .btn-upgrade { |
| background: var(--premium-gradient); color: #333; |
| box-shadow: 0 5px 15px rgba(255, 193, 7, 0.3); |
| } |
| .btn-upgrade:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 8px 25px rgba(255, 193, 7, 0.5); |
| } |
| |
| .modal-overlay.open { display: flex; opacity: 1; } |
| .modal-overlay.open .modal-box { transform: scale(1); } |
| </style> |
| </head> |
| <body> |
| <canvas id="music-canvas"></canvas> |
|
|
| <div class="container"> |
| <header> |
| <div class="logo-box"> |
| <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg> |
| </div> |
| <h1>استودیو موزیک آلفا</h1> |
| <p class="subtitle">ساخت آهنگ حرفهای با هوش مصنوعی</p> |
| <div id="statusBadge" class="status-badge">نسخه رایگان</div> |
| </header> |
|
|
| <div id="step1" class="card"> |
| <div class="form-label"> |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path></svg> |
| موضوع آهنگ چیه؟ |
| </div> |
| <textarea id="ideaInput" placeholder="مثال: آهنگ تولد برای سمیرا، سبک پاپ شاد..."></textarea> |
| |
| <button class="accordion">تنظیمات پیشرفته</button> |
| <div class="panel"> |
| <div class="settings-grid"> |
| <div class="settings-group"><label>مدل هوش مصنوعی:</label><select id="model_select"><option value="acestep-v15-turbo-shift3" selected>Turbo-Shift3 (دقیقترین)</option><option value="acestep-v15-turbo">Turbo (سریعترین)</option></select></div> |
| <div class="settings-group"><label>تعداد خروجی (آهنگ):</label><input type="number" id="batch_size" value="1" min="1" max="4"></div> |
| <div class="settings-group"><label>تعداد گام (Steps):</label><input type="number" id="steps_input" value="20" min="4" max="50"></div> |
| <div class="settings-group"><label>سید (Seed) تصادفی=-1:</label><input type="number" id="seed_input" value="-1"></div> |
| |
| |
| <div class="settings-group full-width"> |
| <label>Audio Conditioning (آپلود آهنگ نمونه - اختیاری):</label> |
| <div class="file-upload-wrapper" id="dropZone"> |
| <input type="file" id="audio_ref_input" accept="audio/*"> |
| <span id="file_info_text" class="file-info">برای آپلود کلیک کنید یا فایل را اینجا رها کنید (MP3/WAV)</span> |
| </div> |
| </div> |
|
|
| <div class="settings-group"><label>مقیاس هدایت (CFG):</label><input type="number" id="cfg_input" value="7.0" step="0.5"></div> |
| </div> |
| |
| <div class="checkbox-wrapper"> |
| <input type="checkbox" id="think_checkbox" checked> |
| <label for="think_checkbox" style="font-size: 0.9rem; cursor: pointer;"><b>فعالسازی تفکر مدل</b> <span style="font-size: 0.8rem; color: #666;">(افزایش کیفیت)</span></label> |
| </div> |
| |
| <div class="checkbox-wrapper" style="border-top: none; padding-top: 0;"> |
| <input type="checkbox" id="instrumental_mode"> |
| <label for="instrumental_mode" style="font-size: 0.9rem; cursor: pointer;"><b>حالت بیکلام (Instrumental)</b> <span style="font-size: 0.8rem; color: #666;">(بدون خواننده)</span></label> |
| </div> |
| </div> |
| <button id="processBtn" class="btn-main" style="margin-top: 15px;"><div class="btn-main-content">ساخت آهنگ <span>🎵</span></div></button> |
| </div> |
|
|
| <div id="loader" style="display: none;"> |
| <div class="wave-bars"><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div></div> |
| <p id="loaderText">در حال پردازش...</p> |
| </div> |
|
|
| <div id="finalResult" class="card" style="display:none;"> |
| <div class="player-header"> |
| <div id="resultHeaderText" style="font-weight: 700; display: flex; align-items: center; gap: 5px;"></div> |
| <button id="mainDownloadBtn" class="download-btn-style">دانلود آهنگ 📥</button> |
| </div> |
| <div id="playerWrapper"></div> |
| <div class="form-label" style="margin-top: 20px; justify-content: center; color: #718096;">متن آهنگ</div> |
| <div class="lyrics-container" id="finalLyricsBox"></div> |
| <button onclick="location.reload()" class="btn-main btn-outline">برگشت و ساخت آهنگ جدید</button> |
| </div> |
|
|
| <div id="historySection"> |
| <div class="history-title"> |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg> |
| آخرین آهنگهای ساخته شده |
| </div> |
| <div class="history-list" id="historyList"></div> |
| </div> |
| </div> |
|
|
| |
| <div class="modal-overlay" id="deleteConfirmModal"> |
| <div class="modal-box"> |
| <div class="modal-icon-warn"> |
| <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18"></path><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path></svg> |
| </div> |
| <h3>آیا مطمئن هستید؟</h3> |
| <p>این آهنگ برای همیشه از سوابق شما حذف خواهد شد و قابل بازگشت نیست.</p> |
| <div class="modal-actions"> |
| <button class="btn-modal btn-cancel" onclick="closeDeleteModal()">انصراف</button> |
| <button class="btn-modal btn-confirm" onclick="confirmDelete()">بله، حذف شود</button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="modal-overlay" id="upgradeModal"> |
| <div class="modal-box"> |
| <div class="upgrade-icon">👑</div> |
| <h3 style="font-weight: 800; color: #333;" id="upgradeModalTitle">دانلود مخصوص اعضای ویژه</h3> |
| <p style="margin-bottom: 25px; line-height: 1.6;" id="upgradeModalText">برای دانلود آهنگهای ساخته شده با کیفیت اصلی و بدون محدودیت، لطفا حساب کاربری خود را به نسخه نامحدود ارتقا دهید.</p> |
| <div class="modal-actions" style="flex-direction: column;"> |
| <button class="btn-modal btn-upgrade" id="btnGoPremium">⭐️ ارتقا به نسخه کامل</button> |
| <button class="btn-modal btn-cancel" onclick="closeUpgradeModal()" style="width: 100%;">فعلاً نه</button> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| const ACE_SPACE_URL = "https://ace-step-ace-step-v1-5.hf.space/"; |
| |
| const PREMIUM_PAGE_ID = '1149636'; |
| const PREMIUM_URL = '#/nav/online/news/getSingle/1149636/eyJpdiI6InZSVUdlLzBlR0FzOHZJdXFZeWhER0E9PSIsInZhbHVlIjoiWFhqRXBLc29vSFpHdk9nYmRjZGVuWHRHRHVSZHRlTG1BUENLaE5mNXBNVVRGWFg3ZWN0djJ5K1dIY1RqTHJGaCIsIm1hYyI6IjIzYzFlZTMwYmVmMTdkYjQ0YTQ4YWMxNmFhN2RmNWQ2OTU0MjI0ZWVlZGI3ZjJjMjhkNmQxNjM4MDFlZTIxNmUiLCJ0YWciOiIifQ==/20934991'; |
| |
| let db; |
| let songToDeleteId = null; |
| let userSubscriptionStatus = 'free'; |
| let uploadedAudioPath = null; |
| let lyricsSyncData = []; |
| |
| |
| const ideaInput = document.getElementById('ideaInput'); |
| const processBtn = document.getElementById('processBtn'); |
| const step1 = document.getElementById('step1'); |
| const loader = document.getElementById('loader'); |
| const loaderText = document.getElementById('loaderText'); |
| const finalResult = document.getElementById('finalResult'); |
| const playerWrapper = document.getElementById('playerWrapper'); |
| const finalLyricsBox = document.getElementById('finalLyricsBox'); |
| const mainDownloadBtn = document.getElementById('mainDownloadBtn'); |
| const historyList = document.getElementById('historyList'); |
| const historySection = document.getElementById('historySection'); |
| const deleteModal = document.getElementById('deleteConfirmModal'); |
| const upgradeModal = document.getElementById('upgradeModal'); |
| const statusBadge = document.getElementById('statusBadge'); |
| const upgradeModalTitle = document.getElementById('upgradeModalTitle'); |
| const upgradeModalText = document.getElementById('upgradeModalText'); |
| const audioRefInput = document.getElementById('audio_ref_input'); |
| const fileInfoText = document.getElementById('file_info_text'); |
| const instrumentalMode = document.getElementById('instrumental_mode'); |
| |
| const getVal = (id) => document.getElementById(id).value; |
| const getNum = (id) => Number(document.getElementById(id).value); |
| const getChk = (id) => document.getElementById(id).checked; |
| |
| |
| const acc = document.getElementsByClassName("accordion"); |
| for (let i = 0; i < acc.length; i++) { |
| acc[i].addEventListener("click", function() { |
| this.classList.toggle("active"); |
| const panel = this.nextElementSibling; |
| panel.style.maxHeight = panel.style.maxHeight ? null : panel.scrollHeight + "px"; |
| }); |
| } |
| |
| |
| audioRefInput.addEventListener('change', function() { |
| if (this.files && this.files[0]) { |
| fileInfoText.innerText = "فایل انتخاب شد: " + this.files[0].name; |
| fileInfoText.style.color = "var(--success-color)"; |
| fileInfoText.style.fontWeight = "bold"; |
| } |
| }); |
| |
| |
| function getFingerprint() { |
| let fp = localStorage.getItem('user_fingerprint'); |
| if (!fp) { |
| fp = 'user_' + Math.random().toString(36).substr(2, 9) + Date.now().toString(36); |
| localStorage.setItem('user_fingerprint', fp); |
| } |
| return fp; |
| } |
| |
| |
| function isUserPaid(userObject) { |
| return userObject && userObject.isLogin && userObject.accessible_pages && |
| (userObject.accessible_pages.includes(PREMIUM_PAGE_ID) || |
| userObject.accessible_pages.includes(parseInt(PREMIUM_PAGE_ID))); |
| } |
| |
| function updateSubscriptionUI(status) { |
| if (status === 'paid') { |
| statusBadge.textContent = 'نسخه نامحدود'; |
| statusBadge.className = 'status-badge visible badge-premium'; |
| mainDownloadBtn.classList.remove('locked'); |
| } else { |
| statusBadge.textContent = 'نسخه رایگان'; |
| statusBadge.className = 'status-badge visible badge-free'; |
| } |
| } |
| |
| window.addEventListener('message', (event) => { |
| if (event.data && event.data.type === 'USER_STATUS_RESPONSE') { |
| try { |
| const userObject = JSON.parse(event.data.payload); |
| userSubscriptionStatus = isUserPaid(userObject) ? 'paid' : 'free'; |
| } catch (e) { |
| userSubscriptionStatus = 'free'; |
| } |
| updateSubscriptionUI(userSubscriptionStatus); |
| } |
| }); |
| |
| parent.postMessage({ type: 'REQUEST_USER_STATUS' }, '*'); |
| |
| |
| function handleSecureDownload(url, e) { |
| if (e) e.preventDefault(); |
| if (userSubscriptionStatus === 'free') { |
| upgradeModalTitle.innerText = "دانلود مخصوص اعضای ویژه"; |
| upgradeModalText.innerText = "برای دانلود آهنگهای ساخته شده با کیفیت اصلی و بدون محدودیت، لطفا حساب کاربری خود را به نسخه نامحدود ارتقا دهید."; |
| upgradeModal.classList.add('open'); |
| } else { |
| parent.postMessage({ |
| type: 'INITIATE_DOWNLOAD_FROM_URL', |
| payload: { audioUrl: url } |
| }, '*'); |
| const btn = e ? e.target.closest('button') : null; |
| if(btn) { |
| const originalText = btn.innerHTML; |
| btn.innerHTML = 'در حال ارسال... ⏳'; |
| setTimeout(() => { btn.innerHTML = originalText; }, 2000); |
| } |
| } |
| } |
| |
| document.getElementById('btnGoPremium').addEventListener('click', () => { |
| parent.postMessage({ type: 'NAVIGATE_TO_PREMIUM', payload: { url: PREMIUM_URL } }, '*'); |
| }); |
| |
| function closeUpgradeModal() { upgradeModal.classList.remove('open'); } |
| |
| |
| function initDB() { |
| const request = indexedDB.open("alphaMusicDB", 1); |
| request.onerror = (event) => console.error("IndexedDB error:", event); |
| request.onsuccess = (event) => { db = event.target.result; loadHistory(); }; |
| request.onupgradeneeded = (event) => { event.target.result.createObjectStore("songs", { keyPath: "id" }); }; |
| } |
| |
| async function saveToHistory(idea, lyrics, audioUrl) { |
| try { |
| const response = await fetch(audioUrl); |
| const audioBlob = await response.blob(); |
| const newItem = { |
| id: Date.now(), idea, lyrics, audioBlob, |
| date: new Date().toLocaleDateString('fa-IR', { hour: '2-digit', minute: '2-digit' }) |
| }; |
| const transaction = db.transaction(["songs"], "readwrite"); |
| const store = transaction.objectStore("songs"); |
| store.add(newItem); |
| const countReq = store.count(); |
| countReq.onsuccess = () => { |
| if (countReq.result > 10) store.openCursor().onsuccess = (e) => { if(e.target.result) e.target.result.delete(); }; |
| }; |
| transaction.oncomplete = () => loadHistory(); |
| } catch (error) { console.error("Error saving:", error); } |
| } |
| |
| function loadHistory() { |
| if (!db) return; |
| const store = db.transaction(["songs"], "readonly").objectStore("songs"); |
| store.getAll().onsuccess = (e) => { |
| const history = e.target.result.sort((a, b) => b.id - a.id); |
| historyList.innerHTML = ''; |
| if (history.length === 0) { |
| historyList.innerHTML = '<div style="text-align:center; color:#999; padding:20px;">هنوز آهنگی نساختهاید</div>'; |
| return; |
| } |
| history.forEach((item) => { |
| const div = document.createElement('div'); |
| div.className = 'history-card'; |
| div.innerHTML = ` |
| <div class="h-info"> |
| <div class="h-icon">🎵</div> |
| <div class="h-details"> |
| <h4>${item.idea.substring(0, 30)}${item.idea.length > 30 ? '...' : ''}</h4> |
| <span>${item.date}</span> |
| </div> |
| </div> |
| <div class="h-delete" onclick="askToDelete(event, ${item.id})"> |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18"></path><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path></svg> |
| </div> |
| `; |
| div.onclick = (e) => { if (!e.target.closest('.h-delete')) openHistoryItem(item); }; |
| historyList.appendChild(div); |
| }); |
| }; |
| } |
| |
| function askToDelete(event, id) { |
| event.stopPropagation(); songToDeleteId = id; deleteModal.classList.add('open'); |
| } |
| function closeDeleteModal() { deleteModal.classList.remove('open'); songToDeleteId = null; } |
| function confirmDelete() { |
| if (songToDeleteId && db) { |
| const transaction = db.transaction(["songs"], "readwrite"); |
| const store = transaction.objectStore("songs"); |
| store.delete(songToDeleteId); |
| transaction.oncomplete = () => { loadHistory(); closeDeleteModal(); }; |
| } |
| } |
| deleteModal.addEventListener('click', (e) => { if (e.target === deleteModal) closeDeleteModal(); }); |
| upgradeModal.addEventListener('click', (e) => { if (e.target === upgradeModal) closeUpgradeModal(); }); |
| |
| function openHistoryItem(item) { |
| step1.style.display = 'none'; historySection.style.display = 'none'; |
| const audioURL = URL.createObjectURL(item.audioBlob); |
| const headerText = document.getElementById('resultHeaderText'); |
| headerText.innerHTML = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg> آهنگ آرشیو شده`; |
| headerText.style.color = 'var(--accent-primary)'; |
| mainDownloadBtn.style.display = 'inline-flex'; |
| mainDownloadBtn.onclick = (e) => handleSecureDownload(audioURL, e); |
| playerWrapper.innerHTML = `<audio controls autoplay src="${audioURL}"></audio>`; |
| finalLyricsBox.innerHTML = formatLyrics(item.lyrics); |
| finalResult.style.display = 'block'; |
| window.scrollTo({ top: 0, behavior: 'smooth' }); |
| } |
| |
| initDB(); |
| |
| |
| async function uploadAudioFile(file) { |
| const formData = new FormData(); |
| formData.append('files', file); |
| |
| const uploadId = Math.random().toString(36).substring(2); |
| |
| const response = await fetch(`${ACE_SPACE_URL}upload?upload_id=${uploadId}`, { |
| method: 'POST', |
| body: formData |
| }); |
| |
| if (!response.ok) throw new Error("آپلود فایل صوتی با خطا مواجه شد."); |
| |
| const data = await response.json(); |
| |
| return data[0]; |
| } |
| |
| |
| async function fetchAndParseVTT(vttUrl) { |
| try { |
| |
| const fullUrl = vttUrl.startsWith('http') ? vttUrl : ACE_SPACE_URL.replace(/\/$/, '') + vttUrl; |
| const response = await fetch(fullUrl); |
| const text = await response.text(); |
| |
| lyricsSyncData = []; |
| |
| |
| const regex = /(\d{2}:\d{2}:\d{2}\.\d{3})\s-->\s(\d{2}:\d{2}:\d{2}\.\d{3})\s*\n(.*?)(?=\n\n|\n\d|$)/gs; |
| let match; |
| |
| while ((match = regex.exec(text)) !== null) { |
| const start = parseTime(match[1]); |
| const end = parseTime(match[2]); |
| const content = match[3].trim(); |
| if (content) { |
| lyricsSyncData.push({ start, end, text: content }); |
| } |
| } |
| |
| |
| renderSyncedLyrics(); |
| } catch (e) { |
| console.error("Error parsing subtitles:", e); |
| } |
| } |
| |
| function parseTime(timeStr) { |
| const parts = timeStr.split(':'); |
| const seconds = parts[2].split('.'); |
| return (parseInt(parts[0]) * 3600) + (parseInt(parts[1]) * 60) + parseInt(seconds[0]) + (parseInt(seconds[1]) / 1000); |
| } |
| |
| function renderSyncedLyrics() { |
| finalLyricsBox.innerHTML = ''; |
| if (lyricsSyncData.length === 0) return; |
| |
| lyricsSyncData.forEach((line, index) => { |
| const div = document.createElement('div'); |
| div.className = 'lyrics-line'; |
| div.id = `lyric-${index}`; |
| div.innerHTML = line.text.replace(/\[(.*?)\]/g, '<span class="lyrics-tag">[$1]</span>'); |
| finalLyricsBox.appendChild(div); |
| }); |
| } |
| |
| function syncLyricsToAudio(currentTime) { |
| if (!lyricsSyncData.length) return; |
| |
| |
| const currentLineIndex = lyricsSyncData.findIndex(line => currentTime >= line.start && currentTime <= line.end); |
| |
| |
| document.querySelectorAll('.lyrics-line').forEach(el => el.classList.remove('active')); |
| |
| if (currentLineIndex !== -1) { |
| const activeEl = document.getElementById(`lyric-${currentLineIndex}`); |
| if (activeEl) { |
| activeEl.classList.add('active'); |
| |
| activeEl.scrollIntoView({ behavior: 'smooth', block: 'center' }); |
| } |
| } |
| } |
| |
| |
| processBtn.addEventListener('click', async () => { |
| if (!ideaInput.value.trim()) return alert("لطفا موضوع آهنگ را بنویسید"); |
| |
| processBtn.disabled = true; |
| step1.style.display = 'none'; |
| historySection.style.display = 'none'; |
| loader.style.display = 'block'; |
| |
| try { |
| |
| if (audioRefInput.files.length > 0) { |
| loaderText.innerText = "در حال آپلود فایل صوتی شما..."; |
| try { |
| uploadedAudioPath = await uploadAudioFile(audioRefInput.files[0]); |
| } catch (e) { |
| alert("خطا در آپلود فایل: " + e.message); |
| throw e; |
| } |
| } else { |
| uploadedAudioPath = null; |
| } |
| |
| |
| loaderText.innerText = "آلفا در حال نوشتن شعر و ملودی..."; |
| const isInstrumental = getChk('instrumental_mode'); |
| |
| const response = await fetch('/api/refine', { |
| method: 'POST', |
| headers: {'Content-Type': 'application/json'}, |
| body: JSON.stringify({ |
| idea: ideaInput.value, |
| fingerprint: getFingerprint(), |
| is_premium: userSubscriptionStatus === 'paid', |
| is_instrumental: isInstrumental |
| }) |
| }); |
| |
| if (response.status === 429) { |
| loader.style.display = 'none'; step1.style.display = 'block'; historySection.style.display = 'block'; processBtn.disabled = false; |
| upgradeModalTitle.innerText = "محدودیت ساخت روزانه"; |
| upgradeModalText.innerText = "شما به سقف ۵ آهنگ رایگان در روز رسیدهاید. برای ساخت آهنگهای بیشتر و نامحدود، لطفا حساب خود را ارتقا دهید."; |
| upgradeModal.classList.add('open'); |
| return; |
| } |
| |
| const data = await response.json(); |
| if (data.error) throw new Error(data.error); |
| |
| let { lyrics, musicPrompt } = data; |
| |
| |
| if (isInstrumental) { |
| lyrics = ""; |
| } |
| |
| loaderText.innerText = "در حال ضبط آهنگ در استودیو آلفا..."; |
| |
| |
| |
| const payload = [ |
| getVal('model_select'), |
| "custom", |
| null, |
| "unknown", |
| musicPrompt, |
| lyrics, |
| 0, "", "", "unknown", |
| getNum('steps_input'), |
| getNum('cfg_input'), |
| true, |
| getNum('seed_input'), |
| uploadedAudioPath, |
| -1, |
| getNum('batch_size'), |
| null, null, 0, -1, "Fill the audio semantic mask based on the given conditions:", |
| 1, "text2music", false, 0, 1, 3, "ode", "", "mp3", 0.85, |
| getChk('think_checkbox'), 2, 0, 0.9, "NO USER INPUT", true, true, true, null, false, true, false, false, 0.5, 8, null, [], false, null, null, null, null |
| ]; |
| |
| const session_hash = Math.random().toString(36).substring(2); |
| const joinResp = await fetch(`${ACE_SPACE_URL}gradio_api/queue/join`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ data: payload, fn_index: 77, session_hash }) }); |
| if (!joinResp.ok) throw new Error('خطا در اتصال به سرور موزیک'); |
| |
| const eventSource = new EventSource(`${ACE_SPACE_URL}gradio_api/queue/data?session_hash=${session_hash}`); |
| eventSource.onmessage = (event) => { |
| const msg = JSON.parse(event.data); |
| if (msg.msg === 'process_starts') loaderText.innerText = "هوش مصنوعی در حال خواندن..."; |
| else if (msg.msg === 'process_completed') { |
| eventSource.close(); |
| loader.style.display = 'none'; |
| handleAudioOutput(msg.output, lyrics, ideaInput.value, isInstrumental); |
| } |
| }; |
| eventSource.onerror = () => { throw new Error('ارتباط با سرور قطع شد.'); }; |
| |
| } catch (e) { |
| alert("خطا: " + e.message); |
| loader.style.display = 'none'; step1.style.display = 'block'; historySection.style.display = 'block'; processBtn.disabled = false; |
| } |
| }); |
| |
| function handleAudioOutput(data, lyrics, idea, isInstrumental) { |
| const processedUrls = new Set(); |
| let hasResult = false; |
| let vttUrl = null; |
| |
| |
| function traverse(obj) { |
| if (typeof obj === 'string') { |
| if (obj.includes('/file=') && obj.endsWith('.mp3')) addAudio(obj); |
| if ((obj.includes('/file=') || obj.endsWith('.vtt')) && obj.includes('subtitles')) vttUrl = obj; |
| } else if (obj && typeof obj === 'object') { |
| if (obj.url && obj.url.endsWith('.mp3')) addAudio(obj.url); |
| if (obj.url && obj.url.endsWith('.vtt')) vttUrl = obj.url; |
| Object.values(obj).forEach(traverse); |
| } |
| } |
| |
| function addAudio(url) { |
| const fullUrl = url.startsWith('http') ? url : ACE_SPACE_URL.replace(/\/$/, '') + url; |
| if (processedUrls.has(fullUrl)) return; |
| processedUrls.add(fullUrl); |
| hasResult = true; |
| |
| if (processedUrls.size === 1) { |
| mainDownloadBtn.style.display = 'inline-flex'; |
| mainDownloadBtn.onclick = (e) => handleSecureDownload(fullUrl, e); |
| saveToHistory(idea, lyrics, fullUrl); |
| } |
| |
| |
| const div = document.createElement('div'); |
| div.className = 'audio-item'; |
| const audio = document.createElement('audio'); |
| audio.controls = true; |
| audio.autoplay = true; |
| audio.src = fullUrl; |
| |
| |
| audio.ontimeupdate = () => syncLyricsToAudio(audio.currentTime); |
| |
| div.appendChild(audio); |
| playerWrapper.appendChild(div); |
| } |
| |
| |
| playerWrapper.innerHTML = ''; |
| traverse(data); |
| |
| if (hasResult) { |
| const headerText = document.getElementById('resultHeaderText'); |
| headerText.innerHTML = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>آهنگ جدید آماده شد`; |
| headerText.style.color = 'var(--success-color)'; |
| finalResult.style.display = 'block'; |
| |
| if (isInstrumental) { |
| finalLyricsBox.innerHTML = '<div style="margin-top:20px; font-weight:bold;">(موسیقی بیکلام / Instrumental)</div>'; |
| } else { |
| |
| finalLyricsBox.innerHTML = formatLyrics(lyrics); |
| |
| if (vttUrl) { |
| fetchAndParseVTT(vttUrl); |
| } |
| } |
| |
| window.scrollTo({ top: 0, behavior: 'smooth' }); |
| } else { |
| alert("فایل صوتی یافت نشد!"); |
| step1.style.display = 'block'; historySection.style.display = 'block'; |
| } |
| } |
| |
| function formatLyrics(text) { |
| |
| return text.replace(/\[(.*?)\]/g, '<span class="lyrics-tag">[$1]</span>'); |
| } |
| |
| const canvas = document.getElementById('music-canvas'); |
| const ctx = canvas.getContext('2d'); |
| let t = 0; |
| function resize() { canvas.width = window.innerWidth; canvas.height = 400; } |
| window.addEventListener('resize', resize); |
| resize(); |
| function anim() { |
| ctx.clearRect(0, 0, canvas.width, canvas.height); |
| ctx.beginPath(); |
| ctx.strokeStyle = "rgba(74, 108, 250, 0.1)"; |
| ctx.lineWidth = 2; |
| for(let i=0; i<canvas.width; i+=20) { |
| ctx.moveTo(i, 0); |
| ctx.lineTo(i, Math.sin(i * 0.01 + t) * 50 + 100); |
| } |
| ctx.stroke(); |
| t += 0.02; |
| requestAnimationFrame(anim); |
| } |
| anim(); |
| </script> |
| </body> |
| </html> |
