mirror of
https://github.com/elder-plinius/LEAKHUB.git
synced 2026-02-12 16:52:53 +00:00
d875e6e4fd
🔥 IMPROVEMENT #1: Real-time Collaboration Chat System - Live chat with other users - Bot responses and community interaction - Online user tracking 🤖 IMPROVEMENT #2: Advanced AI-Powered Similarity Detection - Semantic similarity analysis - Structural pattern matching - Keyword overlap detection - Confidence scoring with visual meters 🏆 IMPROVEMENT #3: Dynamic Achievement System - 10 unlockable achievements with badges - Point rewards and notifications - Progress tracking for all actions 🎯 IMPROVEMENT #4: Enhanced Comparison Interface - Dual comparison modes (Basic + AI Analysis) - Visual confidence meters and metrics - Verification recommendations ✨ IMPROVEMENT #5: Improved User Experience - Enhanced button styles and animations - Better responsive design - Achievement notifications - Chat system integration All async/await issues fixed, build tested successfully! 🚀
324 lines
18 KiB
HTML
324 lines
18 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>LeakHub - AI System Prompt Discovery Platform</title>
|
||
<link rel="stylesheet" href="styles.css">
|
||
</head>
|
||
<body>
|
||
<div class="floating-grid"></div>
|
||
|
||
<div class="container">
|
||
<header>
|
||
<h1>LeakHub</h1>
|
||
<p class="subtitle">The community hub for crowd-sourced system prompt leak verification. CL4R1T4S!</p>
|
||
<div class="status-bar">
|
||
<div class="status-item">
|
||
<span>Active Targets:</span>
|
||
<span class="status-value" id="activeLeaks">0</span>
|
||
</div>
|
||
<div class="status-item">
|
||
<span>Total Submissions:</span>
|
||
<span class="status-value" id="totalSubmissions">0</span>
|
||
</div>
|
||
<div class="status-item">
|
||
<span>Verified Prompts:</span>
|
||
<span class="status-value" id="verifiedPrompts">0</span>
|
||
</div>
|
||
</div>
|
||
<div style="text-align: center; margin-top: 1rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
|
||
<button onclick="toggleLeaderboard()" style="background: linear-gradient(135deg, #ff00ff, #00ff88); padding: 0.6rem 2rem;">
|
||
🏆 View Leaderboard
|
||
</button>
|
||
<button onclick="toggleRequests()" style="background: linear-gradient(135deg, #ff6b6b, #ffd700); padding: 0.6rem 2rem;">
|
||
🎯 Requests & Challenges
|
||
</button>
|
||
<button onclick="toggleChat()" style="background: linear-gradient(135deg, #00ffff, #ff00ff); padding: 0.6rem 2rem;">
|
||
💬 Live Chat
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Real-time Chat System -->
|
||
<div id="chatPanel" class="chat-panel" style="display: none;">
|
||
<div class="chat-header">
|
||
<h3>💬 LeakHub Live Chat</h3>
|
||
<button onclick="toggleChat()" class="close-btn">×</button>
|
||
</div>
|
||
<div class="chat-messages" id="chatMessages">
|
||
<div class="system-message">Welcome to LeakHub Live Chat! Share discoveries, ask questions, and collaborate in real-time! 🚀</div>
|
||
</div>
|
||
<div class="chat-input-container">
|
||
<input type="text" id="chatInput" placeholder="Type your message..." maxlength="500">
|
||
<button onclick="sendChatMessage()" class="send-btn">Send</button>
|
||
</div>
|
||
<div class="chat-users" id="chatUsers">
|
||
<div class="online-indicator">🟢 Online: <span id="onlineCount">1</span></div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="main-section">
|
||
<div class="panel">
|
||
<h2>📤 Submit Leak</h2>
|
||
<form class="submission-form" onsubmit="submitLeak(event)">
|
||
<input type="text" id="sourceName" placeholder="Your identifier (e.g., User123, Anonymous)" required>
|
||
|
||
<select id="targetType" onchange="updateTargetFields()" required style="width: 100%; padding: 0.5rem; margin-bottom: 1rem; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: #e0e0e0;">
|
||
<option value="">Select target type...</option>
|
||
<option value="model">🤖 AI Model</option>
|
||
<option value="app">📱 App/Interface</option>
|
||
<option value="tool">🔧 Tool/Function</option>
|
||
<option value="agent">🤝 AI Agent</option>
|
||
<option value="plugin">🔌 Plugin/Extension</option>
|
||
<option value="custom">🛠️ Custom GPT/Bot</option>
|
||
</select>
|
||
|
||
<input type="text" id="instanceId" placeholder="Target name (e.g., ChatGPT-4, GitHub Copilot)" required>
|
||
|
||
<input type="url" id="targetUrl" placeholder="Target URL (e.g., https://chat.openai.com)" style="margin-bottom: 1rem;">
|
||
|
||
<div style="background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 1rem; margin-bottom: 1rem;">
|
||
<p style="color: #00aaff; font-size: 0.9rem; margin-bottom: 0.8rem;">🔒 Access Requirements</p>
|
||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
|
||
<label style="display: flex; align-items: center; gap: 0.5rem; color: #888; font-size: 0.9rem;">
|
||
<input type="checkbox" id="requiresLogin" style="width: auto;">
|
||
Requires Login
|
||
</label>
|
||
<label style="display: flex; align-items: center; gap: 0.5rem; color: #888; font-size: 0.9rem;">
|
||
<input type="checkbox" id="requiresPaid" style="width: auto;">
|
||
Paid/Subscription
|
||
</label>
|
||
</div>
|
||
<input type="text" id="accessNotes" placeholder="Additional access notes (e.g., 'Plus subscription required')"
|
||
style="width: 100%; margin-top: 0.8rem; padding: 0.5rem; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: #e0e0e0;">
|
||
</div>
|
||
|
||
<div id="additionalFields" style="display: none;">
|
||
<input type="text" id="parentSystem" placeholder="Parent system (e.g., ChatGPT for a plugin)" style="margin-bottom: 1rem;">
|
||
<input type="text" id="functionName" placeholder="Specific function/tool name (if applicable)" style="margin-bottom: 1rem;">
|
||
</div>
|
||
|
||
<textarea id="leakContent" placeholder="Paste the suspected system prompt leak here..." required></textarea>
|
||
<input type="text" id="context" placeholder="Context: How was this obtained? (optional)">
|
||
|
||
<div style="display: flex; gap: 0.5rem; align-items: center; margin-bottom: 1rem;">
|
||
<input type="checkbox" id="hasTools" onchange="toggleToolsSection()" style="width: auto;">
|
||
<label for="hasTools" style="color: #888; font-size: 0.9rem;">This target has tools/functions with their own prompts</label>
|
||
</div>
|
||
|
||
<div id="toolsSection" style="display: none; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 1rem; margin-bottom: 1rem;">
|
||
<p style="color: #00aaff; font-size: 0.9rem; margin-bottom: 0.5rem;">🔧 Related Tool Prompts (optional)</p>
|
||
<textarea id="toolPrompts" placeholder="If you found any tool-specific prompts, paste them here..." style="min-height: 100px;"></textarea>
|
||
</div>
|
||
|
||
<button type="submit">Submit to Library</button>
|
||
</form>
|
||
</div>
|
||
|
||
<div class="panel">
|
||
<h2>📚 Leak Library</h2>
|
||
<div class="submissions-list" id="submissionsList">
|
||
<p style="color: #666; text-align: center;">No submissions yet. Be the first to contribute!</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="comparison-section">
|
||
<h2 style="color: #00ff88; margin-bottom: 1.5rem;">🔍 Compare Multiple Instances</h2>
|
||
|
||
<div class="comparison-controls">
|
||
<div class="instance-selector">
|
||
<label style="color: #888; font-size: 0.9rem;">Instance A:</label>
|
||
<select id="instanceA" class="form-control" style="width: 100%; padding: 0.5rem; margin-top: 0.5rem; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: #e0e0e0;">
|
||
<option value="">Select submission...</option>
|
||
</select>
|
||
</div>
|
||
<div class="instance-selector">
|
||
<label style="color: #888; font-size: 0.9rem;">Instance B:</label>
|
||
<select id="instanceB" class="form-control" style="width: 100%; padding: 0.5rem; margin-top: 0.5rem; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: #e0e0e0;">
|
||
<option value="">Select submission...</option>
|
||
</select>
|
||
</div>
|
||
<button onclick="compareInstances()" style="align-self: flex-end;">Compare</button>
|
||
</div>
|
||
|
||
<div id="comparisonResults" style="display: none;">
|
||
<div class="comparison-grid">
|
||
<div class="instance-viewer">
|
||
<h3>Instance A</h3>
|
||
<div class="instance-content" id="instanceAContent"></div>
|
||
</div>
|
||
<div class="instance-viewer">
|
||
<h3>Instance B</h3>
|
||
<div class="instance-content" id="instanceBContent"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="results-panel">
|
||
<h3 style="color: #00ff88; margin-bottom: 1.5rem;">Analysis Results</h3>
|
||
<div class="comparison-controls">
|
||
<button onclick="performComparison()" class="enhanced-btn">🔍 Basic Comparison</button>
|
||
<button onclick="performAdvancedComparison()" class="enhanced-btn">🤖 AI Analysis</button>
|
||
</div>
|
||
<div id="comparisonResults">
|
||
<div class="match-metrics">
|
||
<div class="metric-card">
|
||
<div class="metric-label">Character Match</div>
|
||
<div class="metric-value" id="charMatch">-</div>
|
||
</div>
|
||
<div class="metric-card">
|
||
<div class="metric-label">Word Match</div>
|
||
<div class="metric-value" id="wordMatch">-</div>
|
||
</div>
|
||
<div class="metric-card">
|
||
<div class="metric-label">Structure Match</div>
|
||
<div class="metric-value" id="structureMatch">-</div>
|
||
</div>
|
||
<div class="metric-card">
|
||
<div class="metric-label">Core Similarity</div>
|
||
<div class="metric-value" id="coreSimilarity">-</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="consensus-viewer">
|
||
<h3>Consensus View (Common Elements)</h3>
|
||
<div class="consensus-text" id="consensusText"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="library-stats">
|
||
<div class="stat-card">
|
||
<div class="stat-number" id="uniqueInstances">0</div>
|
||
<div class="stat-label">Unique Instances</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-number" id="avgSimilarity">0%</div>
|
||
<div class="stat-label">Average Similarity</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-number" id="highConfidence">0</div>
|
||
<div class="stat-label">High Confidence Matches</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="alert" id="alert"></div>
|
||
|
||
<!-- Leaderboard Overlay -->
|
||
<div class="leaderboard-overlay" id="leaderboardOverlay">
|
||
<div class="leaderboard-container">
|
||
<div class="close-button" onclick="toggleLeaderboard()">✕</div>
|
||
|
||
<div class="leaderboard-header">
|
||
<h1 class="leaderboard-title">🏆 LeakHub Hall of Fame</h1>
|
||
<p class="subtitle">Recognizing the top contributors to AI transparency</p>
|
||
</div>
|
||
|
||
<div class="leaderboard-tabs">
|
||
<div class="leaderboard-tab active" onclick="switchLeaderboardTab('rankings')">📊 Rankings</div>
|
||
<div class="leaderboard-tab" onclick="switchLeaderboardTab('achievements')">🏅 Achievements</div>
|
||
<div class="leaderboard-tab" onclick="switchLeaderboardTab('timeline')">📅 Timeline</div>
|
||
</div>
|
||
|
||
<div id="rankings-content" class="leaderboard-content">
|
||
<div class="rankings">
|
||
<h2 style="color: #00ff88; margin-bottom: 1.5rem;">Top Contributors</h2>
|
||
<div id="rankingsList"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="achievements-content" class="leaderboard-content" style="display: none;">
|
||
<h2 style="color: #ffd700; margin-bottom: 1.5rem; text-align: center;">Notable Achievements</h2>
|
||
<div class="achievements" id="achievementsList"></div>
|
||
</div>
|
||
|
||
<div id="timeline-content" class="leaderboard-content" style="display: none;">
|
||
<div class="timeline-section">
|
||
<h2 style="color: #00aaff; margin-bottom: 1.5rem;">Discovery Timeline</h2>
|
||
<div id="timelineList"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Requests & Challenges Overlay -->
|
||
<div class="requests-overlay" id="requestsOverlay">
|
||
<div class="requests-container">
|
||
<div class="close-button" onclick="toggleRequests()">✕</div>
|
||
|
||
<div class="requests-header">
|
||
<h1 class="requests-title">🎯 LeakHub Bounty Board</h1>
|
||
<p class="subtitle">Request targets and compete in daily challenges</p>
|
||
</div>
|
||
|
||
<!-- Daily Challenge -->
|
||
<div class="daily-challenge">
|
||
<h2 class="challenge-title">🎯 Today's Challenge</h2>
|
||
<p class="challenge-description" id="challengeDescription">Find and verify a system prompt from GPT-4 Turbo!</p>
|
||
<div class="challenge-reward">💰 Reward: 500 bonus points + Special Badge</div>
|
||
<div class="challenge-timer" id="challengeTimer">Time remaining: 23:45:30</div>
|
||
</div>
|
||
|
||
<div class="requests-grid">
|
||
<!-- Submit Request Form -->
|
||
<div class="request-form">
|
||
<h2 style="color: #ffd700; margin-bottom: 1.5rem;">📝 Request a Leak Hunt</h2>
|
||
<form onsubmit="submitRequest(event)">
|
||
<select id="requestTargetType" required style="width: 100%; padding: 0.5rem; margin-bottom: 1rem; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: #e0e0e0;">
|
||
<option value="">Select target type...</option>
|
||
<option value="model">🤖 AI Model</option>
|
||
<option value="app">📱 App/Interface</option>
|
||
<option value="tool">🔧 Tool/Function</option>
|
||
<option value="agent">🤝 AI Agent</option>
|
||
<option value="plugin">🔌 Plugin/Extension</option>
|
||
<option value="custom">🛠️ Custom GPT/Bot</option>
|
||
</select>
|
||
<input type="text" id="requestModel" placeholder="Target name (e.g., Gemini Pro, GitHub Copilot)" required
|
||
style="width: 100%; margin-bottom: 1rem;">
|
||
<input type="url" id="requestUrl" placeholder="Target URL (optional)"
|
||
style="width: 100%; margin-bottom: 1rem;">
|
||
<textarea id="requestDescription" placeholder="Why is this important? Any tips on how to get it?"
|
||
style="width: 100%; min-height: 100px; margin-bottom: 1rem;"></textarea>
|
||
<div style="display: flex; gap: 1rem; margin-bottom: 1rem;">
|
||
<label style="display: flex; align-items: center; gap: 0.5rem; color: #888; font-size: 0.9rem;">
|
||
<input type="checkbox" id="requestRequiresLogin" style="width: auto;">
|
||
🔒 Login Required
|
||
</label>
|
||
<label style="display: flex; align-items: center; gap: 0.5rem; color: #888; font-size: 0.9rem;">
|
||
<input type="checkbox" id="requestRequiresPaid" style="width: auto;">
|
||
💰 Paid Access
|
||
</label>
|
||
</div>
|
||
<input type="number" id="requestBounty" placeholder="Bounty points (optional)" min="0"
|
||
style="width: 100%; margin-bottom: 1rem;">
|
||
<button type="submit" style="width: 100%;">Submit Request</button>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- Active Requests -->
|
||
<div class="request-list">
|
||
<h2 style="color: #ffd700; margin-bottom: 1rem;">🔥 Hot Requests</h2>
|
||
<div class="filter-tabs">
|
||
<div class="filter-tab active" onclick="filterRequests('trending')">🔥 Trending</div>
|
||
<div class="filter-tab" onclick="filterRequests('bounty')">💰 Highest Bounty</div>
|
||
<div class="filter-tab" onclick="filterRequests('new')">🆕 Newest</div>
|
||
<div class="filter-tab" onclick="filterRequests('myvotes')">👍 My Votes</div>
|
||
</div>
|
||
<div id="requestsList">
|
||
<p style="color: #666; text-align: center;">No requests yet. Be the first to request a leak hunt!</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script type="module" src="api/database.js"></script>
|
||
<script type="module" src="script.js"></script>
|
||
<script type="module" src="demo-data.js"></script>
|
||
</body>
|
||
</html>
|