first commit

.dockerignore

@@ -0,0 +1,11 @@
+# .dockerignore
+node_modules
+npm-debug.log
+.git
+.gitignore
+README.md
+.env
+.nyc_output
+coverage
+.coverage
+dist

.editorconfig

@@ -0,0 +1,9 @@
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue,css,scss,sass,less,styl}]
+charset = utf-8
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+end_of_line = lf
+max_line_length = 100

.gitattributes

@@ -1,35 +1 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text
+* text=auto eol=lf

.gitignore

@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 100
+}

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "dbaeumer.vscode-eslint",
+    "EditorConfig.EditorConfig",
+    "esbenp.prettier-vscode"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,13 @@
+{
+  "explorer.fileNesting.enabled": true,
+  "explorer.fileNesting.patterns": {
+    "tsconfig.json": "tsconfig.*.json, env.d.ts",
+    "vite.config.*": "jsconfig*, vitest.config.*, cypress.config.*, playwright.config.*",
+    "package.json": "package-lock.json, pnpm*, .yarnrc*, yarn*, .eslint*, eslint*, .oxlint*, oxlint*, .prettier*, prettier*, .editorconfig"
+  },
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "explicit"
+  },
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
+}

Dockerfile

@@ -0,0 +1,17 @@
+# Dockerfile - Pour Hugging Face Spaces
+FROM node:22.14.0-alpine AS build-stage
+
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci --only=production=false
+COPY . .
+RUN npm run build
+
+FROM nginx:alpine AS production-stage
+COPY --from=build-stage /app/dist /usr/share/nginx/html
+
+# Configuration minimale pour SPA
+RUN echo 'server { listen 7860; location / { root /usr/share/nginx/html; try_files $uri $uri/ /index.html; } }' > /etc/nginx/conf.d/default.conf
+
+EXPOSE 7860
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -1,10 +1,35 @@
----
-title: FootballFieldCalibaration
-emoji: 🏆
-colorFrom: indigo
-colorTo: yellow
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# soccer-field-app
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vite.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Compile and Minify for Production
+
+```sh
+npm run build
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+npm run lint
+```

eslint.config.js

@@ -0,0 +1,26 @@
+import { defineConfig, globalIgnores } from 'eslint/config'
+import globals from 'globals'
+import js from '@eslint/js'
+import pluginVue from 'eslint-plugin-vue'
+import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
+
+export default defineConfig([
+  {
+    name: 'app/files-to-lint',
+    files: ['**/*.{js,mjs,jsx,vue}'],
+  },
+
+  globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),
+
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+      },
+    },
+  },
+
+  js.configs.recommended,
+  ...pluginVue.configs['flat/essential'],
+  skipFormatting,
+])

index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}

package.json

@@ -0,0 +1,29 @@
+{
+  "name": "soccer-field-app",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --fix",
+    "format": "prettier --write src/"
+  },
+  "dependencies": {
+    "pinia": "^3.0.1",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.22.0",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "eslint": "^9.22.0",
+    "eslint-plugin-vue": "~10.0.0",
+    "globals": "^16.0.0",
+    "prettier": "3.5.3",
+    "vite": "^6.2.4",
+    "vite-plugin-vue-devtools": "^7.7.2"
+  }
+}

src/App.vue

@@ -0,0 +1,26 @@
+<script setup>
+import { RouterView } from 'vue-router'
+</script>
+
+<template>
+  <div id="app">
+
+    <main class="app-main">
+      <RouterView />
+    </main>
+  </div>
+</template>
+
+<style scoped>
+#app {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.app-main {
+  flex: 1;
+  background-color: var(--background-color);
+
+}
+</style>

src/assets/base.css

@@ -0,0 +1,109 @@
+/* color palette personnalisée */
+:root {
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f8f8f8;
+  --vt-c-white-mute: #f2f2f2;
+
+  --vt-c-black: #000000;
+  --vt-c-black-soft: #1a1a1a;
+  --vt-c-black-mute: #2d2d2d;
+
+  --vt-c-lime: #33FF6B;
+  --vt-c-lime-soft: #08c4d1cf;
+  --vt-c-lime-mute: #08c4d185;
+  /* --vt-c-lime: #08C5D1;
+  --vt-c-lime-soft: #08c4d1cf;
+  --vt-c-lime-mute: #08c4d185; */
+  /* --vt-c-lime: #FF00BF;
+  --vt-c-lime-soft: #ff00bfe2;
+  --vt-c-lime-mute: #ff00bfe9; */
+
+  --vt-c-gray: #707070;
+  --vt-c-gray-soft: #8a8a8a;
+  --vt-c-gray-light: #a0a0a0;
+
+  --vt-c-divider-light-1: rgba(112, 112, 112, 0.29);
+  --vt-c-divider-light-2: rgba(112, 112, 112, 0.12);
+  --vt-c-divider-dark-1: #ff00bfb1;
+  --vt-c-divider-dark-2: #ff00bf83;
+
+  --vt-c-text-light-1: var(--vt-c-black);
+  --vt-c-text-light-2: var(--vt-c-gray);
+  --vt-c-text-dark-1: var(--vt-c-white);
+  --vt-c-text-dark-2: var(--vt-c-gray-light);
+}
+
+/* semantic color variables for this project */
+:root {
+  --color-background: var(--vt-c-white);
+  --color-background-soft: var(--vt-c-white-soft);
+  --color-background-mute: var(--vt-c-white-mute);
+
+  --color-border: var(--vt-c-divider-light-2);
+  --color-border-hover: var(--vt-c-divider-light-1);
+
+  --color-heading: var(--vt-c-text-light-1);
+  --color-text: var(--vt-c-text-light-1);
+
+  /* Nouvelles variables personnalisées */
+  --color-primary: var(--vt-c-lime);
+  --color-primary-soft: var(--vt-c-lime-soft);
+  --color-primary-mute: var(--vt-c-lime-mute);
+  
+  --color-secondary: var(--vt-c-black);
+  --color-secondary-soft: var(--vt-c-black-soft);
+  
+  --color-accent: var(--vt-c-gray);
+  --color-accent-soft: var(--vt-c-gray-soft);
+  --color-accent-light: var(--vt-c-gray-light);
+
+  --section-gap: 160px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--vt-c-black);
+    --color-background-soft: var(--vt-c-black-soft);
+    --color-background-mute: var(--vt-c-black-mute);
+
+    --color-border: var(--vt-c-divider-dark-2);
+    --color-border-hover: var(--vt-c-divider-dark-1);
+
+    --color-heading: var(--vt-c-text-dark-1);
+    --color-text: var(--vt-c-text-dark-2);
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  font-weight: normal;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-secondary);
+  transition:
+    color 0.5s;
+  line-height: 1.6;
+  font-family:
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
+    sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

src/assets/main.css

@@ -0,0 +1,24 @@
+@import './base.css';
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  font-weight: normal;
+  background: var(--color-secondary);
+}
+
+a,
+.green {
+  text-decoration: none;
+  color: hsla(160, 100%, 37%, 1);
+  transition: 0.4s;
+  padding: 3px;
+}
+
+
+@media (min-width: 1024px) {
+  body {
+    display: flex;
+    place-items: center;
+  }
+}

src/components/CalibrationArea.vue

@@ -0,0 +1,717 @@
+<template>
+  <div 
+    class="video-frame-container" 
+    tabindex="0" 
+    ref="container"
+    @keydown="handleKeyDown"
+    @focus="handleFocus"
+    @blur="handleBlur">
+    <div class="video-frame" 
+         ref="imageContainer"
+         :style="frameStyle"
+         @contextmenu.prevent
+         @wheel.prevent="handleZoom"
+         @mousedown="handleMouseDown"
+         @mousemove="handleMouseMove"
+         @mouseup="stopPan"
+         @mouseleave="stopPan">
+      <div class="image-container" :style="transformStyle">
+        <img v-if="thumbnail" 
+             :src="thumbnail" 
+             alt="Video frame"
+             @load="initializeImage"
+             ref="image"
+             class="video-image" />
+        <div v-for="(point, index) in calibrationPoints" 
+             :key="index"
+             class="calibration-point"
+             :class="{ 'selected-point': selectedFieldPoint && Number(selectedFieldPoint.index) === Number(index) }"
+             :style="{
+               left: `${point.x}px`,
+               top: `${point.y}px`
+             }">
+        </div>
+        <div v-for="(line, id) in calibrationLines"
+             :key="'line-'+id"
+             class="calibration-polyline">
+          <svg class="polyline-svg">
+            <g v-for="(line, id) in calibrationLines" :key="id">
+              <polyline
+                :points="formatPoints(line.points)"
+                :class="{ 'selected-line': selectedFieldLine && selectedFieldLine.id === id }"
+                fill="none"
+                stroke="#00FF15"
+                stroke-width="2"
+              />
+              <circle v-for="(point, index) in line.points"
+                      :key="'point-'+index"
+                      :cx="point.x"
+                      :cy="point.y"
+                      r="2"
+                      class="polyline-point"
+                      :class="{
+                        'selected-line-point': selectedFieldLine && selectedFieldLine.id === id,
+                        'dragging': isDraggingPoint && draggedLineId === id && selectedPointIndex === index,
+                        'shared-point': sharedPoints.has(`${id}-${index}`),
+                        'hoverable': isCtrlPressed && selectedFieldLine
+                      }"
+              />
+            </g>
+          </svg>
+        </div>
+        <div v-for="(point, index) in currentLinePoints"
+             :key="'temp-'+index"
+             class="calibration-point temp-point"
+             :style="{
+               left: `${point.x}px`,
+               top: `${point.y}px`
+             }" />
+        <svg class="temp-polyline-svg" v-if="currentLinePoints.length > 0">
+          <polyline
+            :points="getPolylinePoints(currentLinePoints)"
+            stroke="#FFC107"
+            stroke-dasharray="5,5"
+            fill="none"
+            stroke-width="2"
+          />
+        </svg>
+      </div>
+    </div>
+    <div class="save-section">
+      <KeyboardShortcuts />
+      <button 
+        class="action-btn clear-btn"
+        :disabled="Object.keys(calibrationLines).length === 0 && Object.keys(calibrationPoints).length === 0"
+        @click="clearCalibration"
+      >
+        Clear
+      </button>
+      <button 
+        class="action-btn process-btn"
+        :disabled="Object.keys(calibrationLines).length === 0 && Object.keys(calibrationPoints).length === 0"
+        @click="processCalibration"
+      >
+        Traiter la calibration
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import KeyboardShortcuts from './KeyboardShortcuts.vue'
+
+// Props
+const props = defineProps({
+  thumbnail: {
+    type: String,
+    default: null
+  },
+  calibrationPoints: {
+    type: Object,
+    default: () => ({})
+  },
+  calibrationLines: {
+    type: Object,
+    default: () => ({})
+  },
+  selectedFieldPoint: {
+    type: Object,
+    default: null
+  },
+  selectedFieldLine: {
+    type: Object,
+    default: null
+  }
+})
+
+// Emits
+const emit = defineEmits([
+  'update:calibrationPoints',
+  'update:calibrationLines',
+  'update:selectedFieldPoint',
+  'update:selectedFieldLine',
+  'clear-calibration',
+  'process-calibration'
+])
+
+// Refs
+const container = ref(null)
+const imageContainer = ref(null)
+const image = ref(null)
+
+// Data
+const scale = ref(1)
+const translation = ref({ x: 0, y: 0 })
+const aspectRatio = ref(1)
+const imageSize = ref({ width: 0, height: 0 })
+const isPanning = ref(false)
+const isMiddleMouseDown = ref(false)
+const lastMousePosition = ref({ x: 0, y: 0 })
+const currentLinePoints = ref([])
+const isDrawingLine = ref(false)
+const isDraggingPoint = ref(false)
+const selectedPointIndex = ref(null)
+const draggedLineId = ref(null)
+const proximityThreshold = ref(10)
+const tempPoint = ref(null)
+const isCtrlPressed = ref(false)
+const sharedPoints = ref(new Set())
+const draggedPoints = ref([])
+const isCreatingLine = ref(false)
+
+// Computed
+const frameStyle = computed(() => {
+  if (!aspectRatio.value) return {}
+  
+  const container = imageContainer.value?.parentElement
+  if (!container) return {}
+  
+  const parentWidth = container.clientWidth
+  const parentHeight = container.clientHeight
+  
+  let width, height
+  
+  if (parentWidth / parentHeight > aspectRatio.value) {
+    height = parentHeight
+    width = height * aspectRatio.value
+  } else {
+    width = parentWidth
+    height = width / aspectRatio.value
+  }
+  
+  return {
+    width: `${width}px`,
+    height: `${height}px`
+  }
+})
+
+const transformStyle = computed(() => {
+  return {
+    transform: `translate(${translation.value.x}px, ${translation.value.y}px) scale(${scale.value})`,
+    transformOrigin: '0 0'
+  }
+})
+
+// Methods
+const initializeImage = (event) => {
+  const img = event.target
+  
+  imageSize.value = {
+    width: img.naturalWidth,
+    height: img.naturalHeight
+  }
+  
+  aspectRatio.value = imageSize.value.width / imageSize.value.height
+}
+
+const handleZoom = (event) => {
+  const zoomFactor = 0.1
+  const delta = Math.sign(event.deltaY) * -1
+  const newScale = scale.value + delta * zoomFactor
+  
+  const oldScale = scale.value
+  scale.value = Math.min(Math.max(newScale, 1), 15)
+  
+  if (scale.value === 1) {
+    translation.value = { x: 0, y: 0 }
+    return
+  }
+  
+  if (scale.value !== oldScale) {
+    const rect = imageContainer.value.getBoundingClientRect()
+    const mouseX = event.clientX - rect.left
+    const mouseY = event.clientY - rect.top
+
+    const pointX = (mouseX - translation.value.x) / oldScale
+    const pointY = (mouseY - translation.value.y) / oldScale
+
+    translation.value = {
+      x: mouseX - (pointX * scale.value),
+      y: mouseY - (pointY * scale.value)
+    }
+  }
+}
+
+const handleMouseDown = (event) => {
+  if (event.button === 1) { // Clic molette
+    isMiddleMouseDown.value = true
+    lastMousePosition.value = {
+      x: event.clientX,
+      y: event.clientY
+    }
+    event.preventDefault()
+    return
+  }
+
+  // Gestion des points
+  if (event.button === 0 && props.selectedFieldPoint) {
+    const rect = imageContainer.value.getBoundingClientRect()
+    const x = event.clientX - rect.left
+    const y = event.clientY - rect.top
+    
+    const newPoints = { ...props.calibrationPoints }
+    newPoints[props.selectedFieldPoint.index] = {
+      x: (x - translation.value.x) / scale.value,
+      y: (y - translation.value.y) / scale.value
+    }
+    emit('update:calibrationPoints', newPoints)
+    return
+  }
+
+  // Gestion des lignes
+  if (event.button === 2 && props.selectedFieldLine) {
+    if (currentLinePoints.value.length >= 2) {
+      const newLines = { ...props.calibrationLines }
+      newLines[props.selectedFieldLine.id] = {
+        points: [...currentLinePoints.value]
+      }
+      emit('update:calibrationLines', newLines)
+      currentLinePoints.value = []
+      isCreatingLine.value = false
+    }
+    return
+  }
+
+  if (event.button === 0) {
+    const rect = imageContainer.value.getBoundingClientRect()
+    const mouseX = event.clientX - rect.left
+    const mouseY = event.clientY - rect.top
+    
+    const x = (mouseX - translation.value.x) / scale.value
+    const y = (mouseY - translation.value.y) / scale.value
+
+    if (isDraggingPoint.value) {
+      const newLines = { ...props.calibrationLines }
+      draggedPoints.value.forEach(({ lineId, pointIndex }) => {
+        if (newLines[lineId] && Array.isArray(newLines[lineId].points)) {
+          newLines[lineId].points[pointIndex] = { x, y }
+        }
+      })
+      emit('update:calibrationLines', newLines)
+      
+      isDraggingPoint.value = false
+      draggedPoints.value = []
+      tempPoint.value = null
+      return
+    }
+
+    if (!isCreatingLine.value) {
+      if (isCtrlPressed.value) {
+        const nearestPoint = findLineByPoint(x, y)
+        
+        if (nearestPoint) {
+          if (currentLinePoints.value.length === 0) {
+            isCreatingLine.value = true
+            currentLinePoints.value.push(nearestPoint.point)
+            sharedPoints.value.add(`${nearestPoint.lineId}-${nearestPoint.pointIndex}`)
+            return
+          }
+        }
+      }
+      
+      const nearestPoint = findLineByPoint(x, y)
+      if (nearestPoint) {
+        isDraggingPoint.value = true
+        const sharedLines = findAllLinesWithPoint(nearestPoint.point.x, nearestPoint.point.y)
+        draggedPoints.value = sharedLines.map(line => ({
+          lineId: line.lineId,
+          pointIndex: line.pointIndex
+        }))
+        tempPoint.value = { ...nearestPoint.point }
+        return
+      } else if (props.selectedFieldLine) {
+        isCreatingLine.value = true
+        currentLinePoints.value = [{ x, y }]
+      }
+    } else {
+      if (isCtrlPressed.value) {
+        const nearestPoint = findLineByPoint(x, y)
+        if (nearestPoint && nearestPoint.lineId !== props.selectedFieldLine.id) {
+          currentLinePoints.value.push(nearestPoint.point)
+          sharedPoints.value.add(`${nearestPoint.lineId}-${nearestPoint.pointIndex}`)
+          return
+        }
+      }
+      currentLinePoints.value.push({ x, y })
+    }
+  }
+}
+
+const handleMouseMove = (event) => {
+  if (isMiddleMouseDown.value) {
+    const dx = event.clientX - lastMousePosition.value.x
+    const dy = event.clientY - lastMousePosition.value.y
+    
+    const container = imageContainer.value
+    const img = image.value
+    
+    if (!container || !img) return
+    
+    const containerRect = container.getBoundingClientRect()
+    const imageRect = img.getBoundingClientRect()
+    
+    const minX = containerRect.width - imageRect.width * scale.value
+    const minY = containerRect.height - imageRect.height * scale.value
+    
+    const newX = Math.min(0, Math.max(minX, translation.value.x + dx))
+    const newY = Math.min(0, Math.max(minY, translation.value.y + dy))
+    
+    translation.value.x = newX
+    translation.value.y = newY
+    
+    lastMousePosition.value = {
+      x: event.clientX,
+      y: event.clientY
+    }
+    return
+  }
+
+  if (isDraggingPoint.value && draggedPoints.value.length > 0) {
+    const rect = imageContainer.value.getBoundingClientRect()
+    const mouseX = event.clientX - rect.left
+    const mouseY = event.clientY - rect.top
+    
+    const x = (mouseX - translation.value.x) / scale.value
+    const y = (mouseY - translation.value.y) / scale.value
+
+    const newLines = { ...props.calibrationLines }
+    draggedPoints.value.forEach(({ lineId, pointIndex }) => {
+      if (newLines[lineId] && Array.isArray(newLines[lineId].points)) {
+        newLines[lineId].points[pointIndex] = { x, y }
+      }
+    })
+    
+    emit('update:calibrationLines', newLines)
+  }
+}
+
+const stopPan = () => {
+  isMiddleMouseDown.value = false
+}
+
+const handleKeyDown = (event) => {
+  if (event.key === 'Control') {
+    isCtrlPressed.value = true
+  } else if (event.key === 'Delete' || event.key === 'Backspace') {
+    deleteLine()
+  }
+}
+
+const handleKeyUp = (event) => {
+  if (event.key === 'Control') {
+    isCtrlPressed.value = false
+  }
+}
+
+const handleFocus = () => {
+  console.log('Container focused')
+}
+
+const handleBlur = () => {
+  console.log('Container lost focus')
+}
+
+const getPolylinePoints = (points) => {
+  if (!points) return ''
+  return points.map(p => `${p.x},${p.y}`).join(' ')
+}
+
+const formatPoints = (points) => {
+  if (!points) return ''
+  return points.map(p => `${p.x},${p.y}`).join(' ')
+}
+
+const findLineByPoint = (x, y) => {
+  for (const [lineId, line] of Object.entries(props.calibrationLines)) {
+    const points = line.points
+    for (let i = 0; i < points.length; i++) {
+      const point = points[i]
+      const dx = point.x - x
+      const dy = point.y - y
+      const distance = Math.sqrt(dx * dx + dy * dy)
+      
+      if (distance < proximityThreshold.value) {
+        return {
+          lineId,
+          pointIndex: i,
+          point
+        }
+      }
+    }
+  }
+  return null
+}
+
+const findAllLinesWithPoint = (x, y) => {
+  const sharedLines = []
+  for (const [lineId, line] of Object.entries(props.calibrationLines)) {
+    const points = line.points
+    for (let i = 0; i < points.length; i++) {
+      const point = points[i]
+      const dx = point.x - x
+      const dy = point.y - y
+      const distance = Math.sqrt(dx * dx + dy * dy)
+      
+      if (distance < proximityThreshold.value) {
+        sharedLines.push({
+          lineId,
+          pointIndex: i,
+          point
+        })
+      }
+    }
+  }
+  return sharedLines
+}
+
+const deleteLine = () => {
+  if (props.selectedFieldLine) {
+    const newLines = { ...props.calibrationLines }
+    if (newLines[props.selectedFieldLine.id]) {
+      const points = newLines[props.selectedFieldLine.id].points
+      points.forEach((_, index) => {
+        sharedPoints.value.delete(`${props.selectedFieldLine.id}-${index}`)
+      })
+    }
+    delete newLines[props.selectedFieldLine.id]
+    emit('update:calibrationLines', newLines)
+    emit('update:selectedFieldLine', null)
+    currentLinePoints.value = []
+    isCreatingLine.value = false
+  }
+}
+
+const clearCalibration = () => {
+  emit('clear-calibration')
+}
+
+const processCalibration = () => {
+  emit('process-calibration')
+}
+
+// Lifecycle
+onMounted(() => {
+  window.addEventListener('keydown', handleKeyDown)
+  window.addEventListener('keyup', handleKeyUp)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeyDown)
+  window.removeEventListener('keyup', handleKeyUp)
+})
+
+// Expose imageSize for parent component
+defineExpose({
+  imageSize
+})
+</script>
+
+<style scoped>
+.video-frame-container {
+  flex: 2;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  min-height: 0;
+  border-radius: 4px;
+  padding: 10px;
+  outline: none;
+}
+
+.video-frame {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: calc(100% - 50px);
+  margin-bottom: 45px;
+}
+
+.image-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  will-change: transform;
+}
+
+.video-image {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+.calibration-point {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  background-color: rgb(0, 255, 21);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  box-shadow: 0 0 6px rgba(76, 175, 80, 0.8),
+              0 0 12px rgba(76, 175, 80, 0.5);
+}
+
+.selected-point {
+  background-color: #FFC107;
+  box-shadow: 0 0 8px rgba(255, 193, 7, 0.8),
+              0 0 15px rgba(255, 193, 7, 0.5);
+}
+
+.save-section {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  display: flex;
+  gap: 10px;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  background: rgba(255, 255, 255, 0.1);
+  color: #ffffff;
+  border: 1px solid #555;
+  border-radius: 6px;
+  font-weight: 600;
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.action-btn:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.15);
+  border-color: var(--color-primary);
+  color: var(--color-primary);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 15px rgba(217, 255, 4, 0.2);
+}
+
+.action-btn:disabled {
+  background: rgba(255, 255, 255, 0.05);
+  color: #666;
+  border-color: #333;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
+.process-btn {
+  background: var(--color-primary);
+  color: var(--color-secondary);
+  border-color: var(--color-primary);
+}
+
+.process-btn:hover:not(:disabled) {
+  background: var(--color-primary-soft);
+  border-color: var(--color-primary-soft);
+  color: var(--color-secondary);
+  box-shadow: 0 4px 15px rgba(217, 255, 4, 0.4);
+}
+
+.calibration-polyline {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.polyline-svg {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.polyline-svg polyline {
+  transition: stroke-width 0.2s;
+}
+
+.selected-line {
+  stroke-width: 2;
+  stroke: #FFC107 !important;
+}
+
+.polyline-point {
+  fill: #00FF15;
+  stroke: white;
+  stroke-width: 0.5;
+  transition: all 0.2s ease;
+  pointer-events: all;
+  cursor: pointer;
+}
+
+.polyline-point:hover {
+  fill: #FFC107;
+  r: 3;
+  stroke-width: 2;
+}
+
+.selected-line .polyline-point {
+  cursor: grab;
+}
+
+.polyline-point.dragging {
+  fill: #FF4081;
+  r: 4;
+  stroke-width: 3;
+}
+
+.selected-line-point {
+  fill: #FFC107;
+  r: 2;
+  stroke-width: 1;
+}
+
+.temp-point {
+  background-color: #FFC107;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  border: 2px solid white;
+  z-index: 2;
+}
+
+.temp-polyline-svg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.polyline-point.shared-point {
+  fill: #FFC107;
+  stroke: #FF4081;
+  stroke-width: 2;
+  r: 4;
+  animation: pulse 2s infinite;
+}
+
+.polyline-point.hoverable {
+  cursor: pointer;
+  filter: brightness(1.2);
+}
+
+@keyframes pulse {
+  0% {
+    stroke-width: 2;
+    stroke-opacity: 1;
+  }
+  50% {
+    stroke-width: 3;
+    stroke-opacity: 0.5;
+  }
+  100% {
+    stroke-width: 2;
+    stroke-opacity: 1;
+  }
+}
+</style> 

src/components/FootballField.vue

@@ -0,0 +1,328 @@
+<template>
+  <div class="football-field">
+    <svg viewBox="-7 -2 119 72" preserveAspectRatio="xMidYMid meet" @click="handleBackgroundClick">
+      <g>
+        <!-- Base field -->
+        <rect x="0" y="0" width="105" height="68" fill="none" stroke="#333" stroke-width="0.3"/>
+        
+        <!-- Clickable lines -->
+        <g class="lines">
+          <line v-for="(line, name) in lineCoordinates" 
+                :key="name"
+                class="field-line"
+                :stroke="getLineColor(name)"
+                :x1="line.x1"
+                :y1="line.y1"
+                :x2="line.x2"
+                :y2="line.y2"
+                @click="selectLine(name)" />
+        </g>
+
+        <!-- Key points -->
+        <circle v-for="(point, index) in keypoints" 
+                :key="index"
+                :cx="point[0]" 
+                :cy="point[1]" 
+                r="2"
+                :fill="getPointColor(index)"
+                class="keypoint"
+                @click="selectPoint(index)" />
+        
+        <!-- Center circle -->
+        <circle 
+          cx="52.5" 
+          cy="34" 
+          r="9.15" 
+          fill="none" 
+          :stroke="getLineColor('Circle central')"
+          class="field-line"
+          @click="selectLine('Circle central')" />
+          
+        
+        <!-- Penalty area arcs -->
+        <path 
+          v-for="arc in circle_left_right" 
+          :key="'Circle ' + arc.side"
+          :d="getPenaltyArc(arc)"
+          fill="none"
+          :stroke="getLineColor('Circle ' + arc.side)"
+          class="field-line"
+          @click="selectLine('Circle ' + arc.side)" />
+      </g>
+    </svg>
+    
+    <!-- Selected line or point info -->
+    <div v-if="selectedLine && LINES[selectedLine]" class="info-overlay">
+      {{ LINES[selectedLine].name }}
+    </div>
+    <div v-if="selectedPointIndex !== null" class="info-overlay">
+      {{ POINTS[selectedPointIndex].name }}
+    </div>
+  </div>
+</template>
+
+<script>
+// Définition exacte des classes de lignes comme dans SoccerNet
+const LINES = {
+  'Big rect. left bottom': { name: 'Big rect. left bottom', description: 'Left penalty area - bottom line' },
+  'Big rect. left main': { name: 'Big rect. left main', description: 'Left penalty area - parallel line' },
+  'Big rect. left top': { name: 'Big rect. left top', description: 'Left penalty area - top line' },
+  'Big rect. right bottom': { name: 'Big rect. right bottom', description: 'Right penalty area - bottom line' },
+  'Big rect. right main': { name: 'Big rect. right main', description: 'Right penalty area - parallel line' },
+  'Big rect. right top': { name: 'Big rect. right top', description: 'Right penalty area - top line' },
+  'Circle central': { name: 'Center circle', description: 'Center circle' },
+  'Circle left': { name: 'Left circle', description: 'Left arc' },
+  'Circle right': { name: 'Right circle', description: 'Right arc' },
+  'Goal left crossbar': { name: 'Goal left crossbar', description: 'Left goal crossbar' },
+  'Goal left post left': { name: 'Goal left post left', description: 'Left goal - left post' },
+  'Goal left post right': { name: 'Goal left post right', description: 'Left goal - right post' },
+  'Goal right crossbar': { name: 'Goal right crossbar', description: 'Right goal crossbar' },
+  'Goal right post left': { name: 'Goal right post left', description: 'Right goal - left post' },
+  'Goal right post right': { name: 'Goal right post right', description: 'Right goal - right post' },
+  'Goal unknown': { name: 'Goal unknown', description: 'Unidentified goal' },
+  'Line unknown': { name: 'Line unknown', description: 'Unidentified line' },
+  'Middle line': { name: 'Middle line', description: 'Center line' },
+  'Side line bottom': { name: 'Side line bottom', description: 'Bottom goal line' },
+  'Side line left': { name: 'Side line left', description: 'Left touch line' },
+  'Side line right': { name: 'Side line right', description: 'Right touch line' },
+  'Side line top': { name: 'Side line top', description: 'Top goal line' },
+  'Small rect. left bottom': { name: 'Small rect. left bottom', description: 'Left goal area - bottom line' },
+  'Small rect. left main': { name: 'Small rect. left main', description: 'Left goal area - parallel line' },
+  'Small rect. left top': { name: 'Small rect. left top', description: 'Left goal area - top line' },
+  'Small rect. right bottom': { name: 'Small rect. right bottom', description: 'Right goal area - bottom line' },
+  'Small rect. right main': { name: 'Small rect. right main', description: 'Right goal area - parallel line' },
+  'Small rect. right top': { name: 'Small rect. right top', description: 'Right goal area - top line' },
+  center_circle: {
+    name: "Center circle",
+    type: "circle",
+    color: "#00FF15"
+  },
+  circle_left: {
+    name: "Left circle",
+    type: "arc",
+    color: "#00FF15"
+  },
+  circle_right: {
+    name: "Right circle",
+    type: "arc",
+    color: "#00FF15"
+  }
+};
+
+// Définition des dimensions standard d'un terrain de football
+const FIELD_DIMENSIONS = {
+  PITCH_LENGTH: 105,
+  PITCH_WIDTH: 68,
+  GOAL_LINE_TO_PENALTY_MARK: 11.0,
+  PENALTY_AREA_WIDTH: 40.32,
+  PENALTY_AREA_LENGTH: 16.5,
+  GOAL_AREA_WIDTH: 18.32,
+  GOAL_AREA_LENGTH: 5.5,
+  CENTER_CIRCLE_RADIUS: 9.15,
+  GOAL_HEIGHT: 2.44,
+  GOAL_LENGTH: 7.32
+};
+
+const POINTS = {
+  0: { name: "Center point" },
+  1: { name: "Left penalty point" },
+  2: { name: "Right penalty point" }
+};
+
+export default {
+  name: 'FootballField',
+  props: {
+    positionedLines: {
+      type: Object,
+      default: () => ({})
+    },
+    positionedPoints: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      selectedPointIndex: null,
+      selectedLine: null,
+      LINES,
+      FIELD_DIMENSIONS,
+      POINTS,
+      keypoints: [
+        [52.5, 34],    // Center point
+        [11, 34],      // Left penalty point
+        [94, 34],      // Right penalty point
+      ],
+      lineCoordinates: {
+        'Side line top': { x1: 0, y1: 0, x2: 105, y2: 0 },
+        'Side line bottom': { x1: 0, y1: 68, x2: 105, y2: 68 },
+        'Side line left': { x1: 0, y1: 0, x2: 0, y2: 68 },
+        'Side line right': { x1: 105, y1: 0, x2: 105, y2: 68 },
+        'Middle line': { x1: 52.5, y1: 0, x2: 52.5, y2: 68 },
+        
+        // Penalty areas
+        'Big rect. left bottom': { x1: 0, y1: 54.16, x2: 16.5, y2: 54.16 },
+        'Big rect. left main': { x1: 16.5, y1: 13.84, x2: 16.5, y2: 54.16 },
+        'Big rect. left top': { x1: 0, y1: 13.84, x2: 16.5, y2: 13.84 },
+        'Big rect. right bottom': { x1: 88.5, y1: 54.16, x2: 105, y2: 54.16 },
+        'Big rect. right main': { x1: 88.5, y1: 13.84, x2: 88.5, y2: 54.16 },
+        'Big rect. right top': { x1: 88.5, y1: 13.84, x2: 105, y2: 13.84 },
+        
+        // Goal areas
+        'Small rect. left bottom': { x1: 0, y1: 43.16, x2: 5.5, y2: 43.16 },
+        'Small rect. left main': { x1: 5.5, y1: 24.84, x2: 5.5, y2: 43.16 },
+        'Small rect. left top': { x1: 0, y1: 24.84, x2: 5.5, y2: 24.84 },
+        'Small rect. right bottom': { x1: 99.5, y1: 43.16, x2: 105, y2: 43.16 },
+        'Small rect. right main': { x1: 99.5, y1: 24.84, x2: 99.5, y2: 43.16 },
+        'Small rect. right top': { x1: 99.5, y1: 24.84, x2: 105, y2: 24.84 },
+        
+        // Goals
+        'Goal left post left': { x1: -5, y1: 37.66, x2: 0, y2: 37.66 },
+        'Goal left crossbar': { x1: -5, y1: 30.34, x2: -5, y2: 37.66 },
+        'Goal left post right': { x1: -5, y1: 30.34, x2: 0, y2: 30.34 },
+        'Goal right post left': { x1: 105, y1: 30.34, x2: 110, y2: 30.34 },
+        'Goal right crossbar': { x1: 110, y1: 30.34, x2: 110, y2: 37.66 },
+        'Goal right post right': { x1: 105, y1: 37.66, x2: 110, y2: 37.66 },
+      },
+      lastSelected: null, // 'point' or 'line'
+      circle_left_right: [
+        { x: 11, y: 34, side: 'left' },
+        { x: 94, y: 34, side: 'right' }
+      ]
+    }
+  },
+  methods: {
+    handleBackgroundClick(event) {
+      // Vérifie si le clic vient directement du SVG (pas d'un enfant)
+      if (event.target.tagName === 'svg') {
+        if (this.selectedPointIndex !== null) {
+          this.selectedPointIndex = null;
+          this.$emit('point-selected', null);
+        }
+        if (this.selectedLine) {
+          this.selectedLine = null;
+          this.$emit('line-selected', null);
+        }
+        this.lastSelected = null;
+      }
+    },
+    selectPoint(index, event) {
+      if (event) {
+        event.stopPropagation();
+      }
+      if (this.selectedLine) this.selectedLine = null;
+      this.selectedPointIndex = index;
+      this.lastSelected = 'point';
+      this.$emit('point-selected', {
+        index,
+        coordinates: this.keypoints[index],
+        name: this.POINTS[index].name
+      });
+    },
+    selectLine(lineName, event) {
+      if (event) {
+        event.stopPropagation();
+      }
+      if (this.selectedPointIndex !== null) this.selectedPointIndex = null;
+      this.selectedLine = lineName;
+      this.lastSelected = 'line';
+      if (this.LINES[lineName]) {
+        this.$emit('line-selected', {
+          id: lineName,
+          name: this.LINES[lineName].name,
+          description: this.LINES[lineName].description
+        });
+      }
+    },
+    getPointColor(index) {
+      if (this.selectedPointIndex === index && this.lastSelected === 'point') {
+        return index in this.positionedPoints ? '#FFFF00' : 'red';
+      }
+      return index in this.positionedPoints ? '#00FF15' : 'white';
+    },
+    getLineColor(lineName) {
+      if (this.selectedLine === lineName && this.lastSelected === 'line') {
+        return this.positionedLines[lineName] ? '#FFFF00' : 'red';
+      }
+      return this.positionedLines[lineName] ? '#00FF15' : 'white';
+    },  
+    
+    getPenaltyArc(arc) {
+      const radius = 9.15;
+      const startAngle = arc.side === 'left' ? -53 : -127;
+      const endAngle = arc.side === 'left' ? 53 : 127;
+      
+      const start = {
+        x: arc.x + radius * Math.cos(startAngle * Math.PI / 180),
+        y: arc.y + radius * Math.sin(startAngle * Math.PI / 180)
+      };
+      
+      const end = {
+        x: arc.x + radius * Math.cos(endAngle * Math.PI / 180),
+        y: arc.y + radius * Math.sin(endAngle * Math.PI / 180)
+      };
+      
+      const largeArc = 0;
+      const sweep = arc.side === 'left' ? 1 : 0;
+      
+      return `M ${start.x} ${start.y} A ${radius} ${radius} 0 ${largeArc} ${sweep} ${end.x} ${end.y}`;
+    }
+  }
+}
+</script>
+
+<style scoped>
+.football-field {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.field-line {
+  stroke-width: 0.8;
+  cursor: pointer;
+}
+
+/* Specific style for goal lines */
+.field-line[class*="Goal"] {
+  stroke-width: 1;  /* Thicker line for goals */
+}
+
+.field-line:hover {
+  stroke-width: 1.2;  /* Even thicker on hover */
+  opacity: 0.8;
+}
+
+.line-info {
+  position: absolute;
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: rgba(0, 0, 0, 0.7);
+  color: white;
+  padding: 5px 10px;
+  border-radius: 4px;
+  font-size: 0.9rem;
+}
+
+.keypoint {
+  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5)); /* Glow effect for points */
+  cursor: pointer;
+}
+
+.keypoint:hover {
+  filter: drop-shadow(0 0 4px rgba(255, 0, 0, 0.8));
+}
+
+.info-overlay {
+  position: absolute;
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: rgba(0, 0, 0, 0.7);
+  color: white;
+  padding: 5px 10px;
+  border-radius: 4px;
+  font-size: 0.9rem;
+}
+</style> 

src/components/KeyboardShortcuts.vue

@@ -0,0 +1,273 @@
+<template>
+  <div>
+    <button @click="showModal = true" class="shortcuts-btn">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
+        <line x1="8" y1="21" x2="16" y2="21"/>
+        <line x1="12" y1="17" x2="12" y2="21"/>
+      </svg>
+      Shortcuts
+    </button>
+
+    <div v-if="showModal" class="modal-overlay" @click="showModal = false">
+      <div class="modal-content" @click.stop>
+        <div class="modal-header">
+          <h2>Guide d'utilisation</h2>
+          <button class="close-btn" @click="showModal = false">&times;</button>
+        </div>
+        <div class="shortcuts-content">
+          <div class="shortcuts-section">
+            <h3>Points de calibration</h3>
+            <div class="shortcut-item">
+              <span class="key">Clic gauche</span>
+              <span class="description">Placer un point (sélectionner d'abord un point sur le terrain)</span>
+            </div>
+            <div class="shortcut-item">
+              <span class="key">Glisser</span>
+              <span class="description">Déplacer un point existant</span>
+            </div>
+          </div>
+
+          <div class="shortcuts-section">
+            <h3>Lignes de calibration</h3>
+            <div class="shortcut-item">
+              <span class="key">Clic gauche</span>
+              <span class="description">Ajouter un point à la ligne (sélectionner d'abord une ligne sur le terrain)</span>
+            </div>
+            <div class="shortcut-item">
+              <span class="key">Clic droit</span>
+              <span class="description">Terminer la ligne (minimum 2 points)</span>
+            </div>
+            <div class="shortcut-item">
+              <span class="key">Ctrl + Clic</span>
+              <span class="description">Utiliser un point d'intersection existant</span>
+            </div>
+          </div>
+
+          <div class="shortcuts-section">
+            <h3>Navigation</h3>
+            <div class="shortcut-item">
+              <span class="key">Molette</span>
+              <span class="description">Zoomer/Dézoomer (1x à 15x)</span>
+            </div>
+            <div class="shortcut-item">
+              <span class="key">Clic molette + Glisser</span>
+              <span class="description">Déplacer l'image</span>
+            </div>
+          </div>
+
+          <div class="shortcuts-section">
+            <h3>Édition</h3>
+            <div class="shortcut-item">
+              <span class="key">Delete / Backspace</span>
+              <span class="description">Supprimer la ligne sélectionnée</span>
+            </div>
+            <div class="shortcut-item">
+              <span class="key">Clear</span>
+              <span class="description">Effacer toute la calibration</span>
+            </div>
+          </div>
+
+          <div class="shortcuts-section">
+            <h3>Workflow</h3>
+            <div class="shortcut-item">
+              <span class="step">1.</span>
+              <span class="description">Sélectionner un élément sur le terrain de football (point ou ligne)</span>
+            </div>
+            <div class="shortcut-item">
+              <span class="step">2.</span>
+              <span class="description">Placer/Dessiner l'élément correspondant sur l'image</span>
+            </div>
+            <div class="shortcut-item">
+              <span class="step">3.</span>
+              <span class="description">Répéter pour tous les éléments nécessaires</span>
+            </div>
+            <div class="shortcut-item">
+              <span class="step">4.</span>
+              <span class="description">Cliquer sur "Traiter la calibration"</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'KeyboardShortcuts',
+  data() {
+    return {
+      showModal: false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.shortcuts-btn {
+  background: rgba(255, 255, 255, 0.1);
+  color: #888;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 6px;
+  padding: 8px 12px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  transition: all 0.3s ease;
+  font-size: 0.85rem;
+  backdrop-filter: blur(10px);
+}
+
+.shortcuts-btn:hover {
+  background: rgba(255, 255, 255, 0.15);
+  color: var(--color-primary);
+  border-color: var(--color-primary);
+}
+
+.shortcuts-btn svg {
+  transition: all 0.3s ease;
+}
+
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 2000;
+  backdrop-filter: blur(5px);
+}
+
+.modal-content {
+  background-color: #1a1a1a;
+  border: 1px solid #333;
+  border-radius: 12px;
+  width: 90%;
+  max-width: 700px;
+  max-height: 85vh;
+  overflow-y: auto;
+  color: white;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 24px;
+  border-bottom: 1px solid #333;
+  background: #2a2a2a;
+  border-radius: 12px 12px 0 0;
+}
+
+.modal-header h2 {
+  margin: 0;
+  font-size: 1.5rem;
+  color: var(--color-primary);
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  color: #888;
+  font-size: 1.8rem;
+  cursor: pointer;
+  padding: 0 8px;
+  transition: color 0.3s ease;
+  line-height: 1;
+}
+
+.close-btn:hover {
+  color: var(--color-primary);
+}
+
+.shortcuts-content {
+  padding: 24px;
+}
+
+.shortcuts-section {
+  margin-bottom: 32px;
+}
+
+.shortcuts-section:last-child {
+  margin-bottom: 0;
+}
+
+.shortcuts-section h3 {
+  color: var(--color-primary);
+  margin-bottom: 16px;
+  font-size: 1.1rem;
+  font-weight: 600;
+  border-bottom: 1px solid #333;
+  padding-bottom: 8px;
+}
+
+.shortcut-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.shortcut-item:last-child {
+  border-bottom: none;
+}
+
+.key {
+  background-color: #333;
+  color: var(--color-primary);
+  padding: 6px 12px;
+  border-radius: 6px;
+  font-family: monospace;
+  font-size: 0.85rem;
+  font-weight: 600;
+  min-width: 120px;
+  text-align: center;
+  border: 1px solid #444;
+}
+
+.step {
+  background-color: var(--color-primary);
+  color: var(--color-secondary);
+  padding: 6px 12px;
+  border-radius: 50%;
+  font-family: monospace;
+  font-size: 0.85rem;
+  font-weight: 700;
+  min-width: 30px;
+  text-align: center;
+  margin-right: 10px;
+}
+
+.description {
+  color: #ccc;
+  flex: 1;
+  margin-left: 16px;
+  line-height: 1.4;
+}
+
+/* Scrollbar styling */
+.modal-content::-webkit-scrollbar {
+  width: 8px;
+}
+
+.modal-content::-webkit-scrollbar-track {
+  background: #2a2a2a;
+}
+
+.modal-content::-webkit-scrollbar-thumb {
+  background: #555;
+  border-radius: 4px;
+}
+
+.modal-content::-webkit-scrollbar-thumb:hover {
+  background: #666;
+}
+</style> 

src/main.js

@@ -0,0 +1,14 @@
+import './assets/main.css'
+
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+
+app.use(createPinia())
+app.use(router)
+
+app.mount('#app')

src/router/index.js

@@ -0,0 +1,20 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import HomeView from '../views/HomeView.vue'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: HomeView,
+    },
+    {
+      path: '/manual',
+      name: 'manual',
+      component: () => import('../views/ManualView.vue'),
+    }
+  ],
+})
+
+export default router

