Skip to content

Commit 224aae9

Browse files
rcholicrcholic
authored
Merge pull request #116 from SentienceAPI/grouping
snapshot with grid coordinates
2 parents 9b449b4 + a214f7a commit 224aae9

File tree

11 files changed

+1879
-20
lines changed

11 files changed

+1879
-20
lines changed

‎.github/workflows/test.yml‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -48,16 +48,21 @@ jobs:
4848
run: |
4949
npm run build
5050
51-
- name: Build extension (if needed)
51+
- name: Copy extension to dist for tests
5252
if: runner.os != 'Windows'
5353
shell: bash
5454
run: |
55-
if [ -d "../sentience-chrome" ]; then
56-
cd ../sentience-chrome && ./build.sh || echo "Extension build skipped (may not be available in CI)"
55+
# Extension should be synced to src/extension/ by sync-extension workflow
56+
# Copy it to dist/extension/ so tests can find it (browser.ts looks relative to __dirname)
57+
if [ -d "src/extension" ] && [ -f "src/extension/manifest.json" ]; then
58+
echo "Copying extension from src/extension to dist/extension..."
59+
cp -r src/extension dist/
60+
echo "Extension files in dist/extension:"
61+
ls -la dist/extension/
5762
else
58-
echo "Extension directory not found, skipping build"
63+
echo "Warning: src/extension not found, tests may fail"
5964
fi
60-
65+
6166
- name: Run tests
6267
run: |
6368
npm test

‎examples/show-grid-examples.ts‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
/**
2+
* Example: Grid Overlay Visualization
3+
*
4+
* Demonstrates how to use the grid overlay feature to visualize detected grids
5+
* on a webpage, including highlighting specific grids and identifying the dominant group.
6+
*/
7+
8+
import { SentienceBrowser, snapshot, getGridBounds } from '../src/index';
9+
10+
async function main() {
11+
// Get API key from environment variable (optional - uses free tier if not set)
12+
const apiKey = process.env.SENTIENCE_API_KEY as string | undefined;
13+
14+
const browser = new SentienceBrowser(apiKey, undefined, false);
15+
16+
try {
17+
await browser.start();
18+
19+
// Navigate to a page with grid layouts (e.g., product listings, article feeds)
20+
const page = browser.getPage();
21+
if (!page) {
22+
throw new Error('Failed to get page after browser.start()');
23+
}
24+
await page.goto('https://google.com', {
25+
waitUntil: 'domcontentloaded',
26+
});
27+
await new Promise((resolve) => setTimeout(resolve, 2000)); // Wait for page to fully load
28+
29+
console.log('='.repeat(60));
30+
console.log('Example 1: Show all detected grids');
31+
console.log('='.repeat(60));
32+
// Show all grids (all in purple)
33+
// Use local extension mode (use_api: false) to ensure layout data is computed
34+
const snap = await snapshot(browser, { show_grid: true, use_api: false });
35+
console.log(`✅ Found ${snap.elements.length} elements`);
36+
console.log(' Purple borders appear around all detected grids for 5 seconds');
37+
await new Promise((resolve) => setTimeout(resolve, 6000)); // Wait to see the overlay
38+
39+
console.log('\n' + '='.repeat(60));
40+
console.log('Example 2: Highlight a specific grid in red');
41+
console.log('='.repeat(60));
42+
// Get grid information first
43+
const grids = getGridBounds(snap);
44+
if (grids.length > 0) {
45+
console.log(`✅ Found ${grids.length} grids:`);
46+
for (const grid of grids) {
47+
console.log(
48+
` Grid ${grid.grid_id}: ${grid.item_count} items, ` +
49+
`${grid.row_count}x${grid.col_count} rows/cols, ` +
50+
`label: ${grid.label || 'none'}`
51+
);
52+
}
53+
54+
// Highlight the first grid in red
55+
if (grids.length > 0) {
56+
const targetGridId = grids[0].grid_id;
57+
console.log(`\n Highlighting Grid ${targetGridId} in red...`);
58+
await snapshot(browser, {
59+
show_grid: true,
60+
grid_id: targetGridId, // This grid will be highlighted in red
61+
use_api: false, // Use local extension mode
62+
});
63+
await new Promise((resolve) => setTimeout(resolve, 6000)); // Wait to see the overlay
64+
}
65+
} else {
66+
console.log(' ⚠️ No grids detected on this page');
67+
}
68+
69+
console.log('\n' + '='.repeat(60));
70+
console.log('Example 3: Highlight the dominant group');
71+
console.log('='.repeat(60));
72+
// Find and highlight the dominant grid
73+
const allGrids = getGridBounds(snap);
74+
const dominantGrid = allGrids.find((g) => g.is_dominant);
75+
76+
if (dominantGrid) {
77+
console.log(`✅ Dominant group detected: Grid ${dominantGrid.grid_id}`);
78+
console.log(` Label: ${dominantGrid.label || 'none'}`);
79+
console.log(` Items: ${dominantGrid.item_count}`);
80+
console.log(` Size: ${dominantGrid.row_count}x${dominantGrid.col_count}`);
81+
console.log(`\n Highlighting dominant grid in red...`);
82+
await snapshot(browser, {
83+
show_grid: true,
84+
grid_id: dominantGrid.grid_id, // Highlight dominant grid in red
85+
use_api: false, // Use local extension mode
86+
});
87+
await new Promise((resolve) => setTimeout(resolve, 6000)); // Wait to see the overlay
88+
} else {
89+
console.log(' ⚠️ No dominant group detected');
90+
}
91+
92+
console.log('\n' + '='.repeat(60));
93+
console.log('Example 4: Combine element overlay and grid overlay');
94+
console.log('='.repeat(60));
95+
// Show both element borders and grid borders simultaneously
96+
await snapshot(browser, {
97+
show_overlay: true, // Show element borders (green/blue/red)
98+
show_grid: true, // Show grid borders (purple/orange/red)
99+
use_api: false, // Use local extension mode
100+
});
101+
console.log('✅ Both overlays are now visible:');
102+
console.log(' - Element borders: Green (regular), Blue (primary), Red (target)');
103+
console.log(' - Grid borders: Purple (regular), Orange (dominant), Red (target)');
104+
await new Promise((resolve) => setTimeout(resolve, 6000)); // Wait to see the overlay
105+
106+
console.log('\n' + '='.repeat(60));
107+
console.log('Example 5: Grid information analysis');
108+
console.log('='.repeat(60));
109+
// Analyze grid structure
110+
const allGridsForAnalysis = getGridBounds(snap);
111+
console.log(`✅ Grid Analysis:`);
112+
for (const grid of allGridsForAnalysis) {
113+
const dominantIndicator = grid.is_dominant ? '⭐ DOMINANT' : '';
114+
console.log(`\n Grid ${grid.grid_id} ${dominantIndicator}:`);
115+
console.log(` Label: ${grid.label || 'none'}`);
116+
console.log(` Items: ${grid.item_count}`);
117+
console.log(` Size: ${grid.row_count} rows × ${grid.col_count} cols`);
118+
console.log(
119+
` BBox: (${grid.bbox.x.toFixed(0)}, ${grid.bbox.y.toFixed(0)}) ` +
120+
`${grid.bbox.width.toFixed(0)}×${grid.bbox.height.toFixed(0)}`
121+
);
122+
console.log(` Confidence: ${grid.confidence}`);
123+
}
124+
125+
console.log('\n✅ All examples completed!');
126+
} catch (e: any) {
127+
console.error(`❌ Error: ${e.message}`);
128+
console.error(e.stack);
129+
} finally {
130+
await browser.close();
131+
}
132+
}
133+
134+
main().catch(console.error);

0 commit comments

Comments
 (0)