Spaces:

kimhyunwoo
/

transformers

Running

App Files Files Community

kimhyunwoo commited on Nov 28, 2025

Commit

cd2c1bd

verified ·

1 Parent(s): fa5bd25

Update index.html

Browse files

Files changed (1) hide show

index.html +329 -19

index.html CHANGED Viewed

@@ -1,19 +1,329 @@
-<!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="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Transformer Latent Space Visualizer</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        'neon-blue': '#00f3ff',
+                        'neon-purple': '#bc13fe',
+                        'neon-green': '#0aff00',
+                    },
+                    fontFamily: {
+                        mono: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'monospace'],
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        body { margin: 0; background-color: #050505; color: white; overflow: hidden; }
+        .glass-panel {
+            background: rgba(10, 10, 20, 0.7);
+            backdrop-filter: blur(12px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
+        }
+        canvas { outline: none; }
+    </style>
+    <!-- Import Maps for React & Three.js -->
+    <script type="importmap">
+        {
+            "imports": {
+                "react": "https://esm.sh/react@18.2.0",
+                "react-dom/client": "https://esm.sh/react-dom@18.2.0/client",
+                "three": "https://esm.sh/three@0.160.0",
+                "@react-three/fiber": "https://esm.sh/@react-three/fiber@8.15.12?external=react,react-dom,three",
+                "@react-three/drei": "https://esm.sh/@react-three/drei@9.96.1?external=react,react-dom,three,@react-three/fiber",
+                "lucide-react": "https://esm.sh/lucide-react@0.303.0?external=react"
+            }
+        }
+    </script>
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+</head>
+<body>
+    <div id="root"></div>
+    <script type="text/babel" data-type="module">
+        import React, { useState, useEffect, useRef, useMemo } from 'react';
+        import { createRoot } from 'react-dom/client';
+        import { Canvas, useFrame } from '@react-three/fiber';
+        import { Text, OrbitControls, Stars, Trail, Line } from '@react-three/drei';
+        import * as THREE from 'three';
+        import { Play, SkipForward, RefreshCw, Layers, BrainCircuit, Share2 } from 'lucide-react';
+        // --- MOCK DATA ENGINE ---
+        // 실제 모델을 로드하면 너무 무거우므로, 논문 내용을 반영한 "가상 시뮬레이션 데이터"를 생성합니다.
+        const SAMPLE_TEXT = "The cat sat on the mat";
+        const TOKENS = SAMPLE_TEXT.split(" ");
+        const TOTAL_LAYERS = 6;
+        // 각 토큰의 3D 좌표를 레이어별로 미리 계산 (시뮬레이션)
+        const generateLatentTrajectory = () => {
+            const trajectory = [];
+            // 초기 임베딩 (무작위 분산)
+            let currentPositions = TOKENS.map((_, i) => ({
+                x: (i - TOKENS.length/2) * 1.5, // 순서대로 배치하되
+                y: Math.random() * 2 - 1,
+                z: Math.random() * 2 - 1
+            }));
+            trajectory.push(JSON.parse(JSON.stringify(currentPositions)));
+            for (let l = 0; l < TOTAL_LAYERS; l++) {
+                // 1. Attention Step: 토큰들이 서로(의미적으로 비슷한 애들끼리) 뭉침
+                // "The"(0)와 "the"(4)가 가까워지고, "cat"(1)과 "mat"(5)가 가까워지는 식
+                const attnPositions = currentPositions.map((pos, i) => {
+                    let target = { ...pos };
+                    if (i === 1) target.x += (currentPositions[5].x - pos.x) * 0.3; // cat -> mat
+                    if (i === 5) target.x += (currentPositions[1].x - pos.x) * 0.3; // mat -> cat
+                    if (i === 3) { // 'on' connects cat and mat
+                        target.y += 1;
+                        target.z += (currentPositions[1].z - pos.z) * 0.2;
+                    }
+                    // 노이즈 추가 (Latent space의 복잡성 표현)
+                    target.x += (Math.random() - 0.5) * 0.5;
+                    target.y += (Math.random() - 0.5) * 0.5;
+                    target.z += (Math.random() - 0.5) * 0.5;
+                    return target;
+                });
+                trajectory.push(JSON.parse(JSON.stringify(attnPositions)));
+                // 2. MLP Step: 비선형 변환 (공간을 비틀거나 확장)
+                const mlpPositions = attnPositions.map(pos => ({
+                    x: pos.x * 1.1,
+                    y: pos.y + Math.sin(pos.x) * 0.5, // 비선형성
+                    z: pos.z * 1.1
+                }));
+                trajectory.push(JSON.parse(JSON.stringify(mlpPositions)));
+                currentPositions = mlpPositions;
+            }
+            return trajectory;
+        };
+        const TRAJECTORY_DATA = generateLatentTrajectory();
+        // --- COMPONENTS ---
+        const TokenNode = ({ position, label, color, isActive, idx }) => {
+            const mesh = useRef();
+            useFrame((state) => {
+                if(mesh.current) {
+                    // 부드러운 이동 (Lerp)
+                    mesh.current.position.lerp(new THREE.Vector3(position.x, position.y, position.z), 0.1);
+                    // 활성 상태일 때 둥둥 떠다님
+                    if(isActive) {
+                        mesh.current.position.y += Math.sin(state.clock.elapsedTime * 2 + idx) * 0.002;
+                    }
+                }
+            });
+            return (
+                <group>
+                    {/* 궤적(Trail) 효과: Latent Geometry 시각화의 핵심 */}
+                    <Trail width={0.2} length={8} color={new THREE.Color(color)} attenuation={(t) => t * t}>
+                        <mesh ref={mesh} position={[position.x, position.y, position.z]}>
+                            <sphereGeometry args={[0.3, 32, 32]} />
+                            <meshStandardMaterial color={color} emissive={color} emissiveIntensity={isActive ? 2 : 0.5} toneMapped={false} />
+                        </mesh>
+                    </Trail>
+                    {/* 텍스트 라벨 */}
+                    <Text position={[position.x, position.y + 0.5, position.z]} fontSize={0.3} color="white" anchorX="center" anchorY="middle">
+                        {label}
+                    </Text>
+                </group>
+            );
+        };
+        const AttentionLines = ({ positions, opacity }) => {
+            // 모든 토큰 쌍을 연결하는 선 (Attention Matrix 시각화)
+            const lines = [];
+            for (let i = 0; i < positions.length; i++) {
+                for (let j = i + 1; j < positions.length; j++) {
+                    const dist = Math.sqrt(
+                        Math.pow(positions[i].x - positions[j].x, 2) +
+                        Math.pow(positions[i].y - positions[j].y, 2) +
+                        Math.pow(positions[i].z - positions[j].z, 2)
+                    );
+                    // 거리가 가까울수록(연관성이 높을수록) 진하게
+                    const intensity = Math.max(0, 1 - dist / 3) * opacity;
+                    if (intensity > 0.01) {
+                        lines.push(
+                            <Line
+                                key={`${i}-${j}`}
+                                points={[[positions[i].x, positions[i].y, positions[i].z], [positions[j].x, positions[j].y, positions[j].z]]}
+                                color="#00f3ff"
+                                transparent
+                                opacity={intensity * 0.5}
+                                lineWidth={1}
+                            />
+                        );
+                    }
+                }
+            }
+            return <group>{lines}</group>;
+        };
+        const Scene = ({ step, trajectory }) => {
+            // 현재 스텝(0 ~ 12)을 기반으로 현재 위치 계산
+            // trajectory 배열: [초기, L1_Attn, L1_MLP, L2_Attn, L2_MLP, ...]
+            const currentPosIndex = Math.min(step, trajectory.length - 1);
+            const currentPositions = trajectory[currentPosIndex];
+            // 짝수 스텝은 Attention 직후, 홀수 스텝은 MLP 직후라고 가정 (시각적 연출)
+            const isAttentionPhase = step % 2 === 1;
+            return (
+                <group>
+                    <ambientLight intensity={0.5} />
+                    <pointLight position={[10, 10, 10]} intensity={1} color="#bc13fe" />
+                    <pointLight position={[-10, -10, -10]} intensity={1} color="#00f3ff" />
+                    {/* 토큰들 */}
+                    {TOKENS.map((token, i) => (
+                        <TokenNode
+                            key={i}
+                            idx={i}
+                            position={currentPositions[i]}
+                            label={token}
+                            color={`hsl(${i * 60}, 80%, 60%)`}
+                            isActive={true}
+                        />
+                    ))}
+                    {/* Attention 시각화 (Attention 단계일 때만 표시) */}
+                    <AttentionLines positions={currentPositions} opacity={isAttentionPhase ? 1 : 0} />
+                    {/* 배경 그리드 (Latent Space 기준���) */}
+                    <gridHelper args={[20, 20, 0x333333, 0x111111]} position={[0, -2, 0]} />
+                    <Stars radius={100} depth={50} count={5000} factor={4} saturation={0} fade speed={1} />
+                    <OrbitControls autoRotate autoRotateSpeed={0.5} />
+                </group>
+            );
+        };
+        // --- MAIN APP ---
+        const App = () => {
+            const [step, setStep] = useState(0);
+            const [isAuto, setIsAuto] = useState(false);
+            const totalSteps = TRAJECTORY_DATA.length;
+            const currentLayer = Math.floor((step - 1) / 2) + 1;
+            const phase = step === 0 ? "Embedding" : (step % 2 === 1 ? "Self-Attention" : "Feed Forward (MLP)");
+            useEffect(() => {
+                let interval;
+                if (isAuto) {
+                    interval = setInterval(() => {
+                        setStep(s => (s + 1) % totalSteps);
+                    }, 1500);
+                }
+                return () => clearInterval(interval);
+            }, [isAuto, totalSteps]);
+            const getPhaseDescription = () => {
+                if (step === 0) return "텍스트 토큰이 고차원 벡터 공간(Latent Space)에 매핑되었습니다.";
+                if (step % 2 === 1) return "토큰들이 서로 '주목(Attention)'하며 문맥 정보를 교환합니다. 의미가 관련된 토큰끼리 공간상에서 서로를 당깁니다.";
+                return "각 토큰이 개별적으로 처리(MLP)되어 정보를 가공합니다. 잠재 공간 내에서 기하학적 변환이 일어납니다.";
+            };
+            return (
+                <div className="w-full h-screen relative font-mono">
+                    <Canvas camera={{ position: [0, 2, 8], fov: 50 }}>
+                        <color attach="background" args={['#050505']} />
+                        <fog attach="fog" args={['#050505', 5, 20]} />
+                        <Scene step={step} trajectory={TRAJECTORY_DATA} />
+                    </Canvas>
+                    {/* UI Overlay */}
+                    <div className="absolute top-0 left-0 w-full p-6 pointer-events-none flex justify-between items-start">
+                        <div className="glass-panel p-6 rounded-xl max-w-md pointer-events-auto">
+                            <h1 className="text-2xl font-bold text-neon-blue mb-2 flex items-center gap-2">
+                                <BrainCircuit size={24} /> Transformer Internals
+                            </h1>
+                            <div className="space-y-4">
+                                <div>
+                                    <div className="flex items-center justify-between text-xs text-gray-400 uppercase tracking-widest mb-1">
+                                        <span>Current State</span>
+                                        <span className="text-neon-green">Step {step} / {totalSteps - 1}</span>
+                                    </div>
+                                    <div className="text-xl text-white font-bold mb-1 flex items-center gap-2">
+                                        {step > 0 && <span className="text-neon-purple">Layer {currentLayer}</span>}
+                                        <span>{phase}</span>
+                                    </div>
+                                    <div className="h-1 w-full bg-gray-800 rounded-full overflow-hidden">
+                                        <div
+                                            className="h-full bg-neon-blue transition-all duration-500 ease-out"
+                                            style={{ width: `${(step / (totalSteps - 1)) * 100}%` }}
+                                        />
+                                    </div>
+                                </div>
+                                <p className="text-sm text-gray-300 leading-relaxed border-l-2 border-gray-600 pl-3">
+                                    {getPhaseDescription()}
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="absolute bottom-0 left-0 w-full p-6 flex flex-col items-center pointer-events-none">
+                        <div className="glass-panel px-6 py-4 rounded-full flex items-center gap-6 pointer-events-auto mb-4">
+                            <button
+                                onClick={() => setStep(0)}
+                                className="text-gray-400 hover:text-white transition-colors flex flex-col items-center gap-1"
+                            >
+                                <RefreshCw size={20} />
+                                <span className="text-[10px]">RESET</span>
+                            </button>
+                            <button
+                                onClick={() => setIsAuto(!isAuto)}
+                                className={`w-12 h-12 rounded-full flex items-center justify-center border transition-all ${isAuto ? 'bg-neon-blue text-black border-neon-blue shadow-[0_0_15px_#00f3ff]' : 'border-white text-white hover:bg-white/10'}`}
+                            >
+                                {isAuto ? <div className="w-3 h-3 bg-black rounded-sm" /> : <Play size={20} fill="currentColor" className="ml-1" />}
+                            </button>
+                            <button
+                                onClick={() => { setIsAuto(false); setStep(s => Math.min(s + 1, totalSteps - 1)); }}
+                                className="text-gray-400 hover:text-white transition-colors flex flex-col items-center gap-1"
+                            >
+                                <SkipForward size={20} />
+                                <span className="text-[10px]">NEXT</span>
+                            </button>
+                        </div>
+                        <div className="text-xs text-gray-500 font-mono bg-black/50 px-3 py-1 rounded">
+                            Based on "Visualizing LLM Latent Space Geometry" (2025)
+                        </div>
+                    </div>
+                    {/* Side Indicators */}
+                    <div className="absolute right-6 top-1/2 -translate-y-1/2 flex flex-col gap-4 pointer-events-none">
+                        <div className={`glass-panel p-3 rounded-lg transition-all duration-300 ${phase === 'Embedding' ? 'border-neon-blue scale-110' : 'opacity-50'}`}>
+                            <div className="text-xs text-gray-400">INPUT</div>
+                            <div className="font-bold text-white">Embedding</div>
+                        </div>
+                        <div className={`glass-panel p-3 rounded-lg transition-all duration-300 ${phase === 'Self-Attention' ? 'border-neon-blue scale-110 shadow-[0_0_15px_rgba(0,243,255,0.3)]' : 'opacity-50'}`}>
+                            <div className="text-xs text-gray-400">MIXING</div>
+                            <div className="font-bold text-white flex items-center gap-2"><Share2 size={14}/> Attention</div>
+                        </div>
+                        <div className={`glass-panel p-3 rounded-lg transition-all duration-300 ${phase === 'Feed Forward (MLP)' ? 'border-neon-blue scale-110 shadow-[0_0_15px_rgba(0,243,255,0.3)]' : 'opacity-50'}`}>
+                            <div className="text-xs text-gray-400">PROCESSING</div>
+                            <div className="font-bold text-white flex items-center gap-2"><Layers size={14}/> MLP</div>
+                        </div>
+                    </div>
+                </div>
+            );
+        };
+        const root = createRoot(document.getElementById('root'));
+        root.render(<App />);
+    </script>
+</body>
+</html>