diff --git a/components/infoPage/infoBox/InfoAI.tsx b/components/infoPage/infoBox/InfoAI.tsx index ef4a696..b6d3f9e 100644 --- a/components/infoPage/infoBox/InfoAI.tsx +++ b/components/infoPage/infoBox/InfoAI.tsx @@ -2,7 +2,7 @@ import React from 'react' const InfoAI = () => { return ( -
+

How to identify an AI generated image

FloodGen uses AI to generate photorealistic images of potential flooding scenarios to raise awareness, bolster community preparedness, and support local governments resilience strategies. The street view images are transformed with a generative artificial intelligence process called CycleGAN to depict projected flood scenarios. CycleGAN is an image-to-image translation model that takes an input of a normal street view image and reprocesses the pixels to illustrate an image with flooding.

All FloodGen generated imagery that is created with the use of generative artificial intelligence includes a FloodGen logo, located on the bottom-right corner of the image. View the image below for a few more tips on how to identify an AI generated flood image:

diff --git a/components/infoPage/infoBox/InfoAbout.tsx b/components/infoPage/infoBox/InfoAbout.tsx index 4f9a919..cca5bd3 100644 --- a/components/infoPage/infoBox/InfoAbout.tsx +++ b/components/infoPage/infoBox/InfoAbout.tsx @@ -8,7 +8,7 @@ type Props = { const InfoAbout = ({ clickHandler }: Props) => { return ( <> -
+

Today, 1.3 million New York City residents live within or directly adjacent to the floodplain.1 Flood damage is expensive, extensive, and oftentimes predictable. Maps of predicted flooding are helpful planning tools, but aerial views distance viewers from its potential impact. If we show the reality of predicted flooding through photorealistic imagery, could people be more prepared?

FloodGen is an advocacy tool that uses generative artificial intelligence (GenAI) to create photorealistic images of predicted flooding. Projected flood imagery from FloodGen can be integrated within community engagement strategies to:

@@ -26,7 +26,7 @@ const InfoAbout = ({ clickHandler }: Props) => {

Explore flood prone neighborhoods in NYC

- +

Visualize flooding street view with AI generated flooding images

diff --git a/components/infoPage/infoBox/InfoBox.tsx b/components/infoPage/infoBox/InfoBox.tsx index 42593fa..bbbe844 100644 --- a/components/infoPage/infoBox/InfoBox.tsx +++ b/components/infoPage/infoBox/InfoBox.tsx @@ -56,18 +56,21 @@ const InfoBox = () => { {/* */}
-
selectedClickHandler("About")}>About
-
Introduction
-
selectedClickHandler("AI")}>How to identify an AI generated image
-
selectedClickHandler("Credit")}>Credits
-
selectedClickHandler("Contact")}>Contact
+
selectedClickHandler("About")}>About
+
Introduction
+
selectedClickHandler("AI")}>How to identify an AI generated image
+
selectedClickHandler("Credit")}>Credits
+
selectedClickHandler("Contact")}>Contact
- { - selected === "About" ? boxShownClickHandler(false)} /> : - selected === "AI" ? : - selected === "Contact" ? : - - } +
+ { + selected === "About" ? boxShownClickHandler(false)} /> : + selected === "AI" ? : + selected === "Contact" ? : + + } +
+
diff --git a/components/infoPage/infoBox/InfoContact.tsx b/components/infoPage/infoBox/InfoContact.tsx index aa27c20..4468989 100644 --- a/components/infoPage/infoBox/InfoContact.tsx +++ b/components/infoPage/infoBox/InfoContact.tsx @@ -2,7 +2,7 @@ import React from 'react' const InfoContact = () => { return ( -
+
diff --git a/components/infoPage/infoBox/InfoCredit.tsx b/components/infoPage/infoBox/InfoCredit.tsx index ed39cb8..bc4aa8e 100644 --- a/components/infoPage/infoBox/InfoCredit.tsx +++ b/components/infoPage/infoBox/InfoCredit.tsx @@ -2,7 +2,7 @@ import React from 'react' const InfoCredit = () => { return ( -
+

BetaNYC

BetaNYC is a civic organization dedicated to improving lives in New York through civic design, technology, and data. With an aim to improve access to public interest technology, the Civic Innovation Lab at BetaNYC provides assistance with research, data analysis, and data visualization. This project was created by the Civic Innovation Lab at BetaNYC, with the initial research into the flood image generator model led by Vaishali Talwar.

@@ -13,38 +13,38 @@ const InfoCredit = () => {
-
+

Data Source

LiDAR Point Cloud

-

Cyclomedia. 2023. Cyclomedia LiDAR Point Cloud v21.13.2. Accessed March 13, 2024. [link to website]

+

Cyclomedia. 2023. Cyclomedia LiDAR Point Cloud v21.13.2. Accessed March 13, 2024. [link to website]

Street View Flood Height Threshold

-

BetaNYC. 2022. NYC Batch Geocoder. Accessed March 13, 2024. [link to website]

+

BetaNYC. 2022. NYC Batch Geocoder. Accessed March 13, 2024. [link to website]

ClimateGAN Cycle-GAN Image Generator

-

ClimateGAN: Raising Climate Change Awareness by Generating Images of Floods. Schmidt et al. International Conference on Learning Representations, 2022. [link to paper] [link to GitHub repository]

+

ClimateGAN: Raising Climate Change Awareness by Generating Images of Floods. Schmidt et al. International Conference on Learning Representations, 2022. [link to paper] [link to GitHub repository]

Coastal Flooding

-

Federal Emergency Management Agency. Preliminary Flood Insurance Rate Maps (PFIRMs) 2015. Accessed February 9, 2024. [link to dataset]

+

Federal Emergency Management Agency. Preliminary Flood Insurance Rate Maps (PFIRMs) 2015. Accessed February 9, 2024. [link to dataset]

Stormwater Flooding

-

Flood 2050 Sea Level Rise. Accessed January 31, 2024. [link to dataset]

+

Flood 2050 Sea Level Rise. Accessed January 31, 2024. [link to dataset]

Disadvantaged Communities

-

New York State Energy Research and Development Authority (NYSERDA). 2023. Final Disadvantaged Communities (DAC) 2023. Accessed March 18, 2024. [link to dataset]

+

New York State Energy Research and Development Authority (NYSERDA). 2023. Final Disadvantaged Communities (DAC) 2023. Accessed March 18, 2024. [link to dataset]

Hurricane Evacuation Zones

NYC Emergency Management Department (NYCEM). 2024. Hurricane Evacuation Zones. Accessed January 31, 2024.

-
+

Methodology & Limitations

The flood images featured on this website were generated using the open-source ClimateGAN image generation models. The ClimateGAN model is licensed under GPL-3.0 and is open for public use, promoting transparency and collaboration. The model code, data, and pre-trained weights available in the original ClimateGAN repository were applied to Cylomedia street view images from the geocoder.nyc website to generate the photorealistic images of flooding. In order to generate images with mild, moderate, and major flooding levels, the threshold parameter of the model was set to 0.99, 0.9, and 0.8 respectively. Although these values do not correspond to exact measurements of flooding, we estimate that the mild, moderate, and major flooding levels correspond to the approximate ranges < 0.4 inches, 0.4–12 inches, and 12–24 inches respectively. In a future iteration, we hope to improve the model performance by feeding an initial flood mask generated via the elevation tool on the geocoder.nyc website to the model. Stay tuned for further updates!

diff --git a/components/map/Map.css b/components/map/Map.css index 4ebda53..68e88a9 100644 --- a/components/map/Map.css +++ b/components/map/Map.css @@ -36,7 +36,7 @@ display: block; margin: 12px 0 12px 0; height: 1px; - width: 216px; + width: 100%; background-color: #c9c9c9; } diff --git a/components/map/Map.tsx b/components/map/Map.tsx index 3389987..9f845c3 100644 --- a/components/map/Map.tsx +++ b/components/map/Map.tsx @@ -3,6 +3,7 @@ import mapboxgl, { MapMouseEvent } from 'mapbox-gl' import { MapContext, MapContextType } from '@/contexts/MapContext' import { StreetViewContext, StreetViewType } from '@/contexts/StreetViewContext' +import { NarrativeContext, NarrativeType } from '@/contexts/NarrativeContext' import useOnClickSites from '@/hooks/useOnClickSites' @@ -18,6 +19,7 @@ const Map = () => { const mapContainer = useRef(null) const { setMap } = useContext(MapContext) as MapContextType const { openStreetView } = useContext(StreetViewContext) as StreetViewType + const { openNarrative } = useContext(NarrativeContext) as NarrativeType const { mapLayerData } = useFetchMapLayerData() useOnClickSites() useTooltips() @@ -25,8 +27,6 @@ const Map = () => { useEffect(() => { mapboxgl.accessToken = process.env.NEXT_PUBLIC_MAPBOX_TOKEN as string - - const lng = -73.913; const lat = 40.763; const zoom = 11; @@ -200,7 +200,11 @@ const Map = () => { return (
- logos_white + { + openNarrative || openStreetView ? logos_white : + logos_white + } +
diff --git a/components/map/mapLayer/Legend.tsx b/components/map/mapLayer/Legend.tsx index 3dd244b..5b52bfe 100644 --- a/components/map/mapLayer/Legend.tsx +++ b/components/map/mapLayer/Legend.tsx @@ -21,53 +21,66 @@ function Legend({ buttonClickHandler, layerName }: Props) { return (
-
+
Legend
buttonClickHandler('Close')} />
-
-
-
+
+
+
Flood prone neighborhood
{ - layerName !== "Hurricane Evacuation Zones" ? + layerName === "Coastal Flooding" ? ( -
-
-
{layerName}
+
+
{layerName}
+
+
+
+
0.2%
+
+
+
+
1%
+
+
+
+
1% (coastal)
+
+
- ) : + ) + : (
Hurricane Evacuation Zones
-
+
1
-
+
2
-
+
3
-
+
4
-
+
5
-
+
6
-
) } @@ -77,4 +90,11 @@ function Legend({ buttonClickHandler, layerName }: Props) { ) } -export default Legend \ No newline at end of file +export default Legend + +// ( +//
+//
+//
{layerName}
+//
+// ) \ No newline at end of file diff --git a/components/map/mapLayer/MapLayerCards.tsx b/components/map/mapLayer/MapLayerCards.tsx index 56e234f..70d59f6 100644 --- a/components/map/mapLayer/MapLayerCards.tsx +++ b/components/map/mapLayer/MapLayerCards.tsx @@ -61,7 +61,6 @@ const MapLayerCards = ({ buttonClickHandler, setLayerName, layerName }: Props) = const isDesktop = useMediaQuery({ query: "(min-width: 1024px)" }) - const clickHandler = (title: floodingTypes, index: number) => { const newClicked = [...clicked] newClicked.forEach((c, i) => i === index ? newClicked[i] = true : newClicked[i] = false) @@ -84,8 +83,8 @@ const MapLayerCards = ({ buttonClickHandler, setLayerName, layerName }: Props) =
Flood Risk Map Layers
{ - isDesktop &&
- + isDesktop &&
+
{layers[clicked.findIndex(c => c === true)].content}
diff --git a/components/narrative/Ending.tsx b/components/narrative/Ending.tsx index 69f7fcb..0aab2ca 100644 --- a/components/narrative/Ending.tsx +++ b/components/narrative/Ending.tsx @@ -7,7 +7,7 @@ type Props = { const Ending = ({ clickHandler }: Props) => { return (
- +

FloodGen uses AI to generate photorealistic images of potential flooding scenarios to raise awareness, bolster community preparedness, and support local governments resilience strategies.

diff --git a/components/narrative/Introduction.tsx b/components/narrative/Introduction.tsx index 885250d..050cda2 100644 --- a/components/narrative/Introduction.tsx +++ b/components/narrative/Introduction.tsx @@ -1,6 +1,6 @@ import React from 'react' -import { ChevronDoubleDownIcon } from '@heroicons/react/20/solid' +import { ChevronDownIcon } from '@heroicons/react/20/solid' const Introduction = () => { return ( @@ -11,7 +11,7 @@ const Introduction = () => {

New York City residents live within or directly adjacent to the floodplain. Flood damage is extensive, expensive, and often times predictable

Source: Info, Photo

- +
) } diff --git a/components/narrative/Narrative.tsx b/components/narrative/Narrative.tsx index 86bee40..c993804 100644 --- a/components/narrative/Narrative.tsx +++ b/components/narrative/Narrative.tsx @@ -20,7 +20,7 @@ const Narrative = () => { { openNarrative && ( <> - logos_white + logos_white
@@ -28,7 +28,7 @@ const Narrative = () => { - +
) diff --git a/components/narrative/Slider.tsx b/components/narrative/Slider.tsx index f0c5f6e..3eeee86 100644 --- a/components/narrative/Slider.tsx +++ b/components/narrative/Slider.tsx @@ -36,14 +36,14 @@ const Slider = () => { onMouseMove={handleMove} onMouseDown={handleMouseDown} > - +
AI generated
Street view
- +
{ return ( <> { - openStreetView &&
+ openStreetView &&

{selectedSitesFeatures.properties['Place']}

- {expanded ? setExpanded(false)} /> : setExpanded(true)} />} -

{selectedSitesFeatures.properties['Case Study']}, {selectedSitesFeatures.properties['Borough']}

diff --git a/components/streetView/StreetView.tsx b/components/streetView/StreetView.tsx index 6145daa..a00bee8 100644 --- a/components/streetView/StreetView.tsx +++ b/components/streetView/StreetView.tsx @@ -131,7 +131,7 @@ const StreetView = () => { <>
- +
@@ -140,10 +140,10 @@ const StreetView = () => { floodingBtnsData.map((f, i) => floodingButtonClickHandler(f.title)} mouseEnterHandler={() => mouseEnterHandler(i)} mouseLeaveHandler={mouseLeaveHandler} />) }
-
+
changeStreetViewClickHandler('previous')} />
-
+
changeStreetViewClickHandler('next')} />
diff --git a/hooks/useTooltips.tsx b/hooks/useTooltips.tsx index ed3e5c3..517c663 100644 --- a/hooks/useTooltips.tsx +++ b/hooks/useTooltips.tsx @@ -107,7 +107,7 @@ const useTooltips = () => {
${e.features[0].properties.Place}
${e.features[0].properties["Case Study"]}
-
Click point to view predicted flood scenarios
+
Click to view projected flood scenarios
` popup.setLngLat([e.lngLat.lng, e.lngLat.lat]).setHTML(content).addTo(map); })