/** @jsxImportSource https://esm.sh/react */ import JSZip from "https://esm.sh/jszip@3.10.1"; import React, { useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; // function App() { const [result, setResult] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const analyzeZipFile = async (file) => { if (!file) { setError("No file selected"); return; } setLoading(true); setError(null); try { const zip = new JSZip(); const zipContents = await zip.loadAsync(file); const followingFile = zipContents.file("connections/followers_and_following/following.html"); const followersFile = zipContents.file("connections/followers_and_following/followers_1.html"); if (!followingFile || !followersFile) { throw new Error("Required files not found in the zip"); } const followingHtml = await followingFile.async("string"); const followersHtml = await followersFile.async("string"); const following = extractUsersFromHtml(followingHtml); const followers = extractUsersFromHtml(followersHtml); const notFollowingBack = following.filter((user) => !followers.some(follower => follower.username === user.username) ); setResult({ notFollowingBack }); } catch (err) { setError(err.message); } finally { setLoading(false); } }; const handleFileChange = (e) => { const file = e.target.files[0]; if (file) { analyzeZipFile(file); } }; function extractUsersFromHtml(html) { const parser = new DOMParser(); const doc = parser.parseFromString(html, "text/html"); const userLinks = doc.querySelectorAll("div._a6-p a"); return Array.from(userLinks).map((link) => { const href = link.getAttribute("href"); if (href) { const username = href.replace("https://www.instagram.com/", "").replace("/", ""); return { username, profileUrl: `https://www.instagram.com/${username}/` }; } return null; }).filter(Boolean); } return (

Instagram Follower Analyzer

{loading ? "Analyzing..." : "Choose Instagram data zip file"}

{error &&

{error}

} {result && (

Users you follow who don't follow you back:

@{user.username}

Total: {result.notFollowingBack.length}

)}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response( ` Instagram Follower Analyzer

`, { headers: { "Content-Type": "text/html" }, }, ); } const css = ` body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background-color: #fafafa; color: #262626; line-height: 1.5; margin: 0; padding: 0; } .container { max-width: 600px; margin: 0 auto; padding: 20px; } h1 { color: #262626; text-align: center; margin-bottom: 30px; } .file-input-wrapper { position: relative; overflow: hidden; display: inline-block; margin-bottom: 15px; width: 100%; text-align: center; } .file-input-wrapper input[type=file] { font-size: 100px; position: absolute; left: 0; top: 0; opacity: 0; cursor: pointer; } .file-input-wrapper label { background-color: #0095f6; color: white; padding: 10px 20px; border-radius: 3px; cursor: pointer; display: inline-block; width: 80%; max-width: 300px; } .file-input-wrapper input[type=file]:disabled + label { background-color: #b2dffc; cursor: not-allowed; } .error { color: #ed4956; text-align: center; } .result { background-color: white; border: 1px solid #dbdbdb; border-radius: 3px; padding: 20px; margin-top: 20px; } h2 { color: #262626; font-size: 18px; margin-top: 0; } ul { list-style-type: none; padding: 0; } li { margin-bottom: 10px; } a { color: #0095f6; text-decoration: none; } a:hover { text-decoration: underline; } .total { font-weight: bold; margin-top: 20px; } footer { text-align: center; margin-top: 30px; font-size: 14px; color: #8e8e8e; } `;

instagramAnalyzeUnfollowers

Version 2