|
|
<!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> |
|
|
|
|
|
<link href="https://cdn.replit.com/agent/bootstrap-agent-dark-theme.min.css" rel="stylesheet"> |
|
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> |
|
|
|
|
|
<script src="{{ url_for('static', filename='js/main.js') }}"></script> |
|
|
</body> |
|
|
</html> |
|
|
|
