initialize

CompUGE-Frontend.iml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

Dockerfile

@@ -0,0 +1,22 @@
+FROM node:lts
+
+# Set the working directory
+WORKDIR /usr/src/app
+
+# Install Angular CLI globally
+RUN npm install -g @angular/cli
+
+# Copy package.json and package-lock.json first to leverage Docker cache
+COPY package*.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy the rest of the application code
+COPY . .
+
+# Expose port
+EXPOSE 4200
+
+# Set entrypoint for different environments
+ENTRYPOINT bash -c "ng serve --host 0.0.0.0 --port 4200 --configuration=production --disable-host-check;"

README.md

@@ -1,11 +1,27 @@
----
-title: CompUGE Bench
-emoji: 📊
-colorFrom: gray
-colorTo: yellow
-sdk: docker
-pinned: false
-license: mit
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# CompugeFrontend
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.4.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

angular.json

@@ -0,0 +1,127 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "compuge-frontend": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/compuge-frontend",
+            "index": "src/index.html",
+            "browser": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "@angular/material/prebuilt-themes/deeppurple-amber.css",
+              "src/styles.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all",
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ]
+            },
+            "docker": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all",
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.docker.ts"
+                }
+              ]
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "compuge-frontend:build:production"
+            },
+            "docker": {
+              "buildTarget": "compuge-frontend:build:docker"
+            },
+            "development": {
+              "buildTarget": "compuge-frontend:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "buildTarget": "compuge-frontend:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "@angular/material/prebuilt-themes/deeppurple-amber.css",
+              "src/styles.css"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  }
+}

docker-compose.yaml

@@ -0,0 +1,9 @@
+version: '3.7'
+services:
+  frontend:
+    build:
+      context: .
+      args:
+        PROFILE: production
+    ports:
+      - '4200:4200' # Port mapping

package.json

@@ -0,0 +1,42 @@
+{
+  "name": "compuge-frontend",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^17.3.4",
+    "@angular/cdk": "^17.3.4",
+    "@angular/common": "^17.3.4",
+    "@angular/compiler": "^17.3.4",
+    "@angular/core": "^17.3.4",
+    "@angular/flex-layout": "^15.0.0-beta.42",
+    "@angular/forms": "^17.3.4",
+    "@angular/material": "^17.3.4",
+    "@angular/platform-browser": "^17.3.4",
+    "@angular/platform-browser-dynamic": "^17.3.4",
+    "@angular/router": "^17.3.4",
+    "rxjs": "~7.8.0",
+    "rxjs-compat": "^6.6.7",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.14.3"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^17.3.4",
+    "@angular/cli": "^17.3.4",
+    "@angular/compiler-cli": "^17.3.4",
+    "@types/jasmine": "~5.1.0",
+    "jasmine-core": "~5.1.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "typescript": "~5.4.2"
+  }
+}

src/app/app.component.html

@@ -0,0 +1,6 @@
+<div class='container' style="width: 100%;">
+  <app-header></app-header>
+  <br>
+
+  <router-outlet></router-outlet>
+</div>

src/app/app.component.spec.ts

