Update index.html
Browse files- index.html +39 -82
index.html
CHANGED
|
@@ -3,7 +3,7 @@
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
| 6 |
-
<title>استودیو موزیک
|
| 7 |
<link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700;800&display=swap" rel="stylesheet">
|
| 8 |
<style>
|
| 9 |
:root {
|
|
@@ -15,8 +15,8 @@
|
|
| 15 |
--input-border: #E1E7EF;
|
| 16 |
--text-primary: #1A202C;
|
| 17 |
--text-secondary: #626F86;
|
| 18 |
-
--accent-primary: #
|
| 19 |
-
--accent-glow: rgba(
|
| 20 |
--success-color: #38A169;
|
| 21 |
--radius-card: 20px;
|
| 22 |
--radius-btn: 14px;
|
|
@@ -57,7 +57,7 @@
|
|
| 57 |
|
| 58 |
h1 {
|
| 59 |
font-size: 1.8rem; font-weight: 800; margin: 0;
|
| 60 |
-
background: linear-gradient(90deg, #2d3748,
|
| 61 |
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
| 62 |
}
|
| 63 |
.subtitle { font-size: 0.9rem; color: var(--text-secondary); margin-top: 5px; }
|
|
@@ -92,7 +92,7 @@
|
|
| 92 |
/* استایل دکمه‌ها */
|
| 93 |
.btn-main {
|
| 94 |
width: 100%; padding: 16px;
|
| 95 |
-
background: linear-gradient(135deg, var(--accent-primary), #
|
| 96 |
color: #fff; border: none; border-radius: var(--radius-btn);
|
| 97 |
font-size: 1.1rem; font-weight: 700; cursor: pointer;
|
| 98 |
display: flex; justify-content: center; align-items: center; gap: 10px;
|
|
@@ -161,9 +161,9 @@
|
|
| 161 |
border-bottom: 1px solid var(--panel-border);
|
| 162 |
}
|
| 163 |
|
| 164 |
-
/*
|
| 165 |
#mainDownloadLink {
|
| 166 |
-
background-color: rgba(
|
| 167 |
color: var(--accent-primary);
|
| 168 |
text-decoration: none;
|
| 169 |
font-size: 0.9rem;
|
|
@@ -171,9 +171,9 @@
|
|
| 171 |
padding: 8px 16px;
|
| 172 |
border-radius: 10px;
|
| 173 |
transition: 0.2s;
|
| 174 |
-
display: none;
|
| 175 |
}
|
| 176 |
-
#mainDownloadLink:hover { background-color: rgba(
|
| 177 |
|
| 178 |
.audio-item { margin-bottom: 10px; }
|
| 179 |
audio { width: 100%; height: 45px; border-radius: 20px; margin-top: 5px; }
|
|
@@ -223,13 +223,14 @@
|
|
| 223 |
<div class="container">
|
| 224 |
<header>
|
| 225 |
<div class="logo-box">
|
|
|
|
| 226 |
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg>
|
| 227 |
</div>
|
| 228 |
-
<h1>استودیو موزیک
|
| 229 |
-
<p class="subtitle">ساخت آهنگ
|
| 230 |
</header>
|
| 231 |
|
| 232 |
-
<!-- مرحله
|
| 233 |
<div id="step1" class="card">
|
| 234 |
<div class="form-label">
|
| 235 |
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path></svg>
|
|
@@ -237,14 +238,13 @@
|
|
| 237 |
</div>
|
| 238 |
<textarea id="ideaInput" placeholder="مثال: آهنگ تولد برای سمیرا، سبک پاپ شاد..."></textarea>
|
| 239 |
|
| 240 |
-
<!-- ت
|
| 241 |
<button class="accordion">تنظیمات پیشرفته (مدل، تعداد، کیفیت)</button>
|
| 242 |
<div class="panel">
|
| 243 |
<div class="settings-grid">
|
| 244 |
<div class="settings-group">
|
| 245 |
<label>مدل هوش مصنوعی:</label>
|
| 246 |
<select id="model_select">
|
| 247 |
-
<!-- پیش‌فرض روی مدل قوی‌تر -->
|
| 248 |
<option value="acestep-v15-turbo-shift3" selected>Turbo-Shift3 (دقیق‌ترین - پیشنهادی)</option>
|
| 249 |
<option value="acestep-v15-turbo">Turbo (سریع‌ترین)</option>
|
| 250 |
</select>
|
|
@@ -255,7 +255,7 @@
|
|
| 255 |
</div>
|
| 256 |
<div class="settings-group">
|
| 257 |
<label>تعداد گام (Steps):</label>
|
| 258 |
-
<input type="number" id="steps_input" value="8" min="4" max="50"
|
| 259 |
</div>
|
| 260 |
<div class="settings-group">
|
| 261 |
<label>سید (Seed) تصادفی=-1:</label>
|
|
@@ -276,8 +276,7 @@
|
|
| 276 |
</div>
|
| 277 |
|
| 278 |
<button id="processBtn" class="btn-main" style="margin-top: 15px;">
|
| 279 |
-
<span>
|
| 280 |
-
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"></polyline></svg>
|
| 281 |
</button>
|
| 282 |
</div>
|
| 283 |
|
|
@@ -289,27 +288,13 @@
|
|
| 289 |
<p style="color: #718096; font-size: 0.9rem; margin-top: 10px;" id="loaderText">در حال پردازش...</p>
|
| 290 |
</div>
|
| 291 |
|
| 292 |
-
<!-- مرحله
|
| 293 |
-
<div id="step2" class="card hidden">
|
| 294 |
-
<div class="form-label">متن آماده شده (قابل ویرایش)</div>
|
| 295 |
-
<textarea id="generatedLyrics" style="height: 200px;"></textarea>
|
| 296 |
-
<textarea id="generatedPrompt" class="hidden"></textarea>
|
| 297 |
-
|
| 298 |
-
<button id="generateAudioBtn" class="btn-main" style="margin-top: 15px;">
|
| 299 |
-
<span>شروع ضبط نهایی آهنگ</span>
|
| 300 |
-
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
|
| 301 |
-
</button>
|
| 302 |
-
<button onclick="backToStep1()" class="btn-main btn-outline">بازگشت و تغییر تنظیمات</button>
|
| 303 |
-
</div>
|
| 304 |
-
|
| 305 |
-
<!-- مرحله ۳: نتیجه نهایی -->
|
| 306 |
<div id="finalResult" class="card">
|
| 307 |
<div class="player-header">
|
| 308 |
<div style="font-weight: 700; color: var(--success-color); display: flex; align-items: center; gap: 5px;">
|
| 309 |
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
|
| 310 |
آهنگ آماده شد
|
| 311 |
</div>
|
| 312 |
-
<!-- دکمه دانلود اینجا قرار گرفت -->
|
| 313 |
<a id="mainDownloadLink" href="#" target="_blank" download>
|
| 314 |
دانلود آهنگ 📥
|
| 315 |
</a>
|
|
@@ -336,12 +321,8 @@
|
|
| 336 |
const ideaInput = document.getElementById('ideaInput');
|
| 337 |
const processBtn = document.getElementById('processBtn');
|
| 338 |
const step1 = document.getElementById('step1');
|
| 339 |
-
const step2 = document.getElementById('step2');
|
| 340 |
const loader = document.getElementById('loader');
|
| 341 |
const loaderText = document.getElementById('loaderText');
|
| 342 |
-
const generatedLyrics = document.getElementById('generatedLyrics');
|
| 343 |
-
const generatedPrompt = document.getElementById('generatedPrompt');
|
| 344 |
-
const generateAudioBtn = document.getElementById('generateAudioBtn');
|
| 345 |
const finalResult = document.getElementById('finalResult');
|
| 346 |
const playerWrapper = document.getElementById('playerWrapper');
|
| 347 |
const finalLyricsBox = document.getElementById('finalLyricsBox');
|
|
@@ -361,22 +342,19 @@
|
|
| 361 |
});
|
| 362 |
}
|
| 363 |
|
| 364 |
-
|
| 365 |
-
step2.style.display = 'none';
|
| 366 |
-
step1.style.display = 'block';
|
| 367 |
-
window.scrollTo({ top: 0, behavior: 'smooth' });
|
| 368 |
-
}
|
| 369 |
-
|
| 370 |
-
// مرحله ۱: تولید متن با جمینای
|
| 371 |
processBtn.addEventListener('click', async () => {
|
| 372 |
if (!ideaInput.value.trim()) return alert("لطفا موضوع آهنگ را بنویسید");
|
| 373 |
|
|
|
|
| 374 |
processBtn.disabled = true;
|
| 375 |
-
loader.style.display = 'block';
|
| 376 |
-
loaderText.innerText = "هوش مصنوعی در حال سرودن شعر و طراحی موزیک...";
|
| 377 |
step1.style.display = 'none';
|
| 378 |
-
|
|
|
|
| 379 |
try {
|
|
|
|
|
|
|
|
|
|
| 380 |
const response = await fetch('/api/refine', {
|
| 381 |
method: 'POST',
|
| 382 |
headers: {'Content-Type': 'application/json'},
|
|
@@ -386,38 +364,21 @@
|
|
| 386 |
const data = await response.json();
|
| 387 |
if (data.error) throw new Error(data.error);
|
| 388 |
|
| 389 |
-
|
| 390 |
-
|
| 391 |
|
| 392 |
-
|
| 393 |
-
|
| 394 |
-
|
| 395 |
-
|
| 396 |
-
|
| 397 |
-
} catch (e) {
|
| 398 |
-
alert("خطا: " + e.message);
|
| 399 |
-
step1.style.display = 'block';
|
| 400 |
-
loader.style.display = 'none';
|
| 401 |
-
processBtn.disabled = false;
|
| 402 |
-
}
|
| 403 |
-
});
|
| 404 |
-
|
| 405 |
-
// مرحله ۲: ساخت آهنگ
|
| 406 |
-
generateAudioBtn.addEventListener('click', async () => {
|
| 407 |
-
generateAudioBtn.disabled = true;
|
| 408 |
-
step2.style.display = 'none';
|
| 409 |
-
loader.style.display = 'block';
|
| 410 |
-
loaderText.innerText = "در حال ضبط استودیویی (ممکن است ۱ تا ۳ دقیقه طول بکشد)...";
|
| 411 |
-
|
| 412 |
-
try {
|
| 413 |
-
formatLyricsForDisplay(generatedLyrics.value);
|
| 414 |
playerWrapper.innerHTML = '';
|
| 415 |
|
| 416 |
const payload = [
|
| 417 |
getVal('model_select'),
|
| 418 |
"custom", null, "unknown",
|
| 419 |
-
|
| 420 |
-
|
| 421 |
0, "", "", "unknown",
|
| 422 |
getNum('steps_input'),
|
| 423 |
getNum('cfg_input'),
|
|
@@ -447,7 +408,7 @@
|
|
| 447 |
eventSource.onmessage = (event) => {
|
| 448 |
const msg = JSON.parse(event.data);
|
| 449 |
if (msg.msg === 'process_starts') {
|
| 450 |
-
loaderText.innerText = "
|
| 451 |
} else if (msg.msg === 'process_completed') {
|
| 452 |
eventSource.close();
|
| 453 |
loader.style.display = 'none';
|
|
@@ -460,34 +421,30 @@
|
|
| 460 |
};
|
| 461 |
|
| 462 |
} catch (e) {
|
| 463 |
-
alert(e.message);
|
| 464 |
loader.style.display = 'none';
|
| 465 |
-
|
| 466 |
-
|
| 467 |
}
|
| 468 |
});
|
| 469 |
|
| 470 |
function handleAudioOutput(data) {
|
| 471 |
-
// استفاده از Set برای جلوگیری از تکرار فایل یکسان
|
| 472 |
const processedUrls = new Set();
|
| 473 |
let hasResult = false;
|
| 474 |
|
| 475 |
function addAudio(url) {
|
| 476 |
const fullUrl = url.startsWith('http') ? url : ACE_SPACE_URL.replace(/\/$/, '') + url;
|
| 477 |
|
| 478 |
-
// اگر این لینک قبلاً اضافه شده، دوباره اضافه نکن
|
| 479 |
if (processedUrls.has(fullUrl)) return;
|
| 480 |
processedUrls.add(fullUrl);
|
| 481 |
|
| 482 |
hasResult = true;
|
| 483 |
|
| 484 |
-
// اگر اولین آهنگ است، دکمه دانلود اصلی را آپدیت کن
|
| 485 |
if (processedUrls.size === 1) {
|
| 486 |
mainDownloadLink.href = fullUrl;
|
| 487 |
mainDownloadLink.style.display = 'inline-block';
|
| 488 |
}
|
| 489 |
|
| 490 |
-
// ساخت پلیر
|
| 491 |
const div = document.createElement('div');
|
| 492 |
div.className = 'audio-item';
|
| 493 |
div.innerHTML = `<audio controls src="${fullUrl}"></audio>`;
|
|
@@ -509,7 +466,7 @@
|
|
| 509 |
window.scrollTo({ top: 0, behavior: 'smooth' });
|
| 510 |
} else {
|
| 511 |
alert("فایل صوتی یافت نشد!");
|
| 512 |
-
|
| 513 |
}
|
| 514 |
}
|
| 515 |
|
|
@@ -532,7 +489,7 @@
|
|
| 532 |
function anim() {
|
| 533 |
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
| 534 |
ctx.beginPath();
|
| 535 |
-
ctx.strokeStyle = "rgba(
|
| 536 |
ctx.lineWidth = 2;
|
| 537 |
for(let i=0; i<canvas.width; i+=20) {
|
| 538 |
ctx.moveTo(i, 0);
|
|
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
| 6 |
+
<title>استودیو موزیک آلفا (Alpha)</title>
|
| 7 |
<link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700;800&display=swap" rel="stylesheet">
|
| 8 |
<style>
|
| 9 |
:root {
|
|
|
|
| 15 |
--input-border: #E1E7EF;
|
| 16 |
--text-primary: #1A202C;
|
| 17 |
--text-secondary: #626F86;
|
| 18 |
+
--accent-primary: #D53F8C; /* رنگ جدید برای برند آلفا (صورتی/بنفش جذاب) */
|
| 19 |
+
--accent-glow: rgba(213, 63, 140, 0.2);
|
| 20 |
--success-color: #38A169;
|
| 21 |
--radius-card: 20px;
|
| 22 |
--radius-btn: 14px;
|
|
|
|
| 57 |
|
| 58 |
h1 {
|
| 59 |
font-size: 1.8rem; font-weight: 800; margin: 0;
|
| 60 |
+
background: linear-gradient(90deg, #2d3748, var(--accent-primary));
|
| 61 |
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
| 62 |
}
|
| 63 |
.subtitle { font-size: 0.9rem; color: var(--text-secondary); margin-top: 5px; }
|
|
|
|
| 92 |
/* استایل دکمه‌ها */
|
| 93 |
.btn-main {
|
| 94 |
width: 100%; padding: 16px;
|
| 95 |
+
background: linear-gradient(135deg, var(--accent-primary), #9F7AEA);
|
| 96 |
color: #fff; border: none; border-radius: var(--radius-btn);
|
| 97 |
font-size: 1.1rem; font-weight: 700; cursor: pointer;
|
| 98 |
display: flex; justify-content: center; align-items: center; gap: 10px;
|
|
|
|
| 161 |
border-bottom: 1px solid var(--panel-border);
|
| 162 |
}
|
| 163 |
|
| 164 |
+
/* دکمه دانلود */
|
| 165 |
#mainDownloadLink {
|
| 166 |
+
background-color: rgba(213, 63, 140, 0.1);
|
| 167 |
color: var(--accent-primary);
|
| 168 |
text-decoration: none;
|
| 169 |
font-size: 0.9rem;
|
|
|
|
| 171 |
padding: 8px 16px;
|
| 172 |
border-radius: 10px;
|
| 173 |
transition: 0.2s;
|
| 174 |
+
display: none;
|
| 175 |
}
|
| 176 |
+
#mainDownloadLink:hover { background-color: rgba(213, 63, 140, 0.2); }
|
| 177 |
|
| 178 |
.audio-item { margin-bottom: 10px; }
|
| 179 |
audio { width: 100%; height: 45px; border-radius: 20px; margin-top: 5px; }
|
|
|
|
| 223 |
<div class="container">
|
| 224 |
<header>
|
| 225 |
<div class="logo-box">
|
| 226 |
+
<!-- آیکون جدید موسیقی -->
|
| 227 |
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg>
|
| 228 |
</div>
|
| 229 |
+
<h1>استودیو موزیک آلفا</h1>
|
| 230 |
+
<p class="subtitle">ساخت آهنگ حرفه‌ای با هوش مصنوعی</p>
|
| 231 |
</header>
|
| 232 |
|
| 233 |
+
<!-- مرحله اصلی: ورودی + تنظیمات + دکمه نهایی -->
|
| 234 |
<div id="step1" class="card">
|
| 235 |
<div class="form-label">
|
| 236 |
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path></svg>
|
|
|
|
| 238 |
</div>
|
| 239 |
<textarea id="ideaInput" placeholder="مثال: آهنگ تولد برای سمیرا، سبک پاپ شاد..."></textarea>
|
| 240 |
|
| 241 |
+
<!-- تنظیمات پیشرفته -->
|
| 242 |
<button class="accordion">تنظیمات پیشرفته (مدل، تعداد، کیفیت)</button>
|
| 243 |
<div class="panel">
|
| 244 |
<div class="settings-grid">
|
| 245 |
<div class="settings-group">
|
| 246 |
<label>مدل هوش مصنوعی:</label>
|
| 247 |
<select id="model_select">
|
|
|
|
| 248 |
<option value="acestep-v15-turbo-shift3" selected>Turbo-Shift3 (دقیق‌ترین - پیشنهادی)</option>
|
| 249 |
<option value="acestep-v15-turbo">Turbo (سریع‌ترین)</option>
|
| 250 |
</select>
|
|
|
|
| 255 |
</div>
|
| 256 |
<div class="settings-group">
|
| 257 |
<label>تعداد گام (Steps):</label>
|
| 258 |
+
<input type="number" id="steps_input" value="8" min="4" max="50">
|
| 259 |
</div>
|
| 260 |
<div class="settings-group">
|
| 261 |
<label>سید (Seed) تصادفی=-1:</label>
|
|
|
|
| 276 |
</div>
|
| 277 |
|
| 278 |
<button id="processBtn" class="btn-main" style="margin-top: 15px;">
|
| 279 |
+
<span>ساخت آهنگ 🎵</span>
|
|
|
|
| 280 |
</button>
|
| 281 |
</div>
|
| 282 |
|
|
|
|
| 288 |
<p style="color: #718096; font-size: 0.9rem; margin-top: 10px;" id="loaderText">در حال پردازش...</p>
|
| 289 |
</div>
|
| 290 |
|
| 291 |
+
<!-- مرحله نهایی: نمایش نتیجه -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 292 |
<div id="finalResult" class="card">
|
| 293 |
<div class="player-header">
|
| 294 |
<div style="font-weight: 700; color: var(--success-color); display: flex; align-items: center; gap: 5px;">
|
| 295 |
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
|
| 296 |
آهنگ آماده شد
|
| 297 |
</div>
|
|
|
|
| 298 |
<a id="mainDownloadLink" href="#" target="_blank" download>
|
| 299 |
دانلود آهنگ 📥
|
| 300 |
</a>
|
|
|
|
| 321 |
const ideaInput = document.getElementById('ideaInput');
|
| 322 |
const processBtn = document.getElementById('processBtn');
|
| 323 |
const step1 = document.getElementById('step1');
|
|
|
|
| 324 |
const loader = document.getElementById('loader');
|
| 325 |
const loaderText = document.getElementById('loaderText');
|
|
|
|
|
|
|
|
|
|
| 326 |
const finalResult = document.getElementById('finalResult');
|
| 327 |
const playerWrapper = document.getElementById('playerWrapper');
|
| 328 |
const finalLyricsBox = document.getElementById('finalLyricsBox');
|
|
|
|
| 342 |
});
|
| 343 |
}
|
| 344 |
|
| 345 |
+
// --- فرآیند اصلی: ساخت یک‌مرحله‌ای ---
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 346 |
processBtn.addEventListener('click', async () => {
|
| 347 |
if (!ideaInput.value.trim()) return alert("لطفا موضوع آهنگ را بنویسید");
|
| 348 |
|
| 349 |
+
// مخفی کردن فرم و نمایش لودر
|
| 350 |
processBtn.disabled = true;
|
|
|
|
|
|
|
| 351 |
step1.style.display = 'none';
|
| 352 |
+
loader.style.display = 'block';
|
| 353 |
+
|
| 354 |
try {
|
| 355 |
+
// 1. دریافت متن و پرامپت از Gemini
|
| 356 |
+
loaderText.innerText = "آلفا در حال نوشتن شعر و ملودی...";
|
| 357 |
+
|
| 358 |
const response = await fetch('/api/refine', {
|
| 359 |
method: 'POST',
|
| 360 |
headers: {'Content-Type': 'application/json'},
|
|
|
|
| 364 |
const data = await response.json();
|
| 365 |
if (data.error) throw new Error(data.error);
|
| 366 |
|
| 367 |
+
const lyrics = data.lyrics;
|
| 368 |
+
const musicPrompt = data.music_prompt;
|
| 369 |
|
| 370 |
+
// 2. ارسال مستقیم برای ساخت آهنگ (بدون توقف)
|
| 371 |
+
loaderText.innerText = "در حال ضبط آهنگ در استودیو آلفا (لطفاً صبر کنید)...";
|
| 372 |
+
|
| 373 |
+
// آماده‌سازی محیط پخش
|
| 374 |
+
formatLyricsForDisplay(lyrics);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 375 |
playerWrapper.innerHTML = '';
|
| 376 |
|
| 377 |
const payload = [
|
| 378 |
getVal('model_select'),
|
| 379 |
"custom", null, "unknown",
|
| 380 |
+
musicPrompt,
|
| 381 |
+
lyrics,
|
| 382 |
0, "", "", "unknown",
|
| 383 |
getNum('steps_input'),
|
| 384 |
getNum('cfg_input'),
|
|
|
|
| 408 |
eventSource.onmessage = (event) => {
|
| 409 |
const msg = JSON.parse(event.data);
|
| 410 |
if (msg.msg === 'process_starts') {
|
| 411 |
+
loaderText.innerText = "هوش مصنوعی در حال خواندن...";
|
| 412 |
} else if (msg.msg === 'process_completed') {
|
| 413 |
eventSource.close();
|
| 414 |
loader.style.display = 'none';
|
|
|
|
| 421 |
};
|
| 422 |
|
| 423 |
} catch (e) {
|
| 424 |
+
alert("خطا: " + e.message);
|
| 425 |
loader.style.display = 'none';
|
| 426 |
+
step1.style.display = 'block'; // بازگشت به مرحله اول در صورت خطا
|
| 427 |
+
processBtn.disabled = false;
|
| 428 |
}
|
| 429 |
});
|
| 430 |
|
| 431 |
function handleAudioOutput(data) {
|
|
|
|
| 432 |
const processedUrls = new Set();
|
| 433 |
let hasResult = false;
|
| 434 |
|
| 435 |
function addAudio(url) {
|
| 436 |
const fullUrl = url.startsWith('http') ? url : ACE_SPACE_URL.replace(/\/$/, '') + url;
|
| 437 |
|
|
|
|
| 438 |
if (processedUrls.has(fullUrl)) return;
|
| 439 |
processedUrls.add(fullUrl);
|
| 440 |
|
| 441 |
hasResult = true;
|
| 442 |
|
|
|
|
| 443 |
if (processedUrls.size === 1) {
|
| 444 |
mainDownloadLink.href = fullUrl;
|
| 445 |
mainDownloadLink.style.display = 'inline-block';
|
| 446 |
}
|
| 447 |
|
|
|
|
| 448 |
const div = document.createElement('div');
|
| 449 |
div.className = 'audio-item';
|
| 450 |
div.innerHTML = `<audio controls src="${fullUrl}"></audio>`;
|
|
|
|
| 466 |
window.scrollTo({ top: 0, behavior: 'smooth' });
|
| 467 |
} else {
|
| 468 |
alert("فایل صوتی یافت نشد!");
|
| 469 |
+
step1.style.display = 'block';
|
| 470 |
}
|
| 471 |
}
|
| 472 |
|
|
|
|
| 489 |
function anim() {
|
| 490 |
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
| 491 |
ctx.beginPath();
|
| 492 |
+
ctx.strokeStyle = "rgba(213, 63, 140, 0.1)"; // رنگ متناسب با تم آلفا
|
| 493 |
ctx.lineWidth = 2;
|
| 494 |
for(let i=0; i<canvas.width; i+=20) {
|
| 495 |
ctx.moveTo(i, 0);
|