Spaces:

SamiKLN
/

DocImageAI-Explorer

Sleeping

App Files Files Community

SamiKLN commited on Apr 26, 2025

Commit

70f0b76

verified ·

1 Parent(s): 0a872e7

Upload 4 files

Browse files

Files changed (5) hide show

.gitattributes +1 -0
background.mp4 +3 -0
index.html +150 -0
script.js +416 -0
style.css +435 -0

.gitattributes CHANGED Viewed

@@ -33,3 +33,4 @@ saved_model/**/* 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

 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+background.mp4 filter=lfs diff=lfs merge=lfs -text

background.mp4 ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:48a9cbba7573da31a6ff705f89e3d7e7b998c34d3433da3edd738ba0a626de61
+size 4349541

index.html ADDED Viewed

	@@ -0,0 +1,150 @@

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DocImageAI Explorer - Analyse de Documents et Images</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+</head>
+<body>
+    <!-- Fond vidéo -->
+    <video autoplay muted loop id="bg-video">
+        <source src="background.mp4" type="video/mp4">
+        Votre navigateur ne supporte pas les vidéos HTML5.
+    </video>
+    <!-- Conteneur principal -->
+    <div class="container">
+        <header>
+            <h1>DocImageAI Explorer</h1>
+            <p class="subtitle">Analyse intelligente de documents et images avec IA</p>
+        </header>
+        <!-- Navigation par onglets -->
+        <div class="tabs">
+            <button class="tab-button active" onclick="openTab('upload')">Upload</button>
+            <button class="tab-button" onclick="openTab('summarize')">Résumé</button>
+            <button class="tab-button" onclick="openTab('caption')">Images</button>
+            <button class="tab-button" onclick="openTab('qa')">Questions</button>
+            <button class="tab-button" onclick="openTab('about')">À propos</button>
+        </div>
+        <!-- Onglet Upload -->
+        <div id="upload" class="tab-content active">
+            <h2><i class="icon">📤</i> Upload de Fichiers</h2>
+            <div class="upload-area" id="dropArea">
+                <input type="file" id="fileInput" multiple accept=".pdf,.docx,.pptx,.xlsx,.jpg,.jpeg,.png">
+                <div class="upload-icon">⬆️</div>
+                <p>Glissez-déposez vos fichiers ici ou cliquez pour parcourir</p>
+                <p class="file-types">Formats supportés : PDF, DOCX, PPTX, XLSX, JPG, PNG</p>
+            </div>
+            <div id="fileList" class="file-list">
+                <p class="empty-message">Aucun fichier uploadé</p>
+            </div>
+            <div id="uploadStatus" class="status-message"></div>
+        </div>
+        <!-- Onglet Résumé -->
+        <div id="summarize" class="tab-content">
+            <h2><i class="icon">📝</i> Résumé de Document</h2>
+            <div class="form-group">
+                <label for="summaryFile">Sélectionnez un document :</label>
+                <select id="summaryFile" class="file-selector">
+                    <option value="">-- Choisir un document --</option>
+                </select>
+            </div>
+            <div class="action-area">
+                <button id="summarizeBtn" class="action-btn">
+                    <span class="btn-icon">✍️</span> Générer le Résumé
+                </button>
+                <div class="loading-spinner" id="summarySpinner"></div>
+            </div>
+            <div id="summaryResult" class="result-box">
+                <p class="placeholder">Votre résumé apparaîtra ici...</p>
+            </div>
+        </div>
+        <!-- Onglet Images -->
+        <div id="caption" class="tab-content">
+            <h2><i class="icon">🖼️</i> Analyse d'Image</h2>
+            <div class="form-group">
+                <label for="captionFile">Sélectionnez une image :</label>
+                <select id="captionFile" class="file-selector">
+                    <option value="">-- Choisir une image --</option>
+                </select>
+            </div>
+            <div id="imagePreview" class="image-preview">
+                <div class="preview-placeholder">
+                    <div class="placeholder-icon">🖼️</div>
+                    <p>Aperçu de l'image</p>
+                </div>
+            </div>
+            <div class="action-area">
+                <button id="captionBtn" class="action-btn">
+                    <span class="btn-icon">🔍</span> Analyser l'Image
+                </button>
+                <div class="loading-spinner" id="captionSpinner"></div>
+            </div>
+            <div id="captionResult" class="result-box">
+                <p class="placeholder">La description de votre image apparaîtra ici...</p>
+            </div>
+        </div>
+        <!-- Onglet Questions -->
+        <div id="qa" class="tab-content">
+            <h2><i class="icon">❓</i> Questions & Réponses</h2>
+            <div class="form-group">
+                <label for="qaFile">Document/Image (optionnel) :</label>
+                <select id="qaFile" class="file-selector">
+                    <option value="">-- Aucun --</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label for="questionInput">Votre question :</label>
+                <textarea id="questionInput" rows="4" placeholder="Posez une question sur le document ou l'image..."></textarea>
+            </div>
+            <div class="action-area">
+                <button id="askBtn" class="action-btn">
+                    <span class="btn-icon">💡</span> Poser la Question
+                </button>
+                <div class="loading-spinner" id="qaSpinner"></div>
+            </div>
+            <div id="answerResult" class="result-box">
+                <p class="placeholder">La réponse à votre question apparaîtra ici...</p>
+            </div>
+        </div>
+        <!-- Onglet À propos -->
+        <div id="about" class="tab-content">
+            <h2><i class="icon">ℹ️</i> À propos</h2>
+            <div class="about-content">
+                <div class="about-card">
+                    <h3>Fonctionnalités</h3>
+                    <ul>
+                        <li>📄 Résumé automatique de documents</li>
+                        <li>🖼️ Description d'images par IA</li>
+                        <li>❓ Réponses à vos questions</li>
+                        <li>⚡ Traitement rapide</li>
+                    </ul>
+                </div>
+                <div class="about-card">
+                    <h3>Technologies</h3>
+                    <ul>
+                        <li>🧠 Modèles Hugging Face</li>
+                        <li>🐍 Backend FastAPI</li>
+                        <li>⚛️ Frontend moderne</li>
+                        <li>🐳 Dockerisé</li>
+                    </ul>
+                </div>
+            </div>
+            <div class="footer">
+                <p>Projet développé par Kaloun & Tif - © 2025</p>
+                <p class="version">Version 1.0.0</p>
+            </div>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,416 @@

