# Capture d’interface vers JSON Transformez une capture en arborescence visuelle modifiable et dossier pour le développement. > Page canonique: https://elysiatools.com/fr/tools/ui-screenshot-to-structured-json - **Catégorie:** AI Tools - **Mots-clés:** Capture d’interface vers JSON, JSON, UI ## Présentation Envoyez une capture fixe et acceptez le traitement externe. Uniquement deepseek/deepseek-v4.1-flash-1017 via OpenRouter, sans remplacement ni nouvelle tentative. Rapide : un appel ; précis : deux vérifications de zones supplémentaires au maximum. Coordonnées ramenées à l’original ; corrections invalides rejetées, statut partiel affiché. Corrigez texte, type, parents, cadres et demandes de modification. JSON et Markdown contiennent les corrections locales, l’usage et le statut, sans image. Arbre et styles approximatifs, pas le DOM/CSS original. La confiance n’est pas la précision. Le masquage remplace les pixels avant l’envoi. Démo synthétique sans IA. Politiques de conservation du fournisseur applicables. Limites : 10 Mo, 16 MP, 8192 px/côté, 240 nœuds. Vérifiez les détails petits ou coupés. Fournisseur officiel DeepSeek fixé. Le mode précis peut aligner les cadres avec Tesseract anglais local, uniquement sur correspondances exactes proches et fiables. Les cas ambigus restent estimés ; sans OCR, l’analyse continue. Aucun appel IA ni téléchargement supplémentaire. ## Entrées - **Capture** (file) - **Mode d’analyse** (select) - **J’accepte l’envoi de la capture masquée et du contexte au fournisseur IA.** (checkbox) - **Contexte (facultatif, 2000 caractères)** (textarea) - **Langue des descriptions** (select) ## Quand l'utiliser - Vous devez décomposer une maquette ou une capture d'écran en composants structurés pour amorcer le développement front-end. - Vous souhaitez inventorier les textes, boutons et conteneurs visuels d'une interface existante sans extraire manuellement le code source. - Vous préparez un cahier des charges ou un dossier de spécifications basé sur des écrans d'application sans accès au DOM d'origine. ## Fonctionnement - Importez une image fixe (PNG, JPEG ou WebP) d'une taille maximale de 10 Mo et cochez la case de consentement pour autoriser l'analyse. - Sélectionnez le mode d'analyse : rapide (un seul appel), précis (avec vérification de zones ciblées) ou démo (simulation locale synthétique sans IA). - Indiquez éventuellement un contexte textuel pour guider la détection et choisissez la langue cible pour les descriptions générées. - Examinez l'arborescence résultante et téléchargez le schéma JSON contenant les nœuds, types d'éléments, coordonnées normalisées et textes détectés. ## Cas d'usage - Transformation d'une capture d'écran de tableau de bord en arborescence JSON pour générer des squelettes de composants React ou Vue. - Audit visuel des libellés et composants d'une interface mobile concurrente à partir de captures statiques. - Documentation technique et archivage structuré de flux d'écrans lors d'une refonte d'application. ## Questions fréquentes ### Le JSON produit contient-il le code HTML et CSS original de la page ? Non. Le résultat est une approximation visuelle de l'arborescence et des styles, et non le code DOM ou CSS d'origine du navigateur. ### Quelles sont les limites techniques appliquées aux images importées ? Les captures ne doivent pas dépasser 10 Mo, 16 mégapixels, 8 192 pixels par côté et une arborescence finale de 240 nœuds. ### Quel modèle d'intelligence artificielle traite les captures d'écran ? L'outil s'appuie exclusivement sur deepseek/deepseek-v4.1-flash-1017 via OpenRouter, sans substitution automatique de modèle. ### En quoi consiste le mode précis par rapport au mode rapide ? Le mode précis ajoute jusqu'à deux vérifications de recadrages ciblés et peut réaligner les boîtes de texte via un OCR local exact. ### Mes images sont-elles conservées après le traitement ? Les pixels sensibles peuvent être masqués avant l'envoi, mais les politiques de rétention de données du fournisseur d'API distant s'appliquent. ## Outils associés - [Reconnaissance OCR de Reçus et Factures](https://elysiatools.com/fr/tools/ai-image-to-receipt-json): Extraire les informations clés des images de reçus/factures et les convertir en format JSON personnalisé en utilisant des modèles de vision IA - [Reconnaissance OCR de Carte d'Identité IA](https://elysiatools.com/fr/tools/ai-ocr-id-card-to-json): Extraire les informations clés des images de carte d'identité et les convertir au format JSON en utilisant des modèles de vision IA - [Générateur de Data URI](https://elysiatools.com/fr/tools/data-uri-generator): Convertit les fichiers en Data URI (Base64 ou pourcentage-encodé) pour intégrer images, polices et ressources directement dans HTML, CSS ou Markdown - [Visualiseur musical en particules d’image](https://elysiatools.com/fr/tools/image-particle-music-visualizer): Transformez une image en nuage de points réactif au son. Prévisualisez localement et exportez un MP4 à 30 i/s, une affiche PNG et les réglages JSON. - [De la palette d’image aux design tokens](https://elysiatools.com/fr/tools/image-to-design-tokens): Extrait les couleurs dominantes d’une image par k-means et les exporte en variables CSS / SCSS / config Tailwind / tokens JSON, avec noms et échelle de teintes - [Générateur de Factures PDF](https://elysiatools.com/fr/tools/pdf-invoice-generator): Génère une facture PDF avec marque à partir de lignes structurées - [IA Image vers Markdown](https://elysiatools.com/fr/tools/ai-image-to-markdown): Extraire le texte des images et convertir en format markdown en utilisant des modèles de vision IA - [Retouche Photo IA](https://elysiatools.com/fr/tools/ai-image-style-sharp-optimizer): Utilise un modele visuel IA pour reconnaitre l'image et la retoucher automatiquement ## Exemples - [Exemples de Traitement d'Images Web Python](https://elysiatools.com/fr/samples/web-image-processing-python): Exemples de traitement d'images Web Python utilisant PIL/Pillow incluant la lecture, l'enregistrement, le redimensionnement et la conversion de format - [Exemples de Traitement d'Images Android Java](https://elysiatools.com/fr/samples/android-image-processing-java): Exemples de traitement d'images Android Java incluant lecture/écriture, mise à l'échelle et conversion de format - [Exemples de Traitement d'Images Android Kotlin](https://elysiatools.com/fr/samples/android-image-processing-kotlin): Exemples de traitement d'images Android Kotlin incluant lecture/écriture, mise à l'échelle et conversion de format - [Exemples de Traitement d'Images Web Rust](https://elysiatools.com/fr/samples/web-image-processing-rust): Exemples de traitement d'images Web Rust incluant lecture/écriture, redimensionnement et conversion de format ## Contenu associé - [Structurer une capture d'interface, la relire et la transmettre au développement](https://elysiatools.com/fr/hubs/ui-screenshot-structure-review-and-development-handoff): Transformez une capture autorisée en arbre de composants relu, JSON validé et notes de développement, avec coordonnées, incertitudes et preuves des corrections.