`data/artifacts/097db196034e/hermes3-8b.html`

160 lines
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Model Arena</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="view"></canvas>
    <script>
        const view = document.getElementById('view')
        let W = view.width = window.innerWidth * 0.9
        let H = view.height = window.innerHeight * 0.8
        
        const nodes = []
        let links = []

        class Node {
            constructor() {
                this.x = Math.random() * W
                this.y = Math.random() * H
                this.vx = 0
                this.vy = 0
            }
            
            update() {
                this.x += this.vx * 0.1
                this.y += this.vy * 0.1
                
                if (this.x < 0 || this.x > W) this.x = this.x < 0 ? 2 : W - 2 
                if (this.y < 0 || this.y > H) this.y = this.y < 0 ? 2 : H - 2
            }
        }

        class Link {
            constructor(node1, node2) {
                this.node1 = node1
                this.node2 = node2
                this.glowing = false
            }
            
            update() {
                let dx = (this.node2.x - this.node1.x) * 0.5
                let dy = (this.node2.y - this.node1.y) * 0.5
                
                this.node1.x += dx
                this.node1.y += dy
                this.node2.x -= dx
                this.node2.y -= dy
                
                if (!this.glowing) {
                    this.node1.vx += dx * 4
                    this.node1.vy += dy * 4
                    this.node2.vx -= dx * 4
                    this.node2.vy -= dy * 4
                }
            }
        }

        function simulate() {
            for (let i = nodes.length; i < Math.random() * 10 + 5; i++) {
                let n1 = new Node()
                nodes.push(n1)
                
                if (nodes.length > 1) {
                    let n2 = nodes[Math.floor(Math.random() * nodes.length)]
                    while (n2 === n1) n2 = nodes[Math.floor(Math.random() * nodes.length)]
                    
                    let l = new Link(n1, n2)
                    links.push(l)
                }
            }
            
            for (let i = 0; i < nodes.length; i++) {
                nodes[i].update()
                
                if (Math.random() > 0.97) {
                    let j = i + Math.floor(Math.random() * (nodes.length - i))
                    let t = nodes[j].x
                    nodes[j].x = nodes[i].x 
                    nodes[i].x = t
                    
                    t = nodes[j].y
                    nodes[j].y = nodes[i].y 
                    nodes[i].y = t
                }
            }

            for (let i = 0; i < links.length; i++) {
                links[i].update()
                
                if (Math.random() > 0.97) links[i].glowing = !links[i].glowing
                
                if (links[i].glowing) {
                    let n1 = nodes[Math.floor(Math.random() * nodes.length)]
                    while (n1 === nodes[i]) n1 = nodes[Math.floor(Math.random() * nodes.length)]

                    for (let j = 0; j < links.length; j++) {
                        if (n1 !== nodes[j] && nodes[j] === links[j].node2) {
                            links[i].node2 = nodes[j]
                            break
                        }
                    }
                }
            }

            requestAnimationFrame(simulate)
        }

        view.addEventListener('mousemove', e => {
            let x = e.clientX / W * 0.5 - 0.5
            let y = e.clientY / H * 0.5 - 0.5
            
            for (let i = nodes.length; i--;) {
                nodes[i].vx += x * 2
                nodes[i].vy += y * 2
                
                if (Math.random() > 0.95) {
                    let j = i + Math.floor(Math.random() * (nodes.length - i))
                    let t = nodes[j].x
                    nodes[j].x = nodes[i].x 
                    nodes[i].x = t
                    
                    t = nodes[j].y
                    nodes[j].y = nodes[i].y 
                    nodes[i].y = t
                }
            }

            for (let i = 0; i < links.length; i++) {
                let l = links[i]
                let n1 = nodes.find(n => n === l.node1)
                let n2 = nodes.find(n => n === l.node2)

                if (n1 && n2) {
                    n1.vx += x * 4
                    n1.vy += y * 4
                    n2.vx -= x * 4 
                    n2.vy -= y * 4
                
                    if (Math.random() > 0.97) l.glowing = !l.glowing
                }
            }

            requestAnimationFrame(simulate)
        })

        simulate()
    </script>
</body>
</html>