Spaces:
Running
Running
File size: 36,894 Bytes
ab71acf 9db58de fd04cab 9db58de 26fe580 fd04cab 9db58de 26fe580 fd04cab 26fe580 fd04cab 26fe580 fd04cab 9db58de fd04cab c39aa1e 9db58de c39aa1e 9db58de c39aa1e 9db58de c39aa1e 9db58de dfdfc02 9db58de 83cc23f 9db58de ab82d1f 9db58de ab82d1f 9db58de 83cc23f 123cf13 83cc23f 9db58de 83cc23f 9db58de 83cc23f 9db58de 83cc23f dfdfc02 9db58de 83cc23f 123cf13 9db58de 83cc23f 9db58de ab82d1f 9db58de fd04cab 26fe580 9db58de fd04cab 9db58de b90bc7e 9db58de fd04cab 83cc23f 9db58de fd04cab 83cc23f 9db58de fd04cab b90bc7e 26fe580 9db58de 123cf13 83cc23f 9db58de faacf31 fd04cab 9db58de fd04cab 9db58de 123cf13 9db58de fd04cab 9db58de fd04cab 123cf13 26fe580 9db58de fd04cab 9db58de fd04cab 9db58de fd04cab 9db58de 83cc23f 9db58de fd04cab 26fe580 9db58de 83cc23f 9db58de b90bc7e 9db58de b90bc7e 9db58de b90bc7e b163bd6 9db58de b163bd6 b90bc7e 9db58de b163bd6 9db58de b163bd6 b90bc7e 9db58de b90bc7e 9db58de ab82d1f 9db58de ab82d1f 9db58de ab82d1f 9db58de ab82d1f 9db58de ab82d1f 9db58de ab82d1f b90bc7e b163bd6 9db58de ab82d1f 9db58de ab82d1f 9db58de ab82d1f 9db58de 83cc23f 9db58de c39aa1e 9db58de c39aa1e 83cc23f 9db58de 83cc23f 9db58de 83cc23f fd04cab 9db58de fd04cab 9db58de ab71acf 6ba08a8 9db58de | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Programming Framework - Universal Process Analysis</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<style>
.gradient-bg {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}
.card-hover {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
</style>
</head>
<body class="bg-gray-50">
<!-- Header -->
<header class="gradient-bg text-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<div class="text-center">
<div class="text-6xl mb-4">🛠️</div>
<h1 class="text-5xl font-bold mb-4">The Programming Framework</h1>
<p class="text-xl opacity-90 mb-6">A Universal Method for Process Analysis</p>
<p class="text-lg opacity-75 max-w-3xl mx-auto">
Combining Large Language Models with Mermaid visualization to dissect and understand
complex processes across any discipline—from biology to business, physics to psychology.
</p>
</div>
</div>
</header>
<!-- Abstract/Summary -->
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div class="bg-white rounded-xl shadow-lg p-8 mb-8 border-l-4 border-orange-600">
<h2 class="text-2xl font-bold text-gray-900 mb-4">📋 Summary</h2>
<p class="text-lg text-gray-700 leading-relaxed mb-3">
The <strong>Programming Framework</strong> is a universal meta-tool for analyzing complex processes across any discipline by combining Large Language Models (LLMs) with visual flowchart representation. The Framework transforms textual process descriptions into structured, interactive Mermaid flowcharts stored as JSON, enabling systematic analysis, visualization, and integration with knowledge systems.
</p>
<p class="text-gray-600">
Successfully demonstrated through GLMP (Genome Logic Modeling Project) with 50+ biological processes, and applied across Chemistry, Mathematics, Physics, and Computer Science. The Framework serves as the foundational methodology for the CopernicusAI Knowledge Engine, enabling domain-specific process visualization and analysis.
</p>
</div>
</section>
<!-- Prior Work & Research Contributions -->
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div class="bg-gradient-to-r from-orange-50 to-yellow-50 rounded-xl shadow-lg p-8 mb-8">
<h2 class="text-3xl font-bold text-gray-900 mb-6">📚 Prior Work & Research Contributions</h2>
<div class="bg-white rounded-lg p-6 mb-6">
<h3 class="text-xl font-semibold text-gray-900 mb-4">Overview</h3>
<p class="text-gray-700 mb-4">
The Programming Framework represents <strong>prior work</strong> that demonstrates a novel methodology for analyzing complex processes by combining Large Language Models (LLMs) with visual flowchart representation. This research establishes a universal, domain-agnostic approach to process analysis that transforms textual descriptions into structured, interactive visualizations.
</p>
</div>
<div class="grid md:grid-cols-2 gap-6 mb-6">
<div class="bg-white rounded-lg p-6">
<h3 class="text-lg font-semibold text-gray-900 mb-3">🔬 Research Contributions</h3>
<ul class="text-sm text-gray-700 space-y-2">
<li>• <strong>Universal Process Analysis:</strong> Domain-agnostic methodology applicable across multiple fields</li>
<li>• <strong>LLM-Powered Extraction:</strong> Automated extraction using Google Gemini 2.0 Flash</li>
<li>• <strong>Structured Visualization:</strong> Mermaid.js-based flowchart generation encoded as JSON</li>
<li>• <strong>Iterative Refinement:</strong> Systematic approach enabling continuous improvement</li>
<li>• <strong>Scale Demonstration:</strong> Applied to 313+ processes across 5 disciplines (Biology: 52, Chemistry: 91, Physics: 21, Computer Science: 21, Mathematics: 20, GLMP: 109)</li>
<li>• <strong>Validation:</strong> Successfully processes complex biological, chemical, and computational workflows with high accuracy</li>
</ul>
</div>
<div class="bg-white rounded-lg p-6">
<h3 class="text-lg font-semibold text-gray-900 mb-3">⚙️ Technical Achievements</h3>
<ul class="text-sm text-gray-700 space-y-2">
<li>• <strong>Meta-Tool Architecture:</strong> Framework for creating specialized analysis tools</li>
<li>• <strong>JSON-Based Storage:</strong> Structured format enabling version control and API integration</li>
<li>• <strong>Multi-Domain Application:</strong> Successfully applied to biological processes (GLMP)</li>
<li>• <strong>Integration Framework:</strong> Designed for knowledge engines and collaborative platforms</li>
</ul>
</div>
</div>
<div class="bg-white rounded-lg p-6">
<h3 class="text-lg font-semibold text-gray-900 mb-3">🎯 Position Within CopernicusAI Knowledge Engine</h3>
<p class="text-gray-700 mb-3">
The Programming Framework serves as the <strong>foundational meta-tool</strong> of the CopernicusAI Knowledge Engine, providing the underlying methodology that enables specialized applications:
</p>
<div class="grid md:grid-cols-2 gap-4 text-sm mb-3">
<ul class="text-gray-700 space-y-1">
<li>• GLMP (Genome Logic Modeling Project)</li>
<li>• CopernicusAI (main knowledge engine)</li>
<li>• Research Papers Metadata Database</li>
</ul>
<ul class="text-gray-700 space-y-1">
<li>• Science Video Database</li>
<li>• Multi-domain process analysis</li>
</ul>
</div>
<p class="text-gray-600 text-sm italic">
This work establishes a proof-of-concept for AI-assisted process analysis, demonstrating how LLMs can systematically extract and visualize complex logic from textual sources across diverse domains.
</p>
</div>
</div>
</section>
<!-- Key Stats -->
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 -mt-8">
<div class="grid md:grid-cols-4 gap-4">
<div class="bg-white rounded-lg shadow-lg p-6 text-center">
<div class="text-3xl font-bold text-orange-600">Any</div>
<div class="text-sm text-gray-600">Discipline</div>
</div>
<div class="bg-white rounded-lg shadow-lg p-6 text-center">
<div class="text-3xl font-bold text-blue-600">LLM</div>
<div class="text-sm text-gray-600">Powered</div>
</div>
<div class="bg-white rounded-lg shadow-lg p-6 text-center">
<div class="text-3xl font-bold text-green-600">Visual</div>
<div class="text-sm text-gray-600">Flowcharts</div>
</div>
<div class="bg-white rounded-lg shadow-lg p-6 text-center">
<div class="text-3xl font-bold text-purple-600">JSON</div>
<div class="text-sm text-gray-600">Structured Data</div>
</div>
</div>
</section>
<!-- What is the Framework -->
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div class="bg-white rounded-xl shadow-lg p-8">
<h2 class="text-3xl font-bold text-gray-900 mb-6">🎯 What is the Programming Framework?</h2>
<div class="prose max-w-none">
<p class="text-lg text-gray-700 mb-4">
The Programming Framework is a <strong>meta-tool</strong>—a tool for creating tools. It provides a
systematic method for analyzing any complex process by combining the analytical power of Large Language
Models with the clarity of visual flowcharts.
</p>
<div class="grid md:grid-cols-2 gap-6 mt-6">
<div class="bg-orange-50 rounded-lg p-6">
<h3 class="text-xl font-semibold text-gray-900 mb-3">🔍 The Problem</h3>
<p class="text-gray-700">
Complex processes—whether biological, computational, or organizational—are difficult to
understand because they involve many steps, decision points, and interactions. Traditional
descriptions in text are hard to follow.
</p>
</div>
<div class="bg-blue-50 rounded-lg p-6">
<h3 class="text-xl font-semibold text-gray-900 mb-3">✨ The Solution</h3>
<p class="text-gray-700">
Use LLMs to extract process logic from literature, then encode it as Mermaid flowcharts
stored in JSON. Result: Clear, interactive visualizations that reveal hidden patterns and
enable systematic analysis.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- How It Works -->
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div class="bg-gradient-to-r from-orange-50 to-yellow-50 rounded-xl p-8">
<h2 class="text-3xl font-bold text-gray-900 mb-8 text-center">⚙️ How It Works</h2>
<div class="grid md:grid-cols-4 gap-6">
<div class="bg-white rounded-lg p-6 text-center">
<div class="text-4xl mb-3">1️⃣</div>
<h3 class="font-semibold text-gray-900 mb-2">Input Process</h3>
<p class="text-sm text-gray-600">Provide scientific papers, documentation, or process descriptions</p>
</div>
<div class="bg-white rounded-lg p-6 text-center">
<div class="text-4xl mb-3">2️⃣</div>
<h3 class="font-semibold text-gray-900 mb-2">LLM Analysis</h3>
<p class="text-sm text-gray-600">AI extracts steps, decisions, branches, and logic flow</p>
</div>
<div class="bg-white rounded-lg p-6 text-center">
<div class="text-4xl mb-3">3️⃣</div>
<h3 class="font-semibold text-gray-900 mb-2">Generate Flowchart</h3>
<p class="text-sm text-gray-600">Create Mermaid diagram encoded as JSON structure</p>
</div>
<div class="bg-white rounded-lg p-6 text-center">
<div class="text-4xl mb-3">4️⃣</div>
<h3 class="font-semibold text-gray-900 mb-2">Visualize & Iterate</h3>
<p class="text-sm text-gray-600">Interactive flowchart reveals insights and enables refinement</p>
</div>
</div>
<div class="mt-8 bg-white rounded-lg p-6 mb-6">
<h4 class="font-semibold text-gray-900 mb-4">📝 Concrete Example:</h4>
<div class="bg-gray-50 rounded-lg p-4 mb-4 border-l-4 border-orange-500">
<p class="text-sm font-semibold text-gray-800 mb-2">Input:</p>
<p class="text-sm text-gray-700 italic mb-4">
"DNA replication begins when the origin recognition complex (ORC) binds to DNA replication origins. This triggers the loading of the MCM2-7 helicase complex, which unwinds the DNA double helix. DNA polymerases then synthesize new strands using the unwound strands as templates..."
</p>
<p class="text-sm font-semibold text-gray-800 mb-2">LLM Analysis:</p>
<p class="text-sm text-gray-700 mb-4">
Extracts 15 steps, identifies 3 decision points (origin recognition, helicase loading, polymerase binding), recognizes 4 key enzymes (ORC, MCM2-7, DNA polymerase, ligase), and maps regulatory checkpoints.
</p>
<p class="text-sm font-semibold text-gray-800 mb-2">Output:</p>
<p class="text-sm text-gray-700">
Mermaid flowchart with 25 nodes, 28 edges, 3 decision gates, properly colored using the 5-color scheme (red for inputs, yellow for structures, green for operations, blue for intermediates, violet for products), stored as structured JSON enabling interactive visualization and programmatic access.
</p>
</div>
</div>
<div class="bg-white rounded-lg p-6">
<h4 class="font-semibold text-gray-900 mb-3">📊 Live Interactive Example:</h4>
<div id="exampleDiagram" class="mermaid">
graph TD
A[Complex Process Input] --> B{LLM Analysis}
B -->|Extract Logic| C[Identify Steps]
B -->|Extract Decisions| D[Identify Branches]
C --> E[Create Flowchart Nodes]
D --> F[Create Decision Points]
E --> G[Generate Mermaid Syntax]
F --> G
G --> H[Store as JSON]
H --> I[Interactive Visualization]
I --> J{Insights Gained?}
J -->|No| K[Refine Analysis]
J -->|Yes| L[Apply Knowledge]
K --> B
style A fill:#ff6b6b,color:#fff
style B fill:#74c0fc,color:#fff
style C fill:#51cf66,color:#fff
style D fill:#51cf66,color:#fff
style E fill:#ffd43b,color:#000
style F fill:#ffd43b,color:#000
style G fill:#51cf66,color:#fff
style H fill:#74c0fc,color:#fff
style I fill:#74c0fc,color:#fff
style J fill:#74c0fc,color:#fff
style K fill:#51cf66,color:#fff
style L fill:#b197fc,color:#fff
</div>
<div class="mt-4 text-sm text-gray-600">
<p class="font-semibold mb-2">Color Legend:</p>
<div class="flex flex-wrap gap-4">
<span><span class="inline-block w-4 h-4 rounded" style="background-color: #ff6b6b;"></span> Red - Triggers & Inputs</span>
<span><span class="inline-block w-4 h-4 rounded" style="background-color: #ffd43b;"></span> Yellow - Structures & Objects</span>
<span><span class="inline-block w-4 h-4 rounded" style="background-color: #51cf66;"></span> Green - Processing & Operations</span>
<span><span class="inline-block w-4 h-4 rounded" style="background-color: #74c0fc;"></span> Blue - Intermediates & States</span>
<span><span class="inline-block w-4 h-4 rounded" style="background-color: #b197fc;"></span> Violet - Products & Outputs</span>
</div>
</div>
</div>
</div>
</section>
<!-- Core Principles -->
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<h2 class="text-3xl font-bold text-gray-900 mb-6">💡 Core Principles</h2>
<div class="grid md:grid-cols-3 gap-6">
<div class="bg-white rounded-lg shadow-md p-6 card-hover">
<div class="text-4xl mb-3">🌍</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3">Domain Agnostic</h3>
<p class="text-gray-600">
Works across any field: biology, chemistry, software engineering, business processes,
legal workflows, manufacturing, and beyond.
</p>
</div>
<div class="bg-white rounded-lg shadow-md p-6 card-hover">
<div class="text-4xl mb-3">🔄</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3">Iterative Refinement</h3>
<p class="text-gray-600">
Start with rough analysis, visualize, identify gaps, refine with LLM, repeat until
the process logic is crystal clear.
</p>
</div>
<div class="bg-white rounded-lg shadow-md p-6 card-hover">
<div class="text-4xl mb-3">📦</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3">Structured Data</h3>
<p class="text-gray-600">
JSON storage enables programmatic access, version control, cross-referencing,
and integration with other tools and databases.
</p>
</div>
</div>
</section>
<!-- Process Diagram Collections -->
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div class="bg-gradient-to-r from-green-50 to-blue-50 rounded-xl shadow-lg p-8">
<h2 class="text-3xl font-bold text-gray-900 mb-6">📚 Process Diagram Collections</h2>
<p class="text-gray-700 mb-6">
The Programming Framework has been applied across multiple scientific disciplines. Explore interactive flowchart collections organized by domain:
</p>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Biology -->
<div class="bg-white rounded-lg shadow-md p-6 card-hover">
<h3 class="text-xl font-semibold text-gray-900 mb-4 flex items-center">
<span class="text-2xl mr-2">🧬</span> Biology
</h3>
<p class="text-gray-600 text-sm mb-3">
Biological process visualizations: GLMP covers biochemical/molecular processes; Biology Database covers higher-level organismal processes.
</p>
<div class="space-y-2">
<a href="https://storage.googleapis.com/regal-scholar-453620-r7-podcast-storage/biology-processes-database/biology-database-table.html"
class="text-orange-600 hover:text-orange-700 font-medium text-sm inline-block mr-4"
target="_blank" rel="noopener noreferrer">
🗄️ Biology Processes Database →
</a>
<a href="https://storage.googleapis.com/regal-scholar-453620-r7-podcast-storage/glmp-database-table.html"
class="text-orange-600 hover:text-orange-700 font-medium text-sm inline-block"
target="_blank" rel="noopener noreferrer">
🗄️ GLMP Database Table →
</a>
</div>
<p class="text-xs text-gray-500 mt-2">
Biology Database: 52 processes (organismal/ecological) | GLMP: 50+ processes (biochemical/molecular)
</p>
</div>
<!-- Chemistry -->
<div class="bg-white rounded-lg shadow-md p-6 card-hover">
<h3 class="text-xl font-semibold text-gray-900 mb-4 flex items-center">
<span class="text-2xl mr-2">⚗️</span> Chemistry
</h3>
<p class="text-gray-600 text-sm mb-3">
Comprehensive chemistry process diagrams across all major branches.
</p>
<a href="https://storage.googleapis.com/regal-scholar-453620-r7-podcast-storage/chemistry-processes-database/chemistry-database-table.html"
class="text-orange-600 hover:text-orange-700 font-medium text-sm inline-block"
target="_blank" rel="noopener noreferrer">
🗄️ Chemistry Database Table →
</a>
<p class="text-xs text-gray-500 mt-2">
56 processes across 14 subcategories
</p>
</div>
<!-- Mathematics -->
<div class="bg-white rounded-lg shadow-md p-6 card-hover">
<h3 class="text-xl font-semibold text-gray-900 mb-4 flex items-center">
<span class="text-2xl mr-2">🔢</span> Mathematics
</h3>
<p class="text-gray-600 text-sm mb-3">
Mathematical algorithms, proof methods, and computational processes.
</p>
<a href="https://storage.googleapis.com/regal-scholar-453620-r7-podcast-storage/mathematics-processes-database/mathematics-database-table.html"
class="text-orange-600 hover:text-orange-700 font-medium text-sm inline-block"
target="_blank" rel="noopener noreferrer">
🗄️ Mathematics Database Table →
</a>
<p class="text-xs text-gray-500 mt-2">
20 processes across 7 subcategories
</p>
</div>
<!-- Physics -->
<div class="bg-white rounded-lg shadow-md p-6 card-hover">
<h3 class="text-xl font-semibold text-gray-900 mb-4 flex items-center">
<span class="text-2xl mr-2">⚛️</span> Physics
</h3>
<p class="text-gray-600 text-sm mb-3">
Physical processes including quantum mechanics, thermodynamics, and particle physics.
</p>
<a href="https://storage.googleapis.com/regal-scholar-453620-r7-podcast-storage/physics-processes-database/physics-database-table.html"
class="text-orange-600 hover:text-orange-700 font-medium text-sm inline-block"
target="_blank" rel="noopener noreferrer">
🗄️ Physics Database Table →
</a>
<p class="text-xs text-gray-500 mt-2">
21 processes across 7 subcategories
</p>
</div>
<!-- Computer Science -->
<div class="bg-white rounded-lg shadow-md p-6 card-hover">
<h3 class="text-xl font-semibold text-gray-900 mb-4 flex items-center">
<span class="text-2xl mr-2">💻</span> Computer Science
</h3>
<p class="text-gray-600 text-sm mb-3">
Algorithms, software engineering workflows, and computational processes.
</p>
<a href="https://storage.googleapis.com/regal-scholar-453620-r7-podcast-storage/computer-science-processes-database/computer-science-database-table.html"
class="text-orange-600 hover:text-orange-700 font-medium text-sm inline-block"
target="_blank" rel="noopener noreferrer">
🗄️ Computer Science Database Table →
</a>
<p class="text-xs text-gray-500 mt-2">
21 processes across 7 subcategories
</p>
</div>
</div>
</div>
</section>
<!-- Technical Details -->
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div class="bg-gray-900 text-white rounded-xl p-8">
<h2 class="text-3xl font-bold mb-6">⚙️ Technical Architecture</h2>
<div class="grid md:grid-cols-2 gap-8">
<div>
<h3 class="text-xl font-semibold text-orange-400 mb-4">🤖 LLM Integration</h3>
<ul class="space-y-2 text-gray-300">
<li>• Google Gemini 2.0 Flash for analysis</li>
<li>• Vertex AI for enterprise deployment</li>
<li>• Custom prompts for process extraction</li>
<li>• Structured JSON output formatting</li>
</ul>
</div>
<div>
<h3 class="text-xl font-semibold text-orange-400 mb-4">📊 Visualization Stack</h3>
<ul class="space-y-2 text-gray-300">
<li>• Mermaid.js for flowchart rendering</li>
<li>• JSON schema for data validation</li>
<li>• Interactive SVG output</li>
<li>• Export to PNG/PDF supported</li>
</ul>
</div>
<div>
<h3 class="text-xl font-semibold text-orange-400 mb-4">💾 Data Storage</h3>
<ul class="space-y-2 text-gray-300">
<li>• Google Cloud Storage for JSON files</li>
<li>• Firestore for metadata indexing</li>
<li>• Version control with Git</li>
<li>• Cross-referencing with papers database</li>
</ul>
</div>
<div>
<h3 class="text-xl font-semibold text-orange-400 mb-4">🔗 Integration Points</h3>
<ul class="space-y-2 text-gray-300">
<li>• GLMP specialized collections</li>
<li>• CopernicusAI knowledge graph</li>
<li>• Research papers database</li>
<li>• API endpoints for programmatic access</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Validation & Accuracy -->
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div class="bg-gradient-to-r from-green-50 to-blue-50 rounded-xl shadow-lg p-8">
<h2 class="text-3xl font-bold text-gray-900 mb-6">✅ Validation & Accuracy</h2>
<div class="grid md:grid-cols-2 gap-6 mb-6">
<div class="bg-white rounded-lg p-6">
<h3 class="text-xl font-semibold text-gray-900 mb-4">🔍 Quality Assurance Process</h3>
<ul class="text-sm text-gray-700 space-y-2">
<li>• <strong>Automated Validation:</strong> All flowcharts validated for Mermaid syntax correctness before publication</li>
<li>• <strong>Metadata Quality Checks:</strong> JSON schema validation ensures >=85% metadata completeness (NSF standard)</li>
<li>• <strong>Source Citation Verification:</strong> All processes include verified research paper citations with DOI/PubMed links</li>
<li>• <strong>Cross-Reference Validation:</strong> Automated checks ensure discipline links and back-references are correct</li>
<li>• <strong>Color Scheme Consistency:</strong> All processes follow standardized 5-color scheme for visual consistency</li>
</ul>
</div>
<div class="bg-white rounded-lg p-6">
<h3 class="text-xl font-semibold text-gray-900 mb-4">📊 Scale & Coverage</h3>
<ul class="text-sm text-gray-700 space-y-2">
<li>• <strong>314 Processes Validated:</strong> Successfully applied across 6 discipline databases (Biology, Chemistry, Physics, CS, Mathematics, GLMP)</li>
<li>• <strong>Multi-Domain Testing:</strong> Framework validated on biological pathways, chemical reactions, computational algorithms, and mathematical proofs</li>
<li>• <strong>Iterative Refinement:</strong> Processes refined through multiple LLM analysis cycles to improve accuracy</li>
<li>• <strong>User Feedback Integration:</strong> Community feedback mechanism enables continuous improvement (see "Improve this process" on each flowchart)</li>
<li>• <strong>Expert Validation:</strong> GLMP processes validated against established biochemical pathway databases</li>
</ul>
</div>
</div>
<div class="bg-white rounded-lg p-6 mb-6">
<h3 class="text-xl font-semibold text-gray-900 mb-4">🎯 Accuracy Measures</h3>
<div class="grid md:grid-cols-3 gap-4 text-sm">
<div class="bg-blue-50 rounded-lg p-4">
<h4 class="font-semibold text-gray-900 mb-2">Syntax Accuracy</h4>
<p class="text-gray-700">100% of published flowcharts render without Mermaid syntax errors</p>
</div>
<div class="bg-green-50 rounded-lg p-4">
<h4 class="font-semibold text-gray-900 mb-2">Metadata Completeness</h4>
<p class="text-gray-700">>=85% average quality score across all processes (exceeds NSF requirements)</p>
</div>
<div class="bg-purple-50 rounded-lg p-4">
<h4 class="font-semibold text-gray-900 mb-2">Source Coverage</h4>
<p class="text-gray-700">All processes include 1-3 verified research paper citations with accessible links</p>
</div>
</div>
</div>
<div class="bg-yellow-50 rounded-lg p-6 border-l-4 border-yellow-400">
<h3 class="text-lg font-semibold text-gray-900 mb-3">⚠️ Known Limitations</h3>
<ul class="text-sm text-gray-700 space-y-2">
<li>• <strong>LLM-Dependent Accuracy:</strong> Flowchart accuracy depends on LLM interpretation of source material; complex processes may require multiple refinement cycles</li>
<li>• <strong>Domain Expertise Required:</strong> While the Framework is domain-agnostic, optimal results benefit from domain-specific knowledge for validation</li>
<li>• <strong>Source Material Quality:</strong> Accuracy is limited by the quality and completeness of input source material</li>
<li>• <strong>Continuous Improvement:</strong> Framework is actively refined based on user feedback and validation results</li>
</ul>
</div>
</div>
</section>
<!-- Related Projects -->
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<h2 class="text-3xl font-bold text-gray-900 mb-6 text-center">🔗 Related Projects</h2>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-white rounded-lg shadow-md p-6 card-hover">
<h3 class="text-xl font-semibold text-gray-900 mb-3">🧬 GLMP - Genome Logic Modeling</h3>
<p class="text-gray-600 mb-4">
First specialized application of the Programming Framework to biochemical processes.
100+ biological pathways visualized as interactive flowcharts.
</p>
<a href="https://huggingface.co/spaces/garywelz/glmp"
class="text-orange-600 hover:text-orange-700 font-semibold"
target="_blank" rel="noopener noreferrer">
Explore GLMP → (opens in new tab)
</a>
</div>
<div class="bg-white rounded-lg shadow-md p-6 card-hover">
<h3 class="text-xl font-semibold text-gray-900 mb-3">🔬 CopernicusAI</h3>
<p class="text-gray-600 mb-4">
Knowledge engine integrating the Programming Framework with AI podcasts, research papers,
and knowledge graph for scientific discovery.
</p>
<a href="https://www.copernicusai.fyi"
class="text-orange-600 hover:text-orange-700 font-semibold"
target="_blank" rel="noopener noreferrer">
Visit CopernicusAI → (opens in new tab)
</a>
</div>
</div>
</section>
<!-- How to Cite This Work -->
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div class="bg-white rounded-xl shadow-lg p-8">
<h2 class="text-3xl font-bold text-gray-900 mb-6">How to Cite This Work</h2>
<div class="bg-gray-50 rounded-lg p-6 mb-4 space-y-4">
<div>
<p class="text-gray-800 font-mono text-lg leading-relaxed mb-3">
Welz, G. (2024–2025). <em>The Programming Framework: A Universal Method for Process Analysis</em>.<br>
Hugging Face Spaces. <a href="https://huggingface.co/spaces/garywelz/programming_framework" class="text-orange-600 hover:text-orange-700 underline" target="_blank" rel="noopener noreferrer">https://huggingface.co/spaces/garywelz/programming_framework</a> (opens in new tab)
</p>
<div class="bg-white rounded p-3 mt-3">
<p class="text-sm font-semibold text-gray-700 mb-2">BibTeX Format:</p>
<pre class="bg-gray-900 text-orange-400 p-3 rounded text-xs overflow-x-auto"><code>@misc{welz2025programmingframework,
title={The Programming Framework: A Universal Method for Process Analysis},
author={Welz, Gary},
year={2024--2025},
url={https://huggingface.co/spaces/garywelz/programming_framework},
note={Hugging Face Spaces}
}</code></pre>
</div>
</div>
<div class="border-t border-gray-300 pt-4">
<p class="text-gray-800 font-mono text-lg leading-relaxed">
Welz, G. (2024). <em>From Inspiration to AI: Biology as Visual Programming</em>.<br>
Medium. <a href="https://medium.com/@garywelz_47126/from-inspiration-to-ai-biology-as-visual-programming-520ee523029a" class="text-orange-600 hover:text-orange-700 underline" target="_blank" rel="noopener noreferrer">https://medium.com/@garywelz_47126/from-inspiration-to-ai-biology-as-visual-programming-520ee523029a</a> (opens in new tab)
</p>
</div>
</div>
<div class="bg-orange-50 rounded-lg p-4">
<p class="text-gray-700 mb-2">
This project serves as a foundational meta-tool for AI-assisted process analysis, enabling systematic extraction and visualization of complex logic from textual sources across diverse scientific and technical domains.
</p>
<p class="text-gray-700 font-semibold">
The Programming Framework is designed as infrastructure for AI-assisted science, providing a universal methodology that can be specialized for domain-specific applications.
</p>
</div>
</div>
</section>
<!-- Footer -->
<footer class="gradient-bg text-white py-8 mt-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<p class="text-lg font-semibold mb-2">The Programming Framework</p>
<p class="text-sm opacity-75">A Universal Method for Process Analysis</p>
<p class="text-xs opacity-50 mt-4">© 2025 Gary Welz. All rights reserved.</p>
</div>
</footer>
<script>
mermaid.initialize({ startOnLoad: true, theme: 'default' });
</script>
</body>
</html>
|