Hugging Face's logo

Spaces:
yujisium
/
fintechdarkpatterns
Runtime error

App Files Community
fintechdarkpatterns
File size: 2,847 Bytes
5752a28
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
import { Download, FileText } from 'lucide-react';
import { Button } from './ui/button';
import { AnalysisData } from '../types/analysis';

interface ExportReportProps {
  data: AnalysisData;
}

export function ExportReport({ data }: ExportReportProps) {
  const generateReport = () => {
    const reportContent = `

FINTECH DARK PATTERN DETECTION REPORT

Generated: ${new Date(data.timestamp).toLocaleString()}

=======================================================



EXECUTIVE SUMMARY

-----------------

Trust Score: ${data.overallScore}/100

Risk Level: ${data.riskLevel.toUpperCase()}

Dark Patterns Detected: ${data.darkPatterns.length}

CFPB Compliance: ${data.complianceReport.cfpbAlignment}%



DETECTED DARK PATTERNS

-----------------------

${data.darkPatterns.map((pattern, index) => `

${index + 1}. ${pattern.type} [${pattern.severity.toUpperCase()}]

   Description: ${pattern.description}

   CFPB Violation: ${pattern.cfpbViolation}

   Recommendation: ${pattern.recommendation}

   Confidence: ${pattern.confidence}%

   Location: (${pattern.location.x}%, ${pattern.location.y}%)

`).join('\n')}



CFPB COMPLIANCE ISSUES

----------------------

${data.complianceReport.issues.map((issue, index) => `${index + 1}. ${issue}`).join('\n')}



RECOMMENDATIONS

---------------

${data.complianceReport.recommendations.map((rec, index) => `${index + 1}. ${rec}`).join('\n')}



=======================================================

This report was generated by the Fintech Dark Pattern Detector

using AI-powered XAI analysis and CFPB compliance heuristics.

    `.trim();

    // Create and download the report
    const blob = new Blob([reportContent], { type: 'text/plain' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `dark-pattern-report-${Date.now()}.txt`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  };

  const generateJSON = () => {
    const jsonContent = JSON.stringify(data, null, 2);
    const blob = new Blob([jsonContent], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `dark-pattern-report-${Date.now()}.json`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  };

  return (
    <div className="flex gap-3">

      <Button onClick={generateReport} variant="outline" size="sm">

        <FileText className="w-4 h-4 mr-2" />

        Export Report (TXT)

      </Button>

      <Button onClick={generateJSON} variant="outline" size="sm">

        <Download className="w-4 h-4 mr-2" />

        Export Data (JSON)

      </Button>

    </div>
  );
}