added slider for intent detection threshold

Author: alfredfrancis

docker-compose.yml

@@ -20,6 +20,8 @@ services:
     container_name: mongodb
     image: mongo
     hostname: mongodb
+    ports:
+       - "27017:27017"
     volumes:
       - mongodbdata:/data
 

frontend/.angular-cli.json

@@ -22,6 +22,7 @@
         "styles.scss"
       ],
       "scripts": [],
+            
       "environmentSource": "environments/environment.ts",
       "environments": {
         "dev": "environments/environment.ts",

frontend/package-lock.json

@@ -25,6 +25,7 @@
     "@angular/platform-browser-dynamic": "^5.2.0",
     "@angular/router": "^5.2.0",
     "core-js": "^2.4.1",
+    "hammerjs": "^2.0.8",
     "rxjs": "^5.5.6",
     "zone.js": "^0.8.19"
   },

frontend/package.json

@@ -15,6 +15,8 @@ MatOptionModule,MatSelectModule,MatCheckboxModule,MatButtonModule} from '@angula
 import {MatGridListModule} from '@angular/material/grid-list';
 import {MatDividerModule} from '@angular/material/divider';
 import {MatExpansionModule} from '@angular/material/expansion';
+import {MatSliderModule} from '@angular/material/slider';
+
 /* Material UI imports ends here */
 
 
@@ -53,7 +55,8 @@ import { AutofocusDirective } from '../directives/autofocus.directive';
     MatButtonModule,
     MatGridListModule,
     MatDividerModule,
-    MatExpansionModule
+    MatExpansionModule,
+    MatSliderModule
 
   ],
   declarations: [IntentsComponent, IntentComponent, TrainComponent, SettingsComponent, ChatComponent,AutofocusDirective],

frontend/src/app/agent/agent.module.ts

@@ -1,13 +1,9 @@
 <mat-card fxLayout="column">
-
+    
     <form [formGroup]="config_form" (submit)="save_config()">
-        <mat-form-field style="width: 40%;">
-            <input type="number" matInput formControlName="confidence_threshold" placeholder="Intent Detection confidence threshold" max=1 min=0>
-        </mat-form-field>
+        <mat-slider min="0.1" max="1.0" step="0.05" formControlName="confidence_threshold" (change)="threshold_value_changed()"></mat-slider>
+        Intent Detection threshold = <b>{{config_form.value.confidence_threshold | percent}}</b>
         <br>
-        <mat-card-actions>
-            <button mat-raised-button color="accent">Save</button>
-          </mat-card-actions>
       </form>
 
     <br>

frontend/src/app/agent/settings/settings.component.html

@@ -26,6 +26,9 @@ export class SettingsComponent implements OnInit {
     )
   }
 
+  threshold_value_changed(){
+    this.save_config()
+  }
   save_config(){
     this.agent_service.update_config(this.config_form.value)
     console.log(this.config_form.value)

frontend/src/app/agent/settings/settings.component.ts

@@ -4,6 +4,8 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
 
+import 'hammerjs';
+
 if (environment.production) {
   enableProdMode();
 }