initial commit of new precise tagger

pull/37/head
Chris Veilleux 2020-10-21 23:46:00 -05:00
parent 48eeb7079d
commit 12a2367c5f
41 changed files with 1175 additions and 3 deletions

View File

@ -633,7 +633,7 @@
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"aot": true,
"aot": true,
"outputPath": "dist/account",
"index": "projects/account/src/index.html",
"main": "projects/account/src/main.ts",
@ -845,6 +845,133 @@
}
}
}
},
"precise": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "projects/precise",
"sourceRoot": "projects/precise/src",
"prefix": "precise",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/precise",
"index": "projects/precise/src/index.html",
"main": "projects/precise/src/main.ts",
"polyfills": "projects/precise/src/polyfills.ts",
"tsConfig": "projects/precise/tsconfig.app.json",
"aot": true,
"assets": [
"projects/precise/src/favicon.ico",
"projects/precise/src/assets"
],
"styles": [
"src/styles.scss",
"src/theme.scss"
],
"stylePreprocessorOptions": {
"includePaths": [
"./src/stylesheets"
]
},
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "projects/precise/src/environments/environment.ts",
"with": "projects/precise/src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "precise:build"
},
"configurations": {
"production": {
"browserTarget": "precise:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "precise:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "projects/precise/src/test.ts",
"polyfills": "projects/precise/src/polyfills.ts",
"tsConfig": "projects/precise/tsconfig.spec.json",
"karmaConfig": "projects/precise/karma.conf.js",
"assets": [
"projects/precise/src/favicon.ico",
"projects/precise/src/assets"
],
"styles": [
"projects/precise/src/styles.scss"
],
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"projects/precise/tsconfig.app.json",
"projects/precise/tsconfig.spec.json",
"projects/precise/e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "projects/precise/e2e/protractor.conf.js",
"devServerTarget": "precise:serve"
},
"configurations": {
"production": {
"devServerTarget": "precise:serve:production"
}
}
}
}
}
},
"defaultProject": "internet"

15
package-lock.json generated
View File