+// Configuration Axios
+axios.defaults.baseURL = window.location.origin.includes('hf.space')
+  ? window.location.origin
+  : 'http://localhost:8000';
+console.log("API base URL:", axios.defaults.baseURL);
+// Variables globales
+let uploadedFiles = [];
+const MAX_FILE_SIZE_MB = 50;
+const SUPPORTED_TYPES = ['pdf', 'docx', 'pptx', 'xlsx', 'jpg', 'jpeg', 'png'];
+// Éléments DOM
+const elements = {
+  fileInput: document.getElementById('fileInput'),
+  dropArea: document.getElementById('dropArea'),
+  fileList: document.getElementById('fileList'),
+  uploadStatus: document.getElementById('uploadStatus'),
+  summaryFile: document.getElementById('summaryFile'),
+  captionFile: document.getElementById('captionFile'),
+  qaFile: document.getElementById('qaFile'),
+  summarizeBtn: document.getElementById('summarizeBtn'),
+  captionBtn: document.getElementById('captionBtn'),
+  askBtn: document.getElementById('askBtn'),
+  questionInput: document.getElementById('questionInput'),
+  summaryResult: document.getElementById('summaryResult'),
+  captionResult: document.getElementById('captionResult'),
+  answerResult: document.getElementById('answerResult'),
+  imagePreview: document.getElementById('imagePreview'),
+  summarySpinner: document.getElementById('summarySpinner'),
+  captionSpinner: document.getElementById('captionSpinner'),
+  qaSpinner: document.getElementById('qaSpinner')
+};
+// Initialisation
+document.addEventListener('DOMContentLoaded', () => {
+  initVideoBackground();
+  setupEventListeners();
+  updateFileSelectors();
+});
+function initVideoBackground() {
+  const video = document.getElementById('bg-video');
+  if (video) {
+    try {
+      video.playbackRate = 0.8;
+      video.muted = true;
+      video.playsInline = true;
+      video.play().catch(e => console.log("Video play error:", e));
+    } catch (e) {
+      console.log("Video initialization error:", e);
+    }
+    video.onerror = () => {
+      document.body.style.background = "linear-gradient(135deg, #4a6fa5 0%, #166088 100%)";
+    };
+  }
+}
+function setupEventListeners() {
+  // Gestion de l'upload
+  if (elements.dropArea) {
+    elements.dropArea.addEventListener('click', () => elements.fileInput.click());
+    elements.dropArea.addEventListener('dragover', handleDragOver);
+    elements.dropArea.addEventListener('dragleave', handleDragLeave);
+    elements.dropArea.addEventListener('drop', handleDrop);
+  }
+  elements.fileInput.addEventListener('change', handleFileSelect);
+  // Boutons d'action
+  if (elements.summarizeBtn) {
+    elements.summarizeBtn.addEventListener('click', summarizeDocument);
+  }
+  if (elements.captionBtn) {
+    elements.captionBtn.addEventListener('click', generateCaption);
+  }
+  if (elements.askBtn) {
+    elements.askBtn.addEventListener('click', answerQuestion);
+  }
+}
+// Gestion des fichiers
+function handleDragOver(e) {
+  e.preventDefault();
+  elements.dropArea.style.borderColor = '#4a6fa5';
+  elements.dropArea.style.backgroundColor = 'rgba(74, 111, 165, 0.1)';
+}
+function handleDragLeave() {
+  elements.dropArea.style.borderColor = '#4a6fa5';
+  elements.dropArea.style.backgroundColor = 'rgba(74, 111, 165, 0.05)';
+}
+function handleDrop(e) {
+  e.preventDefault();
+  handleDragLeave();
+  if (e.dataTransfer.files.length) {
+    elements.fileInput.files = e.dataTransfer.files;
+    handleFiles(elements.fileInput.files);
+  }
+}
+function handleFileSelect() {
+  if (elements.fileInput.files.length) {
+    handleFiles(elements.fileInput.files);
+  }
+}
+async function handleFiles(files) {
+  const validFiles = Array.from(files).filter(file => {
+    const ext = file.name.split('.').pop().toLowerCase();
+    const isValidType = SUPPORTED_TYPES.includes(ext);
+    const isValidSize = file.size <= MAX_FILE_SIZE_MB * 1024 * 1024;
+    if (!isValidType) {
+      showError(elements.uploadStatus, `Type non supporté: ${file.name}`);
+      return false;
+    }
+    if (!isValidSize) {
+      showError(elements.uploadStatus, `Fichier trop volumineux (max ${MAX_FILE_SIZE_MB}MB): ${file.name}`);
+      return false;
+    }
+    return true;
+  });
+  if (!validFiles.length) return;
+  showLoading(elements.uploadStatus, `Upload de ${validFiles.length} fichier(s)...`);
+  const formData = new FormData();
+  validFiles.forEach(file => formData.append('files', file));
+  try {
+    const response = await axios.post('/api/upload', formData, {
+      headers: { 'Content-Type': 'multipart/form-data' },
+      timeout: 60000
+    });
+    uploadedFiles = [...uploadedFiles, ...response.data];
+    updateFileSelectors();
+    renderFileList();
+    showSuccess(elements.uploadStatus, `${validFiles.length} fichier(s) uploadé(s) avec succès !`);
+  } catch (error) {
+    handleUploadError(error);
+  } finally {
+    elements.fileInput.value = '';
+  }
+}
+function renderFileList() {
+  if (!elements.fileList) return;
+  if (uploadedFiles.length === 0) {
+    elements.fileList.innerHTML = '<p class="empty-message">Aucun fichier uploadé</p>';
+    return;
+  }
+  elements.fileList.innerHTML = uploadedFiles.map(file => `
+    <div class="file-item" data-file-id="${file.file_id}">
+      <div class="file-info">
+        <span class="file-icon">${getFileIcon(file.file_type)}</span>
+        <span class="file-name">${file.file_name}</span>
+        <span class="file-type">${file.file_type.toUpperCase()}</span>
+      </div>
+    </div>
+  `).join('');
+}
+function updateFileSelectors() {
+  const selectors = [
+    { element: elements.summaryFile, types: ['pdf', 'docx', 'pptx', 'xlsx'] },
+    { element: elements.captionFile, types: ['jpg', 'jpeg', 'png'] },
+    { element: elements.qaFile, types: ['pdf', 'docx', 'pptx', 'xlsx', 'jpg', 'jpeg', 'png'] }
+  ];
+  selectors.forEach(({ element, types }) => {
+    if (!element) return;
+    const currentValue = element.value;
+    element.innerHTML = element.id === 'qaFile'
+      ? '<option value="">-- Aucun --</option>'
+      : `<option value="">-- Choisir ${element.id.includes('summary') ? 'un document' : 'une image'} --</option>`;
+    uploadedFiles
+      .filter(file => types.includes(file.file_type.toLowerCase()))
+      .forEach(file => {
+        const option = new Option(
+          `${file.file_name} (${file.file_type.toUpperCase()})`,
+          file.file_id
+        );
+        element.add(option);
+      });
+    element.value = currentValue;
+  });
+}
+// Fonctions de traitement
+async function summarizeDocument() {
+  if (!elements.summaryFile || !elements.summaryResult) return;
+  const fileId = elements.summaryFile.value;
+  if (!fileId) {
+    showError(elements.summaryResult, 'Veuillez sélectionner un document');
+    return;
+  }
+  showLoading(elements.summaryResult, 'Génération du résumé en cours...');
+  toggleSpinner(elements.summarySpinner, true);
+  disableButton(elements.summarizeBtn, true);
+  try {
+    const response = await axios.post('/api/summarize', {
+      file_id: fileId,
+      max_length: 200
+    }, { timeout: 120000 });
+    elements.summaryResult.innerHTML = `
+      <h3>Résumé du document</h3>
+      <div class="summary-content">${response.data.summary}</div>
+    `;
+  } catch (error) {
+    handleProcessingError(error, elements.summaryResult, 'résumé');
+  } finally {
+    toggleSpinner(elements.summarySpinner, false);
+    disableButton(elements.summarizeBtn, false);
+  }
+}
+async function generateCaption() {
+  if (!elements.captionFile || !elements.captionResult) return;
+  const fileId = elements.captionFile.value;
+  if (!fileId) {
+    showError(elements.captionResult, 'Veuillez sélectionner une image');
+    return;
+  }
+  // Afficher l'aperçu
+  const file = uploadedFiles.find(f => f.file_id === fileId);
+  if (file && elements.imagePreview) {
+    try {
+      const response = await axios.get(`/api/file/${fileId}`, { responseType: 'blob' });
+      const url = URL.createObjectURL(response.data);
+      elements.imagePreview.innerHTML = `<img src="${url}" alt="Image sélectionnée">`;
+    } catch (error) {
+      console.error("Error loading image preview:", error);
+    }
+  }
+  showLoading(elements.captionResult, 'Analyse de l\'image en cours...');
+  toggleSpinner(elements.captionSpinner, true);
+  disableButton(elements.captionBtn, true);
+  try {
+    const response = await axios.post('/api/caption', { file_id: fileId }, { timeout: 60000 });
+    elements.captionResult.innerHTML = `
+      <h3>Description de l'image</h3>
+      <p>${response.data.caption}</p>
+    `;
+  } catch (error) {
+    handleProcessingError(error, elements.captionResult, 'description');
+  } finally {
+    toggleSpinner(elements.captionSpinner, false);
+    disableButton(elements.captionBtn, false);
+  }
+}
+async function answerQuestion() {
+  if (!elements.questionInput || !elements.answerResult) return;
+  const question = elements.questionInput.value.trim();
+  if (!question) {
+    showError(elements.answerResult, 'Veuillez saisir une question');
+    return;
+  }
+  const fileId = elements.qaFile ? elements.qaFile.value : null;
+  showLoading(elements.answerResult, 'Recherche de la réponse...');
+  toggleSpinner(elements.qaSpinner, true);
+  disableButton(elements.askBtn, true);
+  try {
+    const response = await axios.post('/api/answer', {
+      question,
+      file_id: fileId || undefined
+    }, { timeout: 120000 });
+    elements.answerResult.innerHTML = `
+      <h3>Réponse</h3>
+      <div class="answer-content">${response.data.answer}</div>
+    `;
+  } catch (error) {
+    handleProcessingError(error, elements.answerResult, 'réponse');
+  } finally {
+    toggleSpinner(elements.qaSpinner, false);
+    disableButton(elements.askBtn, false);
+  }
+}
+// Fonctions utilitaires
+function getFileIcon(fileType) {
+  const icons = {
+    pdf: '📄',
+    docx: '📝',
+    pptx: '📊',
+    xlsx: '📈',
+    jpg: '🖼️',
+    jpeg: '🖼️',
+    png: '🖼️'
+  };
+  return icons[fileType.toLowerCase()] || '📁';
+}
+function showLoading(element, message) {
+  if (!element) return;
+  element.innerHTML = `
+    <div class="status-message">
+      <div class="loading-spinner"></div>
+      ${message}
+    </div>
+  `;
+}
+function showSuccess(element, message) {
+  if (!element) return;
+  element.innerHTML = `
+    <div class="status-message success">
+      ✓ ${message}
+    </div>
+  `;
+  if (element === elements.uploadStatus) {
+    setTimeout(() => {
+      element.innerHTML = '';
+    }, 3000);
+  }
+}
+function showError(element, message) {
+  if (!element) return;
+  element.innerHTML = `
+    <div class="status-message error">
+      ✗ ${message}
+    </div>
+  `;
+}
+function handleUploadError(error) {
+  let message = 'Échec de l\'upload';
+  if (error.response) {
+    message += `: ${error.response.data.detail || error.response.statusText}`;
+  } else if (error.code === 'ECONNABORTED') {
+    message = 'Délai d\'attente dépassé (60s) - essayez avec des fichiers plus petits';
+  } else if (error.message.includes('Network Error')) {
+    message = 'Impossible de se connecter au serveur - vérifiez votre connexion';
+  } else {
+    message += `: ${error.message}`;
+  }
+  showError(elements.uploadStatus, message);
+}
+function handleProcessingError(error, element, action) {
+  let message = `Échec de la génération du ${action}`;
+  if (error.response) {
+    message += `: ${error.response.data.detail || error.response.statusText}`;
+  } else if (error.code === 'ECONNABORTED') {
+    message = `Délai d'attente dépassé pour le ${action}`;
+  } else {
+    message += `: ${error.message}`;
+  }
+  showError(element, message);
+}
+function toggleSpinner(spinnerElement, show) {
+  if (spinnerElement) {
+    spinnerElement.style.display = show ? 'block' : 'none';
+  }
+}
+function disableButton(buttonElement, disable) {
+  if (buttonElement) {
+    buttonElement.disabled = disable;
+    buttonElement.style.opacity = disable ? 0.7 : 1;
+    buttonElement.style.cursor = disable ? 'not-allowed' : 'pointer';
+  }
+}
+function openTab(tabName) {
+  // Masquer tous les onglets
+  document.querySelectorAll('.tab-content').forEach(tab => {
+    tab.classList.remove('active');
+  });
+  // Désactiver tous les boutons
+  document.querySelectorAll('.tab-button').forEach(btn => {
+    btn.classList.remove('active');
+  });
+  // Activer l'onglet sélectionné
+  const tab = document.getElementById(tabName);
+  if (tab) tab.classList.add('active');
+  // Activer le bouton sélectionné
+  event.currentTarget.classList.add('active');
+}

