vodorod/parcer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add scrape screenshot support

Browse Source
This commit is contained in:
Rohit Rajan
2025-12-05 21:58:23 +05:30
parent 6986ba0700
commit dfdcafa5b8
12 changed files with 281 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
server/src/api/record.ts
View File

@@ -16,7 +16,7 @@ import { WorkflowFile } from "maxun-core";
import { addGoogleSheetUpdateTask, googleSheetUpdateTasks, processGoogleSheetUpdates } from "../workflow-management/integrations/gsheet";
import { addAirtableUpdateTask, airtableUpdateTasks, processAirtableUpdates } from "../workflow-management/integrations/airtable";
import { sendWebhook } from "../routes/webhook";
import { convertPageToHTML, convertPageToMarkdown } from '../markdownify/scrape';
import { convertPageToHTML, convertPageToMarkdown, convertPageToScreenshot } from '../markdownify/scrape';
const router = Router();
@@ -689,7 +689,9 @@ async function executeRun(id: string, userId: string, requestedFormats?: string[
// Override if API request defines formats
if (requestedFormats && Array.isArray(requestedFormats) && requestedFormats.length > 0) {
formats = requestedFormats.filter((f): f is 'markdown' | 'html' => ['markdown', 'html'].includes(f));
formats = requestedFormats.filter((f): f is 'markdown' | 'html' | 'screenshot-visible' | 'screenshot-fullpage' =>
['markdown', 'html', 'screenshot-visible', 'screenshot-fullpage'].includes(f)
);
}
await run.update({
@@ -707,6 +709,7 @@ async function executeRun(id: string, userId: string, requestedFormats?: string[
let markdown = '';
let html = '';
const serializableOutput: any = {};
const binaryOutput: any = {};
const SCRAPE_TIMEOUT = 120000;
@@ -728,14 +731,52 @@ async function executeRun(id: string, userId: string, requestedFormats?: string[
serializableOutput.html = [{ content: html }];
}
if (formats.includes("screenshot-visible")) {
const screenshotPromise = convertPageToScreenshot(url, currentPage, false);
const timeoutPromise = new Promise<never>((_, reject) => {
setTimeout(() => reject(new Error(`Screenshot conversion timed out after ${SCRAPE_TIMEOUT/1000}s`)), SCRAPE_TIMEOUT);
});
const screenshotBuffer = await Promise.race([screenshotPromise, timeoutPromise]);
if (!binaryOutput['screenshot-visible']) {
binaryOutput['screenshot-visible'] = {
data: screenshotBuffer.toString('base64'),
mimeType: 'image/png'
};
}
}
if (formats.includes("screenshot-fullpage")) {
const screenshotPromise = convertPageToScreenshot(url, currentPage, true);
const timeoutPromise = new Promise<never>((_, reject) => {
setTimeout(() => reject(new Error(`Screenshot conversion timed out after ${SCRAPE_TIMEOUT/1000}s`)), SCRAPE_TIMEOUT);
});
const screenshotBuffer = await Promise.race([screenshotPromise, timeoutPromise]);
if (!binaryOutput['screenshot-fullpage']) {
binaryOutput['screenshot-fullpage'] = {
data: screenshotBuffer.toString('base64'),
mimeType: 'image/png'
};
}
}
await run.update({
status: 'success',
finishedAt: new Date().toLocaleString(),
log: `${formats.join(', ')} conversion completed successfully`,
serializableOutput,
binaryOutput: {},
binaryOutput,
});
// Upload binary output (screenshots) to MinIO if present
let uploadedBinaryOutput: Record<string, string> = {};
if (Object.keys(binaryOutput).length > 0) {
const binaryOutputService = new BinaryOutputService('maxun-run-screenshots');
uploadedBinaryOutput = await binaryOutputService.uploadAndStoreBinaryOutput(run, binaryOutput);
await run.update({ binaryOutput: uploadedBinaryOutput });
}
logger.log('info', `Markdown robot execution completed for API run ${id}`);
// Push success socket event
@@ -775,6 +816,8 @@ async function executeRun(id: string, userId: string, requestedFormats?: string[
if (formats.includes('markdown')) webhookPayload.markdown = markdown;
if (formats.includes('html')) webhookPayload.html = html;
if (uploadedBinaryOutput['screenshot-visible']) webhookPayload.screenshot_visible = uploadedBinaryOutput['screenshot-visible'];
if (uploadedBinaryOutput['screenshot-fullpage']) webhookPayload.screenshot_fullpage = uploadedBinaryOutput['screenshot-fullpage'];
try {
await sendWebhook(plainRun.robotMetaId, 'run_completed', webhookPayload);

25
server/src/markdownify/scrape.ts
View File

@@ -123,3 +123,28 @@ export async function convertPageToHTML(url: string, page: Page): Promise<string
throw error;
}
}
/**
* Takes a screenshot of the page
* @param url - The URL to screenshot
* @param page - Existing Playwright page instance to use
* @param fullPage - Whether to capture the full scrollable page (true) or just visible viewport (false)
*/
export async function convertPageToScreenshot(url: string, page: Page, fullPage: boolean = false): Promise<Buffer> {
try {
const screenshotType = fullPage ? 'full page' : 'visible viewport';
logger.log('info', `[Scrape] Taking ${screenshotType} screenshot of ${url}`);
await gotoWithFallback(page, url);
const screenshot = await page.screenshot({
type: 'png',
fullPage
});
return screenshot;
} catch (error: any) {
logger.error(`[Scrape] Error during screenshot: ${error.message}`);
throw error;
}
}

2
server/src/models/Robot.ts
View File

@@ -11,7 +11,7 @@ interface RobotMeta {
params: any[];
type?: 'extract' | 'scrape';
url?: string;
formats?: ('markdown' | 'html')[];
formats?: ('markdown' | 'html' | 'screenshot-visible' | 'screenshot-fullpage')[];
}
interface RobotWorkflow {

46
server/src/pgboss-worker.ts
View File

@@ -20,7 +20,7 @@ import { addAirtableUpdateTask, airtableUpdateTasks, processAirtableUpdates } fr
import { io as serverIo } from "./server";
import { sendWebhook } from './routes/webhook';
import { BinaryOutputService } from './storage/mino';
import { convertPageToMarkdown, convertPageToHTML } from './markdownify/scrape';
import { convertPageToMarkdown, convertPageToHTML, convertPageToScreenshot } from './markdownify/scrape';
if (!process.env.DB_USER || !process.env.DB_PASSWORD || !process.env.DB_HOST || !process.env.DB_PORT || !process.env.DB_NAME) {
throw new Error('Failed to start pgboss worker: one or more required environment variables are missing.');
@@ -244,6 +244,7 @@ async function processRunExecution(job: Job<ExecuteRunData>) {
let markdown = '';
let html = '';
const serializableOutput: any = {};
const binaryOutput: any = {};
const SCRAPE_TIMEOUT = 120000;
@@ -265,15 +266,52 @@ async function processRunExecution(job: Job<ExecuteRunData>) {
serializableOutput.html = [{ content: html }];
}
if (formats.includes("screenshot-visible")) {
const screenshotPromise = convertPageToScreenshot(url, currentPage, false);
const timeoutPromise = new Promise<never>((_, reject) => {
setTimeout(() => reject(new Error(`Screenshot conversion timed out after ${SCRAPE_TIMEOUT/1000}s`)), SCRAPE_TIMEOUT);
});
const screenshotBuffer = await Promise.race([screenshotPromise, timeoutPromise]);
if (!binaryOutput['screenshot-visible']) {
binaryOutput['screenshot-visible'] = {
data: screenshotBuffer.toString('base64'),
mimeType: 'image/png'
};
}
}
if (formats.includes("screenshot-fullpage")) {
const screenshotPromise = convertPageToScreenshot(url, currentPage, true);
const timeoutPromise = new Promise<never>((_, reject) => {
setTimeout(() => reject(new Error(`Screenshot conversion timed out after ${SCRAPE_TIMEOUT/1000}s`)), SCRAPE_TIMEOUT);
});
const screenshotBuffer = await Promise.race([screenshotPromise, timeoutPromise]);
if (!binaryOutput['screenshot-fullpage']) {
binaryOutput['screenshot-fullpage'] = {
data: screenshotBuffer.toString('base64'),
mimeType: 'image/png'
};
}
}
// Success update
await run.update({
status: 'success',
finishedAt: new Date().toLocaleString(),
log: `${formats.join(', ').toUpperCase()} conversion completed successfully`,
serializableOutput,
binaryOutput: {},
binaryOutput,
});
let uploadedBinaryOutput: Record<string, string> = {};
if (Object.keys(binaryOutput).length > 0) {
const binaryOutputService = new BinaryOutputService('maxun-run-screenshots');
uploadedBinaryOutput = await binaryOutputService.uploadAndStoreBinaryOutput(run, binaryOutput);
await run.update({ binaryOutput: uploadedBinaryOutput });
}
logger.log('info', `Markdown robot execution completed for run ${data.runId}`);
// Notify sockets
@@ -304,6 +342,8 @@ async function processRunExecution(job: Job<ExecuteRunData>) {
if (formats.includes('markdown')) webhookPayload.markdown = markdown;
if (formats.includes('html')) webhookPayload.html = html;
if (uploadedBinaryOutput['screenshot-visible']) webhookPayload.screenshot_visible = uploadedBinaryOutput['screenshot-visible'];
if (uploadedBinaryOutput['screenshot-fullpage']) webhookPayload.screenshot_fullpage = uploadedBinaryOutput['screenshot-fullpage'];
await sendWebhook(plainRun.robotMetaId, 'run_completed', webhookPayload);
logger.log('info', `Webhooks sent successfully for markdown robot run ${data.runId}`);
@@ -427,7 +467,7 @@ async function processRunExecution(job: Job<ExecuteRunData>) {
logger.log('info', `Workflow execution completed for run ${data.runId}`);
const binaryOutputService = new BinaryOutputService('maxuncloud-run-screenshots');
const binaryOutputService = new BinaryOutputService('maxun-run-screenshots');
const uploadedBinaryOutput = await binaryOutputService.uploadAndStoreBinaryOutput(
run,
interpretationInfo.binaryOutput

2
server/src/routes/storage.ts
View File

@@ -456,7 +456,7 @@ router.post('/recordings/scrape', requireSignIn, async (req: AuthenticatedReques
}
// Validate format
const validFormats = ['markdown', 'html'];
const validFormats = ['markdown', 'html', 'screenshot-visible', 'screenshot-fullpage'];
if (!Array.isArray(formats) || formats.length === 0) {
return res.status(400).json({ error: 'At least one output format must be selected.' });

45
server/src/workflow-management/scheduler/index.ts
View File

@@ -13,7 +13,7 @@ import { WorkflowFile } from "maxun-core";
import { Page } from "playwright-core";
import { sendWebhook } from "../../routes/webhook";
import { addAirtableUpdateTask, airtableUpdateTasks, processAirtableUpdates } from "../integrations/airtable";
import { convertPageToMarkdown, convertPageToHTML } from "../../markdownify/scrape";
import { convertPageToMarkdown, convertPageToHTML, convertPageToScreenshot } from "../../markdownify/scrape";
async function createWorkflowAndStoreMetadata(id: string, userId: string) {
try {
@@ -268,6 +268,7 @@ async function executeRun(id: string, userId: string) {
let markdown = '';
let html = '';
const serializableOutput: any = {};
const binaryOutput: any = {};
const SCRAPE_TIMEOUT = 120000;
@@ -290,14 +291,52 @@ async function executeRun(id: string, userId: string) {
serializableOutput.html = [{ content: html }];
}
if (formats.includes("screenshot-visible")) {
const screenshotPromise = convertPageToScreenshot(url, currentPage, false);
const timeoutPromise = new Promise<never>((_, reject) => {
setTimeout(() => reject(new Error(`Screenshot conversion timed out after ${SCRAPE_TIMEOUT/1000}s`)), SCRAPE_TIMEOUT);
});
const screenshotBuffer = await Promise.race([screenshotPromise, timeoutPromise]);
if (!binaryOutput['screenshot-visible']) {
binaryOutput['screenshot-visible'] = {
data: screenshotBuffer.toString('base64'),
mimeType: 'image/png'
};
}
}
// Screenshot - full page
if (formats.includes("screenshot-fullpage")) {
const screenshotPromise = convertPageToScreenshot(url, currentPage, true);
const timeoutPromise = new Promise<never>((_, reject) => {
setTimeout(() => reject(new Error(`Screenshot conversion timed out after ${SCRAPE_TIMEOUT/1000}s`)), SCRAPE_TIMEOUT);
});
const screenshotBuffer = await Promise.race([screenshotPromise, timeoutPromise]);
if (!binaryOutput['screenshot-fullpage']) {
binaryOutput['screenshot-fullpage'] = {
data: screenshotBuffer.toString('base64'),
mimeType: 'image/png'
};
}
}
await run.update({
status: 'success',
finishedAt: new Date().toLocaleString(),
log: `${formats.join(', ')} conversion completed successfully`,
serializableOutput,
binaryOutput: {},
binaryOutput,
});
let uploadedBinaryOutput: Record<string, string> = {};
if (Object.keys(binaryOutput).length > 0) {
const binaryOutputService = new BinaryOutputService('maxun-run-screenshots');
uploadedBinaryOutput = await binaryOutputService.uploadAndStoreBinaryOutput(run, binaryOutput);
await run.update({ binaryOutput: uploadedBinaryOutput });
}
logger.log('info', `Markdown robot execution completed for scheduled run ${id}`);
// Run-completed socket notifications
@@ -335,6 +374,8 @@ async function executeRun(id: string, userId: string) {
if (formats.includes('markdown')) webhookPayload.markdown = markdown;
if (formats.includes('html')) webhookPayload.html = html;
if (uploadedBinaryOutput['screenshot-visible']) webhookPayload.screenshot_visible = uploadedBinaryOutput['screenshot-visible'];
if (uploadedBinaryOutput['screenshot-fullpage']) webhookPayload.screenshot_fullpage = uploadedBinaryOutput['screenshot-fullpage'];
try {
await sendWebhook(plainRun.robotMetaId, 'run_completed', webhookPayload);

90
src/components/robot/pages/RobotCreate.tsx
View File

@@ -16,10 +16,10 @@ import {
CardContent,
Tabs,
Tab,
RadioGroup,
Radio,
FormControl,
FormLabel
Select,
MenuItem,
InputLabel
} from '@mui/material';
import { ArrowBack, PlayCircleOutline, Article, Code, Description } from '@mui/icons-material';
import { useGlobalInfoStore } from '../../../context/globalInfo';
@@ -376,7 +376,7 @@ const RobotCreate: React.FC = () => {
/>
<Typography variant="body2" color="text.secondary" mb={3}>
Turn websites into LLM-ready Markdown & clean HTML for AI apps.
Turn websites into LLM-ready Markdown, clean HTML, or screenshots for AI apps.
</Typography>
<Box sx={{ width: '100%', maxWidth: 700, mb: 2 }}>
@@ -399,40 +399,52 @@ const RobotCreate: React.FC = () => {
sx={{ mb: 2 }}
/>
<FormControl component="fieldset" sx={{ width: '100%', textAlign: 'left' }}>
<p>Output Format (Select at least one)</p>
<FormControlLabel
control={
<Checkbox
checked={outputFormats.includes('markdown')}
onChange={(e) => {
if (e.target.checked) {
setOutputFormats([...outputFormats, 'markdown']);
} else {
setOutputFormats(outputFormats.filter(f => f !== 'markdown'));
}
}}
/>
}
label="Markdown"
/>
<FormControlLabel
control={
<Checkbox
checked={outputFormats.includes('html')}
onChange={(e) => {
if (e.target.checked) {
setOutputFormats([...outputFormats, 'html']);
} else {
setOutputFormats(outputFormats.filter(f => f !== 'html'));
}
}}
/>
}
label="HTML"
/>
</FormControl>
<Box sx={{ width: '100%', display: 'flex', justifyContent: 'flex-start' }}>
<FormControl sx={{ mb: 2, width: '300px' }}>
<InputLabel id="output-formats-label">Output Formats *</InputLabel>
<Select
labelId="output-formats-label"
id="output-formats"
multiple
value={outputFormats}
label="Output Formats *"
onChange={(e) => {
const value = typeof e.target.value === 'string' ? e.target.value.split(',') : e.target.value;
setOutputFormats(value);
}}
renderValue={(selected) => {
if (selected.length === 0) {
return <em style={{ color: '#999' }}>Select formats</em>;
}
return `${selected.length} format${selected.length > 1 ? 's' : ''} selected`;
}}
MenuProps={{
PaperProps: {
style: {
maxHeight: 300,
},
},
}}
>
<MenuItem value="markdown">
<Checkbox checked={outputFormats.includes('markdown')} />
Markdown
</MenuItem>
<MenuItem value="html">
<Checkbox checked={outputFormats.includes('html')} />
HTML
</MenuItem>
<MenuItem value="screenshot-visible">
<Checkbox checked={outputFormats.includes('screenshot-visible')} />
Screenshot - Visible Viewport
</MenuItem>
<MenuItem value="screenshot-fullpage">
<Checkbox checked={outputFormats.includes('screenshot-fullpage')} />
Screenshot - Full Page
</MenuItem>
</Select>
</FormControl>
</Box>
</Box>
<Button
@@ -461,7 +473,7 @@ const RobotCreate: React.FC = () => {
notify('success', `${scrapeRobotName} created successfully!`);
navigate('/robots');
} else {
notify('error', 'Failed to create markdown robot');
notify('error', 'Failed to create scrape robot');
}
}}
disabled={!url.trim() || !scrapeRobotName.trim() || outputFormats.length === 0 || isLoading}

2
src/components/robot/pages/RobotDuplicatePage.tsx
View File

@@ -26,7 +26,7 @@ interface RobotMeta {
params: any[];
type?: 'extract' | 'scrape';
url?: string;
formats?: ('markdown' | 'html')[];
formats?: ('markdown' | 'html' | 'screenshot-visible' | 'screenshot-fullpage')[];
}
interface RobotWorkflow {

2
src/components/robot/pages/RobotEditPage.tsx
View File

@@ -26,7 +26,7 @@ interface RobotMeta {
params: any[];
type?: 'extract' | 'scrape';
url?: string;
formats?: ('markdown' | 'html')[];
formats?: ('markdown' | 'html' | 'screenshot-visible' | 'screenshot-fullpage')[];
}
interface RobotWorkflow {

2
src/components/robot/pages/RobotSettingsPage.tsx
View File

@@ -18,7 +18,7 @@ interface RobotMeta {
params: any[];
type?: 'extract' | 'scrape';
url?: string;
formats?: ('markdown' | 'html')[];
formats?: ('markdown' | 'html' | 'screenshot-visible' | 'screenshot-fullpage')[];
}
interface RobotWorkflow {

68
src/components/run/RunContent.tsx
View File

@@ -142,9 +142,12 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
// Legacy unnamed screenshots → Screenshot 1, Screenshot 2...
normalizedScreenshotKeys = rawKeys.map((_, index) => `Screenshot ${index + 1}`);
} else {
// Same rule as captured lists: if name missing or generic, auto-label
normalizedScreenshotKeys = rawKeys.map((key, index) => {
if (!key || key.toLowerCase().includes("screenshot")) {
if (key === 'screenshot-visible') {
return 'Screenshot (Visible)';
} else if (key === 'screenshot-fullpage') {
return 'Screenshot (Full Page)';
} else if (!key || key.toLowerCase().includes("screenshot")) {
return `Screenshot ${index + 1}`;
}
return key;
@@ -739,6 +742,67 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
</AccordionDetails>
</Accordion>
)}
{hasScreenshots && (
<Accordion defaultExpanded sx={{ mb: 2 }}>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<Typography variant='h6'>
{t('run_content.captured_screenshot.title', 'Captured Screenshots')}
</Typography>
</Box>
</AccordionSummary>
<AccordionDetails>
{screenshotKeys.length > 1 && (
<Box
sx={{
display: 'flex',
borderBottom: '1px solid',
borderColor: 'divider',
mb: 2,
}}
>
{screenshotKeys.map((key, idx) => (
<Box
key={key}
onClick={() => setCurrentScreenshotIndex(idx)}
sx={{
px: 3,
py: 1,
cursor: 'pointer',
backgroundColor:
currentScreenshotIndex === idx
? (theme) => theme.palette.mode === 'dark'
? '#121111ff'
: '#e9ecef'
: 'transparent',
borderBottom: currentScreenshotIndex === idx ? '3px solid #FF00C3' : 'none',
color: (theme) => theme.palette.mode === 'dark' ? '#fff' : '#000',
}}
>
{key}
</Box>
))}
</Box>
)}
<Box sx={{ mt: 1 }}>
{screenshotKeys.length > 0 && (
<img
src={row.binaryOutput[screenshotKeyMap[screenshotKeys[currentScreenshotIndex]]]}
alt={`Screenshot ${screenshotKeys[currentScreenshotIndex]}`}
style={{
maxWidth: '100%',
height: 'auto',
border: '1px solid #e0e0e0',
borderRadius: '4px'
}}
/>
)}
</Box>
</AccordionDetails>
</Accordion>
)}
</>
) : (
// Extract robot output

2
src/context/globalInfo.tsx
View File

@@ -29,7 +29,7 @@ interface RobotMeta {
params: any[];
type?: 'extract' | 'scrape';
url?: string;
formats?: ('markdown' | 'html')[];
formats?: ('markdown' | 'html' | 'screenshot-visible' | 'screenshot-fullpage')[];
}
interface RobotWorkflow {