@ -9752,6 +9752,21 @@
}
}
},
"ng-waveform": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/ng-waveform/-/ng-waveform-0.2.1.tgz",
"integrity": "sha512-pGaxEro60TrvnrKJYj8i8Mq4arY/kU8wl7XYUwX+LOzGjrwsWL/5jnQAnW1bHQzrs4LmoDRybjj77nQH0WdS8A==",
"requires": {
"tslib": "^1.9.0"
},
"dependencies": {
"tslib": {
"version": "1.14.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.0.tgz",
"integrity": "sha512-+Zw5lu0D9tvBMjGP8LpvMb0u2WW2QV3y+D8mO6J+cNzCYIN4sVy43Bf9vl92nqFahutN0I8zHa7cc4vihIshnw=="
}
}
},
"ngx-cookie-service": {
"version": "10.0.1",
"resolved": "https://registry.npmjs.org/ngx-cookie-service/-/ngx-cookie-service-10.0.1.tgz",

View File

@ -33,6 +33,7 @@
"angularx-social-login": "^3.2.2",
"core-js": "^3.6.5",
"font-awesome": "^4.7.0",
"ng-waveform": "^0.2.1",
"ngx-cookie-service": "^10.0.1",
"ngx-stripe": "^10.1.2",
"rxjs": "~6.6.3",

View File

@ -112,8 +112,8 @@ export class GlobalnavComponent implements OnInit {
children: [
{text: 'Source Code', url: 'https://github.com/MycroftAI', target: '_blank'},
{text: 'Translate', url: this.mycroftUrls.translate, target: '_blank'},
// TODO: uncomment these lines of code when the tools are converted to angular
// {text: 'Wake Word', url: this.mycroftUrls.account + '/#/precise', target: '_blank'},
{text: 'Wake Word', url: this.mycroftUrls.precise + '/tag/hey-mycroft', target: '_blank'},
// TODO: uncomment when the tool is converted to angular
// {text: 'Speech to Text', url: this.mycroftUrls.account + '/#/deepspeech', target: '_blank'},
{text: 'Text to Speech', url: this.mycroftUrls.mimic, target: '_blank'}
],

View File

@ -24,6 +24,7 @@ export interface WebApps {
forum: string;
marketplace: string;
mimic: string;
precise: string;
singleSignOn: string;
translate: string;
wordPress: string;

View File

@ -0,0 +1,18 @@
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries
# For the full list of supported browsers by the Angular framework, please see:
# https://angular.io/guide/browser-support
# You can see what browsers were selected by your queries by running:
# npx browserslist
last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
not IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line.
not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

View File

@ -0,0 +1,36 @@
// @ts-check
// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts
const { SpecReporter, StacktraceOption } = require('jasmine-spec-reporter');
/**
* @type { import("protractor").Config }
*/
exports.config = {
allScriptsTimeout: 11000,
specs: [
'./src/**/*.e2e-spec.ts'
],
capabilities: {
browserName: 'chrome'
},
directConnect: true,
baseUrl: 'http://localhost:4200/',
framework: 'jasmine',
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000,
print: function() {}
},
onPrepare() {
require('ts-node').register({
project: require('path').join(__dirname, './tsconfig.json')
});
jasmine.getEnv().addReporter(new SpecReporter({
spec: {
displayStacktrace: StacktraceOption.PRETTY
}
}));
}
};

View File

@ -0,0 +1,23 @@
import { AppPage } from './app.po';
import { browser, logging } from 'protractor';
describe('workspace-project App', () => {
let page: AppPage;
beforeEach(() => {
page = new AppPage();
});
it('should display welcome message', () => {
page.navigateTo();
expect(page.getTitleText()).toEqual('precise app is running!');
});
afterEach(async () => {
// Assert that there are no errors emitted from the browser
const logs = await browser.manage().logs().get(logging.Type.BROWSER);
expect(logs).not.toContain(jasmine.objectContaining({
level: logging.Level.SEVERE,
} as logging.Entry));
});
});

View File

@ -0,0 +1,11 @@
import { browser, by, element } from 'protractor';
export class AppPage {
navigateTo(): Promise<unknown> {
return browser.get(browser.baseUrl) as Promise<unknown>;
}
getTitleText(): Promise<string> {
return element(by.css('app-root .content span')).getText() as Promise<string>;
}
}

View File

@ -0,0 +1,14 @@
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "../../../tsconfig.json",
"compilerOptions": {
"outDir": "../../../out-tsc/e2e",
"module": "commonjs",
"target": "es2018",
"types": [
"jasmine",
"jasminewd2",
"node"
]
}
}

View File

@ -0,0 +1,32 @@
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma')
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, '../../coverage/precise'),
reports: ['html', 'lcovonly', 'text-summary'],
fixWebpackSourcePaths: true
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
restartOnFileChange: true
});
};

View File

@ -0,0 +1,27 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MaintenancePageComponent, PageNotFoundComponent } from 'shared';
import { IntroComponent } from './modules/tagger/pages/intro/intro.component';
import { TagComponent } from './modules/tagger/pages/tag/tag.component';
import { TagEventResolverService } from './core/guards/tag-event-resolver.service';
const routes: Routes = [
{ path: 'tagger', component: IntroComponent},
{
path: 'tag/:wakeWord',
component: TagComponent,
resolve: {
tagEvent: TagEventResolverService
}
},
{ path: 'maintenance', component: MaintenancePageComponent},
{ path: '', redirectTo: '/tag/hey-mycroft', pathMatch: 'full'},
{ path: '**', component: PageNotFoundComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

View File

@ -0,0 +1,5 @@
<globalnav-sidenav [mycroftUrls]="environment.mycroftUrls">
<div appBody id="precise-body">
<router-outlet></router-outlet>
</div>
</globalnav-sidenav>

View File

@ -0,0 +1,35 @@
import { TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [
RouterTestingModule
],
declarations: [
AppComponent
],
}).compileComponents();
});
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app).toBeTruthy();
});
it(`should have as title 'precise'`, () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app.title).toEqual('precise');
});
it('should render title', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.nativeElement;
expect(compiled.querySelector('.content span').textContent).toContain('precise app is running!');
});
});

View File

