import streamlit as st

st.markdown("""## The evolution of AI""")

st.markdown("""

| Level | Description | Create & Model | Python 🐍 | HTML5 🕸️ | JavaScript 📜 |
|-------|-------------|----------------|-----------|-----------|--------------|
| Level 1 | 🗣️ Chatbots, AI with conversational language | Chatbots | `import chatbot` | `<script src="chatbot.js"></script>` | `const chatbot = new Chatbot();` |
| Level 2 | 🧠 Reasoners, human-level problem-solving | Reasoners | `import reasoner` | `<script src="reasoner.js"></script>` | `const reasoner = new Reasoner();` |
| Level 3 | 🤖 Agents, systems that can take actions | Agents | `import agent` | `<script src="agent.js"></script>` | `const agent = new Agent();` |
| Level 4 | 💡 Innovators, AI that can aid in invention | Innovators | `import innovator` | `<script src="innovator.js"></script>` | `const innovator = new Innovator();` |
| Level 5 | 🏢 Organizations, AI that can do the work of an organization | Organizations | `import organization` | `<script src="organization.js"></script>` | `const organization = new Organization();` |

| Level | Stage | Description | Creation/Model |
|-------|-------|-------------|----------------|
| 1 | 🗣️ Data Collection | Gather and preprocess datasets for language models | 💬 Chatbots |
| 2 | 🧠 Model Architecture | Design neural networks for basic reasoning tasks | 🧮 Problem Solvers |
| 3 | 🤖 Algorithm Implementation | Develop action-oriented systems using Python/TensorFlow | 🎮 Autonomous Agents |
| 4 | 💡 Creative AI | Build models capable of generating novel solutions (e.g. GPT, DALL-E) | 🎨 Inventive Systems |
| 5 | 🏢 Full-Stack AI Systems | Create end-to-end AI solutions with HTML5/JS frontends and distributed backends | 🏗️ Organizations |

""")

st.markdown("## The Evolution of AI")

# HTML and SVG for the animated diagram
html_content = """
<style>
    .stage {
        font-family: Arial, sans-serif;
        font-size: 14px;
        color: #333;
    }
    .level {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }
    .level svg {
        margin-right: 10px;
    }
    .description {
        flex-grow: 1;
    }
</style>
<div class="stage">
    <div class="level">
        <svg width="30" height="30">
            <circle cx="15" cy="15" r="10" fill="#3498db" />
            <animate attributeName="r" from="10" to="12" dur="1s" repeatCount="indefinite" />
        </svg>
        <div class="description">🗣️ Level 1: Chatbots, AI with conversational language (Chatbots)</div>
    </div>
    <div class="level">
        <svg width="30" height="30">
            <rect x="5" y="5" width="20" height="20" fill="#2ecc71" />
            <animate attributeName="width" from="20" to="22" dur="1s" repeatCount="indefinite" />
        </svg>
        <div class="description">🧠 Level 2: Reasoners, human-level problem-solving (Reasoners)</div>
    </div>
    <div class="level">
        <svg width="30" height="30">
            <polygon points="15,5 25,25 5,25" fill="#e74c3c" />
            <animate attributeName="points" values="15,5 25,25 5,25; 14,4 24,24 4,24; 15,5 25,25 5,25" dur="1s" repeatCount="indefinite" />
        </svg>
        <div class="description">🤖 Level 3: Agents, systems that can take actions (Agents)</div>
    </div>
    <div class="level">
        <svg width="30" height="30">
            <circle cx="15" cy="15" r="10" fill="#f39c12" />
            <animate attributeName="fill" values="#f39c12;#e67e22;#f39c12" dur="1s" repeatCount="indefinite" />
        </svg>
        <div class="description">💡 Level 4: Innovators, AI that can aid in invention (Innovators)</div>
    </div>
    <div class="level">
        <svg width="30" height="30">
            <rect x="5" y="5" width="20" height="20" fill="#9b59b6" />
            <animate attributeName="height" from="20" to="22" dur="1s" repeatCount="indefinite" />
        </svg>
        <div class="description">🏢 Level 5: Organizations, AI that can do the work of an organization (Organizations)</div>
    </div>
</div>
"""

# Display the HTML content with SVG animations in Streamlit
st.components.v1.html(html_content, height=300)

# The markdown table for reference
st.markdown("""
| Level | Description | Create & Model | Python 🐍 | HTML5 🕸️ | JavaScript 📜 |
|-------|-------------|----------------|-----------|-----------|--------------|
| Level 1 | 🗣️ Chatbots, AI with conversational language | Chatbots | `import chatbot` | `<script src="chatbot.js"></script>` | `const chatbot = new Chatbot();` |
| Level 2 | 🧠 Reasoners, human-level problem-solving | Reasoners | `import reasoner` | `<script src="reasoner.js"></script>` | `const reasoner = new Reasoner();` |
| Level 3 | 🤖 Agents, systems that can take actions | Agents | `import agent` | `<script src="agent.js"></script>` | `const agent = new Agent();` |
| Level 4 | 💡 Innovators, AI that can aid in invention | Innovators | `import innovator` | `<script src="innovator.js"></script>` | `const innovator = new Innovator();` |
| Level 5 | 🏢 Organizations, AI that can do the work of an organization | Organizations | `import organization` | `<script src="organization.js"></script>` | `const organization = new Organization();` |
""")



