added React app files for testing, build commands added to the readme.md metadata

.gitignore

@@ -1,23 +1,26 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+*.env
+.gitignore
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -1,82 +1,176 @@
 ---
-title: Static React App Test
-emoji: 🐠
-colorFrom: indigo
-colorTo: red
+title: Static React Vite App ASR FairBench
+emoji: 🐨
+colorFrom: blue
+colorTo: green
 sdk: static
 pinned: false
-app_build_command: npm run build
-app_file: build/index.html
-short_description: Testing how static apps are created using react template
+short_description: Static vite app with React
+app_build_command: "npm run build"
+app_file: "dist/index.html"
 ---
 
-# Getting Started with Create React App
+# ASR LEADERBOARD [[Link]](https://satyamr196-asr-fairbench.static.hf.space)
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+## Screenshots
+![](/public/Req_home.png)
+![](/public/Req_result.png)
+![](/public/Req_result2.png)
+![](/public/Req_result3.png)
+![](/public/LBoard.png)
+![](/public/Dataset.png)
 
-## Available Scripts
 
-In the project directory, you can run:
+### Features
 
-### `npm start`
+- **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)
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+### Tech Stack
 
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
+**Client:** React, Vite, PrimeReact UI, Styled Components, Axios, Recharts, React Router, React-Plotly, React-katex  
 
-### `npm test`
+**Server(Using Docker):** Flask, Python, Hugging Face Transformers, Hugging Face Hub, Hugging Face Dataset, NumPy, Pandas, gunicorn, torch, statsmodels
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+**Server(Using Google Colab):** Flask, Colab, Ngrok ,Python, PyMongo, Hugging Face Transformers, NumPy, Pandas, torch, statsmodels
 
-### `npm run build`
+## API Reference
 
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+#### Welcome message
+```http
+  GET /
+```
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+#### Run Audit for Huggin Face ASR model
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+```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
+```
 
-### `npm run eject`
 
-**Note: this is a one-way operation. Once you `eject`, you can't go back!**
+## 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)
 
-If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+###  <u>Frontend</u> :
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
+Clone the project from GitHub to your local machine.
 
-You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
+```bash
+  git clone https://github.com/SatyamR196/ASR-FairBench.git
+```
 
-## Learn More
+Go to the project directory
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+```bash
+  cd ASR-FairBench
+```
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+Install dependencies
 
-### Code Splitting
+```bash
+  npm install
+```
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+Start the react app
 
-### Analyzing the Bundle Size
+```bash
+  npm run dev
+```
+On running above instructions sucessfully, following message with website link should should appear in the terminal:    
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+<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 :  
 
-### Making a Progressive Web App
+<!-- <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
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+###  <u>Backend</u> : 
 
-### Advanced Configuration
+#### <i><u>Method 1</u></i> : Using Docker + Hugging Face
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+- Create account on hugging face and also generate acess token with read and write permission.
 
-### Deployment
+![](/public/Access_token.png)
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+- Then you can selet either clone the repository or duplicate the space option to create your own space.
 
-### `npm run build` fails to minify
+![](/public/clone_repo.png)
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+- 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)

eslint.config.js

