From d22aa8cec07d154e320bbe28de086cd6737e4479 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Thu, 18 Sep 2025 14:54:29 +0000 Subject: [PATCH 1/3] feat: Integrate GBIF API to display biodiversity data This commit integrates the Global Biodiversity Information Facility (GBIF) API to fetch and display species occurrence data. - A new backend endpoint `/api/gbif_occurrences` is added to the Flask application to fetch the 5 most recent species occurrences from Togo. - The frontend is updated with a new section to display the data, including the species name and a link to the occurrence on the GBIF website. - The README.md is updated to document the new API integration. --- README.md | 4 ++++ eco_project/backend/app.py | 24 ++++++++++++++++++++++++ eco_project/frontend/index.html | 5 +++++ eco_project/frontend/script.js | 29 +++++++++++++++++++++++++++++ 4 files changed, 62 insertions(+) diff --git a/README.md b/README.md index a264c39..577d036 100644 --- a/README.md +++ b/README.md @@ -14,6 +14,10 @@ This project is a web application designed to promote environmental protection a This application integrates with the World Bank API to fetch and display data on environmental indicators. Currently, it displays the forest area percentage for Brazil, Indonesia, and the Democratic Republic of Congo. +## GBIF API Integration + +This application also integrates with the Global Biodiversity Information Facility (GBIF) API to fetch and display species occurrence data. Currently, it displays the 5 most recent occurrences in Togo. + ## Usage To run this project locally, you will need to have Python and Flask installed. diff --git a/eco_project/backend/app.py b/eco_project/backend/app.py index 7fdad93..1bd4e0d 100644 --- a/eco_project/backend/app.py +++ b/eco_project/backend/app.py @@ -36,5 +36,29 @@ def forest_area(): except requests.exceptions.RequestException as e: return jsonify({"error": str(e)}), 500 +@app.route('/api/gbif_occurrences') +def gbif_occurrences(): + # GBIF API URL for occurrences in Togo + url = "https://api.gbif.org/v1/occurrence/search?country=TG&limit=5" + + try: + response = requests.get(url) + data = response.json() + + if data and data['results']: + # Clean and format the data + formatted_data = [] + for entry in data['results']: + formatted_data.append({ + 'species': entry.get('scientificName', 'N/A'), + 'url': f"https://www.gbif.org/occurrence/{entry['key']}" + }) + return jsonify(formatted_data) + else: + return jsonify({"error": "No data found for the selected criteria."}), 404 + + except requests.exceptions.RequestException as e: + return jsonify({"error": str(e)}), 500 + if __name__ == '__main__': app.run(debug=True) diff --git a/eco_project/frontend/index.html b/eco_project/frontend/index.html index 320a601..b5d8708 100644 --- a/eco_project/frontend/index.html +++ b/eco_project/frontend/index.html @@ -28,6 +28,11 @@

Development Projects

Tracking and managing sustainable development goals. Here is some data from the World Bank:

+
+

Biodiversity in Togo

+

Recent species occurrences in Togo from the Global Biodiversity Information Facility (GBIF):

+
+

AI Assistant

Your personal guide to environmental protection.

