MPR Fix image didn't fill screen area issue

Fix image didn't fill screen area issue

docs/generate_mockup.md

@@ -0,0 +1,19 @@
+## Why add padding in `create_fit_coord_image`
+
+Because there will see weird triangle in the corner for some deivces because there is a black area between the phone frame and the display area
+
+![samsung-s24-ultra-right](https://github.com/user-attachments/assets/75936a3a-89b9-4885-874f-dfac4a0d1d0d)
+
+| type      | Before                                                                                                          | After                                                                                                           |
+| --------- | --------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
+| landscape | ![samsung-s24-ultra-landscape](https://github.com/user-attachments/assets/b3ec7528-20a7-4508-b8c2-f7b6308e59c8) | ![samsung-s24-ultra-landscape](https://github.com/user-attachments/assets/bb508211-edd4-4dc3-b5d1-ed228150c12b) |
+| portrait  | ![samsung-s24-ultra-portrait](https://github.com/user-attachments/assets/a9f56fec-6524-4983-9d21-2c598e1094a5)  | ![samsung-s24-ultra-portrait](https://github.com/user-attachments/assets/96c6046e-be8e-4b36-8a2f-b374ffbe7d79)  |
+| left      | ![samsung-s24-ultra-left](https://github.com/user-attachments/assets/5e90d39b-40ff-44b8-96c1-e8479a17a9f5)      | ![samsung-s24-ultra-left](https://github.com/user-attachments/assets/e33e5a43-69d9-494c-acae-dc371abe7406)      |
+| right     | ![samsung-s24-ultra-right](https://github.com/user-attachments/assets/8d258f18-bfd9-47a9-8258-3285f1a01b8a)     | ![samsung-s24-ultra-right](https://github.com/user-attachments/assets/15768da2-e0af-442e-9c62-f99510c485e4)     |
+
+For the portrait one, the gray area on the top disappear after the update, but I think that should be expected, I guess the `coords` in `device_info.json` is incorrect so the image is pasted slightly to the bottom than expected , but it is not related to the current issue. (not sure if we need to spend some time checking that all model templates and configurations are correct)
+
+## why shift mask position in `create_mockup_image`
+
+After adding padding in `create_fit_coord_image`, we need to shift mask too get correct mockup
+![image](https://github.com/user-attachments/assets/c751f8a2-4ff5-4a53-8eff-d58432b2f48a)

mockup_package/mockup/image_generator.py

@@ -190,15 +190,16 @@ def create_mockup_image(self, device_path, device_mask_path_prefix, result_path)
             tmp = self.target_points[0].copy()
             self.target_points[0] = self.target_points[1]
             self.target_points[1] = tmp
+            shifted_points = self.target_points + np.array([PADDING, PADDING])
             mask = np.zeros(basemap.shape[:2], np.uint8)
             cv2.polylines(
                 mask,
-                pts=[self.target_points],
+                pts=[shifted_points],
                 isClosed=True,
                 color=(255, 0, 0),
                 thickness=3,
             )
-            cv2.fillPoly(mask, [self.target_points], 255)
+            cv2.fillPoly(mask, [shifted_points], 255)
             mask = cv2.cvtColor(mask, cv2.COLOR_BGR2RGBA)
             mask = Image.fromarray(mask)
 
@@ -209,7 +210,9 @@ def create_mockup_image(self, device_path, device_mask_path_prefix, result_path)
             # If you want to use the mask directly with the first argument of the "paste" function,  # noqa: E501
             # you need to convert it to the "L" mode and ensure that it has the same size as the first argument. # noqa: E501
             device_image.paste(
-                tmp_result_image, (self.xyset[0], self.xyset[2]), mask.convert("L")
+                tmp_result_image,
+                (self.xyset[0] - PADDING, self.xyset[2] - PADDING),
+                mask.convert("L"),
             )
             device_image.save(result_path)