eliplutchok/bemba-to-english

# Bemba to English This application provides a comprehensive leaderboard showcasing the relative rankings of models in translating Bemba to English. **Website**: bemba-to-english.netlify.app ## How to Run the App To run the app locally: 1. **Install Dependencies**: Navigate to the project directory and install the necessary dependencies using: ```bash npm install ``` 2. **Start the App**: Run the app in development mode with: ```bash npm start ``` Open localhost to view it in your browser. ## Application Overview This application provides an interactive web interface for exploring and comparing different machine translation models for translating Bemba to English. Below is an overview of the key pages of the website: ### Leaderboard The **Leaderboard** displays the relative rankings of models based on various evaluation metrics. Users can view and sort the models to see how they perform according to different criteria. - **File Reference**: `App.js` ```javascript:src/App.js function AppContent() { // ... {/* DataGrid Table */} { navigate(`/model/${params.row.model}`); }} // ... /> // ... } ``` The `AppContent` component handles the rendering of the Leaderboard table using `DataGrid`, displaying the models and their rankings. ### Head-to-Head Comparison The **Head-to-Head** page provides a heatmap visualization that allows users to compare models directly against each other based on different metrics. - **File Reference**: `HeadToHead.js` ```javascript:src/HeadToHead.js function HeadToHead() { // ... { // Extract model names from the cell object const model1 = cell.serieId; const model2 = cell.data.x; // Navigate to the comparison page with encoded formatted model names navigate( `/compare/${encodeURIComponent(formatModelName(model1))}/${encodeURIComponent(formatModelName(model2))}` ); }} // ... /> // ... } ``` The `HeadToHead` component renders the heatmap visualization using `@nivo/heatmap` and handles user interactions for m …