Plotly chart

package-lock.json

@@ -8,7 +8,9 @@
       "name": "soccer-field-app",
       "version": "0.0.0",
       "dependencies": {
+        "d3-dsv": "^3.0.1",
         "pinia": "^3.0.1",
+        "plotly.js-dist": "^2.29.1",
         "vue": "^3.5.13",
         "vue-router": "^4.5.0"
       },
@@ -2066,6 +2068,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -2129,6 +2140,31 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "license": "MIT"
     },
+    "node_modules/d3-dsv": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz",
+      "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
+      "license": "ISC",
+      "dependencies": {
+        "commander": "7",
+        "iconv-lite": "0.6",
+        "rw": "1"
+      },
+      "bin": {
+        "csv2json": "bin/dsv2json.js",
+        "csv2tsv": "bin/dsv2dsv.js",
+        "dsv2dsv": "bin/dsv2dsv.js",
+        "dsv2json": "bin/dsv2json.js",
+        "json2csv": "bin/json2dsv.js",
+        "json2dsv": "bin/json2dsv.js",
+        "json2tsv": "bin/json2dsv.js",
+        "tsv2csv": "bin/dsv2dsv.js",
+        "tsv2json": "bin/dsv2json.js"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
@@ -2773,6 +2809,18 @@
         "node": ">=18.18.0"
       }
     },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -3382,6 +3430,12 @@
         }
       }
     },
