@midscene/visualizer 1.0.1-beta-20251110130223.0 → 1.0.1-beta-20251111100700.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.
Files changed (15) hide show
  1. package/dist/es/component/logo/index.mjs +3 -20
  2. package/dist/es/component/playground/index.css +82 -0
  3. package/dist/es/component/prompt-input/index.css +82 -0
  4. package/dist/es/hooks/useTheme.mjs +25 -0
  5. package/dist/es/index.mjs +2 -1
  6. package/dist/es/utils/replay-scripts.mjs +86 -91
  7. package/dist/lib/component/logo/index.js +3 -20
  8. package/dist/lib/component/playground/index.css +82 -0
  9. package/dist/lib/component/prompt-input/index.css +82 -0
  10. package/dist/lib/hooks/useTheme.js +59 -0
  11. package/dist/lib/index.js +5 -1
  12. package/dist/lib/utils/replay-scripts.js +86 -91
  13. package/dist/types/hooks/useTheme.d.ts +7 -0
  14. package/dist/types/index.d.ts +1 -0
  15. package/package.json +5 -5
package/dist/es/component/logo/index.mjs CHANGED
@@ -1,31 +1,14 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
- import { useEffect, useState } from "react";
2
+ import { useTheme } from "../../hooks/useTheme.mjs";
3
3
  import "./index.css";
4
4
  const LogoUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/vhaeh7vhabf/Midscene.png';
5
5
  const LogoUrlLight = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/nupipfups/Midscene/midscene_with_text_light.png';
6
6
  const LogoUrlDark = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/nupipfups/Midscene/midscene_with_text_dark.png';
