小费 将脱机语音界面添加到跨平台.NET GUI

奴隶

新成员
已加入
2020年12月21日
留言内容
4
编程经验
5-10
对于那些想深入了解的人,这里有一个 我写的教程源代码!


这是一个有关如何将语音界面添加到跨平台桌面应用程序的小教程:


对于那些想深入了解的人,这里有一个 我写的教程源代码!

在开发人员争相提供MVP的世界中,用户期望跨不断扩展的设备库实现无缝UX,对于现代应用程序开发人员,没有什么比一个好的跨平台框架重要。到目前为止,还没有一个强大的解决方案可以为您的跨平台应用程序添加脱机语音用户界面(VUI)。 Picovoice 最近通过发布.NET SDK消除了对开发人员的限制,该功能允许您在桌面平台之间添加语音支持。

对于.NET开发人员而言,跨平台支持的道路漫长而曲折。 .NET Core的引入提供了一些很好的跨平台可能性,但是它缺少跨平台GUI框架。幸运的是,社区做出了回应并创建了自己的社区。 AvaloniaUI 是一个很棒的.NET Core开放源代码项目,该项目已经允许在所有桌面平台上进行完美像素渲染,并在积极开发中提供了移动平台支持和WebAssembly浏览器支持。

尽管跨平台GUI可能非常复杂,但结果仍然是控件的集合,这些控件需要用户的触摸或键盘输入才能进行交互。 COVID-19大流行的影响不可否认,并带来了市场对非接触式界面的新需求。除了对非接触技术的这种新兴趣之外,纯接触界面还从可访问性的角度缩小了应用程序的用户群,并忽略了通常需要的免提用例。启用语音功能的GUI是将界面带入全新境界的好方法。

在本文中,我将使用AvaloniaUI构建基本的GUI,然后使用Picovoice的语音启用它(无需更改任何UI代码) 豪猪唤醒单词引擎。用户界面将由一些单选按钮组成,我们将切换这些单选按钮以更改背景颜色。进去吧!

开始使用Avalonia的最简单方法是下载它们 Visual Studio扩展 这将提供设计师和一些项目模板。然后,打开Visual Studio并使用创建一个新项目。 Avalonia MVVM应用 模板。

图片发布

该模板将为您提供一些基本的应用程序代码和MVVM胶水。在本教程中,我们将仅向MainWindow.axaml和MainWindowViewModel.cs添加代码。
在MainWindow.axaml中,我们将构建我们的UI。我们将在一个居中的堆栈面板中添加四个单选按钮(…我说这将是基本的!)。我们还将向单选按钮的IsChecked属性和Window背景画笔的Color属性添加一些绑定。我们的目标是根据选择的单选按钮更改窗口颜色。

C#:
<Window xmlns="//github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="clr-namespace:AvaloniaVUI.ViewModels;assembly=AvaloniaVUI"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="AvaloniaVUI.Views.MainWindow"
        Icon="/Assets/avalonia-logo.ico"
        Title="AvaloniaVUI"
        Width="400"
        Height="400">
    <Window.Background>
        <SolidColorBrush Color="{Binding BackgroundColor}"/>
    </Window.Background>
    <Design.DataContext>
        <vm:MainWindowViewModel/>
    </Design.DataContext>
    <StackPanel HorizontalAlignment="Center"
                VerticalAlignment="Center">
        <RadioButton GroupName="WakeWords"
                     Margin="5"
                     Content="Grapefruit"
                     IsChecked="{Binding IsGrapefruit}"/>
        <RadioButton GroupName="WakeWords"
                     Margin="5"
                     Content="Grasshopper"
                     IsChecked="{Binding IsGrasshopper}"/>
        <RadioButton GroupName="WakeWords"
                     Margin="5"
                     Content="Bumblebee"
                     IsChecked="{Binding IsBumblebee}"/>
        <RadioButton GroupName="WakeWords"
                     Margin="5"
                     Content="Blueberry"
                     IsChecked="{Binding IsBlueberry}"/>
    </StackPanel>
</Window>
现在,我们可以转到视图模型MainWindowViewModel.cs并添加我们为其指定绑定的属性。我们将为每个单选按钮添加一个布尔属性,为窗口背景添加一个color属性。然后,我们将添加四种颜色的列表,用于根据选择的单选按钮更改背景颜色。要在选中单选按钮时更改背景,我们可以将代码添加到IsChecked设置器中,以将背景颜色与颜色列表中的一种交换。
C#:
public class MainWindowViewModel : ViewModelBase
{       
    private Color _backgroundColor = Colors.LightGray;
    public Color BackgroundColor
    {
        get => _backgroundColor;
        set => this.RaiseAndSetIfChanged(ref _backgroundColor, value);
    }

    private readonly 清单<Color> _bgColors = new 清单<Color>
    {
        Colors.LightPink,
        Colors.LawnGreen,
        Colors.Yellow,
        Colors.BlueViolet
    };


    private bool _isGrapefruit;
    public bool IsGrapefruit
    {
        get => _isGrapefruit;
        set
        {
            this.RaiseAndSetIfChanged(ref _isGrapefruit, value);
            BackgroundColor = _bgColors[0];
        }
    }

    private bool _isGrasshopper;
    public bool IsGrasshopper
    {
        get => _isGrasshopper;
        set
        {
            this.RaiseAndSetIfChanged(ref _isGrasshopper, value);
            BackgroundColor = _bgColors[1];
        }
    }

