Production Deployment

Production Deployment

.env.production

@@ -0,0 +1 @@
+PUBLIC_BASE_URL=https://mockuphone.com

.env.staging

@@ -0,0 +1 @@
+PUBLIC_BASE_URL=https://staging.mockuphone.com

.github/workflows/cd.yaml

@@ -22,14 +22,15 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: 18
-      - run: npm ci
       - name: Set env to staging/production
         run: |
           if [[ "${{ github.ref_name }}" == "main" ]]; then
             echo "ENV=staging" >> $GITHUB_ENV
           elif [[ "${{ github.ref_name }}" == "production" ]]; then
             echo "ENV=production" >> $GITHUB_ENV
           fi
+      - name: Install npm packages
+        run: npm install
       - name: Build html
         run: npm run build
       - name: Deploy

.gitignore

@@ -15,7 +15,6 @@ pnpm-debug.log*
 
 # environment variables
 .env
-.env.production
 
 # macOS-specific files
 .DS_Store

README.md

@@ -41,9 +41,9 @@ Now, in your terminal:
 
 ### Add device image
 
-1. Place the portrait and landscape image as `{device_id}-portrait.png` and `{device_id}-landscape.png` in `public/Images/mockup_templates/`
-2. Run `make create-mask-image` to create mask image to `public/Images/mockup_mask_templates/`
-3. Run `make add-new-device`, and input device info, this script will let user use `{device_id}-portrait.png` in `public/Images/mockup_mask_templates/` to get the frame of the image
+1. Place the portrait and landscape image as `{device_id}-portrait.png` and `{device_id}-landscape.png` in `public/images/mockup_templates/`
+2. Run `make create-mask-image` to create mask image to `public/images/mockup_mask_templates/`
+3. Run `make add-new-device`, and input device info, this script will let user use `{device_id}-portrait.png` in `public/images/mockup_mask_templates/` to get the frame of the image
    - The script will ask you to input some info for the device, after input the device info, you should see a window as below:
    - <img width="756" alt="Screenshot 2023-09-01 at 2 31 31 PM" src="https://github.com/YayunHuang/mockuphone/assets/48404737/14ede2b1-7fb0-4e02-8405-386ee532539e">
    - Resize the window if you can't see 4 trackbar on top

add_device_scripts/add_device.py

@@ -10,7 +10,7 @@
 device_name = input("Input device_name(ex: Samsung Galaxy S20): ")
 device_type = input("Input device_type(Android/iOS/TV/Laptops/Macbook): ")
 
-image_path = f"public/Images/mockup_mask_templates/{device_id}-portrait.png"
+image_path = f"public/images/mockup_mask_templates/{device_id}-portrait.png"
 img = cv2.imread(image_path)
 cv2.namedWindow("image")
 cv2.imshow("image", img)

add_device_scripts/create_mask_image.py

@@ -42,9 +42,9 @@ def bfs2(image):
             positionsList.append((x - 1, y))
 
 
-path = "public/Images/mockup_templates"
-device_path = "public/Images/devices_picture"
-outputPath = "public/Images/mockup_mask_templates"
+path = "public/images/mockup_templates"
+device_path = "public/images/devices_picture"
+outputPath = "public/images/mockup_mask_templates"
 if len(sys.argv) == 1:
     print("use default path ", path)
 else:

add_device_scripts/get_angled_device_coord.py

@@ -4,7 +4,7 @@
 x1, y1, x2, y2, x3, y3, x4, y4 = 0, 0, 0, 0, 0, 0, 0, 0
 
 image_path = input(
-    "Input image path\n(ex: public/Images/devices_picture/"
+    "Input image path\n(ex: public/images/devices_picture/"
     "apple-ipadpro11-spacegrey-right.png)\n"
 )
 img = cv2.imread(image_path)

mockup_package/mockup/image.py

@@ -8,8 +8,8 @@
 
 async def mockup(location, device_id, original_img_path_list, device_info):
     device_path_prefix = f"{location.split('/')[0]}//{location.split('/')[2]}"
-    device_mask_path_prefix = device_path_prefix + "/Images/mockup_mask_templates/"
-    device_path_prefix += "/Images/mockup_templates/"
+    device_mask_path_prefix = device_path_prefix + "/images/mockup_mask_templates/"
+    device_path_prefix += "/images/mockup_templates/"
     device_path = "./device.png"
     device_mask_path = "./device_mask.png"
     output_img_path_list = []

mockup_package/mockup/image_generator.py

@@ -5,6 +5,9 @@
 import numpy as np
 
 
+PADDING = 100
+
+
 class ImageGenerator:
     original_img_path = "./output.png"
     resized_image_path = "./resize.png"
@@ -113,7 +116,16 @@ def create_fit_coord_image(self, spec):
         )
         distort_img = cv2.cvtColor(distort_img, cv2.COLOR_BGR2RGB)
         distort_img = Image.fromarray(distort_img)
-        distort_img.save(self.tmp_result_image_path)
+
+        # the black border we added in `create_fit_resolution_image` may not be large enough after rotating the image # noqa: E501
+        # so add extra padding here to prevent weird triangles in the corners # noqa: E501
+        distort_img_with_padding = Image.new(
+            "RGBA",
+            (distort_img.size[0] + 2 * PADDING, distort_img.size[1] + 2 * PADDING),
+            (0, 0, 0, 255),
+        )
+        distort_img_with_padding.paste(distort_img, (PADDING, PADDING))
+        distort_img_with_padding.save(self.tmp_result_image_path)
         return self.tmp_result_image_path
 
     def caculate_min_and_max_x_y(self, spec):
@@ -139,7 +151,9 @@ def create_mockup_image(self, device_path, device_mask_path_prefix, result_path)
             device_image = Image.open(device_path).convert("RGBA")
 
             result_image = Image.new("RGBA", mask_image.size, (0, 0, 0, 0))
-            result_image.paste(tmp_result_image, (self.xyset[0], self.xyset[2]))
+            result_image.paste(
+                tmp_result_image, (self.xyset[0] - PADDING, self.xyset[2] - PADDING)
+            )
             mask_image.paste(result_image, (0, 0), mask=mask_image)
             mask_image.paste(device_image, (0, 0), mask=device_image)
             mask_image.save(result_path)