import streamlit as st
import pandas as pd
import plotly.express as px


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

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();` |
""")


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();` |
""")


st.title("AI Development Levels and Capabilities")

# Create a DataFrame with the information from the image
data = {
    "Level": ["Level 0: No AI", "Level 1: Emerging", "Level 2: Competent", "Level 3: Expert", "Level 4: Virtuoso", "Level 5: Superhuman"],
    "Description": [
        "No AI capabilities",
        "Equal to or somewhat better than an unskilled human",
        "At least 50th percentile of skilled adults",
        "At least 90th percentile of skilled adults",
        "At least 99th percentile of skilled adults",
        "Outperforms 100% of humans"
    ],
    "Narrow AI": [
        "Calculator software, compiler",
        "GOFAI (Boden, 2014); simple rule-based systems, e.g., SHRDLU (Winograd, 1971)",
        "Toxicity detectors such as Jigsaw (Das et al., 2022); Smart Speakers such as Siri (Apple), Alexa (Amazon), or Google Assistant (Google); VQA systems such as PaLI (Chen et al., 2023); Watson (IBM); SOTA LLMs for a subset of tasks (e.g., short essay writing, simple coding)",
        "Spelling & grammar checkers such as Grammarly (Grammarly, 2023); generative image models such as Imagen (Saharia et al., 2022) or Dall-E 2 (Ramesh et al., 2022)",
        "Deep Blue (Campbell et al., 2002); AlphaGo (Silver et al., 2016, 2017)",
        "AlphaFold (Jumper et al., 2021; Varadi et al., 2022), AlphaZero (Silver et al., 2018), StockFish (Stockfish, 2023)"
    ],
    "General AI": [
        "Human-in-the-loop computing, e.g., Amazon Mechanical Turk",
        "ChatGPT (OpenAI, 2023), Bard (Anil et al., 2023), Llama 2 (Touvron et al., 2023), Gemini (Pichai & Hassabis, 2023)",
        "Not yet achieved",
        "Not yet achieved",
        "Not yet achieved",
        "Artificial Superintelligence (ASI) - not yet achieved"
    ],
    "Narrow AI Achievement": [0, 20, 50, 90, 99, 100],
    "General AI Achievement": [0, 20, 0, 0, 0, 0]
}

df = pd.DataFrame(data)

# Display the DataFrame as an interactive table
st.dataframe(df, use_container_width=True)

# Create a line chart to visualize AI achievement levels
fig = px.line(df, x="Level", y=["Narrow AI Achievement", "General AI Achievement"], 
              title="AI Achievement Levels",
              labels={"value": "Achievement Percentage", "variable": "AI Type"},
              markers=True)
st.plotly_chart(fig, use_container_width=True)

# Add some explanatory text
st.markdown("""
This dashboard summarizes and visualizes the levels of AI development, from no AI capabilities (Level 0) to superhuman AI (Level 5). 
It categorizes AI into Narrow AI (designed for specific tasks) and General AI (capable of a wide range of tasks).

Key points:
- As of 2023, most advanced AI systems are at Level 1 or 2 for General AI tasks.
- Narrow AI has achieved higher levels in specific domains (e.g., AlphaFold for protein folding).
- General AI at Level 2 (Competent) and above has not yet been achieved.
- The development of Artificial Superintelligence (ASI) remains a theoretical concept.

Note: The achievement levels in the chart are approximate and for illustration purposes.
""")

# Add a section for user interaction
st.subheader("Explore AI Levels")
selected_level = st.selectbox("Select an AI Level to learn more:", df['Level'])

# Display details for the selected level
if selected_level:
    level_data = df[df['Level'] == selected_level].iloc[0]
    st.write(f"**Description:** {level_data['Description']}")
    st.write(f"**Narrow AI Examples:** {level_data['Narrow AI']}")
    st.write(f"**General AI Status:** {level_data['General AI']}")

# Add a comparison tool
st.subheader("Compare AI Levels")
col1, col2 = st.columns(2)
with col1:
    level1 = st.selectbox("Select first level:", df['Level'], key="level1")
with col2:
    level2 = st.selectbox("Select second level:", df['Level'], key="level2")

if level1 and level2:
    data1 = df[df['Level'] == level1].iloc[0]
    data2 = df[df['Level'] == level2].iloc[0]
    
    comparison_df = pd.DataFrame({
        "Aspect": ["Description", "Narrow AI Examples", "General AI Status", "Narrow AI Achievement", "General AI Achievement"],
        level1: [data1['Description'], data1['Narrow AI'], data1['General AI'], f"{data1['Narrow AI Achievement']}%", f"{data1['General AI Achievement']}%"],
        level2: [data2['Description'], data2['Narrow AI'], data2['General AI'], f"{data2['Narrow AI Achievement']}%", f"{data2['General AI Achievement']}%"]
    })
    
    st.table(comparison_df)

# Add a section for future predictions
st.subheader("Future of AI")
st.write("""
Based on the current trajectory of AI development:

1. **Narrow AI:** We can expect continued rapid progress in specific domains, with more tasks reaching expert and virtuoso levels.
2. **General AI:** Progress towards Competent AGI (Level 2) is ongoing, but the timeline remains uncertain.
3. **Ethical Considerations:** As AI capabilities expand, ethical guidelines and responsible development practices become increasingly crucial.
4. **Interdisciplinary Approach:** Future advancements will likely require collaboration across multiple fields, including computer science, neuroscience, and philosophy.

What are your thoughts on the future of AI? How might these advancements impact various industries and society as a whole?
""")

# Add a user input section for predictions
user_prediction = st.text_area("Share your predictions or thoughts on the future of AI:")
if st.button("Submit Your Prediction"):
    st.write("Thank you for sharing your thoughts! While we can't store your prediction, it's valuable to consider diverse perspectives on AI's future.")

st.markdown("""| Level  | Performance          | Generality        | Description                                                                |
|--------|----------------------|-------------------|----------------------------------------------------------------------------|
| Level 0 | No AI               |                   |                                                                            |
| Level 1 | Emerging            | Narrow Non-AI     | GOFAI (Boden, 2014); simple rule-based systems, e.g., SHRDLU (Winograd, 1971) |
| Level 1 | Emerging            | General Non-AI    | human-in-the-loop computing, e.g., Amazon Mechanical Turk                   |
| Level 2 | Competent           | Narrow Non-AI     | toxicity detectors, smart speakers, VQA systems                             |
| Level 2 | Competent           | Emerging AGI      | ChaiGPT, Bard, Llama 2, Gemini                                             |
| Level 3 | Expert              | Competent Narrow AI | spelling & grammar checkers, generative image models                        |
| Level 3 | Expert              | Expert AGI        | not yet achieved                                                           |
| Level 4 | Virtuoso            | Virtuoso Narrow AI | Deep Blue, AlphaGo                                                         |
| Level 4 | Virtuoso            | Virtuoso AGI      | not yet achieved                                                           |
| Level 5 | Superhuman          | Superhuman Narrow AI | AlphaFold, AlphaZero, StockFish                                            |
| Level 5 | Superhuman          | Artificial Superintelligence (ASI) | not yet achieved                                                           |
""")