4nk/4NK_IA_front
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactoring

Browse Source
This commit is contained in:
4NK IA 2025-09-18 17:05:42 +00:00
parent 9af63f22fe
commit d5a29d9b04
1 changed files with 210 additions and 213 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

145
src/views/ExtractionView.tsx
View File

@ -2,7 +2,7 @@ import React, { useState, useCallback } from 'react'
import { import {
Box, Typography, Paper, Card, CardContent, Chip, Button, List, ListItemText, ListItemButton, Box, Typography, Paper, Card, CardContent, Chip, Button, List, ListItemText, ListItemButton,
Tooltip, Alert, Accordion, AccordionSummary, AccordionDetails, CircularProgress, TextField, Tooltip, Alert, Accordion, AccordionSummary, AccordionDetails, CircularProgress, TextField,
Grid, Divider, Badge, Stack, Avatar, CardHeader, Fade, Divider, Badge, Stack, Avatar, CardHeader, Fade,
Snackbar, Alert as MuiAlert Snackbar, Alert as MuiAlert
} from '@mui/material' } from '@mui/material'
import { import {
@ -308,40 +308,6 @@ export default function ExtractionView() {
</CardContent> </CardContent>
</Card> </Card>
{/* Texte extrait avec toggle */}
<Card sx={{ mb: 3 }}>
<CardHeader
title="Texte extrait"
avatar={<Avatar sx={{ bgcolor: 'info.main' }}><TextFields /></Avatar>}
action={
<Button
size="small"
startIcon={showTextExtract ? <Visibility /> : <Visibility />}
onClick={() => setShowTextExtract(!showTextExtract)}
>
{showTextExtract ? 'Masquer' : 'Afficher'}
</Button>
}
/>
<Fade in={showTextExtract}>
<CardContent sx={{ pt: 0 }}>
<Paper
sx={{
p: 2,
bgcolor: 'grey.50',
maxHeight: 300,
overflow: 'auto',
border: '1px solid',
borderColor: 'grey.200'
}}
>
<Typography variant="body2" sx={{ whiteSpace: 'pre-wrap', fontFamily: 'monospace' }}>
{extraction.extraction.text.raw}
</Typography>
</Paper>
</CardContent>
</Fade>
</Card>
{/* Entités extraites avec design moderne */} {/* Entités extraites avec design moderne */}
<Box sx={{ display: 'flex', gap: 3, flexWrap: 'wrap' }}> <Box sx={{ display: 'flex', gap: 3, flexWrap: 'wrap' }}>
@ -413,7 +379,9 @@ export default function ExtractionView() {
disabled={enriching[`person-${i}`] === 'running'} disabled={enriching[`person-${i}`] === 'running'}
onClick={() => handleEnrichment('person', i)} onClick={() => handleEnrichment('person', i)}
> >
{enriching[`person-${i}`] === 'running' ? 'Collecte...' : 'Enrichir'} {enriching[`person-${i}`] === 'running' ? 'Collecte...' :
enriching[`person-${i}`] === 'completed' ? 'Bodacc ✓' :
enriching[`person-${i}`] === 'error' ? 'Erreur' : 'Enrichir'}
</Button> </Button>
<Button <Button
@ -453,12 +421,12 @@ export default function ExtractionView() {
</Stack> </Stack>
</CardContent> </CardContent>
</Card> </Card>
</Grid> </Box>
)} )}
{/* Adresses */} {/* Adresses */}
{addressesDraft.length > 0 && ( {addressesDraft.length > 0 && (
<Grid item xs={12} lg={4}> <Box sx={{ flex: '1 1 300px', minWidth: 0 }}>
<Card sx={{ height: '100%' }}> <Card sx={{ height: '100%' }}>
<CardHeader <CardHeader
title="Adresses" title="Adresses"
@ -476,8 +444,7 @@ export default function ExtractionView() {
{addressesDraft.map((a: any, i: number) => ( {addressesDraft.map((a: any, i: number) => (
<Paper key={`a-${i}`} sx={{ p: 2, border: '1px solid', borderColor: 'grey.200' }}> <Paper key={`a-${i}`} sx={{ p: 2, border: '1px solid', borderColor: 'grey.200' }}>
<Stack spacing={2}> <Stack spacing={2}>
<Grid container spacing={1}> <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
<Grid item xs={12}>
<TextField <TextField
size="small" size="small"
fullWidth fullWidth
@ -489,8 +456,7 @@ export default function ExtractionView() {
return c return c
})} })}
/> />
</Grid> <Box sx={{ display: 'flex', gap: 1 }}>
<Grid item xs={4}>
<TextField <TextField
size="small" size="small"
fullWidth fullWidth
@ -502,8 +468,6 @@ export default function ExtractionView() {
return c return c
})} })}
/> />
</Grid>
<Grid item xs={8}>
<TextField <TextField
size="small" size="small"
fullWidth fullWidth
@ -515,8 +479,7 @@ export default function ExtractionView() {
return c return c
})} })}
/> />
</Grid> </Box>
<Grid item xs={6}>
<TextField <TextField
size="small" size="small"
fullWidth fullWidth
@ -528,8 +491,6 @@ export default function ExtractionView() {
return c return c
})} })}
/> />
</Grid>
<Grid item xs={12}>
<TextField <TextField
size="small" size="small"
fullWidth fullWidth
@ -543,8 +504,7 @@ export default function ExtractionView() {
return c return c
})} })}
/> />
</Grid> </Box>
</Grid>
<Stack direction="row" spacing={1} flexWrap="wrap" useFlexGap> <Stack direction="row" spacing={1} flexWrap="wrap" useFlexGap>
<Button <Button
@ -554,7 +514,9 @@ export default function ExtractionView() {
disabled={enriching[`address-${i}`] === 'running'} disabled={enriching[`address-${i}`] === 'running'}
onClick={() => handleEnrichment('address', i)} onClick={() => handleEnrichment('address', i)}
> >
{enriching[`address-${i}`] === 'running' ? 'Collecte...' : 'Enrichir'} {enriching[`address-${i}`] === 'running' ? 'Collecte...' :
enriching[`address-${i}`] === 'completed' ? 'BAN+GéoRisque+Cadastre ✓' :
enriching[`address-${i}`] === 'error' ? 'Erreur' : 'Enrichir'}
</Button> </Button>
<Button <Button
@ -594,12 +556,12 @@ export default function ExtractionView() {
</Stack> </Stack>
</CardContent> </CardContent>
</Card> </Card>
</Grid> </Box>
)} )}
{/* Entreprises */} {/* Entreprises */}
{companiesDraft.length > 0 && ( {companiesDraft.length > 0 && (
<Grid item xs={12} lg={4}> <Box sx={{ flex: '1 1 300px', minWidth: 0 }}>
<Card sx={{ height: '100%' }}> <Card sx={{ height: '100%' }}>
<CardHeader <CardHeader
title="Entreprises" title="Entreprises"
@ -617,8 +579,8 @@ export default function ExtractionView() {
{companiesDraft.map((c: any, i: number) => ( {companiesDraft.map((c: any, i: number) => (
<Paper key={`c-${i}`} sx={{ p: 2, border: '1px solid', borderColor: 'grey.200' }}> <Paper key={`c-${i}`} sx={{ p: 2, border: '1px solid', borderColor: 'grey.200' }}>
<Stack spacing={2}> <Stack spacing={2}>
<Grid container spacing={1}> <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
<Grid item xs={12}> <Box>
<TextField <TextField
size="small" size="small"
fullWidth fullWidth
@ -630,8 +592,7 @@ export default function ExtractionView() {
return x return x
})} })}
/> />
</Grid> </Box>
<Grid item xs={12}>
<TextField <TextField
size="small" size="small"
fullWidth fullWidth
@ -645,8 +606,7 @@ export default function ExtractionView() {
return x return x
})} })}
/> />
</Grid> </Box>
</Grid>
<Stack direction="row" spacing={1} flexWrap="wrap" useFlexGap> <Stack direction="row" spacing={1} flexWrap="wrap" useFlexGap>
<Button <Button
@ -656,7 +616,9 @@ export default function ExtractionView() {
disabled={enriching[`company-${i}`] === 'running'} disabled={enriching[`company-${i}`] === 'running'}
onClick={() => handleEnrichment('company', i)} onClick={() => handleEnrichment('company', i)}
> >
{enriching[`company-${i}`] === 'running' ? 'Collecte...' : 'Enrichir'} {enriching[`company-${i}`] === 'running' ? 'Collecte...' :
enriching[`company-${i}`] === 'completed' ? 'Inforgreffe+Societe.com ✓' :
enriching[`company-${i}`] === 'error' ? 'Erreur' : 'Enrichir'}
</Button> </Button>
<Button <Button
@ -696,9 +658,9 @@ export default function ExtractionView() {
</Stack> </Stack>
</CardContent> </CardContent>
</Card> </Card>
</Grid> </Box>
)} )}
</Grid> </Box>
{/* Métadonnées détaillées */} {/* Métadonnées détaillées */}
<Card sx={{ mt: 3 }}> <Card sx={{ mt: 3 }}>
@ -713,48 +675,83 @@ export default function ExtractionView() {
<Typography>Informations de traitement</Typography> <Typography>Informations de traitement</Typography>
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
<Grid container spacing={2}> <Box sx={{ display: 'flex', gap: 3, flexWrap: 'wrap' }}>
<Grid item xs={12} sm={6}> <Box sx={{ flex: '1 1 300px' }}>
<Typography variant="body2" color="text.secondary"> <Typography variant="body2" color="text.secondary">
Hash du fichier Hash du fichier
</Typography> </Typography>
<Typography variant="body2" sx={{ fontFamily: 'monospace', wordBreak: 'break-all' }}> <Typography variant="body2" sx={{ fontFamily: 'monospace', wordBreak: 'break-all' }}>
{extraction.fileHash} {extraction.fileHash}
</Typography> </Typography>
</Grid> </Box>
<Grid item xs={12} sm={6}> <Box sx={{ flex: '1 1 300px' }}>
<Typography variant="body2" color="text.secondary"> <Typography variant="body2" color="text.secondary">
Traitement effectué Traitement effectué
</Typography> </Typography>
<Typography variant="body2"> <Typography variant="body2">
{new Date(extraction.status.timestamp).toLocaleString()} {new Date(extraction.status.timestamp).toLocaleString()}
</Typography> </Typography>
</Grid> </Box>
<Grid item xs={12} sm={6}> <Box sx={{ flex: '1 1 300px' }}>
<Typography variant="body2" color="text.secondary"> <Typography variant="body2" color="text.secondary">
Confiance globale Confiance globale
</Typography> </Typography>
<Typography variant="body2"> <Typography variant="body2">
{(extraction.metadata.quality.globalConfidence * 100).toFixed(1)}% {(extraction.metadata.quality.globalConfidence * 100).toFixed(1)}%
</Typography> </Typography>
</Grid> </Box>
{(extraction.metadata.quality as any).ollamaScore && ( {(extraction.metadata.quality as any).ollamaScore && (
<Grid item xs={12} sm={6}> <Box sx={{ flex: '1 1 300px' }}>
<Typography variant="body2" color="text.secondary"> <Typography variant="body2" color="text.secondary">
Score IA (Ollama) Score IA (Ollama)
</Typography> </Typography>
<Typography variant="body2"> <Typography variant="body2">
{((extraction.metadata.quality as any).ollamaScore * 100).toFixed(1)}% {((extraction.metadata.quality as any).ollamaScore * 100).toFixed(1)}%
</Typography> </Typography>
</Grid> </Box>
)} )}
</Grid> </Box>
</AccordionDetails> </AccordionDetails>
</Accordion> </Accordion>
</CardContent> </CardContent>
</Card> </Card>
</Grid>
</Grid> {/* Texte extrait avec toggle - déplacé en bas */}
<Card sx={{ mt: 3 }}>
<CardHeader
title="Texte extrait"
avatar={<Avatar sx={{ bgcolor: 'info.main' }}><TextFields /></Avatar>}
action={
<Button
size="small"
startIcon={showTextExtract ? <Visibility /> : <Visibility />}
onClick={() => setShowTextExtract(!showTextExtract)}
>
{showTextExtract ? 'Masquer' : 'Afficher'}
</Button>
}
/>
<Fade in={showTextExtract}>
<CardContent sx={{ pt: 0 }}>
<Paper
sx={{
p: 2,
bgcolor: 'grey.50',
maxHeight: 300,
overflow: 'auto',
border: '1px solid',
borderColor: 'grey.200'
}}
>
<Typography variant="body2" sx={{ whiteSpace: 'pre-wrap', fontFamily: 'monospace' }}>
{extraction.extraction.text.raw}
</Typography>
</Paper>
</CardContent>
</Fade>
</Card>
</Box>
</Box>
{/* Snackbar pour les notifications */} {/* Snackbar pour les notifications */}
<Snackbar <Snackbar