Merge pull request #81 from Jai0212/readme-virat

#80 updated readme

README.md

@@ -1,29 +1,31 @@
 # Bias Detection and Visualization Tool
 
-[![Netlify Status](https://api.netlify.com/api/v1/badges/9d9acd0b-6a91-4ec6-9320-88890ccc00eb/deploy-status)](https://app.netlify.com/sites/cash-app-bias-busters/deploys)
-[![License](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
-[![Python](https://img.shields.io/badge/Python-3.9-blue)](https://www.python.org/)
-[![Flask](https://img.shields.io/badge/Flask-2.1.1-blue)](https://flask.palletsprojects.com/)
-[![React](https://img.shields.io/badge/React-17.0.2-blue)](https://reactjs.org/)
-[![MySQL](https://img.shields.io/badge/MySQL-8.0-blue)](https://www.mysql.com/)
+[![Netlify Status](https://api.netlify.com/api/v1/badges/9d9acd0b-6a91-4ec6-9320-88890ccc00eb/deploy-status?color=brightgreen)](https://app.netlify.com/sites/cash-app-bias-busters/deploys)
+[![License](https://img.shields.io/badge/MIT_License-brightgreen)](https://opensource.org/licenses/MIT)
+[![Python](https://img.shields.io/badge/Python-blueviolet)](https://www.python.org/)
+[![Flask](https://img.shields.io/badge/Flask-darkorange)](https://flask.palletsprojects.com/)
+[![React](https://img.shields.io/badge/React-deeppink)](https://reactjs.org/)
+[![MySQL](https://img.shields.io/badge/MySQL-dodgerblue)](https://www.mysql.com/)
 
 # Bias Detection and Visualization Tool
 
-As part of the Technology Leadership Initiative, we developed a bias detection and visualization tool in partnership with Cash App. This tool is designed as a dashboard that enables Cash App machine learning (ML) engineers to:
+As part of the 2024 cohort of the Technology Leadership Initiative, we developed a platform in collaboration with Cash App to assist machine learning engineers in identifying and visualizing biases in their models.
 
-- Import their transaction data and transaction approval models.
-- Select core demographic categories like gender, age, and race.
+- Users can upload their transaction data and approval models, which are processed by a Flask-based backend utilizing the Fairlearn library to detect biases.
+- The results are intuitively visualized on the frontend using dynamic charts powered by Chart.js.
+- The platform allows users to select key demographic categories such as gender, age, and race and further refine these by specifying subcategories (e.g., age ranges like 18–25).
+- Additionally, users can upload multiple models to compare biases across different demographic categories and models, providing a comprehensive understanding of their systems' performance and fairness.
+- Built with a focus on clean architecture, the platform ensures a modular and maintainable design with extensive testing coverage.
 
 ## Index
 
 1. [Title](#bias-detection-and-visualization-tool)
 2. [Description](#short-description)
 3. [Motivation](#motivation)
-4. [How to Run](#how-to-runuse)
-5. [Features](#features)
-6. [Technical Implementation Details](#technical-implementation-details)
+4. [Features](#features)
+5. [Technical Implementation Details](#technical-implementation-details)
+6. [How to Run](#how-to-runuse)
 7. [Acknowledgements/Credits](#acknowledgementscredits)
-8. [License](#license)
 
 ## Motivation
 
@@ -42,13 +44,52 @@ Our backend analyzes the bias in the selected demographic categories using the F
 - <b>Visualizations:</b> Generate intuitive graphs and charts using Chart.js for detailed insights.
 - <b>Model Comparison:</b> Easily compare fairness metrics across different models.
 
+## Technical Implementation Details
+
+- **Backend**: Built using Python with the Flask framework, the backend handles data processing and bias detection. Hosted on **Render**.
+
+  - **Packages Used**:
+    - `numpy`: For numerical computations and matrix operations used in model analysis.
+    - `pandas`: For handling and preprocessing data.
+    - `scikit-learn`: For building and training the machine learning models.
+    - `scipy`: For advanced statistical computations required in analysis.
+    - `mysql-connector`: To establish a connection with the MySQL database and execute queries.
+    - `pytest`: For unit testing the backend to ensure robust and error-free functionality.
+
+- **Frontend**: Built using React and Vite, the frontend is responsible for the interactive dashboard and visualizations. Hosted on **Netlify**.
+
+  - **Packages Used**:
+    - `react-joyride`: To implement an onboarding tutorial that guides first-time users with step-by-step instructions on using the platform.
+    - `sweetalert2`: For displaying elegant and customizable alerts, such as login prompts or error messages.
+    - `axios-retry`: To automatically retry failed API requests to the backend, ensuring smooth user experience even under intermittent connectivity.
+
+- **Database**: We use **MySQL** to store all the data uploaded by users. The database is hosted on **Aiven**.
+
+- **Fairlearn**: This Python library is used for detecting and assessing fairness in ML models.
+
+- **Chart.js**: Used to render dynamic and interactive graphs and charts to visualize bias metrics.
+
+- **Clean Architecture**:  
+  The project follows a **Clean Architecture** approach, organizing the system into separate layers such as presentation, business logic, and data access. This ensures modularity, maintainability, and scalability of the application.
+
+  - **Testing**:  
+    We use **pytest** for unit and integration testing. Pytest helps ensure the correctness of the application’s logic by automating tests for backend functionality, database interactions, and model processing.
+
 ## How to run/use
 
-If you want to use the project, simply visit the publicly hosted website: [https://cash-app-bias-busters.netlify.app/](https://cash-app-bias-busters.netlify.app/)
+If you want to use the project, simply visit the publicly hosted website: [https://cash-app-bias-busters.netlify.app/](https://cash-app-bias-busters.netlify.app/).
+The backend is hosted on render and can be accessed through the publicly available link [https://cash-app-bias-busters.onrender.com](https://cash-app-bias-busters.onrender.com)
+Please note, the backend may take up to a minute to start up on the first visit.
 .
 
 If you'd like to run it locally instead, follow these steps:
 
+### Clone the repository:
+
+```
+git clone https://github.com/Jai0212/Cash-App-Bias-Busters.git
+```
+
 ### Backend:
 
 ```
@@ -64,14 +105,6 @@ cd frontend
 npm run dev
 ```
 
-## Technical Implementation Details
-
-- <b>Backend:</b> Built using <b>Python</b> with the <b>Flask</b> framework, the backend handles data processing and bias detection. Hosted on <b>Render</b>.
-- <b>Frontend:</b> Built using <b>React</b> and Vite, the frontend is responsible for the interactive dashboard and visualizations. Hosted on <b>Netlify</b>.
-- <b>Database:</b> We use <b>MySQL</b> to store all the data uploaded by users. The database is hosted on Aiven.
-- <b>Fairlearn:</b> This Python library is used for detecting and assessing fairness in ML models.
-- <b>Chart.js:</b> Used to render dynamic and interactive graphs and charts to visualize bias metrics.
-
 ## Acknowledgements/Credits
 
 1. This project makes use of the Fairlearn library for bias detection and fairness assessments.
@@ -89,13 +122,5 @@ npm run dev
 }
 ```
 
-2. Special thanks to [https://cash.app/](Cash App) for their collaboration and support in this initiative.
-
-## License
-
-This project is licensed under the MIT License. You are free to use, modify, and distribute this project as per the license terms.
-
-### MIT License
-
-This project is licensed under the MIT License. You are free to use, modify, and distribute this project as per the license terms.
-See the [LICENSE.txt](/LICENSE.txt) file for more details.
+2. Special thanks to [Cash App](https://www.cash.app)
+   for their collaboration and support in this initiative.

frontend/src/pages/DashboardPage/Dashboard/Dashboard.css

@@ -37,15 +37,16 @@
 
 /* Hover state */
 .timeframe-buttons button:hover {
-  background-color: #474747;
   color: #fafafa;
   font-weight: bold;
+  outline: 3px solid #0088cc; /* Blue outline for focus */
+  background-color: #0088cc;
 }
 
 /* Focus state (for when tabbing into buttons) */
 .timeframe-buttons button:focus {
   outline: 3px solid #0088cc; /* Blue outline for focus */
-  background-color: #474747;
+  background-color: #0088cc;
   color: #fafafa;
   font-weight: bold;
 }
@@ -227,6 +228,7 @@
 .demog-clas > h2 {
   font-family: "Roboto", Arial, sans-serif;
   font-size: 2rem;
+  margin-bottom: 5vh;
 }
 
 body,
@@ -249,6 +251,7 @@ html {
 .generate-btn-container {
   width: 100%;
   margin-left: 0.75vw;
+  margin-top: 5vh;
 }
 
 /* .text-container {
@@ -288,16 +291,16 @@ html {
 .select-options1 {
   display: flex;
   flex-direction: column;
-  gap: 1vh;
-  margin-top: 1vh;
+  gap: 2vh;
+  margin-top: 2vh;
   color: #fafafa;
 }
 
 .select-options2 {
   display: flex;
   flex-direction: column;
-  gap: 1vh;
-  margin-top: 1vh;
+  gap: 2vh;
+  margin-top: 2vh;
   color: #fafafa;
 }