Add support for rendering points with labels in gemini-bbox tool

[simonw]

• Add extractPoints() function to parse JSON responses containing point data
• Add displayImageWithPoints() function to visualize points on canvas
• Points are rendered as colored circles with labels next to them
• Supports response format: [{"point": [y, x], "label": "name"}, ...]
• Falls back to bounding box rendering if no points are found

[claude]

Claude finished @simonw's task —— View job

---

PR Review: Add support for rendering points with labels in gemini-bbox tool

Todo List:

• Read and analyze the modified gemini-bbox.html file
• Review code quality and best practices
• Check for potential bugs and issues
• Evaluate performance considerations
• Assess security concerns
• Review test coverage
• Provide comprehensive feedback

---

Summary

This PR adds a valuable new feature to the gemini-bbox tool, enabling visualization of points with labels in addition to the existing bounding box functionality. The implementation follows the existing patterns well and integrates cleanly with the current codebase.

✅ Strengths

1. Clean Integration: The new functionality integrates seamlessly with existing code, using the same canvas rendering approach and UI patterns
2. Robust JSON Parsing: The extractPoints() function includes proper error handling with try-catch
3. Visual Consistency: Point rendering follows the same color scheme and styling as bounding boxes
4. Graceful Fallback: Points take precedence over bounding boxes, with a clean fallback mechanism
5. Good UX: Points are rendered as circles with white borders for visibility, and labels have background for readability

⚠️ Issues Found

Bug: Regex Pattern Too Permissive

Location: extractPoints() function at line 131

const jsonMatch = text.match(/\[[\s\S]*?\{"point"[\s\S]*?\](?=\s*$|\s*```|\s*\n\n)/);

Issue: This regex could match unintended text and potentially extract malformed JSON. It's very permissive and could match across multiple JSON objects.

Recommendation: Use a more precise approach:

// Look for complete JSON array patterns more precisely
const jsonPattern = /\[(?:\s*\{[^{}]*\}(?:\s*,\s*\{[^{}]*\})*\s*)?\]/g;
const matches = text.match(jsonPattern) || [];
for (const match of matches) {
  try {
    const parsed = JSON.parse(match);
    if (Array.isArray(parsed) && parsed.length > 0 && parsed[0].point) {
      return parsed;
    }
  } catch (e) {
    continue;
  }
}

Code Duplication

Location: Lines 275-295 and 158-177
Issue: Grid drawing code is duplicated between displayImageWithPoints() and displayImageWithBoundingBoxes()

Recommendation: Extract to a reusable function:

function drawGrid(ctx, image) {
  ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';
  ctx.lineWidth = 1;
  // ... grid drawing logic
}

Code Duplication: Axis Drawing

Location: Lines 353-392 and 218-255
Issue: Axis and label drawing code is also duplicated

Recommendation: Extract to a reusable function:

function drawAxes(ctx, image) {
  // ... axis drawing logic
}

🔍 Minor Issues

1. Magic Numbers: The point radius (8), label offset (12), and padding (4) should be constants at the top of the file
2. Coordinate Validation: No validation that point coordinates are within expected 0-1000 range
3. Label Length: No handling for very long labels that might overflow the canvas

🛡️ Security Assessment

• ✅ Safe: No security vulnerabilities identified
• JSON parsing is properly wrapped in try-catch blocks
• No dangerous DOM manipulation or eval usage

⚡ Performance Considerations

• ✅ Good: Efficient canvas operations, no unnecessary re-renders
• Minor: Could cache color array access with const color = colors[index % colors.length] once per loop

🧪 Test Coverage

• ❌ No Tests: This is a standalone HTML file with no automated testing
• Recommendation: Consider adding basic unit tests for extractPoints() function, particularly edge cases with malformed JSON

🏆 Overall Assessment

This is a solid implementation that adds useful functionality. The main concerns are code duplication and a slightly fragile regex pattern. The code follows good practices overall and maintains consistency with the existing codebase.

Recommended Priority:

1. High: Fix the regex pattern in extractPoints()
2. Medium: Extract common grid/axis drawing functions
3. Low: Add constants for magic numbers

--- | Branch: claude/gemini-bbox-point-rendering-01G9hfDgkXRkFC4qYobhtVdz

[cloudflare-workers-and-pages]

Deploying tools with    Cloudflare Pages

Latest commit:	62de323
Status:	✅  Deploy successful!
Preview URL:	https://c182b762.tools-b1q.pages.dev
Branch Preview URL:	https://claude-gemini-bbox-point-ren.tools-b1q.pages.dev

View logs