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) {
                    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;  
        requestAnimationFrame(drawBrain);
    }

    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); 
            textElement.setAttribute('transform', `translate(${startX}, 0)`);
            requestAnimationFrame(animateText);
        }
        animateText();
    }

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

    # Using a different approach for fullscreen element
    st.markdown(
        f"""
        <style>
        .full-screen-container {{
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            margin: 0;
            padding: 0;
            overflow: hidden;
            z-index: -1;
        }}
        </style>
        <div class="full-screen-container">
            {js_code}
        </div>
        """, unsafe_allow_html=True)

if __name__ == "__main__":
    create_brain_animation_app()