neuronalstar

Running

App Files Files Community

salomonsky commited on Dec 26, 2025

Commit

338bfd5

verified ·

1 Parent(s): fa2af09

Update index.html

Browse files

Files changed (1) hide show

index.html +965 -2

index.html CHANGED Viewed

@@ -6,7 +6,41 @@
   <title>Navegador Neuronal de Twitter</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="styles.css">
 </head>
 <body class="m-0 overflow-hidden font-[Orbitron] text-slate-200">
@@ -163,6 +197,935 @@
   <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/shaders/LuminosityHighPassShader.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/UnrealBloomPass.js"></script>
-  <script type="module" src="main.js"></script>
 </body>
 </html>

   <title>Navegador Neuronal de Twitter</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap" rel="stylesheet">
+  <style>
+    body {
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+        background-color: #020205;
+    }
+    body::-webkit-scrollbar { display: none; }
+    .glass-panel {
+        background: rgba(10, 15, 30, 0.75);
+        backdrop-filter: blur(16px);
+        -webkit-backdrop-filter: blur(16px);
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
+    }
+    @keyframes shimmer {
+        0% { transform: translateX(-100%); }
+        100% { transform: translateX(100%); }
+    }
+    .animate-shimmer {
+        animation: shimmer 2s infinite;
+    }
+    .custom-scrollbar::-webkit-scrollbar {
+        width: 4px;
+    }
+    .custom-scrollbar::-webkit-scrollbar-track {
+        background: rgba(0,0,0,0.3);
+    }
+    .custom-scrollbar::-webkit-scrollbar-thumb {
+        background: #22d3ee;
+        border-radius: 4px;
+    }
+  </style>
 </head>
 <body class="m-0 overflow-hidden font-[Orbitron] text-slate-200">
   <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/shaders/LuminosityHighPassShader.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/UnrealBloomPass.js"></script>
