Themes: don't do face blurring for some layers (artwork, memorials, ghost_bikes)

assets/layers/artwork/artwork.json

@@ -187,7 +187,7 @@
     }
   ],
   "tagRenderings": [
-    "images",
+    "images_no_blur",
     {
       "labels": [
         "artwork-question"

assets/layers/ghost_bike/ghost_bike.json

@@ -142,7 +142,7 @@
   ],
   "tagRenderings": [
     "preset_description",
-    "images",
+    "images_no_blur",
     {
       "question": {
         "en": "Whom is remembered by this ghost bike?",

assets/layers/memorial/memorial.json

@@ -91,7 +91,7 @@
     }
   ],
   "tagRenderings": [
-    "images",
+    "images_no_blur",
     {
       "id": "memorial-type",
       "labels": [

assets/layers/questions/questions.json

@@ -19,6 +19,13 @@
         "*": "{image_carousel()}{image_upload()}"
       }
     },
+    {
+      "id": "images_no_blur",
+      "description": "Same as `images`, but uploaded request to disable blurring to the panoramax server",
+      "render": {
+        "*": "{image_carousel()}{image_upload(,,,true)}"
+      }
+    },
     {
       "id": "mapillary",
       "description": "Shows a button to open Mapillary on this location",

package-lock.json

@@ -64,7 +64,7 @@
         "opening_hours": "^3.6.0",
         "osm-auth": "^2.5.0",
         "osmtogeojson": "^3.0.0-beta.5",
-        "panoramax-js": "^0.3.6",
+        "panoramax-js": "^0.3.8",
         "panzoom": "^9.4.3",
         "papaparse": "^5.3.1",
         "pg": "^8.11.3",
@@ -16002,9 +16002,9 @@
       "license": "MIT"
     },
     "node_modules/panoramax-js": {
-      "version": "0.3.6",
+      "version": "0.3.8",
-      "resolved": "https://registry.npmjs.org/panoramax-js/-/panoramax-js-0.3.6.tgz",
+      "resolved": "https://registry.npmjs.org/panoramax-js/-/panoramax-js-0.3.8.tgz",
-      "integrity": "sha512-CRdXwh91H6chd1PYptG070ukx+S6IkVaUeQVG91ySevoJoCYOuBT65qkMhRo49X2um1nGcs9UqolW90R57875g==",
+      "integrity": "sha512-l8bUi+urcdqLjckGcEyDmYyAYCKjwFXpk/En7gpi5x32Nq2r9sHq7obX3Jbk1F7zH4rmpKbVtjS97cKEZr9zHQ==",
       "dependencies": {
         "@ogcapi-js/features": "^1.1.1",
         "@ogcapi-js/shared": "^1.1.1",
@@ -32087,9 +32087,9 @@
       "version": "1.0.0"
     },
     "panoramax-js": {
-      "version": "0.3.6",
+      "version": "0.3.8",
-      "resolved": "https://registry.npmjs.org/panoramax-js/-/panoramax-js-0.3.6.tgz",
+      "resolved": "https://registry.npmjs.org/panoramax-js/-/panoramax-js-0.3.8.tgz",
-      "integrity": "sha512-CRdXwh91H6chd1PYptG070ukx+S6IkVaUeQVG91ySevoJoCYOuBT65qkMhRo49X2um1nGcs9UqolW90R57875g==",
+      "integrity": "sha512-l8bUi+urcdqLjckGcEyDmYyAYCKjwFXpk/En7gpi5x32Nq2r9sHq7obX3Jbk1F7zH4rmpKbVtjS97cKEZr9zHQ==",
       "requires": {
         "@ogcapi-js/features": "^1.1.1",
         "@ogcapi-js/shared": "^1.1.1",

package.json

@@ -208,7 +208,7 @@
     "opening_hours": "^3.6.0",
     "osm-auth": "^2.5.0",
     "osmtogeojson": "^3.0.0-beta.5",
-    "panoramax-js": "^0.3.6",
+    "panoramax-js": "^0.3.8",
     "panzoom": "^9.4.3",
     "papaparse": "^5.3.1",
     "pg": "^8.11.3",

src/Logic/ImageProviders/ImageUploadManager.ts

@@ -81,11 +81,10 @@ export class ImageUploadManager {
 
     public canBeUploaded(file: File): true | { error: Translation } {
         const sizeInBytes = file.size
-        const self = this
         if (sizeInBytes > this._uploader.maxFileSizeInMegabytes * 1000000) {
             const error = Translations.t.image.toBig.Subs({
                 actual_size: Math.floor(sizeInBytes / 1000000) + "MB",
-                max_size: self._uploader.maxFileSizeInMegabytes + "MB",
+                max_size: this._uploader.maxFileSizeInMegabytes + "MB",
             })
             return { error }
         }
@@ -102,7 +101,8 @@ export class ImageUploadManager {
     public async uploadImageAndApply(
         file: File,
         tagsStore: UIEventSource<OsmTags>,
-        targetKey?: string,
+        targetKey: string,
+        noblur: boolean,
     ): Promise<void> {
         const canBeUploaded = this.canBeUploaded(file)
         if (canBeUploaded !== true) {
@@ -120,6 +120,7 @@ export class ImageUploadManager {
             author,
             file,
             targetKey,
+            noblur
         )
         if (!uploadResult) {
             return
@@ -139,6 +140,7 @@ export class ImageUploadManager {
         author: string,
         blob: File,
         targetKey: string | undefined,
+        noblur: boolean
     ): Promise<UploadResult> {
         this.increaseCountFor(this._uploadStarted, featureId)
         let key: string
@@ -153,12 +155,12 @@ export class ImageUploadManager {
             location = GeoOperations.centerpointCoordinates(feature)
         }
         try {
-            ;({ key, value, absoluteUrl } = await this._uploader.uploadImage(blob, location, author))
+            ({ key, value, absoluteUrl } = await this._uploader.uploadImage(blob, location, author, noblur))
         } catch (e) {
             this.increaseCountFor(this._uploadRetried, featureId)
             console.error("Could not upload image, trying again:", e)
             try {
-                ;({ key, value , absoluteUrl} = await this._uploader.uploadImage(blob, location, author))
+                ({ key, value , absoluteUrl} = await this._uploader.uploadImage(blob, location, author, noblur))
                 this.increaseCountFor(this._uploadRetriedSuccess, featureId)
             } catch (e) {
                 console.error("Could again not upload image due to", e)

src/Logic/ImageProviders/ImageUploader.ts

@@ -7,7 +7,8 @@ export interface ImageUploader {
     uploadImage(
         blob: File,
         currentGps: [number,number],
-        author: string
+        author: string,
+        noblur: boolean
     ): Promise<UploadResult>
 }
 

src/Logic/ImageProviders/Panoramax.ts

@@ -167,12 +167,12 @@ export class PanoramaxUploader implements ImageUploader {
         this._panoramax = new AuthorizedPanoramax(url, token)
     }
 
-    async uploadImage(blob: File, currentGps: [number, number], author: string): Promise<{
+    async uploadImage(blob: File, currentGps: [number, number], author: string,  noblur: boolean = false): Promise<{
         key: string;
         value: string;
         absoluteUrl: string
     }> {
-
+        // https://panoramax.openstreetmap.fr/api/docs/swagger#/
         const tags = await ExifReader.load(blob)
         const hasDate = tags.DateTime !== undefined
         const hasGPS = tags.GPSLatitude !== undefined && tags.GPSLongitude !== undefined
@@ -184,6 +184,7 @@ export class PanoramaxUploader implements ImageUploader {
         const img = <ImageData>await p.addImage(blob, defaultSequence, {
             lat: !hasGPS ? lat : undefined,
             lon: !hasGPS ? lon : undefined,
+            isBlurred: noblur,
             datetime: !hasDate ? new Date().toISOString() : undefined,
             exifOverride: {
                 Artist: author,

src/UI/Image/UploadImage.svelte

@@ -4,8 +4,8 @@
    */
 
   import type { SpecialVisualizationState } from "../SpecialVisualization"
-  import { ImmutableStore, UIEventSource } from "../../Logic/UIEventSource"
+  import { UIEventSource } from "../../Logic/UIEventSource"
-  import type { OsmId, OsmTags } from "../../Models/OsmFeature"
+  import type { OsmTags } from "../../Models/OsmFeature"
   import LoginToggle from "../Base/LoginToggle.svelte"
   import Translations from "../i18n/Translations"
   import Tr from "../Base/Tr.svelte"
@@ -22,6 +22,7 @@
   export let tags: UIEventSource<OsmTags>
   export let targetKey: string = undefined
   export let layer: LayerConfig
+  export let noBlur: boolean = false
   /**
    * Image to show in the button
    * NOT the image to upload!
@@ -47,22 +48,22 @@
           continue
         }
 
-        if(layer?.id === "note"){
+        if (layer?.id === "note") {
           const uploadResult = await state?.imageUploadManager.uploadImageWithLicense(tags.data.id,
             state.osmConnection.userDetails.data?.name ?? "Anonymous",
-            file, "image")
+            file, "image", noBlur)
-          if(!uploadResult){
+          if (!uploadResult) {
             return
           }
           const url = uploadResult.absoluteUrl
           await state.osmConnection.addCommentToNote(tags.data.id, url)
           NoteCommentElement.addCommentTo(url, <UIEventSource<any>>tags, {
-            osmConnection: state.osmConnection,
+            osmConnection: state.osmConnection
           })
           return
         }
 
-        await state?.imageUploadManager.uploadImageAndApply(file, tags, targetKey)
+        await state?.imageUploadManager.uploadImageAndApply(file, tags, targetKey, noBlur)
       } catch (e) {
         console.error(e)
         state.reportError(e, "Could not upload image")
@@ -96,12 +97,21 @@
         {#if labelText}
           {labelText}
         {:else}
-          <Tr t={t.addPicture} />
+          <div class="flex flex-col">
+
+            <Tr t={t.addPicture} />
+            {#if noBlur}
+          <span class="subtle text-sm">
+          Faces will not be blurred
+          </span>
+            {/if}
+          </div>
         {/if}
+
       </div>
     </FileSelector>
     <div class="text-xs subtle italic">
-      <Tr t={Translations.t.general.attribution.panoramaxLicenseCCBYSA}/>
+      <Tr t={Translations.t.general.attribution.panoramaxLicenseCCBYSA} />
       <span class="mx-1">—</span>
       <Tr t={t.respectPrivacy} />
     </div>