diff --git a/eco_project/frontend/script.js b/eco_project/frontend/script.js index 4e14520..7231929 100644 --- a/eco_project/frontend/script.js +++ b/eco_project/frontend/script.js @@ -3,9 +3,12 @@ document.addEventListener('DOMContentLoaded', () => { const chatInput = document.getElementById('chat-input'); const chatWindow = document.getElementById('chat-window'); const worldBankDataContainer = document.getElementById('world-bank-data'); + const gbifOccurrencesContainer = document.getElementById('gbif-occurrences'); // Fetch and display World Bank data on page load fetchWorldBankData(); + // Fetch and display GBIF data on page load + fetchGbifData(); sendBtn.addEventListener('click', () => { const userInput = chatInput.value; @@ -52,4 +55,30 @@ document.addEventListener('DOMContentLoaded', () => { worldBankDataContainer.innerHTML = `

Error fetching data: ${error.message}

`; } } + + async function fetchGbifData() { + try { + const response = await fetch('/api/gbif_occurrences'); + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + const data = await response.json(); + + if (data.error) { + gbifOccurrencesContainer.innerHTML = `

Error fetching data: ${data.error}

`; + return; + } + + let html = ''; + + gbifOccurrencesContainer.innerHTML = html; + + } catch (error) { + gbifOccurrencesContainer.innerHTML = `

Error fetching data: ${error.message}

`; + } + } }); From 37c6adbaf9309c8448d058fe70edefac04d28cb7 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Thu, 18 Sep 2025 15:11:36 +0000 Subject: [PATCH 2/3] feat: Add GBIF country search functionality This commit adds a feature to search for species occurrences by country using the GBIF API. - The backend endpoint `/api/gbif_occurrences` is updated to accept a `country` parameter. - The frontend is updated with a search box to allow users to enter a country code and view the results. - The README.md is updated to document the new search functionality. --- README.md | 2 +- eco_project/backend/app.py | 9 ++++++--- eco_project/frontend/index.html | 6 ++++-- eco_project/frontend/script.js | 17 +++++++++++++---- 4 files changed, 24 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 577d036..3025b38 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ This application integrates with the World Bank API to fetch and display data on ## GBIF API Integration -This application also integrates with the Global Biodiversity Information Facility (GBIF) API to fetch and display species occurrence data. Currently, it displays the 5 most recent occurrences in Togo. +This application also integrates with the Global Biodiversity Information Facility (GBIF) API to fetch and display species occurrence data. Users can search for the 5 most recent occurrences in any country by providing a 2-letter country code. By default, it displays the data for Togo. ## Usage diff --git a/eco_project/backend/app.py b/eco_project/backend/app.py index 1bd4e0d..de3affc 100644 --- a/eco_project/backend/app.py +++ b/eco_project/backend/app.py @@ -1,4 +1,4 @@ -from flask import Flask, jsonify +from flask import Flask, jsonify, request import requests app = Flask(__name__) @@ -38,8 +38,11 @@ def forest_area(): @app.route('/api/gbif_occurrences') def gbif_occurrences(): - # GBIF API URL for occurrences in Togo - url = "https://api.gbif.org/v1/occurrence/search?country=TG&limit=5" + # Get country code from request arguments, default to Togo (TG) + country_code = request.args.get('country', 'TG') + + # GBIF API URL for occurrences + url = f"https://api.gbif.org/v1/occurrence/search?country={country_code}&limit=5" try: response = requests.get(url) diff --git a/eco_project/frontend/index.html b/eco_project/frontend/index.html index b5d8708..94f1a39 100644 --- a/eco_project/frontend/index.html +++ b/eco_project/frontend/index.html @@ -29,8 +29,10 @@

Development Projects

-

Biodiversity in Togo

-

Recent species occurrences in Togo from the Global Biodiversity Information Facility (GBIF):

+

Biodiversity Search

+

Enter a 2-letter country code (e.g., TG for Togo, US for United States) to search for recent species occurrences from the Global Biodiversity Information Facility (GBIF).

+ +
diff --git a/eco_project/frontend/script.js b/eco_project/frontend/script.js index 7231929..afdcf69 100644 --- a/eco_project/frontend/script.js +++ b/eco_project/frontend/script.js @@ -4,11 +4,13 @@ document.addEventListener('DOMContentLoaded', () => { const chatWindow = document.getElementById('chat-window'); const worldBankDataContainer = document.getElementById('world-bank-data'); const gbifOccurrencesContainer = document.getElementById('gbif-occurrences'); + const countryCodeInput = document.getElementById('country-code-input'); + const searchGbifBtn = document.getElementById('search-gbif-btn'); // Fetch and display World Bank data on page load fetchWorldBankData(); - // Fetch and display GBIF data on page load - fetchGbifData(); + // Fetch and display GBIF data for Togo on page load + fetchGbifData('TG'); sendBtn.addEventListener('click', () => { const userInput = chatInput.value; @@ -23,6 +25,13 @@ document.addEventListener('DOMContentLoaded', () => { } }); + searchGbifBtn.addEventListener('click', () => { + const countryCode = countryCodeInput.value.trim().toUpperCase(); + if (countryCode) { + fetchGbifData(countryCode); + } + }); + function appendMessage(message) { const messageElement = document.createElement('p'); messageElement.textContent = message; @@ -56,9 +65,9 @@ document.addEventListener('DOMContentLoaded', () => { } } - async function fetchGbifData() { + async function fetchGbifData(countryCode) { try { - const response = await fetch('/api/gbif_occurrences'); + const response = await fetch(`/api/gbif_occurrences?country=${countryCode}`); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } From 90345f38715b3272d49a31511970612a3118410e Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Thu, 18 Sep 2025 15:31:07 +0000 Subject: [PATCH 3/3] feat: Add GBIF country search functionality This commit adds a feature to search for species occurrences by country using the GBIF API. - The backend endpoint `/api/gbif_occurrences` is updated to accept a `country` parameter. - The frontend is updated with a search box to allow users to enter a country code and view the results. - The README.md is updated to document the new search functionality.