| <!DOCTYPE html> |
| <html lang="fa" dir="rtl"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Voice Clone Pro</title> |
| <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;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; |
| --text-tertiary: #8A94A6; |
| --accent-primary: #4A6CFA; |
| --accent-primary-hover: #3553D6; |
| --accent-primary-glow: rgba(74, 108, 250, 0.25); |
| --accent-secondary: #0FD4A8; |
| --danger-color: #e53e3e; |
| --shadow-sm: 0 1px 2px 0 rgba(26, 32, 44, 0.03); |
| --shadow-xl: 0 20px 25px -5px rgba(26, 32, 44, 0.07), 0 8px 10px -6px rgba(26, 32, 44, 0.05); |
| --radius-card: 24px; |
| --radius-btn: 14px; |
| --radius-input: 12px; |
| --transition-smooth: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); |
| } |
| |
| @keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } |
| @keyframes scaleUp { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } } |
| @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } |
| @keyframes pulse-loader { 0% { box-shadow: 0 0 40px var(--accent-primary-glow); } 50% { box-shadow: 0 0 60px rgba(15, 212, 168, 0.4); } 100% { box-shadow: 0 0 40px var(--accent-primary-glow); } } |
| @keyframes glow-text { 0% { opacity: 0.7; } 50% { opacity: 1; } 100% { opacity: 0.7; } } |
| @keyframes badge-fade-in { from { opacity: 0; transform: translateY(-10px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } |
| |
| * { box-sizing: border-box; margin: 0; padding: 0; } |
| |
| body { font-family: var(--app-font); background-color: var(--app-bg); color: var(--text-primary); display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 2.5rem 1rem; } |
| .container { max-width: 820px; width: 100%; display: flex; flex-direction: column; gap: 1.5rem; } |
| |
| |
| header { position: relative; text-align: center; margin-bottom: 1rem; padding: 2rem 0; animation: fadeIn 0.8s 0.1s ease-out backwards; overflow: hidden; } |
| #neural-network-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.7; } |
| h1, .subtitle, #subscription-status-badge { position: relative; z-index: 2; } |
| h1 { font-size: 2.5rem; font-weight: 800; margin: 0 0 0.8rem 0; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -1px; } |
| .subtitle { font-size: 1.1rem; color: var(--text-secondary); margin-top: 0.5rem; } |
| |
| |
| #subscription-status-badge { display: none; padding: 6px 16px; border-radius: 20px; font-size: 0.85em; font-weight: 700; margin-top: 1rem; display: inline-block; animation: badge-fade-in 0.6s 0.5s ease-out backwards; position: relative; z-index: 2;} |
| #subscription-status-badge.free-badge { background: #64748b; color: white; box-shadow: 0 2px 8px rgba(100, 116, 139, 0.3); } |
| #subscription-status-badge.paid-badge { background: linear-gradient(45deg, #FFC107, #ffca2c); color: #333; box-shadow: 0 4px 10px rgba(255, 193, 7, 0.3); } |
| |
| |
| .guide-card { position: relative; z-index: 2; background: rgba(74, 108, 250, 0.04); border: 1px solid rgba(74, 108, 250, 0.15); border-radius: 16px; padding: 1.5rem; margin-bottom: 1rem; text-align: right; line-height: 1.8; animation: fadeIn 0.8s 0.2s ease-out backwards; } |
| .guide-card h3 { color: var(--accent-primary); font-size: 1.2rem; margin-bottom: 10px; } |
| .guide-card p { color: var(--text-secondary); font-size: 0.95rem; } |
| |
| |
| main { padding: 3rem; background-color: var(--panel-bg); border-radius: var(--radius-card); box-shadow: var(--shadow-xl); border: 1px solid var(--panel-border); animation: fadeIn 0.8s 0.4s ease-out backwards; } |
| .form-group { margin-bottom: 2.5rem; } |
| .form-group:last-child { margin-bottom: 0; } |
| .form-label { display: flex; align-items: center; gap: 0.75rem; font-weight: 700; color: var(--text-primary); font-size: 1.2em; margin-bottom: 0.5rem; } |
| .form-label svg { width: 24px; height: 24px; color: var(--accent-primary); } |
| .form-desc { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 1.2rem; line-height: 1.6; } |
| |
| |
| .upload-area { position: relative; border: 2px dashed var(--input-border); border-radius: var(--radius-input); padding: 1.2rem 2rem; text-align: center; cursor: pointer; transition: var(--transition-smooth); background-color: var(--input-bg); min-height: 110px; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; } |
| .upload-area.drag-over, .upload-area:hover:not(.has-file) { border-color: var(--accent-primary); background-color: #fff; box-shadow: 0 0 15px var(--accent-primary-glow); } |
| .upload-area.has-file { border-style: solid; border-color: var(--panel-border); padding: 1.2rem 1.5rem; cursor: default; background-color: #fff; } |
| .upload-content { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 1rem; width: 100%; } |
| .upload-icon svg { width: 32px; height: 32px; color: var(--accent-primary); stroke-width: 1.5; opacity: 0.8; } |
| .upload-area p { margin: 0; color: var(--text-secondary); font-weight: 500; font-size: 0.95rem; } |
| |
| |
| .preview-box { display: none; width: 100%; } |
| .audio-anim-container { display: flex; align-items: center; justify-content: space-between; width: 100%; background: #F6F8FB; border: 1px solid var(--panel-border); padding: 0.8rem 1.2rem; border-radius: var(--radius-input); } |
| |
| .audio-info { display: flex; align-items: center; gap: 15px; max-width: 75%; } |
| |
| |
| .custom-play-btn { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(95deg, var(--accent-secondary) 0%, var(--accent-primary) 100%); border: none; color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 10px var(--accent-primary-glow); transition: var(--transition-smooth); flex-shrink: 0; padding: 0; outline: none; } |
| .custom-play-btn:hover { transform: scale(1.08); box-shadow: 0 6px 14px var(--accent-primary-glow); } |
| .custom-play-btn svg { width: 22px; height: 22px; fill: currentColor; } |
| .custom-play-btn svg.play-icon { margin-left: -3px; } |
| .custom-play-btn svg.pause-icon { display: none; margin-left: 0; } |
| .custom-play-btn.playing svg.play-icon { display: none; } |
| .custom-play-btn.playing svg.pause-icon { display: block; } |
| |
| .file-details { text-align: right; overflow: hidden; } |
| .file-details .file-title { color: var(--text-primary); font-weight: 700; font-size: 0.95rem; margin-bottom: 2px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } |
| .file-details .file-status { color: var(--accent-primary); font-weight: 600; font-size: 0.8rem; display: flex; align-items: center; gap: 4px; } |
| |
| |
| .remove-file-btn { background: #FFF0F3; border: 1px solid #FFE3E8; color: #FF4D6D; width: 36px; height: 36px; border-radius: 10px; cursor: pointer; font-size: 1.3rem; display: flex; align-items: center; justify-content: center; transition: var(--transition-smooth); padding: 0; font-family: sans-serif; font-weight: bold; line-height: 1; } |
| .remove-file-btn:hover { background-color: #FF4D6D; border-color: #FF4D6D; color: white; transform: scale(1.05); box-shadow: 0 4px 12px rgba(255, 77, 109, 0.2); } |
| |
| .upload-area.has-file .upload-content { display: none; } |
| .upload-area.has-file .preview-box { display: block; } |
| |
| |
| .limit-warning-card { |
| display: none; |
| background: linear-gradient(135deg, #FFF5F7 0%, #FFE5EC 100%); |
| border: 2px solid #FFCCD5; |
| border-radius: 20px; |
| padding: 1.75rem; |
| margin: 1.5rem 0; |
| text-align: center; |
| box-shadow: 0 10px 25px rgba(255, 77, 109, 0.1); |
| animation: scaleUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; |
| } |
| .limit-warning-card h4 { |
| color: #FF4D6D; |
| font-size: 1.25rem; |
| font-weight: 800; |
| margin-bottom: 10px; |
| } |
| .limit-warning-card p { |
| color: #4A5568; |
| font-size: 0.95rem; |
| line-height: 1.8; |
| font-weight: 600; |
| margin-bottom: 15px; |
| } |
| .countdown-timer-box { |
| font-weight: 800; |
| color: #FF4D6D; |
| background: #FFFFFF; |
| border: 2px dashed #FFAEC0; |
| padding: 10px 16px; |
| border-radius: 12px; |
| display: inline-block; |
| font-size: 0.95rem; |
| box-shadow: var(--shadow-sm); |
| } |
| |
| .credit-info { font-size: 0.95rem; color: var(--text-tertiary); text-align: center; margin-top: 1rem; font-weight: 600; background: var(--input-bg); padding: 10px; border-radius: var(--radius-input); border: 1px solid var(--input-border); display: none; } |
| |
| |
| #submit-btn { display: flex; align-items: center; justify-content: center; gap: 0.75rem; width: 100%; padding: 1.2rem; font-size: 1.3rem; font-weight: 800; background: linear-gradient(95deg, var(--accent-secondary) 0%, var(--accent-primary) 100%); color: #fff; border: none; border-radius: var(--radius-btn); cursor: pointer; transition: all 0.3s ease; box-shadow: 0 6px 15px -3px var(--accent-primary-glow); margin-top: 2rem; } |
| #submit-btn svg { width: 26px; height: 26px; } |
| #submit-btn:hover:not(:disabled) { transform: translateY(-4px) scale(1.01); box-shadow: 0 10px 20px -4px var(--accent-primary-glow); } |
| #submit-btn:disabled { background: var(--text-tertiary); color: #fff; cursor: not-allowed; box-shadow: none; opacity: 0.5; transform: none; } |
| #submit-btn .spinner { width: 20px; height: 20px; border: 3px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; display: none; } |
| |
| |
| #image-result-container { display: flex; width: 100%; flex-direction: column; align-items: center; gap: 1rem; margin-top: 1rem; padding-top: 2rem; border-top: 1px solid var(--panel-border); animation: fadeIn 0.5s ease-out; } |
| |
| .empty-placeholder { width: 400px; max-width: 100%; height: 200px; border: 2px dashed var(--input-border); border-radius: 20px; background-color: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } |
| .empty-placeholder svg { color: var(--text-tertiary); margin-bottom: 15px; opacity: 0.5; width: 48px; height: 48px; } |
| .empty-placeholder p { color: var(--text-tertiary); font-size: 0.95rem; font-weight: 600; margin: 0; } |
| |
| .generator-container { position: relative; width: 400px; max-width: 100%; height: 200px; border: 2px solid #38bdf8; border-radius: 20px; overflow: hidden; box-shadow: 0 0 40px var(--accent-primary-glow); animation: pulse-loader 5s infinite cubic-bezier(0.4, 0, 0.6, 1); background-color: #161b22; color: #f0f6fc; margin: 0 auto; } |
| .noise-layer, .sketch-layer, .building-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } |
| .noise-layer { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect width="100" height="100" fill="none"/><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.5" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.6"/></svg>') repeat; opacity: 1; animation: fade-noise 7s infinite ease-in-out; } |
| @keyframes fade-noise { 0% { opacity: 1; filter: blur(5px); } 30% { opacity: 0.8; filter: blur(2px); } 100% { opacity: 0; filter: blur(0px); } } |
| .sketch-layer { filter: grayscale(1) contrast(1.5) blur(3px); opacity: 0; animation: reveal-sketch 7s infinite ease-in-out; } |
| @keyframes reveal-sketch { 0% { opacity: 0; } 20% { opacity: 1; } 60% { opacity: 0.5; } 100% { opacity: 0; } } |
| .building-layer { filter: blur(15px); opacity: 0; animation: denoise-color 7s infinite ease-in-out; } |
| @keyframes denoise-color { 0% { opacity: 0; } 40% { opacity: 0.6; filter: blur(5px); } 100% { opacity: 1; filter: blur(0px); } } |
| .pixel-grid { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(0deg, transparent 0 1px, rgba(255,255,255,0.1) 1px 2px), repeating-linear-gradient(90deg, transparent 0 1px, rgba(255,255,255,0.1) 1px 2px); opacity: 1; animation: dissolve-grid 7s infinite ease-in-out; } |
| @keyframes dissolve-grid { 0% { opacity: 1; } 70% { opacity: 0.5; } 100% { opacity: 0; } } |
| .particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle, rgba(56, 189, 248, 0.2) 0%, transparent 50%); animation: flow-particles 7s infinite cubic-bezier(0.4, 0, 0.6, 1); } |
| @keyframes flow-particles { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(10px, -15px) scale(1.05); } 100% { transform: translate(0, 0) scale(1); } } |
| .text-overlay { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); font-size: 18px; font-weight: 700; text-shadow: 0 0 20px rgba(56, 189, 248, 0.8); animation: glow-text 7s infinite ease-in-out; font-family: var(--app-font); z-index: 2; text-align: center; width: 90%; } |
| .progress-bar { position: absolute; bottom: 0; left: 0; width: 0%; height: 6px; background: linear-gradient(to right, #00f5d4, #4A6CFA); transition: width 0.3s linear; z-index: 2; } |
| |
| @media (max-width: 650px) { |
| main { padding: 1.5rem; } h1 { font-size: 2rem; } |
| .generator-container { height: 180px; } |
| .text-overlay { font-size: 15px; } |
| } |
| </style> |
| </head> |
| <body> |
| |
| <input type="hidden" id="file_id" value="{FILE_ID}"> |
| <input type="hidden" id="bot_b64" value="{BOT_B64}"> |
| <input type="hidden" id="t" value="{TIMESTAMP}"> |
|
|
| <div class="container"> |
| <header> |
| <canvas id="neural-network-canvas"></canvas> |
| <div style="position: relative; z-index: 2;"> |
| <h1>کلون فوقپیشرفته صدا 🎙️✨</h1> |
| <p class="subtitle">با یک فایل صوتی کوتاه از هر شخصی صدای خودتونو به همون صدا تغییر بدید.</p> |
| <div id="subscription-status-badge">درحال بررسی...</div> |
| </div> |
| </header> |
|
|
| <div class="guide-card"> |
| <h3>💡 شبیهسازی صدا چگونه کار میکند؟</h3> |
| <p>این فناوری با تحلیل فرکانس و ویژگیهای تارهای صوتیِ یک «صدای الگو»، صحبتهای شما را شبیهسازی میکند. برای دریافت عالیترین کیفیت، لطفاً دو فایل صوتی با مشخصات زیر را آپلود نمایید.</p> |
| </div> |
|
|
| <main> |
| |
| <div class="form-group"> |
| <div class="form-label"> |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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><line x1="12" y1="19" x2="12" y2="22"></line></svg> |
| ۱. صدای اصلی ورودی (جملات و صحبتهای شما) |
| </div> |
| <div class="form-desc">فایل صوتی یا ویسی که حاوی متن و لحن صحبت شماست. کاربر میتواند هر فایلی را به این بخش اضافه کند.</div> |
| |
| <label id="upload-area-1" class="upload-area" for="file-input-1"> |
| <div class="upload-content"> |
| <div class="upload-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg></div> |
| <p>انتخاب یا کشیدن فایل صدای اصلی</p> |
| </div> |
| <div class="preview-box" id="preview-box-1"> |
| <div class="audio-anim-container"> |
| <div class="audio-info"> |
| <button type="button" class="custom-play-btn" id="play-btn-1" title="پخش / توقف"> |
| <svg class="play-icon" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg> |
| <svg class="pause-icon" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg> |
| </button> |
| <div class="file-details"> |
| <div class="file-title" id="file-name-1">نام فایل صوتی</div> |
| <div class="file-status">آماده ارسال ⚡</div> |
| </div> |
| </div> |
| <button type="button" class="remove-file-btn" id="remove-btn-1" title="حذف فایل">×</button> |
| </div> |
| </div> |
| </label> |
| <input type="file" id="file-input-1" accept="audio/*" hidden> |
| </div> |
|
|
| |
| <div class="form-group"> |
| <div class="form-label"> |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2z"></path><path d="M12 6v12"></path><path d="M8 10v4"></path><path d="M16 10v4"></path></svg> |
| ۲. صدای الگو (صدای شخصی که میخواهید شبیه آن شوید) |
| </div> |
| <div class="form-desc">نمونه صدای هدف (مثلاً خواننده یا گوینده معروف). هر چقدر صدای الگو باکیفیتتر، بدون نویز و موسیقی پسزمینه باشد، شباهت خروجی ۱۰۰٪ بیشتر خواهد شد (زمان پیشنهادی: ۵ تا ۱۵ ثانیه).</div> |
| |
| <label id="upload-area-2" class="upload-area" for="file-input-2"> |
| <div class="upload-content"> |
| <div class="upload-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg></div> |
| <p>انتخاب یا کشیدن فایل صدای الگو</p> |
| </div> |
| <div class="preview-box" id="preview-box-2"> |
| <div class="audio-anim-container"> |
| <div class="audio-info"> |
| <button type="button" class="custom-play-btn" id="play-btn-2" title="پخش / توقف"> |
| <svg class="play-icon" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg> |
| <svg class="pause-icon" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg> |
| </button> |
| <div class="file-details"> |
| <div class="file-title" id="file-name-2">نام فایل صوتی</div> |
| <div class="file-status">آماده ارسال ⚡</div> |
| </div> |
| </div> |
| <button type="button" class="remove-file-btn" id="remove-btn-2" title="حذف فایل">×</button> |
| </div> |
| </div> |
| </label> |
| <input type="file" id="file-input-2" accept="audio/*" hidden> |
| </div> |
|
|
| |
| <div id="limit-warning-card" class="limit-warning-card"> |
| <h4>⚠️ سهمیه روزانه شما تمام شد!</h4> |
| <p>اعتبار امروز شما برای شبیهسازی صدا به پایان رسید. فردا مجدداً شارژ خواهد شد.<br>همچنین برای استفاده کاملاً نامحدود و دسترسی بدون مرز به تمامی ابزارها، میتوانید همین حالا از داخل ربات لایسنس ویژه تهیه فرمایید. 🌟💎</p> |
| <div id="countdown-timer-box" class="countdown-timer-box">در حال محاسبه زمان شارژ مجدد...</div> |
| </div> |
|
|
| <div id="credit-info" class="credit-info">درحال بررسی اعتبار...</div> |
|
|
| |
| <button id="submit-btn" disabled> |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20"></path><path d="m17 5-5-5-5 5"></path></svg> |
| <span id="btn-text">شروع شبیهسازی صدا 🚀</span> |
| <div class="spinner"></div> |
| </button> |
|
|
| |
| <div class="form-group" style="margin-top: 3rem;"> |
| <div class="form-label"> |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg> |
| وضعیت درخواست |
| </div> |
| <div id="image-result-container"> |
| <div class="empty-placeholder"> |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg> |
| <p>هر دو فایل صوتی را انتخاب و ارسال کنید.</p> |
| </div> |
| </div> |
| </div> |
| </main> |
| </div> |
|
|
| <script> |
| |
| const fileInput1 = document.getElementById('file-input-1'); |
| const uploadArea1 = document.getElementById('upload-area-1'); |
| const previewBox1 = document.getElementById('preview-box-1'); |
| const fileName1 = document.getElementById('file-name-1'); |
| const removeBtn1 = document.getElementById('remove-btn-1'); |
| const playBtn1 = document.getElementById('play-btn-1'); |
| |
| const fileInput2 = document.getElementById('file-input-2'); |
| const uploadArea2 = document.getElementById('upload-area-2'); |
| const previewBox2 = document.getElementById('preview-box-2'); |
| const fileName2 = document.getElementById('file-name-2'); |
| const removeBtn2 = document.getElementById('remove-btn-2'); |
| const playBtn2 = document.getElementById('play-btn-2'); |
| |
| const submitBtn = document.getElementById('submit-btn'); |
| const imageResultContainer = document.getElementById('image-result-container'); |
| |
| let file1 = null; |
| let file2 = null; |
| let fakeProgressInterval = null; |
| let isSubmitting = false; |
| |
| |
| let userSubscriptionStatus = "{PREMIUM_STATUS}"; |
| let userFingerprint = null; |
| let freeCreditRemaining = 1; |
| |
| async function getBrowserFingerprint() { |
| const components = [navigator.userAgent, navigator.language, screen.width + 'x' + screen.height, new Date().getTimezoneOffset(), "canvas-test"]; |
| const fingerprintString = components.join('---'); |
| let hash = 0; |
| for (let i = 0; i < fingerprintString.length; i++) { hash = ((hash << 5) - hash) + fingerprintString.charCodeAt(i); hash |= 0; } |
| return 'fp_clone_' + Math.abs(hash).toString(16); |
| } |
| |
| function updateUIForSubscriptionStatus(status) { |
| userSubscriptionStatus = status; |
| const creditInfoDiv = document.getElementById('credit-info'); |
| const warningCard = document.getElementById('limit-warning-card'); |
| const badge = document.getElementById('subscription-status-badge'); |
| |
| badge.style.display = 'inline-block'; |
| |
| if (status === 'paid') { |
| badge.textContent = 'کاربر ویژه (نامحدود)'; |
| badge.className = 'paid-badge'; |
| creditInfoDiv.style.display = 'none'; |
| warningCard.style.display = 'none'; |
| checkFormState(); |
| } else { |
| badge.textContent = 'کاربر رایگان'; |
| badge.className = 'free-badge'; |
| checkFreeUserCredit(); |
| } |
| } |
| |
| async function checkFreeUserCredit() { |
| if (!userFingerprint || userSubscriptionStatus === 'paid') return; |
| const creditInfoDiv = document.getElementById('credit-info'); |
| const warningCard = document.getElementById('limit-warning-card'); |
| const submitBtn = document.getElementById('submit-btn'); |
| try { |
| const response = await fetch('/api/check-clone-credit', { |
| method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ fingerprint: userFingerprint, subscriptionStatus: userSubscriptionStatus }) |
| }); |
| const result = await response.json(); |
| |
| if (result.limit_reached) { |
| freeCreditRemaining = 0; |
| submitBtn.style.display = 'none'; |
| warningCard.style.display = 'block'; |
| creditInfoDiv.style.display = 'none'; |
| startDailyCountdown(); |
| } else { |
| freeCreditRemaining = result.credits_remaining; |
| checkFormState(); |
| warningCard.style.display = 'none'; |
| creditInfoDiv.style.display = 'block'; |
| creditInfoDiv.innerHTML = `شما <b>${result.credits_remaining}</b> اعتبار شبیهسازی صدا برای امروز دارید.`; |
| } |
| } catch (error) { |
| creditInfoDiv.textContent = "خطا در ارتباط با سیستم اعتبار."; |
| submitBtn.disabled = true; |
| } |
| } |
| |
| function startDailyCountdown() { |
| const timerBox = document.getElementById('countdown-timer-box'); |
| if (!timerBox) return; |
| |
| function tick() { |
| const now = new Date(); |
| const midnight = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1); |
| midnight.setHours(0, 0, 0, 0); |
| const diff = midnight - now; |
| |
| const hours = Math.floor(diff / (1000 * 60 * 60)); |
| const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)); |
| const seconds = Math.floor((diff % (1000 * 60)) / 1000); |
| |
| timerBox.textContent = `⏳ ${hours} ساعت و ${minutes} دقیقه و ${seconds} ثانیه تا شارژ مجدد`; |
| } |
| tick(); |
| setInterval(tick, 1000); |
| } |
| |
| |
| let audioObj1 = new Audio(); |
| let audioObj2 = new Audio(); |
| |
| function updatePlayBtnState(btn, isPlaying) { |
| if (isPlaying) { |
| btn.classList.add('playing'); |
| } else { |
| btn.classList.remove('playing'); |
| } |
| } |
| |
| |
| playBtn1.onclick = (e) => { |
| e.preventDefault(); e.stopPropagation(); |
| if (audioObj1.paused) { |
| audioObj2.pause(); |
| updatePlayBtnState(playBtn2, false); |
| |
| audioObj1.play(); |
| updatePlayBtnState(playBtn1, true); |
| } else { |
| audioObj1.pause(); |
| updatePlayBtnState(playBtn1, false); |
| } |
| }; |
| audioObj1.onended = () => updatePlayBtnState(playBtn1, false); |
| |
| |
| playBtn2.onclick = (e) => { |
| e.preventDefault(); e.stopPropagation(); |
| if (audioObj2.paused) { |
| audioObj1.pause(); |
| updatePlayBtnState(playBtn1, false); |
| |
| audioObj2.play(); |
| updatePlayBtnState(playBtn2, true); |
| } else { |
| audioObj2.pause(); |
| updatePlayBtnState(playBtn2, false); |
| } |
| }; |
| audioObj2.onended = () => updatePlayBtnState(playBtn2, false); |
| |
| |
| |
| async function handleFile1(file) { |
| if (!file || !file.type.startsWith('audio/')) return alert('لطفاً یک فایل صوتی یا ویس معتبر انتخاب کنید.'); |
| file1 = file; |
| fileName1.textContent = file.name; |
| |
| audioObj1.src = URL.createObjectURL(file); |
| updatePlayBtnState(playBtn1, false); |
| |
| uploadArea1.classList.add('has-file'); |
| checkFormState(); |
| } |
| |
| removeBtn1.onclick = (e) => { |
| e.preventDefault(); e.stopPropagation(); |
| |
| audioObj1.pause(); |
| audioObj1.currentTime = 0; |
| URL.revokeObjectURL(audioObj1.src); |
| updatePlayBtnState(playBtn1, false); |
| |
| file1 = null; fileInput1.value = ''; |
| uploadArea1.classList.remove('has-file'); |
| checkFormState(); |
| }; |
| |
| fileInput1.onchange = (e) => handleFile1(e.target.files[0]); |
| uploadArea1.ondragover = (e) => { e.preventDefault(); uploadArea1.classList.add('drag-over'); }; |
| uploadArea1.ondragleave = () => uploadArea1.classList.remove('drag-over'); |
| uploadArea1.ondrop = (e) => { e.preventDefault(); uploadArea1.classList.remove('drag-over'); handleFile1(e.dataTransfer.files[0]); }; |
| |
| |
| async function handleFile2(file) { |
| if (!file || !file.type.startsWith('audio/')) return alert('لطفاً یک فایل صوتی یا ویس معتبر انتخاب کنید.'); |
| file2 = file; |
| fileName2.textContent = file.name; |
| |
| audioObj2.src = URL.createObjectURL(file); |
| updatePlayBtnState(playBtn2, false); |
| |
| uploadArea2.classList.add('has-file'); |
| checkFormState(); |
| } |
| |
| removeBtn2.onclick = (e) => { |
| e.preventDefault(); e.stopPropagation(); |
| |
| audioObj2.pause(); |
| audioObj2.currentTime = 0; |
| URL.revokeObjectURL(audioObj2.src); |
| updatePlayBtnState(playBtn2, false); |
| |
| file2 = null; fileInput2.value = ''; |
| uploadArea2.classList.remove('has-file'); |
| checkFormState(); |
| }; |
| |
| fileInput2.onchange = (e) => handleFile2(e.target.files[0]); |
| uploadArea2.ondragover = (e) => { e.preventDefault(); uploadArea2.classList.add('drag-over'); }; |
| uploadArea2.ondragleave = () => uploadArea2.classList.remove('drag-over'); |
| uploadArea2.ondrop = (e) => { e.preventDefault(); uploadArea2.classList.remove('drag-over'); handleFile2(e.dataTransfer.files[0]); }; |
| |
| function checkFormState() { |
| let limitReached = (userSubscriptionStatus === 'free' && freeCreditRemaining === 0); |
| submitBtn.disabled = limitReached || !(file1 && file2); |
| } |
| |
| |
| function startFakeProgress(targetSeconds) { |
| clearInterval(fakeProgressInterval); |
| const pb = document.getElementById('tv-progress-bar'); |
| if (!pb) return; |
| let currentProg = 0; |
| const intervalMs = 100; |
| const increment = 100 / (targetSeconds * 1000 / intervalMs); |
| |
| pb.style.width = '0%'; |
| fakeProgressInterval = setInterval(() => { |
| currentProg += increment; |
| if(currentProg > 98) { |
| clearInterval(fakeProgressInterval); |
| currentProg = 98; |
| } |
| pb.style.width = `${currentProg}%`; |
| }, intervalMs); |
| } |
| |
| function finishFakeProgress() { |
| clearInterval(fakeProgressInterval); |
| const pb = document.getElementById('tv-progress-bar'); |
| if(pb) pb.style.width = '100%'; |
| } |
| |
| |
| submitBtn.onclick = async () => { |
| if (isSubmitting) return; |
| if (!file1 || !file2) return alert('لطفاً هر دو فایل صوتی را انتخاب کنید.'); |
| |
| isSubmitting = true; |
| submitBtn.disabled = true; |
| audioObj1.pause(); |
| updatePlayBtnState(playBtn1, false); |
| audioObj2.pause(); |
| updatePlayBtnState(playBtn2, false); |
| |
| document.getElementById('btn-text').style.display = 'none'; |
| document.querySelector('.spinner').style.display = 'inline-block'; |
| |
| imageResultContainer.innerHTML = ` |
| <div class="generator-container" style="display:flex;"> |
| <div class="noise-layer"></div><div class="sketch-layer"></div><div class="building-layer"></div><div class="pixel-grid"></div><div class="particles"></div> |
| <div class="text-overlay" id="loading-text">در حال انتقال فایلها به ربات...</div> |
| <div class="progress-bar" id="tv-progress-bar"></div> |
| </div> |
| `; |
| |
| startFakeProgress(1.5); |
| |
| const formData = new FormData(); |
| formData.append('file1', file1); |
| formData.append('file2', file2); |
| formData.append('file_id', document.getElementById('file_id').value); |
| formData.append('bot_b64', document.getElementById('bot_b64').value); |
| formData.append('t', document.getElementById('t').value); |
| |
| try { |
| const res = await fetch('/api/bridge/upload_clone', { |
| method: 'POST', |
| body: formData |
| }); |
| |
| const data = await res.json(); |
| |
| if (data.status === 'success') { |
| |
| if (userSubscriptionStatus === 'free') { |
| try { |
| await fetch('/api/use-clone-credit', { |
| method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ fingerprint: userFingerprint, subscriptionStatus: userSubscriptionStatus }) |
| }); |
| checkFreeUserCredit(); |
| } catch (e) { console.error("Error using credit", e); } |
| } |
| |
| finishFakeProgress(); |
| |
| setTimeout(() => { |
| |
| document.querySelectorAll('main > .form-group:not(:last-child), #submit-btn, .credit-info').forEach(el => { |
| el.style.display = 'none'; |
| }); |
| |
| imageResultContainer.innerHTML = ` |
| <div style="display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2.5rem; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: var(--radius-card); animation: scaleUp 0.6s cubic-bezier(0.4, 0, 0.2, 1); max-width: 450px; margin: 1.5rem auto; box-shadow: var(--shadow-xl);"> |
| <div style="width: 70px; height: 70px; background: #dcfce7; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; box-shadow: 0 4px 10px rgba(74, 222, 128, 0.2); animation: scaleUp 0.5s ease-out;"> |
| <svg xmlns="http://www.w3.org/2000/svg" width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"> |
| <polyline points="20 6 9 17 4 12"></polyline> |
| </svg> |
| </div> |
| <h3 style="color: #15803d; font-size: 1.45rem; font-weight: 800; margin-bottom: 0.8rem; font-family: var(--app-font);">درخواست شما ثبت شد! 🎉</h3> |
| <p style="color: #166534; font-size: 1.05rem; line-height: 1.7; font-weight: 500; margin: 0; font-family: var(--app-font);"> |
| نمونه صداها با موفقیت دریافت و جهت کلون صوتی به ربات ارسال گردید.<br> |
| <span style="display: block; margin-top: 0.8rem; font-size: 0.95rem; color: #15803d; opacity: 0.85; font-weight: bold;"> |
| 👈 اکنون میتوانید به روبیکا بازگردید. ربات به محض شبیهسازی کامل، ویس نهایی را مستقیماً برایتان ارسال خواهد کرد. |
| </span> |
| </p> |
| </div> |
| `; |
| |
| resetBtn(); |
| }, 800); |
| } else { |
| displayError('خطا در تحویل نمونه صداها به سرور ربات: ' + data.message); |
| } |
| } catch (e) { |
| displayError('خطای ارتباط با سرور !'); |
| } |
| }; |
| |
| function displayError(msg) { |
| clearInterval(fakeProgressInterval); |
| imageResultContainer.innerHTML = `<div style="color: var(--danger-color); font-weight:bold; text-align:center; padding: 2rem;">خطا: ${msg}</div>`; |
| resetBtn(); |
| } |
| |
| function resetBtn() { |
| isSubmitting = false; |
| submitBtn.disabled = false; |
| document.getElementById('btn-text').style.display = 'inline-block'; |
| document.getElementById('btn-text').textContent = 'شروع شبیهسازی صدا 🚀'; |
| document.querySelector('.spinner').style.display = 'none'; |
| checkFormState(); |
| } |
| |
| |
| document.addEventListener('DOMContentLoaded', async () => { |
| userFingerprint = await getBrowserFingerprint(); |
| updateUIForSubscriptionStatus(userSubscriptionStatus); |
| |
| const canvas = document.getElementById('neural-network-canvas'); |
| if (!canvas) return; |
| const header = canvas.parentElement; |
| const ctx = canvas.getContext('2d'); |
| let particles = []; |
| const particleCount = 20; |
| const maxDistance = 100; |
| const computedStyles = getComputedStyle(document.documentElement); |
| const particleColor = computedStyles.getPropertyValue('--accent-primary').trim(); |
| const lineColor = computedStyles.getPropertyValue('--text-tertiary').trim(); |
| |
| function resizeCanvas() { |
| canvas.width = header.clientWidth; |
| canvas.height = header.clientHeight; |
| init(); |
| } |
| |
| class Particle { |
| constructor() { |
| this.x = Math.random() * canvas.width; |
| this.y = Math.random() * canvas.height; |
| this.vx = (Math.random() - 0.5) * 0.3; |
| this.vy = (Math.random() - 0.5) * 0.3; |
| this.radius = 1.2; |
| } |
| update() { |
| this.x += this.vx; |
| this.y += this.vy; |
| if (this.x < 0 || this.x > canvas.width) this.vx *= -1; |
| if (this.y < 0 || this.y > canvas.height) this.vy *= -1; |
| } |
| draw() { |
| ctx.beginPath(); |
| ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); |
| ctx.fillStyle = particleColor; |
| ctx.fill(); |
| } |
| } |
| |
| function init() { |
| particles = []; |
| for (let i = 0; i < particleCount; i++) { |
| particles.push(new Particle()); |
| } |
| } |
| |
| function connectParticles() { |
| for (let i = 0; i < particles.length; i++) { |
| for (let j = i + 1; j < particles.length; j++) { |
| const dx = particles[i].x - particles[j].x; |
| const dy = particles[i].y - particles[j].y; |
| const distance = Math.sqrt(dx * dx + dy * dy); |
| if (distance < maxDistance) { |
| ctx.beginPath(); |
| ctx.moveTo(particles[i].x, particles[i].y); |
| ctx.lineTo(particles[j].x, particles[j].y); |
| ctx.strokeStyle = lineColor; |
| ctx.lineWidth = 0.2; |
| ctx.globalAlpha = 1 - distance / maxDistance; |
| ctx.stroke(); |
| } |
| } |
| } |
| ctx.globalAlpha = 1; |
| } |
| |
| window.addEventListener('resize', resizeCanvas); |
| resizeCanvas(); |
| animate(); |
| }); |
| </script> |
| </body> |
| </html> |
