webmarker-js 0.2.0 → 0.3.0

package/README.md

@@ -11,7 +11,7 @@ Mark web pages for use with vision-language models.
 
 ## Overview
 
-**WebMarker** adds visual markings with labels to elements on a web page. This can be used for [Set-of-Mark (SoM)](https://github.com/microsoft/SoM) prompting, which improves visual grounding abilities of vision-language models such as GPT-4o, Claude 3.5, and Google Gemini 1.5.
+**WebMarker** adds visual markings with labels to elements on a web page. This can be used for [Set-of-Mark](https://github.com/microsoft/SoM) prompting, which improves visual grounding abilities of vision-language models such as GPT-4o, Claude 3.5, and Google Gemini 1.5.
 
 ![Screenshot of marked Google homepage](https://github.com/user-attachments/assets/722e1034-06d4-4ccd-a7d6-f03749435681)
 
@@ -89,6 +89,13 @@ A custom CSS selector to specify which elements to mark.
 - Type: `string`
 - Default: `"button, input, a, select, textarea"`
 
+### getLabel
+
+Provide a function for generating labels. By default, labels are generated as integers starting from 0.
+
+- Type: `(element: Element, index: number) => string`
+- Default: `(_, index) => index.toString()`
+
 ### markAttribute
 
 A custom attribute to add to the marked elements. This attribute contains the label of the mark.
@@ -96,13 +103,6 @@ A custom attribute to add to the marked elements. This attribute contains the la
 - Type: `string`
 - Default: `"data-mark-label"`
 
-### markStyle
-
-A CSS style to apply to the label element. You can also specify a function that returns a CSS style object.
-
-- Type: `Readonly<Partial<CSSStyleDeclaration>> or (element: Element) => Readonly<Partial<CSSStyleDeclaration>>`
-- Default: `{backgroundColor: "red", color: "white", padding: "2px 4px", fontSize: "12px", fontWeight: "bold"}`
-
 ### markPlacement
 
 The placement of the mark relative to the element.
@@ -110,11 +110,18 @@ The placement of the mark relative to the element.
 - Type: `'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'`
 - Default: `'top-start'`
 
+### markStyle
+
+A CSS style to apply to the label element. You can also specify a function that returns a CSS style object.
+
+- Type: `Partial<CSSStyleDeclaration> | (element: Element) => Partial<CSSStyleDeclaration>`
+- Default: `{backgroundColor: "red", color: "white", padding: "2px 4px", fontSize: "12px", fontWeight: "bold"}`
+
 ### boundingBoxStyle
 
 A CSS style to apply to the bounding box element. You can also specify a function that returns a CSS style object. Bounding boxes are only shown if showBoundingBoxes is true.
 
-- Type: `Readonly<Partial<CSSStyleDeclaration>> or (element: Element) => Readonly<Partial<CSSStyleDeclaration>>`
+- Type: `Partial<CSSStyleDeclaration> | (element: Element) => Partial<CSSStyleDeclaration>`
 - Default: `{outline: "2px dashed red", backgroundColor: "transparent"}`
 
 ### showBoundingBoxes
@@ -124,13 +131,6 @@ Whether or not to show bounding boxes around the elements.
 - Type: `boolean`
 - Default: `true`
 
-### getLabel
-
-Provide a function for generating labels. By default, labels are generated as integers starting from 0.
-
-- Type: `(element: Element, index: number) => string`
-- Default: `(_, index) => index.toString()`
-
 ### containerElement
 
 Provide a container element to query the elements to be marked. By default, the container element is document.body.

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 type Placement = "top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end";
-type StyleFunction = (element: Element) => CSSStyleDeclaration;
-type StyleObject = Readonly<Partial<CSSStyleDeclaration>>;
+type StyleFunction = (element: Element) => Partial<CSSStyleDeclaration>;
+type StyleObject = Partial<CSSStyleDeclaration>;
 interface MarkOptions {
     /**
      * A CSS selector to query the elements to be marked.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "webmarker-js",
-  "version": "0.2.0",
-  "description": "A library for marking web pages for Set-of-Mark (SoM) prompting with vision-language models.",
+  "version": "0.3.0",
+  "description": "A library for marking web pages for Set-of-Mark prompting with vision-language models.",
   "source": "src/index.ts",
   "main": "dist/main.js",
   "module": "dist/module.js",

package/src/index.ts

@@ -14,8 +14,8 @@ type Placement =
   | "left-start"
   | "left-end";
 
-type StyleFunction = (element: Element) => CSSStyleDeclaration;
-type StyleObject = Readonly<Partial<CSSStyleDeclaration>>;
+type StyleFunction = (element: Element) => Partial<CSSStyleDeclaration>;
+type StyleObject = Partial<CSSStyleDeclaration>;
 
 interface MarkOptions {
   /**