@@ -0,0 +1,29 @@
+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppComponent],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have the 'compuge-frontend' title`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('compuge-frontend');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, compuge-frontend');
+  });
+});

src/app/app.component.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import {HeaderComponent} from "./components/header/header.component";
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [
+    RouterOutlet,
+
+    HeaderComponent],
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.css'
+})
+export class AppComponent {
+
+  constructor(
+  ) {
+  }
+}

src/app/app.config.ts

@@ -0,0 +1,15 @@
+import { ApplicationConfig } from '@angular/core';
+import {provideRouter, withComponentInputBinding} from '@angular/router';
+
+import { routes } from './app.routes';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+import {provideHttpClient, withFetch} from "@angular/common/http";
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideRouter(routes, withComponentInputBinding()),
+    provideAnimationsAsync(),
+    provideAnimationsAsync(),
+    provideHttpClient(withFetch())
+  ]
+};

src/app/app.routes.ts

@@ -0,0 +1,21 @@
+import {Routes} from '@angular/router';
+import {BodyComponent} from "./components/body/body.component";
+import {TasksComponent} from "./components/body/tasks/tasks.component";
+import {LeaderboardsComponent} from "./components/body/leaderboards/leaderboards.component";
+import {SubmissionsComponent} from "./components/body/submissions/submissions.component";
+import {DatasetsComponent} from "./components/body/datasets/datasets.component";
+import {AboutComponent} from "./components/body/about/about.component";
+import {TaskComponent} from "./components/body/tasks/task/task.component";
+import {SubmittingComponent} from "./components/body/submitting/submitting.component";
+
+export const routes: Routes = [
+  {path: '', component : BodyComponent},
+  {path: 'tasks', component: TasksComponent},
+  {path: 'tasks/:task', component: TaskComponent},
+  {path: 'submissions', component: SubmissionsComponent},
+  {path: 'submitting', component: SubmittingComponent},
+  {path: 'datasets', component: DatasetsComponent},
+  {path: 'about', component: AboutComponent},
+  {path: 'leaderboards', component: LeaderboardsComponent},
+  {path: 'leaderboards/:task', component: LeaderboardsComponent},
+];

src/app/components/body/about/about.component.html

@@ -0,0 +1,154 @@
+<mat-card>
+
+  <mat-card-content *ngIf="whatAbout === 'general'">
+    <br>
+    <p>
+      This System was built in the process of the research conducted by the Author Ahmad Shallouf for his Master Thesis
+      at the University of Hamburg.
+      <br>
+      The purpose of this system is to provide a Benchmark for the 4 main tasks of Comparative Question Answering in the
+      English Language.
+      <br>
+      The system is built using the Angular Framework for the Frontend and FastAPI Framework for the Backend with a
+      PostgreSQL Database.
+    </p>
+    <br>
+    <h3>Contact Information: </h3>
+    <table class="borderless table">
+      <tr>
+        <td>Name:</td>
+        <td>Ahmad Shallouf</td>
+      </tr>
+      <tr>
+        <td>Position:</td>
+        <td>Master Student</td>
+      </tr>
+      <tr>
+        <td>Email:</td>
+        <td>{{ '7shallou@informatik.uni-hamburg.de' }}</td>
+      </tr>
+      <tr>
+        <td>Phone:</td>
+        <td>+49 1762405080</td>
+      </tr>
+    </table>
+
+  </mat-card-content>
+
+  <mat-card-content *ngIf="whatAbout === 'Question Identification'">
+    <div style="display: flex;">
+      <div style="flex: 1; padding-right: 3%; text-align: justify;">
+        <p style="font-size: 18px">
+          The comparative question identification task involves detecting and classifying questions that aim to compare
+          entities, such as products or services. This task is important for applications like review summarization,
+          recommendation systems, and opinion mining. Researchers have developed methods involving natural language
+          processing techniques to accurately identify and categorize comparative questions from user-generated content.
+          These methods often require syntactic and semantic analysis to understand the nuances and patterns in language
+          that indicate comparisons.
+          <br><br>
+          Recent advancements in this field include the use of machine learning models and neural networks to improve
+          the accuracy of identifying comparative questions. These models are trained on large datasets to recognize
+          both explicit and implicit comparisons. Challenges in this area include handling context-dependent comparisons
+          and refining algorithms to better capture the intent behind complex linguistic structures. This work enhances
+          applications by providing deeper insights into user preferences and opinions through effective comparison
+          detection.
+        </p>
+        <div>
+          <br><br>
+          <h3>References</h3>
+          <ul>
+            <li><a href="https://aclanthology.org/P10-1067/" target="_blank">Li et al., 2010</a></li>
+            <li><a href="https://dl.acm.org/doi/10.1145/3336191.3371848" target="_blank">Bondarenko et al., 2020a</a>
+            </li>
+            <li><a href="https://dl.acm.org/doi/10.1145/3488560.3498534" target="_blank">Bondarenko et al., 2022a</a>
+            </li>
+            <li><a href="https://aclanthology.org/2022.lrec-1.402/" target="_blank">Beloucif et al., 2022</a></li>
+            <li><a href="https://aclanthology.org/2022.coling-1.138/" target="_blank">Sen et al., 2022</a></li>
+          </ul>
+        </div>
+      </div>
+      <div style="flex: 1; display: flex; align-items: center; justify-content: center;">
+        <!--- this image is in assets and is called cqi_explainer.svg --->
+        <img src="assets/cqi_explainer.svg" alt="Image Unavailable" style="max-width: 100%; height: auto; padding: 5%">
+      </div>
+    </div>
+  </mat-card-content>
+
+
+  <mat-card-content *ngIf="whatAbout === 'Object and Aspect Identification'">
+    <div style="display: flex;">
+      <div style="flex: 1; padding: 20px;">
+        <p>
+          Object and Aspect Labeling is a sequence tagging task aimed at identifying entities such as objects, aspects, and predicates in comparative questions.
+          <br><br>
+          There are at least three different datasets for this task. The dataset by Li et al. focuses on extracting objects of comparison but is not publicly available. The other two datasets, by Beloucif et al. and Bondarenko et al., have different annotation schemas and tags. Another dataset by Chekalina et al. includes labeled affirmative sentences.<br>
+        </p>
+        <div>
+          <br><br>
+          <h3>References</h3>
+          <ul>
+            <li><a href="https://aclanthology.org/P10-1067/" target="_blank">Li et al., 2010</a></li>
+            <li><a href="https://dl.acm.org/doi/10.1145/3488560.3498534" target="_blank">Bondarenko et al., 2022a</a></li>
+            <li><a href="https://aclanthology.org/2022.lrec-1.402/" target="_blank">Beloucif et al., 2022</a></li>
+            <li><a href="https://aclanthology.org/2021.eacl-demos.36/" target="_blank">Chekalina et al., 2021</a></li>
+          </ul>
+        </div>
+      </div>
+      <div style="flex: 1; display: flex; align-items: center; justify-content: center;">
+        <img src="assets/oai_explainer.svg" alt="Image Unavailable" style="max-width: 100%; height: auto; padding: 5%">
+      </div>
+    </div>
+  </mat-card-content>
+
+
+  <mat-card-content *ngIf="whatAbout === 'Stance Classification'">
+    <div style="display: flex;">
+      <div style="flex: 1; padding: 20px;">
+        <p>
+          Stance classification is one of the crucial subtasks of the whole pipeline, as we select relevant arguments and detect, in favor of which object the choice is made thanks to the class assigned at this step.
+          <br><br>
+          There is a dataset published by Panchenko et al. along with the baseline classifier, which is outperformed by Ma et al. Bondarenko et al. also introduces datasets and tests them on several models. However, their text excerpts are quite large and are not consistent with the argumentative sentences for our task.
+        </p>
+        <div>
+          <br><br>
+          <h3>References</h3>
+          <ul>
+            <li><a href="https://aclanthology.org/W19-4516/" target="_blank">Panchenko et al., 2019</a></li>
+            <li><a href="https://aclanthology.org/2020.acl-main.512/" target="_blank">Ma et al., 2020</a></li>
+            <li><a href="https://dl.acm.org/doi/10.1145/3488560.3498534" target="_blank">Bondarenko et al., 2022a</a></li>
+          </ul>
+        </div>
+      </div>
+      <div style="flex: 1; display: flex; align-items: center; justify-content: center;">
+        <img src="assets/sc_explainer.svg" alt="Image Unavailable" style="max-width: 100%; height: auto; padding: 5%">
+      </div>
+    </div>
+  </mat-card-content>
+
+
+  <mat-card-content *ngIf="whatAbout === 'Summary Generation'">
+    <div style="display: flex;">
+      <div style="flex: 1; padding: 20px;">
+        <p>
+          Comparative Summary Generation is a relatively recent and less widespread task.
+          <br> <br>
+          To the best of our knowledge, only two papers introduce datasets and baseline approaches. Chekalina et al. (2021) presents comparative questions with their best answers from Yahoo! Answers and tests several unsupervised approaches, including CTRL and template-based answers. Yu et al. (2023) pre-trains LLMs for comparative reasoning using prompts and introduces a dataset called “Diffen” that works with summarizing arguments for an object pair, though it is not publicly available.<br>
+        </p>
+        <div>
+          <br>
+          <br>
+          <h3>References</h3>
+          <ul>
+            <li><a href="https://arxiv.org/abs/2305.14457" target="_blank">Yu et al., 2023</a></li>
+            <li><a href="https://arxiv.org/abs/1909.05858" target="_blank">Keskar et al., 2019</a></li>
+            <li><a href="https://aclanthology.org/2021.eacl-demos.36/" target="_blank">Chekalina et al., 2021</a></li>
+          </ul>
+        </div>
+      </div>
+      <div style="flex: 1; display: flex; align-items: center; justify-content: center;">
+        <img src="assets/sg_explainer.svg" alt="Image Unavailable" style="max-width: 100%; height: auto; padding: 5%">
+      </div>
+    </div>
+  </mat-card-content>
+
+</mat-card>

src/app/components/body/about/about.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AboutComponent } from './about.component';
+
+describe('AboutComponent', () => {
+  let component: AboutComponent;
+  let fixture: ComponentFixture<AboutComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AboutComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(AboutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/body/about/about.component.ts

@@ -0,0 +1,30 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {MatCard, MatCardContent} from "@angular/material/card";
+import {NgIf} from "@angular/common";
+
+@Component({
+  selector: 'app-about',
+  standalone: true,
+  imports: [
+    MatCard,
+    MatCardContent,
+    NgIf
+  ],
+  templateUrl: './about.component.html',
+  styleUrl: './about.component.css'
+})
+export class AboutComponent implements OnInit{
+
+  @Input()
+  whatAbout = 'general';
+
+  constructor() { }
+
+  ngOnInit() {
+    if (this.whatAbout === undefined) {
+      this.whatAbout = 'general';
+    }
+  }
+
+
+}

src/app/components/body/body.component.css

@@ -0,0 +1,114 @@
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+}
+
+mat-card {
+  width: 100%;
+  text-align: justify;
+}
+
+mat-card-header {
+  display: flex;
+  justify-content: center;
+}
+
+mat-card-title {
+  width: 100%;
+  text-align: center;
+}
+
+.section-content {
+  margin-top: 20px;
+}
+
+.example-question {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  margin: 10px 0;
+}
+
+.example-question img {
+  width: 400px;
+  height: auto;
+  border-radius: 4px;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+.response-images {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.response-images img {
+  margin-top: 10px;
+  width: 800px;
+  height: auto;
+  border-radius: 4px;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+.task-buttons {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+  margin: 20px 0;
+}
+
+.task-buttons button {
+  height: 80px;
+}
+
+.submit-button {
+  width: 100%;
+  height: 80px;
+  margin-top: 20px;
+}
+
+.nav-buttons {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+}
+
+.nav-buttons button {
+  width: 100%;
+  height: 80px;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+.image-grid {
+  display: grid;
+  grid-template-columns: 25% 50% 25%;
+  gap: 5px;
+}
+
+.image1 {
+  grid-column: 1;
+  grid-row: span 2; /* This spans the first image across two rows */
+}
+
+.image2 {
+  grid-column: 2;
+  grid-row: 1 / 2; /* This places the second image in the first row of the second column */
+}
+
+.image3 {
+  grid-column: 2;
+  grid-row: 2 / 3; /* This places the third image in the second row of the second column */
+}
+
+.image4 {
+  grid-column: 3;
+  grid-row: span 2; /* This spans the fourth image across two rows */
+}
+
+.image-grid-item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}

src/app/components/body/body.component.html

@@ -0,0 +1,87 @@
+<div class="container">
+  <mat-card>
+    <mat-card-header>
+      <mat-card-title>
+        <h1>Welcome to CompUGE</h1>
+      </mat-card-title>
+    </mat-card-header>
+    <mat-card-content>
+      <section>
+        <h2>What is Comparative Question Answering?</h2>
+        <p>Comparative question answering (CQA) is a specialized field within natural language processing (NLP) focused
+          on generating responses to questions that require comparing two or more entities across specific attributes or
+          dimensions. This involves identifying the entities and attributes in the query, retrieving relevant
+          information from various sources, and synthesizing this data into a coherent comparison. CQA systems are
+          particularly useful in domains such as e-commerce, healthcare, education, and technology, where users seek
+          detailed comparisons to make informed decisions. These systems face challenges such as handling ambiguous
+          queries, understanding context, ensuring data quality, and developing robust evaluation metrics to assess the
+          accuracy and relevance of the comparisons generated.</p>
+        <section>
+          <br><br>
+          <h2>What is CompUGE?</h2>
+          <p>
+            CompUGE is an acronym for Comparative Understanding and Generation Evaluation, a platform designed to
+            facilitate research and development in the field of comparative question answering (CQA). The platform
+            provides access to benchmark datasets, evaluation metrics, leaderboards, and submission guidelines for
+            researchers and practitioners working on CQA systems. By offering a centralized hub for sharing resources
+            and comparing performance across different models, CompUGE aims to advance the state of the art in CQA and
+            foster collaboration within the research community.
+          </p>
+        </section>
+
+        <p>
+          Here's an example of a comparative question being processes by the
+          <a href="https://cam-v2.ltdemos.informatik.uni-hamburg.de">CAM 2.0 System</a>
+          introduced in the paper
+          <a href="https://aclanthology.org/2024.lrec-main.238">"CAM 2.0: End-to-End Open Domain Comparative Question
+            Answering System"</a>
+          by our team and accepted at
+          <a href="https://lrec-coling-2024.org">LREC-Coling 2024</a>.
+        </p>
+        <div class="section-content">
+          <mat-expansion-panel>
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+                <h2 style="text-align: center; margin-top: 15px">What is better: Harry Potter or Lord of the Rings?</h2>
+              </mat-panel-title>
+            </mat-expansion-panel-header>
+
+            <div class="image-grid">
+              <div class="image-grid-item image1">
+                <img src="assets/hp.jpg" alt="Image 1">
+              </div>
+              <div class="image-grid-item image2">
+                <img src="assets/cam_response1.jpg" alt="Image 2">
+              </div>
+              <div class="image-grid-item image3">
+                <img src="assets/cam_response2.jpg" alt="Image 3">
+              </div>
+              <div class="image-grid-item image4">
+                <img src="assets/lotr.jpg" alt="Image 4">
+              </div>
+            </div>
+
+          </mat-expansion-panel>
+        </div>
+      </section>
+
+      <div class="task-buttons">
+        <button
+          *ngFor="let task of (tasks | async)"
+          mat-raised-button color="primary"
+          routerLink="/tasks/{{ task.name }}"
+        >{{ task.name }}
+        </button>
+      </div>
+
+      <nav class="nav-buttons">
+        <button mat-button routerLink="/leaderboards">Leaderboards</button>
+        <button mat-button routerLink="/datasets">Datasets</button>
+        <button mat-button routerLink="/submissions">Submissions List</button>
+      </nav>
+
+      <button mat-raised-button color="accent" class="submit-button">Submit a Model</button>
+
+    </mat-card-content>
+  </mat-card>
+</div>

src/app/components/body/body.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BodyComponent } from './body.component';
+
+describe('BodyComponent', () => {
+  let component: BodyComponent;
+  let fixture: ComponentFixture<BodyComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BodyComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(BodyComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/body/body.component.ts

@@ -0,0 +1,56 @@
+import { Component } from '@angular/core';
+import {MatTab, MatTabGroup} from "@angular/material/tabs";
+import {MatCard, MatCardContent, MatCardHeader, MatCardTitle} from "@angular/material/card";
+import {LeaderboardsComponent} from "./leaderboards/leaderboards.component";
+import {AboutComponent} from "./about/about.component";
+
+import {SubmissionsComponent} from "./submissions/submissions.component";
+import {DashboardComponent} from "./dashboard/dashboard.component";
+import {TasksComponent} from "./tasks/tasks.component";
+import {DatasetsComponent} from "./datasets/datasets.component";
+import {MatButton} from "@angular/material/button";
+import {AppStateService} from "../../state_management/services/app-state.service";
+import {map} from "rxjs";
+import {AsyncPipe, NgForOf, NgOptimizedImage} from "@angular/common";
+import {RouterLink} from "@angular/router";
+import {MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelTitle} from "@angular/material/expansion";
+
+@Component({
+  selector: 'app-body',
+  standalone: true,
+  imports: [
+    MatTabGroup,
+    MatTab,
+    MatCard,
+    LeaderboardsComponent,
+    AboutComponent,
+    SubmissionsComponent,
+    DashboardComponent,
+    TasksComponent,
+    DatasetsComponent,
+    MatCardContent,
+    MatCardTitle,
+    MatCardHeader,
+    MatButton,
+    AsyncPipe,
+    NgForOf,
+    NgOptimizedImage,
+    RouterLink,
+    MatExpansionPanel,
+    MatExpansionPanelTitle,
+    MatExpansionPanelHeader
+  ],
+  templateUrl: './body.component.html',
+  styleUrl: './body.component.css'
+})
+export class BodyComponent {
+
+  tasks = this.stateService.state$.pipe(
+    map(state => state.tasks)
+  );
+
+  constructor(
+    private stateService: AppStateService
+  ) { }
+
+}

src/app/components/body/dashboard/dashboard.component.html

@@ -0,0 +1 @@
+<p>dashboard works!</p>

src/app/components/body/dashboard/dashboard.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardComponent } from './dashboard.component';
+
+describe('DashboardComponent', () => {
+  let component: DashboardComponent;
+  let fixture: ComponentFixture<DashboardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DashboardComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(DashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/body/dashboard/dashboard.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-dashboard',
+  standalone: true,
+  imports: [],
+  templateUrl: './dashboard.component.html',
+  styleUrl: './dashboard.component.css'
+})
+export class DashboardComponent {
+
+}

src/app/components/body/datasets/dataset/dataset.component.html

@@ -0,0 +1,48 @@
+<mat-expansion-panel>
+  <mat-expansion-panel-header>
+    <mat-panel-title>
+      <h2 style="margin-top: 15px">{{ datasetModel.name }} ({{ datasetModel.task }})</h2>
+    </mat-panel-title>
+  </mat-expansion-panel-header>
+  <p>{{ datasetModel.description }}</p>
+  <p>
+    This dataset was introduced in the following paper:
+    <a href="{{datasetModel.paper_link}}" target="_blank">{{ datasetModel.paper }}</a>
+  </p>
+
+  <button mat-raised-button (click)="goToUrl(datasetModel.link)" style="width: 99%; margin: 0.5%">Link to the
+    Dataset
+  </button>
+
+  <!-- Training Data Button -->
+  <button *ngIf="datasetModel.train"
+          mat-raised-button
+          [ngStyle]="{
+            'width': !datasetModel.val ? '49.5%' : '33%'
+          }"
+          style="margin-left: 0.3%; margin-right: 0.1%"
+          (click)="downloadData(datasetModel.train, 'train')">
+    Download Training Data
+  </button>
+
+  <!-- Validation Data Button -->
+  <button *ngIf="datasetModel.val"
+          mat-raised-button
+          [ngStyle]="{
+            'width': !datasetModel.train ? '49.5%' : '33%'
+          }"
+          style="margin: 0.1%"
+          (click)="downloadData(datasetModel.val, 'validation')">
+    Download Validation Data
+  </button>
+
+  <!-- Testing Data Button (always present) -->
+  <button mat-raised-button
+          [ngStyle]="{
+            'width': !datasetModel.train && !datasetModel.val ? '99%' : (!datasetModel.train || !datasetModel.val) ? '49.5%' : '33%'
+          }"
+          style="margin-right: 0.3%; margin-left: 0.1%"
+          (click)="downloadData(datasetModel.test, 'test')">
+    Download Testing Data
+  </button>
+</mat-expansion-panel>

src/app/components/body/datasets/dataset/dataset.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DatasetComponent } from './dataset.component';
+
+describe('DatasetComponent', () => {
+  let component: DatasetComponent;
+  let fixture: ComponentFixture<DatasetComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DatasetComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(DatasetComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/body/datasets/dataset/dataset.component.ts

@@ -0,0 +1,56 @@
+import {Component, Input} from '@angular/core';
+import {MatCard, MatCardContent} from "@angular/material/card";
+import {MatButton} from "@angular/material/button";
+import {MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelTitle} from "@angular/material/expansion";
+import {DatasetModel} from "../../../../state_management/models/dataset.model";
+import {NgIf, NgStyle} from "@angular/common";
+
+@Component({
+  selector: 'app-dataset',
+  standalone: true,
+  imports: [
+    MatCard,
+    MatCardContent,
+    MatButton,
+    MatExpansionPanel,
+    MatExpansionPanelHeader,
+    MatExpansionPanelTitle,
+    NgIf,
+    NgStyle
+  ],
+  templateUrl: './dataset.component.html',
+  styleUrl: './dataset.component.css'
+})
+export class DatasetComponent {
+
+  @Input()
+  public datasetModel: DatasetModel = {
+    task: '',
+    name: '',
+    description: '',
+    link: '',
+    paper: '',
+    paper_link: '',
+    train: [],
+    test: [],
+    val: []
+  };
+
+  getTextDownloadURL(data: string[]) {
+    return window.URL.createObjectURL(new Blob(data, {type: 'text/plain'}));
+  }
+
+  downloadData(data: string[], name: string) {
+    const url = this.getTextDownloadURL(data);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = this.datasetModel.task + '-' + this.datasetModel.name + '-' + name + '.csv';
+    document.body.appendChild(a);
+    a.click();
+    window.URL.revokeObjectURL(url);
+  }
+
+  goToUrl(url: string) {
+    window.open(url, '_blank');
+  }
+}

src/app/components/body/datasets/datasets.component.html

@@ -0,0 +1,7 @@
+<div style="margin-bottom: 10px" *ngFor="let i of datasets | async">
+  <app-dataset
+    [datasetModel]="i">
+  </app-dataset>
+</div>
+<br>
+

src/app/components/body/datasets/datasets.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DatasetsComponent } from './datasets.component';
+
+describe('DatasetsComponent', () => {
+  let component: DatasetsComponent;
+  let fixture: ComponentFixture<DatasetsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DatasetsComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(DatasetsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/body/datasets/datasets.component.ts

@@ -0,0 +1,34 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {AppStateService} from "../../../state_management/services/app-state.service";
+import {DatasetComponent} from "./dataset/dataset.component";
+import {AsyncPipe, NgForOf} from "@angular/common";
+import {map, Observable} from "rxjs";
+
+@Component({
+  selector: 'app-datasets',
+  standalone: true,
+  imports: [
+    DatasetComponent,
+    NgForOf,
+    AsyncPipe
+  ],
+  templateUrl: './datasets.component.html',
+  styleUrl: './datasets.component.css'
+})
+export class DatasetsComponent implements OnInit {
+
+  @Input() datasets!: Observable<any[]>;
+
+  constructor(
+    private appState: AppStateService,
+  ) {}
+
+  ngOnInit(): void {
+    if (!this.datasets) {
+      this.datasets = this.appState.state$.pipe(
+        map(state => state.datasets)
+      );
+    }
+  }
+
+}

src/app/components/body/leaderboards/leaderboard/leaderboard.component.html

@@ -0,0 +1,84 @@
+<mat-card>
+  <button mat-raised-button color="primary" (click)="refresh()">Refresh Leaderboard</button>
+  <table mat-table [dataSource]=dataSource>
+
+    <ng-container matColumnDef="model">
+      <mat-header-cell
+        *matHeaderCellDef
+      >
+        Model
+      </mat-header-cell>
+      <mat-cell *matCellDef="let entry">
+        <a *ngIf="entry.is_public" [href]="entry.link" target="_blank"> {{ entry.model }}</a>
+        <span *ngIf="entry.isPublic">{{ entry.model }}</span>
+      </mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="team">
+      <mat-header-cell
+        *matHeaderCellDef
+      >
+        Team
+      </mat-header-cell>
+      <mat-cell *matCellDef="let entry">
+        <a *ngIf="entry.is_public" [href]="'mailto:' + entry.email" target="_blank"> {{ entry.team }}</a>
+        <span *ngIf="!entry.is_public">{{ entry.team }}</span>
+      </mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="predictions">
+      <mat-header-cell
+        *matHeaderCellDef
+      >
+        Predictions
+      </mat-header-cell>
+      <mat-cell *matCellDef="let entry">
+        <a *ngIf="entry.is_public" [href]="getTextDownloadURL(entry.predictions)" target="_blank" download="{{entry.model + '-predictions.txt'}}">Download</a>
+        <span *ngIf="!entry.is_public">Private</span>
+      </mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="accuracy">
+      <mat-header-cell
+        *matHeaderCellDef
+      >
+        Accuracy
+      </mat-header-cell>
+      <mat-cell *matCellDef="let entry">{{ entry.accuracy | number: '1.2-2' }}</mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="precision">
+      <mat-header-cell
+        *matHeaderCellDef
+      >
+        Precision
+      </mat-header-cell>
+      <mat-cell *matCellDef="let entry">{{ entry.precision | number: '1.2-2' }}</mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="recall">
+      <mat-header-cell
+        *matHeaderCellDef
+      >
+        Recall
+      </mat-header-cell>
+      <mat-cell *matCellDef="let entry">{{ entry.recall | number: '1.2-2'}}</mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="f1">
+      <mat-header-cell
+        *matHeaderCellDef
+      >
+        F1
+      </mat-header-cell>
+      <mat-cell *matCellDef="let entry">{{ entry.f1_score | number: '1.2-2' }}</mat-cell>
+    </ng-container>
+
+
+
+    <mat-header-row
+      *matHeaderRowDef="displayedColumns; sticky: true"
+    ></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+  </table>
+</mat-card>

src/app/components/body/leaderboards/leaderboard/leaderboard.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LeaderboardsComponent} from "../leaderboards.component";
+
+describe('LeaderboardComponent', () => {
+  let component: LeaderboardComponent;
+  let fixture: ComponentFixture<LeaderboardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LeaderboardComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(LeaderboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/body/leaderboards/leaderboard/leaderboard.component.ts

@@ -0,0 +1,85 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {MatCard} from "@angular/material/card";
+import {
+  MatCell,
+  MatCellDef, MatColumnDef,
+  MatHeaderCell,
+  MatHeaderCellDef, MatHeaderRow, MatHeaderRowDef, MatRow, MatRowDef,
+  MatTable,
+  MatTableDataSource
+} from "@angular/material/table";
+import {LeaderboardEntry} from "../../../../state_management/models/leaderboard-entry.model";
+import {MatButton} from "@angular/material/button";
+import {AppStateService} from "../../../../state_management/services/app-state.service";
+import {map} from "rxjs";
+import {DecimalPipe, NgIf} from "@angular/common";
+
+@Component({
+  selector: 'app-leaderboard',
+  standalone: true,
+  imports: [
+    MatCard,
+    MatTable,
+    MatHeaderCell,
+    MatHeaderCellDef,
+    MatCell,
+    MatCellDef,
+    MatColumnDef,
+    MatHeaderRow,
+    MatHeaderRowDef,
+    MatRow,
+    MatRowDef,
+    MatButton,
+    NgIf,
+    DecimalPipe
+  ],
+  templateUrl: './leaderboard.component.html',
+  styleUrl: './leaderboard.component.css'
+})
+export class LeaderboardComponent implements OnInit {
+
+  displayedColumns: string[] = [
+    'model',
+    'team',
+    'predictions',
+    'accuracy',
+    'precision',
+    'recall',
+    'f1'
+  ];
+
+  @Input()
+  task : string = 'Question Identification';
+
+  @Input()
+  dataset : string = "CIFAR10";
+
+  dataSource = new MatTableDataSource<LeaderboardEntry>();
+  leaderboards = this.stateService.state$.pipe(map(state => state.leaderboards));
+
+
+  constructor(private stateService: AppStateService) {
+
+  }
+
+  ngOnInit() {
+    this.leaderboards.subscribe(
+      data => {
+        // choose only entries where task == this.task and dataset == this.dataset.
+        // assign the data to the dataSource
+        this.dataSource.data = data.filter(
+          entry => (entry.task == this.task && entry.dataset == this.dataset)
+        )
+      }
+    );
+    this.stateService.updateLeaderboards();
+  }
+
+  getTextDownloadURL(prediction: string) {
+    return window.URL.createObjectURL(new Blob([prediction], {type: 'text/plain'}));
+  }
+
+  refresh() {
+    this.stateService.updateLeaderboards();
+  }
+}

src/app/components/body/leaderboards/leaderboards.component.html

@@ -0,0 +1,28 @@
+<div>
+  <mat-card>
+
+    <!--
+      make a header with the task name, if the task is not '', align the text to the center
+    -->
+    <br>
+    <h1 *ngIf="task && showTask" style="text-align: center">
+      {{task}} Leaderboards
+    </h1>
+
+    <mat-tab-group>
+      <mat-tab
+       *ngFor="let dataset of datasets | async"
+       [label]="this.task? dataset.name : dataset.name + '(' + dataset.task + ')'"
+      >
+        <br>
+        <p>{{dataset.description}}</p>
+        <br>
+        <app-leaderboard
+          [task]="task"
+          [dataset]="dataset.name"
+          >
+        </app-leaderboard>
+      </mat-tab>
+    </mat-tab-group>
+  </mat-card>
+</div>

src/app/components/body/leaderboards/leaderboards.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LeaderboardsComponent } from './leaderboards.component';
+
+describe('LeaderboardsComponent', () => {
+  let component: LeaderboardsComponent;
+  let fixture: ComponentFixture<LeaderboardsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LeaderboardsComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(LeaderboardsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/body/leaderboards/leaderboards.component.ts

@@ -0,0 +1,57 @@
+import {Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';
+import {MatCard, MatCardHeader} from "@angular/material/card";
+import {MatTab, MatTabGroup} from "@angular/material/tabs";
+import {LeaderboardComponent} from "./leaderboard/leaderboard.component";
+import {AppStateService} from "../../../state_management/services/app-state.service";
+import {filter, map} from "rxjs";
+import {AsyncPipe, NgForOf, NgIf} from "@angular/common";
+
+@Component({
+  selector: 'app-leaderboards',
+  standalone: true,
+  imports: [
+    MatCard,
+    MatCardHeader,
+    MatTabGroup,
+    MatTab,
+    LeaderboardComponent,
+    AsyncPipe,
+    NgForOf,
+    NgIf
+  ],
+  templateUrl: './leaderboards.component.html',
+  styleUrl: './leaderboards.component.css'
+})
+export class LeaderboardsComponent implements OnChanges {
+
+  @Input()
+  task: string = '';
+
+  @Input()
+  showTask: boolean = true;
+
+  datasets: any;
+
+  constructor(
+    private stateService: AppStateService
+  ) {
+    this.updateDatasets();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['task']) {
+      this.updateDatasets();
+    }
+  }
+
+  private updateDatasets() {
+    this.datasets = this.stateService.state$.pipe(
+      map(state =>
+        state.datasets.filter(dataset =>
+          dataset.task === this.task || !this.task
+        )
+      ),
+    );
+  }
+
+}

src/app/components/body/submissions/submissions.component.html

@@ -0,0 +1,90 @@
+<!---
+  This component is used to display a list of submissions for all users, and allows a new submission to be made.
+-->
+
+<mat-card>
+  <mat-card-content>
+    <button mat-raised-button color="primary" style="width: 100%" (click)="refresh()">Refresh Submissions</button>
+  </mat-card-content>
+
+  <table mat-table [dataSource]=dataSource>
+
+    <ng-container matColumnDef="team">
+      <mat-header-cell
+        *matHeaderCellDef
+      >
+        Team
+      </mat-header-cell>
+      <mat-cell *matCellDef="let entry">
+        <a *ngIf="entry.is_public" [href]="'mailto:' + entry.email" target="_blank"> {{ entry.team }}</a>
+        <span *ngIf="!entry.is_public">{{ entry.team }}</span>
+      </mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="task">
+      <mat-header-cell
+        *matHeaderCellDef
+      >
+        Task
+      </mat-header-cell>
+      <mat-cell *matCellDef="let entry">{{ entry.task }}</mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="dataset">
+      <mat-header-cell
+        *matHeaderCellDef
+      >
+        Dataset
+      </mat-header-cell>
+      <mat-cell *matCellDef="let entry">{{ entry.dataset }}</mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="model">
+      <mat-header-cell
+        *matHeaderCellDef
+      >
+        Model
+      </mat-header-cell>
+      <mat-cell *matCellDef="let entry">
+        <a *ngIf="entry.is_public" [href]="entry.link" target="_blank"> {{ entry.model }}</a>
+        <span *ngIf="entry.isPublic">{{ entry.model }}</span>
+      </mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="predictions">
+      <mat-header-cell
+        *matHeaderCellDef
+      >
+        Predictions
+      </mat-header-cell>
+      <mat-cell *matCellDef="let entry">
+        <a *ngIf="entry.is_public" [href]="getTextDownloadURL(entry.predictions)" target="_blank" download="{{entry.model + '-predictions.txt'}}">Download</a>
+        <span *ngIf="!entry.is_public">Private</span>
+      </mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="status">
+      <mat-header-cell
+        *matHeaderCellDef
+      >
+        Status
+      </mat-header-cell>
+      <mat-cell *matCellDef="let entry">{{ entry.status }}</mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="time">
+      <mat-header-cell
+        *matHeaderCellDef
+      >
+        Time
+      </mat-header-cell>
+      <mat-cell *matCellDef="let entry">{{ entry.time }}</mat-cell>
+    </ng-container>
+
+
+    <mat-header-row
+      *matHeaderRowDef="displayedColumns; sticky: true"
+    ></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+  </table>
+</mat-card>

src/app/components/body/submissions/submissions.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SubmissionsComponent } from './submissions.component';
+
+describe('SubmissionsComponent', () => {
+  let component: SubmissionsComponent;
+  let fixture: ComponentFixture<SubmissionsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SubmissionsComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(SubmissionsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/body/submissions/submissions.component.ts

@@ -0,0 +1,99 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {MatCard, MatCardActions, MatCardContent} from "@angular/material/card";
+import {MatFormField, MatLabel} from "@angular/material/form-field";
+import {MatInput} from "@angular/material/input";
+import {MatButton} from "@angular/material/button";
+import {NgIf} from "@angular/common";
+import {MatOption} from "@angular/material/autocomplete";
+import {MatSelect} from "@angular/material/select";
+import {FormsModule} from "@angular/forms";
+import {AppStateService} from "../../../state_management/services/app-state.service";
+import {map} from "rxjs";
+import {
+  MatCell,
+  MatCellDef,
+  MatColumnDef,
+  MatHeaderCell, MatHeaderCellDef,
+  MatHeaderRow,
+  MatHeaderRowDef,
+  MatRow, MatRowDef, MatTable, MatTableDataSource
+} from "@angular/material/table";
+import {LeaderboardEntry} from "../../../state_management/models/leaderboard-entry.model";
+import {SubmissionEntry} from "../../../state_management/models/submission-entry.model";
+import {MatTab, MatTabGroup} from "@angular/material/tabs";
+
+@Component({
+  selector: 'app-submissions',
+  standalone: true,
+  imports: [
+    MatCard,
+    MatCardContent,
+    MatFormField,
+    MatInput,
+    MatButton,
+    MatCardActions,
+    MatLabel,
+    NgIf,
+    MatOption,
+    MatSelect,
+    FormsModule,
+    MatCell,
+    MatCellDef,
+    MatColumnDef,
+    MatHeaderCell,
+    MatHeaderRow,
+    MatHeaderRowDef,
+    MatRow,
+    MatRowDef,
+    MatTable,
+    MatHeaderCellDef,
+    MatTabGroup,
+    MatTab
+  ],
+  templateUrl: './submissions.component.html',
+  styleUrl: './submissions.component.css'
+})
+export class SubmissionsComponent implements OnInit {
+
+  displayedColumns: string[] = [
+    'team',
+    'model',
+    'task',
+    'dataset',
+    'status',
+    'predictions',
+    'time',
+  ];
+
+  @Input()
+  task: string = '';
+
+  constructor(private state: AppStateService) {
+  }
+
+  submissions = this.state.state$.pipe(
+    map(
+      state =>
+        state.submissions.filter(
+          submission =>
+            (submission.task == this.task || this.task == undefined)))
+  );
+
+  dataSource = new MatTableDataSource<SubmissionEntry>();
+
+  ngOnInit() {
+    this.submissions.subscribe(
+      data => {
+        this.dataSource.data = data;
+      }
+    )
+  }
+
+  getTextDownloadURL(prediction: string) {
+    return window.URL.createObjectURL(new Blob([prediction], {type: 'text/plain'}));
+  }
+
+  refresh() {
+    this.state.updateSubmissions();
+  }
+}

src/app/components/body/submitting/submitting.component.html

@@ -0,0 +1,87 @@
+<!----
+  This component is for submitting a model for evaluation.
+  It is a form that takes in the model name, the model file, and the model's description.
+---->
+<mat-card>
+  <form [formGroup]="form" (ngSubmit)="onSubmit()">
+
+    <mat-card-content>
+      <mat-form-field appearance="outline" style="width: 100%">
+        <mat-label>Team Name</mat-label>
+        <input matInput formControlName="teamName" placeholder="Team Name" type="text">
+      </mat-form-field>
+    </mat-card-content>
+
+
+    <mat-card-content>
+      <mat-form-field appearance="outline" style="width: 100%">
+        <mat-label>Contact Email</mat-label>
+        <input matInput formControlName="teamName" placeholder="Contact Email" type="text" email>
+      </mat-form-field>
+    </mat-card-content>
+
+    <mat-card-content>
+      <mat-form-field appearance="outline" style="width: 100%">
+        <mat-label>Model Name</mat-label>
+        <input matInput formControlName="modelName" placeholder="Model Name" type="text">
+      </mat-form-field>
+    </mat-card-content>
+
+    <mat-card-content>
+      <mat-form-field appearance="outline" style="width: 100%">
+        <mat-label>Model Link</mat-label>
+        <input formControlName="modelLink" matInput placeholder="Model Link" type="text">
+      </mat-form-field>
+    </mat-card-content>
+
+    <mat-card-content>
+      <mat-form-field appearance="outline" style="width: 100%">
+        <mat-label>Task</mat-label>
+        <mat-select formControlName="task">
+          @for (task of tasks | async; track task) {
+            <mat-option [value]="task.name">{{ task.name }}</mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+    </mat-card-content>
+
+    <mat-card-content>
+      <mat-form-field appearance="outline" style="width: 100%">
+        <mat-label>Dataset</mat-label>
+        <mat-select formControlName="dataset">
+          @for (dataset of datasets|async; track dataset) {
+            <mat-option [value]="dataset.name">{{ dataset.name }} ({{dataset.task}})</mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+    </mat-card-content>
+
+    <mat-card-actions>
+      <button type="button" style="width: 100%" mat-raised-button (click)="predsFileInput.click()">Upload Model
+        Predictions {{ chosenFileName != '' ? ' - ' + chosenFileName : '' }}
+      </button>
+      <input hidden type="file" #predsFileInput formControlName="file" required (change)="onFileSelected($event)"/>
+    </mat-card-actions>
+
+    <br>
+
+    <mat-card-content>
+      <mat-form-field appearance="outline" style="width: 100%">
+        <mat-label>Make Predictions Public</mat-label>
+        <mat-select formControlName="isPublic" required>
+          <mat-option value="true">Yes</mat-option>
+          <mat-option value="false">No</mat-option>
+        </mat-select>
+      </mat-form-field>
+    </mat-card-content>
+
+    <mat-card-actions>
+      <button type="submit" mat-raised-button style="width: 100%" color="primary">
+        Submit
+        <label *ngIf="message != ''"> - {{ message }}</label>
+      </button>
+    </mat-card-actions>
+
+  </form>
+
+</mat-card>

src/app/components/body/submitting/submitting.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SubmittingComponent } from './submitting.component';
+
+describe('SubmittingComponent', () => {
+  let component: SubmittingComponent;
+  let fixture: ComponentFixture<SubmittingComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SubmittingComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(SubmittingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});