Add playwrigt vide render

Dockerfile.build.lean

@@ -84,6 +84,7 @@ RUN node -e "console.log('Node version:', process.version)" && \
     node -e "require('remotion'); console.log('Remotion OK')" && \
     ls -la node_modules/.bin/ | head -20
 
+
 # -----------------------------------------------------------------------------
 # final production image
 # -----------------------------------------------------------------------------
@@ -100,13 +101,17 @@ WORKDIR /app
 COPY --chown=1000 . ./
 COPY --chown=1000 start.sh /app/start.sh
 RUN chmod +x /app/start.sh
+    
+RUN npm install playwright
 RUN npm i
+RUN npx playwright install
 
 RUN echo "Verifying installation..." && \
     node -e "console.log('Final verification - Node:', process.version)" && \
     npm list --depth=0 | head -10 || true
 
 EXPOSE 7860 3000 8083
+
 CMD ["sh", "/app/start.sh"]
 
 # build: docker build -f Dockerfile.build.lean -t semibit/render-farm:lean .

package-lock.json

@@ -44,6 +44,7 @@
 				"path": "^0.12.7",
 				"pdfkit": "^0.15.0",
 				"playwright": "^1.60.0",
+				"playwright-recorder-plus": "^0.1.3",
 				"puppeteer": "^21.3.6",
 				"react": "^18.0.0",
 				"react-dom": "^18.0.0",
@@ -2757,6 +2758,50 @@
 				"postcss-selector-parser": "^6.0.10"
 			}
 		},
+		"node_modules/@derhuerst/http-basic": {
+			"version": "8.2.4",
+			"resolved": "https://registry.npmjs.org/@derhuerst/http-basic/-/http-basic-8.2.4.tgz",
+			"integrity": "sha512-F9rL9k9Xjf5blCz8HsJRO4diy111cayL2vkY2XE4r4t3n0yPXVYy3KD3nJ1qbrSn9743UWSXH4IwuCa/HWlGFw==",
+			"license": "MIT",
+			"dependencies": {
+				"caseless": "^0.12.0",
+				"concat-stream": "^2.0.0",
+				"http-response-object": "^3.0.1",
+				"parse-cache-control": "^1.0.1"
+			},
+			"engines": {
+				"node": ">=6.0.0"
+			}
+		},
+		"node_modules/@derhuerst/http-basic/node_modules/concat-stream": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-2.0.0.tgz",
+			"integrity": "sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==",
+			"engines": [
+				"node >= 6.0"
+			],
+			"license": "MIT",
+			"dependencies": {
+				"buffer-from": "^1.0.0",
+				"inherits": "^2.0.3",
+				"readable-stream": "^3.0.2",
+				"typedarray": "^0.0.6"
+			}
+		},
+		"node_modules/@derhuerst/http-basic/node_modules/readable-stream": {
+			"version": "3.6.2",
+			"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+			"integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+			"license": "MIT",
+			"dependencies": {
+				"inherits": "^2.0.3",
+				"string_decoder": "^1.1.1",
+				"util-deprecate": "^1.0.1"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
 		"node_modules/@emnapi/runtime": {
 			"version": "1.3.1",
 			"resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.3.1.tgz",
@@ -7921,6 +7966,15 @@
 				"url": "https://github.com/fb55/entities?sponsor=1"
 			}
 		},
+		"node_modules/env-paths": {
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
+			"integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/error-ex": {
 			"version": "1.3.2",
 			"resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -8779,6 +8833,22 @@
 				"node": ">= 4.0.0"
 			}
 		},
+		"node_modules/ffmpeg-static": {
+			"version": "5.3.0",
+			"resolved": "https://registry.npmjs.org/ffmpeg-static/-/ffmpeg-static-5.3.0.tgz",
+			"integrity": "sha512-H+K6sW6TiIX6VGend0KQwthe+kaceeH/luE8dIZyOP35ik7ahYojDuqlTV1bOrtEwl01sy2HFNGQfi5IDJvotg==",
+			"hasInstallScript": true,
+			"license": "GPL-3.0-or-later",
+			"dependencies": {
+				"@derhuerst/http-basic": "^8.2.0",
+				"env-paths": "^2.2.0",
+				"https-proxy-agent": "^5.0.0",
+				"progress": "^2.0.3"
+			},
+			"engines": {
+				"node": ">=16"
+			}
+		},
 		"node_modules/file-entry-cache": {
 			"version": "8.0.0",
 			"resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -9712,6 +9782,21 @@
 				"node": ">= 6"
 			}
 		},