    private bool _isBumblebee;
    public bool IsBumblebee
    {
        get => _isBumblebee;
        set
        {
            this.RaiseAndSetIfChanged(ref _isBumblebee, value);
            BackgroundColor = _bgColors[2];
        }
    }

    private bool _isBlueberry;
    public bool IsBlueberry
    {
        get => _isBlueberry;
        set
        {
            this.RaiseAndSetIfChanged(ref _isBlueberry, value);
            BackgroundColor = _bgColors[3];
        }
    }
}

如果运行该应用程序,我们将看到四个单选按钮,并且可以通过单击任意一个来更改窗口颜色。

图片发布

现在,我们将这些点击转换为语音命令。我们将使用豪猪来检测我们所说的单词,然后选择适当的单选按钮。添加 豪猪NuGet软件包 到项目并创建唤醒单词引擎的实例,如下所示:
C#:
public MainWindowViewModel()
{
    清单<string> commands = new 清单<string>
    {
        "grapefruit",
        "grasshopper",
        "bumblebee",
        "blueberry"
    };
    using Porcupine porcupine = Porcupine.Create(keywords: commands);
}

为了检测关键字,我们需要捕获音频帧并将其传递给豪猪进行处理。一个很棒的开源,跨平台音频库是 OpenAL的,可以通过 OpenTK NuGet软件包。我们将其添加到我们的项目中,并添加一些代码以使用默认音频捕获设备捕获豪猪的音频帧。每个帧都传递给豪猪进行处理,并返回索引。如果索引为-1,则没有检测到唤醒词,但是如果关键字索引为0到3,则检测到我们四个唤醒词之一。要在检测到关联的唤醒词时选择单选按钮,我们调用该单选按钮的IsChecked属性的设置器。最后,我们将整个内容放在单独的线程上,以免阻塞UI。现在,我们的视图模型构造函数将如下所示:
C#:
public MainWindowViewModel()
{
    Task.Factory.StartNew(() =>
    {
        清单<string> commands = new 清单<string> {
            "grapefruit",
            "grasshopper",
            "bumblebee",
            "blueberry"
        };
        using Porcupine porcupine = Porcupine.Create(keywords: commands);

        short[] frameBuffer = new short[porcupine.FrameLength];
        ALCaptureDevice captureDevice =
            ALC.CaptureOpenDevice(null,
                                  porcupine.SampleRate,
                                  ALFormat.Mono16,
                                  porcupine.FrameLength * 2);
        {
            ALC.CaptureStart(captureDevice);
            
            while (true)
            {
                int samplesAvailable = ALC.GetAvailableSamples(captureDevice);
                if (samplesAvailable > porcupine.FrameLength)
                {
                    ALC.CaptureSamples(captureDevice,
                                       ref frameBuffer[0],
                                       porcupine.FrameLength);
                    
                    int keywordIndex = porcupine.Process(frameBuffer);
                    if (keywordIndex >= 0)
                    {
                        switch (keywordIndex)
                        {
                            case 0:
                                IsGrapefruit = true;
                                break;
                            case 1:
                                IsGrasshopper = true;
                                break;
                            case 2:
                                IsBumblebee = true;
                                break;
                            case 3:
                                IsBlueberry = true;
                                break;
                        }
                    }
                }
            }
        }
    });
}


启动该应用程序,您现在应该能够说出这四个命令中的任何一个,单选按钮将被选中,而无需任何鼠标输入。

一切就在这里-您现在已经在不更改任何UI代码的情况下向应用程序添加了语音命令。在实际应用中,我们可以附加“保存”,“打开文件”或“设置”命令,并通过Picovoice的 Rhino语音转意图引擎。在您的应用程序中添加这种新的交互维度具有巨大的价值,并且可以成为使您的应用程序在拥挤的市场中占据优势的功能。

可以找到该项目的完整源代码 这里.

有关Picovoice SDK和产品的更多信息,请访问我们的 网站, docs 或探索我们的 Github仓库.
 
由主持人最后编辑:

羊皮

退休程序员
工作人员
已加入
2018年9月5日
留言内容
1,921
地点
英国
编程经验
10+
感谢您的指导。

但是,我们不能保证您发布该网站的时间将持续多久。因此,如果您将文章内容发布在此网站上,将是首选。如果链接过期或该站点将来更改其URL,则您的文章将丢失。这对希望阅读的读者没有帮助。
 

奴隶

新成员
已加入
2020年12月21日
留言内容
4
编程经验
5-10
感谢您的指导。

但是,我们不能保证您发布该网站的时间将持续多久。因此,如果您将文章内容发布在此网站上,将是首选。如果链接过期或该站点将来更改其URL,则您的文章将丢失。这对希望阅读的读者没有帮助。
感谢您的提示-下次我会记住这一点!
 

羊皮

退休程序员
工作人员
已加入
2018年9月5日
留言内容
1,921
地点
英国
编程经验
10+
如果您不介意收录,可以编辑吗?

欢迎您。
 

羊皮

退休程序员
工作人员
已加入
2018年9月5日
留言内容
1,921
地点
英国
编程经验
10+
谢谢你

我已经为您合并了您的最后一篇和第一篇文章。
 
最佳 底部