|
|
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.") |
|
|
|
|
|
|
|
|
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() |