+		"node_modules/http-response-object": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/http-response-object/-/http-response-object-3.0.2.tgz",
+			"integrity": "sha512-bqX0XTF6fnXSQcEJ2Iuyr75yVakyjIDCqroJQ/aHfSdlM743Cwqoi2nDYMzLGWUcuTWGWy8AAvOKXTfiv6q9RA==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/node": "^10.0.3"
+			}
+		},
+		"node_modules/http-response-object/node_modules/@types/node": {
+			"version": "10.17.60",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-10.17.60.tgz",
+			"integrity": "sha512-F0KIgDJfy2nA3zMLmWGKxcH2ZVEtCZXHHdOQs2gSaQ27+lNeEfGxzkIw90aXswATX7AZ33tahPbzy6KAfUreVw==",
+			"license": "MIT"
+		},
 		"node_modules/http-signature": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
@@ -14395,6 +14480,11 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/parse-cache-control": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/parse-cache-control/-/parse-cache-control-1.0.1.tgz",
+			"integrity": "sha512-60zvsJReQPX5/QP0Kzfd/VrpjScIQ7SHBW6bFCYfEP+fp0Eppr1SHhIO5nd1PjZtvclzSzES9D/p5nFJurwfWg=="
+		},
 		"node_modules/parse-json": {
 			"version": "5.2.0",
 			"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
@@ -14588,6 +14678,26 @@
 				"node": ">=18"
 			}
 		},
+		"node_modules/playwright-recorder-plus": {
+			"version": "0.1.3",
+			"resolved": "https://registry.npmjs.org/playwright-recorder-plus/-/playwright-recorder-plus-0.1.3.tgz",
+			"integrity": "sha512-s78vcWbWTiKLGE0omxQKG2uKYRf+wUWU7CU6hAw+Tgt637KGsd60+KAZNILHRILtMdy2B8GqLZaNfOB29cSmVg==",
+			"license": "MIT",
+			"dependencies": {
+				"ffmpeg-static": "^5.3.0"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"peerDependencies": {
+				"playwright-core": "^1.59.0"
+			},
+			"peerDependenciesMeta": {
+				"playwright-core": {
+					"optional": false
+				}
+			}
+		},
 		"node_modules/pluralize": {
 			"version": "8.0.0",
 			"resolved": "https://registry.npmjs.org/pluralize/-/pluralize-8.0.0.tgz",
@@ -19760,6 +19870,40 @@
 			"integrity": "sha512-+OJ9konv95ClSTOJCmMZqpd5+YGsB2S+x6w3E1oaM8UuR5j8nTNHYSz8c9BEPGDOCMQYIEEGlVPj/VY64iTbGw==",
 			"requires": {}
 		},
+		"@derhuerst/http-basic": {
+			"version": "8.2.4",
+			"resolved": "https://registry.npmjs.org/@derhuerst/http-basic/-/http-basic-8.2.4.tgz",
+			"integrity": "sha512-F9rL9k9Xjf5blCz8HsJRO4diy111cayL2vkY2XE4r4t3n0yPXVYy3KD3nJ1qbrSn9743UWSXH4IwuCa/HWlGFw==",
+			"requires": {
+				"caseless": "^0.12.0",
+				"concat-stream": "^2.0.0",
+				"http-response-object": "^3.0.1",
+				"parse-cache-control": "^1.0.1"
+			},
+			"dependencies": {
+				"concat-stream": {
+					"version": "2.0.0",
+					"resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-2.0.0.tgz",
+					"integrity": "sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==",
+					"requires": {
+						"buffer-from": "^1.0.0",
+						"inherits": "^2.0.3",
+						"readable-stream": "^3.0.2",
+						"typedarray": "^0.0.6"
+					}
+				},
+				"readable-stream": {
+					"version": "3.6.2",
+					"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+					"integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+					"requires": {
+						"inherits": "^2.0.3",
+						"string_decoder": "^1.1.1",
+						"util-deprecate": "^1.0.1"
+					}
+				}
+			}
+		},
 		"@emnapi/runtime": {
 			"version": "1.3.1",
 			"resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.3.1.tgz",
@@ -23484,6 +23628,11 @@
 			"integrity": "sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==",
 			"optional": true
 		},
+		"env-paths": {
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
+			"integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A=="
+		},
 		"error-ex": {
 			"version": "1.3.2",
 			"resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -24124,6 +24273,17 @@
 				}
 			}
 		},
+		"ffmpeg-static": {
+			"version": "5.3.0",
+			"resolved": "https://registry.npmjs.org/ffmpeg-static/-/ffmpeg-static-5.3.0.tgz",
+			"integrity": "sha512-H+K6sW6TiIX6VGend0KQwthe+kaceeH/luE8dIZyOP35ik7ahYojDuqlTV1bOrtEwl01sy2HFNGQfi5IDJvotg==",
+			"requires": {
+				"@derhuerst/http-basic": "^8.2.0",
+				"env-paths": "^2.2.0",
+				"https-proxy-agent": "^5.0.0",
+				"progress": "^2.0.3"
+			}
+		},
 		"file-entry-cache": {
 			"version": "8.0.0",
 			"resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -24815,6 +24975,21 @@
 				"debug": "4"
 			}
 		},
+		"http-response-object": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/http-response-object/-/http-response-object-3.0.2.tgz",
+			"integrity": "sha512-bqX0XTF6fnXSQcEJ2Iuyr75yVakyjIDCqroJQ/aHfSdlM743Cwqoi2nDYMzLGWUcuTWGWy8AAvOKXTfiv6q9RA==",
+			"requires": {
+				"@types/node": "^10.0.3"
+			},
+			"dependencies": {
+				"@types/node": {
+					"version": "10.17.60",
+					"resolved": "https://registry.npmjs.org/@types/node/-/node-10.17.60.tgz",
+					"integrity": "sha512-F0KIgDJfy2nA3zMLmWGKxcH2ZVEtCZXHHdOQs2gSaQ27+lNeEfGxzkIw90aXswATX7AZ33tahPbzy6KAfUreVw=="
+				}
+			}
+		},
 		"http-signature": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
@@ -27984,6 +28159,11 @@
 				"callsites": "^3.0.0"
 			}
 		},
+		"parse-cache-control": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/parse-cache-control/-/parse-cache-control-1.0.1.tgz",
+			"integrity": "sha512-60zvsJReQPX5/QP0Kzfd/VrpjScIQ7SHBW6bFCYfEP+fp0Eppr1SHhIO5nd1PjZtvclzSzES9D/p5nFJurwfWg=="
+		},
 		"parse-json": {
 			"version": "5.2.0",
 			"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
@@ -28117,6 +28297,14 @@
 			"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.60.0.tgz",
 			"integrity": "sha512-9bW6zvX/m0lEbgTKJ6YppOKx8H3VOPBMOCFh2irXFOT4BbHgrx5hPjwJYLT40Lu+4qtD36qKc/Hn56StUW57IA=="
 		},
+		"playwright-recorder-plus": {
+			"version": "0.1.3",
+			"resolved": "https://registry.npmjs.org/playwright-recorder-plus/-/playwright-recorder-plus-0.1.3.tgz",
+			"integrity": "sha512-s78vcWbWTiKLGE0omxQKG2uKYRf+wUWU7CU6hAw+Tgt637KGsd60+KAZNILHRILtMdy2B8GqLZaNfOB29cSmVg==",
+			"requires": {
+				"ffmpeg-static": "^5.3.0"
+			}
+		},
 		"pluralize": {
 			"version": "8.0.0",
 			"resolved": "https://registry.npmjs.org/pluralize/-/pluralize-8.0.0.tgz",

package.json

@@ -84,6 +84,7 @@
 		"path": "^0.12.7",
 		"pdfkit": "^0.15.0",
 		"playwright": "^1.60.0",
+		"playwright-recorder-plus": "^0.1.3",
 		"puppeteer": "^21.3.6",
 		"react": "^18.0.0",
 		"react-dom": "^18.0.0",

utils/AvatarRender.js

@@ -85,7 +85,7 @@ export class AvatarRenderer {
         const bubbledFile = path.join(outDir, `${jobId}_section${i}_bubbled.mp4`);
         try {
           onLog && onLog(`Applying ${section.bubbles.length} bubble(s) to section ${i}...\n`);
-          await Bubble.makeBubble(sectionVideo, section.bubbles, bubbledFile, onLog);
+          await Bubble.makeBubble(sectionVideo, section.bubbles, bubbledFile, onLog, undefined, undefined, originalManuscript.meta);
           tempFiles.push(bubbledFile);
           sourceAfterBubbles = bubbledFile;
         } catch (e) {

utils/HtmlRender.js

@@ -1,4 +1,5 @@
 import { chromium } from 'playwright';
+import { attachRecorder } from 'playwright-recorder-plus';
 import fs from 'fs';
 import path from 'path';
 
@@ -33,30 +34,40 @@ export class HtmlRender {
     if (!this.browser) {
       this.browser = await chromium.launch();
     }
-    const context = await this.browser.newContext({
-      recordVideo: {
-        dir: path.dirname(outFilePath),
-        size: options.viewport || { width: 1080, height: 1920 }
+    const context = await this.browser.newContext();
+    const page = await context.newPage();
+    
+    const vw = (options.viewport && options.viewport.width) || 1080;
+    const vh = (options.viewport && options.viewport.height) || 1920;
+    await page.setViewportSize({ width: vw, height: vh });
+
+    // Attach high-quality recorder
+    const recorder = await attachRecorder(page, {
+      path: outFilePath,
+      fps: options.fps || 30,
+      ffmpegOptions: {
+        // Ensuring high quality for the render farm
+        crf: 18,
+        preset: 'veryfast'
       }
     });
-    const page = await context.newPage();
-    if (options.viewport) await page.setViewportSize(options.viewport);
 
     if (html) {
       await page.setContent(html, { waitUntil: 'networkidle' });
     } else if (htmlFile) {
-      await page.goto(`file://${htmlFile}`, { waitUntil: 'networkidle' });
+      const absPath = path.isAbsolute(htmlFile) ? htmlFile : path.join(process.cwd(), htmlFile);
+      await page.goto(`file://${absPath}`, { waitUntil: 'networkidle' });
     }
 
+    // Wait for the requested duration
     await page.waitForTimeout(durationSec * 1000);
+
+    // Stop and finalize
+    await recorder.stop();
+    await recorder.finalized;
+
     await page.close();
     await context.close();
-
-    const videoPath = await page.video().path();
-    if (fs.existsSync(videoPath)) {
-      if (fs.existsSync(outFilePath)) fs.unlinkSync(outFilePath);
-      fs.renameSync(videoPath, outFilePath);
-    }
   }
 
   async close() {

utils/bubble/Bubble.js

@@ -159,7 +159,7 @@ class BubbleMaker {
    * @param {boolean} detachAudio - kept for API compatibility; audio is always handled separately now
    * @param {boolean} [normalizeAudio] - unused (normalize=0 is always applied); kept for API compatibility
    */
-  async makeBubble(videoPath, bubble, outputPath, onLog, detachAudio = true, normalizeAudio) {
+  async makeBubble(videoPath, bubble, outputPath, onLog, detachAudio = true, normalizeAudio, manuscriptMeta) {
     // --- 1. Prepare: strip audio from source so all visual rendering is on a silent video ---
     const meta0 = await FFMpegUtils.getMediaMetadata(videoPath);
     const originalHasAudio = !!(meta0 && meta0.audio);
@@ -172,7 +172,7 @@ class BubbleMaker {
 
     // --- 2. Render all visual overlays onto the silent video (no audio filters needed) ---
     const visualOutput = tempPath('visual', 'mp4');
-    await this._renderVisuals(silentVideo, bubbleArr, visualOutput, onLog);
+    await this._renderVisuals(silentVideo, bubbleArr, visualOutput, onLog, manuscriptMeta);
 
     // --- 3. Build mixed audio (original + SFX) in one shot ---
     let finalAudioPath = null;
@@ -221,17 +221,17 @@ class BubbleMaker {
    * Handles both array (batch or sequential) and single-bubble cases.
    * No audio filters are emitted here at all.
    */
-  async _renderVisuals(silentVideo, bubbleArr, outputPath, onLog) {
+  async _renderVisuals(silentVideo, bubbleArr, outputPath, onLog, manuscriptMeta) {
     // Expand templates for each bubble
     const meta = await FFMpegUtils.getMediaMetadata(silentVideo);
     const vw = meta.video.width;
     const vh = meta.video.height;
     bubbleArr.forEach(b => Object.assign(b, this._applyTemplate(b, vw, vh)));
     const expandedBubbles = bubbleArr;
-    const hasHtml = expandedBubbles.some(b => b.bubbleHtml && b.bubbleHtml.text);
+    const hasHtml = expandedBubbles.some(b => b.bubbleHtml && (b.bubbleHtml.text || b.bubbleHtml.path));
 
     if (hasHtml) {
-      await this._renderHtmlBatch(silentVideo, expandedBubbles, outputPath, onLog, meta);
+      await this._renderHtmlBatch(silentVideo, expandedBubbles, outputPath, onLog, meta, manuscriptMeta);
     }
 
     const hasText = expandedBubbles.some(b => b.bubbleText && b.bubbleText.text);
@@ -258,7 +258,7 @@ class BubbleMaker {
     // All media bubbles — try to batch into one ffmpeg pass
     if (hasMedia) {
       try {
-        await this._renderMediaBatch(silentVideo, expandedBubbles, outputPath, onLog, meta);
+        await this._renderMediaBatch(silentVideo, expandedBubbles, outputPath, onLog, meta, manuscriptMeta);
         return;
       } catch (err) {
         onLog && onLog('Batch media render failed, falling back to sequential: ' + err);
@@ -316,8 +316,8 @@ class BubbleMaker {
     return b;
   }
 
-  async _renderHtmlBatch(silentVideo, bubbles, outputPath, onLog, meta) {
-    const htmlBubbles = bubbles.filter(b => b.htmlFile || (b.bubbleHtml && b.bubbleHtml.text));
+  async _renderHtmlBatch(silentVideo, bubbles, outputPath, onLog, meta, manuscriptMeta) {
+    const htmlBubbles = bubbles.filter(b => (b.bubbleHtml && (b.bubbleHtml.path || b.bubbleHtml.text)));
     if (htmlBubbles.length === 0) return;
 
     const htmlRenderer = new HtmlRender();
@@ -330,13 +330,14 @@ class BubbleMaker {
 
       for (const b of htmlBubbles) {
         const isVideo = typeof b.durationSec === 'number' && b.durationSec > 0;
-        const outPath = tempPath('html_bubble', isVideo ? 'mp4' : 'png');
+        const outPath = path.join('public', `bubble_${htmlBubbles.indexOf(b)}.` + (isVideo ? 'mp4' : 'png'));
 
         let finalHtml = null;
         let finalFile = null;
 
-        if (b.htmlFile) {
-          finalFile = path.isAbsolute(b.htmlFile) ? b.htmlFile : path.join(process.cwd(), b.htmlFile);
+        const htmlPath = b.htmlFile || (b.bubbleHtml && b.bubbleHtml.path);
+        if (htmlPath) {
+          finalFile = path.isAbsolute(htmlPath) ? htmlPath : path.join(process.cwd(), htmlPath);
         } else {
           const html = b.bubbleHtml.text;
           // Wrap HTML to ensure transparent background and full viewport coverage
@@ -364,7 +365,7 @@ class BubbleMaker {
 
         if (isVideo) {
           onLog && onLog(`Rendering HTML bubble to video ${outPath} for ${b.durationSec}s`);
-          await htmlRenderer.renderVideo(finalHtml, finalFile, outPath, b.durationSec, { viewport: { width: vw, height: vh } });
+          await htmlRenderer.renderVideo(finalHtml, finalFile, outPath, b.durationSec, { fps: manuscriptMeta.fps, viewport: { width: vw, height: vh } });
         } else {
           onLog && onLog(`Rendering HTML bubble to image ${outPath}`);
           await htmlRenderer.renderFrame(finalHtml, finalFile, outPath, { omitBackground: true });
@@ -389,7 +390,7 @@ class BubbleMaker {
   /**
    * Render multiple media (non-text) bubbles in a single ffmpeg pass (no audio).
    */
-  async _renderMediaBatch(silentVideo, bubbles, outputPath, onLog, meta) {
+  async _renderMediaBatch(silentVideo, bubbles, outputPath, onLog, meta, manuscriptMeta) {
     const vw = meta.video.width;
     const vh = meta.video.height;
     const mainDuration = meta.duration || meta.video?.duration || 0;