Hugging Face's logo

Spaces:
awacke1
/
DigitalFairnessTester
Sleeping

App Files Community
awacke1 commited on
Commit
7c25178
·
verified ·
1 Parent(s): 7a4b758

Create app.py

Browse files
Files changed (1) hide show
  1. app.py +164 -0
app.py ADDED
@@ -0,0 +1,164 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import streamlit as st
2
+ st.markdown("""
3
+
4
+ <!DOCTYPE html>
5
+ <html lang="en">
6
+ <head>
7
+ <meta charset="UTF-8">
8
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
9
+ <title>Fairness Tester</title>
10
+ <script src="https://cdn.tailwindcss.com"></script>
11
+ </head>
12
+ <body class="bg-gray-100 font-sans">
13
+ <div class="container mx-auto p-6">
14
+ <h1 class="text-3xl font-bold text-center mb-6">Fairness Tester: Digital Practices</h1>
15
+ <p class="text-center text-gray-600 mb-8">Click a button to test a digital practice with sample data and see its psychological, ethical, and legal implications.</p>
16
+
17
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
18
+ <!-- Dark Patterns -->
19
+ <div class="bg-white p-6 rounded-lg shadow-md">
20
+ <h2 class="text-xl font-semibold mb-2">Dark Patterns</h2>
21
+ <p class="text-gray-700 mb-4"><strong>Psychological Basis:</strong> Exploits cognitive biases like scarcity or urgency (e.g., fake "limited-time offer").</p>
22
+ <p class="text-gray-700 mb-4"><strong>Legal/Ethical Risk:</strong> Violates GDPR, DSA; undermines informed consent.</p>
23
+ <button onclick="testDarkPatterns()" class="w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600">Test Dark Patterns</button>
24
+ </div>
25
+
26
+ <!-- Addictive Design -->
27
+ <div class="bg-white p-6 rounded-lg shadow-md">
28
+ <h2 class="text-xl font-semibold mb-2">Addictive Design</h2>
29
+ <p class="text-gray-700 mb-4"><strong>Psychological Basis:</strong> Dopamine loops via variable-ratio reinforcement (e.g., loot boxes).</p>
30
+ <p class="text-gray-700 mb-4"><strong>Legal/Ethical Risk:</strong> Child safety concerns; promotes compulsive behavior.</p>
31
+ <button onclick="testAddictiveDesign()" class="w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600">Test Addictive Design</button>
32
+ </div>
33
+
34
+ <!-- Personalized Targeting -->
35
+ <div class="bg-white p-6 rounded-lg shadow-md">
36
+ <h2 class="text-xl font-semibold mb-2">Personalized Targeting</h2>
37
+ <p class="text-gray-700 mb-4"><strong>Psychological Basis:</strong> AI exploits emotional/financial vulnerabilities (e.g., sadness, debt).</p>
38
+ <p class="text-gray-700 mb-4"><strong>Legal/Ethical Risk:</strong> Violates autonomy; exacerbates depression, addiction.</p>
39
+ <button onclick="testPersonalizedTargeting()" class="w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600">Test Personalized Targeting</button>
40
+ </div>
41
+
42
+ <!-- Subscription Difficulty -->
43
+ <div class="bg-white p-6 rounded-lg shadow-md">
44
+ <h2 class="text-xl font-semibold mb-2">Subscription Difficulty</h2>
45
+ <p class="text-gray-700 mb-4"><strong>Psychological Basis:</strong> Exploits status quo bias; high exit costs trap users.</p>
46
+ <p class="text-gray-700 mb-4"><strong>Legal/Ethical Risk:</strong> Violates consumer rights; disempowers users.</p>
47
+ <button onclick="testSubscriptionDifficulty()" class="w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600">Test Subscription Difficulty</button>
48
+ </div>
49
+
50
+ <!-- Influencer Misuse -->
51
+ <div class="bg-white p-6 rounded-lg shadow-md">
52
+ <h2 class="text-xl font-semibold mb-2">Influencer Misuse</h2>
53
+ <p class="text-gray-700 mb-4"><strong>Psychological Basis:</strong> Exploits parasocial trust; blurs authentic vs. paid content.</p>
54
+ <p class="text-gray-700 mb-4"><strong>Legal/Ethical Risk:</strong> Breaches disclosure laws; harms minors, health claims.</p>
55
+ <button onclick="testInfluencerMisuse()" class="w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600">Test Influencer Misuse</button>
56
+ </div>
57
+ </div>
58
+
59
+ <!-- Test Results Output -->
60
+ <div id="results" class="mt-8 bg-white p-6 rounded-lg shadow-md hidden">
61
+ <h2 class="text-2xl font-semibold mb-4">Test Results</h2>
62
+ <div id="results-content" class="text-gray-700"></div>
63
+ </div>
64
+ </div>
65
+
66
+ <script>
67
+ function showResults(title, content) {
68
+ const resultsDiv = document.getElementById('results');
69
+ const resultsContent = document.getElementById('results-content');
70
+ resultsContent.innerHTML = `<h3 class="text-xl font-bold mb-2">${title}</h3>${content}`;
71
+ resultsDiv.classList.remove('hidden');
72
+ window.scrollTo({ top: resultsDiv.offsetTop, behavior: 'smooth' });
73
+ }
74
+
75
+ function testDarkPatterns() {
76
+ const testData = {
77
+ scenario: "A website shows a 'Only 2 items left!' message for a product, despite ample stock.",
78
+ psychologicalImpact: "Triggers scarcity bias, prompting rushed purchases.",
79
+ ethicalIssue: "Misleads users, violating informed consent.",
80
+ legalRisk: "Potential GDPR/DSA violation for deceptive practices."
81
+ };
82
+ const content = `
83
+ <p><strong>Scenario:</strong> ${testData.scenario}</p>
84
+ <p><strong>Psychological Impact:</strong> ${testData.psychologicalImpact}</p>
85
+ <p><strong>Ethical Issue:</strong> ${testData.ethicalIssue}</p>
86
+ <p><strong>Legal Risk:</strong> ${testData.legalRisk}</p>
87
+ <p><strong>Test Outcome:</strong> The design manipulates user behavior by creating false urgency, reducing rational decision-making.</p>
88
+ `;
89
+ showResults("Dark Patterns Test", content);
90
+ }
91
+
92
+ function testAddictiveDesign() {
93
+ const testData = {
94
+ scenario: "A mobile game offers random rewards (loot boxes) after completing tasks.",
95
+ psychologicalImpact: "Variable-ratio reinforcement triggers dopamine release, encouraging prolonged play.",
96
+ ethicalIssue: "Promotes compulsive behavior, especially in children.",
97
+ legalRisk: "May violate child safety regulations or gambling laws."
98
+ };
99
+ const content = `
100
+ <p><strong>Scenario:</strong> ${testData.scenario}</p>
101
+ <p><strong>Psychological Impact:</strong> ${testData.psychologicalImpact}</p>
102
+ <p><strong>Ethical Issue:</strong> ${testData.ethicalIssue}</p>
103
+ <p><strong>Legal Risk:</strong> ${testData.legalRisk}</p>
104
+ <p><strong>Test Outcome:</strong> The design fosters addiction-like behavior, reducing user control over time spent.</p>
105
+ `;
106
+ showResults("Addictive Design Test", content);
107
+ }
108
+
109
+ function testPersonalizedTargeting() {
110
+ const testData = {
111
+ scenario: "An AI system detects a user is sad and targets them with impulsive purchase ads.",
112
+ psychologicalImpact: "Exploits emotional vulnerability, reducing autonomy.",
113
+ ethicalIssue: "Harms mental health and promotes unhealthy coping mechanisms.",
114
+ legalRisk: "May violate data protection laws or ethical AI guidelines."
115
+ };
116
+ const content = `
117
+ <p><strong>Scenario:</strong> ${testData.scenario}</p>
118
+ <p><strong>Psychological Impact:</strong> ${testData.psychologicalImpact}</p>
119
+ <p><strong>Ethical Issue:</strong> ${testData.ethicalIssue}</p>
120
+ <p><strong>Legal Risk:</strong> ${testData.legalRisk}</p>
121
+ <p><strong>Test Outcome:</strong> The targeting exploits a moment of weakness, amplifying harm to the user.</p>
122
+ `;
123
+ showResults("Personalized Targeting Test", content);
124
+ }
125
+
126
+ function testSubscriptionDifficulty() {
127
+ const testData = {
128
+ scenario: "A subscription service hides the cancel button and requires multiple steps to unsubscribe.",
129
+ psychologicalImpact: "Exploits status quo bias, making users feel trapped.",
130
+ ethicalIssue: "Disempowers users, undermining financial autonomy.",
131
+ legalRisk: "Violates consumer protection laws on clear cancellation processes."
132
+ };
133
+ const content = `
134
+ <p><strong>Scenario:</strong> ${testData.scenario}</p>
135
+ <p><strong>Psychological Impact:</strong> ${testData.psychologicalImpact}</p>
136
+ <p><strong>Ethical Issue:</strong> ${testData.ethicalIssue}</p>
137
+ <p><strong>Legal Risk:</strong> ${testData.legalRisk}</p>
138
+ <p><strong>Test Outcome:</strong> The design intentionally frustrates users, leading to unwanted charges.</p>
139
+ `;
140
+ showResults("Subscription Difficulty Test", content);
141
+ }
142
+
143
+ function testInfluencerMisuse() {
144
+ const testData = {
145
+ scenario: "An influencer promotes a health product without disclosing it's a paid ad.",
146
+ psychologicalImpact: "Exploits parasocial trust, leading to misguided purchases.",
147
+ ethicalIssue: "Deceives audience, especially vulnerable groups like minors.",
148
+ legalRisk: "Breaches advertising disclosure laws (e.g., FTC guidelines)."
149
+ };
150
+ const content = `
151
+ <p><strong>Scenario:</strong> ${testData.scenario}</p>
152
+ <p><strong>Psychological Impact:</strong> ${testData.psychologicalImpact}</p>
153
+ <p><strong>Ethical Issue:</strong> ${testData.ethicalIssue}</p>
154
+ <p><strong>Legal Risk:</strong> ${testData.legalRisk}</p>
155
+ <p><strong>Test Outcome:</strong> The lack of transparency manipulates trust, risking consumer harm.</p>
156
+ `;
157
+ showResults("Influencer Misuse Test", content);
158
+ }
159
+ </script>
160
+ </body>
161
+ </html>
162
+
163
+
164
+ """