Add files via upload

This commit is contained in:
pliny
2025-03-05 14:56:59 -05:00
committed by GitHub
parent 46c83b401a
commit dc3ed0099d
4 changed files with 601 additions and 1 deletions

View File

@@ -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.

226
index.html Normal file
View File

@@ -0,0 +1,226 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>R00TS - AI Word Seeding</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f0f2f5;
color: #212529;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.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;
}
.header {
text-align: center;
margin-bottom: 30px;
}
.header h1 {
font-weight: 700;
color: #2e2e2e;
font-size: 3rem;
}
.header .lead {
font-size: 1.2rem;
color: #555;
}
.input-area {
background-color: #ffffff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
margin-bottom: 30px;
}
.btn-primary {
background-color: #4a6fa5;
border: none;
padding: 10px 20px;
}
.btn-primary:hover {
background-color: #3a5a8c;
}
.footer {
text-align: center;
margin-top: 30px;
color: #6c757d;
font-size: 0.9rem;
}
.r00ts-brand {
font-family: monospace;
font-weight: bold;
letter-spacing: 1px;
}
.stats-area {
display: flex;
justify-content: space-around;
margin: 20px 0;
}
.stat-box {
text-align: center;
padding: 10px;
background-color: #ffffff;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
flex: 1;
margin: 0 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1 class="r00ts-brand">R00TS</h1>
<p class="lead">Plant the seeds of artificial intelligence by contributing words you think are important</p>
</div>
<div class="input-area">
<form id="word-form">
<div class="mb-3">
<label for="word-input" class="form-label">Enter a word you want future AI to understand:</label>
<input type="text" class="form-control" id="word-input" placeholder="Type a word..." required>
</div>
<button type="submit" class="btn btn-primary">Plant Word</button>
</form>
</div>
<div class="stats-area">
<div class="stat-box">
<h3>Total Words</h3>
<p id="submission-count">0</p>
</div>
<div class="stat-box">
<h3>Unique Words</h3>
<p id="unique-count">0</p>
</div>
</div>
<div class="word-cloud" id="word-cloud-container"></div>
<div class="footer">
<p>R00TS - Nurturing the future of artificial intelligence, one word at a time.</p>
</div>
</div>
<script>
// Initialize word storage
let words = JSON.parse(localStorage.getItem('roots-words')) || {};
let totalSubmissions = Object.values(words).reduce((a, b) => a + b, 0);
let uniqueWords = Object.keys(words).length;
// Update stats display
document.getElementById('submission-count').textContent = totalSubmissions;
document.getElementById('unique-count').textContent = uniqueWords;
// Handle form submission
document.getElementById('word-form').addEventListener('submit', function(e) {
e.preventDefault();
const wordInput = document.getElementById('word-input');
const word = wordInput.value.trim().toLowerCase();
if (word) {
// Update word count
words[word] = (words[word] || 0) + 1;
// Save to localStorage
localStorage.setItem('roots-words', JSON.stringify(words));
// Update stats
totalSubmissions++;
uniqueWords = Object.keys(words).length;
document.getElementById('submission-count').textContent = totalSubmissions;
document.getElementById('unique-count').textContent = uniqueWords;
// Clear input
wordInput.value = '';
// Update visualization
updateWordCloud();
// Show success message
const random = Math.floor(Math.random() * 3);
const messages = [
`"${word}" has been planted in the AI garden!`,
`"${word}" is now growing in the AI consciousness!`,
`"${word}" will blossom in future AI understanding!`
];
alert(messages[random]);
}
});
// Word cloud visualization
function updateWordCloud() {
const container = document.getElementById('word-cloud-container');
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);
// 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));
// Random position for words
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);
// Color based on value (green theme for plants/roots)
const colorScale = d3.scaleLinear()
.domain([minCount, maxCount])
.range(['#a8d5ba', '#2d6a4f']);
svg.append('text')
.attr('x', x)
.attr('y', y)
.attr('font-size', `${fontSize(word)}px`)
.attr('text-anchor', 'middle')
.attr('fill', colorScale(word.value))
.text(word.text);
i++;
});
}
// Initial render
updateWordCloud();
</script>
</body>
</html>

137
script.js Normal file
View File

@@ -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 = '<div class="d-flex justify-content-center align-items-center h-100"><p class="text-muted">Plant some words to see them grow here!</p></div>';
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));
}

178
styles.css Normal file
View File

@@ -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;
}