src/services/api.js

@@ -0,0 +1,195 @@
+// const API_BASE_URL = 'http://localhost:8000'
+const API_BASE_URL = 'https://2nzi-pnlcalib.hf.space'
+
+class FootballVisionAPI {
+  constructor() {
+    this.baseURL = API_BASE_URL
+  }
+
+  async healthCheck() {
+    try {
+      const response = await fetch(`${this.baseURL}/health`)
+      return await response.json()
+    } catch (error) {
+      throw new Error(`Health check failed: ${error.message}`)
+    }
+  }
+
+  async calibrateCamera(imageFile, linesData) {
+    const formData = new FormData()
+    formData.append('image', imageFile)
+    formData.append('lines_data', JSON.stringify(linesData))
+
+    try {
+      const response = await fetch(`${this.baseURL}/calibrate`, {
+        method: 'POST',
+        body: formData
+      })
+
+      // Toujours retourner un objet de résultat, même en cas d'erreur
+      if (!response.ok) {
+        let errorMessage = `HTTP error! status: ${response.status}`
+        
+        // Essayer de récupérer le message d'erreur du serveur
+        try {
+          const errorData = await response.json()
+          if (errorData.detail) {
+            // Gestion spéciale pour les erreurs Pydantic
+            if (typeof errorData.detail === 'string') {
+              errorMessage = errorData.detail
+            } else if (Array.isArray(errorData.detail)) {
+              // Erreurs de validation Pydantic
+              errorMessage = errorData.detail.map(err => {
+                if (err.msg && err.loc) {
+                  return `${err.loc.join('.')}: ${err.msg}`
+                }
+                return err.msg || 'Erreur de validation'
+              }).join(', ')
+            }
+          } else if (errorData.message) {
+            errorMessage = errorData.message
+          }
+        } catch (parseError) {
+          // Si on ne peut pas parser la réponse, garder le message d'erreur HTTP
+        }
+        
+        return {
+          status: 'failed',
+          message: errorMessage,
+          error: errorMessage
+        }
+      }
+
+      const result = await response.json()
+      
+      // S'assurer que le résultat a un status, sinon l'ajouter
+      if (!result.status) {
+        result.status = 'success'
+      }
+      
+      return result
+    } catch (error) {
+      // En cas d'erreur de réseau ou autre, retourner un objet d'erreur
+      return {
+        status: 'failed',
+        message: `Calibration failed: ${error.message}`,
+        error: error.message
+      }
+    }
+  }
+
+  async inferenceImage(imageFile, options = {}) {
+    if (!imageFile) {
+      throw new Error('No image file provided')
+    }
+    
+    const formData = new FormData()
+    formData.append('image', imageFile)
+    
+    const { kpThreshold = 0.15, lineThreshold = 0.15 } = options
+    // S'assurer que les valeurs sont des nombres
+    const kpThresholdNum = Number(kpThreshold)
+    const lineThresholdNum = Number(lineThreshold)
+    
+    formData.append('kp_threshold', kpThresholdNum.toString())
+    formData.append('line_threshold', lineThresholdNum.toString())
+
+    console.log('🔥 Sending inference request with:', {
+      fileName: imageFile.name,
+      fileType: imageFile.type,
+      fileSize: imageFile.size,
+      kpThreshold,
+      lineThreshold
+    })
+
+    try {
+      const response = await fetch(`${this.baseURL}/inference/image`, {
+        method: 'POST',
+        body: formData
+      })
+
+      if (!response.ok) {
+        let errorMessage = `HTTP error! status: ${response.status}`
+        
+        // Essayer de récupérer le message d'erreur détaillé du serveur
+        try {
+          const errorData = await response.json()
+          console.error('🔥 Detailed API error:', errorData)
+          
+          if (errorData.detail) {
+            // Gestion spéciale pour les erreurs Pydantic
+            if (typeof errorData.detail === 'string') {
+              errorMessage = errorData.detail
+            } else if (Array.isArray(errorData.detail)) {
+              // Erreurs de validation Pydantic
+              errorMessage = errorData.detail.map(err => {
+                if (err.msg && err.loc) {
+                  return `${err.loc.join('.')}: ${err.msg}`
+                }
+                return err.msg || 'Erreur de validation'
+              }).join(', ')
+            }
+          } else if (errorData.message) {
+            errorMessage = errorData.message
+          }
+        } catch (parseError) {
+          console.error('🔥 Could not parse error response:', parseError)
+        }
+        
+        throw new Error(errorMessage)
+      }
+
+      return await response.json()
+    } catch (error) {
+      throw new Error(`Image inference failed: ${error.message}`)
+    }
+  }
+
+  async inferenceVideo(videoFile, options = {}) {
+    const formData = new FormData()
+    formData.append('video', videoFile)
+    
+    const { kpThreshold = 0.15, lineThreshold = 0.15, frameStep = 10 } = options
+    formData.append('kp_threshold', kpThreshold)
+    formData.append('line_threshold', lineThreshold)
+    formData.append('frame_step', frameStep)
+
+    try {
+      const response = await fetch(`${this.baseURL}/inference/video`, {
+        method: 'POST',
+        body: formData
+      })
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`)
+      }
+
+      return await response.json()
+    } catch (error) {
+      throw new Error(`Video inference failed: ${error.message}`)
+    }
+  }
+
+  async manualCalibration(file, calibrationData) {
+    const formData = new FormData()
+    formData.append('file', file)
+    formData.append('calibration_data', JSON.stringify(calibrationData))
+
+    try {
+      const response = await fetch(`${this.baseURL}/calibrate/manual`, {
+        method: 'POST',
+        body: formData
+      })
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`)
+      }
+
+      return await response.json()
+    } catch (error) {
+      throw new Error(`Manual calibration failed: ${error.message}`)
+    }
+  }
+}
+
+export default new FootballVisionAPI() 

