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': [],
|
||||
'claudeDevTools': [],
|
||||
'uiSingle': [],
|
||||
'uiModular': []
|
||||
'uiModular': [],
|
||||
'infiniteVariants': []
|
||||
}
|
||||
|
||||
# Scan Three.js demos
|
||||
|
|
@ -220,6 +221,47 @@ def generate_demo_data():
|
|||
'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
|
||||
|
||||
def generate_index_html(demos):
|
||||
|
|
@ -317,6 +359,7 @@ def main():
|
|||
print(f" • Claude DevTools: {len(demos['claudeDevTools'])}")
|
||||
print(f" • UI Single File: {len(demos['uiSingle'])}")
|
||||
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("\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:56:45 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>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
|
@ -242,6 +245,81 @@
|
|||
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 {
|
||||
content: '';
|
||||
position: absolute;
|
||||
|
|
@ -358,6 +436,7 @@
|
|||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -375,15 +454,15 @@
|
|||
<!-- Statistics -->
|
||||
<div class="stats-bar">
|
||||
<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>
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">7</div>
|
||||
<div class="stat-number">8</div>
|
||||
<div class="stat-label">Categories</div>
|
||||
</div>
|
||||
<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>
|
||||
<div class="stat-card">
|
||||
|
|
@ -406,6 +485,7 @@
|
|||
<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-modular">UI Hybrid (Modular)</button>
|
||||
<button class="filter-btn" data-filter="infiniteVariants">Infinite Variants</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -417,7 +497,7 @@
|
|||
<h2>Three.js 3D Visualizations</h2>
|
||||
<p>Progressive WebGL/WebGPU visualizations with foundation → expert learning path</p>
|
||||
</div>
|
||||
<div class="category-count">5 demos</div>
|
||||
<div class="category-count">10 demos</div>
|
||||
</div>
|
||||
<div class="demo-grid" id="threejs-grid"></div>
|
||||
</div>
|
||||
|
|
@ -500,6 +580,19 @@
|
|||
<div class="demo-grid" id="ui-modular-grid"></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>
|
||||
<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>
|
||||
|
|
@ -525,6 +618,14 @@
|
|||
},
|
||||
{
|
||||
"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",
|
||||
"description": "Dynamic lighting with moving light sources",
|
||||
"path": "threejs_viz/threejs_viz_2.html",
|
||||
|
|
@ -532,7 +633,7 @@
|
|||
"techniques": []
|
||||
},
|
||||
{
|
||||
"number": 3,
|
||||
"number": 4,
|
||||
"title": "Three.js Particle Universe",
|
||||
"description": "Technique: GPU-accelerated particle system",
|
||||
"path": "threejs_viz/threejs_viz_3.html",
|
||||
|
|
@ -540,7 +641,7 @@
|
|||
"techniques": []
|
||||
},
|
||||
{
|
||||
"number": 4,
|
||||
"number": 5,
|
||||
"title": "Material Gallery",
|
||||
"description": "Comparing Three.js material types",
|
||||
"path": "threejs_viz/threejs_viz_4.html",
|
||||
|
|
@ -548,11 +649,43 @@
|
|||
"techniques": []
|
||||
},
|
||||
{
|
||||
"number": 5,
|
||||
"number": 6,
|
||||
"title": "Three.js Visualization 5: Geometry Morphing",
|
||||
"description": "Dynamic geometry transformation and scaling",
|
||||
"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": []
|
||||
}
|
||||
],
|
||||
|
|
@ -1701,6 +1834,338 @@
|
|||
"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
|
||||
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 `
|
||||
<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">
|
||||
<span class="demo-number">#${demo.number}</span>
|
||||
<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('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('infinite-variants-grid').innerHTML = demos.infiniteVariants.map(d => renderDemoCard(d, 'infiniteVariants')).join('');
|
||||
|
||||
// Search functionality
|
||||
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
|
||||
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('uiCount').textContent = demos.uiSingle.length + demos.uiModular.length;
|
||||
</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