Spaces:

numbpilled
/

wraithpath-input-profile-username-for-idealogical-overview

Running

App Files Files Community

numbpilled commited on 4 days ago

Commit

1ffed9d

verified ·

1 Parent(s): d6fdafb

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +420 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Wraithpath Input Profile Username For Idealogical Overview
-emoji: 🏃
-colorFrom: blue
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: wraithpath-input-profile-username-for-idealogical-overview
+emoji: 🐳
+colorFrom: green
+colorTo: pink
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,420 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WRAITHPATH • Ideological Fingerprinting</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>
+        .gradient-text {
+            background: linear-gradient(90deg, #8b5cf6 0%, #ec4899 100%);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+        }
+        .timeline-item::before {
+            content: '';
+            position: absolute;
+            left: -20px;
+            top: 0;
+            width: 2px;
+            height: 100%;
+            background: #4b5563;
+        }
+        .fade-in {
+            animation: fadeIn 0.5s ease-in-out;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .pulse {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { opacity: 0.6; }
+            50% { opacity: 1; }
+            100% { opacity: 0.6; }
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-gray-200 min-h-screen font-sans">
+    <div class="container mx-auto px-4 py-8 max-w-6xl">
+        <!-- Header -->
+        <header class="mb-12">
+            <div class="flex justify-between items-center mb-6">
+                <h1 class="text-4xl font-bold">
+                    <span class="gradient-text">WRAITHPATH</span>
+                </h1>
+                <button class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-lg flex items-center">
+                    <i class="fas fa-user-secret mr-2"></i>
+                    <span>Login</span>
+                </button>
+            </div>
+            <p class="text-xl text-gray-400 mb-6">"Their posts were a breadcrumb trail to who they really are."</p>
+            <!-- Search Box -->
+            <div class="bg-gray-800 rounded-xl p-6 shadow-lg mb-8">
+                <div class="flex flex-col md:flex-row gap-4">
+                    <div class="flex-1 relative">
+                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                            <i class="fas fa-search text-gray-500"></i>
+                        </div>
+                        <input
+                            type="text"
+                            id="profileUrl"
+                            class="w-full bg-gray-700 border border-gray-600 rounded-lg pl-10 pr-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500"
+                            placeholder="Enter Reddit, Tumblr, or blog URL..."
+                        >
+                    </div>
+                    <button
+                        id="analyzeBtn"
+                        class="bg-gradient-to-r from-purple-600 to-pink-500 hover:from-purple-700 hover:to-pink-600 text-white font-medium rounded-lg px-6 py-3 transition-all duration-300 flex items-center justify-center"
+                    >
+                        <i class="fas fa-fingerprint mr-2"></i>
+                        Analyze Ideology
+                    </button>
+                </div>
+                <div class="mt-4 flex flex-wrap gap-2">
+                    <span class="text-xs bg-gray-700 px-2 py-1 rounded">Reddit: u/username</span>
+                    <span class="text-xs bg-gray-700 px-2 py-1 rounded">Tumblr: blogname.tumblr.com</span>
+                    <span class="text-xs bg-gray-700 px-2 py-1 rounded">WordPress: example.wordpress.com</span>
+                </div>
+            </div>
+        </header>
+        <!-- Demo Section -->
+        <section class="mb-16">
+            <h2 class="text-2xl font-semibold mb-6 flex items-center">
+                <i class="fas fa-ghost mr-3 text-purple-500"></i>
+                How It Works
+            </h2>
+            <div class="grid md:grid-cols-3 gap-6">
+                <div class="bg-gray-800 p-6 rounded-xl hover:bg-gray-750 transition-all">
+                    <div class="w-12 h-12 bg-purple-900 rounded-lg flex items-center justify-center mb-4">
+                        <i class="fas fa-link text-purple-400 text-xl"></i>
+                    </div>
+                    <h3 class="text-lg font-medium mb-2">1. Input Profile</h3>
+                    <p class="text-gray-400">Provide any public social media or blog URL. We'll scrape years of posting history.</p>
+                </div>
+                <div class="bg-gray-800 p-6 rounded-xl hover:bg-gray-750 transition-all">
+                    <div class="w-12 h-12 bg-pink-900 rounded-lg flex items-center justify-center mb-4">
+                        <i class="fas fa-brain text-pink-400 text-xl"></i>
+                    </div>
+                    <h3 class="text-lg font-medium mb-2">2. Cognitive Analysis</h3>
+                    <p class="text-gray-400">Our models detect linguistic patterns, sentiment shifts, and ideological markers.</p>
+                </div>
+                <div class="bg-gray-800 p-6 rounded-xl hover:bg-gray-750 transition-all">
+                    <div class="w-12 h-12 bg-indigo-900 rounded-lg flex items-center justify-center mb-4">
+                        <i class="fas fa-chart-line text-indigo-400 text-xl"></i>
+                    </div>
+                    <h3 class="text-lg font-medium mb-2">3. Get The Report</h3>
+                    <p class="text-gray-400">Receive a detailed timeline of mental state evolution and belief system changes.</p>
+                </div>
+            </div>
+        </section>
+        <!-- Results Section (Initially Hidden) -->
+        <section id="resultsSection" class="hidden mb-16">
+            <div class="flex justify-between items-center mb-6">
+                <h2 class="text-2xl font-semibold flex items-center">
+                    <i class="fas fa-chart-bar mr-3 text-pink-500"></i>
+                    Ideological Fingerprint
+                </h2>
+                <button id="downloadReport" class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-lg flex items-center">
+                    <i class="fas fa-file-pdf mr-2 text-red-400"></i>
+                    <span>Download PDF</span>
+                </button>
+            </div>
+            <!-- Profile Summary -->
+            <div class="bg-gray-800 rounded-xl p-6 mb-8">
+                <div class="flex flex-col md:flex-row gap-6">
+                    <div class="flex-shrink-0">
+                        <div class="w-24 h-24 rounded-full bg-gradient-to-br from-purple-600 to-pink-500 flex items-center justify-center text-4xl font-bold">
+                            <span id="avatarInitial">?</span>
+                        </div>
+                    </div>
+                    <div class="flex-1">
+                        <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-4">
+                            <div>
+                                <h3 id="profileName" class="text-xl font-bold">Unknown Profile</h3>
+                                <p id="profileHandle" class="text-gray-400">@unknown</p>
+                            </div>
+                            <div class="mt-2 md:mt-0">
+                                <span id="profilePlatform" class="bg-gray-700 px-3 py-1 rounded-full text-sm">Unknown Platform</span>
+                            </div>
+                        </div>
+                        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+                            <div>
+                                <p class="text-gray-500 text-sm">Posts Analyzed</p>
+                                <p id="postCount" class="text-lg font-medium">0</p>
+                            </div>
+                            <div>
+                                <p class="text-gray-500 text-sm">Time Span</p>
+                                <p id="timeSpan" class="text-lg font-medium">0 years</p>
+                            </div>
+                            <div>
+                                <p class="text-gray-500 text-sm">Ideology Score</p>
+                                <p id="ideologyScore" class="text-lg font-medium">0/100</p>
+                            </div>
+                            <div>
+                                <p class="text-gray-500 text-sm">Volatility</p>
+                                <p id="volatility" class="text-lg font-medium">Low</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Ideology Timeline -->
+            <div class="bg-gray-800 rounded-xl p-6 mb-8">
+                <h3 class="text-lg font-medium mb-4 flex items-center">
+                    <i class="fas fa-history mr-2 text-purple-400"></i>
+                    Ideological Timeline
+                </h3>
+                <div class="relative pl-8">
+                    <div id="timelineContainer">
+                        <!-- Timeline items will be added here by JavaScript -->
+                    </div>
+                </div>
+            </div>
+            <!-- Sentiment Analysis -->
+            <div class="bg-gray-800 rounded-xl p-6 mb-8">
+                <h3 class="text-lg font-medium mb-4 flex items-center">
+                    <i class="fas fa-brain mr-2 text-pink-400"></i>
+                    Sentiment Evolution
+                </h3>
+                <div class="h-64 bg-gray-700 rounded-lg flex items-center justify-center">
+                    <p class="text-gray-500">Sentiment chart will appear here</p>
+                </div>
+            </div>
+            <!-- Topic Cloud -->
+            <div class="bg-gray-800 rounded-xl p-6">
+                <h3 class="text-lg font-medium mb-4 flex items-center">
+                    <i class="fas fa-cloud mr-2 text-indigo-400"></i>
+                    Topic Cloud
+                </h3>
+                <div class="flex flex-wrap gap-3" id="topicCloud">
+                    <!-- Topics will be added here by JavaScript -->
+                </div>
+            </div>
+        </section>
+        <!-- Loading State (Initially Hidden) -->
+        <div id="loadingState" class="hidden fixed inset-0 bg-gray-900 bg-opacity-90 flex items-center justify-center z-50">
+            <div class="text-center">
+                <div class="w-24 h-24 border-4 border-purple-500 border-t-pink-500 rounded-full animate-spin mb-6 mx-auto"></div>
+                <h3 class="text-2xl font-medium mb-2">Building Cognitive Profile</h3>
+                <p class="text-gray-400 max-w-md mx-auto">Analyzing linguistic patterns, sentiment shifts, and ideological markers across <span id="loadingPostCount">0</span> posts...</p>
+                <div class="mt-6 bg-gray-800 rounded-full h-2 w-64 mx-auto overflow-hidden">
+                    <div id="progressBar" class="bg-gradient-to-r from-purple-500 to-pink-500 h-full" style="width: 0%"></div>
+                </div>
+            </div>
+        </div>
+        <!-- Footer -->
+        <footer class="mt-16 pt-8 border-t border-gray-800 text-gray-500">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <div class="mb-4 md:mb-0">
+                    <p>&copy; 2023 WRAITHPATH • Ideological Fingerprinting</p>
+                </div>
+                <div class="flex space-x-6">
+                    <a href="#" class="hover:text-gray-300">Privacy</a>
+                    <a href="#" class="hover:text-gray-300">Terms</a>
+                    <a href="#" class="hover:text-gray-300">API</a>
+                    <a href="#" class="hover:text-gray-300">Contact</a>
+                </div>
+            </div>
+        </footer>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const analyzeBtn = document.getElementById('analyzeBtn');
+            const profileUrl = document.getElementById('profileUrl');
+            const resultsSection = document.getElementById('resultsSection');
+            const loadingState = document.getElementById('loadingState');
+            const downloadReport = document.getElementById('downloadReport');
+            // Sample data for demonstration
+            const sampleTopics = [
+                {text: "politics", weight: 0.9},
+                {text: "technology", weight: 0.7},
+                {text: "philosophy", weight: 0.6},
+                {text: "economics", weight: 0.5},
+                {text: "culture", weight: 0.4},
+                {text: "science", weight: 0.4},
+                {text: "religion", weight: 0.3},
+                {text: "psychology", weight: 0.3}
+            ];
+            const sampleTimeline = [
+                {
+                    year: "2015-2017",
+                    title: "Libertarian Phase",
+                    description: "Strong emphasis on individual freedom, skepticism of government. Frequent mentions of Austrian economics.",
+                    sentiment: "neutral",
+                    tags: ["libertarian", "economics", "skepticism"]
+                },
+                {
+                    year: "2018-2019",
+                    title: "Political Awakening",
+                    description: "Began engaging with more radical political content. Shift toward populist rhetoric and anti-establishment views.",
+                    sentiment: "negative",
+                    tags: ["populism", "anti-establishment", "anger"]
+                },
+                {
+                    year: "2020-2021",
+                    title: "Ideological Crisis",
+                    description: "Evident cognitive dissonance in posts. Frequent deletions and contradictions. Increased conspiracy language.",
+                    sentiment: "negative",
+                    tags: ["conspiracy", "confusion", "isolation"]
+                },
+                {
+                    year: "2022-Present",
+                    title: "Radicalization",
+                    description: "Clear ideological framework emerges. Dogmatic language, in-group signaling, and dehumanizing rhetoric toward out-groups.",
+                    sentiment: "negative",
+                    tags: ["radical", "tribalism", "authoritarian"]
+                }
+            ];
+            analyzeBtn.addEventListener('click', function() {
+                const url = profileUrl.value.trim();
+                if (!url) {
+                    alert('Please enter a valid URL');
+                    return;
+                }
+                // Show loading state
+                loadingState.classList.remove('hidden');
+                // Simulate analysis progress
+                let progress = 0;
+                const progressInterval = setInterval(() => {
+                    progress += Math.random() * 10;
+                    if (progress > 100) progress = 100;
+                    document.getElementById('progressBar').style.width = `${progress}%`;
+                    // Update post count during loading
+                    const postCount = Math.floor(Math.random() * 5000) + 1000;
+                    document.getElementById('loadingPostCount').textContent = postCount.toLocaleString();
+                    if (progress >= 100) {
+                        clearInterval(progressInterval);
+                        setTimeout(showResults, 500);
+                    }
+                }, 300);
+                function showResults() {
+                    loadingState.classList.add('hidden');
+                    resultsSection.classList.remove('hidden');
+                    // Scroll to results
+                    resultsSection.scrollIntoView({ behavior: 'smooth' });
+                    // Populate sample data
+                    populateSampleData(url);
+                }
+            });
+            downloadReport.addEventListener('click', function() {
+                alert('PDF report generation would be implemented here. This is a demo.');
+            });
+            function populateSampleData(url) {
+                // Extract username from URL
+                let username = "Unknown";
+                let platform = "Unknown";
+                let avatarInitial = "?";
+                try {
+                    const urlObj = new URL(url);
+                    const host = urlObj.hostname;
+                    if (host.includes('reddit.com')) {
+                        platform = "Reddit";
+                        const pathParts = urlObj.pathname.split('/');
+                        if (pathParts.length >= 3 && pathParts[1] === 'user') {
+                            username = pathParts[2];
+                            avatarInitial = username.charAt(0).toUpperCase();
+                        }
+                    } else if (host.includes('tumblr.com')) {
+                        platform = "Tumblr";
+                        username = host.split('.')[0];
+                        avatarInitial = username.charAt(0).toUpperCase();
+                    } else {
+                        platform = "Blog";
+                        username = host;
+                        avatarInitial = username.charAt(0).toUpperCase();
+                    }
+                } catch (e) {
+                    console.error("Error parsing URL", e);
+                }
+                // Set profile info
+                document.getElementById('profileName').textContent = username;
+                document.getElementById('profileHandle').textContent = `@${username.toLowerCase()}`;
+                document.getElementById('profilePlatform').textContent = platform;
+                document.getElementById('avatarInitial').textContent = avatarInitial;
+                document.getElementById('postCount').textContent = (Math.random() * 5000 + 1000).toLocaleString();
+                document.getElementById('timeSpan').textContent = `${Math.floor(Math.random() * 10) + 3} years`;
+                document.getElementById('ideologyScore').textContent = `${Math.floor(Math.random() * 40) + 30}/100`;
+                document.getElementById('volatility').textContent = ["Low", "Medium", "High"][Math.floor(Math.random() * 3)];
+                // Populate timeline
+                const timelineContainer = document.getElementById('timelineContainer');
+                timelineContainer.innerHTML = '';
+                sampleTimeline.forEach((item, index) => {
+                    const timelineItem = document.createElement('div');
+                    timelineItem.className = `timeline-item relative pb-8 fade-in ${index !== sampleTimeline.length - 1 ? 'border-b border-gray-700' : ''}`;
+                    let sentimentIcon = "😐";
+                    if (item.sentiment === "positive") sentimentIcon = "😊";
+                    else if (item.sentiment === "negative") sentimentIcon = "😠";
+                    timelineItem.innerHTML = `
+                        <div class="absolute -left-8 top-0 w-6 h-6 rounded-full flex items-center justify-center ${item.sentiment === 'negative' ? 'bg-pink-900' : item.sentiment === 'positive' ? 'bg-blue-900' : 'bg-gray-700'}">
+                            <span class="text-xs">${sentimentIcon}</span>
+                        </div>
+                        <div class="mb-2">
+                            <span class="text-sm font-medium bg-gray-700 px-2 py-1 rounded">${item.year}</span>
+                            <h4 class="text-lg font-semibold mt-1">${item.title}</h4>
+                        </div>
+                        <p class="text-gray-400 mb-3">${item.description}</p>
+                        <div class="flex flex-wrap gap-2">
+                            ${item.tags.map(tag => `<span class="text-xs bg-gray-700 px-2 py-1 rounded">${tag}</span>`).join('')}
+                        </div>
+                    `;
+                    timelineContainer.appendChild(timelineItem);
+                });
+                // Populate topic cloud
+                const topicCloud = document.getElementById('topicCloud');
+                topicCloud.innerHTML = '';
+                sampleTopics.forEach(topic => {
+                    const size = Math.floor(topic.weight * 20) + 12;
+                    const opacity = topic.weight * 0.7 + 0.3;
+                    const color = `rgba(168, 85, 247, ${opacity})`;
+                    const topicElement = document.createElement('span');
+                    topicElement.className = 'fade-in';
+                    topicElement.style.fontSize = `${size}px`;
+                    topicElement.style.color = color;
+                    topicElement.textContent = topic.text;
+                    topicCloud.appendChild(topicElement);
+                });
+            }
+        });
+    </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=numbpilled/wraithpath-input-profile-username-for-idealogical-overview" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ WRAITHPATH A user fingerprinting engine disguised as a minimalist blog reader. Input someone’s Reddit, Tumblr, or blog and the site outputs a timeline of shifting mental states and ideological drift. Monetization: Sell PDF reports of “ideological pathology” or mental OSINT digests. Tagline: “Their posts were a breadcrumb trail to who they really are.”