diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..7850914f6 --- /dev/null +++ b/.gitignore @@ -0,0 +1,11 @@ +.sass-cache/ +__pycache__ +brain_score.web.egg-info/ +build/ +db.sqlite3 +dist/ +django.log +node_modules/ +static/admin/ +static/CACHE/ +venv diff --git a/README.md b/README.md index 4b49f6ef8..c8e2ff9cf 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,46 @@ [![Build Status](https://travis-ci.com/brain-score/brain-score.web.svg?branch=master)](https://travis-ci.com/brain-score/brain-score.web) ## Setup -Install dependencies: `pip install .` + +Ensure you are using `python@3.8` + +Create and activate a virtual environment + +``` +python3 -m venv +source /bin/activate +``` + +Install dependencies: + +``` +python3 -m pip install --upgrade pip +pip3 install -r requirements.txt +``` Install node dependencies: `npm install --no-optional` -Run server: `python manage.py runserver &` +Run server in dev: `DEBUG=True python manage.py runserver &` + + +### Setup Errors - troubleshooting + +Error installing sass with pip: + +``` +ERROR: Failed building wheel for sass +``` + +Install `cython` and try again + +``` +pip3 install cython +pip3 install -r requirements.txt +``` + +Error installing `psycopg2` Error: pg_config executable not found. - Install postgresql `brew install postgresql` + +Error running the server - `/bin/sh: command not found: sass` - `npm install -g sass` ## Update data diff --git a/benchmarks/templates/benchmarks/base.html b/benchmarks/templates/benchmarks/base.html index 9fec3470b..973d3f8e1 100644 --- a/benchmarks/templates/benchmarks/base.html +++ b/benchmarks/templates/benchmarks/base.html @@ -23,24 +23,33 @@ + + + {% compress css %} - + {% endcompress %} {# libraries #} - + + + + {# data #} + {# own sources #} {% compress js %} @@ -48,12 +57,14 @@ + + {% endcompress %} -{% endblock %} \ No newline at end of file +{% endblock %} diff --git a/benchmarks/urls.py b/benchmarks/urls.py index 3a28a892e..01b3b0854 100644 --- a/benchmarks/urls.py +++ b/benchmarks/urls.py @@ -50,4 +50,3 @@ # collapse all domains into 1D list (from 2D) urlpatterns = sum(all_domain_urls, []) - diff --git a/benchmarks/views/index.py b/benchmarks/views/index.py index cc3892ee7..64136df24 100644 --- a/benchmarks/views/index.py +++ b/benchmarks/views/index.py @@ -1,8 +1,11 @@ import json import logging import re +import datetime +from math import isnan from collections import ChainMap from collections import namedtuple +from collections import OrderedDict import itertools import numpy as np @@ -20,7 +23,7 @@ BASE_DEPTH = 1 ENGINEERING_ROOT = 'engineering' -colors_redgreen = list(Color('red').range_to(Color('green'), 101)) +colors_redgreen = list(Color('red').range_to(Color('#1BA74D'), 101)) colors_gray = list(Color('#f2f2f2').range_to(Color('#404040'), 101)) # scale colors: highlight differences at the top-end of the spectrum more than at the lower end a, b = 0.2270617, 1.321928 # fit to (0, 0), (60, 50), (100, 100) @@ -33,7 +36,7 @@ @cache_page(24 * 60 * 60) def view(request, domain: str): context = get_context(domain=domain) - return render(request, 'benchmarks/index.html', context) + return render(request, 'benchmarks/leaderboard/leaderboard.html', context) def get_context(user=None, domain: str = "vision", benchmark_filter=None, model_filter=None, show_public=False): @@ -102,7 +105,11 @@ def get_context(user=None, domain: str = "vision", benchmark_filter=None, model_ citation_domain_title = '' citation_domain_bibtex = '' - return {'domain': domain, 'models': model_rows, 'benchmarks': benchmarks, + + benchmark_names = [b.short_name for b in list(filter(lambda b: b.number_of_all_children == 0, benchmarks))] + + return {'domain': domain, 'models': model_rows, 'benchmarks': benchmarks, 'benchmark_names': benchmark_names, + 'graph_data': graph_data(), 'submittable_benchmarks': submittable_benchmarks, "benchmark_parents": benchmark_parents, "uniform_parents": uniform_parents, "not_shown_set": not_shown_set, "BASE_DEPTH": BASE_DEPTH, "has_user": False, @@ -538,6 +545,91 @@ def get_visibility(model, user): return "public" +def graph_data(): + models = {} + day_benchmarks = {} + all_scores = Score.objects.all() + + # map all the scores for a model_id by day e.g. + # [{ + # : { + # : [ ,... ], + # : [ ,... ], + # } + # }, + # + # { : { 'model_id': 123, 'averaged_score': .0222 }, ... } + highest_average_score_by_day = OrderedDict() + highest_score = 0.00 + highest_benchmark_count = 0 + + for entry in all_scores: + day = entry['day'] + day_benchmark_count = num_benchmarks_by_day[day] + + if day_benchmark_count > highest_benchmark_count: + highest_benchmark_count = day_benchmark_count + + model_day_average = sum(entry['scores']) / num_benchmarks_by_day[day] + + if model_day_average > highest_score: + highest_score = model_day_average + highest_average_score_by_day[day] = { + 'model_id': entry['model_id'], + 'averaged_score': model_day_average + } + + model_ids = [highest_average_score_by_day[day]['model_id'] for day in highest_average_score_by_day] + models = {model['id']:model for model in Model.objects.filter(pk__in=list(model_ids)).values('id', 'name')} + graph_data = [] + for day in highest_average_score_by_day: + model_id = highest_average_score_by_day[day]['model_id'] + graph_data.append({ + 'day': day, + 'score': highest_average_score_by_day[day]['averaged_score'], + 'model': models[model_id] + }) + + return graph_data + # Adds python functions so the HTML can do several things @register.filter def get_item(dictionary, key): diff --git a/benchmarks/views/user.py b/benchmarks/views/user.py index a93c8a712..c96467344 100644 --- a/benchmarks/views/user.py +++ b/benchmarks/views/user.py @@ -1,11 +1,11 @@ import json import logging +import os import zipfile import boto3 import requests from botocore.exceptions import ClientError -from django.conf import settings from django.contrib.auth import get_user_model, login, authenticate, update_session_auth_hash, logout from django.contrib.auth.forms import PasswordChangeForm, PasswordResetForm, SetPasswordForm from django.contrib.sites.shortcuts import get_current_site @@ -28,6 +28,7 @@ class Activate(View): + def get(self, request, uidb64, token): try: uid = force_str(urlsafe_base64_decode(uidb64)) @@ -54,6 +55,7 @@ def post(self, request): class Signup(View): + def get(self, request): form = SignupForm() return render(request, 'benchmarks/signup.html', {'form': form}) @@ -123,7 +125,6 @@ class LandingPage(View): def get(self, request): return render(request, 'benchmarks/landing_page.html') - class Logout(View): domain = None @@ -132,6 +133,12 @@ def get(self, request): return HttpResponseRedirect('../') +class Landing(View): + + def get(self, request): + return render(request, 'benchmarks/landing_page.html') + + class Upload(View): domain = None @@ -181,8 +188,10 @@ def post(self, request): auth = get_secret("brainscore-website_jenkins_access") auth = (auth['user'], auth['password']) - job_name = "create_github_pr" if self.domain == "language" else "run_benchmarks" - job_name = conditional_debug(job_name) + if self.domain == "language": + job_name = "create_github_pr" + else: + job_name = "run_benchmarks" request_url = f"{jenkins_url}/job/{job_name}/buildWithParameters" \ f"?TOKEN=trigger2scoreAmodel" \ @@ -293,10 +302,10 @@ def submit_to_jenkins(request, domain, model_name, benchmarks=None): jenkins_url = "http://braintree.mit.edu:8080" auth = get_secret("brainscore-website_jenkins_access") auth = (auth['user'], auth['password']) - + # language has a different URL building system than vision if domain == "vision": - job_name = conditional_debug("run_benchmarks") + job_name = "run_benchmarks" benchmark_string = ' '.join(benchmarks) request_url = f"{jenkins_url}/job/{job_name}/buildWithParameters" \ f"?TOKEN=trigger2scoreAmodel" \ @@ -304,7 +313,7 @@ def submit_to_jenkins(request, domain, model_name, benchmarks=None): f"&benchmarks={benchmark_string}" _logger.debug(f"request_url: {request_url}") else: - job_name = conditional_debug("score_plugins") + job_name = "score_plugins" benchmark_string = '%20'.join(benchmarks) request_url = f"{jenkins_url}/job/{job_name}/buildWithParameters" \ f"?token=trigger2scoreAmodel" \ @@ -325,6 +334,7 @@ def submit_to_jenkins(request, domain, model_name, benchmarks=None): def resubmit(request, domain: str): + model_ids, model_names, benchmarks = collect_models_benchmarks(request) model_id_name_dict = dict(zip(model_ids, model_names)) @@ -344,6 +354,7 @@ def resubmit(request, domain: str): class DisplayName(View): + def post(self, request): user_instance = User.objects.get_by_natural_key(request.user.email) user_instance.display_name = request.POST['display_name'] @@ -396,6 +407,7 @@ def post(self, request): class Password(View): + def get(self, request): form = PasswordResetForm() return render(request, 'benchmarks/password.html', {'form': form}) @@ -437,6 +449,7 @@ def post(self, request): class ChangePassword(View): + def get(self, request, uidb64, token): try: uid = force_str(urlsafe_base64_decode(uidb64)) @@ -509,13 +522,6 @@ def split_identifier_version(versioned_benchmark_identifier): return identifier, version -def conditional_debug(job_name: str) -> str: - """ Tests if the website is running in DEBUG mode, and if it is, changes the job to a dev job. """ - if settings.DEBUG: - job_name = f"dev_{job_name}" - return job_name - - def get_secret(secret_name, region_name='us-east-2'): session = boto3.session.Session() _logger.info("Fetch secret from secret manager") diff --git a/environment.yml b/environment.yml deleted file mode 100644 index 31f2fa352..000000000 --- a/environment.yml +++ /dev/null @@ -1,19 +0,0 @@ -name: brain-score.web -channels: -- defaults -- anaconda -- pytorch -dependencies: - - python>=3.6 - - pip - - django - - numpy - - psycopg2 - - nodejs - - boto3 - - pandas - - pip: - - django_compressor - - colour - - tqdm - - requests diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 000000000..cfdb80267 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,417 @@ +{ + "name": "brain-score.web", + "version": "0.1.0", + "lockfileVersion": 2, + "requires": true, + "packages": { + "": { + "name": "brain-score.web", + "version": "0.1.0", + "license": "ISC", + "dependencies": { + "bulma": "^0.9.3", + "bulma-extensions": "^6.2.7", + "datatables.net-dt": "^1.10.19", + "sass": "^1.35.0" + }, + "devDependencies": {} + }, + "node_modules/anymatch": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", + "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", + "dependencies": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/binary-extensions": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", + "engines": { + "node": ">=8" + } + }, + "node_modules/braces": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", + "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "dependencies": { + "fill-range": "^7.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/bulma": { + "version": "0.9.4", + "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz", + "integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ==" + }, + "node_modules/bulma-extensions": { + "version": "6.2.7", + "resolved": "https://registry.npmjs.org/bulma-extensions/-/bulma-extensions-6.2.7.tgz", + "integrity": "sha512-y3dHsxlCYkuxUg87KKN9H4InM8NCk8tdnrlxLkYak8sd2WQdllg3wP2Nv41lj8X46uPXX2ADP0MO65LlXPHt/Q==" + }, + "node_modules/chokidar": { + "version": "3.5.3", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", + "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", + "funding": [ + { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + ], + "dependencies": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + }, + "engines": { + "node": ">= 8.10.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/datatables.net": { + "version": "1.13.5", + "resolved": "https://registry.npmjs.org/datatables.net/-/datatables.net-1.13.5.tgz", + "integrity": "sha512-XoCQHkUM5MwbC3Wx7WpVvt4i880J8pIFDA9HIKD4GhvtalryBfmdd+bZvrc/rEbraZS7U4eR2k8/wFY0NeHVqQ==", + "dependencies": { + "jquery": ">=1.7" + } + }, + "node_modules/datatables.net-dt": { + "version": "1.13.5", + "resolved": "https://registry.npmjs.org/datatables.net-dt/-/datatables.net-dt-1.13.5.tgz", + "integrity": "sha512-6cIFRd/ujr0AfHPLykJNAs/6FLgDygWgYoV4d7trK2+l4NLRCrlqumtA6pm+7xF5bBaIcD0DIT8W97TIUg/PBA==", + "dependencies": { + "datatables.net": ">=1.13.4", + "jquery": ">=1.7" + } + }, + "node_modules/fill-range": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", + "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "dependencies": { + "to-regex-range": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "hasInstallScript": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, + "node_modules/glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/immutable": { + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.2.tgz", + "integrity": "sha512-oGXzbEDem9OOpDWZu88jGiYCvIsLHMvGw+8OXlpsvTFvIQplQbjg1B1cvKg8f7Hoch6+NGjpPsH1Fr+Mc2D1aA==" + }, + "node_modules/is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dependencies": { + "binary-extensions": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/is-extglob": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", + "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-glob": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", + "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", + "dependencies": { + "is-extglob": "^2.1.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "engines": { + "node": ">=0.12.0" + } + }, + "node_modules/jquery": { + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.0.tgz", + "integrity": "sha512-umpJ0/k8X0MvD1ds0P9SfowREz2LenHsQaxSohMZ5OMNEU2r0tf8pdeEFTHMFxWVxKNyU9rTtK3CWzUCTKJUeQ==" + }, + "node_modules/normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "engines": { + "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "dependencies": { + "picomatch": "^2.2.1" + }, + "engines": { + "node": ">=8.10.0" + } + }, + "node_modules/sass": { + "version": "1.64.2", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.64.2.tgz", + "integrity": "sha512-TnDlfc+CRnUAgLO9D8cQLFu/GIjJIzJCGkE7o4ekIGQOH7T3GetiRR/PsTWJUHhkzcSPrARkPI+gNWn5alCzDg==", + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/source-map-js": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", + "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "dependencies": { + "is-number": "^7.0.0" + }, + "engines": { + "node": ">=8.0" + } + } + }, + "dependencies": { + "anymatch": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", + "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", + "requires": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + } + }, + "binary-extensions": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==" + }, + "braces": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", + "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "requires": { + "fill-range": "^7.0.1" + } + }, + "bulma": { + "version": "0.9.4", + "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz", + "integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ==" + }, + "bulma-extensions": { + "version": "6.2.7", + "resolved": "https://registry.npmjs.org/bulma-extensions/-/bulma-extensions-6.2.7.tgz", + "integrity": "sha512-y3dHsxlCYkuxUg87KKN9H4InM8NCk8tdnrlxLkYak8sd2WQdllg3wP2Nv41lj8X46uPXX2ADP0MO65LlXPHt/Q==" + }, + "chokidar": { + "version": "3.5.3", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", + "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", + "requires": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "fsevents": "~2.3.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + } + }, + "datatables.net": { + "version": "1.13.5", + "resolved": "https://registry.npmjs.org/datatables.net/-/datatables.net-1.13.5.tgz", + "integrity": "sha512-XoCQHkUM5MwbC3Wx7WpVvt4i880J8pIFDA9HIKD4GhvtalryBfmdd+bZvrc/rEbraZS7U4eR2k8/wFY0NeHVqQ==", + "requires": { + "jquery": ">=1.7" + } + }, + "datatables.net-dt": { + "version": "1.13.5", + "resolved": "https://registry.npmjs.org/datatables.net-dt/-/datatables.net-dt-1.13.5.tgz", + "integrity": "sha512-6cIFRd/ujr0AfHPLykJNAs/6FLgDygWgYoV4d7trK2+l4NLRCrlqumtA6pm+7xF5bBaIcD0DIT8W97TIUg/PBA==", + "requires": { + "datatables.net": ">=1.13.4", + "jquery": ">=1.7" + } + }, + "fill-range": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", + "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "requires": { + "to-regex-range": "^5.0.1" + } + }, + "fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "optional": true + }, + "glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "requires": { + "is-glob": "^4.0.1" + } + }, + "immutable": { + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.2.tgz", + "integrity": "sha512-oGXzbEDem9OOpDWZu88jGiYCvIsLHMvGw+8OXlpsvTFvIQplQbjg1B1cvKg8f7Hoch6+NGjpPsH1Fr+Mc2D1aA==" + }, + "is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "requires": { + "binary-extensions": "^2.0.0" + } + }, + "is-extglob": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", + "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==" + }, + "is-glob": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", + "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", + "requires": { + "is-extglob": "^2.1.1" + } + }, + "is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==" + }, + "jquery": { + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.0.tgz", + "integrity": "sha512-umpJ0/k8X0MvD1ds0P9SfowREz2LenHsQaxSohMZ5OMNEU2r0tf8pdeEFTHMFxWVxKNyU9rTtK3CWzUCTKJUeQ==" + }, + "normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==" + }, + "picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==" + }, + "readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "requires": { + "picomatch": "^2.2.1" + } + }, + "sass": { + "version": "1.64.2", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.64.2.tgz", + "integrity": "sha512-TnDlfc+CRnUAgLO9D8cQLFu/GIjJIzJCGkE7o4ekIGQOH7T3GetiRR/PsTWJUHhkzcSPrARkPI+gNWn5alCzDg==", + "requires": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + } + }, + "source-map-js": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", + "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==" + }, + "to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "requires": { + "is-number": "^7.0.0" + } + } + } +} diff --git a/requirements.txt b/requirements.txt new file mode 100644 index 000000000..6ca66bfe2 --- /dev/null +++ b/requirements.txt @@ -0,0 +1,28 @@ +asgiref==3.7.2 +backports.zoneinfo==0.2.1 +boto3==1.28.15 +botocore==1.31.15 +certifi==2023.7.22 +charset-normalizer==3.2.0 +cython==3.0.0 +colour==0.1.5 +Django==4.0 +django-appconf==1.0.5 +django-compressor==4.4 +idna==3.4 +jmespath==1.0.1 +numpy==1.24.4 +pandas==1.3.5 +python-dateutil==2.8.2 +psycopg2==2.9.3 +pytz==2023.3 +rcssmin==1.1.1 +requests==2.31.0 +rjsmin==1.2.1 +s3transfer==0.6.1 +six==1.16.0 +sqlparse==0.4.4 +tqdm==4.65.0 +typing_extensions==4.7.1 +tzdata==2023.3 +urllib3==1.26.16 diff --git a/static/benchmarks/css/_variables.sass b/static/benchmarks/css/_variables.sass new file mode 100644 index 000000000..7fdc33381 --- /dev/null +++ b/static/benchmarks/css/_variables.sass @@ -0,0 +1,15 @@ +$max-page-width: 600px +$brain-score-color: rgb(7, 137, 48) +$sidebar_width: 300px + +$brainscore_gray1: #EFF3FC +$brainscore_gray2: #D1E0FF +$brainscore_gray3: #8A99B7 +$brainscore_gray4: #001B36 + +$brainscore_green: #45C676 +$brainscore_blue: #47B7DE +$brainscore_pollen: #F5FD66 +$brainscore_sky: #1AA6D6 +$brainscore_mint: #45C676 +$brainscore_lunar: #B9C8E6 diff --git a/static/benchmarks/css/components/banner.sass b/static/benchmarks/css/components/banner.sass new file mode 100644 index 000000000..c7e0937dd --- /dev/null +++ b/static/benchmarks/css/components/banner.sass @@ -0,0 +1,13 @@ +.banner + margin-top: 20px + margin-bottom: 20px + padding: 20px + width: 100% + + h1 + font-size: 2.5em + font-weight: bold + color: white + + p + color: white diff --git a/static/benchmarks/css/components/info-section.sass b/static/benchmarks/css/components/info-section.sass new file mode 100644 index 000000000..df607abcc --- /dev/null +++ b/static/benchmarks/css/components/info-section.sass @@ -0,0 +1,10 @@ +.info-section + max-width: 381px + + .box + margin-bottom: 20px + + .title + font-weight: bold + font-size: 1.5em + color: $brainscore_green diff --git a/static/benchmarks/css/components/left-sidebar.sass b/static/benchmarks/css/components/left-sidebar.sass new file mode 100644 index 000000000..036aa3694 --- /dev/null +++ b/static/benchmarks/css/components/left-sidebar.sass @@ -0,0 +1,33 @@ +.left-sidebar + position: fixed + top: 0 + right: calc(100% - $sidebar_width) + bottom: 0 + left: 0 + padding-right: 0 + background: $brainscore_gray4 + + a + display: block + padding-left: 20px + line-height: 50px + font-size: 16px + text-decoration: none + color: white + + &.brainscore-logo + display: flex + justify-content: center + margin: 30px 0 + padding: 0 + + img + width: 90px + + img + display: inline-block + vertical-align: middle + margin-right: 10px + + &.selected + border-right: 8px solid $brainscore_green diff --git a/static/benchmarks/css/landing_page.css b/static/benchmarks/css/landing_page.css new file mode 100644 index 000000000..44e2c8bdc --- /dev/null +++ b/static/benchmarks/css/landing_page.css @@ -0,0 +1,303 @@ +@import url("https://fonts.googleapis.com/css?family=Open+Sans"); +.navbar { + height: 100px; +} + +.navbar-item.social_icon { + padding: 10px 0 0 0; + margin-left: 15px; +} + +.image.navbar_element { + max-height: 80%; + max-width: 80%; +} + +.navbar-brand { + padding-top: 10px; +} + +.container.main_body { + background-image: linear-gradient(0deg, #e8f4ea, white); +} + +.button { + flex: 1 1 auto; + text-align: center; + transition: 0.5s; + color: white; + border-radius: 16px; + border-width: 0; + font-family: "Open Sans", sans-serif; + font-size: 15px; + font-weight: 600; + margin-top: 10px; + padding: 8px 30px; + margin-right: 20px; + background-image: linear-gradient(0deg, #47B7DE, #45C676); +} + +.heading_green { + color: #45C676; + font-family: "Open Sans", sans-serif; + font-size: 40px; + font-weight: 800; +} + +.text-default { + color: black; + font-family: "Open Sans", sans-serif; + width: 85%; + font-size: 20px; + font-weight: 200; + padding-top: 20px; +} + +.container.landing::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: linear-gradient(0deg, #47B7DE, #45C676); + opacity: 0.3; + z-index: -1; + border-radius: 40px; +} + +.container.landing { + position: relative; + margin-top: 120px; + border-radius: 40px; +} + +.image.head_art { + margin-top: -12px; + margin-bottom: -12px; +} + +.image.logo_green { + width: 110%; + max-width: 120%; + height: auto; +} + +.column.left_side { + margin-top: 15%; + padding-left: 6%; +} + +.landing_heading { + color: black; + font-family: "Open Sans", sans-serif; + padding-top: 4%; + font-size: 165%; + font-weight: 500; +} + +.text-default-small { + color: black; + font-family: "Open Sans", sans-serif; + padding-top: 2%; + font-weight: 200; + padding-right: 25%; + margin-bottom: -10px; +} + +.container.domain_buttons { + padding-top: 4%; +} + +.button.domain_button { + width: 25%; + height: 30px; +} + +.container.about { + margin-top: 20px; + padding: 75px; + border-radius: 40px; +} + +.container.benefits { + margin-top: 20px; + margin-bottom: -20px; + padding: 30px 75px 75px; + border-radius: 40px; + background-image: linear-gradient(0deg, #47B7DE, #45C676); +} + +.container.benefits_card { + text-align: center; + padding: 50px; + border-radius: 40px; + background-color: white; +} + +.benefits_heading { + color: #45C676; + font-family: "Open Sans", sans-serif; + font-size: 200%; + max-font-size: 200%; + font-weight: 800; +} + +.benefits_info { + padding-top: 15px; + color: black; + font-family: "Open Sans", sans-serif; + font-size: 100%; + font-weight: 200; + padding-bottom: 15px; +} + +.benefit_icon { + margin: auto; + width: 50px; + height: auto; + padding-bottom: 20px; +} + +.button.benefit_button { + margin: auto; + font-size: 80%; + width: 50%; + height: 35px; +} + +.image.b-w_logo { + width: 50px; + height: auto; + padding-bottom: 30px; + margin: auto; +} + +.container.landing_leaderboard { + margin-top: 20px; + padding: 120px; + border-radius: 40px; + background-image: url("/static/benchmarks/img/new_ui_elements/CNN_abstract.png"); + background-repeat: no-repeat; + background-size: 80% auto; + background-position: 350px -200px; +} + +.button.tutorial_button { + font-size: 100%; + width: 35%; + height: 35px; +} + +.button.hollow_button { + font-size: 100%; + width: 35%; + height: 35px; + border: 2px solid #45C676; + color: #45C676; + background-image: linear-gradient(0deg, white, white); +} + +.leaderboard_info { + padding-top: 20px; + padding-bottom: 25px; + color: black; + font-family: "Open Sans", sans-serif; + font-size: 100%; + font-weight: 200; +} + +.container.main_footer { + background-image: linear-gradient(0deg, #47B7DE, #45C676); + padding: 50px 100px; +} + +button.simple_button { + background-color: transparent; + background-image: none; + font-family: "Open Sans", sans-serif; + width: 100px; +} + +.join_text { + font-family: "Open Sans", sans-serif; + color: white; + font-size: 25px; + font-weight: 600; + margin-bottom: 30px; +} + +button.white_button { + background-color: white; + background-image: none; + margin-top: 30px; + color: #45C676; +} + +@media (max-width: 850px) { + .text-default-small { + width: 125%; + } + + .button.domain_button { + font-size: 100%; + width: 20%; + height: 20px; + } + + .button.tutorial_button { + width: 70%; + height: 35px; + } + + .button.hollow_button { + width: 70%; + } +} +@media (max-width: 1024px) { + .button.benefit_button { + margin: auto; + width: 100%; + height: 35px; + } +} +@media (max-width: 1215px) { + .button.benefit_button { + margin: auto; + height: 35px; + } +} +@media (max-width: 768px) { + .text-default-small { + width: 75%; + margin-left: 23%; + } + + .button.domain_button { + font-size: 100%; + width: 25%; + height: 30px; + } + + .image.head_art { + width: 0; + height: auto; + } + + .image.logo_green { + padding-top: 15px; + width: 80%; + height: auto; + } + + .container.landing_leaderboard { + background-image: none; + } +} +@media (min-width: 1200px) { + .text-default-small { + font-size: 100%; + } +} + +/*# sourceMappingURL=landing_page.css.map */ diff --git a/static/benchmarks/css/landing_page.sass b/static/benchmarks/css/landing_page.sass new file mode 100644 index 000000000..9507b0dbd --- /dev/null +++ b/static/benchmarks/css/landing_page.sass @@ -0,0 +1,322 @@ +@import url('https://fonts.googleapis.com/css?family=Open+Sans') +$brainscore_green: #45C676 +$brainscore_blue: #47B7DE + +//container to keep a fixed gap on all sizes +.container.my_container + width: 95% + max-width: 1500px + +// navbar +.navbar_updated + height: 100px + + +.navbar-item.social_icon + padding: 10px 0 0 0 + margin-left: 15px + +.image.navbar_element + max-height: 80% + max-width: 80% + +.navbar-brand + padding-top: 10px + +.container.my_container.nav-container + margin-left: 2.5% + margin-right: 2.5% + max-width: $fullhd - 60px + + +// main body and components +.container.my_container.main_body + background-image: linear-gradient(0deg, #e8f4ea, white) + +.button.new_design + flex: 1 1 auto + text-align: center + transition: 0.5s + color: white + border-radius: 16px + border-width: 0 + font-family: 'Open Sans', sans-serif + font-size: 15px + font-weight: 600 + margin-top: 10px + padding: 8px 30px + margin-right: 20px + background-image: linear-gradient(0deg, $brainscore_blue, $brainscore_green) + +h1.heading_green + color: $brainscore_green + font-family: 'Open Sans', sans-serif + font-size: 40px + margin-left: 30px + font-weight: 800 + +.text-default + color: black + text-align: justify + font-family: 'Open Sans', sans-serif + width: 85% + font-size: 20px + font-weight: 200 + padding-top: 20px + margin-left: 30px + +.container.landing::before // controls the landing gradient + content: "" + position: absolute + top: 0 + left: 0 + width: 100% + height: 100% + background-image: linear-gradient(0deg, $brainscore_blue, $brainscore_green) + opacity: 0.3 + z-index: -1 + border-radius: 40px + +.container.landing + position: relative // critical for gradient above + margin-top: 130px + border-radius: 40px + +.image.head_art + margin-top: -12px + margin-bottom: -12px + +.image.logo_green + width: 110% + max-width: 120% + height: auto + +.column.left_side + margin-top: 15% + padding-left: 6% + +h3.landing_heading + color: black + font-family: 'Open Sans', sans-serif + padding-top: -5% + font-size: 165% + font-weight: 500 + +p.text-default-small + color: black + font-family: 'Open Sans', sans-serif + width: 100% + padding-top: 2% + font-weight: 200 + padding-right: 25% + margin-bottom: -10px !important + +.container.domain_buttons + padding-top: 4% + +.button.domain_button + width: 25% + height: 30px + + +// about section +.container.about + margin-top: 20px + padding: 75px + border-radius: 40px + + +// benefits section +.container.benefits + margin-top: 20px + margin-bottom: -20px + padding: 30px 75px 75px + border-radius: 40px + background-image: linear-gradient(0deg, $brainscore_blue, $brainscore_green) + +.container.benefits_card + text-align: center + padding: 50px + border-radius: 40px + background-color: white + +h3.benefits_heading + color: $brainscore_green + font-family: 'Open Sans', sans-serif + font-size: 200% + max-font-size: 200% + font-weight: 800 + +.benefits_info + padding-top: 15px + color: black + font-family: 'Open Sans', sans-serif + font-size: 100% + font-weight: 200 + padding-bottom: 15px + +.benefit_icon + margin: auto + width: 50px + height: auto + +.button.benefit_button + margin: auto + font-size: 80% + width: 50% + height: 35px + +.image.b-w_logo + width: 50px + height: auto + padding-bottom: 30px + margin: auto + + +// leaderboard section (on landing) +.container.landing_leaderboard + margin-top: 20px + padding: 90px + border-radius: 40px + background-repeat: no-repeat + background-size: 80% auto + background-position: 400px -200px + +.button.tutorial_button + font-size: 100% + width: 35% + height: 35px + +.button.hollow_button + font-size: 100% + width: 35% + height: 35px + border: 2px solid $brainscore_green + color: $brainscore_green + background-image: linear-gradient(0deg, white, white) // for some reason background-color: white does not work + +.leaderboard_info + padding-top: 20px + padding-bottom: 25px + color: black + font-family: 'Open Sans', sans-serif + font-size: 100% + font-weight: 200 + text-align: justify + + +// footer +.container.main_footer + background-image: linear-gradient(0deg, $brainscore_blue, $brainscore_green) + padding: 50px 100px + margin-top: -25px // shift up due to adding {% footer %} tag, creating gap + +button.simple_button + background-color: transparent + background-image: none + font-family: 'Open Sans', sans-serif + border-color: transparent + color: white + width: 100px + + + +//mobile styling (below 768px) +@media (max-width: 768px) + .text-default + margin: auto + .text-default-small + width: 30% + .landing_heading + margin: auto + .heading_green + margin-right: 6% + text-align: center + .image.head_art + width: 0 + height: auto + .image.logo_green + padding-top: 15px + margin: auto + width: 80% + height: auto + .container.about + padding: 0 + .container.benefits + padding: 10px + .container.benefits_card + padding: 10px + width: 75% + .benefits_heading + margin: 2% 0 0 0 !important + .benefits_info + margin: 0 !important + .container.landing_leaderboard + background-size: 0 auto + padding: 0 + +// in between tablet and mobile, to take care of head resizing: +@media (min-width: 769px) and (max-width: 880px) + p.text-default-small + margin-top: 140px + width: 233% !important + text-align: justify + .domain_buttons + position: relative + top: -150px + margin-top: -50px + .landing_heading + width: 75% + .container.benefits_card + padding: 5px + .container.about + padding: 5px + .container.landing_leaderboard + padding: 15px + .container.benefits + padding: 10px + +// tablet: +@media (min-width: 880px) and (max-width: 1023px) + .column.left_side + margin-top: 5% + .landing_heading + width: 120% + p.text-default-small + width: 130% !important + .container.benefits_card + padding: 10px + .container.about + padding: 5px + .container.landing_leaderboard + padding: 20px + .container.benefits + padding: 10px + +//desktop +@media (min-width: 1024px) and (max-width: 1215px) + .container.about + padding: 38px + .column.left_side + margin-top: 10% + .container.benefits_card + padding: 20px + .container.landing_leaderboard + padding: 45px + +//widescreen +// @media (min-width: 1216px) and (max-width: 1407px) + +// FHD +@media (max-width: 1407px) + .container.landing_leaderboard + background-position: 520px -200px + p.text-default-small + width: 120% + +// resizing past normal breakpoints, prevents large text and navbar overflow >fullhd +@media (min-width: $fullhd) + .container.my_container.nav-container + margin: auto + .text-default-small + font-size: 100% \ No newline at end of file diff --git a/static/benchmarks/css/leaderboard/leaderboard-table.sass b/static/benchmarks/css/leaderboard/leaderboard-table.sass new file mode 100644 index 000000000..4df44b530 --- /dev/null +++ b/static/benchmarks/css/leaderboard/leaderboard-table.sass @@ -0,0 +1,193 @@ +.leaderboard-table-component + banner + display: flex + position: relative + align-items: center + margin: -5px 0 10px 0px + margin-bottom: 20px + + .leaderboard-table-banner-icon + width: 83px + height: 78px + z-index: 1 + border: 5px solid white + border-radius: 81px + + img + margin: 12px + + .leaderboard-table-banner + display: flex + align-items: center + height: 55px + width: 100% + margin-left: -15px + + h3 + margin-left: 10px + font-family: 'Open Sans', sans-serif + font-size: 28px + font-weight: 900 + color: white + +.filters + display: flex + position: relative + height: 80px + align-items: center + padding-left: 10px + margin-bottom: 5px + + .benchmark-sort + max-width: 300px + + .legend + display: flex + position: relative + width: 40% + min-width: 300px + height: 30px + align-items: center + padding: 0 15px + margin-left: auto + margin-right: 10px + border-radius: 25px + background: linear-gradient(90deg, rgba(253.07360206185567, 12.603708989690725, 0.7063979381443353, 0.19576321702511779), rgba(115.52127251251848, 198.4398288659794, 67.740171, 1.0000000000000002)) + + label + font-weight: bold + position: absolute + top: -25px + + .legend-right + margin-left: auto + + .leaderboard-breadcrumb + position: absolute + bottom: 0 + right: 10px + font-weight: bold + + .breadcrumb-link + &:hover + color: #008CBA + text-decoration: underline + +.leaderboard-table-container + overflow-x: scroll + + table + table-layout: fixed + border-collapse: separate + border-spacing: 0 10px + padding: 0 10px + + tr + height: 80px + box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02) + border-radius: 10px + + td + vertical-align: middle + border-bottom: none + + &.display-square + text-align: center + + thead + height: 80px + tr + th + vertical-align: middle + border-bottom: none + + &.rank-header + width: 30px + + &.model-header + width: 75px + margin-left: 10px + text-align: right + + &.benchmark-header + div + position: relative + width: 125px + height: 45px + padding: 0 10px + border-radius: 25px + text-align: center + background: $brainscore_gray1 + + p + max-width: 120px + line-height: 45px + overflow: hidden + text-wrap: nowrap + text-overflow: ellipsis + text-align: center + + &.average + &.depth_0 + div + background: $brainscore_mint + + &.depth_1 + div + background: $brainscore_gray4 + color: $brainscore_mint + + &.engineering + &.depth_0 + div + background: $brainscore_sky + + .benchmark-count + position: absolute + padding: 0 7px + bottom: -10px + right: -10px + line-height: 18px + font-size: 14px + color: #363636 + background: white + border: 1px solid $brainscore_mint + border-radius: 11px + + .fa-up-right-and-down-left-from-center + font-size: 12px + color: $brainscore_mint + + .fa-down-left-and-up-right-to-center + font-size: 12px + color: $brainscore_gray4 + display: none + + &.open + background: $brainscore_mint + border: 1px solid $brainscore_gray4 + .fa-down-left-and-up-right-to-center + display: var(--fa-display,inline-block) + .fa-up-right-and-down-left-from-center + display: none + + tbody + td.rank + padding: 0 + padding-left: 20px + font-size: 48px + + td.model + max-width: 250px + padding-right: 20px + padding-left: 20px + + .identifier, .submitter + text-align: right + overflow: hidden + + td.display-square + div + height: 45px + padding: 10px + border-radius: 25px diff --git a/static/benchmarks/css/leaderboard/leaderboard.sass b/static/benchmarks/css/leaderboard/leaderboard.sass new file mode 100644 index 000000000..3e093ab1b --- /dev/null +++ b/static/benchmarks/css/leaderboard/leaderboard.sass @@ -0,0 +1,36 @@ +.leaderboard + .leaderboard-totals + &-card + display: flex + height: 177px + text-align: center + + &-label + display: flex + flex-direction: column + align-items: center + justify-content: center + width: calc(50% + 20px) + + margin: -20px + padding: 20px + + color: white + font-size: 20px + font-weight: 900 + line-height: 22px + border-radius: 5px + + img + margin-bottom: 10px + + &-stat + display: flex + align-items: center + justify-content: center + width: 50% + + margin-left: 20px + + font-size: 60px + font-weight: 700 diff --git a/static/benchmarks/css/login.sass b/static/benchmarks/css/login.sass index 35af0cd86..0ffd63321 100644 --- a/static/benchmarks/css/login.sass +++ b/static/benchmarks/css/login.sass @@ -1,11 +1,100 @@ -.submission - background-color: #008CBA - border: none - color: white +@import url('https://fonts.googleapis.com/css?family=Open+Sans') +$brainscore_green: #45C676 +$brainscore_blue: #47B7DE -input[type="file"] - display: none +.container.login + margin-top: 150px + padding: 85px + position: relative /* Required to position the pseudo-element */ + border-radius: 40px + background-size: cover + background-repeat: no-repeat -p.login - margin-block-start: .5em - margin-block-end: .5em +.container.login::before + content: "" + position: absolute + top: 0 + left: 0 + right: 0 + bottom: 0 + background: linear-gradient(rgba($brainscore_green, 0.6), rgba($brainscore_blue, 0.6)) + border-radius: 40px + +.container.login-left + background-color: white + height: 550px + border-radius: 5px + padding: 7% + +span.green_log + font-weight: 600 + font-family: 'Open Sans', sans-serif + color: $brainscore_green + +span.gray_log + font-weight: 600 + font-family: 'Open Sans', sans-serif + color: lightgray + +p.small_green + font-weight: 500 + font-family: 'Roboto', sans-serif + color: $brainscore_green + padding-top: 10px + +.input.gray + background-color: #ededed + margin-bottom: 7% + +label.label-green + color: $brainscore_green + font-weight: 500 + font-family: 'Roboto', sans-serif + + +p.create-account, p.create-account a + color: $brainscore_green + text-decoration: underline + font-size: 14px + padding-top: 10px + padding-bottom: 30px + +//mobile styling (below 768px) - remove brain background +@media (max-width: 768px) + .container.login + background: linear-gradient(rgba($brainscore_green, 0.6), rgba($brainscore_blue, 0.6)) + .button.new_design.tutorial_button + margin-left: 50px + p.forgot_password + margin-left: 20px + + +// FHD +@media (max-width: 1407px) + .container.login + background-position-x: -150px + +//wrong password error message effect: +@keyframes fadeOut + 0% + opacity: 1 + 100% + opacity: 0 + +#wrong-password + opacity: 1 + transition: opacity 0.5s + + &.fade-out + animation-name: fadeOut + animation-timing-function: ease-out + animation-duration: 0.5s + animation-delay: 0s + animation-fill-mode: forwards + +#wrong-password + position: fixed + top: 0 + left: 0 + right: 0 + z-index: 1001 // Ensure it's above other elements like the navbar. Adjust as necessary. diff --git a/static/benchmarks/css/main.sass b/static/benchmarks/css/main.sass index 03f77d1b9..40e9af247 100644 --- a/static/benchmarks/css/main.sass +++ b/static/benchmarks/css/main.sass @@ -1,6 +1,4 @@ -$max-page-width: 600px -$brain-score-color: rgb(7, 137, 48) - +@import "variables" @import "bulma" @import "header" @import "table" @@ -9,6 +7,8 @@ $brain-score-color: rgb(7, 137, 48) @import "login" @import "model" @import "competition" +@import "landing_page" +@import "v2" main.content margin-top: 75px diff --git a/static/benchmarks/css/v2.sass b/static/benchmarks/css/v2.sass new file mode 100644 index 000000000..0b3c5cfe5 --- /dev/null +++ b/static/benchmarks/css/v2.sass @@ -0,0 +1,52 @@ +@import "components/banner" +@import "components/left-sidebar" +@import "components/info-section" +@import "leaderboard/leaderboard" +@import "leaderboard/leaderboard-table" + +h1,h2,h3,h4,h5,p,span,a + font-family: 'Open Sans', sans-serif + +.box + font-family: 'Open Sans', sans-serif + border-radius: 8px + +.button + padding: 0 25px + border-radius: 20px + font-family: 'Open Sans', sans-serif + +.button-primary + background: $brainscore_green + color: white + +.button-ghost + border: 1px solid $brainscore_green + color: $brainscore_green + +.gradient + background: linear-gradient(0deg, $brainscore_blue, $brainscore_green) + + &--90 + background: linear-gradient(90deg, $brainscore_blue, $brainscore_green) + +.cursor + &--pointer + cursor: pointer + +.content-container + width: calc(100% - $sidebar_width - 40px) + margin-left: auto + margin-right: 20px + + .social-icons + display: flex + justify-content: flex-end + margin-top: 20px + + a + margin-left: 15px + color: $brainscore_gray4 + + i.fa-brands + font-size: 2.5em diff --git a/static/benchmarks/img/CNN_abstract.png b/static/benchmarks/img/CNN_abstract.png new file mode 100644 index 000000000..1d59febe2 Binary files /dev/null and b/static/benchmarks/img/CNN_abstract.png differ diff --git a/static/benchmarks/img/DCNN_icon.png b/static/benchmarks/img/DCNN_icon.png new file mode 100644 index 000000000..98a38b3ba Binary files /dev/null and b/static/benchmarks/img/DCNN_icon.png differ diff --git a/static/benchmarks/img/White_logo_full.png b/static/benchmarks/img/White_logo_full.png new file mode 100644 index 000000000..79a941fa0 Binary files /dev/null and b/static/benchmarks/img/White_logo_full.png differ diff --git a/static/benchmarks/img/access_icon.png b/static/benchmarks/img/access_icon.png new file mode 100644 index 000000000..35b0198dd Binary files /dev/null and b/static/benchmarks/img/access_icon.png differ diff --git a/static/benchmarks/img/b-w_logo.png b/static/benchmarks/img/b-w_logo.png new file mode 100644 index 000000000..56d048943 Binary files /dev/null and b/static/benchmarks/img/b-w_logo.png differ diff --git a/static/benchmarks/img/book_icon.png b/static/benchmarks/img/book_icon.png new file mode 100644 index 000000000..c6924c1ca Binary files /dev/null and b/static/benchmarks/img/book_icon.png differ diff --git a/static/benchmarks/img/collab_icon.png b/static/benchmarks/img/collab_icon.png new file mode 100644 index 000000000..c561dcd0a Binary files /dev/null and b/static/benchmarks/img/collab_icon.png differ diff --git a/static/benchmarks/img/collaboration.png b/static/benchmarks/img/collaboration.png new file mode 100644 index 000000000..d7c90b9b7 Binary files /dev/null and b/static/benchmarks/img/collaboration.png differ diff --git a/static/benchmarks/img/colored_logo.png b/static/benchmarks/img/colored_logo.png new file mode 100644 index 000000000..80f5b4622 Binary files /dev/null and b/static/benchmarks/img/colored_logo.png differ diff --git a/static/benchmarks/img/compare_icon.png b/static/benchmarks/img/compare_icon.png new file mode 100644 index 000000000..f30c9497b Binary files /dev/null and b/static/benchmarks/img/compare_icon.png differ diff --git a/static/benchmarks/img/github_icon.png b/static/benchmarks/img/github_icon.png new file mode 100644 index 000000000..d8428c8e9 Binary files /dev/null and b/static/benchmarks/img/github_icon.png differ diff --git a/static/benchmarks/img/head_art_1.png b/static/benchmarks/img/head_art_1.png new file mode 100644 index 000000000..c67f37e23 Binary files /dev/null and b/static/benchmarks/img/head_art_1.png differ diff --git a/static/benchmarks/img/leaderboard_header_icon.png b/static/benchmarks/img/leaderboard_header_icon.png new file mode 100644 index 000000000..f6a464797 Binary files /dev/null and b/static/benchmarks/img/leaderboard_header_icon.png differ diff --git a/static/benchmarks/img/leaderboard_icon.png b/static/benchmarks/img/leaderboard_icon.png new file mode 100644 index 000000000..33b9db7c6 Binary files /dev/null and b/static/benchmarks/img/leaderboard_icon.png differ diff --git a/static/benchmarks/img/login_brain.png b/static/benchmarks/img/login_brain.png new file mode 100644 index 000000000..1536381de Binary files /dev/null and b/static/benchmarks/img/login_brain.png differ diff --git a/static/benchmarks/img/logo_name_full.png b/static/benchmarks/img/logo_name_full.png new file mode 100644 index 000000000..34f0c327c Binary files /dev/null and b/static/benchmarks/img/logo_name_full.png differ diff --git a/static/benchmarks/img/profile_icon.png b/static/benchmarks/img/profile_icon.png new file mode 100644 index 000000000..c8c5a7d71 Binary files /dev/null and b/static/benchmarks/img/profile_icon.png differ diff --git a/static/benchmarks/img/total_benchmarks_icon.png b/static/benchmarks/img/total_benchmarks_icon.png new file mode 100644 index 000000000..7b8d4ccd3 Binary files /dev/null and b/static/benchmarks/img/total_benchmarks_icon.png differ diff --git a/static/benchmarks/img/tutorial_icon.png b/static/benchmarks/img/tutorial_icon.png new file mode 100644 index 000000000..0fc757fb8 Binary files /dev/null and b/static/benchmarks/img/tutorial_icon.png differ diff --git a/static/benchmarks/img/twitter_icon.png b/static/benchmarks/img/twitter_icon.png new file mode 100644 index 000000000..19389b85f Binary files /dev/null and b/static/benchmarks/img/twitter_icon.png differ diff --git a/static/benchmarks/img/upload_icon.png b/static/benchmarks/img/upload_icon.png new file mode 100644 index 000000000..8bbeeacf3 Binary files /dev/null and b/static/benchmarks/img/upload_icon.png differ diff --git a/static/benchmarks/img/white_Brain-Score_icon.png b/static/benchmarks/img/white_Brain-Score_icon.png new file mode 100644 index 000000000..d29c24407 Binary files /dev/null and b/static/benchmarks/img/white_Brain-Score_icon.png differ diff --git a/static/benchmarks/img/white_logo.png b/static/benchmarks/img/white_logo.png new file mode 100644 index 000000000..1b12c4ff4 Binary files /dev/null and b/static/benchmarks/img/white_logo.png differ diff --git a/static/benchmarks/js/password_effect.js b/static/benchmarks/js/password_effect.js new file mode 100644 index 000000000..4c3a88d16 --- /dev/null +++ b/static/benchmarks/js/password_effect.js @@ -0,0 +1,8 @@ +window.onload = function() { + const errorMessage = document.getElementById('wrong-password'); + if (errorMessage) { + setTimeout(() => { + errorMessage.classList.add('fade-out'); + }, 5000); // Show the message for 5 seconds, then start the fade + } +}; \ No newline at end of file diff --git a/static/benchmarks/js/score-accuracy-graph.js b/static/benchmarks/js/score-accuracy-graph.js new file mode 100644 index 000000000..514dd869c --- /dev/null +++ b/static/benchmarks/js/score-accuracy-graph.js @@ -0,0 +1,54 @@ +$(document).ready(() => { + const leaderboardTableComponent = document.querySelector('.leaderboard-table-component'); + const leaderboardTotals = document.querySelector('.leaderboard-totals'); + const graphContainer = document.querySelector('.leaderboard-graph-container'); + + // https://www.chartjs.org/docs/latest/ + new Chart( + document.getElementById('scores_time_graph'), + { + type: 'line', + data: { + datasets: [{ + label: 'Top Score', + data: score_accuracy_chart.map(row => ({ + x: row.day, + y: row.score, + label: [row.model.name, row.score] + })) + }] + }, + options: { + normalized: true, + maintainAspectRatio: false, + plugins: { + tooltip: { + callbacks: { + label: (context) => context.raw.label + } + } + } + } + } + ); + + // let the page render before setting the dimensions + setTimeout(setGraphContainerDimensions, 1); + + window.addEventListener("resize", setGraphWidth); + + function setGraphContainerDimensions() { + setGraphWidth(); + setGraphHeight(); + }; + + function setGraphWidth() { + graphContainer.style.width = (leaderboardTableComponent.offsetWidth - leaderboardTotals.offsetWidth) + 'px'; + }; + + function setGraphHeight() { + // the height of both totals cards plus 24px padding; + const rowHeight = (document.querySelector('.leaderboard-totals-card').offsetHeight * 2) + 24; + graphContainer.style.height = rowHeight + 'px'; + } +}); diff --git a/static/benchmarks/js/table-expansion.js b/static/benchmarks/js/table-expansion.js index 69e63d7ef..803382ac1 100644 --- a/static/benchmarks/js/table-expansion.js +++ b/static/benchmarks/js/table-expansion.js @@ -1,83 +1,91 @@ $(document).ready(function () { - // This script functions by finding all the elements whose parents the benchmark that is clicked and setting them to - // visible or invisible. (And doing it recursively for all of its children) - var coll = document.getElementsByClassName("clicker"); - var i; - - for (i = 0; i < coll.length; i++) { - // This allows the current value of i to be saved to the assigned function. - assignFunction(coll, i) + const domain = location.pathname.split('/').filter(i => i)[0] || 'vision'; + const isRootIdentifier = (e) => e.currentTarget.dataset.benchmark === `average_${domain}`; + + if (document.querySelector('.leaderboard-table-component')) { + $('th[data-benchmark]').click(onClickExpandCollapseBenchmark); + return; } - function recursiveChildren(all_coll) { - // Performs recursiveChildren on the current benchmark and checking for all of its children and - // then setting each child's benchmark to be the current benchmark. (Making them invisible in the meantime). - var used_set = new Set(); - for (var i = 0; i < all_coll.length; i++) { - const benchmark = all_coll[i].dataset.benchmark; - if (!used_set.has(benchmark)) { - used_set.add(all_coll[i].dataset.benchmark) - changeChildSymbol(benchmark) - child_coll = document.querySelectorAll(`[data-parent=${CSS.escape(benchmark)}]`); - for (j = 0; j < child_coll.length; j++) { - if (child_coll[j].style.display === "") { - child_coll[j].style.display = "none"; - } - } - recursiveChildren(child_coll) - } + function onClickExpandCollapseBenchmark(event) { + const benchmarkCount = event.currentTarget.querySelector('.benchmark-count'); + + // If the user clicks on a benchmark without a count or the average column there are no children to expand, so do nothing. + // If the user clicks on the breadcrumb link matching the root identifier execute. + // All other cases handle the click. + if (!benchmarkCount || (event.type !== "breadcrumb-click" && isRootIdentifier(event))) { return; } + + // start by hiding everything + $('[data-benchmark]').css('display','none'); + // reshow the element that was actually clicked + event.currentTarget.style.display = ''; + + // toggle the open state + if ((isClosed = !benchmarkCount.classList.contains('open'))) { + !isRootIdentifier(event) && benchmarkCount.classList.add('open'); + expandChild(event); + } else { + benchmarkCount.classList.remove('open'); + expandParent(event); } - } - function assignFunction(coll, i) { - // Simple hide/show function onClick(). Determines what to show by finding all elements with their - // data-parent value == the current benchmark. - - coll[i].onclick = function () { - var j; - let benchmark = coll[i].dataset.benchmark; - var all_coll = document.querySelectorAll(`[data-parent=${CSS.escape(benchmark + '_v0')}]`); - changeParentSymbol(benchmark) - recursiveChildren(all_coll); - for (j = 0; j < all_coll.length; j++) { - if (all_coll[j].style.display === "none") { - all_coll[j].style.display = ""; - } else { - all_coll[j].style.display = "none"; - } - } - var table = document.getElementById("leaderboard"); - table.style.margin = "auto"; - }; } - function changeParentSymbol(parentName) { - // Changes the plus to a minus and a minus to a plus upon clicking the column - var allParentsExpand = document.getElementsByClassName("headerExpand"); - var allParentContract = document.getElementsByClassName("headerContract"); + function expandChild(event) { + const benchmark = event.currentTarget.dataset.benchmark; + // the `$=` attribute selector e.g. [attr$=val] matches a suffix + $(`[data-benchmark$="${benchmark}_v0"],[data-parent="${benchmark}_v0"]`).css('display', ''); - for (var i = 0; i < allParentsExpand.length; i++) { - if (allParentsExpand[i].dataset.benchmark == parentName) { - allParentsExpand[i].className = "headerContract clicker"; - return null - } + if (isRootIdentifier(event)) { + $('[data-parent="None"]').css('display', ''); } - for (var i = 0; i < allParentContract.length; i++) { - if (allParentContract[i].dataset.benchmark == parentName) { - allParentContract[i].className = "headerExpand clicker"; - return null - } + setBreadCrumbs($(event.currentTarget)); + } + + function expandParent(event) { + const benchmark = event.currentTarget.dataset.parent; + // special case this so returning back to the main view expands the immediate children + if (event.currentTarget.dataset.depth === '0' || event.currentTarget.dataset.parent === `average_${domain}_v0`) { + $(`[data-parent="None"],[data-parent="average_${domain}_v0"]`).css('display', ''); + } else { + $(`[data-benchmark="${benchmark.replace('_v0', '')}"],[data-benchmark$="${benchmark}"],[data-parent="${benchmark}"]`).css('display', ''); } + setBreadCrumbs($(`[data-benchmark="${benchmark.replace('_v0', '')}"]`)) } - function changeChildSymbol(childName) { - // Only changes the minus to a plus for the children (since the children shouldn't automatically expand.) - var allParentContract = document.getElementsByClassName("headerContract"); - for (var i = 0; i < allParentContract.length; i++) { - if (allParentContract[i].dataset.benchmark == childName) { - allParentContract[i].className = "headerExpand clicker"; - return null + function setBreadCrumbs(target) { + if (!target.data() || target.data() && target.data().benchmark === `average_${domain}`) { + $('.leaderboard-breadcrumb').html(''); + return; + } + + let breadcrumb = `${target.data().benchmark}`; + + if (target.data().benchmark === `engineering_${domain}`) { + breadcrumb = `average_${domain} > ` + breadcrumb; + } + while (target.data().parent !== 'None') { + target = $(`[data-benchmark="${target.data().parent.replace('_v0', '')}"]`); + breadcrumb = `${target.data().benchmark} > ` + breadcrumb; + + if (target.data().benchmark === `engineering_${domain}`) { + breadcrumb = `average_${domain} > ` + breadcrumb; } } + + + $('.leaderboard-breadcrumb').html(breadcrumb); + + // add click handlers to the newly created breadcrumbs + $('.breadcrumb-link').click((event) => { + // toggle all the open columns back to their closed state + $('.benchmark-count').removeClass('open'); + + onClickExpandCollapseBenchmark({ + type: 'breadcrumb-click', + currentTarget: $(`[data-benchmark="${event.currentTarget.innerText}"]`)[0] + }); + }); } + }); diff --git a/static/benchmarks/js/table.js b/static/benchmarks/js/table.js index e69de29bb..1e2a749f3 100644 --- a/static/benchmarks/js/table.js +++ b/static/benchmarks/js/table.js @@ -0,0 +1,47 @@ +$(document).ready(() => { + // set a max-width on the table to allow the 'overflow-x: scroll' styling to work correctly + setTableWidth(); + + window.addEventListener("resize", setTableWidth); + + const select = $('.benchmark-sort'); + // https://select2.org/ + select.select2(); + // https://select2.org/programmatic-control/events + select.on('select2:select', sortTable); + + function setTableWidth() { + const padding = 15; + const newTableContainerWidth = $('.leaderboard-table-component').width() - padding + 'px'; + $('.leaderboard-table-container').css({ maxWidth: newTableContainerWidth }); + } + + // sort rows based on the selected benchmark then re-render + function sortTable(e) { + if (!e.params) return; + + const selectedBenchmark = e.params.data.id; + + const sortByColumnIndex = getColumnIndex(selectedBenchmark); + const sortedTableRows = $('tbody tr').sort((a, b) => { + sortByA = parseFloat(a.children[sortByColumnIndex].innerText) + sortByB = parseFloat(b.children[sortByColumnIndex].innerText) + + return sortByB - sortByA; + }); + + return $('table tbody').html(sortedTableRows); + + function getColumnIndex(selectedBenchmark) { + const rankColumnIndex = 2; + if (selectedBenchmark === 'average') { return rankColumnIndex; } + + // for some reason I couldn't get this to work with jQuery so vanilla js it is + const columnHeaders = document.querySelectorAll('thead th'); + const benchmarkColumn = document.querySelector(`th[data-benchmark='${selectedBenchmark}']`); + const columnIndex = Array.prototype.slice.call(columnHeaders).indexOf(benchmarkColumn); + + return columnIndex; + } + } +});