Update templates/index.html

templates/index.html

@@ -57,7 +57,6 @@
             transform: translateY(0px);
         }
 
-
         .container {
             display: flex;
             flex-direction: column;
@@ -67,6 +66,59 @@
             border-radius: 12px;
             box-shadow: 0 4px 15px rgba(0,0,0,0.1);
         }
+        
+        .style-selection {
+            background-color: #f9f9f9;
+            padding: 20px;
+            border-radius: 10px;
+            border: 1px solid #e0e0e0;
+            margin-bottom: 15px;
+        }
+        
+        .style-selection h3 {
+            margin: 0 0 15px 0;
+            color: #2c3e50;
+            font-size: 1.2em;
+        }
+        
+        .radio-group {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+        }
+        
+        .radio-option {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            padding: 10px;
+            border-radius: 6px;
+            transition: background-color 0.2s;
+            cursor: pointer;
+        }
+        
+        .radio-option:hover {
+            background-color: #f0f4f8;
+        }
+        
+        .radio-option input[type="radio"] {
+            width: 18px;
+            height: 18px;
+            accent-color: #3498db;
+        }
+        
+        .radio-option label {
+            cursor: pointer;
+            font-weight: 500;
+        }
+        
+        .radio-description {
+            font-size: 0.9em;
+            color: #666;
+            margin-left: 28px;
+            margin-top: -8px;
+        }
+        
         .upload-section {
             display: flex;
             flex-direction: column;
@@ -225,6 +277,23 @@
     </div>
     
     <div class="container">
+        <div class="style-selection">
+            <h3>🎨 Choisissez le style de résolution</h3>
+            <div class="radio-group">
+                <div class="radio-option" onclick="selectStyle('light')">
+                    <input type="radio" id="style-light" name="resolution-style" value="light">
+                    <label for="style-light">📝 Résolution Light</label>
+                </div>
+                <div class="radio-description">Format simple et épuré, idéal pour une lecture rapide</div>
+                
+                <div class="radio-option" onclick="selectStyle('colorful')">
+                    <input type="radio" id="style-colorful" name="resolution-style" value="colorful" checked>
+                    <label for="style-colorful">🌈 Résolution Colorée</label>
+                </div>
+                <div class="radio-description">Format richement formaté avec couleurs, boîtes et mise en page élégante</div>
+            </div>
+        </div>
+        
         <div id="upload-section" class="upload-section">
             <div class="upload-icon">📤</div>
             <p>Cliquez ou glissez-déposez une image ici</p>
@@ -265,6 +334,11 @@
             
             let selectedFile = null;
             
+            // Fonction pour sélectionner le style de résolution
+            window.selectStyle = function(style) {
+                document.getElementById(`style-${style}`).checked = true;
+            };
+            
             uploadSection.addEventListener('click', () => fileInput.click());
             
             uploadSection.addEventListener('dragover', (e) => {
@@ -319,6 +393,9 @@
             solveButton.addEventListener('click', () => {
                 if (!selectedFile) return;
                 
+                // Récupérer le style sélectionné
+                const selectedStyle = document.querySelector('input[name="resolution-style"]:checked').value;
+                
                 solveButton.disabled = true;
                 solveButton.textContent = '⏳ Traitement...';
                 solvingContainer.style.display = 'block';
@@ -330,6 +407,7 @@
                 
                 const formData = new FormData();
                 formData.append('image', selectedFile);
+                formData.append('style', selectedStyle); // Ajouter le style sélectionné
                 
                 fetch('/solve', {
                     method: 'POST',