|
|
<!DOCTYPE html> |
|
|
<html lang="fa" dir="rtl"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>تولید صدای هوشمند با هوش مصنوعی | AI Sada - تبدیل متن به گفتار فارسی</title> |
|
|
<meta name="description" content="با AI Sada، متن فارسی خود را به صدایی طبیعی و با کیفیت استودیویی تبدیل کنید. از میان دهها گوینده حرفهای انتخاب کرده یا صدای خود را شبیهسازی کنید. سریع، آسان و قدرتمند."> |
|
|
<link rel="canonical" href="https://www.aisada.ir/"> |
|
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
|
|
|
|
|
|
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit" async defer></script> |
|
|
|
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap'); |
|
|
|
|
|
: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; --accent-secondary-hover: #0DA986; --accent-secondary-glow: rgba(15, 212, 168, 0.2); |
|
|
--accent-premium: #FFC107; --accent-premium-glow: rgba(255, 193, 7, 0.3); |
|
|
--shadow-sm: 0 1px 2px 0 rgba(26, 32, 44, 0.03); --shadow-md: 0 4px 6px -1px rgba(26, 32, 44, 0.05), 0 2px 4px -2px rgba(26, 32, 44, 0.04); |
|
|
--shadow-lg: 0 10px 15px -3px rgba(26, 32, 44, 0.06), 0 4px 6px -4px rgba(26, 32, 44, 0.05); |
|
|
--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-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); |
|
|
--transition-smooth: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); |
|
|
--transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); |
|
|
|
|
|
--card-bg: #FFFFFF; |
|
|
--danger: #E53E3E; |
|
|
} |
|
|
@keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } |
|
|
@keyframes modalZoomIn { from { opacity: 0; transform: scale(0.9) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } } |
|
|
@keyframes scaleIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } |
|
|
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } |
|
|
@keyframes rotate-loader-orbital { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } |
|
|
@keyframes orbit-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } |
|
|
@keyframes satellite-pulse-1 { from { transform: scale(0.7) translateX(-50%); opacity: 0.6; } to { transform: scale(1.1) translateX(-50%); opacity: 1; } } |
|
|
@keyframes satellite-pulse-2 { from { transform: scale(0.7) translateY(-50%); opacity: 0.6; } to { transform: scale(1.1) translateY(-50%); opacity: 1; } } |
|
|
@keyframes satellite-pulse-3 { from { transform: scale(0.7) translateX(50%); opacity: 0.6; } to { transform: scale(1.1) translateX(50%); opacity: 1; } } |
|
|
@keyframes shimmer { 100% { transform: translateX(100%); } } |
|
|
@keyframes pulse-soft { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } |
|
|
|
|
|
html { scroll-behavior: smooth; } |
|
|
body { |
|
|
font-family: var(--app-font); direction: rtl; background-color: var(--app-bg); |
|
|
color: var(--text-primary); font-size: 16px; line-height: 1.8; margin: 0; |
|
|
padding: 0; min-height: 100vh; -webkit-font-smoothing: antialiased; |
|
|
-moz-osx-font-smoothing: grayscale; |
|
|
} |
|
|
.page-wrapper { max-width: 820px; width: 92%; margin: 0 auto; padding: 2.5rem 0; } |
|
|
.app-container { max-width: 820px; width: 100%; margin: 0 auto; margin-bottom: 5rem; } |
|
|
.app-header { padding: 0.5rem 0 2.5rem 0; text-align: center; margin-bottom: 1.5rem; animation: fadeIn 0.8s 0.2s ease-out backwards; } |
|
|
.app-header h1 { font-size: 2.5em; font-weight: 900; 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; } |
|
|
.app-header p { font-size: 1.05em; color: var(--text-secondary); margin-top: 0; opacity: 0.9; font-weight: 400; line-height: 1.7; } |
|
|
.main-content { position:relative; 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.2rem; } |
|
|
label { display: block; font-weight: 700; color: var(--text-primary); font-size: 1.1em; margin-bottom: 1rem; } |
|
|
textarea, input[type="text"], input[type="email"] { width: 100%; padding: 1rem 1.2rem; border-radius: var(--radius-input); border: 1px solid var(--input-border); background-color: var(--input-bg); color: var(--text-primary); box-shadow: var(--shadow-sm) inset; font-family: var(--app-font); font-size: 1rem; box-sizing: border-box; transition: var(--transition-smooth); } |
|
|
textarea:focus, input[type="text"]:focus, input[type="email"]:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-primary-glow), var(--shadow-sm) inset; background-color: var(--panel-bg); } |
|
|
textarea { min-height: 120px; resize: vertical; } |
|
|
.slider-container { display: flex; align-items: center; gap: 1.5rem; } |
|
|
input[type="range"] { flex-grow: 1; -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: var(--input-border); border-radius: 3px; outline: none; cursor: pointer; } |
|
|
input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--accent-secondary) 0%, var(--accent-primary) 100%); height: 6px; border-radius: 3px; } |
|
|
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; background: #fff; border-radius: 50%; cursor: pointer; border: 4px solid var(--accent-primary); box-shadow: var(--shadow-md); margin-top: -9px; transition: var(--transition-fast); } |
|
|
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.15); box-shadow: 0 0 0 8px var(--accent-primary-glow); } |
|
|
.temperature-value { font-weight: 700; background-color: var(--input-bg); padding: 0.5rem 1rem; border-radius: 8px; border: 1px solid var(--input-border); min-width: 45px; text-align: center; color: var(--accent-primary); font-size: 1em; box-shadow: var(--shadow-sm); } |
|
|
.generate-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 1.1rem 1.5rem; font-size: 1.25em; 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 12px -3px var(--accent-primary-glow), 0 6px 12px -3px var(--accent-secondary-glow); position: relative; overflow: hidden; letter-spacing: 0.5px; } |
|
|
.generate-btn:hover:not(:disabled) { transform: translateY(-5px) scale(1.02); box-shadow: 0 8px 20px -4px var(--accent-primary-glow), 0 8px 20px -4px var(--accent-secondary-glow); } |
|
|
.generate-btn:disabled { background: var(--text-tertiary); cursor: not-allowed; box-shadow: none; color: rgba(255,255,255,0.7); } |
|
|
.generate-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;} |
|
|
.output-section { margin-top: 3rem; display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 220px; position: relative; box-sizing: border-box; padding: 2rem; background-color: var(--input-bg); border-radius: var(--radius-card); border: 2px dashed var(--input-border); box-shadow: var(--shadow-sm) inset; transition: var(--transition-smooth); } |
|
|
.output-section.has-content { background-color: var(--panel-bg); border: 1px solid var(--panel-border); box-shadow: var(--shadow-lg); padding: 0; min-height: auto; } |
|
|
.status-message { font-weight: 500; color: var(--text-secondary); text-align: center; font-size: 1.1em; } |
|
|
.status-message.error { color: #e53e3e; background-color: #fed7d7; padding: 1rem; border-radius: var(--radius-input); border: 1px solid #f56565; } |
|
|
.loading-animation-wrapper { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1.8rem; width: 100%; } |
|
|
.orbital-loader { width: 110px; height: 110px; position: relative; animation: rotate-loader-orbital 10s linear infinite; } |
|
|
.orbit { position: absolute; top: 50%; left: 50%; border: 2px dashed rgba(74, 108, 250, 0.35); border-radius: 50%; transform-origin: center center; } |
|
|
.orbit:nth-child(1) { width: 35px; height: 35px; margin: -17.5px 0 0 -17.5px; animation: orbit-spin 2.8s linear infinite reverse; } |
|
|
.orbit:nth-child(2) { width: 65px; height: 65px; margin: -32.5px 0 0 -32.5px; animation: orbit-spin 3.8s linear infinite; } |
|
|
.orbit:nth-child(3) { width: 95px; height: 95px; margin: -47.5px 0 0 -47.5px; animation: orbit-spin 4.8s linear infinite reverse; } |
|
|
.orbit .satellite { position: absolute; width: 10px; height: 10px; border-radius: 50%; background-color: var(--accent-primary); box-shadow: 0 0 8px var(--accent-primary), 0 0 12px var(--accent-secondary); } |
|
|
.orbit:nth-child(1) .satellite { top: -5px; left: 50%; animation: satellite-pulse-1 1.4s ease-in-out infinite alternate; } |
|
|
.orbit:nth-child(2) .satellite { top: 50%; left: -5px; background-color: var(--accent-secondary); animation: satellite-pulse-2 1.4s 0.2s ease-in-out infinite alternate; } |
|
|
.orbit:nth-child(3) .satellite { bottom: -5px; right: 50%; animation: satellite-pulse-3 1.4s 0.4s ease-in-out infinite alternate;} |
|
|
.loading-text { font-size: 1.2em; font-weight: 700; color: var(--text-primary); text-align: center; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } |
|
|
.audio-player-content { display: none; width: 100%; animation: fadeIn 0.5s ease-out; } |
|
|
|
|
|
|
|
|
.simple-player-container { display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 100%; padding: 1.5rem; box-sizing: border-box; background-color: var(--input-bg); border-radius: var(--radius-input); border: 1px solid var(--panel-border); margin-top: 10px;} |
|
|
.play-controls { display: flex; align-items: center; gap: 1rem; width: 100%; } |
|
|
.play-pause-btn-simple { background: linear-gradient(135deg, var(--accent-secondary), var(--accent-primary)); color: white; border: none; border-radius: 50%; width: 55px; height: 55px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(74, 108, 250, 0.4); flex-shrink: 0; } |
|
|
.play-pause-btn-simple:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(74, 108, 250, 0.5); } |
|
|
.play-pause-btn-simple svg { width: 28px; height: 28px; fill: currentColor; } |
|
|
.play-pause-btn-simple .play-icon { margin-right: -3px; } |
|
|
.progress-wrapper { display: flex; align-items: center; gap: 1rem; width: 100%; } |
|
|
.time-display { font-size: 0.9em; color: var(--text-secondary); font-variant-numeric: tabular-nums; min-width: 40px; text-align: center; } |
|
|
.audio-progress-bar { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; background: #e2e8f0; border-radius: 5px; outline: none; cursor: pointer; transition: all 0.2s ease; flex-grow: 1;} |
|
|
.audio-progress-bar::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: var(--accent-primary); border-radius: 50%; cursor: pointer; border: 3px solid white; box-shadow: var(--shadow-md); } |
|
|
.audio-progress-bar::-moz-range-thumb { width: 20px; height: 20px; background: var(--accent-primary); border-radius: 50%; cursor: pointer; border: 3px solid white; box-shadow: var(--shadow-md); } |
|
|
.audio-download-btn-new, .audio-download-btn-new:visited { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; max-width: 320px; margin-top: 0.5rem; padding: 0.9rem 1.5rem; font-size: 1.1em; font-weight: 700; background: linear-gradient(95deg, var(--accent-secondary) 0%, var(--accent-primary) 100%); color: #fff !important; text-decoration: none !important; border: none; border-radius: var(--radius-btn); cursor: pointer; transition: all 0.3s ease; box-shadow: 0 5px 15px -3px var(--accent-primary-glow), 0 5px 15px -3px var(--accent-secondary-glow); } |
|
|
.audio-download-btn-new:hover { transform: translateY(-3px); box-shadow: 0 8px 20px -4px var(--accent-primary-glow), 0 8px 20px -4px var(--accent-secondary-glow); } |
|
|
.audio-download-btn-new svg { width: 20px; height: 20px; fill: currentColor; } |
|
|
|
|
|
|
|
|
.simple-player-container.compact-player { |
|
|
padding: 0.8rem; |
|
|
gap: 0.5rem; |
|
|
background: #f8f9fa; |
|
|
border: 1px solid #e9ecef; |
|
|
} |
|
|
.simple-player-container.compact-player .play-pause-btn-simple { |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
} |
|
|
.simple-player-container.compact-player .play-pause-btn-simple svg { |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
} |
|
|
.simple-player-container.compact-player .audio-download-btn-new { |
|
|
padding: 0.6rem 1rem; |
|
|
font-size: 0.9rem; |
|
|
max-width: 200px; |
|
|
margin-top: 5px; |
|
|
} |
|
|
.simple-player-container.compact-player .time-display { |
|
|
font-size: 0.8rem; |
|
|
min-width: 35px; |
|
|
} |
|
|
|
|
|
#standard-view .char-counter-wrapper { font-size: 0.85em; color: var(--text-tertiary); text-align: left; margin-top: 0.75rem; padding: 0 0.2rem; } |
|
|
#standard-view #char-count { font-weight: 600; color: var(--accent-primary); } |
|
|
#standard-view #selected-speaker-display { text-align: center; margin-top: 1.5rem; } |
|
|
#standard-view #selected-speaker-card { display: inline-flex; align-items: center; background: linear-gradient(135deg, var(--input-bg) 0%, var(--panel-bg) 100%); border-radius: 50px; padding: 0.75rem 0.75rem 0.75rem 1.5rem; box-shadow: var(--shadow-md); border: 1px solid var(--panel-border); transition: var(--transition-bounce); cursor: pointer; margin-bottom: 1.5rem; } |
|
|
#standard-view #selected-speaker-card:hover { transform: translateY(-6px) scale(1.03); box-shadow: var(--shadow-lg); border-color: var(--accent-primary); } |
|
|
#standard-view #selected-speaker-card img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; margin-left: 1rem; border: 3px solid var(--accent-secondary); box-shadow: 0 0 15px -3px var(--accent-secondary-glow); transition: var(--transition-smooth); } |
|
|
#standard-view #selected-speaker-info { text-align: right; } |
|
|
#standard-view #selected-speaker-info h3 { margin: 0; font-size: 1.25em; font-weight: 800; } |
|
|
#standard-view #selected-speaker-info p { margin: 2px 0 0; color: var(--text-secondary); font-size: 0.85em; font-weight: 500; } |
|
|
#standard-view #change-speaker-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; border-radius: var(--radius-btn); background: var(--panel-bg); border: 1px solid var(--input-border); color: var(--text-primary); cursor: pointer; font-family: var(--app-font); font-weight: 600; font-size: 1em; transition: var(--transition-smooth); box-shadow: var(--shadow-md); } |
|
|
#standard-view #change-speaker-btn:hover { background: var(--input-bg); border-color: var(--accent-primary); color: var(--accent-primary); transform: translateY(-3px) scale(1.05); box-shadow: var(--shadow-lg); } |
|
|
.label-with-info { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.2rem; } |
|
|
.label-with-info label { margin-bottom: 0; } |
|
|
.info-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background-color: var(--input-bg); border: 1px solid var(--input-border); color: var(--text-secondary); font-size: 0.9em; font-weight: 700; cursor: pointer; transition: var(--transition-smooth); user-select: none; } |
|
|
.info-icon:hover { background-color: var(--accent-primary); color: white; border-color: var(--accent-primary); transform: scale(1.1); box-shadow: 0 0 10px var(--accent-primary-glow); } |
|
|
#voice-clone-view { display: none; } |
|
|
#voice-clone-view .input-description { font-size: 0.9em; color: var(--text-secondary); margin-top: -10px; margin-bottom: 1rem; line-height: 1.7; } |
|
|
#voice-clone-view .label-subtitle { font-size: 0.85em; color: #8A94A6; font-weight: 500; margin-top: -12px; margin-bottom: 12px; } |
|
|
#voice-clone-view .upload-area { border: 2px dashed var(--input-border); border-radius: var(--radius-input); padding: 2rem; text-align: center; cursor: pointer; transition: var(--transition-smooth); background-color: var(--input-bg); } |
|
|
#voice-clone-view .upload-area:hover, #voice-clone-view .upload-area.drag-over { border-color: var(--accent-primary); background-color: #fff; box-shadow: 0 0 15px var(--accent-primary-glow); } |
|
|
#voice-clone-view .upload-icon svg { width: 48px; height: 48px; color: var(--accent-primary); margin-bottom: 1rem; stroke-width: 1.5; opacity: 0.8; } |
|
|
#voice-clone-view .upload-area p { margin: 0; color: var(--text-secondary); font-weight: 500; } |
|
|
#voice-clone-view #file-preview { display: none; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; background-color: var(--input-bg); border-radius: var(--radius-input); margin-top: 1rem; animation: fadeIn 0.3s; border: 1px solid var(--panel-border); } |
|
|
#voice-clone-view #file-info { display: flex; align-items: center; gap: 1rem; overflow: hidden; } |
|
|
#voice-clone-view .preview-play-btn { background: var(--accent-secondary); color: white; border: none; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; flex-shrink: 0; } |
|
|
#voice-clone-view .preview-play-btn:hover { background-color: var(--accent-secondary-hover); transform: scale(1.1); } |
|
|
#voice-clone-view .preview-play-btn svg { width: 20px; height: 20px; fill: currentColor; } |
|
|
#voice-clone-view .pause-icon-preview { display: none; } |
|
|
#voice-clone-view #file-name { font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } |
|
|
#voice-clone-view #remove-file-btn { background: none; border: none; color: var(--text-tertiary); cursor: pointer; font-size: 1.5rem; transition: all 0.2s; flex-shrink: 0; } |
|
|
#voice-clone-view #remove-file-btn:hover { color: #e53e3e; transform: scale(1.1); } |
|
|
#back-to-standard-btn { position: absolute; top: 1.5rem; left: 1.5rem; background: var(--input-bg); border: 1px solid var(--panel-border); color: var(--text-secondary); font-size: 0.9em; font-weight: 600; padding: 0.6rem 1rem; border-radius: var(--radius-btn); cursor: pointer; display: flex; align-items: center; gap: 0.5rem; transition: all 0.2s ease; } |
|
|
#back-to-standard-btn:hover { background: var(--accent-primary); color: white; transform: scale(1.05); box-shadow: var(--shadow-md); } |
|
|
#back-to-standard-btn svg { width: 1.2em; height: 1.2em; } |
|
|
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(18, 24, 38, 0.6); backdrop-filter: blur(10px) saturate(150%); display: none; align-items: center; justify-content: center; z-index: 1000; opacity: 0; transition: opacity var(--transition-smooth); } |
|
|
.modal-overlay.visible { display: flex; opacity: 1; } |
|
|
.modal-dialog { background: var(--panel-bg); padding: 2.5rem; border-radius: var(--radius-card); width: 90%; box-shadow: var(--shadow-xl); border: 1px solid var(--panel-border); opacity: 0; animation: modalZoomIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; position: relative; } |
|
|
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--panel-border); } |
|
|
.modal-header h2 { margin: 0; font-size: 1.8em; font-weight: 800; color: var(--accent-primary); } |
|
|
.close-modal-btn { background: linear-gradient(90deg, #8A2BE2, #EC4899); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-fill-color: transparent; border: none; font-size: 3rem; font-weight: 700; cursor: pointer; transition: var(--transition-smooth); line-height: 1; padding: 0; } |
|
|
.close-modal-btn:hover { transform: rotate(90deg) scale(1.1); opacity: 0.8; } |
|
|
#speaker-modal .modal-dialog { max-width: 750px; max-height: 85vh; overflow-y: auto; } |
|
|
#speaker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } |
|
|
.speaker-card { cursor: pointer; transition: var(--transition-smooth); text-align: center; position: relative; border-radius: var(--radius-card); padding: 0.5rem; } |
|
|
.speaker-card:hover { transform: translateY(-8px); } |
|
|
.speaker-card input[type="radio"] { display: none; } |
|
|
.speaker-card .speaker-visual { border: 3px solid transparent; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-md); position: relative; background-color: var(--input-bg); transition: var(--transition-bounce); } |
|
|
.speaker-card:hover .speaker-visual { box-shadow: var(--shadow-lg); } |
|
|
.speaker-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background-color: #e0e0e0; border-radius: 14px; transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } |
|
|
.speaker-card:hover img { transform: scale(1.1); } |
|
|
.speaker-card .speaker-name { padding: 0.8rem 0.4rem 0.2rem; font-weight: 600; font-size: 0.95em; color: var(--text-secondary); transition: color 0.2s; } |
|
|
.speaker-card input[type="radio"]:checked + .speaker-visual { border-color: var(--accent-secondary); box-shadow: 0 0 25px -5px var(--accent-secondary-glow); transform: scale(1.05); } |
|
|
.special-card .speaker-visual { background: linear-gradient(135deg, hsl(230, 96%, 62%), hsl(230, 96%, 50%)); display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1 / 1; color: white; border-color: transparent; } |
|
|
.special-card:hover .speaker-visual { background: linear-gradient(135deg, hsl(230, 96%, 65%), hsl(230, 96%, 55%)); box-shadow: 0 8px 25px -5px var(--accent-primary-glow); } |
|
|
.special-card .speaker-visual svg { width: 40%; height: 40%; opacity: 0.8; margin-bottom: 8px; } |
|
|
.special-card .speaker-name { font-weight: 700; color: var(--text-primary); } |
|
|
|
|
|
|
|
|
.add-model-card .speaker-visual { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1 / 1; color: white; border-color: transparent; } |
|
|
.add-model-card:hover .speaker-visual { box-shadow: 0 8px 25px -5px rgba(118, 75, 162, 0.4); transform: scale(1.05); } |
|
|
.add-model-card .speaker-visual svg { width: 40%; height: 40%; opacity: 0.9; animation: pulse-soft 2s infinite; } |
|
|
|
|
|
.model-actions { position: absolute; top: 10px; right: 10px; display: flex; gap: 5px; opacity: 0; transition: opacity 0.3s; z-index: 5; } |
|
|
.speaker-card:hover .model-actions { opacity: 1; } |
|
|
.model-action-btn { background: rgba(0,0,0,0.6); color: white; border: none; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; font-size: 14px; } |
|
|
.model-action-btn:hover { transform: scale(1.1); } |
|
|
.btn-edit:hover { background: #3B82F6; } |
|
|
.btn-delete:hover { background: #EF4444; } |
|
|
.custom-model-badge { position: absolute; bottom: 0; right: 0; background: var(--accent-secondary); color: white; padding: 2px 8px; font-size: 0.7em; border-radius: 8px 0 14px 0; font-weight: 700; z-index: 4; } |
|
|
|
|
|
|
|
|
.upgrade-modal-dark .modal-dialog { |
|
|
background-color: #0f172a; |
|
|
color: white; |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
box-shadow: 0 0 50px rgba(139, 92, 246, 0.3); |
|
|
max-width: 380px; |
|
|
width: 90%; |
|
|
border-radius: 2.5rem; |
|
|
overflow: hidden; |
|
|
max-height: 90vh; |
|
|
overflow-y: auto; |
|
|
} |
|
|
.upgrade-modal-dark .modal-header { border-bottom: none; justify-content: flex-end; padding-bottom: 0; margin-bottom: 0.5rem; } |
|
|
.upgrade-modal-dark .close-modal-btn { color: rgba(255,255,255,0.5); font-size: 2rem; } |
|
|
.upgrade-modal-dark .close-modal-btn:hover { color: white; } |
|
|
|
|
|
.glow-bg-purple { position: absolute; top: -50px; right: -50px; width: 200px; height: 200px; background: rgba(147, 51, 234, 0.2); border-radius: 50%; filter: blur(80px); pointer-events: none; } |
|
|
.glow-bg-blue { position: absolute; bottom: -50px; left: -50px; width: 200px; height: 200px; background: rgba(37, 99, 235, 0.2); border-radius: 50%; filter: blur(80px); pointer-events: none; } |
|
|
|
|
|
.magic-icon-wrapper { position: relative; width: 80px; height: 80px; margin: 0 auto 1.2rem auto; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1e293b, #334155); border-radius: 2rem; border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); transform: rotate(6deg); transition: transform 0.3s; } |
|
|
.magic-icon-wrapper:hover { transform: rotate(12deg) scale(1.05); } |
|
|
.magic-icon-wrapper i { font-size: 2rem; background: linear-gradient(135deg, #fcd34d, #d97706); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } |
|
|
|
|
|
.upgrade-title { text-align: center; font-size: 1.25rem; font-weight: 900; margin-bottom: 1rem; line-height: 1.4; color: white; } |
|
|
.upgrade-features-box { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); border-radius: 1.5rem; padding: 1.2rem; border: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 1.5rem; } |
|
|
.upgrade-desc { font-size: 0.85rem; color: #cbd5e1; line-height: 1.7; margin-bottom: 1rem; text-align: right; } |
|
|
|
|
|
.upgrade-list { display: flex; flex-direction: column; gap: 0.6rem; } |
|
|
.upgrade-item { display: flex; align-items: center; gap: 0.6rem; font-size: 0.8rem; color: #94a3b8; background: rgba(255, 255, 255, 0.05); padding: 0.6rem; border-radius: 0.8rem; } |
|
|
.upgrade-item i { color: #22c55e; flex-shrink: 0; } |
|
|
|
|
|
.upgrade-btn-action { width: 100%; padding: 1rem; border-radius: 1rem; font-weight: 900; font-size: 1rem; color: #0f172a; background: linear-gradient(90deg, #fcd34d, #f59e0b); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 0 20px rgba(245, 158, 11, 0.2); } |
|
|
.upgrade-btn-action:hover { transform: translateY(-2px); box-shadow: 0 10px 25px -5px rgba(245, 158, 11, 0.4); } |
|
|
.upgrade-cancel-btn { width: 100%; background: none; border: none; color: #64748b; font-size: 0.8rem; font-weight: 700; padding: 0.8rem; cursor: pointer; margin-top: 0.2rem; } |
|
|
.upgrade-cancel-btn:hover { color: white; } |
|
|
|
|
|
|
|
|
@media (max-height: 720px), (max-width: 370px) { |
|
|
.upgrade-modal-dark .modal-dialog { padding: 1.5rem 1rem; margin: 1rem; } |
|
|
.magic-icon-wrapper { width: 60px; height: 60px; margin-bottom: 0.8rem; } |
|
|
.magic-icon-wrapper i { font-size: 1.5rem; } |
|
|
.upgrade-title { font-size: 1.1rem; margin-bottom: 0.8rem; } |
|
|
.upgrade-desc { font-size: 0.75rem; line-height: 1.6; margin-bottom: 0.8rem; } |
|
|
.upgrade-item { padding: 0.5rem; font-size: 0.75rem; } |
|
|
.upgrade-features-box { padding: 1rem; margin-bottom: 1rem; } |
|
|
.upgrade-btn-action { padding: 0.8rem; font-size: 0.95rem; } |
|
|
} |
|
|
|
|
|
#credit-status-message { text-align: center; color: var(--text-secondary); font-weight: 600; margin: 1rem 0; opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease; height: 0; overflow: hidden; } |
|
|
#credit-status-message.visible { opacity: 1; transform: translateY(0); height: auto; padding: 0.5rem 0; } |
|
|
@media (max-width: 600px) { |
|
|
.page-wrapper { padding: 1.5rem 0; } |
|
|
.main-content { padding: 1.5rem; } |
|
|
.app-header h1 { font-size: 2em; } |
|
|
#standard-view #selected-speaker-card { flex-direction: column; padding: 1rem; border-radius: var(--radius-card); } |
|
|
#standard-view #selected-speaker-card img { margin-left: 0; margin-bottom: 1rem; } |
|
|
#back-to-standard-btn { top: 1rem; left: 1rem; padding: 0.5rem 0.8rem; font-size: 0.8em; } |
|
|
} |
|
|
@media (max-width: 500px) { #speaker-grid { grid-template-columns: repeat(2, 1fr); } } |
|
|
.landing-section { padding: 4rem 0; text-align: center; border-top: 1px solid var(--panel-border); } |
|
|
.landing-section .subtitle { font-size: 1.1em; color: var(--text-secondary); max-width: 600px; margin: 0 auto 3rem auto; } |
|
|
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-top: 3rem; } |
|
|
.feature-card { background-color: var(--panel-bg); padding: 2rem; border-radius: var(--radius-card); box-shadow: var(--shadow-lg); border: 1px solid var(--panel-border); transition: all 0.3s ease; } |
|
|
.feature-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-xl); border-color: var(--accent-primary); } |
|
|
.feature-card .icon { font-size: 2.5rem; margin-bottom: 1rem; color: var(--accent-primary); } |
|
|
.feature-card h3 { font-size: 1.3em; margin-bottom: 0.5rem; color: var(--text-primary); } |
|
|
.feature-card p { color: var(--text-secondary); font-size: 0.95em; line-height: 1.7; } |
|
|
.faq-accordion { max-width: 700px; margin: 3rem auto 0 auto; text-align: right; } |
|
|
.faq-item { background-color: var(--panel-bg); border-radius: var(--radius-input); margin-bottom: 1rem; border: 1px solid var(--panel-border); box-shadow: var(--shadow-md); } |
|
|
.landing-section.faq > h2 { font-size: 2.2em; font-weight: 800; margin-bottom: 1rem; color: #1A202C; background: none; -webkit-background-clip: unset; -webkit-text-fill-color: unset; background-clip: unset; text-fill-color: unset; display: inline-block; } |
|
|
.faq-question { width: 100%; padding: 1.2rem 1.5rem; font-family: var(--app-font); font-size: 1.1em; font-weight: 600; background: none; border: none; text-align: right; cursor: pointer; display: flex; justify-content: space-between; align-items: center; color: #1A202C !important; } |
|
|
.faq-question::after { content: '+'; font-size: 1.5em; color: var(--accent-primary); transition: transform 0.3s ease; } |
|
|
.faq-item.active .faq-question::after { transform: rotate(45deg); } |
|
|
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; color: var(--text-secondary); font-size: 1em; line-height: 1.8; } |
|
|
.faq-answer p { padding: 0 1.5rem 1.2rem 1.5rem; margin: 0; } |
|
|
.site-footer { text-align: center; padding: 2rem 0; margin-top: 3rem; border-top: 1px solid var(--panel-border); color: var(--text-tertiary); } |
|
|
.site-footer a { color: var(--accent-primary); text-decoration: none; font-weight: 600; } |
|
|
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 3rem; } |
|
|
.pricing-card { background-color: var(--panel-bg); padding: 2rem; border-radius: var(--radius-card); box-shadow: var(--shadow-lg); border: 2px solid var(--panel-border); text-align: center; transition: all 0.3s ease; } |
|
|
.pricing-card:hover { transform: translateY(-10px) scale(1.03); border-color: var(--accent-primary); box-shadow: var(--shadow-xl); } |
|
|
.pricing-card h3 { font-size: 1.5em; margin-top: 0; color: var(--text-primary); } |
|
|
.pricing-card .price { font-size: 2.5em; font-weight: 900; color: var(--accent-primary); margin: 1rem 0; } |
|
|
.pricing-card .price span { font-size: 0.5em; font-weight: 500; color: var(--text-secondary); } |
|
|
.pricing-card .select-plan-btn { width: 100%; padding: 1rem; margin-top: 1.5rem; font-family: var(--app-font); font-size: 1.1em; font-weight: 700; background: var(--accent-primary); color: white; border: none; border-radius: var(--radius-btn); cursor: pointer; transition: all 0.2s ease; } |
|
|
.pricing-card .select-plan-btn:hover { background: var(--accent-primary-hover); transform: translateY(-3px); box-shadow: 0 6px 15px var(--accent-primary-glow); } |
|
|
@media (max-width: 768px) { .pricing-grid { grid-template-columns: 1fr; } } |
|
|
.header-actions { margin-top: 1rem; text-align: center;} |
|
|
#user-status-container { |
|
|
padding: 0.75rem 1.5rem; |
|
|
background-color: var(--input-bg); |
|
|
border-radius: var(--radius-btn); |
|
|
display: none; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
gap: 0.5rem; |
|
|
animation: fadeIn 0.5s; |
|
|
border: 1px solid var(--panel-border); |
|
|
max-width: 320px; |
|
|
margin: 0 auto; |
|
|
} |
|
|
#user-status-details { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 1rem; |
|
|
} |
|
|
#user-status-container .user-email { font-weight: 700; color: var(--text-primary); } |
|
|
#user-status-container .user-sub-status { font-weight: 600; padding: 0.3rem 1rem; border-radius: 20px; font-size: 0.9em; white-space: nowrap; } |
|
|
.status-paid { background-color: var(--accent-secondary-glow); color: var(--accent-secondary-hover); border: 1px solid var(--accent-secondary); } |
|
|
.status-free { background-color: #e2e8f0; color: #4a5568; } |
|
|
#user-status-container .logout-btn { background: none; border: none; color: var(--text-tertiary); cursor: pointer; font-weight: 600; font-size: 0.9em; } |
|
|
#user-status-container .logout-btn:hover { color: #e53e3e; } |
|
|
#login-check-btn { |
|
|
background: var(--input-bg); |
|
|
border: 1px solid var(--panel-border); |
|
|
color: var(--text-primary); |
|
|
font-size: 1em; |
|
|
font-weight: 600; |
|
|
padding: 0.75rem 1.5rem; |
|
|
border-radius: var(--radius-btn); |
|
|
cursor: pointer; |
|
|
transition: var(--transition-smooth); |
|
|
display: inline-block; |
|
|
} |
|
|
#login-check-btn:hover { |
|
|
background: var(--accent-primary); |
|
|
color: white; |
|
|
transform: translateY(-3px); |
|
|
box-shadow: var(--shadow-lg); |
|
|
} |
|
|
@keyframes pulse-glow { |
|
|
0%, 100% { box-shadow: 0 0 20px rgba(29, 161, 242, 0.4); } |
|
|
50% { box-shadow: 0 0 35px rgba(29, 161, 242, 0.8); } |
|
|
} |
|
|
.contact-section { |
|
|
background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%); |
|
|
padding: 3rem 2rem; |
|
|
margin-top: 4rem; |
|
|
border-radius: var(--radius-card); |
|
|
text-align: center; |
|
|
color: white; |
|
|
box-shadow: var(--shadow-xl); |
|
|
} |
|
|
.contact-section h2 { |
|
|
margin: 0 0 1rem 0; |
|
|
font-size: 2em; |
|
|
font-weight: 800; |
|
|
text-shadow: 0 2px 4px rgba(0,0,0,0.2); |
|
|
} |
|
|
.contact-section p { |
|
|
margin: 0 0 2rem 0; |
|
|
opacity: 0.9; |
|
|
font-size: 1.1em; |
|
|
} |
|
|
.contact-button { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
gap: 12px; |
|
|
padding: 1rem 2rem; |
|
|
background-color: white; |
|
|
color: #1DA1F2; |
|
|
border-radius: var(--radius-btn); |
|
|
text-decoration: none; |
|
|
font-weight: 700; |
|
|
font-size: 1.1em; |
|
|
box-shadow: var(--shadow-lg); |
|
|
transition: all 0.3s ease; |
|
|
animation: pulse-glow 3s infinite ease-in-out; |
|
|
} |
|
|
.contact-button:hover { |
|
|
transform: translateY(-5px) scale(1.05); |
|
|
box-shadow: var(--shadow-xl); |
|
|
background-color: #f0f8ff; |
|
|
} |
|
|
.contact-button svg { |
|
|
width: 24px; |
|
|
height: 24px; |
|
|
} |
|
|
@media (min-width: 500px) { |
|
|
#user-status-container { |
|
|
flex-direction: row; |
|
|
gap: 1rem; |
|
|
} |
|
|
} |
|
|
|
|
|
#cf-container-standard, #cf-container-clone, #cf-container-login { |
|
|
margin: 1.5rem 0; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
|
|
|
.history-container { |
|
|
margin-top: 2rem; |
|
|
border-top: 1px solid var(--panel-border); |
|
|
padding-top: 2rem; |
|
|
} |
|
|
.history-header { |
|
|
display: flex; align-items: center; gap: 10px; |
|
|
color: var(--text-primary); margin-bottom: 1.5rem; |
|
|
font-size: 1.2rem; font-weight: 800; |
|
|
border-right: 4px solid var(--accent-primary); |
|
|
padding-right: 10px; |
|
|
justify-content: space-between; |
|
|
} |
|
|
|
|
|
.history-list { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 1rem; |
|
|
} |
|
|
|
|
|
|
|
|
.request-card { |
|
|
background: var(--card-bg); |
|
|
border-radius: 16px; |
|
|
padding: 1.5rem; |
|
|
margin-bottom: 1.2rem; |
|
|
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03); |
|
|
border: 1px solid #E2E8F0; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
transition: transform 0.2s; |
|
|
} |
|
|
.request-card:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.08); } |
|
|
|
|
|
.card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; } |
|
|
.card-info { display: flex; flex-direction: column; gap: 4px; } |
|
|
.project-name { font-weight: 700; font-size: 1.1rem; color: var(--text-primary); margin: 0; line-height: 1.4; } |
|
|
.project-date { font-size: 0.85rem; color: var(--text-secondary); } |
|
|
|
|
|
|
|
|
.delete-trigger { |
|
|
background: transparent !important; |
|
|
border: none; |
|
|
cursor: pointer; |
|
|
color: #ff0000 !important; |
|
|
transition: 0.2s; |
|
|
padding: 8px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
border-radius: 50%; |
|
|
} |
|
|
.delete-trigger:hover { |
|
|
background-color: #ffe5e5 !important; |
|
|
transform: scale(1.1); |
|
|
} |
|
|
.delete-trigger svg { |
|
|
stroke-width: 2.5; |
|
|
stroke: currentColor; |
|
|
} |
|
|
|
|
|
|
|
|
.processing-content { text-align: center; width: 100%; } |
|
|
.progress-track { |
|
|
background: #EDF2F7; height: 10px; width: 100%; border-radius: 10px; |
|
|
overflow: hidden; margin-bottom: 10px; position: relative; |
|
|
} |
|
|
.progress-bar { |
|
|
height: 100%; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); |
|
|
width: 0%; border-radius: 10px; |
|
|
transition: width 0.5s ease; |
|
|
position: relative; |
|
|
} |
|
|
.progress-bar::after { |
|
|
content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; |
|
|
background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); |
|
|
background-size: 1rem 1rem; animation: progress-stripes 1s linear infinite; |
|
|
} |
|
|
@keyframes progress-stripes { from { background-position: 1rem 0; } to { background-position: 0 0; } } |
|
|
|
|
|
.progress-text { display: flex; justify-content: space-between; font-size: 0.85rem; font-weight: 700; color: var(--accent-primary); margin-bottom: 8px; } |
|
|
|
|
|
.info-box { |
|
|
background: #EBF8FF; border: 1px solid #BEE3F8; color: #2C5282; |
|
|
padding: 10px; border-radius: 8px; font-size: 0.8rem; line-height: 1.6; |
|
|
display: flex; align-items: flex-start; gap: 8px; text-align: right; |
|
|
} |
|
|
.info-icon { font-size: 1.1rem; } |
|
|
|
|
|
|
|
|
.delete-overlay { |
|
|
position: absolute; top: 0; left: 0; width: 100%; height: 100%; |
|
|
background: rgba(255, 255, 255, 0.95); |
|
|
backdrop-filter: blur(4px); |
|
|
display: flex; flex-direction: column; align-items: center; justify-content: center; |
|
|
opacity: 0; pointer-events: none; transition: 0.3s; |
|
|
transform: translateY(10px); |
|
|
z-index: 10; |
|
|
border-radius: 16px; |
|
|
} |
|
|
.request-card.deleting .delete-overlay { opacity: 1; pointer-events: auto; transform: translateY(0); } |
|
|
|
|
|
.delete-text { color: #000000 !important; font-weight: 800; margin-bottom: 1.5rem; font-size: 1rem; } |
|
|
.delete-actions { display: flex; gap: 1rem; } |
|
|
|
|
|
|
|
|
.btn-cancel { |
|
|
background: #4A5568 !important; |
|
|
color: #ffffff !important; |
|
|
border: 2px solid #2D3748 !important; |
|
|
padding: 10px 24px; |
|
|
border-radius: 10px; |
|
|
cursor: pointer; |
|
|
font-family: inherit; |
|
|
font-size: 0.95rem; |
|
|
font-weight: 600; |
|
|
transition: all 0.2s; |
|
|
} |
|
|
.btn-cancel:hover { background: #2D3748 !important; } |
|
|
|
|
|
|
|
|
.btn-confirm { |
|
|
background: #E53E3E !important; |
|
|
color: white !important; |
|
|
border: none; |
|
|
padding: 10px 24px; |
|
|
border-radius: 10px; |
|
|
cursor: pointer; |
|
|
font-family: inherit; |
|
|
font-size: 0.95rem; |
|
|
font-weight: 600; |
|
|
transition: all 0.2s; |
|
|
box-shadow: 0 4px 6px rgba(229, 62, 62, 0.3); |
|
|
} |
|
|
.btn-confirm:hover { background: #c53030 !important; transform: translateY(-2px); } |
|
|
|
|
|
|
|
|
#upload-guide-modal .modal-dialog { |
|
|
max-width: 420px; |
|
|
padding: 1.5rem; |
|
|
border-radius: 20px; |
|
|
text-align: center; |
|
|
} |
|
|
.guide-header { |
|
|
text-align: center; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
.guide-icon-animated { |
|
|
width: 55px; height: 55px; |
|
|
background: linear-gradient(135deg, #e0e7ff, #f3f4f6); |
|
|
color: var(--accent-primary); |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
margin: 0 auto 10px auto; |
|
|
box-shadow: 0 5px 15px -3px var(--accent-primary-glow); |
|
|
} |
|
|
.guide-icon-animated svg { |
|
|
width: 28px; height: 28px; |
|
|
animation: pulse-soft 2s infinite; |
|
|
} |
|
|
.guide-title { |
|
|
font-size: 1.1rem; |
|
|
font-weight: 800; |
|
|
margin: 0; |
|
|
color: var(--text-primary); |
|
|
} |
|
|
.guide-content { |
|
|
font-size: 0.9rem; |
|
|
line-height: 1.7; |
|
|
color: var(--text-secondary); |
|
|
background: #F8F9FC; |
|
|
padding: 12px; |
|
|
border-radius: 12px; |
|
|
margin-bottom: 12px; |
|
|
text-align: justify; |
|
|
} |
|
|
.guide-alert { |
|
|
background: #FFF7ED; |
|
|
border: 1px dashed #FDBA74; |
|
|
padding: 10px; |
|
|
border-radius: 10px; |
|
|
font-size: 0.8rem; |
|
|
display: flex; gap: 8px; |
|
|
margin-bottom: 1rem; |
|
|
color: #9A3412; |
|
|
align-items: flex-start; |
|
|
text-align: right; |
|
|
} |
|
|
#upload-guide-confirm-btn { |
|
|
width: 100%; |
|
|
background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); |
|
|
color: white; |
|
|
font-weight: 700; |
|
|
padding: 0.8rem; |
|
|
border-radius: 12px; |
|
|
border: none; |
|
|
cursor: pointer; |
|
|
font-size: 1rem; |
|
|
transition: transform 0.2s; |
|
|
} |
|
|
#upload-guide-confirm-btn:hover { |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 380px) { |
|
|
#upload-guide-modal .modal-dialog { padding: 1rem; } |
|
|
.guide-icon-animated { width: 45px; height: 45px; margin-bottom: 8px; } |
|
|
.guide-icon-animated svg { width: 22px; height: 22px; } |
|
|
.guide-title { font-size: 1rem; } |
|
|
.guide-content { font-size: 0.85rem; padding: 10px; line-height: 1.6; } |
|
|
.guide-alert { font-size: 0.75rem; padding: 8px; } |
|
|
#upload-guide-confirm-btn { padding: 0.7rem; font-size: 0.95rem; } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<div class="page-wrapper"> |
|
|
<div class="app-container"> |
|
|
<div id="standard-view"> |
|
|
<header class="app-header"> |
|
|
<h1>مولد صدای هوشمند Ai صدا</h1> |
|
|
<p>کیفیت استودیو، قدرت هوش مصنوعی. متن فارسی را به صدایی طبیعی و با کیفیت استودیویی تبدیل کنید.</p> |
|
|
<div class="header-actions"> |
|
|
<div id="user-status-container"> |
|
|
<span id="user-email-display" class="user-email"></span> |
|
|
<div id="user-status-details"> |
|
|
<span id="user-sub-status-display" class="user-sub-status"></span> |
|
|
<button id="logout-btn" class="logout-btn">خروج</button> |
|
|
</div> |
|
|
</div> |
|
|
<button id="login-check-btn">ورود / ثبت نام</button> |
|
|
</div> |
|
|
</header> |
|
|
<main class="main-content"> |
|
|
<form id="standard-tts-form" onsubmit="return false;"> |
|
|
<div class="form-group"><label for="text-input-standard">📝 متن اصلی</label><textarea id="text-input-standard" rows="5" placeholder="متن خود را برای تبدیل به گفتار اینجا وارد کنید..."></textarea><div class="char-counter-wrapper"><span id="char-count">0</span> / <span id="char-max">50000</span> نویسه</div></div> |
|
|
<div class="form-group"><label for="prompt-input-standard">🗣️ توصیف لحن و احساس (اختیاری)</label><input type="text" id="prompt-input-standard" placeholder="مثال: با لحنی آرام و قصهگو"></div> |
|
|
<div class="form-group"> |
|
|
<label>🎤 گوینده منتخب</label> |
|
|
<div id="selected-speaker-display"> |
|
|
<div id="selected-speaker-card" title="برای تغییر گوینده کلیک کنید"> |
|
|
<img id="selected-speaker-img" src="" alt="عکس گوینده"> |
|
|
<div id="selected-speaker-info"> |
|
|
<h3 id="selected-speaker-name"></h3> |
|
|
<p id="selected-speaker-desc"></p> |
|
|
</div> |
|
|
</div> |
|
|
<button type="button" id="change-speaker-btn">تغییر گوینده</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="form-group"><div class="label-with-info"><label for="temperature-slider-standard">🌡️ خلاقیت و پویایی صدا</label><div class="info-icon" id="temp-info-icon" role="button" tabindex="0" aria-label="اطلاعات بیشتر">!</div></div><div class="slider-container"><input type="range" id="temperature-slider-standard" class="temperature-slider" min="0.1" max="1.5" step="0.05" value="0.9"><span id="temperature-value-standard" class="temperature-value">0.9</span></div></div> |
|
|
<p id="credit-status-message"></p> |
|
|
|
|
|
|
|
|
<div id="cf-container-standard"></div> |
|
|
|
|
|
<button type="submit" id="generate-btn-standard" class="generate-btn"><span class="btn-text">✨ خلق صدا با آلفا</span><div class="spinner"></div></button> |
|
|
</form> |
|
|
<div id="output-section-standard" class="output-section"> |
|
|
<div id="status-message-standard" class="status-message">صدای تولید شده در اینجا ظاهر خواهد شد.</div> |
|
|
<div id="loading-animation-wrapper-standard" class="loading-animation-wrapper"><div class="orbital-loader"><div class="orbit"><div class="satellite"></div></div><div class="orbit"><div class="satellite"></div></div><div class="orbit"><div class="satellite"></div></div></div><p class="loading-text">در حال پردازش هوشمند و تولید صدا...</p></div> |
|
|
<div id="audio-player-content-standard" class="audio-player-content"></div> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
|
|
|
<div id="voice-clone-view"> |
|
|
<header class="app-header"> |
|
|
<h1>شبیهسازی صدای آلفا</h1> |
|
|
<p>متن دلخواه خود را با صدای خودتان یا هر صدای دیگری بشنوید.</p> |
|
|
</header> |
|
|
<main class="main-content"> |
|
|
<button id="back-to-standard-btn" title="بازگشت به انتخاب گوینده"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7.793 2.232a.75.75 0 01-.025 1.06L3.622 7.25h10.128a.75.75 0 010 1.5H3.622l4.146 3.957a.75.75 0 01-1.036 1.086l-5.5-5.25a.75.75 0 010-1.086l5.5-5.25a.75.75 0 011.06.025z" clip-rule="evenodd" /></svg><span>بازگشت</span></button> |
|
|
<form id="voice-clone-form" onsubmit="return false;"> |
|
|
<div class="form-group"><label for="text-input-clone">📝 متن اصلی</label><textarea id="text-input-clone" placeholder="متن خود را برای تبدیل به گفتار اینجا وارد کنید..."></textarea></div> |
|
|
<div class="form-group"><label for="prompt-input-clone">🗣️ توصیف لحن و احساس (اختیاری)</label><input type="text" id="prompt-input-clone" placeholder="مثال: با لحنی آرام و قصهگو"></div> |
|
|
<div class="form-group"> |
|
|
<label>🎤 صدای اختصاصی مرجع</label><p class="label-subtitle">متن شما با صدایی که در اینجا آپلود میکنید خوانده میشود.</p><p class="input-description">یک فایل صوتی کوتاه (۳ تا ۹ ثانیه) با صدای واضح و بدون نویز آپلود کنید. کیفیت خروجی به کیفیت صدای ورودی وابسته است.</p> |
|
|
<label class="upload-area" id="upload-area"><div class="upload-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><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></label> |
|
|
<input type="file" id="user-voice-input" accept="audio/*" style="display: none;"><div id="file-preview"><div id="file-info"><button type="button" class="preview-play-btn"><svg viewBox="0 0 24 24" class="play-icon-preview"><path d="M8 5v14l11-7z"></path></svg><svg viewBox="0 0 24 24" class="pause-icon-preview"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"></path></svg></button><span id="file-name"></span></div><button type="button" id="remove-file-btn" title="حذف فایل">×</button></div><audio id="audio-preview" style="display:none;"></audio> |
|
|
</div> |
|
|
<div class="form-group"><label for="temperature-slider-clone">🌡️ خلاقیت و پویایی صدا</label><div class="slider-container"><input type="range" id="temperature-slider-clone" class="temperature-slider" min="0.1" max="1.5" step="0.05" value="0.9"><span id="temperature-value-clone" class="temperature-value">0.9</span></div></div> |
|
|
|
|
|
|
|
|
<div id="cf-container-clone"></div> |
|
|
|
|
|
<button type="submit" id="generate-btn-clone" class="generate-btn"><span class="btn-text">ارسال به صف پردازش</span><div class="spinner"></div></button> |
|
|
</form> |
|
|
<div id="output-section-clone" class="output-section"> |
|
|
<div id="status-message-clone" class="status-message">پس از ارسال، درخواست شما در بخش تاریخچه (پایین) ظاهر میشود.</div> |
|
|
|
|
|
<div id="loading-animation-wrapper-clone" class="loading-animation-wrapper"> |
|
|
<div class="orbital-loader"> |
|
|
<div class="orbit"><div class="satellite"></div></div> |
|
|
<div class="orbit"><div class="satellite"></div></div> |
|
|
<div class="orbit"><div class="satellite"></div></div> |
|
|
</div> |
|
|
<p class="loading-text">در حال ارسال درخواست به سرور...</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="history-container"> |
|
|
<div class="history-header"> |
|
|
<div style="display:flex;align-items:center;gap:10px;"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg> |
|
|
درخواست های اختصاصی |
|
|
</div> |
|
|
<button id="clear-history-btn" style="background:none;border:none;color:var(--text-tertiary);cursor:pointer;font-size:0.9em;">پاکسازی</button> |
|
|
</div> |
|
|
<div id="history-list" class="history-list"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
<audio id="hidden-audio-player" style="display: none;"></audio> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="speaker-modal" class="modal-overlay"><div class="modal-dialog"><div class="modal-header"><h2>گالری گویندگان آلفا</h2><button type="button" class="close-modal-btn" data-modal-id="speaker-modal">×</button></div><div id="speaker-grid"></div></div></div> |
|
|
<div id="info-modal" class="modal-overlay"><div class="modal-dialog" style="max-width: 520px;"><div class="modal-header"><h2>🌡️ خلاقیت و پویایی صدا</h2><button type="button" class="close-modal-btn" data-modal-id="info-modal">×</button></div><div><p style="color: var(--text-secondary); line-height: 1.9;">این پارامتر، میزان "غیرقابل پیشبینی بودن" و تنوع در صدای خروجی را کنترل میکند.</p><p><strong>مقادیر بالاتر (نزدیک به ۱.۵):</strong> صدایی بسیار متنوع، احساسی و پویا ایجاد میکند. ایدهآل برای محتوای خلاقانه و هنری.</p><p><strong>مقادیر پایینتر (نزدیک به ۰.۱):</strong> صدایی پایدار، یکنواخت و قابل پیشبینیتر تولید میکند. مناسب برای خوانش متون رسمی و خبری.</p></div></div></div> |
|
|
|
|
|
<div id="email-modal" class="modal-overlay"> |
|
|
<div class="modal-dialog" style="max-width: 480px;"> |
|
|
<div class="modal-header"> |
|
|
<h2 id="email-modal-title">ورود / ثبت نام</h2> |
|
|
<button type="button" class="close-modal-btn" data-modal-id="email-modal">×</button> |
|
|
</div> |
|
|
<form id="email-form" onsubmit="return false;"> |
|
|
<p id="email-modal-desc">برای ورود یا ثبت نام، ایمیل خود را وارد کنید.</p> |
|
|
<div class="form-group"> |
|
|
<label for="login-email-input">آدرس ایمیل</label> |
|
|
<input type="email" id="login-email-input" required placeholder="example@gmail.com"> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="cf-container-login"></div> |
|
|
|
|
|
<button type="submit" id="send-code-btn" class="generate-btn">ارسال کد تایید</button> |
|
|
</form> |
|
|
<form id="code-form" onsubmit="return false;" style="display: none;"> |
|
|
<p id="code-modal-desc">کد ۶ رقمی ارسال شده به ایمیل خود را وارد کنید.</p> |
|
|
<div class="form-group"> |
|
|
<label for="code-input">کد تایید</label> |
|
|
<input type="text" id="code-input" required placeholder="123456" inputmode="numeric" pattern="[0-9]*" maxlength="6" autocomplete="one-time-code"> |
|
|
</div> |
|
|
<button type="submit" id="verify-code-btn" class="generate-btn">تایید و ورود</button> |
|
|
<button type="button" id="back-to-email-btn" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; margin-top: 1rem; width: 100%;">ویرایش ایمیل</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="create-model-modal" class="modal-overlay"> |
|
|
<div class="modal-dialog" style="max-width: 450px;"> |
|
|
<div class="modal-header"> |
|
|
<h2 id="create-model-title">ساخت مدل اختصاصی</h2> |
|
|
<button type="button" class="close-modal-btn" data-modal-id="create-model-modal">×</button> |
|
|
</div> |
|
|
<form id="create-model-form" onsubmit="return false;"> |
|
|
<div class="form-group"> |
|
|
<label for="model-name-input">نام مدل</label> |
|
|
<input type="text" id="model-name-input" required placeholder="مثلاً: صدای علی"> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="model-image-input">تصویر مدل</label> |
|
|
<input type="file" id="model-image-input" accept="image/*" required> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="model-audio-input">صدای مرجع (۳ تا ۹ ثانیه)</label> |
|
|
<input type="file" id="model-audio-input" accept="audio/*" required> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label>جنسیت</label> |
|
|
<div style="display: flex; gap: 1rem;"> |
|
|
<label style="font-weight: normal; cursor: pointer;"><input type="radio" name="model-gender" value="male" checked> مرد</label> |
|
|
<label style="font-weight: normal; cursor: pointer;"><input type="radio" name="model-gender" value="female"> زن</label> |
|
|
</div> |
|
|
</div> |
|
|
<button type="submit" id="save-model-btn" class="generate-btn">ذخیره مدل</button> |
|
|
<input type="hidden" id="edit-model-id" value=""> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="upgrade-modal" class="modal-overlay upgrade-modal-dark"> |
|
|
<div class="modal-dialog"> |
|
|
<div class="modal-header"> |
|
|
<button type="button" class="close-modal-btn" data-modal-id="upgrade-modal">×</button> |
|
|
</div> |
|
|
<div style="padding: 0 1.5rem 2rem 1.5rem; position: relative;"> |
|
|
<div class="glow-bg-purple"></div> |
|
|
<div class="glow-bg-blue"></div> |
|
|
|
|
|
<div class="magic-icon-wrapper"> |
|
|
<i class="fas fa-wand-magic-sparkles"></i> |
|
|
</div> |
|
|
|
|
|
<div class="upgrade-title"> |
|
|
مدل اختصاصی<br>خودت رو بساز |
|
|
</div> |
|
|
|
|
|
<div class="upgrade-features-box"> |
|
|
<p class="upgrade-desc"> |
|
|
برای ساخت مدل متن به صدا با هوش مصنوعی باید اشتراک وبسایت رو داشته باشید. |
|
|
<span style="color: #fbbf24; font-weight: 700;">مدلهای اختصاصی شما</span> |
|
|
مثل بقیه مدلها در این صفحه برای همیشه ذخیره میشن. و با یک فایل صوتی از شخصیت دلخواه هر متنی رو به همون صدا تبدیل کنید |
|
|
</p> |
|
|
<div class="upgrade-list"> |
|
|
<div class="upgrade-item"><i class="fas fa-check-circle"></i><span>شبیهسازی دقیق هر صدایی (حتی خودت)</span></div> |
|
|
<div class="upgrade-item"><i class="fas fa-check-circle"></i><span>بالاترین کیفیت + جدیدترین تکنولوژی</span></div> |
|
|
<div class="upgrade-item"><i class="fas fa-check-circle"></i><span>ذخیره دائمی در لیست گویندگان اصلی</span></div> |
|
|
<div class="upgrade-item"><i class="fas fa-check-circle"></i><span>تولید نامحدود تا آخرین روز اشتراک</span></div> |
|
|
<div class="upgrade-item"><i class="fas fa-check-circle"></i><span>فعال شدن تمام بخش های وبسایت</span></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button type="button" class="upgrade-btn-action" id="go-to-pricing-btn"> |
|
|
<span>تهیه اشتراک برنامه</span> |
|
|
<i class="fas fa-bolt"></i> |
|
|
</button> |
|
|
<button type="button" class="upgrade-cancel-btn" onclick="document.querySelector('#upgrade-modal .close-modal-btn').click()">فعلاً نه، برمیگردم</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="upload-guide-modal" class="modal-overlay"> |
|
|
<div class="modal-dialog"> |
|
|
<div class="guide-header"> |
|
|
<div class="guide-icon-animated"> |
|
|
<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 d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" x2="12" y1="19" y2="22"/></svg> |
|
|
</div> |
|
|
<h2 class="guide-title">ساخت صدای اختصاصی</h2> |
|
|
</div> |
|
|
|
|
|
<div class="guide-content"> |
|
|
با اضافه کردن یک نمونه صدا هوش مصنوعی متن رو بر اساس صدای همون شخصی تولید میکند. یک فایل صوتی با کیفیت بالا بدون نویز در حد صدای استدیو اضافه کنید، <strong>بهترین حالت این است که صدای مدل که اضافه میکنید بین ۳ تا ۳۰ ثانیه باشه</strong> یا میتونه بیشتر باشه برای اگر کیفیت صدا خوب است، هوش مصنوعی تن صدای شما رو یاد میگیره و متن با صدای که اضافه کردید خوانده خواهد شد. |
|
|
</div> |
|
|
|
|
|
<div class="guide-alert"> |
|
|
<span style="font-size: 1.2rem;">⏳</span> |
|
|
<span>دقت کنید ساخت پادکست با صدای اختصاصی زمان بیشتری نیاز دارد. همچنین کیفیت صدای خروجی مدل شما به کیفیت صدای ورودی شما مرتبط است.</span> |
|
|
</div> |
|
|
|
|
|
<button type="button" id="upload-guide-confirm-btn">اوکی متوجه شدم</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<input type="hidden" id="selected_speaker_id_storage" value="Charon"> |
|
|
|
|
|
|
|
|
<section id="pricing-section" class="landing-section pricing"> |
|
|
<h2>پلنهای اشتراک نامحدود</h2> |
|
|
<p class="subtitle">بدون محدودیت، با تمام امکانات. پلن مناسب خود را انتخاب کنید.</p> |
|
|
<div class="pricing-grid"> |
|
|
<div class="pricing-card"> |
|
|
<h3>یک ماهه</h3> |
|
|
<div class="price">۱۵۰٬۰۰۰ <span>تومان</span></div> |
|
|
<p>دسترسی نامحدود به تمام امکانات برای ۳۰ روز.</p> |
|
|
<button class="select-plan-btn" data-plan="1-month">انتخاب پلن</button> |
|
|
</div> |
|
|
<div class="pricing-card"> |
|
|
<h3>شش ماهه</h3> |
|
|
<div class="price">۴۹۳٬۰۰۰ <span>تومان</span></div> |
|
|
<p>بهترین گزینه برای تولیدکنندگان محتوای مستمر.</p> |
|
|
<button class="select-plan-btn" data-plan="6-month">انتخاب پلن</button> |
|
|
</div> |
|
|
<div class="pricing-card"> |
|
|
<h3>یک ساله</h3> |
|
|
<div class="price">۷۹۹٬۰۰۰ <span>تومان</span></div> |
|
|
<p>مقرونبهصرفهترین انتخاب برای استفاده طولانی مدت.</p> |
|
|
<button class="select-plan-btn" data-plan="1-year">انتخاب پلن</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="landing-section features"> |
|
|
<h2>ویژگیهای کلیدی AI Sada</h2> |
|
|
<p class="subtitle">ابزارهایی قدرتمند برای خلق تجربههای صوتی بینظیر.</p> |
|
|
<div class="features-grid"> |
|
|
<div class="feature-card"><div class="icon">🔊</div><h3>کیفیت صدای استودیویی</h3><p>صداهای تولید شده با هوش مصنوعی پیشرفته ما، کاملا طبیعی، شفاف و بدون نویز هستند.</p></div> |
|
|
<div class="feature-card"><div class="icon">🎭</div><h3>دهها گوینده متنوع</h3><p>از میان گالری وسیعی از صداهای مرد و زن با احساسات و لحنهای مختلف، گوینده دلخواه خود را انتخاب کنید.</p></div> |
|
|
<div class="feature-card"><div class="icon">🧬</div><h3>شبیهسازی صدای شما</h3><p>فقط با چند ثانیه از صدای خود، میتوانید هر متنی را با صدای اختصاصی خودتان بشنوید و به اشتراک بگذارید.</p></div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="landing-section faq"> |
|
|
<h2>سوالات متداول</h2> |
|
|
<p class="subtitle">پاسخ به برخی از سوالات رایج شما.</p> |
|
|
<div class="faq-accordion"> |
|
|
<div class="faq-item"><button class="faq-question">آیا استفاده از این ابزار رایگان است؟</button><div class="faq-answer"><p>بله، کاربران جدید میتوانند روزانه تا ۵ بار به صورت رایگان صدا تولید کنند. برای استفاده نامحدود و دسترسی به تمام ویژگیها، میتوانید حساب خود را ارتقا دهید.</p></div></div> |
|
|
<div class="faq-item"><button class="faq-question">شبیهسازی صدا چگونه کار میکند؟</button><div class="faq-answer"><p>شما یک فایل صوتی کوتاه (۳ تا ۹ ثانیه) از صدای مورد نظر خود را آپلود میکنید. سپس هوش مصنوعی ما ویژگیهای آن صدا را یاد گرفته و میتواند هر متن دیگری را با همان صدا بازخوانی کند.</p></div></div> |
|
|
<div class="faq-item"><button class="faq-question">آیا امکان استفاده تجاری است؟</button><div class="faq-answer"><p>بله، در صورت داشتن اشتراک ویژه، تمام حقوق صداهای تولید شده متعلق به شماست و میتوانید از آنها در پادکستها، کتابهای صوتی، ویدیوها و سایر پروژههای تجاری خود استفاده کنید.</p></div></div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="contact-section"> |
|
|
<h2>پشتیبانی و ارتباط با ما</h2> |
|
|
<p>برای سوالات، پیشنهادات یا دریافت پشتیبانی، از طریق تلگرام با ما در ارتباط باشید.</p> |
|
|
<a href="https://t.me/ezmarynoori" target="_blank" rel="noopener noreferrer" class="contact-button"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M9.78 18.65l.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3 3.64 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.58c-.28 1.13-1.04 1.4-1.74.88L14.25 16l-2.47 2.35c-.22.24-.42.44-.69.44l.32-4.14z"></path></svg> |
|
|
<span>ارتباط در تلگرام</span> |
|
|
</a> |
|
|
</section> |
|
|
|
|
|
<footer class="site-footer"><p>© 1404 - تمام حقوق برای <a href="#">AI Sada</a> محفوظ است.</p></footer> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
|
|
|
|
|
|
const PROXY_URL_CHECK_CREDIT = '/tts/proxy.php?endpoint=check-credit-tts'; |
|
|
const PROXY_URL_GENERATE = '/tts/proxy.php?endpoint=generate'; |
|
|
const PROXY_URL_CHECK_TTS = '/tts/proxy.php?endpoint=check-tts-status'; |
|
|
const PROXY_URL_VC_UPLOAD = '/tts/proxy.php?endpoint=vc-upload'; |
|
|
const PROXY_URL_VC_STATUS = '/tts/proxy.php?endpoint=vc-status'; |
|
|
const PROXY_URL_DOWNLOAD_CLONE = '/tts/proxy.php?endpoint=download-clone'; |
|
|
|
|
|
const PAYMENT_REQUEST_URL = '/tts/request.php'; |
|
|
const STATUS_CHECK_URL = '/tts/check_status.php'; |
|
|
const SEND_CODE_URL = '/tts/send_code.php'; |
|
|
const VERIFY_CODE_URL = '/tts/verify_code.php'; |
|
|
const LOGOUT_URL = '/tts/logout.php'; |
|
|
|
|
|
|
|
|
let currentUser = { email: null, status: 'free', expires_at: null, fingerprint: null }; |
|
|
|
|
|
|
|
|
let widgetIdStandard = null; |
|
|
let widgetIdClone = null; |
|
|
let widgetIdLogin = null; |
|
|
|
|
|
|
|
|
const DB_NAME = 'AISadaDB'; |
|
|
const DB_VERSION = 1; |
|
|
const STORE_NAME = 'custom_models'; |
|
|
|
|
|
|
|
|
function initTurnstileWidgets() { |
|
|
if (window.turnstile) { |
|
|
try { widgetIdStandard = turnstile.render('#cf-container-standard', { sitekey: '0x4AAAAAACJYw8vz3QHa-WFi' }); } catch(e) {} |
|
|
try { widgetIdClone = turnstile.render('#cf-container-clone', { sitekey: '0x4AAAAAACJYw8vz3QHa-WFi' }); } catch(e) {} |
|
|
try { widgetIdLogin = turnstile.render('#cf-container-login', { sitekey: '0x4AAAAAACJYw8vz3QHa-WFi' }); } catch(e) {} |
|
|
} else { |
|
|
setTimeout(initTurnstileWidgets, 500); |
|
|
} |
|
|
} |
|
|
setTimeout(initTurnstileWidgets, 1000); |
|
|
|
|
|
|
|
|
const generationButtons = document.querySelectorAll('#generate-btn-standard, #generate-btn-clone'); |
|
|
const creditStatusMessage = document.getElementById('credit-status-message'); |
|
|
const pricingSection = document.getElementById('pricing-section'); |
|
|
const userStatusContainer = document.getElementById('user-status-container'); |
|
|
const userEmailDisplay = document.getElementById('user-email-display'); |
|
|
const userSubStatusDisplay = document.getElementById('user-sub-status-display'); |
|
|
const logoutBtn = document.getElementById('logout-btn'); |
|
|
const loginCheckBtn = document.getElementById('login-check-btn'); |
|
|
const emailModal = document.getElementById('email-modal'); |
|
|
const sendCodeBtn = document.getElementById('send-code-btn'); |
|
|
const verifyCodeBtn = document.getElementById('verify-code-btn'); |
|
|
const emailForm = document.getElementById('email-form'); |
|
|
const codeForm = document.getElementById('code-form'); |
|
|
const backToEmailBtn = document.getElementById('back-to-email-btn'); |
|
|
const loginEmailInput = document.getElementById('login-email-input'); |
|
|
const codeInput = document.getElementById('code-input'); |
|
|
const codeModalDesc = document.getElementById('code-modal-desc'); |
|
|
|
|
|
const standardView = document.getElementById('standard-view'), voiceCloneView = document.getElementById('voice-clone-view'), mainAudioPlayer = document.getElementById('hidden-audio-player'), speakerModal = document.getElementById('speaker-modal'), infoModal = document.getElementById('info-modal'), speakerGridInModal = document.getElementById('speaker-grid'), selectedSpeakerIdStorage = document.getElementById('selected_speaker_id_storage'), changeSpeakerBtn = document.getElementById('change-speaker-btn'), selectedSpeakerCard = document.getElementById('selected-speaker-card'), selectedSpeakerImg = document.getElementById('selected-speaker-img'), selectedSpeakerName = document.getElementById('selected-speaker-name'), selectedSpeakerDesc = document.getElementById('selected-speaker-desc'), tempInfoIcon = document.getElementById('temp-info-icon'), backToStandardBtn = document.getElementById('back-to-standard-btn'); |
|
|
|
|
|
|
|
|
const createModelModal = document.getElementById('create-model-modal'); |
|
|
const createModelForm = document.getElementById('create-model-form'); |
|
|
const modelNameInput = document.getElementById('model-name-input'); |
|
|
const modelImageInput = document.getElementById('model-image-input'); |
|
|
const modelAudioInput = document.getElementById('model-audio-input'); |
|
|
const saveModelBtn = document.getElementById('save-model-btn'); |
|
|
const createModelTitle = document.getElementById('create-model-title'); |
|
|
const editModelIdInput = document.getElementById('edit-model-id'); |
|
|
const upgradeModal = document.getElementById('upgrade-modal'); |
|
|
const goToPricingBtn = document.getElementById('go-to-pricing-btn'); |
|
|
|
|
|
|
|
|
const uploadGuideModal = document.getElementById('upload-guide-modal'); |
|
|
const uploadGuideBtn = document.getElementById('upload-guide-confirm-btn'); |
|
|
let pendingUploadTarget = null; |
|
|
let isProgrammaticClick = false; |
|
|
|
|
|
const defaultSpeakers = [ { id: "Charon", name: "شهاب (مرد)", desc: "صدایی قدرمند و رسا", imgUrl: "https://uploadkon.ir/uploads/a18705_25IMG-۲۰۲۵۰۷۰۵-۱۱۰۵۴۹.jpg" }, { id: "Zephyr", name: "آوا (زن)", desc: "لطیف و دلنشین", imgUrl: "https://uploadkon.ir/uploads/029605_25IMG-۲۰۲۵۰۷۰۵-۱۱۱۲۵۲.jpg" }, { id: "Achird", name: "نوید (مرد)", desc: "جوان و پرانرژی", imgUrl: "https://uploadkon.ir/uploads/697e05_25IMG-۲۰۲۵۰۶۰۹-۰۶۴۶۳۷.jpg" }, { id: "Zubenelgenubi", name: "آرمان (مرد)", desc: "گرم و صمیمی", imgUrl: "https://uploadkon.ir/uploads/a8a705_25IMG-۲۰۲۵۰۷۰۵-۱۱۱۶۲۹.jpg" }, { id: "Vindemiatrix", name: "مهسا (زن)", desc: "باوقار و رسمی", imgUrl: "https://uploadkon.ir/uploads/d74d05_25IMG-۲۰۲۵۰۷۰۵-۱۱۱۸۳۸.jpg" }, { id: "Rasalgethi", name: "دانا (مرد)", desc: "خبری و آموزنده", imgUrl: "https://uploadkon.ir/uploads/57e425_25IMG-20250925-112825-749.jpg" }, { id: "Sadachbia", name: "سامان (مرد)", desc: "شاداب و پویا", imgUrl: "https://uploadkon.ir/uploads/580205_25IMG-۲۰۲۵۰۷۰۵-۱۱۳۳۳۰.jpg" }, { id: "Sadaltager", name: "آرش (مرد)", desc: "مطمئن و تاثیرگذار", imgUrl: "https://uploadkon.ir/uploads/c4db05_25IMG-۲۰۲۵۰۷۰۵-۱۱۳۵۰۰.jpg" }, { id: "Sulafat", name: "شبنم (زن)", desc: "آرام و متین", imgUrl: "https://uploadkon.ir/uploads/995005_25IMG-۲۰۲۵۰۷۰۵-۱۱۳۶۱۱.jpg" }, { id: "Laomedeia", name: "سحر (زن)", desc: "دوستانه و گیرا", imgUrl: "https://uploadkon.ir/uploads/660705_25IMG-۲۰۲۵۰۷۰۵-۱۱۳۷۵۴.jpg" }, { id: "Achernar", name: "مریم (زن)", desc: "حرفهای و واضح", imgUrl: "https://uploadkon.ir/uploads/4c2905_25IMG-۲۰۲۵۰۷۰۵-۱۱۴۰۳۶.jpg" }, { id: "Alnilam", name: "بهرام (مرد)", desc: "حماسی و نافذ", imgUrl: "https://uploadkon.ir/uploads/f0c205_25IMG-۲۰۲۵۰۷۰۵-۱۱۴۲۲۰.jpg" }, { id: "Schedar", name: "نیکان (مرد)", desc: "مهربان و شیرین", imgUrl: "https://uploadkon.ir/uploads/d37a05_25IMG-۲۰۲۵۰۷۰۵-۱۱۴۳۲۵.jpg" }, { id: "Gacrux", name: "فرناز (زن)", desc: "پخته و قابل اعتماد", imgUrl: "https://uploadkon.ir/uploads/495b09_25IMG-20251109-104135-304.jpg" }, { id: "Pulcherrima", name: "سارا (زن)", desc: "جذاب و مدرن", imgUrl: "https://uploadkon.ir/uploads/acb105_25IMG-۲۰۲۵۰۷۰۵-۱۱۴۷۴۳.jpg" }, { id: "Umbriel", name: "مانی (مرد)", desc: "خلاق و متفاوت", imgUrl: "https://uploadkon.ir/uploads/68b505_25IMG-۲۰۲۵۰۷۰۵-۱۱۴۹۱۴.jpg" }, { id: "Algieba", name: "آرتین (مرد)", desc: "با اصالت و شیک", imgUrl: "https://uploadkon.ir/uploads/571005_25IMG-۲۰۲۵۰۷۰۵-۱۱۵۰۳۹.jpg" }, { id: "Despina", name: "دلنواز (زن)", desc: "هنری و احساسی", imgUrl: "https://uploadkon.ir/uploads/5d7805_25IMG-۲۰۲۵۰۷۰۵-۱۱۵۲۲۲.jpg" }, { id: "Erinome", name: "روژان (زن)", desc: "شفاف و گویا", imgUrl: "https://uploadkon.ir/uploads/aa8805_25IMG-۲۰۲۵۰۷۰۵-۱۱۵۳۴۹.jpg" }, { id: "Algenib", name: "امید (مرد)", desc: "انگیزه بخش و مثبت", imgUrl: "https://uploadkon.ir/uploads/a63c05_25IMG-۲۰۲۵۰۷۰۵-۱۱۵۹۲۱.jpg" }, { id: "Orus", name: "بردیا (مرد)", desc: "ورزشی و پرهیجان", imgUrl: "https://uploadkon.ir/uploads/8bc405_25IMG-۲۰۲۵۰۷۰۵-۱۲۱۴۳۳.jpg" }, { id: "Aoede", name: "ترانه (زن)", desc: "موزیکال و خوشآهنگ", imgUrl: "https://uploadkon.ir/uploads/9cb405_25IMG-۲۰۲۵۰۷۰۵-۱۲۱۸۵۰.jpg" }, { id: "Callirrhoe", name: "نیکو (زن)", desc: "روایتگر و قصهگو", imgUrl: "https://uploadkon.ir/uploads/ee5f05_25IMG-۲۰۲۵۰۷۰۵-۱۲۲۰۴۷.jpg" }, { id: "Autonoe", name: "هستی (زن)", desc: "طبیعی و خودمانی", imgUrl: "https://uploadkon.ir/uploads/9b0505_25IMG-۲۰۲۵۰۷۰۵-۱۲۲۲۲۲.jpg" }, { id: "Enceladus", name: "کامیار (مرد)", desc: "مصمم و جدی", imgUrl: "https://uploadkon.ir/uploads/127805_25IMG-۲۰۲۵۰۷۰۵-۱۲۲۴۱۴.jpg" }, { id: "Iapetus", name: "کیانوش (مرد)", desc: "درخشان و گیرا", imgUrl: "https://uploadkon.ir/uploads/c98b05_25IMG-۲۰۲۵۰۷۰۵-۱۲۲۶۰۵.jpg" }, { id: "Puck", name: "پویا (مرد)", desc: "بازیگوش و سرزنده", imgUrl: "https://uploadkon.ir/uploads/ca3605_25IMG-۲۰۲۵۰۷۰۵-۱۲۲۸۳۹.jpg" }, { id: "Kore", name: "مهتاب (زن)", desc: "نجواگر و آرامشبخش", imgUrl: "https://uploadkon.ir/uploads/b66605_25IMG-۲۰۲۵۰۷۰۵-۱۲۳۰۳۵.jpg" }, { id: "Fenrir", name: "سام (مرد)", desc: "جسور و بیباک", imgUrl: "https://uploadkon.ir/uploads/03c005_25IMG-۲۰۲۵۰۷۰۵-۱۲۳۴۱۳.jpg" }, { id: "Leda", name: "لیدا (زن)", desc: "کلاسیک و باوقار", imgUrl: "https://uploadkon.ir/uploads/710305_25IMG-۲۰۲۵۰۷۰۵-۱۲۳۷۳۱.jpg" }]; |
|
|
|
|
|
|
|
|
async function getBrowserFingerprint() { const components = [navigator.userAgent, navigator.language, screen.width + 'x' + screen.height, new Date().getTimezoneOffset()]; try { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); ctx.textBaseline = "top"; ctx.font = "14px 'Arial'"; ctx.textBaseline = "alphabetic"; ctx.fillStyle = "#f60"; ctx.fillRect(125, 1, 62, 20); ctx.fillStyle = "#069"; ctx.fillText("a1b2c3d4e5f6g7h8i9j0_!@#$%^&*()", 2, 15); components.push(canvas.toDataURL()); } catch (e) { components.push("canvas-error"); } const fingerprintString = components.join('~~~'); let hash = 0; for (let i = 0; i < fingerprintString.length; i++) { const char = fingerprintString.charCodeAt(i); hash = ((hash << 5) - hash) + char; hash |= 0; } return 'fp_' + Math.abs(hash).toString(16); } |
|
|
function splitTextIntoChunks(text, maxChunkLength = 2500) { const chunks = []; let remainingText = text.trim(); if (remainingText.length <= maxChunkLength) return [remainingText]; while (remainingText.length > 0) { if (remainingText.length <= maxChunkLength) { chunks.push(remainingText); break; } let chunkCandidate = remainingText.substring(0, maxChunkLength); let splitIndex = -1; const delimiters = ['\n', '.', '؟', '!', '؛', '،', ' ']; for (const delimiter of delimiters) { const lastIndex = chunkCandidate.lastIndexOf(delimiter); if (lastIndex !== -1) { splitIndex = lastIndex + 1; break; } } if (splitIndex === -1) splitIndex = maxChunkLength; chunks.push(remainingText.substring(0, splitIndex).trim()); remainingText = remainingText.substring(splitIndex).trim(); } return chunks.filter(chunk => chunk.length > 0); } |
|
|
async function mergeAudioBlobs(blobs) { if (!blobs || blobs.length === 0) return null; if (blobs.length === 1) return blobs[0]; const audioContext = new (window.AudioContext || window.webkitAudioContext)(); const decodedBuffers = await Promise.all(blobs.map(blob => blob.arrayBuffer().then(buffer => audioContext.decodeAudioData(buffer)))); const totalLength = decodedBuffers.reduce((acc, buffer) => acc + buffer.length, 0); const firstBuffer = decodedBuffers[0]; const finalBuffer = audioContext.createBuffer(firstBuffer.numberOfChannels, totalLength, firstBuffer.sampleRate); let offset = 0; for (const buffer of decodedBuffers) { for (let channel = 0; channel < buffer.numberOfChannels; channel++) { finalBuffer.copyToChannel(buffer.getChannelData(channel), channel, offset); } offset += buffer.length; } return bufferToWave(finalBuffer); } |
|
|
function bufferToWave(abuffer) { const numOfChan = abuffer.numberOfChannels, length = abuffer.length * numOfChan * 2 + 44, buffer = new ArrayBuffer(length), view = new DataView(buffer), channels = []; let i, sample, offset = 0, pos = 0; const setUint16 = (data) => { view.setUint16(pos, data, true); pos += 2; }; const setUint32 = (data) => { view.setUint32(pos, data, true); pos += 4; }; setUint32(0x46464952); setUint32(length - 8); setUint32(0x45564157); setUint32(0x20746d66); setUint32(16); setUint16(1); setUint16(numOfChan); setUint32(abuffer.sampleRate); setUint32(abuffer.sampleRate * 2 * numOfChan); setUint16(numOfChan * 2); setUint16(16); setUint32(0x61746164); setUint32(length - pos - 4); for (i = 0; i < abuffer.numberOfChannels; i++) { channels.push(abuffer.getChannelData(i)); } while (pos < length) { for (i = 0; i < numOfChan; i++) { sample = Math.max(-1, Math.min(1, channels[i][offset])); sample = (0.5 + sample < 0 ? sample * 32768 : sample * 32767) | 0; view.setInt16(pos, sample, true); pos += 2; } offset++; } return new Blob([view], { type: 'audio/wav' }); } |
|
|
|
|
|
|
|
|
const fileToBase64 = (file) => { |
|
|
return new Promise((resolve, reject) => { |
|
|
const reader = new FileReader(); |
|
|
reader.readAsDataURL(file); |
|
|
reader.onload = () => resolve(reader.result); |
|
|
reader.onerror = error => reject(error); |
|
|
}); |
|
|
}; |
|
|
|
|
|
|
|
|
function initDB() { |
|
|
return new Promise((resolve, reject) => { |
|
|
const request = indexedDB.open(DB_NAME, DB_VERSION); |
|
|
request.onerror = event => reject("DB Error: " + event.target.error); |
|
|
request.onsuccess = event => resolve(event.target.result); |
|
|
request.onupgradeneeded = event => { |
|
|
const db = event.target.result; |
|
|
if (!db.objectStoreNames.contains(STORE_NAME)) { |
|
|
db.createObjectStore(STORE_NAME, { keyPath: 'id' }); |
|
|
} |
|
|
}; |
|
|
}); |
|
|
} |
|
|
|
|
|
async function saveCustomModel(model) { |
|
|
const db = await initDB(); |
|
|
return new Promise((resolve, reject) => { |
|
|
const tx = db.transaction(STORE_NAME, 'readwrite'); |
|
|
const store = tx.objectStore(STORE_NAME); |
|
|
store.put(model); |
|
|
tx.oncomplete = () => resolve(); |
|
|
tx.onerror = () => reject(tx.error); |
|
|
}); |
|
|
} |
|
|
|
|
|
async function getAllCustomModels() { |
|
|
const db = await initDB(); |
|
|
return new Promise((resolve, reject) => { |
|
|
const tx = db.transaction(STORE_NAME, 'readonly'); |
|
|
const store = tx.objectStore(STORE_NAME); |
|
|
const request = store.getAll(); |
|
|
request.onsuccess = () => resolve(request.result || []); |
|
|
request.onerror = () => reject(request.error); |
|
|
}); |
|
|
} |
|
|
|
|
|
async function deleteCustomModel(id) { |
|
|
const db = await initDB(); |
|
|
return new Promise((resolve, reject) => { |
|
|
const tx = db.transaction(STORE_NAME, 'readwrite'); |
|
|
const store = tx.objectStore(STORE_NAME); |
|
|
store.delete(id); |
|
|
tx.oncomplete = () => resolve(); |
|
|
tx.onerror = () => reject(tx.error); |
|
|
}); |
|
|
} |
|
|
|
|
|
async function getCustomModel(id) { |
|
|
const db = await initDB(); |
|
|
return new Promise((resolve, reject) => { |
|
|
const tx = db.transaction(STORE_NAME, 'readonly'); |
|
|
const store = tx.objectStore(STORE_NAME); |
|
|
const request = store.get(id); |
|
|
request.onsuccess = () => resolve(request.result); |
|
|
request.onerror = () => reject(request.error); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
async function checkUserStatus(email) { if (!email) { updateUIForUserState({ status: 'free', email: null }); return; } try { const response = await fetch(STATUS_CHECK_URL, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email: email }) }); const result = await response.json(); updateUIForUserState({ ...result, email: email }); } catch (error) { console.error('Error checking user status:', error); updateUIForUserState({ status: 'free', email: email }); } } |
|
|
|
|
|
async function checkFreeTierCredit() { |
|
|
if (!currentUser.fingerprint) return; |
|
|
creditStatusMessage.textContent = 'در حال بررسی اعتبار...'; |
|
|
creditStatusMessage.classList.add('visible'); |
|
|
try { |
|
|
const response = await fetch(PROXY_URL_CHECK_CREDIT, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ fingerprint: currentUser.fingerprint, email: currentUser.email }) }); |
|
|
if (!response.ok) throw new Error('Server error during credit check'); |
|
|
const result = await response.json(); |
|
|
if (result.limit_reached) { |
|
|
generationButtons.forEach(btn => btn.disabled = true); |
|
|
creditStatusMessage.textContent = 'اعتبار رایگان روزانه شما تمام شده است.'; |
|
|
pricingSection.scrollIntoView({ behavior: 'smooth' }); |
|
|
} else { |
|
|
generationButtons.forEach(btn => btn.disabled = false); |
|
|
const remaining = result.credits_remaining !== undefined ? result.credits_remaining : 0; |
|
|
creditStatusMessage.textContent = `شما ${remaining} اعتبار رایگان برای امروز دارید.`; |
|
|
} |
|
|
} catch (error) { |
|
|
creditStatusMessage.textContent = 'خطا در بررسی اعتبار.'; |
|
|
generationButtons.forEach(btn => btn.disabled = true); |
|
|
} |
|
|
} |
|
|
|
|
|
function updateUIForUserState(userData) { currentUser = { ...currentUser, ...userData }; const isLoggedIn = !!currentUser.email; if (isLoggedIn) { localStorage.setItem('userEmail', currentUser.email); userEmailDisplay.textContent = currentUser.email; loginCheckBtn.style.display = 'none'; userStatusContainer.style.display = 'inline-flex'; if (currentUser.status === 'paid') { userSubStatusDisplay.textContent = `اشتراک ویژه تا ${currentUser.expires_at}`; userSubStatusDisplay.className = 'user-sub-status status-paid'; pricingSection.style.display = 'none'; creditStatusMessage.classList.remove('visible'); creditStatusMessage.textContent = ''; generationButtons.forEach(btn => btn.disabled = false); } else { userSubStatusDisplay.textContent = 'کاربر رایگان'; userSubStatusDisplay.className = 'user-sub-status status-free'; pricingSection.style.display = 'block'; checkFreeTierCredit(); } } else { localStorage.removeItem('userEmail'); currentUser.email = null; userStatusContainer.style.display = 'none'; loginCheckBtn.style.display = 'inline-block'; pricingSection.style.display = 'block'; checkFreeTierCredit(); } } |
|
|
function handleLogout() { fetch(LOGOUT_URL).catch(err => console.error('Logout error:', err)); updateUIForUserState({ status: 'free', email: null, expires_at: null }); } |
|
|
|
|
|
|
|
|
const showModal = (modal) => modal.classList.add('visible'); |
|
|
const hideModal = (modal) => modal.classList.remove('visible'); |
|
|
const initVoiceCloneView = () => { const cloneForm = voiceCloneView.querySelector('#voice-clone-form'); const cloneOutputSection = voiceCloneView.querySelector('#output-section-clone'); const generateBtn = voiceCloneView.querySelector('#generate-btn-clone'); if (currentUser.status !== 'paid') { cloneOutputSection.innerHTML = `<div class="status-message error" style="display: block;">قابلیت شبیهسازی صدا فقط برای کاربران دارای اشتراک ویژه فعال است.</div>`; if (generateBtn) generateBtn.disabled = true; if (cloneForm) cloneForm.style.display = 'none'; } else { |
|
|
|
|
|
renderHistory(); |
|
|
} }; |
|
|
const switchView = (to, shouldScroll = false) => { if (to === 'clone') { initVoiceCloneView(); voiceCloneView.style.display = 'block'; standardView.style.display = 'none'; } else { standardView.style.display = 'block'; voiceCloneView.style.display = 'none'; } if (shouldScroll) window.scrollTo(0, 0); }; |
|
|
|
|
|
|
|
|
const updateSelectedSpeakerDisplay = async (speakerId) => { |
|
|
let speaker = defaultSpeakers.find(s => s.id === speakerId); |
|
|
if (!speaker) { |
|
|
|
|
|
try { |
|
|
const customModel = await getCustomModel(speakerId); |
|
|
if(customModel) { |
|
|
speaker = { |
|
|
id: customModel.id, |
|
|
name: customModel.name, |
|
|
desc: 'مدل اختصاصی شما', |
|
|
imgUrl: URL.createObjectURL(customModel.image) |
|
|
}; |
|
|
} |
|
|
} catch(e) { console.error(e); } |
|
|
} |
|
|
if (!speaker) speaker = defaultSpeakers[0]; |
|
|
|
|
|
selectedSpeakerImg.src = speaker.imgUrl; |
|
|
selectedSpeakerName.textContent = speaker.name; |
|
|
selectedSpeakerDesc.textContent = speaker.desc; |
|
|
selectedSpeakerIdStorage.value = speaker.id; |
|
|
}; |
|
|
|
|
|
const createSpeakerCardsInModal = async () => { |
|
|
speakerGridInModal.innerHTML = ''; |
|
|
const customModels = await getAllCustomModels(); |
|
|
const allSpeakers = [...defaultSpeakers, ...customModels.map(m => ({ |
|
|
id: m.id, |
|
|
name: m.name, |
|
|
desc: 'مدل اختصاصی', |
|
|
imgUrl: URL.createObjectURL(m.image), |
|
|
isCustom: true |
|
|
}))]; |
|
|
|
|
|
|
|
|
allSpeakers.forEach((speaker) => { |
|
|
const card = document.createElement('label'); |
|
|
card.className = 'speaker-card'; |
|
|
let html = ` |
|
|
<input type="radio" name="modal_speaker_selection" value="${speaker.id}" ${speaker.id === selectedSpeakerIdStorage.value ? 'checked' : ''}> |
|
|
<div class="speaker-visual"> |
|
|
<img src="${speaker.imgUrl}" alt="${speaker.name}" loading="lazy"> |
|
|
</div> |
|
|
<div class="speaker-name">${speaker.name}</div> |
|
|
`; |
|
|
|
|
|
if (speaker.isCustom) { |
|
|
html += `<div class="custom-model-badge">اختصاصی</div> |
|
|
<div class="model-actions"> |
|
|
<button type="button" class="model-action-btn btn-edit" title="ویرایش" data-id="${speaker.id}">✎</button> |
|
|
<button type="button" class="model-action-btn btn-delete" title="حذف" data-id="${speaker.id}">✕</button> |
|
|
</div>`; |
|
|
} |
|
|
|
|
|
card.innerHTML = html; |
|
|
|
|
|
|
|
|
card.addEventListener('click', (e) => { |
|
|
if (e.target.closest('.model-action-btn')) return; |
|
|
updateSelectedSpeakerDisplay(speaker.id); |
|
|
hideModal(speakerModal); |
|
|
}); |
|
|
|
|
|
|
|
|
const editBtn = card.querySelector('.btn-edit'); |
|
|
if(editBtn) { |
|
|
editBtn.addEventListener('click', async (e) => { |
|
|
e.stopPropagation(); |
|
|
const model = await getCustomModel(speaker.id); |
|
|
if(model) openEditModel(model); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
const deleteBtn = card.querySelector('.btn-delete'); |
|
|
if(deleteBtn) { |
|
|
deleteBtn.addEventListener('click', async (e) => { |
|
|
e.stopPropagation(); |
|
|
if(confirm(`آیا از حذف مدل "${speaker.name}" اطمینان دارید؟`)) { |
|
|
await deleteCustomModel(speaker.id); |
|
|
createSpeakerCardsInModal(); |
|
|
if(selectedSpeakerIdStorage.value === speaker.id) { |
|
|
updateSelectedSpeakerDisplay(defaultSpeakers[0].id); |
|
|
} |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
speakerGridInModal.appendChild(card); |
|
|
}); |
|
|
|
|
|
|
|
|
const addModelCard = document.createElement('div'); |
|
|
addModelCard.className = 'speaker-card add-model-card'; |
|
|
addModelCard.innerHTML = ` |
|
|
<div class="speaker-visual"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg> |
|
|
</div> |
|
|
<div class="speaker-name">ساخت مدل جدید</div> |
|
|
`; |
|
|
addModelCard.addEventListener('click', () => { |
|
|
if (currentUser.status !== 'paid') { |
|
|
hideModal(speakerModal); |
|
|
showModal(upgradeModal); |
|
|
return; |
|
|
} |
|
|
hideModal(speakerModal); |
|
|
resetCreateModelForm(); |
|
|
showModal(createModelModal); |
|
|
}); |
|
|
speakerGridInModal.appendChild(addModelCard); |
|
|
|
|
|
|
|
|
const customCard = document.createElement('div'); |
|
|
customCard.className = 'speaker-card special-card'; |
|
|
customCard.innerHTML = `<div class="speaker-visual"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M7 4V2H5V4H2v7h3v11h2V11h3v11h2V11h3V4h-3V2h-2v2H7zM4 6h16v3H4V6z"></path></svg></div><div class="speaker-name">شبیهسازی صدا (آپلود لحظهای)</div>`; |
|
|
customCard.addEventListener('click', () => { switchView('clone', true); hideModal(speakerModal); }); |
|
|
speakerGridInModal.appendChild(customCard); |
|
|
}; |
|
|
|
|
|
|
|
|
function resetCreateModelForm() { |
|
|
createModelForm.reset(); |
|
|
editModelIdInput.value = ''; |
|
|
createModelTitle.textContent = 'ساخت مدل اختصاصی'; |
|
|
saveModelBtn.textContent = 'ذخیره مدل'; |
|
|
modelImageInput.required = true; |
|
|
modelAudioInput.required = true; |
|
|
} |
|
|
|
|
|
function openEditModel(model) { |
|
|
hideModal(speakerModal); |
|
|
createModelTitle.textContent = 'ویرایش مدل'; |
|
|
saveModelBtn.textContent = 'بروزرسانی مدل'; |
|
|
editModelIdInput.value = model.id; |
|
|
modelNameInput.value = model.name; |
|
|
|
|
|
modelImageInput.required = false; |
|
|
modelAudioInput.required = false; |
|
|
const radios = document.getElementsByName('model-gender'); |
|
|
radios.forEach(r => r.checked = (r.value === model.gender)); |
|
|
showModal(createModelModal); |
|
|
} |
|
|
|
|
|
saveModelBtn.addEventListener('click', async () => { |
|
|
if (!modelNameInput.value) { alert('نام مدل الزامی است.'); return; } |
|
|
|
|
|
const isEdit = !!editModelIdInput.value; |
|
|
let imageBlob = null; |
|
|
let audioBlob = null; |
|
|
|
|
|
|
|
|
if (!isEdit && (!modelImageInput.files[0] || !modelAudioInput.files[0])) { |
|
|
alert('تصویر و فایل صوتی برای ساخت مدل جدید الزامی هستند.'); return; |
|
|
} |
|
|
|
|
|
saveModelBtn.disabled = true; |
|
|
saveModelBtn.textContent = 'در حال ذخیره...'; |
|
|
|
|
|
try { |
|
|
|
|
|
if (modelImageInput.files[0]) { |
|
|
imageBlob = new Blob([modelImageInput.files[0]], {type: modelImageInput.files[0].type}); |
|
|
} |
|
|
if (modelAudioInput.files[0]) { |
|
|
audioBlob = new Blob([modelAudioInput.files[0]], {type: modelAudioInput.files[0].type}); |
|
|
} |
|
|
|
|
|
let modelData = { |
|
|
id: isEdit ? editModelIdInput.value : `custom_${Date.now()}`, |
|
|
name: modelNameInput.value, |
|
|
gender: document.querySelector('input[name="model-gender"]:checked').value |
|
|
}; |
|
|
|
|
|
if (isEdit) { |
|
|
const existing = await getCustomModel(modelData.id); |
|
|
modelData.image = imageBlob || existing.image; |
|
|
modelData.audio = audioBlob || existing.audio; |
|
|
} else { |
|
|
modelData.image = imageBlob; |
|
|
modelData.audio = audioBlob; |
|
|
} |
|
|
|
|
|
await saveCustomModel(modelData); |
|
|
hideModal(createModelModal); |
|
|
createSpeakerCardsInModal(); |
|
|
if(!isEdit) updateSelectedSpeakerDisplay(modelData.id); |
|
|
alert('مدل با موفقیت ذخیره شد.'); |
|
|
} catch (e) { |
|
|
console.error(e); |
|
|
alert('خطا در ذخیره مدل. ممکن است حجم فایلها زیاد باشد.'); |
|
|
} finally { |
|
|
saveModelBtn.disabled = false; |
|
|
saveModelBtn.textContent = isEdit ? 'بروزرسانی مدل' : 'ذخیره مدل'; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const formatTime = (s) => { if (isNaN(s) || s < 0) return '0:00'; const m = Math.floor(s / 60); return `${m}:${Math.floor(s % 60).toString().padStart(2, '0')}`; }; |
|
|
function createPlayerInstance(containerId) { const playerContent = document.getElementById(containerId); if (!playerContent) return; playerContent.innerHTML = `<div class="simple-player-container"><div class="play-controls"><button type="button" class="play-pause-btn-simple" aria-label="Play/Pause"><svg viewBox="0 0 24 24" class="play-icon"><path d="M8 5v14l11-7z"></path></svg><svg viewBox="0 0 24 24" class="pause-icon" style="display:none;"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"></path></svg></button><div class="progress-wrapper"><span class="time-display current-time">0:00</span><input type="range" class="audio-progress-bar" value="0" min="0" max="100" step="0.1"><span class="time-display total-time">0:00</span></div></div><a href="#" class="audio-download-btn-new" download="ai_sada_output.wav" title="دانلود فایل صوتی"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19.35 10.04A7.49 7.49 0 0 0 12 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 0 0 0 14a6 6 0 0 0 6 6h13a5 5 0 0 0 5-5c0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z"></path></svg><span>دانلود فایل صوتی</span></a></div>`; const playPauseBtn = playerContent.querySelector('.play-pause-btn-simple'), progressBar = playerContent.querySelector('.audio-progress-bar'); playPauseBtn.addEventListener('click', () => { mainAudioPlayer.paused ? mainAudioPlayer.play() : mainAudioPlayer.pause(); }); progressBar.addEventListener('input', () => { if (!isNaN(mainAudioPlayer.duration)) mainAudioPlayer.currentTime = (progressBar.value / 100) * mainAudioPlayer.duration; }); } |
|
|
|
|
|
|
|
|
const updatePlayerUI = () => { |
|
|
const isPlaying = !(mainAudioPlayer.paused || mainAudioPlayer.ended); |
|
|
const { currentTime, duration } = mainAudioPlayer; |
|
|
const currentSrc = mainAudioPlayer.src; |
|
|
|
|
|
document.querySelectorAll('.simple-player-container').forEach(player => { |
|
|
const rawPlayerSrc = player.getAttribute('data-audio-src'); |
|
|
let isActive = false; |
|
|
|
|
|
if (rawPlayerSrc) { |
|
|
|
|
|
const tempAnchor = document.createElement('a'); |
|
|
tempAnchor.href = rawPlayerSrc; |
|
|
|
|
|
|
|
|
if (decodeURIComponent(currentSrc) === decodeURIComponent(tempAnchor.href)) { |
|
|
isActive = true; |
|
|
} |
|
|
} else if (player.closest('#output-section-standard') && !rawPlayerSrc && currentSrc) { |
|
|
|
|
|
isActive = true; |
|
|
} |
|
|
|
|
|
const playIcon = player.querySelector('.play-icon'); |
|
|
const pauseIcon = player.querySelector('.pause-icon'); |
|
|
const currentTimeEl = player.querySelector('.current-time'); |
|
|
const totalTimeEl = player.querySelector('.total-time'); |
|
|
const progressBar = player.querySelector('.audio-progress-bar'); |
|
|
|
|
|
if (isActive) { |
|
|
if (playIcon) playIcon.style.display = isPlaying ? 'none' : 'block'; |
|
|
if (pauseIcon) pauseIcon.style.display = isPlaying ? 'block' : 'none'; |
|
|
if (currentTimeEl) currentTimeEl.textContent = formatTime(currentTime); |
|
|
if (totalTimeEl) totalTimeEl.textContent = isFinite(duration) ? formatTime(duration) : '0:00'; |
|
|
if (progressBar) progressBar.value = isFinite(duration) && duration > 0 ? (currentTime / duration) * 100 : 0; |
|
|
} else { |
|
|
if (playIcon) playIcon.style.display = 'block'; |
|
|
if (pauseIcon) pauseIcon.style.display = 'none'; |
|
|
if (progressBar) progressBar.value = 0; |
|
|
if (currentTimeEl) currentTimeEl.textContent = "0:00"; |
|
|
} |
|
|
}); |
|
|
}; |
|
|
|
|
|
|
|
|
(function() { |
|
|
const form = document.getElementById('standard-tts-form'); if (!form) return; |
|
|
const textInput = form.querySelector('#text-input-standard'), promptInput = form.querySelector('#prompt-input-standard'), tempSlider = form.querySelector('#temperature-slider-standard'), tempValueSpan = form.querySelector('#temperature-value-standard'), generateBtn = form.querySelector('#generate-btn-standard'), btnText = generateBtn.querySelector('.btn-text'), btnSpinner = generateBtn.querySelector('.spinner'), outputSection = document.getElementById('output-section-standard'), statusMessage = outputSection.querySelector('#status-message-standard'), loadingAnimation = outputSection.querySelector('#loading-animation-wrapper-standard'), playerContent = outputSection.querySelector('#audio-player-content-standard'), charCount = form.querySelector('#char-count'), charMax = form.querySelector('#char-max'), MAX_CHARS = 50000; |
|
|
charMax.textContent = MAX_CHARS.toLocaleString('fa-IR'); |
|
|
textInput.addEventListener('input', () => { const len = textInput.value.length; charCount.textContent = len.toLocaleString('fa-IR'); charCount.style.color = len > MAX_CHARS ? 'red' : 'var(--accent-primary)'; }); |
|
|
tempSlider.addEventListener('input', () => tempValueSpan.textContent = tempSlider.value); |
|
|
const showLoadingState = () => { generateBtn.disabled = true; btnSpinner.style.display = 'inline-block'; btnText.textContent = 'در حال پردازش...'; playerContent.style.display = 'none'; outputSection.classList.remove('has-content'); statusMessage.style.display = 'none'; loadingAnimation.style.display = 'flex'; mainAudioPlayer.src = ''; }; |
|
|
const showResultState = (isSuccess, msg = '') => { loadingAnimation.style.display = 'none'; if (isSuccess) { playerContent.style.display = 'block'; outputSection.classList.add('has-content'); } else { statusMessage.innerHTML = msg || 'خطا.'; statusMessage.style.display = 'block'; statusMessage.classList.add('error'); } const isOutOfCredit = currentUser.status === 'free' && creditStatusMessage.textContent.includes('تمام شده'); generateBtn.disabled = isOutOfCredit; btnSpinner.style.display = 'none'; btnText.textContent = '✨ خلق صدا با آلفا'; }; |
|
|
form.addEventListener('submit', async () => { |
|
|
if (generateBtn.disabled) return; |
|
|
if (!currentUser.email) { alert('برای تولید صدا، لطفا ابتدا وارد حساب کاربری خود شوید.'); loginCheckBtn.click(); return; } |
|
|
if (!textInput.value.trim()) { showResultState(false, '<b>خطا:</b> متن ورودی خالی است.'); return; } |
|
|
if (textInput.value.length > MAX_CHARS) { showResultState(false, `<b>خطا:</b> طول متن بیش از حد مجاز (${MAX_CHARS.toLocaleString('fa-IR')} نویسه) است.`); return; } |
|
|
|
|
|
const turnstileToken = turnstile.getResponse(widgetIdStandard); |
|
|
if (!turnstileToken) { |
|
|
showResultState(false, '<b>خطا:</b> لطفا تایید کنید که ربات نیستید (کپچا).'); |
|
|
return; |
|
|
} |
|
|
|
|
|
showLoadingState(); |
|
|
|
|
|
|
|
|
let customModelAudioBase64 = null; |
|
|
let currentSpeakerId = selectedSpeakerIdStorage.value; |
|
|
|
|
|
if (currentSpeakerId.startsWith('custom_')) { |
|
|
try { |
|
|
const customModel = await getCustomModel(currentSpeakerId); |
|
|
if (customModel && customModel.audio) { |
|
|
customModelAudioBase64 = await fileToBase64(customModel.audio); |
|
|
currentSpeakerId = "custom_user"; |
|
|
} |
|
|
} catch(e) { console.error("Error loading custom model audio", e); } |
|
|
} |
|
|
|
|
|
const textChunks = splitTextIntoChunks(textInput.value), allAudioBlobs = []; let hasError = false; |
|
|
|
|
|
try { |
|
|
for (let i = 0; i < textChunks.length; i++) { |
|
|
btnText.textContent = `در حال پردازش بخش ${i + 1} از ${textChunks.length}...`; |
|
|
try { |
|
|
const payload = { |
|
|
text: textChunks[i], |
|
|
prompt: promptInput.value, |
|
|
speaker: currentSpeakerId, |
|
|
temperature: parseFloat(tempSlider.value), |
|
|
email: currentUser.email, |
|
|
fingerprint: currentUser.fingerprint, |
|
|
turnstile_token: turnstileToken |
|
|
}; |
|
|
|
|
|
if (customModelAudioBase64) { |
|
|
payload.ref_audio_base64 = customModelAudioBase64; |
|
|
} |
|
|
|
|
|
const response = await fetch(PROXY_URL_GENERATE, { |
|
|
method: 'POST', |
|
|
headers: {'Content-Type': 'application/json'}, |
|
|
body: JSON.stringify(payload) |
|
|
}); |
|
|
|
|
|
if (!response.ok) { const errorData = await response.json(); throw new Error(errorData.message || `خطای سرور (${response.status})`); } |
|
|
const blob = await response.blob(); |
|
|
allAudioBlobs.push(blob); |
|
|
} catch (error) { showResultState(false, `<b>خطا:</b> ${error.message}`); hasError = true; break; } |
|
|
} |
|
|
if (!hasError && allAudioBlobs.length > 0) { |
|
|
btnText.textContent = 'ادغام فایلهای صوتی...'; |
|
|
try { |
|
|
const finalBlob = await mergeAudioBlobs(allAudioBlobs); |
|
|
if (finalBlob) { |
|
|
const audioUrl = URL.createObjectURL(finalBlob); |
|
|
mainAudioPlayer.src = audioUrl; |
|
|
const downloadLink = playerContent.querySelector('.audio-download-btn-new'); |
|
|
if (downloadLink) downloadLink.href = audioUrl; |
|
|
|
|
|
const standardPlayerContainer = playerContent.querySelector('.simple-player-container'); |
|
|
if(standardPlayerContainer) standardPlayerContainer.setAttribute('data-audio-src', audioUrl); |
|
|
|
|
|
showResultState(true); |
|
|
} else { throw new Error("ادغام فایلهای صوتی ناموفق بود."); } |
|
|
} catch (error) { showResultState(false, `<b>خطا در پردازش نهایی صدا:</b> ${error.message}`); } |
|
|
} else if (!hasError) { showResultState(false, '<b>خطا:</b> هیچ فایل صوتی تولید نشد.'); } |
|
|
if (currentUser.status === 'free') checkFreeTierCredit(); |
|
|
} finally { |
|
|
if (window.turnstile && widgetIdStandard) { setTimeout(() => { turnstile.reset(widgetIdStandard); }, 500); } |
|
|
} |
|
|
}); |
|
|
createPlayerInstance('audio-player-content-standard'); |
|
|
if (statusMessage) statusMessage.style.display = 'block'; |
|
|
})(); |
|
|
|
|
|
|
|
|
(function() { |
|
|
const form = document.getElementById('voice-clone-form'); if (!form) return; |
|
|
const generateBtn = form.querySelector('#generate-btn-clone'), btnText = generateBtn.querySelector('.btn-text'), btnSpinner = generateBtn.querySelector('.spinner'), textInput = form.querySelector('#text-input-clone'), promptInput = form.querySelector('#prompt-input-clone'), tempSlider = form.querySelector('#temperature-slider-clone'), tempValueSpan = form.querySelector('#temperature-value-clone'), userVoiceInput = document.getElementById('user-voice-input'), uploadArea = document.getElementById('upload-area'), filePreview = document.getElementById('file-preview'), fileNameSpan = document.getElementById('file-name'), removeFileBtn = document.getElementById('remove-file-btn'), audioPreview = document.getElementById('audio-preview'); |
|
|
const historyList = document.getElementById('history-list'); |
|
|
const clearHistoryBtn = document.getElementById('clear-history-btn'); |
|
|
const outputSectionClone = document.getElementById('output-section-clone'); |
|
|
const loadingAnimationClone = document.getElementById('loading-animation-wrapper-clone'); |
|
|
const statusMessageClone = document.getElementById('status-message-clone'); |
|
|
|
|
|
let lastSelectedFile = null; |
|
|
let pollingInterval = null; |
|
|
|
|
|
const handleFileSelect = (file) => { if (file && file.type.startsWith('audio/')) { lastSelectedFile = file; fileNameSpan.textContent = file.name; uploadArea.style.display = 'none'; filePreview.style.display = 'flex'; audioPreview.src = URL.createObjectURL(file); } else if (file) { alert('لطفا یک فایل صوتی معتبر (مانند MP3, WAV, M4A) انتخاب کنید.'); } }; |
|
|
|
|
|
uploadArea.addEventListener('click', (e) => { |
|
|
e.preventDefault(); |
|
|
e.stopPropagation(); |
|
|
pendingUploadTarget = userVoiceInput; |
|
|
showModal(uploadGuideModal); |
|
|
}); |
|
|
|
|
|
userVoiceInput.addEventListener('change', (e) => handleFileSelect(e.target.files[0])); |
|
|
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eName => { uploadArea.addEventListener(eName, e => { e.preventDefault(); e.stopPropagation(); }); }); |
|
|
['dragenter', 'dragover'].forEach(eName => { uploadArea.addEventListener(eName, () => uploadArea.classList.add('drag-over')); }); |
|
|
['dragleave', 'drop'].forEach(eName => { uploadArea.addEventListener(eName, () => uploadArea.classList.remove('drag-over')); }); |
|
|
uploadArea.addEventListener('drop', e => handleFileSelect(e.dataTransfer.files[0])); |
|
|
removeFileBtn.addEventListener('click', () => { userVoiceInput.value = ''; lastSelectedFile = null; uploadArea.style.display = 'block'; filePreview.style.display = 'none'; audioPreview.src = ''; }); |
|
|
tempSlider.addEventListener('input', () => tempValueSpan.textContent = tempSlider.value); |
|
|
|
|
|
|
|
|
function getJobs() { return JSON.parse(localStorage.getItem('ai_sada_jobs_persistent') || '{}'); } |
|
|
function saveJob(data) { const jobs = getJobs(); jobs[data.job_id] = data; localStorage.setItem('ai_sada_jobs_persistent', JSON.stringify(jobs)); renderHistory(); } |
|
|
function deleteJob(id) { const jobs = getJobs(); delete jobs[id]; localStorage.setItem('ai_sada_jobs_persistent', JSON.stringify(jobs)); renderHistory(); } |
|
|
|
|
|
|
|
|
window.toggleDelete = function(btn) { const card = btn.closest('.request-card'); card.classList.toggle('deleting'); } |
|
|
window.confirmDelete = function(btn) { const card = btn.closest('.request-card'); const jobId = card.id.replace('card-', ''); card.style.transform = 'scale(0.9)'; card.style.opacity = '0'; setTimeout(() => { deleteJob(jobId); }, 300); } |
|
|
window.playHistoryItem = function(url) { |
|
|
const hiddenPlayer = document.getElementById('hidden-audio-player'); |
|
|
const tempA = document.createElement('a'); tempA.href = url; const absoluteUrl = tempA.href; |
|
|
if (decodeURIComponent(hiddenPlayer.src) === decodeURIComponent(absoluteUrl) && !hiddenPlayer.paused) { hiddenPlayer.pause(); } else { hiddenPlayer.src = url; hiddenPlayer.play(); } |
|
|
}; |
|
|
window.seekAudio = function(input) { const hiddenPlayer = document.getElementById('hidden-audio-player'); if (!isNaN(hiddenPlayer.duration)) { hiddenPlayer.currentTime = (input.value / 100) * hiddenPlayer.duration; } }; |
|
|
|
|
|
|
|
|
window.renderHistory = function() { |
|
|
const jobs = getJobs(); |
|
|
historyList.innerHTML = ''; |
|
|
const sorted = Object.values(jobs).reverse(); |
|
|
if(sorted.length === 0) { historyList.innerHTML = '<p style="text-align:center;color:var(--text-tertiary);">تاریخچه خالی است.</p>'; return; } |
|
|
|
|
|
sorted.forEach(job => { |
|
|
let cardHtml = ` |
|
|
<div class="request-card" id="card-${job.job_id}"> |
|
|
<div class="card-header"> |
|
|
<div class="card-info"> |
|
|
<h4 class="project-name">${job.text ? job.text.substring(0, 30) + (job.text.length>30?'...':'') : 'شبیهسازی صدا'}</h4> |
|
|
<div class="project-date">${job.date}</div> |
|
|
</div> |
|
|
<button class="delete-trigger" onclick="toggleDelete(this)"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg> |
|
|
</button> |
|
|
</div>`; |
|
|
|
|
|
if (job.status === 'completed') { |
|
|
const downloadUrl = `${PROXY_URL_DOWNLOAD_CLONE}&filename=${job.filename}`; |
|
|
cardHtml += ` |
|
|
<div class="simple-player-container compact-player" data-audio-src="${downloadUrl}"> |
|
|
<div class="play-controls"> |
|
|
<button type="button" class="play-pause-btn-simple" onclick="playHistoryItem('${downloadUrl}')"> |
|
|
<svg viewBox="0 0 24 24" class="play-icon"><path d="M8 5v14l11-7z"></path></svg> |
|
|
<svg viewBox="0 0 24 24" class="pause-icon" style="display:none;"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"></path></svg> |
|
|
</button> |
|
|
<div class="progress-wrapper"> |
|
|
<span class="time-display current-time">0:00</span> |
|
|
<input type="range" class="audio-progress-bar" value="0" min="0" max="100" step="0.1" oninput="seekAudio(this)"> |
|
|
<span class="time-display total-time">0:00</span> |
|
|
</div> |
|
|
</div> |
|
|
<a href="${downloadUrl}" class="audio-download-btn-new" download="voice_clone_${job.job_id}.wav"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19.35 10.04A7.49 7.49 0 0 0 12 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 0 0 0 14a6 6 0 0 0 6 6h13a5 5 0 0 0 5-5c0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z"></path></svg> |
|
|
<span>دانلود</span> |
|
|
</a> |
|
|
</div>`; |
|
|
} else if (job.status === 'failed') { |
|
|
cardHtml += ` |
|
|
<div class="processing-content"> |
|
|
<div class="info-box" style="background:#FED7D7; border-color:#F56565; color:#C53030;"> |
|
|
<span class="info-icon">⚠️</span> |
|
|
<span>خطا در پردازش: ${job.error || 'ناشناخته'}</span> |
|
|
</div> |
|
|
</div>`; |
|
|
} else { |
|
|
const progress = job.progress || 0; |
|
|
cardHtml += ` |
|
|
<div class="processing-content"> |
|
|
<div class="progress-text"> |
|
|
<span>${job.step_desc || 'در حال پردازش...'}</span> |
|
|
<span>${progress}%</span> |
|
|
</div> |
|
|
<div class="progress-track"> |
|
|
<div class="progress-bar" style="width: ${progress}%"></div> |
|
|
</div> |
|
|
<div class="info-box"> |
|
|
<span class="info-icon">⏳</span> |
|
|
<span>لطفاً منتظر بمانید...</span> |
|
|
</div> |
|
|
</div>`; |
|
|
} |
|
|
|
|
|
cardHtml += ` |
|
|
<div class="delete-overlay"> |
|
|
<div class="delete-text">آیا از حذف این درخواست مطمئن هستید؟</div> |
|
|
<div class="delete-actions"> |
|
|
<button class="btn-cancel" onclick="toggleDelete(this)">انصراف</button> |
|
|
<button class="btn-confirm" onclick="confirmDelete(this)">بله، حذف کن</button> |
|
|
</div> |
|
|
</div> |
|
|
</div>`; |
|
|
|
|
|
historyList.insertAdjacentHTML('beforeend', cardHtml); |
|
|
}); |
|
|
}; |
|
|
|
|
|
|
|
|
async function checkPendingJobs() { |
|
|
const jobs = getJobs(); |
|
|
const pendingJobs = Object.values(jobs).filter(j => j.status !== 'completed' && j.status !== 'failed'); |
|
|
|
|
|
if (pendingJobs.length === 0) return; |
|
|
|
|
|
for (const job of pendingJobs) { |
|
|
|
|
|
|
|
|
if (!job.chunks || job.chunks.length === 0) continue; |
|
|
|
|
|
try { |
|
|
const payload = { |
|
|
job_id: job.job_id, |
|
|
total_chunks: job.total_chunks || 0, |
|
|
chunks: job.chunks || [] |
|
|
}; |
|
|
|
|
|
const response = await fetch(PROXY_URL_VC_STATUS, { |
|
|
method: 'POST', |
|
|
headers: {'Content-Type': 'application/json'}, |
|
|
body: JSON.stringify(payload) |
|
|
}); |
|
|
|
|
|
if (response.ok) { |
|
|
const result = await response.json(); |
|
|
job.status = result.status; |
|
|
job.progress = result.progress; |
|
|
if (result.filename) job.filename = result.filename; |
|
|
if (job.status === 'completed') job.step_desc = 'تکمیل شد'; |
|
|
saveJob(job); |
|
|
} |
|
|
} catch (e) { |
|
|
console.error("Polling error for job " + job.job_id, e); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
pollingInterval = setInterval(checkPendingJobs, 5000); |
|
|
|
|
|
const showCloneLoading = () => { generateBtn.disabled = true; loadingAnimationClone.style.display = 'flex'; statusMessageClone.style.display = 'none'; outputSectionClone.scrollIntoView({ behavior: 'smooth' }); }; |
|
|
const hideCloneLoading = () => { generateBtn.disabled = false; loadingAnimationClone.style.display = 'none'; statusMessageClone.style.display = 'block'; }; |
|
|
|
|
|
|
|
|
async function orchestrateClone(text, file, turnstileToken) { |
|
|
|
|
|
const jobId = `job_${Date.now()}`; |
|
|
const jobData = { |
|
|
job_id: jobId, |
|
|
text: text, |
|
|
date: new Date().toLocaleString('fa-IR'), |
|
|
status: 'processing', |
|
|
progress: 5, |
|
|
step_desc: 'در حال تولید صدای پایه...', |
|
|
chunks: [] |
|
|
}; |
|
|
saveJob(jobData); |
|
|
|
|
|
try { |
|
|
|
|
|
const ttsPayload = { |
|
|
text: text, |
|
|
speaker: 'Charon', |
|
|
temperature: parseFloat(tempSlider.value), |
|
|
email: currentUser.email, |
|
|
turnstile_token: turnstileToken |
|
|
}; |
|
|
|
|
|
const ttsRes = await fetch(PROXY_URL_GENERATE, { |
|
|
method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(ttsPayload) |
|
|
}); |
|
|
if(!ttsRes.ok) throw new Error('خطا در شروع تولید صدای پایه'); |
|
|
const ttsData = await ttsRes.json(); |
|
|
const ttsJobId = ttsData.job_id; |
|
|
|
|
|
|
|
|
let ttsAudioUrl = null; |
|
|
for(let i=0; i<40; i++) { |
|
|
jobData.progress = 10 + Math.floor(i * 1.5); |
|
|
saveJob(jobData); |
|
|
|
|
|
const pollRes = await fetch(PROXY_URL_CHECK_TTS, { |
|
|
method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({job_id: ttsJobId}) |
|
|
}); |
|
|
const pollData = await pollRes.json(); |
|
|
|
|
|
if(pollData.status === 'completed' && pollData.proxy_url) { |
|
|
|
|
|
|
|
|
const podcastBase = 'https://ezmary-padgenpro2.hf.space'; |
|
|
ttsAudioUrl = pollData.proxy_url.startsWith('http') ? pollData.proxy_url : (podcastBase + pollData.proxy_url); |
|
|
break; |
|
|
} |
|
|
if(pollData.status === 'failed') throw new Error('تولید صدای پایه ناموفق بود.'); |
|
|
await new Promise(r => setTimeout(r, 3000)); |
|
|
} |
|
|
|
|
|
if(!ttsAudioUrl) throw new Error('تایماوت در تولید صدای پایه.'); |
|
|
|
|
|
|
|
|
jobData.step_desc = 'در حال آمادهسازی فایلها...'; |
|
|
saveJob(jobData); |
|
|
const ttsBlob = await fetch(ttsAudioUrl).then(r => r.blob()); |
|
|
|
|
|
|
|
|
jobData.step_desc = 'ارسال به سرور شبیهسازی...'; |
|
|
jobData.progress = 75; |
|
|
saveJob(jobData); |
|
|
|
|
|
const formData = new FormData(); |
|
|
formData.append('email', currentUser.email); |
|
|
formData.append('source_audio', ttsBlob, 'source.wav'); |
|
|
formData.append('ref_audio', file, 'ref.wav'); |
|
|
|
|
|
const vcRes = await fetch(PROXY_URL_VC_UPLOAD, { method: 'POST', body: formData }); |
|
|
if(!vcRes.ok) throw new Error('خطا در آپلود به سرور کلون'); |
|
|
const vcData = await vcRes.json(); |
|
|
|
|
|
|
|
|
jobData.job_id = vcData.job_id; |
|
|
|
|
|
|
|
|
deleteJob(jobId); |
|
|
|
|
|
jobData.id = vcData.job_id; |
|
|
jobData.total_chunks = vcData.total_chunks; |
|
|
jobData.chunks = vcData.chunks; |
|
|
jobData.step_desc = 'در حال شبیهسازی نهایی...'; |
|
|
jobData.progress = 80; |
|
|
saveJob(jobData); |
|
|
|
|
|
} catch(e) { |
|
|
jobData.status = 'failed'; |
|
|
jobData.error = e.message; |
|
|
saveJob(jobData); |
|
|
} finally { |
|
|
hideCloneLoading(); |
|
|
btnText.textContent = 'ارسال به صف پردازش'; |
|
|
turnstile.reset(widgetIdClone); |
|
|
} |
|
|
} |
|
|
|
|
|
form.addEventListener('submit', async () => { |
|
|
if (generateBtn.disabled) return; |
|
|
if (currentUser.status !== 'paid') { alert("این قابلیت مخصوص کاربران ویژه است."); return; } |
|
|
const text = textInput.value; |
|
|
if (!text.trim() || !lastSelectedFile) { alert("لطفاً هم متن و هم فایل صوتی را وارد کنید."); return; } |
|
|
|
|
|
const turnstileToken = turnstile.getResponse(widgetIdClone); |
|
|
if (!turnstileToken) { alert('لطفا تایید کنید که ربات نیستید (کپچا).'); return; } |
|
|
|
|
|
showCloneLoading(); |
|
|
btnText.textContent = 'شروع پردازش چند مرحلهای...'; |
|
|
|
|
|
|
|
|
orchestrateClone(text, lastSelectedFile, turnstileToken); |
|
|
|
|
|
textInput.value = ''; |
|
|
statusMessageClone.innerHTML = `<span style="color:green; font-weight:bold;">✅ درخواست شما در حال پردازش است.</span>`; |
|
|
}); |
|
|
|
|
|
renderHistory(); |
|
|
|
|
|
})(); |
|
|
|
|
|
|
|
|
function setupEventListeners() { |
|
|
loginCheckBtn.addEventListener('click', () => { showModal(emailModal); loginEmailInput.value = ''; codeInput.value = ''; }); |
|
|
logoutBtn.addEventListener('click', handleLogout); |
|
|
document.querySelectorAll('.select-plan-btn').forEach(button => { button.addEventListener('click', async () => { if (!currentUser.email) { alert("برای خرید اشتراک، لطفا ابتدا وارد حساب کاربری خود شوید."); loginCheckBtn.click(); return; } const plan = button.dataset.plan; button.disabled = true; button.textContent = 'در حال انتقال...'; try { const response = await fetch(PAYMENT_REQUEST_URL, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ plan: plan, email: currentUser.email }) }); const result = await response.json(); if (response.ok && result.payment_url) { window.location.href = result.payment_url; } else { alert('خطا: ' + (result.error || 'مشکلی در اتصال به درگاه پرداخت رخ داد.')); } } catch (error) { alert('خطای شبکه. لطفا اتصال اینترنت خود را بررسی کنید.'); } finally { button.disabled = false; button.textContent = 'انتخاب پلن'; } }); }); |
|
|
|
|
|
emailForm.addEventListener('submit', async (e) => { |
|
|
e.preventDefault(); |
|
|
const email = loginEmailInput.value; |
|
|
if (!email) return; |
|
|
|
|
|
const turnstileToken = turnstile.getResponse(widgetIdLogin); |
|
|
if (!turnstileToken) { |
|
|
alert('لطفا تایید کنید که ربات نیستید.'); |
|
|
return; |
|
|
} |
|
|
|
|
|
sendCodeBtn.disabled = true; |
|
|
sendCodeBtn.textContent = 'در حال ارسال...'; |
|
|
try { |
|
|
const response = await fetch(SEND_CODE_URL, { |
|
|
method: 'POST', |
|
|
headers: { 'Content-Type': 'application/json' }, |
|
|
body: JSON.stringify({ email: email, turnstile_token: turnstileToken }) |
|
|
}); |
|
|
const result = await response.json(); |
|
|
if (!response.ok) throw new Error(result.message || 'خطا در ارسال کد.'); |
|
|
codeModalDesc.textContent = `کد ۶ رقمی ارسال شده به ${email} را وارد کنید.`; |
|
|
emailForm.style.display = 'none'; |
|
|
codeForm.style.display = 'block'; |
|
|
codeInput.focus(); |
|
|
} catch (error) { |
|
|
alert(error.message); |
|
|
} finally { |
|
|
sendCodeBtn.disabled = false; |
|
|
sendCodeBtn.textContent = 'ارسال کد تایید'; |
|
|
if (window.turnstile && widgetIdLogin) { |
|
|
setTimeout(() => { |
|
|
turnstile.reset(widgetIdLogin); |
|
|
}, 500); |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
codeForm.addEventListener('submit', async (e) => { e.preventDefault(); const email = loginEmailInput.value; const code = codeInput.value; if (!code || code.length !== 6) return; verifyCodeBtn.disabled = true; verifyCodeBtn.textContent = 'در حال بررسی...'; try { const response = await fetch(VERIFY_CODE_URL, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email: email, code: code }) }); const result = await response.json(); if (!response.ok) throw new Error(result.message || 'خطا در تایید کد.'); hideModal(emailModal); await checkUserStatus(email); } catch (error) { alert(error.message); } finally { verifyCodeBtn.disabled = false; verifyCodeBtn.textContent = 'تایید و ورود'; codeInput.value = ''; } }); |
|
|
backToEmailBtn.addEventListener('click', () => { emailForm.style.display = 'block'; codeForm.style.display = 'none'; }); |
|
|
[changeSpeakerBtn, selectedSpeakerCard].forEach(el => el && el.addEventListener('click', () => { createSpeakerCardsInModal(); showModal(speakerModal); })); |
|
|
if(tempInfoIcon) tempInfoIcon.addEventListener('click', () => showModal(infoModal)); |
|
|
if(backToStandardBtn) backToStandardBtn.addEventListener('click', () => switchView('standard', true)); |
|
|
document.querySelectorAll('.modal-overlay').forEach(o => o.addEventListener('click', (e) => (e.target === o) && hideModal(o))); |
|
|
document.querySelectorAll('.close-modal-btn').forEach(b => b.addEventListener('click', () => hideModal(b.closest('.modal-overlay')))); |
|
|
['timeupdate', 'play', 'pause', 'ended', 'loadedmetadata'].forEach(e => mainAudioPlayer.addEventListener(e, updatePlayerUI)); |
|
|
document.querySelectorAll('.faq-item .faq-question').forEach(button => { button.addEventListener('click', () => { const item = button.parentElement; const answer = item.querySelector('.faq-answer'); const isActive = item.classList.contains('active'); document.querySelectorAll('.faq-item').forEach(i => { i.classList.remove('active'); i.querySelector('.faq-answer').style.maxHeight = null; }); if (!isActive) { item.classList.add('active'); answer.style.maxHeight = answer.scrollHeight + "px"; } }); }); |
|
|
|
|
|
goToPricingBtn.addEventListener('click', () => { |
|
|
hideModal(upgradeModal); |
|
|
pricingSection.scrollIntoView({ behavior: 'smooth' }); |
|
|
}); |
|
|
|
|
|
|
|
|
modelAudioInput.addEventListener('click', (e) => { |
|
|
if(isProgrammaticClick) { |
|
|
isProgrammaticClick = false; |
|
|
return; |
|
|
} |
|
|
e.preventDefault(); |
|
|
pendingUploadTarget = modelAudioInput; |
|
|
showModal(uploadGuideModal); |
|
|
}); |
|
|
|
|
|
|
|
|
uploadGuideBtn.addEventListener('click', () => { |
|
|
hideModal(uploadGuideModal); |
|
|
if(pendingUploadTarget) { |
|
|
isProgrammaticClick = true; |
|
|
pendingUploadTarget.click(); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
async function initializeApp() { |
|
|
currentUser.fingerprint = await getBrowserFingerprint(); |
|
|
setupEventListeners(); |
|
|
const storedEmail = localStorage.getItem('userEmail'); |
|
|
await checkUserStatus(storedEmail); |
|
|
if(selectedSpeakerIdStorage.value) { |
|
|
updateSelectedSpeakerDisplay(selectedSpeakerIdStorage.value); |
|
|
} else { |
|
|
updateSelectedSpeakerDisplay(defaultSpeakers[0].id); |
|
|
} |
|
|
} |
|
|
|
|
|
initializeApp(); |
|
|
}); |
|
|
</script> |
|
|
|
|
|
</body> |
|
|
</html> |