import streamlit as st

st.set_page_config(page_title="AI Evolution", layout="wide")

st.markdown("""
# The Evolution of AI

This interactive diagram shows the stages of AI development, from simple chatbots to complex organizational systems.
""")

# Embed the JavaScript animation
st.components.v1.html("""
<div id="ai-evolution-diagram" style="width: 100%; height: 500px;"></div>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script>
const width = document.getElementById('ai-evolution-diagram').clientWidth;
const height = 500;
const svg = d3.select("#ai-evolution-diagram")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

const stages = [
  { level: 1, name: "Chatbots", icon: "🗣️" },
  { level: 2, name: "Problem Solvers", icon: "🧠" },
  { level: 3, name: "Autonomous Agents", icon: "🤖" },
  { level: 4, name: "Inventive Systems", icon: "💡" },
  { level: 5, name: "Organizations", icon: "🏢" }
];

const xScale = d3.scaleLinear()
  .domain([1, 5])
  .range([50, width - 50]);

const yScale = d3.scaleLinear()
  .domain([0, 1])
  .range([height - 50, 50]);

// Draw connecting lines
svg.selectAll("line")
  .data(stages.slice(0, -1))
  .enter()
  .append("line")
  .attr("x1", d => xScale(d.level))
  .attr("y1", yScale(0.5))
  .attr("x2", d => xScale(d.level + 1))
  .attr("y2", yScale(0.5))
  .attr("stroke", "#ccc")
  .attr("stroke-width", 2);

// Create groups for each stage
const stageGroups = svg.selectAll("g")
  .data(stages)
  .enter()
  .append("g")
  .attr("transform", d => `translate(${xScale(d.level)}, ${yScale(0.5)})`);

// Add circles
stageGroups.append("circle")
  .attr("r", 30)
  .attr("fill", "#f0f0f0")
  .attr("stroke", "#333")
  .attr("stroke-width", 2);

// Add icons
stageGroups.append("text")
  .attr("text-anchor", "middle")
  .attr("dy", "0.3em")
  .attr("font-size", "24px")
  .text(d => d.icon);

// Add labels
stageGroups.append("text")
  .attr("text-anchor", "middle")
  .attr("dy", "3em")
  .text(d => d.name);

// Animation
function animateStages() {
  stageGroups.transition()
    .duration(1000)
    .attr("transform", (d, i) => `translate(${xScale(d.level)}, ${yScale(0.5 + Math.sin(i) * 0.1)})`)
    .on("end", animateStages);
}

animateStages();
</script>
""", height=550)

# Display the markdown tables
st.markdown("""
## Stages of AI Development

| Level | Stage | Description | Creation/Model |
|-------|-------|-------------|----------------|
| 1 | 🗣️ Data Collection | Gather and preprocess datasets for language models | 💬 Chatbots |
| 2 | 🧠 Model Architecture | Design neural networks for basic reasoning tasks | 🧮 Problem Solvers |
| 3 | 🤖 Algorithm Implementation | Develop action-oriented systems using Python/TensorFlow | 🎮 Autonomous Agents |
| 4 | 💡 Creative AI | Build models capable of generating novel solutions (e.g. GPT, DALL-E) | 🎨 Inventive Systems |
| 5 | 🏢 Full-Stack AI Systems | Create end-to-end AI solutions with HTML5/JS frontends and distributed backends | 🏗️ Organizations |

## AI Development Tools

| Level | Description | Create & Model | Python 🐍 | HTML5 🕸️ | JavaScript 📜 |
|-------|-------------|----------------|-----------|-----------|--------------|
| Level 1 | 🗣️ Chatbots, AI with conversational language | Chatbots | `import chatbot` | `<script src="chatbot.js"></script>` | `const chatbot = new Chatbot();` |
| Level 2 | 🧠 Reasoners, human-level problem-solving | Reasoners | `import reasoner` | `<script src="reasoner.js"></script>` | `const reasoner = new Reasoner();` |
| Level 3 | 🤖 Agents, systems that can take actions | Agents | `import agent` | `<script src="agent.js"></script>` | `const agent = new Agent();` |
| Level 4 | 💡 Innovators, AI that can aid in invention | Innovators | `import innovator` | `<script src="innovator.js"></script>` | `const innovator = new Innovator();` |
| Level 5 | 🏢 Organizations, AI that can do the work of an organization | Organizations | `import organization` | `<script src="organization.js"></script>` | `const organization = new Organization();` |
""")