Update app.py

app.py

@@ -22,3 +22,193 @@ st.markdown("""
 
 """)
 
+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();` |
+""")
+
+