@ -0,0 +1,13 @@
import { Component } from '@angular/core';
import { environment } from '../environments/environment';
@Component({
selector: 'precise-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
public environment = environment;
title = 'Precise';
}

View File

@ -0,0 +1,47 @@
/*! *****************************************************************************
SPDX-License-Identifier: Apache-2.0
Copyright (c) Mycroft AI Inc. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { GlobalnavModule } from 'globalnav';
import { SharedModule as SharedLibModule } from 'shared';
import { SharedModule } from 'shared';
import { TaggerModule } from './modules/tagger/tagger.module';
@NgModule(
{
declarations: [ AppComponent ],
imports: [
BrowserModule,
BrowserAnimationsModule,
GlobalnavModule,
HttpClientModule,
TaggerModule,
SharedLibModule,
SharedModule,
AppRoutingModule
],
bootstrap: [ AppComponent ]
}
)
export class AppModule { }

View File

@ -0,0 +1,40 @@
/*! *****************************************************************************
SPDX-License-Identifier: Apache-2.0
Copyright (c) Mycroft AI Inc. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
import { Injectable } from '@angular/core';
import {
Resolve,
RouterStateSnapshot,
ActivatedRouteSnapshot
} from '@angular/router';
import { Observable } from 'rxjs';
import { TagEvent } from '../../shared/models/tag-event.model';
import { TaggerService } from '../http/tagger.service';
@Injectable({
providedIn: 'root',
})
export class TagEventResolverService implements Resolve<TagEvent> {
constructor(private taggerService: TaggerService) {}
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<TagEvent> | Observable<never> {
const wakeWord = route.paramMap.get('wakeWord');
return this.taggerService.getTagEvent(wakeWord, null);
}
}

View File

@ -0,0 +1,81 @@
/*! *****************************************************************************
SPDX-License-Identifier: Apache-2.0
Copyright (c) Mycroft AI Inc. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, throwError } from 'rxjs';
import { TagEvent } from '../../shared/models/tag-event.model';
import { environment } from '@account/environments/environment';
import { catchError } from 'rxjs/operators';
export interface FileTag {
audioFileId: string;
tagId: string;
tagValueId: string;
}
const tagEventUrl = '/api/tag';
@Injectable()
export class TaggerService {
constructor(private http: HttpClient) {
}
handleError(error: HttpErrorResponse) {
if (error.status === 401) {
// API endpoint required authentication but the authentication tokens
// were either not present or expired
console.log(error);
window.location.href = environment.mycroftUrls.singleSignOn + '/login?redirect=' + window.location.href;
} else if (error.error instanceof ErrorEvent) {
// A client-side or network error occurred. Handle it accordingly.
console.error('An error occurred:', error.error.message);
} else {
// The backend returned an unsuccessful response code.
// The response body may contain clues as to what went wrong,
console.error(
`Backend returned code ${error.status}, ` +
`body was: ${error.error}`);
}
return throwError('Something bad happened; please try again later.');
}
/**
* API call to retrieve a tag event
*/
getTagEvent(wakeWord: string, sessionId: string): Observable<TagEvent> {
const requestParams = {wakeWord: wakeWord};
if (sessionId) {
requestParams['sessionId'] = sessionId;
}
return this.http.get<TagEvent>(tagEventUrl, {params: requestParams}).pipe(
catchError(this.handleError)
);
}
/**
* API call to save the tag event result
*/
addTagEvent(fileTag: FileTag) {
return this.http.post<any>(tagEventUrl, fileTag);
}
}

View File

