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> | |
| <!-- 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"> | |
| <h4 class="font-semibold text-gray-900 mb-3">📊 Live 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 | |
| </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> | |
| <!-- Applications --> | |
| <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">🚀 Applications</h2> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div class="border-l-4 border-green-500 pl-4 py-3"> | |
| <h3 class="font-semibold text-gray-900 mb-2">🧬 GLMP - Genome Logic Modeling</h3> | |
| <p class="text-gray-600 mb-2"> | |
| First specialized application: visualizing biochemical processes like DNA replication, | |
| metabolic pathways, and cell signaling. | |
| </p> | |
| <a href="https://huggingface.co/spaces/garywelz/glmp" class="text-green-600 hover:text-green-700 text-sm font-semibold"> | |
| Explore GLMP → | |
| </a> | |
| </div> | |
| <div class="border-l-4 border-blue-500 pl-4 py-3"> | |
| <h3 class="font-semibold text-gray-900 mb-2">💻 Software Architecture Analysis</h3> | |
| <p class="text-gray-600 mb-2"> | |
| Map complex software systems, API flows, and data pipelines as flowcharts for | |
| better documentation and understanding. | |
| </p> | |
| <span class="text-blue-600 text-sm font-semibold">Coming Soon</span> | |
| </div> | |
| <div class="border-l-4 border-purple-500 pl-4 py-3"> | |
| <h3 class="font-semibold text-gray-900 mb-2">🏢 Business Process Modeling</h3> | |
| <p class="text-gray-600 mb-2"> | |
| Analyze organizational workflows, decision trees, and operational procedures | |
| for optimization and automation. | |
| </p> | |
| <span class="text-purple-600 text-sm font-semibold">In Development</span> | |
| </div> | |
| <div class="border-l-4 border-orange-500 pl-4 py-3"> | |
| <h3 class="font-semibold text-gray-900 mb-2">⚛️ Physics & Engineering</h3> | |
| <p class="text-gray-600 mb-2"> | |
| Model physical processes, engineering systems, and experimental protocols | |
| with step-by-step visual clarity. | |
| </p> | |
| <span class="text-orange-600 text-sm font-semibold">Planned</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Interactive Demo --> | |
| <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <div class="bg-gradient-to-r from-blue-50 to-purple-50 rounded-xl p-8"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-6">🎨 Try It Yourself</h2> | |
| <div class="bg-white rounded-lg p-6"> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Select a Sample Process to Analyze:</label> | |
| <select id="sampleSelector" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500"> | |
| <option value="">-- Choose a sample process --</option> | |
| <option value="scientific-method">Scientific Method</option> | |
| <option value="software-deployment">Software Deployment Pipeline</option> | |
| <option value="customer-support">Customer Support Workflow</option> | |
| <option value="research-publication">Research Paper Publication</option> | |
| </select> | |
| </div> | |
| <div id="demoContainer" class="mt-6 p-6 bg-gray-50 rounded-lg min-h-64"> | |
| <div class="text-center text-gray-500 py-12"> | |
| <div class="text-4xl mb-4">🛠️</div> | |
| <p>Select a sample process to see the Programming Framework in action</p> | |
| </div> | |
| </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>• Copernicus AI knowledge graph</li> | |
| <li>• Research papers database</li> | |
| <li>• API endpoints for programmatic access</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Publications --> | |
| <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">📚 Publications & Papers</h2> | |
| <div class="space-y-4"> | |
| <div class="border-l-4 border-orange-500 pl-4 py-2"> | |
| <h3 class="font-semibold text-gray-900">Welz, G. (2025)</h3> | |
| <p class="text-gray-700">"The Programming Framework: A Universal Method for Process Analysis Using LLMs and Visual Flowcharts"</p> | |
| <p class="text-sm text-gray-500 mt-1">Foundational paper introducing the framework methodology</p> | |
| </div> | |
| <div class="border-l-4 border-green-500 pl-4 py-2"> | |
| <h3 class="font-semibold text-gray-900">Welz, G. (2025)</h3> | |
| <p class="text-gray-700">"GLMP: Applying the Programming Framework to Biochemical Process Visualization"</p> | |
| <p class="text-sm text-gray-500 mt-1">Case study: genome logic modeling in biology</p> | |
| </div> | |
| <div class="border-l-4 border-blue-500 pl-4 py-2"> | |
| <h3 class="font-semibold text-gray-900">Welz, G. (2025)</h3> | |
| <p class="text-gray-700">"From Text to Logic: Automated Process Extraction with Large Language Models"</p> | |
| <p class="text-sm text-gray-500 mt-1">Technical deep-dive into LLM prompting strategies</p> | |
| </div> | |
| </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. | |
| 50+ 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 → | |
| </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">🔬 Copernicus AI</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 Copernicus AI → | |
| </a> | |
| </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' }); | |
| document.getElementById('sampleSelector').addEventListener('change', (e) => { | |
| const process = e.target.value; | |
| const container = document.getElementById('demoContainer'); | |
| if (!process) { | |
| container.innerHTML = ` | |
| <div class="text-center text-gray-500 py-12"> | |
| <div class="text-4xl mb-4">🛠️</div> | |
| <p>Select a sample process to see the Programming Framework in action</p> | |
| </div> | |
| `; | |
| return; | |
| } | |
| const diagrams = { | |
| 'scientific-method': ` | |
| graph TD | |
| A[Observation] --> B[Question] | |
| B --> C[Hypothesis] | |
| C --> D[Design Experiment] | |
| D --> E[Collect Data] | |
| E --> F{Analyze Results} | |
| F -->|Support Hypothesis| G[Report Findings] | |
| F -->|Reject Hypothesis| H[Revise Hypothesis] | |
| H --> D | |
| G --> I[Peer Review] | |
| I --> J{Accepted?} | |
| J -->|Yes| K[Publish] | |
| J -->|No| L[Address Feedback] | |
| L --> I | |
| `, | |
| 'software-deployment': ` | |
| graph TD | |
| A[Code Commit] --> B[Run Tests] | |
| B --> C{Tests Pass?} | |
| C -->|No| D[Fix Issues] | |
| C -->|Yes| E[Build Artifact] | |
| D --> A | |
| E --> F[Deploy to Staging] | |
| F --> G[QA Testing] | |
| G --> H{QA Approved?} | |
| H -->|No| I[Bug Fixes] | |
| H -->|Yes| J[Deploy to Production] | |
| I --> A | |
| J --> K[Monitor] | |
| K --> L{Issues Detected?} | |
| L -->|Yes| M[Rollback] | |
| L -->|No| N[Success] | |
| `, | |
| 'customer-support': ` | |
| graph TD | |
| A[Ticket Created] --> B[Assign to Agent] | |
| B --> C[Initial Assessment] | |
| C --> D{Issue Type?} | |
| D -->|Technical| E[Tech Team] | |
| D -->|Billing| F[Finance Team] | |
| D -->|General| G[Support Agent] | |
| E --> H[Investigate] | |
| F --> I[Review Account] | |
| G --> J[Provide Solution] | |
| H --> K{Resolved?} | |
| I --> K | |
| J --> K | |
| K -->|Yes| L[Close Ticket] | |
| K -->|No| M[Escalate] | |
| M --> N[Senior Team] | |
| N --> H | |
| `, | |
| 'research-publication': ` | |
| graph TD | |
| A[Research Complete] --> B[Write Manuscript] | |
| B --> C[Internal Review] | |
| C --> D{Ready?} | |
| D -->|No| E[Revise] | |
| D -->|Yes| F[Submit to Journal] | |
| E --> B | |
| F --> G[Editor Review] | |
| G --> H{Desk Reject?} | |
| H -->|Yes| I[Choose Different Journal] | |
| H -->|No| J[Peer Review] | |
| I --> F | |
| J --> K{Reviewer Decision?} | |
| K -->|Reject| I | |
| K -->|Major Revisions| L[Address Comments] | |
| K -->|Minor Revisions| M[Quick Fixes] | |
| K -->|Accept| N[Publication] | |
| L --> F | |
| M --> F | |
| ` | |
| }; | |
| container.innerHTML = ` | |
| <div class="mb-4"> | |
| <h3 class="font-semibold text-gray-900 mb-2">${e.target.options[e.target.selectedIndex].text}</h3> | |
| <p class="text-sm text-gray-600">Visualized using the Programming Framework</p> | |
| </div> | |
| <div class="mermaid">${diagrams[process]}</div> | |
| <div class="mt-4 p-3 bg-orange-50 rounded text-sm text-gray-700"> | |
| <strong>💡 Framework Applied:</strong> LLM extracted process steps, decision points, and flows. | |
| Result encoded as Mermaid flowchart in JSON for reusability. | |
| </div> | |
| `; | |
| mermaid.init(undefined, container.querySelectorAll('.mermaid')); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |