trmnl_preview 0.6.1 → 0.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ffe3bc9bab021853f3ca1002841681f0e3de4aa51972c98ddd6939cf6ffa4e8a
-  data.tar.gz: e5100dba5bf58cf6998889f7cbb15abc62186325373c2b82c88fd3eb9aa602fb
+  metadata.gz: 5728e75c9a9b9508254942f91d4e64c09440014d2b40ede681b60e5fe054a847
+  data.tar.gz: 1330a50632f9757807e35aee4525f573d7923d639bf345c4e6efacb5ed994c78
 SHA512:
-  metadata.gz: 9781cbf7eb27c811c0985c9c0765a1bff4f5255cf9b29e2cb8e0e7815672db18e4aa988262c700fa5b509268f11f67ca1b1b6d4357a58c21ae49985eb742b46e
-  data.tar.gz: 2f8f56ef49b794eebda404afa2feb1f69b0d89a1565b2a7c4332a1252b4551337e84c9517088361bea1e2b97545352af955868ba7c5a2678bf11da6ac8cd9fcb
+  metadata.gz: ca4d3138556081762e15ffc3ed2644bed18c4bdd6edd3bfc2f6ed6e002653f47eae7d025ddc1c477b9fbc2092a5c4c5f09192489fd3ccfd9c44c13e1511b2f4b
+  data.tar.gz: 890fcbe509e699e77970de5590b26595e52c20ad0772f234fa25f837c73d8f489b5681eabceecad017ab6830ef2b8a233002b140559cbd7b90fe3e7748e39937

data/CHANGELOG.md

@@ -1,6 +1,14 @@
 
 # Changelog
 
+## 0.7.0
+
+- Switch from Puppeteer + CDP to Selenium + WebDriver BiDi (@SorceressLyra)
+
+## 0.6.1
+
+- Update trmnl-liquid to 0.4.0
+
 ## 0.6.0
 
 - Drop trmnl-component in lieu of plain iframe

data/lib/trmnlp/app.rb

@@ -78,27 +78,19 @@ module TRMNLP
       end
 
       get "/render/#{view}.html" do
-        @view = view
-        @screen_classes = @context.screen_classes(params[:screen_classes])
-        
-        case view
-        when 'half_horizontal'
-          @mashup_classes = 'mashup mashup--1Tx1B'
-        when 'half_vertical'
-          @mashup_classes = 'mashup mashup--1Lx1R'
-        when 'quadrant'
-          @mashup_classes = 'mashup mashup--2x2'
-        end
-
-        erb :render_html do
-          @context.render_template(view)
-        end
+        @context.render_full_page(view, params)
       end
-
+      
       get "/render/#{view}.png" do
         @view = view
-        html = @context.render_full_page(view)
-        generator = ScreenGenerator.new(html, image: true)
+        html = @context.render_full_page(view, params)
+
+        # Parse optional rendering params (sent by the web UI for PNG output)
+        width = params[:width] && params[:width].to_i
+        height = params[:height] && params[:height].to_i
+        color_depth = params[:color_depth] && params[:color_depth].to_i
+
+        generator = ScreenGenerator.new(html, image: true, width: width, height: height, color_depth: color_depth)
         temp_image = generator.process
         
         send_file temp_image.path, type: 'image/png', disposition: 'inline'

data/lib/trmnlp/context.rb

@@ -89,9 +89,9 @@ module TRMNLP
         if response.status == 200
           content_type = response.headers['content-type'].split(';').first.strip if response.headers.include?('content-type')
           case content_type
-          when 'application/json'
+          when 'application/json', /^application\/.+\+json/
             json = wrap_array(JSON.parse(response.body))
-          when 'text/xml', 'application/xml', 'application/rss+xml', 'application/atom+xml', 'application/soap+xml'
+          when 'text/xml', 'application/xml', /^application\/.+\+xml/
             json = wrap_array(Hash.from_xml(response.body))
           else
             puts "unknown content type received: #{response.headers['content-type']}"
@@ -127,7 +127,7 @@ module TRMNLP
       puts "webhook error: #{e.message}"
     end
 
-    def render_template(view)
+    def render_liquid_template(view)
       template_path = paths.template(view)
       return "Missing template: #{template_path}" unless template_path.exist?
 
@@ -144,11 +144,11 @@ module TRMNLP
       e.message
     end
 
-    def render_full_page(view)
+    def render_full_page(view, params = {})
       template = paths.render_template.read
       
-      ERB.new(template).result(TemplateBinding.new(self, view).get_binding do
-        render_template(view)
+      ERB.new(template).result(TemplateBinding.new(self, view, params).get_binding do
+        render_liquid_template(view)
       end)
     end
 
@@ -161,9 +161,18 @@ module TRMNLP
 
     # bindings must match the `GET /render/{view}.html` route in app.rb
     class TemplateBinding
-      def initialize(context, view)
-        @screen_classes = context.screen_classes
+      def initialize(context, view, params)
         @view = view
+        @screen_classes = context.screen_classes(params[:screen_classes])
+
+        case view
+        when 'half_horizontal'
+          @mashup_classes = 'mashup mashup--1Tx1B'
+        when 'half_vertical'
+          @mashup_classes = 'mashup mashup--1Lx1R'
+        when 'quadrant'
+          @mashup_classes = 'mashup mashup--2x2'
+        end
       end
 
       def get_binding = binding

data/lib/trmnlp/screen_generator.rb

@@ -1,111 +1,109 @@
 require 'mini_magick'
-require 'puppeteer-ruby'
+require 'selenium-webdriver'
 require 'base64'
 require 'thread'
+require 'tempfile'
+require 'fileutils'
+require 'uri'
 
 module TRMNLP
   class ScreenGenerator
     # Browser pool management for efficient resource usage
     class BrowserPool
       def initialize(max_size: 2)
-        @browsers = []
+        @drivers = []
         @available = Queue.new
         @mutex = Mutex.new
         @max_size = max_size
         @shutdown = false
-        
-        # Register cleanup on exit
+
         at_exit { shutdown }
       end
-      
-      def with_page
-        browser = nil
-        page = nil
-        
+
+      def with_driver
+        driver = nil
+
         begin
-          browser = checkout_browser
-          page = browser.new_page
-          yield page
+          driver = checkout_driver
+          yield driver
         ensure
-          # Clean up page but keep browser alive
-          page&.close rescue nil
-          checkin_browser(browser) if browser
+          checkin_driver(driver) if driver
         end
       end
-      
+
       def shutdown
         @mutex.synchronize do
           return if @shutdown
           @shutdown = true
-          
-          # Close all browsers
-          @browsers.each do |browser|
-            browser.close rescue nil
+
+          @drivers.each do |driver|
+            driver.quit rescue nil
           end
-          @browsers.clear
+
+          @drivers.clear
         end
       end
-      
+
       private
-      
-      def checkout_browser
-        # Try to get an available browser
-        browser = @available.pop(true) rescue nil
-        
-        # If no browser available and we haven't reached max size, create a new one
-        if browser.nil?
+
+      def checkout_driver
+        driver = @available.pop(true) rescue nil
+
+        if driver.nil?
           @mutex.synchronize do
-            if @browsers.size < @max_size
-              browser = create_browser
-              @browsers << browser
+            if @drivers.size < @max_size
+              driver = create_driver
+              @drivers << driver
             end
           end
         end
-        
-        # If still no browser, wait for one to become available
-        browser ||= @available.pop
-        
-        # Verify browser is still alive
+
+        driver ||= @available.pop
+
         begin
-          browser.targets # Simple check to see if browser responds
-          browser
+          # Ping the driver
+          driver.title
+          driver
         rescue
-          # Browser is dead, create a new one
           @mutex.synchronize do
-            @browsers.delete(browser)
-            browser = create_browser
-            @browsers << browser
+            @drivers.delete(driver)
+            driver = create_driver
+            @drivers << driver
           end
-          browser
+          driver
         end
       end
-      
-      def checkin_browser(browser)
+
+      def checkin_driver(driver)
         return if @shutdown
-        @available.push(browser)
+        @available.push(driver)
       end
-      
-      def create_browser
-        Puppeteer.launch(
-          product: 'firefox',
-          headless: true,
-          args: [
-            "--window-size=800,480",
-            "--disable-web-security"
-          ]
-        )
+
+      def create_driver
+        options = Selenium::WebDriver::Firefox::Options.new
+        options.add_argument('--headless')
+        options.add_argument('--disable-web-security')
+
+        driver = Selenium::WebDriver.for(:firefox, options: options)
+        # Set a default window size that will be consistent
+        driver.manage.window.maximize
+        driver
       end
     end
-    
-    # Class-level browser pool shared across all instances
+
     @@browser_pool = BrowserPool.new
-    
+
     def initialize(html, opts = {})
       self.input = html
       self.image = !!opts[:image]
+
+      # Accept optional rendering parameters (width/height/color depth/dark mode)
+      @requested_width = opts[:width]
+      @requested_height = opts[:height]
+      @requested_color_depth = opts[:color_depth]
     end
 
-    attr_accessor :input, :output, :image, :processor, :img_path
+    attr_accessor :input, :output, :image
 
     def process
       convert_to_image
@@ -117,80 +115,126 @@ module TRMNLP
 
     def convert_to_image
       retry_count = 0
-      
+
       begin
-        @@browser_pool.with_page do |page|
-          # Configure page
-          page.viewport = Puppeteer::Viewport.new(width: width, height: height)
-          
-          # Set content with appropriate wait strategy
-          page.set_content(input, timeout: 10000)
-          
-          # Hide scrollbars
-          page.evaluate(<<~JAVASCRIPT)
-            () => {
-              document.getElementsByTagName('html')[0].style.overflow = "hidden";
-              document.getElementsByTagName('body')[0].style.overflow = "hidden";
+        @@browser_pool.with_driver do |driver|
+          # determine dimensions of toolbars, etc
+          borders = driver.execute_script(<<~JS)
+            return {
+              width: window.outerWidth - window.innerWidth,
+              height: window.outerHeight - window.innerHeight
             }
-          JAVASCRIPT
+          JS
+
+          window_width = width + borders['width']
+          window_height = height + borders['height']
+          driver.manage.window.size = Selenium::WebDriver::Dimension.new(window_width, window_height)
           
-          # Take screenshot
+          sleep(0.1)
+
+          prepare_page(driver)
+
           self.output = Tempfile.new(['screenshot', '.png'])
-          page.screenshot(path: output.path, type: 'png')
+          driver.save_screenshot(output.path)
+          output.close
         end
-      rescue Puppeteer::TimeoutError, Puppeteer::FrameManager::NavigationError => e
+      rescue Selenium::WebDriver::Error::TimeoutError,
+            Selenium::WebDriver::Error::WebDriverError => e
         retry_count += 1
-        if retry_count <= 1
-          retry
-        else
-          puts "ERROR -> ScreenGenerator#convert_to_image -> #{e.message}"
-          raise
-        end
+        retry if retry_count <= 1
+        raise
       end
     end
 
-    def mono(img)
-      MiniMagick::Tool::Convert.new do |m|
-        m << img.path
-        m.monochrome # Use built-in smart monochrome dithering (but it's not working as expected)
-        m.depth(color_depth) # Should be set to 1 for 1-bit output
-        m.strip # Remove any additional metadata
-        m << img.path
+    def prepare_page(driver)
+      driver.navigate.to('about:blank')
+
+      driver.execute_script(<<~JS, input)
+        document.open();
+        document.write(arguments[0]);
+        document.close();
+      JS
+
+      Selenium::WebDriver::Wait.new(timeout: 5).until do
+        driver.execute_script('return document.readyState') == 'complete'
       end
+
+      # Wait for fonts (prevents layout shifts)
+      driver.execute_script('return document.fonts && document.fonts.ready')
+
+      driver.execute_script(<<~JS)
+        document.documentElement.style.overflow = 'hidden';
+        document.body.style.overflow = 'hidden';
+      JS
     end
+      
+    def convert_with_mini_magick(img, depth)
+      tmp = Tempfile.new(['mono', '.png'])
+      tmp.close
+
+      levels = 2**depth
 
-    def mono_image(img)
-      # Convert to monochrome bitmap with proper dithering
-      # This implementation works with both ImageMagick 6.x and 7.x
       MiniMagick::Tool::Convert.new do |m|
         m << img.path
-        
-        # First convert to grayscale to ensure proper channel handling
-        m.colorspace << 'Gray'
-        
-        # Apply Floyd-Steinberg dithering for better quality
-        m.dither << 'FloydSteinberg'
-        
-        # Remap to a 50% gray pattern for better dithering
-        m.remap << 'pattern:gray50'
-        
-        # Set the image type to bilevel (1-bit black and white)
-        m.type << 'Bilevel'
-        
-        # Set color depth to 1 bit
-        m.depth << color_depth
-        
-        # Remove any metadata to reduce file size
+        m.colorspace 'Gray'
+        m.dither 'FloydSteinberg'
+
+        yield(m, depth, levels)
+
+        m.depth depth
+        m.define "png:bit-depth=#{depth}"
         m.strip
-        
-        m << img.path
+        m << tmp.path
       end
+
+      FileUtils.mv(tmp.path, img.path, force: true)
     end
 
-    def width = 800
+    def mono(img)
+      depth = [[color_depth.to_i, 1].max, 8].min
 
-    def height = 480
+      convert_with_mini_magick(img, depth) do |m, d, levels|
+        m.posterize levels
+        m.colors levels
+        m.type 'Bilevel' if d == 1
+      end
+    end
 
-    def color_depth = 1
+    def mono_image(img)
+      depth = [[color_depth.to_i, 1].max, 8].min
+
+      convert_with_mini_magick(img, depth) do |m, d, levels|
+        if d == 1
+          # For true 1-bit, use a halftone/remap and bilevel output
+          m.remap 'pattern:gray50'
+          m.posterize 2
+          m.colors 2
+          m.type 'Bilevel'
+        else
+          m.posterize levels
+          m.colors levels
+        end
+      end
+    end
+
+
+    def width
+      @requested_width || 800
+    end
+
+    def height
+      @requested_height || 480
+    end
+
+    def color_depth
+      return @requested_color_depth if @requested_color_depth
+
+      # Try to infer color depth from the rendered HTML's screen classes
+      if input && input.match(/screen--(\d+)bit/)
+        return $1.to_i
+      end
+
+      1
+    end
   end
 end

data/lib/trmnlp/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module TRMNLP
-  VERSION = "0.6.1".freeze
+  VERSION = "0.7.0".freeze
 end

data/trmnl_preview.gemspec

@@ -47,7 +47,8 @@ Gem::Specification.new do |spec|
   spec.add_dependency "trmnl-liquid", "~> 0.4.0"
 
   # PNG rendering
-  spec.add_dependency 'puppeteer-ruby', '~> 0.45.6'
+  # spec.add_dependency 'puppeteer-ruby', '~> 0.45.6'
+  spec.add_dependency 'selenium-webdriver', '~> 4.39'
   spec.add_dependency 'mini_magick', '~> 4.12.0'
 
   # Utilities

data/web/public/index.js

@@ -27,7 +27,21 @@ trmnlp.connectLiveRender = function () {
 trmnlp.fetchPreview = function (pickerState) {
   const screenClasses = (pickerState?.screenClasses || trmnlp.picker.state.screenClasses).join(" ");
   const encodedScreenClasses = encodeURIComponent(screenClasses);
-  const src = `/render/${trmnlp.view}.${trmnlp.formatSelect.value}?screen_classes=${encodedScreenClasses}`;
+  let src = `/render/${trmnlp.view}.${trmnlp.formatSelect.value}?screen_classes=${encodedScreenClasses}`;
+
+  // If requesting a PNG, also include dimensions, dark mode, and color depth
+  if (trmnlp.formatSelect.value === 'png') {
+    const state = pickerState || trmnlp.picker.state;
+    const width = encodeURIComponent(state.width);
+    const height = encodeURIComponent(state.height);
+    const isDarkMode = state.isDarkMode ? 1 : 0;
+
+    // derive numeric color depth from classes like 'screen--1bit'
+    const grays = state.palette.grays || 2;
+    const colorDepth = Math.ceil(Math.log2(grays));
+
+    src += `&width=${width}&height=${height}&color_depth=${colorDepth}`;
+  }
 
   trmnlp.spinner.style.display = "inline-block";
   trmnlp.iframe.src = src;

data/web/views/render_html.erb

@@ -11,7 +11,7 @@
     <!-- End Inter font -->
   </head>
 
-  <body class="environment trmnl" style="background: white">
+  <body class="environment trmnl">
     <div class="<%= @screen_classes %>">
       <% if @mashup_classes %><div class="<%= @mashup_classes %>"><% end %>
       <div class="view view--<%= @view %>">

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: trmnl_preview
 version: !ruby/object:Gem::Version
-  version: 0.6.1
+  version: 0.7.0
 platform: ruby
 authors:
 - Rockwell Schrock
@@ -94,19 +94,19 @@ dependencies:
       - !ruby/object:Gem::Version
         version: 0.4.0
 - !ruby/object:Gem::Dependency
-  name: puppeteer-ruby
+  name: selenium-webdriver
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 0.45.6
+        version: '4.39'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 0.45.6
+        version: '4.39'
 - !ruby/object:Gem::Dependency
   name: mini_magick
   requirement: !ruby/object:Gem::Requirement