Migrated the frontend from Static HTML to Static React

README.md

@@ -1,11 +1,176 @@
 ---
 title: ASR FairBench
-emoji: 🌍
-colorFrom: yellow
-colorTo: gray
+emoji: 🏆
+colorFrom: blue
+colorTo: green
 sdk: static
 pinned: false
-short_description: It is an ASR LLMs benchmarking tool focused on Fairness.
+short_description: Open-source ASR audit platform focused on fairness
+app_build_command: "npm run build"
+app_file: "dist/index.html"
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# ASR LEADERBOARD [[Link]](https://satyamr196-asr-fairbench.static.hf.space)
+
+## Screenshots
+![](/public/Req_home.png)
+![](/public/Req_result.png)
+![](/public/Req_result2.png)
+![](/public/Req_result3.png)
+![](/public/LBoard.png)
+![](/public/Dataset.png)
+
+
+### Features
+
+- **Intuitive UI** – A simple, clean, and visually appealing interface
+- **Fast Model Auditing** – Submit a model and get audited within minutes.
+- **Graphical Insight**s – Results are visualized using box plots and histograms, which can be exported as PDF. [📄Download Result PDF](public/Print_Results.pdf)
+- **Leaderboard Publishing** – Publish audited results to a dynamic leaderboard.
+- **Advanced Leaderboard Features** – Filter by model name, sort by any column, and export data as CSV or PDF.
+- **Optimized Frontend Performance** – Configured the React.js frontend to improve initial load time by 30–50%.
+- **Efficient Backend Processing** – Built with Flask and runs on Google Colab, utilizing GPUs for fast LLM inference.
+- **Fully Reproducible** – The application can be replicated from the GitHub codebase by following the provided instructions.
+- **Deployment** – Application is deployed on Hugging Face Spaces for broader accessibility. [[Link]](https://huggingface.co/spaces/satyamr196/ASR-FairBench)
+
+### Tech Stack
+
+**Client:** React, Vite, PrimeReact UI, Styled Components, Axios, Recharts, React Router, React-Plotly, React-katex  
+
+**Server(Using Docker):** Flask, Python, Hugging Face Transformers, Hugging Face Hub, Hugging Face Dataset, NumPy, Pandas, gunicorn, torch, statsmodels
+
+**Server(Using Google Colab):** Flask, Colab, Ngrok ,Python, PyMongo, Hugging Face Transformers, NumPy, Pandas, torch, statsmodels
+
+## API Reference
+
+#### Welcome message
+```http
+  GET /
+```
+
+#### Run Audit for Huggin Face ASR model
+
+```http
+  GET /api?ASR_model=<HF_model_name>
+```
+Example : 
+```
+{baseUrl}/api?ASR_model=openai/whisper-medium
+```
+#### Get leaderboard data
+```http
+  GET /fetch
+```
+#### Insert generated leaderboard data to database
+```http
+  POST /insert
+```
+
+
+## Run Locally
+####  <u>Prerequisites</u> :
+- **Node.js**: Make sure you have Node.js v22.12.0 or higher installed on your machine. You can download it from [Node.js official website](https://nodejs.org/).
+- **Docker**: You are required to install Docker Desktop  [(Link 1)](https://www.docker.com/products/docker-desktop/) [(Link 2)](https://docs.docker.com/get-started/get-docker/) to build and run docker container on your system.(Method 1)
+- **Google Colab**: You will need a Google account to access Google Colab.(Method 2)
+- **Ngrok**: Sign up for a free account on [ngrok](https://ngrok.com/) to expose your local server to the internet.(Method 2)
+
+###  <u>Frontend</u> :
+
+Clone the project from GitHub to your local machine.
+
+```bash
+  git clone https://github.com/SatyamR196/ASR-FairBench.git
+```
+
+Go to the project directory
+
+```bash
+  cd ASR-FairBench
+```
+
+Install dependencies
+
+```bash
+  npm install
+```
+
+Start the react app
+
+```bash
+  npm run dev
+```
+On running above instructions sucessfully, following message with website link should should appear in the terminal:    
+
+<img src="/public/CF1.png" alt="Project Logo" width="400">  
+Now you can open the link in the web browser, home page will look something like this :  
+
+<!-- <img src="/public/CF_home.png" alt="Project Logo" width="100%"> -->
+![](/public/CF_home.png)
+<!-- <img src="/public/CF_Leaderboard.png" alt="Project Logo" width="100%"> -->
+![](/public/CF_Leaderboard.png)
+#####  Congratulations 🤗 ! on sucessfully cloning the frontend, next we will be setting up the backend on google colab
+
+###  <u>Backend</u> : 
+
+#### <i><u>Method 1</u></i> : Using Docker + Hugging Face
+
+- Create account on hugging face and also generate acess token with read and write permission.
+
+![](/public/Access_token.png)
+
+- Then you can selet either clone the repository or duplicate the space option to create your own space.
+
+![](/public/clone_repo.png)
+
+- Then your server will be running on hugging face space. You can access the server clicking on 3 dots icon and then select "embed this space" option.
+
+- You can also run the server locally using docker. For that you need to install docker on your system. Then select the "Run locally" option as shown in above image.
+
+- Finally paste the server link in the frontend code > App.jsx > baseUrl. Now frontend will be able to access the backend server.
+
+![](/public/Url_app.png)
+
+
+#### <i><u>Method 2</u></i> : Using Google Colab
+- Open the Google Colab notebook using the link below.
+
+Link to Backend Server Collab notebook : <a href="https://colab.research.google.com/drive/1nIA8IyejvuRauvFbOCbpRlN1sEIK01Gh#scrollTo=_bZc5hkTEfWE"> Click here </a>
+
+- Open your google drive, Create a folder named "ASR_Fairness_Dataset" and upload the above colab notebook there.
+
+- You also need to upload the dataset to your google drive. Download the dataset from the link below, name it "asr_fairness_audio" and upload it to the same folder "ASR_Fairness_Dataset" in your google drive. [Dataset Link](https://drive.google.com/drive/folders/1lTT8NF9hVRpO4NYrn2qV8dNTmP9CNtVG)
+
+- Additionally, you can also download the CSV files which contains the results of the ASR models on the dataset. You need to place the folders in the folder "ASR_Fairness_Dataset" in your google drive.  
+ [OpenAi Model Result Link](https://drive.google.com/drive/folders/1mWnlz4wIfIYkxOLB8zjfta62Eg9ZaB4P?usp=drive_link)
+[Facebook Model Result Link](https://drive.google.com/drive/folders/1-VDnwbLPDrUWdw67x-KUYYQ46PFT5lbd?usp=drive_link)
+
+- finally, you need to download the test.csv file which contains the details about audio dataset like gender,ethnicity,etc. You need to place the folders in the folder "ASR_Fairness_Dataset" in your google drive.  
+ [test.csv Link](https://drive.google.com/file/d/1-54UJWB7g9pXB8t5X6wYdBA_KClRIgLf/view?usp=drive_link)
+
+- Now, your drive folder structure should look like this :  
+![](/public/Backend4.png)
+
+- Before running the Backend server on colab notebook, make sure to sign up on ngrok and get your auth token and replace it in colab notebook. [Ngok Website](https://dashboard.ngrok.com/get-started/your-authtoken)
+![](/public/ngrok_token.png)
+
+```bash
+!ngrok config add-authtoken <YOUR NGROK TOKEN>
+```
+
+- Now, run the colab notebook. It will ask for permission to access your google drive, allow it.
+
+- After running the notebook, ngok will give you a public url to access the backend server api. Copy the link and paste it in the frontend code, App.jsx , baseUrl.
+![](/public/Url_app.png)
+
+**Note :** If you change the name of any the folder, make sure to change the path in the colab notebook as well.
+
+#####  Sucessful 🤗 ! now you can run the application on your local machine
+
+### Feedback & Support
+
+If you have any feedback or need support, feel free to reach out to us:
+
+- **Anand Rai**: [raianand.1991@gmail.com](mailto:raianand.1991@gmail.com)
+- **Prof. Animesh Mukherjee**: [animeshm@gmail.com](mailto:animeshm@gmail.com)
+- **Satyam Rahangdale**: [satyamrahangdale196@gmail.com](mailto:satyamrahangdale196@gmail.com)
+- **Utkarsh Anand**: [ua28012006@gmail.com](mailto:ua28012006@gmail.com)

assets/KaTeX_Fraktur-Bold-CL6g_b3V.woff2

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:74444efd593c005e3f4573b44524704c0af0a937fe911cca9e94068d0d140d3f
-size 11348

assets/KaTeX_Fraktur-Regular-CTYiF6lA.woff2

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:51814d270d06ff0255dba0799994fa4d8c84d11f09951d47595f4abb1f3602dc
-size 11316

assets/KaTeX_Main-Bold-Cx986IdX.woff2

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:0f60d1b897938ec918c8ce073092411baf9438f6739465693ff18b0f9d20b021
-size 25324

assets/KaTeX_Main-BoldItalic-DxDJ3AOS.woff2

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:99cd42a3c072d918f2f44984a807cf7aa16e13545fd0875fc07c6c65f99e715b
-size 16780

assets/KaTeX_Main-Italic-NWA7e6Wa.woff2

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:97479ca6cce906abc961ecac96faa5f9ca2e61b8e7670d475826bcdee9a7c267
-size 16988

assets/KaTeX_Main-Regular-B22Nviop.woff2

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:c2342cd8b869e01752a9321dc17213fc40d4d04c79688c1d43f2cf316abd7866
-size 26272

assets/KaTeX_Math-BoldItalic-CZnvNsCZ.woff2

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:dc47344dbb6cb5b655c8460d561f4df5f501b90c804ad3c6cec65fe322351ab1
-size 16400

assets/KaTeX_Math-Italic-t53AETM-.woff2

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:7af58c5ec8f132a2ddde9027c6d7814decce4d3b822a11192a42a20e2e973264
-size 16440

assets/KaTeX_SansSerif-Bold-D1sUS0GD.woff2

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:e99ae51144bf1232efcc1bfe5add36262c6866b0faab24fa75740e1b98577a62
-size 12216

assets/KaTeX_SansSerif-Italic-C3H0VqGB.woff2

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:00b26ac825e2095056396e0553b8ac26d3f8ad158c3826e28b4c45b385c4714a
-size 12028

assets/KaTeX_SansSerif-Regular-DDBCnlJ7.woff2

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:68e8c73ef42afd3ccec58bf0fba302cce448938e7fc020a5e31f8a952eee1342
-size 10344

assets/KaTeX_Script-Regular-D3wIWfF6.woff2

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:036d4e95149b69ff9bcc0cd55771efeb25ffa3947293e69acd78d5ac328c684b
-size 9644

assets/KaTeX_Size1-Regular-mCD8mA8B.woff2

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:6b47c40166b6dbe21a5dfca7718413f2147fd2399be1ba605d8ad39cedf25dfe
-size 5468

assets/KaTeX_Size2-Regular-Dy4dx90m.woff2

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:d04c54219f9eaec6d4d4fd42dfb28785975a4794d6b2fc71e566b9cd6db842dd
-size 5208