Spaces:

garywelz
/

glmp

Running

App Files Files Community

garywelz commited on Aug 21, 2025

Commit

8809025

verified ·

1 Parent(s): 729be58

Upload 3 files

Browse files

Files changed (3) hide show

Yeast_Processes_as_Programs.html +42 -12
beta_galactosidase_2025_showcase.html +327 -0
yeast_top_10_processes.html +41 -11

Yeast_Processes_as_Programs.html CHANGED Viewed

@@ -245,17 +245,17 @@
                         <li style="background: #ff6b6b; color: white;">
                             🔴 <strong>Triggers:</strong> Environmental inputs and system calls
                         </li>
-                        <li style="background: #feca57; color: black;">
-                            🟡 <strong>Proteins:</strong> Software objects and function libraries
                         </li>
-                        <li style="background: #4ecdc4; color: black;">
-                            🟢 <strong>Enzymes:</strong> Processing algorithms and state machines
-                        </li>
-                        <li style="background: #45b7d1; color: white;">
                             🔵 <strong>Intermediates:</strong> Data structures and temporary variables
                         </li>
-                        <li style="background: #96ceb4; color: black;">
-                            🟢 <strong>Products:</strong> Program outputs and system responses
                         </li>
                     </ul>
                 </div>
@@ -915,8 +915,9 @@ graph TD
     </div>
     <script>
         mermaid.initialize({
-            startOnLoad: true,
             theme: 'default',
             flowchart: {
                 useMaxWidth: false,
@@ -933,10 +934,39 @@ graph TD
                 primaryTextColor: '#ffffff',
                 primaryBorderColor: '#ff6b6b',
                 lineColor: '#333333',
-                secondaryColor: '#feca57',
-                tertiaryColor: '#4ecdc4'
-            }
         });
     </script>
 </body>
 </html>

                         <li style="background: #ff6b6b; color: white;">
                             🔴 <strong>Triggers:</strong> Environmental inputs and system calls
                         </li>
+                        <li style="background: #ffd43b; color: black;">
+                            🟡 <strong>Enzymes:</strong> Processing algorithms and state machines
                         </li>
+                        <li style="background: #74c0fc; color: white;">
                             🔵 <strong>Intermediates:</strong> Data structures and temporary variables
                         </li>
+                        <li style="background: #51cf66; color: white;">
+                            🟢 <strong>Processing:</strong> Active cellular processes and reactions
+                        </li>
+                        <li style="background: #b197fc; color: white;">
+                            🟣 <strong>Products:</strong> Program outputs and system responses
                         </li>
                     </ul>
                 </div>
     </div>
     <script>
+        // Initialize Mermaid with enhanced compatibility for Hugging Face Spaces
         mermaid.initialize({
+            startOnLoad: false,
             theme: 'default',
             flowchart: {
                 useMaxWidth: false,
                 primaryTextColor: '#ffffff',
                 primaryBorderColor: '#ff6b6b',
                 lineColor: '#333333',
+                secondaryColor: '#ffd43b',
+                tertiaryColor: '#74c0fc'
+            },
+            securityLevel: 'loose',
+            logLevel: 1
         });
+        // Force re-render when DOM is loaded
+        document.addEventListener('DOMContentLoaded', function() {
+            console.log('DOM loaded, initializing Mermaid...');
+            if (typeof mermaid !== 'undefined') {
+                try {
+                    mermaid.init(undefined, '.mermaid');
+                    console.log('Mermaid initialized successfully');
+                } catch (error) {
+                    console.error('Mermaid initialization error:', error);
+                }
+            } else {
+                console.error('Mermaid library not loaded');
+            }
+        });
+        // Also try to render after a short delay
+        setTimeout(function() {
+            if (typeof mermaid !== 'undefined') {
+                try {
+                    mermaid.init(undefined, '.mermaid');
+                    console.log('Mermaid re-initialized after delay');
+                } catch (error) {
+                    console.error('Delayed Mermaid initialization error:', error);
+                }
+            }
+        }, 1000);
     </script>
 </body>
 </html>

