frontend/src/views/web/challenge/submission.html
<section ng-if="challenge.isActive" class="ev-sm-container ev-view challenge-container">
<div class="ev-md-container ev-card-panel ev-z-depth-5 ev-challenge-view margin-btm-0">
<div class="row margin-bottom-cancel">
<div class="col s12 m11 l11">
<h5 class="w-300">Submission Guidelines</h5>
</div>
<div ng-if="challenge.isChallengeHost" class="col s1 m1">
<a class="pointer" ng-click="challenge.submissionGuidelinesDialog($event)">
<i class="fa fa-pencil" aria-hidden="true">
</i> edit
</a>
</div>
<div class="col s12 m12 l12">
<div class="what-a-separator"></div>
</div>
<div class="col s12" ng-if="challenge.isChallengeHost">
<p class="fs-16"><strong>Note: </strong>Your submissions won't be
visible on leaderboard for <strong class="blue-text"> Public Challenge Phases </strong>
since you are a challenge host
for this challenge.<br>This feature is only for your testing purposes.</p>
</strong>
</div>
<div class="col s12">
<div mathjax-bind="challenge.page.submission_guidelines" class="fs-16 w-300 submission-guidelines trix-container"></div>
</div>
</div>
</div>
</section>
<section ng-if="!challenge.isChallengeHost" class="ev-sm-container ev-view challenge-container">
<div class="ev-md-container ev-card-panel ev-z-depth-5">
Click here to deregister from this challenge:
<button class="btn btn-custom ev-btn-dark waves-effect waves-dark grad-btn grad-btn-dark fs-16" ng-click="challenge.deregisterdialog($event)">Deregister</button>
</div>
</section>
<!-- To Check if Manual Approval is done or off-->
<div ng-if="challenge.eligible_to_submit">
<!-- If challenge is docker based -->
<section class="ev-sm-container ev-view challenge-container phase-container" ng-if="challenge.page.is_docker_based">
<div class="ev-md-container ev-card-panel ev-z-depth-5 ev-challenge-view margin-btm-0">
<div class="row margin-bottom-cancel">
<div class="col s12">
<h5 class="w-300">
Submission instructions for docker based challenges
</h5>
<ol class="fs-16 w-300">
<li>Install evalai-cli<br>
<code>$ pip install evalai{{challenge.cliVersion}}</code>
<button class="btn ev-btn-dark waves-effect waves-dark grad-btn code-btn"
ng-click="challenge.showConfirmation('Command copied to clipboard')" ngclipboard
data-clipboard-text='pip install "evalai{{challenge.cliVersion}}"'>
<i class="fa fa-clipboard" aria-hidden="true" alt="Copy to clipboard."></i>
</button>
</li>
<li>Add your EvalAI account token to evalai-cli<br>
<code>$ evalai set_token {{challenge.refreshJWT}}</code>
<button class="btn ev-btn-dark waves-effect waves-dark grad-btn code-btn"
ng-click="challenge.showConfirmation('Command copied to clipboard')" ngclipboard
data-clipboard-text="evalai set_token {{challenge.refreshJWT}}">
<i class="fa fa-clipboard" aria-hidden="true" alt="Copy to clipboard."></i>
</button>
</li>
<li>Push docker image to EvalAI docker registry<br>
<code>$ evalai push <image>:<tag> --phase <phase_name></code>
<button class="btn ev-btn-dark waves-effect waves-dark grad-btn code-btn"
ng-click="challenge.showConfirmation('Command copied to clipboard')" ngclipboard
data-clipboard-text="evalai push <image>:<tag> --phase <phase_name>">
<i class="fa fa-clipboard" aria-hidden="true" alt="Copy to clipboard."></i>
</button>
</li>
<li>Use <code>--private</code> or <code>--public</code> flag in the submission command to make the submission private or public respectively.<br>
</li>
<li>For more commands, please refer to <a class="highlight-link"
href="https://cli.eval.ai/" target="_blank">evalai-cli documentation.</a>
</li>
</ol>
</div>
</div>
</div>
</section>
<!-- If challenge is docker based -->
<section class="ev-sm-container ev-view challenge-container phase-container" ng-if="challenge.page.is_docker_based">
<div class="ev-md-container ev-card-panel ev-z-depth-5 ev-challenge-view">
<div class="row margin-bottom-cancel">
<div class="col s12">
<h5 class="w-300">
Submission limits
</h5>
<p class="fs-16 w-300">
<strong>Team name:</strong> {{challenge.phaseRemainingSubmissions.participant_team}}
</p>
<table class="responsive-table fs-16 w-300">
<thead>
<tr>
<th>Phase details</th>
<th>Remaining submissions</th>
<th>Submission command</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="key in challenge.phaseRemainingSubmissions.phases">
<td>{{key.name}}
<br>
<strong class="text-med-black">Start date:
</strong>{{key.start_date | date:'medium'}}
<br>
<strong class="text-med-black">End date: </strong>{{key.end_date | date:'medium'}}
</td>
<td ng-if="challenge.phaseRemainingSubmissionsFlags[key.id] === 'showSubmissionNumbers'">
<strong>
Today:
</strong>
{{key.limits.remaining_submissions_today_count}}<br>
<strong>
This month:
</strong>
{{key.limits.remaining_submissions_this_month_count}}<br>
<strong>
Total:
</strong>
{{key.limits.remaining_submissions_count}}
</td>
<td ng-if="challenge.phaseRemainingSubmissionsFlags[key.id] === 'showClock'">
<strong>{{key.limits.message}}</strong><br> Next submission will be available in<br>
<div>
<span
ng-if="challenge.days!=0">{{challenge.phaseRemainingSubmissionsCountdown[key.id].days}}
Days, </span>{{challenge.phaseRemainingSubmissionsCountdown[key.id].hours}}
hours : {{challenge.phaseRemainingSubmissionsCountdown[key.id].minutes}} minutes
:
{{challenge.phaseRemainingSubmissionsCountdown[key.id].seconds}} seconds
</div>
</td>
<td ng-if="challenge.phaseRemainingSubmissionsFlags[key.id] === 'maxExceeded'">
<strong>{{key.limits.message}}</strong><br>
<strong>
{{key.limits.maxExceededMessage}}
</strong>
</td>
<td>
<div>
<code>$ evalai push <image>:<tag> --phase {{key.slug}}</code>
<button class="btn ev-btn-dark waves-effect waves-dark grad-btn code-btn"
ng-click="challenge.showConfirmation('Command copied to clipboard')" ngclipboard
data-clipboard-text="evalai push <image>:<tag> --phase {{key.slug}}">
<i class="fa fa-clipboard" aria-hidden="true" alt="Copy to clipboard."></i>
</button>
</div>
<br/>
<div>
<code>$ evalai push <image>:<tag> --phase {{key.slug}} --private</code>
<button class="btn ev-btn-dark waves-effect waves-dark grad-btn code-btn"
ng-click="challenge.showConfirmation('Command copied to clipboard')" ngclipboard
data-clipboard-text="evalai push <image>:<tag> --phase {{key.slug}} --private">
<i class="fa fa-clipboard" aria-hidden="true" alt="Copy to clipboard."></i>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="loader-container card-loader-container" id="loader" ng-show="challenge.isExistLoader"
class="fade">
<div class="loader">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
</div>
</section>
<!-- If challenge is not docker based -->
<section class="ev-sm-container ev-view challenge-container phase-container" ng-if="!challenge.page.is_docker_based">
<div class="ev-md-container ev-card-panel ev-z-depth-5 ev-challenge-view">
<div class="row margin-bottom-cancel">
<div class="col s12">
<h5 class="w-300">Make Submission</h5>
</div>
<div class="col s12 m7 fs-16 w-300">
<div class="ev-card-body exist-team-card">
<form ng-submit="challenge.makeSubmission();">
<p class="fs-18 w-400">Select phase:</p>
<ul>
<li ng-repeat="item in challenge.phases.results">
<input
ng-disabled="challenge.currentDate < item.start_date || challenge.currentDate >= item.end_date"
type="radio" name="selectPhase" class="with-gap selectPhase" id="{{item.id}}"
value="{{item.id}}" ng-model="challenge.phaseId"
ng-click="challenge.showRemainingSubmissions(item.id); challenge.loadPhaseAttributes(item.id); challenge.clearMetaAttributeValues();">
<label for="{{item.id}}"></label>
<div class="show-member-title pointer" ng-if="!item.showPrivate"><strong
class="text-med-black">Phase: </strong>{{item.name}}
<br>
<strong class="text-med-black">Start date:
</strong>{{item.start_date | date:'medium'}} {{item.start_zone}}
<br>
<strong class="text-med-black">End date:
</strong>{{item.end_date | date:'medium'}} {{item.end_zone}}
</div>
<div class="show-member-title pointer" ng-if="item.showPrivate"><strong
class="text-highlight">Phase: </strong> <span class="text-highlight">
{{item.name}}</span>
<br>
<strong class="text-highlight">Start date: </strong><span
class="text-highlight">{{item.start_date | date:'medium'}}
{{item.start_zone}}</span>
<br>
<strong class="text-highlight">End date: </strong><span
class="text-highlight">{{item.end_date | date:'medium'}}
{{item.end_zone}}</span>
</div>
<div class="clearfix"></div>
</li>
<p class="fs-18 w-400">Select submission type:</p>
<li>
<input type="radio" name="submissionOptions" class="with-gap selectPhase" id="cliSubmission"
value="cliSubmission" ng-click="challenge.isSubmissionUsingCli = true; challenge.isSubmissionUsingFile = false; challenge.isSubmissionUsingUrl = false">
<label for="cliSubmission"></label>
<div class="show-member-title pointer">
<strong class="fs-16 w-300">Use CLI (for file size > 400MB)
</strong>
</div>
<input type="radio" name="submissionOptions" class="with-gap selectPhase"
id="fileUpload" value="challenge.showFileUploadOption"
ng-click="challenge.isSubmissionUsingFile = true; challenge.isSubmissionUsingUrl = false; challenge.isSubmissionUsingCli = false;">
<label for="fileUpload"></label>
<div class="show-member-title pointer">
<strong class="fs-16 w-300">Upload file </strong>
</div>
<div class="clearfix"></div>
</li>
<div ng-show="challenge.isSubmissionUsingFile && challenge.isSubmissionUsingCli == false && challenge.isSubmissionUsingUrl == false" class="row">
<div class="file-field input-field col s10">
<div class="waves-effect waves-dark btn ev-btn-dark w-300 fs-14">
<span>Upload file</span>
<input type="file" ngf-select ng-model="challenge.input_file"
name="challenge.input_file"
accept="{{challenge.currentPhaseAllowedSubmissionFileTypes}}">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text" readonly>
</div>
</div>
</div>
<div ng-show="challenge.isSubmissionUsingUrl && challenge.isSubmissionUsingCli == false && challenge.isSubmissionUsingFile == false" class="row">
<div class="input-field align-left col s10">
<input type="text" id="fileUrl" name="fileUrl" ng-model="challenge.fileUrl">
<span class="form-icon"><i class="fa fa-text"></i></span>
<label for="fileUrl">Submission file URL</label>
</div>
</div>
<!-- Submission using file upload or URL -->
<div
ng-show="challenge.isSubmissionUsingUrl || challenge.isSubmissionUsingFile">
<div ng-show="challenge.currentPhaseLeaderboardPublic">
<p class="fs-14 w-400" ng>Select submission visibility:</p>
<li>
<input type="radio" name="submissionVisibility" class="with-gap selectPhase" id="isPublicSubmission"
value="isPublicSubmission" ng-click="challenge.isPublicSubmission = true">
<label for="isPublicSubmission"></label>
<div class="show-member-title pointer">
<strong class="fs-16 w-300">Public
</strong>
</div>
<div class="clearfix"></div>
<input type="radio" name="submissionVisibility" class="with-gap selectPhase"
id="isPrivateSubmission" value="isPrivateSubmission"
ng-click="challenge.isPublicSubmission = false">
<label for="isPrivateSubmission"></label>
<div class="show-member-title pointer">
<strong class="fs-16 w-300">Private </strong>
</div>
<div class="clearfix"></div>
</li>
</div>
<div class="row" ng-if="challenge.currentPhaseMetaAttributesVisibility['method_name'] == true">
<div class="input-field align-left col s10">
<input type="text" id="methodName" name="methodName"
ng-model="challenge.methodName">
<span class="form-icon"><i class="fa fa-text"></i></span>
<label for="methodName">Method name (Optional)</label>
</div>
</div>
<div class="row" ng-if="challenge.currentPhaseMetaAttributesVisibility['method_description'] == true">
<div class="input-field align-left col s10">
<textarea id="methodDesc" class="materialize-textarea" name="methodDesc"
ng-model="challenge.methodDesc"></textarea>
<span class="form-icon"><i class="fa fa-text"></i></span>
<label for="methodDesc">Method description (Optional)</label>
</div>
</div>
<div class="row" ng-if="challenge.currentPhaseMetaAttributesVisibility['project_url'] == true">
<div class="input-field align-left col s10">
<input type="text" id="projectUrl" name="projectUrl"
ng-model="challenge.projectUrl">
<span class="form-icon"><i class="fa fa-text"></i></span>
<label for="projectUrl">Project URL (Optional)</label>
</div>
</div>
<div class="row" ng-if="challenge.currentPhaseMetaAttributesVisibility['publication_url'] == true">
<div class="input-field align-left col s10">
<input type="text" id="publicationUrl" name="publicationUrl"
ng-model="challenge.publicationUrl">
<span class="form-icon"><i class="fa fa-text"></i></span>
<label for="publicationUrl">Publication URL (Optional)</label>
</div>
</div>
<div class="dynamicform">
<div ng-if="challenge.metaAttributesforCurrentSubmission != null" ng-repeat="attribute in challenge.metaAttributesforCurrentSubmission">
<div ng-if="attribute.type == 'text'">
<div class="row">
<div class="input-field align-left col s10">
<input type="text" ng-model="attribute.value" name="{{attribute.name}}" id="{{attribute.name}}" ng-required="attribute.required === true">
<span class="form-icon"><i class="fa fa-text"></i></span>
<label for="{{attribute.name}}" class mathjax-bind="attribute.name + ' (' + attribute.description + ')'" for="{{attribute.name}}"></label><span ng-if="attribute.required === true" class="color-orange">*</span>
</div>
</div>
</div>
<div ng-if="attribute.type == 'radio'">
<div class="row">
<div class="align-left col s10">
<label for="{{attribute.name}}" class="label-radio" mathjax-bind="attribute.name + ' (' + attribute.description + ')'" for="{{attribute.name}}"></label><span ng-if="attribute.required === true" class="color-orange">*</span>
<div class="input-field">
<md-radio-group ng-model="attribute.value" id="{{$parent.$index}}_{{attribute.name}}" name="{{attribute.name}}">
<md-radio-button ng-repeat="option in attribute.options" ng-value="option" ng-model="attribute.value">
<span class="fs-16">{{option}}</span>
</md-radio-button>
</md-radio-group>
</div>
</div>
</div>
</div>
<div ng-if="attribute.type == 'checkbox'">
<div class="row">
<div class="align-left col s10">
<label for="{{attribute.name}}" class="label-checkbox" mathjax-bind="attribute.name + ' (' + attribute.description + ')'" for="{{attribute.name}}"></label><span ng-if="attribute.required === true" class="color-orange">*</span>
<div class="input-field">
<div class="submission-options" ng-repeat="option in attribute.options" id="{{attribute.name}}" name="{{attribute.name}}">
<input type="checkbox" ng-click="challenge.toggleSelection(attribute, option);" id="{{$parent.$index}}_{{option}}" ng-value="option">
<label for="{{$parent.$index}}_{{option}}"></label>
<span class="fs-16 w-300">{{option}}</span>
</div>
</div>
</div>
</div>
</div>
<div ng-if="attribute.type == 'boolean'">
<div class="row">
<div class="align-left col s10">
<label for="{{attribute.name}}" class="label-radio" mathjax-bind="attribute.name + ' (' + attribute.description + ')'" for="{{attribute.name}}"></label><span ng-if="attribute.required === true" class="color-orange">*</span>
<div class="input-field">
<md-radio-group ng-model="attribute.value" id="{{attribute.name}}" name="{{attribute.name}}">
<md-radio-button ng-value="'True'">True</md-radio-button>
<md-radio-button ng-value="'False'">False</md-radio-button>
</md-radio-group>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="text-highlight red-text"><strong>{{challenge.subErrors.msg}}</strong></div>
<section class="pagination">
<div class="row rm-gut">
<div class="col s12 m12">
<div class="align-left">
<button class="waves-effect waves-dark btn ev-btn-dark w-300 fs-16"
ng-disabled="challenge.disableSubmit || (!challenge.input_file && !challenge.fileUrl)"
type="submit" value="Submit">Submit</button>
<br>
<br>
<span class="text-dark-black"><strong>{{challenge.submissionError}}</strong></span>
</div>
</div>
</div>
</section>
</div>
</ul>
</form>
</div>
</div>
<div ng-if="challenge.maxExceeded" class="col s12 m5">
<div class="ev-card-body exist-team-card ev-remaining-submission remaining-submission-clock">
<div class="row">
<span class="color-black">
<strong>
{{challenge.maxExceededMessage}}
</strong>
</span>
</div>
</div>
</div>
<div ng-if="challenge.showSubmissionNumbers" class="col s12 m5">
<div class="ev-card-body exist-team-card ev-remaining-submission remaining-submission-clock">
<div class="row">
<span class="color-black">
<strong>
Today's remaining submissions:
</strong>
<span class="fs-16 w-300">
{{challenge.remainingSubmissions.remaining_submissions_today_count}}
</span>
</div>
<div class="row">
<div class="row">
<span class="color-black">
<strong>
Monthly remaining submissions:
</strong>
<span class="fs-16 w-300">
{{challenge.remainingSubmissions.remaining_submissions_this_month_count}}
</span>
</div>
<span class="color-black">
<strong>
Total remaining submissions:
</strong>
</span>
<span class="fs-16 w-300">
{{challenge.remainingSubmissions.remaining_submissions_count}}
</span>
</div>
</div>
</div>
<div ng-if="challenge.showClock" class="col s12 m5 fs-16 w-300">
<div class="ev-card-body exist-team-card ev-remaining-submission remaining-submission-clock">
<div class="row">
<strong class="text-med-black">
Message:
</strong> {{challenge.message.message}}
</div>
<div>
Next set of submissions will be available after:
</div>
<div>
<span ng-if="challenge.days!=0">{{challenge.days}} Days, </span>{{challenge.hours}}
hours : {{challenge.minutes}} minutes : {{challenge.remainingSeconds}} seconds
</div>
</div>
</div>
</div>
<div class="row margin-bottom-cancel">
<div class="col s12 m12 fs-16 w-300">
<div class="submission-instructions exist-team-card">
<!-- Submission using cli-->
<div ng-show="challenge.isSubmissionUsingCli === true">
<p class="fs-18 w-400 no-top-margin-p">Submission instructions</p>
<ol class="fs-16 w-300">
<li>
Install evalai-cli<br>
<code>$ pip install evalai{{challenge.cliVersion}}</code>
<button class="btn ev-btn-dark waves-effect waves-dark grad-btn code-btn"
ng-click="challenge.showConfirmation('Command copied to clipboard')" ngclipboard
data-clipboard-text='pip install "evalai{{challenge.cliVersion}}"'>
<i class="fa fa-clipboard" aria-hidden="true" alt="Copy to clipboard."></i>
</button>
</li>
<li>
Add your EvalAI account token to evalai-cli<br>
<code>$ evalai set_token {{challenge.refreshJWT}}</code>
<button class="btn ev-btn-dark waves-effect waves-dark grad-btn code-btn"
ng-click="challenge.showConfirmation('Command copied to clipboard')" ngclipboard
data-clipboard-text="evalai set_token {{challenge.refreshJWT}}">
<i class="fa fa-clipboard" aria-hidden="true" alt="Copy to clipboard."></i>
</button>
</li>
<li>
Make submission<br>
<code>$ evalai challenge {{challenge.challengeId}} phase {{challenge.phaseId}} submit --file /path/to/local/submission_file --large</code>
<button class="btn ev-btn-dark waves-effect waves-dark grad-btn code-btn"
ng-click="challenge.showConfirmation('Command copied to clipboard')" ngclipboard
data-clipboard-text="evalai challenge {{challenge.challengeId}} phase {{challenge.phaseId}} submit --file <submission_file_path> --large">
<i class="fa fa-clipboard" aria-hidden="true" alt="Copy to clipboard."></i>
</button>
</li>
<li>
<div class="center-content">Use <code> --private </code> or <code> --public </code> flag in the submission
command to make the submission private or public respectively.<br />
</div>
</li>
<li>
For more commands, please refer to <a class="highlight-link"
href="https://cli.eval.ai/" target="_blank">evalai-cli documentation.</a>
</li>
</ol>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Show error when the maunal approval is not done -->
<section ng-if="!challenge.eligible_to_submit" class="ev-sm-container ev-view challenge-container">
<div class="ev-md-container ev-card-panel ev-z-depth-5 ev-challenge-view">
<p class="fs-16 w-300">Sorry, the participant team is not approved by host yet.</p>
</div>
</section>
<!-- Show error when the challenge is not active -->
<section ng-if="!challenge.isActive" class="ev-sm-container ev-view challenge-container">
<div class="ev-md-container ev-card-panel ev-z-depth-5 ev-challenge-view">
<p class="fs-16 w-300">Sorry, the challenge is not active.</p>
</div>
</section>