src/stores/calibration.js

@@ -0,0 +1,107 @@
+import { defineStore } from 'pinia'
+
+export const useCalibrationStore = defineStore('calibration', {
+  state: () => ({
+    // Flux principal
+    mode: null, // 'auto' ou 'manual'
+    currentStep: 'mode-selection', // 'mode-selection', 'upload', 'video-type', 'processing', 'results'
+    
+    // Traitement
+    processing: false,
+    processingProgress: 0,
+    processingTask: '',
+    
+    // Résultats
+    results: null,
+    error: null,
+    
+    // Configuration manuelle
+    manualLines: {},
+    
+    // Configuration vidéo dynamique
+    videoProcessingParams: {
+      kpThreshold: 0.15,
+      lineThreshold: 0.15,
+      frameStep: 10
+    }
+  }),
+
+  getters: {
+    isAutoMode: (state) => state.mode === 'auto',
+    isManualMode: (state) => state.mode === 'manual',
+    hasResults: (state) => state.results !== null,
+    isProcessing: (state) => state.processing,
+    
+    // Étapes actives
+    isModeSelection: (state) => state.currentStep === 'mode-selection',
+    isUploadStep: (state) => state.currentStep === 'upload',
+    isVideoTypeStep: (state) => state.currentStep === 'video-type',
+    isProcessingStep: (state) => state.currentStep === 'processing',
+    isResultsStep: (state) => state.currentStep === 'results'
+  },
+
+  actions: {
+    // Navigation entre étapes
+    setMode(mode) {
+      this.mode = mode
+      this.currentStep = 'upload'
+    },
+
+    setCurrentStep(step) {
+      this.currentStep = step
+    },
+
+    // Traitement
+    setProcessing(processing, task = '') {
+      this.processing = processing
+      this.processingTask = task
+      if (processing) {
+        this.currentStep = 'processing'
+      }
+    },
+
+    updateProgress(progress, task = '') {
+      this.processingProgress = progress
+      if (task) this.processingTask = task
+    },
+
+    setResults(results) {
+      this.results = results
+      this.processing = false
+      this.error = null
+      this.currentStep = 'results'
+    },
+
+    setError(error) {
+      this.error = error
+      this.processing = false
+    },
+
+    // Configuration
+    setVideoParams(params) {
+      this.videoProcessingParams = { ...this.videoProcessingParams, ...params }
+    },
+
+    setManualLines(lines) {
+      this.manualLines = lines
+    },
+
+    // Réinitialisation
+    reset() {
+      this.mode = null
+      this.currentStep = 'mode-selection'
+      this.processing = false
+      this.processingProgress = 0
+      this.processingTask = ''
+      this.results = null
+      this.error = null
+      this.manualLines = {}
+    },
+
+    // Passer en mode manuel depuis les résultats
+    switchToManual() {
+      this.mode = 'manual'
+      // On garde les autres données pour permettre le retour
+    }
+  }
+}) 

src/stores/upload.js

@@ -0,0 +1,159 @@
+import { defineStore } from 'pinia'
+
+export const useUploadStore = defineStore('upload', {
+  state: () => ({
+    selectedFile: null,
+    fileType: null, // 'image' ou 'video'
+    filePreview: null,
+    uploadStatus: 'idle', // 'idle', 'uploading', 'success', 'error'
+    error: null,
+    
+    // Spécifique aux vidéos
+    videoType: null, // 'static' ou 'dynamic'
+    extractedFrame: null // Pour les vidéos statiques
+  }),
+
+  getters: {
+    isFileSelected: (state) => state.selectedFile !== null,
+    isImage: (state) => state.fileType === 'image',
+    isVideo: (state) => state.fileType === 'video',
+    isUploading: (state) => state.uploadStatus === 'uploading',
+    
+    // Nouveaux getters pour les vidéos
+    isStaticVideo: (state) => state.fileType === 'video' && state.videoType === 'static',
+    isDynamicVideo: (state) => state.fileType === 'video' && state.videoType === 'dynamic',
+    shouldProcessDirectly: (state) => state.fileType === 'image' || state.isStaticVideo,
+    needsParameters: (state) => state.isDynamicVideo
+  },
+
+  actions: {
+    setFile(file) {
+      this.selectedFile = file
+      this.fileType = file.type.startsWith('image/') ? 'image' : 'video'
+      this.createPreview(file)
+      this.uploadStatus = 'idle'
+      this.error = null
+      
+      // Reset video-specific data
+      this.videoType = null
+      this.extractedFrame = null
+    },
+
+    async setVideoType(type) {
+      this.videoType = type
+      if (type === 'static') {
+        console.log('🔥 Starting frame extraction for static video...')
+        await this.extractFrameFromVideo()
+        console.log('🔥 Frame extraction completed:', {
+          hasExtractedFrame: !!this.extractedFrame,
+          extractedFrameType: this.extractedFrame?.type,
+          extractedFrameName: this.extractedFrame?.name
+        })
+      }
+    },
+
+    createPreview(file) {
+      if (file.type.startsWith('image/')) {
+        this.filePreview = URL.createObjectURL(file)
+      } else {
+        this.filePreview = URL.createObjectURL(file)
+      }
+    },
+
+    async extractFrameFromVideo() {
+      if (!this.selectedFile || !this.isVideo) {
+        console.error('🔥 Cannot extract frame: no file or not a video')
+        return null
+      }
+      
+      try {
+        const video = document.createElement('video')
+        video.src = URL.createObjectURL(this.selectedFile)
+        
+        return new Promise((resolve, reject) => {
+          video.addEventListener('loadedmetadata', () => {
+            console.log('🔥 Video metadata loaded, seeking to frame 0')
+            video.currentTime = 0 // Première image
+          })
+          
+          video.addEventListener('seeked', () => {
+            try {
+              console.log('🔥 Video seeked, drawing to canvas')
+              const canvas = document.createElement('canvas')
+              canvas.width = video.videoWidth
+              canvas.height = video.videoHeight
+              
+              if (video.videoWidth === 0 || video.videoHeight === 0) {
+                throw new Error('Video dimensions are 0')
+              }
+              
+              const ctx = canvas.getContext('2d')
+              ctx.drawImage(video, 0, 0)
+              
+              canvas.toBlob((blob) => {
+                if (!blob) {
+                  reject(new Error('Failed to create blob from canvas'))
+                  return
+                }
+                
+                // Créer un File avec un nom au lieu d'un Blob simple
+                const file = new File([blob], 'extracted_frame.jpg', { type: 'image/jpeg' })
+                this.extractedFrame = file
+                console.log('🔥 Frame extracted successfully:', {
+                  name: file.name,
+                  type: file.type,
+                  size: file.size
+                })
+                URL.revokeObjectURL(video.src)
+                resolve(file)
+              }, 'image/jpeg', 0.9)
+            } catch (err) {
+              console.error('🔥 Error during canvas operations:', err)
+              URL.revokeObjectURL(video.src)
+              reject(err)
+            }
+          })
+          
+          video.addEventListener('error', (err) => {
+            console.error('🔥 Video loading error:', err)
+            URL.revokeObjectURL(video.src)
+            reject(err)
+          })
+          
+          // Timeout de sécurité
+          setTimeout(() => {
+            console.error('🔥 Frame extraction timeout')
+            URL.revokeObjectURL(video.src)
+            reject(new Error('Frame extraction timeout'))
+          }, 10000)
+        })
+      } catch (error) {
+        console.error('🔥 Erreur extraction frame:', error)
+        this.setError('Impossible d\'extraire une image de la vidéo: ' + error.message)
+        return null
+      }
+    },
+
+    clearFile() {
+      if (this.filePreview) {
+        URL.revokeObjectURL(this.filePreview)
+      }
+      this.selectedFile = null
+      this.fileType = null
+      this.filePreview = null
+      this.uploadStatus = 'idle'
+      this.error = null
+      this.videoType = null
+      this.extractedFrame = null
+    },
+
+    setUploadStatus(status) {
+      this.uploadStatus = status
+    },
+
+    setError(error) {
+      this.error = error
+      this.uploadStatus = 'error'
+    }
+  }
+}) 