+    "node_modules/plotly.js-dist": {
+      "version": "2.35.3",
+      "resolved": "https://registry.npmjs.org/plotly.js-dist/-/plotly.js-dist-2.35.3.tgz",
+      "integrity": "sha512-dqB9+FUyBFZN04xWnZoYwaeeF4Jj9T/m0CHYmoozmPC3R4Dy0TRJsHgbRVLPxgYQqodzniVUj17+2wmJuGaZAg==",
+      "license": "MIT"
+    },
     "node_modules/postcss": {
       "version": "8.5.6",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
@@ -3565,6 +3619,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "license": "MIT"
+    },
     "node_modules/semver": {
       "version": "7.7.2",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",

package.json

@@ -13,7 +13,9 @@
   "dependencies": {
     "pinia": "^3.0.1",
     "vue": "^3.5.13",
-    "vue-router": "^4.5.0"
+    "vue-router": "^4.5.0",
+    "plotly.js-dist": "^2.29.1",
+    "d3-dsv": "^3.0.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.22.0",

src/components/PlotlyChart.vue

@@ -0,0 +1,675 @@
+<template>
+  <div class="plotly-chart">
+    <div class="chart-header">
+      <h3>{{ title }}</h3>
+      <button v-if="loading" class="refresh-btn" disabled>
+        Chargement...
+      </button>
+
+    </div>
+    
+    <div 
+      ref="plotlyDiv" 
+      :id="chartId"
+      class="chart-container"
+      :class="{ loading: loading }"
+    >
+      <div v-if="loading" class="loading-spinner">
+        <div class="spinner"></div>
+        <p>Chargement des données...</p>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue'
+import Plotly from 'plotly.js-dist'
+import { csvParse } from 'd3-dsv'
+
+export default {
+  name: 'PlotlyChart',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    csvUrl: {
+      type: String,
+      default: ''
+    },
+    dataType: {
+      type: String,
+      default: 'csv', // 'csv' ou 'football-field'
+      validator: (value) => ['csv', 'football-field'].includes(value)
+    },
+    chartId: {
+      type: String,
+      default: () => ``
+    },
+    height: {
+      type: [String, Number],
+      default: 500
+    },
+    customLayout: {
+      type: Object,
+      default: () => ({})
+    },
+    keypointsData: {
+      type: Array,
+      default: () => []
+    },
+    cameraParams: {
+      type: Object,
+      default: () => null
+    }
+  },
+  emits: ['data-loaded', 'error'],
+  setup(props, { emit }) {
+    const plotlyDiv = ref(null)
+    const loading = ref(false)
+    const error = ref(null)
+    const chartData = ref([])
+    
+    // Fonction pour décompresser les données du CSV
+    const unpack = (rows, key) => {
+      return rows.map(row => row[key])
+    }
+    
+    // Fonction pour charger les données depuis le CSV
+    const loadData = async () => {
+      loading.value = true
+      error.value = null
+      
+      try {
+        if (props.dataType === 'football-field') {
+          // Générer les données du terrain de football
+          await generateFootballFieldData()
+        } else {
+          // Charger depuis CSV (comportement original)
+          await loadCsvData()
+        }
+        
+        await renderChart()
+        emit('data-loaded', { traces: chartData.value })
+        
+      } catch (err) {
+        console.error('Erreur lors du chargement des données:', err)
+        error.value = err.message
+        emit('error', err)
+      } finally {
+        loading.value = false
+      }
+    }
+    
+    // Fonction pour charger les données CSV (ancien comportement)
+    const loadCsvData = async () => {
+      const response = await fetch(props.csvUrl)
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`)
+      }
+      
+      const csvText = await response.text()
+      const rows = csvParse(csvText)
+      
+      if (!rows || rows.length === 0) {
+        throw new Error('Aucune donnée trouvée dans le CSV')
+      }
+      
+      // Création des traces comme dans votre exemple
+      const trace1 = {
+        x: unpack(rows, 'x1'),
+        y: unpack(rows, 'y1'),
+        z: unpack(rows, 'z1'),
+        mode: 'markers',
+        marker: {
+          size: 12,
+          line: {
+            color: 'rgba(217, 217, 217, 0.14)',
+            width: 0.5
+          },
+          opacity: 0.8
+        },
+        type: 'scatter3d',
+        name: 'Série 1'
+      }
+      
+      const trace2 = {
+        x: unpack(rows, 'x2'),
+        y: unpack(rows, 'y2'),
+        z: unpack(rows, 'z2'),
+        mode: 'markers',
+        marker: {
+          color: 'rgb(127, 127, 127)',
+          size: 12,
+          symbol: 'circle',
+          line: {
+            color: 'rgb(204, 204, 204)',
+            width: 1
+          },
+          opacity: 0.8
+        },
+        type: 'scatter3d',
+        name: 'Série 2'
+      }
+      
+      chartData.value = [trace1, trace2]
+    }
+    
+    // Fonction pour générer les données du terrain de football
+    const generateFootballFieldData = async () => {
+      const fieldLength = 105 // mètres
+      const fieldWidth = 68   // mètres
+      
+      const traces = []
+      
+      // 1. Contour principal du terrain
+      const fieldCorners = {
+        x: [-fieldLength/2, fieldLength/2, fieldLength/2, -fieldLength/2, -fieldLength/2],
+        y: [-fieldWidth/2, -fieldWidth/2, fieldWidth/2, fieldWidth/2, -fieldWidth/2],
+        z: [0, 0, 0, 0, 0],
+        mode: 'lines',
+        type: 'scatter3d',
+        line: { color: '#00FF00', width: 6 },
+        name: 'Terrain principal',
+        showlegend: true
+      }
+      traces.push(fieldCorners)
+      
+      // 2. Ligne médiane
+      const midline = {
+        x: [0, 0],
+        y: [-fieldWidth/2, fieldWidth/2],
+        z: [0, 0],
+        mode: 'lines',
+        type: 'scatter3d',
+        line: { color: 'bleu', width: 4 },
+        name: 'Ligne médiane',
+        showlegend: true
+      }
+      traces.push(midline)
+      
+      // 3. Surface de réparation gauche
+      const leftPenaltyArea = {
+        x: [-fieldLength/2, -fieldLength/2+16.5, -fieldLength/2+16.5, -fieldLength/2, -fieldLength/2],
+        y: [-20.16, -20.16, 20.16, 20.16, -20.16],
+        z: [0, 0, 0, 0, 0],
+        mode: 'lines',
+        type: 'scatter3d',
+        line: { color: '#FF6B6B', width: 5 },
+        name: 'Surface de réparation',
+        showlegend: true
+      }
+      traces.push(leftPenaltyArea)
+      
+      // 4. Surface de réparation droite
+      const rightPenaltyArea = {
+        x: [fieldLength/2, fieldLength/2-16.5, fieldLength/2-16.5, fieldLength/2, fieldLength/2],
+        y: [-20.16, -20.16, 20.16, 20.16, -20.16],
+        z: [0, 0, 0, 0, 0],
+        mode: 'lines',
+        type: 'scatter3d',
+        line: { color: '#FF6B6B', width: 5 },
+        name: 'Surface de réparation droite',
+        showlegend: false // Eviter la duplication dans la légende
+      }
+      traces.push(rightPenaltyArea)
+      
+      // 5. Surface de but gauche (6 yards)
+      const leftGoalArea = {
+        x: [-fieldLength/2, -fieldLength/2+5.5, -fieldLength/2+5.5, -fieldLength/2, -fieldLength/2],
+        y: [-9.16, -9.16, 9.16, 9.16, -9.16],
+        z: [0, 0, 0, 0, 0],
+        mode: 'lines',
+        type: 'scatter3d',
+        line: { color: '#4ECDC4', width: 4 },
+        name: 'Surface de but',
+        showlegend: true
+      }
+      traces.push(leftGoalArea)
+      
+      // 6. Surface de but droite
+      const rightGoalArea = {
+        x: [fieldLength/2, fieldLength/2-5.5, fieldLength/2-5.5, fieldLength/2, fieldLength/2],
+        y: [-9.16, -9.16, 9.16, 9.16, -9.16],
+        z: [0, 0, 0, 0, 0],
+        mode: 'lines',
+        type: 'scatter3d',
+        line: { color: '#4ECDC4', width: 4 },
+        showlegend: false
+      }
+      traces.push(rightGoalArea)
+      
+      // 7. Cercle central
+      const circlePoints = 50
+      const radius = 9.15
+      const theta = Array.from({length: circlePoints}, (_, i) => (i / (circlePoints - 1)) * 2 * Math.PI)
+      const centerCircle = {
+        x: theta.map(t => radius * Math.cos(t)),
+        y: theta.map(t => radius * Math.sin(t)),
+        z: theta.map(() => 0),
+        mode: 'lines',
+        type: 'scatter3d',
+        line: { color: '#FFE66D', width: 4 },
+        name: 'Cercle central',
+        showlegend: true
+      }
+      traces.push(centerCircle)
+      
+      // 8. Points de penalty
+      const penaltySpots = {
+        x: [-fieldLength/2 + 11, fieldLength/2 - 11],
+        y: [0, 0],
+        z: [0, 0],
+        mode: 'markers',
+        type: 'scatter3d',
+        marker: { 
+          color: '#FFFFFF', 
+          size: 8,
+          symbol: 'circle'
+        },
+        name: 'Points de penalty',
+        showlegend: true
+      }
+      traces.push(penaltySpots)
+      
+      // 9. Point central
+      const centerSpot = {
+        x: [0],
+        y: [0],
+        z: [0],
+        mode: 'markers',
+        type: 'scatter3d',
+        marker: { 
+          color: '#FFFFFF', 
+          size: 6,
+          symbol: 'circle'
+        },
+        name: 'Point central',
+        showlegend: true
+      }
+      traces.push(centerSpot)
+      
+      // 10. Keypoints détectés (si disponibles)
+      if (props.keypointsData && props.keypointsData.length > 0) {
+        const keypointsTrace = {
+          x: props.keypointsData.map(kp => kp.world_coords?.x || 0),
+          y: props.keypointsData.map(kp => kp.world_coords?.y || 0),
+          z: props.keypointsData.map(() => 0.5), // Légèrement au-dessus du terrain
+          mode: 'markers+text',
+          type: 'scatter3d',
+          marker: { 
+            color: '#FF1744', 
+            size: 6,
+            symbol: 'circle',
+            line: {
+              color: '#FFFFFF',
+              width: 2
+            }
+          },
+          text: props.keypointsData.map(kp => `KP ${kp.id}`),
+          textposition: 'top center',
+          textfont: {
+            color: 'black',
+            size: 8,
+            family: 'Arial, sans-serif'
+          },
+          name: 'Keypoints détectés',
+          showlegend: false,
+          hovertemplate: 
+            '<b>Keypoint %{text}</b><br>' +
+            'X: %{x:.1f}m<br>' +
+            'Y: %{y:.1f}m<br>' +
+            '<extra></extra>'
+        }
+        traces.push(keypointsTrace)
+      }
+      
+      // 11. Position de la caméra (si disponible)
+      if (props.cameraParams?.position_meters) {
+        const [camX, camY, camZ] = props.cameraParams.position_meters
+        
+        const cameraTrace = {
+          x: [camX],
+          y: [camY], 
+          z: [camZ],
+          mode: 'markers+text',
+          type: 'scatter3d',
+          marker: { 
+            color: '#2196F3', 
+            size: 15,
+            symbol: 'square',
+            line: {
+              color: '#FFFFFF',
+              width: 3
+            }
+          },
+          text: ['📷 Caméra'],
+          textposition: 'top center',
+          textfont: {
+            color: '#2196F3',
+            size: 12,
+            family: 'Arial, sans-serif'
+          },
+          name: 'Position caméra',
+          showlegend: false,
+          hovertemplate: 
+            '<b>📷 Position de la caméra</b><br>' +
+            'X: %{x:.2f}m<br>' +
+            'Y: %{y:.2f}m<br>' +
+            'Z: %{z:.2f}m<br>' +
+            '<extra></extra>'
+        }
+        traces.push(cameraTrace)
+        
+        // 12. Ligne de vue de la caméra vers le centre du terrain (optionnel)
+        const sightLineTrace = {
+          x: [camX, 0],
+          y: [camY, 0],
+          z: [camZ, 0],
+          mode: 'lines',
+          type: 'scatter3d',
+          line: { 
+            color: '#2196F3', 
+            width: 2,
+            dash: 'dot'
+          },
+          name: 'Ligne de vue',
+          showlegend: false,
+          hoverinfo: 'skip'
+        }
+        traces.push(sightLineTrace)
+      }
+      
+      chartData.value = traces
+    }
+    
+    // Fonction pour rendre le graphique
+    const renderChart = async () => {
+      if (!plotlyDiv.value || chartData.value.length === 0) return
+      
+      let defaultLayout = {
+        margin: {
+          l: 0,
+          r: 0,
+          b: 0,
+          t: 0
+        },
+        height: typeof props.height === 'number' ? props.height : parseInt(props.height),
+        scene: {
+          xaxis: { title: 'X Axis' },
+          yaxis: { title: 'Y Axis' },
+          zaxis: { title: 'Z Axis' }
+        }
+      }
+      
+      // Layout spécifique pour le terrain de football
+      if (props.dataType === 'football-field') {
+        const shift_l = 10;
+        const shift_w = 40;
+        
+        // Ranges de base
+        let baseLength = 52.5 + shift_l;  // range X: [-baseLength, baseLength]
+        let baseWidth = 34 + shift_w;     // range Y: [-baseWidth, baseWidth]  
+        let baseHeight = 35;              // range Z: [-baseHeight, baseHeight]
+        
+        // Position de la caméra
+        const camX = props.cameraParams?.position_meters?.[0] || 0;
+        const camY = props.cameraParams?.position_meters?.[1] || 0;
+        const camZ = props.cameraParams?.position_meters?.[2] || 0;
+        
+        // Vérifier si la caméra dépasse les ranges et ajuster si nécessaire
+        const maxCamX = Math.abs(camX);
+        const maxCamY = Math.abs(camY);
+        const maxCamZ = Math.abs(camZ);
+        
+        // Ratios actuels pour conserver les proportions
+        const ratioXY = baseLength / baseWidth;  // ratio X/Y
+        const ratioXZ = baseLength / baseHeight; // ratio X/Z
+        const ratioYZ = baseWidth / baseHeight;  // ratio Y/Z
+        
+        // Ajuster les ranges si la caméra dépasse
+        if (maxCamX > baseLength) {
+          baseLength = maxCamX + 10; // marge de 10m
+          baseWidth = baseLength / ratioXY; // conserver ratio X/Y
+          baseHeight = baseLength / ratioXZ; // conserver ratio X/Z
+        }
+        
+        if (maxCamY > baseWidth) {
+          baseWidth = maxCamY + 10; // marge de 10m
+          baseLength = baseWidth * ratioXY; // conserver ratio X/Y
+          baseHeight = baseWidth / ratioYZ; // conserver ratio Y/Z
+        }
+        
+        if (maxCamZ > baseHeight) {
+          baseHeight = maxCamZ + 10; // marge de 10m
+          baseLength = baseHeight * ratioXZ; // conserver ratio X/Z
+          baseWidth = baseHeight * ratioYZ; // conserver ratio Y/Z
+        }
+        
+        // Valeurs finales
+        const length = baseLength;
+        const witdh = baseWidth;
+        const height = baseHeight;
+
+        defaultLayout.scene = {
+          xaxis: { 
+            title: '',
+            range: [-length, length],
+            showgrid: false,
+            showticklabels: false,
+            showline: false,
+            zeroline: false,
+            dtick: 20
+          },
+          yaxis: { 
+            title: '',
+            range: [-witdh, witdh],
+            showgrid: false,
+            showticklabels: false,
+            showline: false,
+            zeroline: false,
+            dtick: 20
+          },
+          zaxis: { 
+            title: '',
+            range: [-height, height],
+            showgrid: false,
+            showticklabels: false,
+            showline: false,
+            zeroline: false,
+            dtick: 0
+          },
+          aspectmode: 'manual',
+          aspectratio: { x: 1., y: 1, z: 0.3 },
+          camera: {
+            eye: { x: 0, y: 1, z: -0.6 },
+            center: { x: 0, y: 0, z: 0 },
+            up: { x: 0, y: -1, z: 0 } 
+          }
+        }
+        defaultLayout.margin.t = 10
+        defaultLayout.showlegend = false
+      }
+      
+      const layout = {
+        ...defaultLayout,
+        ...props.customLayout
+      }
+      
+      const config = {
+        responsive: true,
+        displayModeBar: true,
+        modeBarButtonsToRemove: ['pan2d', 'lasso2d'],
+        displaylogo: false
+      }
+      
+      await nextTick()
+      await Plotly.newPlot(plotlyDiv.value, chartData.value, layout, config)
+    }
+    
+    // Fonction de nettoyage
+    const cleanup = () => {
+      if (plotlyDiv.value) {
+        Plotly.purge(plotlyDiv.value)
+      }
+    }
+    
+    // Fonction pour redimensionner le graphique
+    const resizeChart = () => {
+      if (plotlyDiv.value) {
+        Plotly.Plots.resize(plotlyDiv.value)
+      }
+    }
+    
+    // Watcher pour recharger quand les keypoints changent
+    watch(() => props.keypointsData, () => {
+      if (props.dataType === 'football-field') {
+        loadData()
+      }
+    }, { deep: true })
+
+    // Watcher pour recharger quand les paramètres de la caméra changent
+    watch(() => props.cameraParams, () => {
+      if (props.dataType === 'football-field') {
+        loadData()
+      }
+    }, { deep: true })
+    
+    // Lifecycle hooks
+    onMounted(() => {
+      loadData()
+      window.addEventListener('resize', resizeChart)
+    })
+    
+    onUnmounted(() => {
+      cleanup()
+      window.removeEventListener('resize', resizeChart)
+    })
+    
+    return {
+      plotlyDiv,
+      loading,
+      error,
+      loadData,
+      resizeChart
+    }
+  }
+}
+</script>
+
+<style scoped>
+.plotly-chart {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+
+
+.chart-container {
+  position: relative;
+  min-height: 200px;
+}
+
+.chart-container.loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.loading-spinner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #007bff;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.error-message {
+  text-align: center;
+  padding: 2rem;
+  color: #dc3545;
+}
+
+.retry-btn {
+  background: #dc3545;
+  color: white;
+  border: none;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-top: 1rem;
+}
+
+.retry-btn:hover {
+  background: #c82333;
+}
+
+/* Correction de l'alignement de la modebar Plotly */
+.plotly-chart :deep(.modebar) {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: flex-end !important;
+  padding: 5px !important;
+  background: none !important;
+}
+
+.plotly-chart :deep(.modebar-group) {
+  display: flex !important;
+  align-items: center !important;
+  margin: 0 2px !important;
+  background: none !important;
+  border: none !important;
+}
+
+.plotly-chart :deep(.modebar-btn) {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  margin: 0 1px !important;
+  background: none !important;
+  border: none !important;
+}
+
+/* Personnalisation des icônes */
+.plotly-chart :deep(.modebar-btn .icon path) {
+  fill: black !important;
+}
+
+.plotly-chart :deep(.modebar-btn:hover) {
+  background: rgba(0, 0, 0, 0.1) !important;
+}
+
+.plotly-chart :deep(.modebar-btn.active) {
+  background: rgba(0, 0, 0, 0.2) !important;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .chart-header {
+    flex-direction: column;
+    gap: 0.5rem;
+    text-align: center;
+  }
+  
+  .chart-container {
+    min-height: 300px;
+  }
+}
+</style> 

src/services/api.js

@@ -1,5 +1,5 @@
-// const API_BASE_URL = 'http://localhost:8000'
-const API_BASE_URL = 'https://2nzi-pnlcalib.hf.space'
+const API_BASE_URL = 'http://localhost:8000'
+// const API_BASE_URL = 'https://2nzi-pnlcalib.hf.space'
 
 class FootballVisionAPI {
   constructor() {

src/views/HomeView.vue

@@ -6,6 +6,7 @@ import { useUploadStore } from '../stores/upload'
 import api from '../services/api'
 import CalibrationArea from '@/components/CalibrationArea.vue'
 import FootballField from '@/components/FootballField.vue'
+import PlotlyChart from '@/components/PlotlyChart.vue'
 
 const router = useRouter()
 const calibrationStore = useCalibrationStore()
@@ -525,10 +526,28 @@ const processCalibration = async () => {
     })
   }
 }
+
+// Méthodes pour les événements du graphique Plotly
+const onChartDataLoaded = (data) => {
+  if (data.rows) {
+    // Pour les données CSV
+    console.log('📊 Données CSV chargées:', data.rows.length, 'points')
+  } else {
+    // Pour le terrain de football ou autres
+    console.log('📊 Graphique chargé:', data.traces.length, 'éléments')
+  }
+}
+
+const onChartError = (error) => {
+  console.error('❌ Erreur dans le graphique:', error)
+}
 </script>
 
 <template>
-  <div class="home-container">
+
+
+
+      <div class="home-container">    
     <!-- Bouton retour subtil (visible si on a déjà fait des actions) -->
     <button 
       v-if="showUpload || showResults || showError" 
@@ -858,6 +877,27 @@ const processCalibration = async () => {
           </button>
         </div>
 
+        <!-- Graphique 3D pour les images avec calibration réussie -->
+        <div v-if="uploadStore.isImage" class="result-chart">
+          <h3>Terrain de Football - Vue 3D</h3>
+          <PlotlyChart 
+            data-type="football-field"
+            :height="550"
+            :keypoints-data="calibrationStore.results?.detections?.keypoints || []"
+            :camera-params="calibrationStore.results?.camera_parameters?.cam_params"
+            :custom-layout="{
+              title: {
+                text: 'Visualisation 3D du terrain de football',
+                font: { size: 16, color: 'white' }
+              },
+              paper_bgcolor: 'rgba(0,0,0,0)',
+              plot_bgcolor: 'rgba(0,0,0,0)'
+            }"
+            @data-loaded="onChartDataLoaded"
+            @error="onChartError"
+          />
+        </div>
+
         <details class="result-details">
           <summary>Données complètes</summary>
           <pre class="result-data">{{ JSON.stringify(calibrationStore.results, null, 2) }}</pre>
@@ -1454,7 +1494,7 @@ const processCalibration = async () => {
 
 /* Section Résultats */
 .results-container {
-  max-width: 600px;
+  max-width: 800px;
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -1560,19 +1600,27 @@ const processCalibration = async () => {
 }
 
 .result-data {
-  background: #1a1a1a;
-  color: #e0e0e0;
-  padding: 1rem;
-  border-radius: 6px;
-  font-family: 'Courier New', monospace;
-  font-size: 0.8rem;
-  line-height: 1.4;
+  background: #0d1117;
+  color: #e6edf3;
+  padding: 1.5rem;
+  border-radius: 8px;
+  font-family: 'Monaco', 'Consolas', 'Ubuntu Mono', monospace;
+  font-size: 0.875rem;
+  line-height: 1.6;
   overflow-x: auto;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  border: 1px solid #333;
-  max-height: 300px;
+  white-space: pre;
+  border: 1px solid #30363d;
+  max-height: 400px;
   overflow-y: auto;
+  text-align: left;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
+  
+  /* Syntax highlighting simulation */
+  color: #c9d1d9;
+}
+
+.result-details {
+  position: relative;
 }
 
 .confidence-score {
@@ -1807,6 +1855,25 @@ const processCalibration = async () => {
   height: calc(100% - 80px);
 }
 
+/* Section graphique dans les résultats */
+.result-chart {
+  width: 100%;
+  max-width: 1000px;
+  margin: 2rem 0;
+  background: rgba(255, 255, 255, 0.02);
+  border-radius: 12px;
+  padding: 1.5rem;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.result-chart h3 {
+  font-size: 1.25rem;
+  color: white;
+  margin-bottom: 1rem;
+  text-align: center;
+  font-weight: 600;
+}
+
 /* Responsive */
 @media (max-width: 768px) {
   .home-container {
@@ -1833,5 +1900,9 @@ const processCalibration = async () => {
     flex-direction: column;
   }
 
+  .result-chart {
+    padding: 1rem;
+    margin: 1rem 0;
+  }
 }
 </style>