@@ -0,0 +1,33 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default [
+  { ignores: ['dist'] },
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...reactHooks.configs.recommended.rules,
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="/Logo_small.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ASR-FairBench</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package.json

@@ -1,39 +1,47 @@
 {
-  "name": "react-template",
-  "version": "0.1.0",
+  "name": "frontend",
   "private": true,
-  "dependencies": {
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.3.0",
-    "@testing-library/user-event": "^13.5.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
-  },
+  "proxy": "http://localhost:3000",
+  "version": "0.0.0",
+  "type": "module",
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+  "dependencies": {
+    "axios": "^1.8.4",
+    "chart.js": "^4.4.8",
+    "jspdf": "^3.0.1",
+    "jspdf-autotable": "^5.0.2",
+    "katex": "^0.16.22",
+    "lucide-react": "^0.485.0",
+    "mongodb": "^6.15.0",
+    "plotly.js": "^3.0.1",
+    "primeflex": "^4.0.0",
+    "primeicons": "^7.0.0",
+    "primereact": "^10.9.3",
+    "react": "^19.0.0",
+    "react-d3-speedometer": "^3.1.1",
+    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.54.2",
+    "react-katex": "^3.1.0",
+    "react-plotly.js": "^2.6.0",
+    "react-router-dom": "^7.4.0",
+    "react-to-print": "^3.1.0",
+    "recharts": "^2.15.1",
+    "styled-components": "^6.1.16"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+  "devDependencies": {
+    "@eslint/js": "^9.21.0",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.21.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^15.15.0",
+    "vite": "^6.2.4"
   }
 }

public/Print_Results.pdf

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

src/App.css

@@ -1,34 +1,18 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
+@import 'primeicons/primeicons.css';
+@import 'primeflex/primeflex.css';
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+#root {
+  /* max-width: 1280px; */
+  margin: 0 auto;
+  padding: 0rem;
+  text-align: center;
 }
-
-.App-link {
-  color: #61dafb;
+html,body{
+  margin: 0;
+  padding: 0;
 }
 
-@keyframes App-logo-spin {
+@keyframes logo-spin {
   from {
     transform: rotate(0deg);
   }
@@ -36,3 +20,4 @@
     transform: rotate(360deg);
   }
 }
+

src/App.jsx

@@ -0,0 +1,189 @@
+import { useState } from "react";
+import { media } from "./Utils/helper.js";
+// import "primereact/resources/themes/lara-light-cyan/theme.css";
+import './App.css'
+import "primereact/resources/themes/lara-light-cyan/theme.css";
+// import "primereact/resources/themes/bootstrap4-light-blue/theme.css"
+import axios from "axios";
+import {
+  Routes,
+  Route,
+  Navigate,
+  useLocation
+} from "react-router-dom";
+import { Home } from "./components/Home";
+import { Request } from "./components/Request";
+import { Leaderboard } from "./components/Leaderboard";
+import Nav from "./styled_components/Nav";
+import styled from "styled-components";
+import { Toast } from "primereact/toast";
+import { React, useRef, useEffect } from "react";
+import { useContext } from "react";
+import { DataContext } from "./DataContext";
+import Logo from "./assets/logo.png"
+import Metrics from "./components/Metrics";
+import Dataset from "./components/Dataset";
+import Contact from "./components/Contact";
+import ProgressToast from "./styled_components/ProgressToast";
+import SpinnerIcon from "./styled_components/SpinnerIcon";
+import { Password } from 'primereact/password';
+
+function App() {
+  const toast = useRef(null);
+  const [baseUrl, setBaseUrl] = useState("https://satyamr196-asr-fairbench-sever-v2.hf.space")
+  // const [baseUrl,setBaseUrl] = useState("http://localhost:7860") 
+  console.log(baseUrl);
+  const location = useLocation();
+
+  const showSucess = () => {//For toast
+    toast.current.show({ severity: 'success', summary: 'Success', detail: 'Model added to Leaderboard 🤗' });
+  };
+  const showError = () => {//For toast
+    toast.current.show({ severity: 'error', summary: 'Error', detail: 'Error adding model to Leaderboard 🥹' });
+  };
+  const showInfo = () => {//For toast
+    toast.current.show({ severity: 'info', summary: 'Info', detail: 'Model already added to the Leaderboard 🫢' });
+  };
+  return (
+    <>  
+      <Wrapper>
+        <Toast ref={toast} />
+        <HeadImg>
+          <img src={Logo}></img>
+        </HeadImg>
+        <Text>
+          🎙️ <b>ASR-FAIRBENCH</b> is an open benchmarking platform dedicated to evaluating the <b>fairness and accuracy</b> of Automatic Speech Recognition (ASR) models.
+          Our mission is to assess ASR models' performance across diverse demographic groups using the <b><a href="https://ai.meta.com/datasets/speech-fairness-dataset/" target="_blank">Fair Speech Dataset</a></b>.
+
+          Models are ranked based on the <b>Fairness Adjusted Accuracy Score (FAAS)</b>, which integrates both <b>Word Error Rate (WER)</b> and a <b>Fairness Score</b>, ensuring that models deliver equitable performance across different accents, genders, and age groups.
+
+          Explore the 📈 <b>Metrics</b> tab for details on our evaluation process and visit the 📂 <b>Dataset</b> tab for a summary of the Fair Speech Dataset.
+
+          Think your ASR model is both inclusive and high-performing? Put it to the test and claim your spot on the leaderboard! ✨
+          <b>📄<a href="http://arxiv.org/abs/2505.11572" target="_blank">(Paper Link)</a>  </b>&nbsp;
+          <b><i className="pi pi-github"></i>  <a href="https://github.com/SatyamR196/ASR-FairBench" target="_blank">(Github Link)</a></b>
+        </Text>
+        <div className="container">
+          <Nav />
+          <Routes>
+            <Route path="/home" element={<Home baseUrl={baseUrl} />} />
+            <Route path="/request" element={<Request showSucess={showSucess} showError={showError} showInfo={showInfo} baseUrl={baseUrl} />} />
+            <Route path="/leaderboard" element={<Leaderboard baseUrl={baseUrl} />} />
+            <Route path="/metrics" element={<Metrics />} />
+            <Route path="/dataset" element={<Dataset />} />
+            <Route path="/contact" element={<Contact />} />
+            <Route path="/*" element={<Navigate to="/leaderboard" />} />
+          </Routes>
+        </div>
+      </Wrapper>
+
+      <div style={{ display: location.pathname === "/request" ? "block" : "none" }}>
+        <ProgressToast baseUrl={baseUrl} />
+      </div>
+    </>
+  );
+}
+
+const HeadImg = styled.div`
+display: flex;
+justify-content: center; // Centers the image horizontally
+align-items: center; // Aligns image vertically
+width: 100%;
+margin: 1rem 0 0 0;
+
+img {
+  max-width: 300px; // Adjust size as needed
+  height: auto; // Maintain aspect ratio
+}
+`
+const Text = styled.p`
+  /* color: gray; */
+  color: #4b5563; 
+  padding-inline: 5rem;
+  margin-top:0;
+  margin-bottom:0;
+  font-size:1.05rem !important ;
+  @media ${media.tablet} {
+    font-size: 14px;
+    padding-inline: 2rem;
+  }
+  @media ${media.mobile} {
+    font-size: 12px;
+    padding-inline: 0.8rem;
+  }
+`
+
+const Wrapper = styled.div`
+  /* position: 'relative'; */
+  /* background: linear-gradient(to right, #6dd5fa, #2980b9); */
+  background-color: #ffffff;
+  /* background-color: #fa2020; */
+  color: black;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: left;
+  align-items: left;
+  text-align: left;
+  font-family: Arial, sans-serif;
+
+  .container {
+    width: 90%;
+    margin: auto;
+    /* margin-top: 3rem; */
+    padding: 2rem;
+    background: transparent;
+    /* background: rgb(255, 255, 255); */
+    backdrop-filter: blur(12px);
+    /* box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37); */
+    border-radius: 20px;
+    transition: transform 0.3s ease-in-out;
+    @media ${media.tablet} {
+      width: 95%;
+      padding: 1.2rem;
+    }
+    @media ${media.mobile} {
+      width: 98%;
+      padding: 0.8rem;
+    }
+  }
+  h1 {
+    font-size: 3rem;
+    color: #000000;
+    /* color: #3b82f6; */
+    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
+    margin-bottom: 2rem;
+  }
+  h3{
+    color: #000000;
+  }
+  p {
+    /* font-size: 1.2rem; */
+    /* color: #000000; */
+    /* margin-bottom: 2rem; */
+  }
+  .graph-container {
+    display: none;
+    margin-top: 2rem;
+    text-align: center;
+  }
+  canvas {
+    margin: 20px auto;
+    max-width: 600px;
+  }
+  hr {
+    margin: 1.5px 0;
+    border: none;
+    border-top: 1.5px solid rgba(25, 75, 255, 0.7);
+  }
+  input {
+    padding: 10px;
+    /* margin-bottom: 20px; */
+    border: none;
+    border-radius: 10px;
+    /* width: 65%; */
+    text-align: center;
+  }
+`;
+
+export default App;

src/DataContext.jsx

@@ -0,0 +1,13 @@
+import { createContext, useState } from "react";
+
+export const DataContext = createContext();
+
+export const DataProvider = ({ children }) => {
+  const [sharedData, setSharedData] = useState(null);
+
+  return (
+    <DataContext.Provider value={{ sharedData, setSharedData }}>
+      {children}
+    </DataContext.Provider>
+  );
+};

src/Utils/helper.js

@@ -0,0 +1,12 @@
+// styles/media.js
+export const sizes = {
+    mobile: '480px',
+    tablet: '768px',
+    laptop: '1200px',
+};
+
+export const media = {
+    mobile: `(max-width: ${sizes.mobile})`,
+    tablet: `(max-width: ${sizes.tablet})`,
+    laptop: `(max-width: ${sizes.laptop})`,
+};

src/components/Contact.jsx

@@ -0,0 +1,86 @@
+import React from 'react'
+import styled from 'styled-components'
+import CImg from '../assets/illustration-your-users.svg'
+import ScoreCard from '../styled_components/Scorecard'
+import { media } from '../Utils/helper'
+
+function Contact() {
+  return (
+    <Container>
+      <h1>Contact Us</h1>
+      <Mdiv>
+        <Ldiv>
+            <ScoreCard direction="column" label="Prof. Animesh Mukherjee :" score="animeshm@cse.iitkgp.ac.in"></ScoreCard>
+            <ScoreCard direction="column" label="Anand Rai :" score="raianand.1991@gmail.com"></ScoreCard>
+            <ScoreCard direction="column" label="Utkarsh Anand :" score="ua28012006@gmail.com"></ScoreCard>
+            <ScoreCard direction="column" fontSize={1.3} label="Satyam R :" score="satyamrahangdale196@kgpian.iitkgp.ac.in"></ScoreCard>
+        </Ldiv>
+        <Rdiv>
+            <Image src={CImg}></Image>
+        </Rdiv>
+      </Mdiv>
+    </Container>
+  )
+}
+
+export default Contact
+
+const Container = styled.div`
+    display: flex;
+    flex-direction: column;
+    padding: 2rem 1rem;
+    padding-top: 0;
+    margin-inline: auto;
+    /* align-items: center; */
+    /* justify-content: center; */
+    @media ${media.tablet} {
+      padding: 1.2rem;
+    }
+    @media ${media.mobile} {
+      padding: 0.8rem;
+    }
+`
+const Mdiv = styled.div`
+  display: flex;
+  gap: 3rem;
+  align-items: flex-start;
+
+
+  @media ${media.laptop} {
+    gap: 2rem;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  @media ${media.tablet} {
+    flex-direction: column;
+    gap: 2rem;
+    align-items: center;
+  }
+`;
+
+const Ldiv = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  flex: 1;
+  min-width: 280px;
+  max-width: 100%;
+`;
+
+const Rdiv = styled.div`
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const Image = styled.img`
+  width: 100%;
+  /* max-width: 500px; */
+  height: auto;
+
+  @media ${media.tablet} {
+    max-width: 100%;
+  }
+`;

src/components/Dataset.jsx

@@ -0,0 +1,127 @@
+import React from 'react'
+import styled from 'styled-components'
+import AgeGroup from '../assets/Age_group.png'
+import SEGGroup from '../assets/SEG_group.png'
+import EthGroup from '../assets/Ethnicity.png'
+import FAWGroup from '../assets/FAW.png'
+import Dateset from '../assets/Dataset_tableHQ.png'
+import ClusterGroup from '../assets/Cluster.png'
+import ScoreCard from '../styled_components/Scorecard'
+import { Button } from 'primereact/button';
+import { media } from '../Utils/helper'
+
+function Dataset() {
+  return (
+    <Container>
+      <h1>Dataset Overview</h1>
+      
+      <Section>
+        <Head>Introduction</Head>
+        <Para>
+          We use Meta's FairSpeech dataset to conduct fairness audits of speech recognition models submitted to our leaderboard. This dataset was specifically designed to address fairness gaps across diverse demographic groups. The complete FairSpeech dataset includes <b>26,471 utterances</b> recorded by <b>593 individuals</b> across the United States. Participants self-identified their personal information, including age, gender, ethnicity, geographic location, and whether they consider themselves native English speakers.
+        </Para>
+        <Para>
+          For our leaderboard evaluation, we use a stratified 10% sample from the FairSpeech dataset. We run inference using these test samples to evaluate the fairness of submitted models across different demographic groups. The original dataset spans seven domains: <b>music</b>, <b>capture</b>, <b>utilities</b>, <b>notification control</b>, <b>messaging</b>, <b>calling</b>, and <b>dictation</b>. In response to these domain-specific prompts, participants recorded audio commands such as searching for songs or making plans to meet friends.
+        </Para>
+        <Button label="Learn more about FairSpeech" icon="pi pi-file" link onClick={() => window.open('https://ai.meta.com/datasets/speech-fairness-dataset/', '_blank')} />
+      </Section>
+
+      <Gridbox>
+        <ScoreCard width="32rem" label="Dataset Source:" score="FairSpeech Dataset" />
+        <ScoreCard width="32rem" label="Dataset Released on: " score="JULY 13, 2023" />
+        <ScoreCard width="32rem" label="Total Audios in Original Dataset: " score={26471} />
+        <ScoreCard width="32rem" label="Evaluation Sample Size: " score="2647" />
+        <ScoreCard width="32rem" label="Average utterance length: " score="7.42 sec" />
+        <ScoreCard width="32rem" label="Primary Data Type: " score="Audio (.wav)" />
+      </Gridbox>
+
+      <Section>
+        <Head>Our Testing Strategy: Stratified Sampling</Head>
+        <Para mb={1}>
+          For our leaderboard evaluations, we employ stratified sampling to select a representative 10% subset from the FairSpeech dataset. Stratified sampling is critical in Automatic Speech Recognition (ASR) fairness testing to ensure that test sets reflect the overall dataset's distribution. This approach ensures demographic factors, background noise conditions, and linguistic diversity are properly represented, allowing us to evaluate model robustness and fairness across varied populations.
+        </Para>
+        <Image src={Dateset} />
+      </Section>
+
+      <Section>
+        <Head>Age Group by Gender Distribution</Head>
+        <Image src={AgeGroup} />
+      </Section>
+
+      <Section>
+        <Head>Socioeconomic Group by Gender Distribution</Head>
+        <Image src={SEGGroup} />
+      </Section>
+
+      <Section>
+        <Head>Ethnicity Distribution</Head>
+        <Image src={EthGroup} />
+      </Section>
+
+      <Section>
+        <Head>Frequently Used Words</Head>
+        <Image src={FAWGroup} />
+      </Section>
+
+      
+    </Container>
+  )
+}
+
+export default Dataset;
+
+const Container = styled.div`
+    display: flex;
+    flex-direction: column;
+    padding: 2rem 0rem;
+    padding-top: 0;
+    margin-inline: auto;
+    max-width: 1200px; /* To control the width */
+`;
+
+const Gridbox = styled.div`
+    display: grid;
+    margin: auto;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 2rem 4rem;
+    padding: 2rem 0;
+    @media ${media.tablet} {
+      grid-gap: 3rem;
+    }
+    @media ${media.mobile} {
+      display: flex;
+      flex-direction: column;
+      gap: 1.2rem;
+    }
+`;
+
+const Section = styled.section`
+    margin-bottom: 3rem;
+`;
+
+const Head = styled.h6`
+    font-size: 2rem;
+    color: #3b82f6;
+    margin-bottom: 1rem;
+    text-decoration: underline;
+`;
+
+const Image = styled.img`
+    max-width: 80%;
+    display: block;
+    margin: 1rem auto;
+    @media ${media.tablet} {
+        max-width: 90%;
+    }
+    @media ${media.mobile} {
+    max-width: 100%;
+    }
+`;
+
+const Para = styled.p`
+    color: #4b5563;
+    font-size: 1.4rem;
+    line-height: 1.8;
+    margin-bottom: ${props => props.mb || 2}rem;
+    text-align: justify;
+`;

src/components/Home.jsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { useState } from 'react'
+import reactLogo from '../assets/react.svg'
+import viteLogo from '/vite.svg'
+import axios from 'axios'
+import Button from '../styled_components/Button'
+import { Link } from 'react-router-dom'
+import { Navigate, useNavigate } from 'react-router-dom'
+import ScoreCard from '../styled_components/Scorecard'
+import { Leaderboard } from './Leaderboard'
+import styled from 'styled-components'
+import { useContext } from 'react'
+import { Head } from './Request'
+
+function Home({baseUrl}) {
+  let [result, setResult] = useState(false);
+  const navigate = useNavigate();
+
+  const getData = async () => {
+    const res = await axios.get('http://localhost:3000');
+    console.log(res.data);
+    setResult(res.data);
+  }
+  const handleClick = ()=>{
+    console.log("hi navigatering");
+    navigate('/leaderboard');
+  }
+
+  return (
+    <>
+        <h1>ASR fairness benchmark</h1>
+        {/* <button onClick={getData}> GET DATA </button> */}
+        {/* { result && <p> {result.message} at {result.endpoint} route </p> }
+        <p className="read-the-docs">
+        This platform allows users to request automatic speech recognition machine learning models, view performance metrics, and track model leaderboards.
+        </p>
+        <br></br> */}
+        {/* <Button type="submit" shadow="blue" bg="#3b82f6" color="white" onClick={handleClick}>Explore</Button> */}
+        {/* <newHead>sdsdsWelcome to ASR-Fairbench</newHead> */}
+        <Leaderboard baseUrl={baseUrl} />
+    </>
+  )
+}
+
+export {Home}
+
+const newHead = styled(Head)`
+  background: #3b82f6;
+  color: #a9a9a9;
+  padding: 1rem;
+  font-size: 2rem;
+  text-align: center;
+`;

src/components/Leaderboard.jsx

@@ -0,0 +1,152 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import Table from '../styled_components/Table';
+import { Button } from 'primereact/button';
+import { Tooltip } from 'primereact/tooltip';
+import jsPDF from 'jspdf';
+import autoTable from 'jspdf-autotable';
+import axios from "axios";
+import { useContext } from "react";
+import { DataContext } from "../DataContext";
+import { ProgressSpinner } from 'primereact/progressspinner';
+import styled from 'styled-components';
+
+export function Leaderboard({ baseUrl }) {
+
+  const [products, setProducts] = useState(null);
+  const dt = useRef(null);
+  const { sharedData, setSharedData } = useContext(DataContext);
+
+
+  let data = [
+    { Model: "OpenAi/whisper", WER: 0.15, FS: 0.87, FS_G: 8.41, FS_L: 0.85, FS_SEG: 0.8, FS_E: 0.8 },
+    { Model: "OpenAi/whisper-mini", WER: 0.25, FS: 0.8, FS_G: 0.85, FS_L: 0.75, FS_SEG: 0.65, FS_E: 0.8 }
+  ]
+
+  useEffect(() => {
+    if (!(sharedData && sharedData.Leaderboard)) {
+      const fetchData = async () => {
+        const headers = {
+          'ngrok-skip-browser-warning': "10008"
+        };
+        const res = await axios.get(`${baseUrl}/fetch`, { headers });
+        let Data = res.data.data; // Await the promise
+        const uniqueData = Data.filter((value, index, self) =>
+          index === self.findIndex((t) => t.Model === value.Model)
+        );
+        setProducts(uniqueData); // Set the resolved data to state
+        setSharedData({ ...sharedData, Leaderboard: uniqueData })
+      }
+
+      fetchData();
+    } else {
+      setProducts(sharedData.Leaderboard);
+    }
+
+
+  }, [sharedData, setSharedData, baseUrl]);
+
+
+  const exportCSV = (selectionOnly) => {
+    dt.current.exportCSV({ selectionOnly });
+  };
+
+  const exportPdf = () => {
+    // const doc = new jsPDF();
+    const doc = new jsPDF({ orientation: 'landscape' });
+
+    // Add heading
+    // Set font size and get page width
+    doc.setFontSize(16);
+    const pageWidth = doc.internal.pageSize.width; // Get page width
+    const text = 'Leaderboard Report';
+    const textWidth = doc.getTextWidth(text); // Get text width
+    const xPosition = (pageWidth - textWidth) / 2; // Center position
+
+    // Add centered heading
+    doc.text(text, xPosition, 15);
+
+    // Define table headers
+    const columns = [
+      { header: 'Model Name', dataKey: 'Model' },
+      { header: 'Fairness Adjusted ASR Score', dataKey: 'FAAS' },
+      { header: 'Average WER', dataKey: 'WER' },
+      { header: 'Average RTFX', dataKey: 'RTFX' },
+      { header: 'Overall Fairness Score', dataKey: 'FS' },
+      { header: 'Fairness Score (Gender)', dataKey: 'FS_G' },
+      { header: 'Fairness Score (First Language)', dataKey: 'FS_L' },
+      { header: 'Fairness Score (Socioeconomic Background)', dataKey: 'FS_SEG' },
+      { header: 'Fairness Score (Ethnicity)', dataKey: 'FS_E' }
+    ];
+
+    // Convert data into row format
+    const rows = products.map(row => columns.map(col => row[col.dataKey]));
+
+    // Call autoTable properly
+    autoTable(doc, {
+      theme: 'grid',
+      head: [columns.map(col => col.header)], // Table headers
+      body: rows, // Table data
+      startY: 20, // Set Y position after the heading
+      styles: { lineWidth: 0.15 }, // Ensure grid lines are visible
+      headStyles: { textColor: 255, lineWidth: 0.15 } // Ensure header has grid lines
+    });
+
+    doc.save('Leaderboard.pdf');
+  };
+
+
+  const header = (
+    <div className="flex align-items-center justify-content-end gap-2">
+      <Tooltip target=".tooltip-btn" />
+      <Button type="button" icon="pi pi-file" rounded onClick={() => exportCSV(false)} className="tooltip-btn" data-pr-tooltip="Export CSV" />
+      {/* <Button type="button" icon="pi pi-file-excel" severity="success" rounded onClick={exportExcel} data-pr-tooltip="XLS" /> */}
+      <Button type="button" icon="pi pi-file-pdf" severity="warning" rounded onClick={exportPdf} className="tooltip-btn" data-pr-tooltip="Export PDF" />
+    </div>
+  );
+  //! For making the model name hyperlinks
+  const [selectedCell, setSelectedCell] = useState(null);
+  const onCellClick = (event) => {
+    if(event.field!="Model") return ;
+    const url = `https://huggingface.co/${event.value}`; // Replace with your URL
+    window.open(url, "_blank", "noopener,noreferrer");
+  };
+
+  return (<>
+    {/* <h1>Leaderboard</h1> */}
+    {/* <h3>Track Top performing models</h3> */}
+    <H3>Leaderboard of the ASR models audited on this platform :</H3>
+    {products ? (<div className="card border-round-3xl overflow-hidden shadow-2">
+      <Tooltip target=".export-buttons>button" position="bottom" />
+      <DataTable ref={dt} header={header} value={products} removableSort showGridlines 
+      sortField="FAAS" 
+      sortOrder={-1} 
+      tableStyle={{ minWidth: '20rem' }}
+      cellSelection selectionMode="single" selection={selectedCell}
+      onSelectionChange={(e) => setSelectedCell(e.value)} metaKeySelection={false}
+      onCellClick={onCellClick}
+      >
+        <Column field="Model" header="Model Name" sortable filter></Column>
+        <Column field="FAAS" header="Fairness Adjusted ASR Score" sortable></Column>
+        <Column field="WER" header="Average WER" sortable></Column>
+        <Column field="RTFX" header="Average RTFX" sortable></Column>
+        <Column field="FS" header="Overall Fairness Score" sortable></Column>
+        <Column field="FS_G" header="Fairness Score (Gender)" sortable></Column>
+        <Column field="FS_L" header="Fairness Score (First Language)" sortable></Column>
+        <Column field="FS_SEG" header="Fairness Score (Socioeconomic Background)" sortable></Column>
+        <Column field="FS_E" header="Fairness Score (Ethnicity)" sortable></Column>
+      </DataTable>
+    </div>)
+      :
+      (<ProgressSpinner style={{ width: '200px', height: '200px' }} strokeWidth="3" />)}
+
+
+    <br></br>
+  </>)
+}
+
+const H3 = styled.h3`
+  color: #515458 !important
+`
+