Consolidate loader and browser into shared library with image dimensions

[Copilot]

Eliminated code duplication between loader/ and browse/ by extracting common database and Replicate API logic into a shared library. Added image dimension tracking to optimize page load performance.

Changes

• Created shared/ library with unified DB operations (db.ts) and embedding generation (replicate.ts)
• Extended schema with width and height columns, including migration for existing tables
• Updated loader to extract and store image dimensions during upload using sharp
• Updated browser to render dimension attributes on <img> tags with validation
• Simplified both applications to re-export from shared library, eliminating ~200 lines of duplicate code

Example

Before: separate embedding functions in loader/src/replicate.ts and browse/src/replicate.ts

After: single implementation in shared/src/replicate.ts

// Both apps now use:
import { getImageEmbedding, getTextEmbedding } from "image-browser-shared";

Image dimensions improve layout stability:

<!-- Browser now renders: -->
<img src="..." width="1920" height="1080" />

The consolidation maintains backward compatibility through re-exports in existing module locations.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Consolidate loader and browser</issue_title>
<issue_description>Theres no good reason why loader and browser are separate. Let's consolidate it into one. The code should be clearly structured, and the code paths for getting the embeddings etc should be the same, and then we have different entry points. There's uploading, calculating the embedding, and the website. We should also include the width and height of the image so that the page loads better
</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Consolidate loader and browser #1

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
ffffound-browser	Error			Nov 6, 2025 1:31am

[wschenk]

We could also make the table name a variable, perhaps related to the bucket name, so we could use the same database for multiple installations. Think about how to do that and we can implement