diff --git a/apps/octra/src/app/app.module.ts b/apps/octra/src/app/app.module.ts index 4feeb6ada..b3324ad11 100644 --- a/apps/octra/src/app/app.module.ts +++ b/apps/octra/src/app/app.module.ts @@ -52,6 +52,7 @@ import { NgbDropdownModule, NgbModalModule, NgbNavModule, + NgbOffcanvasModule, NgbPopoverModule, NgbTooltipModule, } from '@ng-bootstrap/ng-bootstrap'; @@ -122,6 +123,7 @@ import { RouterModule } from '@angular/router'; NgxOctraApiModule, OctraComponentsModule, OctraUtilitiesModule, + NgbOffcanvasModule, ], providers: [ ALoginGuard, diff --git a/apps/octra/src/app/core/component/asr-options/asr-options.component.html b/apps/octra/src/app/core/component/asr-options/asr-options.component.html index b7f40befa..904b4a93a 100644 --- a/apps/octra/src/app/core/component/asr-options/asr-options.component.html +++ b/apps/octra/src/app/core/component/asr-options/asr-options.component.html @@ -1,281 +1,166 @@ -
-
- ASR-{{ 'g.Language' | transloco }}: -
- -
-

- {{ 'asr.click on logo' | transloco }} -

- - - - - - - - - - - - - - - - - + + + + + + + + + + + +
{{ 'g.Language' | transloco }}{{ 'g.Service Provider' | transloco }}{{ 'g.free quota' | transloco }}
- {{ 'asr.without asr' | transloco }} -
- - {{ lang.name }} ({{ getShortCode(lang.code) }}) [{{ - lang.asr - }}] - - - {{ lang.name }} ({{ getShortCode(lang.code) }}) [{{ - lang.asr - }}] (currently not available) - - - - - - - - - - - - +
+
+ +
+ ASR Language + +
+
+
+
+
+ +
+ ASR Provider +
    +
  • +
    +
    +
    + +
    +
    +
    + +
    +     + +
    + {{ (100 - getQuotaPercentage(provider)) + '%' }} +
    +
    + {{ (100 - getQuotaPercentage(provider)) + '%' }} + +
    +
    +
    +
    + + +
- - - {{ serviceProviders[lang.asr]?.dataStoragePolicy }} -
+ + + + + + - - - - + + + + - - - - - - - - - - - - -
+ + + {{ provider.dataStoragePolicy }} +
- - - max audio duration: - {{ serviceProviders[lang.asr].maxSignalDuration }} - seconds -
+ max audio duration: + {{ provider.maxSignalDuration }} + seconds +
- - - max file size: - {{ serviceProviders[lang.asr].maxSignalSize }} MB -
- - - Terms & Conditions -
- - - Homepage -
- - 		-
- -
+ > +
+ + + max file size: + {{ provider.maxSignalSize }} MB +
+ + + Terms & Conditions +
+ + + Homepage +
- -
- {{(100 - getQuotaPercentage(lang.asr)) + '%'}} -
-
- {{(100 - getQuotaPercentage(lang.asr)) + '%'}} -
- - - - - -
-
-
-
- MAUS - - {{"g.Language" | transloco}} - : -
- -
-
  • - - {{language.description}} - -
    • +
    +
    + +
  • Nothing found
    • +
    - - - - -
    -
    - -
    - -
  • - -
    • -
  • - -
    • -     - -
  • - -
    • -
  • - -
    • -
  • - +
    +
    + +
    + MAUS Language +
    diff --git a/apps/octra/src/app/core/component/asr-options/asr-options.component.scss b/apps/octra/src/app/core/component/asr-options/asr-options.component.scss index 979f2769b..792d9c021 100644 --- a/apps/octra/src/app/core/component/asr-options/asr-options.component.scss +++ b/apps/octra/src/app/core/component/asr-options/asr-options.component.scss @@ -48,8 +48,6 @@ :host { background-color: whitesmoke; border: 3px; - flex: auto; - flex-direction: column; display: flex; padding: 5px; margin-bottom: 5px; @@ -78,3 +76,17 @@ table thead th { .inactive { opacity: 0.5; } + + +.dropdown-menu * { + font-size: 0.85rem; +} + +input, +input::placeholder { + font-size: 0.85rem; +} + +.progress { + height: 20px !important; +} diff --git a/apps/octra/src/app/core/component/asr-options/asr-options.component.ts b/apps/octra/src/app/core/component/asr-options/asr-options.component.ts index 67075a4af..52b4623e0 100644 --- a/apps/octra/src/app/core/component/asr-options/asr-options.component.ts +++ b/apps/octra/src/app/core/component/asr-options/asr-options.component.ts @@ -1,41 +1,79 @@ import { Component, Input, OnInit, ViewChild } from '@angular/core'; -import { TranslocoService } from '@jsverse/transloco'; import { AppInfo } from '../../../app.info'; -import { ASRLanguage, ASRSettings } from '../../obj/Settings'; -import { AlertService } from '../../shared/service'; +import { ASRService, ASRSettings } from '../../obj/Settings'; import { AppStorageService } from '../../shared/service/appstorage.service'; import { NgbDropdown, NgbPopover } from '@ng-bootstrap/ng-bootstrap'; -import { DefaultComponent } from '../default.component'; import { AsrStoreService } from '../../store/asr/asr-store-service.service'; -import { ASRQueueItemType } from '../../store/asr'; -import { - OctraAnnotationSegment, - OctraAnnotationSegmentLevel, -} from '@octra/annotation'; -import { AnnotationStoreService } from '../../store/login-mode/annotation/annotation.store.service'; -import { AudioChunk } from '@octra/web-media'; +import { SubscriberComponent } from '@octra/ngx-utilities'; @Component({ selector: 'octra-asr-options', templateUrl: './asr-options.component.html', styleUrls: ['./asr-options.component.scss'], }) -export class AsrOptionsComponent extends DefaultComponent implements OnInit { +export class AsrOptionsComponent extends SubscriberComponent implements OnInit { public serviceProviders: any = {}; public settings = { onlyForThisOne: false, allSegmentsNext: false, }; - @Input() audioChunk?: AudioChunk; @Input() enabled = true; - @ViewChild('dropdown', { static: true }) dropdown?: NgbDropdown; - @ViewChild('dropdown2', { static: true }) dropdown2?: NgbDropdown; - @ViewChild('pop', { static: true }) pop!: NgbPopover; + @ViewChild('dropdown', { static: false }) dropdown?: NgbDropdown; + @ViewChild('dropdown2', { static: false }) dropdown2?: NgbDropdown; + @ViewChild('popTemplate', { static: true }) popTemplate!: NgbPopover; languageSettings?: ASRSettings; - disablePopovers = false; + fields: { + asr: { + languages: { + value: string; + providersOnly?: string[]; + description: string; + }[]; + filtered: { + value: string; + providersOnly?: string[]; + description: string; + }[]; + selected: string; + }; + maus: { + languages: { + value: string; + providersOnly?: string[]; + description: string; + }[]; + filtered: { + value: string; + providersOnly?: string[]; + description: string; + }[]; + selected: string; + }; + provider: { + services: ASRService[]; + filtered: ASRService[]; + selected: string; + }; + } = { + asr: { + languages: [], + filtered: [], + selected: '', + }, + maus: { + languages: [], + filtered: [], + selected: '', + }, + provider: { + services: [], + filtered: [], + selected: '', + }, + }; public get manualURL(): string { return AppInfo.manualURL; @@ -43,10 +81,7 @@ export class AsrOptionsComponent extends DefaultComponent implements OnInit { constructor( public appStorage: AppStorageService, - public asrStoreService: AsrStoreService, - private annotationStoreService: AnnotationStoreService, - private alertService: AlertService, - private langService: TranslocoService + public asrStoreService: AsrStoreService ) { super(); } @@ -55,216 +90,201 @@ export class AsrOptionsComponent extends DefaultComponent implements OnInit { this.subscribe(this.asrStoreService.languageSettings$, { next: (settings) => { this.languageSettings = settings; - if (settings) { - for (const provider of settings.services) { - this.serviceProviders['' + provider.provider] = provider; - } - } + this.fields.provider.services = settings?.services ?? []; + this.fields.provider.filtered = settings?.services ?? []; }, }); - } - getShortCode(code: string) { - return code.substring(code.length - 2); - } + this.subscribe(this.asrStoreService.asrLanguages$, { + next: (asrLanguages) => { + this.fields.asr.languages = asrLanguages ?? []; + this.fields.asr.filtered = asrLanguages ?? []; + }, + }); - onMouseMove() {} + this.subscribe(this.asrStoreService.mausLanguages$, { + next: (asrLanguages) => { + this.fields.maus.languages = asrLanguages ?? []; + this.fields.maus.filtered = asrLanguages ?? []; + }, + }); - onMouseOut() {} + this.subscribe( + this.asrStoreService.asrOptions$, + { + next: (state) => { + this.fields.asr.selected = state?.selectedASRLanguage ?? ''; + this.fields.maus.selected = state?.selectedMausLanguage ?? ''; + this.fields.provider.selected = + state?.selectedService?.provider ?? ''; + this.subscriptionManager.removeByTag('storeASRLanguages'); - onASRLangChanged(lang?: ASRLanguage) { - if (lang?.state === 'active') { - this.asrStoreService.changeASRService(lang); - this.dropdown?.close(); - } + setTimeout(() => { + this.filterLanguages(this.fields.asr.selected, 'asr'); + this.filterLanguages(this.fields.maus.selected, 'maus'); + this.filterProviders(this.fields.provider.selected); + }, 0); + }, + }, + 'storeASRLanguages' + ); } - startASRForThisSegment() { - if (this.asrStoreService.asrOptions?.selectedLanguage !== undefined) { - if (this.audioChunk!.time.duration.seconds > 600) { - // trigger alert, too big audio duration - this.alertService - .showAlert( - 'danger', - this.langService.translate('asr.file too big').toString() - ) - .catch((error) => { - console.error(error); - }); - } else { - if ( - this.annotationStoreService.currentLevel instanceof - OctraAnnotationSegmentLevel - ) { - const time = this.audioChunk!.time.start.add( - this.audioChunk!.time.duration - ); - const segNumber = - this.annotationStoreService.transcript!.getCurrentSegmentIndexBySamplePosition( - time - ); - - if (segNumber > -1) { - const segment = this.annotationStoreService.currentLevel!.items[ - segNumber - ] as OctraAnnotationSegment; + getQuotaPercentage(provider: ASRService) { + if (provider) { + if (provider.usedQuota && provider.quotaPerMonth) { + return Math.round((provider.usedQuota / provider.quotaPerMonth) * 100); + } + } + return 0; + } - if (segment !== undefined) { - this.asrStoreService.addToQueue( - { - sampleStart: this.audioChunk!.time.start.samples, - sampleLength: this.audioChunk!.time.duration.samples, - }, - ASRQueueItemType.ASR - ); - this.asrStoreService.startProcessing(); - } else { - console.error(`could not find segment for doing ASR.`); - } - } else { - console.error( - `could not start ASR because segment number was not found.` - ); - } + getQuotaLabel(provider: ASRService) { + if (provider) { + const ohService = provider; + if (ohService.usedQuota && ohService.quotaPerMonth) { + const remainingQuota = + (ohService.quotaPerMonth - ohService.usedQuota) / 60; + let label = ''; + if (remainingQuota > 60) { + label = `${Math.round(remainingQuota / 60)} hours`; + } else { + label = `${Math.round(remainingQuota)} minutes`; } + + return `Free quota: Approx.
    ${label}
    of recording time shared among all BAS users.`; + } else { + return `Unlimited quota`; } } + return ''; } - startASRForAllSegmentsNext() { - const segNumber = - this.annotationStoreService.transcript!.getCurrentSegmentIndexBySamplePosition( - this.audioChunk!.time.start.add(this.audioChunk!.time.duration) + filterProviders(value: string, dropdown?: NgbDropdown) { + const langItem = this.fields.asr.languages.find( + (a) => a.value === this.fields.asr.selected + ); + + if (this.fields.asr.selected && langItem) { + this.fields.provider.filtered = this.fields.provider.services.filter( + (a) => + !langItem.providersOnly || + langItem.providersOnly.length === 0 || + langItem.providersOnly.includes(a.provider) ); + } else { + this.fields.provider.filtered = this.fields.provider.services; + } + this.fields.provider.filtered = this.fields.provider.filtered.filter( + (a) => + a.basName?.toLowerCase().includes(value.toLowerCase()) || + a.provider.toLowerCase().includes(value.toLowerCase()) + ); if ( - segNumber > -1 && - this.annotationStoreService.transcript?.currentLevel && - this.annotationStoreService.transcript?.currentLevel instanceof - OctraAnnotationSegmentLevel + value === '' || + this.fields.provider.services.filter( + (a) => + a.basName?.toLowerCase() === value.toLowerCase() || + a.provider.toLowerCase() === value.toLowerCase() + ) ) { - for ( - let i = segNumber; - i < this.annotationStoreService.transcript.currentLevel.items.length; - i++ - ) { - const segment = - this.annotationStoreService.transcript.currentLevel.items[i]; - - if (segment !== undefined) { - const sampleStart = - i > 0 - ? this.annotationStoreService.transcript.currentLevel.items[ - i - 1 - ]!.time.samples - : 0; - const sampleLength = segment.time.samples - sampleStart; - - if ( - sampleLength / - this.audioChunk?.audioManager!.resource!.info!.sampleRate! > - 600 - ) { - this.alertService - .showAlert( - 'danger', - this.langService.translate('asr.file too big') - ) - .catch((error) => { - console.error(error); - }); - this.asrStoreService.stopItemProcessing({ - sampleStart, - sampleLength, - }); - } else { - if ( - segment.getFirstLabelWithoutName('Speaker')?.value !== - undefined && - segment.getFirstLabelWithoutName('Speaker')!.value.trim() === - '' && - this.annotationStoreService.breakMarker?.code !== undefined && - segment - .getFirstLabelWithoutName('Speaker')! - .value.indexOf(this.annotationStoreService.breakMarker.code) < 0 - ) { - // segment is empty and contains not a break - this.asrStoreService.addToQueue( - { - sampleStart, - sampleLength, - }, - ASRQueueItemType.ASR - ); - } - } - } else { - console.error( - `could not find segment in startASRForAllSegmentsNext()` - ); - } - } - this.asrStoreService.startProcessing(); - } else { - console.error( - `could not start ASR for all next because segment number was not found.` - ); + this.asrStoreService.changeASRService(value); } - } - stopASRForAll() { - this.asrStoreService.stopProcessing(); + dropdown?.open(); } - stopASRForThisSegment() { - this.asrStoreService.stopItemProcessing({ - sampleStart: this.audioChunk!.time.start.samples, - sampleLength: this.audioChunk!.time.duration.samples, - }); + selectProvider(provider: string, dropdown: NgbDropdown) { + this.fields.provider.selected = provider; + this.asrStoreService.changeASRService(provider); + this.popTemplate?.close(); + setTimeout(() => { + dropdown.close(); + }, 200); } - onMAUSLangChanged(language: string, code: string) { - this.asrStoreService.changeASRSelectedMausLanguage(code); - this.dropdown2?.close(); - } + filterLanguages(value: string, type: 'asr' | 'maus', dropdown?: NgbDropdown) { + this.fields[type].filtered = this.fields[type].languages.filter( + (a) => + a.description.toLowerCase().includes(value.toLowerCase()) || + a.value.toLowerCase().includes(value.toLowerCase()) + ); + dropdown?.open(); - getQuotaPercentage(langAsr: string) { - if (this.serviceProviders[langAsr]) { - const ohService: any = this.serviceProviders[langAsr]; - if (ohService.usedQuota && ohService.quotaPerMonth) { - return Math.round( - (ohService.usedQuota / ohService.quotaPerMonth) * 100 - ); + if ( + this.fields[type].languages.find( + (a) => a.value.toLowerCase() === value.toLowerCase() + ) || + value === '' + ) { + if (type === 'asr') { + this.asrStoreService.changeASRSelectedLanguage(value ?? undefined); + } else { + this.asrStoreService.changeASRSelectedMausLanguage(value ?? undefined); } } - return 0; + + if (type === 'asr') { + this.selectLanguage(value, 'maus'); + } } - getQuotaLabel(langAsr: string) { - if (this.serviceProviders[langAsr]) { - const ohService = this.serviceProviders[langAsr]; - if (ohService.usedQuota && ohService.quotaPerMonth) { - const remainingQuota = - (ohService.quotaPerMonth - ohService.usedQuota) / 60; - let label = ''; - if (remainingQuota > 60) { - label = `${Math.round(remainingQuota / 60)} hours`; - } else { - label = `${Math.round(remainingQuota)} minutes`; - } + selectLanguage(language: string, type: 'asr' | 'maus') { + this.popTemplate?.close(); + const langItem = this.fields[type].languages.find( + (a) => a.value === language + ); + if (!langItem) { + language = ''; + } + this.fields[type].selected = language; - return `Free quota: Approx.
    ${label}
    of recording time shared among all BAS users.`; + if (type === 'asr') { + if (language && langItem) { + this.fields.provider.filtered = this.fields.provider.services.filter( + (a) => + !langItem.providersOnly || + langItem.providersOnly.length === 0 || + langItem.providersOnly.includes(a.provider) + ); } else { - return `Unlimited quota`; + this.fields.provider.filtered = this.fields.provider.services; } + + if ( + !this.fields.provider.filtered.find( + (a) => a.provider === this.fields.provider.selected + ) + ) { + this.fields.provider.selected = ''; + } + + this.asrStoreService.changeASRSelectedLanguage(language ?? undefined); + } else { + this.asrStoreService.changeASRSelectedMausLanguage(language ?? undefined); + } + + if (type === 'asr') { + this.selectLanguage(language, 'maus'); + this.filterLanguages(language, 'maus'); } - return ''; } - onScroll() { - this.disablePopovers = true; - setTimeout(() => { - this.disablePopovers = false; - }, 50); + onDropdownClose() { + alert('close'); + } + + onLanguageDropdownOpenChange(opened: boolean, type: 'asr' | 'maus') { + if ( + !opened && + !this.fields[type].languages.find( + (a) => + a.value.toLowerCase() === this.fields[type].selected.toLowerCase() + ) + ) { + this.fields[type].selected = ''; + this.fields[type].filtered = this.fields[type].languages; + } } } diff --git a/apps/octra/src/app/core/component/navbar/navbar.component.html b/apps/octra/src/app/core/component/navbar/navbar.component.html index 404e00b48..2b0082711 100644 --- a/apps/octra/src/app/core/component/navbar/navbar.component.html +++ b/apps/octra/src/app/core/component/navbar/navbar.component.html @@ -9,7 +9,7 @@ OCTRA v{{ BUILD.version }} + >OCTRA v{{ BUILD.version }} + in development @@ -33,7 +34,7 @@ Version:
    • - {{BUILD.version}} + {{ BUILD.version }}
    @@ -41,7 +42,7 @@ Last updated:
    - {{BUILD.timestamp}} + {{ BUILD.timestamp }}
    @@ -49,7 +50,7 @@ Hash:
    - {{BUILD.hash}} + {{ BUILD.hash }}
    @@ -83,7 +84,7 @@ [routerLink]="['/login']" class="nav-link" (click)="isCollapsed = true" - >{{ 'g.login' | transloco }}    {{ 'g.login' | transloco }}
  • @@ -92,7 +93,7 @@ [routerLink]="['/features']" class="nav-link" (click)="isCollapsed = true" - >{{ 'g.features' | transloco }}{{ 'g.features' | transloco }}
  • @@ -101,7 +102,7 @@ [routerLink]="['/news']" class="nav-link" (click)="isCollapsed = true" - >{{ 'g.news' | transloco }}{{ 'g.news' | transloco }}
  • @@ -201,7 +202,7 @@ annotationStoreService.currentLevel!.name !== undefined && annotationStoreService.currentLevel!.name!.length > 30 ? annotationStoreService.currentLevel!.name!.substring(0, 30) + - '...' + '...' : annotationStoreService.currentLevel!.name! }} @@ -215,71 +216,71 @@ > - - - + - + - - - - + class="bi bi-trash" + (click)="onLevelRemoveClick(level)" + style="cursor: pointer" + > + + + + + +
    + - {{ i + 1 }}: - + {{ i + 1 }}: + - - + - 1 " - class="bi bi-trash" - (click)="onLevelRemoveClick(level)" - style="cursor: pointer" - > - -
    - -
    + +
    @@ -319,8 +320,8 @@ {{ - appStorage.onlineSession?.currentProject?.name - }} + appStorage.onlineSession?.currentProject?.name + }} {{ - getFreeAnnotationTasks( - appStorage.onlineSession?.currentProject - ) - }} + getFreeAnnotationTasks( + appStorage.onlineSession?.currentProject + ) + }} @@ -354,12 +355,12 @@ {{ + >{{ audio.audioManager!.resource.info!.duration.unix | timespan - : { - showHour: true - } + : { + showHour: true + } }} (H:m:s) @@ -371,8 +372,8 @@ {{ - audio.audioManager!.resource!.info.sampleRate - }} + audio.audioManager!.resource!.info.sampleRate + }} @@ -381,7 +382,7 @@ {{ + >{{ audio.audioManager!.resource!.info.bitrate }} Bit/s {{ navbarServ.fileSize?.size }} + >{{ navbarServ.fileSize?.size }} {{ navbarServ.fileSize?.label }} @@ -447,35 +448,18 @@
    • -
  • - - - - {{ 'g.settings' | transloco }} - - -