Skip to content

Commit

Permalink
feat: Promote imgtfjs projects out of beta (#375)
Browse files Browse the repository at this point in the history 
Now that Visual Recognition service has been deprecated, I need
to start down a path of removing it from the site. This commit
lays the groundwork for me to be able to remove 'images' projects
from any new classes, while still leaving it for classes who
already have existing VR API keys.

Contributes to: #374

Signed-off-by: Dale Lane <[email protected]>
  • Loading branch information
@dalelane
dalelane authored Dec 20, 2020
1 parent ccef187 commit 9d0fa03
Show file tree
Hide file tree
Showing 31 changed files with 669 additions and 623 deletions.
3 changes: 0 additions & 3 deletions public/components/help/help.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,18 +49,15 @@ <h4 class="panel-title">
<p translate="HELP.PROJECTS.Q1-A-4"></p>
<p><ul>
<li translate="HELP.PROJECTS.Q1-A-5"></li>
<li translate="HELP.PROJECTS.Q1-A-6"></li>
<li translate="HELP.PROJECTS.Q1-A-7"></li>
</ul></p>
<p translate="HELP.PROJECTS.Q1-A-8"></p>
<p translate="HELP.PROJECTS.Q1-A-9"></p>
<p><ul>
<li translate="HELP.PROJECTS.Q1-A-10"></li>
<li translate="HELP.PROJECTS.Q1-A-11"></li>
<li translate="HELP.PROJECTS.Q1-A-12"></li>
</ul></p>
<p translate="HELP.PROJECTS.Q1-A-13"></p>
<p translate="HELP.PROJECTS.Q1-A-14"></p>
</div>
</div>
</div>
Expand Down
60 changes: 41 additions & 19 deletions public/components/newproject/newproject.controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,43 @@
.controller('NewProjectController', NewProjectController);

NewProjectController.$inject = [
'authService',
'projectsService',
'authService', 'projectsService', 'usersService',
'loggerService',
'$state', '$rootScope', '$scope'
];


function NewProjectController(authService, projectsService, loggerService, $state, $rootScope) {
function NewProjectController(authService, projectsService, usersService, loggerService, $state, $rootScope, $scope) {

var vm = this;
vm.authService = authService;

vm.creating = false;
$scope.creating = false;

// default assuming 'Try it now' user
var supportedProjectTypes = [ 'text', 'imgtfjs', 'sounds', 'numbers' ];
function refreshSupportedImageProjectTypes() {
$scope.supportsCloudImageProjects = supportedProjectTypes.indexOf('images') >= 0;
$scope.supportsLocalImageProjects = supportedProjectTypes.indexOf('imgtfjs') >= 0;
$scope.canChooseImageModelType = $scope.supportsCloudImageProjects &&
$scope.supportsLocalImageProjects;
}
refreshSupportedImageProjectTypes();

$scope.getProjectType = function (projectType, imageProjectType) {
if (projectType === 'IMAGES') {
if (imageProjectType) {
return imageProjectType;
}
else if (supportedProjectTypes.indexOf('imgtfjs') >= 0) {
return 'imgtfjs';
}
else {
return 'images';
}
}
return projectType;
};

vm.fields = [];
vm.focused = $rootScope.isTeacher ? 'crowdsourced' : 'name';
Expand All @@ -33,25 +57,13 @@
errObj = {};
}

if (errObj &&
status === 403 &&
errObj.error === 'Support for images projects is not enabled for your class' &&
vm.profile.tenant === 'session-users')
{
errObj.message = 'You can\'t train machine learning models to recognise images with "Try it now". ' +
'You will be able to create images projects if you login with a regular account. ' +
'See the "Help" page for more details about the differences between creating an account and using "Try it now".';
}

vm[type].push({
alertid : alertId++,
message : errObj.message || errObj.error || 'Unknown error',
status : status
});
}

vm.explainimages = false;

var MIN_CHOICE_LENGTH = 1;
var MAX_CHOICE_LENGTH = 9;
var MIN_NUM_CHOICES = 2;
Expand All @@ -60,6 +72,16 @@
authService.getProfileDeferred()
.then(function (profile) {
vm.profile = profile;

if (vm.profile.tenant !== 'session-users') {
return usersService.getClassPolicy(profile);
}
})
.then(function (policy) {
if (policy && policy.supportedProjectTypes) {
supportedProjectTypes = policy.supportedProjectTypes;
refreshSupportedImageProjectTypes();
}
})
.catch(function (err) {
displayAlert('errors', err.status, err.data);
Expand All @@ -75,7 +97,7 @@
});
}

