@midscene/visualizer 1.0.1-beta-20251212085743.0 → 1.0.1-beta-20251216064101.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/component/playground/index.css +10 -0
- package/dist/es/component/playground-result/index.css +10 -0
- package/dist/es/component/playground-result/index.mjs +119 -6
- package/dist/es/component/shiny-text/index.css +15 -0
- package/dist/es/component/universal-playground/index.mjs +2 -1
- package/dist/es/hooks/usePlaygroundExecution.mjs +3 -3
- package/dist/es/utils/replay-scripts.mjs +21 -4
- package/dist/lib/component/playground/index.css +10 -0
- package/dist/lib/component/playground-result/index.css +10 -0
- package/dist/lib/component/playground-result/index.js +119 -6
- package/dist/lib/component/shiny-text/index.css +15 -0
- package/dist/lib/component/universal-playground/index.js +2 -1
- package/dist/lib/hooks/usePlaygroundExecution.js +3 -3
- package/dist/lib/utils/replay-scripts.js +21 -4
- package/dist/types/component/playground-result/index.d.ts +1 -0
- package/dist/types/types.d.ts +1 -0
- package/dist/types/utils/replay-scripts.d.ts +1 -1
- package/package.json +6 -6
|
@@ -32,6 +32,16 @@
|
|
|
32
32
|
overflow: scroll;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
+
[data-theme="dark"] .result-wrapper .loading-container .loading-progress-text {
|
|
36
|
+
color: rgba(255, 255, 255, .45);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
[data-theme="dark"] .result-wrapper pre {
|
|
40
|
+
color: #f8fafd;
|
|
41
|
+
background: rgba(255, 255, 255, .08);
|
|
42
|
+
border: 1px solid rgba(255, 255, 255, .12);
|
|
43
|
+
}
|
|
44
|
+
|
|
35
45
|
.prompt-input-wrapper {
|
|
36
46
|
width: 100%;
|
|
37
47
|
}
|
|
@@ -32,3 +32,13 @@
|
|
|
32
32
|
overflow: scroll;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
+
[data-theme="dark"] .result-wrapper .loading-container .loading-progress-text {
|
|
36
|
+
color: rgba(255, 255, 255, .45);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
[data-theme="dark"] .result-wrapper pre {
|
|
40
|
+
color: #f8fafd;
|
|
41
|
+
background: rgba(255, 255, 255, .08);
|
|
42
|
+
border: 1px solid rgba(255, 255, 255, .12);
|
|
43
|
+
}
|
|
44
|
+
|
|
@@ -1,15 +1,17 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { LoadingOutlined } from "@ant-design/icons";
|
|
3
|
+
import { noReplayAPIs } from "@midscene/playground";
|
|
3
4
|
import { Spin } from "antd";
|
|
4
5
|
import { emptyResultTip, serverLaunchTip } from "../misc/index.mjs";
|
|
5
6
|
import { Player } from "../player/index.mjs";
|
|
6
7
|
import shiny_text from "../shiny-text/index.mjs";
|
|
7
8
|
import "./index.css";
|
|
8
|
-
const PlaygroundResultView = ({ result, loading, serverValid, serviceMode, replayScriptsInfo, replayCounter, loadingProgressText, verticalMode = false, notReadyMessage, fitMode, autoZoom })=>{
|
|
9
|
+
const PlaygroundResultView = ({ result, loading, serverValid, serviceMode, replayScriptsInfo, replayCounter, loadingProgressText, verticalMode = false, notReadyMessage, fitMode, autoZoom, actionType })=>{
|
|
9
10
|
let resultWrapperClassName = 'result-wrapper';
|
|
10
11
|
if (verticalMode) resultWrapperClassName += ' vertical-mode-result';
|
|
11
12
|
if (replayScriptsInfo && verticalMode) resultWrapperClassName += ' result-wrapper-compact';
|
|
12
13
|
let resultDataToShow = emptyResultTip;
|
|
14
|
+
const shouldPrioritizeResult = actionType && noReplayAPIs.includes(actionType);
|
|
13
15
|
if (serverValid || 'Server' !== serviceMode) {
|
|
14
16
|
if (loading) resultDataToShow = /*#__PURE__*/ jsxs("div", {
|
|
15
17
|
className: "loading-container",
|
|
@@ -29,7 +31,65 @@ const PlaygroundResultView = ({ result, loading, serverValid, serviceMode, repla
|
|
|
29
31
|
})
|
|
30
32
|
]
|
|
31
33
|
});
|
|
32
|
-
else if (
|
|
34
|
+
else if (null == result ? void 0 : result.error) resultDataToShow = /*#__PURE__*/ jsx("pre", {
|
|
35
|
+
children: null == result ? void 0 : result.error
|
|
36
|
+
});
|
|
37
|
+
else if (shouldPrioritizeResult && (null == result ? void 0 : result.result) !== void 0 && replayScriptsInfo) {
|
|
38
|
+
const resultOutput = 'string' == typeof (null == result ? void 0 : result.result) ? /*#__PURE__*/ jsx("pre", {
|
|
39
|
+
children: null == result ? void 0 : result.result
|
|
40
|
+
}) : /*#__PURE__*/ jsx("pre", {
|
|
41
|
+
children: JSON.stringify(null == result ? void 0 : result.result, null, 2)
|
|
42
|
+
});
|
|
43
|
+
const reportContent = ('In-Browser-Extension' === serviceMode || 'Server' === serviceMode) && (null == result ? void 0 : result.reportHTML) ? null == result ? void 0 : result.reportHTML : null;
|
|
44
|
+
resultDataToShow = /*#__PURE__*/ jsxs("div", {
|
|
45
|
+
style: {
|
|
46
|
+
display: 'flex',
|
|
47
|
+
flexDirection: 'column',
|
|
48
|
+
gap: '16px',
|
|
49
|
+
height: '100%'
|
|
50
|
+
},
|
|
51
|
+
children: [
|
|
52
|
+
/*#__PURE__*/ jsxs("div", {
|
|
53
|
+
style: {
|
|
54
|
+
flex: '0 0 auto'
|
|
55
|
+
},
|
|
56
|
+
children: [
|
|
57
|
+
/*#__PURE__*/ jsx("div", {
|
|
58
|
+
style: {
|
|
59
|
+
fontWeight: 'bold',
|
|
60
|
+
marginBottom: '8px'
|
|
61
|
+
},
|
|
62
|
+
children: "Output:"
|
|
63
|
+
}),
|
|
64
|
+
resultOutput
|
|
65
|
+
]
|
|
66
|
+
}),
|
|
67
|
+
/*#__PURE__*/ jsxs("div", {
|
|
68
|
+
style: {
|
|
69
|
+
flex: '1 1 auto',
|
|
70
|
+
minHeight: 0
|
|
71
|
+
},
|
|
72
|
+
children: [
|
|
73
|
+
/*#__PURE__*/ jsx("div", {
|
|
74
|
+
style: {
|
|
75
|
+
fontWeight: 'bold',
|
|
76
|
+
marginBottom: '8px'
|
|
77
|
+
},
|
|
78
|
+
children: "Report:"
|
|
79
|
+
}),
|
|
80
|
+
/*#__PURE__*/ jsx(Player, {
|
|
81
|
+
replayScripts: replayScriptsInfo.scripts,
|
|
82
|
+
imageWidth: replayScriptsInfo.width,
|
|
83
|
+
imageHeight: replayScriptsInfo.height,
|
|
84
|
+
reportFileContent: reportContent,
|
|
85
|
+
fitMode: fitMode,
|
|
86
|
+
autoZoom: autoZoom
|
|
87
|
+
}, replayCounter)
|
|
88
|
+
]
|
|
89
|
+
})
|
|
90
|
+
]
|
|
91
|
+
});
|
|
92
|
+
} else if (replayScriptsInfo) {
|
|
33
93
|
const reportContent = ('In-Browser-Extension' === serviceMode || 'Server' === serviceMode) && (null == result ? void 0 : result.reportHTML) ? null == result ? void 0 : result.reportHTML : null;
|
|
34
94
|
resultDataToShow = /*#__PURE__*/ jsx(Player, {
|
|
35
95
|
replayScripts: replayScriptsInfo.scripts,
|
|
@@ -39,14 +99,67 @@ const PlaygroundResultView = ({ result, loading, serverValid, serviceMode, repla
|
|
|
39
99
|
fitMode: fitMode,
|
|
40
100
|
autoZoom: autoZoom
|
|
41
101
|
}, replayCounter);
|
|
42
|
-
} else if ((null == result ? void 0 : result.
|
|
102
|
+
} else if (shouldPrioritizeResult && (null == result ? void 0 : result.result) !== void 0 && (null == result ? void 0 : result.reportHTML)) {
|
|
103
|
+
const resultOutput = 'string' == typeof (null == result ? void 0 : result.result) ? /*#__PURE__*/ jsx("pre", {
|
|
104
|
+
children: null == result ? void 0 : result.result
|
|
105
|
+
}) : /*#__PURE__*/ jsx("pre", {
|
|
106
|
+
children: JSON.stringify(null == result ? void 0 : result.result, null, 2)
|
|
107
|
+
});
|
|
108
|
+
resultDataToShow = /*#__PURE__*/ jsxs("div", {
|
|
109
|
+
style: {
|
|
110
|
+
display: 'flex',
|
|
111
|
+
flexDirection: 'column',
|
|
112
|
+
gap: '16px',
|
|
113
|
+
height: '100%'
|
|
114
|
+
},
|
|
115
|
+
children: [
|
|
116
|
+
/*#__PURE__*/ jsxs("div", {
|
|
117
|
+
style: {
|
|
118
|
+
flex: '0 0 auto'
|
|
119
|
+
},
|
|
120
|
+
children: [
|
|
121
|
+
/*#__PURE__*/ jsx("div", {
|
|
122
|
+
style: {
|
|
123
|
+
fontWeight: 'bold',
|
|
124
|
+
marginBottom: '8px'
|
|
125
|
+
},
|
|
126
|
+
children: "Output:"
|
|
127
|
+
}),
|
|
128
|
+
resultOutput
|
|
129
|
+
]
|
|
130
|
+
}),
|
|
131
|
+
/*#__PURE__*/ jsxs("div", {
|
|
132
|
+
style: {
|
|
133
|
+
flex: '1 1 auto',
|
|
134
|
+
minHeight: 0
|
|
135
|
+
},
|
|
136
|
+
children: [
|
|
137
|
+
/*#__PURE__*/ jsx("div", {
|
|
138
|
+
style: {
|
|
139
|
+
fontWeight: 'bold',
|
|
140
|
+
marginBottom: '8px'
|
|
141
|
+
},
|
|
142
|
+
children: "Report:"
|
|
143
|
+
}),
|
|
144
|
+
/*#__PURE__*/ jsx(Player, {
|
|
145
|
+
reportFileContent: result.reportHTML,
|
|
146
|
+
fitMode: fitMode,
|
|
147
|
+
autoZoom: autoZoom
|
|
148
|
+
}, replayCounter)
|
|
149
|
+
]
|
|
150
|
+
})
|
|
151
|
+
]
|
|
152
|
+
});
|
|
153
|
+
} else if (shouldPrioritizeResult && (null == result ? void 0 : result.result) !== void 0) resultDataToShow = 'string' == typeof (null == result ? void 0 : result.result) ? /*#__PURE__*/ jsx("pre", {
|
|
154
|
+
children: null == result ? void 0 : result.result
|
|
155
|
+
}) : /*#__PURE__*/ jsx("pre", {
|
|
156
|
+
children: JSON.stringify(null == result ? void 0 : result.result, null, 2)
|
|
157
|
+
});
|
|
158
|
+
else if (null == result ? void 0 : result.reportHTML) resultDataToShow = /*#__PURE__*/ jsx(Player, {
|
|
43
159
|
reportFileContent: result.reportHTML,
|
|
44
160
|
fitMode: fitMode,
|
|
45
161
|
autoZoom: autoZoom
|
|
46
162
|
}, replayCounter);
|
|
47
|
-
else if (null == result ? void 0 : result.error) resultDataToShow = /*#__PURE__*/ jsx("pre", {
|
|
48
|
-
children: null == result ? void 0 : result.error
|
|
49
|
-
});
|
|
50
163
|
else if ((null == result ? void 0 : result.result) !== void 0) resultDataToShow = 'string' == typeof (null == result ? void 0 : result.result) ? /*#__PURE__*/ jsx("pre", {
|
|
51
164
|
children: null == result ? void 0 : result.result
|
|
52
165
|
}) : /*#__PURE__*/ jsx("pre", {
|
|
@@ -56,6 +56,21 @@
|
|
|
56
56
|
display: none;
|
|
57
57
|
}
|
|
58
58
|
|
|
59
|
+
[data-theme="dark"] .shiny-text {
|
|
60
|
+
color: rgba(0, 0, 0, 0);
|
|
61
|
+
-webkit-text-fill-color: transparent;
|
|
62
|
+
text-shadow: none;
|
|
63
|
+
background-image: linear-gradient(45deg, #a78bfa, #c084fc, #e879f9, #c084fc);
|
|
64
|
+
background-size: 300%;
|
|
65
|
+
-webkit-background-clip: text;
|
|
66
|
+
background-clip: text;
|
|
67
|
+
animation: 8s infinite textGradient;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
[data-theme="dark"] .shiny-text:after {
|
|
71
|
+
background: linear-gradient(90deg, rgba(197, 184, 255, 0) 0%, rgba(197, 184, 255, .05) 10%, rgba(197, 184, 255, .15) 50%, rgba(197, 184, 255, .05) 90%, rgba(197, 184, 255, 0) 100%);
|
|
72
|
+
}
|
|
73
|
+
|
|
59
74
|
@keyframes shine {
|
|
60
75
|
0% {
|
|
61
76
|
opacity: .7;
|
|
@@ -256,7 +256,8 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
|
|
|
256
256
|
replayCounter: item.replayCounter || 0,
|
|
257
257
|
loadingProgressText: item.loadingProgressText || '',
|
|
258
258
|
verticalMode: item.verticalMode || false,
|
|
259
|
-
fitMode: "width"
|
|
259
|
+
fitMode: "width",
|
|
260
|
+
actionType: item.actionType
|
|
260
261
|
}) : /*#__PURE__*/ jsxs(Fragment, {
|
|
261
262
|
children: [
|
|
262
263
|
/*#__PURE__*/ jsx("div", {
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { paramStr, typeStr } from "@midscene/core/agent";
|
|
2
2
|
import { useCallback } from "react";
|
|
3
3
|
import { useEnvConfig } from "../store/store.mjs";
|
|
4
|
-
import { noReplayAPIs } from "@midscene/playground";
|
|
5
4
|
import { BLANK_RESULT } from "../utils/constants.mjs";
|
|
6
5
|
import { allScriptsFromDump } from "../utils/replay-scripts.mjs";
|
|
7
6
|
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
|
@@ -185,7 +184,7 @@ function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, se
|
|
|
185
184
|
currentRunningIdRef.current = null;
|
|
186
185
|
let replayInfo = null;
|
|
187
186
|
let counter = replayCounter;
|
|
188
|
-
if (
|
|
187
|
+
if (null == result ? void 0 : result.dump) {
|
|
189
188
|
if (result.dump.tasks && Array.isArray(result.dump.tasks)) {
|
|
190
189
|
const groupedDump = wrapExecutionDumpForReplay(result.dump);
|
|
191
190
|
const info = allScriptsFromDump(groupedDump);
|
|
@@ -209,7 +208,8 @@ function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, se
|
|
|
209
208
|
replayScriptsInfo: replayInfo,
|
|
210
209
|
replayCounter: counter,
|
|
211
210
|
loadingProgressText: '',
|
|
212
|
-
verticalMode: verticalMode
|
|
211
|
+
verticalMode: verticalMode,
|
|
212
|
+
actionType: actionType
|
|
213
213
|
};
|
|
214
214
|
setInfoList((prev)=>[
|
|
215
215
|
...prev,
|
|
@@ -80,12 +80,28 @@ const mergeTwoCameraState = (cameraState1, cameraState2)=>{
|
|
|
80
80
|
};
|
|
81
81
|
};
|
|
82
82
|
const allScriptsFromDump = (dump)=>{
|
|
83
|
+
var _normalizedDump_executions, _normalizedDump_executions1, _normalizedDump_modelBriefs;
|
|
84
|
+
if (!dump) {
|
|
85
|
+
console.warn('[allScriptsFromDump] dump is empty');
|
|
86
|
+
return {
|
|
87
|
+
scripts: [],
|
|
88
|
+
modelBriefs: []
|
|
89
|
+
};
|
|
90
|
+
}
|
|
91
|
+
const normalizedDump = Array.isArray(dump.executions) ? dump : {
|
|
92
|
+
sdkVersion: '',
|
|
93
|
+
groupName: 'Execution',
|
|
94
|
+
modelBriefs: [],
|
|
95
|
+
executions: [
|
|
96
|
+
dump
|
|
97
|
+
]
|
|
98
|
+
};
|
|
83
99
|
const dimensionsSet = new Set();
|
|
84
100
|
let firstWidth;
|
|
85
101
|
let firstHeight;
|
|
86
|
-
const sdkVersion =
|
|
102
|
+
const sdkVersion = normalizedDump.sdkVersion;
|
|
87
103
|
const modelBriefsSet = new Set();
|
|
88
|
-
|
|
104
|
+
null == (_normalizedDump_executions = normalizedDump.executions) || _normalizedDump_executions.filter(Boolean).forEach((execution)=>{
|
|
89
105
|
execution.tasks.forEach((task)=>{
|
|
90
106
|
var _task_uiContext_size, _task_uiContext;
|
|
91
107
|
if (null == (_task_uiContext = task.uiContext) ? void 0 : null == (_task_uiContext_size = _task_uiContext.size) ? void 0 : _task_uiContext_size.width) {
|
|
@@ -108,7 +124,7 @@ const allScriptsFromDump = (dump)=>{
|
|
|
108
124
|
};
|
|
109
125
|
}
|
|
110
126
|
const allScripts = [];
|
|
111
|
-
|
|
127
|
+
null == (_normalizedDump_executions1 = normalizedDump.executions) || _normalizedDump_executions1.filter(Boolean).forEach((execution)=>{
|
|
112
128
|
const scripts = generateAnimationScripts(execution, -1, firstWidth, firstHeight);
|
|
113
129
|
if (scripts) allScripts.push(...scripts);
|
|
114
130
|
execution.tasks.forEach((task)=>{
|
|
@@ -122,9 +138,10 @@ const allScriptsFromDump = (dump)=>{
|
|
|
122
138
|
if (index !== allScripts.length - 1 && 'Done' === script.title) return false;
|
|
123
139
|
return true;
|
|
124
140
|
});
|
|
141
|
+
const normalizedModelBriefs = (null == (_normalizedDump_modelBriefs = normalizedDump.modelBriefs) ? void 0 : _normalizedDump_modelBriefs.length) ? normalizedDump.modelBriefs : [];
|
|
125
142
|
const modelBriefs = (()=>{
|
|
126
143
|
var _list_;
|
|
127
|
-
const list = [
|
|
144
|
+
const list = normalizedModelBriefs.length ? normalizedModelBriefs : [
|
|
128
145
|
...modelBriefsSet
|
|
129
146
|
];
|
|
130
147
|
if (!list.length) return list;
|
|
@@ -32,6 +32,16 @@
|
|
|
32
32
|
overflow: scroll;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
+
[data-theme="dark"] .result-wrapper .loading-container .loading-progress-text {
|
|
36
|
+
color: rgba(255, 255, 255, .45);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
[data-theme="dark"] .result-wrapper pre {
|
|
40
|
+
color: #f8fafd;
|
|
41
|
+
background: rgba(255, 255, 255, .08);
|
|
42
|
+
border: 1px solid rgba(255, 255, 255, .12);
|
|
43
|
+
}
|
|
44
|
+
|
|
35
45
|
.prompt-input-wrapper {
|
|
36
46
|
width: 100%;
|
|
37
47
|
}
|
|
@@ -32,3 +32,13 @@
|
|
|
32
32
|
overflow: scroll;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
+
[data-theme="dark"] .result-wrapper .loading-container .loading-progress-text {
|
|
36
|
+
color: rgba(255, 255, 255, .45);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
[data-theme="dark"] .result-wrapper pre {
|
|
40
|
+
color: #f8fafd;
|
|
41
|
+
background: rgba(255, 255, 255, .08);
|
|
42
|
+
border: 1px solid rgba(255, 255, 255, .12);
|
|
43
|
+
}
|
|
44
|
+
|
|
@@ -37,17 +37,19 @@ __webpack_require__.d(__webpack_exports__, {
|
|
|
37
37
|
});
|
|
38
38
|
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
39
39
|
const icons_namespaceObject = require("@ant-design/icons");
|
|
40
|
+
const playground_namespaceObject = require("@midscene/playground");
|
|
40
41
|
const external_antd_namespaceObject = require("antd");
|
|
41
42
|
const index_js_namespaceObject = require("../misc/index.js");
|
|
42
43
|
const external_player_index_js_namespaceObject = require("../player/index.js");
|
|
43
44
|
const external_shiny_text_index_js_namespaceObject = require("../shiny-text/index.js");
|
|
44
45
|
var external_shiny_text_index_js_default = /*#__PURE__*/ __webpack_require__.n(external_shiny_text_index_js_namespaceObject);
|
|
45
46
|
require("./index.css");
|
|
46
|
-
const PlaygroundResultView = ({ result, loading, serverValid, serviceMode, replayScriptsInfo, replayCounter, loadingProgressText, verticalMode = false, notReadyMessage, fitMode, autoZoom })=>{
|
|
47
|
+
const PlaygroundResultView = ({ result, loading, serverValid, serviceMode, replayScriptsInfo, replayCounter, loadingProgressText, verticalMode = false, notReadyMessage, fitMode, autoZoom, actionType })=>{
|
|
47
48
|
let resultWrapperClassName = 'result-wrapper';
|
|
48
49
|
if (verticalMode) resultWrapperClassName += ' vertical-mode-result';
|
|
49
50
|
if (replayScriptsInfo && verticalMode) resultWrapperClassName += ' result-wrapper-compact';
|
|
50
51
|
let resultDataToShow = index_js_namespaceObject.emptyResultTip;
|
|
52
|
+
const shouldPrioritizeResult = actionType && playground_namespaceObject.noReplayAPIs.includes(actionType);
|
|
51
53
|
if (serverValid || 'Server' !== serviceMode) {
|
|
52
54
|
if (loading) resultDataToShow = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
|
|
53
55
|
className: "loading-container",
|
|
@@ -67,7 +69,65 @@ const PlaygroundResultView = ({ result, loading, serverValid, serviceMode, repla
|
|
|
67
69
|
})
|
|
68
70
|
]
|
|
69
71
|
});
|
|
70
|
-
else if (
|
|
72
|
+
else if (null == result ? void 0 : result.error) resultDataToShow = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("pre", {
|
|
73
|
+
children: null == result ? void 0 : result.error
|
|
74
|
+
});
|
|
75
|
+
else if (shouldPrioritizeResult && (null == result ? void 0 : result.result) !== void 0 && replayScriptsInfo) {
|
|
76
|
+
const resultOutput = 'string' == typeof (null == result ? void 0 : result.result) ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("pre", {
|
|
77
|
+
children: null == result ? void 0 : result.result
|
|
78
|
+
}) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("pre", {
|
|
79
|
+
children: JSON.stringify(null == result ? void 0 : result.result, null, 2)
|
|
80
|
+
});
|
|
81
|
+
const reportContent = ('In-Browser-Extension' === serviceMode || 'Server' === serviceMode) && (null == result ? void 0 : result.reportHTML) ? null == result ? void 0 : result.reportHTML : null;
|
|
82
|
+
resultDataToShow = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
|
|
83
|
+
style: {
|
|
84
|
+
display: 'flex',
|
|
85
|
+
flexDirection: 'column',
|
|
86
|
+
gap: '16px',
|
|
87
|
+
height: '100%'
|
|
88
|
+
},
|
|
89
|
+
children: [
|
|
90
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
|
|
91
|
+
style: {
|
|
92
|
+
flex: '0 0 auto'
|
|
93
|
+
},
|
|
94
|
+
children: [
|
|
95
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
96
|
+
style: {
|
|
97
|
+
fontWeight: 'bold',
|
|
98
|
+
marginBottom: '8px'
|
|
99
|
+
},
|
|
100
|
+
children: "Output:"
|
|
101
|
+
}),
|
|
102
|
+
resultOutput
|
|
103
|
+
]
|
|
104
|
+
}),
|
|
105
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
|
|
106
|
+
style: {
|
|
107
|
+
flex: '1 1 auto',
|
|
108
|
+
minHeight: 0
|
|
109
|
+
},
|
|
110
|
+
children: [
|
|
111
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
112
|
+
style: {
|
|
113
|
+
fontWeight: 'bold',
|
|
114
|
+
marginBottom: '8px'
|
|
115
|
+
},
|
|
116
|
+
children: "Report:"
|
|
117
|
+
}),
|
|
118
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_player_index_js_namespaceObject.Player, {
|
|
119
|
+
replayScripts: replayScriptsInfo.scripts,
|
|
120
|
+
imageWidth: replayScriptsInfo.width,
|
|
121
|
+
imageHeight: replayScriptsInfo.height,
|
|
122
|
+
reportFileContent: reportContent,
|
|
123
|
+
fitMode: fitMode,
|
|
124
|
+
autoZoom: autoZoom
|
|
125
|
+
}, replayCounter)
|
|
126
|
+
]
|
|
127
|
+
})
|
|
128
|
+
]
|
|
129
|
+
});
|
|
130
|
+
} else if (replayScriptsInfo) {
|
|
71
131
|
const reportContent = ('In-Browser-Extension' === serviceMode || 'Server' === serviceMode) && (null == result ? void 0 : result.reportHTML) ? null == result ? void 0 : result.reportHTML : null;
|
|
72
132
|
resultDataToShow = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_player_index_js_namespaceObject.Player, {
|
|
73
133
|
replayScripts: replayScriptsInfo.scripts,
|
|
@@ -77,14 +137,67 @@ const PlaygroundResultView = ({ result, loading, serverValid, serviceMode, repla
|
|
|
77
137
|
fitMode: fitMode,
|
|
78
138
|
autoZoom: autoZoom
|
|
79
139
|
}, replayCounter);
|
|
80
|
-
} else if ((null == result ? void 0 : result.
|
|
140
|
+
} else if (shouldPrioritizeResult && (null == result ? void 0 : result.result) !== void 0 && (null == result ? void 0 : result.reportHTML)) {
|
|
141
|
+
const resultOutput = 'string' == typeof (null == result ? void 0 : result.result) ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("pre", {
|
|
142
|
+
children: null == result ? void 0 : result.result
|
|
143
|
+
}) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("pre", {
|
|
144
|
+
children: JSON.stringify(null == result ? void 0 : result.result, null, 2)
|
|
145
|
+
});
|
|
146
|
+
resultDataToShow = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
|
|
147
|
+
style: {
|
|
148
|
+
display: 'flex',
|
|
149
|
+
flexDirection: 'column',
|
|
150
|
+
gap: '16px',
|
|
151
|
+
height: '100%'
|
|
152
|
+
},
|
|
153
|
+
children: [
|
|
154
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
|
|
155
|
+
style: {
|
|
156
|
+
flex: '0 0 auto'
|
|
157
|
+
},
|
|
158
|
+
children: [
|
|
159
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
160
|
+
style: {
|
|
161
|
+
fontWeight: 'bold',
|
|
162
|
+
marginBottom: '8px'
|
|
163
|
+
},
|
|
164
|
+
children: "Output:"
|
|
165
|
+
}),
|
|
166
|
+
resultOutput
|
|
167
|
+
]
|
|
168
|
+
}),
|
|
169
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
|
|
170
|
+
style: {
|
|
171
|
+
flex: '1 1 auto',
|
|
172
|
+
minHeight: 0
|
|
173
|
+
},
|
|
174
|
+
children: [
|
|
175
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
176
|
+
style: {
|
|
177
|
+
fontWeight: 'bold',
|
|
178
|
+
marginBottom: '8px'
|
|
179
|
+
},
|
|
180
|
+
children: "Report:"
|
|
181
|
+
}),
|
|
182
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_player_index_js_namespaceObject.Player, {
|
|
183
|
+
reportFileContent: result.reportHTML,
|
|
184
|
+
fitMode: fitMode,
|
|
185
|
+
autoZoom: autoZoom
|
|
186
|
+
}, replayCounter)
|
|
187
|
+
]
|
|
188
|
+
})
|
|
189
|
+
]
|
|
190
|
+
});
|
|
191
|
+
} else if (shouldPrioritizeResult && (null == result ? void 0 : result.result) !== void 0) resultDataToShow = 'string' == typeof (null == result ? void 0 : result.result) ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("pre", {
|
|
192
|
+
children: null == result ? void 0 : result.result
|
|
193
|
+
}) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("pre", {
|
|
194
|
+
children: JSON.stringify(null == result ? void 0 : result.result, null, 2)
|
|
195
|
+
});
|
|
196
|
+
else if (null == result ? void 0 : result.reportHTML) resultDataToShow = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_player_index_js_namespaceObject.Player, {
|
|
81
197
|
reportFileContent: result.reportHTML,
|
|
82
198
|
fitMode: fitMode,
|
|
83
199
|
autoZoom: autoZoom
|
|
84
200
|
}, replayCounter);
|
|
85
|
-
else if (null == result ? void 0 : result.error) resultDataToShow = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("pre", {
|
|
86
|
-
children: null == result ? void 0 : result.error
|
|
87
|
-
});
|
|
88
201
|
else if ((null == result ? void 0 : result.result) !== void 0) resultDataToShow = 'string' == typeof (null == result ? void 0 : result.result) ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("pre", {
|
|
89
202
|
children: null == result ? void 0 : result.result
|
|
90
203
|
}) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("pre", {
|
|
@@ -56,6 +56,21 @@
|
|
|
56
56
|
display: none;
|
|
57
57
|
}
|
|
58
58
|
|
|
59
|
+
[data-theme="dark"] .shiny-text {
|
|
60
|
+
color: rgba(0, 0, 0, 0);
|
|
61
|
+
-webkit-text-fill-color: transparent;
|
|
62
|
+
text-shadow: none;
|
|
63
|
+
background-image: linear-gradient(45deg, #a78bfa, #c084fc, #e879f9, #c084fc);
|
|
64
|
+
background-size: 300%;
|
|
65
|
+
-webkit-background-clip: text;
|
|
66
|
+
background-clip: text;
|
|
67
|
+
animation: 8s infinite textGradient;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
[data-theme="dark"] .shiny-text:after {
|
|
71
|
+
background: linear-gradient(90deg, rgba(197, 184, 255, 0) 0%, rgba(197, 184, 255, .05) 10%, rgba(197, 184, 255, .15) 50%, rgba(197, 184, 255, .05) 90%, rgba(197, 184, 255, 0) 100%);
|
|
72
|
+
}
|
|
73
|
+
|
|
59
74
|
@keyframes shine {
|
|
60
75
|
0% {
|
|
61
76
|
opacity: .7;
|
|
@@ -297,7 +297,8 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
|
|
|
297
297
|
replayCounter: item.replayCounter || 0,
|
|
298
298
|
loadingProgressText: item.loadingProgressText || '',
|
|
299
299
|
verticalMode: item.verticalMode || false,
|
|
300
|
-
fitMode: "width"
|
|
300
|
+
fitMode: "width",
|
|
301
|
+
actionType: item.actionType
|
|
301
302
|
}) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
|
|
302
303
|
children: [
|
|
303
304
|
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
@@ -29,7 +29,6 @@ __webpack_require__.d(__webpack_exports__, {
|
|
|
29
29
|
const agent_namespaceObject = require("@midscene/core/agent");
|
|
30
30
|
const external_react_namespaceObject = require("react");
|
|
31
31
|
const store_js_namespaceObject = require("../store/store.js");
|
|
32
|
-
const playground_namespaceObject = require("@midscene/playground");
|
|
33
32
|
const constants_js_namespaceObject = require("../utils/constants.js");
|
|
34
33
|
const replay_scripts_js_namespaceObject = require("../utils/replay-scripts.js");
|
|
35
34
|
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
|
@@ -213,7 +212,7 @@ function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, se
|
|
|
213
212
|
currentRunningIdRef.current = null;
|
|
214
213
|
let replayInfo = null;
|
|
215
214
|
let counter = replayCounter;
|
|
216
|
-
if (
|
|
215
|
+
if (null == result ? void 0 : result.dump) {
|
|
217
216
|
if (result.dump.tasks && Array.isArray(result.dump.tasks)) {
|
|
218
217
|
const groupedDump = wrapExecutionDumpForReplay(result.dump);
|
|
219
218
|
const info = (0, replay_scripts_js_namespaceObject.allScriptsFromDump)(groupedDump);
|
|
@@ -237,7 +236,8 @@ function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, se
|
|
|
237
236
|
replayScriptsInfo: replayInfo,
|
|
238
237
|
replayCounter: counter,
|
|
239
238
|
loadingProgressText: '',
|
|
240
|
-
verticalMode: verticalMode
|
|
239
|
+
verticalMode: verticalMode,
|
|
240
|
+
actionType: actionType
|
|
241
241
|
};
|
|
242
242
|
setInfoList((prev)=>[
|
|
243
243
|
...prev,
|
|
@@ -111,12 +111,28 @@ const mergeTwoCameraState = (cameraState1, cameraState2)=>{
|
|
|
111
111
|
};
|
|
112
112
|
};
|
|
113
113
|
const allScriptsFromDump = (dump)=>{
|
|
114
|
+
var _normalizedDump_executions, _normalizedDump_executions1, _normalizedDump_modelBriefs;
|
|
115
|
+
if (!dump) {
|
|
116
|
+
console.warn('[allScriptsFromDump] dump is empty');
|
|
117
|
+
return {
|
|
118
|
+
scripts: [],
|
|
119
|
+
modelBriefs: []
|
|
120
|
+
};
|
|
121
|
+
}
|
|
122
|
+
const normalizedDump = Array.isArray(dump.executions) ? dump : {
|
|
123
|
+
sdkVersion: '',
|
|
124
|
+
groupName: 'Execution',
|
|
125
|
+
modelBriefs: [],
|
|
126
|
+
executions: [
|
|
127
|
+
dump
|
|
128
|
+
]
|
|
129
|
+
};
|
|
114
130
|
const dimensionsSet = new Set();
|
|
115
131
|
let firstWidth;
|
|
116
132
|
let firstHeight;
|
|
117
|
-
const sdkVersion =
|
|
133
|
+
const sdkVersion = normalizedDump.sdkVersion;
|
|
118
134
|
const modelBriefsSet = new Set();
|
|
119
|
-
|
|
135
|
+
null == (_normalizedDump_executions = normalizedDump.executions) || _normalizedDump_executions.filter(Boolean).forEach((execution)=>{
|
|
120
136
|
execution.tasks.forEach((task)=>{
|
|
121
137
|
var _task_uiContext_size, _task_uiContext;
|
|
122
138
|
if (null == (_task_uiContext = task.uiContext) ? void 0 : null == (_task_uiContext_size = _task_uiContext.size) ? void 0 : _task_uiContext_size.width) {
|
|
@@ -139,7 +155,7 @@ const allScriptsFromDump = (dump)=>{
|
|
|
139
155
|
};
|
|
140
156
|
}
|
|
141
157
|
const allScripts = [];
|
|
142
|
-
|
|
158
|
+
null == (_normalizedDump_executions1 = normalizedDump.executions) || _normalizedDump_executions1.filter(Boolean).forEach((execution)=>{
|
|
143
159
|
const scripts = generateAnimationScripts(execution, -1, firstWidth, firstHeight);
|
|
144
160
|
if (scripts) allScripts.push(...scripts);
|
|
145
161
|
execution.tasks.forEach((task)=>{
|
|
@@ -153,9 +169,10 @@ const allScriptsFromDump = (dump)=>{
|
|
|
153
169
|
if (index !== allScripts.length - 1 && 'Done' === script.title) return false;
|
|
154
170
|
return true;
|
|
155
171
|
});
|
|
172
|
+
const normalizedModelBriefs = (null == (_normalizedDump_modelBriefs = normalizedDump.modelBriefs) ? void 0 : _normalizedDump_modelBriefs.length) ? normalizedDump.modelBriefs : [];
|
|
156
173
|
const modelBriefs = (()=>{
|
|
157
174
|
var _list_;
|
|
158
|
-
const list = [
|
|
175
|
+
const list = normalizedModelBriefs.length ? normalizedModelBriefs : [
|
|
159
176
|
...modelBriefsSet
|
|
160
177
|
];
|
|
161
178
|
if (!list.length) return list;
|
package/dist/types/types.d.ts
CHANGED
|
@@ -30,5 +30,5 @@ export interface ReplayScriptsInfo {
|
|
|
30
30
|
sdkVersion?: string;
|
|
31
31
|
modelBriefs: string[];
|
|
32
32
|
}
|
|
33
|
-
export declare const allScriptsFromDump: (dump: GroupedActionDump) => ReplayScriptsInfo | null;
|
|
33
|
+
export declare const allScriptsFromDump: (dump: GroupedActionDump | ExecutionDump | null | undefined) => ReplayScriptsInfo | null;
|
|
34
34
|
export declare const generateAnimationScripts: (execution: ExecutionDump | null, task: ExecutionTask | number, imageWidth: number, imageHeight: number) => AnimationScript[] | null;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@midscene/visualizer",
|
|
3
|
-
"version": "1.0.1-beta-
|
|
3
|
+
"version": "1.0.1-beta-20251216064101.0",
|
|
4
4
|
"repository": "https://github.com/web-infra-dev/midscene",
|
|
5
5
|
"homepage": "https://midscenejs.com/",
|
|
6
6
|
"types": "./dist/types/index.d.ts",
|
|
@@ -60,16 +60,16 @@
|
|
|
60
60
|
"antd": "^5.21.6",
|
|
61
61
|
"buffer": "6.0.3",
|
|
62
62
|
"dayjs": "^1.11.11",
|
|
63
|
-
"@midscene/core": "1.0.1-beta-
|
|
64
|
-
"@midscene/
|
|
65
|
-
"@midscene/
|
|
66
|
-
"@midscene/
|
|
63
|
+
"@midscene/core": "1.0.1-beta-20251216064101.0",
|
|
64
|
+
"@midscene/playground": "1.0.1-beta-20251216064101.0",
|
|
65
|
+
"@midscene/shared": "1.0.1-beta-20251216064101.0",
|
|
66
|
+
"@midscene/web": "1.0.1-beta-20251216064101.0"
|
|
67
67
|
},
|
|
68
68
|
"license": "MIT",
|
|
69
69
|
"scripts": {
|
|
70
70
|
"dev": "npm run build:watch",
|
|
71
71
|
"build": "rslib build",
|
|
72
|
-
"build:watch": "rslib build --watch",
|
|
72
|
+
"build:watch": "rslib build --watch --no-clean",
|
|
73
73
|
"serve": "http-server ./dist/ -p 3000"
|
|
74
74
|
}
|
|
75
75
|
}
|