Update templates/index.html

templates/index.html

@@ -65,6 +65,37 @@
             border-bottom-color: #60a5fa;
         }
 
+        .custom-file-input {
+            position: relative;
+            display: inline-block;
+            width: 100%;
+        }
+
+        .custom-file-input input[type="file"] {
+            opacity: 0;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            cursor: pointer;
+        }
+
+        .custom-file-label {
+            padding: 1rem 1.5rem;
+            background: rgba(255, 255, 255, 0.05);
+            border: 2px dashed rgba(255, 255, 255, 0.2);
+            border-radius: 0.75rem;
+            text-align: center;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .custom-file-input:hover .custom-file-label {
+            border-color: rgba(96, 165, 250, 0.5);
+            background: rgba(96, 165, 250, 0.1);
+        }
+
         @keyframes rotation {
             0% { transform: rotate(0deg) }
             100% { transform: rotate(360deg) }
@@ -90,27 +121,55 @@
         <div class="max-w-4xl mx-auto">
             <!-- Input Section -->
             <div class="glass-morph rounded-2xl p-8 mb-12 card-hover">
-                <div class="mb-6">
-                    <label for="topic" class="block text-lg font-medium mb-3 text-gray-300">Quel sujet souhaitez-vous explorer ?</label>
-                    <div class="relative">
-                        <input 
-                            type="text" 
-                            id="topic" 
-                            v-model="topic" 
-                            class="w-full px-6 py-4 bg-gray-800/50 rounded-xl border border-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-transparent text-lg transition-all duration-300"
-                            placeholder="Ex: Intelligence Artificielle, Quantum Computing..."
-                            :disabled="isLoading"
-                        >
+                <form @submit.prevent="generateFlashcards" enctype="multipart/form-data">
+                    <div class="mb-6">
+                        <label for="topic" class="block text-lg font-medium mb-3 text-gray-300">
+                            Quel sujet souhaitez-vous explorer ?
+                        </label>
+                        <div class="relative">
+                            <input 
+                                type="text" 
+                                id="topic" 
+                                v-model="topic" 
+                                class="w-full px-6 py-4 bg-gray-800/50 rounded-xl border border-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-transparent text-lg transition-all duration-300"
+                                placeholder="Ex: Intelligence Artificielle, Quantum Computing..."
+                                :disabled="isLoading"
+                            >
+                        </div>
                     </div>
-                </div>
-                <button 
-                    @click="generateFlashcards" 
-                    :disabled="isLoading"
-                    class="w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white py-4 px-8 rounded-xl font-medium text-lg hover:opacity-90 transition-all duration-300 flex items-center justify-center space-x-3"
-                >
-                    <span v-if="!isLoading">Générer les Flashcards</span>
-                    <span v-else class="custom-loader"></span>
-                </button>
+                    
+                    <div class="mb-8">
+                        <label class="block text-lg font-medium mb-3 text-gray-300">
+                            Document PDF (optionnel)
+                        </label>
+                        <div class="custom-file-input">
+                            <input 
+                                type="file" 
+                                ref="fileInput"
+                                accept=".pdf"
+                                @change="handleFileChange"
+                                :disabled="isLoading"
+                            >
+                            <div class="custom-file-label">
+                                <div v-if="selectedFile">
+                                    <span class="text-blue-400">[[selectedFile.name]]</span>
+                                </div>
+                                <div v-else>
+                                    <span class="text-gray-400">Glissez votre fichier PDF ici ou cliquez pour sélectionner</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <button 
+                        type="submit"
+                        :disabled="isLoading"
+                        class="w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white py-4 px-8 rounded-xl font-medium text-lg hover:opacity-90 transition-all duration-300 flex items-center justify-center space-x-3"
+                    >
+                        <span v-if="!isLoading">Générer les Flashcards</span>
+                        <span v-else class="custom-loader"></span>
+                    </button>
+                </form>
             </div>
 
             <!-- Error Message -->
@@ -191,10 +250,26 @@
                     flashcards: [],
                     activeTab: 'study',
                     isLoading: false,
-                    error: null
+                    error: null,
+                    selectedFile: null
                 }
             },
             methods: {
+                handleFileChange(event) {
+                    const file = event.target.files[0]
+                    if (file) {
+                        if (file.type === 'application/pdf') {
+                            this.selectedFile = file
+                            this.error = null
+                        } else {
+                            this.error = 'Veuillez sélectionner un fichier PDF valide.'
+                            event.target.value = ''
+                            this.selectedFile = null
+                        }
+                    } else {
+                        this.selectedFile = null
+                    }
+                },
                 async generateFlashcards() {
                     if (!this.topic) {
                         this.error = 'Veuillez entrer un sujet.'
@@ -206,8 +281,17 @@
                     this.flashcards = []
 
                     try {
-                        const response = await axios.post('/generate', {
-                            topic: this.topic
+                        const formData = new FormData()
+                        formData.append('topic', this.topic)
+                        
+                        if (this.selectedFile) {
+                            formData.append('file', this.selectedFile)
+                        }
+
+                        const response = await axios.post('/generate', formData, {
+                            headers: {
+                                'Content-Type': 'multipart/form-data'
+                            }
                         })
 
                         if (response.data.success) {
@@ -216,7 +300,6 @@
                                 showAnswer: false
                             }))
                             
-                            // Animation des cartes à leur apparition
                             setTimeout(() => {
                                 this.flashcards = cards
                                 this.$nextTick(() => {
@@ -237,7 +320,6 @@
                 }
             },
             mounted() {
-                // Animation du titre à l'entrée
                 gsap.from('.gradient-text', {
                     y: -50,
                     opacity: 0,