src/views/HomeView.vue

@@ -0,0 +1,1837 @@
+<script setup>
+import { ref, computed, nextTick, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { useCalibrationStore } from '../stores/calibration'
+import { useUploadStore } from '../stores/upload'
+import api from '../services/api'
+import CalibrationArea from '@/components/CalibrationArea.vue'
+import FootballField from '@/components/FootballField.vue'
+
+const router = useRouter()
+const calibrationStore = useCalibrationStore()
+const uploadStore = useUploadStore()
+
+// Refs pour les sections
+const modeSection = ref(null)
+const uploadSection = ref(null)
+const videoTypeSection = ref(null)
+const parametersSection = ref(null)
+const processingSection = ref(null)
+const errorSection = ref(null)
+const resultsSection = ref(null)
+const manualSection = ref(null)
+
+// États locaux
+const dragActive = ref(false)
+
+// États pour la vue manuelle
+const thumbnail = ref(null)
+const calibrationPoints = ref({})
+const selectedFieldPoint = ref(null)
+const calibrationLines = ref({})
+const selectedFieldLine = ref(null)
+
+// Refs pour les composants manuels
+const calibrationArea = ref(null)
+const footballField = ref(null)
+
+// Computed
+const showUpload = computed(() => calibrationStore.mode !== null && !uploadStore.isFileSelected)
+const showVideoType = computed(() => uploadStore.isVideo && uploadStore.isFileSelected && uploadStore.videoType === null)
+const showParameters = computed(() => uploadStore.needsParameters && !showManualCalibration.value)
+const showProcessing = computed(() => calibrationStore.isProcessingStep)
+const showResults = computed(() => calibrationStore.isResultsStep)
+const showError = computed(() => calibrationStore.error !== null && !showManualCalibration.value)
+
+// Computed pour afficher la vue manuelle
+const showManualCalibration = computed(() => {
+  return calibrationStore.isManualMode && 
+         uploadStore.isFileSelected && 
+         (uploadStore.isImage || (uploadStore.isVideo && uploadStore.videoType === 'static'))
+})
+
+// Watchers pour le scroll automatique
+watch(() => calibrationStore.mode, async (newMode) => {
+  if (newMode) {
+    await nextTick()
+    scrollToSection(uploadSection.value)
+  }
+})
+
+watch(() => uploadStore.isVideo, async (isVideo) => {
+  if (isVideo && uploadStore.isFileSelected) {
+    await nextTick()
+    scrollToSection(videoTypeSection.value)
+  }
+})
+
+watch(() => uploadStore.videoType, async (videoType) => {
+  if (calibrationStore.isManualMode) {
+    if (videoType === 'static') {
+      // Vidéo statique en mode manuel : charger la vue manuelle intégrée
+      await loadThumbnail()
+      await nextTick()
+      scrollToSection(manualSection.value)
+    } else if (videoType === 'dynamic') {
+      // Vidéo dynamique en mode manuel : afficher message d'avertissement
+      calibrationStore.setError("Le mode manuel pour les vidéos dynamiques n'est pas encore disponible. Cette fonctionnalité nécessite l'implémentation de nouvelles features. Veuillez utiliser le mode automatique ou sélectionner une vidéo statique.")
+      await nextTick()
+      scrollToSection(errorSection.value)
+    }
+  } else if (videoType === 'dynamic') {
+    await nextTick()
+    scrollToSection(parametersSection.value)
+  }
+  // Suppression du lancement automatique - sera géré par le watcher extractedFrame
+})
+
+// Watcher spécifique pour l'extraction de frame terminée
+watch(() => uploadStore.extractedFrame, async (extractedFrame) => {
+  // Lancement automatique quand la frame est extraite en mode auto + vidéo statique
+  if (extractedFrame && 
+      calibrationStore.isAutoMode && 
+      uploadStore.isStaticVideo) {
+    console.log('🔥 Frame extracted, starting automatic processing...')
+    startProcessing()
+  }
+})
+
+watch(() => calibrationStore.isProcessingStep, async (isProcessing) => {
+  if (isProcessing) {
+    await nextTick()
+    scrollToSection(processingSection.value)
+  }
+})
+
+watch(() => calibrationStore.isResultsStep, async (isResults) => {
+  if (isResults) {
+    await nextTick()
+    scrollToSection(resultsSection.value)
+  }
+})
+
+// Watcher spécial pour les résultats en mode manuel
+watch(() => calibrationStore.results, async (results) => {
+  if (results && calibrationStore.isManualMode) {
+    await nextTick()
+    scrollToSection(resultsSection.value)
+  }
+})
+
+watch(() => calibrationStore.error, async (error) => {
+  if (error) {
+    await nextTick()
+    scrollToSection(errorSection.value)
+  }
+})
+
+// Méthodes
+const scrollToSection = (element) => {
+  if (element) {
+    element.scrollIntoView({ behavior: 'smooth', block: 'start' })
+  }
+}
+
+const selectMode = (mode) => {
+  calibrationStore.setMode(mode)
+}
+
+const resetToStart = () => {
+  // Réinitialiser tous les stores
+  calibrationStore.reset()
+  uploadStore.clearFile()
+  
+  // Scroll vers le haut
+  scrollToSection(modeSection.value)
+}
+
+const handleFileSelect = async (event) => {
+  const file = event.target.files[0]
+  if (file) {
+    uploadStore.setFile(file)
+    
+    if (calibrationStore.isManualMode) {
+      if (uploadStore.isImage) {
+        // En mode manuel avec image, charger la vue manuelle intégrée
+        await loadThumbnail()
+        await nextTick()
+        scrollToSection(manualSection.value)
+      } else if (uploadStore.isVideo) {
+        // En mode manuel avec vidéo, aller au choix statique/dynamique
+        await nextTick()
+        scrollToSection(videoTypeSection.value)
+      }
+    } else if (calibrationStore.isAutoMode && uploadStore.isImage) {
+      // En mode auto, lancement automatique pour les images
+      startProcessing()
+    }
+    // Pour les vidéos en mode auto, on laisse le flow normal (choix statique/dynamique)
+  }
+}
+
+const handleDrop = async (event) => {
+  event.preventDefault()
+  dragActive.value = false
+  
+  const files = event.dataTransfer.files
+  if (files.length > 0) {
+    uploadStore.setFile(files[0])
+    
+    if (calibrationStore.isManualMode) {
+      if (uploadStore.isImage) {
+        // En mode manuel avec image, charger la vue manuelle intégrée
+        await loadThumbnail()
+        await nextTick()
+        scrollToSection(manualSection.value)
+      } else if (uploadStore.isVideo) {
+        // En mode manuel avec vidéo, aller au choix statique/dynamique
+        await nextTick()
+        scrollToSection(videoTypeSection.value)
+      }
+    } else if (calibrationStore.isAutoMode && uploadStore.isImage) {
+      // En mode auto, lancement automatique pour les images
+      startProcessing()
+    }
+    // Pour les vidéos en mode auto, on laisse le flow normal (choix statique/dynamique)
+  }
+}
+
+const handleDragOver = (event) => {
+  event.preventDefault()
+  dragActive.value = true
+}
+
+const handleDragLeave = () => {
+  dragActive.value = false
+}
+
+const selectVideoType = async (type) => {
+  await uploadStore.setVideoType(type)
+}
+
+const updateParameter = (param, value) => {
+  calibrationStore.setVideoParams({ [param]: value })
+}
+
+const startProcessing = async () => {
+  calibrationStore.setProcessing(true, 'Initialisation...')
+  
+  try {
+    let result
+    
+    if (uploadStore.isImage || uploadStore.isStaticVideo) {
+      // Traitement d'image ou de frame extraite
+      const fileToProcess = uploadStore.isImage ? 
+        uploadStore.selectedFile : 
+        uploadStore.extractedFrame
+      
+      // Vérification que le fichier existe
+      if (!fileToProcess) {
+        const errorMsg = uploadStore.isImage ? 
+          'Aucun fichier image sélectionné' : 
+          'Frame non extraite de la vidéo. Essayez de recharger la vidéo.'
+        throw new Error(errorMsg)
+      }
+      
+      // Logs détaillés pour debug
+      console.log('🔥 File to process details:', {
+        name: fileToProcess?.name,
+        type: fileToProcess?.type,
+        size: fileToProcess?.size,
+        constructor: fileToProcess?.constructor?.name
+      })
+      
+      console.log('🔥 Processing params:', {
+        kpThreshold: calibrationStore.videoProcessingParams.kpThreshold,
+        lineThreshold: calibrationStore.videoProcessingParams.lineThreshold,
+        typeOfKp: typeof calibrationStore.videoProcessingParams.kpThreshold,
+        typeOfLine: typeof calibrationStore.videoProcessingParams.lineThreshold
+      })
+      
+      // Test de diagnostic si c'est une vidéo statique
+      if (uploadStore.isStaticVideo && uploadStore.extractedFrame) {
+        console.log('🔥 Testing extracted frame:', {
+          isFile: fileToProcess instanceof File,
+          isBlob: fileToProcess instanceof Blob,
+          hasName: !!fileToProcess.name,
+          hasType: !!fileToProcess.type
+        })
+      }
+      
+      result = await processWithProgress(() => 
+        api.inferenceImage(fileToProcess, {
+          kpThreshold: calibrationStore.videoProcessingParams.kpThreshold,
+          lineThreshold: calibrationStore.videoProcessingParams.lineThreshold
+        })
+      )
+    } else if (uploadStore.isDynamicVideo) {
+      // Traitement de vidéo dynamique
+      result = await processWithProgress(() =>
+        api.inferenceVideo(uploadStore.selectedFile, calibrationStore.videoProcessingParams)
+      )
+    }
+    
+    // Console log de la réponse API
+    console.log('🔥 Réponse API reçue:', result)
+    
+    if (result.status === 'success') {
+      calibrationStore.setResults(result)
+    } else if (result.status === 'failed') {
+      throw new Error(result.message || "Échec de l'extraction des paramètres")
+    } else {
+      throw new Error(result.error || 'Erreur de traitement')
+    }
+    
+  } catch (error) {
+    console.error('❌ Erreur lors du traitement:', error)
+    calibrationStore.setError(error.message)
+  }
+}
+
+const processWithProgress = async (processFunction) => {
+  // Activer le mode processing
+  calibrationStore.setProcessing(true, 'Initialisation...')
+  
+  const tasks = [
+    'Chargement du fichier...',
+    'Détection des lignes du terrain...',
+    'Analyse des points clés...',
+    'Calcul des paramètres de caméra...',
+    'Finalisation...'
+  ]
+  
+  // Simulation du progrès
+  for (let i = 0; i < tasks.length; i++) {
+    calibrationStore.updateProgress((i / tasks.length) * 100, tasks[i])
+    await new Promise(resolve => setTimeout(resolve, 500))
+  }
+  
+  // Traitement réel
+  const result = await processFunction()
+  calibrationStore.updateProgress(100, 'Terminé !')
+  
+  return result
+}
+
+const goToManual = async () => {
+  calibrationStore.switchToManual()
+  await loadThumbnail()
+  await nextTick()
+  scrollToSection(manualSection.value)
+}
+
+const backToCalibration = async () => {
+  // Réinitialiser les erreurs et résultats
+  calibrationStore.setError(null)
+  calibrationStore.setResults(null)
+  calibrationStore.setProcessing(false)
+  
+  // Retourner à la section de calibration manuelle
+  await nextTick()
+  scrollToSection(manualSection.value)
+}
+
+const restart = () => {
+  calibrationStore.reset()
+  uploadStore.clearFile()
+  scrollToSection(modeSection.value)
+}
+
+const exportResults = () => {
+  const data = calibrationStore.results
+  const filename = 'football_vision_results.json'
+  
+  const content = JSON.stringify(data, null, 2)
+  
+  const blob = new Blob([content], { type: 'application/json' })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = filename
+  a.click()
+  URL.revokeObjectURL(url)
+}
+
+// Méthodes pour la vue manuelle
+const loadThumbnail = async () => {
+  try {
+    thumbnail.value = null
+    
+    if (uploadStore.isImage) {
+      // Pour les images, utiliser directement la preview
+      thumbnail.value = uploadStore.filePreview
+    } else if (uploadStore.isStaticVideo && uploadStore.extractedFrame) {
+      // Pour les vidéos statiques, utiliser la frame déjà extraite
+      console.log('Using extracted frame from static video:', uploadStore.selectedFile.name)
+      thumbnail.value = URL.createObjectURL(uploadStore.extractedFrame)
+    } else if (uploadStore.isVideo) {
+      // Pour les autres vidéos, extraire la première frame
+      console.log('Extracting first frame from video:', uploadStore.selectedFile.name)
+      
+      // Créer une URL pour le fichier vidéo
+      const videoUrl = URL.createObjectURL(uploadStore.selectedFile)
+      
+      // Extraire la première frame avec un canvas
+      const video = document.createElement('video')
+      video.src = videoUrl
+      video.muted = true // Important pour éviter les problèmes d'autoplay
+      
+      await new Promise((resolve, reject) => {
+        video.addEventListener('loadedmetadata', () => {
+          video.currentTime = 0 // Aller à la première frame
+        })
+        
+        video.addEventListener('seeked', () => {
+          try {
+            const canvas = document.createElement('canvas')
+            canvas.width = video.videoWidth
+            canvas.height = video.videoHeight
+            
+            const ctx = canvas.getContext('2d')
+            ctx.drawImage(video, 0, 0)
+            
+            thumbnail.value = canvas.toDataURL('image/jpeg', 0.9)
+            URL.revokeObjectURL(videoUrl)
+            resolve()
+          } catch (err) {
+            URL.revokeObjectURL(videoUrl)
+            reject(err)
+          }
+        })
+        
+        video.addEventListener('error', (err) => {
+          URL.revokeObjectURL(videoUrl)
+          reject(err)
+        })
+      })
+    }
+  } catch (error) {
+    console.error('Erreur lors du chargement du thumbnail:', error)
+    thumbnail.value = null
+  }
+}
+
+const handleFieldPointSelected = (pointData) => {
+  selectedFieldLine.value = null
+  selectedFieldPoint.value = pointData
+}
+
+const handleFieldLineSelected = (lineData) => {
+  selectedFieldPoint.value = null
+  selectedFieldLine.value = lineData
+}
+
+const updateThumbnail = (newThumbnail) => {
+  thumbnail.value = newThumbnail
+}
+
+const updateCalibrationPoints = (newPoints) => {
+  calibrationPoints.value = { ...newPoints }
+}
+
+const updateCalibrationLines = (newLines) => {
+  calibrationLines.value = { ...newLines }
+}
+
+const updateSelectedFieldPoint = (newPoint) => {
+  selectedFieldPoint.value = newPoint
+}
+
+const updateSelectedFieldLine = (newLine) => {
+  selectedFieldLine.value = newLine
+  if (footballField.value) {
+    footballField.value.selectedLine = newLine ? newLine.id : null
+  }
+}
+
+const clearCalibration = () => {
+  calibrationPoints.value = {}
+  calibrationLines.value = {}
+  selectedFieldPoint.value = null
+  selectedFieldLine.value = null
+}
+
+const processCalibration = async () => {
+  if (!uploadStore.selectedFile || Object.keys(calibrationLines.value).length === 0) {
+    alert('Veuillez créer au moins une ligne de calibration')
+    return
+  }
+
+  // Scroll immédiat vers la section de processing
+  scrollToSection(processingSection.value)
+  await nextTick()
+
+  try {
+    // Utiliser le même système de progress que la version automatique
+    const result = await processWithProgress(async () => {
+      if (!calibrationArea.value) {
+        throw new Error('CalibrationArea component is not mounted.')
+      }
+
+      const imageContainer = document.querySelector('.video-frame')
+      const imageSize = calibrationArea.value.imageSize
+      if (!imageSize) {
+        throw new Error('Image size is not available.')
+      }
+      const containerWidth = imageContainer.clientWidth
+      const containerHeight = imageContainer.clientHeight
+
+      // Préparer les données des lignes pour l'API /calibrate
+      const linesData = {}
+      
+      // Traitement des lignes - conversion des coordonnées container vers image
+      for (const [lineName, line] of Object.entries(calibrationLines.value)) {
+        linesData[lineName] = line.points.map(point => {
+          return {
+            x: point.x / containerWidth * imageSize.width,
+            y: point.y / containerHeight * imageSize.height
+          }
+        })
+      }
+
+      console.log('🔥 Données de lignes pour calibration:', linesData)
+      
+      // Déterminer quel fichier envoyer à l'API
+      let fileToSend
+      if (uploadStore.isImage) {
+        // Pour les images, utiliser le fichier original
+        fileToSend = uploadStore.selectedFile
+      } else if (uploadStore.isStaticVideo && uploadStore.extractedFrame) {
+        // Pour les vidéos statiques, utiliser la frame extraite
+        fileToSend = uploadStore.extractedFrame
+      } else {
+        throw new Error('Aucune image disponible pour la calibration')
+      }
+      
+      console.log('🔥 Fichier envoyé pour calibration:', fileToSend.name || 'extracted_frame.jpg', 'Type:', fileToSend.type)
+      
+      // Appeler l'API /calibrate avec l'image et les lignes
+      return await api.calibrateCamera(fileToSend, linesData)
+    })
+    
+    // Console log de la réponse API
+    console.log('🔥 Réponse API calibration reçue:', result)
+    
+    // Toujours afficher les résultats, même en cas d'erreur
+    calibrationStore.setResults(result)
+    
+  } catch (error) {
+    console.error('❌ Erreur lors du traitement manuel:', error)
+    // En cas d'erreur de réseau ou autre, créer un objet de résultat d'erreur
+    calibrationStore.setResults({
+      status: 'failed',
+      message: error.message,
+      error: error.message
+    })
+  }
+}
+</script>
+
+<template>
+  <div class="home-container">
+    <!-- Bouton retour subtil (visible si on a déjà fait des actions) -->
+    <button 
+      v-if="showUpload || showResults || showError" 
+      @click="resetToStart" 
+      class="btn-back-home"
+      title="Recommencer"
+    >
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
+        <path d="M21 3v5h-5"/>
+        <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
+        <path d="M3 21v-5h5"/>
+      </svg>
+    </button>
+
+    <!-- Section 1: Choix du mode -->
+    <section ref="modeSection" class="section mode-section">
+      <div class="hero">
+        <h1>Football Vision</h1>
+        <p class="hero-subtitle">Analysez automatiquement les paramètres de caméra de vos vidéos de football</p>
+      </div>
+
+      <div class="mode-selection">        
+        <div class="mode-cards">
+          <div 
+            class="mode-card auto" 
+            :class="{ selected: calibrationStore.isAutoMode }"
+            @click="selectMode('auto')"
+          >
+            <h3>Mode Automatique</h3>
+            <p>Détection automatique des lignes du terrain</p>
+            <ul>
+              <li>Rapide et simple</li>
+              <li>Précision élevée</li>
+              <li>Recommandé</li>
+            </ul>
+          </div>
+
+          <div 
+            class="mode-card manual" 
+            :class="{ selected: calibrationStore.isManualMode }"
+            @click="selectMode('manual')"
+          >
+            <h3>Mode Manuel</h3>
+            <p>Contrôle total sur la définition des lignes</p>
+            <ul>
+              <li>Contrôle précis</li>
+              <li>Personnalisable</li>
+              <li>Cas spéciaux</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 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>
+
+        <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"
+            >
+            </video>
+          </div>
+
+          <button @click="uploadStore.clearFile()" class="btn-secondary">
+            Changer de fichier
+          </button>
+        </div>
+      </div>
+    </section>
+
+    <!-- Section 3: Type de vidéo (statique/dynamique) -->
+    <section v-if="showVideoType" ref="videoTypeSection" class="section video-type-section">
+      <h2>Type de vidéo</h2>
+      
+      <div class="video-type-cards">
+        <div 
+          class="type-card static" 
+          :class="{ selected: uploadStore.videoType === 'static' }"
+          @click="selectVideoType('static')"
+        >
+          <h3>Vidéo Statique</h3>
+          <p>Caméra fixe, extraction de la première image</p>
+          <ul>
+            <li>Traitement rapide</li>
+            <li>Analyse comme une image</li>
+            <li>Recommandé pour caméra fixe</li>
+          </ul>
+        </div>
+
+        <div 
+          class="type-card dynamic" 
+          :class="{ selected: uploadStore.videoType === 'dynamic' }"
+          @click="selectVideoType('dynamic')"
+        >
+          <h3>Vidéo Dynamique</h3>
+          <p>Caméra en mouvement, analyse de plusieurs frames</p>
+          <ul>
+            <li>Analyse complète</li>
+            <li>Traitement avancé</li>
+            <li>Plus de données collectées</li>
+          </ul>
+        </div>
+      </div>
+    </section>
+
+    <!-- Section 4: Paramètres pour vidéo dynamique -->
+    <section v-if="showParameters" ref="parametersSection" class="section parameters-section">
+      <h2>Paramètres de traitement</h2>
+      
+      <div class="parameters-form">
+        <div class="param-group">
+          <label>Seuil de détection des points clés</label>
+          <input 
+            type="range" 
+            min="0.1" 
+            max="0.5" 
+            step="0.05"
+            :value="calibrationStore.videoProcessingParams.kpThreshold"
+            @input="updateParameter('kpThreshold', parseFloat($event.target.value))"
+          >
+          <span class="param-value">{{ calibrationStore.videoProcessingParams.kpThreshold }}</span>
+        </div>
+
+        <div class="param-group">
+          <label>Seuil de détection des lignes</label>
+          <input 
+            type="range" 
+            min="0.1" 
+            max="0.5" 
+            step="0.05"
+            :value="calibrationStore.videoProcessingParams.lineThreshold"
+            @input="updateParameter('lineThreshold', parseFloat($event.target.value))"
+          >
+          <span class="param-value">{{ calibrationStore.videoProcessingParams.lineThreshold }}</span>
+        </div>
+
+        <div class="param-group">
+          <label>Pas entre les frames (traiter 1 frame sur X)</label>
+          <input 
+            type="range" 
+            min="1" 
+            max="300" 
+            step="1"
+            :value="calibrationStore.videoProcessingParams.frameStep"
+            @input="updateParameter('frameStep', parseInt($event.target.value))"
+          >
+          <span class="param-value">{{ calibrationStore.videoProcessingParams.frameStep }}</span>
+        </div>
+
+        <button @click="startProcessing" class="btn-primary launch-btn">
+          Lancer le traitement
+        </button>
+      </div>
+    </section>
+
+    <!-- Section 5: Vue manuelle intégrée -->
+    <section v-if="showManualCalibration" ref="manualSection" class="section manual-section">
+      <div class="manual-container">
+        <div class="manual-content">
+          <div class="calibration-container">
+            <CalibrationArea
+              ref="calibrationArea"
+              :thumbnail="thumbnail"
+              :calibrationPoints="calibrationPoints"
+              :calibrationLines="calibrationLines"
+              :selectedFieldPoint="selectedFieldPoint"
+              :selectedFieldLine="selectedFieldLine"
+              @update:thumbnail="updateThumbnail"
+              @update:calibrationPoints="updateCalibrationPoints"
+              @update:calibrationLines="updateCalibrationLines"
+              @update:selectedFieldPoint="updateSelectedFieldPoint"
+              @update:selectedFieldLine="updateSelectedFieldLine"
+              @clear-calibration="clearCalibration"
+              @process-calibration="processCalibration"
+            />
+          </div>
+          <div class="field-container">
+            <FootballField 
+              ref="footballField"
+              @point-selected="handleFieldPointSelected"
+              @line-selected="handleFieldLineSelected"
+              :positionedPoints="calibrationPoints"
+              :positionedLines="calibrationLines"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Section 6: Traitement en cours -->
+    <section v-if="showProcessing" ref="processingSection" class="section processing-section">
+      <h2>Traitement en cours</h2>
+      
+      <div class="processing-card">
+        <div class="processing-spinner"></div>
+        
+        <h3>{{ calibrationStore.processingTask }}</h3>
+        
+        <div class="progress-container">
+          <div class="progress-bar">
+            <div 
+              class="progress-fill"
+              :style="{ width: calibrationStore.processingProgress + '%' }"
+            ></div>
+          </div>
+          <span class="progress-text">{{ Math.round(calibrationStore.processingProgress) }}%</span>
+        </div>
+        
+        <div class="processing-info">
+          <div class="info-item">
+            <span class="label">Fichier:</span>
+            <span class="value">{{ uploadStore.selectedFile?.name }}</span>
+          </div>
+          <div class="info-item">
+            <span class="label">Mode:</span>
+            <span class="value">{{ calibrationStore.isAutoMode ? 'Automatique' : 'Manuel' }}</span>
+          </div>
+          <div class="info-item" v-if="uploadStore.isVideo">
+            <span class="label">Type:</span>
+            <span class="value">{{ uploadStore.videoType === 'static' ? 'Vidéo Statique' : 'Vidéo Dynamique' }}</span>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Section 7: Erreur -->
+    <section v-if="showError" ref="errorSection" class="section error-section">
+      <h2 v-if="!calibrationStore.isManualMode">Mode manuel recommandé</h2>
+      <h2 v-else>Échec de la calibration</h2>
+      
+      <div class="error-card">
+        <p class="error-message">{{ calibrationStore.error }}</p>
+        
+        <div v-if="calibrationStore.isManualMode" class="manual-error-actions">
+          <button @click="backToCalibration" class="btn-manual-primary">
+            Modifier la calibration
+          </button>
+          <button @click="restart" class="btn-restart-small">
+            Recommencer
+          </button>
+        </div>
+        
+        <div v-else class="auto-error-actions">
+          <button @click="goToManual" class="btn-manual-primary">
+            Passer en mode manuel
+          </button>
+          <button @click="restart" class="btn-restart-small">
+            Ou essayer une autre image
+          </button>
+        </div>
+      </div>
+    </section>
+
+    <!-- Section 8: Résultats -->
+    <section v-if="showResults" ref="resultsSection" class="section results-section">
+      <!-- Succès -->
+      <div v-if="calibrationStore.results?.status === 'success'" class="results-container">
+        <div class="result-status">
+          <div class="status-success">
+            <h2>Analyse réussie</h2>
+          </div>
+        </div>
+
+        <div class="result-message">
+          <p>{{ calibrationStore.results?.message || 'Paramètres de caméra extraits avec succès' }}</p>
+        </div>
+
+        <div class="result-actions">
+          <button @click="exportResults()" class="btn-primary">
+            Télécharger les résultats
+          </button>
+          
+          <button v-if="calibrationStore.isManualMode" @click="backToCalibration" class="btn-secondary">
+            Modifier la calibration
+          </button>
+          
+          <button @click="restart" class="btn-tertiary">
+            Nouvelle analyse
+          </button>
+        </div>
+
+        <details class="result-details">
+          <summary>Données complètes</summary>
+          <pre class="result-data">{{ JSON.stringify(calibrationStore.results, null, 2) }}</pre>
+        </details>
+      </div>
+
+      <!-- Échec en mode manuel -->
+      <div v-else-if="calibrationStore.isManualMode" class="error-card-simple">
+        <h2>Calibration échouée</h2>
+        
+        <p class="error-message">Les lignes définies ne permettent pas de calculer les paramètres de caméra.</p>
+        
+        <div class="error-actions">
+          <button 
+            @click="backToCalibration" 
+            class="btn-primary"
+            title="Modifiez vos lignes de calibration : ajoutez plus de points, utilisez des lignes variées (droites, cercles), répartissez-les sur l'image"
+          >
+            Ajuster la calibration
+          </button>
+          
+          <button 
+            @click="restart" 
+            class="btn-secondary"
+            title="Essayez avec une image de meilleure qualité ou un angle de vue différent"
+          >
+            Changer d'image
+          </button>
+        </div>
+      </div>
+
+      <!-- Échec en mode auto -->
+      <div v-else class="results-container">
+        <div class="result-status">
+          <div class="status-error">
+            <h2>Analyse échouée</h2>
+          </div>
+        </div>
+
+        <div class="result-message">
+          <p>L'analyse automatique n'a pas pu extraire les paramètres de caméra.</p>
+        </div>
+
+        <div class="result-actions">
+          <button @click="goToManual" class="btn-secondary">
+            Essayer en mode manuel
+          </button>
+          
+          <button @click="restart" class="btn-tertiary">
+            Nouvelle analyse
+          </button>
+        </div>
+
+        <details class="result-details">
+          <summary>Données complètes</summary>
+          <pre class="result-data">{{ JSON.stringify(calibrationStore.results, null, 2) }}</pre>
+        </details>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.btn-back-home {
+  position: fixed;
+  top: 20px;
+  left: 20px;
+  background: rgba(255, 255, 255, 0.1);
+  color: #888;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 8px;
+  padding: 10px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(10px);
+}
+
+.btn-back-home:hover {
+  background: rgba(255, 255, 255, 0.15);
+  color: var(--color-primary);
+  border-color: var(--color-primary);
+  transform: scale(1.05);
+}
+
+.btn-back-home svg {
+  transition: all 0.3s ease;
+}
+
+.home-container {
+  margin: 0 auto;
+  background: var(--color-secondary);
+  min-height: 100vh;
+}
+
+.section {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+/* Section Mode */
+.hero h1 {
+  font-size: 3rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+  color: white;
+  letter-spacing: -0.025em;
+  position: relative;
+}
+
+.hero h1::after {
+  content: '';
+  position: absolute;
+  bottom: -10px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 80px;
+  height: 4px;
+  background: var(--color-primary);
+  border-radius: 2px;
+}
+
+.hero-subtitle {
+  font-size: 1.1rem;
+  color: #b0b0b0;
+  margin-bottom: 4rem;
+  max-width: 600px;
+  line-height: 1.6;
+  font-weight: 500;
+}
+
+.mode-selection h2 {
+  font-size: 1.5rem;
+  margin-bottom: 3rem;
+  color: white;
+  font-weight: 600;
+}
+
+.mode-cards, .video-type-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 2rem;
+  width: 100%;
+  max-width: 800px;
+}
+
+.mode-card, .type-card {
+  background: var(--color-secondary-soft);
+  border-radius: 12px;
+  padding: 2rem;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border: 2px solid #333;
+  position: relative;
+  overflow: hidden;
+}
+
+.mode-card::before, .type-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: var(--color-primary);
+  transform: translateY(-4px);
+  transition: transform 0.3s ease;
+}
+
+.mode-card:hover::before, .type-card:hover::before {
+  transform: translateY(0);
+}
+
+.mode-card:hover, .type-card:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
+  border-color: var(--color-primary);
+  background: #2a2a2a;
+}
+
+.mode-card.selected, .type-card.selected {
+  border-color: var(--color-primary);
+  background: #2a2a2a;
+  transform: translateY(-4px);
+  box-shadow: 0 6px 25px rgba(255, 255, 255, 0.3);
+}
+
+.mode-card.selected::before, .type-card.selected::before {
+  transform: translateY(0);
+}
+
+.mode-card h3, .type-card h3 {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: white;
+  margin-bottom: 1rem;
+}
+
+.mode-card p, .type-card p {
+  color: #b0b0b0;
+  margin-bottom: 1.5rem;
+  line-height: 1.5;
+  font-weight: 500;
+}
+
+.mode-card ul, .type-card ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.mode-card li, .type-card li {
+  padding: 0.5rem 0;
+  color: #d0d0d0;
+  font-size: 0.9rem;
+  position: relative;
+  padding-left: 1.5rem;
+  font-weight: 500;
+}
+
+.mode-card li::before, .type-card li::before {
+  content: '●';
+  color: var(--color-primary);
+  font-weight: bold;
+  position: absolute;
+  left: 0;
+}
+
+/* Section Upload */
+.upload-section h2, .video-type-section h2, .parameters-section h2, .processing-section h2, .results-section h2 {
+  font-size: 1.5rem;
+  margin-bottom: 3rem;
+  color: white;
+  font-weight: 600;
+}
+
+.drop-zone {
+  border: 3px dashed #555;
+  border-radius: 12px;
+  padding: 3rem;
+  transition: all 0.3s ease;
+  background: var(--color-secondary-soft);
+  width: 100%;
+  max-width: 600px;
+  position: relative;
+}
+
+.drop-zone.active {
+  border-color: var(--color-primary);
+  background: #2a2a2a;
+  box-shadow: 0 4px 20px rgba(217, 255, 4, 0.2);
+}
+
+.drop-zone.has-file {
+  border-color: var(--color-primary);
+  border-style: solid;
+  background: #2a2a2a;
+}
+
+.upload-icon {
+  font-size: 3rem;
+  color: #888;
+  margin-bottom: 1rem;
+  font-weight: 300;
+}
+
+.drop-content h3 {
+  font-size: 1.25rem;
+  color: white;
+  margin-bottom: 1rem;
+  font-weight: 600;
+}
+
+.or-text {
+  color: #888;
+  margin: 1.5rem 0;
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+.file-input-label {
+  display: inline-block;
+  background: var(--color-primary);
+  color: var(--color-secondary);
+  padding: 0.875rem 2rem;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-weight: 700;
+  font-size: 0.9rem;
+  position: relative;
+  overflow: hidden;
+}
+
+.file-input-label::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
+  transition: left 0.5s ease;
+}
+
+.file-input-label:hover::before {
+  left: 100%;
+}
+
+.file-input-label:hover {
+  background: white;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.4);
+}
+
+.format-info {
+  color: #888;
+  font-size: 0.85rem;
+  margin-top: 1.5rem;
+  font-weight: 500;
+}
+
+.file-preview {
+  text-align: center;
+}
+
+.file-info h3 {
+  color: var(--color-primary);
+  margin-bottom: 1.5rem;
+  font-weight: 600;
+}
+
+.file-name {
+  font-weight: 700;
+  color: white;
+  margin-bottom: 1rem;
+}
+
+.file-details {
+  color: #b0b0b0;
+  font-size: 0.9rem;
+  margin-bottom: 2rem;
+  font-weight: 500;
+}
+
+.file-details span {
+  margin-right: 1rem;
+}
+
+.preview-media {
+  max-width: 100%;
+  max-height: 300px;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
+  margin: 2rem 0;
+  /* border: 2px solid var(--color-primary); */
+}
+
+/* Section Paramètres */
+.parameters-form {
+  background: var(--color-secondary-soft);
+  padding: 2.5rem;
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
+  width: 100%;
+  max-width: 500px;
+  text-align: left;
+  border: 1px solid #333;
+}
+
+.param-group {
+  margin-bottom: 2rem;
+}
+
+.param-group label {
+  display: block;
+  margin-bottom: 0.75rem;
+  font-weight: 600;
+  color: white;
+  font-size: 0.9rem;
+}
+
+.param-group input[type="range"] {
+  width: 100%;
+  height: 6px;
+  background: #333;
+  border-radius: 3px;
+  outline: none;
+  margin: 0.5rem 0;
+  -webkit-appearance: none;
+}
+
+.param-group input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--color-primary);
+  cursor: pointer;
+  border: 3px solid var(--color-secondary);
+  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
+}
+
+.param-group input[type="range"]::-moz-range-thumb {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--color-primary);
+  cursor: pointer;
+  border: 3px solid var(--color-secondary);
+  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
+}
+
+.param-value {
+  font-weight: 700;
+  float: right;
+  background: var(--color-primary);
+  color: var(--color-secondary);
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.8rem;
+}
+
+.launch-btn {
+  width: 100%;
+  margin-top: 1rem;
+  font-size: 1rem;
+  padding: 1rem;
+  font-weight: 700;
+}
+
+/* Section Erreur */
+.error-section h2 {
+  font-size: 1.5rem;
+  margin-bottom: 3rem;
+  color: white;
+  font-weight: 600;
+}
+
+.error-card {
+  background: var(--color-secondary-soft);
+  border-radius: 12px;
+  padding: 3rem;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
+  width: 100%;
+  max-width: 400px;
+  border: 1px solid #333;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.error-message {
+  color: #b0b0b0;
+  font-size: 0.95rem;
+  font-weight: 500;
+  margin: 0;
+}
+
+.btn-manual-primary {
+  background: var(--color-primary);
+  color: var(--color-secondary);
+  border: none;
+  padding: 1rem 2rem;
+  border-radius: 8px;
+  font-weight: 700;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.btn-manual-primary:hover {
+  background: var(--color-primary-soft);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 15px rgba(217, 255, 4, 0.4);
+}
+
+.btn-restart-small {
+  background: transparent;
+  color: #888;
+  border: none;
+  padding: 0.5rem;
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: color 0.3s ease;
+  text-decoration: underline;
+}
+
+.btn-restart-small:hover {
+  color: white;
+}
+
+/* Section Traitement */
+.processing-card {
+  background: var(--color-secondary-soft);
+  border-radius: 12px;
+  padding: 3rem;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
+  width: 100%;
+  max-width: 500px;
+  border: 1px solid #333;
+}
+
+.processing-spinner {
+  width: 48px;
+  height: 48px;
+  border: 4px solid #333;
+  border-top: 4px solid var(--color-primary);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin: 0 auto 2rem;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.processing-card h3 {
+  font-size: 1.1rem;
+  color: white;
+  margin-bottom: 2rem;
+  font-weight: 600;
+}
+
+.progress-container {
+  margin: 2rem 0;
+}
+
+.progress-bar {
+  width: 100%;
+  height: 10px;
+  background: #333;
+  border-radius: 5px;
+  overflow: hidden;
+  margin-bottom: 0.75rem;
+}
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-soft));
+  transition: width 0.3s ease;
+  border-radius: 5px;
+}
+
+.progress-text {
+  font-weight: 700;
+  color: white;
+  font-size: 0.9rem;
+}
+
+.processing-info {
+  margin-top: 2rem;
+  text-align: left;
+}
+
+.info-item {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+  font-size: 0.9rem;
+}
+
+.info-item .label {
+  color: #b0b0b0;
+  font-weight: 500;
+}
+
+.info-item .value {
+  color: white;
+  font-weight: 600;
+}
+
+/* Section Résultats */
+.results-summary {
+  background: var(--color-secondary-soft);
+  border-radius: 12px;
+  margin-bottom: 3rem;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
+  width: 100%;
+  max-width: 600px;
+  border: 1px solid #333;
+}
+
+/* Section Résultats */
+.results-container {
+  max-width: 600px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.result-status h2 {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
+.status-success h2 {
+  color: var(--color-primary);
+}
+
+.status-error h2 {
+  color: #dc3545;
+}
+
+.result-message {
+  background: var(--color-secondary-soft);
+  border-radius: 8px;
+  padding: 1.5rem;
+  border-left: 4px solid var(--color-primary);
+}
+
+.result-message p {
+  margin: 0;
+  color: #e0e0e0;
+  line-height: 1.5;
+  font-size: 0.95rem;
+}
+
+.result-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.btn-primary, .btn-secondary, .btn-tertiary {
+  padding: 0.875rem 1.5rem;
+  border-radius: 8px;
+  border: none;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 0.9rem;
+  transition: all 0.3s ease;
+}
+
+.btn-primary {
+  background: var(--color-primary);
+  color: var(--color-secondary);
+}
+
+.btn-primary:hover {
+  background: var(--color-primary-soft);
+  transform: translateY(-1px);
+}
+
+.btn-secondary {
+  background: #555;
+  color: white;
+  border: 1px solid #666;
+}
+
+.btn-secondary:hover {
+  background: #666;
+  transform: translateY(-1px);
+}
+
+.btn-tertiary {
+  background: transparent;
+  color: #888;
+  border: 1px solid #555;
+}
+
+.btn-tertiary:hover {
+  color: white;
+  border-color: #777;
+  background: #333;
+}
+
+.result-details {
+  margin-top: 1rem;
+}
+
+.result-details summary {
+  color: #888;
+  font-size: 0.9rem;
+  cursor: pointer;
+  padding: 0.5rem 0;
+  transition: color 0.3s ease;
+}
+
+.result-details summary:hover {
+  color: white;
+}
+
+.result-details[open] summary {
+  color: var(--color-primary);
+  margin-bottom: 1rem;
+}
+
+.result-data {
+  background: #1a1a1a;
+  color: #e0e0e0;
+  padding: 1rem;
+  border-radius: 6px;
+  font-family: 'Courier New', monospace;
+  font-size: 0.8rem;
+  line-height: 1.4;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  border: 1px solid #333;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.confidence-score {
+  font-size: 1rem;
+  color: white;
+  font-weight: 600;
+}
+
+    .quick-info {
+    margin-top: 2rem;
+    padding-top: 1.5rem;
+    border-top: 1px solid #333;
+  }
+
+  .quick-info .info-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.75rem;
+    font-size: 0.9rem;
+  }
+
+  .quick-info .info-item span:first-child {
+    color: #b0b0b0;
+    font-weight: 500;
+  }
+
+  .quick-info .info-item span:last-child {
+    color: white;
+    font-weight: 600;
+    font-family: monospace;
+  }
+
+
+
+/* Error Card simple pour mode manuel */
+.error-card-simple {
+  max-width: 500px;
+  width: 100%;
+  text-align: center;
+}
+
+.error-card-simple h2 {
+  color: #dc3545;
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+}
+
+.error-card-simple .error-message {
+  color: #b0b0b0;
+  font-size: 1rem;
+  margin-bottom: 2rem;
+  line-height: 1.5;
+}
+
+.error-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  max-width: 300px;
+  margin: 0 auto;
+}
+
+.manual-error-actions, .auto-error-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+  max-width: 300px;
+  margin: 0 auto;
+}
+
+.btn-manual-primary {
+  background: var(--color-primary);
+  color: var(--color-secondary);
+  border: none;
+  padding: 1rem 2rem;
+  border-radius: 8px;
+  font-weight: 600;
+  font-size: 0.95rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.btn-manual-primary:hover {
+  background: var(--color-primary-soft);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 15px rgba(217, 255, 4, 0.4);
+}
+
+.btn-restart-small {
+  background: transparent;
+  color: #888;
+  border: 1px solid #555;
+  padding: 0.75rem 1.5rem;
+  border-radius: 8px;
+  font-weight: 500;
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.btn-restart-small:hover {
+  color: white;
+  border-color: #777;
+  background: #333;
+}
+
+
+
+/* Boutons */
+.btn-primary, .btn-secondary, .btn-export {
+  border: none;
+  padding: 0.875rem 1.5rem;
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: 600;
+  transition: all 0.3s ease;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 0.9rem;
+  position: relative;
+  overflow: hidden;
+}
+
+.btn-primary {
+  background: var(--color-primary);
+  color: var(--color-secondary);
+}
+
+.btn-primary::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
+  transition: left 0.5s ease;
+}
+
+.btn-primary:hover::before {
+  left: 100%;
+}
+
+.btn-primary:hover {
+  background: var(--color-primary-soft);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 15px rgba(217, 255, 4, 0.4);
+}
+
+.btn-secondary {
+  background: #555;
+  color: white;
+  border: 1px solid #666;
+}
+
+.btn-secondary:hover {
+  background: #666;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
+}
+
+.btn-export {
+  background: var(--color-primary);
+  color: var(--color-secondary);
+  padding: 0.5rem 1rem;
+  font-size: 0.85rem;
+  font-weight: 700;
+}
+
+.btn-export:hover {
+  background: var(--color-primary-soft);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 15px rgba(217, 255, 4, 0.4);
+}
+
+/* Section manuelle */
+.manual-section {
+  height: 100svh;
+  min-height: 100svh;
+  padding: 0;
+}
+
+.manual-container {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.manual-content {
+  flex: 1;
+  display: flex;
+  gap: 15px;
+  padding: 15px;
+  overflow: hidden;
+  height: 100%;
+}
+
+.manual-section .calibration-container {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.manual-section .field-container {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.manual-section .field-container :deep(svg) {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  margin-top: -10px;
+}
+
+.manual-section .calibration-container :deep(.video-frame-container) {
+  height: 100%;
+}
+
+.manual-section .calibration-container :deep(.video-frame) {
+  height: calc(100% - 80px);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .home-container {
+    padding: 0 1rem;
+  }
+  
+  .section {
+    min-height: auto;
+  }
+  
+  .mode-cards, .video-type-cards {
+    grid-template-columns: 1fr;
+  }
+  
+  .main-actions {
+    grid-template-columns: 1fr;
+  }
+  
+  .hero h1 {
+    font-size: 2.5rem;
+  }
+  
+  .manual-content {
+    flex-direction: column;
+  }
+
+}
+</style>

src/views/ManualView.vue

@@ -0,0 +1,438 @@
+<template>
+  <div class="calibration">
+    <!-- Bouton retour home -->
+    <button @click="goBack" class="btn-home" title="Retour à l'accueil">
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
+        <polyline points="9,22 9,12 15,12 15,22"/>
+      </svg>
+    </button>
+
+    <div class="main-content">
+      <div class="content-area">
+        <div class="video-display">
+          <div class="calibration-container">
+            <CalibrationArea
+              ref="calibrationArea"
+              :thumbnail="thumbnail"
+              :calibrationPoints="calibrationPoints"
+              :calibrationLines="calibrationLines"
+              :selectedFieldPoint="selectedFieldPoint"
+              :selectedFieldLine="selectedFieldLine"
+              @update:thumbnail="updateThumbnail"
+              @update:calibrationPoints="updateCalibrationPoints"
+              @update:calibrationLines="updateCalibrationLines"
+              @update:selectedFieldPoint="updateSelectedFieldPoint"
+              @update:selectedFieldLine="updateSelectedFieldLine"
+              @clear-calibration="clearCalibration"
+              @process-calibration="processCalibration"
+            />
+          </div>
+          <div class="field-container">
+            <FootballField 
+              ref="footballField"
+              @point-selected="handleFieldPointSelected"
+              @line-selected="handleFieldLineSelected"
+              :positionedPoints="calibrationPoints"
+              :positionedLines="calibrationLines"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import CalibrationArea from '@/components/CalibrationArea.vue'
+import FootballField from '@/components/FootballField.vue'
+import { useUploadStore } from '@/stores/upload'
+import { useCalibrationStore } from '@/stores/calibration'
+import api from '@/services/api'
+
+export default {
+  name: 'ManualView',
+  components: {
+    CalibrationArea,
+    FootballField
+  },
+  
+  setup() {
+    const uploadStore = useUploadStore()
+    const calibrationStore = useCalibrationStore()
+    return {
+      uploadStore,
+      calibrationStore
+    }
+  },
+  
+  data() {
+    return {
+      thumbnail: null,
+      calibrationPoints: {},
+      selectedFieldPoint: null,
+      calibrationLines: {},
+      selectedFieldLine: null
+    }
+  },
+  
+  computed: {
+    canProcess() {
+      return Object.keys(this.calibrationLines).length > 0 || Object.keys(this.calibrationPoints).length > 0
+    }
+  },
+  
+  async created() {
+    // Vérifier qu'un fichier est sélectionné
+    if (!this.uploadStore.selectedFile) {
+      this.$router.push('/')
+      return
+    }
+    
+    // Appliquer les styles fullscreen
+    this.applyFullscreenStyles()
+    
+    // Charger l'image/vidéo
+    await this.loadThumbnail()
+  },
+
+  beforeUnmount() {
+    // Restaurer les styles originaux
+    this.removeFullscreenStyles()
+  },
+  
+  methods: {
+    goBack() {
+      this.removeFullscreenStyles()
+      this.$router.push('/')
+    },
+
+    applyFullscreenStyles() {
+      const app = document.getElementById('app')
+      if (app) {
+        app.style.maxWidth = 'none'
+        app.style.margin = '0'
+        app.style.padding = '0'
+      }
+    },
+
+    removeFullscreenStyles() {
+      const app = document.getElementById('app')
+      if (app) {
+        app.style.maxWidth = '1280px'
+        app.style.margin = '0 auto'
+        app.style.padding = '1rem'
+      }
+    },
+
+    async loadThumbnail() {
+      try {
+        this.thumbnail = null
+        
+        if (this.uploadStore.isImage) {
+          // Pour les images, utiliser directement la preview
+          this.thumbnail = this.uploadStore.filePreview
+        } else if (this.uploadStore.isStaticVideo && this.uploadStore.extractedFrame) {
+          // Pour les vidéos statiques, utiliser la frame déjà extraite
+          console.log('Using extracted frame from static video:', this.uploadStore.selectedFile.name)
+          this.thumbnail = URL.createObjectURL(this.uploadStore.extractedFrame)
+        } else if (this.uploadStore.isVideo) {
+          // Pour les autres vidéos, extraire la première frame
+          console.log('Extracting first frame from video:', this.uploadStore.selectedFile.name)
+          
+          // Créer une URL pour le fichier vidéo
+          const videoUrl = URL.createObjectURL(this.uploadStore.selectedFile)
+          
+          // Extraire la première frame avec un canvas
+          const video = document.createElement('video')
+          video.src = videoUrl
+          video.muted = true // Important pour éviter les problèmes d'autoplay
+          
+          await new Promise((resolve, reject) => {
+            video.addEventListener('loadedmetadata', () => {
+              video.currentTime = 0 // Aller à la première frame
+            })
+            
+            video.addEventListener('seeked', () => {
+              try {
+                const canvas = document.createElement('canvas')
+                canvas.width = video.videoWidth
+                canvas.height = video.videoHeight
+                
+                const ctx = canvas.getContext('2d')
+                ctx.drawImage(video, 0, 0)
+                
+                this.thumbnail = canvas.toDataURL('image/jpeg', 0.9)
+                URL.revokeObjectURL(videoUrl)
+                resolve()
+              } catch (err) {
+                URL.revokeObjectURL(videoUrl)
+                reject(err)
+              }
+            })
+            
+            video.addEventListener('error', (err) => {
+              URL.revokeObjectURL(videoUrl)
+              reject(err)
+            })
+          })
+        }
+      } catch (error) {
+        console.error('Erreur lors du chargement du thumbnail:', error)
+        this.thumbnail = null
+      }
+    },
+
+    handleFieldPointSelected(pointData) {
+      this.selectedFieldLine = null
+      this.selectedFieldPoint = pointData
+    },
+
+    handleFieldLineSelected(lineData) {
+      this.selectedFieldPoint = null
+      this.selectedFieldLine = lineData
+    },
+
+    updateThumbnail(newThumbnail) {
+      this.thumbnail = newThumbnail
+    },
+
+    updateCalibrationPoints(newPoints) {
+      this.calibrationPoints = { ...newPoints }
+    },
+
+    updateCalibrationLines(newLines) {
+      this.calibrationLines = { ...newLines }
+    },
+
+    updateSelectedFieldPoint(newPoint) {
+      this.selectedFieldPoint = newPoint
+    },
+
+    updateSelectedFieldLine(newLine) {
+      this.selectedFieldLine = newLine
+      if (this.$refs.footballField) {
+        this.$refs.footballField.selectedLine = newLine ? newLine.id : null
+      }
+    },
+
+    clearCalibration() {
+      this.calibrationPoints = {}
+      this.calibrationLines = {}
+      this.selectedFieldPoint = null
+      this.selectedFieldLine = null
+    },
+
+    async processCalibration() {
+      if (!this.uploadStore.selectedFile || Object.keys(this.calibrationLines).length === 0) {
+        alert('Veuillez créer au moins une ligne de calibration')
+        return
+      }
+
+      try {
+        this.calibrationStore.setProcessing(true, 'Traitement de la calibration manuelle...')
+
+        if (!this.$refs.calibrationArea) {
+          console.error('CalibrationArea component is not mounted.')
+          return
+        }
+
+        const imageContainer = document.querySelector('.video-frame')
+        const imageSize = this.$refs.calibrationArea.imageSize
+        if (!imageSize) {
+          console.error('Image size is not available.')
+          return
+        }
+        const containerWidth = imageContainer.clientWidth
+        const containerHeight = imageContainer.clientHeight
+
+        // Préparer les données des lignes pour l'API /calibrate
+        const linesData = {}
+        
+        // Traitement des lignes - conversion des coordonnées container vers image
+        for (const [lineName, line] of Object.entries(this.calibrationLines)) {
+          linesData[lineName] = line.points.map(point => {
+            return {
+              x: point.x / containerWidth * imageSize.width,
+              y: point.y / containerHeight * imageSize.height
+            }
+          })
+        }
+
+        console.log('🔥 Données de lignes pour calibration:', linesData)
+        
+        // Appeler l'API /calibrate avec l'image et les lignes
+        const result = await api.calibrateCamera(this.uploadStore.selectedFile, linesData)
+        
+        console.log('🔥 Réponse API calibration:', result)
+        
+        if (result.status === 'success') {
+          this.calibrationStore.setResults(result)
+          this.$router.push('/')
+        } else if (result.status === 'failed') {
+          throw new Error(result.message || "Échec du traitement de la calibration")
+        } else {
+          throw new Error(result.error || 'Erreur de traitement')
+        }
+        
+      } catch (error) {
+        console.error('❌ Erreur lors du traitement manuel:', error)
+        this.calibrationStore.setError(error.message)
+        this.$router.push('/')
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.calibration {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  color: white;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.btn-home {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  background: rgba(255, 255, 255, 0.1);
+  color: #888;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 8px;
+  padding: 10px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(10px);
+}
+
+.btn-home:hover {
+  background: rgba(255, 255, 255, 0.15);
+  color: var(--color-primary);
+  border-color: var(--color-primary);
+  transform: scale(1.05);
+}
+
+.btn-home svg {
+  transition: all 0.3s ease;
+}
+
+.main-content {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+.content-area {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+}
+
+
+
+.video-display {
+  flex: 1;
+  display: flex;
+  gap: 15px;
+  padding: 15px;
+  overflow: hidden;
+  height: 100%;
+}
+
+.calibration-container {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.field-container {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.field-container :deep(svg) {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  margin-top: -10px;
+}
+
+.calibration-container :deep(.video-frame-container) {
+  height: 100%;
+}
+
+.calibration-container :deep(.video-frame) {
+  height: calc(100% - 80px);
+}
+
+.actions {
+  display: flex;
+  justify-content: center;
+  background-color: #2a2a2a;
+  border-top: 1px solid #333;
+}
+
+.btn-process {
+  background: var(--color-primary);
+  color: var(--color-secondary);
+  border: none;
+  padding: 1rem 2rem;
+  border-radius: 8px;
+  font-weight: 700;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.btn-process:hover:not(:disabled) {
+  background: var(--color-primary-soft);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 15px rgba(217, 255, 4, 0.4);
+}
+
+.btn-process:disabled {
+  background: #555;
+  color: #888;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .video-display {
+    flex-direction: column;
+  }
+  
+  .header-actions {
+    padding: 1rem;
+  }
+  
+  .header-actions h1 {
+    font-size: 1.2rem;
+  }
+  
+  .file-info {
+    display: none;
+  }
+}
+</style> 

vite.config.js

@@ -0,0 +1,18 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueDevTools from 'vite-plugin-vue-devtools'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    vueDevTools(),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    },
+  },
+})