Update templates/gere.html

templates/gere.html

@@ -11,7 +11,7 @@
       background-color: #f8f9fa;
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     }
-
+    
     .container {
       max-width: 1200px;
       margin: 0 auto;
@@ -163,7 +163,7 @@
           <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
             {{ message }}
             <button type="button" class="close" data-dismiss="alert" aria-label="Fermer">
-              <span aria-hidden="true">×</span>
+              <span aria-hidden="true">&times;</span>
             </button>
           </div>
         {% endfor %}
@@ -250,7 +250,7 @@
               <li class="list-group-item">
                 <div class="d-flex justify-content-between align-items-center">
                   <span class="display-mode">
-                    {{ sous_categorie.nom }}
+                    {{ sous_categorie.nom }} 
                     <small class="text-muted">
                       <i class="fas fa-book mr-1"></i>{{ sous_categorie.matiere.nom }}
                     </small>
@@ -316,7 +316,7 @@
                     <strong>{{ texte.titre }}</strong>
                     <br>
                     <small class="text-muted">
-                      <i class="fas fa-list mr-1"></i>{{ texte.sous_categorie.nom }}
+                      <i class="fas fa-list mr-1"></i>{{ texte.sous_categorie.nom }} 
                       <i class="fas fa-book ml-2 mr-1"></i>{{ texte.sous_categorie.matiere.nom }}
                     </small>
                   </span>
@@ -418,51 +418,119 @@
           </div>
         </div>
 
-        <!-- Formulaire d'ajout d'un texte avec IA -->
-        <div class="card mt-3">
-          <div class="card-header">
-            <i class="fas fa-plus-circle mr-2"></i>Ajouter un Texte
+        <!-- Formulaire d'ajout d'un texte avec module IA -->
+<div class="card mt-3">
+  <div class="card-header">
+    <i class="fas fa-plus-circle mr-2"></i>Ajouter un Texte
+  </div>
+  <div class="card-body">
+    <ul class="nav nav-tabs" id="textInputTabs" role="tablist">
+      <li class="nav-item">
+        <a class="nav-link active" id="manual-tab" data-toggle="tab" href="#manual-input" role="tab">
+          <i class="fas fa-edit"></i> Saisie Manuelle
+        </a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" id="ia-tab" data-toggle="tab" href="#ia-input" role="tab">
+          <i class="fas fa-robot"></i> Génération IA
+        </a>
+      </li>
+    </ul>
+    
+    <div class="tab-content mt-3" id="textInputTabContent">
+      <!-- Onglet Saisie Manuelle -->
+      <div class="tab-pane fade show active" id="manual-input" role="tabpanel">
+        <form method="post">
+          <input type="hidden" name="action" value="add_texte">
+          <div class="form-group">
+            <label for="titre_texte">Titre du Texte</label>
+            <input type="text" id="titre_texte" name="titre_texte" class="form-control" required>
           </div>
-          <div class="card-body">
-            <form method="post">
-              <input type="hidden" name="action" value="add_texte">
-              <div class="form-group">
-                <label for="titre_texte">Titre du Texte</label>
-                <input type="text" id="titre_texte" name="titre_texte" class="form-control" required>
-              </div>
-              <div class="form-group">
-                <label for="sous_categorie_id">Sous-Catégorie</label>
-                <select id="sous_categorie_id" name="sous_categorie_id" class="form-control" required>
-                  {% for sous_categorie in sous_categories %}
-                    <option value="{{ sous_categorie.id }}">{{ sous_categorie.nom }} ({{ sous_categorie.matiere.nom }})</option>
-                  {% endfor %}
-                </select>
-              </div>
-              <div class="form-group">
-                <label for="youtube_url">URL de la vidéo YouTube</label>
-                <input type="text" id="youtube_url" name="youtube_url" class="form-control" placeholder="https://www.youtube.com/watch?v=..." required>
-              </div>
-              <div class="form-group">
-                <label for="prompt">Prompt pour l'IA</label>
-                <textarea id="prompt" name="prompt" class="form-control" rows="3" placeholder="Entrez votre question ou instruction pour l'IA (ex. : 'Résumer la vidéo' ou 'Extraire les points clés')" required></textarea>
-              </div>
-              <div class="form-group">
-                <label for="model">Modèle Gemini</label>
-                <select id="model" name="model" class="form-control">
-                  <option value="gemini-2.5-pro-exp-03-25">gemini-2.5-pro-exp-03-25</option>
-                  <option value="gemini-1.5-pro">gemini-1.5-pro</option>
-                  <option value="gemini-1.5-flash">gemini-1.5-flash</option>
-                </select>
-              </div>
-              <button type="submit" class="btn btn-primary btn-icon">
-                <i class="fas fa-plus"></i> Générer et Ajouter
-              </button>
-            </form>
+          <div class="form-group">
+            <label for="contenu_texte">Contenu du Texte</label>
+            <textarea id="contenu_texte" name="contenu_texte" class="form-control" rows="5" required></textarea>
           </div>
-        </div>
+          <div class="form-group">
+            <label for="sous_categorie_id">Sous-Catégorie</label>
+            <select id="sous_categorie_id" name="sous_categorie_id" class="form-control" required>
+              {% for sous_categorie in sous_categories %}
+                <option value="{{ sous_categorie.id }}">{{ sous_categorie.nom }} ({{ sous_categorie.matiere.nom }})</option>
+              {% endfor %}
+            </select>
+          </div>
+          <button type="submit" class="btn btn-primary btn-icon">
+            <i class="fas fa-plus"></i> Ajouter
+          </button>
+        </form>
+      </div>
+      
+      <!-- Onglet Génération IA -->
+      <div class="tab-pane fade" id="ia-input" role="tabpanel">
+        <form method="post" id="ia-generation-form">
+          <input type="hidden" name="action" value="generate_ia_content">
+          <div class="form-group">
+            <label for="ia_titre_texte">Titre du Texte</label>
+            <input type="text" id="ia_titre_texte" name="ia_titre_texte" class="form-control" required>
+          </div>
+          <div class="form-group">
+            <label for="youtube_url">URL de la vidéo YouTube</label>
+            <input type="url" id="youtube_url" name="youtube_url" class="form-control" placeholder="https://www.youtube.com/watch?v=..." required>
+          </div>
+          <div class="form-group">
+            <label for="ia_prompt">Prompt pour l'IA</label>
+            <textarea id="ia_prompt" name="ia_prompt" class="form-control" rows="3" placeholder="Exemple: Faire un résumé détaillé de cette vidéo avec les points clés" required></textarea>
+          </div>
+          <div class="form-group">
+            <label for="ia_model">Modèle Gemini</label>
+            <select id="ia_model" name="ia_model" class="form-control">
+              <option value="gemini-2.5-pro-exp-03-25">gemini-2.5-pro-exp-03-25</option>
+              <option value="gemini-1.5-pro">gemini-1.5-pro</option>
+              <option value="gemini-1.5-flash">gemini-1.5-flash</option>
+            </select>
+          </div>
+          <div class="form-group">
+            <label for="ia_sous_categorie_id">Sous-Catégorie</label>
+            <select id="ia_sous_categorie_id" name="ia_sous_categorie_id" class="form-control" required>
+              {% for sous_categorie in sous_categories %}
+                <option value="{{ sous_categorie.id }}">{{ sous_categorie.nom }} ({{ sous_categorie.matiere.nom }})</option>
+              {% endfor %}
+            </select>
+          </div>
+          <button type="submit" id="generate-content-btn" class="btn btn-info btn-icon">
+            <i class="fas fa-magic"></i> Générer le Contenu
+          </button>
+          <div id="ia-loading" class="mt-3 d-none">
+            <div class="spinner-border text-primary" role="status">
+              <span class="sr-only">Génération en cours...</span>
+            </div>
+            <span class="ml-2">Analyse de la vidéo en cours, veuillez patienter...</span>
+          </div>
+          <div id="ia-result-container" class="mt-3 d-none">
+            <div class="form-group">
+              <label for="ia_generated_content">Contenu Généré</label>
+              <textarea id="ia_generated_content" name="ia_generated_content" class="form-control" rows="10" readonly></textarea>
+            </div>
+            <button type="button" id="use-content-btn" class="btn btn-success btn-icon">
+              <i class="fas fa-check"></i> Utiliser ce Contenu
+            </button>
+            <button type="button" id="modify-content-btn" class="btn btn-warning btn-icon ml-2">
+              <i class="fas fa-edit"></i> Modifier avant Utilisation
+            </button>
+          </div>
+        </form>
+        <form method="post" id="submit-ia-content-form" class="d-none">
+          <input type="hidden" name="action" value="add_texte">
+          <input type="hidden" id="final_titre_texte" name="titre_texte">
+          <input type="hidden" id="final_contenu_texte" name="contenu_texte">
+          <input type="hidden" id="final_sous_categorie_id" name="sous_categorie_id">
+        </form>
       </div>
     </div>
   </div>
+</div>
+
+
+  
 
   <!-- Scripts -->
   <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
@@ -500,7 +568,87 @@
         }
       });
     });