@ -0,0 +1,33 @@
<mat-card>
<mat-card-title>Choose which wake word to improve</mat-card-title>
<mat-card-content>
<p class="mat-body">
Mycrofts Precise Wake Word Spotter supports multiple different wake words that you
can choose to activate your Mycroft device. To ensure Precise wake words are trained
to work well with everyone, audio samples are subjected to classification process we
call "tagging". The audio samples are provided by users who have agreed to share their
data with Mycroft for this purpose.
</p>
<p class="mat-body">
Wake word tagging enables the Mycroft community to contribute to improving Precise.
There are multiple characteristics of a sample that help the training process.
The audible presence of the wake word, the level of background noise and the perceived
gender of the speaker are examples of these characteristics.
</p>
<p class="mat-body">
To start tagging audio samples, select a wake word below. A screen containing an audio
sample and a question will appear. Play the audio and answer the question to the best
of your ability. If you are unsure how to answer skip to the next sample.
</p>
<p class="mat-body">
Thank you for your contribution to Mycroft!
</p>
</mat-card-content>
<mat-card-actions align="center">
<a mat-button [routerLink]="['tag']">HEY MYCROFT</a>
<a mat-button [routerLink]="['tag']">CHRISTOPHER</a>
<a mat-button [routerLink]="['tag']">HEY JARVIS</a>
<a mat-button [routerLink]="['tag']">HEY EZRA</a>
</mat-card-actions>
</mat-card>
<router-outlet></router-outlet>

View File

@ -0,0 +1,38 @@
@import "~@angular/material/theming";
@import "mycroft-colors";
@import "components/buttons";
mat-card {
height: 700px;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
mat-card-title {
color: mat-color($mycroft-primary);
font-size: 48px;
font-weight: bolder;
text-align: center;
padding: 16px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
margin-top: 60px;
}
mat-card-content {
max-width: 600px;
margin-left: auto;
margin-right: auto;
margin-top: 24px;
}
mat-card-actions {
padding: 16px;
a {
@include action-button-primary;
margin: 8px;
}
}
}

View File

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

View File

@ -0,0 +1,16 @@
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'precise-tagger-intro',
templateUrl: './intro.component.html',
styleUrls: ['./intro.component.scss']
})
export class IntroComponent implements OnInit {
constructor(private route: ActivatedRoute) { }
ngOnInit(): void {
}
}

View File

@ -0,0 +1,47 @@
<mat-card [@newQuestion]="isTagged ? 'tagged' : 'untagged'" (@newQuestion.done)="onAnimationDone()">
<mat-card-title>
<h2>{{tagEvent.tagTitle}}</h2>
<h1>{{tagEvent.tagName}}?</h1>
</mat-card-title>
<mat-card-content>
<p class="mat-body">{{tagEvent.tagInstructions}}</p>
<ng-waveform
#waveform
class="waveform"
[src]="audioUrl"
height="100"
backgroundColor="#f5f5f5"
overlayBackgroundColor="rgba(91, 105, 132, 0.4)"
regionStartStickColor="#22a7f0"
regionEndStickColor="#22a7f0"
regionBackgroundColor="rgba(34, 168, 240, 0.4)"
waveColor="#2c3e50"
[useRegion]="false"
>
</ng-waveform>
<div fxFlexFill fxLayoutGap="8px" fxLayoutAlign="center">
<button mat-flat-button (click)="onPlayButtonClick()">
<fa-icon [icon]="playIcon"></fa-icon>
</button>
<button mat-flat-button (click)="onPauseButtonClick()">
<fa-icon [icon]="pauseIcon"></fa-icon>
</button>
</div>
</mat-card-content>
<mat-card-actions fxLayoutGap="12px" fxLayoutAlign="center">
<button
mat-flat-button
color="primary"
*ngFor="let tagValue of tagEvent.tagValues"
[disabled]="buttonsDisabled"
(click)="saveTagResult(tagValue.id)"
>
{{tagValue.display}}
</button>
</mat-card-actions>
<div style="margin-left: 32px; margin-right: 32px;">
<div fxLayout="row" fxLayoutAlign="end">
<button mat-flat-button color="primary">SKIP</button>
</div>
</div>
</mat-card>

View File

@ -0,0 +1,63 @@
@import "~@angular/material/theming";
@import "mycroft-colors";
@import "components/buttons";
mat-card {
height: 700px;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
h1 {
color: mat-color($mycroft-accent, A700);
font-size: 48px;
font-weight: bolder;
text-align: center;
padding: 16px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
margin-top: -32px;
}
h2 {
color: mat-color($mycroft-primary);
font-size: 32px;
font-weight: bolder;
text-align: center;
padding: 16px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
margin-top: 60px;
}
mat-card-content {
max-width: 600px;
margin-left: auto;
margin-right: auto;
margin-top: -12px;
p {
color: mat-color($mycroft-primary);
font-style: italic;
margin-bottom: 32px;
}
button {
@include action-button;
background-color: mat-color($mycroft-accent, 100);
margin-top: 8px;
}
}
mat-card-actions {
padding: 16px;
a {
@include action-button-primary;
margin: 8px;
}
}
}

