Upload 2 files

README.md

@@ -1,93 +1,127 @@
 ---
-title: "Programming Framework for Systematic Analysis"
-emoji: "🎨"
-colorFrom: "blue"
-colorTo: "green"
-sdk: "static"
-sdk_version: "latest"
-app_file: "index.html"
-pinned: false
-author: "garywelz"
-short_description: Cross-disciplinary methodology for complex systems
+title: The Programming Framework
+emoji: 🛠️
+colorFrom: yellow
+colorTo: red
+sdk: static
+pinned: true
+license: mit
 ---
 
-## Programming Framework
+# 🛠️ The Programming Framework
 
-A systematic visualization methodology for analyzing complex systems across disciplines using Mermaid Markdown and a universal five-color code.
+A Universal Method for Process Analysis
 
-Complex systems across biology, chemistry, and physics exhibit remarkable similarities in their organizational principles despite operating at vastly different scales and domains. Traditional analysis methods often remain siloed within specific disciplines, limiting our ability to identify common patterns and computational logic that govern system behavior. Here, we present the Programming Framework, a systematic methodology that translates complex system dynamics into standardized computational representations using Mermaid Markdown syntax and LLM processing.
+## 🎯 Overview
 
-### Purpose and Goals
+The Programming Framework is a **meta-tool**—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.
 
-The Programming Framework project aims to advance the use of Mermaid Markdown syntax and Large Language Models (LLMs) to create standardized, color-coded flowcharts representing complex processes across all academic disciplines. By providing a universal methodology for translating system dynamics into computational representations, this framework enables systematic comparison and pattern recognition across traditionally separate fields including biology, chemistry, physics, computer science, and mathematics. The project builds upon three decades of computational biology research and demonstrates how modern AI tools can democratize complex system analysis, making sophisticated visualization accessible to researchers, educators, and students worldwide.
+## 💡 The Core Idea
 
-### Technical Foundation: Mermaid Markdown
+**Problem:** Complex processes are difficult to understand because they involve many steps, decision points, and interactions. Traditional text descriptions are hard to follow.
 
-#### The Invention of Mermaid
+**Solution:** 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.
 
-**Knut Sveidqvist** invented the Mermaid markdown format. He created Mermaid, a JavaScript-based diagramming and charting tool, to simplify diagram creation in documentation workflows. The project was inspired by his experience trying to update a diagram in a document, which was difficult due to the file format.
+## ⚙️ How It Works
 
-Sveidqvist's innovation revolutionized how diagrams are created and maintained in documentation by providing a text-based syntax that can be version-controlled, easily edited, and automatically rendered into visual diagrams. This approach eliminates the need for external diagramming tools and ensures diagrams stay synchronized with their documentation.
+1. **Input Process** - Provide scientific papers, documentation, or process descriptions
+2. **LLM Analysis** - AI extracts steps, decisions, branches, and logic flow
+3. **Generate Flowchart** - Create Mermaid diagram encoded as JSON structure
+4. **Visualize & Iterate** - Interactive flowchart reveals insights and enables refinement
 
-#### Mermaid Markdown (.mmd) Format
+## 🌍 Core Principles
 
-The Programming Framework leverages Mermaid's `.mmd` file format, which provides:
+### Domain Agnostic
+Works across any field: biology, chemistry, software engineering, business processes, legal workflows, manufacturing, and beyond.
 
-- **Text-based syntax** for creating complex flowcharts and diagrams
-- **Version control compatibility** - diagrams can be tracked in Git repositories
-- **LLM-friendly format** - AI systems can generate and modify diagram code
-- **Cross-platform compatibility** - works in any environment that supports JavaScript
-- **Embeddable rendering** - diagrams can be displayed in HTML, Markdown, and other formats
+### Iterative Refinement
+Start with rough analysis, visualize, identify gaps, refine with LLM, repeat until the process logic is crystal clear.
 
-#### LLM Integration and Workflow
+### Structured Data
+JSON storage enables programmatic access, version control, cross-referencing, and integration with other tools and databases.
 
