diff --git a/src/modules/browse/browse.client.ts b/src/modules/browse/browse.client.ts index e770d98362..533a539c96 100644 --- a/src/modules/browse/browse.client.ts +++ b/src/modules/browse/browse.client.ts @@ -28,25 +28,12 @@ export async function callBrowseFetchPage(url: string): Promise { ...(!!clientWssEndpoint && { wssEndpoint: clientWssEndpoint }), }, subjects: [{ url }], - screenshotWidth: 512, - screenshotHeight: 512, }); if (results.objects.length !== 1) return `Browsing error: expected 1 result, got ${results.objects.length}`; const firstResult = results.objects[0]; - - // DEBUG: if there's a screenshot, append it to the dom - /*if (firstResult.screenshot) { - - const img = document.createElement('img'); - img.src = firstResult.screenshot.imageDataUrl; - img.style.width = `${firstResult.screenshot.width}px`; - img.style.height = `${firstResult.screenshot.height}px`; - document.body.appendChild(img); - }*/ - return !firstResult.error ? firstResult.content : `Browsing service error: ${JSON.stringify(firstResult)}`; } catch (error: any) { diff --git a/src/modules/browse/browse.router.ts b/src/modules/browse/browse.router.ts index a097a9e4b4..83fa988bb7 100644 --- a/src/modules/browse/browse.router.ts +++ b/src/modules/browse/browse.router.ts @@ -1,6 +1,6 @@ import { z } from 'zod'; import { TRPCError } from '@trpc/server'; -import { connect, Page, ScreenshotOptions, TimeoutError } from '@cloudflare/puppeteer'; +import { connect, Page, TimeoutError } from '@cloudflare/puppeteer'; import { createTRPCRouter, publicProcedure } from '~/server/api/trpc.server'; import { env } from '~/server/env.mjs'; @@ -22,8 +22,6 @@ const fetchPageInputSchema = z.object({ subjects: z.array(z.object({ url: z.string().url(), })), - screenshotWidth: z.number().optional(), - screenshotHeight: z.number().optional(), }); @@ -35,8 +33,7 @@ const fetchPageWorkerOutputSchema = z.object({ error: z.string().optional(), stopReason: z.enum(['end', 'timeout', 'error']), screenshot: z.object({ - imageDataUrl: z.string().startsWith('data:image/'), - mimeType: z.string().startsWith('image/'), + base64: z.string(), width: z.number(), height: z.number(), }).optional(), @@ -52,12 +49,12 @@ export const browseRouter = createTRPCRouter({ fetchPages: publicProcedure .input(fetchPageInputSchema) .output(fetchPagesOutputSchema) - .mutation(async ({ input: { access, subjects, screenshotHeight, screenshotWidth } }) => { + .mutation(async ({ input: { access, subjects } }) => { const results: FetchPageWorkerOutputSchema[] = []; for (const subject of subjects) { try { - results.push(await workerPuppeteer(access, subject.url, screenshotWidth, screenshotHeight)); + results.push(await workerPuppeteer(access, subject.url)); } catch (error: any) { results.push({ url: subject.url, @@ -77,7 +74,7 @@ export const browseRouter = createTRPCRouter({ type BrowseAccessSchema = z.infer; type FetchPageWorkerOutputSchema = z.infer; -async function workerPuppeteer(access: BrowseAccessSchema, targetUrl: string, screenshotWidth?: number, screenshotHeight?: number): Promise { +async function workerPuppeteer(access: BrowseAccessSchema, targetUrl: string): Promise { // access const browserWSEndpoint = (access.wssEndpoint || env.PUPPETEER_WSS_ENDPOINT || '').trim(); @@ -137,25 +134,21 @@ async function workerPuppeteer(access: BrowseAccessSchema, targetUrl: string, sc // get a screenshot of the page try { - if (screenshotWidth && screenshotHeight) { - const width = screenshotWidth; - const height = screenshotHeight; - const scale = 0.5; // 10% + const width = 100; + const height = 100; + const scale = 0.1; // 10% - await page.setViewport({ width: width / scale, height: height / scale, deviceScaleFactor: scale }); + await page.setViewport({ width: width / scale, height: height / scale, deviceScaleFactor: scale }); - const imageType: ScreenshotOptions['type'] = 'webp'; - const mimeType = `image/${imageType}`; - - const dataString = await page.screenshot({ - type: imageType, - encoding: 'base64', + result.screenshot = { + base64: await page.screenshot({ + type: 'webp', clip: { x: 0, y: 0, width: width / scale, height: height / scale }, - quality: undefined, - }) as string; - - result.screenshot = { imageDataUrl: `data:${mimeType};base64,${dataString}`, mimeType, width, height }; - } + encoding: 'base64', + }) as string, + width, + height, + }; } catch (error: any) { console.error('workerPuppeteer: page.screenshot', error); }