Spaces:
Running
Running
| import streamlit as st | |
| html=""" | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Fairness Tester</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <div class="container mx-auto p-6"> | |
| <h1 class="text-3xl font-bold text-center mb-6">Fairness Tester: Digital Practices</h1> | |
| <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> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Dark Patterns --> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <h2 class="text-xl font-semibold mb-2">Dark Patterns</h2> | |
| <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> | |
| <p class="text-gray-700 mb-4"><strong>Legal/Ethical Risk:</strong> Violates GDPR, DSA; undermines informed consent.</p> | |
| <button onclick="testDarkPatterns()" class="w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600">Test Dark Patterns</button> | |
| </div> | |
| <!-- Addictive Design --> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <h2 class="text-xl font-semibold mb-2">Addictive Design</h2> | |
| <p class="text-gray-700 mb-4"><strong>Psychological Basis:</strong> Dopamine loops via variable-ratio reinforcement (e.g., loot boxes).</p> | |
| <p class="text-gray-700 mb-4"><strong>Legal/Ethical Risk:</strong> Child safety concerns; promotes compulsive behavior.</p> | |
| <button onclick="testAddictiveDesign()" class="w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600">Test Addictive Design</button> | |
| </div> | |
| <!-- Personalized Targeting --> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <h2 class="text-xl font-semibold mb-2">Personalized Targeting</h2> | |
| <p class="text-gray-700 mb-4"><strong>Psychological Basis:</strong> AI exploits emotional/financial vulnerabilities (e.g., sadness, debt).</p> | |
| <p class="text-gray-700 mb-4"><strong>Legal/Ethical Risk:</strong> Violates autonomy; exacerbates depression, addiction.</p> | |
| <button onclick="testPersonalizedTargeting()" class="w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600">Test Personalized Targeting</button> | |
| </div> | |
| <!-- Subscription Difficulty --> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <h2 class="text-xl font-semibold mb-2">Subscription Difficulty</h2> | |
| <p class="text-gray-700 mb-4"><strong>Psychological Basis:</strong> Exploits status quo bias; high exit costs trap users.</p> | |
| <p class="text-gray-700 mb-4"><strong>Legal/Ethical Risk:</strong> Violates consumer rights; disempowers users.</p> | |
| <button onclick="testSubscriptionDifficulty()" class="w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600">Test Subscription Difficulty</button> | |
| </div> | |
| <!-- Influencer Misuse --> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <h2 class="text-xl font-semibold mb-2">Influencer Misuse</h2> | |
| <p class="text-gray-700 mb-4"><strong>Psychological Basis:</strong> Exploits parasocial trust; blurs authentic vs. paid content.</p> | |
| <p class="text-gray-700 mb-4"><strong>Legal/Ethical Risk:</strong> Breaches disclosure laws; harms minors, health claims.</p> | |
| <button onclick="testInfluencerMisuse()" class="w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600">Test Influencer Misuse</button> | |
| </div> | |
| </div> | |
| <!-- Test Results Output --> | |
| <div id="results" class="mt-8 bg-white p-6 rounded-lg shadow-md hidden"> | |
| <h2 class="text-2xl font-semibold mb-4">Test Results</h2> | |
| <div id="results-content" class="text-gray-700"></div> | |
| </div> | |
| </div> | |
| <script> | |
| function showResults(title, content) { | |
| const resultsDiv = document.getElementById('results'); | |
| const resultsContent = document.getElementById('results-content'); | |
| resultsContent.innerHTML = `<h3 class="text-xl font-bold mb-2">${title}</h3>${content}`; | |
| resultsDiv.classList.remove('hidden'); | |
| window.scrollTo({ top: resultsDiv.offsetTop, behavior: 'smooth' }); | |
| } | |
| function testDarkPatterns() { | |
| const testData = { | |
| scenario: "A website shows a 'Only 2 items left!' message for a product, despite ample stock.", | |
| psychologicalImpact: "Triggers scarcity bias, prompting rushed purchases.", | |
| ethicalIssue: "Misleads users, violating informed consent.", | |
| legalRisk: "Potential GDPR/DSA violation for deceptive practices." | |
| }; | |
| const content = ` | |
| <p><strong>Scenario:</strong> ${testData.scenario}</p> | |
| <p><strong>Psychological Impact:</strong> ${testData.psychologicalImpact}</p> | |
| <p><strong>Ethical Issue:</strong> ${testData.ethicalIssue}</p> | |
| <p><strong>Legal Risk:</strong> ${testData.legalRisk}</p> | |
| <p><strong>Test Outcome:</strong> The design manipulates user behavior by creating false urgency, reducing rational decision-making.</p> | |
| `; | |
| showResults("Dark Patterns Test", content); | |
| } | |
| function testAddictiveDesign() { | |
| const testData = { | |
| scenario: "A mobile game offers random rewards (loot boxes) after completing tasks.", | |
| psychologicalImpact: "Variable-ratio reinforcement triggers dopamine release, encouraging prolonged play.", | |
| ethicalIssue: "Promotes compulsive behavior, especially in children.", | |
| legalRisk: "May violate child safety regulations or gambling laws." | |
| }; | |
| const content = ` | |
| <p><strong>Scenario:</strong> ${testData.scenario}</p> | |
| <p><strong>Psychological Impact:</strong> ${testData.psychologicalImpact}</p> | |
| <p><strong>Ethical Issue:</strong> ${testData.ethicalIssue}</p> | |
| <p><strong>Legal Risk:</strong> ${testData.legalRisk}</p> | |
| <p><strong>Test Outcome:</strong> The design fosters addiction-like behavior, reducing user control over time spent.</p> | |
| `; | |
| showResults("Addictive Design Test", content); | |
| } | |
| function testPersonalizedTargeting() { | |
| const testData = { | |
| scenario: "An AI system detects a user is sad and targets them with impulsive purchase ads.", | |
| psychologicalImpact: "Exploits emotional vulnerability, reducing autonomy.", | |
| ethicalIssue: "Harms mental health and promotes unhealthy coping mechanisms.", | |
| legalRisk: "May violate data protection laws or ethical AI guidelines." | |
| }; | |
| const content = ` | |
| <p><strong>Scenario:</strong> ${testData.scenario}</p> | |
| <p><strong>Psychological Impact:</strong> ${testData.psychologicalImpact}</p> | |
| <p><strong>Ethical Issue:</strong> ${testData.ethicalIssue}</p> | |
| <p><strong>Legal Risk:</strong> ${testData.legalRisk}</p> | |
| <p><strong>Test Outcome:</strong> The targeting exploits a moment of weakness, amplifying harm to the user.</p> | |
| `; | |
| showResults("Personalized Targeting Test", content); | |
| } | |
| function testSubscriptionDifficulty() { | |
| const testData = { | |
| scenario: "A subscription service hides the cancel button and requires multiple steps to unsubscribe.", | |
| psychologicalImpact: "Exploits status quo bias, making users feel trapped.", | |
| ethicalIssue: "Disempowers users, undermining financial autonomy.", | |
| legalRisk: "Violates consumer protection laws on clear cancellation processes." | |
| }; | |
| const content = ` | |
| <p><strong>Scenario:</strong> ${testData.scenario}</p> | |
| <p><strong>Psychological Impact:</strong> ${testData.psychologicalImpact}</p> | |
| <p><strong>Ethical Issue:</strong> ${testData.ethicalIssue}</p> | |
| <p><strong>Legal Risk:</strong> ${testData.legalRisk}</p> | |
| <p><strong>Test Outcome:</strong> The design intentionally frustrates users, leading to unwanted charges.</p> | |
| `; | |
| showResults("Subscription Difficulty Test", content); | |
| } | |
| function testInfluencerMisuse() { | |
| const testData = { | |
| scenario: "An influencer promotes a health product without disclosing it's a paid ad.", | |
| psychologicalImpact: "Exploits parasocial trust, leading to misguided purchases.", | |
| ethicalIssue: "Deceives audience, especially vulnerable groups like minors.", | |
| legalRisk: "Breaches advertising disclosure laws (e.g., FTC guidelines)." | |
| }; | |
| const content = ` | |
| <p><strong>Scenario:</strong> ${testData.scenario}</p> | |
| <p><strong>Psychological Impact:</strong> ${testData.psychologicalImpact}</p> | |
| <p><strong>Ethical Issue:</strong> ${testData.ethicalIssue}</p> | |
| <p><strong>Legal Risk:</strong> ${testData.legalRisk}</p> | |
| <p><strong>Test Outcome:</strong> The lack of transparency manipulates trust, risking consumer harm.</p> | |
| `; | |
| showResults("Influencer Misuse Test", content); | |
| } | |
| </script> | |
| </body> | |
| </html> | |
| """ | |
| st.html(html) |