Spaces:
Runtime error
Runtime error
| <html lang="fa" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>سرویس تولید پادکست هوشمند</title> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <style> | |
| body { | |
| background-color: #f8f9fa; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| .podcast-container { | |
| background-color: white; | |
| border-radius: 15px; | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); | |
| padding: 25px; | |
| margin-top: 30px; | |
| } | |
| .podcast-title { | |
| color: #3f51b5; | |
| margin-bottom: 20px; | |
| font-weight: bold; | |
| } | |
| .podcast-part { | |
| border-right: 4px solid #3f51b5; | |
| padding: 15px; | |
| margin-bottom: 15px; | |
| background-color: #f8f9fa; | |
| border-radius: 8px; | |
| } | |
| .speaker-label { | |
| font-weight: bold; | |
| color: #3f51b5; | |
| } | |
| .btn-generate { | |
| background-color: #3f51b5; | |
| border: none; | |
| padding: 12px 25px; | |
| font-weight: bold; | |
| } | |
| .loading-spinner { | |
| display: none; | |
| margin: 20px auto; | |
| } | |
| .voice-selector { | |
| border-radius: 8px; | |
| padding: 8px 12px; | |
| border: 1px solid #ced4da; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="row justify-content-center"> | |
| <div class="col-md-8"> | |
| <div class="podcast-container"> | |
| <h2 class="text-center podcast-title">سرویس تولید پادکست هوشمند</h2> | |
| <form id="podcastForm"> | |
| <div class="mb-3"> | |
| <label for="topic" class="form-label">موضوع پادکست:</label> | |
| <input type="text" class="form-control" id="topic" placeholder="مثلا: تأثیر هوش مصنوعی بر زندگی روزمره" required> | |
| </div> | |
| <div class="row mb-3"> | |
| <div class="col-md-6"> | |
| <label for="voice1" class="form-label">صدای گوینده اول:</label> | |
| <select class="form-select voice-selector" id="voice1"> | |
| <option value="male">مرد</option> | |
| <option value="female">زن</option> | |
| </select> | |
| </div> | |
| <div class="col-md-6"> | |
| <label for="voice2" class="form-label">صدای گوینده دوم:</label> | |
| <select class="form-select voice-selector" id="voice2"> | |
| <option value="female">زن</option> | |
| <option value="male">مرد</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="d-grid gap-2"> | |
| <button type="submit" class="btn btn-primary btn-generate">تولید پادکست</button> | |
| </div> | |
| </form> | |
| <div class="text-center"> | |
| <div class="spinner-border loading-spinner text-primary" role="status"> | |
| <span class="visually-hidden">در حال بارگذاری...</span> | |
| </div> | |
| </div> | |
| <div id="podcastResult" style="display: none;"> | |
| <h3 id="resultTitle" class="text-center mt-4 mb-3"></h3> | |
| <p id="resultDescription" class="text-muted text-center mb-4"></p> | |
| <div id="podcastParts"></div> | |
| <div class="d-grid gap-2 mt-4"> | |
| <button id="downloadAllBtn" class="btn btn-success">دانلود تمامی بخش‌ها</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> | |
| <script> | |
| document.getElementById('podcastForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const topic = document.getElementById('topic').value; | |
| const voice1 = document.getElementById('voice1').value; | |
| const voice2 = document.getElementById('voice2').value; | |
| // نمایش اسپینر بارگذاری | |
| document.querySelector('.loading-spinner').style.display = 'block'; | |
| document.getElementById('podcastResult').style.display = 'none'; | |
| // ارسال درخواست به سرور | |
| fetch('/generate_podcast', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/x-www-form-urlencoded', | |
| }, | |
| body: new URLSearchParams({ | |
| topic: topic, | |
| voice1: voice1, | |
| voice2: voice2 | |
| }) | |
| }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| // مخفی کردن اسپینر | |
| document.querySelector('.loading-spinner').style.display = 'none'; | |
| if (data.error) { | |
| alert(data.error); | |
| return; | |
| } | |
| // نمایش نتایج | |
| document.getElementById('resultTitle').textContent = data.title; | |
| document.getElementById('resultDescription').textContent = data.description; | |
| const podcastParts = document.getElementById('podcastParts'); | |
| podcastParts.innerHTML = ''; | |
| data.parts.forEach((part, index) => { | |
| const partDiv = document.createElement('div'); | |
| partDiv.className = 'podcast-part'; | |
| partDiv.innerHTML = ` | |
| <div class="d-flex justify-content-between align-items-center mb-2"> | |
| <span class="speaker-label">${part.speaker}</span> | |
| <audio controls class="w-75"> | |
| <source src="${part.audio_url}" type="audio/wav"> | |
| مرورگر شما از پخش صدا پشتیبانی نمی‌کند. | |
| </audio> | |
| <a href="${part.audio_url}" download="podcast_part_${index + 1}.wav" class="btn btn-sm btn-outline-primary"> | |
| دانلود | |
| </a> | |
| </div> | |
| <p>${part.text}</p> | |
| `; | |
| podcastParts.appendChild(partDiv); | |
| }); | |
| document.getElementById('podcastResult').style.display = 'block'; | |
| // تنظیم رویداد برای دکمه دانلود همه | |
| document.getElementById('downloadAllBtn').onclick = function() { | |
| data.parts.forEach((part, index) => { | |
| const link = document.createElement('a'); | |
| link.href = part.audio_url; | |
| link.download = `podcast_part_${index + 1}.wav`; | |
| link.click(); | |
| }); | |
| }; | |
| }) | |
| .catch(error => { | |
| console.error('Error:', error); | |
| document.querySelector('.loading-spinner').style.display = 'none'; | |
| alert('خطایی در تولید پادکست رخ داد. لطفا دوباره تلاش کنید.'); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |