Gemini API Image Bounding Box Visualization

import { Hono } from "https://deno.land/x/hono@v3.11.7/mod.ts"; import { marked } from "npm:marked"; const intro = ` # Gemini AI Object Detection and Bounding Box Visualizer This application visualizes object detection results by drawing bounding boxes on images using the [Google's Gemini 1.5 Pro AI model](https://ai.google.dev/). Try using this image of 8 bananas, with 1 row and 1/2/4 columns: [https://f2.phage.directory/blogalog/bananas-8.png](https://f2.phage.directory/blogalog/bananas-8.png) Or this image of a phage plaque assay, with 3x3 grid and high contrast turned on: [https://f2.phage.directory/blogalog/pae7.png](https://f2.phage.directory/blogalog/pae7.png) This app is an adaptation of Simon Willison's idea, which you can read more about here: [https://simonwillison.net/2024/Aug/26/gemini-bounding-box-visualization/](https://simonwillison.net/2024/Aug/26/gemini-bounding-box-visualization/) - API keys are only stored in your browser's local storage. - Source code: [https://www.val.town/v/yawnxyz/geminiBbox/](https://www.val.town/v/yawnxyz/geminiBbox/) - Original Source: https://github.com/simonw/tools/blob/main/gemini-bbox.html `; const markdownJsonRegex = /```json\n([\s\S]*?)```/; export const module = ` ` export const html = ` Gemini API Image Bounding Box Visualization - phages! ${module}

${marked(intro)}

Get an image description

Sometimes getting a description of the image helps you understand what the AI sees. This can help you better set up the prompt and settings.

Detect Bounding Boxes

Use this to detect bounding boxes of objects in an image. Use the description to help with setting the prompt.

Apply High Contrast Filter

Rows:

Columns:

Delay between requests (ms):

Grid Increment:

`; const app = new Hono(); app.get("/", (c) => c.html(html)); export default (typeof Deno !== "undefined" && Deno.env.get("valtown")) ? app.fetch : app;