View File

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

View File

@ -0,0 +1,95 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { faPause, faPlay } from '@fortawesome/free-solid-svg-icons';
import { NgWaveformComponent} from 'ng-waveform';
import { FileTag, TaggerService } from '../../../../core/http/tagger.service';
import { TagEvent } from '../../../../shared/models/tag-event.model';
import { environment } from '../../../../../environments/environment';
import { animate, state, style, transition, trigger } from '@angular/animations';
@Component({
// tslint:disable-next-line:component-selector
selector: 'precise-tagger-tag',
templateUrl: './tag.component.html',
styleUrls: ['./tag.component.scss'],
animations: [
trigger('newQuestion', [
state('untagged', style({opacity: 1})),
state('tagged', style({opacity: 0})),
transition(':enter', [
style({opacity: 0}),
animate('0.5s', style({opacity: 1}))
]),
transition('untagged => tagged', animate('0.5s')),
transition('tagged => untagged', animate('0.5s'))
])
]
})
export class TagComponent implements OnInit {
@ViewChild('waveform', { static: false }) waveform: NgWaveformComponent;
public audioUrl: string;
public buttonsDisabled: boolean;
public isTagged = false;
public playIcon = faPlay;
public pauseIcon = faPause;
public sessionId: string;
public tagEvent: TagEvent;
public preciseUrl = environment.mycroftUrls.precise;
public wakeWord: string;
constructor(private route: ActivatedRoute, private taggerService: TaggerService) { }
ngOnInit(): void {
this.buttonsDisabled = true;
this.route.data.subscribe(
(data: {tagEvent: TagEvent}) => {
this.tagEvent = data.tagEvent;
this.audioUrl = this.preciseUrl + '/api/audio/' + this.tagEvent.audioFileName;
}
);
this.route.paramMap.subscribe(
(params) => this.wakeWord = params.get('wakeWord')
);
}
onPlayButtonClick(): void {
this.buttonsDisabled = false;
this.waveform.play();
}
onPauseButtonClick(): void {
this.waveform.pause();
}
saveTagResult(tagValueId: string): void {
const fileTag: FileTag = {
audioFileId: this.tagEvent.audioFileId,
tagId: this.tagEvent.tagId,
tagValueId: tagValueId
};
this.taggerService.addTagEvent(fileTag).subscribe(
(session) => {
this.sessionId = session.sessionId;
this.isTagged = true;
}
);
}
onAnimationDone() {
if (this.isTagged) {
this.getNextTaggableFile();
}
}
getNextTaggableFile(): void {
this.taggerService.getTagEvent(this.wakeWord, this.sessionId).subscribe(
(tagEvent: TagEvent) => {
this.isTagged = false;
this.tagEvent = tagEvent;
this.audioUrl = this.preciseUrl + '/api/audio/' + this.tagEvent.audioFileName;
}
);
}
}

View File