vm.isInvalid = function (type) {
$scope.isInvalid = function (type) {
if (type === 'numbers') {
if (vm.fields.length < 1 || vm.fields.length > 10) {
return true;
Expand Down Expand Up @@ -113,7 +135,7 @@
};

vm.confirm = function (projectSpec) {
vm.creating = true;
$scope.creating = true;

if (projectSpec.type !== 'numbers') {
delete projectSpec.fields;
Expand All @@ -130,7 +152,7 @@
loggerService.error('[ml4kproj] Failed to create project', err);
displayAlert('errors', err.status, err.data);

vm.creating = false;
$scope.creating = false;
});
};
}
Expand Down
12 changes: 12 additions & 0 deletions public/components/newproject/newproject.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,18 @@
font-size: 2.5em;
}

.newprojectpage {
padding: 2em;
}

md-input-container .md-input.newprojectname {
height: 1.5em;
}

.newprojectname.newcrowdsourced {
font-size: 1.7em;
}

.newprojectrow {
display: flex;
}
Expand All @@ -22,6 +30,10 @@ md-input-container .md-input.newprojectname {
margin-right: 5px;
}

.newprojecthelp .helpfirstline {
margin-bottom: 1em;
}

.newprojecttype {
font-size: 2em;
}
Expand Down
74 changes: 40 additions & 34 deletions public/components/newproject/newproject.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ <h2 class="text-center" translate="NEWPROJECT.TITLE"></h2>
<button class="btn btn-primary" ng-click="vm.authService.login()" translate="APP.LOGIN"></button>
</div>
</div>
<div ng-if="isAuthenticated" style="padding: 2em">
<div ng-if="isAuthenticated" class="newprojectpage">
<div ng-repeat="error in vm.errors" class="alert alert-danger alert-dismissible pageheadermsg" role="alert" ng-click="vm.dismissAlert('errors', $index)">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<strong translate="APP.ERROR"></strong> {{ error.message }}<br/>
Expand All @@ -32,13 +32,12 @@ <h2 class="text-center" translate="NEWPROJECT.TITLE"></h2>
<md-checkbox
ng-model="crowdSourced"
ng-focus="vm.focused = 'crowdsourced'"
ng-disabled="vm.creating"
class="newprojectname"
style="font-size: 1.7em">
ng-disabled="creating"
class="newprojectname newcrowdsourced">
{{ 'NEWPROJECT.WHOLE_CLASS_PROJECT.TITLE' | translate }}
</md-checkbox>
</md-input-container>
<div class="well newprojecthelp" ng-if="vm.focused === 'crowdsourced' && !vm.creating">
<div class="well newprojecthelp" ng-if="vm.focused === 'crowdsourced' && !creating">
<div style="margin-bottom: 1em" translate="NEWPROJECT.WHOLE_CLASS_PROJECT.NOTES_1"></div>
<div translate="NEWPROJECT.WHOLE_CLASS_PROJECT.NOTES_2"></div>
</div>
Expand All @@ -57,7 +56,7 @@ <h2 class="text-center" translate="NEWPROJECT.TITLE"></h2>
ng-required="true"
name="projectName"
ng-model="projectName"
ng-disabled="vm.creating"
ng-disabled="creating"
ng-focus="vm.focused = 'name'"
class="newprojectname"/>
<div ng-messages="newProject.projectName.$error" ng-show="newProject.projectName.$dirty">
Expand All @@ -66,7 +65,7 @@ <h2 class="text-center" translate="NEWPROJECT.TITLE"></h2>
</div>
</md-input-container>
<div class="well newprojecthelp"
ng-if="vm.focused === 'name' && !vm.creating"
ng-if="vm.focused === 'name' && !creating"
translate="NEWPROJECT.PROJECT_NAME.NOTES"></div>
</div>

