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 ( <> 🎙️ ASR-FAIRBENCH is an open benchmarking platform dedicated to evaluating the fairness and accuracy of Automatic Speech Recognition (ASR) models. Our mission is to assess ASR models' performance across diverse demographic groups using the Fair Speech Dataset. Models are ranked based on the Fairness Adjusted Accuracy Score (FAAS), which integrates both Word Error Rate (WER) and a Fairness Score, ensuring that models deliver equitable performance across different accents, genders, and age groups. Explore the 📈 Metrics tab for details on our evaluation process and visit the 📂 Dataset 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! ✨ 📄(Paper Link)   (Github Link)
); } 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;