Utilisation des images
Téléchargement et utilisation des images dans Verdent
Verdent for VS Code intègre de puissantes capacités multimodales, vous permettant de télécharger des images et de recevoir une analyse visuelle, de générer du code à partir de maquettes, de déboguer avec des captures d'écran, et bien plus encore. Ce guide présente des flux de travail pratiques pour exploiter la compréhension d'images dans votre processus de développement.
Télécharger des images dans Verdent
Supposons que vous souhaitiez partager une image avec Verdent pour analyse ou référence.
Méthode rapide via le presse-papiers :
- Copiez une image dans votre presse-papiers (capture d'écran, copiée depuis un navigateur, etc.)
- Cliquez dans le champ de saisie Verdent
- Ctrl+V (Windows/Linux) pour coller
Important : sur macOS, utilisez Ctrl+V (et non Cmd+V) pour coller des images.
L'image apparaît dans la conversation.
Référencez des images par chemin :
Analyze this screenshot: /path/to/screenshot.pngVerdent lit l'image à partir du chemin spécifié.
/home/user/screenshots/error.png
/Users/john/Desktop/mockups/design.png./screenshots/error.png
./mockups/design.png../images/diagram.png
../../assets/logo.pngFormats courants : PNG, JPG, JPEG, WebP, GIF
Travailler avec plusieurs images :
- Collez plusieurs images depuis le presse-papiers, l'une après l'autre
- Ou référencez plusieurs chemins :
Compare these three mockups: design-v1.png, design-v2.png, design-v3.pngToutes les images apparaissent dans la conversation et peuvent être référencées collectivement.
Astuces :
- Formats pris en charge : PNG, JPG, JPEG, WebP, GIF, BMP
- Les images restent dans le contexte de la conversation pour les échanges à plusieurs tours
- Vous pouvez référencer des images téléchargées dans des questions de suivi
- Une image de bonne qualité produit de meilleurs résultats d'analyse
Générer du code à partir de maquettes de design
Supposons que vous disposiez d'une maquette de design et que vous souhaitiez que Verdent génère le code d'implémentation.
Téléchargez la maquette de design
Copiez l'image de la maquette (export Figma, outil de design ou croquis dessiné à la main) ou référencez-la par chemin de fichier.
Demandez la génération de code
Generate React components to implement this dashboard designVerdent analyse la structure visuelle.
Verdent crée la structure des composants
Verdent identifie les éléments visuels et génère :
// DashboardLayout.tsx
import React from 'react';
import { StatCard } from './StatCard';
import { RecentActivity } from './RecentActivity';
import { UserChart } from './UserChart';
export function DashboardLayout() {
return (
<div className="dashboard-container">
<div className="stats-grid">
<StatCard title="Total Users" value="1,234" trend="+12%" />
<StatCard title="Revenue" value="$45.6K" trend="+8%" />
<StatCard title="Active Sessions" value="89" trend="-3%" />
</div>
<div className="charts-section">
<UserChart />
</div>
<div className="activity-section">
<RecentActivity />
</div>
</div>
);
}Les composants correspondent à la structure de la maquette.
Générer le CSS correspondant
Generate Tailwind CSS classes to match the mockup stylingVerdent ajoute le style en fonction du design visuel :
<div className="grid grid-cols-3 gap-6 p-6">
<StatCard className="bg-white rounded-lg shadow-md p-4" ... />
</div>Affiner les détails
The spacing between stat cards should be larger, and add the blue accent color from the mockupVerdent ajuste le résultat pour se rapprocher plus précisément du design.
Astuces :
- Des maquettes en plus haute résolution produisent un code plus précis
- Précisez votre framework : React, Vue, Angular, HTML/CSS natif
- Mentionnez l'approche de style : Tailwind, CSS Modules, Styled Components
- Fournissez les codes couleur ou les détails du système de design pour plus de précision
- Les croquis dessinés à la main fonctionnent aussi pour des prototypes rapides
Déboguer des erreurs avec des captures d'écran
Supposons que vous rencontriez un message d'erreur et souhaitiez de l'aide pour le comprendre.
Collez une capture d'écran des erreurs de compilation dans le terminal :
My TypeScript build is failing with these errorsVerdent analyse :
- Les erreurs de type
- Les chemins de fichiers
- Les codes d'erreur
- Le contexte de compilation
Verdent explique :
You have a type mismatch in UserProfile.tsx line 42. The 'age' property expects a number but you're passing a string. Cast it with Number(age).Collez une capture d'écran de la pile d'appels issue des journaux de l'application :
The application crashed with this exceptionVerdent examine :
- Le type d'exception
- La pile d'appels
- Les noms de méthodes et numéros de ligne
- Les messages de journal contextuels
Identifie la cause racine et suggère des corrections.
Collez une capture d'écran de l'onglet Network des outils de développement du navigateur :
This API request is failing, here's the network tabVerdent analyse :
- Le code de statut HTTP
- Les en-têtes de requête/réponse
- La charge utile de la requête
- Le corps de la réponse
Diagnostique le problème API.
Astuces :
- Incluez les messages d'erreur complets (ne recadrez pas les détails importants)
- Montrez les piles d'appels dans leur intégralité lorsque c'est possible
- Incluez le contexte environnant (autres messages de console, requêtes réseau)
- Capturez l'erreur réelle plutôt que de la décrire simplement en texte
Questions fréquentes
Quelles limites de taille de fichier image s'appliquent ?
Taille de fichier maximale : 5 Mo (compression automatique en cas de dépassement ; erreur si toujours supérieure à 5 Mo après compression)
Résolution maximale : 2000 × 2000 pixels
Formats pris en charge : PNG, JPG, JPEG, GIF, BMP, WebP
Bonne pratique : utilisez des images de moins de 3 Mo avec des résolutions allant jusqu'à 2000 × 2000 pour des performances optimales et une analyse précise.
Verdent peut-il analyser plusieurs images dans une seule conversation ?
Oui. Vous pouvez coller plusieurs images successivement ou référencer plusieurs chemins de fichiers dans un même prompt. Verdent maintient le contexte pour toutes les images afin de les comparer et de les analyser. Exemple : « Compare ces trois maquettes et identifie les différences. »
Verdent télécharge-t-il mes images vers des serveurs externes ?
Les images collées via le presse-papiers ou référencées par chemin de fichier sont traitées au sein de votre session de conversation. Les images ne sont pas stockées de façon permanente et sont effacées lorsque vous démarrez une nouvelle conversation. Les références par chemin de fichier lisent l'image localement sans la télécharger.
Verdent peut-il générer du code prêt pour la production à partir de maquettes ?
Verdent génère du code de démarrage fonctionnel qui implémente la structure visuelle, la mise en page et le style de votre maquette. Vous devrez généralement l'affiner en ajoutant la logique métier, l'intégration des données, les fonctionnalités d'accessibilité, la gestion des erreurs et les optimisations de production.
Que faire si Verdent interprète mal ma maquette de design ?
Fournissez des retours correctifs de façon itérative. Dites par exemple « L'en-tête devrait être bleu, pas gris » ou « Ces cartes devraient être disposées sur une grille de 3 colonnes, pas 4 ». Verdent ajustera l'implémentation en fonction de vos corrections. Plusieurs cycles d'affinement sont normaux.