Spaces:

fredmo
/

llm-size-compare

Running

App Files Files Community

fredmo commited on Jul 1, 2025

Commit

a95ac7f

verified ·

1 Parent(s): 2559004

Update index.html

Browse files

Files changed (1) hide show

index.html +272 -18

index.html CHANGED Viewed

@@ -1,19 +1,273 @@
 <!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>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Transformer Matrix Visualization - Aligned</title>
+    <style>
+        body {
+            margin: 0;
+            font-family: 'Segoe UI', 'Roboto', 'Oxygen', sans-serif;
+            background-color: #000000;
+            color: #e0e0e0;
+            overflow: hidden;
+        }
+        #button-container {
+            position: absolute;
+            top: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            z-index: 100;
+            display: flex;
+            gap: 15px;
+            background-color: rgba(10, 10, 10, 0.7);
+            padding: 10px 20px;
+            border-radius: 12px;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+        .focus-btn {
+            background-color: #222;
+            color: #ddd;
+            border: 1px solid #444;
+            padding: 8px 16px;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 16px;
+            font-weight: bold;
+            transition: background-color 0.3s, color 0.3s;
+        }
+        .focus-btn:hover {
+            background-color: #0077be;
+            color: #fff;
+        }
+        #tooltip {
+            position: absolute;
+            display: none;
+            padding: 12px;
+            background-color: rgba(10, 10, 25, 0.9);
+            border: 1px solid #0077be;
+            border-radius: 8px;
+            pointer-events: none;
+            font-size: 14px;
+            z-index: 101;
+        }
+        #tooltip h3 { margin: 0 0 8px 0; color: #8ac8ff; }
+        #tooltip p { margin: 0; }
+        canvas { display: block; }
+    </style>
+</head>
+<body>
+    <div id="button-container"></div>
+    <div id="tooltip"></div>
+    <div id="canvas-container"></div>
+    <script type="importmap">
+        {
+            "imports": {
+                "three": "https://unpkg.com/three@0.165.0/build/three.module.js",
+                "three/addons/": "https://unpkg.com/three@0.165.0/examples/jsm/",
+                "gsap": "https://unpkg.com/gsap@3.12.5/index.js"
+            }
+        }
+    </script>
+    <script type="module">
+        import * as THREE from 'three';
+        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+        import { gsap } from 'gsap';
+        // --- Scene Setup ---
+        const scene = new THREE.Scene();
+        const container = document.getElementById('canvas-container');
+        const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 200000);
+        camera.position.set(0, 200, 1500);
+        const renderer = new THREE.WebGLRenderer({ antialias: true });
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        renderer.setPixelRatio(window.devicePixelRatio);
+        container.appendChild(renderer.domElement);
+        const controls = new OrbitControls(camera, renderer.domElement);
+        controls.enableDamping = true;
+        controls.dampingFactor = 0.05;
+        const gridHelper = new THREE.GridHelper(400000, 400, 0x333333, 0x222222);
+        scene.add(gridHelper);
+        // This group will hold all models to make centering easy
+        const allModelsGroup = new THREE.Group();
+        scene.add(allModelsGroup);
+        const models = [];
+        const collidableObjects = [];
+        const colorPalette = [
+            new THREE.Color(0x6a0dad), new THREE.Color(0x0077be),
+            new THREE.Color(0x00a896), new THREE.Color(0xdc3958),
+            new THREE.Color(0xf7ac3d),
+        ];
+        function createMatrixModel(name, params) {
+            const modelGroup = new THREE.Group();
+            const representativeCount = Math.floor(Math.max(400, params / 2e6));
+            const gridSide = Math.floor(Math.sqrt(representativeCount));
+            const instanceCount = gridSide * gridSide;
+            const squareSize = 5;
+            const modelWidth = gridSide * squareSize;
+            const geometry = new THREE.PlaneGeometry(squareSize * 0.9, squareSize * 0.9);
+            const material = new THREE.MeshBasicMaterial({ side: THREE.DoubleSide });
+            const mesh = new THREE.InstancedMesh(geometry, material, instanceCount);
+            const dummy = new THREE.Object3D();
+            let i = 0;
+            for (let x = 0; x < gridSide; x++) {
+                for (let y = 0; y < gridSide; y++) {
+                    dummy.position.set(
+                        (x - gridSide / 2) * squareSize,
+                        (y - gridSide / 2) * squareSize,
+                        0
+                    );
+                    dummy.updateMatrix();
+                    mesh.setMatrixAt(i, dummy.matrix);
+                    const color = colorPalette[Math.floor(Math.random() * colorPalette.length)];
+                    mesh.setColorAt(i, color);
+                    i++;
+                }
+            }
+            mesh.instanceMatrix.needsUpdate = true;
+            mesh.instanceColor.needsUpdate = true;
+            modelGroup.add(mesh);
+            modelGroup.userData = { name, params };
+            mesh.userData = { modelName: name, params };
+            models.push({ name, group: modelGroup, params });
+            collidableObjects.push(mesh);
+            // Return the group and its calculated width for layout purposes
+            return { modelGroup, modelWidth };
+        }
+        // --- NEW: Ordered Model Definitions & Linear Layout ---
+        const modelDefinitions = [
+            { name: '1000B', params: 1000e9 }, { name: '405B', params: 405e9 },
+            { name: '70B', params: 70e9 }, { name: '4B', params: 4e9 },
+            { name: '1B', params: 1e9 }, { name: '0.2B', params: 0.2e9 },
+        ];
+        let currentX = 0;
+        modelDefinitions.forEach((def) => {
+            const { modelGroup, modelWidth } = createMatrixModel(def.name, def.params);
+            // Add padding based on the size of the model
+            const padding = modelWidth * 0.5;
+            // Position the model along the X axis
+            modelGroup.position.x = currentX + modelWidth / 2;
+            // Add the model to the main group
+            allModelsGroup.add(modelGroup);
+            // Update the X-coordinate for the next model
+            currentX += modelWidth + padding;
+        });
+        // Center the entire line of models at the world origin
+        const sceneBox = new THREE.Box3().setFromObject(allModelsGroup);
+        const sceneCenter = new THREE.Vector3();
+        sceneBox.getCenter(sceneCenter);
+        allModelsGroup.position.x = -sceneCenter.x;
+        // --- UI and Camera Control ---
+        const buttonContainer = document.getElementById('button-container');
+        models.forEach(model => {
+            const btn = document.createElement('button');
+            btn.className = 'focus-btn';
+            btn.innerText = model.name;
+            btn.onclick = () => focusOnModel(model);
+            buttonContainer.appendChild(btn);
+        });
+        function focusOnModel(model) {
+            const modelWorldPosition = new THREE.Vector3();
+            model.group.getWorldPosition(modelWorldPosition);
+            const modelBox = new THREE.Box3().setFromObject(model.group);
+            const modelSize = new THREE.Vector3();
+            modelBox.getSize(modelSize);
+            const cameraDistance = modelSize.y / (2 * Math.tan(camera.fov * Math.PI / 360)) * 1.5; // Frame based on height
+            const cameraZ = Math.max(cameraDistance, modelSize.x); // Ensure we are far enough to see the width
+            const cameraTargetPosition = new THREE.Vector3(
+                modelWorldPosition.x,
+                modelWorldPosition.y,
+                modelWorldPosition.z + cameraZ
+            );
+            gsap.to(camera.position, {
+                x: cameraTargetPosition.x,
+                y: cameraTargetPosition.y,
+                z: cameraTargetPosition.z,
+                duration: 2.5,
+                ease: 'power3.inOut'
+            });
+            gsap.to(controls.target, {
+                x: modelWorldPosition.x,
+                y: modelWorldPosition.y,
+                z: modelWorldPosition.z,
+                duration: 2.5,
+                ease: 'power3.inOut'
+            });
+        }
+        // --- Interactivity & Render Loop ---
+        const raycaster = new THREE.Raycaster();
+        const mouse = new THREE.Vector2();
+        const tooltip = document.getElementById('tooltip');
+        window.addEventListener('mousemove', (event) => {
+            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+            mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
+            tooltip.style.left = (event.clientX + 15) + 'px';
+            tooltip.style.top = (event.clientY + 15) + 'px';
+        });
+        function animate() {
+            requestAnimationFrame(animate);
+            controls.update();
+            raycaster.setFromCamera(mouse, camera);
+            const intersects = raycaster.intersectObjects(collidableObjects);
+            if (intersects.length > 0) {
+                const data = intersects[0].object.userData;
+                tooltip.style.display = 'block';
+                tooltip.innerHTML = `
+                    <h3>${data.modelName} Model</h3>
+                    <p><strong>Parameters:</strong> ${data.params.toLocaleString()}</p>
+                `;
+            } else {
+                tooltip.style.display = 'none';
+            }
+            renderer.render(scene, camera);
+        }
+        // Focus on the first model (1000B) to start
+        if (models.length > 0) {
+           focusOnModel(models[0]);
+        }
+        animate();
+    </script>
+	 <footer>fredmo - 2025 </footer>
+</body>
+</html>