Fix missing devices image download and enforce png (Koenkk#2543)

Author: Koenkk

.gitignore

@@ -4,4 +4,5 @@ node_modules
 dist
 .idea
 .DS_Store
-docgen/missing-device-images/
+docgen/missing-device-images/
+venv/

docgen/missing_device_images.ts

@@ -7,6 +7,7 @@ import * as gis from 'async-g-i-s';
 import * as httpsClient from 'https';
 import * as httpClient from 'http';
 import * as easyimage from 'easyimage';
+import {execSync} from 'child_process';
 
 const missingImagesPath = path.join(__dirname, 'missing-device-images');
 
@@ -32,13 +33,16 @@ export async function downloadImage(url: string, path: string) {
     });
 }
 
-export async function ensureJpg(imagePath: string) {
-    if (path.parse(imagePath).ext !== '.jpg') {
-        const imagePathJpg  = `${path.join(missingImagesPath, path.parse(imagePath).name)}.jpg`;
-        await easyimage.convert({src: imagePath, dst: imagePathJpg});
+export async function ensurePngWithoutBackground(imagePath: string) {
+    if (path.parse(imagePath).ext !== '.png') {
+        const imagePathPng  = `${path.join(missingImagesPath, path.parse(imagePath).name)}.png`;
+        await easyimage.convert({src: imagePath, dst: imagePathPng});
         fs.rmSync(imagePath);
-        imagePath = imagePathJpg;
+        imagePath = imagePathPng;
     }
+    const imagePathBackground = `${imagePath}.background.png`
+    fs.renameSync(imagePath, imagePathBackground);
+    execSync(`rembg i ${imagePathBackground} ${imagePath}`);
     return imagePath;
 }
 
@@ -60,8 +64,8 @@ export async function downloadMissing() {
                 // Download
                 await downloadImage(image.url, imagePath);
 
-                // Convert to jpg
-                imagePath = await ensureJpg(imagePath);
+                // Convert to png
+                imagePath = await ensurePngWithoutBackground(imagePath);
 
                 // Make sqaure
                 const info = await easyimage.info(imagePath);
@@ -84,13 +88,13 @@ async function moveMissing() {
     for (const file of fs.readdirSync(missingImagesPath)) {
         try {
             let source = path.join(missingImagesPath, file);
-            source = await ensureJpg(source);
+            // source = await ensurePngWithoutBackground(source);
             const name = path.basename(source);
-            const match = name.match('(.+)_\\d+\\.jpg');
+            const match = name.match('(.+)_\\d+\\.png');
             if (!match) throw new Error(`Failed to match '${name}'`)
-            const target = path.join(imageBaseDir, `${match[1]}.jpg`);
+            const target = path.join(imageBaseDir, `${match[1]}.png`);
             fs.copyFileSync(source, target);
-            const size = 150;
+            const size = 512;
             await easyimage.resize({width: size, height: size, src: target, dst: target});
         } catch (error) {
             console.error(`Failed to handle '${file}' (${error})`)

docgen/utils.ts

@@ -20,7 +20,7 @@ function getImageName(model) {
   ];
   let image = model;
   replaceByDash.forEach((r) => image = image.replace(r, '-'));
-  return `${ image }.jpg`;
+  return `${ image }.png`;
 }
 
 export async function generatePage(content, target) {

package-lock.json

@@ -25,7 +25,7 @@
     "@vuepress/plugin-docsearch": "^2.0.0-beta.53",
     "@vuepress/plugin-google-analytics": "^2.0.0-beta.53",
     "@vuepress/plugin-register-components": "^2.0.0-beta.53",
-    "async-g-i-s": "^1.5.1",
+    "async-g-i-s": "^1.5.2",
     "cross-env": "^7.0.3",
     "easyimage": "^3.1.1",
     "glob": "^8.0.3",