@midscene/visualizer 0.5.2-beta-20241009023204.0 → 0.5.2

package/dist/lib/component/detail-panel.js

@@ -119,7 +119,7 @@ const DetailPanel = () => {
   const options = availableViewTypes.map((type) => {
     if (type === VIEW_TYPE_REPLAY) {
       return {
-        label: "Task Replay",
+        label: "Replay",
         value: type,
         icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.VideoCameraOutlined, {})
       };

package/dist/lib/component/player.css

@@ -1,51 +1,97 @@
 .player-container {
-  width: 100%;
-  height: 100%;
+  width: fit-content;
+  max-width: 100%;
+  max-height: 100%;
+  padding: 12px;
+  padding-bottom: 0;
+  background: #434443DD;
+  box-sizing: border-box;
+  border: 1px solid #979797;
+  border-radius: 6px;
+  line-height: 100%;
+  margin: 0 auto;
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  position: relative;
-}
-.player-container .player-top-placeholder {
-  width: 100%;
-  height: 1px;
+  overflow: hidden;
 }
 .player-container .canvas-container {
-  width: 100%;
-  height: 90%;
-  text-align: center;
-  position: relative;
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
 }
-.player-container canvas {
-  border: 1px solid #06B1AB;
+.player-container .canvas-container canvas {
   max-width: 100%;
   max-height: 100%;
   box-sizing: border-box;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  display: block;
+  margin: 0 auto;
 }
-.player-container .player-controls {
+.player-container .player-timeline {
+  width: 100%;
+  height: 4px;
+  background: #666;
+  position: relative;
+  margin-top: -2px;
+}
+.player-container .player-timeline .player-timeline-progress {
+  transition-timing-function: linear;
   position: absolute;
-  bottom: 20px;
+  top: 0;
   left: 0;
-  width: 100%;
-  background: rgba(0, 0, 0, 0.7);
-  border-radius: 8px;
-  padding: 20px 15px;
+  height: 4px;
+  background: #06b1ab;
+}
+.player-container .player-controls {
+  margin-top: calc(12px * 1.2);
+  margin-bottom: calc(12px * 1.2);
+  max-width: 100%;
+  overflow: hidden;
   color: #FFF;
-  font-size: 18px;
-  line-height: 1.2;
-  transition: 0.2s;
+  font-size: 16px;
   box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  flex-shrink: 0;
+}
+.player-container .player-controls .status-icon {
+  transition: 0.2s;
+  width: 40px;
+  height: 40px;
+  margin-right: 12px;
+  background: #666;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.player-container .player-controls .status-text {
+  flex-grow: 1;
+  overflow: hidden;
+  position: relative;
 }
 .player-container .player-controls .title {
   font-weight: bold;
+  height: 20px;
+  line-height: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
 }
 .player-container .player-controls .subtitle {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
+  height: 20px;
+  line-height: 20px;
   width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  position: absolute;
+  top: 18px;
+  left: 0;
 }

package/dist/lib/component/player.js

@@ -71,6 +71,8 @@ var PIXI = __toESM(require("pixi.js"));
 var import_react = require("react");
 var import_player = require("./player.css");
 var import_utils = require("../utils");
+var import_icons = require("@ant-design/icons");
+var import_antd = require("antd");
 var import_blackboard = require("./blackboard");
 var import_store = require("./store");
 const canvasPaddingLeft = 0;
@@ -80,7 +82,7 @@ const cubicBezier = (t, p0, p1, p2, p3) => {
   return p0 * t2 * t2 * t2 + 3 * p1 * t * t2 * t2 + 3 * p2 * t * t * t2 + p3 * t * t * t;
 };
 const cubicImage = (t) => {
-  return cubicBezier(t, 0, 0.69, 0.43, 1);
+  return linear(t);
 };
 const cubicInsightElement = (t) => {
   return cubicBezier(t, 0, 0.5, 0.5, 1);
@@ -94,6 +96,38 @@ const linear = (t) => {
 const sleep = (ms) => {
   return new Promise((resolve) => setTimeout(resolve, ms));
 };
+const ERROR_FRAME_CANCEL = "frame cancel";
+const frameKit = () => {
+  let cancelFlag = false;
+  return {
+    frame: (callback) => {
+      if (cancelFlag) {
+        throw new Error(ERROR_FRAME_CANCEL);
+      }
+      requestAnimationFrame(() => {
+        if (cancelFlag) {
+          throw new Error(ERROR_FRAME_CANCEL);
+        }
+        callback(performance.now());
+      });
+    },
+    timeout: (callback, ms) => {
+      if (cancelFlag) {
+        throw new Error(ERROR_FRAME_CANCEL);
+      }
+      setTimeout(() => {
+        if (cancelFlag) {
+          throw new Error(ERROR_FRAME_CANCEL);
+        }
+        callback();
+      }, ms);
+    },
+    cancel: () => {
+      console.log("set frame cancel");
+      cancelFlag = true;
+    }
+  };
+};
 const singleElementFadeInDuration = 80;
 const LAYER_ORDER_IMG = 0;
 const LAYER_ORDER_INSIGHT = 1;
@@ -118,6 +152,7 @@ const Player = () => {
   const imgSpriteMap = (0, import_react.useRef)(/* @__PURE__ */ new Map());
   const pointerSprite = (0, import_react.useRef)(null);
   const spinningPointerSprite = (0, import_react.useRef)(null);
+  const [replayMark, setReplayMark] = (0, import_react.useState)(0);
   const windowContentContainer = (0, import_react.useMemo)(() => {
     const container = new PIXI.Container();
     return container;
@@ -136,6 +171,7 @@ const Player = () => {
       top: imageHeight / 2
     }
   };
+  const [animationProgress, setAnimationProgress] = (0, import_react.useState)(-1);
   const cancelFlag = (0, import_react.useRef)(false);
   (0, import_react.useEffect)(() => {
     cancelFlag.current = false;
@@ -143,14 +179,6 @@ const Player = () => {
       cancelFlag.current = true;
     };
   }, []);
-  const frame = (callback) => {
-    requestAnimationFrame(() => {
-      if (cancelFlag.current) {
-        return;
-      }
-      callback(performance.now());
-    });
-  };
   const cameraState = (0, import_react.useRef)(__spreadValues({}, basicCameraState));
   const preloadImage = (img) => __async(void 0, null, function* () {
     if (imgSpriteMap.current.has(img))
@@ -182,7 +210,7 @@ const Player = () => {
     sprite.zIndex = LAYER_ORDER_IMG;
     windowContentContainer.addChild(sprite);
   });
-  const spinningPointer = () => __async(void 0, null, function* () {
+  const spinningPointer = (frame) => {
     var _a2, _b;
     if (!spinningPointerSprite.current) {
       spinningPointerSprite.current = PIXI.Sprite.from(import_utils.mouseLoading);
@@ -217,7 +245,7 @@ const Player = () => {
       isCancelled = true;
     };
     return stopFn;
-  });
+  };
   const updatePointer = (img, x, y) => __async(void 0, null, function* () {
     var _a2, _b;
     if (!imgSpriteMap.current.has(img)) {
@@ -270,7 +298,7 @@ const Player = () => {
       pointer.scale.set(1 / newScale);
     }
   };
-  const cameraAnimation = (targetState, duration) => __async(void 0, null, function* () {
+  const cameraAnimation = (targetState, duration, frame) => __async(void 0, null, function* () {
     const currentState = __spreadValues({}, cameraState.current);
     const startLeft = currentState.left;
     const startTop = currentState.top;
@@ -323,7 +351,7 @@ const Player = () => {
       frame(animate);
     });
   });
-  const fadeInGraphics = (graphics, duration, targetAlpha = 1) => {
+  const fadeInGraphics = (graphics, duration, frame, targetAlpha = 1) => {
     return new Promise((resolve) => {
       const startTime = performance.now();
       const animate = (currentTime) => {
@@ -339,13 +367,14 @@ const Player = () => {
       frame(animate);
     });
   };
-  const fadeOutItem = (graphics, duration) => __async(void 0, null, function* () {
-    return fadeInGraphics(graphics, duration, 0);
+  const fadeOutItem = (graphics, duration, frame) => __async(void 0, null, function* () {
+    return fadeInGraphics(graphics, duration, frame, 0);
   });
-  const insightElementsAnimation = (elements, highlightElements, duration) => __async(void 0, null, function* () {
+  const insightElementsAnimation = (elements, highlightElements, duration, frame) => __async(void 0, null, function* () {
     insightMarkContainer.removeChildren();
     const elementsToAdd = [...elements];
     const totalLength = elementsToAdd.length;
+    let childrenCount = 0;
     yield new Promise((resolve) => {
       const startTime = performance.now();
       const animate = (currentTime) => {
@@ -354,7 +383,7 @@ const Player = () => {
           Math.min(elapsedTime / duration, 1)
         );
         const elementsToAddNow = Math.floor(progress * totalLength);
-        while (insightMarkContainer.children.length < elementsToAddNow) {
+        while (childrenCount < elementsToAddNow) {
           const randomIndex = Math.floor(Math.random() * elementsToAdd.length);
           const element = elementsToAdd.splice(randomIndex, 1)[0];
           if (element) {
@@ -365,7 +394,12 @@ const Player = () => {
             );
             insightMarkGraphic.alpha = 0;
             insightMarkContainer.addChild(insightMarkGraphic);
-            fadeInGraphics(insightMarkGraphic, singleElementFadeInDuration);
+            childrenCount++;
+            fadeInGraphics(
+              insightMarkGraphic,
+              singleElementFadeInDuration,
+              frame
+            );
           }
         }
         if (elapsedTime < duration) {
@@ -399,30 +433,57 @@ const Player = () => {
       frame(animate);
     });
   });
-  (0, import_react.useEffect)(() => {
+  const init = () => __async(void 0, null, function* () {
+    if (!divContainerRef.current || !scripts)
+      return;
+    yield app.init({
+      width: canvasWidth,
+      height: canvasHeight,
+      background: 16053492
+    });
+    divContainerRef.current.appendChild(app.canvas);
+    windowContentContainer.x = 0;
+    windowContentContainer.y = 0;
+    app.stage.addChild(windowContentContainer);
+    insightMarkContainer.x = 0;
+    insightMarkContainer.y = 0;
+    windowContentContainer.addChild(insightMarkContainer);
+  });
+  const play = () => {
     let cancelFn;
     Promise.resolve(
       (() => __async(void 0, null, function* () {
-        if (!divContainerRef.current || !scripts || !app)
-          return;
-        yield app.init({
-          width: canvasWidth,
-          height: canvasHeight,
-          background: 16053492
-        });
-        divContainerRef.current.appendChild(app.canvas);
+        if (!app) {
+          throw new Error("app is not initialized");
+        }
+        if (!scripts) {
+          throw new Error("scripts is required");
+        }
+        const { frame, cancel, timeout } = frameKit();
+        cancelFn = cancel;
         const allImages = scripts.filter((item) => !!item.img).map((item) => item.img);
         yield Promise.all([...allImages, import_utils.mouseLoading].map(preloadImage));
-        windowContentContainer.x = 0;
-        windowContentContainer.y = 0;
-        app.stage.addChild(windowContentContainer);
-        insightMarkContainer.x = 0;
-        insightMarkContainer.y = 0;
-        windowContentContainer.addChild(insightMarkContainer);
+        insightMarkContainer.removeChildren();
         yield updatePointer(import_utils.mousePointer, imageWidth / 2, imageHeight / 2);
         yield repaintImage();
-        yield updateCamera(cameraState.current);
-        for (const item of scripts) {
+        yield updateCamera(__spreadValues({}, basicCameraState));
+        const totalDuration = scripts.reduce((acc, item) => {
+          return acc + item.duration + (item.insightCameraDuration || 0);
+        }, 0);
+        const progressUpdateInterval = 300;
+        const startTime = performance.now();
+        setAnimationProgress(0);
+        const updateProgress = () => {
+          const progress = Math.min(
+            (performance.now() - startTime) / totalDuration,
+            1
+          );
+          setAnimationProgress(progress);
+          return timeout(updateProgress, progressUpdateInterval);
+        };
+        frame(updateProgress);
+        for (const index in scripts) {
+          const item = scripts[index];
           setTitleText(item.title || "");
           setSubTitleText(item.subTitle || "");
           if (item.type === "sleep") {
@@ -438,13 +499,21 @@ const Player = () => {
             yield insightElementsAnimation(
               elements,
               highlightElements,
-              item.duration
+              item.duration,
+              frame
             );
             if (item.camera) {
-              yield cameraAnimation(item.camera, item.duration);
+              if (!item.insightCameraDuration) {
+                throw new Error("insightCameraDuration is required");
+              }
+              yield cameraAnimation(
+                item.camera,
+                item.insightCameraDuration,
+                frame
+              );
             }
           } else if (item.type === "clear-insight") {
-            yield fadeOutItem(insightMarkContainer, item.duration);
+            yield fadeOutItem(insightMarkContainer, item.duration, frame);
             insightMarkContainer.removeChildren();
             insightMarkContainer.alpha = 1;
           } else if (item.type === "img") {
@@ -453,7 +522,7 @@ const Player = () => {
               yield repaintImage();
             }
             if (item.camera) {
-              yield cameraAnimation(item.camera, item.duration);
+              yield cameraAnimation(item.camera, item.duration, frame);
             } else {
               yield sleep(item.duration);
             }
@@ -463,29 +532,98 @@ const Player = () => {
             }
             yield updatePointer(item.img);
           } else if (item.type === "spinning-pointer") {
-            const cancelFn2 = yield spinningPointer();
+            const stop = spinningPointer(frame);
             yield sleep(item.duration);
-            cancelFn2();
+            stop();
           }
         }
+      }))().catch((e) => {
+        console.error("player error", e);
+      })
+    );
+    return () => {
+      cancelFn == null ? void 0 : cancelFn();
+    };
+  };
+  (0, import_react.useEffect)(() => {
+    Promise.resolve(
+      (() => __async(void 0, null, function* () {
+        yield init();
+        setReplayMark(Date.now());
       }))()
     );
     return () => {
       try {
-        cancelFn == null ? void 0 : cancelFn();
         app.destroy(true, { children: true, texture: true });
       } catch (e) {
         console.warn("destroy failed", e);
       }
     };
   }, []);
-  const showControl = !!titleText;
+  (0, import_react.useEffect)(() => {
+    if (replayMark) {
+      return play();
+    }
+  }, [replayMark]);
+  const progressString = Math.round(animationProgress * 100);
+  const transitionStyle = animationProgress === 0 ? "none" : "0.3s";
+  const [mouseOverStatusIcon, setMouseOverStatusIcon] = (0, import_react.useState)(false);
+  let statusIconElement;
+  const statusStyle = {};
+  let statusOnClick = () => {
+  };
+  if (animationProgress < 1) {
+    statusIconElement = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Spin, { indicator: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.LoadingOutlined, { spin: true }), size: "default" });
+  } else if (mouseOverStatusIcon) {
+    statusIconElement = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Spin, { indicator: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.PlayCircleOutlined, {}), size: "default" });
+    statusStyle.cursor = "pointer";
+    statusStyle.background = "#888";
+    statusOnClick = () => setReplayMark(Date.now());
+  } else {
+    statusIconElement = // <Spin indicator={<CheckCircleOutlined />} size="default" />
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Spin, { indicator: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.PlayCircleOutlined, {}), size: "default" });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "player-container", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "player-top-placeholder", children: " " }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "canvas-container", ref: divContainerRef }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "player-controls", style: { opacity: showControl ? 1 : 0 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "title", children: titleText }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "subtitle", children: subTitleText })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "player-timeline", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: "player-timeline-progress",
+        style: {
+          width: `${progressString}%`,
+          transition: transitionStyle
+        }
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "player-controls", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          className: "status-icon",
+          onMouseEnter: () => setMouseOverStatusIcon(true),
+          onMouseLeave: () => setMouseOverStatusIcon(false),
+          style: statusStyle,
+          onClick: statusOnClick,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_antd.ConfigProvider,
+            {
+              theme: {
+                components: {
+                  Spin: {
+                    dotSize: 24,
+                    colorPrimary: "rgb(6,177,171)"
+                  }
+                }
+              },
+              children: statusIconElement
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "status-text", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "title", children: titleText }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "subtitle", children: subTitleText })
+      ] })
     ] })
   ] });
 };

package/dist/lib/component/{player-scripts.js → replay-scripts.js}

@@ -34,13 +34,13 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var player_scripts_exports = {};
-__export(player_scripts_exports, {
+var replay_scripts_exports = {};
+__export(replay_scripts_exports, {
   cameraStateForRect: () => cameraStateForRect,
   generateAnimationScripts: () => generateAnimationScripts,
   mergeTwoCameraState: () => mergeTwoCameraState
 });
-module.exports = __toCommonJS(player_scripts_exports);
+module.exports = __toCommonJS(replay_scripts_exports);
 var import_player = require("./player.css");
 var import_utils = require("../utils");
 const stillDuration = 1200;
@@ -56,7 +56,7 @@ const cameraStateForRect = (rect, imageWidth, imageHeight) => {
   } else {
     rectWidthOnPage = rect.height / imageHeight * imageWidth;
   }
-  const cameraPaddingRatio = rectWidthOnPage < 50 ? 0.3 : 0.2;
+  const cameraPaddingRatio = rectWidthOnPage > 400 ? 0.1 : rectWidthOnPage > 50 ? 0.2 : 0.3;
   const cameraWidth = Math.min(
     imageWidth,
     rectWidthOnPage + imageWidth * cameraPaddingRatio * 2
@@ -126,6 +126,7 @@ const generateAnimationScripts = (execution, imageWidth, imageHeight) => {
   let currentCameraState = fullPageCameraState;
   let insightOnTop = false;
   const taskCount = execution.tasks.length;
+  let initSubTitle = "";
   execution.tasks.forEach((task, index) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
     if (task.type === "Planning") {
@@ -134,10 +135,12 @@ const generateAnimationScripts = (execution, imageWidth, imageHeight) => {
         scripts.push({
           type: "img",
           img: (_b = (_a = planningTask.recorder) == null ? void 0 : _a[0]) == null ? void 0 : _b.screenshot,
+          camera: fullPageCameraState,
           duration: stillDuration,
           title: (0, import_utils.typeStr)(task),
           subTitle: (0, import_utils.paramStr)(task)
         });
+        initSubTitle = (0, import_utils.paramStr)(task);
       }
     } else if (task.type === "Insight") {
       const insightTask = task;
@@ -164,6 +167,7 @@ const generateAnimationScripts = (execution, imageWidth, imageHeight) => {
           insightDump,
           camera: currentCameraState === fullPageCameraState || !insightCameraState ? void 0 : mergeTwoCameraState(currentCameraState, insightCameraState),
           duration: insightContentLength > 20 ? locateDuration : locateDuration * 0.5,
+          insightCameraDuration: locateDuration,
           title,
           subTitle
         });
@@ -224,14 +228,12 @@ const generateAnimationScripts = (execution, imageWidth, imageHeight) => {
     }
   });
   scripts.push({
+    title: "Done",
+    subTitle: initSubTitle,
     type: "img",
     duration: stillDuration * 0.5,
     camera: fullPageCameraState
   });
-  scripts.push({
-    type: "sleep",
-    duration: stillDuration
-  });
   return scripts;
 };
 // Annotate the CommonJS export names for ESM import in node:

package/dist/lib/component/store.js

@@ -52,7 +52,7 @@ __export(store_exports, {
 });
 module.exports = __toCommonJS(store_exports);
 var Z = __toESM(require("zustand"));
-var import_player_scripts = require("./player-scripts");
+var import_replay_scripts = require("./replay-scripts");
 const { create } = Z;
 const useBlackboardPreference = create((set) => ({
   bgVisible: true,
@@ -124,7 +124,7 @@ const useExecutionDump = create((set, get) => {
         activeTask: task,
         activeExecution: parentExecution,
         _executionDumpLoadId: ++_executionDumpLoadId,
-        activeExecutionAnimation: (0, import_player_scripts.generateAnimationScripts)(
+        activeExecutionAnimation: (0, import_replay_scripts.generateAnimationScripts)(
           parentExecution,
           width,
           height

package/dist/lib/index.css

@@ -125,7 +125,7 @@ footer.mt-8 {
   text-align: center;
   margin-top: 10px;
 }
-.main-right .main-canvas-container {
+.main-right .main-content-container {
   flex-grow: 1;
   height: 100%;
   background: #ffffff;

package/dist/lib/index.js

@@ -180,7 +180,7 @@ function Visualizer(props) {
                 autoSaveId: "page-detail-layout-v2",
                 direction: "horizontal",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_resizable_panels.Panel, { defaultSize: 75, maxSize: 95, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "main-canvas-container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_detail_panel.default, {}) }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_resizable_panels.Panel, { defaultSize: 75, maxSize: 95, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "main-content-container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_detail_panel.default, {}) }) }),
                   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_resizable_panels.PanelResizeHandle, {}),
                   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_resizable_panels.Panel, { maxSize: 95, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "main-side", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_detail_side.default, {}) }) })
                 ]