Spaces:
Running
Running
| <html lang="en"> | |
| <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> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| 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; | |
| } | |
| .color-system { | |
| margin-bottom: 40px; | |
| } | |
| .color-system h2 { | |
| color: #667eea; | |
| font-size: 2rem; | |
| margin-bottom: 20px; | |
| border-bottom: 3px solid #667eea; | |
| padding-bottom: 10px; | |
| } | |
| .color-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 20px; | |
| margin-bottom: 30px; | |
| } | |
| .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; | |
| } | |
| .color-card:hover { | |
| transform: translateY(-5px); | |
| } | |
| .color-card h3 { | |
| font-size: 1.5rem; | |
| margin-bottom: 10px; | |
| } | |
| .color-card p { | |
| font-size: 1rem; | |
| opacity: 0.9; | |
| } | |
| .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); } | |
| .resources { | |
| margin-bottom: 40px; | |
| } | |
| .resources h2 { | |
| color: #667eea; | |
| font-size: 2rem; | |
| margin-bottom: 20px; | |
| border-bottom: 3px solid #667eea; | |
| padding-bottom: 10px; | |
| } | |
| .resource-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 20px; | |
| } | |
| .resource-card { | |
| background: #f8f9fa; | |
| border-radius: 10px; | |
| padding: 25px; | |
| text-align: center; | |
| border: 2px solid #e9ecef; | |
| transition: all 0.3s ease; | |
| } | |
| .resource-card:hover { | |
| border-color: #667eea; | |
| transform: translateY(-3px); | |
| box-shadow: 0 5px 15px rgba(0,0,0,0.1); | |
| } | |
| .resource-card h3 { | |
| color: #667eea; | |
| margin-bottom: 10px; | |
| font-size: 1.3rem; | |
| } | |
| .resource-card p { | |
| margin-bottom: 15px; | |
| color: #666; | |
| } | |
| .resource-card a { | |
| display: inline-block; | |
| background: #667eea; | |
| color: white; | |
| padding: 10px 20px; | |
| text-decoration: none; | |
| border-radius: 25px; | |
| transition: background 0.3s ease; | |
| } | |
| .resource-card a:hover { | |
| background: #5a6fd8; | |
| } | |
| .discipline-databases { | |
| margin-bottom: 40px; | |
| } | |
| .discipline-databases h2 { | |
| color: #667eea; | |
| font-size: 2rem; | |
| margin-bottom: 12px; | |
| border-bottom: 3px solid #667eea; | |
| padding-bottom: 10px; | |
| } | |
| .discipline-databases .db-lead { | |
| color: #555; | |
| font-size: 1.05rem; | |
| margin-bottom: 20px; | |
| text-align: center; | |
| } | |
| .db-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 20px; | |
| } | |
| .db-card { | |
| background: #f8f9fa; | |
| border-radius: 10px; | |
| padding: 22px; | |
| text-align: center; | |
| border: 2px solid #e9ecef; | |
| transition: all 0.3s ease; | |
| } | |
| .db-card:hover { | |
| border-color: #667eea; | |
| box-shadow: 0 5px 15px rgba(0,0,0,0.08); | |
| } | |
| .db-card h3 { | |
| color: #667eea; | |
| margin-bottom: 10px; | |
| font-size: 1.25rem; | |
| } | |
| .db-card p { | |
| margin-bottom: 14px; | |
| color: #555; | |
| font-size: 0.98rem; | |
| line-height: 1.5; | |
| } | |
| .db-card .db-stats { | |
| margin-top: 12px; | |
| margin-bottom: 0; | |
| font-size: 0.88rem; | |
| color: #666; | |
| } | |
| .db-card .db-badge { | |
| display: inline-block; | |
| margin-bottom: 12px; | |
| padding: 4px 12px; | |
| border-radius: 999px; | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| letter-spacing: 0.02em; | |
| background: #fff3bf; | |
| color: #946c00; | |
| border: 1px solid #fcc419; | |
| } | |
| .db-actions { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| justify-content: center; | |
| align-items: center; | |
| margin-bottom: 6px; | |
| } | |
| .db-actions a { | |
| display: inline-block; | |
| background: #667eea; | |
| color: white; | |
| padding: 8px 16px; | |
| text-decoration: none; | |
| border-radius: 25px; | |
| font-size: 0.9rem; | |
| transition: background 0.3s ease; | |
| } | |
| .db-actions a:hover { | |
| background: #5a6fd8; | |
| } | |
| .db-card.under-development { | |
| background: #f1f3f5; | |
| border-style: dashed; | |
| border-color: #ced4da; | |
| } | |
| .db-card.under-development:hover { | |
| border-color: #adb5bd; | |
| } | |
| .db-card.under-development .db-actions a { | |
| background: #868e96; | |
| } | |
| .db-card.under-development .db-actions a:hover { | |
| background: #6c757d; | |
| } | |
| .footer { | |
| background: rgba(255,255,255,0.1); | |
| color: white; | |
| text-align: center; | |
| padding: 30px; | |
| border-radius: 15px; | |
| backdrop-filter: blur(10px); | |
| } | |
| .footer h3 { | |
| margin-bottom: 15px; | |
| font-size: 1.5rem; | |
| } | |
| .footer p { | |
| margin-bottom: 5px; | |
| opacity: 0.9; | |
| } | |
| .footer a { | |
| color: #ffd43b; | |
| text-decoration: none; | |
| } | |
| .footer a:hover { | |
| text-decoration: underline; | |
| } | |
| @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; | |
| } | |
| .db-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> | |
| <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> | |
| </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> | |
| <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> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="discipline-databases"> | |
| <h2>🗄️ Discipline databases</h2> | |
| <p class="db-lead">Live searchable tables on cloud storage where deployed; other disciplines use static batch pages while the database spine is built out.</p> | |
| <div class="db-grid"> | |
| <div class="db-card"> | |
| <h3>🧬 Biology</h3> | |
| <p>Biological process visualizations: <strong>GLMP</strong> covers biochemical and molecular processes; the <strong>Biology Database</strong> covers higher-level organismal pathways, mechanisms, and lab-style protocols.</p> | |
| <div class="db-actions"> | |
| <a href="https://storage.googleapis.com/regal-scholar-453620-r7-podcast-storage/biology-processes-database/biology-database-table.html" target="_blank" rel="noopener noreferrer">🗄️ Biology database table</a> | |
| <a href="https://storage.googleapis.com/regal-scholar-453620-r7-podcast-storage/biology-processes-database/collections/index.html" target="_blank" rel="noopener noreferrer">📚 Theme collections</a> | |
| <a href="https://huggingface.co/spaces/garywelz/glmp" target="_blank" rel="noopener noreferrer">🧬 GLMP (HF Space)</a> | |
| </div> | |
| <p class="db-stats">Biology database: 20 processes (3 groups: pathways, mechanisms, assay protocols) · GLMP: 50+ processes (biochemical / molecular)</p> | |
| </div> | |
| <div class="db-card under-development"> | |
| <h3>⚗️ Chemistry</h3> | |
| <span class="db-badge">Under development</span> | |
| <p>Comprehensive chemistry process diagrams across major branches. A public interactive database table (like Mathematics and Biology) is not live yet; batch HTML pages in this Space are the current entry point.</p> | |
| <div class="db-actions"> | |
| <a href="chemistry_index.html">Browse chemistry batches</a> | |
| </div> | |
| </div> | |
| <div class="db-card"> | |
| <h3>🔢 Mathematics</h3> | |
| <p>Algorithms, proof methods, dependency graphs, and computational processes — main table plus named collections (mathematicians, theorems) and a whole-of-mathematics graph view.</p> | |
| <div class="db-actions"> | |
| <a href="https://storage.googleapis.com/regal-scholar-453620-r7-podcast-storage/mathematics-processes-database/mathematics-database-table.html" target="_blank" rel="noopener noreferrer">🗄️ Mathematics database table</a> | |
| <a href="https://storage.googleapis.com/regal-scholar-453620-r7-podcast-storage/mathematics-processes-database/collections/index.html" target="_blank" rel="noopener noreferrer">📚 Named collections</a> | |
| <a href="https://storage.googleapis.com/regal-scholar-453620-r7-podcast-storage/mathematics-processes-database/whole-of-mathematics.html" target="_blank" rel="noopener noreferrer">🌐 Whole of mathematics</a> | |
| </div> | |
| <p class="db-stats">216 processes across 23 subcategories (see live table for the exact index)</p> | |
| </div> | |
| <div class="db-card under-development"> | |
| <h3>⚛️ Physics</h3> | |
| <span class="db-badge">Under development</span> | |
| <p>Physical processes including quantum mechanics, thermodynamics, and particle physics. Interactive cloud table coming; use static physics batches for now.</p> | |
| <div class="db-actions"> | |
| <a href="physics_index.html">Browse physics batches</a> | |
| </div> | |
| </div> | |
| <div class="db-card under-development"> | |
| <h3>💻 Computer Science</h3> | |
| <span class="db-badge">Under development</span> | |
| <p>Algorithms, software-engineering workflows, and computational processes. Interactive cloud table coming; use static CS batches for now.</p> | |
| <div class="db-actions"> | |
| <a href="computer_science_index.html">Browse computer science batches</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <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="validation_flowcharts/catalytic_hydrogenation_optimization.html">Catalytic Hydrogenation</a> | |
| <a href="validation_flowcharts/raft_polymerization_mechanism.html">RAFT Polymerization</a> | |
| <a href="validation_flowcharts/surface_catalysis_mechanism.html">Surface Catalysis</a> | |
| <a href="validation_flowcharts/electrochemical_oxygen_reduction.html">Electrochemical ORR</a> | |
| <a href="validation_flowcharts/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> | |
| </div> | |
| </div> | |
| </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> | |
| </body> | |
| </html> | |