Gemini AI Bounding Box Demo

\n\n

This application visualizes object detection results by drawing bounding boxes on images using the Google's Gemini 1.5 Pro AI model.

\n\n

API keys are only stored in your browser's local storage.

Images are only sent to Google's Gemini API servers for processing.

\n\n

Try the following images (click the links to add them):

\n\n\n`;\n\n\nconst markdownJsonRegex = /```json\\n([\\s\\S]*?)```/;\nexport const module = `\n\n`;\n\n\n\n\nexport const html = `\n\n\n \n \n \n Gemini AI Bounding Box Demo\n \n \n \n \n \n \n \n \n \n \n \n\n ${module}\n\n \n\n \n\n\n

${intro}

\n Upload an image\n \n

\n Or enter an image URL:\n \n

\n \n\n

\n\n

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.

\n \n \n

\n\n

Detect Bounding Boxes

Use this to detect bounding boxes of objects in an image. Use the image description to help with setting up the prompt. Rows and columns determine how many tiles the image will be divided into — for simple images, 1x1 is best.

For the free API you might get the \"Resource has been exhausted\" error if you make too many requests too quickly.

\n \n

\n \n Apply High Contrast Filter\n

\n Dark Threshold:\n \n

\n Light Threshold:\n \n

\n \n

\n Rows:\n \n

\n Columns:\n \n

\n Delay between requests (ms):\n \n

\n Grid Increment:\n \n

\n \n \n

Credits

This experiment uses a lot of ideas and code from Simon Willison's original post which you can read here: https://simonwillison.net/2024/Aug/26/gemini-bounding-box-visualization/

Source: https://www.val.town/v/yawnxyz/geminiBbox/
Original: https://github.com/simonw/tools/blob/main/gemini-bbox.html

\n A labspace.ai experiment \n

\n\n\n`;\n\nconst app = new Hono();\napp.get(\"/\", (c) => c.html(html));\n// Add the CORS proxy endpoint\napp.use('/proxy/*', cors());\napp.get('/proxy/*', async (c) => {\n console.log(\"[proxy request]\", c.req.url)\n const url = decodeURIComponent(c.req.url.split('/proxy/')[1]);\n if (!url) {\n return c.text('No URL provided', 400);\n }\n\n try {\n const response = await fetch(url, {\n headers: {\n 'Accept': 'image/*',\n 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36'\n }\n });\n\n if (!response.ok) {\n console.error(`Proxy error for ${url}:`, {\n status: response.status,\n statusText: response.statusText,\n headers: Object.fromEntries(response.headers.entries())\n });\n return c.text(`Failed to fetch: ${response.statusText}`, response.status);\n }\n\n const contentType = response.headers.get('content-type');\n const blob = await response.blob();\n \n return new Response(blob, {\n headers: {\n 'content-type': contentType || 'application/octet-stream',\n 'access-control-allow-origin': '*'\n }\n });\n } catch (error) {\n return c.text(`Proxy error: ${error.message}`, 500);\n }\n});\n\nexport default (typeof Deno !== \"undefined\" && Deno.env.get(\"valtown\")) ? app.fetch : app;\n\n","deleted","label",[98],"permalink","https://www.val.town/x/yawnxyz/geminiBbox/code/main.tsx","extension","actionData","errors"]