7
7
  const Logo = (param)=>{
8
8
  let { hideLogo = false } = param;
9
- const [isDark, setIsDark] = useState(false);
10
- useEffect(()=>{
11
- const checkTheme = ()=>{
12
- var _document_querySelector;
13
- const theme = null == (_document_querySelector = document.querySelector('[data-theme]')) ? void 0 : _document_querySelector.getAttribute('data-theme');
14
- setIsDark('dark' === theme);
15
- };
16
- checkTheme();
17
- const observer = new MutationObserver(checkTheme);
18
- const target = document.querySelector('[data-theme]') || document.documentElement;
19
- observer.observe(target, {
20
- attributes: true,
21
- attributeFilter: [
22
- 'data-theme'
23
- ]
24
- });
25
- return ()=>observer.disconnect();
26
- }, []);
9
+ const { isDarkMode } = useTheme();
27
10
  if (hideLogo) return null;
28
- const logoSrc = isDark ? LogoUrlDark : LogoUrlLight;
11
+ const logoSrc = isDarkMode ? LogoUrlDark : LogoUrlLight;
29
12
  return /*#__PURE__*/ jsx("div", {
30
13
  className: "logo",
31
14
  children: /*#__PURE__*/ jsx("a", {
package/dist/es/component/playground/index.css CHANGED
@@ -432,6 +432,88 @@
432
432
  color: #2b83ff;
433
433
  }
434
434
 
435
+ [data-theme="dark"] .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-radio-button-wrapper {
436
+ color: rgba(255, 255, 255, .85) !important;
437
+ background-color: rgba(255, 255, 255, .08) !important;
438
+ }
439
+
440
+ [data-theme="dark"] .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-radio-button-wrapper.ant-radio-button-wrapper-checked {
441
+ color: #fff !important;
442
+ background-color: #2b83ff !important;
443
+ border-color: #2b83ff !important;
444
+ }
445
+
446
+ [data-theme="dark"] .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .more-apis-button {
447
+ color: rgba(255, 255, 255, .85) !important;
448
+ background-color: rgba(255, 255, 255, .08) !important;
449
+ }
450
+
451
+ [data-theme="dark"] .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .more-apis-button:hover {
452
+ background-color: rgba(255, 255, 255, .12) !important;
453
+ }
454
+
455
+ [data-theme="dark"] .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .more-apis-button.selected-from-dropdown {
456
+ color: #fff !important;
457
+ background-color: #2b83ff !important;
458
+ }
459
+
460
+ [data-theme="dark"] .prompt-input-wrapper .mode-radio-group-wrapper .action-icons {
461
+ background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(31, 31, 31, .5) 20%, rgba(31, 31, 31, .8) 40%, rgba(31, 31, 31, .95) 60%, #1f1f1f 70%) !important;
462
+ }
463
+
464
+ [data-theme="dark"] .prompt-input-wrapper .main-side-console-input .main-side-console-input-textarea {
465
+ color: rgba(255, 255, 255, .85) !important;
466
+ background: rgba(255, 255, 255, .04) !important;
467
+ border-color: rgba(255, 255, 255, .12) !important;
468
+ }
469
+
470
+ [data-theme="dark"] .prompt-input-wrapper .main-side-console-input .main-side-console-input-textarea:focus-within, [data-theme="dark"] .prompt-input-wrapper .main-side-console-input.loading .main-side-console-input-textarea {
471
+ background: linear-gradient(#1f1f1f, #1f1f1f) padding-box padding-box, linear-gradient(135deg, #4285f4 0%, #06f 25%, #7b02c5 50%, #ea4335 75%, #ff7043 100%) border-box !important;
472
+ border: 1px solid rgba(0, 0, 0, 0) !important;
473
+ }
474
+
475
+ [data-theme="dark"] .prompt-input-wrapper .ant-form-item-control-input-content .ant-input, [data-theme="dark"] .prompt-input-wrapper .ant-form-item-control-input-content textarea.ant-input {
476
+ color: rgba(255, 255, 255, .85) !important;
477
+ background: rgba(255, 255, 255, .04) !important;
478
+ border-color: rgba(255, 255, 255, .12) !important;
479
+ }
480
+
481
+ [data-theme="dark"] .prompt-input-wrapper .ant-form-item-control-input-content .ant-btn {
482
+ color: rgba(255, 255, 255, .85) !important;
483
+ background-color: rgba(255, 255, 255, .08) !important;
484
+ border-color: rgba(255, 255, 255, .12) !important;
485
+ }
486
+
487
+ [data-theme="dark"] .prompt-input-wrapper .ant-form-item-control-input-content .ant-btn.ant-btn-primary {
488
+ color: #fff !important;
489
+ background-color: #2b83ff !important;
490
+ border-color: #2b83ff !important;
491
+ }
492
+
493
+ [data-theme="dark"] .prompt-input-wrapper .form-controller-wrapper {
494
+ background-color: #1f1f1f !important;
495
+ }
496
+
497
+ [data-theme="dark"] .prompt-input-wrapper .structured-params-container {
498
+ background: linear-gradient(#1f1f1f, #1f1f1f) padding-box padding-box, linear-gradient(135deg, #4285f4 0%, #06f 25%, #7b02c5 50%, #ea4335 75%, #ff7043 100%) border-box !important;
499
+ }
500
+
501
+ [data-theme="dark"] .prompt-input-wrapper .structured-params-container .structured-params .ant-form-item-label > label {
502
+ color: rgba(255, 255, 255, .85) !important;
503
+ }
504
+
505
+ [data-theme="dark"] .prompt-input-wrapper .structured-params-container .structured-params .ant-input, [data-theme="dark"] .prompt-input-wrapper .structured-params-container .structured-params .ant-input-number, [data-theme="dark"] .prompt-input-wrapper .structured-params-container .structured-params .ant-select, [data-theme="dark"] .prompt-input-wrapper .structured-params-container .structured-params .ant-radio-group .ant-radio-button-wrapper {
506
+ color: rgba(255, 255, 255, .85) !important;
507
+ background-color: rgba(255, 255, 255, .04) !important;
508
+ border-color: rgba(255, 255, 255, .12) !important;
509
+ }
510
+
511
+ [data-theme="dark"] .prompt-input-wrapper .structured-params-container .structured-params .ant-radio-group .ant-radio-button-wrapper.ant-radio-button-wrapper-checked {
512
+ color: #fff !important;
513
+ background-color: #2b83ff !important;
514
+ border-color: #2b83ff !important;
515
+ }
516
+
435
517
  [data-theme="dark"] .prompt-input .tip-button {
436
518
  background-color: rgba(255, 255, 255, .08);
437
519
  }
package/dist/es/component/prompt-input/index.css CHANGED
@@ -389,6 +389,88 @@
389
389
  color: #2b83ff;
390
390
  }
391
391
 
392
+ [data-theme="dark"] .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-radio-button-wrapper {
393
+ color: rgba(255, 255, 255, .85) !important;
394
+ background-color: rgba(255, 255, 255, .08) !important;
395
+ }
396
+
397
+ [data-theme="dark"] .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-radio-button-wrapper.ant-radio-button-wrapper-checked {
398
+ color: #fff !important;
399
+ background-color: #2b83ff !important;
400
+ border-color: #2b83ff !important;
401
+ }
402
+
403
+ [data-theme="dark"] .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .more-apis-button {
404
+ color: rgba(255, 255, 255, .85) !important;
405
+ background-color: rgba(255, 255, 255, .08) !important;
406
+ }
407
+
408
+ [data-theme="dark"] .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .more-apis-button:hover {
409
+ background-color: rgba(255, 255, 255, .12) !important;
410
+ }
411
+
412
+ [data-theme="dark"] .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .more-apis-button.selected-from-dropdown {
413
+ color: #fff !important;
414
+ background-color: #2b83ff !important;
415
+ }
416
+
417
+ [data-theme="dark"] .prompt-input-wrapper .mode-radio-group-wrapper .action-icons {
418
+ background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(31, 31, 31, .5) 20%, rgba(31, 31, 31, .8) 40%, rgba(31, 31, 31, .95) 60%, #1f1f1f 70%) !important;
419
+ }
420
+
421
+ [data-theme="dark"] .prompt-input-wrapper .main-side-console-input .main-side-console-input-textarea {
422
+ color: rgba(255, 255, 255, .85) !important;
423
+ background: rgba(255, 255, 255, .04) !important;
424
+ border-color: rgba(255, 255, 255, .12) !important;
425
+ }
426
+
427
+ [data-theme="dark"] .prompt-input-wrapper .main-side-console-input .main-side-console-input-textarea:focus-within, [data-theme="dark"] .prompt-input-wrapper .main-side-console-input.loading .main-side-console-input-textarea {
428
+ background: linear-gradient(#1f1f1f, #1f1f1f) padding-box padding-box, linear-gradient(135deg, #4285f4 0%, #06f 25%, #7b02c5 50%, #ea4335 75%, #ff7043 100%) border-box !important;
429
+ border: 1px solid rgba(0, 0, 0, 0) !important;
430
+ }
431
+
432
+ [data-theme="dark"] .prompt-input-wrapper .ant-form-item-control-input-content .ant-input, [data-theme="dark"] .prompt-input-wrapper .ant-form-item-control-input-content textarea.ant-input {
433
+ color: rgba(255, 255, 255, .85) !important;
434
+ background: rgba(255, 255, 255, .04) !important;
435
+ border-color: rgba(255, 255, 255, .12) !important;
436
+ }
437
+
438
+ [data-theme="dark"] .prompt-input-wrapper .ant-form-item-control-input-content .ant-btn {
439
+ color: rgba(255, 255, 255, .85) !important;
440
+ background-color: rgba(255, 255, 255, .08) !important;
441
+ border-color: rgba(255, 255, 255, .12) !important;
442
+ }
443
+
444
+ [data-theme="dark"] .prompt-input-wrapper .ant-form-item-control-input-content .ant-btn.ant-btn-primary {
445
+ color: #fff !important;
446
+ background-color: #2b83ff !important;
447
+ border-color: #2b83ff !important;
448
+ }
449
+
450
+ [data-theme="dark"] .prompt-input-wrapper .form-controller-wrapper {
451
+ background-color: #1f1f1f !important;
452
+ }
453
+
454
+ [data-theme="dark"] .prompt-input-wrapper .structured-params-container {
455
+ background: linear-gradient(#1f1f1f, #1f1f1f) padding-box padding-box, linear-gradient(135deg, #4285f4 0%, #06f 25%, #7b02c5 50%, #ea4335 75%, #ff7043 100%) border-box !important;
456
+ }
457
+
458
+ [data-theme="dark"] .prompt-input-wrapper .structured-params-container .structured-params .ant-form-item-label > label {
459
+ color: rgba(255, 255, 255, .85) !important;
460
+ }
461
+
462
+ [data-theme="dark"] .prompt-input-wrapper .structured-params-container .structured-params .ant-input, [data-theme="dark"] .prompt-input-wrapper .structured-params-container .structured-params .ant-input-number, [data-theme="dark"] .prompt-input-wrapper .structured-params-container .structured-params .ant-select, [data-theme="dark"] .prompt-input-wrapper .structured-params-container .structured-params .ant-radio-group .ant-radio-button-wrapper {
463
+ color: rgba(255, 255, 255, .85) !important;
464
+ background-color: rgba(255, 255, 255, .04) !important;
465
+ border-color: rgba(255, 255, 255, .12) !important;
466
+ }
467
+
468
+ [data-theme="dark"] .prompt-input-wrapper .structured-params-container .structured-params .ant-radio-group .ant-radio-button-wrapper.ant-radio-button-wrapper-checked {
469
+ color: #fff !important;
470
+ background-color: #2b83ff !important;
471
+ border-color: #2b83ff !important;
472
+ }
473
+
392
474
  [data-theme="dark"] .prompt-input .tip-button {
393
475
  background-color: rgba(255, 255, 255, .08);
394
476
  }
package/dist/es/hooks/useTheme.mjs ADDED
@@ -0,0 +1,25 @@
1
+ import { useEffect, useState } from "react";
2
+ function useTheme() {
3
+ const [isDarkMode, setIsDarkMode] = useState(false);
4
+ useEffect(()=>{
5
+ const checkTheme = ()=>{
6
+ var _document_querySelector;
7
+ const theme = null == (_document_querySelector = document.querySelector('[data-theme]')) ? void 0 : _document_querySelector.getAttribute('data-theme');
8
+ setIsDarkMode('dark' === theme);
9
+ };
10
+ checkTheme();
11
+ const observer = new MutationObserver(checkTheme);
12
+ const target = document.querySelector('[data-theme]') || document.documentElement;
13
+ observer.observe(target, {
14
+ attributes: true,
15
+ attributeFilter: [
16
+ 'data-theme'
17
+ ]
18
+ });
19
+ return ()=>observer.disconnect();
20
+ }, []);
21
+ return {
22
+ isDarkMode
23
+ };
24
+ }
25
+ export { useTheme };
package/dist/es/index.mjs CHANGED
@@ -9,6 +9,7 @@ import { EnvConfigReminder } from "./component/env-config-reminder/index.mjs";
9
9
  import { NavActions } from "./component/nav-actions/index.mjs";
10
10
  import { Logo } from "./component/logo/index.mjs";
11
11
  import { iconForStatus, timeCostStrElement } from "./component/misc/index.mjs";
12
+ import { useTheme } from "./hooks/useTheme.mjs";
12
13
  import { useServerValid } from "./hooks/useServerValid.mjs";
13
14
  import { safeOverrideAIConfig, useSafeOverrideAIConfig } from "./hooks/useSafeOverrideAIConfig.mjs";
14
15
  import { PlaygroundResultView } from "./component/playground-result/index.mjs";
@@ -24,4 +25,4 @@ import shiny_text from "./component/shiny-text/index.mjs";
24
25
  import universal_playground, { UniversalPlayground } from "./component/universal-playground/index.mjs";
25
26
  import { IndexedDBStorageProvider, LocalStorageProvider, MemoryStorageProvider, NoOpStorageProvider, StorageType, createStorageProvider, detectBestStorageType } from "./component/universal-playground/providers/storage-provider.mjs";
26
27
  import { AgentContextProvider, BaseContextProvider, NoOpContextProvider, StaticContextProvider } from "./component/universal-playground/providers/context-provider.mjs";
27
- export { AgentContextProvider, BaseContextProvider, Blackboard, ContextPreview, EnvConfig, EnvConfigReminder, IndexedDBStorageProvider, LocalStorageProvider, Logo, MemoryStorageProvider, NavActions, NoOpContextProvider, NoOpStorageProvider, Player, PlaygroundResultView, PromptInput, screenshot_viewer as ScreenshotViewer, ServiceModeControl, shiny_text as ShinyText, StaticContextProvider, StorageType, UniversalPlayground, universal_playground as UniversalPlaygroundDefault, actionNameForType, allScriptsFromDump, colorForName, createStorageProvider, detectBestStorageType, filterBase64Value, generateAnimationScripts, getPlaceholderForType, globalThemeConfig, highlightColorForType, iconForStatus, safeOverrideAIConfig, staticAgentFromContext, timeCostStrElement, timeStr, useEnvConfig, useSafeOverrideAIConfig, useServerValid };
28
+ export { AgentContextProvider, BaseContextProvider, Blackboard, ContextPreview, EnvConfig, EnvConfigReminder, IndexedDBStorageProvider, LocalStorageProvider, Logo, MemoryStorageProvider, NavActions, NoOpContextProvider, NoOpStorageProvider, Player, PlaygroundResultView, PromptInput, screenshot_viewer as ScreenshotViewer, ServiceModeControl, shiny_text as ShinyText, StaticContextProvider, StorageType, UniversalPlayground, universal_playground as UniversalPlaygroundDefault, actionNameForType, allScriptsFromDump, colorForName, createStorageProvider, detectBestStorageType, filterBase64Value, generateAnimationScripts, getPlaceholderForType, globalThemeConfig, highlightColorForType, iconForStatus, safeOverrideAIConfig, staticAgentFromContext, timeCostStrElement, timeStr, useEnvConfig, useSafeOverrideAIConfig, useServerValid, useTheme };
package/dist/es/utils/replay-scripts.mjs CHANGED
@@ -5,8 +5,9 @@ const stillDuration = 900;
5
5
  const actionSpinningPointerDuration = 300;
6
6
  const stillAfterInsightDuration = 300;
7
7
  const locateDuration = 800;
8
- const actionDuration = 1000;
8
+ const actionDuration = 500;
9
9
  const clearInsightDuration = 200;
10
+ const lastFrameDuration = 200;
10
11
  const cameraStateForRect = (rect, imageWidth, imageHeight)=>{
11
12
  const canvasRatio = imageWidth / imageHeight;
12
13
  const rectRatio = rect.width / rect.height;
@@ -127,7 +128,7 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight)=>{
127
128
  width: imageWidth,
128
129
  height: imageHeight
129
130
  }, imageWidth, imageHeight);
130
- const pointerScript = (img, title, subTitle)=>({
131
+ const setPointerScript = (img, title, subTitle)=>({
131
132
  type: 'pointer',
132
133
  img,
133
134
  duration: 0,
@@ -136,74 +137,87 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight)=>{
136
137
  });
137
138
  const scripts = [];
138
139
  let insightCameraState;
139
- let currentCameraState = fullPageCameraState;
140
140
  let insightOnTop = false;
141
- const taskCount = tasksIncluded.length;
141
+ tasksIncluded.length;
142
142
  let initSubTitle = '';
143
143
  let errorStateFlag = false;
144
144
  tasksIncluded.forEach((task, index)=>{
145
145
  if (errorStateFlag) return;
146
146
  if (0 === index) initSubTitle = paramStr(task);
147
- if ('Planning' === task.type && 'Locate' === task.subType) {
148
- var _serviceTask_output;
149
- const serviceTask = task;
150
- const resultElement = null == (_serviceTask_output = serviceTask.output) ? void 0 : _serviceTask_output.element;
147
+ if ('Planning' === task.type) {
148
+ var _task_output;
149
+ let locateElements = [];
150
+ if ('Plan' === task.subType) {
151
+ var _planTask_output;
152
+ const planTask = task;
153
+ const actions = (null == (_planTask_output = planTask.output) ? void 0 : _planTask_output.actions) || [];
154
+ if (actions.length > 0) {
155
+ const action = actions[0];
156
+ const knownFields = [
157
+ 'locate',
158
+ 'start',
159
+ 'end'
160
+ ];
161
+ knownFields.forEach((field)=>{
162
+ if (action.param[field] && 'object' == typeof action.param[field] && 'center' in action.param[field]) locateElements.push(action.param[field]);
163
+ });
164
+ for(const key in action.param)if (!knownFields.includes(key)) {
165
+ if ('object' == typeof action.param[key] && 'center' in action.param[key]) locateElements.push(action.param[key]);
166
+ }
167
+ }
168
+ } else if ('Locate' === task.subType && (null == (_task_output = task.output) ? void 0 : _task_output.element)) {
169
+ const locateTask = task;
170
+ locateElements = [
171
+ locateTask.output.element
172
+ ];
173
+ }
151
174
  const title = typeStr(task);
152
175
  const subTitle = paramStr(task);
153
- if (null == resultElement ? void 0 : resultElement.rect) insightCameraState = {
154
- ...cameraStateForRect(resultElement.rect, imageWidth, imageHeight),
155
- pointerLeft: resultElement.center[0],
156
- pointerTop: resultElement.center[1]
157
- };
158
- const context = serviceTask.uiContext;
176
+ const context = task.uiContext;
159
177
  if (null == context ? void 0 : context.screenshotBase64) {
160
- var _serviceTask_output1, _insightDump_taskInfo, _context_size, _context_size1;
161
- const insightDump = serviceTask.log;
162
- const insightContentLength = 0;
163
- if (context.screenshotBase64) {
164
- var _context_size2, _context_size3;
165
- scripts.push({
166
- type: 'img',
167
- img: context.screenshotBase64,
168
- duration: stillAfterInsightDuration,
169
- title,
170
- subTitle,
171
- imageWidth: (null == (_context_size2 = context.size) ? void 0 : _context_size2.width) || imageWidth,
172
- imageHeight: (null == (_context_size3 = context.size) ? void 0 : _context_size3.height) || imageHeight
173
- });
174
- }
175
- let cameraState;
176
- cameraState = currentCameraState === fullPageCameraState ? void 0 : insightCameraState ? mergeTwoCameraState(currentCameraState, insightCameraState) : void 0;
178
+ var _context_size, _context_size1;
179
+ const width = (null == (_context_size = context.size) ? void 0 : _context_size.width) || imageWidth;
180
+ const height = (null == (_context_size1 = context.size) ? void 0 : _context_size1.height) || imageHeight;
177
181
  scripts.push({
178
- type: 'insight',
182
+ type: 'img',
179
183
  img: context.screenshotBase64,
180
- context: context,
181
- camera: cameraState,
182
- highlightElement: (null == (_serviceTask_output1 = serviceTask.output) ? void 0 : _serviceTask_output1.element) || void 0,
183
- searchArea: null == insightDump ? void 0 : null == (_insightDump_taskInfo = insightDump.taskInfo) ? void 0 : _insightDump_taskInfo.searchArea,
184
- duration: insightContentLength > 20 ? locateDuration : 0.5 * locateDuration,
185
- insightCameraDuration: locateDuration,
184
+ duration: stillAfterInsightDuration,
186
185
  title,
187
186
  subTitle,
188
- imageWidth: (null == (_context_size = context.size) ? void 0 : _context_size.width) || imageWidth,
189
- imageHeight: (null == (_context_size1 = context.size) ? void 0 : _context_size1.height) || imageHeight
187
+ imageWidth: width,
188
+ imageHeight: height
190
189
  });
191
- scripts.push({
192
- type: 'sleep',
193
- duration: stillAfterInsightDuration,
194
- title,
195
- subTitle
190
+ locateElements.forEach((element)=>{
191
+ var _task_log_taskInfo, _task_log, _context_size, _context_size1;
192
+ insightCameraState = {
193
+ ...cameraStateForRect(element.rect, width, height),
194
+ pointerLeft: element.center[0],
195
+ pointerTop: element.center[1]
196
+ };
197
+ const newCameraState = insightCameraState;
198
+ scripts.push({
199
+ type: 'insight',
200
+ img: context.screenshotBase64,
201
+ context: context,
202
+ camera: newCameraState,
203
+ highlightElement: element,
204
+ searchArea: null == (_task_log = task.log) ? void 0 : null == (_task_log_taskInfo = _task_log.taskInfo) ? void 0 : _task_log_taskInfo.searchArea,
205
+ duration: 0.5 * locateDuration,
206
+ insightCameraDuration: locateDuration,
207
+ title,
208
+ subTitle: element.description || subTitle,
209
+ imageWidth: (null == (_context_size = context.size) ? void 0 : _context_size.width) || imageWidth,
210
+ imageHeight: (null == (_context_size1 = context.size) ? void 0 : _context_size1.height) || imageHeight
211
+ });
212
+ insightOnTop = true;
196
213
  });
197
- insightOnTop = true;
198
214
  }
199
- } else if ('Planning' === task.type) {
200
215
  const planningTask = task;
201
216
  if (planningTask.recorder && planningTask.recorder.length > 0) {
202
217
  var _planningTask_recorder_, _planningTask_recorder, _task_uiContext_size, _task_uiContext, _task_uiContext_size1, _task_uiContext1;
203
218
  scripts.push({
204
219
  type: 'img',
205
220
  img: null == (_planningTask_recorder = planningTask.recorder) ? void 0 : null == (_planningTask_recorder_ = _planningTask_recorder[0]) ? void 0 : _planningTask_recorder_.screenshot,
206
- camera: 0 === index ? fullPageCameraState : void 0,
207
221
  duration: stillDuration,
208
222
  title: typeStr(task),
209
223
  subTitle: paramStr(task),
@@ -211,21 +225,15 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight)=>{
211
225
  imageHeight: (null == (_task_uiContext1 = task.uiContext) ? void 0 : null == (_task_uiContext_size1 = _task_uiContext1.size) ? void 0 : _task_uiContext_size1.height) || imageHeight
212
226
  });
213
227
  }
214
- } else if ('Action Space' === task.type && 'FalsyConditionStatement' !== task.subType) {
215
- var _task_recorder_, _task_recorder, _task_uiContext_size2, _task_uiContext2, _task_uiContext_size3, _task_uiContext3, _task_recorder_1, _task_recorder1;
228
+ } else if ('Action Space' === task.type) {
229
+ var _task_recorder_, _task_recorder, _task_uiContext_size2, _task_uiContext2, _task_uiContext_size3, _task_uiContext3;
216
230
  const title = typeStr(task);
217
231
  const subTitle = paramStr(task);
218
- scripts.push(pointerScript(mousePointer, title, subTitle));
219
- currentCameraState = null != insightCameraState ? insightCameraState : fullPageCameraState;
220
232
  scripts.push({
221
- type: 'img',
222
- img: null == (_task_recorder = task.recorder) ? void 0 : null == (_task_recorder_ = _task_recorder[0]) ? void 0 : _task_recorder_.screenshot,
223
- duration: actionDuration,
224
- camera: 'Sleep' === task.subType ? fullPageCameraState : insightCameraState,
233
+ type: 'spinning-pointer',
234
+ duration: actionSpinningPointerDuration,
225
235
  title,
226
- subTitle,
227
- imageWidth: (null == (_task_uiContext2 = task.uiContext) ? void 0 : null == (_task_uiContext_size2 = _task_uiContext2.size) ? void 0 : _task_uiContext_size2.width) || imageWidth,
228
- imageHeight: (null == (_task_uiContext3 = task.uiContext) ? void 0 : null == (_task_uiContext_size3 = _task_uiContext3.size) ? void 0 : _task_uiContext_size3.height) || imageHeight
236
+ subTitle
229
237
  });
230
238
  if (insightOnTop) {
231
239
  scripts.push({
@@ -236,38 +244,24 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight)=>{
236
244
  });
237
245
  insightOnTop = false;
238
246
  }
239
- const imgStillDuration = index < taskCount - 1 ? stillDuration : 0;
240
- if (null == (_task_recorder1 = task.recorder) ? void 0 : null == (_task_recorder_1 = _task_recorder1[1]) ? void 0 : _task_recorder_1.screenshot) {
241
- var _task_recorder_2, _task_recorder2, _task_uiContext_size4, _task_uiContext4, _task_uiContext_size5, _task_uiContext5;
242
- scripts.push({
243
- type: 'spinning-pointer',
244
- duration: actionSpinningPointerDuration,
245
- title,
246
- subTitle
247
- });
248
- scripts.push(pointerScript(mousePointer, title, subTitle));
249
- scripts.push({
250
- type: 'img',
251
- img: null == (_task_recorder2 = task.recorder) ? void 0 : null == (_task_recorder_2 = _task_recorder2[1]) ? void 0 : _task_recorder_2.screenshot,
252
- duration: imgStillDuration,
253
- title,
254
- subTitle,
255
- imageWidth: (null == (_task_uiContext4 = task.uiContext) ? void 0 : null == (_task_uiContext_size4 = _task_uiContext4.size) ? void 0 : _task_uiContext_size4.width) || imageWidth,
256
- imageHeight: (null == (_task_uiContext5 = task.uiContext) ? void 0 : null == (_task_uiContext_size5 = _task_uiContext5.size) ? void 0 : _task_uiContext_size5.height) || imageHeight
257
- });
258
- } else scripts.push({
259
- type: 'sleep',
260
- duration: imgStillDuration,
247
+ scripts.push(setPointerScript(mousePointer, title, subTitle));
248
+ scripts.push({
249
+ type: 'img',
250
+ img: null == (_task_recorder = task.recorder) ? void 0 : null == (_task_recorder_ = _task_recorder[0]) ? void 0 : _task_recorder_.screenshot,
251
+ duration: actionDuration,
252
+ camera: 'Sleep' === task.subType ? fullPageCameraState : void 0,
261
253
  title,
262
- subTitle
254
+ subTitle,
255
+ imageWidth: (null == (_task_uiContext2 = task.uiContext) ? void 0 : null == (_task_uiContext_size2 = _task_uiContext2.size) ? void 0 : _task_uiContext_size2.width) || imageWidth,
256
+ imageHeight: (null == (_task_uiContext3 = task.uiContext) ? void 0 : null == (_task_uiContext_size3 = _task_uiContext3.size) ? void 0 : _task_uiContext_size3.height) || imageHeight
263
257
  });
264
258
  } else {
265
- var _task_recorder_3, _task_recorder3;
259
+ var _task_recorder_1, _task_recorder1;
266
260
  const title = typeStr(task);
267
261
  const subTitle = paramStr(task);
268
- 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;
262
+ const screenshot = null == (_task_recorder1 = task.recorder) ? void 0 : null == (_task_recorder_1 = _task_recorder1[task.recorder.length - 1]) ? void 0 : _task_recorder_1.screenshot;
269
263
  if (screenshot) {
270
- var _task_uiContext_size6, _task_uiContext6, _task_uiContext_size7, _task_uiContext7;
264
+ var _task_uiContext_size4, _task_uiContext4, _task_uiContext_size5, _task_uiContext5;
271
265
  scripts.push({
272
266
  type: 'img',
273
267
  img: screenshot,
@@ -275,13 +269,13 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight)=>{
275
269
  camera: fullPageCameraState,
276
270
  title,
277
271
  subTitle,
278
- imageWidth: (null == (_task_uiContext6 = task.uiContext) ? void 0 : null == (_task_uiContext_size6 = _task_uiContext6.size) ? void 0 : _task_uiContext_size6.width) || imageWidth,
279
- imageHeight: (null == (_task_uiContext7 = task.uiContext) ? void 0 : null == (_task_uiContext_size7 = _task_uiContext7.size) ? void 0 : _task_uiContext_size7.height) || imageHeight
272
+ imageWidth: (null == (_task_uiContext4 = task.uiContext) ? void 0 : null == (_task_uiContext_size4 = _task_uiContext4.size) ? void 0 : _task_uiContext_size4.width) || imageWidth,
273
+ imageHeight: (null == (_task_uiContext5 = task.uiContext) ? void 0 : null == (_task_uiContext_size5 = _task_uiContext5.size) ? void 0 : _task_uiContext_size5.height) || imageHeight
280
274
  });
281
275
  }
282
276
  }
283
277
  if ('finished' !== task.status) {
284
- var _task_uiContext_size8, _task_uiContext8, _task_uiContext_size9, _task_uiContext9;
278
+ var _task_uiContext_size6, _task_uiContext6, _task_uiContext_size7, _task_uiContext7;
285
279
  errorStateFlag = true;
286
280
  const errorTitle = typeStr(task);
287
281
  const errorMsg = task.errorMessage || 'unknown error';
@@ -293,17 +287,18 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight)=>{
293
287
  duration: stillDuration,
294
288
  title: errorTitle,
295
289
  subTitle: errorSubTitle,
296
- imageWidth: (null == (_task_uiContext8 = task.uiContext) ? void 0 : null == (_task_uiContext_size8 = _task_uiContext8.size) ? void 0 : _task_uiContext_size8.width) || imageWidth,
297
- imageHeight: (null == (_task_uiContext9 = task.uiContext) ? void 0 : null == (_task_uiContext_size9 = _task_uiContext9.size) ? void 0 : _task_uiContext_size9.height) || imageHeight
290
+ imageWidth: (null == (_task_uiContext6 = task.uiContext) ? void 0 : null == (_task_uiContext_size6 = _task_uiContext6.size) ? void 0 : _task_uiContext_size6.width) || imageWidth,
291
+ imageHeight: (null == (_task_uiContext7 = task.uiContext) ? void 0 : null == (_task_uiContext_size7 = _task_uiContext7.size) ? void 0 : _task_uiContext_size7.height) || imageHeight
298
292
  });
299
293
  return;
300
294
  }
301
295
  });
296
+ console.log("scripts", scripts);
302
297
  if (!errorStateFlag) scripts.push({
303
298
  title: 'Done',
304
299
  subTitle: initSubTitle,
305
300
  type: 'img',
306
- duration: stillDuration,
301
+ duration: lastFrameDuration,
307
302
  camera: fullPageCameraState
308
303
  });
309
304
  return scripts;
package/dist/lib/component/logo/index.js CHANGED
@@ -28,33 +28,16 @@ __webpack_require__.d(__webpack_exports__, {
28
28
  LogoUrl: ()=>LogoUrl
29
29
  });
30
30
  const jsx_runtime_namespaceObject = require("react/jsx-runtime");
31
- const external_react_namespaceObject = require("react");
31
+ const useTheme_js_namespaceObject = require("../../hooks/useTheme.js");
32
32
  require("./index.css");
33
33
  const LogoUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/vhaeh7vhabf/Midscene.png';
34
34
  const LogoUrlLight = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/nupipfups/Midscene/midscene_with_text_light.png';
35
35
  const LogoUrlDark = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/nupipfups/Midscene/midscene_with_text_dark.png';
36
36
  const Logo = (param)=>{
37
37
  let { hideLogo = false } = param;
38
- const [isDark, setIsDark] = (0, external_react_namespaceObject.useState)(false);
39
- (0, external_react_namespaceObject.useEffect)(()=>{
40
- const checkTheme = ()=>{
41
- var _document_querySelector;
42
- const theme = null == (_document_querySelector = document.querySelector('[data-theme]')) ? void 0 : _document_querySelector.getAttribute('data-theme');
43
- setIsDark('dark' === theme);
44
- };
45
- checkTheme();
46
- const observer = new MutationObserver(checkTheme);
47
- const target = document.querySelector('[data-theme]') || document.documentElement;
48
- observer.observe(target, {
49
- attributes: true,
50
- attributeFilter: [
51
- 'data-theme'
52
- ]
53
- });
54
- return ()=>observer.disconnect();
55
- }, []);
38
+ const { isDarkMode } = (0, useTheme_js_namespaceObject.useTheme)();
56
39
  if (hideLogo) return null;
57
- const logoSrc = isDark ? LogoUrlDark : LogoUrlLight;
40
+ const logoSrc = isDarkMode ? LogoUrlDark : LogoUrlLight;
58
41
  return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
59
42
  className: "logo",
60
43
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("a", {
package/dist/lib/component/playground/index.css CHANGED
@@ -432,6 +432,88 @@
432
432
  color: #2b83ff;
433
433
  }
434
434
 
435
+ [data-theme="dark"] .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-radio-button-wrapper {
436
+ color: rgba(255, 255, 255, .85) !important;
437
+ background-color: rgba(255, 255, 255, .08) !important;
438
+ }
439
+
440
+ [data-theme="dark"] .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-radio-button-wrapper.ant-radio-button-wrapper-checked {
441
+ color: #fff !important;
442
+ background-color: #2b83ff !important;
443
+ border-color: #2b83ff !important;
444
+ }
445
+
446
+ [data-theme="dark"] .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .more-apis-button {
447
+ color: rgba(255, 255, 255, .85) !important;
448
+ background-color: rgba(255, 255, 255, .08) !important;
449
+ }
450
+
451
+ [data-theme="dark"] .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .more-apis-button:hover {
452
+ background-color: rgba(255, 255, 255, .12) !important;
453
+ }
454
+
455
+ [data-theme="dark"] .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .more-apis-button.selected-from-dropdown {
456
+ color: #fff !important;
457
+ background-color: #2b83ff !important;
458
+ }
459
+
460
+ [data-theme="dark"] .prompt-input-wrapper .mode-radio-group-wrapper .action-icons {
461
+ background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(31, 31, 31, .5) 20%, rgba(31, 31, 31, .8) 40%, rgba(31, 31, 31, .95) 60%, #1f1f1f 70%) !important;
462
+ }
463
+
464
+ [data-theme="dark"] .prompt-input-wrapper .main-side-console-input .main-side-console-input-textarea {
465
+ color: rgba(255, 255, 255, .85) !important;
466
+ background: rgba(255, 255, 255, .04) !important;
467
+ border-color: rgba(255, 255, 255, .12) !important;
468
+ }
469
+
470
+ [data-theme="dark"] .prompt-input-wrapper .main-side-console-input .main-side-console-input-textarea:focus-within, [data-theme="dark"] .prompt-input-wrapper .main-side-console-input.loading .main-side-console-input-textarea {
471
+ background: linear-gradient(#1f1f1f, #1f1f1f) padding-box padding-box, linear-gradient(135deg, #4285f4 0%, #06f 25%, #7b02c5 50%, #ea4335 75%, #ff7043 100%) border-box !important;
472
+ border: 1px solid rgba(0, 0, 0, 0) !important;
473
+ }
474
+
475
+ [data-theme="dark"] .prompt-input-wrapper .ant-form-item-control-input-content .ant-input, [data-theme="dark"] .prompt-input-wrapper .ant-form-item-control-input-content textarea.ant-input {
476
+ color: rgba(255, 255, 255, .85) !important;
477
+ background: rgba(255, 255, 255, .04) !important;
478
+ border-color: rgba(255, 255, 255, .12) !important;
479
+ }
480
+
481
+ [data-theme="dark"] .prompt-input-wrapper .ant-form-item-control-input-content .ant-btn {
482
+ color: rgba(255, 255, 255, .85) !important;
483
+ background-color: rgba(255, 255, 255, .08) !important;
484
+ border-color: rgba(255, 255, 255, .12) !important;
485
+ }
486
+
487
+ [data-theme="dark"] .prompt-input-wrapper .ant-form-item-control-input-content .ant-btn.ant-btn-primary {
488
+ color: #fff !important;
489
+ background-color: #2b83ff !important;
490
+ border-color: #2b83ff !important;
491
+ }
492
+
493
+ [data-theme="dark"] .prompt-input-wrapper .form-controller-wrapper {
494
+ background-color: #1f1f1f !important;
495
+ }
496
+
497
+ [data-theme="dark"] .prompt-input-wrapper .structured-params-container {
498
+ background: linear-gradient(#1f1f1f, #1f1f1f) padding-box padding-box, linear-gradient(135deg, #4285f4 0%, #06f 25%, #7b02c5 50%, #ea4335 75%, #ff7043 100%) border-box !important;
499
+ }
500
+
501
+ [data-theme="dark"] .prompt-input-wrapper .structured-params-container .structured-params .ant-form-item-label > label {
502
+ color: rgba(255, 255, 255, .85) !important;
503
+ }
504
+
505
+ [data-theme="dark"] .prompt-input-wrapper .structured-params-container .structured-params .ant-input, [data-theme="dark"] .prompt-input-wrapper .structured-params-container .structured-params .ant-input-number, [data-theme="dark"] .prompt-input-wrapper .structured-params-container .structured-params .ant-select, [data-theme="dark"] .prompt-input-wrapper .structured-params-container .structured-params .ant-radio-group .ant-radio-button-wrapper {
506
+ color: rgba(255, 255, 255, .85) !important;
507
+ background-color: rgba(255, 255, 255, .04) !important;
508
+ border-color: rgba(255, 255, 255, .12) !important;
509
+ }
510
+
511
+ [data-theme="dark"] .prompt-input-wrapper .structured-params-container .structured-params .ant-radio-group .ant-radio-button-wrapper.ant-radio-button-wrapper-checked {
512
+ color: #fff !important;
513
+ background-color: #2b83ff !important;
514
+ border-color: #2b83ff !important;
515
+ }
516
+
435
517
  [data-theme="dark"] .prompt-input .tip-button {
436
518
  background-color: rgba(255, 255, 255, .08);
437
519
  }
package/dist/lib/component/prompt-input/index.css CHANGED
@@ -389,6 +389,88 @@
389
389
  color: #2b83ff;
390
390
  }
391
391
 
392
+ [data-theme="dark"] .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-radio-button-wrapper {
393
+ color: rgba(255, 255, 255, .85) !important;
394
+ background-color: rgba(255, 255, 255, .08) !important;
395
+ }
396
+
397
+ [data-theme="dark"] .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-radio-button-wrapper.ant-radio-button-wrapper-checked {
398
+ color: #fff !important;
399
+ background-color: #2b83ff !important;
400
+ border-color: #2b83ff !important;
401
+ }
402
+
403
+ [data-theme="dark"] .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .more-apis-button {
404
+ color: rgba(255, 255, 255, .85) !important;
405
+ background-color: rgba(255, 255, 255, .08) !important;
406
+ }
407
+
408
+ [data-theme="dark"] .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .more-apis-button:hover {
409
+ background-color: rgba(255, 255, 255, .12) !important;
410
+ }
411
+
412
+ [data-theme="dark"] .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .more-apis-button.selected-from-dropdown {
413
+ color: #fff !important;
414
+ background-color: #2b83ff !important;
415
+ }
416
+
417
+ [data-theme="dark"] .prompt-input-wrapper .mode-radio-group-wrapper .action-icons {
418
+ background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(31, 31, 31, .5) 20%, rgba(31, 31, 31, .8) 40%, rgba(31, 31, 31, .95) 60%, #1f1f1f 70%) !important;
419
+ }
420
+
421
+ [data-theme="dark"] .prompt-input-wrapper .main-side-console-input .main-side-console-input-textarea {
422
+ color: rgba(255, 255, 255, .85) !important;
423
+ background: rgba(255, 255, 255, .04) !important;
424
+ border-color: rgba(255, 255, 255, .12) !important;
425
+ }
426
+
427
+ [data-theme="dark"] .prompt-input-wrapper .main-side-console-input .main-side-console-input-textarea:focus-within, [data-theme="dark"] .prompt-input-wrapper .main-side-console-input.loading .main-side-console-input-textarea {
428
+ background: linear-gradient(#1f1f1f, #1f1f1f) padding-box padding-box, linear-gradient(135deg, #4285f4 0%, #06f 25%, #7b02c5 50%, #ea4335 75%, #ff7043 100%) border-box !important;
429
+ border: 1px solid rgba(0, 0, 0, 0) !important;
430
+ }
431
+
432
+ [data-theme="dark"] .prompt-input-wrapper .ant-form-item-control-input-content .ant-input, [data-theme="dark"] .prompt-input-wrapper .ant-form-item-control-input-content textarea.ant-input {
433
+ color: rgba(255, 255, 255, .85) !important;
434
+ background: rgba(255, 255, 255, .04) !important;
435
+ border-color: rgba(255, 255, 255, .12) !important;
436
+ }
437
+
438
+ [data-theme="dark"] .prompt-input-wrapper .ant-form-item-control-input-content .ant-btn {
439
+ color: rgba(255, 255, 255, .85) !important;
440
+ background-color: rgba(255, 255, 255, .08) !important;
441
+ border-color: rgba(255, 255, 255, .12) !important;
442
+ }
443
+
444
+ [data-theme="dark"] .prompt-input-wrapper .ant-form-item-control-input-content .ant-btn.ant-btn-primary {
445
+ color: #fff !important;
446
+ background-color: #2b83ff !important;
447
+ border-color: #2b83ff !important;
448
+ }
449
+
450
+ [data-theme="dark"] .prompt-input-wrapper .form-controller-wrapper {
451
+ background-color: #1f1f1f !important;
452
+ }
453
+
454
+ [data-theme="dark"] .prompt-input-wrapper .structured-params-container {
455
+ background: linear-gradient(#1f1f1f, #1f1f1f) padding-box padding-box, linear-gradient(135deg, #4285f4 0%, #06f 25%, #7b02c5 50%, #ea4335 75%, #ff7043 100%) border-box !important;
456
+ }
457
+
458
+ [data-theme="dark"] .prompt-input-wrapper .structured-params-container .structured-params .ant-form-item-label > label {
459
+ color: rgba(255, 255, 255, .85) !important;
460
+ }
461
+
462
+ [data-theme="dark"] .prompt-input-wrapper .structured-params-container .structured-params .ant-input, [data-theme="dark"] .prompt-input-wrapper .structured-params-container .structured-params .ant-input-number, [data-theme="dark"] .prompt-input-wrapper .structured-params-container .structured-params .ant-select, [data-theme="dark"] .prompt-input-wrapper .structured-params-container .structured-params .ant-radio-group .ant-radio-button-wrapper {
463
+ color: rgba(255, 255, 255, .85) !important;
464
+ background-color: rgba(255, 255, 255, .04) !important;
465
+ border-color: rgba(255, 255, 255, .12) !important;
466
+ }
467
+
468
+ [data-theme="dark"] .prompt-input-wrapper .structured-params-container .structured-params .ant-radio-group .ant-radio-button-wrapper.ant-radio-button-wrapper-checked {
469
+ color: #fff !important;
470
+ background-color: #2b83ff !important;
471
+ border-color: #2b83ff !important;
472
+ }
473
+
392
474
  [data-theme="dark"] .prompt-input .tip-button {
393
475
  background-color: rgba(255, 255, 255, .08);
394
476
  }
package/dist/lib/hooks/useTheme.js ADDED
@@ -0,0 +1,59 @@
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
+ useTheme: ()=>useTheme
28
+ });
29
+ const external_react_namespaceObject = require("react");
30
+ function useTheme() {
31
+ const [isDarkMode, setIsDarkMode] = (0, external_react_namespaceObject.useState)(false);
32
+ (0, external_react_namespaceObject.useEffect)(()=>{
33
+ const checkTheme = ()=>{
34
+ var _document_querySelector;
35
+ const theme = null == (_document_querySelector = document.querySelector('[data-theme]')) ? void 0 : _document_querySelector.getAttribute('data-theme');
36
+ setIsDarkMode('dark' === theme);
37
+ };
38
+ checkTheme();
39
+ const observer = new MutationObserver(checkTheme);
40
+ const target = document.querySelector('[data-theme]') || document.documentElement;
41
+ observer.observe(target, {
42
+ attributes: true,
43
+ attributeFilter: [
44
+ 'data-theme'
45
+ ]
46
+ });
47
+ return ()=>observer.disconnect();
48
+ }, []);
49
+ return {
50
+ isDarkMode
51
+ };
52
+ }
53
+ exports.useTheme = __webpack_exports__.useTheme;
54
+ for(var __webpack_i__ in __webpack_exports__)if (-1 === [
55
+ "useTheme"
56
+ ].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
57
+ Object.defineProperty(exports, '__esModule', {
58
+ value: true
59
+ });
package/dist/lib/index.js CHANGED
@@ -48,6 +48,7 @@ __webpack_require__.d(__webpack_exports__, {
48
48
  staticAgentFromContext: ()=>playground_utils_js_namespaceObject.staticAgentFromContext,
49
49
  useSafeOverrideAIConfig: ()=>useSafeOverrideAIConfig_js_namespaceObject.useSafeOverrideAIConfig,
50
50
  useServerValid: ()=>useServerValid_js_namespaceObject.useServerValid,
51
+ useTheme: ()=>useTheme_js_namespaceObject.useTheme,
51
52
  ServiceModeControl: ()=>service_mode_control_index_js_namespaceObject.ServiceModeControl,
52
53
  BaseContextProvider: ()=>context_provider_js_namespaceObject.BaseContextProvider,
53
54
  colorForName: ()=>color_js_namespaceObject.colorForName,
@@ -86,6 +87,7 @@ const env_config_reminder_index_js_namespaceObject = require("./component/env-co
86
87
  const nav_actions_index_js_namespaceObject = require("./component/nav-actions/index.js");
87
88
  const logo_index_js_namespaceObject = require("./component/logo/index.js");
88
89
  const misc_index_js_namespaceObject = require("./component/misc/index.js");
90
+ const useTheme_js_namespaceObject = require("./hooks/useTheme.js");
89
91
  const useServerValid_js_namespaceObject = require("./hooks/useServerValid.js");
90
92
  const useSafeOverrideAIConfig_js_namespaceObject = require("./hooks/useSafeOverrideAIConfig.js");
91
93
  const playground_result_index_js_namespaceObject = require("./component/playground-result/index.js");
@@ -145,6 +147,7 @@ exports.timeStr = __webpack_exports__.timeStr;
145
147
  exports.useEnvConfig = __webpack_exports__.useEnvConfig;
146
148
  exports.useSafeOverrideAIConfig = __webpack_exports__.useSafeOverrideAIConfig;
147
149
  exports.useServerValid = __webpack_exports__.useServerValid;
150
+ exports.useTheme = __webpack_exports__.useTheme;
148
151
  for(var __webpack_i__ in __webpack_exports__)if (-1 === [
149
152
  "AgentContextProvider",
150
153
  "BaseContextProvider",
@@ -186,7 +189,8 @@ for(var __webpack_i__ in __webpack_exports__)if (-1 === [
186
189
  "timeStr",
187
190
  "useEnvConfig",
188
191
  "useSafeOverrideAIConfig",
189
- "useServerValid"
192
+ "useServerValid",
193
+ "useTheme"
190
194
  ].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
191
195
  Object.defineProperty(exports, '__esModule', {
192
196
  value: true
package/dist/lib/utils/replay-scripts.js CHANGED
@@ -36,8 +36,9 @@ const stillDuration = 900;
36
36
  const actionSpinningPointerDuration = 300;
37
37
  const stillAfterInsightDuration = 300;
38
38
  const locateDuration = 800;
39
- const actionDuration = 1000;
39
+ const actionDuration = 500;
40
40
  const clearInsightDuration = 200;
41
+ const lastFrameDuration = 200;
41
42
  const cameraStateForRect = (rect, imageWidth, imageHeight)=>{
42
43
  const canvasRatio = imageWidth / imageHeight;
43
44
  const rectRatio = rect.width / rect.height;
@@ -158,7 +159,7 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight)=>{
158
159
  width: imageWidth,
159
160
  height: imageHeight
160
161
  }, imageWidth, imageHeight);
161
- const pointerScript = (img, title, subTitle)=>({
162
+ const setPointerScript = (img, title, subTitle)=>({
162
163
  type: 'pointer',
163
164
  img,
164
165
  duration: 0,
@@ -167,74 +168,87 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight)=>{
167
168
  });
168
169
  const scripts = [];
169
170
  let insightCameraState;
170
- let currentCameraState = fullPageCameraState;
171
171
  let insightOnTop = false;
172
- const taskCount = tasksIncluded.length;
172
+ tasksIncluded.length;
173
173
  let initSubTitle = '';
174
174
  let errorStateFlag = false;
175
175
  tasksIncluded.forEach((task, index)=>{
176
176
  if (errorStateFlag) return;
177
177
  if (0 === index) initSubTitle = (0, agent_namespaceObject.paramStr)(task);
178
- if ('Planning' === task.type && 'Locate' === task.subType) {
179
- var _serviceTask_output;
180
- const serviceTask = task;
181
- const resultElement = null == (_serviceTask_output = serviceTask.output) ? void 0 : _serviceTask_output.element;
178
+ if ('Planning' === task.type) {
179
+ var _task_output;
180
+ let locateElements = [];
181
+ if ('Plan' === task.subType) {
182
+ var _planTask_output;
183
+ const planTask = task;
184
+ const actions = (null == (_planTask_output = planTask.output) ? void 0 : _planTask_output.actions) || [];
185
+ if (actions.length > 0) {
186
+ const action = actions[0];
187
+ const knownFields = [
188
+ 'locate',
189
+ 'start',
190
+ 'end'
191
+ ];
192
+ knownFields.forEach((field)=>{
193
+ if (action.param[field] && 'object' == typeof action.param[field] && 'center' in action.param[field]) locateElements.push(action.param[field]);
194
+ });
195
+ for(const key in action.param)if (!knownFields.includes(key)) {
196
+ if ('object' == typeof action.param[key] && 'center' in action.param[key]) locateElements.push(action.param[key]);
197
+ }
198
+ }
199
+ } else if ('Locate' === task.subType && (null == (_task_output = task.output) ? void 0 : _task_output.element)) {
200
+ const locateTask = task;
201
+ locateElements = [
202
+ locateTask.output.element
203
+ ];
204
+ }
182
205
  const title = (0, agent_namespaceObject.typeStr)(task);
183
206
  const subTitle = (0, agent_namespaceObject.paramStr)(task);
184
- if (null == resultElement ? void 0 : resultElement.rect) insightCameraState = {
185
- ...cameraStateForRect(resultElement.rect, imageWidth, imageHeight),
186
- pointerLeft: resultElement.center[0],
187
- pointerTop: resultElement.center[1]
188
- };
189
- const context = serviceTask.uiContext;
207
+ const context = task.uiContext;
190
208
  if (null == context ? void 0 : context.screenshotBase64) {
191
- var _serviceTask_output1, _insightDump_taskInfo, _context_size, _context_size1;
192
- const insightDump = serviceTask.log;
193
- const insightContentLength = 0;
194
- if (context.screenshotBase64) {
195
- var _context_size2, _context_size3;
196
- scripts.push({
197
- type: 'img',
198
- img: context.screenshotBase64,
199
- duration: stillAfterInsightDuration,
200
- title,
201
- subTitle,
202
- imageWidth: (null == (_context_size2 = context.size) ? void 0 : _context_size2.width) || imageWidth,
203
- imageHeight: (null == (_context_size3 = context.size) ? void 0 : _context_size3.height) || imageHeight
204
- });
205
- }
206
- let cameraState;
207
- cameraState = currentCameraState === fullPageCameraState ? void 0 : insightCameraState ? mergeTwoCameraState(currentCameraState, insightCameraState) : void 0;
209
+ var _context_size, _context_size1;
210
+ const width = (null == (_context_size = context.size) ? void 0 : _context_size.width) || imageWidth;
211
+ const height = (null == (_context_size1 = context.size) ? void 0 : _context_size1.height) || imageHeight;
208
212
  scripts.push({
209
- type: 'insight',
213
+ type: 'img',
210
214
  img: context.screenshotBase64,
211
- context: context,
212
- camera: cameraState,
213
- highlightElement: (null == (_serviceTask_output1 = serviceTask.output) ? void 0 : _serviceTask_output1.element) || void 0,
214
- searchArea: null == insightDump ? void 0 : null == (_insightDump_taskInfo = insightDump.taskInfo) ? void 0 : _insightDump_taskInfo.searchArea,
215
- duration: insightContentLength > 20 ? locateDuration : 0.5 * locateDuration,
216
- insightCameraDuration: locateDuration,
215
+ duration: stillAfterInsightDuration,
217
216
  title,
218
217
  subTitle,
219
- imageWidth: (null == (_context_size = context.size) ? void 0 : _context_size.width) || imageWidth,
220
- imageHeight: (null == (_context_size1 = context.size) ? void 0 : _context_size1.height) || imageHeight
218
+ imageWidth: width,
219
+ imageHeight: height
221
220
  });
222
- scripts.push({
223
- type: 'sleep',
224
- duration: stillAfterInsightDuration,
225
- title,
226
- subTitle
221
+ locateElements.forEach((element)=>{
222
+ var _task_log_taskInfo, _task_log, _context_size, _context_size1;
223
+ insightCameraState = {
224
+ ...cameraStateForRect(element.rect, width, height),
225
+ pointerLeft: element.center[0],
226
+ pointerTop: element.center[1]
227
+ };
228
+ const newCameraState = insightCameraState;
229
+ scripts.push({
230
+ type: 'insight',
231
+ img: context.screenshotBase64,
232
+ context: context,
233
+ camera: newCameraState,
234
+ highlightElement: element,
235
+ searchArea: null == (_task_log = task.log) ? void 0 : null == (_task_log_taskInfo = _task_log.taskInfo) ? void 0 : _task_log_taskInfo.searchArea,
236
+ duration: 0.5 * locateDuration,
237
+ insightCameraDuration: locateDuration,
238
+ title,
239
+ subTitle: element.description || subTitle,
240
+ imageWidth: (null == (_context_size = context.size) ? void 0 : _context_size.width) || imageWidth,
241
+ imageHeight: (null == (_context_size1 = context.size) ? void 0 : _context_size1.height) || imageHeight
242
+ });
243
+ insightOnTop = true;
227
244
  });
228
- insightOnTop = true;
229
245
  }
230
- } else if ('Planning' === task.type) {
231
246
  const planningTask = task;
232
247
  if (planningTask.recorder && planningTask.recorder.length > 0) {
233
248
  var _planningTask_recorder_, _planningTask_recorder, _task_uiContext_size, _task_uiContext, _task_uiContext_size1, _task_uiContext1;
234
249
  scripts.push({
235
250
  type: 'img',
236
251
  img: null == (_planningTask_recorder = planningTask.recorder) ? void 0 : null == (_planningTask_recorder_ = _planningTask_recorder[0]) ? void 0 : _planningTask_recorder_.screenshot,
237
- camera: 0 === index ? fullPageCameraState : void 0,
238
252
  duration: stillDuration,
239
253
  title: (0, agent_namespaceObject.typeStr)(task),
240
254
  subTitle: (0, agent_namespaceObject.paramStr)(task),
@@ -242,21 +256,15 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight)=>{
242
256
  imageHeight: (null == (_task_uiContext1 = task.uiContext) ? void 0 : null == (_task_uiContext_size1 = _task_uiContext1.size) ? void 0 : _task_uiContext_size1.height) || imageHeight
243
257
  });
244
258
  }
245
- } else if ('Action Space' === task.type && 'FalsyConditionStatement' !== task.subType) {
246
- var _task_recorder_, _task_recorder, _task_uiContext_size2, _task_uiContext2, _task_uiContext_size3, _task_uiContext3, _task_recorder_1, _task_recorder1;
259
+ } else if ('Action Space' === task.type) {
260
+ var _task_recorder_, _task_recorder, _task_uiContext_size2, _task_uiContext2, _task_uiContext_size3, _task_uiContext3;
247
261
  const title = (0, agent_namespaceObject.typeStr)(task);
248
262
  const subTitle = (0, agent_namespaceObject.paramStr)(task);
249
- scripts.push(pointerScript(external_index_js_namespaceObject.mousePointer, title, subTitle));
250
- currentCameraState = null != insightCameraState ? insightCameraState : fullPageCameraState;
251
263
  scripts.push({
252
- type: 'img',
253
- img: null == (_task_recorder = task.recorder) ? void 0 : null == (_task_recorder_ = _task_recorder[0]) ? void 0 : _task_recorder_.screenshot,
254
- duration: actionDuration,
255
- camera: 'Sleep' === task.subType ? fullPageCameraState : insightCameraState,
264
+ type: 'spinning-pointer',
265
+ duration: actionSpinningPointerDuration,
256
266
  title,
257
- subTitle,
258
- imageWidth: (null == (_task_uiContext2 = task.uiContext) ? void 0 : null == (_task_uiContext_size2 = _task_uiContext2.size) ? void 0 : _task_uiContext_size2.width) || imageWidth,
259
- imageHeight: (null == (_task_uiContext3 = task.uiContext) ? void 0 : null == (_task_uiContext_size3 = _task_uiContext3.size) ? void 0 : _task_uiContext_size3.height) || imageHeight
267
+ subTitle
260
268
  });
261
269
  if (insightOnTop) {
262
270
  scripts.push({
@@ -267,38 +275,24 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight)=>{
267
275
  });
268
276
  insightOnTop = false;
269
277
  }
270
- const imgStillDuration = index < taskCount - 1 ? stillDuration : 0;
271
- if (null == (_task_recorder1 = task.recorder) ? void 0 : null == (_task_recorder_1 = _task_recorder1[1]) ? void 0 : _task_recorder_1.screenshot) {
272
- var _task_recorder_2, _task_recorder2, _task_uiContext_size4, _task_uiContext4, _task_uiContext_size5, _task_uiContext5;
273
- scripts.push({
274
- type: 'spinning-pointer',
275
- duration: actionSpinningPointerDuration,
276
- title,
277
- subTitle
278
- });
279
- scripts.push(pointerScript(external_index_js_namespaceObject.mousePointer, title, subTitle));
280
- scripts.push({
281
- type: 'img',
282
- img: null == (_task_recorder2 = task.recorder) ? void 0 : null == (_task_recorder_2 = _task_recorder2[1]) ? void 0 : _task_recorder_2.screenshot,
283
- duration: imgStillDuration,
284
- title,
285
- subTitle,
286
- imageWidth: (null == (_task_uiContext4 = task.uiContext) ? void 0 : null == (_task_uiContext_size4 = _task_uiContext4.size) ? void 0 : _task_uiContext_size4.width) || imageWidth,
287
- imageHeight: (null == (_task_uiContext5 = task.uiContext) ? void 0 : null == (_task_uiContext_size5 = _task_uiContext5.size) ? void 0 : _task_uiContext_size5.height) || imageHeight
288
- });
289
- } else scripts.push({
290
- type: 'sleep',
291
- duration: imgStillDuration,
278
+ scripts.push(setPointerScript(external_index_js_namespaceObject.mousePointer, title, subTitle));
279
+ scripts.push({
280
+ type: 'img',
281
+ img: null == (_task_recorder = task.recorder) ? void 0 : null == (_task_recorder_ = _task_recorder[0]) ? void 0 : _task_recorder_.screenshot,
282
+ duration: actionDuration,
283
+ camera: 'Sleep' === task.subType ? fullPageCameraState : void 0,
292
284
  title,
293
- subTitle
285
+ subTitle,
286
+ imageWidth: (null == (_task_uiContext2 = task.uiContext) ? void 0 : null == (_task_uiContext_size2 = _task_uiContext2.size) ? void 0 : _task_uiContext_size2.width) || imageWidth,
287
+ imageHeight: (null == (_task_uiContext3 = task.uiContext) ? void 0 : null == (_task_uiContext_size3 = _task_uiContext3.size) ? void 0 : _task_uiContext_size3.height) || imageHeight
294
288
  });
295
289
  } else {
296
- var _task_recorder_3, _task_recorder3;
290
+ var _task_recorder_1, _task_recorder1;
297
291
  const title = (0, agent_namespaceObject.typeStr)(task);
298
292
  const subTitle = (0, agent_namespaceObject.paramStr)(task);
299
- 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;
293
+ const screenshot = null == (_task_recorder1 = task.recorder) ? void 0 : null == (_task_recorder_1 = _task_recorder1[task.recorder.length - 1]) ? void 0 : _task_recorder_1.screenshot;
300
294
  if (screenshot) {
301
- var _task_uiContext_size6, _task_uiContext6, _task_uiContext_size7, _task_uiContext7;
295
+ var _task_uiContext_size4, _task_uiContext4, _task_uiContext_size5, _task_uiContext5;
302
296
  scripts.push({
303
297
  type: 'img',
304
298
  img: screenshot,
@@ -306,13 +300,13 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight)=>{
306
300
  camera: fullPageCameraState,
307
301
  title,
308
302
  subTitle,
309
- imageWidth: (null == (_task_uiContext6 = task.uiContext) ? void 0 : null == (_task_uiContext_size6 = _task_uiContext6.size) ? void 0 : _task_uiContext_size6.width) || imageWidth,
310
- imageHeight: (null == (_task_uiContext7 = task.uiContext) ? void 0 : null == (_task_uiContext_size7 = _task_uiContext7.size) ? void 0 : _task_uiContext_size7.height) || imageHeight
303
+ imageWidth: (null == (_task_uiContext4 = task.uiContext) ? void 0 : null == (_task_uiContext_size4 = _task_uiContext4.size) ? void 0 : _task_uiContext_size4.width) || imageWidth,
304
+ imageHeight: (null == (_task_uiContext5 = task.uiContext) ? void 0 : null == (_task_uiContext_size5 = _task_uiContext5.size) ? void 0 : _task_uiContext_size5.height) || imageHeight
311
305
  });
312
306
  }
313
307
  }
314
308
  if ('finished' !== task.status) {
315
- var _task_uiContext_size8, _task_uiContext8, _task_uiContext_size9, _task_uiContext9;
309
+ var _task_uiContext_size6, _task_uiContext6, _task_uiContext_size7, _task_uiContext7;
316
310
  errorStateFlag = true;
317
311
  const errorTitle = (0, agent_namespaceObject.typeStr)(task);
318
312
  const errorMsg = task.errorMessage || 'unknown error';
@@ -324,17 +318,18 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight)=>{
324
318
  duration: stillDuration,
325
319
  title: errorTitle,
326
320
  subTitle: errorSubTitle,
327
- imageWidth: (null == (_task_uiContext8 = task.uiContext) ? void 0 : null == (_task_uiContext_size8 = _task_uiContext8.size) ? void 0 : _task_uiContext_size8.width) || imageWidth,
328
- imageHeight: (null == (_task_uiContext9 = task.uiContext) ? void 0 : null == (_task_uiContext_size9 = _task_uiContext9.size) ? void 0 : _task_uiContext_size9.height) || imageHeight
321
+ imageWidth: (null == (_task_uiContext6 = task.uiContext) ? void 0 : null == (_task_uiContext_size6 = _task_uiContext6.size) ? void 0 : _task_uiContext_size6.width) || imageWidth,
322
+ imageHeight: (null == (_task_uiContext7 = task.uiContext) ? void 0 : null == (_task_uiContext_size7 = _task_uiContext7.size) ? void 0 : _task_uiContext_size7.height) || imageHeight
329
323
  });
330
324
  return;
331
325
  }
332
326
  });
327
+ console.log("scripts", scripts);
333
328
  if (!errorStateFlag) scripts.push({
334
329
  title: 'Done',
335
330
  subTitle: initSubTitle,
336
331
  type: 'img',
337
- duration: stillDuration,
332
+ duration: lastFrameDuration,
338
333
  camera: fullPageCameraState
339
334
  });
340
335
  return scripts;
package/dist/types/hooks/useTheme.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ /**
2
+ * Hook to detect and observe the current theme (light/dark mode)
3
+ * @returns Object containing isDarkMode boolean
4
+ */
5
+ export declare function useTheme(): {
6
+ isDarkMode: boolean;
7
+ };
package/dist/types/index.d.ts CHANGED
@@ -10,6 +10,7 @@ export { NavActions } from './component/nav-actions';
10
10
  export type { NavActionsProps } from './component/nav-actions';
11
11
  export { Logo } from './component/logo';
12
12
  export { iconForStatus, timeCostStrElement } from './component/misc';
13
+ export { useTheme } from './hooks/useTheme';
13
14
  export { useServerValid } from './hooks/useServerValid';
14
15
  export { useSafeOverrideAIConfig, safeOverrideAIConfig, } from './hooks/useSafeOverrideAIConfig';
15
16
  export { PlaygroundResultView } from './component/playground-result';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@midscene/visualizer",
3
- "version": "1.0.1-beta-20251110130223.0",
3
+ "version": "1.0.1-beta-20251111100700.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,10 +60,10 @@
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-20251110130223.0",
64
- "@midscene/playground": "1.0.1-beta-20251110130223.0",
65
- "@midscene/shared": "1.0.1-beta-20251110130223.0",
66
- "@midscene/web": "1.0.1-beta-20251110130223.0"
63
+ "@midscene/core": "1.0.1-beta-20251111100700.0",
64
+ "@midscene/playground": "1.0.1-beta-20251111100700.0",
65
+ "@midscene/web": "1.0.1-beta-20251111100700.0",
66
+ "@midscene/shared": "1.0.1-beta-20251111100700.0"
67
67
  },
68
68
  "license": "MIT",
69
69
  "scripts": {