Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Bullshit Detector</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| .gauge { | |
| --percentage: 0; | |
| --fill-color: #10B981; | |
| position: relative; | |
| height: 120px; | |
| width: 120px; | |
| border-radius: 50%; | |
| background: conic-gradient(var(--fill-color) calc(var(--percentage) * 1%), #E5E7EB 0); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.5s ease; | |
| } | |
| .gauge::before { | |
| content: ""; | |
| position: absolute; | |
| height: 80%; | |
| width: 80%; | |
| background-color: white; | |
| border-radius: 50%; | |
| } | |
| .gauge-text { | |
| position: relative; | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| color: #1F2937; | |
| } | |
| .highlight-bullshit { | |
| background-color: rgba(239, 68, 68, 0.2); | |
| border-left: 3px solid #EF4444; | |
| padding-left: 4px; | |
| } | |
| .highlight-neutral { | |
| background-color: rgba(156, 163, 175, 0.2); | |
| border-left: 3px solid #9CA3AF; | |
| padding-left: 4px; | |
| } | |
| .highlight-truth { | |
| background-color: rgba(16, 185, 129, 0.2); | |
| border-left: 3px solid #10B981; | |
| padding-left: 4px; | |
| } | |
| .floating-card { | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .text-display { | |
| min-height: 200px; | |
| max-height: 300px; | |
| overflow-y: auto; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <div class="container mx-auto px-4 py-12"> | |
| <div class="max-w-4xl mx-auto"> | |
| <!-- Header --> | |
| <div class="text-center mb-12"> | |
| <h1 class="text-4xl font-bold text-gray-800 mb-2"> | |
| <i class="fas fa-brain mr-2 text-indigo-600"></i> Bullshit Detector | |
| </h1> | |
| <p class="text-lg text-gray-600"> | |
| Analyze any text for vague language, unsubstantiated claims, and rhetorical deception | |
| </p> | |
| </div> | |
| <!-- Main Card --> | |
| <div class="bg-white rounded-xl floating-card overflow-hidden"> | |
| <div class="p-6 md:p-8"> | |
| <!-- Input Section --> | |
| <div class="mb-8"> | |
| <label for="text-input" class="block text-sm font-medium text-gray-700 mb-2"> | |
| Enter text to analyze: | |
| </label> | |
| <div class="relative"> | |
| <textarea | |
| id="text-input" | |
| rows="6" | |
| class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition" | |
| placeholder="Paste or type the text you want to analyze here..."></textarea> | |
| <button | |
| id="analyze-btn" | |
| class="absolute right-3 bottom-3 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center transition"> | |
| <i class="fas fa-search mr-2"></i> Analyze | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Results Section (Initially Hidden) --> | |
| <div id="results-section" class="hidden"> | |
| <div class="border-t border-gray-200 pt-6"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-6">Analysis Results</h2> | |
| <!-- Score Summary --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> | |
| <!-- Gauge --> | |
| <div class="flex flex-col items-center"> | |
| <div class="gauge mb-4"> | |
| <span class="gauge-text" id="score-percentage">0%</span> | |
| </div> | |
| <div id="verdict" class="text-xl font-bold text-center px-4 py-2 rounded-lg"> | |
| <span class="text-gray-500">Submit text to analyze</span> | |
| </div> | |
| </div> | |
| <!-- Stats --> | |
| <div class="col-span-2"> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <div class="text-sm font-medium text-gray-500 mb-1">Vagueness</div> | |
| <div class="flex items-center"> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5 mr-2"> | |
| <div id="vagueness-bar" class="bg-yellow-500 h-2.5 rounded-full" style="width: 0%"></div> | |
| </div> | |
| <span id="vagueness-score" class="text-sm font-medium">0%</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <div class="text-sm font-medium text-gray-500 mb-1">Emotionality</div> | |
| <div class="flex items-center"> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5 mr-2"> | |
| <div id="emotionality-bar" class="bg-pink-500 h-2.5 rounded-full" style="width: 0%"></div> | |
| </div> | |
| <span id="emotionality-score" class="text-sm font-medium">0%</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <div class="text-sm font-medium text-gray-500 mb-1">Complexity</div> | |
| <div class="flex items-center"> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5 mr-2"> | |
| <div id="complexity-bar" class="bg-purple-500 h-2.5 rounded-full" style="width: 0%"></div> | |
| </div> | |
| <span id="complexity-score" class="text-sm font-medium">0%</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <div class="text-sm font-medium text-gray-500 mb-1">Evidence</div> | |
| <div class="flex items-center"> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5 mr-2"> | |
| <div id="evidence-bar" class="bg-blue-500 h-2.5 rounded-full" style="width: 0%"></div> | |
| </div> | |
| <span id="evidence-score" class="text-sm font-medium">0%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Highlighted Text --> | |
| <div class="mb-8"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <h3 class="text-lg font-medium text-gray-800">Highlighted Text</h3> | |
| <div class="flex space-x-2"> | |
| <span class="inline-flex items-center text-sm"> | |
| <span class="w-3 h-3 rounded-full bg-red-500 mr-1"></span> | |
| Bullshit indicators | |
| </span> | |
| <span class="inline-flex items-center text-sm"> | |
| <span class="w-3 h-3 rounded-full bg-green-500 mr-1"></span> | |
| Truth indicators | |
| </span> | |
| </div> | |
| </div> | |
| <div id="highlighted-text" class="bg-gray-50 p-4 rounded-lg text-display"> | |
| <p class="text-gray-500 italic">Analyzed text will appear here with highlighted indicators...</p> | |
| </div> | |
| </div> | |
| <!-- Warning Signs --> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-medium text-gray-800 mb-3">Detected Warning Signs</h3> | |
| <div id="warning-signs" class="grid grid-cols-1 md:grid-cols-2 gap-3"> | |
| <!-- Will be populated by JavaScript --> | |
| </div> | |
| </div> | |
| <!-- Analysis Details --> | |
| <div class="bg-indigo-50 p-4 rounded-lg"> | |
| <h3 class="text-lg font-medium text-indigo-800 mb-2">How This Works</h3> | |
| <p class="text-indigo-700 text-sm"> | |
| The Bullshit Detector analyzes text for patterns associated with deceptive or misleading communication, | |
| including vague language, emotional manipulation, lack of evidence, and rhetorical tricks. The score represents | |
| the likelihood that the text contains significant elements of "bullshit" based on linguistic analysis. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sample Prompts --> | |
| <div class="mt-8"> | |
| <h3 class="text-lg font-medium text-gray-800 mb-3">Try analyzing these examples:</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-3"> | |
| <button class="sample-prompt bg-gray-100 hover:bg-gray-200 text-gray-800 px-4 py-2 rounded-lg text-sm transition"> | |
| "This revolutionary product will change your life forever with its proprietary technology." | |
| </button> | |
| <button class="sample-prompt bg-gray-100 hover:bg-gray-200 text-gray-800 px-4 py-2 rounded-lg text-sm transition"> | |
| "Studies show that most experts agree this is the best solution available today." | |
| </button> | |
| <button class="sample-prompt bg-gray-100 hover:bg-gray-200 text-gray-800 px-4 py-2 rounded-lg text-sm transition"> | |
| "The data clearly demonstrates beyond any doubt that our approach is superior." | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Elements | |
| const analyzeBtn = document.getElementById('analyze-btn'); | |
| const textInput = document.getElementById('text-input'); | |
| const resultsSection = document.getElementById('results-section'); | |
| const scorePercentage = document.getElementById('score-percentage'); | |
| const verdict = document.getElementById('verdict'); | |
| const gauge = document.querySelector('.gauge'); | |
| const highlightedText = document.getElementById('highlighted-text'); | |
| const warningSigns = document.getElementById('warning-signs'); | |
| // Metrics elements | |
| const vaguenessBar = document.getElementById('vagueness-bar'); | |
| const vaguenessScore = document.getElementById('vagueness-score'); | |
| const emotionalityBar = document.getElementById('emotionality-bar'); | |
| const emotionalityScore = document.getElementById('emotionality-score'); | |
| const complexityBar = document.getElementById('complexity-bar'); | |
| const complexityScore = document.getElementById('complexity-score'); | |
| const evidenceBar = document.getElementById('evidence-bar'); | |
| const evidenceScore = document.getElementById('evidence-score'); | |
| // Sample prompts | |
| const samplePrompts = document.querySelectorAll('.sample-prompt'); | |
| // Analyze button click handler | |
| analyzeBtn.addEventListener('click', function() { | |
| const text = textInput.value.trim(); | |
| if (text.length === 0) { | |
| alert('Please enter some text to analyze.'); | |
| return; | |
| } | |
| // Show loading state | |
| analyzeBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Analyzing...'; | |
| analyzeBtn.disabled = true; | |
| // Simulate API call with timeout | |
| setTimeout(function() { | |
| analyzeText(text); | |
| // Restore button state | |
| analyzeBtn.innerHTML = '<i class="fas fa-search mr-2"></i> Analyze'; | |
| analyzeBtn.disabled = false; | |
| // Show results | |
| resultsSection.classList.remove('hidden'); | |
| }, 1500); | |
| }); | |
| // Sample prompt click handlers | |
| samplePrompts.forEach(prompt => { | |
| prompt.addEventListener('click', function() { | |
| textInput.value = this.textContent; | |
| }); | |
| }); | |
| // Text analysis function (simulated) | |
| function analyzeText(text) { | |
| // This is a simulation - in a real app, you'd call an API here | |
| // Generate random scores for demo purposes | |
| const bullshitScore = Math.min(Math.floor(Math.random() * 30) + | |
| (text.toLowerCase().includes('revolutionary') ? 30 : 0) + | |
| (text.toLowerCase().includes('proprietary') ? 20 : 0) + | |
| (text.toLowerCase().includes('change your life') ? 25 : 0) + | |
| (text.toLowerCase().includes('studies show') ? 15 : 0) + | |
| (text.toLowerCase().includes('experts agree') ? 20 : 0) + | |
| (text.toLowerCase().includes('beyond any doubt') ? 25 : 0), 100); | |
| const vagueness = Math.min(bullshitScore + Math.floor(Math.random() * 20) - 10, 100); | |
| const emotionality = Math.min(bullshitScore + Math.floor(Math.random() * 15) - 5, 100); | |
| const complexity = Math.min(bullshitScore + Math.floor(Math.random() * 10) - 5, 100); | |
| const evidence = 100 - Math.min(bullshitScore + Math.floor(Math.random() * 15), 100); | |
| // Update UI with scores | |
| updateScores(bullshitScore, vagueness, emotionality, complexity, evidence); | |
| // Highlight text | |
| highlightText(text, bullshitScore); | |
| // Show warning signs | |
| showWarningSigns(text, bullshitScore); | |
| } | |
| function updateScores(bullshitScore, vagueness, emotionality, complexity, evidence) { | |
| // Update gauge | |
| gauge.style.setProperty('--percentage', bullshitScore); | |
| scorePercentage.textContent = bullshitScore + '%'; | |
| // Update gauge color based on score | |
| if (bullshitScore > 70) { | |
| gauge.style.setProperty('--fill-color', '#EF4444'); | |
| verdict.innerHTML = '<span class="text-red-600">Strong Bullshit Indicators</span>'; | |
| } else if (bullshitScore > 40) { | |
| gauge.style.setProperty('--fill-color', '#F59E0B'); | |
| verdict.innerHTML = '<span class="text-yellow-600">Possible Bullshit</span>'; | |
| } else { | |
| gauge.style.setProperty('--fill-color', '#10B981'); | |
| verdict.innerHTML = '<span class="text-green-600">Likely Truthful</span>'; | |
| } | |
| // Update metric bars | |
| vaguenessBar.style.width = vagueness + '%'; | |
| vaguenessScore.textContent = vagueness + '%'; | |
| emotionalityBar.style.width = emotionality + '%'; | |
| emotionalityScore.textContent = emotionality + '%'; | |
| complexityBar.style.width = complexity + '%'; | |
| complexityScore.textContent = complexity + '%'; | |
| evidenceBar.style.width = evidence + '%'; | |
| evidenceScore.textContent = evidence + '%'; | |
| } | |
| function highlightText(text, bullshitScore) { | |
| // Split text into sentences for highlighting | |
| const sentences = text.split(/(?<=[.!?])\s+/); | |
| let highlightedHTML = ''; | |
| sentences.forEach(sentence => { | |
| // Determine if this sentence is likely bullshit | |
| const sentenceScore = Math.min( | |
| bullshitScore + | |
| (sentence.toLowerCase().includes('revolutionary') ? 30 : 0) + | |
| (sentence.toLowerCase().includes('proprietary') ? 20 : 0) + | |
| (sentence.toLowerCase().includes('change your life') ? 25 : 0) + | |
| (sentence.toLowerCase().includes('studies show') ? 15 : 0) + | |
| (sentence.toLowerCase().includes('experts agree') ? 20 : 0) + | |
| (sentence.toLowerCase().includes('beyond any doubt') ? 25 : 0) + | |
| (sentence.toLowerCase().includes('everyone knows') ? 20 : 0), 100); | |
| // Add appropriate highlighting | |
| if (sentenceScore > 70) { | |
| highlightedHTML += `<span class="highlight-bullshit">${sentence}</span> `; | |
| } else if (sentenceScore > 40) { | |
| highlightedHTML += `<span class="highlight-neutral">${sentence}</span> `; | |
| } else { | |
| highlightedHTML += `<span class="highlight-truth">${sentence}</span> `; | |
| } | |
| }); | |
| highlightedText.innerHTML = highlightedHTML; | |
| } | |
| function showWarningSigns(text, bullshitScore) { | |
| // Clear previous warnings | |
| warningSigns.innerHTML = ''; | |
| // Generate warnings based on text content | |
| const warnings = []; | |
| if (text.toLowerCase().includes('revolutionary')) { | |
| warnings.push({ | |
| icon: 'fa-bullhorn', | |
| color: 'red', | |
| text: 'Overuse of hyperbolic terms like "revolutionary"' | |
| }); | |
| } | |
| if (text.toLowerCase().includes('proprietary')) { | |
| warnings.push({ | |
| icon: 'fa-lock', | |
| color: 'red', | |
| text: 'Vague reference to "proprietary" technology without details' | |
| }); | |
| } | |
| if (text.toLowerCase().includes('studies show') && !text.toLowerCase().includes('according to')) { | |
| warnings.push({ | |
| icon: 'fa-flask', | |
| color: 'red', | |
| text: 'Uncited reference to "studies show" without specific sources' | |
| }); | |
| } | |
| if (text.toLowerCase().includes('experts agree')) { | |
| warnings.push({ | |
| icon: 'fa-users', | |
| color: 'red', | |
| text: 'Appeal to vague authority with "experts agree"' | |
| }); | |
| } | |
| if (text.toLowerCase().includes('change your life')) { | |
| warnings.push({ | |
| icon: 'fa-magic', | |
| color: 'red', | |
| text: 'Overpromising with "change your life" claims' | |
| }); | |
| } | |
| if (text.toLowerCase().includes('beyond any doubt')) { | |
| warnings.push({ | |
| icon: 'fa-gavel', | |
| color: 'red', | |
| text: 'Absolute certainty claims ("beyond any doubt") are suspicious' | |
| }); | |
| } | |
| if (text.toLowerCase().includes('everyone knows')) { | |
| warnings.push({ | |
| icon: 'fa-comment', | |
| color: 'red', | |
| text: 'Generalization with "everyone knows" is rarely accurate' | |
| }); | |
| } | |
| // If no specific warnings, show a generic one based on score | |
| if (warnings.length === 0) { | |
| if (bullshitScore > 70) { | |
| warnings.push({ | |
| icon: 'fa-exclamation-triangle', | |
| color: 'red', | |
| text: 'High level of vague, unsubstantiated, or exaggerated language' | |
| }); | |
| } else if (bullshitScore > 40) { | |
| warnings.push({ | |
| icon: 'fa-info-circle', | |
| color: 'yellow', | |
| text: 'Some indicators of potentially misleading language' | |
| }); | |
| } else { | |
| warnings.push({ | |
| icon: 'fa-check-circle', | |
| color: 'green', | |
| text: 'No strong bullshit indicators detected' | |
| }); | |
| } | |
| } | |
| // Add warnings to DOM | |
| warnings.forEach(warning => { | |
| const warningElement = document.createElement('div'); | |
| warningElement.className = `flex items-start p-3 rounded-lg bg-${warning.color}-50 border border-${warning.color}-100`; | |
| warningElement.innerHTML = ` | |
| <i class="fas ${warning.icon} mt-1 mr-3 text-${warning.color}-500"></i> | |
| <span class="text-sm text-${warning.color}-800">${warning.text}</span> | |
| `; | |
| warningSigns.appendChild(warningElement); | |
| }); | |
| } | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=zman6969/bullshit-detector" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |