1fd8ddf8b0
- Ajout endpoint manquant /api/notary/document/{id}/status
- Correction erreur BrokenPipeError dans le serveur web
- Création de ressources CSS/JS locales pour éviter les erreurs DNS
- Bootstrap CSS minimal local (bootstrap.min.css)
- Chart.js minimal local (chart.min.js)
- Font Awesome minimal local (fontawesome.min.css)
- Gestion d'erreurs de connexion fermée par le client
- Interface web fonctionnelle sans dépendances externes
- Aperçu PDF avec PDF.js fonctionnel
- Polling de statut des documents opérationnel
442 lines
22 KiB
HTML
442 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>4NK Notariat - Traitement de Documents</title>
|
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📄</text></svg>">
|
|
<link href="bootstrap.min.css" rel="stylesheet">
|
|
<link href="fontawesome.min.css" rel="stylesheet">
|
|
<style>
|
|
.upload-area {
|
|
border: 2px dashed #007bff;
|
|
border-radius: 10px;
|
|
padding: 40px;
|
|
text-align: center;
|
|
background-color: #f8f9fa;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.upload-area:hover {
|
|
border-color: #0056b3;
|
|
background-color: #e3f2fd;
|
|
}
|
|
.upload-area.dragover {
|
|
border-color: #28a745;
|
|
background-color: #d4edda;
|
|
}
|
|
.document-card {
|
|
transition: transform 0.2s ease;
|
|
}
|
|
.document-card:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
.status-badge {
|
|
font-size: 0.8em;
|
|
}
|
|
.progress-container {
|
|
display: none;
|
|
}
|
|
.analysis-section {
|
|
display: none;
|
|
}
|
|
.entity-item {
|
|
background-color: #f8f9fa;
|
|
border-left: 4px solid #007bff;
|
|
padding: 10px;
|
|
margin: 5px 0;
|
|
}
|
|
.verification-item {
|
|
background-color: #f8f9fa;
|
|
border-left: 4px solid #28a745;
|
|
padding: 10px;
|
|
margin: 5px 0;
|
|
}
|
|
.verification-item.error {
|
|
border-left-color: #dc3545;
|
|
}
|
|
.verification-item.warning {
|
|
border-left-color: #ffc107;
|
|
}
|
|
.sidebar {
|
|
background-color: #f8f9fa;
|
|
min-height: 100vh;
|
|
}
|
|
.main-content {
|
|
padding: 20px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<!-- Sidebar -->
|
|
<div class="col-md-3 sidebar p-3">
|
|
<h4 class="mb-4">
|
|
<i class="fas fa-balance-scale text-primary"></i>
|
|
4NK Notariat
|
|
</h4>
|
|
|
|
<nav class="nav flex-column">
|
|
<a class="nav-link active" href="#upload" data-section="upload">
|
|
<i class="fas fa-upload"></i> Upload Document
|
|
</a>
|
|
<a class="nav-link" href="#documents" data-section="documents">
|
|
<i class="fas fa-file-alt"></i> Documents
|
|
</a>
|
|
<a class="nav-link" href="#stats" data-section="stats">
|
|
<i class="fas fa-chart-bar"></i> Statistiques
|
|
</a>
|
|
<a class="nav-link" href="#settings" data-section="settings">
|
|
<i class="fas fa-cog"></i> Paramètres
|
|
</a>
|
|
</nav>
|
|
|
|
<hr>
|
|
|
|
<div class="mt-4">
|
|
<h6>Statut du Système</h6>
|
|
<div id="system-status">
|
|
<div class="d-flex justify-content-between">
|
|
<span>API:</span>
|
|
<span class="badge bg-success" id="api-status">Connecté</span>
|
|
</div>
|
|
<div class="d-flex justify-content-between">
|
|
<span>LLM:</span>
|
|
<span class="badge bg-success" id="llm-status">Disponible</span>
|
|
</div>
|
|
<div class="d-flex justify-content-between">
|
|
<span>APIs Externes:</span>
|
|
<span class="badge bg-success" id="external-apis-status">OK</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="col-md-9 main-content">
|
|
<!-- Upload Section -->
|
|
<div id="upload-section" class="content-section">
|
|
<h2 class="mb-4">
|
|
<i class="fas fa-upload text-primary"></i>
|
|
Upload de Document Notarial
|
|
</h2>
|
|
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<form id="upload-form">
|
|
<div class="upload-area" id="upload-area">
|
|
<i class="fas fa-cloud-upload-alt fa-3x text-primary mb-3"></i>
|
|
<h5>Glissez-déposez votre document ici</h5>
|
|
<p class="text-muted">ou cliquez pour sélectionner un fichier</p>
|
|
<input type="file" id="file-input" class="d-none" accept=".pdf,.jpg,.jpeg,.png,.tiff,.heic">
|
|
<button type="button" class="btn btn-primary" onclick="document.getElementById('file-input').click()">
|
|
<i class="fas fa-folder-open"></i> Sélectionner un fichier
|
|
</button>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<label for="id-dossier" class="form-label">ID Dossier *</label>
|
|
<input type="text" class="form-control" id="id-dossier" required>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="etude-id" class="form-label">ID Étude *</label>
|
|
<input type="text" class="form-control" id="etude-id" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-3">
|
|
<div class="col-md-6">
|
|
<label for="utilisateur-id" class="form-label">ID Utilisateur *</label>
|
|
<input type="text" class="form-control" id="utilisateur-id" required>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="type-document" class="form-label">Type de Document Attendu</label>
|
|
<select class="form-select" id="type-document">
|
|
<option value="">Auto-détection</option>
|
|
<option value="acte_vente">Acte de Vente</option>
|
|
<option value="acte_donation">Acte de Donation</option>
|
|
<option value="acte_succession">Acte de Succession</option>
|
|
<option value="cni">Carte d'Identité</option>
|
|
<option value="contrat">Contrat</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<button type="submit" class="btn btn-success btn-lg">
|
|
<i class="fas fa-play"></i> Traiter le Document
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Progress -->
|
|
<div class="progress-container mt-4">
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-striped progress-bar-animated"
|
|
role="progressbar" style="width: 0%"></div>
|
|
</div>
|
|
<div class="mt-2">
|
|
<small class="text-muted" id="progress-text">Initialisation...</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h6><i class="fas fa-info-circle"></i> Informations</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<h6>Formats supportés:</h6>
|
|
<ul class="list-unstyled">
|
|
<li><i class="fas fa-file-pdf text-danger"></i> PDF</li>
|
|
<li><i class="fas fa-file-image text-primary"></i> JPEG, PNG</li>
|
|
<li><i class="fas fa-file-image text-info"></i> TIFF, HEIC</li>
|
|
</ul>
|
|
|
|
<h6 class="mt-3">Traitement:</h6>
|
|
<ul class="list-unstyled">
|
|
<li><i class="fas fa-eye"></i> OCR et extraction de texte</li>
|
|
<li><i class="fas fa-tags"></i> Classification automatique</li>
|
|
<li><i class="fas fa-search"></i> Extraction d'entités</li>
|
|
<li><i class="fas fa-check-circle"></i> Vérifications externes</li>
|
|
<li><i class="fas fa-brain"></i> Analyse LLM</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Documents Section -->
|
|
<div id="documents-section" class="content-section" style="display: none;">
|
|
<h2 class="mb-4">
|
|
<i class="fas fa-file-alt text-primary"></i>
|
|
Documents Traités
|
|
</h2>
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<input type="text" class="form-control" id="search-documents" placeholder="Rechercher un document...">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<select class="form-select" id="filter-status">
|
|
<option value="">Tous les statuts</option>
|
|
<option value="processing">En cours</option>
|
|
<option value="completed">Terminé</option>
|
|
<option value="error">Erreur</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<select class="form-select" id="filter-type">
|
|
<option value="">Tous les types</option>
|
|
<option value="acte_vente">Acte de Vente</option>
|
|
<option value="acte_donation">Acte de Donation</option>
|
|
<option value="acte_succession">Acte de Succession</option>
|
|
<option value="cni">Carte d'Identité</option>
|
|
<option value="contrat">Contrat</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="documents-list">
|
|
<!-- Documents will be loaded here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Statistics Section -->
|
|
<div id="stats-section" class="content-section" style="display: none;">
|
|
<h2 class="mb-4">
|
|
<i class="fas fa-chart-bar text-primary"></i>
|
|
Statistiques
|
|
</h2>
|
|
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
<div class="card text-center">
|
|
<div class="card-body">
|
|
<i class="fas fa-file-alt fa-2x text-primary mb-2"></i>
|
|
<h4 id="total-documents">0</h4>
|
|
<p class="text-muted">Documents traités</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card text-center">
|
|
<div class="card-body">
|
|
<i class="fas fa-clock fa-2x text-warning mb-2"></i>
|
|
<h4 id="processing-documents">0</h4>
|
|
<p class="text-muted">En cours</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card text-center">
|
|
<div class="card-body">
|
|
<i class="fas fa-check-circle fa-2x text-success mb-2"></i>
|
|
<h4 id="success-rate">0%</h4>
|
|
<p class="text-muted">Taux de réussite</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card text-center">
|
|
<div class="card-body">
|
|
<i class="fas fa-stopwatch fa-2x text-info mb-2"></i>
|
|
<h4 id="avg-time">0s</h4>
|
|
<p class="text-muted">Temps moyen</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-4">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h6>Types de Documents</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<canvas id="document-types-chart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h6>Évolution Temporelle</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<canvas id="timeline-chart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Settings Section -->
|
|
<div id="settings-section" class="content-section" style="display: none;">
|
|
<h2 class="mb-4">
|
|
<i class="fas fa-cog text-primary"></i>
|
|
Paramètres
|
|
</h2>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h6>Configuration API</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<label for="api-url" class="form-label">URL de l'API</label>
|
|
<input type="text" class="form-control" id="api-url" value="http://localhost:8000">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="llm-model" class="form-label">Modèle LLM</label>
|
|
<select class="form-select" id="llm-model">
|
|
<option value="llama3:8b">Llama 3 8B</option>
|
|
<option value="mistral:7b">Mistral 7B</option>
|
|
</select>
|
|
</div>
|
|
<button class="btn btn-primary" onclick="testConnection()">
|
|
<i class="fas fa-plug"></i> Tester la Connexion
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h6>APIs Externes</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="enable-cadastre" checked>
|
|
<label class="form-check-label" for="enable-cadastre">
|
|
Cadastre
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="enable-georisques" checked>
|
|
<label class="form-check-label" for="enable-georisques">
|
|
Géorisques
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="enable-bodacc" checked>
|
|
<label class="form-check-label" for="enable-bodacc">
|
|
BODACC
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="enable-gel-avoirs" checked>
|
|
<label class="form-check-label" for="enable-gel-avoirs">
|
|
Gel des Avoirs
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Document Analysis Modal -->
|
|
<div class="modal fade" id="analysisModal" tabindex="-1">
|
|
<div class="modal-dialog modal-xl">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">
|
|
<i class="fas fa-search"></i> Analyse du Document
|
|
</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div id="analysis-content">
|
|
<!-- Analysis content will be loaded here -->
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
|
|
<button type="button" class="btn btn-primary" onclick="downloadReport()">
|
|
<i class="fas fa-download"></i> Télécharger le Rapport
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="chart.min.js"></script>
|
|
<script src="app.js"></script>
|
|
<script>
|
|
// Initialisation de l'application après chargement de app.js
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
if (typeof NotaryApp !== 'undefined') {
|
|
window.notaryApp = new NotaryApp();
|
|
} else {
|
|
console.error('NotaryApp class not found');
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|