ex2

microsoft · Dec 20, 2024 · 75b0412 · 75b0412
1 parent a3c16a0
commit 75b0412
Show file tree

Hide file tree

Showing 9 changed files with 178 additions and 155 deletions.
diff --git a/js/web/test/e2e/exports/README.md b/js/web/test/e2e/exports/README.md
@@ -1 +1,57 @@
 This folder includes test data, scripts and source code that used to test the export functionality of onnxruntime-web package.
+
+## nextjs-default
+
+### Summary
+
+This is a Next.js application created by `npx create-next-app@latest` using the following config:
+
+```
+<ORT_ROOT>\js\web\test\e2e\exports\testcases>npx create-next-app@latest
+
+√ What is your project named? ... nextjs-default
+√ Would you like to use TypeScript? ... No / Yes
+√ Would you like to use ESLint? ... No / Yes
+√ Would you like to use Tailwind CSS? ... No / Yes
+√ Would you like your code inside a `src/` directory? ... No / Yes
+√ Would you like to use App Router? (recommended) ... No / Yes
+√ Would you like to use Turbopack for `next dev`? ... No / Yes
+√ Would you like to customize the import alias (`@/*` by default)? ... No / Yes
+Creating a new Next.js app in <ORT_ROOT>\js\web\test\e2e\exports\testcases\nextjs-default.
+
+Using npm.
+
+Initializing project with template: app
+
+
+Installing dependencies:
+- react
+- react-dom
+- next
+```
+
+Small changes are made based on the application template, including:
+
+- Add a client side rendering (CSR) component which contains:
+  - a checkbox for multi-thread
+  - a checkbox for proxy
+  - a "Load Model" button
+  - a "Run Model" button
+  - a state DIV
+  - a log DIV
+- Add a helper module for creating ORT session and run
+
+### Tests
+
+Uses puppeteer to simulate the following tests:
+
+- Tests on `npm run dev` (dev server)
+  - multi-thread OFF, proxy OFF
+  - multi-thread OFF, proxy ON
+  - multi-thread ON, proxy OFF
+  - multi-thread ON, proxy ON
+- Tests on `npm run build` + `npm run serve` (prod)
+  - multi-thread OFF, proxy OFF
+  - multi-thread OFF, proxy ON
+  - multi-thread ON, proxy OFF
+  - multi-thread ON, proxy ON
diff --git a/js/web/test/e2e/exports/testcases/nextjs-default/.gitignore b/js/web/test/e2e/exports/testcases/nextjs-default/.gitignore
@@ -28,6 +28,7 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.pnpm-debug.log*
 
 # env files (can opt-in for committing if needed)
 .env*

diff --git a/js/web/test/e2e/exports/testcases/nextjs-default/app/fonts/GeistMonoVF.woff b/js/web/test/e2e/exports/testcases/nextjs-default/app/fonts/GeistMonoVF.woff
diff --git a/js/web/test/e2e/exports/testcases/nextjs-default/app/fonts/GeistVF.woff b/js/web/test/e2e/exports/testcases/nextjs-default/app/fonts/GeistVF.woff
diff --git a/js/web/test/e2e/exports/testcases/nextjs-default/app/layout.js b/js/web/test/e2e/exports/testcases/nextjs-default/app/layout.js
@@ -1,28 +1,25 @@
-import localFont from "next/font/local";
-import "./globals.css";
+import { Geist, Geist_Mono } from 'next/font/google';
+import './globals.css';
 
-const geistSans = localFont({
-  src: "./fonts/GeistVF.woff",
-  variable: "--font-geist-sans",
-  weight: "100 900",
+const geistSans = Geist({
+  variable: '--font-geist-sans',
+  subsets: ['latin'],
 });
-const geistMono = localFont({
-  src: "./fonts/GeistMonoVF.woff",
-  variable: "--font-geist-mono",
-  weight: "100 900",
+
+const geistMono = Geist_Mono({
+  variable: '--font-geist-mono',
+  subsets: ['latin'],
 });
 
 export const metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: 'Create Next App',
+  description: 'Generated by create next app',
 };
 
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
-      <body className={`${geistSans.variable} ${geistMono.variable}`}>
-        {children}
-      </body>
+      <body className={`${geistSans.variable} ${geistMono.variable}`}>{children}</body>
     </html>
   );
 }
diff --git a/js/web/test/e2e/exports/testcases/nextjs-default/app/onnx-helper.js b/js/web/test/e2e/exports/testcases/nextjs-default/app/onnx-helper.js
@@ -2,57 +2,57 @@ import * as ort from 'onnxruntime-web';
 
 // Model data for "test_abs/model.onnx"
 const testModelData =
-    'CAcSDGJhY2tlbmQtdGVzdDpJCgsKAXgSAXkiA0FicxIIdGVzdF9hYnNaFwoBeBISChAIARIMCgIIAwoCCAQKAggFYhcKAXkSEgoQCAESDAoCCAMKAggECgIIBUIECgAQDQ==';
+  'CAcSDGJhY2tlbmQtdGVzdDpJCgsKAXgSAXkiA0FicxIIdGVzdF9hYnNaFwoBeBISChAIARIMCgIIAwoCCAQKAggFYhcKAXkSEgoQCAESDAoCCAMKAggECgIIBUIECgAQDQ==';
 
 const base64StringToUint8Array = (base64String) => {
-    const charArray = atob(base64String);
-    const length = charArray.length;
-    const buffer = new Uint8Array(new ArrayBuffer(length));
-    for (let i = 0; i < length; i++) {
-        buffer[i] = charArray.charCodeAt(i);
-    }
-    return buffer;
+  const charArray = atob(base64String);
+  const length = charArray.length;
+  const buffer = new Uint8Array(new ArrayBuffer(length));
+  for (let i = 0; i < length; i++) {
+    buffer[i] = charArray.charCodeAt(i);
+  }
+  return buffer;
 };
 
 let mySession;
 
 const assert = (cond, msg) => {
-    if (!cond) throw new Error(msg);
+  if (!cond) throw new Error(msg);
 };
 
 export const createTestSession = async (multiThreaded, proxy) => {
-    const model = base64StringToUint8Array(testModelData);
-    const options = {};
-
-    if (multiThreaded) {
-        ort.env.wasm.numThreads = 2;
-        assert(typeof SharedArrayBuffer !== 'undefined', 'SharedArrayBuffer is not supported');
-    }
-    if (proxy) {
-        ort.env.wasm.proxy = true;
-    }
-    mySession = await ort.InferenceSession.create(model, options);
+  const model = base64StringToUint8Array(testModelData);
+  const options = {};
+
+  if (multiThreaded) {
+    ort.env.wasm.numThreads = 2;
+    assert(typeof SharedArrayBuffer !== 'undefined', 'SharedArrayBuffer is not supported');
+  }
+  if (proxy) {
+    ort.env.wasm.proxy = true;
+  }
+  mySession = await ort.InferenceSession.create(model, options);
 };
 
 export const runTestSessionAndValidate = async () => {
-    try {
-        // test data: [0, -1, 2, -3, 4, -5, 6, -7, 8, -9, 10, -11, ... 58, -59]
-        const inputData = [...Array(60).keys()].map((i) => (i % 2 === 0 ? i : -i));
-        const expectedOutputData = inputData.map((i) => Math.abs(i));
+  try {
+    // test data: [0, -1, 2, -3, 4, -5, 6, -7, 8, -9, 10, -11, ... 58, -59]
+    const inputData = [...Array(60).keys()].map((i) => (i % 2 === 0 ? i : -i));
+    const expectedOutputData = inputData.map((i) => Math.abs(i));
 
-        const fetches = await mySession.run({ x: new ort.Tensor('float32', inputData, [3, 4, 5]) });
+    const fetches = await mySession.run({ x: new ort.Tensor('float32', inputData, [3, 4, 5]) });
 
-        const y = fetches.y;
+    const y = fetches.y;
 
-        assert(y instanceof ort.Tensor, 'unexpected result');
-        assert(y.dims.length === 3 && y.dims[0] === 3 && y.dims[1] === 4 && y.dims[2] === 5, 'incorrect shape');
+    assert(y instanceof ort.Tensor, 'unexpected result');
+    assert(y.dims.length === 3 && y.dims[0] === 3 && y.dims[1] === 4 && y.dims[2] === 5, 'incorrect shape');
 
-        for (let i = 0; i < expectedOutputData.length; i++) {
-            assert(y.data[i] === expectedOutputData[i], `output data mismatch at index ${i}`);
-        }
-
-        return 'PASS';
-    } catch (e) {
-        return `FAIL: ${e}`;
+    for (let i = 0; i < expectedOutputData.length; i++) {
+      assert(y.data[i] === expectedOutputData[i], `output data mismatch at index ${i}`);
     }
-};
+
+    return 'PASS';
+  } catch (e) {
+    return `FAIL: ${e}`;
+  }
+};
diff --git a/js/web/test/e2e/exports/testcases/nextjs-default/app/page.js b/js/web/test/e2e/exports/testcases/nextjs-default/app/page.js
@@ -1,7 +1,7 @@
 'use client';
 
-import Image from "next/image";
-import styles from "./page.module.css";
+import Image from 'next/image';
+import styles from './page.module.css';
 import dynamic from 'next/dynamic';
 
 const OnnxTestBarComponent = dynamic(() => import('../components/onnx-test-bar'), { ssr: false });
@@ -10,14 +10,7 @@ export default function Home() {
   return (
     <div className={styles.page}>
       <main className={styles.main}>
-        <Image
-          className={styles.logo}
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
+        <Image className={styles.logo} src="/next.svg" alt="Next.js logo" width={180} height={38} priority />
         <OnnxTestBarComponent />
 
         <div className={styles.ctas}>
@@ -27,13 +20,7 @@ export default function Home() {
             target="_blank"
             rel="noopener noreferrer"
           >
-            <Image
-              className={styles.logo}
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
+            <Image className={styles.logo} src="/vercel.svg" alt="Vercel logomark" width={20} height={20} />
             Deploy now
           </a>
           <a
@@ -52,41 +39,23 @@ export default function Home() {
           target="_blank"
           rel="noopener noreferrer"
         >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
+          <Image aria-hidden src="/file.svg" alt="File icon" width={16} height={16} />
           Learn
         </a>
         <a
           href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
           target="_blank"
           rel="noopener noreferrer"
         >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
+          <Image aria-hidden src="/window.svg" alt="Window icon" width={16} height={16} />
           Examples
         </a>
         <a
           href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
           target="_blank"
           rel="noopener noreferrer"
         >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
+          <Image aria-hidden src="/globe.svg" alt="Globe icon" width={16} height={16} />
           Go to nextjs.org →
         </a>
       </footer>