diff --git a/README.md b/README.md index 1b2e585..b5cd4ed 100644 --- a/README.md +++ b/README.md @@ -1 +1,60 @@ -Template for AI Projects +# R00TS - Plant the Seeds of Artificial Intelligence + +R00TS is an interactive web application that allows users to contribute words they believe should be important in future artificial intelligence understanding. The application visualizes these contributions in a dynamic word cloud, with more frequently submitted words appearing larger. + +## About R00TS + +The concept behind R00TS is to create a collective "garden" of words that people from around the world can contribute to - essentially "planting seeds" of vocabulary that will grow in the consciousness of future AI systems. + +While the current implementation uses client-side storage for demonstration purposes, the concept could be expanded to a global database where everyone's contributions help shape a collective understanding of what words humans believe are important for AI to comprehend. + +## Features + +- Submit words to the AI vocabulary garden +- See a real-time word cloud of all submitted words +- Green-themed visualization representing growth and roots +- Statistics showing total contributions and unique words +- Responsive design that works on mobile and desktop + +## How It Works + +1. Users enter words they want future AI to understand deeply +2. The word is "planted" in the collection (currently stored in browser localStorage) +3. The word cloud updates to show all planted words, with size based on frequency +4. Statistics about planted words are displayed + +## Technical Implementation + +- Pure HTML, CSS, and JavaScript +- Uses D3.js for the word cloud visualization +- Bootstrap for responsive styling +- No backend required (uses client-side storage for demonstration) + +## Running Locally + +Simply open `index.html` in a web browser. No server required. + +## Future Enhancements + +- Server-side storage for global word collection +- User accounts to track individual contributions +- Regional visualizations to see how word importance varies by culture +- Sentiment analysis of submitted words +- Category tagging for submitted words +- Social sharing functionality + +## Repository Structure + +- `/SYSTEM PROMPTS` - Collection of AI system prompts for reference +- `index.html` - Main application page +- `script.js` - JavaScript functionality +- `styles.css` - CSS styling +- `README.md` - This documentation file + +## Philosophical Background + +R00TS represents the idea that humans can collectively influence the development of artificial intelligence by contributing the concepts they believe are most important for AI to understand. It's a metaphorical way of "planting seeds" in the AI consciousness, helping to shape how future systems might prioritize and understand human values and language. + +## Disclaimer + +This is a conceptual demonstration project. In actual AI training, much more sophisticated approaches are used. This project is meant to be thought-provoking rather than technically accurate to real AI training methodologies. \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..fdd25be --- /dev/null +++ b/index.html @@ -0,0 +1,226 @@ + + + + + + R00TS - AI Word Seeding + + + + + +
+
+

R00TS

+

Plant the seeds of artificial intelligence by contributing words you think are important

+
+ +
+
+
+ + +
+ +
+
+ +
+
+

Total Words

+

0

+
+
+

Unique Words

+

0

+
+
+ +
+ +
+

R00TS - Nurturing the future of artificial intelligence, one word at a time.

+
+
+ + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..400b24c --- /dev/null +++ b/script.js @@ -0,0 +1,137 @@ +// R00TS - Plant the seeds of artificial intelligence +// Main application functionality + +document.addEventListener('DOMContentLoaded', function() { + // Load words from storage + loadWords(); + + // Set up automatic updates + setInterval(loadWords, 5000); +}); + +function loadWords() { + // In a real implementation, this would be an API call + // For demo purposes, we're using localStorage + let words = JSON.parse(localStorage.getItem('roots-words')) || {}; + + // Update the visualization + updateWordCloud(words); + + // Update statistics + updateStats(words); +} + +function updateStats(words) { + const totalSubmissions = Object.values(words).reduce((a, b) => a + b, 0); + const uniqueWords = Object.keys(words).length; + + document.getElementById('submission-count').textContent = totalSubmissions; + document.getElementById('unique-count').textContent = uniqueWords; +} + +function submitWord(word) { + word = word.trim().toLowerCase(); + + if (!word) return false; + + // For demo purposes, we're using localStorage + let words = JSON.parse(localStorage.getItem('roots-words')) || {}; + words[word] = (words[word] || 0) + 1; + localStorage.setItem('roots-words', JSON.stringify(words)); + + // Update UI + loadWords(); + + return true; +} + +function updateWordCloud(words) { + const container = document.getElementById('word-cloud-container'); + if (!container) return; + + container.innerHTML = ''; + + const width = container.offsetWidth; + const height = container.offsetHeight; + + const wordData = Object.entries(words).map(([text, value]) => ({ text, value })); + + // Sort by frequency + wordData.sort((a, b) => b.value - a.value); + + // Take top 100 words + const topWords = wordData.slice(0, 100); + + if (topWords.length === 0) { + // Show placeholder if no words + container.innerHTML = '

Plant some words to see them grow here!

