Unlock the power of visual search. Analyze, query, and explore images with AI-driven insights, right from your browser or web app.
Searchit is a powerful visual search application for the modern web, combining a sleek web interface with a fully integrated Chrome Extension to deliver seamless image querying experiences. Upload images, capture screenshots, or snap photos using your camera, then ask questions and receive intelligent AI-driven insights powered by Cloudflare AI. Instantly perform reverse image searches via Google Lens with a single click.
This repository contains the complete codebase for both the web app (hosted on Cloudflare Pages/Workers) and the Chrome Extension.
-
Dual Platform Experience
Standalone website and an integrated Chrome Extension built for flexible use. -
Multiple Image Input Options
- 📤 Upload: Drag & drop or browse your files.
- 📸 Camera: Capture real-time images.
- 🖼️ Screenshot (Extension): Right-click any webpage to capture screenshots for instant analysis in the side panel.
-
Interactive Image Analysis
- ✏️ Draw & Crop: Annotate images and select regions of interest for precise queries.
- 🔍 Zoom & Pan: Navigate images confidently to focus on details.
-
AI-Powered Queries
Cloudflare’s AI analyzes image content based on text prompts. -
Google Lens Integration
Perform reverse image search on uploaded or selected image areas instantly. -
Modern UI/UX
Developed with React and Motion for a smooth, responsive, and visually appealing user interface with simulated haptic feedback.
| Layer | Technology |
|---|---|
| Frontend | React, Vite, TypeScript |
| Styling | CSS Modules, Custom Theming |
| Animation | Motion |
| Backend & Deployment | Cloudflare Pages, Cloudflare Workers, Cloudflare AI |
| Browser Extension | Chrome Manifest V3, React Side Panel |
- Node.js (v18.x or later recommended)
- npm or yarn
- Cloudflare account (for deployment)
Clone the repository git clone https://github.com/your-username/searchit.git cd searchit
Install dependencies npm install
Create a .env file in the project root with the following keys:
VITE_ANALYZE_API_URL="your-cloudflare-worker-url" VITE_IMGBB_API_KEY="your-imgbb-api-key"
Start the local development server for the website:
npm run dev
Access the app at: http://localhost:5173
- Build the optimized website:
npm run build:website
- Build the Chrome Extension:
npm run build:extension
Deploy the website to Cloudflare Pages using Wrangler CLI:
npx wrangler login npm run deploy
This command builds and deploys your app automagically.
- Build the extension:
npm run build:extension
- In Chrome, open:
chrome://extensions - Enable Developer mode (top-right corner)
- Click Load unpacked and select the
extension/folder - The "Search IT" extension is now active. Right-click on any webpage to access Visual Search.
Contributions fuel open source! Welcome your suggestions and improvements:
- Fork the repo
- Create a feature branch:
git checkout -b feature/AmazingFeature - Commit your changes:
git commit -m 'Add some AmazingFeature' - Push to your branch:
git push origin feature/AmazingFeature - Open a Pull Request
Feel free to open issues tagged enhancement.
Distributed under the MIT License.
Made with ❤️ by Yash Kumar