Project Info
Inspiration
Skincare is hard. Within the ever-expanding beauty industry, it is difficult to keep track of various products and ingredients that are safe to use. For those who are just starting, it can be even harder to navigate the plethora of options and understand what truly benefits their skin. Additionally, personal skin concerns can vary greatly, making it challenging to find tailored solutions without professional guidance. FaceAI Skincare Assistant was inspired by the need to democratize skincare knowledge, making personalized skincare accessible to everyone through the power of artificial intelligence.
What it does
AI Skincare Consultant is a web application designed to simplify and personalize the skincare journey. By uploading a selfie, users can receive an analysis of their skin, identifying issues such as acne, oiliness, pigmentation, and wrinkles. The application then generates personalized skincare routines tailored to the user's unique skin profile, complete with product recommendations and detailed ingredient insights. Additionally, users can interact with the AI assistant to refine their preferences and gain in-depth knowledge about skincare ingredients, learning about the ingredients' usage and safety, ensuring informed and effective skincare choices.
How we built it
The frontend is built with React while OpenCV.js handles image analysis to detect various skin conditions. The backend uses Firebase Cloud Functions and the Gemini 1.5 Flash model to process data and generate personalized skincare recommendations. Vertex AI is utilized for advanced machine learning capabilities, ensuring accurate and reliable analyses. For ingredient data, we use Cosmify's api, which has comprehensive data for various ingredients used in skincare products.
Challenges we ran into
Image Analysis: It was difficult to get image analysis that was accurate. Skin conditions can often be difficult to identify and it was clear that there were still inaccuracies in our evaluations. As such, we had users confirm the conclusions that the AI drew in case they were incorrect. Personalization Complexity: Creatin personalized skincare routines involves considering a multitude of factors, including skin type, concerns, sensitivities, and user preferences, which added complexity to the recommendations.
Accomplishments we're proud of
We are proud that we were able to leverage various technologies to create a web app that could potentially help many people in their skincare journeys.
What we learned
Throughout our development process, we learned much about Gemini's capabilities and weaknesses. Although it is certainly powerful, there are aspects in image analysis where it fails, which was important to our project. Also, we were able to learn more about the development process, constantly finding ways to improve on our ideas.
What's next
I would like to continue in the development of the skincare consultant, implementing various new features that can help users including Routine Progress Tracking Expanded Skin Condition Detection Direct Skincare Product Integration Enhanced Personalization Community Features
FaceAI Skincare Assistant
Let AI guide you through personalized skincare, ingredient insights, and the complexities of the beauty industry.
Table of Contents
Introduction
AI Skincare Consultant is a web application designed to simplify and personalize the skincare journey. By uploading a selfie, users can receive an analysis of their skin, identifying issues such as acne, oiliness, pigmentation, and wrinkles. The application then generates personalized skincare routines tailored to the user's unique skin profile, complete with product recommendations and detailed ingredient insights. Additionally, users can interact with the AI assistant to refine their preferences and gain in-depth knowledge about skincare ingredients, learning about the ingredients' usage and safety, ensuring informed and effective skincare choices.
Features
- Image Analysis: Upload a selfie to get a comprehensive analysis of your skin, including acne detection, oiliness/dryness levels, pigmentation assessment, and wrinkle identification using OpenCV.js.
- Personalized Skincare Routines: Receive AI-generated skincare routines tailored to your specific skin needs.
- Ingredient Insights: Explore detailed information about recommended skincare ingredients, including benefits and safety ratings based on EWG (Environmental Working Group) data.
- Interactive Chat Interface: Engage with the AI assistant to refine your skincare routine preferences and specifications.
- Ingredient Details Modal: Click on any ingredient to view in-depth details, including properties and safety information.
- Responsive Design: Accessible and user-friendly across various devices and screen sizes.
Live Demo
Experience the application in action without any setup at https://faceai-gelv.onrender.com
Installation
To run FaceAI Skincare Assistant locally, follow these steps:
1. Clone the Repository
git clone https://github.com/yourusername/faceai-skincare-assistant.git cd faceai-skincare-assistant
2. Install Dependencies
Ensure you have Node.js installed. Then, install the required packages: npm install
3. Start the Application
npm start The application will run in development mode. Open http://localhost:3000 to view it in your browser.
Usage
-
Upload Your Image Click on the upload box to select a selfie from your device.
-
Review Skin Analysis The AI will display detected skin conditions such as acne severity, oiliness, pigmentation, and wrinkles.
-
Confirm Traits After reviewing, click "Confirm Traits" to proceed.
-
Specify Preferences Provide any additional specifications or preferences for your skincare routine.
-
Receive Personalized Routine The AI will generate a detailed skincare routine tailored to your needs, including product recommendations and ingredient insights.
-
Explore Ingredients Click on any ingredient in the sidebar to view detailed information about its properties and safety ratings.
Technologies Used
Frontend:
- React
- OpenCV.js
- Firebase
- Vertex AI
- Axios
Backend:
- Firebase Cloud Functions
- Gemini AI Model
Others:
- CSS3
- HTML5
Contact
For any inquiries or feedback, please reach out to:
Email: harry_yuan@berkeley.edu
Analysis
View
Metric
- 3
Figures cover GitHub contributors during the hackathon window. A co-authored commit counts in full for each author, so per-member totals add up to more than the whole-team figures.
Technology
- CSSIn code
- ExpressIn code
- FirebaseIn code
- HTMLIn code
- JavaScriptIn code
- ReactIn code
- Google GeminiClaimed
6 of 7 appear in the indexed code. 1 claimed on Devpost could not be matched to code, which may simply mean the tool leaves no trace in the repository.
AI coding agents
No AI coding agent signals were found in this repository.
Detected from committed agent config files and commit authorship. Absence of a signal is not proof an agent was unused.
Codebase size
Source size
61 KB
Source files
14
Counts recognized source files only; vendored directories, binaries and lockfiles are excluded, so this is smaller than the repository on disk.
Repository
h-yuan12/faceai
29 files · 4.4 MB · @ 86bb3fa
Structure
Interface
3 files · 10%Screens, components and styles rendered to the user.
API & routing
5 files · 17%Request entry points: routes, handlers and controllers.
Application logic
8 files · 28%Domain rules, services and shared utilities.
Supporting
Layers are inferred from where files sit in the tree, not from reading the code. A project that names its directories unconventionally will read oddly here — open the file browser to check anything the diagram implies.
Languages
- JavaScript75%
- CSS17%
- Markdown5%
- HTML3%
Share of indexed source by file size. Binary and vendored files are excluded.
Dependencies
package.json
npm · 16- @google-ai/generativelanguage
- @google-cloud/storage
- @testing-library/jest-dom
- @testing-library/react
- @testing-library/user-event
- axios
- busboy
- cors
- express
- firebase
- react
- react-circular-progressbar
- react-dom
- react-router-dom
- react-scripts
- web-vitals
functions/package.json
npm · 8- axios
- cors
- firebase-admin
- firebase-functions
- +4 more
Declared in the repository’s manifests at the indexed commit. A declared package is not proof it is used, and runtime dependencies are listed first.
This project’s features have not been analysed yet.
Export this project's context (description, README, evidence, key source files) to chat with an AI agent elsewhere.