-
Notifications
You must be signed in to change notification settings - Fork 803
support local image #1703
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
support local image #1703
Conversation
✅ Deploy Preview for midscene ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
303243d to
f98ef04
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull request overview
This PR adds support for directory-based report format with local image files, providing an alternative to the traditional single HTML file with embedded base64 images. This is particularly useful for large reports where embedding many base64 images can make the HTML file unwieldy.
Key Changes:
- Added
useDirectoryReportoption to agent configuration that generates reports with separate PNG screenshot files instead of embedded base64 data - Implemented image extraction to script tags for improved memory performance when parsing large JSON dumps in traditional reports
- Added frontend support to restore image references from script tags
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
packages/core/src/types.ts |
Added useDirectoryReport option to AgentOpt interface |
packages/core/src/agent/agent.ts |
Passes useDirectoryReport option to report writing logic |
packages/core/src/utils.ts |
Implements directory report generation, screenshot extraction to files, and image extraction to script tags for traditional reports |
apps/report/src/utils/image-restoration.ts |
New utility to load and restore image references from script tags in the frontend |
apps/report/src/App.tsx |
Integrates image restoration logic when loading dump data |
packages/web-integration/tests/ai/web/puppeteer/directory-report.test.ts |
New test suite validating directory-based report format |
packages/web-integration/tests/ai/web/puppeteer/open-new-tab.test.ts |
Explicitly disables directory report to maintain existing behavior |
apps/site/docs/en/api.mdx |
Documents the new useDirectoryReport option (English) |
apps/site/docs/zh/api.mdx |
Documents the new useDirectoryReport option (Chinese) |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
51cbcef to
035bb28
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull request overview
Copilot reviewed 9 out of 9 changed files in this pull request and generated 15 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
packages/web-integration/tests/ai/web/puppeteer/directory-report.test.ts
Outdated
Show resolved
Hide resolved
06246e4 to
66e45f3
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull request overview
Copilot reviewed 18 out of 18 changed files in this pull request and generated 15 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
packages/web-integration/tests/ai/web/puppeteer/directory-report.test.ts
Dismissed
Show dismissed
Hide dismissed
5a6abc3 to
428dc56
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull request overview
Copilot reviewed 22 out of 22 changed files in this pull request and generated 6 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull request overview
Copilot reviewed 42 out of 44 changed files in this pull request and generated 13 comments.
Comments suppressed due to low confidence (1)
packages/core/src/agent/agent.ts:277
- Potential race condition: The
screenshotScaleis computed lazily and stored inscreenshotScalePromise. If multiple calls togetScreenshotScalehappen concurrently before the first one completes, all will create new promises and compute the scale multiple times. The second check on line 259 should happen after the promise settles. Consider using a proper once-only pattern or mutex.
private async getScreenshotScale(
rawContext: RawUIContextData,
): Promise<number> {
if (this.screenshotScale !== undefined) {
return this.screenshotScale;
}
if (!this.screenshotScalePromise) {
this.screenshotScalePromise = (async () => {
const pageWidth = rawContext.size?.width;
assert(
pageWidth && pageWidth > 0,
`Invalid page width when computing screenshot scale: ${pageWidth}`,
);
debug('will get image info of base64');
const { width: screenshotWidth } = await imageInfoOfBase64(
rawContext.screenshotBase64,
);
debug('image info of base64 done');
assert(
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
packages/visualizer/src/component/universal-playground/providers/indexeddb-storage-provider.ts
Show resolved
Hide resolved
| const regex = | ||
| /<script type="midscene-image" data-id="([^"]+)">([\s\S]*?)<\/script>/g; | ||
|
|
||
| for (const match of html.matchAll(regex)) { |
Check failure
Code scanning / CodeQL
Polynomial regular expression used on uncontrolled data High
regular expression
library input
|
|
||
| export function parseDumpScript(html: string): string { | ||
| const regex = /<script type="midscene_web_dump"[^>]*>([\s\S]*?)<\/script>/; | ||
| const match = regex.exec(html); |
Check failure
Code scanning / CodeQL
Polynomial regular expression used on uncontrolled data High
regular expression
library input
This
regular expression
library input
7f5bcfd to
e6d1fd0
Compare
Co-authored-by: Copilot <[email protected]>
Co-authored-by: Copilot <[email protected]>
Co-authored-by: Copilot <[email protected]>
…er successful write fix(utils): improve warning messages for screenshot extraction failures
…n and memory optimization
…age after report generation
…h, and improving security
Co-authored-by: Copilot <[email protected]>
…tItem, streamline image reference restoration
…prove screenshot extraction logic
… and streamline image ID usage
…ot refactoring Phase 1 of screenshot/dump refactoring RFC implementation: Storage Layer: - Add StorageProvider interface for pluggable storage backends - Implement MemoryStorage for in-memory storage (tests/simple use) - Implement FileStorage for temp file storage (reduces memory usage) Core Classes: - Add ScreenshotItemNew with async getData() for on-demand image loading - Add ExecutionDumpNew for task execution data management - Add GroupedActionDumpNew for report serialization/deserialization - Add image-restoration utilities for Playground/Extension compatibility - Add HTML parsing/generation utilities for report format These new classes use 'New' suffix and coexist with legacy classes, enabling gradual migration in subsequent PRs.
- Use matchAll() instead of while + exec() for safer regex iteration - Add runtime validation for toJSON() return value in serializeRecorderItem - Add rollback logic to migrateTo() if deletion from old provider fails
e6d1fd0 to
b0b4883
Compare
…merging functionality
b0b4883 to
bf3e40e
Compare
…or navigation in Banner and CTAButtons" This reverts commit 2f0a86d.
241b2fc to
9d19f27
Compare
…and add logTime support
…ate report generation with image support
…nhance image handling in IndexedDBStorageProvider
…tting imports and updating script tag generation
…clearing listeners before cleanup
No description provided.