style.css ADDED Viewed

	@@ -0,0 +1,435 @@

+:root {
+    --primary-color: #4a6fa5;
+    --secondary-color: #166088;
+    --accent-color: #4fc3f7;
+    --background-color: #f8f9fa;
+    --text-color: #333;
+    --light-gray: #e9ecef;
+    --dark-gray: #6c757d;
+    --success-color: #28a745;
+    --error-color: #dc3545;
+    --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  }
+  /* Reset et styles de base */
+  * {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+  body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    line-height: 1.6;
+    color: var(--text-color);
+    overflow-x: hidden;
+  }
+  /* Fond vidéo */
+  #bg-video {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    min-width: 100%;
+    min-height: 100%;
+    z-index: -1;
+    opacity: 1;
+    object-fit: cover;
+  }
+  /* Conteneur principal */
+  .container {
+    max-width: 1200px;
+    margin: 2rem auto;
+    background-color: rgba(255, 255, 255, 0.863);
+    padding: 2rem;
+    border-radius: 10px;
+    box-shadow: var(--box-shadow);
+    backdrop-filter: blur(2px);
+  }
+  header {
+    text-align: center;
+    margin-bottom: 2rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid var(--light-gray);
+  }
+  header h1 {
+    color: var(--primary-color);
+    font-size: 2.5rem;
+    margin-bottom: 0.5rem;
+  }
+  .subtitle {
+    color: var(--dark-gray);
+    font-size: 1.1rem;
+  }
+  /* Onglets */
+  .tabs {
+    display: flex;
+    border-bottom: 1px solid var(--light-gray);
+    margin-bottom: 1.5rem;
+    overflow-x: auto;
+  }
+  .tab-button {
+    padding: 0.75rem 1.5rem;
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 1rem;
+    color: var(--dark-gray);
+    transition: all 0.3s;
+    white-space: nowrap;
+  }
+  .tab-button:hover {
+    color: var(--primary-color);
+  }
+  .tab-button.active {
+    color: var(--primary-color);
+    border-bottom: 3px solid var(--primary-color);
+    font-weight: 600;
+  }
+  .tab-content {
+    display: none;
+    padding: 1rem 0;
+    animation: fadeIn 0.5s ease;
+  }
+  .tab-content.active {
+    display: block;
+  }
+  @keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+  /* Zone d'upload */
+  .upload-area {
+    border: 2px dashed var(--primary-color);
+    border-radius: 8px;
+    padding: 3rem;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.3s;
+    margin-bottom: 1.5rem;
+    background-color: rgba(74, 111, 165, 0.05);
+  }
+  .upload-area:hover {
+    background-color: rgba(74, 111, 165, 0.1);
+    transform: translateY(-2px);
+  }
+  .upload-icon {
+    font-size: 2.5rem;
+    margin-bottom: 1rem;
+    color: var(--primary-color);
+  }
+  .file-types {
+    color: var(--dark-gray);
+    font-size: 0.9rem;
+    margin-top: 0.5rem;
+  }
+  #fileInput {
+    display: none;
+  }
+  /* Liste de fichiers */
+  .file-list {
+    margin: 1.5rem 0;
+  }
+  .file-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.75rem 1rem;
+    border: 1px solid var(--light-gray);
+    border-radius: 6px;
+    margin-bottom: 0.75rem;
+    background-color: white;
+    transition: transform 0.2s;
+  }
+  .file-item:hover {
+    transform: translateX(5px);
+  }
+  .file-info {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+  }
+  .file-icon {
+    font-size: 1.2rem;
+  }
+  .file-name {
+    font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 300px;
+  }
+  .file-type {
+    color: var(--dark-gray);
+    font-size: 0.8rem;
+    background-color: var(--light-gray);
+    padding: 0.2rem 0.5rem;
+    border-radius: 4px;
+    margin-left: 0.5rem;
+  }
+  /* Formulaires */
+  .form-group {
+    margin-bottom: 1.5rem;
+  }
+  .form-group label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+    color: var(--primary-color);
+  }
+  .file-selector, textarea {
+    width: 100%;
+    padding: 0.75rem;
+    border: 1px solid var(--light-gray);
+    border-radius: 6px;
+    font-size: 1rem;
+    transition: border-color 0.3s;
+  }
+  .file-selector:focus, textarea:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 2px rgba(74, 111, 165, 0.2);
+  }
+  textarea {
+    resize: vertical;
+    min-height: 120px;
+  }
+  /* Boutons */
+  .action-btn {
+    background-color: var(--primary-color);
+    color: white;
+    border: none;
+    padding: 0.75rem 1.5rem;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 1rem;
+    font-weight: 500;
+    transition: all 0.3s;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .action-btn:hover {
+    background-color: var(--secondary-color);
+    transform: translateY(-2px);
+    box-shadow: var(--box-shadow);
+  }
+  .action-btn:disabled {
+    background-color: var(--light-gray);
+    cursor: not-allowed;
+    transform: none;
+  }
+  .btn-icon {
+    font-size: 1.2rem;
+  }
+  .action-area {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin: 1.5rem 0;
+  }
+  /* Résultats */
+  .result-box {
+    margin: 1.5rem 0;
+    padding: 1.5rem;
+    border-radius: 8px;
+    background-color: white;
+    border: 1px solid var(--light-gray);
+    min-height: 150px;
+  }
+  .result-box h3 {
+    color: var(--primary-color);
+    margin-bottom: 1rem;
+  }
+  .placeholder {
+    color: var(--dark-gray);
+    font-style: italic;
+    text-align: center;
+    margin: 2rem 0;
+  }
+  /* Aperçu image */
+  .image-preview {
+    margin: 1.5rem 0;
+    text-align: center;
+  }
+  .image-preview img {
+    max-width: 100%;
+    max-height: 400px;
+    border-radius: 8px;
+    box-shadow: var(--box-shadow);
+  }
+  .preview-placeholder {
+    padding: 3rem;
+    border: 2px dashed var(--light-gray);
+    border-radius: 8px;
+    color: var(--dark-gray);
+  }
+  .placeholder-icon {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+    opacity: 0.5;
+  }
+  /* Messages d'état */
+  .status-message {
+    padding: 1rem;
+    border-radius: 6px;
+    margin: 1rem 0;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+  }
+  .success {
+    background-color: rgba(40, 167, 69, 0.15);
+    color: var(--success-color);
+    border: 1px solid rgba(40, 167, 69, 0.3);
+  }
+  .error {
+    background-color: rgba(220, 53, 69, 0.15);
+    color: var(--error-color);
+    border: 1px solid rgba(220, 53, 69, 0.3);
+  }
+  .loading-spinner {
+    width: 24px;
+    height: 24px;
+    border: 3px solid rgba(74, 111, 165, 0.3);
+    border-top-color: var(--primary-color);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    display: none;
+  }
+  @keyframes spin {
+    to { transform: rotate(360deg); }
+  }
+  /* Page À propos */
+  .about-content {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 1.5rem;
+    margin: 2rem 0;
+  }
+  .about-card {
+    background-color: white;
+    border-radius: 8px;
+    padding: 1.5rem;
+    box-shadow: var(--box-shadow);
+  }
+  .about-card h3 {
+    color: var(--primary-color);
+    margin-bottom: 1rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid var(--light-gray);
+  }
+  .about-card ul {
+    list-style-type: none;
+  }
+  .about-card li {
+    padding: 0.5rem 0;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+  }
+  .footer {
+    text-align: center;
+    margin-top: 3rem;
+    color: var(--dark-gray);
+    font-size: 0.9rem;
+  }
+  .version {
+    font-size: 0.8rem;
+    opacity: 0.7;
+  }
+  /* Responsive */
+  @media (max-width: 768px) {
+    .container {
+      margin: 1rem;
+      padding: 1.5rem;
+    }
+    header h1 {
+      font-size: 2rem;
+    }
+    .upload-area {
+      padding: 2rem 1rem;
+    }
+    .file-name {
+      max-width: 200px;
+    }
+    .about-content {
+      grid-template-columns: 1fr;
+    }
+    #bg-video {
+      display: none;
+    }
+    body {
+      background: linear-gradient(135deg, #4a6fa5 0%, #166088 100%);
+    }
+  }
+  @media (max-width: 480px) {
+    .tab-button {
+      padding: 0.75rem;
+      font-size: 0.9rem;
+    }
+    .file-name {
+      max-width: 150px;
+    }
+  }