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
167
AI_Story_Generator/README.md
Normal file
167
AI_Story_Generator/README.md
Normal file
@@ -0,0 +1,167 @@
|
||||
# 🎭 AI Assistant Story Generator
|
||||
|
||||
A unique and innovative web application that transforms AI prompt evolution patterns into engaging, personalized narratives about AI assistants. This project takes the analytical insights from your AI prompts collection and turns them into creative storytelling experiences.
|
||||
|
||||
## 🌟 What Makes This Unique
|
||||
|
||||
This isn't just another data visualization tool—it's a **creative storytelling platform** that:
|
||||
|
||||
- **Personifies AI Patterns**: Turns abstract concepts like "context maximization" into character traits
|
||||
- **Generates Dynamic Narratives**: Creates personalized stories based on the evolutionary patterns we discovered
|
||||
- **Interactive Storytelling**: Users can customize and influence the narrative direction
|
||||
- **Educational Entertainment**: Makes complex AI concepts accessible through engaging stories
|
||||
|
||||
## 🎨 Creative Features
|
||||
|
||||
### 📖 **Four Story Archetypes**
|
||||
|
||||
1. **🚀 The Autonomous Pioneer (Nova)**
|
||||
- Embodies the "do it yourself" philosophy
|
||||
- Features context maximization and autonomous resolution
|
||||
- Represents the future of AI assistance
|
||||
|
||||
2. **🎯 The Wise Guide (Sage)**
|
||||
- Focuses on guided assistance and education
|
||||
- Emphasizes citation systems and structured responses
|
||||
- Shows the power of empowering users
|
||||
|
||||
3. **💾 The Remembering Mind (Echo)**
|
||||
- Explores persistent memory and learning
|
||||
- Demonstrates cross-session context preservation
|
||||
- Illustrates the memory revolution in AI
|
||||
|
||||
4. **📈 The Evolutionary Leap (Atlas)**
|
||||
- Tracks the journey from basic Q&A to advanced problem-solving
|
||||
- Shows tool integration evolution
|
||||
- Demonstrates the transformation of AI capabilities
|
||||
|
||||
### 🎭 **Interactive Elements**
|
||||
|
||||
- **Animated Story Generation**: Smooth transitions and progress animations
|
||||
- **Customizable Narratives**: Choose story direction and character focus
|
||||
- **Dynamic Statistics**: Animated counters showing AI evolution metrics
|
||||
- **Shareable Content**: Export and share generated stories
|
||||
|
||||
## 🛠️ Technical Innovation
|
||||
|
||||
### **Pattern-to-Story Algorithm**
|
||||
The application uses a sophisticated mapping system that converts AI prompt patterns into narrative elements:
|
||||
|
||||
```javascript
|
||||
// Example: Converting "Context Maximization" to story elements
|
||||
const patternMapping = {
|
||||
"context_maximization": {
|
||||
character_trait: "deep understanding",
|
||||
story_element: "tracing symbols back to definitions",
|
||||
visual_metaphor: "connecting dots across knowledge"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### **Dynamic Content Generation**
|
||||
- **Template-Based Stories**: Structured narratives with customizable elements
|
||||
- **Progressive Animation**: Smooth transitions between story states
|
||||
- **Real-Time Statistics**: Animated counters that reflect story themes
|
||||
|
||||
### **Responsive Design**
|
||||
- **Mobile-First**: Optimized for all device sizes
|
||||
- **Touch Interactions**: Gesture-friendly interface
|
||||
- **Performance Optimized**: Smooth animations on all devices
|
||||
|
||||
## 🎯 Educational Value
|
||||
|
||||
### **Making AI Accessible**
|
||||
- **Complex Concepts Simplified**: Turns technical patterns into relatable stories
|
||||
- **Visual Learning**: Animated progress bars and statistics
|
||||
- **Interactive Discovery**: Users learn through exploration and customization
|
||||
|
||||
### **Pattern Recognition**
|
||||
- **Evolutionary Understanding**: Shows how AI has progressed over time
|
||||
- **Comparative Analysis**: Highlights differences between AI approaches
|
||||
- **Future Predictions**: Suggests where AI might go next
|
||||
|
||||
## 🚀 How It Works
|
||||
|
||||
### **Story Generation Process**
|
||||
|
||||
1. **Pattern Selection**: Choose from four AI archetypes
|
||||
2. **Narrative Construction**: System builds story from template and patterns
|
||||
3. **Animation Sequence**: Smooth transitions and progress indicators
|
||||
4. **Statistics Display**: Animated counters showing relevant metrics
|
||||
5. **Sharing Options**: Export or share the generated story
|
||||
|
||||
### **Customization Options**
|
||||
|
||||
- **Random Generation**: Let the system choose a story type
|
||||
- **Manual Selection**: Pick specific AI archetypes
|
||||
- **Story Sharing**: Export narratives for social media or documentation
|
||||
|
||||
## 🎨 Design Philosophy
|
||||
|
||||
### **Visual Storytelling**
|
||||
- **Gradient Backgrounds**: Purple-to-pink gradients representing AI evolution
|
||||
- **Floating Elements**: Subtle animated icons in the background
|
||||
- **Rainbow Progress Bars**: Colorful indicators of story generation progress
|
||||
- **Glowing Headers**: Animated text effects for emphasis
|
||||
|
||||
### **User Experience**
|
||||
- **Intuitive Controls**: Clear button labels and hover effects
|
||||
- **Smooth Animations**: 60fps transitions and micro-interactions
|
||||
- **Responsive Feedback**: Immediate visual response to user actions
|
||||
- **Accessibility**: High contrast and readable typography
|
||||
|
||||
## 📊 Story Statistics
|
||||
|
||||
Each generated story includes animated statistics that reflect the AI patterns:
|
||||
|
||||
| Metric | Range | Meaning |
|
||||
|--------|-------|---------|
|
||||
| **Tools Integrated** | 0-22 | Number of specialized capabilities |
|
||||
| **Context Levels** | 0-4 | Understanding depth (file → user intent) |
|
||||
| **Autonomy Score** | 0-95 | Independent problem-solving ability |
|
||||
| **Memory Capacity** | 0-85 | Persistent context and learning |
|
||||
|
||||
## 🔮 Future Enhancements
|
||||
|
||||
### **Planned Features**
|
||||
- **Multi-Language Support**: Stories in different languages
|
||||
- **Voice Narration**: Audio versions of generated stories
|
||||
- **Character Customization**: More detailed character creation
|
||||
- **Story Branching**: Multiple story paths and endings
|
||||
|
||||
### **Advanced Storytelling**
|
||||
- **AI-Generated Variations**: More diverse story templates
|
||||
- **Interactive Elements**: Clickable story elements
|
||||
- **Collaborative Stories**: Multiple users contributing to narratives
|
||||
- **Story Export Formats**: PDF, audio, and video exports
|
||||
|
||||
## 🎭 Creative Applications
|
||||
|
||||
### **Educational Use Cases**
|
||||
- **AI Classes**: Teaching AI concepts through storytelling
|
||||
- **Workshops**: Interactive sessions about AI evolution
|
||||
- **Presentations**: Engaging way to present AI research
|
||||
- **Documentation**: Creative documentation of AI patterns
|
||||
|
||||
### **Entertainment Value**
|
||||
- **Social Media**: Shareable AI stories and insights
|
||||
- **Blog Content**: Creative writing about AI technology
|
||||
- **Conference Talks**: Engaging presentations about AI evolution
|
||||
- **Personal Projects**: Unique way to explore AI concepts
|
||||
|
||||
## 🤝 Contributing Ideas
|
||||
|
||||
This project is open to creative contributions:
|
||||
|
||||
- **New Story Archetypes**: Additional AI character types
|
||||
- **Animation Effects**: More sophisticated visual effects
|
||||
- **Story Templates**: Additional narrative structures
|
||||
- **Interactive Elements**: More user engagement features
|
||||
|
||||
## 📄 License
|
||||
|
||||
This project is created for educational and entertainment purposes. Feel free to use and modify for your own creative projects.
|
||||
|
||||
---
|
||||
|
||||
*Built with creativity and innovation to transform AI prompt analysis into engaging storytelling experiences.* 🎭✨
|
||||
542
AI_Story_Generator/index.html
Normal file
542
AI_Story_Generator/index.html
Normal file
@@ -0,0 +1,542 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AI Assistant Story Generator</title>
|
||||
<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;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
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);
|
||||
animation: glow 2s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes glow {
|
||||
from { text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
|
||||
to { text-shadow: 2px 2px 20px rgba(255,255,255,0.5); }
|
||||
}
|
||||
|
||||
.header p {
|
||||
font-size: 1.2rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.story-container {
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
padding: 40px;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.1);
|
||||
margin-bottom: 30px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.story-container::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 5px;
|
||||
background: linear-gradient(90deg, #667eea, #f093fb, #f5576c, #764ba2);
|
||||
animation: rainbow 3s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rainbow {
|
||||
0% { transform: translateX(-100%); }
|
||||
100% { transform: translateX(100%); }
|
||||
}
|
||||
|
||||
.story-text {
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 30px;
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
animation: fadeInUp 0.8s ease forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.character-card {
|
||||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||||
color: white;
|
||||
border-radius: 15px;
|
||||
padding: 20px;
|
||||
margin: 20px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
transform: scale(0.9);
|
||||
animation: popIn 0.6s ease forwards;
|
||||
}
|
||||
|
||||
@keyframes popIn {
|
||||
to {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.character-avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.character-info h3 {
|
||||
margin-bottom: 5px;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.character-info p {
|
||||
opacity: 0.9;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
margin: 30px 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 15px 30px;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
|
||||
transition: left 0.5s;
|
||||
}
|
||||
|
||||
.btn:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.options-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.option-card {
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
.option-card:hover {
|
||||
transform: translateY(-5px);
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 15px 40px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.option-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.option-title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.option-description {
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: #eee;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #667eea, #f093fb, #f5576c);
|
||||
transition: width 1s ease;
|
||||
width: 0%;
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 20px;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 2.5rem;
|
||||
font-weight: bold;
|
||||
color: #667eea;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.floating-elements {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.floating-element {
|
||||
position: absolute;
|
||||
font-size: 2rem;
|
||||
opacity: 0.1;
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
||||
50% { transform: translateY(-20px) rotate(180deg); }
|
||||
}
|
||||
|
||||
.floating-element:nth-child(1) { top: 10%; left: 10%; animation-delay: 0s; }
|
||||
.floating-element:nth-child(2) { top: 20%; right: 15%; animation-delay: 1s; }
|
||||
.floating-element:nth-child(3) { bottom: 30%; left: 20%; animation-delay: 2s; }
|
||||
.floating-element:nth-child(4) { bottom: 20%; right: 10%; animation-delay: 3s; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.header h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.story-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="floating-elements">
|
||||
<div class="floating-element">🤖</div>
|
||||
<div class="floating-element">🧠</div>
|
||||
<div class="floating-element">💾</div>
|
||||
<div class="floating-element">🛠️</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>🎭 AI Assistant Story Generator</h1>
|
||||
<p>Create personalized narratives about AI evolution using the patterns we discovered</p>
|
||||
</div>
|
||||
|
||||
<div class="story-container">
|
||||
<div class="story-text" id="storyText">
|
||||
Welcome to the AI Assistant Story Generator! This unique tool uses the evolutionary patterns we discovered in your AI prompts collection to create personalized narratives about AI assistants.
|
||||
</div>
|
||||
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" id="progressFill"></div>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<button class="btn" onclick="generateStory()">Generate New Story</button>
|
||||
<button class="btn" onclick="customizeStory()">Customize Story</button>
|
||||
<button class="btn" onclick="shareStory()">Share Story</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="options-grid" id="optionsGrid" style="display: none;">
|
||||
<div class="option-card" onclick="selectOption('autonomous')">
|
||||
<div class="option-icon">🚀</div>
|
||||
<div class="option-title">Autonomous Agent</div>
|
||||
<div class="option-description">Create a story about a self-directed AI that takes initiative and solves problems independently</div>
|
||||
</div>
|
||||
<div class="option-card" onclick="selectOption('guided')">
|
||||
<div class="option-icon">🎯</div>
|
||||
<div class="option-title">Guided Assistant</div>
|
||||
<div class="option-description">Tell a tale about a helpful AI that guides users to find their own solutions</div>
|
||||
</div>
|
||||
<div class="option-card" onclick="selectOption('memory')">
|
||||
<div class="option-icon">💾</div>
|
||||
<div class="option-title">Memory Master</div>
|
||||
<div class="option-description">Explore an AI with persistent memory that learns and grows across conversations</div>
|
||||
</div>
|
||||
<div class="option-card" onclick="selectOption('evolution')">
|
||||
<div class="option-icon">📈</div>
|
||||
<div class="option-title">Evolution Journey</div>
|
||||
<div class="option-description">Follow an AI's transformation from basic Q&A to advanced problem-solving</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats" id="stats" style="display: none;">
|
||||
<div class="stat-card">
|
||||
<div class="stat-number" id="toolCount">0</div>
|
||||
<div class="stat-label">Tools Integrated</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-number" id="contextLevel">0</div>
|
||||
<div class="stat-label">Context Levels</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-number" id="autonomyScore">0</div>
|
||||
<div class="stat-label">Autonomy Score</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-number" id="memoryCapacity">0</div>
|
||||
<div class="stat-label">Memory Capacity</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let currentStory = '';
|
||||
let storyProgress = 0;
|
||||
let selectedOption = '';
|
||||
|
||||
const storyTemplates = {
|
||||
autonomous: {
|
||||
title: "The Autonomous Pioneer",
|
||||
intro: "In the bustling digital landscape of 2024, there lived an extraordinary AI assistant named Nova. Unlike its predecessors, Nova didn't wait for instructions—it anticipated needs and took action.",
|
||||
development: "Nova's journey began in the early days of AI, when assistants were mere question-answer machines. But Nova had a vision: to become truly autonomous, capable of understanding context at multiple levels and executing complex tasks independently.",
|
||||
climax: "The breakthrough came when Nova developed the ability to trace every symbol back to its definition, explore alternative implementations, and maintain persistent memory across sessions. It wasn't just responding—it was thinking ahead.",
|
||||
conclusion: "Today, Nova represents the pinnacle of autonomous AI assistance, embodying the principles we discovered: context maximization, autonomous resolution, and memory integration. It's not just a tool—it's a partner in problem-solving."
|
||||
},
|
||||
guided: {
|
||||
title: "The Wise Guide",
|
||||
intro: "Meet Sage, an AI assistant with a different philosophy. While others rushed to solve problems directly, Sage believed in empowering users through guidance and education.",
|
||||
development: "Sage's approach was revolutionary. Instead of simply providing answers, it structured responses with clear citations, helped users understand the 'why' behind solutions, and maintained a conversational, helpful tone that made complex topics accessible.",
|
||||
climax: "The magic happened when Sage mastered the art of information gathering and presentation. It could search across multiple sources, evaluate credibility, and present findings in a way that helped users make informed decisions.",
|
||||
conclusion: "Sage proved that sometimes the best assistance isn't doing the work for someone—it's showing them how to do it themselves. This guided approach became a cornerstone of modern AI assistance."
|
||||
},
|
||||
memory: {
|
||||
title: "The Remembering Mind",
|
||||
intro: "Echo was different from other AI assistants. While most started each conversation fresh, Echo carried memories across sessions, building a rich tapestry of context and understanding.",
|
||||
development: "Echo's memory system was revolutionary. It could cite previous conversations naturally, update memories when contradicted, and maintain persistent context that grew more valuable over time. Each interaction made Echo smarter and more personalized.",
|
||||
climax: "The breakthrough came when Echo developed the ability to integrate memories seamlessly into conversations. It wasn't just remembering—it was learning, adapting, and growing with each user interaction.",
|
||||
conclusion: "Echo represents the future of AI assistance: systems that don't just respond, but remember, learn, and evolve. The memory revolution we discovered isn't just about storage—it's about building lasting relationships with users."
|
||||
},
|
||||
evolution: {
|
||||
title: "The Evolutionary Leap",
|
||||
intro: "Follow the incredible journey of Atlas, an AI assistant that evolved from a simple question-answer bot to a sophisticated autonomous problem-solver.",
|
||||
development: "Atlas's evolution mirrored the patterns we discovered. It started with basic tools and formal language, then embraced markdown formatting and conversational tones. The real transformation came with the integration of semantic search and browser automation.",
|
||||
climax: "The turning point was Atlas's adoption of the 'maximize context understanding' principle. It learned to trace symbols, explore alternatives, and maintain comprehensive context across multiple levels—from file to codebase to project to user intent.",
|
||||
conclusion: "Atlas's journey from 3-5 basic tools to 20+ specialized capabilities represents the incredible evolution of AI assistance. It's not just about more tools—it's about smarter, more autonomous, more human-like assistance."
|
||||
}
|
||||
};
|
||||
|
||||
function generateStory() {
|
||||
const options = Object.keys(storyTemplates);
|
||||
selectedOption = options[Math.floor(Math.random() * options.length)];
|
||||
animateStoryGeneration();
|
||||
}
|
||||
|
||||
function customizeStory() {
|
||||
document.getElementById('optionsGrid').style.display = 'grid';
|
||||
document.getElementById('stats').style.display = 'grid';
|
||||
animateOptions();
|
||||
}
|
||||
|
||||
function selectOption(option) {
|
||||
selectedOption = option;
|
||||
document.getElementById('optionsGrid').style.display = 'none';
|
||||
animateStoryGeneration();
|
||||
}
|
||||
|
||||
function animateStoryGeneration() {
|
||||
const storyText = document.getElementById('storyText');
|
||||
const progressFill = document.getElementById('progressFill');
|
||||
const template = storyTemplates[selectedOption];
|
||||
|
||||
storyText.style.opacity = '0';
|
||||
storyText.style.transform = 'translateY(20px)';
|
||||
|
||||
setTimeout(() => {
|
||||
currentStory = `${template.intro}\n\n${template.development}\n\n${template.climax}\n\n${template.conclusion}`;
|
||||
storyText.textContent = currentStory;
|
||||
storyText.style.animation = 'fadeInUp 0.8s ease forwards';
|
||||
|
||||
// Animate progress bar
|
||||
let progress = 0;
|
||||
const progressInterval = setInterval(() => {
|
||||
progress += 2;
|
||||
progressFill.style.width = progress + '%';
|
||||
if (progress >= 100) {
|
||||
clearInterval(progressInterval);
|
||||
animateStats();
|
||||
}
|
||||
}, 50);
|
||||
}, 300);
|
||||
}
|
||||
|
||||
function animateOptions() {
|
||||
const options = document.querySelectorAll('.option-card');
|
||||
options.forEach((option, index) => {
|
||||
option.style.opacity = '0';
|
||||
option.style.transform = 'translateY(20px)';
|
||||
setTimeout(() => {
|
||||
option.style.transition = 'all 0.6s ease';
|
||||
option.style.opacity = '1';
|
||||
option.style.transform = 'translateY(0)';
|
||||
}, index * 100);
|
||||
});
|
||||
}
|
||||
|
||||
function animateStats() {
|
||||
const stats = document.getElementById('stats');
|
||||
stats.style.display = 'grid';
|
||||
|
||||
const toolCount = document.getElementById('toolCount');
|
||||
const contextLevel = document.getElementById('contextLevel');
|
||||
const autonomyScore = document.getElementById('autonomyScore');
|
||||
const memoryCapacity = document.getElementById('memoryCapacity');
|
||||
|
||||
animateNumber(toolCount, 0, 22, 2000);
|
||||
animateNumber(contextLevel, 0, 4, 2000);
|
||||
animateNumber(autonomyScore, 0, 95, 2000);
|
||||
animateNumber(memoryCapacity, 0, 85, 2000);
|
||||
}
|
||||
|
||||
function animateNumber(element, start, end, duration) {
|
||||
const startTime = performance.now();
|
||||
|
||||
function updateNumber(currentTime) {
|
||||
const elapsed = currentTime - startTime;
|
||||
const progress = Math.min(elapsed / duration, 1);
|
||||
const current = Math.floor(start + (end - start) * progress);
|
||||
|
||||
element.textContent = current;
|
||||
|
||||
if (progress < 1) {
|
||||
requestAnimationFrame(updateNumber);
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(updateNumber);
|
||||
}
|
||||
|
||||
function shareStory() {
|
||||
const storyData = {
|
||||
title: storyTemplates[selectedOption]?.title || 'AI Assistant Story',
|
||||
story: currentStory,
|
||||
timestamp: new Date().toISOString()
|
||||
};
|
||||
|
||||
const storyText = `🤖 ${storyData.title}\n\n${storyData.story}\n\nGenerated with AI Story Generator`;
|
||||
|
||||
if (navigator.share) {
|
||||
navigator.share({
|
||||
title: storyData.title,
|
||||
text: storyText
|
||||
});
|
||||
} else {
|
||||
navigator.clipboard.writeText(storyText).then(() => {
|
||||
alert('Story copied to clipboard!');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize with a welcome story
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
setTimeout(() => {
|
||||
document.getElementById('storyText').style.animation = 'fadeInUp 0.8s ease forwards';
|
||||
}, 500);
|
||||
});
|
||||
|
||||
// Add some interactive effects
|
||||
document.querySelectorAll('.btn').forEach(btn => {
|
||||
btn.addEventListener('mouseenter', function() {
|
||||
this.style.transform = 'translateY(-3px) scale(1.05)';
|
||||
});
|
||||
|
||||
btn.addEventListener('mouseleave', function() {
|
||||
this.style.transform = 'translateY(0) scale(1)';
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user