nacim/Anonyme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

presidio ok v.1 button disposition

Browse Source
This commit is contained in:
nBiqoz
2025-07-28 23:14:26 +02:00
parent cb2c17ce2b
commit bc07ea6077
4 changed files with 172 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/components/AnonymizationInterface.tsx
View File

@@ -18,7 +18,7 @@ export const AnonymizationInterface = ({
const anonymizedTypes = new Set<string>();
// ✅ NOUVEAUX PATTERNS PRESIDIO
// Noms (PERSON)
if (outputText.includes("<PERSON>")) {
anonymizedTypes.add("Prénoms");
@@ -62,7 +62,7 @@ export const AnonymizationInterface = ({
}
// ✅ ANCIENS PATTERNS (pour compatibilité)
// Noms (anciens patterns [Nom1], [Nom2]...)
if (outputText.includes("[Nom1]") || outputText.includes("[Nom")) {
anonymizedTypes.add("Prénoms");
@@ -76,7 +76,10 @@ export const AnonymizationInterface = ({
}
// Téléphones (anciens patterns)
if (outputText.includes("[Téléphone1]") || outputText.includes("[Téléphone")) {
if (
outputText.includes("[Téléphone1]") ||
outputText.includes("[Téléphone")
) {
anonymizedTypes.add("Numéros de téléphone");
}

196
app/components/FileUploadComponent.tsx
View File

@@ -1,7 +1,15 @@
import { Upload, FileText, AlertTriangle } from "lucide-react";
import {
Upload,
FileText,
AlertTriangle,
Shield,
Copy,
Download,
} from "lucide-react";
import { SampleTextComponent } from "./SampleTextComponent";
import { SupportedDataTypes } from "./SupportedDataTypes";
import { AnonymizationInterface } from "./AnonymizationInterface";
import { highlightEntities } from "../utils/highlightEntities";
interface FileUploadComponentProps {
uploadedFile: File | null;
@@ -16,6 +24,8 @@ interface FileUploadComponentProps {
isLoadingFile?: boolean;
onRestart?: () => void;
outputText?: string;
copyToClipboard?: () => void;
downloadText?: () => void;
}
export const FileUploadComponent = ({
@@ -31,66 +41,156 @@ export const FileUploadComponent = ({
isLoadingFile = false,
onRestart,
outputText,
copyToClipboard,
downloadText,
}: FileUploadComponentProps) => {
// Si un fichier est uploadé ou qu'il y a du texte d'exemple, on affiche le preview
if (uploadedFile || (sourceText && sourceText.trim())) {
return (
<div className="w-full flex flex-col space-y-6">
{/* Preview du document avec en-tête simple */}
<div className="bg-white rounded-2xl border border-gray-100 overflow-hidden">
<div className="bg-orange-50 border-b border-orange-200 px-4 sm:px-6 py-4">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-3">
<div className="w-8 h-8 sm:w-10 sm:h-10 bg-orange-100 rounded-lg flex items-center justify-center">
<FileText className="h-4 w-4 sm:h-5 sm:w-5 text-orange-600" />
</div>
<div className="min-w-0 flex-1">
{uploadedFile ? (
<p className="text-xs sm:text-sm text-orange-600 truncate">
{uploadedFile.name} •{" "}
{(uploadedFile.size / 1024).toFixed(1)} KB
</p>
) : (
<p className="text-xs sm:text-sm text-orange-600">
Demo - Exemple de texte
</p>
)}
</div>
</div>
</div>
</div>
<div className="p-4 sm:p-6">
{/* Zone de texte avec limite de hauteur et scroll */}
<div className="bg-gray-50 border border-gray-200 rounded-lg p-3 sm:p-4 max-h-48 overflow-y-auto overflow-x-hidden">
{isLoadingFile ? (
<div className="flex items-center justify-center py-8">
{/* Si on a un résultat, afficher 2 blocs côte à côte */}
{outputText ? (
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{/* Preview du document original */}
<div className="bg-white rounded-2xl border border-gray-100 overflow-hidden">
<div className="bg-orange-50 border-b border-orange-200 px-4 sm:px-6 py-4">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-3">
<div className="animate-spin rounded-full h-5 w-5 sm:h-6 sm:w-6 border-b-2 border-[#f7ab6e]"></div>
<span className="text-xs sm:text-sm text-gray-600">
Chargement du fichier en cours...
</span>
<div className="w-8 h-8 sm:w-10 sm:h-10 bg-orange-100 rounded-lg flex items-center justify-center">
<FileText className="h-4 w-4 sm:h-5 sm:w-5 text-orange-600" />
</div>
<div className="min-w-0 flex-1">
{uploadedFile ? (
<p className="text-xs sm:text-sm text-orange-600 truncate">
{uploadedFile.name} •{" "}
{(uploadedFile.size / 1024).toFixed(1)} KB
</p>
) : (
<p className="text-xs sm:text-sm text-orange-600">
Demo - Exemple de texte
</p>
)}
</div>
</div>
</div>
) : (
<pre className="text-xs sm:text-sm text-gray-700 whitespace-pre-wrap font-mono break-words overflow-wrap-anywhere">
{sourceText || "Aucun contenu à afficher"}
</pre>
)}
</div>
<div className="p-1">
<div className="bg-gray-50 border border-gray-200 rounded-lg p-3 sm:p-4 max-h-72 overflow-y-auto overflow-x-hidden">
<pre className="text-xs sm:text-sm text-gray-700 whitespace-pre-wrap font-mono break-words overflow-wrap-anywhere">
{sourceText || "Aucun contenu à afficher"}
</pre>
</div>
</div>
</div>
{/* Disclaimer déplacé en dessous du texte */}
<div className="mt-4">
<div className="flex items-start gap-2 p-3 bg-[#f7ab6e] bg-opacity-10 border border-[#f7ab6e] border-opacity-30 rounded-lg">
<AlertTriangle className="h-4 w-4 text-[#f7ab6e] mt-0.5 flex-shrink-0" />
<p className="text-[10px] sm:text-[11px] text-[#092727] leading-relaxed">
Cet outil IA peut ne pas détecter toutes les informations
sensibles. Vérifiez le résultat avant de le partager.
</p>
{/* Bloc résultat anonymisé */}
<div className="bg-white rounded-2xl border border-gray-100 overflow-hidden">
<div className="bg-green-50 border-b border-green-200 px-4 sm:px-6 py-4">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-3">
<div className="w-8 h-8 sm:w-10 sm:h-10 bg-green-100 rounded-lg flex items-center justify-center">
<Shield className="h-4 w-4 sm:h-5 sm:w-5 text-green-600" />
</div>
<div className="min-w-0 flex-1">
<p className="text-xs sm:text-sm text-green-600">
Document anonymisé
</p>
</div>
</div>
{/* Boutons d'action */}
<div className="flex items-center gap-2">
{copyToClipboard && (
<button
onClick={copyToClipboard}
className="p-2 text-green-600 hover:text-green-700 hover:bg-green-100 rounded-lg transition-colors duration-200"
title="Copier le texte"
>
<Copy className="h-4 w-4" />
</button>
)}
{downloadText && (
<button
onClick={downloadText}
className="bg-green-600 hover:bg-green-700 text-white px-3 py-2 rounded-lg text-xs font-medium transition-colors duration-200 flex items-center space-x-1"
title="Télécharger le fichier"
>
<Download className="h-3 w-3" />
<span className="hidden sm:inline">Télécharger</span>
</button>
)}
</div>
</div>
</div>
<div className="p-1">
<div className="bg-gray-50 border border-gray-200 rounded-lg p-3 sm:p-4 max-h-72 overflow-y-auto overflow-x-hidden">
<div className="text-xs sm:text-sm text-gray-700 whitespace-pre-wrap break-words overflow-wrap-anywhere leading-relaxed">
{highlightEntities(
outputText || "Aucun contenu à afficher"
)}
</div>
</div>
</div>
</div>
</div>
</div>
) : (
/* Preview normal quand pas de résultat */
<div className="bg-white rounded-2xl border border-gray-100 overflow-hidden">
<div className="bg-orange-50 border-b border-orange-200 px-4 sm:px-6 py-4">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-3">
<div className="w-8 h-8 sm:w-10 sm:h-10 bg-orange-100 rounded-lg flex items-center justify-center">
<FileText className="h-4 w-4 sm:h-5 sm:w-5 text-orange-600" />
</div>
<div className="min-w-0 flex-1">
{uploadedFile ? (
<p className="text-xs sm:text-sm text-orange-600 truncate">
{uploadedFile.name} •{" "}
{(uploadedFile.size / 1024).toFixed(1)} KB
</p>
) : (
<p className="text-xs sm:text-sm text-orange-600">
Demo - Exemple de texte
</p>
)}
</div>
</div>
</div>
</div>
<div className="p-2 ">
{/* Zone de texte avec limite de hauteur et scroll */}
<div className="bg-gray-50 border border-gray-200 rounded-lg p-3 sm:p-4 max-h-48 overflow-y-auto overflow-x-hidden">
{isLoadingFile ? (
<div className="flex items-center justify-center py-8">
<div className="flex items-center space-x-3">
<div className="animate-spin rounded-full h-5 w-5 sm:h-6 sm:w-6 border-b-2 border-[#f7ab6e]"></div>
<span className="text-xs sm:text-sm text-gray-600">
Chargement du fichier en cours...
</span>
</div>
</div>
) : (
<pre className="text-xs sm:text-sm text-gray-700 whitespace-pre-wrap font-mono break-words overflow-wrap-anywhere">
{sourceText || "Aucun contenu à afficher"}
</pre>
)}
</div>
{/* Disclaimer déplacé en dessous du texte */}
<div className="mt-4">
<div className="flex items-start gap-2 p-3 bg-[#f7ab6e] bg-opacity-10 border border-[#f7ab6e] border-opacity-30 rounded-lg">
<AlertTriangle className="h-4 w-4 text-[#f7ab6e] mt-0.5 flex-shrink-0" />
<p className="text-[10px] sm:text-[11px] text-[#092727] leading-relaxed">
Cet outil IA peut ne pas détecter toutes les informations
sensibles. Vérifiez le résultat avant de le partager.
</p>
</div>
</div>
</div>
</div>
)}
{/* Boutons d'action - Responsive mobile */}
{canAnonymize && !isLoadingFile && (

17
app/components/ProgressBar.tsx
View File

@@ -1,4 +1,5 @@
import { Check, Upload, Eye, Shield } from "lucide-react";
import React from "react";
interface ProgressBarProps {
currentStep: number;
@@ -27,15 +28,15 @@ export const ProgressBar = ({ currentStep, steps }: ProgressBarProps) => {
return (
<div className="w-full max-w-2xl mx-auto mb-4 px-2">
<div className="flex items-center justify-center">
<div className="flex items-center justify-between w-full max-w-xs sm:max-w-md">
<div className="flex items-center w-full max-w-md">
{steps.map((step, index) => {
const stepNumber = index + 1;
const isCompleted = stepNumber < currentStep;
const isCurrent = stepNumber === currentStep;
return (
<div key={index} className="flex items-center">
{/* Step Circle */}
<React.Fragment key={index}>
{/* Step Circle and Label */}
<div className="flex flex-col items-center">
<div
className={`w-5 h-5 sm:w-6 sm:h-6 rounded-full flex items-center justify-center font-medium text-xs transition-all duration-300 ${
@@ -55,8 +56,8 @@ export const ProgressBar = ({ currentStep, steps }: ProgressBarProps) => {
: "text-gray-500"
}`}
style={{
wordBreak: 'break-word',
hyphens: 'auto'
wordBreak: "break-word",
hyphens: "auto",
}}
>
{step === "Anonymisation" ? (
@@ -72,9 +73,9 @@ export const ProgressBar = ({ currentStep, steps }: ProgressBarProps) => {
{/* Connector Line */}
{index < steps.length - 1 && (
<div className="flex-1 mx-2 sm:mx-4">
<div className="flex-1 flex items-center justify-center px-2 sm:px-4">
<div
className={`h-0.5 w-6 sm:w-12 transition-all duration-300 ${
className={`h-0.5 w-full max-w-[40px] sm:max-w-[60px] transition-all duration-300 ${
stepNumber < currentStep
? "bg-[#f7ab6e]"
: "bg-gray-200"
@@ -82,7 +83,7 @@ export const ProgressBar = ({ currentStep, steps }: ProgressBarProps) => {
/>
</div>
)}
</div>
</React.Fragment>
);
})}
</div>

33
app/page.tsx
View File

@@ -2,13 +2,12 @@
import { useState } from "react";
import { FileUploadComponent } from "./components/FileUploadComponent";
import { ResultPreviewComponent } from "./components/ResultPreviewComponent";
import { EntityMappingTable } from "./components/EntityMappingTable";
import { ProgressBar } from "./components/ProgressBar";
import { useFileHandler } from "./components/FileHandler";
import { useAnonymization } from "./components/AnonymizationLogic";
import { useDownloadActions } from "./components/DownloadActions";
import { highlightEntities } from "./utils/highlightEntities";
interface EntityMapping {
originalValue: string;
@@ -81,13 +80,13 @@ export default function Home() {
</div>
{/* Main Content */}
<div className="max-w-5xl mx-auto px-2 sm:px-4 py-4 sm:py-8 space-y-4">
<div className="max-w-6xl mx-auto px-2 sm:px-4 py-4 sm:py-8 space-y-4">
{/* Progress Bar */}
<ProgressBar currentStep={getCurrentStep()} steps={progressSteps} />
{/* Upload Section */}
<div className="bg-white rounded-2xl border border-gray-50 overflow-hidden">
<div className="p-3 sm:p-6">
<div className="p-1 sm:p-3">
<FileUploadComponent
uploadedFile={uploadedFile}
handleFileChange={handleFileChange}
@@ -104,28 +103,16 @@ export default function Home() {
isLoadingFile={isLoadingFile}
onRestart={handleRestart}
outputText={outputText}
copyToClipboard={copyToClipboard}
downloadText={downloadText}
/>
</div>
</div>
{/* Result Preview */}
{/* Entity Mapping Table - Seulement si outputText existe */}
{outputText && (
<div className="bg-white rounded-2xl border border-gray-100 overflow-hidden">
<div className="p-3 sm:p-6">
<ResultPreviewComponent
outputText={outputText}
copyToClipboard={copyToClipboard}
downloadText={downloadText}
highlightEntities={highlightEntities}
/>
</div>
</div>
)}
{/* Entity Mapping Table */}
{outputText && (
<div className="bg-white rounded-2xl border border-gray-100 overflow-hidden">
<div className="p-3 sm:p-6">
<div className="p-1 sm:p-3">
<EntityMappingTable mappings={entityMappings} />
</div>
</div>
@@ -166,11 +153,9 @@ export default function Home() {
</div>
</div>
) : line.startsWith("-") ? (
<div className="ml-4 text-blue-700">
• {line.substring(1).trim()}
</div>
<div className="ml-4 text-blue-700">{line}</div>
) : (
<div>{line}</div>
line
)}
</div>
))}