+  <script type="module">
+    import { initializeApp } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-app.js";
+    import { getAnalytics } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-analytics.js";
+    import { getAuth, onAuthStateChanged, createUserWithEmailAndPassword, signInWithEmailAndPassword, signInAnonymously, signOut, setPersistence, browserLocalPersistence } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-auth.js";
+    import { getFirestore, doc, addDoc, onSnapshot, collection, setDoc, getDoc, query, setLogLevel } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-firestore.js";
+    const firebaseConfig = {
+      apiKey: "AIzaSyB4EZKkAH3weFSZNBQA8Y63gt5XbaeZGsQ",
+      authDomain: "neuronal-1f3b9.firebaseapp.com",
+      projectId: "neuronal-1f3b9",
+      storageBucket: "neuronal-1f3b9.firebasestorage.app",
+      messagingSenderId: "208887839866",
+      appId: "1:208887839866:web:adbb697dd0b63195b10fc3",
+      measurementId: "G-102SEBLQFJ"
+    };
+    const DEFAULT_GEMINI_KEY = 'AIzaSyDmoQNpzgzW21f_WFCU9YbaAeI1fdOJMlo';
+    function getLocalGeminiKey() {
+      try { return localStorage.getItem('GEMINI_API_KEY') || DEFAULT_GEMINI_KEY; } catch { return DEFAULT_GEMINI_KEY; }
+    }
+    function setLocalGeminiKey(k) {
+      try { localStorage.setItem('GEMINI_API_KEY', k || ''); } catch {}
+    }
+    const THREE = window.THREE;
+    const OrbitControls = THREE.OrbitControls;
+    const TextGeometry = THREE.TextGeometry;
+    const FontLoader = THREE.FontLoader;
+    let scene, camera, renderer, controls, raycaster, mouse;
+    let composer;
+    let hashtagGroup, tooltip;
+    let font;
+    let clock = new THREE.Clock();
+    let cometGroup, cometHead, cometLight, cometText;
+    let cometParticlesGeometry, cometParticlesMaterial, cometParticlesMesh;
+    let cometParticlesData = [];
+    const COMET_PARTICLE_COUNT = 400;
+    const COMET_WORDS = ["NEXUS", "DATA", "VOID", "SIGNAL", "CYBER", "PULSE", "NODE", "FLUX", "SYNTH", "CORE", "ORBIT", "LINK"];
+    let cometAngle = 0;
+    let userCentroidForComet = new THREE.Vector3(0,0,0);
+    let bgParticles;
+    let db, auth, analytics, userId = null, appId = "neuronal-1f3b9", userProfile = null;
+    let userMaps = {}, userProfileCache = {}, allMapsDataCache = {};
+    let isAuthReady = false, isFontReady = false;
+    let minimapCtx, minimapDotCoords = [], minimapScale = 0.025;
+    const MINIMAP_DOT_SIZE = 2;
+    let intersected = {};
+    const isHFStatic = /\.hf\.space$/.test(location.hostname);
+    let authMode = null;
+    const normalizeString = (str) => {
+      if (!str) return "";
+      return str.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
+    };
+    const loader = new FontLoader();
+    loader.load('https://cdn.jsdelivr.net/npm/three@0.128.0/examples/fonts/helvetiker_regular.typeface.json', (loadedFont) => {
+        font = loadedFont;
+        isFontReady = true;
+        checkAppReady();
+    });
+    initFirebase();
+    const gkInput = document.getElementById('geminiKeyInput');
+    const gkBtn = document.getElementById('saveGeminiKeyBtn');
+    const gkStatus = document.getElementById('geminiKeyStatus');
+    if (gkInput && gkBtn) {
+       const existing = getLocalGeminiKey();
+       if(existing && existing !== DEFAULT_GEMINI_KEY) gkInput.value = existing;
+       gkBtn.addEventListener('click', (e) => {
+         e.preventDefault();
+         setLocalGeminiKey(gkInput.value.trim());
+         gkStatus.textContent = 'GUARDADO';
+         setTimeout(() => gkStatus.textContent = '', 2000);
+       });
+    }
+    async function initFirebase() {
+        try {
+            const app = initializeApp(firebaseConfig);
+            db = getFirestore(app);
+            auth = getAuth(app);
+            analytics = getAnalytics(app);
+            setLogLevel('Silent');
+            const els = {
+                msg: document.getElementById('loginMessage'),
+                overlay: document.getElementById('loginOverlay'),
+                step1: document.getElementById('authStep1'),
+                step2: document.getElementById('authStep2'),
+                email: document.getElementById('loginEmail'),
+                pass: document.getElementById('loginPassword'),
+                loginBtn: document.getElementById('loginButton'),
+                regBtn: document.getElementById('registerButton'),
+                anonBtn: document.getElementById('btnGoToAnon'),
+                saveUserBtn: document.getElementById('saveUsernameButton'),
+                userInput: document.getElementById('usernameInput'),
+                backBtn: document.getElementById('backToStep1'),
+                logoutBtn: document.getElementById('mainLogoutButton'),
+                ui: document.getElementById('ui')
+            };
+            els.regBtn.addEventListener('click', async () => {
+                if(els.email.value.length < 6) {
+                    els.msg.innerText = "Email/Pass muy corto"; return;
+                }
+                els.msg.innerText = "Procesando registro...";
+                authMode = 'email';
+                try {
+                    await setPersistence(auth, browserLocalPersistence);
+                    await createUserWithEmailAndPassword(auth, els.email.value, els.pass.value);
+                } catch(e) { els.msg.innerText = "Error: " + e.message; }
+            });
+            els.loginBtn.addEventListener('click', async () => {
+                els.msg.innerText = "Autenticando...";
+                authMode = 'email';
+                try {
+                     await setPersistence(auth, browserLocalPersistence);
+                     await signInWithEmailAndPassword(auth, els.email.value, els.pass.value);
+                } catch(e) { els.msg.innerText = "Error: " + e.message; }
+            });
+            els.anonBtn.addEventListener('click', () => {
+                authMode = 'anonymous';
+                els.step1.classList.add('hidden');
+                els.step2.classList.remove('hidden');
+            });
+            els.backBtn.addEventListener('click', () => {
+                els.step2.classList.add('hidden');
+                els.step1.classList.remove('hidden');
+                els.msg.innerText = "";
+            });
+            els.saveUserBtn.addEventListener('click', async () => {
+                const name = normalizeString(els.userInput.value.trim());
+                if(name.length < 3) {
+                    els.userInput.classList.add('border-red-500'); return;
+                }
+                els.userInput.classList.remove('border-red-500');
+                els.saveUserBtn.innerText = "ESTABLECIENDO ENLACE...";
+                els.saveUserBtn.disabled = true;
+                try {
+                    if(authMode === 'anonymous') await signInAnonymously(auth);
+                    if(auth.currentUser) {
+                        await saveUserProfile(auth.currentUser.uid, name);
+                        els.overlay.style.opacity = '0';
+                        setTimeout(() => els.overlay.style.display = 'none', 700);
+                        initScene();
+                        loadAllMaps();
+                        els.ui.classList.remove('hidden');
+                        setTimeout(() => {
+                           els.ui.style.transform = 'translateX(0)';
+                           els.ui.style.opacity = '1';
+                        }, 100);
+                    }
+                } catch(e) {
+                    els.saveUserBtn.innerText = "ERROR DE CONEXIÓN";
+                    els.saveUserBtn.disabled = false;
+                    console.error(e);
+                }
+            });
+            els.logoutBtn.addEventListener('click', async () => { await signOut(auth); location.reload(); });
+            onAuthStateChanged(auth, async (user) => {
+                if(user) {
+                    userId = user.uid;
+                    isAuthReady = true;
+                    await fetchUserProfile(userId);
+                    if(userProfile) {
+                        els.overlay.style.opacity = '0';
+                        setTimeout(() => els.overlay.style.display = 'none', 700);
+                        els.ui.classList.remove('hidden');
+                        setTimeout(() => {
+                           els.ui.style.transform = 'translateX(0)';
+                           els.ui.style.opacity = '1';
+                        }, 100);
+                        document.getElementById('authStatus').textContent = userProfile.username;
+                        if(!scene) { initScene(); loadAllMaps(); }
+                    } else {
+                        els.step1.classList.add('hidden');
+                        els.step2.classList.remove('hidden');
+                        if(authMode === 'email') els.userInput.focus();
+                    }
+                } else {
+                    els.overlay.style.display = 'flex';
+                    els.overlay.style.opacity = '1';
+                    els.step1.classList.remove('hidden');
+                    els.step2.classList.add('hidden');
+                    els.ui.classList.add('hidden');
+                }
+            });
+        } catch (e) { console.error("Firebase Error", e); }
+    }
+    async function fetchUserProfile(uid) {
+        if(!db) return;
+        try {
+            const snap = await getDoc(doc(db, 'artifacts', appId, 'users', uid, 'user_data', 'profile'));
+            if(snap.exists()) { userProfile = snap.data(); userProfileCache[uid] = userProfile; }
+        } catch {}
+    }
+    async function saveUserProfile(uid, name) {
+        if(!db) return;
+        await setDoc(doc(db, 'artifacts', appId, 'users', uid, 'user_data', 'profile'), { username: name });
+        userProfile = { username: name };
+        userProfileCache[uid] = userProfile;
+        document.getElementById('authStatus').textContent = name;
+    }
+    async function getProfile(uid) {
+        if(userProfileCache[uid]) return userProfileCache[uid];
+        try {
+            const snap = await getDoc(doc(db, 'artifacts', appId, 'users', uid, 'user_data', 'profile'));
+            if(snap.exists()) { userProfileCache[uid] = snap.data(); return snap.data(); }
+        } catch {}
+        return null;
+    }
+    function checkAppReady() { if(isAuthReady && isFontReady && userProfile) { initScene(); loadAllMaps(); } }
+    function initScene() {
+        if(scene) return;
+        scene = new THREE.Scene();
+        scene.fog = new THREE.FogExp2(0x020205, 0.005);
+        camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 0.1, 2500);
+        camera.position.set(0, 5, 30);
+        renderer = new THREE.WebGLRenderer({ antialias: false, powerPreference: "high-performance" });
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5));
+        renderer.toneMapping = THREE.ReinhardToneMapping;
+        renderer.toneMappingExposure = 1.2;
+        document.getElementById('container').appendChild(renderer.domElement);
+        tooltip = document.getElementById('tooltip');
+        controls = new OrbitControls(camera, renderer.domElement);
+        controls.enableDamping = true;
+        controls.dampingFactor = 0.04;
+        controls.rotateSpeed = 0.5;
+        controls.zoomSpeed = 0.7;
+        controls.maxDistance = 600;
+        controls.target.set(0,0,0);
+        scene.add(new THREE.AmbientLight(0x404040, 1.0));
+        const dirLight = new THREE.DirectionalLight(0xaaccff, 1.2);
+        dirLight.position.set(50, 80, 50);
+        scene.add(dirLight);
+        const renderScene = new THREE.RenderPass(scene, camera);
+        const bloomPass = new THREE.UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85);
+        bloomPass.threshold = 0.15;
+        bloomPass.strength = 1.4;
+        bloomPass.radius = 0.6;
+        composer = new THREE.EffectComposer(renderer);
+        composer.addPass(renderScene);
+        composer.addPass(bloomPass);
+        raycaster = new THREE.Raycaster();
+        mouse = new THREE.Vector2();
+        hashtagGroup = new THREE.Group();
+        scene.add(hashtagGroup);
+        createAdvancedBackground();
+        initAdvancedComet();
+        const visBtn = document.getElementById('visualizeButton');
+        if(!visBtn.dataset.bound) {
+            visBtn.addEventListener('click', handleAnalysisAndVisualization);
+            visBtn.dataset.bound = '1';
+        }
+        ['level1', 'level2', 'level3'].forEach(l => {
+            document.getElementById(`${l}Slider`).addEventListener('input', e => document.getElementById(`${l}Value`).innerText = e.target.value);
+        });
+        window.addEventListener('resize', onWindowResize);
+        window.addEventListener('mousemove', onPointerMove);
+        const mmCanvas = document.getElementById('minimap');
+        if(mmCanvas) {
+            minimapCtx = mmCanvas.getContext('2d');
+            mmCanvas.addEventListener('click', onMinimapClick);
+        }
+        document.getElementById('zoomInButton').addEventListener('click', () => { minimapScale *= 1.5; drawMinimap(); });
+        document.getElementById('zoomOutButton').addEventListener('click', () => { minimapScale /= 1.5; drawMinimap(); });
+        animate();
+    }
+    function createAdvancedBackground() {
+        const pGeo = new THREE.BufferGeometry();
+        const count = 5000;
+        const pos = new Float32Array(count * 3);
+        const sizes = new Float32Array(count);
+        for(let i=0; i<count; i++) {
+            pos[i*3] = (Math.random()-0.5) * 1500;
+            pos[i*3+1] = (Math.random()-0.5) * 1500;
+            pos[i*3+2] = (Math.random()-0.5) * 1500;
+            sizes[i] = Math.random();
+        }
+        pGeo.setAttribute('position', new THREE.BufferAttribute(pos, 3));
+        pGeo.setAttribute('size', new THREE.BufferAttribute(sizes, 1));
+        const pMat = new THREE.PointsMaterial({
+            color: 0x88ccff,
+            size: 1.0,
+            transparent: true,
+            opacity: 0.6,
+            sizeAttenuation: true
+        });
+        bgParticles = new THREE.Points(pGeo, pMat);
+        scene.add(bgParticles);
+    }
+    function initAdvancedComet() {
+        if(cometGroup) { scene.remove(cometGroup); }
+        if(cometParticlesMesh) { scene.remove(cometParticlesMesh); }
+        if(!font || !userId) return;
+        userCentroidForComet.copy(getCurrentUserCentroid());
+        cometGroup = new THREE.Group();
+        const coreGeo = new THREE.SphereGeometry(0.5, 32, 32);
+        const coreMat = new THREE.MeshBasicMaterial({ color: 0xffffff });
+        cometHead = new THREE.Mesh(coreGeo, coreMat);
+        const haloGeo = new THREE.SphereGeometry(0.9, 32, 32);
+        const haloMat = new THREE.MeshBasicMaterial({
+            color: 0x00ffff,
+            transparent: true,
+            opacity: 0.25,
+            blending: THREE.AdditiveBlending
+        });
+        const halo = new THREE.Mesh(haloGeo, haloMat);
+        cometHead.add(halo);
+        cometGroup.add(cometHead);
+        cometLight = new THREE.PointLight(0x00ffff, 2.5, 60);
+        cometGroup.add(cometLight);
+        const word = COMET_WORDS[Math.floor(Math.random() * COMET_WORDS.length)];
+        const tGeo = new TextGeometry(word, { font: font, size: 0.4, height: 0.02, bevelEnabled: false });
+        tGeo.center();
+        const tMat = new THREE.MeshBasicMaterial({ color: 0xccffff });
+        cometText = new THREE.Mesh(tGeo, tMat);
+        cometText.position.y = 1.3;
+        cometGroup.add(cometText);
+        scene.add(cometGroup);
+        const pGeo = new THREE.BufferGeometry();
+        const positions = new Float32Array(COMET_PARTICLE_COUNT * 3);
+        const colors = new Float32Array(COMET_PARTICLE_COUNT * 3);
+        const sizes = new Float32Array(COMET_PARTICLE_COUNT);
+        pGeo.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+        pGeo.setAttribute('color', new THREE.BufferAttribute(colors, 3));
+        pGeo.setAttribute('size', new THREE.BufferAttribute(sizes, 1));
+        const pMat = new THREE.PointsMaterial({
+            vertexColors: true,
+            size: 1.0,
+            transparent: true,
+            opacity: 0.9,
+            blending: THREE.AdditiveBlending,
+            depthWrite: false,
+            sizeAttenuation: true
+        });
+        cometParticlesMesh = new THREE.Points(pGeo, pMat);
+        scene.add(cometParticlesMesh);
+        cometParticlesData = [];
+        for(let i=0; i<COMET_PARTICLE_COUNT; i++) {
+            cometParticlesData.push({
+                life: -1,
+                velocity: new THREE.Vector3()
+            });
+            positions[i*3] = 99999;
+        }
+    }
+    function updateAdvancedComet(delta, time) {
+        if(!cometGroup || !cometParticlesMesh) return;
+        cometAngle += delta * 0.35;
+        const rX = 80; const rZ = 60;
+        const x = userCentroidForComet.x + Math.cos(cometAngle) * rX;
+        const z = userCentroidForComet.z + Math.sin(cometAngle) * rZ;
+        const y = userCentroidForComet.y + Math.sin(cometAngle * 2.0) * 20;
+        const targetPos = new THREE.Vector3(x, y, z);
+        const nextPos = new THREE.Vector3(
+            userCentroidForComet.x + Math.cos(cometAngle + 0.1) * rX,
+            userCentroidForComet.y + Math.sin((cometAngle + 0.1) * 2.0) * 20,
+            userCentroidForComet.z + Math.sin(cometAngle + 0.1) * rZ
+        );
+        cometGroup.position.copy(targetPos);
+        cometGroup.lookAt(nextPos);
+        if(cometText) cometText.quaternion.copy(camera.quaternion);
+        const positions = cometParticlesMesh.geometry.attributes.position.array;
+        const colors = cometParticlesMesh.geometry.attributes.color.array;
+        const sizes = cometParticlesMesh.geometry.attributes.size.array;
+        let spawnCount = 5;
+        for(let i=0; i<COMET_PARTICLE_COUNT; i++) {
+            if(spawnCount > 0 && cometParticlesData[i].life < 0) {
+                cometParticlesData[i].life = 1.0;
+                positions[i*3] = cometGroup.position.x + (Math.random()-0.5);
+                positions[i*3+1] = cometGroup.position.y + (Math.random()-0.5);
+                positions[i*3+2] = cometGroup.position.z + (Math.random()-0.5);
+                colors[i*3] = 0.2; colors[i*3+1] = 1.0; colors[i*3+2] = 1.0;
+                sizes[i] = 1.2;
+                spawnCount--;
+            }
+        }
+        for(let i=0; i<COMET_PARTICLE_COUNT; i++) {
+            if(cometParticlesData[i].life > 0) {
+                const d = cometParticlesData[i];
+                d.life -= delta * 0.7;
+                if(d.life > 0.6) {
+                    colors[i*3] = 0.2; colors[i*3+1] = 1.0; colors[i*3+2] = 1.0;
+                } else if (d.life > 0.3) {
+                    colors[i*3] = 0.6; colors[i*3+1] = 0.2; colors[i*3+2] = 1.0;
+                } else {
+                    colors[i*3] = 0.1; colors[i*3+1] = 0.1; colors[i*3+2] = 0.5;
+                }
+                sizes[i] = d.life * 1.8;
+            } else {
+                positions[i*3] = 99999;
+            }
+        }
+        cometParticlesMesh.geometry.attributes.position.needsUpdate = true;
+        cometParticlesMesh.geometry.attributes.color.needsUpdate = true;
+        cometParticlesMesh.geometry.attributes.size.needsUpdate = true;
+    }
+    function animate() {
+        requestAnimationFrame(animate);
+        const delta = clock.getDelta();
+        const time = clock.getElapsedTime();
+        controls.update();
+        if(bgParticles) {
+            bgParticles.rotation.y = time * 0.015;
+            bgParticles.rotation.z = time * 0.005;
+        }
+        updateAdvancedComet(delta, time);
+        updateRaycaster();
+        drawMinimap();
+        hashtagGroup.children.forEach(obj => {
+            if (obj.userData.isText) {
+                obj.lookAt(camera.position);
+                const dist = obj.position.distanceTo(camera.position);
+                let scale = (1/dist) * 12;
+                scale = Math.max(0.6, Math.min(5.0, scale));
+                obj.scale.set(scale, scale, scale);
+            }
+        });
+        composer.render();
+    }
+    function getCurrentUserCentroid() {
+      if (!userId || !userMaps[userId] || userMaps[userId].length === 0) return new THREE.Vector3(0,0,0);
+      const centroid = new THREE.Vector3(0,0,0);
+      userMaps[userId].forEach(o => centroid.add(o));
+      centroid.divideScalar(userMaps[userId].length);
+      return centroid;
+    }
+    function visualizeHashtags(dataList, origin, level, parentColor = null) {
+      if (!dataList || dataList.length === 0) return;
+      for (const item of dataList) {
+        let currentTag, variantsList;
+        if (level === 1) {
+          currentTag = normalizeString(item.palabra_principal);
+          variantsList = item.variantes || [];
+        } else if (level === 2) {
+          currentTag = normalizeString(item.palabra_variante);
+          variantsList = item.sub_variantes || [];
+        } else {
+          currentTag = normalizeString(item);
+          variantsList = [];
+        }
+        if (!currentTag) continue;
+        const { color, h } = stringToHslColor(currentTag);
+        const nodeColor = (level === 1) ? color : parentColor;
+        const nodeMaterial = new THREE.MeshPhysicalMaterial({
+          color: new THREE.Color(nodeColor),
+          emissive: new THREE.Color(nodeColor),
+          emissiveIntensity: level === 1 ? 0.8 : 0.4,
+          roughness: 0.2,
+          metalness: 0.1,
+          transmission: 0.1,
+          transparent: true,
+          opacity: 0.95
+        });
+        const theta = (h / 360) * Math.PI * 2;
+        let phiHash = 0;
+        for (let i = 0; i < currentTag.length; i++) phiHash = (phiHash + currentTag.charCodeAt(i) * 13) % 180;
+        const phi = ((phiHash / 180) * 90 + 45) * (Math.PI / 180);
+        const baseRadius = 12 / (level * level);
+        const cx = baseRadius * Math.sin(phi) * Math.cos(theta);
+        const cy = baseRadius * Math.cos(phi);
+        const cz = baseRadius * Math.sin(phi) * Math.sin(theta);
+        const clusterCenter = new THREE.Vector3(cx, cy, cz).add(origin);
+        const lineMat = new THREE.LineBasicMaterial({
+            color: new THREE.Color(nodeColor),
+            transparent: true,
+            opacity: 0.25
+        });
+        const line = new THREE.Line(new THREE.BufferGeometry().setFromPoints([origin, clusterCenter]), lineMat);
+        hashtagGroup.add(line);
+        let sRad = (level === 1) ? 0.35 : (level === 2 ? 0.18 : 0.1);
+        const sphere = new THREE.Mesh(new THREE.SphereGeometry(sRad, 16, 16), nodeMaterial);
+        sphere.position.copy(clusterCenter);
+        sphere.userData.hashtag = currentTag;
+        sphere.userData.level = level;
+        hashtagGroup.add(sphere);
+        let tSize = (level === 1) ? 0.35 : (level === 2 ? 0.18 : 0.12);
+        const tGeo = new TextGeometry(currentTag.toUpperCase(), { font: font, size: tSize, height: 0.01, bevelEnabled: false });
+        tGeo.computeBoundingBox();
+        const tMesh = new THREE.Mesh(tGeo, new THREE.MeshBasicMaterial({ color: nodeColor }));
+        tMesh.position.copy(clusterCenter);
+        tMesh.position.y += sRad + 0.15;
+        tMesh.position.x -= (tGeo.boundingBox.max.x - tGeo.boundingBox.min.x)/2;
+        tMesh.userData.isText = true;
+        hashtagGroup.add(tMesh);
+        visualizeHashtags(variantsList, clusterCenter, level + 1, nodeColor);
+      }
+    }
+    function visualizeRoot(topic, origin) {
+      const { color } = stringToHslColor(topic);
+      const mat = new THREE.MeshStandardMaterial({
+        color: new THREE.Color(color),
+        emissive: new THREE.Color(color),
+        emissiveIntensity: 2.2,
+        roughness: 0.4
+      });
+      const sphere = new THREE.Mesh(new THREE.SphereGeometry(0.7, 32, 32), mat);
+      sphere.position.copy(origin);
+      sphere.userData.hashtag = topic;
+      sphere.userData.level = 0;
+      hashtagGroup.add(sphere);
+      const tGeo = new TextGeometry(topic.toUpperCase(), { font: font, size: 0.6, height: 0.05, bevelEnabled: false });
+      tGeo.computeBoundingBox();
+      const tMesh = new THREE.Mesh(tGeo, new THREE.MeshBasicMaterial({ color: 0xffffff }));
+      tMesh.position.copy(origin);
+      tMesh.position.y += 1.0;
+      tMesh.position.x -= (tGeo.boundingBox.max.x - tGeo.boundingBox.min.x) / 2;
+      tMesh.userData.isText = true;
+      hashtagGroup.add(tMesh);
+    }
+    function createUserSun(pos, name, isMe) {
+        const col = isMe ? 0xffaa00 : 0x00ff88;
+        const mat = new THREE.MeshStandardMaterial({
+            color: col, emissive: col, emissiveIntensity: 1.8, roughness: 0.2
+        });
+        const mesh = new THREE.Mesh(new THREE.SphereGeometry(3, 32, 32), mat);
+        mesh.position.copy(pos);
+        mesh.userData.hashtag = `Usuario: ${name}`;
+        mesh.userData.isPlaceholder = true;
+        hashtagGroup.add(mesh);
+        const tGeo = new TextGeometry(name.toUpperCase(), { font: font, size: 1.2, height: 0.1 });
+        tGeo.computeBoundingBox();
+        const tMesh = new THREE.Mesh(tGeo, new THREE.MeshBasicMaterial({ color: 0xffffff }));
+        tMesh.position.copy(pos);
+        tMesh.position.y += 4;
+        tMesh.position.x -= (tGeo.boundingBox.max.x - tGeo.boundingBox.min.x)/2;
+        tMesh.userData.isText = true;
+        hashtagGroup.add(tMesh);
+    }
+    async function fetchWithTimeout(url, options = {}, timeoutMs = 25000) {
+      const controller = new AbortController();
+      const id = setTimeout(() => controller.abort(), timeoutMs);
+      try {
+        return await fetch(url, { ...options, signal: controller.signal });
+      } finally { clearTimeout(id); }
+    }
+    async function fetchWithBackoff(url, options, retries = 2, delay = 1000) {
+      try {
+        return await fetchWithTimeout(url, options);
+      } catch (err) {
+        if (retries > 0) {
+          await new Promise(r => setTimeout(r, delay));
+          return fetchWithBackoff(url, options, retries - 1, delay * 2);
+        } else { throw err; }
+      }
+    }
+    async function callGemini(topic, mc, vc, svc) {
+        const k = getLocalGeminiKey();
+        if(!k || k.length<10) throw new Error("Falta API Key");
+        const schema = {
+            type: "OBJECT",
+            properties: {
+                analisis: { type: "STRING" },
+                lista_palabras: { type: "ARRAY", items: { type: "OBJECT", properties: { palabra_principal: {type:"STRING"}, variantes: {type:"ARRAY", items: {type:"OBJECT", properties: {palabra_variante: {type:"STRING"}, sub_variantes: {type:"ARRAY", items:{type:"STRING"}}}}} } } }
+            }
+        };
+        const prompt = `Tema: ${topic}. 1. Genera ${mc} palabras clave (Nivel 1). 2. Para cada una, ${vc} variantes (Nivel 2). 3. Para cada variante, ${svc} sub-variantes (Nivel 3). JSON Puro sin markdown.`;
+        const url = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${k}`;
+        if (!isHFStatic) {
+            try {
+                const proxyResp = await fetchWithBackoff('/.netlify/functions/gemini-proxy', {
+                    method: 'POST', headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ model: 'gemini-2.5-flash-preview-09-2025', payload: { contents: [{parts:[{text: prompt}]}] } })
+                }, 1, 1000);
+                if (proxyResp.ok) return await proxyResp.json();
+            } catch (e) {}
+        }
+        const resp = await fetchWithBackoff(url, {
+            method: 'POST', headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({ contents: [{parts:[{text: prompt}]}], generationConfig: { responseMimeType: "application/json", responseSchema: schema } })
+        });
+        if(!resp.ok) throw new Error(await resp.text());
+        return await resp.json();
+    }
+    async function handleAnalysisAndVisualization() {
+        if(!font) return;
+        const topic = normalizeString(document.getElementById('topicInput').value);
+        if(!topic) return;
+        const btn = document.getElementById('visualizeButton');
+        const pb = document.getElementById('progressBar');
+        const pbc = document.getElementById('progressBarContainer');
+        const originalBtnHtml = btn.innerHTML;
+        btn.disabled = true; btn.innerHTML = '<span class="animate-pulse">PROCESANDO RED...</span>';
+        pbc.classList.remove('hidden'); pb.style.width = "90%"; pb.style.transition = "width 15s ease-out";
+        try {
+            const mc = document.getElementById('level1Slider').value;
+            const vc = document.getElementById('level2Slider').value;
+            const svc = document.getElementById('level3Slider').value;
+            let origin = new THREE.Vector3(0,0,0);
+            const myMaps = userMaps[userId] || [];
+            if(myMaps.length === 0) {
+                const globalIdx = Object.keys(userMaps).length;
+                origin.set(globalIdx*800*Math.cos(globalIdx), 0, globalIdx*800*Math.sin(globalIdx));
+            } else {
+                let center = new THREE.Vector3(); myMaps.forEach(m=>center.add(m)); center.divideScalar(myMaps.length);
+                const r = Math.sqrt(myMaps.length)*40; const a = myMaps.length;
+                origin.set(center.x + r*Math.cos(a), 0, center.z + r*Math.sin(a));
+            }
+            const res = await callGemini(topic, mc, vc, svc);
+            const txt = res.candidates?.[0]?.content?.parts?.[0]?.text;
+            if(!txt) throw new Error("La IA no generó datos válidos.");
+            const json = JSON.parse(txt);
+            visualizeRoot(topic, origin);
+            visualizeHashtags(json.lista_palabras, origin, 1);
+            if(db && userId) await addDoc(collection(db,'artifacts',appId,'public','data','maps'), {
+                topic, depth: "3", origin: {x:origin.x, y:origin.y, z:origin.z}, data: JSON.stringify(json), createdAt: new Date(), userId
+            });
+        } catch(e) {
+            console.error(e);
+            alert("Error en análisis: " + e.message);
+        } finally {
+            btn.disabled = false; btn.innerHTML = originalBtnHtml;
+            pb.style.width = "100%"; setTimeout(()=>{pbc.classList.add('hidden'); pb.style.width="0%";}, 500);
+        }
+    }
+    function loadAllMaps() {
+        if(!db || !font) { setTimeout(loadAllMaps,500); return; }
+        const q = query(collection(db,'artifacts',appId,'public','data','maps'));
+        onSnapshot(q, async (snap) => {
+            while(hashtagGroup.children.length > 0){
+                let obj = hashtagGroup.children[0];
+                hashtagGroup.remove(obj);
+                if(obj.geometry) obj.geometry.dispose();
+                if(obj.material) {
+                   if(Array.isArray(obj.material)) obj.material.forEach(m=>m.dispose());
+                   else obj.material.dispose();
+                }
+            }
+            userMaps = {}; allMapsDataCache = {};
+            snap.docs.forEach(d => {
+                const m = d.data();
+                if(!m.origin) return;
+                const o = new THREE.Vector3(m.origin.x, m.origin.y, m.origin.z);
+                if(!userMaps[m.userId]) userMaps[m.userId] = [];
+                userMaps[m.userId].push(o);
+                try {
+                    const data = JSON.parse(m.data);
+                    visualizeRoot(m.topic, o);
+                    visualizeHashtags(data.lista_palabras, o, 1);
+                } catch {}
+            });
+            const uids = Object.keys(userMaps);
+            const list = document.getElementById('userList');
+            if(list) list.innerHTML = '';
+            for(const uid of uids) {
+                const prof = await getProfile(uid);
+                const name = prof ? prof.username : "ANON " + uid.substring(0,4);
+                if(list) {
+                    const item = document.createElement('div');
+                    item.className = 'text-cyan-400 hover:text-white cursor-pointer hover:bg-white/5 p-1 rounded transition-colors text-[10px] tracking-wide';
+                    item.innerHTML = `> <span class="font-bold">${name}</span>`;
+                    item.onclick = () => teleportToUser(uid);
+                    list.appendChild(item);
+                }
+                const origins = userMaps[uid];
+                if(origins.length > 0) {
+                    const c = new THREE.Vector3(); origins.forEach(p=>c.add(p)); c.divideScalar(origins.length);
+                    createUserSun(c, name, uid === userId);
+                }
+            }
+            initAdvancedComet();
+            drawMinimap();
+            focusOnUserMaps();
+        });
+    }
+    function focusOnUserMaps() {
+        if(!controls || !userId || !userMaps[userId]) return;
+        const c = getCurrentUserCentroid();
+        controls.target.copy(c);
+        camera.position.copy(c).add(new THREE.Vector3(0,10,40));
+    }
+    function teleportToUser(uid) {
+        if(!userMaps[uid]) return;
+        const origins = userMaps[uid];
+        const c = new THREE.Vector3(); origins.forEach(p=>c.add(p)); c.divideScalar(origins.length);
+        controls.target.copy(c);
+        camera.position.copy(c).add(new THREE.Vector3(0,10,40));
+    }
+    function drawMinimap() {
+        if(!minimapCtx) return;
+        const w = minimapCtx.canvas.width; const h = minimapCtx.canvas.height;
+        minimapCtx.clearRect(0,0,w,h);
+        minimapDotCoords = [];
+        const myC = getCurrentUserCentroid();
+        Object.keys(userMaps).forEach(uid => {
+             const origins = userMaps[uid];
+             const c = new THREE.Vector3(); origins.forEach(p=>c.add(p)); c.divideScalar(origins.length);
+             const x = w/2 + (c.x - myC.x)*minimapScale;
+             const y = h/2 + (c.z - myC.z)*minimapScale;
+             const isMe = (uid === userId);
+             const mainColor = isMe ? '#22d3ee' : '#64748b';
+             minimapDotCoords.push({x, y, uid});
+             if(origins.length > 0) {
+                 const satColor = isMe ? 'rgba(34, 211, 238, 0.4)' : 'rgba(100, 116, 139, 0.4)';
+                 origins.forEach(o => {
+                    const sx = w/2 + (o.x - myC.x)*minimapScale;
+                    const sy = h/2 + (o.z - myC.z)*minimapScale;
+                    minimapCtx.beginPath();
+                    minimapCtx.arc(sx, sy, 1, 0, Math.PI*2);
+                    minimapCtx.fillStyle = satColor;
+                    minimapCtx.fill();
+                 });
+             }
+             minimapCtx.fillStyle = mainColor;
+             minimapCtx.beginPath();
+             minimapCtx.arc(x,y, isMe?4:2.5, 0, Math.PI*2);
+             minimapCtx.fill();
+             if(isMe) {
+                 minimapCtx.strokeStyle = 'rgba(34, 211, 238, 0.3)';
+                 minimapCtx.beginPath(); minimapCtx.arc(x,y, 8, 0, Math.PI*2); minimapCtx.stroke();
+             }
+        });
+        if (cometGroup) {
+            const cometX = w/2 + (cometGroup.position.x - myC.x) * minimapScale;
+            const cometY = h/2 + (cometGroup.position.z - myC.z) * minimapScale;
+            minimapCtx.beginPath();
+            minimapCtx.arc(cometX, cometY, 3, 0, Math.PI * 2);
+            minimapCtx.fillStyle = 'rgba(0, 255, 255, 0.4)';
+            minimapCtx.fill();
+            minimapCtx.beginPath();
+            minimapCtx.arc(cometX, cometY, 1.5, 0, Math.PI * 2);
+            minimapCtx.fillStyle = '#ffffff';
+            minimapCtx.fill();
+        }
+    }
+    function onMinimapClick(e) {
+        if(!minimapCtx) return;
+        const rect = minimapCtx.canvas.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        let closest = null;
+        let minD = 20;
+        minimapDotCoords.forEach(dot => {
+            const d = Math.sqrt((x-dot.x)**2 + (y-dot.y)**2);
+            if(d < minD) { minD = d; closest = dot.uid; }
+        });
+        if(closest) teleportToUser(closest);
+    }
+    function onWindowResize() {
+        camera.aspect = window.innerWidth/window.innerHeight;
+        camera.updateProjectionMatrix();
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        composer.setSize(window.innerWidth, window.innerHeight);
+    }
+    function onPointerMove(e) {
+        mouse.x = (e.clientX/window.innerWidth)*2-1;
+        mouse.y = -(e.clientY/window.innerHeight)*2+1;
+        tooltip.style.left = e.clientX+20+'px';
+        tooltip.style.top = e.clientY+'px';
+    }
+    function updateRaycaster() {
+        raycaster.setFromCamera(mouse, camera);
+        let targets = [...hashtagGroup.children];
+        if(cometHead) targets.push(cometHead);
+        const intersects = raycaster.intersectObjects(targets, false);
+        if(intersects.length > 0) {
+            let o = intersects[0].object;
+            if(o.parent === cometHead || o.parent === cometGroup) o = cometHead;
+            if(o === cometHead) {
+                tooltip.classList.remove('hidden');
+                const word = cometText ? cometText.geometry.parameters.text : "ENLACE";
+                tooltip.innerHTML = `
+                    <div class="border-b border-cyan-500/50 pb-1 mb-1 text-cyan-300 font-bold tracking-widest text-xs">COMETA NEURAL</div>
+                    <div class="text-white text-[10px]">SEÑAL: ${word}</div>
+                `;
+                document.body.style.cursor = 'pointer';
+                return;
+            }
+            const d = o.userData;
+            if(d.hashtag) {
+                tooltip.classList.remove('hidden');
+                let typeColor = d.isPlaceholder ? "text-yellow-400" : "text-cyan-300";
+                let typeText = d.isPlaceholder ? "NODO USUARIO" : `NIVEL ${d.level}`;
+                tooltip.innerHTML = `
+                    <div class="${typeColor} font-bold tracking-widest text-sm mb-1">${d.hashtag}</div>
+                    <div class="text-gray-400 text-[10px] uppercase">${typeText}</div>
+                `;
+                document.body.style.cursor = 'pointer';
+            }
+        } else {
+            tooltip.classList.add('hidden');
+            document.body.style.cursor = 'default';
+        }
+    }
+    function stringToHslColor(str) {
+        let hash = 0; for (let i = 0; i < str.length; i++) hash = str.charCodeAt(i) + ((hash << 5) - hash);
+        return { color: `hsl(${Math.abs(hash % 360)}, 75%, 60%)`, h: Math.abs(hash % 360) };
+    }
+  </script>
 </body>
 </html>