Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>29 Unique Activities Overview - Infographic 5</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&family=Archivo+Black&display=swap" rel="stylesheet"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%); | |
| padding: 2rem; | |
| } | |
| .infographic { | |
| background: white; | |
| border-radius: 24px; | |
| padding: 3rem; | |
| max-width: 1800px; | |
| margin: 0 auto; | |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1); | |
| } | |
| .header { | |
| text-align: center; | |
| margin-bottom: 3rem; | |
| } | |
| .title { | |
| font-size: 4rem; | |
| font-weight: 900; | |
| font-family: 'Archivo Black', sans-serif; | |
| background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| margin-bottom: 0.5rem; | |
| letter-spacing: -0.02em; | |
| } | |
| .subtitle { | |
| font-size: 1.5rem; | |
| color: #6c757d; | |
| font-weight: 600; | |
| } | |
| .legend-bar { | |
| display: flex; | |
| justify-content: center; | |
| gap: 2rem; | |
| flex-wrap: wrap; | |
| margin-bottom: 3rem; | |
| padding: 1.5rem; | |
| background: #f8f9fa; | |
| border-radius: 12px; | |
| } | |
| .legend-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .legend-color { | |
| width: 24px; | |
| height: 24px; | |
| border-radius: 6px; | |
| } | |
| .legend-text { | |
| font-size: 0.875rem; | |
| font-weight: 600; | |
| color: #495057; | |
| } | |
| .activities-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); | |
| gap: 1.5rem; | |
| margin-bottom: 3rem; | |
| } | |
| .activity-card { | |
| background: white; | |
| border: 3px solid; | |
| border-radius: 16px; | |
| padding: 1.5rem; | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| animation: slideUp 0.6s ease-out backwards; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| @keyframes slideUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .activity-card:hover { | |
| transform: translateY(-8px); | |
| box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15); | |
| } | |
| .activity-card.hlo-21 { border-color: #11998e; } | |
| .activity-card.hlo-22 { border-color: #38ef7d; } | |
| .activity-card.hlo-23 { border-color: #667eea; } | |
| .activity-card.hlo-24 { border-color: #f093fb; } | |
| .activity-card.hlo-25 { border-color: #4facfe; } | |
| .activity-card.hlo-26 { border-color: #43e97b; } | |
| .activity-card.hlo-27 { border-color: #fa709a; } | |
| .activity-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-start; | |
| gap: 1rem; | |
| margin-bottom: 1rem; | |
| } | |
| .activity-number { | |
| font-size: 2rem; | |
| font-weight: 900; | |
| color: #e9ecef; | |
| line-height: 1; | |
| font-family: 'Archivo Black', sans-serif; | |
| } | |
| .hlo-badge { | |
| padding: 0.375rem 0.75rem; | |
| border-radius: 20px; | |
| font-size: 0.75rem; | |
| font-weight: 700; | |
| color: white; | |
| white-space: nowrap; | |
| } | |
| .hlo-21 .hlo-badge { background: #11998e; } | |
| .hlo-22 .hlo-badge { background: #38ef7d; } | |
| .hlo-23 .hlo-badge { background: #667eea; } | |
| .hlo-24 .hlo-badge { background: #f093fb; } | |
| .hlo-25 .hlo-badge { background: #4facfe; } | |
| .hlo-26 .hlo-badge { background: #43e97b; } | |
| .hlo-27 .hlo-badge { background: #fa709a; } | |
| .activity-title { | |
| font-size: 1rem; | |
| font-weight: 700; | |
| color: #1a1a1a; | |
| line-height: 1.4; | |
| margin-bottom: 0.75rem; | |
| min-height: 2.8rem; | |
| } | |
| .activity-meta { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| font-size: 0.8rem; | |
| color: #6c757d; | |
| } | |
| .meta-row { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .meta-label { | |
| font-weight: 600; | |
| } | |
| .meta-value { | |
| font-weight: 700; | |
| color: #1a1a1a; | |
| } | |
| .program-tag { | |
| display: inline-block; | |
| background: #f8f9fa; | |
| border: 1px solid #dee2e6; | |
| padding: 0.25rem 0.5rem; | |
| border-radius: 4px; | |
| font-size: 0.7rem; | |
| color: #495057; | |
| margin-top: 0.5rem; | |
| } | |
| .centers-list { | |
| margin-top: 0.75rem; | |
| padding-top: 0.75rem; | |
| border-top: 1px solid #e9ecef; | |
| } | |
| .centers-label { | |
| font-size: 0.75rem; | |
| font-weight: 700; | |
| color: #6c757d; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| margin-bottom: 0.5rem; | |
| } | |
| .center-tags { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.375rem; | |
| } | |
| .center-tag { | |
| display: inline-block; | |
| background: linear-gradient(135deg, #e7f5ff 0%, #d0ebff 100%); | |
| border: 1px solid #a5d8ff; | |
| color: #1971c2; | |
| padding: 0.25rem 0.5rem; | |
| border-radius: 4px; | |
| font-size: 0.65rem; | |
| font-weight: 600; | |
| } | |
| .kpis-list { | |
| margin-top: 0.75rem; | |
| padding-top: 0.75rem; | |
| border-top: 1px solid #e9ecef; | |
| } | |
| .kpis-label { | |
| font-size: 0.75rem; | |
| font-weight: 700; | |
| color: #6c757d; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| margin-bottom: 0.5rem; | |
| } | |
| .kpi-items { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| } | |
| .kpi-item { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 0.5rem; | |
| font-size: 0.75rem; | |
| color: #495057; | |
| line-height: 1.5; | |
| } | |
| .kpi-bullet { | |
| color: #11998e; | |
| font-weight: 900; | |
| flex-shrink: 0; | |
| margin-top: 0.125rem; | |
| } | |
| .kpi-text { | |
| flex: 1; | |
| } | |
| .centers-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.25rem; | |
| background: #e7f5ff; | |
| color: #1971c2; | |
| padding: 0.25rem 0.5rem; | |
| border-radius: 4px; | |
| font-weight: 700; | |
| } | |
| .multi-center { | |
| background: #fff3bf; | |
| color: #d97706; | |
| } | |
| .budget-value { | |
| color: #11998e; | |
| font-weight: 900; | |
| } | |
| .summary-footer { | |
| background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); | |
| border-radius: 20px; | |
| padding: 3rem; | |
| color: white; | |
| text-align: center; | |
| } | |
| .summary-title { | |
| font-size: 2rem; | |
| font-weight: 900; | |
| margin-bottom: 2rem; | |
| } | |
| .summary-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 2rem; | |
| } | |
| .summary-stat { | |
| background: rgba(255, 255, 255, 0.15); | |
| backdrop-filter: blur(10px); | |
| border-radius: 12px; | |
| padding: 1.5rem; | |
| } | |
| .summary-value { | |
| font-size: 3rem; | |
| font-weight: 900; | |
| line-height: 1; | |
| margin-bottom: 0.5rem; | |
| } | |
| .summary-label { | |
| font-size: 0.875rem; | |
| opacity: 0.9; | |
| } | |
| .filter-buttons { | |
| display: flex; | |
| justify-content: center; | |
| gap: 0.75rem; | |
| flex-wrap: wrap; | |
| margin-bottom: 2rem; | |
| } | |
| .filter-section-title { | |
| text-align: center; | |
| font-size: 0.875rem; | |
| font-weight: 700; | |
| color: #6c757d; | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| margin-bottom: 1rem; | |
| margin-top: 1rem; | |
| } | |
| .center-filter-buttons { | |
| display: flex; | |
| justify-content: center; | |
| gap: 0.5rem; | |
| flex-wrap: wrap; | |
| margin-bottom: 2rem; | |
| } | |
| .filter-btn { | |
| padding: 0.75rem 1.5rem; | |
| border: 2px solid #dee2e6; | |
| background: white; | |
| border-radius: 24px; | |
| font-size: 0.875rem; | |
| font-weight: 700; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| color: #495057; | |
| } | |
| .filter-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); | |
| } | |
| .filter-btn.active { | |
| background: #11998e; | |
| border-color: #11998e; | |
| color: white; | |
| } | |
| .center-filter-btn { | |
| padding: 0.5rem 1rem; | |
| border: 2px solid #a5d8ff; | |
| background: white; | |
| border-radius: 20px; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| color: #1971c2; | |
| } | |
| .center-filter-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 12px rgba(79, 172, 254, 0.2); | |
| background: #e7f5ff; | |
| } | |
| .center-filter-btn.active { | |
| background: linear-gradient(135deg, #1971c2 0%, #4facfe 100%); | |
| border-color: #1971c2; | |
| color: white; | |
| } | |
| .activity-count { | |
| text-align: center; | |
| font-size: 1.125rem; | |
| color: #6c757d; | |
| margin-bottom: 1.5rem; | |
| font-weight: 600; | |
| } | |
| .hlo-description-box { | |
| background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); | |
| border: 3px solid; | |
| border-radius: 16px; | |
| padding: 2rem; | |
| margin-bottom: 2rem; | |
| display: none; | |
| animation: slideDown 0.4s ease-out; | |
| } | |
| @keyframes slideDown { | |
| from { | |
| opacity: 0; | |
| transform: translateY(-10px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .hlo-description-box.show { | |
| display: block; | |
| } | |
| .hlo-description-box.hlo-21 { border-color: #11998e; background: linear-gradient(135deg, rgba(17, 153, 142, 0.05) 0%, #ffffff 100%); } | |
| .hlo-description-box.hlo-22 { border-color: #38ef7d; background: linear-gradient(135deg, rgba(56, 239, 125, 0.05) 0%, #ffffff 100%); } | |
| .hlo-description-box.hlo-23 { border-color: #667eea; background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, #ffffff 100%); } | |
| .hlo-description-box.hlo-24 { border-color: #f093fb; background: linear-gradient(135deg, rgba(240, 147, 251, 0.05) 0%, #ffffff 100%); } | |
| .hlo-description-box.hlo-25 { border-color: #4facfe; background: linear-gradient(135deg, rgba(79, 172, 254, 0.05) 0%, #ffffff 100%); } | |
| .hlo-description-box.hlo-27 { border-color: #fa709a; background: linear-gradient(135deg, rgba(250, 112, 154, 0.05) 0%, #ffffff 100%); } | |
| .hlo-description-title { | |
| font-size: 1.5rem; | |
| font-weight: 900; | |
| color: #1a1a1a; | |
| margin-bottom: 1rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| } | |
| .hlo-description-icon { | |
| width: 48px; | |
| height: 48px; | |
| border-radius: 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| } | |
| .hlo-21 .hlo-description-icon { background: #11998e; } | |
| .hlo-22 .hlo-description-icon { background: #38ef7d; } | |
| .hlo-23 .hlo-description-icon { background: #667eea; } | |
| .hlo-24 .hlo-description-icon { background: #f093fb; } | |
| .hlo-25 .hlo-description-icon { background: #4facfe; } | |
| .hlo-27 .hlo-description-icon { background: #fa709a; } | |
| .hlo-description-text { | |
| font-size: 1rem; | |
| color: #495057; | |
| line-height: 1.8; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="infographic"> | |
| <div class="header"> | |
| <div class="title">AOW2 | Action Lab Activities</div> | |
| <div class="subtitle">Digital Transformation Accelerator Portfolio 2026</div> | |
| </div> | |
| <div class="legend-bar"> | |
| <div class="legend-item"> | |
| <div class="legend-color" style="background: #11998e;"></div> | |
| <div class="legend-text">HLO 2.1 - AI & Digital Tech</div> | |
| </div> | |
| <div class="legend-item"> | |
| <div class="legend-color" style="background: #38ef7d;"></div> | |
| <div class="legend-text">HLO 2.2 - Decision Support</div> | |
| </div> | |
| <div class="legend-item"> | |
| <div class="legend-color" style="background: #667eea;"></div> | |
| <div class="legend-text">HLO 2.3 - AI Phenotyping</div> | |
| </div> | |
| <div class="legend-item"> | |
| <div class="legend-color" style="background: #f093fb;"></div> | |
| <div class="legend-text">HLO 2.4 - Genebank AI</div> | |
| </div> | |
| <div class="legend-item"> | |
| <div class="legend-color" style="background: #4facfe;"></div> | |
| <div class="legend-text">HLO 2.5 - Advisory Solutions</div> | |
| </div> | |
| <div class="legend-item"> | |
| <div class="legend-color" style="background: #fa709a;"></div> | |
| <div class="legend-text">HLO 2.7 - Gender Innovation</div> | |
| </div> | |
| </div> | |
| <div class="filter-buttons"> | |
| <button class="filter-btn active" onclick="filterActivities('all')">All (29)</button> | |
| <button class="filter-btn" onclick="filterActivities('hlo-21')">HLO 2.1 (9)</button> | |
| <button class="filter-btn" onclick="filterActivities('hlo-22')">HLO 2.2 (5)</button> | |
| <button class="filter-btn" onclick="filterActivities('hlo-23')">HLO 2.3 (5)</button> | |
| <button class="filter-btn" onclick="filterActivities('hlo-24')">HLO 2.4 (2)</button> | |
| <button class="filter-btn" onclick="filterActivities('hlo-25')">HLO 2.5 (4)</button> | |
| <button class="filter-btn" onclick="filterActivities('hlo-27')">HLO 2.7 (4)</button> | |
| <button class="filter-btn" onclick="filterActivities('multi')">Multi-Center (15)</button> | |
| </div> | |
| <div class="filter-section-title">Filter by Center</div> | |
| <div class="center-filter-buttons" id="centerFilterButtons"> | |
| <!-- Center filter buttons will be dynamically generated --> | |
| </div> | |
| <div class="activity-count" id="activityCount">Showing 29 activities</div> | |
| <div class="hlo-description-box" id="hloDescriptionBox"> | |
| <div class="hlo-description-title"> | |
| <div class="hlo-description-icon"></div> | |
| <span id="hloDescriptionTitle"></span> | |
| </div> | |
| <div class="hlo-description-text" id="hloDescriptionText"></div> | |
| </div> | |
| <div class="activities-grid" id="activitiesGrid"></div> | |
| <div class="summary-footer"> | |
| <div class="summary-title">Portfolio Summary</div> | |
| <div class="summary-grid"> | |
| <div class="summary-stat"> | |
| <div class="summary-value">29</div> | |
| <div class="summary-label">Unique Activities</div> | |
| </div> | |
| <div class="summary-stat"> | |
| <div class="summary-value">15</div> | |
| <div class="summary-label">Multi-Center Collaborations</div> | |
| </div> | |
| <div class="summary-stat"> | |
| <div class="summary-value">7</div> | |
| <div class="summary-label">High-Level Outputs</div> | |
| </div> | |
| <div class="summary-stat"> | |
| <div class="summary-value">$3.6M</div> | |
| <div class="summary-label">Total Investment</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| const activities = [ | |
| { num: 1, title: "Geospatial Data Analytics for Science Programs/Accelerators", hlo: "hlo-21", program: "TBD", centers: 12, budget: 420000, centerNames: ["AfricaRice", "CIAT (Alliance)", "CIMMYT", "CIP", "ICARDA", "ICRISAT", "IFPRI", "IITA", "ILRI", "IRRI", "IWMI", "WorldFish"], kpis: ["Number of geospatial use cases, including datasets, documentation, and intended outcome"] }, | |
| { num: 2, title: "AI-Powered Digital Phenotyping for Wheat Breeding", hlo: "hlo-23", program: "Breeding for Tomorrow", centers: 1, budget: 204489, centerNames: ["CIMMYT"], kpis: ["Number of AI image-analysis models developed for wheat phenotypic traits using drone data"] }, | |
| { num: 3, title: "Digital Twin for Livestock and Pastoral Systems", hlo: "hlo-22", program: "Sustainable Animal and Aquatic Foods", centers: 1, budget: 200000, centerNames: ["ILRI"], kpis: ["Number of web platforms developed to display livestock digital phenotyping and pasture forecasting data", "Number of digital platforms tested integrating IoT sensors for animal health, movement, and heat stress monitoring", "Number of conference and working papers produced on digital twin innovations for livestock phenotyping and pastoralism"] }, | |
| { num: 4, title: "Digital Twin for Food System Innovation", hlo: "hlo-22", program: "Food Frontiers and Security", centers: 1, budget: 190000, centerNames: ["IWMI"], kpis: ["Number of knowledge products produced to operationalize the AI-enabled Digital Twin for multi-agency flood response", "Number of infrastructure setups deployed to support an AI flood analytics assistant for multi-actor flood response"] }, | |
| { num: 5, title: "Agentic AI for Policy Modeling and Decision Support", hlo: "hlo-25", program: "Policy Innovations", centers: 2, budget: 182107, centerNames: ["IFPRI", "IRRI"], kpis: ["Number of socially inclusive AI innovations developed for agricultural policymaking", "Number of fine-tuned AI models tested for agricultural policy evidence synthesis"] }, | |
| { num: 6, title: "GenebankAI: AI-Powered Germplasm Discovery", hlo: "hlo-24", program: "Genebanks", centers: 2, budget: 175348, centerNames: ["ICRISAT", "IRRI"], kpis: ["Number of genebanks deploying AI tools to make germplasm passport data AI-ready with biophysical descriptors", "Number of AI agent dashboards deployed for genebanks covering 6 crops for natural language germplasm querying", "Number of interactive genebank dashboards integrating passport, trait, and environmental data for germplasm discovery"] }, | |
| { num: 7, title: "Multimodal Field Annotation for Crop Phenotyping", hlo: "hlo-23", program: "Breeding for Tomorrow", centers: 2, budget: 170000, centerNames: ["Bioversity (Alliance)", "CIAT (Alliance)"], kpis: ["Number of prototype AI-powered tools enabling image–audio capture and multilingual automated speech recognition for field phenotyping", "Number of AI models and data pipelines for field-integrated sorghum annotation developed under FAIR-compliant protocols", "Number of open multimodal (voice + image) sorghum phenotyping datasets curated under FAIR protocols"] }, | |
| { num: 8, title: "AI Phenotyping Recommender for Variety Testing", hlo: "hlo-23", program: "Breeding for Tomorrow", centers: 2, budget: 170000, centerNames: ["Bioversity (Alliance)", "CIAT (Alliance)"], kpis: ["Number of prototype AI-powered tools for late-stage variety testing integrated with on-farm trial data pipelines", "Number of prototype AI-powered tools for late-stage variety testing integrated with agroclimatic datasets", "Number of functional AI-powered breeding tools developed and piloted for late-stage variety testing across data sources"] }, | |
| { num: 9, title: "Women's Engagement with Generative AI", hlo: "hlo-27", program: "Gender Equality and Inclusion", centers: 1, budget: 150000, centerNames: ["IFPRI"], kpis: ["Number of knowledge products produced on women farmers' engagement with generative AI-powered advisory systems"] }, | |
| { num: 10, title: "Real-Time Diet Diagnostics and Behavioral Nudging", hlo: "hlo-27", program: "Better Diets and Nutrition", centers: 1, budget: 138242, centerNames: ["IFPRI"], kpis: ["Number of protocols, knowledge products, and policy frameworks produced to operationalize AI-powered dietary data platform"] }, | |
| { num: 11, title: "KAZNET Digital Extension Investment Case", hlo: "hlo-27", program: "Sustainable Farming", centers: 1, budget: 121764, centerNames: ["ILRI"], kpis: ["Number of people trained for using geo-referenced livestock data collection tool to interface with climate forecasting systems", "Number of research briefs produced on integrating community knowledge into livestock data collection tool for dryland decision support"] }, | |
| { num: 12, title: "Digital Climate Advisory System (DCAS) for Extension", hlo: "hlo-25", program: "Climate Action", centers: 1, budget: 120000, centerNames: ["ICARDA"], kpis: ["Number of operational AI-enabled Digital Climate Advisory Systems (DCAS)", "Number of AI-powered drought forecast algorithms developed and deployed on climate information service platforms", "Number of people trained on using the AI-enabled digital climate advisory services"] }, | |
| { num: 13, title: "AI-Driven Genebank Management", hlo: "hlo-24", program: "Genebanks", centers: 1, budget: 118717, centerNames: ["IITA"], kpis: ["Number of AI-powered tools implemented for genebank data management for seed and clonal crops across African genebanks", "Number of individuals trained on AI-powered genebank tools for germplasm management of African seed and clonal crops"] }, | |
| { num: 14, title: "Inclusive NLP for Low-Resource Languages", hlo: "hlo-25", program: "Sustainable Farming", centers: 1, budget: 103682, centerNames: ["IFPRI"], kpis: ["Number of knowledge products produced on voice-based AI tools for agricultural extension in low-resource languages"] }, | |
| { num: 15, title: "Innovation Catalog and Demand Signaling System", hlo: "hlo-21", program: "Scaling for Impact", centers: 1, budget: 100261, centerNames: ["IWMI"], kpis: ["Number of operational platforms enabling access and analytics of water availability and crop demand datasets"] }, | |
| { num: 16, title: "Digital Twin for Real-Time Crop Growth Modeling", hlo: "hlo-22", program: "Sustainable Farming", centers: 1, budget: 100000, centerNames: ["CIP"], kpis: ["Number of decision support systems adopting a digital twin approach for near real-time growth monitoring of root and tuber crops"] }, | |
| { num: 17, title: "High-Frequency Dietary Data Collection System", hlo: "hlo-21", program: "Better Diets and Nutrition", centers: 1, budget: 100000, centerNames: ["IFPRI"], kpis: ["Number of AI and digital solutions piloted to support dietary scenario analysis for nutrition decision-makers"] }, | |
| { num: 18, title: "AI-Enabled Behavioral Experiments for Climate Decisions", hlo: "hlo-21", program: "Climate Action", centers: 1, budget: 100000, centerNames: ["IRRI"], kpis: ["Number of AI-based frameworks developed for behavioral experiments on climate-smart agricultural decision-making"] }, | |
| { num: 19, title: "PhenoFish: AI-Driven Aquaculture Phenotyping", hlo: "hlo-23", program: "Sustainable Animal and Aquatic Foods", centers: 1, budget: 85000, centerNames: ["WorldFish"], kpis: ["Number of fish breeding outputs integrated with AI analytics and linked to pedigree and performance databases", "Number of digital tools developed for standardized fish broodstock imaging systems", "Number of annotated cross-species fish phenotyping datasets curated for AI model training"] }, | |
| { num: 20, title: "Generative AI for Agro-Meteorological Advisories", hlo: "hlo-25", program: "Climate Action", centers: 1, budget: 80000, centerNames: ["ILRI"], kpis: ["Number of curated datasets and knowledge products collated to train AI-powered agro-met language models", "Number of digital solutions and machine learning models developed for AI-powered agro-met advisories", "Number of operational agro-advisory platforms that integrate AI-powered climate advisory models"] }, | |
| { num: 21, title: "AI-Powered High-Throughput Phenotyping", hlo: "hlo-23", program: "Breeding for Tomorrow", centers: 1, budget: 75832, centerNames: ["AfricaRice"], kpis: ["Number of UAV and image-based AI trait recognition models developed and integrated with rice breeding databases"] }, | |
| { num: 22, title: "Agroecology Similarity Assessment Platform (AFSA)", hlo: "hlo-21", program: "Multifunctional Landscapes", centers: 1, budget: 75000, centerNames: ["CIP"], kpis: ["Number of AI-powered research outputs produced through the root and tuber crop technology transfer program"] }, | |
| { num: 23, title: "AI-Powered Nutrient Management for Rice in Vietnam", hlo: "hlo-22", program: "Sustainable Farming", centers: 1, budget: 70000, centerNames: ["IRRI"], kpis: ["Number of integrated databases developed to curate rice value chain data in Vietnam for AI-powered nutrient management", "Number of operational AI-powered nutrient management advisory prototypes developed for rice production systems"] }, | |
| { num: 24, title: "AI Adoption Pathways for Women Farmers", hlo: "hlo-27", program: "Gender Equality and Inclusion", centers: 1, budget: 70000, centerNames: ["IRRI"], kpis: ["Number of knowledge products produced on women farmers' adoption pathways with generative AI advisory services"] }, | |
| { num: 25, title: "GIBSONIFY: Real-Time Dietary Diversity Monitoring", hlo: "hlo-21", program: "Better Diets and Nutrition", centers: 1, budget: 63066, centerNames: ["ICRISAT"], kpis: ["Number of FAIR-compliant digital nutrition tools developed with dietary recall and report-card modules"] }, | |
| { num: 26, title: "AI Agents for Water Management", hlo: "hlo-21", program: "Multifunctional Landscapes", centers: 1, budget: 50000, centerNames: ["IITA"], kpis: ["Number of new digital products and innovations co-created with digital innovation nodes"] }, | |
| { num: 27, title: "AI Co-Scientist Framework for Research", hlo: "hlo-21", program: "Sustainable Animal and Aquatic Foods", centers: 1, budget: 50000, centerNames: ["WorldFish"], kpis: ["Number of operational platforms deployed for access and analytics of aquatic scientific datasets"] }, | |
| { num: 28, title: "Precision Water Management System (PWMS)", hlo: "hlo-22", program: "Multifunctional Landscapes", centers: 1, budget: 48395, centerNames: ["ICARDA"], kpis: ["Number of AI-based drought forecast algorithms developed and deployed on climate information systems", "Number of APIs developed to disseminate AI-powered water management information to agricultural stakeholders"] }, | |
| { num: 29, title: "Intelligent Systems Advisory Tool (ISAT)", hlo: "hlo-25", program: "Sustainable Farming", centers: 1, budget: 45000, centerNames: ["ICRISAT"], kpis: ["Number of AI-powered agro-met advisory services developed using generative AI for crop-specific climate advisories", "Number of advisory services integrating agriculture-focused AI language models"] } | |
| ]; | |
| const hloDescriptions = { | |
| 'hlo-21': { | |
| title: 'HLO 2.1: AI Analytics, Remote Sensing, and Digital Technologies', | |
| text: 'Research integrates AI analytics, remote sensing, and digital technologies to enhance modeling, evidence generation, and environmental monitoring at scale.' | |
| }, | |
| 'hlo-22': { | |
| title: 'HLO 2.2: Decision Support Systems with Digital Twin Approaches', | |
| text: 'Decision support systems integrate (near-)real-time data, including digital twin approaches, to optimize resource use and improve management decisions.' | |
| }, | |
| 'hlo-23': { | |
| title: 'HLO 2.3: AI-Powered Phenotyping for Breeding', | |
| text: 'Breeding programs use AI-powered phenotyping to accelerate trait discovery and breeding cycles, improving genetic gains and product development.' | |
| }, | |
| 'hlo-24': { | |
| title: 'HLO 2.4: AI Tools for Genebank Management', | |
| text: 'Genebanks integrate AI-powered tools to improve germplasm management and access, enhancing conservation and utilization of genetic resources.' | |
| }, | |
| 'hlo-25': { | |
| title: 'HLO 2.5: AI-Powered Advisory Solutions', | |
| text: 'Advisory solutions use AI-powered tools, including language models and speech analytics, to improve farmer access to information and decision support.' | |
| }, | |
| 'hlo-27': { | |
| title: 'HLO 2.7: Human-Centered Digital Innovations for Gender Inclusion', | |
| text: 'Digital innovations use human-centered design and citizen science to enhance gender responsiveness and social inclusion in agricultural systems.' | |
| } | |
| }; | |
| let currentFilter = 'all'; | |
| let currentCenterFilter = 'all'; | |
| function createCenterFilters() { | |
| const centerFilterContainer = document.getElementById('centerFilterButtons'); | |
| // Get all unique centers from activities | |
| const allCenters = new Set(); | |
| activities.forEach(activity => { | |
| activity.centerNames.forEach(center => allCenters.add(center)); | |
| }); | |
| const sortedCenters = Array.from(allCenters).sort(); | |
| // Create "All Centers" button | |
| const allBtn = document.createElement('button'); | |
| allBtn.className = 'center-filter-btn active'; | |
| allBtn.textContent = 'All Centers'; | |
| allBtn.onclick = () => filterByCenter('all'); | |
| centerFilterContainer.appendChild(allBtn); | |
| // Create button for each center | |
| sortedCenters.forEach(center => { | |
| // Count activities for this center | |
| const count = activities.filter(a => a.centerNames.includes(center)).length; | |
| const btn = document.createElement('button'); | |
| btn.className = 'center-filter-btn'; | |
| btn.textContent = `${center} (${count})`; | |
| btn.onclick = () => filterByCenter(center); | |
| centerFilterContainer.appendChild(btn); | |
| }); | |
| } | |
| function filterByCenter(center) { | |
| currentCenterFilter = center; | |
| // Update button states | |
| document.querySelectorAll('.center-filter-btn').forEach(btn => { | |
| btn.classList.remove('active'); | |
| }); | |
| event.target.classList.add('active'); | |
| // Reset HLO filter to All when filtering by center | |
| if (center !== 'all') { | |
| currentFilter = 'all'; | |
| document.querySelectorAll('.filter-btn').forEach(btn => { | |
| btn.classList.remove('active'); | |
| }); | |
| document.querySelector('.filter-btn').classList.add('active'); | |
| } | |
| renderActivities(); | |
| } | |
| function renderActivities() { | |
| const grid = document.getElementById('activitiesGrid'); | |
| const descBox = document.getElementById('hloDescriptionBox'); | |
| const descTitle = document.getElementById('hloDescriptionTitle'); | |
| const descText = document.getElementById('hloDescriptionText'); | |
| grid.innerHTML = ''; | |
| let filteredActivities = activities; | |
| // Apply HLO or multi-center filter first | |
| if (currentFilter !== 'all') { | |
| if (currentFilter === 'multi') { | |
| filteredActivities = activities.filter(a => a.centers > 1); | |
| } else { | |
| filteredActivities = activities.filter(a => a.hlo === currentFilter); | |
| } | |
| } | |
| // Then apply center filter | |
| if (currentCenterFilter !== 'all') { | |
| filteredActivities = filteredActivities.filter(a => | |
| a.centerNames.includes(currentCenterFilter) | |
| ); | |
| } | |
| // Show/hide HLO description | |
| if (currentFilter !== 'all' && currentFilter !== 'multi' && hloDescriptions[currentFilter]) { | |
| const hloDesc = hloDescriptions[currentFilter]; | |
| descBox.className = `hlo-description-box ${currentFilter} show`; | |
| descTitle.textContent = hloDesc.title; | |
| descText.textContent = hloDesc.text; | |
| } else { | |
| descBox.className = 'hlo-description-box'; | |
| } | |
| document.getElementById('activityCount').textContent = | |
| `Showing ${filteredActivities.length} ${filteredActivities.length === 1 ? 'activity' : 'activities'}`; | |
| filteredActivities.forEach((activity, index) => { | |
| const card = document.createElement('div'); | |
| card.className = `activity-card ${activity.hlo}`; | |
| card.style.animationDelay = `${index * 0.03}s`; | |
| const hloText = activity.hlo.replace('hlo-', 'HLO 2.').replace('21', '1').replace('22', '2') | |
| .replace('23', '3').replace('24', '4').replace('25', '5').replace('27', '7'); | |
| // Generate center tags | |
| const centerTagsHtml = activity.centerNames.map(center => | |
| `<span class="center-tag">${center}</span>` | |
| ).join(''); | |
| // Generate KPI items | |
| const kpiItemsHtml = activity.kpis.map(kpi => | |
| `<div class="kpi-item"> | |
| <span class="kpi-bullet">▸</span> | |
| <span class="kpi-text">${kpi}</span> | |
| </div>` | |
| ).join(''); | |
| card.innerHTML = ` | |
| <div class="activity-header"> | |
| <div class="activity-number">${activity.num}</div> | |
| <div class="hlo-badge">${hloText}</div> | |
| </div> | |
| <div class="activity-title">${activity.title}</div> | |
| <div class="activity-meta"> | |
| <div class="meta-row"> | |
| <span class="meta-label">Budget:</span> | |
| <span class="budget-value">$${activity.budget.toLocaleString()}</span> | |
| </div> | |
| <div class="meta-row"> | |
| <span class="meta-label">Centers:</span> | |
| <span class="centers-badge ${activity.centers > 1 ? 'multi-center' : ''}"> | |
| ${activity.centers > 1 ? '🤝 ' : ''}${activity.centers} center${activity.centers > 1 ? 's' : ''} | |
| </span> | |
| </div> | |
| <div class="program-tag">${activity.program}</div> | |
| </div> | |
| <div class="centers-list"> | |
| <div class="centers-label">${activity.centers > 1 ? 'Collaborating Centers' : 'Center'}</div> | |
| <div class="center-tags"> | |
| ${centerTagsHtml} | |
| </div> | |
| </div> | |
| <div class="kpis-list"> | |
| <div class="kpis-label">Key Deliverables (KPIs)</div> | |
| <div class="kpi-items"> | |
| ${kpiItemsHtml} | |
| </div> | |
| </div> | |
| `; | |
| grid.appendChild(card); | |
| }); | |
| } | |
| function filterActivities(filter) { | |
| currentFilter = filter; | |
| // Reset center filter when changing HLO filter | |
| if (filter !== 'all') { | |
| currentCenterFilter = 'all'; | |
| document.querySelectorAll('.center-filter-btn').forEach(btn => { | |
| btn.classList.remove('active'); | |
| }); | |
| document.querySelector('.center-filter-btn').classList.add('active'); | |
| } | |
| // Update button states | |
| document.querySelectorAll('.filter-btn').forEach(btn => { | |
| btn.classList.remove('active'); | |
| }); | |
| event.target.classList.add('active'); | |
| renderActivities(); | |
| } | |
| // Initial render | |
| createCenterFilters(); | |
| renderActivities(); | |
| </script> | |
| </body> | |
| </html> |