Spaces:
Running
Running
| <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> | |