Expand All @@ -81,45 +80,52 @@ <h2 class="text-center" translate="NEWPROJECT.TITLE"></h2>
<label translate="NEWPROJECT.TYPES.LABEL"></label>
<md-select ng-required="true"
ng-model="projectType"
ng-disabled="vm.creating"
ng-disabled="creating"
ng-focus="vm.focused = 'type'"
class="newprojecttype">
<md-option value="text" translate="WORKSHEETS.TYPES.TEXT"></md-option>
<md-option value="images" translate="WORKSHEETS.TYPES.IMAGES" ng-hide="vm.profile && vm.profile.tenant === 'session-users'"></md-option>
<md-option value="imgtfjs">{{ 'WORKSHEETS.TYPES.IMAGES' | translate }} <span class="badge">beta</span></md-option>
<md-option value="IMAGES" translate="WORKSHEETS.TYPES.IMAGES"></md-option>
<md-option value="numbers" translate="WORKSHEETS.TYPES.NUMBERS"></md-option>
<md-option value="sounds" translate="WORKSHEETS.TYPES.SOUNDS"></md-option>
</md-select>
<div class="newprojectexplanation"
ng-click="vm.explainimages = !vm.explainimages"
ng-if="projectType === 'images' || projectType === 'imgtfjs'"
ng-hide="vm.profile && vm.profile.tenant === 'session-users'"
translate="NEWPROJECT.EXPLAINTYPES.NOTICE"></div>
</md-input-container>
<div class="well newprojecthelp"
ng-if="vm.focused === 'type' && projectType !== 'numbers' && !vm.creating">
<div style="margin-bottom: 1em" translate="NEWPROJECT.TYPES.NOTES_1"></div>
ng-if="vm.focused === 'type' && projectType !== 'numbers' && !creating">
<div class="helpfirstline" translate="NEWPROJECT.TYPES.NOTES_1"></div>
<div translate="NEWPROJECT.TYPES.NOTES_2"></div>
<div translate="NEWPROJECT.TYPES.NOTES_3"></div>
<div translate="NEWPROJECT.TYPES.NOTES_4"></div>
<div translate="NEWPROJECT.TYPES.NOTES_5"></div>
</div>
</div>
<div class="well newprojecthelp"
ng-if="vm.explainimages && (projectType === 'images' || projectType === 'imgtfjs')">
<div style="margin-bottom: 1em" translate="NEWPROJECT.EXPLAINTYPES.NOTES_1"></div>
<div style="margin-bottom: 1em" translate="NEWPROJECT.EXPLAINTYPES.NOTES_2"></div>
<div style="margin-top: 2em;" translate="NEWPROJECT.EXPLAINTYPES.NOTES_3"></div>
<div><ul style="margin-bottom: 0; padding-inline-start: 20px;">
<li translate="NEWPROJECT.EXPLAINTYPES.NOTES_4"></li>
<li translate="NEWPROJECT.EXPLAINTYPES.NOTES_5"></li>
</ul></div>
<div style="margin-bottom: 1em" translate="NEWPROJECT.EXPLAINTYPES.NOTES_6"> </div>
<div style="margin-top: 2em;" translate="NEWPROJECT.EXPLAINTYPES.NOTES_7"> </div>
<div><ul style="margin-bottom: 0; padding-inline-start: 20px;">
<li translate="NEWPROJECT.EXPLAINTYPES.NOTES_8"></li>
</ul></div>
<div translate="NEWPROJECT.EXPLAINTYPES.NOTES_9"></div>


<!-- ---------------------------------------- -->
<!-- MODEL LOCATION -->
<!-- -->
<!-- displayed only for image projects -->
<!-- ---------------------------------------- -->
<div class="newprojectfields newprojectlanguage" ng-show="projectType === 'IMAGES' && canChooseImageModelType">
<md-input-container class="newprojectform">
<label translate="NEWPROJECT.IMAGEPROJECTS.LABEL"></label>
<md-select ng-model="imagesmodeltype"
ng-focus="vm.focused = 'imageprojects'"
ng-disabled="creating"
class="newprojecttype">
<md-option value="imgtfjs" ng-selected="supportsLocalImageProjects" translate="NEWPROJECT.IMAGEPROJECTS.TYPES.IMGTFJS"></md-option>
<md-option value="images" ng-selected="!supportsLocalImageProjects" translate="NEWPROJECT.IMAGEPROJECTS.TYPES.IMAGES"></md-option>
</md-select>
</md-input-container>
<div class="well newprojecthelp"
ng-if="vm.focused === 'imageprojects' && projectType === 'IMAGES' && !creating">
<div translate="NEWPROJECT.IMAGEPROJECTS.NOTES_1" class="helpfirstline"></div>
<div translate="NEWPROJECT.IMAGEPROJECTS.NOTES_2" class="helpfirstline"></div>
<div translate="NEWPROJECT.IMAGEPROJECTS.NOTES_3"></div>
</div>
</div>


