Spaces:
Build error
Build error
File size: 24,059 Bytes
1ac9f32 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 | <!DOCTYPE html>
<html lang="en" style="scroll-behavior:smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How to Export Chat | The Algorithm</title>
<meta name="description" content="Step-by-step instructions to export your WhatsApp and Telegram chat history for analysis with The Algorithm.">
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<link rel="icon" type="image/png" href="{{ url_for('static', filename='favicon.png') }}">
<style>
.step-card { counter-increment: step-counter; }
.step-card::before {
content: counter(step-counter);
position: absolute; top: -12px; left: 20px;
width: 32px; height: 32px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-heading); font-weight: 900; font-size: 1rem;
z-index: 10; border: 2px solid var(--black); box-shadow: 2px 2px 0 0 var(--black);
}
.whatsapp-steps, .telegram-steps, .instagram-steps, .discord-steps { counter-reset: step-counter; }
.whatsapp-steps .step-card::before { background: var(--green); color: #fff; }
.telegram-steps .step-card::before { background: var(--blue); color: #fff; }
.instagram-steps .step-card::before { background: var(--pink); color: #fff; }
.discord-steps .step-card::before { background: var(--purple); color: #fff; }
.tab-btn.active-tab {
background: var(--pink) !important; color: var(--white) !important;
box-shadow: inset 4px 4px 0 0 rgba(0,0,0,0.1); transform: translateY(2px);
}
.platform-panel { display: none; opacity: 0; transition: opacity 0.3s ease; }
.platform-panel.active-panel { display: block; opacity: 1; }
.device-btn { transition: all 0.2s ease; }
.device-btn.active-device { background: var(--yellow) !important; }
</style>
</head>
<body class="comic-dots">
<!-- Nav -->
<header class="nav">
<div class="container">
<a href="/" class="nav-logo" style="color:var(--white)">
<span style="font-size:1.2rem;margin-right:.25rem">←</span>
🧠 The Algorithm
</a>
<a href="{{ url_for('index') }}" class="nav-link" style="font-size:.8rem">Back to Analyzer</a>
</div>
</header>
<main style="flex-grow:1;display:flex;justify-content:center;padding:2rem 1.25rem">
<div style="max-width:800px;width:100%">
<!-- Title -->
<div class="text-center mb-10" style="padding-top:1rem">
<h1 style="color:var(--pink);text-shadow:2px 2px 0 var(--black);margin-bottom:.75rem;font-size:clamp(2rem,5vw,3rem)">How to Export Your Chat</h1>
<p style="color:var(--gray-600);font-size:1.05rem;font-weight:500;max-width:550px;margin:0 auto">Follow these quick steps to export your conversation history. It only takes a minute.</p>
</div>
<!-- Platform Tabs -->
<div class="flex flex-wrap justify-center gap-3 mb-8">
<button id="tab-api-keys" onclick="switchTab('api-keys')" class="tab-btn active-tab btn" style="font-size:.75rem;padding:.5rem 1.25rem">🔑 Get API Keys</button>
<button id="tab-whatsapp" onclick="switchTab('whatsapp')" class="tab-btn btn btn--white" style="font-size:.75rem;padding:.5rem 1.25rem">💬 WhatsApp</button>
<button id="tab-telegram" onclick="switchTab('telegram')" class="tab-btn btn btn--white" style="font-size:.75rem;padding:.5rem 1.25rem">✈️ Telegram</button>
<button id="tab-instagram" onclick="switchTab('instagram')" class="tab-btn btn btn--white" style="font-size:.75rem;padding:.5rem 1.25rem">📸 Instagram</button>
<button id="tab-discord" onclick="switchTab('discord')" class="tab-btn btn btn--white" style="font-size:.75rem;padding:.5rem 1.25rem">🎮 Discord</button>
</div>
<!-- ========== API KEYS PANEL ========== -->
<div id="panel-api-keys" class="platform-panel active-panel">
<div class="text-center mb-8">
<p class="pill-label pill-label--yellow" style="font-style:normal;font-size:.75rem;text-transform:none">The Algorithm requires your own API Key (BYOK) for 100% privacy and zero middleman servers.</p>
</div>
<div style="display:flex;flex-direction:column;gap:1.5rem">
<!-- Gemini -->
<div class="card" style="border-width:4px;border-radius:20px;box-shadow:6px 6px 0 0 var(--purple);position:relative;padding:1.5rem">
<span class="pill-label pill-label--pink" style="position:absolute;top:-12px;right:16px;font-size:.6rem">Recommended / Best Free Tier</span>
<h3 style="display:flex;align-items:center;gap:.75rem;margin-bottom:1rem"><span style="font-size:1.75rem">🤖</span>Google Gemini</h3>
<ol style="padding-left:1.5rem;line-height:1.8;font-size:.9rem;color:var(--gray-600)">
<li><strong style="color:var(--black)">Click Here:</strong> Go to <a href="https://aistudio.google.com/app/apikey" target="_blank" style="color:var(--purple);font-weight:700;text-decoration:underline">Google AI Studio API Keys</a>.</li>
<li>Sign in with your Google account.</li>
<li>Click the blue <strong style="color:var(--black)">"Create API key"</strong> button.</li>
<li>Select an existing project or create a new one.</li>
<li>Copy the key (looks like <code style="background:var(--cream);padding:2px 6px;border-radius:4px;border:1px solid var(--black);color:var(--pink);font-size:.85rem">AIzaSy...</code>) and paste into the settings modal.</li>
</ol>
<p style="font-size:.75rem;color:var(--gray-400);margin-top:1rem;border-top:1px solid var(--gray-200);padding-top:.75rem"><em>Note: Gemini offers a very generous free tier (15 RPM), perfect for heavy chats at $0 cost.</em></p>
</div>
<!-- xAI -->
<div class="card" style="border-width:4px;border-radius:20px;box-shadow:6px 6px 0 0 var(--black);padding:1.5rem">
<h3 style="display:flex;align-items:center;gap:.75rem;margin-bottom:1rem"><span style="font-size:1.75rem">✖️</span>xAI (Grok)</h3>
<ol style="padding-left:1.5rem;line-height:1.8;font-size:.9rem;color:var(--gray-600)">
<li><strong style="color:var(--black)">Click Here:</strong> Go to <a href="https://console.x.ai/" target="_blank" style="color:var(--purple);font-weight:700;text-decoration:underline">xAI Console</a>.</li>
<li>Sign in or create an account.</li>
<li>Navigate to <strong style="color:var(--black)">API Keys</strong> section.</li>
<li>Click <strong style="color:var(--black)">"Create API Key"</strong>.</li>
<li>Copy the key and paste into the settings modal.</li>
</ol>
<p style="font-size:.75rem;color:var(--gray-400);margin-top:1rem;border-top:1px solid var(--gray-200);padding-top:.75rem"><em>Note: xAI recently introduced a free tier for Grok; check their console for availability.</em></p>
</div>
<!-- Anthropic -->
<div class="card" style="border-width:4px;border-radius:20px;box-shadow:6px 6px 0 0 var(--yellow);padding:1.5rem">
<h3 style="display:flex;align-items:center;gap:.75rem;margin-bottom:1rem"><span style="font-size:1.75rem">🧠</span>Anthropic (Claude 3.5)</h3>
<ol style="padding-left:1.5rem;line-height:1.8;font-size:.9rem;color:var(--gray-600)">
<li><strong style="color:var(--black)">Click Here:</strong> Go to <a href="https://console.anthropic.com/settings/keys" target="_blank" style="color:var(--purple);font-weight:700;text-decoration:underline">Anthropic Console</a>.</li>
<li>Sign in or create an account.</li>
<li>Navigate to <strong style="color:var(--black)">Settings → API Keys</strong>.</li>
<li>Click <strong style="color:var(--black)">"Create Key"</strong>. Name it "The Algorithm".</li>
<li>Copy the key (starts with <code style="background:var(--cream);padding:2px 6px;border-radius:4px;border:1px solid var(--black);color:var(--pink);font-size:.85rem">sk-ant-</code>) and paste it in.</li>
</ol>
<p style="font-size:.75rem;color:var(--gray-400);margin-top:1rem;border-top:1px solid var(--gray-200);padding-top:.75rem"><em>Note: Requires $5 minimum billing credits.</em></p>
</div>
<!-- OpenAI -->
<div class="card" style="border-width:4px;border-radius:20px;box-shadow:6px 6px 0 0 var(--green);padding:1.5rem">
<h3 style="display:flex;align-items:center;gap:.75rem;margin-bottom:1rem"><span style="font-size:1.75rem">🟢</span>OpenAI (GPT-4o)</h3>
<ol style="padding-left:1.5rem;line-height:1.8;font-size:.9rem;color:var(--gray-600)">
<li><strong style="color:var(--black)">Click Here:</strong> Go to <a href="https://platform.openai.com/api-keys" target="_blank" style="color:var(--purple);font-weight:700;text-decoration:underline">OpenAI API Keys</a>.</li>
<li>Sign in or create a developer account.</li>
<li>Click <strong style="color:var(--black)">"Create new secret key"</strong>.</li>
<li>Copy the key (starts with <code style="background:var(--cream);padding:2px 6px;border-radius:4px;border:1px solid var(--black);color:var(--pink);font-size:.85rem">sk-</code>) immediately.</li>
<li>Paste it into the settings modal.</li>
</ol>
<p style="font-size:.75rem;color:var(--gray-400);margin-top:1rem;border-top:1px solid var(--gray-200);padding-top:.75rem"><em>Note: Requires $5 minimum prepaid credits via <a href="https://platform.openai.com/account/billing" target="_blank" style="color:var(--purple);text-decoration:underline">Billing</a>.</em></p>
</div>
</div>
</div>
<!-- ========== WHATSAPP PANEL ========== -->
<div id="panel-whatsapp" class="platform-panel">
<div class="flex justify-center gap-3 mb-8">
<button onclick="switchDevice('whatsapp','android')" class="device-btn device-btn-whatsapp btn btn--white active-device" style="font-size:.7rem;padding:.4rem 1rem">📱 Android</button>
<button onclick="switchDevice('whatsapp','ios')" class="device-btn device-btn-whatsapp btn btn--white" style="font-size:.7rem;padding:.4rem 1rem">🍎 iPhone</button>
</div>
<div id="whatsapp-android" class="whatsapp-steps device-panel-whatsapp" style="display:flex;flex-direction:column;gap:1.25rem">
<div class="step-card card" style="border-width:4px;box-shadow:4px 4px 0 0 var(--green);position:relative;padding-left:3.5rem"><h3 style="font-size:1rem;margin-bottom:.25rem">Open the Chat</h3><p style="font-size:.9rem;color:var(--gray-600)">Navigate to the individual or group chat you want to analyze.</p></div>
<div class="step-card card" style="border-width:4px;box-shadow:4px 4px 0 0 var(--green);position:relative;padding-left:3.5rem"><h3 style="font-size:1rem;margin-bottom:.25rem">Tap Three-dots</h3><p style="font-size:.9rem;color:var(--gray-600)">Tap the <strong>⋮</strong> icon in the top-right.</p></div>
<div class="step-card card" style="border-width:4px;box-shadow:4px 4px 0 0 var(--green);position:relative;padding-left:3.5rem"><h3 style="font-size:1rem;margin-bottom:.25rem">More → Export Chat</h3><p style="font-size:.9rem;color:var(--gray-600)">Choose <strong>More</strong>, then <strong>Export chat</strong>.</p></div>
<div class="step-card card" style="border-width:4px;box-shadow:4px 4px 0 0 var(--green);position:relative;padding-left:3.5rem"><h3 style="font-size:1rem;margin-bottom:.25rem">Without Media</h3><p style="font-size:.9rem;color:var(--gray-600)">Select <strong>Without media</strong> to get your <code style="background:var(--cream);padding:2px 6px;border-radius:4px;border:1px solid var(--black);color:var(--pink)">.txt</code> file.</p></div>
</div>
<div id="whatsapp-ios" class="whatsapp-steps device-panel-whatsapp" style="display:none;flex-direction:column;gap:1.25rem">
<div class="step-card card" style="border-width:4px;box-shadow:4px 4px 0 0 var(--green);position:relative;padding-left:3.5rem"><h3 style="font-size:1rem;margin-bottom:.25rem">Open Chat Info</h3><p style="font-size:.9rem;color:var(--gray-600)">Tap the contact name at the top of the chat.</p></div>
<div class="step-card card" style="border-width:4px;box-shadow:4px 4px 0 0 var(--green);position:relative;padding-left:3.5rem"><h3 style="font-size:1rem;margin-bottom:.25rem">Export Chat</h3><p style="font-size:.9rem;color:var(--gray-600)">Scroll down and tap <strong>Export Chat</strong>.</p></div>
<div class="step-card card" style="border-width:4px;box-shadow:4px 4px 0 0 var(--green);position:relative;padding-left:3.5rem"><h3 style="font-size:1rem;margin-bottom:.25rem">Without Media</h3><p style="font-size:.9rem;color:var(--gray-600)">Select <strong>Without Media</strong> to get the <code style="background:var(--cream);padding:2px 6px;border-radius:4px;border:1px solid var(--black);color:var(--pink)">.txt</code> file.</p></div>
</div>
</div>
<!-- ========== TELEGRAM PANEL ========== -->
<div id="panel-telegram" class="platform-panel">
<div class="flex justify-center gap-3 mb-8">
<button onclick="switchDevice('telegram','desktop')" class="device-btn device-btn-telegram btn btn--white active-device" style="font-size:.7rem;padding:.4rem 1rem">💻 Desktop</button>
<button onclick="switchDevice('telegram','mobile')" class="device-btn device-btn-telegram btn btn--white" style="font-size:.7rem;padding:.4rem 1rem">📱 Mobile</button>
</div>
<div id="telegram-desktop" class="telegram-steps device-panel-telegram" style="display:flex;flex-direction:column;gap:1.25rem">
<div class="step-card card" style="border-width:4px;box-shadow:4px 4px 0 0 var(--blue);position:relative;padding-left:3.5rem"><h3 style="font-size:1rem;margin-bottom:.25rem">Open Chat Menu</h3><p style="font-size:.9rem;color:var(--gray-600)">Open the chat and click the <strong>⋮</strong> menu in the top-right.</p></div>
<div class="step-card card" style="border-width:4px;box-shadow:4px 4px 0 0 var(--blue);position:relative;padding-left:3.5rem"><h3 style="font-size:1rem;margin-bottom:.25rem">Export Chat History</h3><p style="font-size:.9rem;color:var(--gray-600)">Select <strong>Export chat history</strong> from the dropdown.</p></div>
<div class="step-card card" style="border-width:4px;box-shadow:4px 4px 0 0 var(--blue);position:relative;padding-left:3.5rem"><h3 style="font-size:1rem;margin-bottom:.25rem">Set Format to HTML</h3><p style="font-size:.9rem;color:var(--gray-600)">Uncheck photos/videos and ensure format is <strong>HTML</strong>.</p></div>
</div>
<div id="telegram-mobile" class="telegram-steps device-panel-telegram" style="display:none;flex-direction:column;gap:1.25rem">
<div class="step-card card" style="border-width:4px;box-shadow:4px 4px 0 0 var(--blue);position:relative;padding-left:3.5rem"><h3 style="font-size:1rem;margin-bottom:.25rem">Not Supported Natively</h3><p style="font-size:.9rem;color:var(--gray-600)">Mobile apps don't support export. Please use <strong>Telegram Desktop</strong>.</p></div>
</div>
</div>
<!-- ========== INSTAGRAM PANEL ========== -->
<div id="panel-instagram" class="platform-panel">
<div class="instagram-steps" style="display:flex;flex-direction:column;gap:1.25rem">
<div class="step-card card" style="border-width:4px;box-shadow:4px 4px 0 0 var(--pink);position:relative;padding-left:3.5rem"><h3 style="font-size:1rem;margin-bottom:.25rem">Go to Accounts Center</h3><p style="font-size:.9rem;color:var(--gray-600)">Settings → Accounts Center → <strong>Your information and permissions</strong>.</p></div>
<div class="step-card card" style="border-width:4px;box-shadow:4px 4px 0 0 var(--pink);position:relative;padding-left:3.5rem"><h3 style="font-size:1rem;margin-bottom:.25rem">Download Your Information</h3><p style="font-size:.9rem;color:var(--gray-600)">Select <strong>Download your information</strong> and tap 'Download or transfer'.</p></div>
<div class="step-card card" style="border-width:4px;box-shadow:4px 4px 0 0 var(--pink);position:relative;padding-left:3.5rem"><h3 style="font-size:1rem;margin-bottom:.25rem">Select Messages Only</h3><p style="font-size:.9rem;color:var(--gray-600)">Choose <strong>Specific information</strong> and check only <strong>Messages</strong>.</p></div>
<div class="step-card card" style="border-width:4px;box-shadow:4px 4px 0 0 var(--pink);position:relative;padding-left:3.5rem"><h3 style="font-size:1rem;margin-bottom:.25rem">Format: JSON (Critical)</h3><p style="font-size:.9rem;color:var(--gray-600)">Set the format to <strong style="color:var(--pink)">JSON</strong>. The Algorithm cannot parse HTML/PDF for Instagram.</p></div>
<div class="step-card card" style="border-width:4px;box-shadow:4px 4px 0 0 var(--pink);position:relative;padding-left:3.5rem"><h3 style="font-size:1rem;margin-bottom:.25rem">Download and Extract</h3><p style="font-size:.9rem;color:var(--gray-600)">Find the <code style="background:var(--cream);padding:2px 6px;border-radius:4px;border:1px solid var(--black);color:var(--pink)">message_1.json</code> in your inbox folder.</p></div>
</div>
</div>
<!-- ========== DISCORD PANEL ========== -->
<div id="panel-discord" class="platform-panel">
<div class="discord-steps" style="display:flex;flex-direction:column;gap:1.25rem">
<div class="step-card card" style="border-width:4px;box-shadow:4px 4px 0 0 var(--purple);position:relative;padding-left:3.5rem"><h3 style="font-size:1rem;margin-bottom:.25rem">Recommended: DiscordChatExporter</h3><p style="font-size:.9rem;color:var(--gray-600)">The native export takes 30 days. Use the open-source <a href="https://github.com/Tyrrrz/DiscordChatExporter" target="_blank" style="color:var(--purple);font-weight:700;text-decoration:underline">DiscordChatExporter</a> for instant results.</p></div>
<div class="step-card card" style="border-width:4px;box-shadow:4px 4px 0 0 var(--purple);position:relative;padding-left:3.5rem"><h3 style="font-size:1rem;margin-bottom:.25rem">Export as JSON</h3><p style="font-size:.9rem;color:var(--gray-600)">Open the tool, select your DM, and export as <strong>JSON</strong> format.</p></div>
<div class="step-card card" style="border-width:4px;box-shadow:4px 4px 0 0 var(--purple);position:relative;padding-left:3.5rem"><h3 style="font-size:1rem;margin-bottom:.25rem">Native Method (Slow)</h3><p style="font-size:.9rem;color:var(--gray-600)">User Settings → Privacy & Safety → <strong>Request all of my data</strong>. Takes days to arrive.</p></div>
<div class="step-card card" style="border-width:4px;box-shadow:4px 4px 0 0 var(--purple);position:relative;padding-left:3.5rem"><h3 style="font-size:1rem;margin-bottom:.25rem">Upload the JSON</h3><p style="font-size:.9rem;color:var(--gray-600)">Upload the <code style="background:var(--cream);padding:2px 6px;border-radius:4px;border:1px solid var(--black);color:var(--pink)">.json</code> file here for analysis.</p></div>
</div>
</div>
<!-- Tips -->
<div style="margin-top:4rem;margin-bottom:3rem">
<h2 style="display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem"><span style="font-size:1.75rem;background:var(--yellow);width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid var(--black)">💡</span>Tips for Best Results</h2>
<div class="grid gap-4" style="grid-template-columns:repeat(auto-fit,minmax(260px,1fr))">
<div class="card" style="border-left:4px solid var(--purple);border-width:4px"><p style="font-size:.9rem;color:var(--gray-600)"><strong style="display:block;margin-bottom:.35rem;font-size:1rem">More history = better analysis.</strong>3+ months of data gives the most accurate patterns.</p></div>
<div class="card" style="border-left:4px solid var(--pink);border-width:4px"><p style="font-size:.9rem;color:var(--gray-600)"><strong style="display:block;margin-bottom:.35rem;font-size:1rem">Always export without media.</strong>Photos and videos can't be analyzed.</p></div>
<div class="card" style="border-left:4px solid var(--green);border-width:4px"><p style="font-size:.9rem;color:var(--gray-600)"><strong style="display:block;margin-bottom:.35rem;font-size:1rem">Multiple files? No problem.</strong>Upload multiple .txt, .html, or .json files. They're merged automatically.</p></div>
<div class="card" style="border-left:4px solid var(--yellow);border-width:4px"><p style="font-size:.9rem;color:var(--gray-600)"><strong style="display:block;margin-bottom:.35rem;font-size:1rem">Your privacy is safe.</strong>Chat text is erased immediately after analysis. Nothing stored.</p></div>
</div>
</div>
<!-- CTA -->
<div class="text-center" style="margin-bottom:3rem">
<a href="{{ url_for('index') }}" class="btn btn--primary btn--lg">Start Analyzing ⚡️</a>
</div>
</div>
</main>
<!-- Footer -->
<footer style="background:var(--black);text-align:center;padding:2rem 0;border-top:3px solid var(--yellow)">
<p style="font-size:.75rem;color:var(--gray-500);max-width:400px;margin:0 auto;padding:0 1rem"><strong>The Algorithm</strong> operates securely inside your browser. Your chats never leave this window unless sent to the AI provider you chose.</p>
</footer>
<script>
function switchTab(platform) {
document.querySelectorAll('.tab-btn').forEach(b => {
b.classList.remove('active-tab');
b.style.background = ''; b.style.color = '';
});
const activeBtn = document.getElementById('tab-' + platform);
if (activeBtn) activeBtn.classList.add('active-tab');
document.querySelectorAll('.platform-panel').forEach(p => {
p.classList.remove('active-panel'); p.style.opacity = '0';
});
const activePanel = document.getElementById('panel-' + platform);
if (activePanel) {
activePanel.classList.add('active-panel');
setTimeout(() => { activePanel.style.opacity = '1'; }, 50);
}
history.replaceState(null, null, '#' + platform);
}
document.addEventListener('DOMContentLoaded', () => {
const hash = window.location.hash.replace('#', '');
if (hash) switchTab(hash);
});
function switchDevice(platform, device) {
document.querySelectorAll('.device-btn-' + platform).forEach(b => b.classList.remove('active-device'));
event.currentTarget.classList.add('active-device');
document.querySelectorAll('.device-panel-' + platform).forEach(p => p.style.display = 'none');
document.getElementById(platform + '-' + device).style.display = '';
}
</script>
</body>
</html> |