@midscene/visualizer 0.26.2 → 0.26.3-beta-20250813075706.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.css +12 -5
- package/dist/es/component/blackboard.mjs +266 -0
- package/dist/es/component/color.mjs +35 -0
- package/dist/es/component/describer.css +9 -5
- package/dist/es/component/describer.mjs +128 -0
- package/dist/es/component/env-config.mjs +112 -0
- package/dist/es/component/github-star.css +1 -0
- package/dist/es/component/github-star.mjs +20 -0
- package/dist/es/component/logo.css +5 -3
- package/dist/es/component/logo.mjs +20 -0
- package/dist/es/component/misc.mjs +54 -0
- package/dist/es/component/pixi-loader.mjs +16 -0
- package/dist/es/component/player.css +88 -70
- package/dist/es/component/player.mjs +628 -0
- package/dist/es/component/playground/ConfigSelector.mjs +53 -0
- package/dist/es/component/playground/ContextPreview.mjs +39 -0
- package/dist/es/component/playground/HistorySelector.mjs +193 -0
- package/dist/es/component/playground/PlaygroundResult.mjs +60 -0
- package/dist/es/component/playground/PromptInput.mjs +225 -0
- package/dist/es/component/playground/ServiceModeControl.mjs +100 -0
- package/dist/es/component/playground/index.css +140 -98
- package/dist/es/component/playground/playground-constants.mjs +45 -0
- package/dist/es/component/playground/playground-utils.mjs +89 -0
- package/dist/es/component/playground/useServerValid.mjs +27 -0
- package/dist/es/component/playground/useStaticPageAgent.mjs +12 -0
- package/dist/es/component/replay-scripts.mjs +271 -0
- package/dist/es/component/shiny-text.css +33 -22
- package/dist/es/component/shiny-text.mjs +15 -0
- package/dist/es/component/store/history.mjs +55 -0
- package/dist/es/component/store/store.mjs +128 -0
- package/dist/es/icons/close.mjs +19 -0
- package/dist/es/icons/history.mjs +30 -0
- package/dist/es/icons/magnifying-glass.mjs +39 -0
- package/dist/es/icons/setting.mjs +20 -0
- package/dist/es/index.mjs +21 -0
- package/dist/es/init.mjs +10 -0
- package/dist/es/{utils.js → utils.mjs} +51 -75
- package/dist/lib/blank_polyfill.js +34 -38
- package/dist/lib/component/blackboard.css +12 -5
- package/dist/lib/component/blackboard.js +293 -306
- package/dist/lib/component/color.js +64 -74
- package/dist/lib/component/describer.css +9 -5
- package/dist/lib/component/describer.js +158 -198
- package/dist/lib/component/env-config.js +142 -147
- package/dist/lib/component/github-star.css +1 -0
- package/dist/lib/component/github-star.js +51 -62
- package/dist/lib/component/logo.css +5 -3
- package/dist/lib/component/logo.js +53 -56
- package/dist/lib/component/misc.js +85 -84
- package/dist/lib/component/pixi-loader.js +49 -80
- package/dist/lib/component/player.css +88 -70
- package/dist/lib/component/player.js +627 -738
- package/dist/lib/component/playground/ConfigSelector.js +91 -92
- package/dist/lib/component/playground/ContextPreview.js +80 -72
- package/dist/lib/component/playground/HistorySelector.js +234 -197
- package/dist/lib/component/playground/PlaygroundResult.js +100 -103
- package/dist/lib/component/playground/PromptInput.js +250 -237
- package/dist/lib/component/playground/ServiceModeControl.js +124 -124
- package/dist/lib/component/playground/index.css +140 -98
- package/dist/lib/component/playground/playground-constants.js +97 -73
- package/dist/lib/component/playground/playground-types.js +17 -31
- package/dist/lib/component/playground/playground-utils.js +140 -168
- package/dist/lib/component/playground/useServerValid.js +55 -86
- package/dist/lib/component/playground/useStaticPageAgent.js +45 -51
- package/dist/lib/component/replay-scripts.js +291 -373
- package/dist/lib/component/shiny-text.css +33 -22
- package/dist/lib/component/shiny-text.js +46 -57
- package/dist/lib/component/store/history.js +58 -64
- package/dist/lib/component/store/store.js +132 -128
- package/dist/lib/icons/close.js +53 -0
- package/dist/lib/icons/history.js +64 -0
- package/dist/lib/icons/magnifying-glass.js +73 -0
- package/dist/lib/icons/setting.js +54 -0
- package/dist/lib/index.js +158 -124
- package/dist/lib/init.js +39 -46
- package/dist/lib/utils.js +105 -109
- package/dist/types/blank_polyfill.d.ts +2 -2
- package/dist/types/component/playground/ConfigSelector.d.ts +1 -0
- package/dist/types/component/playground/ContextPreview.d.ts +1 -0
- package/dist/types/component/playground/HistorySelector.d.ts +1 -0
- package/dist/types/component/playground/PlaygroundResult.d.ts +1 -0
- package/dist/types/component/playground/PromptInput.d.ts +1 -0
- package/dist/types/component/playground/ServiceModeControl.d.ts +1 -0
- package/package.json +16 -19
- package/dist/es/assets/close.909351c0.svg +0 -4
- package/dist/es/assets/history.164a4eab.svg +0 -4
- package/dist/es/assets/magnifying-glass.9498e70e.svg +0 -12
- package/dist/es/assets/setting.80ab7285.svg +0 -11
- package/dist/es/blank_polyfill.js +0 -10
- package/dist/es/component/blackboard.js +0 -286
- package/dist/es/component/color.js +0 -49
- package/dist/es/component/describer.js +0 -173
- package/dist/es/component/env-config.js +0 -117
- package/dist/es/component/github-star.js +0 -31
- package/dist/es/component/logo.js +0 -25
- package/dist/es/component/misc.js +0 -63
- package/dist/es/component/pixi-loader.js +0 -51
- package/dist/es/component/player.js +0 -746
- package/dist/es/component/playground/ConfigSelector.js +0 -64
- package/dist/es/component/playground/ContextPreview.js +0 -42
- package/dist/es/component/playground/HistorySelector.js +0 -168
- package/dist/es/component/playground/PlaygroundResult.js +0 -73
- package/dist/es/component/playground/PromptInput.js +0 -212
- package/dist/es/component/playground/ServiceModeControl.js +0 -100
- package/dist/es/component/playground/playground-constants.js +0 -39
- package/dist/es/component/playground/playground-types.js +0 -6
- package/dist/es/component/playground/playground-utils.js +0 -141
- package/dist/es/component/playground/useServerValid.js +0 -58
- package/dist/es/component/playground/useStaticPageAgent.js +0 -20
- package/dist/es/component/replay-scripts.js +0 -361
- package/dist/es/component/shiny-text.js +0 -30
- package/dist/es/component/store/history.js +0 -34
- package/dist/es/component/store/store.js +0 -99
- package/dist/es/index.js +0 -79
- package/dist/es/init.js +0 -17
- package/dist/index.css +0 -595
- package/dist/index.js +0 -1
- package/dist/lib/assets/close.909351c0.svg +0 -4
- package/dist/lib/assets/history.164a4eab.svg +0 -4
- package/dist/lib/assets/magnifying-glass.9498e70e.svg +0 -12
- package/dist/lib/assets/setting.80ab7285.svg +0 -11
- package/dist/lib/component/common.css +0 -0
- /package/dist/es/component/{common.css → playground/playground-types.mjs} +0 -0
|
@@ -0,0 +1,271 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import "./player.css";
|
|
3
|
+
import { mousePointer } from "../utils.mjs";
|
|
4
|
+
import { paramStr, typeStr } from "@midscene/web/ui-utils";
|
|
5
|
+
import { treeToList } from "@midscene/shared/extractor";
|
|
6
|
+
const stillDuration = 900;
|
|
7
|
+
const actionSpinningPointerDuration = 300;
|
|
8
|
+
const stillAfterInsightDuration = 300;
|
|
9
|
+
const locateDuration = 800;
|
|
10
|
+
const actionDuration = 1000;
|
|
11
|
+
const clearInsightDuration = 200;
|
|
12
|
+
const cameraStateForRect = (rect, imageWidth, imageHeight)=>{
|
|
13
|
+
const canvasRatio = imageWidth / imageHeight;
|
|
14
|
+
const rectRatio = rect.width / rect.height;
|
|
15
|
+
let rectWidthOnPage;
|
|
16
|
+
rectWidthOnPage = rectRatio >= canvasRatio ? rect.width : rect.height / imageHeight * imageWidth;
|
|
17
|
+
const cameraPaddingRatio = rectWidthOnPage > 400 ? 0.1 : rectWidthOnPage > 50 ? 0.2 : 0.3;
|
|
18
|
+
const cameraWidth = Math.min(imageWidth, rectWidthOnPage + imageWidth * cameraPaddingRatio * 2);
|
|
19
|
+
const cameraHeight = imageHeight / imageWidth * cameraWidth;
|
|
20
|
+
let left = Math.min(rect.left - imageWidth * cameraPaddingRatio, imageWidth - cameraWidth);
|
|
21
|
+
left = Math.max(left, 0);
|
|
22
|
+
let top = Math.min(rect.top - imageHeight * cameraPaddingRatio, imageHeight - cameraHeight);
|
|
23
|
+
top = Math.max(top, 0);
|
|
24
|
+
return {
|
|
25
|
+
left: Math.round(left),
|
|
26
|
+
top: Math.round(top),
|
|
27
|
+
width: Math.round(cameraWidth)
|
|
28
|
+
};
|
|
29
|
+
};
|
|
30
|
+
const mergeTwoCameraState = (cameraState1, cameraState2)=>{
|
|
31
|
+
const newLeft = Math.min(cameraState1.left, cameraState2.left);
|
|
32
|
+
const newTop = Math.min(cameraState1.top, cameraState2.top);
|
|
33
|
+
const newRight = Math.max(cameraState1.left + cameraState1.width, cameraState2.left + cameraState2.width);
|
|
34
|
+
const newWidth = newRight - newLeft;
|
|
35
|
+
return {
|
|
36
|
+
left: newLeft,
|
|
37
|
+
top: newTop,
|
|
38
|
+
width: newWidth
|
|
39
|
+
};
|
|
40
|
+
};
|
|
41
|
+
const allScriptsFromDump = (dump)=>{
|
|
42
|
+
let width;
|
|
43
|
+
let height;
|
|
44
|
+
let sdkVersion;
|
|
45
|
+
let modelName;
|
|
46
|
+
let modelDescription;
|
|
47
|
+
dump.executions.forEach((execution)=>{
|
|
48
|
+
if (execution.sdkVersion) sdkVersion = execution.sdkVersion;
|
|
49
|
+
if (execution.model_name) modelName = execution.model_name;
|
|
50
|
+
if (execution.model_description) modelDescription = execution.model_description;
|
|
51
|
+
execution.tasks.forEach((task)=>{
|
|
52
|
+
var _insightTask_pageContext_size, _insightTask_pageContext;
|
|
53
|
+
const insightTask = task;
|
|
54
|
+
if (null == (_insightTask_pageContext = insightTask.pageContext) ? void 0 : null == (_insightTask_pageContext_size = _insightTask_pageContext.size) ? void 0 : _insightTask_pageContext_size.width) {
|
|
55
|
+
width = insightTask.pageContext.size.width;
|
|
56
|
+
height = insightTask.pageContext.size.height;
|
|
57
|
+
}
|
|
58
|
+
});
|
|
59
|
+
});
|
|
60
|
+
if (!width || !height) {
|
|
61
|
+
console.warn('width or height is missing in dump file');
|
|
62
|
+
return {
|
|
63
|
+
scripts: [],
|
|
64
|
+
sdkVersion,
|
|
65
|
+
modelName,
|
|
66
|
+
modelDescription
|
|
67
|
+
};
|
|
68
|
+
}
|
|
69
|
+
const allScripts = [];
|
|
70
|
+
dump.executions.forEach((execution)=>{
|
|
71
|
+
const scripts = generateAnimationScripts(execution, -1, width, height);
|
|
72
|
+
if (scripts) allScripts.push(...scripts);
|
|
73
|
+
});
|
|
74
|
+
const allScriptsWithoutIntermediateDoneFrame = allScripts.filter((script, index)=>{
|
|
75
|
+
if (index !== allScripts.length - 1 && 'Done' === script.title) return false;
|
|
76
|
+
return true;
|
|
77
|
+
});
|
|
78
|
+
return {
|
|
79
|
+
scripts: allScriptsWithoutIntermediateDoneFrame,
|
|
80
|
+
width,
|
|
81
|
+
height,
|
|
82
|
+
sdkVersion,
|
|
83
|
+
modelName,
|
|
84
|
+
modelDescription
|
|
85
|
+
};
|
|
86
|
+
};
|
|
87
|
+
const generateAnimationScripts = (execution, task, imageWidth, imageHeight)=>{
|
|
88
|
+
if (!execution || !execution.tasks.length) return null;
|
|
89
|
+
if (0 === imageWidth || 0 === imageHeight) return null;
|
|
90
|
+
let tasksIncluded = [];
|
|
91
|
+
if (-1 === task) tasksIncluded = execution.tasks;
|
|
92
|
+
else {
|
|
93
|
+
const startIndex = execution.tasks.findIndex((t)=>t === task);
|
|
94
|
+
if (-1 === startIndex) {
|
|
95
|
+
console.error("task not found, cannot generate animation scripts");
|
|
96
|
+
return null;
|
|
97
|
+
}
|
|
98
|
+
if (startIndex === execution.tasks.length - 1) return null;
|
|
99
|
+
for(let i = startIndex; i < execution.tasks.length; i++){
|
|
100
|
+
if (i > startIndex && 'Planning' === execution.tasks[i].type) break;
|
|
101
|
+
tasksIncluded.push(execution.tasks[i]);
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
if (0 === tasksIncluded.length) return null;
|
|
105
|
+
const fullPageCameraState = cameraStateForRect({
|
|
106
|
+
left: 0,
|
|
107
|
+
top: 0,
|
|
108
|
+
width: imageWidth,
|
|
109
|
+
height: imageHeight
|
|
110
|
+
}, imageWidth, imageHeight);
|
|
111
|
+
const pointerScript = (img, title, subTitle)=>({
|
|
112
|
+
type: 'pointer',
|
|
113
|
+
img,
|
|
114
|
+
duration: 0,
|
|
115
|
+
title,
|
|
116
|
+
subTitle
|
|
117
|
+
});
|
|
118
|
+
const scripts = [];
|
|
119
|
+
let insightCameraState;
|
|
120
|
+
let currentCameraState = fullPageCameraState;
|
|
121
|
+
let insightOnTop = false;
|
|
122
|
+
const taskCount = tasksIncluded.length;
|
|
123
|
+
let initSubTitle = '';
|
|
124
|
+
let errorStateFlag = false;
|
|
125
|
+
tasksIncluded.forEach((task, index)=>{
|
|
126
|
+
if (errorStateFlag) return;
|
|
127
|
+
if (0 === index) initSubTitle = paramStr(task);
|
|
128
|
+
if ('Planning' === task.type) {
|
|
129
|
+
const planningTask = task;
|
|
130
|
+
if (planningTask.recorder && planningTask.recorder.length > 0) {
|
|
131
|
+
var _planningTask_recorder_, _planningTask_recorder;
|
|
132
|
+
scripts.push({
|
|
133
|
+
type: 'img',
|
|
134
|
+
img: null == (_planningTask_recorder = planningTask.recorder) ? void 0 : null == (_planningTask_recorder_ = _planningTask_recorder[0]) ? void 0 : _planningTask_recorder_.screenshot,
|
|
135
|
+
camera: 0 === index ? fullPageCameraState : void 0,
|
|
136
|
+
duration: stillDuration,
|
|
137
|
+
title: typeStr(task),
|
|
138
|
+
subTitle: paramStr(task)
|
|
139
|
+
});
|
|
140
|
+
}
|
|
141
|
+
} else if ('Insight' === task.type && 'Locate' === task.subType) {
|
|
142
|
+
var _insightTask_output;
|
|
143
|
+
const insightTask = task;
|
|
144
|
+
const resultElement = null == (_insightTask_output = insightTask.output) ? void 0 : _insightTask_output.element;
|
|
145
|
+
const title = typeStr(task);
|
|
146
|
+
const subTitle = paramStr(task);
|
|
147
|
+
if (null == resultElement ? void 0 : resultElement.rect) insightCameraState = {
|
|
148
|
+
...cameraStateForRect(resultElement.rect, imageWidth, imageHeight),
|
|
149
|
+
pointerLeft: resultElement.center[0],
|
|
150
|
+
pointerTop: resultElement.center[1]
|
|
151
|
+
};
|
|
152
|
+
const context = insightTask.pageContext;
|
|
153
|
+
if (null == context ? void 0 : context.screenshotBase64) {
|
|
154
|
+
var _insightTask_log, _insightTask_output1, _insightDump_taskInfo;
|
|
155
|
+
const insightDump = null == (_insightTask_log = insightTask.log) ? void 0 : _insightTask_log.dump;
|
|
156
|
+
const insightContentLength = context.tree ? treeToList(context.tree).length : 0;
|
|
157
|
+
if (context.screenshotBase64) scripts.push({
|
|
158
|
+
type: 'img',
|
|
159
|
+
img: context.screenshotBase64,
|
|
160
|
+
duration: stillAfterInsightDuration,
|
|
161
|
+
title,
|
|
162
|
+
subTitle
|
|
163
|
+
});
|
|
164
|
+
let cameraState;
|
|
165
|
+
cameraState = currentCameraState === fullPageCameraState ? void 0 : insightCameraState ? mergeTwoCameraState(currentCameraState, insightCameraState) : void 0;
|
|
166
|
+
scripts.push({
|
|
167
|
+
type: 'insight',
|
|
168
|
+
img: context.screenshotBase64,
|
|
169
|
+
context: context,
|
|
170
|
+
camera: cameraState,
|
|
171
|
+
highlightElement: (null == (_insightTask_output1 = insightTask.output) ? void 0 : _insightTask_output1.element) || void 0,
|
|
172
|
+
searchArea: null == insightDump ? void 0 : null == (_insightDump_taskInfo = insightDump.taskInfo) ? void 0 : _insightDump_taskInfo.searchArea,
|
|
173
|
+
duration: insightContentLength > 20 ? locateDuration : 0.5 * locateDuration,
|
|
174
|
+
insightCameraDuration: locateDuration,
|
|
175
|
+
title,
|
|
176
|
+
subTitle
|
|
177
|
+
});
|
|
178
|
+
scripts.push({
|
|
179
|
+
type: 'sleep',
|
|
180
|
+
duration: stillAfterInsightDuration,
|
|
181
|
+
title,
|
|
182
|
+
subTitle
|
|
183
|
+
});
|
|
184
|
+
insightOnTop = true;
|
|
185
|
+
}
|
|
186
|
+
} else if ('Action' === task.type && 'FalsyConditionStatement' !== task.subType) {
|
|
187
|
+
var _task_recorder_, _task_recorder, _task_recorder_1, _task_recorder1;
|
|
188
|
+
const title = typeStr(task);
|
|
189
|
+
const subTitle = paramStr(task);
|
|
190
|
+
scripts.push(pointerScript(mousePointer, title, subTitle));
|
|
191
|
+
currentCameraState = null != insightCameraState ? insightCameraState : fullPageCameraState;
|
|
192
|
+
scripts.push({
|
|
193
|
+
type: 'img',
|
|
194
|
+
img: null == (_task_recorder = task.recorder) ? void 0 : null == (_task_recorder_ = _task_recorder[0]) ? void 0 : _task_recorder_.screenshot,
|
|
195
|
+
duration: actionDuration,
|
|
196
|
+
camera: 'Sleep' === task.subType ? fullPageCameraState : insightCameraState,
|
|
197
|
+
title,
|
|
198
|
+
subTitle
|
|
199
|
+
});
|
|
200
|
+
if (insightOnTop) {
|
|
201
|
+
scripts.push({
|
|
202
|
+
type: 'clear-insight',
|
|
203
|
+
duration: clearInsightDuration,
|
|
204
|
+
title,
|
|
205
|
+
subTitle
|
|
206
|
+
});
|
|
207
|
+
insightOnTop = false;
|
|
208
|
+
}
|
|
209
|
+
const imgStillDuration = index < taskCount - 1 ? stillDuration : 0;
|
|
210
|
+
if (null == (_task_recorder1 = task.recorder) ? void 0 : null == (_task_recorder_1 = _task_recorder1[1]) ? void 0 : _task_recorder_1.screenshot) {
|
|
211
|
+
var _task_recorder_2, _task_recorder2;
|
|
212
|
+
scripts.push({
|
|
213
|
+
type: 'spinning-pointer',
|
|
214
|
+
duration: actionSpinningPointerDuration,
|
|
215
|
+
title,
|
|
216
|
+
subTitle
|
|
217
|
+
});
|
|
218
|
+
scripts.push(pointerScript(mousePointer, title, subTitle));
|
|
219
|
+
scripts.push({
|
|
220
|
+
type: 'img',
|
|
221
|
+
img: null == (_task_recorder2 = task.recorder) ? void 0 : null == (_task_recorder_2 = _task_recorder2[1]) ? void 0 : _task_recorder_2.screenshot,
|
|
222
|
+
duration: imgStillDuration,
|
|
223
|
+
title,
|
|
224
|
+
subTitle
|
|
225
|
+
});
|
|
226
|
+
} else scripts.push({
|
|
227
|
+
type: 'sleep',
|
|
228
|
+
duration: imgStillDuration,
|
|
229
|
+
title,
|
|
230
|
+
subTitle
|
|
231
|
+
});
|
|
232
|
+
} else {
|
|
233
|
+
var _task_recorder_3, _task_recorder3;
|
|
234
|
+
const title = typeStr(task);
|
|
235
|
+
const subTitle = paramStr(task);
|
|
236
|
+
const screenshot = null == (_task_recorder3 = task.recorder) ? void 0 : null == (_task_recorder_3 = _task_recorder3[task.recorder.length - 1]) ? void 0 : _task_recorder_3.screenshot;
|
|
237
|
+
if (screenshot) scripts.push({
|
|
238
|
+
type: 'img',
|
|
239
|
+
img: screenshot,
|
|
240
|
+
duration: stillDuration,
|
|
241
|
+
camera: fullPageCameraState,
|
|
242
|
+
title,
|
|
243
|
+
subTitle
|
|
244
|
+
});
|
|
245
|
+
}
|
|
246
|
+
if ('finished' !== task.status) {
|
|
247
|
+
errorStateFlag = true;
|
|
248
|
+
const errorTitle = typeStr(task);
|
|
249
|
+
const errorMsg = task.errorMessage || 'unknown error';
|
|
250
|
+
const errorSubTitle = errorMsg.indexOf('NOT_IMPLEMENTED_AS_DESIGNED') > 0 ? 'Further actions cannot be performed in the current environment' : errorMsg;
|
|
251
|
+
scripts.push({
|
|
252
|
+
type: 'img',
|
|
253
|
+
img: task.recorder && task.recorder.length > 0 ? task.recorder[task.recorder.length - 1].screenshot : '',
|
|
254
|
+
camera: fullPageCameraState,
|
|
255
|
+
duration: stillDuration,
|
|
256
|
+
title: errorTitle,
|
|
257
|
+
subTitle: errorSubTitle
|
|
258
|
+
});
|
|
259
|
+
return;
|
|
260
|
+
}
|
|
261
|
+
});
|
|
262
|
+
if (!errorStateFlag) scripts.push({
|
|
263
|
+
title: 'Done',
|
|
264
|
+
subTitle: initSubTitle,
|
|
265
|
+
type: 'img',
|
|
266
|
+
duration: stillDuration,
|
|
267
|
+
camera: fullPageCameraState
|
|
268
|
+
});
|
|
269
|
+
return scripts;
|
|
270
|
+
};
|
|
271
|
+
export { allScriptsFromDump, cameraStateForRect, generateAnimationScripts, mergeTwoCameraState };
|
|
@@ -1,64 +1,75 @@
|
|
|
1
1
|
.shiny-text {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
color: rgba(0, 0, 0, 0);
|
|
3
|
+
letter-spacing: .5px;
|
|
4
|
+
text-shadow: 0 1px 2px rgba(0, 0, 0, .05);
|
|
5
|
+
background-image: linear-gradient(45deg, #2b83ff, #6a11cb, #2575fc, #4481eb);
|
|
6
|
+
background-size: 300%;
|
|
5
7
|
-webkit-background-clip: text;
|
|
6
8
|
background-clip: text;
|
|
7
|
-
color: transparent;
|
|
8
9
|
font-weight: 600;
|
|
9
|
-
|
|
10
|
-
|
|
10
|
+
animation: 8s infinite textGradient;
|
|
11
|
+
display: inline-block;
|
|
12
|
+
position: relative;
|
|
11
13
|
overflow: hidden;
|
|
12
|
-
animation: textGradient 8s ease infinite;
|
|
13
|
-
background-image: linear-gradient(45deg, #2b83ff, #6a11cb, #2575fc, #4481eb);
|
|
14
14
|
}
|
|
15
|
-
|
|
15
|
+
|
|
16
|
+
.shiny-text:after {
|
|
16
17
|
content: "";
|
|
17
|
-
position: absolute;
|
|
18
|
-
top: -10%;
|
|
19
|
-
left: -150%;
|
|
20
18
|
width: 120%;
|
|
21
19
|
height: 120%;
|
|
22
|
-
|
|
23
|
-
transform: skewX(-20deg) translateY(0);
|
|
24
|
-
animation: shine var(--animation-duration, 5s) cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
|
|
20
|
+
animation: shine var(--animation-duration, 5s) cubic-bezier(.25, .1, .25, 1) infinite;
|
|
25
21
|
z-index: 1;
|
|
26
22
|
pointer-events: none;
|
|
23
|
+
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .1) 10%, rgba(255, 255, 255, .6) 50%, rgba(255, 255, 255, .1) 90%, rgba(255, 255, 255, 0) 100%);
|
|
24
|
+
position: absolute;
|
|
25
|
+
top: -10%;
|
|
26
|
+
left: -150%;
|
|
27
|
+
transform: skewX(-20deg)translateY(0);
|
|
27
28
|
}
|
|
29
|
+
|
|
28
30
|
.shiny-text.disabled {
|
|
29
|
-
animation: none;
|
|
30
31
|
background: #2b83ff;
|
|
31
32
|
-webkit-background-clip: text;
|
|
32
33
|
background-clip: text;
|
|
34
|
+
animation: none;
|
|
33
35
|
}
|
|
34
|
-
|
|
36
|
+
|
|
37
|
+
.shiny-text.disabled:after {
|
|
35
38
|
animation: none;
|
|
36
39
|
display: none;
|
|
37
40
|
}
|
|
41
|
+
|
|
38
42
|
@keyframes shine {
|
|
39
43
|
0% {
|
|
44
|
+
opacity: .7;
|
|
40
45
|
left: -150%;
|
|
41
|
-
opacity: 0.7;
|
|
42
46
|
}
|
|
47
|
+
|
|
43
48
|
20% {
|
|
44
49
|
opacity: 1;
|
|
45
50
|
}
|
|
51
|
+
|
|
46
52
|
80% {
|
|
47
53
|
opacity: 1;
|
|
48
54
|
}
|
|
55
|
+
|
|
49
56
|
100% {
|
|
57
|
+
opacity: .7;
|
|
50
58
|
left: 250%;
|
|
51
|
-
opacity: 0.7;
|
|
52
59
|
}
|
|
53
60
|
}
|
|
61
|
+
|
|
54
62
|
@keyframes textGradient {
|
|
55
63
|
0% {
|
|
56
|
-
background-position: 0
|
|
64
|
+
background-position: 0%;
|
|
57
65
|
}
|
|
66
|
+
|
|
58
67
|
50% {
|
|
59
|
-
background-position: 100
|
|
68
|
+
background-position: 100%;
|
|
60
69
|
}
|
|
70
|
+
|
|
61
71
|
100% {
|
|
62
|
-
background-position: 0
|
|
72
|
+
background-position: 0%;
|
|
63
73
|
}
|
|
64
74
|
}
|
|
75
|
+
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import "./shiny-text.css";
|
|
3
|
+
const ShinyText = (param)=>{
|
|
4
|
+
let { text, disabled = false, speed = 5, className = '' } = param;
|
|
5
|
+
const style = {
|
|
6
|
+
'--animation-duration': `${speed}s`
|
|
7
|
+
};
|
|
8
|
+
return /*#__PURE__*/ jsx("div", {
|
|
9
|
+
className: `shiny-text ${disabled ? 'disabled' : ''} ${className}`,
|
|
10
|
+
style: style,
|
|
11
|
+
children: text
|
|
12
|
+
});
|
|
13
|
+
};
|
|
14
|
+
const shiny_text = ShinyText;
|
|
15
|
+
export { shiny_text as default };
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { create } from "zustand";
|
|
2
|
+
var __webpack_require__ = {};
|
|
3
|
+
(()=>{
|
|
4
|
+
__webpack_require__.d = (exports, definition)=>{
|
|
5
|
+
for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) Object.defineProperty(exports, 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 = (exports)=>{
|
|
16
|
+
if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports, Symbol.toStringTag, {
|
|
17
|
+
value: 'Module'
|
|
18
|
+
});
|
|
19
|
+
Object.defineProperty(exports, '__esModule', {
|
|
20
|
+
value: true
|
|
21
|
+
});
|
|
22
|
+
};
|
|
23
|
+
})();
|
|
24
|
+
var external_zustand_namespaceObject = {};
|
|
25
|
+
__webpack_require__.r(external_zustand_namespaceObject);
|
|
26
|
+
__webpack_require__.d(external_zustand_namespaceObject, {
|
|
27
|
+
create: ()=>create
|
|
28
|
+
});
|
|
29
|
+
const { create: history_create } = external_zustand_namespaceObject;
|
|
30
|
+
const HISTORY_KEY = 'midscene-prompt-history';
|
|
31
|
+
const getHistoryFromLocalStorage = ()=>{
|
|
32
|
+
const historyString = localStorage.getItem(HISTORY_KEY);
|
|
33
|
+
return historyString ? JSON.parse(historyString) : [];
|
|
34
|
+
};
|
|
35
|
+
const useHistoryStore = history_create((set, get)=>({
|
|
36
|
+
history: getHistoryFromLocalStorage(),
|
|
37
|
+
clearHistory: ()=>{
|
|
38
|
+
set({
|
|
39
|
+
history: []
|
|
40
|
+
});
|
|
41
|
+
localStorage.removeItem(HISTORY_KEY);
|
|
42
|
+
},
|
|
43
|
+
addHistory: (historyItem)=>{
|
|
44
|
+
const newHistory = [
|
|
45
|
+
historyItem,
|
|
46
|
+
...get().history.filter((h)=>h.prompt !== historyItem.prompt)
|
|
47
|
+
];
|
|
48
|
+
while(newHistory.length > 10)newHistory.pop();
|
|
49
|
+
set({
|
|
50
|
+
history: newHistory
|
|
51
|
+
});
|
|
52
|
+
localStorage.setItem(HISTORY_KEY, JSON.stringify(newHistory));
|
|
53
|
+
}
|
|
54
|
+
}));
|
|
55
|
+
export { useHistoryStore };
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
import { create } from "zustand";
|
|
2
|
+
var __webpack_require__ = {};
|
|
3
|
+
(()=>{
|
|
4
|
+
__webpack_require__.d = (exports, definition)=>{
|
|
5
|
+
for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) Object.defineProperty(exports, 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 = (exports)=>{
|
|
16
|
+
if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports, Symbol.toStringTag, {
|
|
17
|
+
value: 'Module'
|
|
18
|
+
});
|
|
19
|
+
Object.defineProperty(exports, '__esModule', {
|
|
20
|
+
value: true
|
|
21
|
+
});
|
|
22
|
+
};
|
|
23
|
+
})();
|
|
24
|
+
var external_zustand_namespaceObject = {};
|
|
25
|
+
__webpack_require__.r(external_zustand_namespaceObject);
|
|
26
|
+
__webpack_require__.d(external_zustand_namespaceObject, {
|
|
27
|
+
create: ()=>create
|
|
28
|
+
});
|
|
29
|
+
const { create: store_create } = external_zustand_namespaceObject;
|
|
30
|
+
const useBlackboardPreference = store_create((set)=>({
|
|
31
|
+
markerVisible: true,
|
|
32
|
+
elementsVisible: true,
|
|
33
|
+
setMarkerVisible: (visible)=>{
|
|
34
|
+
set({
|
|
35
|
+
markerVisible: visible
|
|
36
|
+
});
|
|
37
|
+
},
|
|
38
|
+
setTextsVisible: (visible)=>{
|
|
39
|
+
set({
|
|
40
|
+
elementsVisible: visible
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
}));
|
|
44
|
+
const CONFIG_KEY = 'midscene-env-config';
|
|
45
|
+
const SERVICE_MODE_KEY = 'midscene-service-mode';
|
|
46
|
+
const TRACKING_ACTIVE_TAB_KEY = 'midscene-tracking-active-tab';
|
|
47
|
+
const DEEP_THINK_KEY = 'midscene-deep-think';
|
|
48
|
+
const getConfigStringFromLocalStorage = ()=>{
|
|
49
|
+
const configString = localStorage.getItem(CONFIG_KEY);
|
|
50
|
+
return configString || '';
|
|
51
|
+
};
|
|
52
|
+
const parseConfig = (configString)=>{
|
|
53
|
+
const lines = configString.split('\n');
|
|
54
|
+
const config = {};
|
|
55
|
+
lines.forEach((line)=>{
|
|
56
|
+
const trimmed = line.trim();
|
|
57
|
+
if (trimmed.startsWith('#')) return;
|
|
58
|
+
const cleanLine = trimmed.replace(/^export\s+/i, '').replace(/;$/, '').trim();
|
|
59
|
+
const match = cleanLine.match(/^(\w+)=(.*)$/);
|
|
60
|
+
if (match) {
|
|
61
|
+
const [, key, value] = match;
|
|
62
|
+
let parsedValue = value.trim();
|
|
63
|
+
if (parsedValue.startsWith("'") && parsedValue.endsWith("'") || parsedValue.startsWith('"') && parsedValue.endsWith('"')) parsedValue = parsedValue.slice(1, -1);
|
|
64
|
+
config[key] = parsedValue;
|
|
65
|
+
}
|
|
66
|
+
});
|
|
67
|
+
return config;
|
|
68
|
+
};
|
|
69
|
+
const useEnvConfig = store_create((set, get)=>{
|
|
70
|
+
const configString = getConfigStringFromLocalStorage();
|
|
71
|
+
const config = parseConfig(configString);
|
|
72
|
+
const ifInExtension = window.location.href.startsWith('chrome-extension');
|
|
73
|
+
const savedServiceMode = localStorage.getItem(SERVICE_MODE_KEY);
|
|
74
|
+
const savedForceSameTabNavigation = 'false' !== localStorage.getItem(TRACKING_ACTIVE_TAB_KEY);
|
|
75
|
+
const savedDeepThink = 'true' === localStorage.getItem(DEEP_THINK_KEY);
|
|
76
|
+
return {
|
|
77
|
+
serviceMode: ifInExtension ? 'In-Browser-Extension' : savedServiceMode || 'Server',
|
|
78
|
+
setServiceMode: (serviceMode)=>{
|
|
79
|
+
if (ifInExtension) throw new Error('serviceMode cannot be set in extension');
|
|
80
|
+
set({
|
|
81
|
+
serviceMode
|
|
82
|
+
});
|
|
83
|
+
localStorage.setItem(SERVICE_MODE_KEY, serviceMode);
|
|
84
|
+
},
|
|
85
|
+
config,
|
|
86
|
+
configString,
|
|
87
|
+
setConfig: (config)=>set({
|
|
88
|
+
config
|
|
89
|
+
}),
|
|
90
|
+
loadConfig: (configString)=>{
|
|
91
|
+
const config = parseConfig(configString);
|
|
92
|
+
set({
|
|
93
|
+
config,
|
|
94
|
+
configString
|
|
95
|
+
});
|
|
96
|
+
localStorage.setItem(CONFIG_KEY, configString);
|
|
97
|
+
},
|
|
98
|
+
syncFromStorage: ()=>{
|
|
99
|
+
const latestConfigString = getConfigStringFromLocalStorage();
|
|
100
|
+
const latestConfig = parseConfig(latestConfigString);
|
|
101
|
+
set({
|
|
102
|
+
config: latestConfig,
|
|
103
|
+
configString: latestConfigString
|
|
104
|
+
});
|
|
105
|
+
},
|
|
106
|
+
forceSameTabNavigation: savedForceSameTabNavigation,
|
|
107
|
+
setForceSameTabNavigation: (forceSameTabNavigation)=>{
|
|
108
|
+
set({
|
|
109
|
+
forceSameTabNavigation
|
|
110
|
+
});
|
|
111
|
+
localStorage.setItem(TRACKING_ACTIVE_TAB_KEY, forceSameTabNavigation.toString());
|
|
112
|
+
},
|
|
113
|
+
deepThink: savedDeepThink,
|
|
114
|
+
setDeepThink: (deepThink)=>{
|
|
115
|
+
set({
|
|
116
|
+
deepThink
|
|
117
|
+
});
|
|
118
|
+
localStorage.setItem(DEEP_THINK_KEY, deepThink.toString());
|
|
119
|
+
},
|
|
120
|
+
popupTab: 'playground',
|
|
121
|
+
setPopupTab: (tab)=>{
|
|
122
|
+
set({
|
|
123
|
+
popupTab: tab
|
|
124
|
+
});
|
|
125
|
+
}
|
|
126
|
+
};
|
|
127
|
+
});
|
|
128
|
+
export { useBlackboardPreference, useEnvConfig };
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import "react";
|
|
3
|
+
const SvgClose = (props)=>/*#__PURE__*/ jsx("svg", {
|
|
4
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
5
|
+
width: 18,
|
|
6
|
+
height: 16,
|
|
7
|
+
fill: "none",
|
|
8
|
+
viewBox: "0 0 18 16",
|
|
9
|
+
...props,
|
|
10
|
+
children: /*#__PURE__*/ jsx("path", {
|
|
11
|
+
stroke: "#333",
|
|
12
|
+
strokeLinecap: "round",
|
|
13
|
+
strokeLinejoin: "round",
|
|
14
|
+
strokeWidth: 1.333,
|
|
15
|
+
d: "m3.124 2.667 11.162 10.666M3.124 13.333 14.286 2.667"
|
|
16
|
+
})
|
|
17
|
+
});
|
|
18
|
+
const icons_close = SvgClose;
|
|
19
|
+
export { icons_close as default };
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import "react";
|
|
3
|
+
const SvgHistory = (props)=>/*#__PURE__*/ jsxs("svg", {
|
|
4
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
5
|
+
width: 25,
|
|
6
|
+
height: 25,
|
|
7
|
+
fill: "none",
|
|
8
|
+
viewBox: "0 0 25 25",
|
|
9
|
+
...props,
|
|
10
|
+
children: [
|
|
11
|
+
/*#__PURE__*/ jsx("path", {
|
|
12
|
+
stroke: "#000",
|
|
13
|
+
strokeLinecap: "round",
|
|
14
|
+
strokeLinejoin: "round",
|
|
15
|
+
strokeOpacity: 0.85,
|
|
16
|
+
strokeWidth: 1.33,
|
|
17
|
+
d: "M6.63 9.021c-2.862 6.126 2.197 10.501 6.063 10.501a7 7 0 1 0-6.063-10.5"
|
|
18
|
+
}),
|
|
19
|
+
/*#__PURE__*/ jsx("path", {
|
|
20
|
+
stroke: "#000",
|
|
21
|
+
strokeLinecap: "round",
|
|
22
|
+
strokeLinejoin: "round",
|
|
23
|
+
strokeOpacity: 0.85,
|
|
24
|
+
strokeWidth: 1.33,
|
|
25
|
+
d: "M12.695 8.322v4.203l2.967 2.968"
|
|
26
|
+
})
|
|
27
|
+
]
|
|
28
|
+
});
|
|
29
|
+
const icons_history = SvgHistory;
|
|
30
|
+
export { icons_history as default };
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import "react";
|
|
3
|
+
const SvgMagnifyingGlass = (props)=>/*#__PURE__*/ jsxs("svg", {
|
|
4
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
5
|
+
width: 19,
|
|
6
|
+
height: 19,
|
|
7
|
+
fill: "none",
|
|
8
|
+
viewBox: "0 0 19 19",
|
|
9
|
+
...props,
|
|
10
|
+
children: [
|
|
11
|
+
/*#__PURE__*/ jsxs("g", {
|
|
12
|
+
stroke: "#000",
|
|
13
|
+
strokeLinejoin: "round",
|
|
14
|
+
strokeOpacity: 0.65,
|
|
15
|
+
strokeWidth: 1.5,
|
|
16
|
+
clipPath: "url(#magnifying-glass_svg__a)",
|
|
17
|
+
children: [
|
|
18
|
+
/*#__PURE__*/ jsx("path", {
|
|
19
|
+
d: "M8.397 14.29a6.375 6.375 0 1 0 0-12.75 6.375 6.375 0 0 0 0 12.75Z"
|
|
20
|
+
}),
|
|
21
|
+
/*#__PURE__*/ jsx("path", {
|
|
22
|
+
strokeLinecap: "round",
|
|
23
|
+
d: "M10.519 5.42a3 3 0 0 0-2.122-.88 3 3 0 0 0-2.121.88M12.98 12.499l3.182 3.182"
|
|
24
|
+
})
|
|
25
|
+
]
|
|
26
|
+
}),
|
|
27
|
+
/*#__PURE__*/ jsx("defs", {
|
|
28
|
+
children: /*#__PURE__*/ jsx("clipPath", {
|
|
29
|
+
id: "magnifying-glass_svg__a",
|
|
30
|
+
children: /*#__PURE__*/ jsx("path", {
|
|
31
|
+
fill: "#fff",
|
|
32
|
+
d: "M.522.04h18v18h-18z"
|
|
33
|
+
})
|
|
34
|
+
})
|
|
35
|
+
})
|
|
36
|
+
]
|
|
37
|
+
});
|
|
38
|
+
const magnifying_glass = SvgMagnifyingGlass;
|
|
39
|
+
export { magnifying_glass as default };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import "react";
|
|
3
|
+
const SvgSetting = (props)=>/*#__PURE__*/ jsx("svg", {
|
|
4
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
5
|
+
width: 27,
|
|
6
|
+
height: 27,
|
|
7
|
+
fill: "none",
|
|
8
|
+
viewBox: "0 0 27 27",
|
|
9
|
+
...props,
|
|
10
|
+
children: /*#__PURE__*/ jsx("path", {
|
|
11
|
+
stroke: "#000",
|
|
12
|
+
strokeLinecap: "round",
|
|
13
|
+
strokeLinejoin: "round",
|
|
14
|
+
strokeOpacity: 0.85,
|
|
15
|
+
strokeWidth: 1.333,
|
|
16
|
+
d: "M19.527 8.855h-2M14.86 7.522v2.667M14.86 8.855H7.527M10.194 13.522H7.527M12.86 12.189v2.666M20.193 13.522H12.86M19.527 18.189h-2M14.86 16.855v2.667M14.86 18.189H7.527"
|
|
17
|
+
})
|
|
18
|
+
});
|
|
19
|
+
const setting = SvgSetting;
|
|
20
|
+
export { setting as default };
|