FaceTIME

The first AI-powered acne detection and analysis tool that helps you reach your maximum facial potential through personalized recommendations and tracks progress.

Comment

Demo: https://facetime-machine.netlify.app/

Inspiration

Millions of people around the world struggle with acne and skin conditions that impact their confidence and mental health. This is coupled with diseases like skin cancer. In fact, 85% of people will experience acne in some point in their lives, and unfortunately, this is the cause for distress for teens and adults alike. I was inspired by this because I noticed that many apps available that tried remedy this are fairly discouraging and don't have a kind approach to help solve this issue. This led me to create FaceTIME, which allows users to look at a before and after along with a graph to actually visualize the progress, allowing for better acne treatment.

What it does

FaceTIME is an AI-powered acne detection and facial analysis tool that helps users track their skincare journey over time. Here's how it works:

  • Upload an Image: Users can upload a facial photo directly from their device.
  • AI Acne Detection: Using a custom-trained model via the Roboflow API, the app detects and classifies different types of acne (e.g., whiteheads, blackheads, papules, pustules).
  • Visual Feedback: Detected acne is highlighted with bounding boxes and labeled by type using OpenCV, giving users a clear understanding of problem areas.
  • Personalized Skin Score: Based on acne severity and distribution, FaceTIME calculates a skin health score and provides personalized feedback for improvement. It uses the various types of acne and gives specific tips for each type detected.
  • Progress Tracking Graph: An interactive graph shows how the user's skin score improves over time, helping to visualize results and stay motivated.
  • Time Machine Feature: Users can scroll through a timeline of their uploaded images to view skin progress day-by-day, compare "before and after" states, and download images from any day.
  • Secure & Simple Interface: The app is designed with a clean, secure interface so users can privately monitor their skincare journey with ease.

How we built it

I built FaceTIME using React, Next.js, and Tailwind CSS for the frontend to create a responsive and user-friendly interface. This was later deployed using Netlify. The backend runs on Flask and Python, handling image uploads and processing. I used the Roboflow API to detect and classify different types of acne, and OpenCV to draw bounding boxes on the detected areas. After analyzing the image, I calculated a "skin score" by holistically looking at the amount of detections and the total area of the bounding boxes around detections. This score ranged from 0-100. I also mapped different types of acne to different recommendations. Lastly, I created the graph using charts.js in order for users to see their progress.

Challenges I ran into

One of the biggest challenges I faced was working with the Roboflow model. The first model I trained was highly accurate but only detected a single acne type, which limited the feedback I could provide. To solve this, I used a multimodal approach, where one model handled precise bounding box detection and another focused on classifying different types of acne. Combining the outputs added complexity, but it gave users more personalized insights.

I also encountered several issues on the frontend. Designing the original landing page and implementing the React components was fairly difficult, as it took me a while to decide how I wanted everything to look like. This was especially problematic when managing image uploads, graph rendering, and conditional UI based on detection results.

On the backend, I initially tried hosting my Flask API using Google Colab, but the public URL setup didn't work and didn't show up. After multiple attempts, I decided to migrate the backend to Replit, which allowed for a more stable and persistent environment to serve my Python-based API.

Accomplishments that I'm proud of

I'm proud of successfully using Flask to bridge the gap between my Python backend and the React-based frontend, allowing seamless communication and real-time processing of user images. I'm also proud of integrating the Roboflow model to not only detect acne with bounding boxes but also provide personalized suggestions based on the types and severity of acne detected.

What I learned

Throughout this project, I learned how to use Flask to build a Python-based API and connect it to a React frontend using POST requests for image processing and data transfer. I also gained experience working with JavaScript libraries like Chart.js to create a graph for tracking user progress. Additionally, I deepened my understanding of integrating third-party APIs like Roboflow and managing CORS issues.

What's next for FaceTIME

I plan to add a face morphing feature to enhance the "time travel" experience. This will allow users to visually see their pimples and blemishes fade over time through smooth transitions between images (morphing). I also want to expand the detection capabilities beyond acne to include other skin conditions like stress-induced skin changes, wrinkles, and dark spots, making the platform more comprehensive. Finally, I hope to implement daily reminder notifications to encourage users to take consistent progress photos, helping them stay on track and committed to their skincare journey.

Share this project:

Updates