+
+// Ajouter ce code à la fin de votre script existant dans gere.html (avant la balise </script> finale)
+
+// Fonctionnalité pour la génération de contenu IA
+$(document).ready(function() {
+  // Gestionnaire pour le formulaire de génération IA
+  $('#ia-generation-form').on('submit', function(e) {
+    e.preventDefault();
+    
+    const youtubeUrl = $('#youtube_url').val();
+    const prompt = $('#ia_prompt').val();
+    const model = $('#ia_model').val();
+    
+    if (!youtubeUrl || !prompt) {
+      alert('Veuillez remplir tous les champs requis.');
+      return;
+    }
+    
+    // Afficher l'indicateur de chargement
+    $('#generate-content-btn').prop('disabled', true);
+    $('#ia-loading').removeClass('d-none');
+    $('#ia-result-container').addClass('d-none');
+    
+    // Appel AJAX pour générer le contenu
+    $.ajax({
+      url: '/generate-content',
+      type: 'POST',
+      contentType: 'application/json',
+      data: JSON.stringify({
+        youtube_url: youtubeUrl,
+        prompt: prompt,
+        model: model
+      }),
+      success: function(response) {
+        $('#generate-content-btn').prop('disabled', false);
+        $('#ia-loading').addClass('d-none');
+        
+        if (response.success) {
+          // Afficher le résultat
+          $('#ia_generated_content').val(response.text);
+          $('#ia-result-container').removeClass('d-none');
+        } else {
+          alert('Erreur lors de la génération du contenu: ' + response.error);
+        }
+      },
+      error: function(xhr, status, error) {
+        $('#generate-content-btn').prop('disabled', false);
+        $('#ia-loading').addClass('d-none');
+        alert('Erreur lors de la communication avec le serveur: ' + error);
+      }
+    });
+  });
+  
+  // Utiliser le contenu généré tel quel
+  $('#use-content-btn').on('click', function() {
+    const titre = $('#ia_titre_texte').val();
+    const contenu = $('#ia_generated_content').val();
+    const sousCategorie = $('#ia_sous_categorie_id').val();
+    
+    // Remplir le formulaire caché et le soumettre
+    $('#final_titre_texte').val(titre);
+    $('#final_contenu_texte').val(contenu);
+    $('#final_sous_categorie_id').val(sousCategorie);
+    $('#submit-ia-content-form').submit();
+  });
+  
+  // Modifier le contenu avant utilisation
+  $('#modify-content-btn').on('click', function() {
+    const titre = $('#ia_titre_texte').val();
+    const contenu = $('#ia_generated_content').val();
+    const sousCategorie = $('#ia_sous_categorie_id').val();
+    
+    // Basculer vers l'onglet manuel et préremplir les champs
+    $('#titre_texte').val(titre);
+    $('#contenu_texte').val(contenu);
+    $('#sous_categorie_id').val(sousCategorie);
+    $('#manual-tab').tab('show');
+  });
+});
+
+    
   </script>
-  <!-- The problematic Cloudflare script has been removed from here -->
 </body>
 </html>