update home view

src/views/HomeView.vue

@@ -7,6 +7,7 @@ import api from '../services/api'
 import CalibrationArea from '@/components/CalibrationArea.vue'
 import FootballField from '@/components/FootballField.vue'
 import PlotlyChart from '@/components/PlotlyChart.vue'
+import fieldTestImage from '@/assets/field_test_thumb.jpg'
 
 const router = useRouter()
 const calibrationStore = useCalibrationStore()
@@ -24,6 +25,16 @@ const manualSection = ref(null)
 
 // États locaux
 const dragActive = ref(false)
+const selectedTestImage = ref(null)
+
+// Image de test
+const testImage = ref({
+  id: 'field1',
+  name: 'Terrain de test',
+  description: 'Image d\'exemple pour tester l\'analyse',
+  thumbnail: fieldTestImage,
+  fullUrl: fieldTestImage
+})
 
 // États pour la vue manuelle
 const thumbnail = ref(null)
@@ -137,6 +148,35 @@ const selectMode = (mode) => {
   calibrationStore.setMode(mode)
 }
 
+const selectTestImage = async (testImage) => {
+  try {
+    selectedTestImage.value = testImage.id
+    
+    // Créer un objet File à partir de l'URL de l'image de test
+    const response = await fetch(testImage.fullUrl)
+    const blob = await response.blob()
+    const file = new File([blob], `${testImage.name}.jpg`, { type: 'image/jpeg' })
+    
+    uploadStore.setFile(file)
+    
+    if (calibrationStore.isManualMode) {
+      // En mode manuel avec image, charger la vue manuelle intégrée
+      await loadThumbnail()
+      await nextTick()
+      scrollToSection(manualSection.value)
+    } else if (calibrationStore.isAutoMode) {
+      // En mode auto, lancement automatique pour les images
+      startProcessing()
+    }
+  } catch (error) {
+    console.error('Erreur lors du chargement de l\'image de test:', error)
+    // Fallback: utiliser l'URL directement pour la preview
+    uploadStore.filePreview = testImage.fullUrl
+    uploadStore.selectedFile = { name: `${testImage.name}.jpg`, size: 0 }
+    uploadStore.fileType = 'image'
+  }
+}
+
 const resetToStart = () => {
   // Réinitialiser tous les stores
   calibrationStore.reset()
@@ -339,8 +379,19 @@ const restart = () => {
 }
 
 const exportResults = () => {
-  const data = calibrationStore.results
-  const filename = 'football_vision_results.json'
+  // Encapsuler les données de calibration dans une clé "calibration"
+  const data = {
+    calibration: calibrationStore.results
+  }
+  
+  // Générer le nom de fichier basé sur le fichier original
+  let filename = 'football_vision_config.json'
+  if (uploadStore.selectedFile && uploadStore.selectedFile.name) {
+    // Enlever l'extension du fichier original et ajouter .json
+    const originalName = uploadStore.selectedFile.name
+    const nameWithoutExtension = originalName.substring(0, originalName.lastIndexOf('.')) || originalName
+    filename = `${nameWithoutExtension}_config.json`
+  }
   
   const content = JSON.stringify(data, null, 2)
   
@@ -603,65 +654,86 @@ const onChartError = (error) => {
       </div>
     </section>
 
-    <!-- Section 2: Upload de fichier -->
+        <!-- Section 2: Upload de fichier -->
     <section v-if="showUpload" ref="uploadSection" class="section upload-section">
-      
-      <div 
-        class="drop-zone"
-        :class="{ 
-          active: dragActive, 
-          'has-file': uploadStore.isFileSelected,
-          'processing': uploadStore.isUploading 
-        }"
-        @drop="handleDrop"
-        @dragover="handleDragOver"
-        @dragleave="handleDragLeave"
-      >
-        <div v-if="!uploadStore.isFileSelected" class="drop-content">
-          <div class="upload-icon">+</div>
-          <h3>Glissez-déposez votre fichier ici</h3>
-          <p class="or-text">ou</p>
-          <label class="file-input-label">
-            <input 
-              type="file" 
-              accept="image/*,video/*" 
-              @change="handleFileSelect"
-              hidden
-            >
-            Choisir un fichier
-          </label>
-          <p class="format-info">Images: JPG, PNG | Vidéos: MP4, AVI, MOV</p>
+      <div class="upload-grid">
+        <!-- Côté gauche: Upload de fichier -->
+        <div class="upload-left">
+          <div 
+            class="drop-zone"
+            :class="{ 
+              active: dragActive, 
+              'has-file': uploadStore.isFileSelected,
+              'processing': uploadStore.isUploading 
+            }"
+            @drop="handleDrop"
+            @dragover="handleDragOver"
+            @dragleave="handleDragLeave"
+          >
+            <div v-if="!uploadStore.isFileSelected" class="drop-content">
+              <div class="upload-icon">+</div>
+              <h4>Glissez-déposez votre fichier ici</h4>
+              <p class="or-text">ou</p>
+              <label class="file-input-label">
+                <input 
+                  type="file" 
+                  accept="image/*,video/*" 
+                  @change="handleFileSelect"
+                  hidden
+                >
+                Choisir un fichier
+              </label>
+            </div>
+
+            <div v-else class="file-preview">
+              <div class="file-info">
+                <h4>Fichier sélectionné</h4>
+                <p class="file-name">{{ uploadStore.selectedFile.name }}</p>
+                <p class="file-details">
+                  <span>Type: {{ uploadStore.fileType === 'image' ? 'Image' : 'Vidéo' }}</span>
+                  <span>Taille: {{ Math.round(uploadStore.selectedFile.size / 1024) }} KB</span>
+                </p>
+              </div>
+              
+              <div class="preview" v-if="uploadStore.filePreview">
+                <img 
+                  v-if="uploadStore.isImage" 
+                  :src="uploadStore.filePreview" 
+                  alt="Preview"
+                  class="preview-media"
+                >
+                <video 
+                  v-else 
+                  :src="uploadStore.filePreview" 
+                  controls
+                  class="preview-media"
+                >
+                </video>
+              </div>
+
+              <button @click="uploadStore.clearFile()" class="btn-secondary">
+                Changer de fichier
+              </button>
+            </div>
+          </div>
         </div>
 
-        <div v-else class="file-preview">
-          <div class="file-info">
-            <h3>Fichier sélectionné</h3>
-            <p class="file-name">{{ uploadStore.selectedFile.name }}</p>
-            <p class="file-details">
-              <span>Type: {{ uploadStore.fileType === 'image' ? 'Image' : 'Vidéo' }}</span>
-              <span>Taille: {{ Math.round(uploadStore.selectedFile.size / 1024) }} KB</span>
-            </p>
-          </div>
-          
-          <div class="preview" v-if="uploadStore.filePreview">
-            <img 
-              v-if="uploadStore.isImage" 
-              :src="uploadStore.filePreview" 
-              alt="Preview"
-              class="preview-media"
-            >
-            <video 
-              v-else 
-              :src="uploadStore.filePreview" 
-              controls
-              class="preview-media"
+        <!-- Côté droit: Images de test -->
+        <div class="upload-right">
+          <div class="test-image-container">
+            <div 
+              class="test-image-card single"
+              @click="selectTestImage(testImage)"
+              :class="{ selected: selectedTestImage === testImage.id }"
             >
-            </video>
+              <img :src="testImage.thumbnail" :alt="testImage.name" class="test-image-thumb">
+              <div class="test-image-overlay">
+                <div class="overlay-content">
+                  <p>Vue Drone</p>
+                </div>
+              </div>
+            </div>
           </div>
-
-          <button @click="uploadStore.clearFile()" class="btn-secondary">
-            Changer de fichier
-          </button>
         </div>
       </div>
     </section>
@@ -1142,6 +1214,36 @@ const onChartError = (error) => {
   font-weight: 600;
 }
 
+/* Grid Upload */
+.upload-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 3rem;
+  width: 100%;
+  max-width: 1200px;
+  align-items: start;
+  padding: 2rem;
+}
+
+.upload-left, .upload-right {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.upload-right {
+  justify-content: center;
+  align-items: center;
+}
+
+.upload-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: white;
+  margin-bottom: 2rem;
+  text-align: center;
+}
+
 .drop-zone {
   border: 3px dashed #555;
   border-radius: 12px;
@@ -1172,13 +1274,111 @@ const onChartError = (error) => {
   font-weight: 300;
 }
 
-.drop-content h3 {
+.drop-content h4 {
   font-size: 1.25rem;
   color: white;
   margin-bottom: 1rem;
   font-weight: 600;
 }
 
+/* Image de test */
+.test-image-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.test-image-card.single {
+  background: var(--color-secondary-soft);
+  border-radius: 12px;
+  overflow: hidden;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border: 2px solid transparent;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+
+.test-image-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+.test-image-card.selected {
+  border-color: var(--color-primary);
+  box-shadow: 0 4px 20px rgba(217, 255, 4, 0.3);
+}
+
+.test-image-card.selected::after {
+  content: '✓';
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background: var(--color-primary);
+  color: var(--color-secondary);
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  font-size: 0.8rem;
+}
+
+.test-image-thumb {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.test-image-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 1;
+  transition: opacity 0.3s ease;
+  backdrop-filter: blur(2px);
+}
+
+.test-image-card.single:hover .test-image-overlay {
+  opacity: 0;
+}
+
+.overlay-content {
+  text-align: center;
+  color: white;
+}
+
+.overlay-content h4 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 0 0 0.5rem 0;
+  color: var(--color-primary);
+}
+
+.overlay-content p {
+  font-size: 0.9rem;
+  margin: 0;
+  color: #e0e0e0;
+  font-weight: 500;
+}
+
+
+
 .or-text {
   color: #888;
   margin: 1.5rem 0;
@@ -1232,7 +1432,7 @@ const onChartError = (error) => {
   text-align: center;
 }
 
-.file-info h3 {
+.file-info h4 {
   color: var(--color-primary);
   margin-bottom: 1.5rem;
   font-weight: 600;