An AI-powered design add-on that scans your visuals and flags potential cultural, ethical, or symbolic pitfalls — before they become costly mistakes.
Built for global creators. Powered by Gemini. Designed for Adobe Express.
👉 This project was created for the "Adobe Express Add-ons Hackathon".
-
🧠 Cultural check with AI — Get instant feedback on how design fits different cultures.
-
🌍 Country-aware analysis — Adjusts results based on your chosen region.
-
🏢 Business type context — Improves accuracy using industry-specific context.
-
💬 Follow-up chat with AI — Ask clarification questions right after the analysis.
-
🖼️ Image analysis — Upload images for cultural and ethical review.
-
📊 Usage Limits (Free Tier) — Provides free analysis checks per day per user.
-
🔍 Smart element scanning — Detects text, colors, and shapes.
-
🔌 Seamless Adobe Express integration — Works right inside your design workflow.
-
⚙️ Easy to extend — Built for future element types and features.
- ✨ Spectrum Design System — Modern interface built with Adobe's Spectrum Web Components (Express system).
- 💯 Cultural Sensitivity Score — Get a clear 0-100 score (visualized with
sp-meter) to quickly assess cultural fitness. - 📄 Clean Markdown Output — Neatly formatted AI replies.
- 🚶 Guided Steps — Accordion layout guides users through analysis steps.
- 🖼️ Image Preview — See uploaded images directly in the dropzone.
- ⏳ Loading Indicators — Clear
sp-progress-circleshows AI activity status. - 💡 Info Tooltips — Helpful hints on buttons and key features.
- 📊 Usage Limit Display — Clearly shows remaining checks for the day.
⚠️ Helpful Error Messages — Alerts if something’s missing or wrong.- 📢 Premium Interest Tracking — Button to gauge user interest in future premium features.
- Frontend: HTML, CSS, JavaScript, Adobe Express Add-on API, Spectrum Web Components
- Backend: Node.js, Express.js (Containerized)
- AI Model: Google Gemini API (Flash model)
- Database: Supabase (for user limits)
- Hosting: Google Cloud Run (Serverless)
- Containerization: Docker
- CI/CD: GitHub Actions (Deploy to Cloud Run workflow)
- Build Tool: @adobe/create-ccweb-add-on
- 🛑 Cancelable AI requests — no wasted quota on aborted runs
- ⚙️ Two-phase usage confirmation (pending → confirmed) to ensure accurate quota billing
- 🧾 Atomic usage tracking in Supabase (no double-charge edge cases)
- 🌐 Graceful handling of network interruptions
This project consists of two parts: a frontend add-on and a backend server. Both must be running simultaneously for local development.
Prerequisites
- Node.js and npm installed.
- An Adobe Developer account.
- The Adobe Express Add-on Development Tool installed and configured. See the official guide.
-
Clone the repository:
git clone https://github.com/vero-code/ethno-lens-ai.git cd ethno-lens-ai -
Install dependencies:
npm install
-
Setup environment variables:
- Create a
.envfile in the project root. - Add your API keys and credentials (see
.env.examplefile).
You will need two separate terminals open.
Terminal 1: Start the Backend Server
node server.jsYour backend is now running at http://localhost:3000.
Terminal 2: Start the Frontend Add-on Server
npm run startYour add-on is now hosted and can be sideloaded in Adobe Express.
The backend is containerized using Docker and hosted on Google Cloud Run for high scalability and zero cold starts.
- Workflow: The
deploy-cloudrun.ymlworkflow handles the build and deployment process. - Trigger: Go to the "Actions" tab → Select "Deploy to Cloud Run" → Click "Run workflow".
- Configuration: Environment variables (
GEMINI_API_KEY,SUPABASE_URL, etc.) are managed securely via the Google Cloud Console (Cloud Run Service → Variables & Secrets).
If you encounter a bug or have a feature request, please open an issue on this GitHub repository.
This project is open-source under the MIT License — meaning you’re free to use, change, and share it, even in commercial projects. Just keep the original LICENSE info.
Want to help out? Feel free to report bugs, suggest features, or open a pull request!