Expand All @@ -133,7 +139,7 @@ <h2 class="text-center" translate="NEWPROJECT.TITLE"></h2>
<label translate="NEWPROJECT.LANGUAGE.LABEL"></label>
<md-select ng-model="language"
ng-focus="vm.focused = 'language'"
ng-disabled="vm.creating"
ng-disabled="creating"
class="newprojecttype">
<md-option value="en" ng-selected="true">English</md-option>
<md-option value="ar">Arabic</md-option>
Expand All @@ -151,7 +157,7 @@ <h2 class="text-center" translate="NEWPROJECT.TITLE"></h2>
</md-select>
</md-input-container>
<div class="well newprojecthelp"
ng-if="vm.focused === 'language' && projectType === 'text' && !vm.creating"
ng-if="vm.focused === 'language' && projectType === 'text' && !creating"
translate="NEWPROJECT.LANGUAGE.NOTES"></div>
</div>

Expand All @@ -175,7 +181,7 @@ <h2 class="text-center" translate="NEWPROJECT.TITLE"></h2>
name="numfield_{{$index}}"
ng-required="true"
ng-model="field.name"
ng-disabled="vm.creating"
ng-disabled="creating"
ng-focus="vm.focused = 'fieldname' + $index"
class="newprojectfieldname"/>
<div ng-messages="newProject['numfield_' + $index].$error" ng-show="newProject['numfield_' + $index].$dirty">
Expand All @@ -191,7 +197,7 @@ <h2 class="text-center" translate="NEWPROJECT.TITLE"></h2>
<label translate="NEWPROJECT.FIELDS.TYPE.TITLE"></label>
<md-select ng-required="true"
ng-model="field.type"
ng-disabled="vm.creating"
ng-disabled="creating"
ng-focus="vm.focused = 'fieldtype' + $index"
class="newprojectfieldtype">
<md-option value="number" translate="NEWPROJECT.FIELDS.TYPE.NUMBER"></md-option>
Expand Down Expand Up @@ -285,8 +291,8 @@ <h2 class="text-center" translate="NEWPROJECT.TITLE"></h2>
<span flex></span>
<md-button
class="md-raised md-primary"
ng-disabled="vm.creating || newProject.$invalid || vm.isInvalid(projectType)"
ng-click="vm.confirm({ name : projectName, type : projectType, fields : vm.fields, language : language, isCrowdSourced : (isTeacher && crowdSourced) ? true : false })"
ng-disabled="creating || newProject.$invalid || isInvalid(projectType)"
ng-click="vm.confirm({ name : projectName, type : getProjectType(projectType, imagesmodeltype), fields : vm.fields, language : language, isCrowdSourced : (isTeacher && crowdSourced) ? true : false })"
translate="NEWPROJECT.CREATE">
</md-button>
<md-button ui-sref="projects" translate="APP.CANCEL"></md-button>
Expand Down
3 changes: 1 addition & 2 deletions public/components/projects/projects.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,8 +49,7 @@ <h2 class="text-center" translate="PROJECTS.TITLE"></h2>
<div class="mlprojectdescription">
{{ 'PROJECTS.RECOGNISING' | translate }}
<span class="mlprojecttype" ng-if="project.type === 'text'" translate="WORKSHEETS.TYPES.TEXT"></span>
<span class="mlprojecttype" ng-if="project.type === 'images'" translate="WORKSHEETS.TYPES.IMAGES"></span>
<span class="mlprojecttype" ng-if="project.type === 'imgtfjs'">{{ 'WORKSHEETS.TYPES.IMAGES' | translate }} <span class="badge">beta</span> </span>
<span class="mlprojecttype" ng-if="project.type === 'images' || project.type === 'images'" translate="WORKSHEETS.TYPES.IMAGES"></span>
<span class="mlprojecttype" ng-if="project.type === 'numbers'" translate="WORKSHEETS.TYPES.NUMBERS"></span>
<span class="mlprojecttype" ng-if="project.type === 'sounds'" translate="WORKSHEETS.TYPES.SOUNDS"></span>
<span ng-if="project.labelsSummary">
Expand Down
5 changes: 5 additions & 0 deletions public/components/teacher_apikeys/teacher_apikeys.controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@
UNLIMITED : -2
};

vm.hideVisualRecognition = false;

var alertId = 1;
vm.errors = [];
vm.warnings = [];
Expand Down Expand Up @@ -127,6 +129,9 @@
if (vm.policy.isManaged === false) {
getAllCredentials(profile);
}
if (vm.policy.supportedProjectTypes.indexOf('images') === -1) {
vm.hideVisualRecognition = true;
}
})
.catch(function (err) {
displayAlert('errors', err.status, err.data);
Expand Down
Loading

0 comments on commit 9d0fa03

Please sign in to comment.