Menambahkan Pengecaman Pertuturan dengan Sokongan Tatabahasa pada Aplikasi Sudut Anda

Pengecaman pertuturan boleh meningkatkan interaksi pengguna dalam aplikasi web dengan membenarkan pengguna memasukkan teks atau arahan menggunakan suara mereka. Dalam tutorial ini, saya akan menunjukkan kepada anda cara untuk menyepadukan pengecaman pertuturan ke dalam aplikasi Sudut dan mempertingkatkannya dengan sokongan tatabahasa.

Prasyarat

• Pengetahuan asas Sudut.
• Angular CLI dipasang.
• Projek Angular sedia ada atau buat projek baharu menggunakan apl pengecaman pertuturan baharu.

Langkah 1: Sediakan Perkhidmatan Pengecaman Pertuturan

Pertama, kita perlu mencipta perkhidmatan untuk mengendalikan pengecaman pertuturan. Perkhidmatan ini akan menggunakan webkitSpeechRecognition dan SpeechGrammarList Web Speech API.

Buat perkhidmatan baharu:
ng menjana pengecaman pertuturan perkhidmatan
Sekarang, kemas kini speech-recognition.service.ts yang dijana:

import { Injectable, NgZone } from '@angular/core';
@Injectable({
  providedIn: 'root',
})
export class SpeechRecognitionService {
  recognition: any;
  isListening: boolean = false;

  constructor(private zone: NgZone) {
    const { webkitSpeechRecognition, webkitSpeechGrammarList }: IWindow = window as any;
    this.recognition = new webkitSpeechRecognition();
    this.recognition.continuous = false;
    this.recognition.interimResults = false;
    this.recognition.lang = 'en-US';

    const grammar = '#JSGF V1.0; grammar colors; public <color> = red | green | blue | yellow ;';
    const speechRecognitionList = new webkitSpeechGrammarList();
    speechRecognitionList.addFromString(grammar, 1);
    this.recognition.grammars = speechRecognitionList;
  }

  startListening(): Promise<string> {
    return new Promise((resolve, reject) => {
      if (this.isListening) {
        reject('Already listening');
      }

      this.isListening = true;

      this.recognition.onresult = (event: any) => {
        this.zone.run(() => {
          const result = event.results[0][0].transcript;
          this.stopListening();
          resolve(result);
        });
      };

      this.recognition.onerror = (event: any) => {
        this.zone.run(() => {
          this.isListening = false;
          reject(event.error);
        });
      };

      this.recognition.onend = () => {
        this.zone.run(() => {
          this.isListening = false;
        });
      };

      this.recognition.start();
    });
  }

  stopListening(): void {
    if (this.isListening) {
      this.recognition.stop();
      this.isListening = false;
    }
  }
}

interface IWindow extends Window {
  webkitSpeechRecognition: any;
  webkitSpeechGrammarList: any;
}

Langkah 2: Buat Komponen

Seterusnya, kami akan mencipta komponen untuk menggunakan perkhidmatan pengecaman pertuturan kami. Komponen ini akan mempunyai kawasan teks dan ikon mikrofon. Apabila pengguna mengklik ikon, pengecaman pertuturan akan bermula dan teks yang dikenali akan ditambahkan pada kawasan teks.
Kemas kini app.component.ts:

import { Component } from '@angular/core';
import { SpeechRecognitionService } from './speech-recognition.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  note: string = '';
  isListening: boolean = false;

  constructor(private speechRecognitionService: SpeechRecognitionService) {}

  toggleListening() {
    if (this.isListening) {
      this.speechRecognitionService.stopListening();
      this.isListening = false;
    } else {
      this.isListening = true;
      this.speechRecognitionService.startListening().then(
        (result: string) => {
          this.note = result;
          this.isListening = false;
        },
        (error: any) => {
          console.error('Speech recognition error', error);
          this.isListening = false;
        }
      );
    }
  }
}

Langkah 3: Kemas kini Templat

Dalam templat, kami akan mengikat acara klik pada kaedah togol kami dan menggunakan arahan ngClass Angular untuk menambah kesan cahaya apabila mikrofon mendengar.

Kemas kini app.component.html:

<div class="textarea-container">
  <textarea
    maxlength="150"
    class="form-control"
    id="message-text"
    rows="3"
    [(ngModel)]="note"
  ></textarea>
  <i
    (click)="toggleListening()"
    class="mdi mdi-microphone mic-icon"
    [ngClass]="{ 'glow': isListening }"
  ></i>
</div>

Langkah 4: Tambah Penggayaan

Tambah beberapa gaya untuk meletakkan ikon mikrofon dan tambah kesan cahaya apabila ia mendengar.

Kemas kini app.component.css:

.textarea-container {
  position: relative;
  display: inline-block;
}

.textarea-container textarea {
  width: 100%;
  box-sizing: border-box;
}

.mic-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  font-size: 24px;
  color: #333;
  transition: box-shadow 0.3s ease;
}

.mic-icon.glow {
  box-shadow: 0 0 10px 2px rgba(255, 0, 0, 0.8);
}

Langkah 5: Uji Permohonan Anda

Jalankan aplikasi Sudut anda menggunakan:
ng serve

Navigasi ke http://localhost:4200/ dalam penyemak imbas anda. Anda sepatutnya melihat kawasan teks dengan ikon mikrofon. Apabila anda mengklik ikon, ia akan mula mendengar, dan ikon akan bersinar. Sebut warna daripada senarai tatabahasa (merah, hijau, biru, kuning) dan warna yang dikenali akan ditambahkan pada kawasan teks.

Kesimpulan

Anda telah berjaya menambahkan pengecaman pertuturan dengan sokongan tatabahasa pada aplikasi Angular anda. Ciri ini boleh dikembangkan untuk mengenali perintah yang lebih kompleks dan disepadukan dengan lancar dengan pelbagai fungsi dalam aplikasi anda. Eksperimen dengan tatabahasa dan tetapan pengecaman pertuturan yang berbeza untuk melihat perkara yang paling sesuai untuk kes penggunaan anda.
Ikuti saya di linkedin
Selamat mengekod!

Atas ialah kandungan terperinci Menambahkan Pengecaman Pertuturan dengan Sokongan Tatabahasa pada Aplikasi Sudut Anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!