import streamlit as st

def create_brain_animation_app():
    st.title("AI Memory & Brain Visualization")
    st.write("This visualization represents AI learning and memory enhancement, shaped like a brain's neocortex.")

    # JavaScript code for the brain-shaped animation with SVG text
    js_code = """
    <svg id="brainCanvas" width="100%" height="100%" style="position:fixed; top:0; left:0;"></svg>

    <script>
    const svg = document.getElementById('brainCanvas');
    const ns = 'http://www.w3.org/2000/svg';

    let t = 0;

    function mag(x, y) {
        return Math.sqrt(x * x + y * y);
    }

    function brainShape(x, y) {
        let k = x/8 - 25, e = y/8 - 25;
        let d = mag(k, e)**2 / 99;
        
        let q = x/3 + k * 0.5 / Math.cos(y*5) * Math.sin(d*d - t);
        let c = d/2 - t/8;
        
        let xPos = q * Math.sin(c) + e * Math.sin(d + k - t) + svg.clientWidth / 2;
        let yPos = (q + y/8 + d*9) * Math.cos(c) + svg.clientHeight / 2;
        
        return[xPos, yPos];
    }

    function getColor(x, y, t) {
        const hue = (Math.sin(t/2) * 360 + x/3 + y/3) % 360;
        return `hsl(${hue}, 70%, 50%)`;
    }

    function drawBrain() {
        // Clear previous circles
        while (svg.firstChild) {
            svg.removeChild(svg.firstChild);
        }

        const circleRadius = 1;
        for (let y = 99; y < svg.clientHeight - 99; y += 4) {
            for (let x = 99; x < svg.clientWidth - 99; x += 2) {
                const[px, py] = brainShape(x, y);
                if (Math.sqrt(px*px + py*py) > svg.clientWidth * 0.3 && Math.sqrt(px*px + py*py) < svg.clientWidth * 0.6) {  // Brain shape mask
                    const circle = document.createElementNS(ns, 'circle');
                    circle.setAttribute('cx', px);
                    circle.setAttribute('cy', py);
                    circle.setAttribute('r', circleRadius);
                    circle.setAttribute('fill', getColor(x, y, t));
                    svg.appendChild(circle);
                }
            }
        }
        
        t += Math.PI / 180;  // Adjust animation speed
        requestAnimationFrame(drawBrain);
    }

    // SVG Text for scrolling
    function addScrollingText(text) {
        const textElement = document.createElementNS(ns, 'text');
        textElement.setAttribute('x', '50%');
        textElement.setAttribute('y', '10%');
        textElement.setAttribute('dy', '0.3em');
        textElement.setAttribute('text-anchor', 'middle');
        textElement.setAttribute('fill', 'white');
        textElement.setAttribute('font-size', '20px');
        textElement.textContent = text;
        
        svg.appendChild(textElement);
        
        let startX = 0;
        function animateText() {
            startX = (startX - 1) % (svg.clientWidth + 200); // Adjust speed and text length
            textElement.setAttribute('transform', `translate(${startX}, 0)`);
            requestAnimationFrame(animateText);
        }
        animateText();
    }

    drawBrain();
    addScrollingText("AI Memory & Brain Visualization");
    </script>
    """

    html_content = js_code
    st.components.v1.html(html_content, height=st._legacy_dataframe._config.get_option('page_height'))

if __name__ == "__main__":
    create_brain_animation_app()