Compliance portrait_image issue prio 1 (#937)

* Compliance portrait_image issue prio 1

* Added reference picture for front fender right tesma m3

* Fixed sight tutorial guidelines + reference picture fits available space

* Updated local live config with sight tutorial

Author: dlymonkai

apps/demo-app/src/local-config.json

@@ -15,7 +15,7 @@
   "apiDomain": "api.preview.monk.ai/v1",
   "thumbnailDomain": "api.preview.monk.ai/image_resize",
   "enableTutorial": "first_time_only",
-  "enableSightTutorial": "classic",
+  "enableSightTutorial": "modern",
   "startTasksOnComplete": true,
   "showCloseButton": false,
   "enforceOrientation": "landscape",
@@ -207,6 +207,23 @@
       ]
     }
   ],
+  "sightTutorial": [
+    {
+      "en": "Kneel or bend low in front of the car, aligned with the grille. Centre the car in the frame, ensuring the front grille, headlights, and registration plate are fully visible. Include the top of the car and the bottom of the bumper in the shot.",
+      "fr": "Agenouillez-vous ou penchez-vous devant la voiture, aligné avec la calandre. Centrez la voiture dans le cadre, en vous assurant que la calandre avant, les phares et la plaque d'immatriculation soient bien visibles. Veillez à inclure le toit de la voiture et le bas du pare-chocs dans la photo.",
+      "nl": "Kniel of buk laag voor de auto, uitgelijnd met het rooster. Centreer de auto in het frame, zorg ervoor dat het voorrooster, de koplampen en het kenteken volledig zichtbaar zijn. Zorg ervoor dat de bovenkant van de auto en de onderkant van de bumper in de foto zichtbaar zijn.",
+      "de": "Knien oder beugen Sie sich vor dem Auto, ausgerichtet mit dem Kühlergrill. Zentrieren Sie das Auto im Bild, sodass der vordere Kühlergrill, die Scheinwerfer und das Nummernschild vollständig sichtbar sind. Achten Sie darauf, dass das Dach des Autos und der untere Teil der Stoßstange im Bild zu sehen sind.",
+      "imageReferenceBySightId": {
+        "ffocus18-XlfgjQb9": "https://storage.googleapis.com/core-preview-images/None-8ca68105-1bbc-4f85-84b3-1f5a08e91057.jpeg",
+        "jgc21-QIvfeg0X": "https://storage.googleapis.com/core-preview-images/None-8ca68105-1bbc-4f85-84b3-1f5a08e91057.jpeg",
+        "ff150-zXbg0l3z": "https://storage.googleapis.com/core-preview-images/None-8ca68105-1bbc-4f85-84b3-1f5a08e91057.jpeg",
+        "ftransit18-wyXf7MTv": "https://storage.googleapis.com/core-preview-images/None-8ca68105-1bbc-4f85-84b3-1f5a08e91057.jpeg",
+        "tsienna20-YwrRNr9n": "https://storage.googleapis.com/core-preview-images/None-8ca68105-1bbc-4f85-84b3-1f5a08e91057.jpeg",
+        "fesc20-H1dfdfvH": "https://storage.googleapis.com/core-preview-images/None-8ca68105-1bbc-4f85-84b3-1f5a08e91057.jpeg",
+        "haccord-8YjMcu0D": "https://storage.googleapis.com/core-preview-images/None-8ca68105-1bbc-4f85-84b3-1f5a08e91057.jpeg"
+      }
+    }
+  ],
   "requiredApiPermissions": [
     "monk_core_api:compliances",
     "monk_core_api:damage_detection",

packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDSightTutorial/PhotoCaptureHUDSightTutorial.styles.ts

@@ -83,8 +83,6 @@ export const styles: Styles = {
     fontWeight: 700,
   },
   guidelineContainer: {
-    height: '40%',
-    overflow: 'auto',
     display: 'flex',
     flexDirection: 'column',
     padding: '0 30px',
@@ -96,8 +94,6 @@ export const styles: Styles = {
     lineHeight: '24px',
   },
   classicGuidelineContainer: {
-    height: '40%',
-    overflow: 'auto',
     display: 'flex',
     flexDirection: 'column',
     padding: '0 30px',
@@ -116,14 +112,16 @@ export const styles: Styles = {
   },
   closeButtonFiller: { visibility: 'hidden', padding: '0px 20px', height: '100%', borderRadius: 0 },
   imageContainer: {
-    height: '60%',
+    flexGrow: 1,
+    overflow: 'hidden',
     width: '100%',
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
   },
   classicImageContainer: {
-    height: '50%',
+    flexGrow: 1,
+    overflow: 'hidden',
     width: '100%',
     display: 'flex',
     justifyContent: 'center',

packages/inspection-capture-web/src/PhotoCapture/PhotoCaptureHUD/PhotoCaptureHUDSightTutorial/PhotoCaptureHUDSightTutorial.tsx

@@ -123,7 +123,13 @@ export function PhotoCaptureHUDSightTutorial({
           </div>
           <div style={style.classicGuidelineContainer}>
             <span style={style.classicGuideline}>
-              {tutorialGuideline ?? t('photo.hud.sightTutorial.defaultTutorial')}
+              {tutorialGuideline?.length
+                ? tutorialGuideline
+                : t(
+                    tutorialImage
+                      ? 'photo.hud.sightTutorial.defaultTutorialWithImage'
+                      : 'photo.hud.sightTutorial.defaultTutorialWithoutImage',
+                  )}
             </span>
           </div>
           {tutorialImage && (
@@ -148,7 +154,13 @@ export function PhotoCaptureHUDSightTutorial({
           </div>
           <div style={style.classicGuidelineContainer}>
             <span style={style.guideline}>
-              {tutorialGuideline ?? t('photo.hud.sightTutorial.defaultTutorial')}
+              {tutorialGuideline?.length
+                ? tutorialGuideline
+                : t(
+                    tutorialImage
+                      ? 'photo.hud.sightTutorial.defaultTutorialWithImage'
+                      : 'photo.hud.sightTutorial.defaultTutorialWithoutImage',
+                  )}
             </span>
           </div>
           {tutorialImage && (

packages/inspection-capture-web/src/translations/de.json

@@ -45,7 +45,8 @@
       },
       "sightTutorial": {
         "tip": "Tipp",
-        "defaultTutorial": "Positionieren Sie sich wie im linken Diagramm gezeigt und stellen Sie sicher, dass die Kamera auf der richtigen Höhe ist.\nFalls ein Referenzfoto vorhanden ist, versuchen Sie, Ihren Bildausschnitt entsprechend anzupassen."
+        "defaultTutorialWithImage": "Hier sehen Sie ein Referenzbild.\nBitte versuchen Sie, den Bildausschnitt möglichst genau nachzustellen.",
+        "defaultTutorialWithoutImage": "Bitte positionieren Sie sich wie in der Abbildung links gezeigt\nund achten Sie darauf, dass sich die Kamera in der richtigen Höhe befindet."
       }
     },
     "gallery": {

packages/inspection-capture-web/src/translations/en.json

@@ -45,7 +45,8 @@
       },
       "sightTutorial": {
         "tip": "Tip",
-        "defaultTutorial": "Position yourself as shown in the left diagram, ensuring the camera is at the correct height.\nIf a reference photo is provided, try to match your framing accordingly."
+        "defaultTutorialWithImage": "Here’s a reference image\nTry to match your framing as closely as possible.",
+        "defaultTutorialWithoutImage": "Position yourself as shown in the left diagram\nEnsuring the camera is at the correct height."
       }
     },
     "gallery": {

packages/inspection-capture-web/src/translations/fr.json

@@ -45,7 +45,8 @@
       },
       "sightTutorial": {
         "tip": "Conseil",
-        "defaultTutorial": "Placez-vous comme indiqué dans le schéma de gauche en veillant à ce que la caméra soit à la bonne hauteur.\nSi une photo de référence est fournie, essayez d’adapter votre cadrage en conséquence."
+        "defaultTutorialWithImage": "Voici une image de référence.\nVeuillez essayer de reproduire le cadrage le plus fidèlement possible.",
+        "defaultTutorialWithoutImage": "Veuillez vous positionner comme indiqué sur le schéma de gauche,\nen vous assurant que la caméra est à la bonne hauteur."
       }
     },
     "gallery": {

packages/inspection-capture-web/src/translations/nl.json

@@ -45,7 +45,8 @@
       },
       "sightTutorial": {
         "tip": "Tip",
-        "defaultTutorial": "Plaats jezelf zoals aangegeven in het linkerschema en zorg ervoor dat de camera op de juiste hoogte staat.\nAls er een referentiefoto is, probeer dan je kader hierop af te stemmen."
+        "defaultTutorialWithImage": "Hier ziet u een referentieafbeelding.\nProbeer uw kadrering hier zo goed mogelijk op af te stemmen.",
+        "defaultTutorialWithoutImage": "Positioneer uzelf zoals aangegeven in het diagram aan de linkerkant\nen zorg ervoor dat de camera zich op de juiste hoogte bevindt."
       }
     },
     "gallery": {

packages/network/test/api/image/mappers.test.ts

@@ -29,6 +29,7 @@ const EXPECTED_DEFAULT_COMPLIANCE_ISSUES = [
 ];
 
 const EXPECTED_COMPLIANCE_ISSUES_ORDER = [
+  ComplianceIssue.PORTRAIT_IMAGE,
   ComplianceIssue.NO_VEHICLE,
   ComplianceIssue.BLURRINESS,
   ComplianceIssue.OVEREXPOSURE,
@@ -40,7 +41,6 @@ const EXPECTED_COMPLIANCE_ISSUES_ORDER = [
   ComplianceIssue.HIDDEN_PARTS,
   ComplianceIssue.MISSING_PARTS,
   ComplianceIssue.WRONG_CENTER_PART,
-  ComplianceIssue.PORTRAIT_IMAGE,
   ComplianceIssue.REFLECTIONS,
   ComplianceIssue.SNOWNESS,
   ComplianceIssue.WETNESS,

packages/sights/research/data/teslam3/teslam3.json

@@ -148,7 +148,12 @@
     "label": "front-fender-right",
     "overlay": "teslam3-Rn6VqLtY.svg",
     "vehicle": "teslam3",
-    "tasks": ["damage_detection"]
+    "tasks": ["damage_detection"],
+    "positioning": {
+      "position": 317,
+      "height": "mid"
+    },
+    "referencePicture": "https://storage.googleapis.com/monk-sight-images/teslam3-Rn6VqLtY.jpeg"
   },
   "teslam3-Tk3LpRfJ": {
     "id": "teslam3-Tk3LpRfJ",

packages/types/src/state/image.ts

@@ -199,7 +199,7 @@ export enum ComplianceIssue {
  * smaller the index, the higher the priority of the compliance issue.
  */
 export const COMPLIANCE_ISSUES_PRIORITY = [
-  // TODO: remove before release
+  ComplianceIssue.PORTRAIT_IMAGE,
   ComplianceIssue.NO_VEHICLE,
 
   ComplianceIssue.BLURRINESS,
@@ -213,7 +213,6 @@ export const COMPLIANCE_ISSUES_PRIORITY = [
   ComplianceIssue.HIDDEN_PARTS,
   ComplianceIssue.MISSING_PARTS,
   ComplianceIssue.WRONG_CENTER_PART,
-  ComplianceIssue.PORTRAIT_IMAGE,
 
   ComplianceIssue.REFLECTIONS,
   ComplianceIssue.SNOWNESS,