mirror of
https://github.com/x1xhlol/system-prompts-and-models-of-ai-tools.git
synced 2026-02-03 21:40:53 +00:00
Removes outdated prompt files
Removes the `Chat Prompt.txt`, `VSCode Agent/Prompt.txt`, `Warp.dev/Prompt.txt`, and `v0 Prompts and Tools/Prompt.txt` files. These files likely contain outdated prompts or configurations that are no longer needed in the current project. Removing them helps to clean up the codebase and prevent potential confusion or conflicts.
This commit is contained in:
dopeuni444
143
AI_Prompt_Visualizer/README.md
Normal file
143
AI_Prompt_Visualizer/README.md
Normal file
@@ -0,0 +1,143 @@
|
||||
# 🤖 AI Prompt Evolution Visualizer
|
||||
|
||||
An interactive web application that visualizes the fascinating evolution of AI assistant prompts from 2019 to 2024, based on analysis of 20+ AI tool prompts across the industry.
|
||||
|
||||
## 🎯 What This Project Does
|
||||
|
||||
This visualizer brings to life the patterns and insights discovered from analyzing your comprehensive collection of AI prompts. It showcases:
|
||||
|
||||
- **Timeline Evolution**: How AI assistants evolved from basic Q&A to autonomous problem-solving
|
||||
- **Tool Comparison**: Interactive radar charts comparing different AI tools
|
||||
- **Feature Evolution**: Progress bars showing how key features developed over time
|
||||
- **Metrics Tracking**: Line charts tracking tool count, context levels, and autonomy
|
||||
|
||||
## 🚀 Features
|
||||
|
||||
### 📈 Interactive Charts
|
||||
- **Radar Charts**: Compare AI tools across multiple dimensions
|
||||
- **Line Charts**: Track evolution of key metrics over time
|
||||
- **Progress Bars**: Visualize feature development progress
|
||||
|
||||
### 🎨 Beautiful Animations
|
||||
- **Smooth Transitions**: Cards animate on hover and interaction
|
||||
- **Staggered Animations**: Timeline items appear with delays
|
||||
- **Responsive Design**: Works perfectly on all devices
|
||||
|
||||
### 🔧 Interactive Controls
|
||||
- **Timeline View**: Focus on the evolution timeline
|
||||
- **Tool Comparison**: Highlight AI tool differences
|
||||
- **Feature Evolution**: Show feature development progress
|
||||
|
||||
## 📊 Key Insights Visualized
|
||||
|
||||
### The Great AI Assistant Divide
|
||||
- **Autonomous Agents** (Cursor, Devin AI): "Do it yourself, don't ask permission"
|
||||
- **Guided Assistants** (Perplexity, Cluely): "I'll help you find the answer, you make the decision"
|
||||
|
||||
### Innovation Scorecard
|
||||
| AI Tool | Innovation Score | Key Strengths |
|
||||
|---------|-----------------|---------------|
|
||||
| **Cursor v1.2** | 95/100 | Context understanding, tool integration |
|
||||
| **Devin AI** | 90/100 | Planning mode, autonomous execution |
|
||||
| **Perplexity** | 60/100 | Research focus, citation systems |
|
||||
| **Replit** | 70/100 | Development tools, structured actions |
|
||||
|
||||
### Feature Evolution
|
||||
- **Context Understanding**: File → Codebase → Project → User Intent
|
||||
- **Tool Integration**: 3-5 tools → 20+ specialized tools
|
||||
- **Memory Systems**: None → Session → Cross-session → Multi-modal
|
||||
- **Autonomy Level**: Guided → Assisted → Autonomous → Predictive
|
||||
|
||||
## 🛠️ Technical Stack
|
||||
|
||||
- **HTML5**: Semantic structure and accessibility
|
||||
- **CSS3**: Modern styling with gradients and animations
|
||||
- **JavaScript**: Interactive functionality and chart rendering
|
||||
- **Chart.js**: Beautiful, responsive charts
|
||||
- **Responsive Design**: Mobile-first approach
|
||||
|
||||
## 🎨 Design Philosophy
|
||||
|
||||
### Color Scheme
|
||||
- **Primary**: Purple gradient (#667eea → #764ba2)
|
||||
- **Secondary**: Pink gradient (#f093fb → #f5576c)
|
||||
- **Background**: Clean white cards with subtle shadows
|
||||
|
||||
### Typography
|
||||
- **Font**: Segoe UI for modern, readable text
|
||||
- **Hierarchy**: Clear heading structure with proper contrast
|
||||
- **Responsive**: Scales appropriately on all devices
|
||||
|
||||
### Animations
|
||||
- **Smooth Transitions**: 0.3s ease for hover effects
|
||||
- **Staggered Entries**: 0.2s delays for timeline items
|
||||
- **Scale Effects**: Subtle zoom on card interactions
|
||||
|
||||
## 📱 Responsive Features
|
||||
|
||||
- **Mobile-First**: Optimized for phones and tablets
|
||||
- **Flexible Grid**: Adapts to different screen sizes
|
||||
- **Touch-Friendly**: Large buttons and interactive elements
|
||||
- **Performance**: Optimized animations and loading
|
||||
|
||||
## 🔍 Key Metrics Tracked
|
||||
|
||||
### Tool Count Evolution
|
||||
- **2019**: 3-5 basic tools
|
||||
- **2024**: 20+ specialized tools
|
||||
- **2025**: 30+ tools (predicted)
|
||||
|
||||
### Context Understanding Levels
|
||||
- **2019**: File-level only
|
||||
- **2024**: 4 levels (file → codebase → project → user intent)
|
||||
- **2025**: 5+ levels (predicted)
|
||||
|
||||
### Autonomy Progression
|
||||
- **2019**: Low (guided assistance)
|
||||
- **2024**: High (autonomous execution)
|
||||
- **2025**: Very High (predictive assistance)
|
||||
|
||||
## 🎯 How to Use
|
||||
|
||||
1. **Open the Application**: Navigate to `index.html` in your browser
|
||||
2. **Explore Sections**: Use the control buttons to focus on different views
|
||||
3. **Interact with Charts**: Hover over chart elements for detailed information
|
||||
4. **Compare Tools**: Study the radar charts to understand tool differences
|
||||
5. **Track Evolution**: Follow the timeline to see how AI assistants evolved
|
||||
|
||||
## 🔮 Future Enhancements
|
||||
|
||||
### Planned Features
|
||||
- **3D Visualizations**: Immersive chart experiences
|
||||
- **Real-time Data**: Live updates from AI tool APIs
|
||||
- **User Interactions**: Allow users to add their own data
|
||||
- **Export Options**: Save charts as images or PDFs
|
||||
|
||||
### Advanced Analytics
|
||||
- **Predictive Modeling**: AI-powered trend predictions
|
||||
- **Comparative Analysis**: Side-by-side tool comparisons
|
||||
- **Custom Metrics**: User-defined evaluation criteria
|
||||
|
||||
## 📚 Educational Value
|
||||
|
||||
This visualizer serves as:
|
||||
- **Research Tool**: For AI developers and researchers
|
||||
- **Educational Resource**: For students learning about AI evolution
|
||||
- **Decision Support**: For choosing the right AI tools
|
||||
- **Trend Analysis**: For understanding industry direction
|
||||
|
||||
## 🤝 Contributing
|
||||
|
||||
This project is open to contributions! Areas for improvement:
|
||||
- **Additional AI Tools**: Include more tools in the comparison
|
||||
- **New Metrics**: Add different evaluation criteria
|
||||
- **Enhanced Visualizations**: Create more interactive charts
|
||||
- **Mobile Optimization**: Improve mobile experience
|
||||
|
||||
## 📄 License
|
||||
|
||||
This project is created for educational and research purposes. Feel free to use and modify for your own projects.
|
||||
|
||||
---
|
||||
|
||||
*Built with ❤️ to showcase the fascinating evolution of AI assistant technology from 2019 to 2024.*
|
||||
554
AI_Prompt_Visualizer/index.html
Normal file
554
AI_Prompt_Visualizer/index.html
Normal file
@@ -0,0 +1,554 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AI Prompt Evolution Visualizer</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 10px;
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.header p {
|
||||
font-size: 1.2rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.dashboard {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 30px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
padding: 25px;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
color: #667eea;
|
||||
margin-bottom: 20px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
grid-column: 1 / -1;
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
padding: 25px;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.timeline-container {
|
||||
position: relative;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
opacity: 0;
|
||||
transform: translateX(-50px);
|
||||
animation: slideIn 0.8s ease forwards;
|
||||
}
|
||||
|
||||
.timeline-item:nth-child(2) { animation-delay: 0.2s; }
|
||||
.timeline-item:nth-child(3) { animation-delay: 0.4s; }
|
||||
.timeline-item:nth-child(4) { animation-delay: 0.6s; }
|
||||
|
||||
@keyframes slideIn {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-dot {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: #667eea;
|
||||
margin-right: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.timeline-dot::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 20px;
|
||||
width: 2px;
|
||||
height: 30px;
|
||||
background: #ddd;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.timeline-item:last-child .timeline-dot::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.timeline-year {
|
||||
font-weight: bold;
|
||||
color: #667eea;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.timeline-title {
|
||||
font-weight: bold;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.timeline-description {
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.comparison-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 20px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.ai-tool-card {
|
||||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||||
color: white;
|
||||
border-radius: 15px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.ai-tool-card:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.tool-score {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.tool-features {
|
||||
list-style: none;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.tool-features li {
|
||||
margin: 5px 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
position: relative;
|
||||
height: 400px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.feature-comparison {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: #eee;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #667eea, #764ba2);
|
||||
transition: width 1s ease;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.dashboard {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>🤖 AI Prompt Evolution Visualizer</h1>
|
||||
<p>Discover the fascinating journey of AI assistant evolution from 2019 to 2024</p>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<button class="btn" onclick="showTimeline()">Timeline View</button>
|
||||
<button class="btn" onclick="showComparison()">Tool Comparison</button>
|
||||
<button class="btn" onclick="showFeatures()">Feature Evolution</button>
|
||||
</div>
|
||||
|
||||
<div class="dashboard">
|
||||
<div class="card">
|
||||
<h2>📈 Innovation Timeline</h2>
|
||||
<div class="timeline-container">
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-year">2019-2021</div>
|
||||
<div class="timeline-title">Early Era</div>
|
||||
<div class="timeline-description">Basic Q&A, limited tools, formal language</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-year">2022-2023</div>
|
||||
<div class="timeline-title">Growth Era</div>
|
||||
<div class="timeline-description">Markdown formatting, tool expansion, conversational tone</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-year">2024</div>
|
||||
<div class="timeline-title">Autonomous Era</div>
|
||||
<div class="timeline-description">Memory systems, semantic search, browser integration</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-year">2025</div>
|
||||
<div class="timeline-title">Future Era</div>
|
||||
<div class="timeline-description">Multi-modal memory, AI ecosystems, predictive assistance</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>🎯 Innovation Scorecard</h2>
|
||||
<div class="chart-container">
|
||||
<canvas id="scoreChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>🚀 AI Tool Comparison</h2>
|
||||
<div class="comparison-grid">
|
||||
<div class="ai-tool-card">
|
||||
<h3>Cursor v1.2</h3>
|
||||
<div class="tool-score">95/100</div>
|
||||
<ul class="tool-features">
|
||||
<li>⭐⭐⭐⭐⭐ Context Understanding</li>
|
||||
<li>⭐⭐⭐⭐⭐ Tool Integration</li>
|
||||
<li>⭐⭐⭐⭐ Memory Systems</li>
|
||||
<li>⭐⭐⭐⭐⭐ Autonomy Level</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ai-tool-card">
|
||||
<h3>Devin AI</h3>
|
||||
<div class="tool-score">90/100</div>
|
||||
<ul class="tool-features">
|
||||
<li>⭐⭐⭐⭐ Context Understanding</li>
|
||||
<li>⭐⭐⭐⭐⭐ Tool Integration</li>
|
||||
<li>⭐⭐⭐ Memory Systems</li>
|
||||
<li>⭐⭐⭐⭐⭐ Autonomy Level</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ai-tool-card">
|
||||
<h3>Perplexity</h3>
|
||||
<div class="tool-score">60/100</div>
|
||||
<ul class="tool-features">
|
||||
<li>⭐⭐⭐ Context Understanding</li>
|
||||
<li>⭐⭐⭐ Tool Integration</li>
|
||||
<li>⭐⭐ Memory Systems</li>
|
||||
<li>⭐⭐ Autonomy Level</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ai-tool-card">
|
||||
<h3>Replit</h3>
|
||||
<div class="tool-score">70/100</div>
|
||||
<ul class="tool-features">
|
||||
<li>⭐⭐⭐ Context Understanding</li>
|
||||
<li>⭐⭐⭐⭐ Tool Integration</li>
|
||||
<li>⭐⭐ Memory Systems</li>
|
||||
<li>⭐⭐⭐ Autonomy Level</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>🔧 Feature Evolution</h2>
|
||||
<div class="feature-comparison">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🧠</div>
|
||||
<h3>Context Understanding</h3>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" style="width: 85%"></div>
|
||||
</div>
|
||||
<p>File → Codebase → Project → User Intent</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🛠️</div>
|
||||
<h3>Tool Integration</h3>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" style="width: 90%"></div>
|
||||
</div>
|
||||
<p>3-5 tools → 20+ specialized tools</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">💾</div>
|
||||
<h3>Memory Systems</h3>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" style="width: 75%"></div>
|
||||
</div>
|
||||
<p>None → Session → Cross-session → Multi-modal</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🤖</div>
|
||||
<h3>Autonomy Level</h3>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" style="width: 80%"></div>
|
||||
</div>
|
||||
<p>Guided → Assisted → Autonomous → Predictive</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline">
|
||||
<h2>📊 Key Metrics Evolution</h2>
|
||||
<div class="chart-container">
|
||||
<canvas id="metricsChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Initialize charts
|
||||
function initCharts() {
|
||||
// Score Chart
|
||||
const scoreCtx = document.getElementById('scoreChart').getContext('2d');
|
||||
new Chart(scoreCtx, {
|
||||
type: 'radar',
|
||||
data: {
|
||||
labels: ['Context Understanding', 'Tool Integration', 'Memory Systems', 'Autonomy Level', 'Response Richness'],
|
||||
datasets: [{
|
||||
label: 'Cursor v1.2',
|
||||
data: [5, 5, 4, 5, 5],
|
||||
borderColor: '#667eea',
|
||||
backgroundColor: 'rgba(102, 126, 234, 0.2)',
|
||||
pointBackgroundColor: '#667eea'
|
||||
}, {
|
||||
label: 'Devin AI',
|
||||
data: [4, 5, 3, 5, 4],
|
||||
borderColor: '#f093fb',
|
||||
backgroundColor: 'rgba(240, 147, 251, 0.2)',
|
||||
pointBackgroundColor: '#f093fb'
|
||||
}, {
|
||||
label: 'Perplexity',
|
||||
data: [3, 3, 2, 2, 4],
|
||||
borderColor: '#f5576c',
|
||||
backgroundColor: 'rgba(245, 87, 108, 0.2)',
|
||||
pointBackgroundColor: '#f5576c'
|
||||
}, {
|
||||
label: 'Replit',
|
||||
data: [3, 4, 2, 3, 3],
|
||||
borderColor: '#764ba2',
|
||||
backgroundColor: 'rgba(118, 75, 162, 0.2)',
|
||||
pointBackgroundColor: '#764ba2'
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
r: {
|
||||
beginAtZero: true,
|
||||
max: 5,
|
||||
ticks: {
|
||||
stepSize: 1
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'bottom'
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Metrics Chart
|
||||
const metricsCtx = document.getElementById('metricsChart').getContext('2d');
|
||||
new Chart(metricsCtx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['2019', '2020', '2021', '2022', '2023', '2024', '2025'],
|
||||
datasets: [{
|
||||
label: 'Tool Count',
|
||||
data: [4, 6, 8, 12, 16, 22, 30],
|
||||
borderColor: '#667eea',
|
||||
backgroundColor: 'rgba(102, 126, 234, 0.1)',
|
||||
tension: 0.4
|
||||
}, {
|
||||
label: 'Context Levels',
|
||||
data: [1, 1.5, 2, 2.5, 3, 4, 5],
|
||||
borderColor: '#f093fb',
|
||||
backgroundColor: 'rgba(240, 147, 251, 0.1)',
|
||||
tension: 0.4
|
||||
}, {
|
||||
label: 'Autonomy Level',
|
||||
data: [1, 1.5, 2, 2.5, 3.5, 4, 4.5],
|
||||
borderColor: '#f5576c',
|
||||
backgroundColor: 'rgba(245, 87, 108, 0.1)',
|
||||
tension: 0.4
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'top'
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Animation functions
|
||||
function showTimeline() {
|
||||
document.querySelectorAll('.timeline-item').forEach((item, index) => {
|
||||
item.style.animation = 'none';
|
||||
setTimeout(() => {
|
||||
item.style.animation = `slideIn 0.8s ease forwards ${index * 0.2}s`;
|
||||
}, 10);
|
||||
});
|
||||
}
|
||||
|
||||
function showComparison() {
|
||||
document.querySelectorAll('.ai-tool-card').forEach((card, index) => {
|
||||
card.style.animation = 'none';
|
||||
setTimeout(() => {
|
||||
card.style.animation = `slideIn 0.8s ease forwards ${index * 0.1}s`;
|
||||
}, 10);
|
||||
});
|
||||
}
|
||||
|
||||
function showFeatures() {
|
||||
document.querySelectorAll('.feature-card').forEach((card, index) => {
|
||||
card.style.animation = 'none';
|
||||
setTimeout(() => {
|
||||
card.style.animation = `slideIn 0.8s ease forwards ${index * 0.1}s`;
|
||||
}, 10);
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize everything when page loads
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
initCharts();
|
||||
showTimeline();
|
||||
});
|
||||
|
||||
// Add some interactive animations
|
||||
document.querySelectorAll('.card').forEach(card => {
|
||||
card.addEventListener('mouseenter', function() {
|
||||
this.style.transform = 'translateY(-5px) scale(1.02)';
|
||||
});
|
||||
|
||||
card.addEventListener('mouseleave', function() {
|
||||
this.style.transform = 'translateY(0) scale(1)';
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user