Add configuration descriptions

This commit is contained in:
pjmalandrino 2026-03-20 09:23:26 +01:00
parent e69ff90650
commit d77fe2d989
3 changed files with 64 additions and 26 deletions

View file

@ -156,7 +156,7 @@
<span class="toggle-switch" /> <span class="toggle-switch" />
<span class="toggle-text">{{ t('config.ocr') }}</span> <span class="toggle-text">{{ t('config.ocr') }}</span>
</label> </label>
<span class="config-hint" :title="t('config.ocrHint')">?</span> <span class="config-hint"><span class="config-tooltip">{{ t('config.ocrHint') }}</span>?</span>
</div> </div>
<div class="config-toggle-row"> <div class="config-toggle-row">
@ -165,7 +165,7 @@
<span class="toggle-switch" /> <span class="toggle-switch" />
<span class="toggle-text">{{ t('config.tableStructure') }}</span> <span class="toggle-text">{{ t('config.tableStructure') }}</span>
</label> </label>
<span class="config-hint" :title="t('config.tableStructureHint')">?</span> <span class="config-hint"><span class="config-tooltip">{{ t('config.tableStructureHint') }}</span>?</span>
</div> </div>
<div class="config-sub-option" v-if="pipelineOptions.do_table_structure"> <div class="config-sub-option" v-if="pipelineOptions.do_table_structure">
@ -187,7 +187,7 @@
<span class="toggle-switch" /> <span class="toggle-switch" />
<span class="toggle-text">{{ t('config.codeEnrichment') }}</span> <span class="toggle-text">{{ t('config.codeEnrichment') }}</span>
</label> </label>
<span class="config-hint" :title="t('config.codeEnrichmentHint')">?</span> <span class="config-hint"><span class="config-tooltip">{{ t('config.codeEnrichmentHint') }}</span>?</span>
</div> </div>
<div class="config-toggle-row"> <div class="config-toggle-row">
@ -196,7 +196,7 @@
<span class="toggle-switch" /> <span class="toggle-switch" />
<span class="toggle-text">{{ t('config.formulaEnrichment') }}</span> <span class="toggle-text">{{ t('config.formulaEnrichment') }}</span>
</label> </label>
<span class="config-hint" :title="t('config.formulaEnrichmentHint')">?</span> <span class="config-hint"><span class="config-tooltip">{{ t('config.formulaEnrichmentHint') }}</span>?</span>
</div> </div>
</div> </div>
@ -210,7 +210,7 @@
<span class="toggle-switch" /> <span class="toggle-switch" />
<span class="toggle-text">{{ t('config.pictureClassification') }}</span> <span class="toggle-text">{{ t('config.pictureClassification') }}</span>
</label> </label>
<span class="config-hint" :title="t('config.pictureClassificationHint')">?</span> <span class="config-hint"><span class="config-tooltip">{{ t('config.pictureClassificationHint') }}</span>?</span>
</div> </div>
<div class="config-toggle-row"> <div class="config-toggle-row">
@ -219,7 +219,7 @@
<span class="toggle-switch" /> <span class="toggle-switch" />
<span class="toggle-text">{{ t('config.pictureDescription') }}</span> <span class="toggle-text">{{ t('config.pictureDescription') }}</span>
</label> </label>
<span class="config-hint" :title="t('config.pictureDescriptionHint')">?</span> <span class="config-hint"><span class="config-tooltip">{{ t('config.pictureDescriptionHint') }}</span>?</span>
</div> </div>
<div class="config-toggle-row"> <div class="config-toggle-row">
@ -228,7 +228,7 @@
<span class="toggle-switch" /> <span class="toggle-switch" />
<span class="toggle-text">{{ t('config.generatePictureImages') }}</span> <span class="toggle-text">{{ t('config.generatePictureImages') }}</span>
</label> </label>
<span class="config-hint" :title="t('config.generatePictureImagesHint')">?</span> <span class="config-hint"><span class="config-tooltip">{{ t('config.generatePictureImagesHint') }}</span>?</span>
</div> </div>
<div class="config-toggle-row"> <div class="config-toggle-row">
@ -237,7 +237,7 @@
<span class="toggle-switch" /> <span class="toggle-switch" />
<span class="toggle-text">{{ t('config.generatePageImages') }}</span> <span class="toggle-text">{{ t('config.generatePageImages') }}</span>
</label> </label>
<span class="config-hint" :title="t('config.generatePageImagesHint')">?</span> <span class="config-hint"><span class="config-tooltip">{{ t('config.generatePageImagesHint') }}</span>?</span>
</div> </div>
<div class="config-sub-option" v-if="pipelineOptions.generate_picture_images || pipelineOptions.generate_page_images"> <div class="config-sub-option" v-if="pipelineOptions.generate_picture_images || pipelineOptions.generate_page_images">
@ -791,6 +791,7 @@ onMounted(() => {
} }
.config-hint { .config-hint {
position: relative;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -801,6 +802,43 @@ onMounted(() => {
font-size: 10px; font-size: 10px;
color: var(--text-muted); color: var(--text-muted);
cursor: help; cursor: help;
flex-shrink: 0;
}
.config-hint:hover {
border-color: var(--accent);
color: var(--accent);
}
.config-tooltip {
display: none;
position: absolute;
bottom: calc(100% + 8px);
right: -8px;
width: 240px;
padding: 8px 10px;
background: var(--bg-primary);
border: 1px solid var(--border-light);
border-radius: 6px;
font-size: 11px;
line-height: 1.5;
color: var(--text-secondary);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 100;
pointer-events: none;
}
.config-tooltip::after {
content: '';
position: absolute;
top: 100%;
right: 12px;
border: 5px solid transparent;
border-top-color: var(--border-light);
}
.config-hint:hover .config-tooltip {
display: block;
} }
.config-select-display { .config-select-display {

View file

@ -9,7 +9,7 @@ const messages = {
// Studio — import // Studio — import
'studio.title': 'Intelligence des documents', 'studio.title': 'Intelligence des documents',
'studio.subtitle': 'Importez un document PDF pour commencer l\'analyse avec Docling', 'studio.subtitle': "Importez un document PDF pour commencer l'analyse avec Docling",
'studio.recentDocs': 'Documents récents', 'studio.recentDocs': 'Documents récents',
// Studio — workspace // Studio — workspace
@ -27,26 +27,26 @@ const messages = {
'config.model': 'Modèle', 'config.model': 'Modèle',
'config.pipeline': 'Pipeline', 'config.pipeline': 'Pipeline',
'config.ocr': 'OCR', 'config.ocr': 'OCR',
'config.ocrHint': 'Activer l\'OCR pour les documents scannés', 'config.ocrHint': "Applique la reconnaissance optique de caractères sur les pages scannées ou les images intégrées. Indispensable pour les PDF non-natifs.",
'config.tableStructure': 'Extraction des tableaux', 'config.tableStructure': 'Extraction des tableaux',
'config.tableStructureHint': 'Détecter et extraire la structure des tableaux', 'config.tableStructureHint': "Détecte les tableaux dans le document et reconstruit leur structure lignes/colonnes via le modèle TableFormer, avec correspondance des cellules.",
'config.tableMode': 'Mode tableaux', 'config.tableMode': 'Mode tableaux',
'config.tableModeAccurate': 'Précis', 'config.tableModeAccurate': 'Précis',
'config.tableModeFast': 'Rapide', 'config.tableModeFast': 'Rapide',
'config.enrichment': 'Enrichissement', 'config.enrichment': 'Enrichissement',
'config.codeEnrichment': 'Code', 'config.codeEnrichment': 'Code',
'config.codeEnrichmentHint': 'OCR spécialisé pour les blocs de code', 'config.codeEnrichmentHint': "Active un modèle OCR spécialisé pour les blocs de code, préservant l'indentation et la syntaxe.",
'config.formulaEnrichment': 'Formules', 'config.formulaEnrichment': 'Formules',
'config.formulaEnrichmentHint': 'OCR des formules, retourne du LaTeX', 'config.formulaEnrichmentHint': "Reconnaît les formules mathématiques et les convertit en LaTeX via un modèle dédié.",
'config.pictures': 'Images', 'config.pictures': 'Images',
'config.pictureClassification': 'Classification', 'config.pictureClassification': 'Classification',
'config.pictureClassificationHint': 'Classifier les types d\'images', 'config.pictureClassificationHint': "Classe chaque image détectée par type (graphique, photo, diagramme, logo…) via un modèle de classification.",
'config.pictureDescription': 'Description', 'config.pictureDescription': 'Description',
'config.pictureDescriptionHint': 'Générer des descriptions d\'images (VLM)', 'config.pictureDescriptionHint': "Génère une description textuelle de chaque image via un Vision Language Model (VLM). Utile pour l'accessibilité et l'indexation.",
'config.generatePictureImages': 'Extraire les images', 'config.generatePictureImages': 'Extraire les images',
'config.generatePictureImagesHint': 'Extraire les images du document', 'config.generatePictureImagesHint': "Extrait les images détectées du document et les sauvegarde en tant que fichiers séparés. Nécessaire pour l'export d'images.",
'config.generatePageImages': 'Images de pages', 'config.generatePageImages': 'Images de pages',
'config.generatePageImagesHint': 'Générer une image par page via Docling', 'config.generatePageImagesHint': "Rasterise chaque page du PDF en image. Utile pour la visualisation ou le post-traitement visuel.",
'config.imagesScale': 'Échelle images', 'config.imagesScale': 'Échelle images',
'config.documents': 'Documents', 'config.documents': 'Documents',
@ -58,7 +58,7 @@ const messages = {
'results.noImages': 'Aucune image détectée dans ce document', 'results.noImages': 'Aucune image détectée dans ce document',
'results.noMarkdown': 'Pas de contenu markdown', 'results.noMarkdown': 'Pas de contenu markdown',
'results.runAnalysis': 'Lancez une analyse pour voir les résultats', 'results.runAnalysis': 'Lancez une analyse pour voir les résultats',
'results.analysisFailed': 'L\'analyse a échoué', 'results.analysisFailed': "L'analyse a échoué",
'results.page': 'Page', 'results.page': 'Page',
// Upload // Upload
@ -101,26 +101,26 @@ const messages = {
'config.model': 'Model', 'config.model': 'Model',
'config.pipeline': 'Pipeline', 'config.pipeline': 'Pipeline',
'config.ocr': 'OCR', 'config.ocr': 'OCR',
'config.ocrHint': 'Enable OCR for scanned documents', 'config.ocrHint': 'Applies Optical Character Recognition on scanned pages or embedded images. Essential for non-native PDFs.',
'config.tableStructure': 'Table extraction', 'config.tableStructure': 'Table extraction',
'config.tableStructureHint': 'Detect and extract table structure', 'config.tableStructureHint': 'Detects tables in the document and reconstructs their row/column structure using the TableFormer model, with cell matching.',
'config.tableMode': 'Table mode', 'config.tableMode': 'Table mode',
'config.tableModeAccurate': 'Accurate', 'config.tableModeAccurate': 'Accurate',
'config.tableModeFast': 'Fast', 'config.tableModeFast': 'Fast',
'config.enrichment': 'Enrichment', 'config.enrichment': 'Enrichment',
'config.codeEnrichment': 'Code', 'config.codeEnrichment': 'Code',
'config.codeEnrichmentHint': 'Specialized OCR for code blocks', 'config.codeEnrichmentHint': 'Activates a specialized OCR model for code blocks, preserving indentation and syntax.',
'config.formulaEnrichment': 'Formulas', 'config.formulaEnrichment': 'Formulas',
'config.formulaEnrichmentHint': 'Formula OCR, returns LaTeX', 'config.formulaEnrichmentHint': 'Recognizes mathematical formulas and converts them to LaTeX using a dedicated model.',
'config.pictures': 'Pictures', 'config.pictures': 'Pictures',
'config.pictureClassification': 'Classification', 'config.pictureClassification': 'Classification',
'config.pictureClassificationHint': 'Classify picture types', 'config.pictureClassificationHint': 'Classifies each detected image by type (chart, photo, diagram, logo…) using a classification model.',
'config.pictureDescription': 'Description', 'config.pictureDescription': 'Description',
'config.pictureDescriptionHint': 'Generate picture descriptions (VLM)', 'config.pictureDescriptionHint': 'Generates a text description for each image using a Vision Language Model (VLM). Useful for accessibility and indexing.',
'config.generatePictureImages': 'Extract pictures', 'config.generatePictureImages': 'Extract pictures',
'config.generatePictureImagesHint': 'Extract pictures from document', 'config.generatePictureImagesHint': 'Extracts detected images from the document and saves them as separate files. Required for image export.',
'config.generatePageImages': 'Page images', 'config.generatePageImages': 'Page images',
'config.generatePageImagesHint': 'Generate one image per page via Docling', 'config.generatePageImagesHint': 'Rasterizes each PDF page as an image. Useful for visual preview or post-processing.',
'config.imagesScale': 'Images scale', 'config.imagesScale': 'Images scale',
'config.documents': 'Documents', 'config.documents': 'Documents',