This Street View Does Not Exist

A small website where you can guess a location based on images where at least half of the image has been generated by an AI generator such as DALL-E 2.

Getting started

npm install
npm run dev # Uses Rollup

Navigate to localhost:8080. Auto-reload on changes in the src/ folder should work by default.

Building and running in production mode

To create an optimised version of the app:

npm run build
npm run start

Using TypeScript

This template comes with a script to set up a TypeScript development environment, you can run it immediately after cloning the template with:

node scripts/setupTypeScript.js

Or remove the script via:

rm scripts/setupTypeScript.js

If you want to use baseUrl or path aliases within your tsconfig, you need to set up @rollup/plugin-alias to tell Rollup to resolve the aliases. For more info, see this StackOverflow question.

Development

Adding maps / images

• Grab a screenshot from GeoGuessr (preferrably square, around 1024x1024) containing some meta
• In Dall-E use Out Painting to paint to the right or left, make sure the generated part is at least 50% of the new image
• In "My Collection" download the 4 generated images and name then N-a to N-d.jpg and place these in the public/game directory
• Copy the lat/lon values as well as the street view URLs of each location after finishing the GeoGuessr game (click on the markers)
• Paste them in the same order as the images in the src/mapset.js file (make sure to use the correct filenames and lat/lons)

Optimising images

• cd scripts
• python convert_to_jpgs.py
• This will convert all pngs to jpgs (and replace .png for .jpg in mapset.js)

Deploying to GH Pages

npm run build
git add .
git commit -m "deploy"
git push origin gh-pages --force
node ./deploy.js