File size: 9,127 Bytes
7bc796e 9f671a2 7bc796e 9f671a2 7bc796e 9f671a2 7bc796e 9f671a2 7bc796e 9f671a2 7bc796e 9f671a2 7bc796e 9f671a2 7bc796e 9f671a2 7bc796e 9f671a2 7d3a75b 7bc796e 9f671a2 7bc796e 9f671a2 7bc796e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 |
<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gemini Podcast Generator</title>
<!-- Bootstrap CSS (Replit Theme) -->
<link href="https://cdn.replit.com/agent/bootstrap-agent-dark-theme.min.css" rel="stylesheet">
<!-- Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
<div class="container py-4">
<header class="mb-5 text-center">
<h1 class="display-4">Gemini Podcast Generator</h1>
<p class="lead">Créez un podcast à partir d'un scénario avec des personnages multiples</p>
</header>
<div class="row justify-content-center">
<div class="col-lg-10">
<ul class="nav nav-tabs mb-3" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="simple-tab" data-bs-toggle="tab" data-bs-target="#simple-tts" type="button" role="tab" aria-controls="simple-tts" aria-selected="true">
<i class="fas fa-comment me-2"></i>Texte Simple
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="scenario-tab" data-bs-toggle="tab" data-bs-target="#scenario-podcast" type="button" role="tab" aria-controls="scenario-podcast" aria-selected="false">
<i class="fas fa-microphone-alt me-2"></i>Scénario Podcast
</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<!-- Simple Text-to-Speech Tab -->
<div class="tab-pane fade show active" id="simple-tts" role="tabpanel" aria-labelledby="simple-tab">
<div class="card shadow-sm">
<div class="card-body">
<form id="ttsForm">
<div class="mb-3">
<label for="textInput" class="form-label">Entrez votre texte</label>
<textarea
class="form-control"
id="textInput"
rows="5"
placeholder="Saisissez le texte que vous souhaitez convertir en parole..."
required
></textarea>
</div>
<div class="mb-3">
<label for="voiceSelect" class="form-label">Sélectionnez une voix</label>
<select class="form-select" id="voiceSelect">
{% for voice in voices %}
<option value="{{ voice }}">{{ voice }}</option>
{% endfor %}
</select>
</div>
<div class="d-grid">
<button
type="submit"
class="btn btn-primary"
id="generateBtn"
>
<i class="fas fa-microphone me-2"></i>Générer l'audio
</button>
</div>
</form>
</div>
</div>
</div>
<!-- Scenario Podcast Tab -->
<div class="tab-pane fade" id="scenario-podcast" role="tabpanel" aria-labelledby="scenario-tab">
<div class="card shadow-sm">
<div class="card-body">
<form id="podcastForm">
<div class="mb-3">
<label for="scenarioInput" class="form-label">Entrez votre scénario (JSON)</label>
<textarea
class="form-control"
id="scenarioInput"
rows="12"
placeholder='{"title": "Titre du podcast", "language": "fr-FR", "characters": [{"name": "Personnage1", "voice": "Kore", "text": "Texte du personnage 1"}, {"name": "Personnage2", "voice": "Puck", "text": "Texte du personnage 2"}]}'
required
></textarea>
</div>
<div class="alert alert-info">
<h6><i class="fas fa-info-circle me-2"></i>Format du scénario:</h6>
<pre class="mb-0"><code>{
"title": "Titre du podcast",
"language": "fr-FR",
"characters": [
{
"name": "Personnage1",
"voice": "Kore",
"text": "Texte du personnage 1"
},
{
"name": "Personnage2",
"voice": "Puck",
"text": "Texte du personnage 2"
}
]
}</code></pre>
</div>
<div class="d-grid mt-4">
<button
type="submit"
class="btn btn-primary"
id="generatePodcastBtn"
>
<i class="fas fa-podcast me-2"></i>Générer le podcast
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="card mt-4 shadow-sm d-none" id="audioCard">
<div class="card-body">
<h5 class="card-title">Audio généré</h5>
<div class="text-center my-4">
<div id="audioPlayerContainer" class="mb-3">
<audio id="audioPlayer" controls class="w-100"></audio>
</div>
<button class="btn btn-success me-2" id="downloadBtn">
<i class="fas fa-download me-2"></i>Télécharger
</button>
<button class="btn btn-secondary" id="newGenerationBtn">
<i class="fas fa-plus me-2"></i>Nouvelle génération
</button>
</div>
</div>
</div>
<!-- Loading Indicator -->
<div class="text-center mt-4 d-none" id="loadingIndicator">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Chargement...</span>
</div>
<p class="mt-2">Génération en cours avec Gemini AI...</p>
<div class="progress mt-3 d-none" id="progressBar">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%"></div>
</div>
<p class="mt-2 d-none" id="progressText">Préparation du podcast...</p>
</div>
<!-- Error Alert -->
<div class="alert alert-danger mt-4 d-none" id="errorAlert" role="alert">
<i class="fas fa-exclamation-triangle me-2"></i>
<span id="errorMessage"></span>
</div>
</div>
</div>
<footer class="mt-5 pt-4 text-center text-muted">
<p>Powered by Google Gemini AI © <script>document.write(new Date().getFullYear())</script></p>
</footer>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- Custom JS -->
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
</body>
</html>
|