beta_galactosidase_2025_showcase.html ADDED Viewed

	@@ -0,0 +1,327 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>β-Galactosidase System: Programming Framework Analysis (2025)</title>
+    <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
+    <style>
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            line-height: 1.6;
+            margin: 0;
+            padding: 0;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+        }
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            background: white;
+            box-shadow: 0 0 20px rgba(0,0,0,0.1);
+            border-radius: 10px;
+            overflow: hidden;
+        }
+        .header {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 2rem;
+            text-align: center;
+        }
+        .header h1 {
+            margin: 0;
+            font-size: 2.5rem;
+            font-weight: 300;
+        }
+        .content {
+            padding: 2rem;
+        }
+        .intro {
+            background: #f8f9fa;
+            padding: 2rem;
+            border-radius: 8px;
+            margin-bottom: 2rem;
+        }
+        .mermaid {
+            text-align: center;
+            margin: 2rem 0;
+            padding: 2rem;
+            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+            border-radius: 12px;
+            border: 2px solid #dee2e6;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+        }
+        .figure-caption {
+            text-align: center;
+            font-style: italic;
+            color: #666;
+            margin-top: 1rem;
+            font-size: 1.1rem;
+        }
+        .color-legend {
+            background: #f8f9fa;
+            padding: 2rem;
+            border-radius: 8px;
+            margin: 2rem 0;
+            border-left: 4px solid #667eea;
+        }
+        .color-legend h4 {
+            margin: 0 0 1rem 0;
+            color: #495057;
+        }
+        .legend-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 1rem;
+        }
+        .legend-item {
+            display: flex;
+            align-items: center;
+            padding: 0.5rem;
+            border-radius: 4px;
+            font-weight: 500;
+        }
+        .color-box {
+            width: 20px;
+            height: 20px;
+            border-radius: 3px;
+            margin-right: 10px;
+        }
+        .footer {
+            background: #495057;
+            color: white;
+            text-align: center;
+            padding: 2rem;
+            margin-top: 2rem;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🧬 β-Galactosidase System Analysis (2025)</h1>
+            <p>Programming Framework Methodology Demonstration</p>
+        </div>
+        <div class="content">
+            <div class="intro">
+                <h2>🎯 Case Study: β-Galactosidase Analysis (2025)</h2>
+                <p>The β-galactosidase system represents one of the most well-characterized examples of genetic regulation in molecular biology. Using modern tools and AI assistance, we can now create sophisticated and detailed visualizations that demonstrate the full computational complexity of the lac operon system.</p>
+                <p>This represents the current state of the Programming Framework methodology, showing how environmental inputs (lactose, glucose, energy status) are processed through regulatory logic gates to control gene expression and metabolic pathways.</p>
+            </div>
+            <div class="mermaid">
+graph TD
+    %% Environmental Inputs (Red)
+    A[Lactose in Environment] --> B[Lactose Transport]
+    C[Glucose in Environment] --> D[Glucose Transport]
+    E[Low Energy Status] --> F[Energy Stress Signal]
+    %% Structures & Objects (Yellow)
+    G[Lactose Permease LacY] --> H[Lactose Inside Cell]
+    I[Glucose Transporters] --> J[Glucose Inside Cell]
+    %% Decision Logic
+    H --> K{Is Lactose Present?}
+    J --> L{Is Glucose Present?}
+    F --> M{Is Energy Low?}
+    %% Regulatory States (Blue)
+    K -->|No| N[Lac Repressor Active]
+    K -->|Yes| O[Lac Repressor Inactive]
+    L -->|Yes| P[High Glucose Status]
+    L -->|No| Q[Low cAMP Levels]
+    M -->|Yes| R[High cAMP Levels]
+    M -->|No| S[Low cAMP Levels]
+    %% Regulatory Actions
+    N --> T[Repressor Binds Operator]
+    O --> U[Repressor Released]
+    T --> V[Transcription Blocked]
+    U --> W[Operator Free]
+    %% CAP Regulation
+    Q --> X[cAMP-CAP Complex]
+    R --> X
+    X --> Y{CAP Bound?}
+    W --> Z{Operator Free?}
+    %% Transcription Control
+    Y -->|Yes| AA[CAP Binds Promoter]
+    Y -->|No| BB[No CAP Binding]
+    Z -->|Yes| CC[RNA Polymerase Binding]
+    Z -->|No| DD[Transcription Blocked]
+    %% Transcription Levels
+    AA --> EE[Strong Transcription]
+    BB --> FF[Weak Transcription]
+    CC --> EE
+    DD --> GG[Transcription Blocked]
+    %% mRNA Synthesis
+    EE --> HH[lacZ mRNA Synthesis]
+    EE --> II[lacY mRNA Synthesis]
+    EE --> JJ[lacA mRNA Synthesis]
+    %% Protein Translation
+    HH --> KK[LacZ Translation]
+    II --> LL[LacY Translation]
+    JJ --> MM[LacA Translation]
+    %% Enzymes (Yellow)
+    KK --> NN[Beta-Galactosidase Enzyme]
+    LL --> OO[Lactose Permease]
+    MM --> PP[Galactoside Acetyltransferase]
+    %% Chemical Processing (Green)
+    NN --> QQ[Lactose Hydrolysis]
+    OO --> RR[Lactose Transport]
+    PP --> SS[Galactoside Modification]
+    %% Products (Violet)
+    QQ --> TT[Glucose + Galactose]
+    RR --> UU[Lactose Uptake]
+    SS --> VV[Detoxification]
+    %% Metabolic Integration
+    TT --> WW[Glycolysis]
+    UU --> XX[Lactose Processing]
+    VV --> YY[Cell Protection]
+    %% System Outputs
+    WW --> ZZ[Energy Production]
+    XX --> AAA[Lactose Consumption]
+    YY --> BBB[Cell Survival]
+    %% Feedback Loops
+    ZZ --> CCC[Energy Status Improved]
+    AAA --> DDD[Lactose Depletion]
+    BBB --> EEE[Reduced Energy Stress]
+    %% System Equilibrium
+    CCC --> FFF[Reduced Lactose Signal]
+    DDD --> FFF
+    EEE --> GGG[Maintained Homeostasis]
+    FFF --> GGG
+    GGG --> HHH[System Equilibrium]
+    %% Color Coding Legend
+    LEGEND1[🔴 Triggers & Conditions]
+    LEGEND2[🟡 Catalysts & Enzymes]
+    LEGEND3[🟢 Chemical Processing]
+    LEGEND4[🔵 Intermediates & States]
+    LEGEND5[🟣 Products & Outputs]
+    %% Legend Connections
+    LEGEND1 -.-> LEGEND2
+    LEGEND2 -.-> LEGEND3
+    LEGEND3 -.-> LEGEND4
+    LEGEND4 -.-> LEGEND5
+    %% Styling - Proper Color Coding
+    style A fill:#ff6b6b,color:#fff
+    style C fill:#ff6b6b,color:#fff
+    style E fill:#ff6b6b,color:#fff
+    style G fill:#ffd43b,color:#000
+    style I fill:#ffd43b,color:#000
+    style NN fill:#ffd43b,color:#000
+    style OO fill:#ffd43b,color:#000
+    style PP fill:#ffd43b,color:#000
+    style QQ fill:#51cf66,color:#fff
+    style RR fill:#51cf66,color:#fff
+    style SS fill:#51cf66,color:#fff
+    style K fill:#74c0fc,color:#fff
+    style L fill:#74c0fc,color:#fff
+    style M fill:#74c0fc,color:#fff
+    style N fill:#74c0fc,color:#fff
+    style O fill:#74c0fc,color:#fff
+    style P fill:#74c0fc,color:#fff
+    style Q fill:#74c0fc,color:#fff
+    style R fill:#74c0fc,color:#fff
+    style S fill:#74c0fc,color:#fff
+    style TT fill:#b197fc,color:#fff
+    style UU fill:#b197fc,color:#fff
+    style VV fill:#b197fc,color:#fff
+    style LEGEND1 fill:#ff6b6b,color:#fff
+    style LEGEND2 fill:#ffd43b,color:#000
+    style LEGEND3 fill:#51cf66,color:#fff
+    style LEGEND4 fill:#74c0fc,color:#fff
+    style LEGEND5 fill:#b197fc,color:#fff
+            </div>
+            <div class="figure-caption">
+                <strong>Figure 1:</strong> β-Galactosidase enzyme system analyzed using the Programming Framework methodology, demonstrating how biological processes can be systematically represented as computational flowcharts with standardized color coding. This comprehensive visualization shows environmental inputs, regulatory complexes and enzymes, intermediate states and logic gates, functional outputs, and key regulatory proteins, revealing the sophisticated computational logic underlying lactose metabolism in E. coli including CAP-cAMP regulation, protein synthesis, and dynamic feedback control.
+            </div>
+            <div class="color-legend">
+                <h4>🎨 Programming Framework Color Coding System</h4>
+                <div class="legend-grid">
+                    <div class="legend-item" style="background: #ff6b6b; color: white;">
+                        <div class="color-box" style="background: #ff6b6b;"></div>
+                        <span>🔴 <strong>Triggers & Conditions:</strong> Environmental inputs, cellular stress, developmental cues</span>
+                    </div>
+                    <div class="legend-item" style="background: #ffd43b; color: black;">
+                        <div class="color-box" style="background: #ffd43b;"></div>
+                        <span>🟡 <strong>Catalysts & Enzymes:</strong> Receptors, enzymes, structural proteins, signaling molecules</span>
+                    </div>
+                    <div class="legend-item" style="background: #51cf66; color: white;">
+                        <div class="color-box" style="background: #51cf66;"></div>
+                        <span>🟢 <strong>Chemical Processing:</strong> Catalytic activities, phosphorylation events, regulatory processes</span>
+                    </div>
+                    <div class="legend-item" style="background: #74c0fc; color: white;">
+                        <div class="color-box" style="background: #74c0fc;"></div>
+                        <span>🔵 <strong>Intermediates & States:</strong> Signaling complexes, metabolic intermediates, cellular structures</span>
+                    </div>
+                    <div class="legend-item" style="background: #b197fc; color: white;">
+                        <div class="color-box" style="background: #b197fc;"></div>
+                        <span>🟣 <strong>Products & Outputs:</strong> Completed processes, cellular responses, functional outcomes</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="footer">
+            <p><strong>Generated using the Programming Framework methodology</strong></p>
+            <p>This visualization demonstrates the computational nature of biological systems</p>
+        </div>
+    </div>
+    <script>
+        mermaid.initialize({
+            startOnLoad: true,
+            theme: 'default',
+            flowchart: {
+                useMaxWidth: false,
+                htmlLabels: true,
+                curve: 'linear',
+                nodeSpacing: 30,
+                rankSpacing: 40,
+                padding: 10
+            },
+            themeVariables: {
+                fontFamily: 'Arial, sans-serif',
+                fontSize: '14px',
+                primaryColor: '#ff6b6b',
+                primaryTextColor: '#ffffff',
+                primaryBorderColor: '#ff6b6b',
+                lineColor: '#333333',
+                secondaryColor: '#ffd43b',
+                tertiaryColor: '#74c0fc'
+            }
+        });
+    </script>
+</body>
+</html>

yeast_top_10_processes.html CHANGED Viewed

@@ -233,19 +233,19 @@
                     <span><strong>Triggers:</strong> Environmental signals, cellular stress, developmental cues</span>
                 </div>
                 <div class="color-item">
-                    <div class="color-box" style="background: #feca57;"></div>
-                    <span><strong>Proteins:</strong> Receptors, enzymes, structural proteins, signaling molecules</span>
-                </div>
-                <div class="color-item">
-                    <div class="color-box" style="background: #4ecdc4;"></div>
                     <span><strong>Enzymes:</strong> Catalytic activities, phosphorylation events, regulatory processes</span>
                 </div>
                 <div class="color-item">
-                    <div class="color-box" style="background: #45b7d1;"></div>
                     <span><strong>Intermediates:</strong> Signaling complexes, metabolic intermediates, cellular structures</span>
                 </div>
                 <div class="color-item">
-                    <div class="color-box" style="background: #96ceb4;"></div>
                     <span><strong>Products:</strong> Completed processes, cellular responses, functional outcomes</span>
                 </div>
             </div>
@@ -707,8 +707,9 @@ graph TD
     </div>
     <script>
         mermaid.initialize({
-            startOnLoad: true,
             theme: 'default',
             flowchart: {
                 useMaxWidth: false,
@@ -725,10 +726,39 @@ graph TD
                 primaryTextColor: '#ffffff',
                 primaryBorderColor: '#ff6b6b',
                 lineColor: '#333333',
-                secondaryColor: '#feca57',
-                tertiaryColor: '#4ecdc4'
-            }
         });
     </script>
 </body>
 </html>

                     <span><strong>Triggers:</strong> Environmental signals, cellular stress, developmental cues</span>
                 </div>
                 <div class="color-item">
+                    <div class="color-box" style="background: #ffd43b;"></div>
                     <span><strong>Enzymes:</strong> Catalytic activities, phosphorylation events, regulatory processes</span>
                 </div>
                 <div class="color-item">
+                    <div class="color-box" style="background: #74c0fc;"></div>
                     <span><strong>Intermediates:</strong> Signaling complexes, metabolic intermediates, cellular structures</span>
                 </div>
                 <div class="color-item">
+                    <div class="color-box" style="background: #51cf66;"></div>
+                    <span><strong>Processing:</strong> Active cellular processes, metabolic reactions, regulatory events</span>
+                </div>
+                <div class="color-item">
+                    <div class="color-box" style="background: #b197fc;"></div>
                     <span><strong>Products:</strong> Completed processes, cellular responses, functional outcomes</span>
                 </div>
             </div>
     </div>
     <script>
+        // Initialize Mermaid with enhanced compatibility for Hugging Face Spaces
         mermaid.initialize({
+            startOnLoad: false,
             theme: 'default',
             flowchart: {
                 useMaxWidth: false,
                 primaryTextColor: '#ffffff',
                 primaryBorderColor: '#ff6b6b',
                 lineColor: '#333333',
+                secondaryColor: '#ffd43b',
+                tertiaryColor: '#74c0fc'
+            },
+            securityLevel: 'loose',
+            logLevel: 1
+        });
+        // Force re-render when DOM is loaded
+        document.addEventListener('DOMContentLoaded', function() {
+            console.log('DOM loaded, initializing Mermaid...');
+            if (typeof mermaid !== 'undefined') {
+                try {
+                    mermaid.init(undefined, '.mermaid');
+                    console.log('Mermaid initialized successfully');
+                } catch (error) {
+                    console.error('Mermaid initialization error:', error);
+                }
+            } else {
+                console.error('Mermaid library not loaded');
+            }
         });
+        // Also try to render after a short delay
+        setTimeout(function() {
+            if (typeof mermaid !== 'undefined') {
+                try {
+                    mermaid.init(undefined, '.mermaid');
+                    console.log('Mermaid re-initialized after delay');
+                } catch (error) {
+                    console.error('Delayed Mermaid initialization error:', error);
+                }
+            }
+        }, 1000);
     </script>
 </body>
 </html>