A research-grade image analysis tool powered by Google's Gemini 3 Pro model. This application allows users to upload images, select specific analysis modes and target audiences, and receive structured, expert insights ranging from simple explanations to academic research comparisons.
- 📸 Multimodal Analysis: Upload a single image for deep analysis or Compare two images side-by-side to find differences and similarities.
- 🧠 Intelligent Modes:
- Explain It: Clear, direct answers about what is in the image.
- Research View: Academic tone with technical specifications and detailed bullet points.
- Teach Me: Educational format with "Key Takeaways" and a "Pop Quiz".
- 👥 Adaptive Audience: Tailors the complexity of the response for:
- 5-Year-Olds
- High School Students
- Undergraduates
- Industry Experts
- 🌗 Dark Mode: Fully responsive dark/light theme toggle.
- 💾 History & Auth: Mock authentication system that saves analysis history to the browser's local storage.
- 🔒 Secure Architecture: API keys are securely managed on a backend server, ensuring no credentials are exposed to the client.
This project uses a Split Architecture to ensure security and scalability:
- Tech Stack: React, Vite, Tailwind CSS, Lucide React.
- Deployment: Optimized for static hosting (e.g., GitHub Pages, Vercel, Netlify).
- Security: Contains NO API keys. It sends images to the backend via HTTP POST.
- Tech Stack: Node.js, Express, Multer (file handling), @google/genai SDK.
- Deployment: Optimized for containerized serverless hosting (e.g., Google Cloud Run).
- Security: Stores the
API_KEYin environment variables. Handles CORS to allow requests only from your frontend.
- Node.js (v20+)
- A Google Cloud Project with the Gemini API enabled.
- An API Key from Google AI Studio.
The backend must be running for the app to work.
cd backend
# Install dependencies
npm install
# Configure Environment
# Create a .env file based on the example
cp .env.example .env
# Open .env and paste your GEMINI_API_KEY
# API_KEY=AIzaSy...
# Run the server (Defaults to port 8080)
npm startcd frontend
# Install dependencies
npm install
# Run the development server
# By default, it connects to http://localhost:8080 defined in services/api.ts
npm run dev- Containerize: Build the Docker image using the provided
Dockerfile.gcloud builds submit --tag gcr.io/YOUR_PROJECT_ID/ai-camera-backend
- Deploy:
gcloud run deploy ai-camera-backend \ --image gcr.io/YOUR_PROJECT_ID/ai-camera-backend \ --platform managed \ --region us-central1 \ --allow-unauthenticated \ --set-env-vars API_KEY=YOUR_ACTUAL_API_KEY
- Copy URL: Note the Service URL (e.g.,
https://ai-camera-backend-xyz.a.run.app).
-
Configure URL: In your local environment or build pipeline, set the
VITE_API_URLenvironment variable to your Cloud Run URL.Or update
frontend/src/services/api.tsdirectly if not using env vars during build. -
Update Base Path: Open
frontend/vite.config.tsand set thebaseproperty to your repository name:base: '/your-repo-name/',
-
Build & Deploy:
npm run build # Upload the contents of the /dist folder to your gh-pages branch
This project has been audited and secured against API key exposure.
- ✅ No API keys in frontend code - API keys stay securely on the backend
- ✅ Environment file protection - All
.env*files excluded via.gitignore - ✅ Secure architecture - Frontend calls backend, backend calls Gemini API
- ✅ Build verification - No secrets exposed in compiled JavaScript
- 📋 SECURITY.md - Comprehensive security guide and best practices
- 🚀 DEPLOYMENT.md - Secure deployment instructions
- 📊 SECURITY_AUDIT_SUMMARY.md - Latest security audit results
- Use
backend/.envfor API keys (never commit this file) - Use
frontend/directory for production (not rootApp.tsx) - Set
VITE_API_URLenvironment variable in frontend deployments - Configure CORS to allow only your frontend domain in production
- Verify no API keys in built files:
grep -r "AIza" frontend/dist/
For detailed security information, see SECURITY.md
This project is open source and available under the MIT License.