-Our methodology uses Large Language Models to:
+## 🚀 Applications
 
-1. **Generate .mmd files** - LLMs create detailed Mermaid syntax for complex processes
-2. **Apply color coding** - Systematic application of the 5-category color system
-3. **Ensure consistency** - Standardized node naming and connection patterns
-4. **Embed in HTML** - .mmd files are embedded in HTML for web display
-5. **Maintain quality** - LLMs can validate and optimize diagram structure
+### 🧬 GLMP - Genome Logic Modeling (Live)
+First specialized application: visualizing biochemical processes like DNA replication, metabolic pathways, and cell signaling.
+- [Explore GLMP →](https://huggingface.co/spaces/garywelz/glmp)
 
-This workflow enables rapid creation of sophisticated visualizations that would be impractical to create manually, while maintaining the flexibility and editability of text-based formats.
+### 💻 Software Architecture Analysis (Coming Soon)
+Map complex software systems, API flows, and data pipelines as flowcharts for better documentation and understanding.
 
-### Universal Color Coding Table
+### 🏢 Business Process Modeling (In Development)
+Analyze organizational workflows, decision trees, and operational procedures for optimization and automation.
 
-| Color | Hex | Biology | Chemistry | Computer Science | Physics | Mathematics |
-| --- | --- | --- | --- | --- | --- | --- |
-| Red | `#ff6b6b` | Environmental signals, nutrients | Reactant supply, temperature | Input data, user commands | Energy input, force | Axioms, givens |
-| Yellow | `#ffd43b` | Enzymes, receptors | Catalysts, vessels | Data structures, algorithms | Fields, particles | Theorems, methods |
-| Green | `#51cf66` | Metabolic reactions | Chemical reactions | Algorithm execution | Quantum/force operations | Calculations, deductions |
-| Blue | `#74c0fc` | Metabolites, states | Intermediates, streams | Variables, memory states | States, measurement results | Intermediate results |
-| Violet | `#b197fc` | Biomolecules, responses | Final products | Program outputs | Phenomena, measured quantities | Proven results |
+### ⚛️ Physics & Engineering (Planned)
+Model physical processes, engineering systems, and experimental protocols with step-by-step visual clarity.
 
-### Explore the Space
+## 🔧 Technical Architecture
 
-- Biology evidence base: [GLMP Space](https://huggingface.co/spaces/garywelz/glmp) (Hugging Face) and repo
-- Chemistry processes: [chemistry_processes.html](chemistry_processes.html)
-- Computer Science: [computer_science_processes.html](computer_science_processes.html)
-- Physics: [physics_processes.html](physics_processes.html)
-- Mathematics: [mathematics_processes.html](mathematics_processes.html)
-- Full article: [programming_framework_article.html](programming_framework_article.html)
+### LLM Integration
+- Google Gemini 2.0 Flash for analysis
+- Vertex AI for enterprise deployment
+- Custom prompts for process extraction
+- Structured JSON output formatting
 
-### Experimental Validation
+### Visualization Stack
+- Mermaid.js for flowchart rendering
+- JSON schema for data validation
+- Interactive SVG output
+- Export to PNG/PDF supported
 
-- **Validation Paper**: [experimental_validation_paper.html](experimental_validation_paper.html) - Comprehensive experimental protocols and validation methodology
-- **Core Validation Flowcharts**:
-  - [catalytic_hydrogenation_optimization.html](catalytic_hydrogenation_optimization.html) - Experiment 1: Catalytic hydrogenation process validation
-  - [raft_polymerization_mechanism.html](raft_polymerization_mechanism.html) - Experiment 2: Polymerization kinetics validation
-  - [surface_catalysis_mechanism.html](surface_catalysis_mechanism.html) - Experiment 3: Surface chemistry process validation
-  - [electrochemical_oxygen_reduction.html](electrochemical_oxygen_reduction.html) - Experiment 4: Electrochemical process validation
-  - [quantum_chemistry_calculation.html](quantum_chemistry_calculation.html) - Experiment 5: Computational chemistry integration validation
+### Data Storage
+- Google Cloud Storage for JSON files
+- Firestore for metadata indexing
+- Version control with Git
+- Cross-referencing with papers database
 
-### Batch Architecture
+### Integration Points
+- GLMP specialized collections
+- Copernicus AI knowledge graph
+- Research papers database
+- API endpoints for programmatic access
 
-The project now includes a comprehensive batch architecture for each discipline:
+## 📚 Publications
 
-- **Mathematics**: 7 batches (21 processes) - Complete ✅
-- **Chemistry**: 14 batches (70 processes) - Complete ✅
-- **Computer Science**: 7 batches (21 processes) - Complete ✅
-- **Physics**: 7 batches (21 processes) - Complete ✅
-- **Biology**: External GLMP Space - Complete ✅
+- Welz, G. (2025). "The Programming Framework: A Universal Method for Process Analysis Using LLMs and Visual Flowcharts" - Foundational paper
+- Welz, G. (2025). "GLMP: Applying the Programming Framework to Biochemical Process Visualization" - Case study
+- Welz, G. (2025). "From Text to Logic: Automated Process Extraction with Large Language Models" - Technical deep-dive
+
+## 🔗 Related Projects
+
+### 🧬 GLMP - Genome Logic Modeling
+First specialized application of the Programming Framework to biochemical processes. 50+ biological pathways visualized.
+- [Visit GLMP →](https://huggingface.co/spaces/garywelz/glmp)
+
+### 🔬 Copernicus AI
+Knowledge engine integrating the Programming Framework with AI podcasts, research papers, and knowledge graph for scientific discovery.
+- [Visit Copernicus AI →](https://huggingface.co/spaces/garywelz/copernicusai)
+
+## 🎨 Interactive Demo
+
+The space includes interactive examples showing the framework applied to:
+- Scientific Method
+- Software Deployment Pipeline
+- Customer Support Workflow
+- Research Paper Publication
+
+Each example demonstrates how LLMs extract process logic and encode it as visual flowcharts.
+
+## 💻 Technology Stack
+
+- **LLM**: Google Gemini 2.0 Flash, Vertex AI
+- **Visualization**: Mermaid.js
+- **Storage**: Google Cloud Storage, Firestore
+- **Format**: JSON with Mermaid syntax
+- **Frontend**: Static HTML + Tailwind CSS
+
+## 🌟 Vision
+
+As AI systems become more capable of understanding complex processes, the Programming Framework provides the bridge between human comprehension and machine analysis. It's a tool for truth-seeking—transforming complexity into clarity.
+
+---
+
+**A Universal Method for Process Analysis**
+
+© 2025 Gary Welz. All rights reserved.
 
-Each discipline has an index page (`*_index.html`) and individual batch files (`*_batch_*.html`) containing detailed process visualizations.

index.html

@@ -3,434 +3,480 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Programming Framework - Systematic Analysis of Complex Systems</title>
+    <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>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
+        .gradient-bg {
+            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
         }
-
-        body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            line-height: 1.6;
-            color: #333;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            min-height: 100vh;
-        }
-
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 20px;
-        }
-
-        .header {
-            text-align: center;
-            color: white;
-            margin-bottom: 40px;
-        }
-
-        .header h1 {
-            font-size: 3rem;
-            margin-bottom: 10px;
-            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
-        }
-
-        .header p {
-            font-size: 1.2rem;
-            opacity: 0.9;
-        }
-
-        .main-content {
-            background: white;
-            border-radius: 15px;
-            padding: 40px;
-            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
-            margin-bottom: 30px;
-        }
-
-        .overview {
-            margin-bottom: 40px;
-        }
-
-        .overview h2 {
-            color: #667eea;
-            font-size: 2rem;
-            margin-bottom: 20px;
-            border-bottom: 3px solid #667eea;
-            padding-bottom: 10px;
-        }
-
-        .overview p {
-            font-size: 1.1rem;
-            margin-bottom: 15px;
-            text-align: justify;
+        .card-hover {
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
         }
-
-        .color-system {
-            margin-bottom: 40px;
-        }
-
-        .color-system h2 {
-            color: #667eea;
-            font-size: 2rem;
-            margin-bottom: 20px;
-            border-bottom: 3px solid #667eea;
-            padding-bottom: 10px;
+        .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>
 
-        .color-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 20px;
-            margin-bottom: 30px;
-        }
+                    <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>
 
-        .color-card {
-            border-radius: 10px;
-            padding: 20px;
-            color: white;
-            text-align: center;
-            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
-            transition: transform 0.3s ease;
-        }
+    <!-- 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>
 
-        .color-card:hover {
-            transform: translateY(-5px);
-        }
+                <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>
 
-        .color-card h3 {
-            font-size: 1.5rem;
-            margin-bottom: 10px;
-        }
+                <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>
 
-        .color-card p {
-            font-size: 1rem;
-            opacity: 0.9;
-        }
+                <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>
 
-        .red { background: linear-gradient(135deg, #ff6b6b, #ee5a52); }
-        .yellow { background: linear-gradient(135deg, #ffd43b, #fcc419); color: #333; }
-        .green { background: linear-gradient(135deg, #51cf66, #40c057); }
-        .blue { background: linear-gradient(135deg, #74c0fc, #4dabf7); }
-        .violet { background: linear-gradient(135deg, #b197fc, #9775fa); }
+            <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>
 
-        .resources {
-            margin-bottom: 40px;
-        }
+            <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>
 
-        .resources h2 {
-            color: #667eea;
-            font-size: 2rem;
-            margin-bottom: 20px;
-            border-bottom: 3px solid #667eea;
-            padding-bottom: 10px;
-        }
+            <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>
 
-        .resource-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-            gap: 20px;
-        }
+    <!-- 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>
 
-        .resource-card {
-            background: #f8f9fa;
-            border-radius: 10px;
-            padding: 25px;
-            text-align: center;
-            border: 2px solid #e9ecef;
-            transition: all 0.3s ease;
-        }
+                <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>
 
-        .resource-card:hover {
-            border-color: #667eea;
-            transform: translateY(-3px);
-            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
-        }
+                <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>
 
-        .resource-card h3 {
-            color: #667eea;
-            margin-bottom: 10px;
-            font-size: 1.3rem;
-        }
+                <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>
 
-        .resource-card p {
-            margin-bottom: 15px;
-            color: #666;
-        }
+    <!-- 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>
 
-        .resource-card a {
-            display: inline-block;
-            background: #667eea;
-            color: white;
-            padding: 10px 20px;
-            text-decoration: none;
-            border-radius: 25px;
-            transition: background 0.3s ease;
-        }
+                <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>
 
-        .resource-card a:hover {
-            background: #5a6fd8;
-        }
+    <!-- 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>
 
-        .footer {
-            background: rgba(255,255,255,0.1);
-            color: white;
-            text-align: center;
-            padding: 30px;
-            border-radius: 15px;
-            backdrop-filter: blur(10px);
-        }
+                <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>
 
-        .footer h3 {
-            margin-bottom: 15px;
-            font-size: 1.5rem;
-        }
+                <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>
 
-        .footer p {
-            margin-bottom: 5px;
-            opacity: 0.9;
-        }
+                <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>
 
-        .footer a {
-            color: #ffd43b;
-            text-decoration: none;
-        }
+    <!-- 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>
 
-        .footer a:hover {
-            text-decoration: underline;
-        }
+                <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>
 
-        @media (max-width: 768px) {
-            .header h1 {
-                font-size: 2rem;
-            }
-            
-            .main-content {
-                padding: 20px;
-            }
-            
-            .color-grid {
-                grid-template-columns: 1fr;
-            }
-            
-            .resource-grid {
-                grid-template-columns: 1fr;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <div class="header">
-            <h1>🎨 Programming Framework</h1>
-            <p>Systematic Analysis of Complex Systems Across Disciplines</p>
+                <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>
-
-        <div class="main-content">
-            <div class="overview">
-                <h2>Project Overview</h2>
-                <p>The Programming Framework is a systematic visualization methodology for analyzing complex systems across disciplines using Mermaid Markdown and a universal five-color code.</p>
-                
-                <p>Complex systems across biology, chemistry, and physics exhibit remarkable similarities in their organizational principles despite operating at vastly different scales and domains. Traditional analysis methods often remain siloed within specific disciplines, limiting our ability to identify common patterns and computational logic that govern system behavior.</p>
-                
-                <p>Here, we present the Programming Framework, a systematic methodology that translates complex system dynamics into standardized computational representations using Mermaid Markdown syntax and LLM processing.</p>
+    </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">
+                    Explore GLMP →
+                </a>
             </div>
 
-            <div class="overview">
-                <h2>Technical Foundation: Mermaid Markdown</h2>
-                
-                <h3 style="color: #667eea; margin: 20px 0 15px 0; font-size: 1.4rem;">The Invention of Mermaid</h3>
-                <p><strong>Knut Sveidqvist</strong> invented the Mermaid markdown format. He created Mermaid, a JavaScript-based diagramming and charting tool, to simplify diagram creation in documentation workflows. The project was inspired by his experience trying to update a diagram in a document, which was difficult due to the file format.</p>
-                
-                <p>Sveidqvist's innovation revolutionized how diagrams are created and maintained in documentation by providing a text-based syntax that can be version-controlled, easily edited, and automatically rendered into visual diagrams. This approach eliminates the need for external diagramming tools and ensures diagrams stay synchronized with their documentation.</p>
-                
-                <h3 style="color: #667eea; margin: 20px 0 15px 0; font-size: 1.4rem;">Mermaid Markdown (.mmd) Format</h3>
-                <p>The Programming Framework leverages Mermaid's <code>.mmd</code> file format, which provides:</p>
-                <ul style="margin: 15px 0; padding-left: 30px;">
-                    <li><strong>Text-based syntax</strong> for creating complex flowcharts and diagrams</li>
-                    <li><strong>Version control compatibility</strong> - diagrams can be tracked in Git repositories</li>
-                    <li><strong>LLM-friendly format</strong> - AI systems can generate and modify diagram code</li>
-                    <li><strong>Cross-platform compatibility</strong> - works in any environment that supports JavaScript</li>
-                    <li><strong>Embeddable rendering</strong> - diagrams can be displayed in HTML, Markdown, and other formats</li>
-                </ul>
-                
-                <h3 style="color: #667eea; margin: 20px 0 15px 0; font-size: 1.4rem;">LLM Integration and Workflow</h3>
-                <p>Our methodology uses Large Language Models to:</p>
-                <ol style="margin: 15px 0; padding-left: 30px;">
-                    <li><strong>Generate .mmd files</strong> - LLMs create detailed Mermaid syntax for complex processes</li>
-                    <li><strong>Apply color coding</strong> - Systematic application of the 5-category color system</li>
-                    <li><strong>Ensure consistency</strong> - Standardized node naming and connection patterns</li>
-                    <li><strong>Embed in HTML</strong> - .mmd files are embedded in HTML for web display</li>
-                    <li><strong>Maintain quality</strong> - LLMs can validate and optimize diagram structure</li>
-                </ol>
-                
-                <p>This workflow enables rapid creation of sophisticated visualizations that would be impractical to create manually, while maintaining the flexibility and editability of text-based formats.</p>
+            <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://huggingface.co/spaces/garywelz/copernicusai" 
+                   class="text-orange-600 hover:text-orange-700 font-semibold">
+                    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">&copy; 2025 Gary Welz. All rights reserved.</p>
+        </div>
+    </footer>
 
-            <div class="color-system">
-                <h2>Universal Color Coding System</h2>
-                <p style="text-align: center; margin-bottom: 20px; font-size: 1.1rem;">The framework uses a standardized five-color system across all disciplines:</p>
-                
-                <div class="color-grid">
-                    <div class="color-card red">
-                        <h3>🔴 Red (#ff6b6b)</h3>
-                        <p><strong>Triggers & Inputs</strong><br>
-                        Environmental signals, reactants, input data, energy sources, axioms</p>
-                    </div>
-                    
-                    <div class="color-card yellow">
-                        <h3>🟡 Yellow (#ffd43b)</h3>
-                        <p><strong>Structures & Objects</strong><br>
-                        Enzymes, catalysts, data structures, fields, theorems</p>
-                    </div>
-                    
-                    <div class="color-card green">
-                        <h3>🟢 Green (#51cf66)</h3>
-                        <p><strong>Processing & Operations</strong><br>
-                        Metabolic reactions, chemical reactions, algorithms, quantum operations</p>
-                    </div>
-                    
-                    <div class="color-card blue">
-                        <h3>🔵 Blue (#74c0fc)</h3>
-                        <p><strong>Intermediates & States</strong><br>
-                        Metabolites, intermediates, variables, states, measurement results</p>
-                    </div>
-                    
-                    <div class="color-card violet">
-                        <h3>🟣 Violet (#b197fc)</h3>
-                        <p><strong>Products & Outputs</strong><br>
-                        Biomolecules, final products, program outputs, phenomena, proven results</p>
-                    </div>
-                </div>
-            </div>
+    <script>
+        mermaid.initialize({ startOnLoad: true, theme: 'default' });
 
-            <div class="batch-status">
-                <h2>📊 Batch Architecture Status</h2>
-                <div class="status-grid">
-                    <div class="status-card complete">
-                        <h3>📐 Mathematics</h3>
-                        <p><strong>Status:</strong> Complete ✅</p>
-                        <p><strong>Batches:</strong> 7/7 (21 processes)</p>
-                        <p>Number Theory, Analysis & Calculus, Abstract Algebra, Geometry & Topology, Applied Mathematics, Discrete Mathematics, Historical & Educational</p>
-                    </div>
-                    
-                    <div class="status-card completed">
-                        <h3>⚗️ Chemistry</h3>
-                        <p><strong>Status:</strong> Completed ✅</p>
-                        <p><strong>Batches:</strong> 14/14 (70 processes)</p>
-                        <p>Organic Chemistry, Physical Chemistry, Analytical Chemistry, Inorganic Chemistry, Biochemistry, Materials Chemistry, Environmental Chemistry, Electrochemical Processes, Surface Chemistry & Catalysis, Thermodynamic Processes, Kinetic Processes, Spectroscopy & Analysis, Quantum Chemistry, Materials Chemistry</p>
-                    </div>
-                    
-                    <div class="status-card in-progress">
-                        <h3>💻 Computer Science</h3>
-                        <p><strong>Status:</strong> In Progress 🔄</p>
-                        <p><strong>Batches:</strong> 1/7 (3 processes)</p>
-                        <p>Algorithms & Data Structures, Software Engineering, Artificial Intelligence, Computer Security, Computer Networks, Database Systems, Computer Graphics</p>
-                    </div>
-                    
-                    <div class="status-card in-progress">
-                        <h3>⚛️ Physics</h3>
-                        <p><strong>Status:</strong> In Progress 🔄</p>
-                        <p><strong>Batches:</strong> 1/7 (3 processes)</p>
-                        <p>Classical Mechanics, Electromagnetism, Thermodynamics, Quantum Mechanics, Relativity, Astrophysics, Particle Physics</p>
-                    </div>
-                    
-                    <div class="status-card external">
-                        <h3>🧬 Biology</h3>
-                        <p><strong>Status:</strong> External GLMP ✅</p>
-                        <p><strong>Location:</strong> Hugging Face Space</p>
-                        <p>Comprehensive biological systems analysis with genome logic modeling and metabolic pathway visualization</p>
+        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>
-                </div>
-            </div>
+                `;
+                return;
+            }
 
-            <div class="resources">
-                <h2>Key Resources & Documentation</h2>
-                <div class="resource-grid">
-                    <div class="resource-card">
-                        <h3>📚 Complete Documentation</h3>
-                        <p>Detailed methodology, implementation guidelines, and theoretical foundation</p>
-                        <a href="README.md">View README</a>
-                    </div>
-                    
-                    <div class="resource-card">
-                        <h3>🧬 Biology</h3>
-                        <p>Biological system analysis with GLMP integration</p>
-                        <a href="https://huggingface.co/spaces/garywelz/glmp" target="_blank">Explore Biology (GLMP)</a>
-                    </div>
-                    
-                    <div class="resource-card">
-                        <h3>⚗️ Chemistry</h3>
-                        <p>Chemical reaction mechanisms and visualizations</p>
-                        <a href="chemistry_index.html">Explore Chemistry</a>
-                    </div>
-                    
-                    <div class="resource-card">
-                        <h3>💻 Computer Science</h3>
-                        <p>Algorithm and computational analysis</p>
-                        <a href="computer_science_index.html">Explore CS</a>
-                    </div>
-                    
-                    <div class="resource-card">
-                        <h3>⚛️ Physics</h3>
-                        <p>Physical system dynamics and quantum processes</p>
-                        <a href="physics_index.html">Explore Physics</a>
-                    </div>
-                    
-                    <div class="resource-card">
-                        <h3>📐 Mathematics</h3>
-                        <p>Mathematical proof and calculation processes</p>
-                        <a href="mathematics_index.html">Explore Math</a>
-                    </div>
-                    
-                    <div class="resource-card">
-                        <h3>📖 Academic Article</h3>
-                        <p>Comprehensive framework documentation and methodology</p>
-                        <a href="programming_framework_article.html">Read Article</a>
-                    </div>
-                    
-                    <div class="resource-card">
-                        <h3>🔬 GLMP Foundation</h3>
-                        <p>Original biological systems analysis project</p>
-                        <a href="https://huggingface.co/spaces/garywelz/glmp" target="_blank">Visit GLMP</a>
-                    </div>
-                    
-                    <div class="resource-card">
-                        <h3>🧪 Experimental Validation</h3>
-                        <p>Comprehensive validation protocols and experimental design</p>
-                        <a href="experimental_validation_paper.html">View Validation Paper</a>
-                    </div>
-                    
-                    <div class="resource-card">
-                        <h3>🔬 Validation Flowcharts</h3>
-                        <p>Core validation flowcharts supporting experimental protocols</p>
-                        <a href="catalytic_hydrogenation_optimization.html">Catalytic Hydrogenation</a>
-                        <a href="raft_polymerization_mechanism.html">RAFT Polymerization</a>
-                        <a href="surface_catalysis_mechanism.html">Surface Catalysis</a>
-                        <a href="electrochemical_oxygen_reduction.html">Electrochemical ORR</a>
-                        <a href="quantum_chemistry_calculation.html">Quantum Chemistry</a>
-                    </div>
-                    
-                    <div class="resource-card">
-                        <h3>📄 Journal Submission Paper</h3>
-                        <p>Self-contained academic paper suitable for journal submission or arXiv</p>
-                        <a href="journal_submission_paper.html">View Journal Paper</a>
-                    </div>
+            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>
-        </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>
+            `;
 
-        <div class="footer">
-            <h3>About the Author</h3>
-            <p><strong>Gary Welz</strong></p>
-            <p>Retired Faculty Member</p>
-            <p>John Jay College, CUNY (Department of Mathematics and Computer Science)</p>
-            <p>Borough of Manhattan Community College, CUNY</p>
-            <p>CUNY Graduate Center (New Media Lab)</p>
-            <p>Email: <a href="mailto:gwelz@jjay.cuny.edu">gwelz@jjay.cuny.edu</a></p>
-        </div>
-    </div>
+            mermaid.init(undefined, container.querySelectorAll('.mermaid'));
+        });
+    </script>
 </body>
 </html>
+