Integrate infinite loop variants into main dashboard
Added comprehensive dashboard integration for 30 infinite variant demos: Dashboard Updates (index.html): - Added "Infinite Variants" filter button with 🔄 emoji - Added HTML category section for infinite variants display - Added JavaScript grid initialization for variants - Updated emoji mapping to include infiniteVariants category - Fixed stats: Categories 7→8, Total Demos now includes variants (142) Auto-Generation System (generate_index.py): - Added infiniteVariants to demos object structure - Implemented scanning of infinite_variants/*/test_output/ directories - Auto-detects variant numbers and maps to friendly names: * Variant 1: Pattern Synthesis * Variant 2: Utility Commands * Variant 3: Pluggable Templates * Variant 4: Quality Evaluation * Variant 5: Config-Driven * Variant 6: State Management * Variant 7: Meta Self-Improvement - Supports both HTML and JS file detection - Generates descriptions with variant context Screenshot System (generate_screenshots.js): - Added infiniteVariants category with 1500ms delay - Pattern: infinite_variants/infinite_variant_*/test_output/*.html - Successfully captured all 30 variant demo screenshots Package Management (package.json): - Added npm run screenshots:variants command - Configured Playwright dependency for screenshot generation Result: All 30 variant demos now seamlessly integrated into dashboard with auto-discovery, screenshots, and filter functionality. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Shawn Anderson
parent
1c6c4a0140
commit
09e69faeb1
|
|
@ -89,7 +89,8 @@ def generate_demo_data():
|
||||||
'mapbox': [],
|
'mapbox': [],
|
||||||
'claudeDevTools': [],
|
'claudeDevTools': [],
|
||||||
'uiSingle': [],
|
'uiSingle': [],
|
||||||
'uiModular': []
|
'uiModular': [],
|
||||||
|
'infiniteVariants': []
|
||||||
}
|
}
|
||||||
|
|
||||||
# Scan Three.js demos
|
# Scan Three.js demos
|
||||||
|
|
@ -220,6 +221,47 @@ def generate_demo_data():
|
||||||
'techniques': ['Separation of Concerns', 'Modular Architecture']
|
'techniques': ['Separation of Concerns', 'Modular Architecture']
|
||||||
})
|
})
|
||||||
|
|
||||||
|
# Scan Infinite Variants test outputs
|
||||||
|
if os.path.exists('infinite_variants'):
|
||||||
|
variant_dirs = sorted(Path('infinite_variants').glob('infinite_variant_*/test_output'))
|
||||||
|
for variant_dir in variant_dirs:
|
||||||
|
# Extract variant number
|
||||||
|
variant_match = re.search(r'infinite_variant_(\d+)', str(variant_dir))
|
||||||
|
variant_num = variant_match.group(1) if variant_match else '?'
|
||||||
|
|
||||||
|
# Variant names for better titles
|
||||||
|
variant_names = {
|
||||||
|
'1': 'Pattern Synthesis',
|
||||||
|
'2': 'Utility Commands',
|
||||||
|
'3': 'Pluggable Templates',
|
||||||
|
'4': 'Quality Evaluation',
|
||||||
|
'5': 'Config-Driven',
|
||||||
|
'6': 'State Management',
|
||||||
|
'7': 'Meta Self-Improvement'
|
||||||
|
}
|
||||||
|
variant_name = variant_names.get(variant_num, f'Variant {variant_num}')
|
||||||
|
|
||||||
|
# Scan HTML and JS files in this variant's test_output
|
||||||
|
variant_files = sorted(list(variant_dir.glob('*.html')) + list(variant_dir.glob('*.js')))
|
||||||
|
for filepath in variant_files:
|
||||||
|
# Extract title based on file type
|
||||||
|
if filepath.suffix == '.html':
|
||||||
|
title = extract_title_from_html(str(filepath)) or filepath.name
|
||||||
|
description = extract_description_from_html(str(filepath))
|
||||||
|
else:
|
||||||
|
# For .js files, use filename as title
|
||||||
|
title = filepath.stem.replace('_', ' ').title()
|
||||||
|
description = f"Meta-aware JavaScript code pattern"
|
||||||
|
|
||||||
|
demos['infiniteVariants'].append({
|
||||||
|
'number': len(demos['infiniteVariants']) + 1,
|
||||||
|
'title': title,
|
||||||
|
'description': f"[Variant {variant_num}: {variant_name}] {description}",
|
||||||
|
'path': str(filepath),
|
||||||
|
'type': variant_name,
|
||||||
|
'techniques': ['Infinite Loop Variant', variant_name]
|
||||||
|
})
|
||||||
|
|
||||||
return demos
|
return demos
|
||||||
|
|
||||||
def generate_index_html(demos):
|
def generate_index_html(demos):
|
||||||
|
|
@ -317,6 +359,7 @@ def main():
|
||||||
print(f" • Claude DevTools: {len(demos['claudeDevTools'])}")
|
print(f" • Claude DevTools: {len(demos['claudeDevTools'])}")
|
||||||
print(f" • UI Single File: {len(demos['uiSingle'])}")
|
print(f" • UI Single File: {len(demos['uiSingle'])}")
|
||||||
print(f" • UI Modular: {len(demos['uiModular'])}")
|
print(f" • UI Modular: {len(demos['uiModular'])}")
|
||||||
|
print(f" • Infinite Variants: {len(demos['infiniteVariants'])}")
|
||||||
print(f" • Total: {sum(len(demos[cat]) for cat in demos)}")
|
print(f" • Total: {sum(len(demos[cat]) for cat in demos)}")
|
||||||
|
|
||||||
print("\n✨ Generating index.html...")
|
print("\n✨ Generating index.html...")
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,214 @@
|
||||||
|
#!/usr/bin/env node
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Screenshot Generator for Infinite Agents Dashboard
|
||||||
|
*
|
||||||
|
* Automatically captures screenshots of all demos for preview thumbnails.
|
||||||
|
* Uses Playwright to render each demo and save a screenshot.
|
||||||
|
*
|
||||||
|
* Installation:
|
||||||
|
* npm install -D playwright
|
||||||
|
* npx playwright install chromium
|
||||||
|
*
|
||||||
|
* Usage:
|
||||||
|
* node generate_screenshots.js
|
||||||
|
* node generate_screenshots.js --category threejs
|
||||||
|
* node generate_screenshots.js --single threejs_viz/threejs_viz_1.html
|
||||||
|
*/
|
||||||
|
|
||||||
|
const { chromium } = require('playwright');
|
||||||
|
const fs = require('fs');
|
||||||
|
const path = require('path');
|
||||||
|
|
||||||
|
// Demo categories and their file patterns
|
||||||
|
const DEMO_CATEGORIES = {
|
||||||
|
threejs: {
|
||||||
|
pattern: 'threejs_viz/threejs_viz_*.html',
|
||||||
|
delay: 3000, // Extra time for WebGL to render
|
||||||
|
},
|
||||||
|
sdg: {
|
||||||
|
pattern: 'sdg_viz/sdg_viz_*.html',
|
||||||
|
delay: 2000,
|
||||||
|
},
|
||||||
|
d3: {
|
||||||
|
pattern: 'd3_test/d3_viz_*.html',
|
||||||
|
delay: 1500,
|
||||||
|
},
|
||||||
|
mapbox: {
|
||||||
|
pattern: 'mapbox_test/mapbox_globe_*/index.html',
|
||||||
|
delay: 3000, // Mapbox needs time to load tiles
|
||||||
|
},
|
||||||
|
claudeDevTools: {
|
||||||
|
pattern: 'claude_code_devtools/claude_devtool_*.html',
|
||||||
|
delay: 1000,
|
||||||
|
},
|
||||||
|
uiSingle: {
|
||||||
|
pattern: 'src/ui_hybrid_*.html',
|
||||||
|
delay: 800,
|
||||||
|
},
|
||||||
|
uiInfinite: {
|
||||||
|
pattern: 'src_infinite/ui_hybrid_*.html',
|
||||||
|
delay: 800,
|
||||||
|
},
|
||||||
|
uiModular: {
|
||||||
|
pattern: 'src_group/ui_hybrid_*/index.html',
|
||||||
|
delay: 800,
|
||||||
|
},
|
||||||
|
infiniteVariants: {
|
||||||
|
pattern: 'infinite_variants/infinite_variant_*/test_output/*.html',
|
||||||
|
delay: 1500, // Mixed content, some may have animations
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
// Parse command line arguments
|
||||||
|
const args = process.argv.slice(2);
|
||||||
|
const categoryFilter = args.find(arg => arg.startsWith('--category='))?.split('=')[1];
|
||||||
|
const singleFile = args.find(arg => arg.startsWith('--single='))?.split('=')[1];
|
||||||
|
const PORT = args.find(arg => arg.startsWith('--port='))?.split('=')[1] || 8889;
|
||||||
|
|
||||||
|
// Create screenshots directory
|
||||||
|
const SCREENSHOTS_DIR = path.join(__dirname, 'screenshots');
|
||||||
|
if (!fs.existsSync(SCREENSHOTS_DIR)) {
|
||||||
|
fs.mkdirSync(SCREENSHOTS_DIR, { recursive: true });
|
||||||
|
console.log(`✅ Created screenshots directory: ${SCREENSHOTS_DIR}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Scan directory for demo files
|
||||||
|
function scanDirectory(pattern) {
|
||||||
|
const glob = require('glob');
|
||||||
|
return glob.sync(pattern);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get all demo files
|
||||||
|
function getAllDemos() {
|
||||||
|
const demos = [];
|
||||||
|
|
||||||
|
for (const [category, config] of Object.entries(DEMO_CATEGORIES)) {
|
||||||
|
if (categoryFilter && category !== categoryFilter) continue;
|
||||||
|
|
||||||
|
const files = scanDirectory(config.pattern);
|
||||||
|
files.forEach(file => {
|
||||||
|
demos.push({
|
||||||
|
path: file,
|
||||||
|
category,
|
||||||
|
delay: config.delay,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return demos;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Capture screenshot for a single demo
|
||||||
|
async function captureScreenshot(browser, demo, index, total) {
|
||||||
|
const page = await browser.newPage();
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Set viewport size (desktop resolution)
|
||||||
|
await page.setViewportSize({ width: 1920, height: 1080 });
|
||||||
|
|
||||||
|
const url = `http://localhost:${PORT}/${demo.path}`;
|
||||||
|
console.log(`\n📸 [${index + 1}/${total}] ${demo.path}`);
|
||||||
|
|
||||||
|
// Navigate to demo
|
||||||
|
await page.goto(url, {
|
||||||
|
waitUntil: 'networkidle',
|
||||||
|
timeout: 30000,
|
||||||
|
});
|
||||||
|
|
||||||
|
// Wait for demo to render
|
||||||
|
await page.waitForTimeout(demo.delay);
|
||||||
|
|
||||||
|
// Generate screenshot filename
|
||||||
|
const screenshotFilename = demo.path.replace(/\//g, '_').replace('.html', '.png');
|
||||||
|
const screenshotPath = path.join(SCREENSHOTS_DIR, screenshotFilename);
|
||||||
|
|
||||||
|
// Capture screenshot
|
||||||
|
await page.screenshot({
|
||||||
|
path: screenshotPath,
|
||||||
|
fullPage: false, // Just viewport, not entire scrollable page
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log(` ✅ Saved: ${screenshotFilename}`);
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error(` ❌ Failed: ${error.message}`);
|
||||||
|
} finally {
|
||||||
|
await page.close();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Main execution
|
||||||
|
async function main() {
|
||||||
|
console.log('🚀 Infinite Agents Screenshot Generator\n');
|
||||||
|
|
||||||
|
// Get demo files
|
||||||
|
let demos;
|
||||||
|
if (singleFile) {
|
||||||
|
demos = [{
|
||||||
|
path: singleFile,
|
||||||
|
category: 'custom',
|
||||||
|
delay: 2000,
|
||||||
|
}];
|
||||||
|
} else {
|
||||||
|
demos = getAllDemos();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (demos.length === 0) {
|
||||||
|
console.error('❌ No demo files found!');
|
||||||
|
console.log('\nMake sure:');
|
||||||
|
console.log(' 1. You are in the project root directory');
|
||||||
|
console.log(' 2. Demo files exist in their respective directories');
|
||||||
|
console.log(' 3. Category filter is correct (if using --category)');
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(`📊 Found ${demos.length} demos to screenshot\n`);
|
||||||
|
|
||||||
|
// Check if server is running
|
||||||
|
console.log(`🔍 Checking if server is running on http://localhost:${PORT}...`);
|
||||||
|
try {
|
||||||
|
const http = require('http');
|
||||||
|
await new Promise((resolve, reject) => {
|
||||||
|
const req = http.get(`http://localhost:${PORT}`, (res) => {
|
||||||
|
resolve();
|
||||||
|
});
|
||||||
|
req.on('error', reject);
|
||||||
|
req.setTimeout(3000, () => reject(new Error('Timeout')));
|
||||||
|
});
|
||||||
|
console.log(' ✅ Server is running\n');
|
||||||
|
} catch (error) {
|
||||||
|
console.error(' ❌ Server is not running!');
|
||||||
|
console.log(`\n🔧 Start the server first:`);
|
||||||
|
console.log(` python3 -m http.server ${PORT}\n`);
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Launch browser
|
||||||
|
console.log('🌐 Launching browser...');
|
||||||
|
const browser = await chromium.launch({
|
||||||
|
headless: true,
|
||||||
|
});
|
||||||
|
console.log(' ✅ Browser ready\n');
|
||||||
|
|
||||||
|
// Capture screenshots
|
||||||
|
console.log('📸 Capturing screenshots...');
|
||||||
|
console.log('━'.repeat(50));
|
||||||
|
|
||||||
|
for (let i = 0; i < demos.length; i++) {
|
||||||
|
await captureScreenshot(browser, demos[i], i, demos.length);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Cleanup
|
||||||
|
await browser.close();
|
||||||
|
|
||||||
|
console.log('\n' + '━'.repeat(50));
|
||||||
|
console.log(`\n✨ Done! Captured ${demos.length} screenshots`);
|
||||||
|
console.log(`📁 Screenshots saved to: ${SCREENSHOTS_DIR}\n`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Run
|
||||||
|
main().catch(error => {
|
||||||
|
console.error('\n❌ Fatal error:', error);
|
||||||
|
process.exit(1);
|
||||||
|
});
|
||||||
522
index.html
522
index.html
|
|
@ -2,6 +2,9 @@
|
||||||
<!-- Auto-generated: 2025-10-09 18:45:46 by generate_index.py -->
|
<!-- Auto-generated: 2025-10-09 18:45:46 by generate_index.py -->
|
||||||
<!-- Auto-generated: 2025-10-09 18:56:45 by generate_index.py -->
|
<!-- Auto-generated: 2025-10-09 18:56:45 by generate_index.py -->
|
||||||
<!-- Auto-generated: 2025-10-09 19:49:20 by generate_index.py -->
|
<!-- Auto-generated: 2025-10-09 19:49:20 by generate_index.py -->
|
||||||
|
<!-- Auto-generated: 2025-10-10 16:28:22 by generate_index.py -->
|
||||||
|
<!-- Auto-generated: 2025-10-10 17:56:39 by generate_index.py -->
|
||||||
|
<!-- Auto-generated: 2025-10-10 18:00:44 by generate_index.py -->
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
|
|
@ -242,6 +245,81 @@
|
||||||
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
|
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Screenshot Preview in Card */
|
||||||
|
.demo-screenshot {
|
||||||
|
width: 100%;
|
||||||
|
height: 200px;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-screenshot img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-card:hover .demo-screenshot img {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-screenshot-placeholder {
|
||||||
|
color: white;
|
||||||
|
font-size: 4rem;
|
||||||
|
opacity: 0.5;
|
||||||
|
text-align: center;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-screenshot-placeholder-text {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
opacity: 0.7;
|
||||||
|
margin-top: 10px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-screenshot-overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0, 0, 0, 0);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: background 0.3s ease;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-card:hover .demo-screenshot-overlay {
|
||||||
|
background: rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-screenshot-overlay span {
|
||||||
|
background: white;
|
||||||
|
color: var(--primary);
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 25px;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(10px);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-card:hover .demo-screenshot-overlay span {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
.demo-card::before {
|
.demo-card::before {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -358,6 +436,7 @@
|
||||||
.hidden {
|
.hidden {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -375,15 +454,15 @@
|
||||||
<!-- Statistics -->
|
<!-- Statistics -->
|
||||||
<div class="stats-bar">
|
<div class="stats-bar">
|
||||||
<div class="stat-card">
|
<div class="stat-card">
|
||||||
<div class="stat-number" id="totalDemos">107</div>
|
<div class="stat-number" id="totalDemos">142</div>
|
||||||
<div class="stat-label">Total Demos</div>
|
<div class="stat-label">Total Demos</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-card">
|
<div class="stat-card">
|
||||||
<div class="stat-number">7</div>
|
<div class="stat-number">8</div>
|
||||||
<div class="stat-label">Categories</div>
|
<div class="stat-label">Categories</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-card">
|
<div class="stat-card">
|
||||||
<div class="stat-number" id="threejsCount">5</div>
|
<div class="stat-number" id="threejsCount">10</div>
|
||||||
<div class="stat-label">Three.js 3D</div>
|
<div class="stat-label">Three.js 3D</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-card">
|
<div class="stat-card">
|
||||||
|
|
@ -406,6 +485,7 @@
|
||||||
<button class="filter-btn" data-filter="claudeDevTools">Claude DevTools</button>
|
<button class="filter-btn" data-filter="claudeDevTools">Claude DevTools</button>
|
||||||
<button class="filter-btn" data-filter="ui-single">UI Hybrid (Single File)</button>
|
<button class="filter-btn" data-filter="ui-single">UI Hybrid (Single File)</button>
|
||||||
<button class="filter-btn" data-filter="ui-modular">UI Hybrid (Modular)</button>
|
<button class="filter-btn" data-filter="ui-modular">UI Hybrid (Modular)</button>
|
||||||
|
<button class="filter-btn" data-filter="infiniteVariants">Infinite Variants</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -417,7 +497,7 @@
|
||||||
<h2>Three.js 3D Visualizations</h2>
|
<h2>Three.js 3D Visualizations</h2>
|
||||||
<p>Progressive WebGL/WebGPU visualizations with foundation → expert learning path</p>
|
<p>Progressive WebGL/WebGPU visualizations with foundation → expert learning path</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="category-count">5 demos</div>
|
<div class="category-count">10 demos</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="demo-grid" id="threejs-grid"></div>
|
<div class="demo-grid" id="threejs-grid"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -500,6 +580,19 @@
|
||||||
<div class="demo-grid" id="ui-modular-grid"></div>
|
<div class="demo-grid" id="ui-modular-grid"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Infinite Variants Category -->
|
||||||
|
<div class="category-section" data-category="infiniteVariants">
|
||||||
|
<div class="category-header">
|
||||||
|
<div class="category-icon">🔄</div>
|
||||||
|
<div class="category-title">
|
||||||
|
<h2>Infinite Loop Variants</h2>
|
||||||
|
<p>7 self-contained infinite loop repositories testing different architectural innovations</p>
|
||||||
|
</div>
|
||||||
|
<div class="category-count">30 demos</div>
|
||||||
|
</div>
|
||||||
|
<div class="demo-grid" id="infinite-variants-grid"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<p><strong>Infinite Agents</strong> - Web-Enhanced Infinite Agentic Loop Pattern</p>
|
<p><strong>Infinite Agents</strong> - Web-Enhanced Infinite Agentic Loop Pattern</p>
|
||||||
<p>Generated with parallel AI agents using progressive learning from web sources</p>
|
<p>Generated with parallel AI agents using progressive learning from web sources</p>
|
||||||
|
|
@ -525,6 +618,14 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"number": 2,
|
"number": 2,
|
||||||
|
"title": "Cosmic Bloom Garden",
|
||||||
|
"description": "Post-Processing with UnrealBloomPass",
|
||||||
|
"path": "threejs_viz/threejs_viz_10.html",
|
||||||
|
"type": "Foundation",
|
||||||
|
"techniques": []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"number": 3,
|
||||||
"title": "Animated Lighting",
|
"title": "Animated Lighting",
|
||||||
"description": "Dynamic lighting with moving light sources",
|
"description": "Dynamic lighting with moving light sources",
|
||||||
"path": "threejs_viz/threejs_viz_2.html",
|
"path": "threejs_viz/threejs_viz_2.html",
|
||||||
|
|
@ -532,7 +633,7 @@
|
||||||
"techniques": []
|
"techniques": []
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"number": 3,
|
"number": 4,
|
||||||
"title": "Three.js Particle Universe",
|
"title": "Three.js Particle Universe",
|
||||||
"description": "Technique: GPU-accelerated particle system",
|
"description": "Technique: GPU-accelerated particle system",
|
||||||
"path": "threejs_viz/threejs_viz_3.html",
|
"path": "threejs_viz/threejs_viz_3.html",
|
||||||
|
|
@ -540,7 +641,7 @@
|
||||||
"techniques": []
|
"techniques": []
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"number": 4,
|
"number": 5,
|
||||||
"title": "Material Gallery",
|
"title": "Material Gallery",
|
||||||
"description": "Comparing Three.js material types",
|
"description": "Comparing Three.js material types",
|
||||||
"path": "threejs_viz/threejs_viz_4.html",
|
"path": "threejs_viz/threejs_viz_4.html",
|
||||||
|
|
@ -548,11 +649,43 @@
|
||||||
"techniques": []
|
"techniques": []
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"number": 5,
|
"number": 6,
|
||||||
"title": "Three.js Visualization 5: Geometry Morphing",
|
"title": "Three.js Visualization 5: Geometry Morphing",
|
||||||
"description": "Dynamic geometry transformation and scaling",
|
"description": "Dynamic geometry transformation and scaling",
|
||||||
"path": "threejs_viz/threejs_viz_5.html",
|
"path": "threejs_viz/threejs_viz_5.html",
|
||||||
"type": "Foundation",
|
"type": "Intermediate",
|
||||||
|
"techniques": []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"number": 7,
|
||||||
|
"title": "Texture Mapping & Filter Comparison",
|
||||||
|
"description": "TextureLoader, minFilter, magFilter comparison",
|
||||||
|
"path": "threejs_viz/threejs_viz_6.html",
|
||||||
|
"type": "Intermediate",
|
||||||
|
"techniques": []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"number": 8,
|
||||||
|
"title": "Interactive Crystal Garden",
|
||||||
|
"description": "OrbitControls for immersive 3D exploration",
|
||||||
|
"path": "threejs_viz/threejs_viz_7.html",
|
||||||
|
"type": "Intermediate",
|
||||||
|
"techniques": []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"number": 9,
|
||||||
|
"title": "Particle Wave System",
|
||||||
|
"description": "BufferGeometry with Points for dynamic particle waves",
|
||||||
|
"path": "threejs_viz/threejs_viz_8.html",
|
||||||
|
"type": "Intermediate",
|
||||||
|
"techniques": []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"number": 10,
|
||||||
|
"title": "Geometry Gallery",
|
||||||
|
"description": "Multiple advanced geometries with varied materials",
|
||||||
|
"path": "threejs_viz/threejs_viz_9.html",
|
||||||
|
"type": "Intermediate",
|
||||||
"techniques": []
|
"techniques": []
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|
@ -1701,6 +1834,338 @@
|
||||||
"Modular Architecture"
|
"Modular Architecture"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
],
|
||||||
|
"infiniteVariants": [
|
||||||
|
{
|
||||||
|
"number": 1,
|
||||||
|
"title": "Climate Temperature Network - Global Station Correlations",
|
||||||
|
"description": "[Variant 1: Pattern Synthesis] Interactive force-directed graph showing temperature correlation networks across global weather stations",
|
||||||
|
"path": "infinite_variants/infinite_variant_1/test_output/visualization_1.html",
|
||||||
|
"type": "Pattern Synthesis",
|
||||||
|
"techniques": [
|
||||||
|
"Infinite Loop Variant",
|
||||||
|
"Pattern Synthesis"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"number": 2,
|
||||||
|
"title": "SDG Progress Dashboard - Animated Timeline",
|
||||||
|
"description": "[Variant 1: Pattern Synthesis] Interactive demo",
|
||||||
|
"path": "infinite_variants/infinite_variant_1/test_output/visualization_2.html",
|
||||||
|
"type": "Pattern Synthesis",
|
||||||
|
"techniques": [
|
||||||
|
"Infinite Loop Variant",
|
||||||
|
"Pattern Synthesis"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"number": 3,
|
||||||
|
"title": "Music Genre Galaxy - Interactive Scatter Plot",
|
||||||
|
"description": "[Variant 1: Pattern Synthesis] Interactive demo",
|
||||||
|
"path": "infinite_variants/infinite_variant_1/test_output/visualization_3.html",
|
||||||
|
"type": "Pattern Synthesis",
|
||||||
|
"techniques": [
|
||||||
|
"Infinite Loop Variant",
|
||||||
|
"Pattern Synthesis"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"number": 4,
|
||||||
|
"title": "Algorithm Complexity Tree - Hierarchical Visualization",
|
||||||
|
"description": "[Variant 1: Pattern Synthesis] Interactive demo",
|
||||||
|
"path": "infinite_variants/infinite_variant_1/test_output/visualization_4.html",
|
||||||
|
"type": "Pattern Synthesis",
|
||||||
|
"techniques": [
|
||||||
|
"Infinite Loop Variant",
|
||||||
|
"Pattern Synthesis"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"number": 5,
|
||||||
|
"title": "Historical Trade Routes - Geographic Map Visualization",
|
||||||
|
"description": "[Variant 1: Pattern Synthesis] Interactive demo",
|
||||||
|
"path": "infinite_variants/infinite_variant_1/test_output/visualization_5.html",
|
||||||
|
"type": "Pattern Synthesis",
|
||||||
|
"techniques": [
|
||||||
|
"Infinite Loop Variant",
|
||||||
|
"Pattern Synthesis"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"number": 6,
|
||||||
|
"title": "Sales Trends Dashboard - Iteration 01",
|
||||||
|
"description": "[Variant 2: Utility Commands] Interactive demo",
|
||||||
|
"path": "infinite_variants/infinite_variant_2/test_output/dashboard_iteration_01_sales_trends.html",
|
||||||
|
"type": "Utility Commands",
|
||||||
|
"techniques": [
|
||||||
|
"Infinite Loop Variant",
|
||||||
|
"Utility Commands"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"number": 7,
|
||||||
|
"title": "Social Network Graph - Iteration 02",
|
||||||
|
"description": "[Variant 2: Utility Commands] Interactive demo",
|
||||||
|
"path": "infinite_variants/infinite_variant_2/test_output/dashboard_iteration_02_network_graph.html",
|
||||||
|
"type": "Utility Commands",
|
||||||
|
"techniques": [
|
||||||
|
"Infinite Loop Variant",
|
||||||
|
"Utility Commands"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"number": 8,
|
||||||
|
"title": "Geographic Sales Heatmap - Iteration 03",
|
||||||
|
"description": "[Variant 2: Utility Commands] Interactive demo",
|
||||||
|
"path": "infinite_variants/infinite_variant_2/test_output/dashboard_iteration_03_geographic_heatmap.html",
|
||||||
|
"type": "Utility Commands",
|
||||||
|
"techniques": [
|
||||||
|
"Infinite Loop Variant",
|
||||||
|
"Utility Commands"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"number": 9,
|
||||||
|
"title": "Multi-Line Time Series - Iteration 04",
|
||||||
|
"description": "[Variant 2: Utility Commands] Interactive demo",
|
||||||
|
"path": "infinite_variants/infinite_variant_2/test_output/dashboard_iteration_04_time_series_comparison.html",
|
||||||
|
"type": "Utility Commands",
|
||||||
|
"techniques": [
|
||||||
|
"Infinite Loop Variant",
|
||||||
|
"Utility Commands"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"number": 10,
|
||||||
|
"title": "Budget Allocation Treemap - Iteration 05",
|
||||||
|
"description": "[Variant 2: Utility Commands] Interactive demo",
|
||||||
|
"path": "infinite_variants/infinite_variant_2/test_output/dashboard_iteration_05_hierarchical_treemap.html",
|
||||||
|
"type": "Utility Commands",
|
||||||
|
"techniques": [
|
||||||
|
"Infinite Loop Variant",
|
||||||
|
"Utility Commands"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"number": 11,
|
||||||
|
"title": "Abstract Flow Visualization - Iteration 4",
|
||||||
|
"description": "[Variant 3: Pluggable Templates] Interactive demo",
|
||||||
|
"path": "infinite_variants/infinite_variant_3/test_output/viz_abstract_004.html",
|
||||||
|
"type": "Pluggable Templates",
|
||||||
|
"techniques": [
|
||||||
|
"Infinite Loop Variant",
|
||||||
|
"Pluggable Templates"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"number": 12,
|
||||||
|
"title": "Data Metrics Visualization - Iteration 3",
|
||||||
|
"description": "[Variant 3: Pluggable Templates] Interactive demo",
|
||||||
|
"path": "infinite_variants/infinite_variant_3/test_output/viz_datadriven_003.html",
|
||||||
|
"type": "Pluggable Templates",
|
||||||
|
"techniques": [
|
||||||
|
"Infinite Loop Variant",
|
||||||
|
"Pluggable Templates"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"number": 13,
|
||||||
|
"title": "Geometric Patterns Visualization - Iteration 1",
|
||||||
|
"description": "[Variant 3: Pluggable Templates] Interactive demo",
|
||||||
|
"path": "infinite_variants/infinite_variant_3/test_output/viz_geometric_001.html",
|
||||||
|
"type": "Pluggable Templates",
|
||||||
|
"techniques": [
|
||||||
|
"Infinite Loop Variant",
|
||||||
|
"Pluggable Templates"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"number": 14,
|
||||||
|
"title": "Interactive Network Visualization - Iteration 5",
|
||||||
|
"description": "[Variant 3: Pluggable Templates] Interactive demo",
|
||||||
|
"path": "infinite_variants/infinite_variant_3/test_output/viz_interactive_005.html",
|
||||||
|
"type": "Pluggable Templates",
|
||||||
|
"techniques": [
|
||||||
|
"Infinite Loop Variant",
|
||||||
|
"Pluggable Templates"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"number": 15,
|
||||||
|
"title": "Organic Growth Visualization - Iteration 2",
|
||||||
|
"description": "[Variant 3: Pluggable Templates] Interactive demo",
|
||||||
|
"path": "infinite_variants/infinite_variant_3/test_output/viz_organic_002.html",
|
||||||
|
"type": "Pluggable Templates",
|
||||||
|
"techniques": [
|
||||||
|
"Infinite Loop Variant",
|
||||||
|
"Pluggable Templates"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"number": 16,
|
||||||
|
"title": "Climate Data Visualization",
|
||||||
|
"description": "[Variant 4: Quality Evaluation] Interactive demo",
|
||||||
|
"path": "infinite_variants/infinite_variant_4/test_output/visualization_001_climate.html",
|
||||||
|
"type": "Quality Evaluation",
|
||||||
|
"techniques": [
|
||||||
|
"Infinite Loop Variant",
|
||||||
|
"Quality Evaluation"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"number": 17,
|
||||||
|
"title": "Cosmic Garden - Data Sonification",
|
||||||
|
"description": "[Variant 4: Quality Evaluation] Interactive demo",
|
||||||
|
"path": "infinite_variants/infinite_variant_4/test_output/visualization_002_cosmic_garden.html",
|
||||||
|
"type": "Quality Evaluation",
|
||||||
|
"techniques": [
|
||||||
|
"Infinite Loop Variant",
|
||||||
|
"Quality Evaluation"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"number": 18,
|
||||||
|
"title": "Global Population Flow",
|
||||||
|
"description": "[Variant 4: Quality Evaluation] Interactive demo",
|
||||||
|
"path": "infinite_variants/infinite_variant_4/test_output/visualization_003_population_flow.html",
|
||||||
|
"type": "Quality Evaluation",
|
||||||
|
"techniques": [
|
||||||
|
"Infinite Loop Variant",
|
||||||
|
"Quality Evaluation"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"number": 19,
|
||||||
|
"title": "Stock Chart",
|
||||||
|
"description": "[Variant 4: Quality Evaluation] Interactive demo",
|
||||||
|
"path": "infinite_variants/infinite_variant_4/test_output/visualization_004_stocks.html",
|
||||||
|
"type": "Quality Evaluation",
|
||||||
|
"techniques": [
|
||||||
|
"Infinite Loop Variant",
|
||||||
|
"Quality Evaluation"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"number": 20,
|
||||||
|
"title": "Ocean Current Velocity Patterns - Interactive 3D Visualization",
|
||||||
|
"description": "[Variant 4: Quality Evaluation] Interactive demo",
|
||||||
|
"path": "infinite_variants/infinite_variant_4/test_output/visualization_005_ocean_currents.html",
|
||||||
|
"type": "Quality Evaluation",
|
||||||
|
"techniques": [
|
||||||
|
"Infinite Loop Variant",
|
||||||
|
"Quality Evaluation"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"number": 21,
|
||||||
|
"title": "DNA Sequence Visualization",
|
||||||
|
"description": "[Variant 5: Config-Driven] Interactive demo",
|
||||||
|
"path": "infinite_variants/infinite_variant_5/test_output/biology_dev_004.html",
|
||||||
|
"type": "Config-Driven",
|
||||||
|
"techniques": [
|
||||||
|
"Infinite Loop Variant",
|
||||||
|
"Config-Driven"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"number": 22,
|
||||||
|
"title": "Global Temperature Anomaly Visualization",
|
||||||
|
"description": "[Variant 5: Config-Driven] Interactive demo",
|
||||||
|
"path": "infinite_variants/infinite_variant_5/test_output/climate_dev_001.html",
|
||||||
|
"type": "Config-Driven",
|
||||||
|
"techniques": [
|
||||||
|
"Infinite Loop Variant",
|
||||||
|
"Config-Driven"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"number": 23,
|
||||||
|
"title": "Stock Market Candlestick Chart",
|
||||||
|
"description": "[Variant 5: Config-Driven] Interactive demo",
|
||||||
|
"path": "infinite_variants/infinite_variant_5/test_output/financial_dev_003.html",
|
||||||
|
"type": "Config-Driven",
|
||||||
|
"techniques": [
|
||||||
|
"Infinite Loop Variant",
|
||||||
|
"Config-Driven"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"number": 24,
|
||||||
|
"title": "World Population Density Map",
|
||||||
|
"description": "[Variant 5: Config-Driven] Interactive demo",
|
||||||
|
"path": "infinite_variants/infinite_variant_5/test_output/geography_dev_005.html",
|
||||||
|
"type": "Config-Driven",
|
||||||
|
"techniques": [
|
||||||
|
"Infinite Loop Variant",
|
||||||
|
"Config-Driven"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"number": 25,
|
||||||
|
"title": "Social Network Force Graph",
|
||||||
|
"description": "[Variant 5: Config-Driven] Interactive demo",
|
||||||
|
"path": "infinite_variants/infinite_variant_5/test_output/network_dev_002.html",
|
||||||
|
"type": "Config-Driven",
|
||||||
|
"techniques": [
|
||||||
|
"Infinite Loop Variant",
|
||||||
|
"Config-Driven"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"number": 26,
|
||||||
|
"title": "Real-Time Weather Dashboard - Iteration 1",
|
||||||
|
"description": "[Variant 6: State Management] Interactive demo",
|
||||||
|
"path": "infinite_variants/infinite_variant_6/test_output/visualization_1.html",
|
||||||
|
"type": "State Management",
|
||||||
|
"techniques": [
|
||||||
|
"Infinite Loop Variant",
|
||||||
|
"State Management"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"number": 27,
|
||||||
|
"title": "Network Connection Graph - Iteration 2",
|
||||||
|
"description": "[Variant 6: State Management] Interactive demo",
|
||||||
|
"path": "infinite_variants/infinite_variant_6/test_output/visualization_2.html",
|
||||||
|
"type": "State Management",
|
||||||
|
"techniques": [
|
||||||
|
"Infinite Loop Variant",
|
||||||
|
"State Management"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"number": 28,
|
||||||
|
"title": "Interactive Line Chart with Brush - Iteration 3",
|
||||||
|
"description": "[Variant 6: State Management] Interactive demo",
|
||||||
|
"path": "infinite_variants/infinite_variant_6/test_output/visualization_3.html",
|
||||||
|
"type": "State Management",
|
||||||
|
"techniques": [
|
||||||
|
"Infinite Loop Variant",
|
||||||
|
"State Management"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"number": 29,
|
||||||
|
"title": "Hierarchical Tree Diagram - Iteration 4",
|
||||||
|
"description": "[Variant 6: State Management] Interactive demo",
|
||||||
|
"path": "infinite_variants/infinite_variant_6/test_output/visualization_4.html",
|
||||||
|
"type": "State Management",
|
||||||
|
"techniques": [
|
||||||
|
"Infinite Loop Variant",
|
||||||
|
"State Management"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"number": 30,
|
||||||
|
"title": "Animated Scatter Plot - Iteration 5",
|
||||||
|
"description": "[Variant 6: State Management] Interactive demo",
|
||||||
|
"path": "infinite_variants/infinite_variant_6/test_output/visualization_5.html",
|
||||||
|
"type": "State Management",
|
||||||
|
"techniques": [
|
||||||
|
"Infinite Loop Variant",
|
||||||
|
"State Management"
|
||||||
|
]
|
||||||
|
}
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -1729,8 +2194,35 @@
|
||||||
|
|
||||||
// Render demos
|
// Render demos
|
||||||
function renderDemoCard(demo, category) {
|
function renderDemoCard(demo, category) {
|
||||||
|
const screenshotPath = `screenshots/${demo.path.replace(/\//g, '_').replace('.html', '.png')}`;
|
||||||
|
|
||||||
|
// Category emoji mapping
|
||||||
|
const categoryEmojis = {
|
||||||
|
'threejs': '🎨',
|
||||||
|
'sdg': '🌍',
|
||||||
|
'd3': '📊',
|
||||||
|
'mapbox': '🌐',
|
||||||
|
'claudeDevTools': '🛠️',
|
||||||
|
'ui-single': '✨',
|
||||||
|
'ui-modular': '🧩',
|
||||||
|
'infiniteVariants': '🔄'
|
||||||
|
};
|
||||||
|
const emoji = categoryEmojis[category] || '🖼️';
|
||||||
|
|
||||||
return `
|
return `
|
||||||
<div class="demo-card" data-category="${category}" data-title="${demo.title.toLowerCase()}" data-type="${demo.type.toLowerCase()}">
|
<div class="demo-card" data-category="${category}" data-title="${demo.title.toLowerCase()}" data-type="${demo.type.toLowerCase()}" data-path="${demo.path}">
|
||||||
|
<div class="demo-screenshot" onclick="window.location.href='${demo.path}'">
|
||||||
|
<img src="${screenshotPath}"
|
||||||
|
alt="${demo.title} screenshot"
|
||||||
|
onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
|
||||||
|
<div class="demo-screenshot-placeholder" style="display:none;">
|
||||||
|
${emoji}
|
||||||
|
<div class="demo-screenshot-placeholder-text">Click to view</div>
|
||||||
|
</div>
|
||||||
|
<div class="demo-screenshot-overlay">
|
||||||
|
<span>👁️ Click to view</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="demo-header">
|
<div class="demo-header">
|
||||||
<span class="demo-number">#${demo.number}</span>
|
<span class="demo-number">#${demo.number}</span>
|
||||||
<h3 class="demo-title">${demo.title}</h3>
|
<h3 class="demo-title">${demo.title}</h3>
|
||||||
|
|
@ -1754,6 +2246,7 @@
|
||||||
document.getElementById('devtools-grid').innerHTML = demos.claudeDevTools.map(d => renderDemoCard(d, 'claudeDevTools')).join('');
|
document.getElementById('devtools-grid').innerHTML = demos.claudeDevTools.map(d => renderDemoCard(d, 'claudeDevTools')).join('');
|
||||||
document.getElementById('ui-single-grid').innerHTML = demos.uiSingle.map(d => renderDemoCard(d, 'ui-single')).join('');
|
document.getElementById('ui-single-grid').innerHTML = demos.uiSingle.map(d => renderDemoCard(d, 'ui-single')).join('');
|
||||||
document.getElementById('ui-modular-grid').innerHTML = demos.uiModular.map(d => renderDemoCard(d, 'ui-modular')).join('');
|
document.getElementById('ui-modular-grid').innerHTML = demos.uiModular.map(d => renderDemoCard(d, 'ui-modular')).join('');
|
||||||
|
document.getElementById('infinite-variants-grid').innerHTML = demos.infiniteVariants.map(d => renderDemoCard(d, 'infiniteVariants')).join('');
|
||||||
|
|
||||||
// Search functionality
|
// Search functionality
|
||||||
const searchInput = document.getElementById('searchInput');
|
const searchInput = document.getElementById('searchInput');
|
||||||
|
|
@ -1793,18 +2286,9 @@
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// Add click handler to demo cards
|
|
||||||
document.querySelectorAll('.demo-card').forEach(card => {
|
|
||||||
card.addEventListener('click', (e) => {
|
|
||||||
if (!e.target.classList.contains('demo-link')) {
|
|
||||||
const link = card.querySelector('.demo-link');
|
|
||||||
window.location.href = link.href;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Update stats
|
// Update stats
|
||||||
document.getElementById('totalDemos').textContent = demos.threejs.length + demos.sdg.length + demos.d3.length + demos.mapbox.length + demos.claudeDevTools.length + demos.uiSingle.length + demos.uiModular.length;
|
document.getElementById('totalDemos').textContent = demos.threejs.length + demos.sdg.length + demos.d3.length + demos.mapbox.length + demos.claudeDevTools.length + demos.uiSingle.length + demos.uiModular.length + demos.infiniteVariants.length;
|
||||||
document.getElementById('threejsCount').textContent = demos.threejs.length;
|
document.getElementById('threejsCount').textContent = demos.threejs.length;
|
||||||
document.getElementById('uiCount').textContent = demos.uiSingle.length + demos.uiModular.length;
|
document.getElementById('uiCount').textContent = demos.uiSingle.length + demos.uiModular.length;
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
{
|
||||||
|
"name": "infinite-agents",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "Web-Enhanced Infinite Agentic Loop Pattern with AI-generated demos",
|
||||||
|
"main": "generate_index.py",
|
||||||
|
"scripts": {
|
||||||
|
"screenshots": "node generate_screenshots.js",
|
||||||
|
"screenshots:threejs": "node generate_screenshots.js --category=threejs",
|
||||||
|
"screenshots:sdg": "node generate_screenshots.js --category=sdg",
|
||||||
|
"screenshots:d3": "node generate_screenshots.js --category=d3",
|
||||||
|
"screenshots:mapbox": "node generate_screenshots.js --category=mapbox",
|
||||||
|
"screenshots:devtools": "node generate_screenshots.js --category=claudeDevTools",
|
||||||
|
"screenshots:ui": "node generate_screenshots.js --category=uiSingle",
|
||||||
|
"screenshots:variants": "node generate_screenshots.js --category=infiniteVariants",
|
||||||
|
"server": "python3 -m http.server 8889",
|
||||||
|
"dashboard": "python3 generate_index.py"
|
||||||
|
},
|
||||||
|
"keywords": [
|
||||||
|
"ai",
|
||||||
|
"agents",
|
||||||
|
"visualization",
|
||||||
|
"demos"
|
||||||
|
],
|
||||||
|
"author": "",
|
||||||
|
"license": "MIT",
|
||||||
|
"devDependencies": {
|
||||||
|
"playwright": "^1.40.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"glob": "^10.3.10"
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue