A continuation of ch08-maddie.html. The complete source identity, every recorded occurrence, and linked equations are on its first page.
Source transcript · continued
Download complete source text ↓2,248 lines · 61.0 KB
<!-- Hebbian Learning -->
<section class="section hebbian-section">
<div class="section-inner">
<div class="section-header">
<span class="section-number">03</span>
<h2 class="section-title">Hebbian Learning</h2>
</div>
<div class="hebbian-content">
<div class="hebbian-explanation">
<h3>Neurons That Fire Together, Wire Together</h3>
<p>
MADDIE doesn't store knowledge in lists or databases. Instead, patterns
<strong>dissolve</strong> into W_know - like memories becoming connections
in your brain, not files in a folder.
</p>
<p>
When you ask a question, spikes flow through W_know. Similar patterns
<strong>resonate</strong> and activate. Related neurons fire together.
Original text chunks are retrieved with full source attribution.
</p>
<div class="formula-box">
<div class="formula-title">HEBBIAN UPDATE RULE</div>
<div class="formula">W<sub>know</sub> += pattern X pattern<sup>T</sup></div>
</div>
<p>
This creates <strong>sublinear compression</strong>: more data leads to
better compression ratios. A million patterns might only need 100K weights.
A billion patterns? Just 1M weights. Knowledge compounds.
</p>
</div>
<div class="synapse-viz">
<canvas id="synapseCanvas"></canvas>
</div>
</div>
</div>
</section>
<!-- Knowledge Retrieval Demo -->
<section class="section retrieval-section">
<div class="section-inner">
<div class="section-header">
<span class="section-number">04</span>
<h2 class="section-title">Knowledge Retrieval</h2>
</div>
<div class="retrieval-demo">
<div class="demo-header">
<div class="demo-dot"></div>
<div class="demo-dot"></div>
<div class="demo-dot"></div>
<div class="demo-title">maddie-terminal // localhost:8893</div>
</div>
<div class="demo-content">
<div class="demo-query">
<input type="text" class="demo-input" id="queryInput" placeholder="Ask MADDIE anything..." value="How do I effectively market a SaaS product?">
<button class="demo-btn" id="queryBtn">RECALL</button>
</div>
<div class="demo-response" id="demoResponse">
<div class="response-header">
<span class="response-label">RETRIEVED KNOWLEDGE</span>
<span class="response-confidence">Confidence: <span id="confidenceValue">0.87</span></span>
</div>
<div class="response-text" id="responseText">
Based on 1.2M resonating patterns: Focus on value-based positioning rather than feature lists.
Create content that solves specific pain points. Use social proof and case studies.
Implement a freemium or trial model to reduce friction. Build community around your product.
Leverage partnerships with complementary services. Optimize for long-tail SEO keywords specific to your niche.
</div>
<div class="response-sources" id="responseSources">
<span class="source-tag">hubspot.com</span>
<span class="source-tag">neilpatel.com</span>
<span class="source-tag">productled.com</span>
<span class="source-tag">openviewpartners.com</span>
<span class="source-tag">firstround.com</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Hardware Specs -->
<section class="section hardware-section">
<div class="section-inner">
<div class="section-header">
<span class="section-number">05</span>
<h2 class="section-title">Hardware Platform</h2>
</div>
<div class="hardware-grid">
<div class="hardware-visual">
<div class="mac-mini"></div>
<div class="mac-mini-label">MAC MINI M4</div>
</div>
<div class="hardware-specs">
<div class="spec-card">
<div class="spec-icon">CPU</div>
<div class="spec-content">
<div class="spec-label">PROCESSOR</div>
<div class="spec-value">Apple M4 Pro</div>
<div class="spec-detail">14-core CPU (10P + 4E) @ 4.5GHz</div>
</div>
</div>
<div class="spec-card">
<div class="spec-icon">GPU</div>
<div class="spec-content">
<div class="spec-label">GRAPHICS</div>
<div class="spec-value">20-core GPU</div>
<div class="spec-detail">Hardware ray tracing, Neural Engine</div>
</div>
</div>
<div class="spec-card">
<div class="spec-icon">RAM</div>
<div class="spec-content">
<div class="spec-label">UNIFIED MEMORY</div>
<div class="spec-value">64GB</div>
<div class="spec-detail">273GB/s bandwidth, mmap optimized</div>
</div>
</div>
<div class="spec-card">
<div class="spec-icon">SSD</div>
<div class="spec-content">
<div class="spec-label">STORAGE</div>
<div class="spec-value">2TB NVMe</div>
<div class="spec-detail">7.4GB/s read, 6.6GB/s write</div>
</div>
</div>
<div class="spec-card">
<div class="spec-icon">Net</div>
<div class="spec-content">
<div class="spec-label">NETWORKING</div>
<div class="spec-value">10Gb Ethernet</div>
<div class="spec-detail">Dual Thunderbolt 5 ports</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Metrics Dashboard -->
<section class="section metrics-section">
<div class="section-inner">
<div class="section-header">
<span class="section-number">06</span>
<h2 class="section-title">Real-Time Metrics</h2>
</div>
<div class="metrics-dashboard">
<div class="metric-card active">
<div class="metric-header">
<span class="metric-title">PATTERNS STORED</span>
<span class="metric-change">+12.4K/hr</span>
</div>
<div class="metric-number" id="patternsStored">1,247,892</div>
<div class="metric-chart" id="patternsChart"></div>
</div>
<div class="metric-card active">
<div class="metric-header">
<span class="metric-title">QUERIES/MIN</span>
<span class="metric-change">+8.2%</span>
</div>
<div class="metric-number" id="queriesMin">847</div>
<div class="metric-chart" id="queriesChart"></div>
</div>
<div class="metric-card active">
<div class="metric-header">
<span class="metric-title">AVG RECALL</span>
<span class="metric-change">-12ms</span>
</div>
<div class="metric-number" id="avgRecall">23ms</div>
<div class="metric-chart" id="recallChart"></div>
</div>
<div class="metric-card active">
<div class="metric-header">
<span class="metric-title">PHI COHERENCE</span>
<span class="metric-change">+0.02</span>
</div>
<div class="metric-number" id="phiCoherence">0.847</div>
<div class="metric-chart" id="phiChart"></div>
</div>
</div>
<div class="activity-panel">
<div class="activity-header">
<div class="activity-title">SYSTEM ACTIVITY</div>
</div>
<div class="activity-timeline" id="activityTimeline"></div>
</div>
</div>
</section>
<!-- Data Flow Visualization -->
<section class="flow-section">
<div class="flow-container">
<div class="section-header">
<span class="section-number">07</span>
<h2 class="section-title">Information Flow Into Neural Network</h2>
</div>
<div class="flow-visual">
<canvas id="flowCanvas"></canvas>
</div>
</div>
</section>
<!-- Chapter Navigation -->
<nav class="chapter-nav">
<a href="ch07-compression.html">Previous: The Compression</a>
<a href="ch09-sefer.html">Next: The Seven Sefer</a>
</nav>
<!-- Footer -->
<footer class="footer">
<p class="footer-text">MADDIE // KNOWLEDGE FACTORY NODE // MEGAMIND FEDERATION</p>
</footer>
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
// Initialize GSAP
gsap.registerPlugin(ScrollTrigger);
// Custom Cursor
const cursor = document.querySelector('.cursor');
const cursorDot = document.querySelector('.cursor-dot');
document.addEventListener('mousemove', (e) => {
gsap.to(cursor, { x: e.clientX - 10, y: e.clientY - 10, duration: 0.1 });
gsap.to(cursorDot, { x: e.clientX - 2, y: e.clientY - 2, duration: 0 });
});
document.querySelectorAll('a, button, .stat-card, .spec-card, .arch-layer').forEach(el => {
el.addEventListener('mouseenter', () => cursor.classList.add('hover'));
el.addEventListener('mouseleave', () => cursor.classList.remove('hover'));
});
// Neural Network Canvas
const neuralCanvas = document.getElementById('neuralNetwork');
const neuralCtx = neuralCanvas.getContext('2d');
function resizeNeuralCanvas() {
const rect = neuralCanvas.parentElement.getBoundingClientRect();
neuralCanvas.width = rect.width * 2;
neuralCanvas.height = rect.height * 2;
neuralCtx.scale(2, 2);
}
resizeNeuralCanvas();
window.addEventListener('resize', resizeNeuralCanvas);
class Neuron {
constructor(x, y, layer) {
this.x = x;
this.y = y;
this.layer = layer;
this.activation = Math.random();
this.targetActivation = Math.random();
this.radius = 4 + Math.random() * 3;
this.connections = [];
}
update() {
this.activation += (this.targetActivation - this.activation) * 0.02;
if (Math.random() < 0.01) {
this.targetActivation = Math.random();
}
}
draw(ctx) {
const alpha = 0.3 + this.activation * 0.7;
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fillStyle = `rgba(34, 197, 94, ${alpha})`;
ctx.fill();
if (this.activation > 0.7) {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius + 5, 0, Math.PI * 2);
ctx.fillStyle = `rgba(34, 197, 94, ${(this.activation - 0.7) * 0.5})`;
ctx.fill();
}
}
}
const neurons = [];
const layers = [8, 12, 16, 12, 8];
const canvasWidth = neuralCanvas.width / 2;
const canvasHeight = neuralCanvas.height / 2;
layers.forEach((count, layerIdx) => {
const x = 80 + (canvasWidth - 160) * (layerIdx / (layers.length - 1));
for (let i = 0; i < count; i++) {
const y = 40 + (canvasHeight - 80) * ((i + 0.5) / count);
neurons.push(new Neuron(x, y, layerIdx));
}
});
// Create connections
neurons.forEach(n1 => {
neurons.forEach(n2 => {
if (n2.layer === n1.layer + 1 && Math.random() < 0.4) {
n1.connections.push(n2);
}
});
});
let dataPackets = [];
function animateNeural() {
neuralCtx.clearRect(0, 0, canvasWidth, canvasHeight);
// Draw connections
neurons.forEach(n => {
n.connections.forEach(target => {
const gradient = neuralCtx.createLinearGradient(n.x, n.y, target.x, target.y);
gradient.addColorStop(0, `rgba(34, 197, 94, ${n.activation * 0.3})`);
gradient.addColorStop(1, `rgba(34, 197, 94, ${target.activation * 0.3})`);
neuralCtx.beginPath();
neuralCtx.moveTo(n.x, n.y);
neuralCtx.lineTo(target.x, target.y);
neuralCtx.strokeStyle = gradient;
neuralCtx.lineWidth = 1;
neuralCtx.stroke();
});
});
// Update and draw neurons
neurons.forEach(n => {
n.update();
n.draw(neuralCtx);
});
// Data packets
if (Math.random() < 0.03) {
const startNeuron = neurons.find(n => n.layer === 0);
if (startNeuron) {
dataPackets.push({
x: startNeuron.x,
y: startNeuron.y,
targetX: canvasWidth - 50,
progress: 0
});
}
}
dataPackets = dataPackets.filter(p => p.progress < 1);
dataPackets.forEach(p => {
p.progress += 0.01;
p.x += (p.targetX - p.x) * 0.02;
p.y += (Math.sin(p.progress * 10) * 0.5);
neuralCtx.beginPath();
neuralCtx.arc(p.x, p.y, 3, 0, Math.PI * 2);
neuralCtx.fillStyle = `rgba(74, 222, 128, ${1 - p.progress})`;
neuralCtx.fill();
});
requestAnimationFrame(animateNeural);
}
animateNeural();
// Crawler Grid
const crawlerGrid = document.getElementById('crawlerGrid');
for (let i = 0; i < 2000; i++) {
const dot = document.createElement('div');
dot.className = 'crawler-dot';
crawlerGrid.appendChild(dot);
}
function updateCrawlers() {
const dots = document.querySelectorAll('.crawler-dot');
dots.forEach(dot => {
dot.classList.remove('active', 'fetching');
const rand = Math.random();
if (rand < 0.85) {
dot.classList.add('active');
if (rand < 0.15) {
dot.classList.add('fetching');
}
}
});
}
updateCrawlers();
setInterval(updateCrawlers, 2000);
// Feed Items
const urls = [
'hubspot.com/blog/marketing-tips',
'medium.com/@startup/growth-hacking',
'techcrunch.com/ai-news',
'dev.to/web-development',
'stackoverflow.com/questions',
'github.com/trending/python',
'news.ycombinator.com/newest',
'reddit.com/r/programming',
'producthunt.com/posts',
'stripe.com/docs/api'
];
const feedItems = document.getElementById('feedItems');
function addFeedItem() {
const url = urls[Math.floor(Math.random() * urls.length)];
const size = (Math.random() * 50 + 10).toFixed(1);
const item = document.createElement('div');
item.className = 'feed-item';
item.innerHTML = `
<div class="feed-status"></div>
<div class="feed-url">${url}</div>
<div class="feed-size">${size}KB</div>
`;
feedItems.insertBefore(item, feedItems.firstChild);
if (feedItems.children.length > 8) {
feedItems.removeChild(feedItems.lastChild);
}
}
for (let i = 0; i < 8; i++) addFeedItem();
setInterval(addFeedItem, 1500);
// Synapse Canvas
const synapseCanvas = document.getElementById('synapseCanvas');
const synapseCtx = synapseCanvas.getContext('2d');
function resizeSynapseCanvas() {
const rect = synapseCanvas.parentElement.getBoundingClientRect();
synapseCanvas.width = rect.width * 2;
synapseCanvas.height = 800;
synapseCtx.scale(2, 2);
}
resizeSynapseCanvas();
class Synapse {
constructor() {
this.reset();
}
reset() {
this.x1 = Math.random() * (synapseCanvas.width / 4);
this.y1 = Math.random() * 400;
this.x2 = (synapseCanvas.width / 4) * 0.5 + Math.random() * (synapseCanvas.width / 4) * 0.5;
this.y2 = Math.random() * 400;
this.progress = 0;
this.speed = 0.005 + Math.random() * 0.01;
this.width = 1 + Math.random() * 2;
}
update() {
this.progress += this.speed;
if (this.progress > 1) this.reset();
}
draw(ctx) {
const gradient = ctx.createLinearGradient(this.x1, this.y1, this.x2, this.y2);
gradient.addColorStop(0, 'rgba(34, 197, 94, 0)');
gradient.addColorStop(this.progress, `rgba(34, 197, 94, ${0.8 * (1 - this.progress)})`);
gradient.addColorStop(Math.min(1, this.progress + 0.1), 'rgba(34, 197, 94, 0)');
ctx.beginPath();
ctx.moveTo(this.x1, this.y1);
ctx.quadraticCurveTo(
(this.x1 + this.x2) / 2,
(this.y1 + this.y2) / 2 + 30,
this.x2,
this.y2
);
ctx.strokeStyle = gradient;
ctx.lineWidth = this.width;
ctx.stroke();
}
}
const synapses = Array.from({ length: 50 }, () => new Synapse());
function animateSynapses() {
synapseCtx.clearRect(0, 0, synapseCanvas.width / 2, 400);
synapses.forEach(s => {
s.update();
s.draw(synapseCtx);
});
requestAnimationFrame(animateSynapses);
}
animateSynapses();
// Flow Canvas
const flowCanvas = document.getElementById('flowCanvas');
const flowCtx = flowCanvas.getContext('2d');
function resizeFlowCanvas() {
const rect = flowCanvas.parentElement.getBoundingClientRect();
flowCanvas.width = rect.width * 2;
flowCanvas.height = rect.height * 2;
flowCtx.scale(2, 2);
}
resizeFlowCanvas();
class DataStream {
constructor() {
this.reset();
}
reset() {
this.x = Math.random() * 100;
this.y = Math.random() * (flowCanvas.height / 4);
this.speed = 1 + Math.random() * 3;
this.size = 2 + Math.random() * 4;
this.trail = [];
}
update() {
this.trail.push({ x: this.x, y: this.y });
if (this.trail.length > 20) this.trail.shift();
const targetX = (flowCanvas.width / 4) * 0.7;
const targetY = (flowCanvas.height / 4) / 2;
const angle = Math.atan2(targetY - this.y, targetX - this.x);
this.x += Math.cos(angle) * this.speed;
this.y += Math.sin(angle) * this.speed + (Math.random() - 0.5) * 2;
const dist = Math.hypot(targetX - this.x, targetY - this.y);
if (dist < 50) this.reset();
}
draw(ctx) {
// Draw trail
this.trail.forEach((point, i) => {
const alpha = i / this.trail.length * 0.5;
ctx.beginPath();
ctx.arc(point.x, point.y, this.size * (i / this.trail.length), 0, Math.PI * 2);
ctx.fillStyle = `rgba(34, 197, 94, ${alpha})`;
ctx.fill();
});
// Draw head
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(74, 222, 128, 0.9)';
ctx.fill();
}
}
const dataStreams = Array.from({ length: 80 }, () => new DataStream());
function animateFlow() {
const width = flowCanvas.width / 2;
const height = flowCanvas.height / 2;
flowCtx.fillStyle = 'rgba(17, 22, 17, 0.1)';
flowCtx.fillRect(0, 0, width, height);
// Draw central network
const centerX = width * 0.7;
const centerY = height / 2;
// Glow
const gradient = flowCtx.createRadialGradient(centerX, centerY, 0, centerX, centerY, 150);
gradient.addColorStop(0, 'rgba(34, 197, 94, 0.2)');
gradient.addColorStop(1, 'rgba(34, 197, 94, 0)');
flowCtx.fillStyle = gradient;
flowCtx.fillRect(centerX - 150, centerY - 150, 300, 300);
// Network nodes
for (let i = 0; i < 6; i++) {
const angle = (i / 6) * Math.PI * 2 + Date.now() * 0.0005;
const radius = 80;
const x = centerX + Math.cos(angle) * radius;
const y = centerY + Math.sin(angle) * radius;
flowCtx.beginPath();
flowCtx.arc(x, y, 8, 0, Math.PI * 2);
flowCtx.fillStyle = 'rgba(34, 197, 94, 0.6)';
flowCtx.fill();
flowCtx.beginPath();
flowCtx.moveTo(centerX, centerY);
flowCtx.lineTo(x, y);
flowCtx.strokeStyle = 'rgba(34, 197, 94, 0.3)';
flowCtx.lineWidth = 2;
flowCtx.stroke();
}
// Central node
flowCtx.beginPath();
flowCtx.arc(centerX, centerY, 20, 0, Math.PI * 2);
flowCtx.fillStyle = 'rgba(34, 197, 94, 0.8)';
flowCtx.fill();
// Update and draw streams
dataStreams.forEach(s => {
s.update();
s.draw(flowCtx);
});
requestAnimationFrame(animateFlow);
}
animateFlow();
// Metrics Charts
function createChart(containerId, values) {
const container = document.getElementById(containerId);
if (!container) return;
values.forEach(v => {
const bar = document.createElement('div');
bar.className = 'chart-bar';
bar.style.height = `${v}%`;
container.appendChild(bar);
});
}
createChart('patternsChart', [30, 45, 55, 60, 70, 65, 75, 80, 85, 78, 82, 90]);
createChart('queriesChart', [40, 35, 50, 60, 55, 70, 65, 75, 80, 72, 85, 88]);
createChart('recallChart', [80, 75, 70, 65, 60, 55, 50, 45, 40, 35, 30, 25]);
createChart('phiChart', [50, 55, 60, 58, 65, 70, 68, 75, 78, 82, 80, 85]);
// Activity Timeline
const activities = [
{ type: 'CRAWL', desc: 'Indexed 50K new pages from tech blogs' },
{ type: 'LEARN', desc: 'Integrated 12.4K patterns into W_know' },
{ type: 'QUERY', desc: 'Served 847 recall requests (avg 23ms)' },
{ type: 'SYNC', desc: 'Federation sync with SEFER node' },
{ type: 'HEALTH', desc: 'All systems nominal, Phi: 0.847' }
];
const activityTimeline = document.getElementById('activityTimeline');
activities.forEach((activity, i) => {
const time = new Date(Date.now() - i * 300000).toLocaleTimeString();
const item = document.createElement('div');
item.className = 'activity-item';
item.style.animationDelay = `${i * 0.1}s`;
item.innerHTML = `
<span class="activity-time">${time}</span>
<span class="activity-type">${activity.type}</span>
<span class="activity-desc">${activity.desc}</span>
`;
activityTimeline.appendChild(item);
});
// Scroll Animations
gsap.utils.toArray('.section-header').forEach(header => {
ScrollTrigger.create({
trigger: header,
start: 'top 80%',
onEnter: () => header.classList.add('visible')
});
});
gsap.utils.toArray('.arch-layer').forEach((layer, i) => {
ScrollTrigger.create({
trigger: layer,
start: 'top 85%',
onEnter: () => {
setTimeout(() => layer.classList.add('visible'), i * 150);
}
});
});
gsap.utils.toArray('.stat-card, .spec-card, .metric-card').forEach((card, i) => {
gsap.from(card, {
opacity: 0,
y: 30,
duration: 0.6,
delay: i * 0.1,
scrollTrigger: {
trigger: card,
start: 'top 85%'
}
});
});
// Demo Query Interaction
const queryBtn = document.getElementById('queryBtn');
const queryInput = document.getElementById('queryInput');
const responseText = document.getElementById('responseText');
const confidenceValue = document.getElementById('confidenceValue');
const responses = {
'marketing': 'Based on 1.2M resonating patterns: Focus on value-based positioning rather than feature lists. Create content that solves specific pain points. Use social proof and case studies. Implement a freemium or trial model to reduce friction.',
'ai': 'Retrieved from 2.4M AI-related patterns: Modern AI systems combine neural networks with retrieval-augmented generation. Key trends include smaller, more efficient models, multimodal capabilities, and agent-based architectures.',
'startup': 'Synthesized from 890K startup patterns: Begin with a clear problem-solution fit before scaling. Focus on a niche market first. Measure engagement metrics over vanity metrics. Build in public to generate organic interest.',
'default': 'Query encoded to spike pattern. Flowing through W_know matrix. Hebbian resonance detected across 847K related patterns. Retrieving top-k chunks with source attribution...'
};
queryBtn.addEventListener('click', () => {
responseText.textContent = 'Processing query through neural matrix...';
confidenceValue.textContent = '...';
setTimeout(() => {
const query = queryInput.value.toLowerCase();
let response = responses.default;
for (const [key, value] of Object.entries(responses)) {
if (query.includes(key)) {
response = value;
break;
}
}
responseText.textContent = response;
confidenceValue.textContent = (0.75 + Math.random() * 0.2).toFixed(2);
}, 1500);
});
// Update metrics periodically
function updateMetrics() {
const patterns = document.getElementById('patternsStored');
const queries = document.getElementById('queriesMin');
const recall = document.getElementById('avgRecall');
const phi = document.getElementById('phiCoherence');
if (patterns) {
const current = parseInt(patterns.textContent.replace(/,/g, ''));
patterns.textContent = (current + Math.floor(Math.random() * 100)).toLocaleString();
}
if (queries) {
queries.textContent = (800 + Math.floor(Math.random() * 100)).toString();
}
if (recall) {
recall.textContent = (20 + Math.floor(Math.random() * 10)) + 'ms';
}
if (phi) {
phi.textContent = (0.82 + Math.random() * 0.05).toFixed(3);
}
}
setInterval(updateMetrics, 5000);
// Smooth scroll for nav links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({ behavior: 'smooth' });
}
});
});
</script>
</body>
</html>