@midscene/visualizer 0.28.2-beta-20250910043028.0 → 0.28.2-beta-20250910065550.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/es/blank_polyfill.mjs +2 -0
- package/dist/es/component/{blackboard/index.mjs → blackboard.mjs} +3 -3
- package/dist/es/component/describer.css +25 -0
- package/dist/es/component/{env-config/index.mjs → env-config.mjs} +1 -1
- package/dist/es/component/{github-star/index.mjs → github-star.mjs} +1 -1
- package/dist/es/component/{logo/index.mjs → logo.mjs} +1 -1
- package/dist/es/component/{misc/index.mjs → misc.mjs} +2 -42
- package/dist/es/component/{player/index.mjs → player.mjs} +8 -8
- package/dist/es/component/{config-selector/index.mjs → playground/ConfigSelector.mjs} +3 -2
- package/dist/es/component/{context-preview/index.mjs → playground/ContextPreview.mjs} +4 -3
- package/dist/es/component/{history-selector/index.mjs → playground/HistorySelector.mjs} +1 -1
- package/dist/es/component/{playground-result/index.mjs → playground/PlaygroundResult.mjs} +4 -3
- package/dist/es/component/{prompt-input/index.mjs → playground/PromptInput.mjs} +9 -9
- package/dist/es/component/{service-mode-control/index.mjs → playground/ServiceModeControl.mjs} +5 -4
- package/dist/es/component/playground/index.css +161 -29
- package/dist/es/{utils/constants.mjs → component/playground/playground-constants.mjs} +43 -23
- package/dist/es/component/playground/playground-types.mjs +0 -0
- package/dist/es/{utils → component/playground}/playground-utils.mjs +1 -1
- package/dist/es/{utils → component}/replay-scripts.mjs +2 -1
- package/dist/es/component/{shiny-text/index.mjs → shiny-text.mjs} +1 -1
- package/dist/es/index.mjs +18 -22
- package/dist/es/init.mjs +10 -0
- package/dist/lib/blank_polyfill.js +36 -0
- package/dist/lib/component/{blackboard/index.js → blackboard.js} +5 -5
- package/dist/lib/component/describer.css +25 -0
- package/dist/lib/component/{env-config/index.js → env-config.js} +1 -1
- package/dist/lib/component/{github-star/index.js → github-star.js} +1 -1
- package/dist/lib/component/{logo/index.js → logo.js} +1 -1
- package/dist/lib/component/{misc/index.js → misc.js} +1 -60
- package/dist/lib/component/{player/index.js → player.js} +23 -23
- package/dist/lib/component/{config-selector/index.js → playground/ConfigSelector.js} +7 -6
- package/dist/lib/component/{context-preview/index.js → playground/ContextPreview.js} +9 -8
- package/dist/lib/component/{history-selector/index.js → playground/HistorySelector.js} +1 -1
- package/dist/lib/component/{playground-result/index.js → playground/PlaygroundResult.js} +9 -8
- package/dist/lib/component/{prompt-input/index.js → playground/PromptInput.js} +37 -37
- package/dist/lib/component/{service-mode-control/index.js → playground/ServiceModeControl.js} +9 -8
- package/dist/lib/component/playground/index.css +161 -29
- package/dist/lib/{utils/constants.js → component/playground/playground-constants.js} +64 -31
- package/dist/lib/component/playground/playground-types.js +18 -0
- package/dist/lib/{utils → component/playground}/playground-utils.js +1 -1
- package/dist/lib/{utils → component}/replay-scripts.js +4 -3
- package/dist/lib/component/{shiny-text/index.js → shiny-text.js} +1 -1
- package/dist/lib/index.js +34 -66
- package/dist/lib/init.js +44 -0
- package/dist/types/blank_polyfill.d.ts +2 -0
- package/dist/types/component/{blackboard/index.d.ts → blackboard.d.ts} +2 -2
- package/dist/types/component/{github-star/index.d.ts → github-star.d.ts} +1 -1
- package/dist/types/component/{logo/index.d.ts → logo.d.ts} +1 -1
- package/dist/types/component/misc.d.ts +2 -0
- package/dist/types/component/{player/index.d.ts → player.d.ts} +2 -2
- package/dist/types/component/{config-selector/index.d.ts → playground/ConfigSelector.d.ts} +1 -0
- package/dist/types/component/{context-preview/index.d.ts → playground/ContextPreview.d.ts} +1 -0
- package/dist/types/component/{history-selector/index.d.ts → playground/HistorySelector.d.ts} +1 -1
- package/dist/types/component/{playground-result/index.d.ts → playground/PlaygroundResult.d.ts} +4 -3
- package/dist/types/component/{prompt-input/index.d.ts → playground/PromptInput.d.ts} +2 -3
- package/dist/types/component/{service-mode-control/index.d.ts → playground/ServiceModeControl.d.ts} +1 -0
- package/dist/types/{utils/constants.d.ts → component/playground/playground-constants.d.ts} +5 -3
- package/dist/types/component/playground/playground-types.d.ts +19 -0
- package/dist/types/component/playground/types.d.ts +72 -0
- package/dist/types/{utils → component}/replay-scripts.d.ts +1 -0
- package/dist/types/component/{shiny-text/index.d.ts → shiny-text.d.ts} +1 -1
- package/dist/types/index.d.ts +10 -15
- package/dist/types/init.d.ts +1 -0
- package/package.json +5 -5
- package/dist/es/component/history-selector/index.css +0 -132
- package/dist/es/component/index.mjs +0 -1
- package/dist/es/component/playground/index.mjs +0 -8
- package/dist/es/component/playground-result/index.css +0 -29
- package/dist/es/component/prompt-input/index.css +0 -330
- package/dist/es/component/universal-playground/index.css +0 -341
- package/dist/es/component/universal-playground/index.mjs +0 -273
- package/dist/es/component/universal-playground/providers/context-provider.mjs +0 -52
- package/dist/es/component/universal-playground/providers/storage-provider.mjs +0 -107
- package/dist/es/hooks/usePlaygroundExecution.mjs +0 -168
- package/dist/es/hooks/usePlaygroundState.mjs +0 -176
- package/dist/es/icons/avatar.mjs +0 -28
- package/dist/lib/component/history-selector/index.css +0 -132
- package/dist/lib/component/index.js +0 -60
- package/dist/lib/component/playground/index.js +0 -113
- package/dist/lib/component/playground-result/index.css +0 -29
- package/dist/lib/component/prompt-input/index.css +0 -330
- package/dist/lib/component/universal-playground/index.css +0 -341
- package/dist/lib/component/universal-playground/index.js +0 -321
- package/dist/lib/component/universal-playground/providers/context-provider.js +0 -95
- package/dist/lib/component/universal-playground/providers/storage-provider.js +0 -147
- package/dist/lib/hooks/usePlaygroundExecution.js +0 -202
- package/dist/lib/hooks/usePlaygroundState.js +0 -210
- package/dist/lib/icons/avatar.js +0 -62
- package/dist/types/component/index.d.ts +0 -1
- package/dist/types/component/misc/index.d.ts +0 -6
- package/dist/types/component/playground/index.d.ts +0 -7
- package/dist/types/component/universal-playground/index.d.ts +0 -4
- package/dist/types/component/universal-playground/providers/context-provider.d.ts +0 -37
- package/dist/types/component/universal-playground/providers/storage-provider.d.ts +0 -33
- package/dist/types/hooks/usePlaygroundExecution.d.ts +0 -10
- package/dist/types/hooks/usePlaygroundState.d.ts +0 -26
- package/dist/types/types.d.ts +0 -164
- /package/dist/es/component/{blackboard/index.css → blackboard.css} +0 -0
- /package/dist/es/{utils → component}/color.mjs +0 -0
- /package/dist/es/component/{github-star/index.css → github-star.css} +0 -0
- /package/dist/es/component/{logo/index.css → logo.css} +0 -0
- /package/dist/es/{utils → component}/pixi-loader.mjs +0 -0
- /package/dist/es/component/{player/index.css → player.css} +0 -0
- /package/dist/es/component/{form-field/index.mjs → playground/FormField.mjs} +0 -0
- /package/dist/es/{types.mjs → component/playground/types.mjs} +0 -0
- /package/dist/es/{hooks → component/playground}/useServerValid.mjs +0 -0
- /package/dist/es/component/{playground/playground-demo-ui-context.json → playground-demo-ui-context.json} +0 -0
- /package/dist/es/component/{shiny-text/index.css → shiny-text.css} +0 -0
- /package/dist/es/{store → component/store}/history.mjs +0 -0
- /package/dist/es/{store → component/store}/store.mjs +0 -0
- /package/dist/es/{utils/index.mjs → utils.mjs} +0 -0
- /package/dist/lib/component/{blackboard/index.css → blackboard.css} +0 -0
- /package/dist/lib/{utils → component}/color.js +0 -0
- /package/dist/lib/component/{github-star/index.css → github-star.css} +0 -0
- /package/dist/lib/component/{logo/index.css → logo.css} +0 -0
- /package/dist/lib/{utils → component}/pixi-loader.js +0 -0
- /package/dist/lib/component/{player/index.css → player.css} +0 -0
- /package/dist/lib/component/{form-field/index.js → playground/FormField.js} +0 -0
- /package/dist/lib/{types.js → component/playground/types.js} +0 -0
- /package/dist/lib/{hooks → component/playground}/useServerValid.js +0 -0
- /package/dist/lib/component/{playground/playground-demo-ui-context.json → playground-demo-ui-context.json} +0 -0
- /package/dist/lib/component/{shiny-text/index.css → shiny-text.css} +0 -0
- /package/dist/lib/{store → component/store}/history.js +0 -0
- /package/dist/lib/{store → component/store}/store.js +0 -0
- /package/dist/lib/{utils/index.js → utils.js} +0 -0
- /package/dist/types/{utils → component}/color.d.ts +0 -0
- /package/dist/types/component/{env-config/index.d.ts → env-config.d.ts} +0 -0
- /package/dist/types/{utils → component}/pixi-loader.d.ts +0 -0
- /package/dist/types/component/{form-field/index.d.ts → playground/FormField.d.ts} +0 -0
- /package/dist/types/{utils → component/playground}/playground-utils.d.ts +0 -0
- /package/dist/types/{hooks → component/playground}/useServerValid.d.ts +0 -0
- /package/dist/types/{store → component/store}/history.d.ts +0 -0
- /package/dist/types/{store → component/store}/store.d.ts +0 -0
- /package/dist/types/{utils/index.d.ts → utils.d.ts} +0 -0
|
@@ -4,11 +4,11 @@ import "pixi.js/unsafe-eval";
|
|
|
4
4
|
import { Checkbox } from "antd";
|
|
5
5
|
import { Application, Container, Graphics, Rectangle, Sprite, Text, Texture } from "pixi.js";
|
|
6
6
|
import { useEffect, useMemo, useRef, useState } from "react";
|
|
7
|
-
import { colorForName, highlightColorForType } from "
|
|
8
|
-
import "./
|
|
7
|
+
import { colorForName, highlightColorForType } from "./color.mjs";
|
|
8
|
+
import "./blackboard.css";
|
|
9
9
|
import { treeToList } from "@midscene/shared/extractor";
|
|
10
10
|
import { DropShadowFilter } from "pixi-filters";
|
|
11
|
-
import { useBlackboardPreference } from "
|
|
11
|
+
import { useBlackboardPreference } from "./store/store.mjs";
|
|
12
12
|
const itemFillAlpha = 0.4;
|
|
13
13
|
const highlightAlpha = 0.4;
|
|
14
14
|
const pointRadius = 10;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
.image-describer {
|
|
2
|
+
position: relative;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.image-describer .describe-text {
|
|
6
|
+
box-sizing: border-box;
|
|
7
|
+
color: #fff;
|
|
8
|
+
background: #000;
|
|
9
|
+
width: 100%;
|
|
10
|
+
height: 30px;
|
|
11
|
+
padding: 10px;
|
|
12
|
+
font-size: 12px;
|
|
13
|
+
position: absolute;
|
|
14
|
+
bottom: 0;
|
|
15
|
+
left: 0;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.image-describer .describe-text.success {
|
|
19
|
+
background: #047704;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.image-describer .describe-text.error {
|
|
23
|
+
background: #870707;
|
|
24
|
+
}
|
|
25
|
+
|
|
@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { SettingOutlined } from "@ant-design/icons";
|
|
3
3
|
import { Input, Modal, Tooltip } from "antd";
|
|
4
4
|
import { useEffect, useRef, useState } from "react";
|
|
5
|
-
import { useEnvConfig } from "
|
|
5
|
+
import { useEnvConfig } from "./store/store.mjs";
|
|
6
6
|
function EnvConfig(param) {
|
|
7
7
|
let { showTooltipWhenEmpty = true, showModelName = true, tooltipPlacement = 'bottom', mode = 'icon' } = param;
|
|
8
8
|
const { config, configString, loadConfig, syncFromStorage } = useEnvConfig();
|
|
@@ -1,7 +1,5 @@
|
|
|
1
|
-
import { jsx
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { ArrowRightOutlined, CheckOutlined, ClockCircleOutlined, CloseOutlined, LogoutOutlined, MinusOutlined, WarningOutlined } from "@ant-design/icons";
|
|
3
|
-
import { Alert } from "antd";
|
|
4
|
-
import shiny_text from "../shiny-text/index.mjs";
|
|
5
3
|
function timeCostStrElement(timeCost) {
|
|
6
4
|
let str;
|
|
7
5
|
str = 'number' != typeof timeCost ? '-' : `${(timeCost / 1000).toFixed(2)}s`;
|
|
@@ -53,42 +51,4 @@ const iconForStatus = (status)=>{
|
|
|
53
51
|
return /*#__PURE__*/ jsx(MinusOutlined, {});
|
|
54
52
|
}
|
|
55
53
|
};
|
|
56
|
-
|
|
57
|
-
children: [
|
|
58
|
-
"Don't worry, just one more step to launch the playground server.",
|
|
59
|
-
/*#__PURE__*/ jsx("br", {}),
|
|
60
|
-
"Please run one of the commands under the midscene project directory:",
|
|
61
|
-
/*#__PURE__*/ jsx("br", {}),
|
|
62
|
-
"a. ",
|
|
63
|
-
/*#__PURE__*/ jsx("strong", {
|
|
64
|
-
children: "npx midscene-playground"
|
|
65
|
-
}),
|
|
66
|
-
/*#__PURE__*/ jsx("br", {}),
|
|
67
|
-
"b. ",
|
|
68
|
-
/*#__PURE__*/ jsx("strong", {
|
|
69
|
-
children: "npx --yes @midscene/web"
|
|
70
|
-
})
|
|
71
|
-
]
|
|
72
|
-
});
|
|
73
|
-
const serverLaunchTip = function() {
|
|
74
|
-
let notReadyMessage = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : errorMessageServerNotReady;
|
|
75
|
-
return /*#__PURE__*/ jsx("div", {
|
|
76
|
-
className: "server-tip",
|
|
77
|
-
children: /*#__PURE__*/ jsx(Alert, {
|
|
78
|
-
message: "Playground Server Not Ready",
|
|
79
|
-
description: notReadyMessage,
|
|
80
|
-
type: "warning"
|
|
81
|
-
})
|
|
82
|
-
});
|
|
83
|
-
};
|
|
84
|
-
const emptyResultTip = /*#__PURE__*/ jsx("div", {
|
|
85
|
-
className: "result-empty-tip",
|
|
86
|
-
style: {
|
|
87
|
-
textAlign: 'center'
|
|
88
|
-
},
|
|
89
|
-
children: /*#__PURE__*/ jsx(shiny_text, {
|
|
90
|
-
disabled: true,
|
|
91
|
-
text: "The result will be shown here"
|
|
92
|
-
})
|
|
93
|
-
});
|
|
94
|
-
export { emptyResultTip, errorMessageServerNotReady, iconForStatus, serverLaunchTip, timeCostStrElement };
|
|
54
|
+
export { iconForStatus, timeCostStrElement };
|
|
@@ -3,17 +3,17 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import "pixi.js/unsafe-eval";
|
|
4
4
|
import { Application, Container, Sprite } from "pixi.js";
|
|
5
5
|
import { useEffect, useMemo, useRef, useState } from "react";
|
|
6
|
-
import "./
|
|
7
|
-
import { mouseLoading, mousePointer } from "
|
|
6
|
+
import "./player.css";
|
|
7
|
+
import { mouseLoading, mousePointer } from "../utils.mjs";
|
|
8
8
|
import { CaretRightOutlined, DownloadOutlined, ExportOutlined, LoadingOutlined } from "@ant-design/icons";
|
|
9
9
|
import { treeToList } from "@midscene/shared/extractor";
|
|
10
10
|
import { Dropdown, Spin, Switch, Tooltip } from "antd";
|
|
11
|
-
import global_perspective from "
|
|
12
|
-
import player_setting from "
|
|
13
|
-
import show_marker from "
|
|
14
|
-
import {
|
|
15
|
-
import { getTextureFromCache, loadTexture } from "
|
|
16
|
-
import {
|
|
11
|
+
import global_perspective from "../icons/global-perspective.mjs";
|
|
12
|
+
import player_setting from "../icons/player-setting.mjs";
|
|
13
|
+
import show_marker from "../icons/show-marker.mjs";
|
|
14
|
+
import { rectMarkForItem } from "./blackboard.mjs";
|
|
15
|
+
import { getTextureFromCache, loadTexture } from "./pixi-loader.mjs";
|
|
16
|
+
import { useBlackboardPreference } from "./store/store.mjs";
|
|
17
17
|
function _define_property(obj, key, value) {
|
|
18
18
|
if (key in obj) Object.defineProperty(obj, key, {
|
|
19
19
|
value: value,
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Checkbox, Dropdown, Radio } from "antd";
|
|
3
3
|
import setting from "../../icons/setting.mjs";
|
|
4
|
-
import { useEnvConfig } from "
|
|
5
|
-
import { deepThinkTip, domIncludedTip, screenshotIncludedTip, trackingTip } from "
|
|
4
|
+
import { useEnvConfig } from "../store/store.mjs";
|
|
5
|
+
import { deepThinkTip, domIncludedTip, screenshotIncludedTip, trackingTip } from "./playground-constants.mjs";
|
|
6
|
+
import "./index.css";
|
|
6
7
|
const ConfigSelector = (param)=>{
|
|
7
8
|
let { showDeepThinkOption = false, enableTracking = false, showDataExtractionOptions = false, hideDomAndScreenshotOptions = false } = param;
|
|
8
9
|
const forceSameTabNavigation = useEnvConfig((state)=>state.forceSameTabNavigation);
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Button } from "antd";
|
|
3
|
-
import blackboard from "../blackboard
|
|
4
|
-
import { iconForStatus } from "../misc
|
|
5
|
-
import playground_demo_ui_context from "../playground
|
|
3
|
+
import blackboard from "../blackboard.mjs";
|
|
4
|
+
import { iconForStatus } from "../misc.mjs";
|
|
5
|
+
import playground_demo_ui_context from "../playground-demo-ui-context.json";
|
|
6
|
+
import "./index.css";
|
|
6
7
|
const ContextPreview = (param)=>{
|
|
7
8
|
let { uiContextPreview, setUiContextPreview, showContextPreview } = param;
|
|
8
9
|
if (!showContextPreview) return null;
|
|
@@ -4,7 +4,7 @@ import { useMemo, useState } from "react";
|
|
|
4
4
|
import icons_close from "../../icons/close.mjs";
|
|
5
5
|
import icons_history from "../../icons/history.mjs";
|
|
6
6
|
import magnifying_glass from "../../icons/magnifying-glass.mjs";
|
|
7
|
-
import { useHistoryStore } from "
|
|
7
|
+
import { useHistoryStore } from "../store/history.mjs";
|
|
8
8
|
import "./index.css";
|
|
9
9
|
const { Text } = Typography;
|
|
10
10
|
const HistorySelector = (param)=>{
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { LoadingOutlined } from "@ant-design/icons";
|
|
3
3
|
import { Spin } from "antd";
|
|
4
|
-
import {
|
|
5
|
-
import
|
|
6
|
-
import
|
|
4
|
+
import { Player } from "../player.mjs";
|
|
5
|
+
import shiny_text from "../shiny-text.mjs";
|
|
6
|
+
import { emptyResultTip, serverLaunchTip } from "./playground-constants.mjs";
|
|
7
|
+
import "./index.css";
|
|
7
8
|
const PlaygroundResultView = (param)=>{
|
|
8
9
|
let { result, loading, serverValid, serviceMode, replayScriptsInfo, replayCounter, loadingProgressText, verticalMode = false, notReadyMessage, fitMode, autoZoom } = param;
|
|
9
10
|
let resultWrapperClassName = 'result-wrapper';
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { BorderOutlined, DownOutlined, SendOutlined } from "@ant-design/icons";
|
|
3
|
-
import "./index.css";
|
|
4
3
|
import { Button, Dropdown, Form, Input, Radio, Space, Tooltip } from "antd";
|
|
5
4
|
import react, { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
6
|
-
import { useHistoryStore } from "
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
5
|
+
import { useHistoryStore } from "../store/history.mjs";
|
|
6
|
+
import { ConfigSelector } from "./ConfigSelector.mjs";
|
|
7
|
+
import { BooleanField, EnumField, LocateField, NumberField, TextField } from "./FormField.mjs";
|
|
8
|
+
import { HistorySelector } from "./HistorySelector.mjs";
|
|
9
|
+
import { apiMetadata, defaultMainButtons } from "./playground-constants.mjs";
|
|
10
|
+
import { actionNameForType, getPlaceholderForType, isRunButtonEnabled as external_playground_utils_mjs_isRunButtonEnabled } from "./playground-utils.mjs";
|
|
11
|
+
import { extractDefaultValue, isLocateField, isZodObjectSchema, unwrapZodType } from "./types.mjs";
|
|
12
|
+
import "./index.css";
|
|
13
13
|
const { TextArea } = Input;
|
|
14
14
|
const PromptInput = (param)=>{
|
|
15
15
|
let { runButtonEnabled, form, serviceMode, selectedType, dryMode, stoppable, loading, onRun, onStop, clearPromptAfterRun = true, actionSpace, hideDomAndScreenshotOptions = false } = param;
|
|
@@ -221,7 +221,7 @@ const PromptInput = (param)=>{
|
|
|
221
221
|
needsStructuredParams,
|
|
222
222
|
actionSpace
|
|
223
223
|
]);
|
|
224
|
-
const isRunButtonEnabled = useMemo(()=>
|
|
224
|
+
const isRunButtonEnabled = useMemo(()=>external_playground_utils_mjs_isRunButtonEnabled(runButtonEnabled, !!needsStructuredParams, params, actionSpace, selectedType, promptValue), [
|
|
225
225
|
runButtonEnabled,
|
|
226
226
|
needsStructuredParams,
|
|
227
227
|
selectedType,
|
package/dist/es/component/{service-mode-control/index.mjs → playground/ServiceModeControl.mjs}
RENAMED
|
@@ -3,10 +3,11 @@ import { PlaygroundSDK } from "@midscene/playground";
|
|
|
3
3
|
import { overrideAIConfig } from "@midscene/shared/env";
|
|
4
4
|
import { Button, Tooltip } from "antd";
|
|
5
5
|
import { useEffect } from "react";
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
6
|
+
import { EnvConfig } from "../env-config.mjs";
|
|
7
|
+
import { iconForStatus } from "../misc.mjs";
|
|
8
|
+
import { useEnvConfig } from "../store/store.mjs";
|
|
9
|
+
import { useServerValid } from "./useServerValid.mjs";
|
|
10
|
+
import "./index.css";
|
|
10
11
|
const TITLE_TEXT = {
|
|
11
12
|
Server: 'Server Status',
|
|
12
13
|
'In-Browser': 'In-Browser'
|
|
@@ -1,30 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
justify-content: center;
|
|
3
|
-
height: 100%;
|
|
4
|
-
margin: 4px 0;
|
|
5
|
-
display: flex;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
.result-wrapper .loading-container {
|
|
9
|
-
text-align: center;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
.result-wrapper .loading-container .loading-progress-text {
|
|
13
|
-
color: #888;
|
|
14
|
-
margin-top: 8px;
|
|
15
|
-
font-size: 12px;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
.result-wrapper pre {
|
|
19
|
-
white-space: pre-wrap;
|
|
20
|
-
text-wrap: unset;
|
|
21
|
-
word-wrap: break-word;
|
|
22
|
-
overflow-wrap: break-word;
|
|
23
|
-
background: #f2f4f7;
|
|
24
|
-
border-radius: 8px;
|
|
1
|
+
body {
|
|
25
2
|
margin: 0;
|
|
26
|
-
|
|
27
|
-
|
|
3
|
+
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Noto Sans, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
|
|
4
|
+
font-size: 14px;
|
|
28
5
|
}
|
|
29
6
|
|
|
30
7
|
.prompt-input-wrapper {
|
|
@@ -357,9 +334,164 @@
|
|
|
357
334
|
color: #2b83ff;
|
|
358
335
|
}
|
|
359
336
|
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
337
|
+
.history-modal-container {
|
|
338
|
+
border-radius: 12px 12px 0 0;
|
|
339
|
+
flex-direction: column;
|
|
340
|
+
height: 70vh;
|
|
341
|
+
display: flex;
|
|
342
|
+
overflow: hidden;
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
.history-modal-container .history-modal-header {
|
|
346
|
+
justify-content: space-between;
|
|
347
|
+
align-items: center;
|
|
348
|
+
height: 48px;
|
|
349
|
+
padding: 0 25px;
|
|
350
|
+
line-height: 48px;
|
|
351
|
+
display: flex;
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
.history-modal-container .history-modal-header .close-button {
|
|
355
|
+
justify-content: center;
|
|
356
|
+
align-items: center;
|
|
357
|
+
margin-right: -4px;
|
|
358
|
+
padding: 4px;
|
|
359
|
+
display: flex;
|
|
360
|
+
}
|
|
361
|
+
|
|
362
|
+
.history-modal-container .history-modal-header .close-button .anticon {
|
|
363
|
+
color: #999;
|
|
364
|
+
font-size: 18px;
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
.history-modal-container .history-modal-header .close-button:hover .anticon {
|
|
368
|
+
color: #666;
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
.history-modal-container .history-search-section {
|
|
372
|
+
background: #fff;
|
|
373
|
+
padding: 16px 20px;
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
.history-modal-container .history-search-section .search-input-wrapper {
|
|
377
|
+
color: rgba(0, 0, 0, .25);
|
|
378
|
+
align-items: center;
|
|
379
|
+
gap: 12px;
|
|
380
|
+
display: flex;
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
.history-modal-container .history-search-section .search-input-wrapper .search-input {
|
|
384
|
+
background: #f1f2f3;
|
|
385
|
+
border: none;
|
|
386
|
+
border-radius: 16px;
|
|
387
|
+
flex: 1;
|
|
388
|
+
height: 36px;
|
|
389
|
+
}
|
|
390
|
+
|
|
391
|
+
.history-modal-container .history-search-section .search-input-wrapper .search-input .ant-input {
|
|
392
|
+
box-shadow: none;
|
|
393
|
+
background: none;
|
|
394
|
+
border: none;
|
|
395
|
+
}
|
|
396
|
+
|
|
397
|
+
.history-modal-container .history-search-section .search-input-wrapper .search-input:hover, .history-modal-container .history-search-section .search-input-wrapper .search-input:focus-within {
|
|
398
|
+
background: #fff;
|
|
399
|
+
border-color: #d9d9d9;
|
|
400
|
+
}
|
|
401
|
+
|
|
402
|
+
.history-modal-container .history-search-section .search-input-wrapper .clear-button {
|
|
403
|
+
color: #1890ff;
|
|
404
|
+
height: auto;
|
|
405
|
+
padding: 0;
|
|
406
|
+
}
|
|
407
|
+
|
|
408
|
+
.history-modal-container .history-search-section .search-input-wrapper .clear-button:hover {
|
|
409
|
+
color: #40a9ff;
|
|
410
|
+
}
|
|
411
|
+
|
|
412
|
+
.history-modal-container .history-content {
|
|
413
|
+
flex: 1;
|
|
414
|
+
padding: 0 25px 25px;
|
|
415
|
+
overflow-y: auto;
|
|
416
|
+
}
|
|
417
|
+
|
|
418
|
+
.history-modal-container .history-content .history-group {
|
|
419
|
+
margin-bottom: 10px;
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
.history-modal-container .history-content .history-group .history-group-title {
|
|
423
|
+
color: rgba(0, 0, 0, .45);
|
|
424
|
+
height: 40px;
|
|
425
|
+
font-size: 12px;
|
|
426
|
+
font-weight: 400;
|
|
427
|
+
line-height: 40px;
|
|
428
|
+
}
|
|
429
|
+
|
|
430
|
+
.history-modal-container .history-content .history-group .history-item {
|
|
431
|
+
cursor: pointer;
|
|
432
|
+
color: rgba(0, 0, 0, .85);
|
|
433
|
+
white-space: nowrap;
|
|
434
|
+
text-overflow: ellipsis;
|
|
435
|
+
height: 40px;
|
|
363
436
|
font-size: 14px;
|
|
437
|
+
line-height: 40px;
|
|
438
|
+
overflow: hidden;
|
|
439
|
+
}
|
|
440
|
+
|
|
441
|
+
.history-modal-container .history-content .history-group .history-item:hover {
|
|
442
|
+
background: #f2f4f7;
|
|
443
|
+
margin: 0 -8px;
|
|
444
|
+
padding: 0 8px;
|
|
445
|
+
}
|
|
446
|
+
|
|
447
|
+
.history-modal-container .history-content .no-results {
|
|
448
|
+
text-align: center;
|
|
449
|
+
color: #999;
|
|
450
|
+
padding: 40px 20px;
|
|
451
|
+
}
|
|
452
|
+
|
|
453
|
+
.ant-modal-wrap .ant-modal-content {
|
|
454
|
+
animation: .3s cubic-bezier(.4, 0, .2, 1) forwards slideUpFromBottom !important;
|
|
455
|
+
}
|
|
456
|
+
|
|
457
|
+
@keyframes slideUpFromBottom {
|
|
458
|
+
0% {
|
|
459
|
+
opacity: 0;
|
|
460
|
+
transform: translateY(100%);
|
|
461
|
+
}
|
|
462
|
+
|
|
463
|
+
100% {
|
|
464
|
+
opacity: 1;
|
|
465
|
+
transform: translateY(0);
|
|
466
|
+
}
|
|
467
|
+
}
|
|
468
|
+
|
|
469
|
+
.result-wrapper {
|
|
470
|
+
justify-content: center;
|
|
471
|
+
height: 100%;
|
|
472
|
+
margin: 4px 0;
|
|
473
|
+
display: flex;
|
|
474
|
+
}
|
|
475
|
+
|
|
476
|
+
.result-wrapper .loading-container {
|
|
477
|
+
text-align: center;
|
|
478
|
+
}
|
|
479
|
+
|
|
480
|
+
.result-wrapper .loading-container .loading-progress-text {
|
|
481
|
+
color: #888;
|
|
482
|
+
margin-top: 8px;
|
|
483
|
+
font-size: 12px;
|
|
484
|
+
}
|
|
485
|
+
|
|
486
|
+
.result-wrapper pre {
|
|
487
|
+
white-space: pre-wrap;
|
|
488
|
+
text-wrap: unset;
|
|
489
|
+
word-wrap: break-word;
|
|
490
|
+
overflow-wrap: break-word;
|
|
491
|
+
background: #f2f4f7;
|
|
492
|
+
border-radius: 8px;
|
|
493
|
+
margin: 0;
|
|
494
|
+
padding: 14px;
|
|
495
|
+
overflow: scroll;
|
|
364
496
|
}
|
|
365
497
|
|
|
@@ -1,3 +1,45 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Alert } from "antd";
|
|
3
|
+
import shiny_text from "../shiny-text.mjs";
|
|
4
|
+
import "./index.css";
|
|
5
|
+
const errorMessageServerNotReady = /*#__PURE__*/ jsxs("span", {
|
|
6
|
+
children: [
|
|
7
|
+
"Don't worry, just one more step to launch the playground server.",
|
|
8
|
+
/*#__PURE__*/ jsx("br", {}),
|
|
9
|
+
"Please run one of the commands under the midscene project directory:",
|
|
10
|
+
/*#__PURE__*/ jsx("br", {}),
|
|
11
|
+
"a. ",
|
|
12
|
+
/*#__PURE__*/ jsx("strong", {
|
|
13
|
+
children: "npx midscene-playground"
|
|
14
|
+
}),
|
|
15
|
+
/*#__PURE__*/ jsx("br", {}),
|
|
16
|
+
"b. ",
|
|
17
|
+
/*#__PURE__*/ jsx("strong", {
|
|
18
|
+
children: "npx --yes @midscene/web"
|
|
19
|
+
})
|
|
20
|
+
]
|
|
21
|
+
});
|
|
22
|
+
const serverLaunchTip = function() {
|
|
23
|
+
let notReadyMessage = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : errorMessageServerNotReady;
|
|
24
|
+
return /*#__PURE__*/ jsx("div", {
|
|
25
|
+
className: "server-tip",
|
|
26
|
+
children: /*#__PURE__*/ jsx(Alert, {
|
|
27
|
+
message: "Playground Server Not Ready",
|
|
28
|
+
description: notReadyMessage,
|
|
29
|
+
type: "warning"
|
|
30
|
+
})
|
|
31
|
+
});
|
|
32
|
+
};
|
|
33
|
+
const emptyResultTip = /*#__PURE__*/ jsx("div", {
|
|
34
|
+
className: "result-empty-tip",
|
|
35
|
+
style: {
|
|
36
|
+
textAlign: 'center'
|
|
37
|
+
},
|
|
38
|
+
children: /*#__PURE__*/ jsx(shiny_text, {
|
|
39
|
+
disabled: true,
|
|
40
|
+
text: "The result will be shown here"
|
|
41
|
+
})
|
|
42
|
+
});
|
|
1
43
|
const trackingTip = 'limit popup to current tab';
|
|
2
44
|
const deepThinkTip = 'deep think';
|
|
3
45
|
const screenshotIncludedTip = 'include screenshot in request';
|
|
@@ -74,26 +116,4 @@ const defaultMainButtons = [
|
|
|
74
116
|
'aiQuery',
|
|
75
117
|
'aiAssert'
|
|
76
118
|
];
|
|
77
|
-
|
|
78
|
-
type: 'system',
|
|
79
|
-
content: `
|
|
80
|
-
Welcome to Midscene.js Playground!
|
|
81
|
-
|
|
82
|
-
This is a panel for experimenting and testing Midscene.js features. You can use natural language instructions to operate the web page, such as clicking buttons, filling in forms, querying information, etc.
|
|
83
|
-
|
|
84
|
-
Please enter your instructions in the input box below to start experiencing.
|
|
85
|
-
`,
|
|
86
|
-
loading: false,
|
|
87
|
-
result: void 0,
|
|
88
|
-
replayScriptsInfo: null,
|
|
89
|
-
replayCounter: 0,
|
|
90
|
-
loadingProgressText: '',
|
|
91
|
-
verticalMode: false
|
|
92
|
-
};
|
|
93
|
-
const BLANK_RESULT = {
|
|
94
|
-
result: void 0,
|
|
95
|
-
dump: null,
|
|
96
|
-
reportHTML: null,
|
|
97
|
-
error: null
|
|
98
|
-
};
|
|
99
|
-
export { BLANK_RESULT, WELCOME_MESSAGE_TEMPLATE, apiMetadata, deepThinkTip, defaultMainButtons, domIncludedTip, screenshotIncludedTip, trackingTip };
|
|
119
|
+
export { apiMetadata, deepThinkTip, defaultMainButtons, domIncludedTip, emptyResultTip, errorMessageServerNotReady, screenshotIncludedTip, serverLaunchTip, trackingTip };
|
|
File without changes
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { StaticPage, StaticPageAgent } from "@midscene/web/static";
|
|
2
|
-
import { isZodObjectSchema, unwrapZodType } from "
|
|
2
|
+
import { isZodObjectSchema, unwrapZodType } from "./types.mjs";
|
|
3
3
|
const actionNameForType = (type)=>{
|
|
4
4
|
const typeWithoutAi = type.startsWith('ai') ? type.slice(2) : type;
|
|
5
5
|
const fullName = typeWithoutAi.replace(/([A-Z])/g, ' $1').trim();
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import
|
|
2
|
+
import "./player.css";
|
|
3
|
+
import { mousePointer } from "../utils.mjs";
|
|
3
4
|
import { paramStr, typeStr } from "@midscene/core/agent";
|
|
4
5
|
import { treeToList } from "@midscene/shared/extractor";
|
|
5
6
|
const stillDuration = 900;
|
package/dist/es/index.mjs
CHANGED
|
@@ -1,23 +1,19 @@
|
|
|
1
1
|
import "./component/playground/index.css";
|
|
2
|
-
import "./component/
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
18
|
-
import
|
|
19
|
-
|
|
20
|
-
import universal_playground, { UniversalPlayground } from "./component/universal-playground/index.mjs";
|
|
21
|
-
import { LocalStorageProvider, MemoryStorageProvider, NoOpStorageProvider } from "./component/universal-playground/providers/storage-provider.mjs";
|
|
22
|
-
import { AgentContextProvider, BaseContextProvider, NoOpContextProvider, StaticContextProvider } from "./component/universal-playground/providers/context-provider.mjs";
|
|
23
|
-
export { AgentContextProvider, BaseContextProvider, Blackboard, ContextPreview, EnvConfig, GithubStar, LocalStorageProvider, Logo, MemoryStorageProvider, NoOpContextProvider, NoOpStorageProvider, Player, PlaygroundResultView, PromptInput, ServiceModeControl, shiny_text as ShinyText, StaticContextProvider, UniversalPlayground, universal_playground as UniversalPlaygroundDefault, actionNameForType, allScriptsFromDump, colorForName, filterBase64Value, generateAnimationScripts, getPlaceholderForType, globalThemeConfig, highlightColorForType, iconForStatus, staticAgentFromContext, timeCostStrElement, timeStr, useEnvConfig, useServerValid };
|
|
2
|
+
import { allScriptsFromDump, generateAnimationScripts } from "./component/replay-scripts.mjs";
|
|
3
|
+
import { useEnvConfig } from "./component/store/store.mjs";
|
|
4
|
+
import { colorForName, globalThemeConfig, highlightColorForType } from "./component/color.mjs";
|
|
5
|
+
import { EnvConfig } from "./component/env-config.mjs";
|
|
6
|
+
import { Logo } from "./component/logo.mjs";
|
|
7
|
+
import { iconForStatus, timeCostStrElement } from "./component/misc.mjs";
|
|
8
|
+
import { useServerValid } from "./component/playground/useServerValid.mjs";
|
|
9
|
+
import { PlaygroundResultView } from "./component/playground/PlaygroundResult.mjs";
|
|
10
|
+
import { ServiceModeControl } from "./component/playground/ServiceModeControl.mjs";
|
|
11
|
+
import { ContextPreview } from "./component/playground/ContextPreview.mjs";
|
|
12
|
+
import { PromptInput } from "./component/playground/PromptInput.mjs";
|
|
13
|
+
import { Player } from "./component/player.mjs";
|
|
14
|
+
import { Blackboard } from "./component/blackboard.mjs";
|
|
15
|
+
import { GithubStar } from "./component/github-star.mjs";
|
|
16
|
+
import { actionNameForType, getPlaceholderForType, staticAgentFromContext } from "./component/playground/playground-utils.mjs";
|
|
17
|
+
import { filterBase64Value, timeStr } from "./utils.mjs";
|
|
18
|
+
import shiny_text from "./component/shiny-text.mjs";
|
|
19
|
+
export { Blackboard, ContextPreview, EnvConfig, GithubStar, Logo, Player, PlaygroundResultView, PromptInput, ServiceModeControl, shiny_text as ShinyText, actionNameForType, allScriptsFromDump, colorForName, filterBase64Value, generateAnimationScripts, getPlaceholderForType, globalThemeConfig, highlightColorForType, iconForStatus, staticAgentFromContext, timeCostStrElement, timeStr, useEnvConfig, useServerValid };
|
package/dist/es/init.mjs
ADDED
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __webpack_require__ = {};
|
|
3
|
+
(()=>{
|
|
4
|
+
__webpack_require__.d = (exports1, definition)=>{
|
|
5
|
+
for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: definition[key]
|
|
8
|
+
});
|
|
9
|
+
};
|
|
10
|
+
})();
|
|
11
|
+
(()=>{
|
|
12
|
+
__webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
|
|
13
|
+
})();
|
|
14
|
+
(()=>{
|
|
15
|
+
__webpack_require__.r = (exports1)=>{
|
|
16
|
+
if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
|
|
17
|
+
value: 'Module'
|
|
18
|
+
});
|
|
19
|
+
Object.defineProperty(exports1, '__esModule', {
|
|
20
|
+
value: true
|
|
21
|
+
});
|
|
22
|
+
};
|
|
23
|
+
})();
|
|
24
|
+
var __webpack_exports__ = {};
|
|
25
|
+
__webpack_require__.r(__webpack_exports__);
|
|
26
|
+
__webpack_require__.d(__webpack_exports__, {
|
|
27
|
+
AsyncLocalStorage: ()=>AsyncLocalStorage
|
|
28
|
+
});
|
|
29
|
+
const AsyncLocalStorage = {};
|
|
30
|
+
exports.AsyncLocalStorage = __webpack_exports__.AsyncLocalStorage;
|
|
31
|
+
for(var __webpack_i__ in __webpack_exports__)if (-1 === [
|
|
32
|
+
"AsyncLocalStorage"
|
|
33
|
+
].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
|
|
34
|
+
Object.defineProperty(exports, '__esModule', {
|
|
35
|
+
value: true
|
|
36
|
+
});
|