@ -0,0 +1,59 @@
/*! *****************************************************************************
SPDX-License-Identifier: Apache-2.0
Copyright (c) Mycroft AI Inc. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FlexLayoutModule } from '@angular/flex-layout';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { MatButtonModule} from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { NgWaveformModule } from 'ng-waveform';
import { AppRoutingModule } from '../../app-routing.module';
import { IntroComponent } from './pages/intro/intro.component';
import { TagComponent } from './pages/tag/tag.component';
import { TaggerService } from '../../core/http/tagger.service';
@NgModule(
{
declarations: [
IntroComponent,
TagComponent
],
entryComponents: [
IntroComponent
],
imports: [
CommonModule,
FlexLayoutModule,
FontAwesomeModule,
MatButtonModule,
MatCardModule,
MatProgressBarModule,
NgWaveformModule,
AppRoutingModule
],
providers: [
TaggerService
]
}
)
export class TaggerModule { }

View File

@ -0,0 +1,33 @@
/*! *****************************************************************************
SPDX-License-Identifier: Apache-2.0
Copyright (c) Mycroft AI Inc. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
export interface TagValue {
id: string;
value: string;
display: string;
}
export interface TagEvent {
audioFileId: string;
audioFileName: string;
tagId: string;
tagName: string;
tagTitle: string;
tagInstructions: string;
tagValues: TagValue[];
}

View File

View File

@ -0,0 +1,3 @@
export const environment = {
production: true
};

View File

@ -0,0 +1,44 @@
/*! *****************************************************************************
SPDX-License-Identifier: Apache-2.0
Copyright (c) Mycroft AI Inc. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
// This file can be replaced during build by using the `fileReplacements` array.
// `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.
export const environment = {
production: false,
mycroftUrls: {
account: 'https://account.mycroft.test',
chat: 'https://chat.mycroft.ai',
forum: 'https://community.mycroft.ai',
marketplace: 'http://market.mycroft.test',
mimic: 'http://mimic.mycroft.ai',
precise: 'https://precise.mycroft.test',
singleSignOn: 'https://sso.mycroft.test',
translate: 'https://translate-test.mycroft.ai',
wordPress: 'https://test.mycroft.ai'
}
};
/*
* In development mode, to ignore zone related error stack frames such as
* `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can
* import the following file, but please comment it out in production mode
* because it will have performance impact when throw error
*/
// import 'zone.js/dist/zone-error'; // Included with Angular CLI.

Binary file not shown.

After

Width:  |  Height:  |  Size: 114 KiB

View File

@ -0,0 +1,14 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Precise</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body style="margin: 0;">
<precise-root></precise-root>
</body>
</html>

View File

@ -0,0 +1,12 @@
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));

View File

@ -0,0 +1,63 @@
/**
* This file includes polyfills needed by Angular and is loaded before the app.
* You can add your own extra polyfills to this file.
*
* This file is divided into 2 sections:
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
* file.
*
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
*
* Learn more in https://angular.io/guide/browser-support
*/
/***************************************************************************************************
* BROWSER POLYFILLS
*/
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js'; // Run `npm install --save classlist.js`.
/**
* Web Animations `@angular/platform-browser/animations`
* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
*/
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
/**
* By default, zone.js will patch all possible macroTask and DomEvents
* user can disable parts of macroTask/DomEvents patch by setting following flags
* because those flags need to be set before `zone.js` being loaded, and webpack
* will put import in the top of bundle, so user need to create a separate file
* in this directory (for example: zone-flags.ts), and put the following flags
* into that file, and then add the following code before importing zone.js.
* import './zone-flags';
*
* The flags allowed in zone-flags.ts are listed here.
*
* The following flags will work for all browsers.
*
* (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
* (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
* (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
*
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
* with the following flag, it will bypass `zone.js` patch for IE/Edge
*
* (window as any).__Zone_enable_cross_context_check = true;
*
*/
/***************************************************************************************************
* Zone JS is required by default for Angular itself.
*/
import 'zone.js/dist/zone'; // Included with Angular CLI.
/***************************************************************************************************
* APPLICATION IMPORTS
*/

View File

@ -0,0 +1 @@
/* You can add global styles to this file, and also import other style files */

View File

@ -0,0 +1,25 @@
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import 'zone.js/dist/zone-testing';
import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';
declare const require: {
context(path: string, deep?: boolean, filter?: RegExp): {
keys(): string[];
<T>(id: string): T;
};
};
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting()
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);

View File

@ -0,0 +1,15 @@
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"outDir": "../../out-tsc/app",
"types": []
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts"
]
}

View File

@ -0,0 +1,18 @@
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"outDir": "../../out-tsc/spec",
"types": [
"jasmine"
]
},
"files": [
"src/test.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.spec.ts",
"src/**/*.d.ts"
]
}

View File

@ -0,0 +1,17 @@
{
"extends": "../../tslint.json",
"rules": {
"directive-selector": [
true,
"attribute",
"app",
"camelCase"
],
"component-selector": [
true,
"element",
"app",
"kebab-case"
]
}
}