GSOC 2018 with CloudCV’s EvalAI 🚀
On April 23, 2018 the results of students selected for summer of code were announced. I was ecstatic 🕺 to be selected to contribute to CloudCV’s EvalAI platform. The summer is coming to an end and this post will sum up my experience working with the talented team @ CloudCV. ☁️ I would like to thank my mentors 👨🏫 Rishabh Jain, Deshraj Yadav, Shivani Prakash, Akash Jain and Shiv Baran Singh for all the guidance and support throughout the project.
Some Background about EvalAI
EvalAI is an open source answer to Kaggle. It is a web application that helps researchers, students and data-scientists to create, collaborate and participate in various AI challenges organised round the globe. A lot of organisations like Google, Facebook, Carnegie Mellon University, Stanford University, Georgia Tech, Draper etc. already host their data science competitions and challenges on EvalAI. If you’d like to host your challenge on the platform, check out this Medium post or this detailed gist I wrote to get your 👐 dirty.
Goals 🥅
I was selected to mostly contribute to the EvalAI-ngx repository which is going to be the front-end of the EvalAI platform. The current EvalAI frontend is written in AngularJS. It was nice when it came out 7 years ago but typescript is the way to go to write maintainable code that doesn’t blow up during run-time.
My major task for this summer was to port the entire EvalAI website to Angular 5 (Typescript & SCSS) and make the new code as modular as possible which makes addition of new features a cakewalk. The plan was to roll out the new front-end to production before the summer ends. My second task was to implement new analytics features in the Django API backend.
The functional website is production-ready and will be rolled out once the style finesse is achieved 😉 Keep an eye out for the new user-interface EvalAI users!
Features Implemented 🖥 🖱
Static Pages
- New Home Page (Landing Page)
/ - About us Page
/about - Contact Us Page (with Map View)
/contact - Get-Involved Page
/get-involved - Privacy Policy Page (with smart-scrolling)
/privacy-policy - 404 Not-Found page (🌩)
/404
Dynamic Pages
- Authentication Page (with support for: signUp, login, verify-email and email-verified)
/auth/login/auth/signup/auth/verify-email/:token - Profile Page (with support for: update-password, update-profile, fetching authentication-token)
/profile - Challenges List Page (list of public and hosted challenges with filters for upcoming, past and ongoing challenges)
/challenges/all/challenges/me - Teams Page (list of participant and host teams with options for creating new teams, editing teams, adding members to teams and deleting teams)
/teams/participants/teams/hosts - Dashboard Page (Links for ongoing challenges and teams)
/dashboard - Challenge Create Page (Zip Upload Page for Challenge-creation)
/challenge-create - Challenge Detail Page (Challenge details page with sub-pages for displaying overview, phase details, evaluation criteria, participate-in-challenge, make-submissions, view-submissions and displaying leaderboard)
/challenge/<id>/overview/challenge/<id>/evaluation/challenge/<id>/phases/challenge/<id>/participate/challenge/<id>/submit/challenge/<id>/submissions/challenge/<id>/leaderboard
The submissions and leaderboard pages have link embeddings everywhere so the selections can be shared in the form of URLs like:/challenge/<id>/submissions/<phase-id>/<submission-timestamp>and/challenge/<id>/leaderboard/<phase-split-id>/<team-name>
Reusable Components
- Toast — A custom notification component which displays success, error and info messages from the platform to the user.
- Input —Stylish form item component for making it easy to build forms and validations with support for input types: text, password, email and file.
- Header — Responsive Navigation Header with jump links.
- Footer — Responsive Navigation Footer with jump links.
- Loading — Loading gif overlay component (used in API calls wrapper right now)
- Confirm — Typescript callable Confirm modal for confirming from the user before making the operation (like delete operations)
- Modal — Typescript callable custom Modal with form items to be submitted (like update operations)
- Forcelogin — Used on pages with sections which should only be accessible to logged-in users. Users are redirected to the correct page when they log in.
- EvalAI Specific Reusable Components:
- Select Phase Component — This is a radio-card component in which only one phase can be selected at a time and a callback function is triggered whenever a phase is selected. (used on challenge-submit, submissions and leaderboard pages)
- Card List Component — This displays the list of challenges or teams (in the form of cards) based on the configuration. (used on challenges and teams pages) - Services — To maximise reuse of code and functions, services like apiService, authService, challengeService, endpointService, windowService, globalService are employed.
- Modular SCSS — Separate files contain configs like all the color schemes and mixins. Global style classes are used for styling buttons, tables, cards, modals, stylish-checkbox etc.
Contributions 🐙
Pull Requests Merged
- #PR-58 Surge Deployment Fix
- #PR-60 Header Navigation Component
- #PR-62 About Us Page
- #PR-63 Get Involved Page
- #PR-64 Privacy Policy Page
- #PR-67 Compodoc Integration
- #PR-68 Footer Component
- #PR-70 Reusable Form Input Component
- #PR-1755 Leaderboard sorting fix
- #PR-1574 Documentation Improvement
Pull Requests in Review
- #PR-90 This is a collective PR and contains all the latest un-merged changes.
- #PR-71 Contact Page
- #PR-74 Authentication Pages
- #PR-77 Custom Toasts Component
- #PR-84 Challenges List and Team Lists
- #PR-88 Challenge Detail Page with all sub-pages
- #PR-1765 EvalAI-ngx related auth handling changes in API
- #PR-1757 Leaderboard sorting fix with gulp issue resolution
Demo Staging URL
If you can’t wait to try out the new UI, use this link. To start using this demo link, load unsafe scripts from the address bar like this. This page will have all the latest changes from the collective PR.
TLDR Contributions:
Conclusion 🔚
It was a wonderful summer with a steep learning curve. I got exposed to Django, Angular-5, Docker and the best coding practices. This summer of code has made me way more capable of working on a project remotely. I am totally satisfied with the response and help I received from the folks @ CloudCV. I look forward to keep contributing to the platform and help others do the same 😄
Feel free to contact me 📲 if you need help in contributing to EvalAI or EvalAI-ngx.