Spaces:
Sleeping
Sleeping
| import streamlit as st | |
| import streamlit.components.v1 as components | |
| # -------------------------- | |
| # Mermaid Renderer Function | |
| # -------------------------- | |
| def render_mermaid(mermaid_code, height=300): | |
| """Render a mermaid diagram using an HTML snippet in a Streamlit component.""" | |
| html_code = f""" | |
| <html> | |
| <head> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js"></script> | |
| <style> | |
| body {{ | |
| background-color: white; | |
| font-family: sans-serif; | |
| }} | |
| </style> | |
| </head> | |
| <body> | |
| <div class="mermaid"> | |
| {mermaid_code} | |
| </div> | |
| <script> | |
| mermaid.initialize({{startOnLoad:true}}); | |
| </script> | |
| </body> | |
| </html> | |
| """ | |
| components.html(html_code, height=height) | |
| # -------------------------- | |
| # Markdown Outlines for Each Area | |
| # -------------------------- | |
| markdown_areas = { | |
| "1. 👥 Leadership Management Collaboration LeCo": r''' | |
| 1. 👥 Leadership Management Collaboration LeCo | |
| 🚀 Strategic and Cross-Functional Leadership - Global strategy, team coordination and vendor management | |
| 🤝 Team Building and Agile Collaboration - Coaching, agile processes and stakeholder management | |
| 💡 Domain Expertise and Innovation - Deep AI framework knowledge and product strategy | |
| ''', | |
| "2. 🔒 Security Compliance Reliability SeCo": r''' | |
| 2. 🔒 Security Compliance Reliability SeCo | |
| 🛡️ Security Operations and Incident Response - Incident management, pen testing and vulnerability assessment | |
| ✅ Compliance and Governance - Data quality, compliance policies and IAM | |
| 🔒 System Hardening and Automation - Secure HPC, ML, Python, Bash automation and cost optimization | |
| ''', | |
| "3. 📊 Data Engineering Analytics Data Governance DaEn": r''' | |
| 3. 📊 Data Engineering Analytics Data Governance DaEn | |
| 💧 Data Processing and Ingestion - Multi, modal data, event handling and ETL pipelines | |
| 📊 Analytics, Forecasting and Visualization - BI, dashboards and forecasting | |
| 📝 Data Governance and Quality - Modeling, warehousing and stakeholder communications | |
| ''', | |
| "4. 📢 Community OpenSource Communication CoOS": r''' | |
| 4. 📢 Community OpenSource Communication CoOS | |
| 📚 Technical Documentation and Demos - Code examples, demos and notebooks | |
| 💬 Community Engagement and Collaboration - Public speaking, social media and collaborations | |
| ''', | |
| "5. 📱 FullStack UI Mobile Product Development FuMo": r''' | |
| 5. 📱 FullStack UI Mobile Product Development FuMo | |
| 📱 Mobile and Web App Development - Full stack development, CI/CD and API design | |
| 🎨 UI, UX and Frontend Integration - React, Next.js, TypeScript and intuitive design | |
| 🔌 Backend and Cross-Platform Tools - Python, Node, cloud microservices and ML bridging | |
| ''', | |
| "6. 💻 Software Cloud MLOps Infrastructure SCMI": r''' | |
| 6. 💻 Software Cloud MLOps Infrastructure SCMI | |
| 🛠️ Developer Tooling and Observability - Full stack dev, debugging and SRE practices | |
| 🤖 ML Frameworks and Automation - Python APIs, PyTorch, Keras and Ray, Horovod | |
| 🔄 Data Pipelines and Processing - Spark, Airflow and ETL pipelines | |
| ☁️ Cloud and Infrastructure Provisioning - Kubernetes, Docker, Terraform and cloud integration | |
| ''', | |
| "7. 🤖 Machine Learning AI Model Development MLAI": r''' | |
| 7. 🤖 Machine Learning AI Model Development MLAI | |
| 🏛️ Large-Scale Architectures and Retrieval - Transformers, RAG and vector DBs | |
| ⚗️ Experimentation and Distributed Training - RL, quantization and ablation studies | |
| 📡 Application and API Development - Agentic AI, LLM inference and microservices | |
| 📈 Optimization and Monitoring - Performance tuning, scaling and reliability | |
| ''', | |
| "8. 🔧 Systems Infrastructure LowLevel Engineering SyIn": r''' | |
| 8. 🔧 Systems Infrastructure LowLevel Engineering SyIn | |
| 🐧 Hardware and OS Integration - Linux, embedded, C, C++ | |
| ⚙️ Performance and Tuning - Cross-layer tuning, throughput and load balancing | |
| 🤖 Advanced ML and Automation - Cross-team innovation, observability and ServiceNow | |
| 🚀 Distributed and HPC Deployment - Data center HPC, ML, GPU orchestration and multi-GPU pipelines | |
| ''', | |
| "9. 🎯 Specialized Domains Emerging Technologies SpDo": r''' | |
| 9. 🎯 Specialized Domains Emerging Technologies SpDo | |
| 🎥 Advanced CV and 3D Graphics - Neural rendering, reconstruction and graphics engines | |
| 🚗 Robotics and Autonomous Systems - Autonomous vehicles, sensor fusion and path planning | |
| 💻 HPC and Hardware Integration - GPU, SoC modeling, HPC networking and prototyping | |
| 🔢 AI Quantization and Inference - Quantization, in-browser inference and neural sparse models | |
| ''' | |
| } | |
| # -------------------------- | |
| # Mermaid Diagrams for Each Area | |
| # -------------------------- | |
| mermaid_areas = { | |
| "1. 👥 Leadership Management Collaboration LeCo": r''' | |
| graph LR | |
| LeCo["🗼LeCo👥 Leadership and Collaboration"] | |
| LeCo -->|🚀 Guides| LeCo1a["1. 🚀 Strategic and Cross-Functional Leadership - Global strategy, team coordination and vendor management"] | |
| LeCo -->|🤝 Supports| LeCo1b["2. 🤝 Team Building and Agile Collaboration - Coaching, agile processes and stakeholder management"] | |
| LeCo -->|💡 Innovates| LeCo1c["3. 💡 Domain Expertise and Innovation - Deep AI knowledge and product strategy"] | |
| ''', | |
| "2. 🔒 Security Compliance Reliability SeCo": r''' | |
| graph LR | |
| SeCo["👓SeCo🔒 Security and Compliance"] | |
| SeCo -->|🛡️ Protects| SeCo1["1. 🛡️ Security Operations and Incident Response - Incident management, pen testing and vulnerability assessment"] | |
| SeCo -->|✅ Regulates| SeCo2["2. ✅ Compliance and Governance - Data quality, compliance policies and IAM"] | |
| SeCo -->|🔒 Secures| SeCo3["3. 🔒 System Hardening and Automation - Secure HPC, ML, Python, Bash automation and cost optimization"] | |
| ''', | |
| "3. 📊 Data Engineering Analytics Data Governance DaEn": r''' | |
| graph LR | |
| DaEn["🪑DaEn📊 Data Engineering"] | |
| DaEn -->|💧 Processes| DaEn1["1. 💧 Data Processing and Ingestion - Multi-modal data, event handling and ETL"] | |
| DaEn -->|📊 Analyzes| DaEn2["2. 📊 Analytics, Forecasting and Visualization - BI, dashboards and forecasting"] | |
| DaEn -->|📝 Governs| DaEn3["3. 📝 Data Governance and Quality - Modeling, warehousing and stakeholder communications"] | |
| ''', | |
| "4. 📢 Community OpenSource Communication CoOS": r''' | |
| graph LR | |
| CoOS["🪟CoOS📢 Community OpenSource"] | |
| CoOS -->|📚 Documents| CoOS1["1. 📚 Technical Documentation and Demos - Code examples, demos and notebooks"] | |
| CoOS -->|💬 Engages| CoOS2["2. 💬 Community Engagement and Collaboration - Public speaking, social media and collaborations"] | |
| ''', | |
| "5. 📱 FullStack UI Mobile Product Development FuMo": r''' | |
| graph LR | |
| FuMo["✋FuMo📱 FullStack UI Mobile"] | |
| FuMo -->|📱 Develops| FuMo1["1. 📱 Mobile and Web App Development - Full stack development, CI/CD and API design"] | |
| FuMo -->|🎨 Designs| FuMo2["2. 🎨 UI, UX and Frontend Integration - React, Next.js, TypeScript and intuitive design"] | |
| FuMo -->|🔌 Connects| FuMo3["3. 🔌 Backend and Cross-Platform Tools - Python, Node, cloud microservices and ML bridging"] | |
| ''', | |
| "6. 💻 Software Cloud MLOps Infrastructure SCMI": r''' | |
| graph LR | |
| SoCM["🎲SoCM💻 Software Cloud MLOps"] | |
| SoCM -->|🛠️ Optimizes| SCMI1["1. 🛠️ Developer Tooling and Observability - Full stack dev, debugging and SRE practices"] | |
| SoCM -->|🤖 Automates| SCMI2["2. 🤖 ML Frameworks and Automation - Python APIs, PyTorch, Keras and Ray, Horovod"] | |
| SoCM -->|🔄 Pipelines| SCMI3["3. 🔄 Data Pipelines and Processing - Spark, Airflow and ETL pipelines"] | |
| SoCM -->|☁️ Deploys| SCMI4["4. ☁️ Cloud and Infrastructure Provisioning - Kubernetes, Docker, Terraform and cloud integration"] | |
| ''', | |
| "7. 🤖 Machine Learning AI Model Development MLAI": r''' | |
| graph LR | |
| AIML["☁️AIML🤖 AI Machine Learning"] | |
| AIML -->|🏛️ Structures| MLAI1["1. 🏛️ Large-Scale Architectures and Retrieval - Transformers, RAG and vector DBs"] | |
| AIML -->|⚗️ Experiments| MLAI2["2. ⚗️ Experimentation and Distributed Training - RL, quantization and ablation studies"] | |
| AIML -->|📡 Deploys| MLAI3["3. 📡 Application and API Development - Agentic AI, LLM inference and microservices"] | |
| AIML -->|📈 Optimizes| MLAI4["4. 📈 Optimization and Monitoring - Performance tuning, scaling and reliability"] | |
| ''', | |
| "8. 🔧 Systems Infrastructure LowLevel Engineering SyIn": r''' | |
| graph LR | |
| SyIn["🚪SyIn🔧 Systems Infrastructure"] | |
| SyIn -->|🐧 Integrates| SyIn1["1. 🐧 Hardware and OS Integration - Linux, embedded, C, C++"] | |
| SyIn -->|⚙️ Tunes| SyIn2["2. ⚙️ Performance and Tuning - Cross-layer tuning, throughput and load balancing"] | |
| SyIn -->|🤖 Enhances| SyIn3["3. 🤖 Advanced ML and Automation - Cross-team innovation, observability and ServiceNow"] | |
| SyIn -->|🚀 Scales| SyIn4["4. 🚀 Distributed and HPC Deployment - Data center HPC, ML, GPU orchestration and multi-GPU pipelines"] | |
| ''', | |
| "9. 🎯 Specialized Domains Emerging Technologies SpDo": r''' | |
| graph LR | |
| SpDo["🐱SpDo🎯 Specialized Domains"] | |
| SpDo -->|🎥 Visualizes| SpDo1["1. 🎥 Advanced CV and 3D Graphics - Neural rendering, reconstruction and graphics engines"] | |
| SpDo -->|🚗 Automates| SpDo2["2. 🚗 Robotics and Autonomous Systems - Autonomous vehicles, sensor fusion and path planning"] | |
| SpDo -->|💻 Computes| SpDo3["3. 💻 HPC and Hardware Integration - GPU, SoC modeling, HPC networking and prototyping"] | |
| SpDo -->|🔢 Quantizes| SpDo4["4. 🔢 AI Quantization and Inference - Quantization, in-browser inference and neural sparse models"] | |
| ''' | |
| } | |
| # -------------------------- | |
| # Markdown Sections | |
| # -------------------------- | |
| md_combined_outline = r''' | |
| # 📚 Hands On ML App. Dev. with Mixture of Experts and Multiagent Skills and State of Art ML Architecture | |
| 1. **🗼LeCo👥 Leadership and Collaboration : ** Strategic leadership and team management. | |
| 2. **👓SeCo🔒 Security and Compliance : ** Security operations, compliance, and system hardening. | |
| 3. **🪑DaEn📊 Data Engineering : ** Data processing, analytics, and governance. | |
| 4. **🪟CoOS📢 Community OpenSource : ** Community engagement, documentation, and collaboration. | |
| 5. **✋FuMo📱 FullStack UI Mobile : ** Mobile and web app development with ML integration. | |
| 6. **🎲SoCM💻 Software Cloud MLOps : ** Cloud infrastructure, ML frameworks, and automation. | |
| 7. **☁️AIML🤖 AI Machine Learning : ** Large–scale architectures, distributed training, and inference. | |
| 8. **🚪SyIn🔧 Systems Infrastructure : ** Hardware, OS, and distributed HPC deployments. | |
| 9. **🐱SpDo🎯 Specialized Domains : ** Advanced CV, robotics, HPC, and AI quantization. | |
| ''' | |
| md_submodels_outline = r''' | |
| ## 1. 👥 Leadership Management Collaboration LeCo | |
| 1. **🚀 Strategic and Cross-Functional Leadership - Global strategy, team coordination and vendor management** | |
| 2. **🤝 Team Building and Agile Collaboration - Coaching, agile processes and stakeholder management** | |
| 3. **💡 Domain Expertise and Innovation - Deep AI framework knowledge and product strategy** | |
| ## 2. 🔒 Security Compliance Reliability SeCo | |
| 1. **🛡️ Security Operations and Incident Response - Incident management, pen testing and vulnerability assessment** | |
| 2. **✅ Compliance and Governance - Data quality standards, compliance policies and IAM solutions** | |
| 3. **🔒 System Hardening and Automation - Secure HPC, ML, Python, Bash automation and cost optimization** | |
| ## 3. 📊 Data Engineering Analytics Data Governance DaEn | |
| 1. **💧 Data Processing and Ingestion - Multi, modal data, event handling and ETL pipelines** | |
| 2. **📊 Analytics, Forecasting and Visualization - BI, dashboards and forecasting** | |
| 3. **📝 Data Governance and Quality - Modeling, warehousing and stakeholder comms** | |
| ## 4. 📢 Community OpenSource Communication CoOS | |
| 1. **📚 Technical Documentation and Demos - Code examples, demos and notebooks** | |
| 2. **💬 Community Engagement and Collaboration - Public speaking, social media and collabs** | |
| ## 5. 📱 FullStack UI Mobile Product Development FuMo | |
| 1. **📱 Mobile and Web App Development - Full stack development, CI/CD and API design** | |
| 2. **🎨 UI, UX and Frontend Integration - React, Next.js, TypeScript and intuitive design** | |
| 3. **🔌 Backend and Cross-Platform Tools - Python, Node, cloud microservices and ML bridging** | |
| ## 6. 💻 Software Cloud MLOps Infrastructure SoCM | |
| 1. **🛠️ Developer Tooling and Observability - Full stack dev, debugging and SRE practices** | |
| 2. **🤖 ML Frameworks and Automation - Python APIs, PyTorch, Keras and Ray, Horovod** | |
| 3. **🔄 Data Pipelines and Processing - Spark, Airflow and ETL pipelines** | |
| 4. **☁️ Cloud and Infrastructure Provisioning - Kubernetes, Docker, Terraform and cloud integration** | |
| ## 7. 🤖 AI Machine Learning Model Development AIML | |
| 1. **🏛️ Large-Scale Architectures and Retrieval - Transformers, RAG and vector DBs** | |
| 2. **⚗️ Experimentation and Distributed Training - RL, quantization and ablation studies** | |
| 3. **📡 Application and API Development - Agentic AI, LLM inference and microservices** | |
| 4. **📈 Optimization and Monitoring - Performance tuning, scaling and reliability** | |
| ## 8. 🔧 Systems Infrastructure LowLevel Engineering SyIn | |
| 1. **🐧 Hardware and OS Integration - Linux, embedded, C, C++** | |
| 2. **⚙️ Performance and Tuning - Cross-layer tuning, throughput and load balancing** | |
| 3. **🤖 Advanced ML and Automation - Cross-team innovation, observability and ServiceNow** | |
| 4. **🚀 Distributed and HPC Deployment - Data center HPC, ML, GPU orchestration and multi-GPU pipelines** | |
| ## 9. 🎯 Specialized Domains Emerging Technologies SpDo | |
| 1. **🎥 Advanced CV and 3D Graphics - Neural rendering, reconstruction and graphics engines** | |
| 2. **🚗 Robotics and Autonomous Systems - Autonomous vehicles, sensor fusion and path planning** | |
| 3. **💻 HPC and Hardware Integration - GPU, SoC modeling, HPC networking and prototyping** | |
| 4. **🔢 AI Quantization and Inference - Quantization, in-browser inference and neural sparse models** | |
| ''' | |
| md_glossary = r''' | |
| # 📖 Glossary | |
| 1. **🔧 Systems Infrastructure SyIn:** Hardware and OS, level operations enabling computing environments. | |
| 2. **💻 Software Cloud MLOps SCMI:** Tools and processes for managing ML workflows and cloud infrastructures. | |
| 3. **🤖 Machine Learning AI MLAI:** Techniques and architectures for developing and deploying AI models. | |
| 4. **📊 Data Engineering DaEn:** Methods for processing, analyzing and governing data. | |
| 5. **🔒 Security and Compliance SeCo:** Practices ensuring system security and adherence to regulations. | |
| 6. **👥 Leadership and Collaboration LeCo:** Strategies for effective team management and cross-functional coordination. | |
| 7. **📱 FullStack UI Mobile FuMo:** End-to-end development of mobile and web interfaces integrating ML. | |
| 8. **🎯 Specialized Domains SpDo:** Focus areas in advanced tech such as computer vision, robotics and HPC. | |
| 9. **📢 Community OpenSource CoOS:** Engagement with open-source communities and technical education. | |
| 10. **HPC:** High Performance Computing; large-scale computational systems and clusters. | |
| 11. **LLM:** Large Language Models; deep learning models for natural language processing. | |
| 12. **MLOps:** Machine Learning Operations; practices for deploying and managing ML systems. | |
| ''' | |
| md_python_libraries = r''' | |
| # 🐍 Python Libraries Guide | |
| 1. **🔥 TensorFlow (tensorflow) -** Deep learning library for research and production. | |
| 2. **🤗 Huggingface Hub (huggingface_hub) -** Platform for sharing and accessing pre-trained models. | |
| 3. **🔄 Transformers (transformers) -** Library for NLP and model inference. | |
| 4. **🔥 Torch (torch) -** PyTorch library for dynamic deep learning. | |
| 5. **🚀 Streamlit (streamlit) -** Rapidly build interactive ML web apps. | |
| 6. **🎙️ Gradio (gradio) -** Create customizable web interfaces for ML models. | |
| 7. **🐼 Pandas (pandas) -** Data manipulation and analysis. | |
| 8. **🔢 NumPy (numpy) -** Numerical computing and array operations. | |
| 9. **💬 LangChain (langchain) -** Framework for building applications with language models. | |
| 10. **🤖 OpenAI (openai) -** API for accessing GPT models and AI services. | |
| 11. **🔑 Azure MSAL (msal) -** Authentication library for Azure services. | |
| 12. **⚙️ Scikit-learn (scikit-learn) -** Machine learning tools for data mining and analysis. | |
| 13. **📈 Matplotlib (matplotlib) -** Plotting library for data visualization. | |
| 14. **🔍 Seaborn (seaborn) -** Statistical data visualization. | |
| 15. **📊 Plotly (plotly) -** Interactive graphing library. | |
| 16. **📚 NLTK (nltk) -** Natural language processing toolkit. | |
| 17. **🧪 SciPy (scipy) -** Scientific and technical computing. | |
| 18. **⚡ FastAPI (fastapi) -** Build fast APIs for ML applications. | |
| 19. **🛠 Dask (dask) -** Parallel computing with task scheduling. | |
| 20. **🔗 Requests (requests) -** HTTP library for Python. | |
| ''' | |
| md_js_libraries = r''' | |
| # 💻 JavaScript Libraries Guide | |
| 1. **🔥 React (react) -** Library for building UI components. | |
| 2. **⚛️ Redux (redux) -** Predictable state container for JavaScript apps. | |
| 3. **🌐 Node.js (node) -** JavaScript runtime for building server-side applications. | |
| 4. **💻 Express (express) -** Web framework for Node.js. | |
| 5. **🔗 D3.js (d3) -** Library for dynamic, interactive data visualizations. | |
| 6. **📊 Chart.js (chart.js) -** Simple yet flexible charting library. | |
| 7. **🛠 Webpack (webpack) -** Module bundler for JavaScript applications. | |
| 8. **⚙️ Babel (babel) -** Transpiler for next-generation JavaScript. | |
| 9. **🚀 Next.js (next) -** React framework for server-side rendering. | |
| 10. **🎨 Tailwind CSS (tailwindcss) -** Utility-first CSS framework for rapid UI development. | |
| 11. **🌀 jQuery (jquery) -** DOM manipulation library. | |
| 12. **🔍 Lodash (lodash) -** Utility library for JavaScript. | |
| 13. **⏰ Moment.js (moment) -** Date library for parsing, validating and formatting dates. | |
| 14. **📡 Axios (axios) -** Promise-based HTTP client. | |
| 15. **💬 Socket.io (socket.io) -** Real-time communication library. | |
| 16. **🖼 Vue.js (vue) -** Progressive framework for building user interfaces. | |
| 17. **🅰️ Angular (angular) -** Platform for building mobile and desktop web applications. | |
| 18. **🔥 Ember.js (ember) -** Framework for creating ambitious web applications. | |
| 19. **📊 Mermaid.js (mermaid) -** Library for generating diagrams and flowcharts. | |
| 20. **🎇 Three.js (three) -** Library for creating 3D graphics in the browser. | |
| ''' | |
| md_picture_mnemonic = r''' | |
| # 🖼 Picture Mnemonic Outline | |
| 1. **🗼 Lighthouse -** Represents #1, a beacon of guidance. | |
| 2. **👓 Eyeglasses -** Symbolizes #2, two lenses for clarity. | |
| 3. **🪑 Stool -** Denotes #3, three legs for stability. | |
| 4. **🪟 Window -** Four panes, representing #4. | |
| 5. **✋ Hand -** Five fingers for #5. | |
| 6. **🎲 Dice -** Six sides symbolizing #6. | |
| 7. **☁️ Cloud -** For #7, light and airy. | |
| 8. **🚪 Gate -** Represents #8, opening new paths. | |
| 9. **🐱 Cat -** Nine lives, symbolic of #9. | |
| **Mnemonic:** A mnemonic is a memory aid using patterns or associations to enhance recall. Here, we apply the pegword technique by pairing each number with a vivid image to quickly remember complex information. | |
| *(Adapted from McCarthy, M. J. 2007. Mastering the INFORMATION AGE - A Course in Working Smarter, Thinking Better, and Learning Faster. [1])* | |
| [1] McCarthy, M. J. 2007. *Mastering the INFORMATION AGE - A Course in Working Smarter, Thinking Better, and Learning Faster*. Retrieved from https://www.example.com/reference | |
| ''' | |
| md_tweet = r''' | |
| # 🐦 Tweet Summary | |
| Unlock your AI mastery with our densified skill tree - from LC to SD - each node paired with powerful mnemonics and vivid visuals (🗼👓🪑🪟✋🎲☁️🚪🐱) to boost memory and innovation. #AI #ML #Learning #Innovation | |
| ''' | |
| # -------------------------- | |
| # Combined Mermaid Diagram (Overview) | |
| # -------------------------- | |
| combined_mermaid = r''' | |
| graph TD | |
| LeCo["1. 👥 Leadership and Collaboration - LeCo"] | |
| SeCo["2. 🔒 Security and Compliance - SeCo"] | |
| DaEn["3. 📊 Data Engineering - DaEn"] | |
| CoOS["4. 📢 Community Open Source - CoOS"] | |
| FuMo["5. 📱 FullStack UI Mobile - FuMo"] | |
| SoCM["6. 💻 Software Cloud MLOps - SoCM"] | |
| AIML["7. 🤖 AI Machine Learning - AIML"] | |
| SyIn["8. 🔧 Systems Infrastructure - SyIn"] | |
| SpDo["9. 🎯 Specialized Domains - SpDo"] | |
| LeCo -->|🧭 guides| SeCo | |
| LeCo -->|👑 leads| AIML | |
| LeCo -->|🤝 supports| SyIn | |
| SeCo ---|🔒 secures| AIML | |
| SeCo ---|🛡️ protects| SoCM | |
| AIML -->|💧 feeds| DaEn | |
| SoCM -->|⚡ powers| AIML | |
| FuMo ---|🔌 integrates with| SoCM | |
| FuMo -->|➕ extends to| SpDo | |
| SpDo ---|✨ enhances| AIML | |
| LeCo ---|👁️ oversees| SoCM | |
| CoOS ---|🤝 collaborates with| LeCo | |
| CoOS ---|🗣️ informs| DaEn | |
| SpDo ---|🔄 shares with| CoOS | |
| ''' | |
| # -------------------------- | |
| # Streamlit App Layout | |
| # -------------------------- | |
| def main(): | |
| st.set_page_config(page_title="Densified Skill Tree", layout="wide") | |
| # Optionally render combined outlines and submodels if desired: | |
| st.markdown(md_combined_outline, unsafe_allow_html=True) | |
| #st.markdown(md_submodels_outline, unsafe_allow_html=True) | |
| # For each numbered area, display its markdown outline first, then its mermaid diagram. | |
| for key in sorted(markdown_areas.keys(), key=lambda k: int(k.split('.')[0])): | |
| st.markdown(markdown_areas[key], unsafe_allow_html=True) | |
| if key in mermaid_areas: | |
| render_mermaid(mermaid_areas[key], height=350) | |
| # Render the combined mermaid diagram for an overview | |
| render_mermaid(combined_mermaid, height=850) | |
| # Display additional markdown sections | |
| st.markdown(md_glossary, unsafe_allow_html=True) | |
| st.markdown(md_python_libraries, unsafe_allow_html=True) | |
| st.markdown(md_js_libraries, unsafe_allow_html=True) | |
| st.markdown(md_picture_mnemonic, unsafe_allow_html=True) | |
| st.markdown(md_tweet, unsafe_allow_html=True) | |
| if __name__ == "__main__": | |
| main() | |