Hugging Face's logo

Spaces:
satyamr196
/
Static_React_App_Test
Running

App Files Community
Static_React_App_Test / README.md
satyamr196's picture
satyamr196
added React app files for testing, build commands added to the readme.md metadata
e7185a2
preview code
|
raw
history blame contribute delete
7.43 kB
metadata 
title: Static React Vite App ASR FairBench
emoji: 🐨
colorFrom: blue
colorTo: green
sdk: static
pinned: false
short_description: Static vite app with React
app_build_command: npm run build
app_file: dist/index.html

ASR LEADERBOARD [Link]

Screenshots

Features

  • Intuitive UI – A simple, clean, and visually appealing interface
  • Fast Model Auditing – Submit a model and get audited within minutes.
  • Graphical Insights – Results are visualized using box plots and histograms, which can be exported as PDF. 📄Download Result 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]

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 

  GET /

Run Audit for Huggin Face ASR model 

  GET /api?ASR_model=<HF_model_name>

Example : 

{baseUrl}/api?ASR_model=openai/whisper-medium

Get leaderboard data 

  GET /fetch

Insert generated leaderboard data to database 

  POST /insert

Run Locally

Prerequisites :

  • 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.
  • Docker: You are required to install Docker Desktop (Link 1) (Link 2) 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 to expose your local server to the internet.(Method 2)

Frontend :

Clone the project from GitHub to your local machine.

  git clone https://github.com/SatyamR196/ASR-FairBench.git

Go to the project directory

  cd ASR-FairBench

Install dependencies

  npm install

Start the react app

  npm run dev

On running above instructions sucessfully, following message with website link should should appear in the terminal:

Project Logo Now you can open the link in the web browser, home page will look something like this :

Congratulations 🤗 ! on sucessfully cloning the frontend, next we will be setting up the backend on google colab

Backend :

Method 1 : Using Docker + Hugging Face

  • Create account on hugging face and also generate acess token with read and write permission.

  • Then you can selet either clone the repository or duplicate the space option to create your own space.

  • 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.

Method 2 : Using Google Colab

  • Open the Google Colab notebook using the link below.

Link to Backend Server Collab notebook : Click here

  • 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

  • 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 Facebook Model Result 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

  • Now, your drive folder structure should look like this :

  • 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 

!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.

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: