feat: use jpeg as default image format (#301)

---------

Co-authored-by: zhouxiao.shaw <zhouxiao.shaw@bytedance.com>

packages/midscene/src/utils.ts

@@ -40,10 +40,10 @@ function getReportTpl() {
     if (!reportTpl && (window as any).get_midscene_report_tpl) {
       reportTpl = (window as any).get_midscene_report_tpl();
     }
-    assert(
-      reportTpl,
-      'reportTpl should be set before writing report in browser',
-    );
+    // assert(
+    //   reportTpl,
+    //   'reportTpl should be set before writing report in browser',
+    // );
     return reportTpl;
   }
 
@@ -70,6 +70,10 @@ export function reportHTMLContent(
   dumpData: string | ReportDumpWithAttributes[],
 ): string {
   const tpl = getReportTpl();
+  if (!tpl) {
+    console.warn('reportTpl is not set, will not write report');
+    return '';
+  }
   let reportContent: string;
   if (
     (Array.isArray(dumpData) && dumpData.length === 0) ||
@@ -121,6 +125,10 @@ export function writeDumpReport(
 
   const reportPath = join(getLogDirByType('report'), `${fileName}.html`);
   const reportContent = reportHTMLContent(dumpData);
+  if (!reportContent) {
+    console.warn('reportContent is empty, will not write report');
+    return null;
+  }
   writeFileSync(reportPath, reportContent);
 
   return reportPath;

packages/shared/src/img/box-select.ts

@@ -238,7 +238,8 @@ export const compositeElementInfoImg = async (options: {
       return compositeImage;
     })
     .then(async (compositeImage: Jimp) => {
-      const base64 = await compositeImage.getBase64Async(Jimp.MIME_PNG);
+      compositeImage.quality(75);
+      const base64 = await compositeImage.getBase64Async(Jimp.MIME_JPEG);
       return base64;
     })
     .catch((error: unknown) => {

packages/shared/src/img/draw-box.ts

@@ -41,7 +41,8 @@ export async function drawBoxOnImage(options: {
   );
 
   // Convert back to base64
-  const resultBase64 = await image.getBase64Async(Jimp.MIME_PNG);
+  image.quality(75);
+  const resultBase64 = await image.getBase64Async(Jimp.MIME_JPEG);
   return resultBase64;
 }
 

packages/shared/src/img/transform.ts

@@ -36,7 +36,7 @@ export async function transformImgPathToBase64(inputPath: string) {
   // Use Jimp to process images and generate base64 data
   const Jimp = await getJimp();
   const image = await Jimp.read(inputPath);
-  const buffer = await image.getBufferAsync(Jimp.MIME_PNG);
+  const buffer = await image.getBufferAsync(Jimp.MIME_JPEG);
   return buffer.toString('base64');
 }
 
@@ -72,7 +72,8 @@ export async function resizeImg(
     finalNewSize.height,
     Jimp.RESIZE_NEAREST_NEIGHBOR,
   );
-  const resizedBuffer = await image.getBufferAsync(Jimp.MIME_PNG);
+  image.quality(75);
+  const resizedBuffer = await image.getBufferAsync(Jimp.MIME_JPEG);
 
   return resizedBuffer;
 }

packages/visualizer/scripts/build-html.ts

@@ -62,27 +62,31 @@ function emptyDumpReportHTML() {
 
 const tplRetrieverFn = `window.get_midscene_report_tpl = () => {
   const tpl = document.getElementById('midscene_report_tpl').innerText;
+  if (!tpl) {
+    return '';
+  }
   const tplDecoded = decodeURIComponent(tpl);
   return tplDecoded;
 };`;
 function putReportTplIntoHTML(html: string, outsourceMode = false) {
   assert(html.indexOf('</body>') !== -1, 'HTML must contain </body>');
 
-  const tplWrapper = `<noscript id="midscene_report_tpl">\n${encodeURIComponent(
-    emptyDumpReportHTML(),
-  )}\n</noscript>`;
-
   if (outsourceMode) {
+    const tplWrapper = `<noscript id="midscene_report_tpl">\n${encodeURIComponent(
+      emptyDumpReportHTML(),
+    )}\n</noscript>`;
     // in Chrome extension
     return html.replace(
       '</body>',
       `${tplWrapper}<script src="/lib/set-report-tpl.js"></script>\n</body>`,
     );
   }
-  return html.replace(
-    '</body>',
-    `${tplWrapper}<script>${tplRetrieverFn}</script>\n</body>`,
-  );
+
+  return html;
+  // return html.replace(
+  //   '</body>',
+  //   `${tplWrapper}<script>${tplRetrieverFn}</script>\n</body>`,
+  // );
 }
 
 function reportHTMLWithDump(
@@ -95,8 +99,15 @@ function reportHTMLWithDump(
     dumpContent = `<script type="midscene_web_dump">\n${dumpJsonString}\n</script>`;
   }
 
+  const emptyDumpHTML = emptyDumpReportHTML();
+  assert(
+    emptyDumpHTML.length <
+      (process.env.CI ? 10 * 1000 * 1000 : 20 * 1000 * 1000),
+    `emptyDumpHTML is too large, length: ${emptyDumpHTML.length}`,
+  );
+
   const reportHTML = replaceStringWithFirstAppearance(
-    emptyDumpReportHTML(),
+    emptyDumpHTML,
     '{{dump}}',
     dumpContent || '{{dump}}',
   );

packages/visualizer/src/component/playground-component.tsx

@@ -438,7 +438,11 @@ export function Playground({
         replayScripts={replayScriptsInfo.scripts}
         imageWidth={replayScriptsInfo.width}
         imageHeight={replayScriptsInfo.height}
-        reportFileContent={result?.reportHTML}
+        reportFileContent={
+          serviceMode === 'In-Browser-Extension' && result?.reportHTML
+            ? result?.reportHTML
+            : null
+        }
       />
     );
   } else if (result?.result) {

packages/web-integration/src/puppeteer/base-page.ts

@@ -55,20 +55,13 @@ export class Page<
   async screenshotBase64(): Promise<string> {
     // get viewport size from underlyingPage
     // const viewportSize = await this.size();
-    const path = getTmpFile('png')!;
-
+    const imgType = 'jpeg';
+    const path = getTmpFile(imgType)!;
     await this.underlyingPage.screenshot({
       path,
-      type: 'png',
+      type: imgType,
+      quality: 75,
     });
-    // let buf: Buffer;
-    // if (viewportSize.dpr && viewportSize.dpr > 1) {
-    //   buf = await resizeImg(readFileSync(path), {
-    //     width: viewportSize.width,
-    //     height: viewportSize.height,
-    //   });
-    //   writeFileSync(path, buf);
-    // }
 
     return base64Encoded(path, true);
   }