From 3a6142fa4829aa6d65d7b8388fbba49cc8db8ab1 Mon Sep 17 00:00:00 2001
From: "Yuichiro Tachibana (Tsuchiya)" <t.yic.yt@gmail.com>
Date: Fri, 12 Jul 2024 00:30:05 +0900
Subject: [PATCH] Lite load perf ci (#8222)

* Update Lite E2E test setup to measure the performance of the initial app loading

* [TMP] Run test-functional on this branch

* Update CI to read the perf result

* add changeset

* Comment the performance result

* [TMP] hardcode the PR number to test posting the comment

* Revert "[TMP] hardcode the PR number to test posting the comment"

This reverts commit 4270dac77c6681dc163879d3f2d66c03d5657d11.

* Revert "Comment the performance result"

This reverts commit df4c29fcda9e6662be0372b7c6f256a8db623c59.

* Add debug echo

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Freddy Boulton <alfonsoboulton@gmail.com>
Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
---
 .changeset/wet-seas-end.md            |  5 +++++
 .github/workflows/test-functional.yml | 14 ++++++++++----
 js/tootils/src/index.ts               | 28 +++++++++++++++++++++++++++
 3 files changed, 43 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/wet-seas-end.md

diff --git a/.changeset/wet-seas-end.md b/.changeset/wet-seas-end.md
new file mode 100644
index 0000000000..b4d86e2afd
--- /dev/null
+++ b/.changeset/wet-seas-end.md
@@ -0,0 +1,5 @@
+---
+"@gradio/tootils": minor
+---
+
+feat:Lite load perf ci
diff --git a/.github/workflows/test-functional.yml b/.github/workflows/test-functional.yml
index 7afb151cc8..0cbe50b061 100644
--- a/.github/workflows/test-functional.yml
+++ b/.github/workflows/test-functional.yml
@@ -1,10 +1,11 @@
 name: "test / functional"
 
 on:
-  workflow_run:
-    workflows: ["trigger"]
-    types:
-      - requested
+  # workflow_run:
+  #   workflows: ["trigger"]
+  #   types:
+  #     - requested
+  pull_request: {}
 
 permissions:
   statuses: write
@@ -79,6 +80,11 @@ jobs:
         run: |
           . venv/bin/activate
           pnpm --filter @gradio/app test:browser:lite
+      - name: Get the performance result
+        run: |
+          export LITE_APP_LOAD_TIME=$(jq -r '.app_load_time' .lite-perf.json)
+          echo "LITE_APP_LOAD_TIME=$LITE_APP_LOAD_TIME" >> $GITHUB_ENV
+          cat .lite-perf.json  # For debugging
       - name: do check
         if: always()
         uses: "gradio-app/github/actions/commit-status@main"
diff --git a/js/tootils/src/index.ts b/js/tootils/src/index.ts
index 09768fd988..e8cf8784c5 100644
--- a/js/tootils/src/index.ts
+++ b/js/tootils/src/index.ts
@@ -1,5 +1,6 @@
 import { test as base, type Locator, type Page } from "@playwright/test";
 import { spy } from "tinyspy";
+import { performance } from "node:perf_hooks";
 import url from "url";
 import path from "path";
 import fsPromises from "fs/promises";
@@ -47,7 +48,34 @@ const test_lite = base.extend<{ setup: void }>({
 		}
 		if (shared_page_for_lite.url() !== lite_url) {
 			await shared_page_for_lite.goto(lite_url);
+
+			performance.mark("opened");
+
 			testInfo.setTimeout(600000); // Lite takes a long time to initialize.
+
+			// Measure the time taken for the app to load.
+			shared_page_for_lite
+				.waitForSelector('css=[id^="component-"]', { state: "visible" })
+				.then(() => {
+					performance.mark("app-loaded");
+					const app_load_perf = performance.measure(
+						"app-load",
+						"opened",
+						"app-loaded"
+					);
+					const app_load_time = app_load_perf.duration;
+
+					const perf_file_content = JSON.stringify({ app_load_time }, null, 2);
+
+					fsPromises
+						.writeFile(
+							path.resolve(ROOT_DIR, `./.lite-perf.json`),
+							perf_file_content
+						)
+						.catch((err) => {
+							console.error("Failed to write the performance data.", err);
+						});
+				});
 		}
 		await use(shared_page_for_lite);
 	},