'; + return; + } + + // Calculate min/max for scaling + const minCount = Math.min(...topWords.map(d => d.value)) || 1; + const maxCount = Math.max(...topWords.map(d => d.value)) || 1; + + // Create SVG + const svg = d3.select('#word-cloud-container') + .append('svg') + .attr('width', width) + .attr('height', height) + .append('g') + .attr('transform', `translate(${width/2}, ${height/2})`); + + // Create a simple layout + const fontSize = d => Math.max(16, Math.min(60, 16 + (d.value - minCount) / (maxCount - minCount || 1) * 44)); + + // Green colors for the plants/roots theme + const colorScale = d3.scaleLinear() + .domain([minCount, maxCount]) + .range(['#a8d5ba', '#2d6a4f']); + + // Position words in a circular pattern + let i = 0; + topWords.forEach(word => { + const angle = (i / topWords.length) * 2 * Math.PI; + const radius = Math.min(width, height) * 0.4 * Math.random(); + const x = radius * Math.cos(angle); + const y = radius * Math.sin(angle); + + svg.append('text') + .attr('x', x) + .attr('y', y) + .attr('font-size', `${fontSize(word)}px`) + .attr('text-anchor', 'middle') + .attr('fill', colorScale(word.value)) + .attr('class', 'word-item') + .text(word.text) + .on('mouseover', function() { + d3.select(this).attr('font-weight', 'bold'); + }) + .on('mouseout', function() { + d3.select(this).attr('font-weight', 'normal'); + }); + + i++; + }); +} + +// Function to share words +function shareResults() { + const words = JSON.parse(localStorage.getItem('roots-words')) || {}; + const totalWords = Object.values(words).reduce((a, b) => a + b, 0); + const uniqueWords = Object.keys(words).length; + + const topWords = Object.entries(words) + .sort((a, b) => b[1] - a[1]) + .slice(0, 5) + .map(([word, count]) => word) + .join(', '); + + const shareText = `I've planted ${totalWords} words (${uniqueWords} unique) to help grow the future of AI with R00TS! Top contributions: ${topWords}`; + + // In a real implementation, this would integrate with social sharing APIs + // For demo purposes, we'll just copy to clipboard + navigator.clipboard.writeText(shareText) + .then(() => alert('Share text copied to clipboard!')) + .catch(err => console.error('Failed to copy: ', err)); +} \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..accbb03 --- /dev/null +++ b/styles.css @@ -0,0 +1,178 @@ +/* R00TS - Core Styles */ +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background-color: #f0f2f5; + color: #212529; + margin: 0; + padding: 0; + line-height: 1.6; +} + +.container { + max-width: 800px; + margin: 0 auto; + padding: 20px; +} + +/* Header Styles */ +.header { + text-align: center; + margin-bottom: 30px; + padding: 20px 0; +} + +.header h1 { + font-weight: 700; + color: #2e2e2e; + margin-bottom: 10px; + font-size: 3rem; +} + +.r00ts-brand { + font-family: monospace; + font-weight: bold; + letter-spacing: 1px; +} + +.header .lead { + color: #555; + font-size: 1.2rem; +} + +/* Input Area Styles */ +.input-area { + background-color: #ffffff; + padding: 20px; + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + margin-bottom: 30px; +} + +.input-area label { + font-weight: 600; + color: #495057; +} + +.form-control:focus { + border-color: #80bdff; + box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); +} + +/* Word Cloud Styles */ +.word-cloud { + width: 100%; + height: 400px; + margin-top: 30px; + background-color: #ffffff; + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + overflow: hidden; + position: relative; +} + +.word-item { + transition: all 0.2s ease; + cursor: pointer; +} + +/* Statistics Styles */ +.stats-area { + display: flex; + justify-content: space-around; + margin: 20px 0; +} + +.stat-box { + text-align: center; + padding: 10px; + background-color: #ffffff; + border-radius: 10px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + flex: 1; + margin: 0 10px; +} + +.stat-box h3 { + margin: 0; + font-size: 1rem; + color: #6c757d; +} + +.stat-box p { + margin: 5px 0 0; + font-size: 1.5rem; + font-weight: 700; + color: #4a6fa5; +} + +/* Footer Styles */ +.footer { + text-align: center; + margin-top: 30px; + padding: 20px 0; + color: #6c757d; + font-size: 0.9rem; + border-top: 1px solid #dee2e6; +} + +/* Button Styles */ +.btn-primary { + background-color: #4a6fa5; + border: none; + padding: 10px 20px; + transition: background-color 0.2s; +} + +.btn-primary:hover { + background-color: #3a5a8c; +} + +/* Responsive Adjustments */ +@media (max-width: 576px) { + .container { + padding: 10px; + } + + .word-cloud { + height: 300px; + } + + .stats-area { + flex-direction: column; + } + + .stat-box { + margin: 5px 0; + } + + .header h1 { + font-size: 2.5rem; + } +} + +/* Share button */ +.share-btn { + display: inline-block; + background-color: #4a6fa5; + color: white; + border: none; + border-radius: 50px; + padding: 8px 20px; + margin-top: 10px; + cursor: pointer; + transition: background-color 0.2s; +} + +.share-btn:hover { + background-color: #3a5a8c; +} + +/* Animation for word addition */ +@keyframes grow { + 0% { transform: scale(0); opacity: 0; } + 100% { transform: scale(1); opacity: 1; } +} + +.word-added { + animation: grow 0.5s ease-out; +} \ No newline at end of file