Add ASR pipelines to the demo

Demo/TransformersSharpWebDemo.ApiService/Program.cs

@@ -1,3 +1,4 @@
+using TransformersSharp.MEAI;
 using TransformersSharp.Pipelines;
 using static TransformersSharp.Pipelines.ObjectDetectionPipeline;
 
@@ -23,6 +24,7 @@
 }
 
 var objectDetectionPipeline = ObjectDetectionPipeline.FromModel("facebook/detr-resnet-50");
+var speechToTextClient = SpeechToTextClient.FromModel("openai/whisper-small");
 
 app.MapPost("/detect", (DetectRequest r) =>
 {
@@ -33,11 +35,30 @@
     .Produces<DetectionResult>(StatusCodes.Status200OK)
     .WithName("Detect");
 
+app.MapPost("/transcribe", async (HttpRequest request) =>
+{
+    if (!request.HasFormContentType)
+        return Results.BadRequest("File upload required");
+
+    var form = await request.ReadFormAsync();
+
+    string output = string.Empty;
+    foreach (var file in form.Files)
+    {
+        using var stream = file.OpenReadStream();
+        output += await speechToTextClient.GetTextAsync(stream);
+    }
+
+    return Results.Ok(output);
+
+}).Accepts<IFormFile>("multipart/form-data")
+    .Produces<string>(StatusCodes.Status200OK)
+    .WithName("Transcribe");
+
 app.MapDefaultEndpoints();
 
 app.Run();
 
 record DetectRequest(string Url)
 {
 }
-

Demo/TransformersSharpWebDemo.Web/Components/Layout/NavMenu.razor

@@ -1,6 +1,6 @@
 <div class="top-row ps-3 navbar navbar-dark">
     <div class="container-fluid">
-        <a class="navbar-brand" href="">TransformersSharp Web Demo</a>
+        <a class="navbar-brand" href="">TransformersSharp</a>
     </div>
 </div>
 
@@ -19,5 +19,11 @@
                 <span class="bi bi-list-nested" aria-hidden="true"></span> Object Detection
             </NavLink>
         </div>
+
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="transcribe">
+                <span class="bi bi-list-nested" aria-hidden="true"></span> ASR
+            </NavLink>
+        </div>
     </nav>
 </div>

Demo/TransformersSharpWebDemo.Web/Components/Pages/ObjectDetection.razor

@@ -3,7 +3,7 @@
 @attribute [StreamRendering(true)]
 @attribute [OutputCache(Duration = 5)]
 
-@inject DetectionApiClient DetectionApi
+@inject DemoApiClient DetectionApi
 
 <PageTitle>Object Detection</PageTitle>
 
@@ -14,15 +14,15 @@
 
     .detection {
         position: absolute;
-        color: white ;
-        border: 1px solid black
+        color: yellow;
+        border: 5px dotted red;
+        font-size: 3em;
+        font-family: "Arial";
     }
 </style>
 
 <h1>Object Detection Demo</h1>
 
-<p>This component demonstrates showing data loaded from a backend API service.</p>
-
 @if (detectedObjects == null)
 {
     <p><em>Loading...</em></p>
@@ -42,9 +42,10 @@ else
 
 @code {
     private DetectResponse? detectedObjects;
+    private const string url = "https://raw.githubusercontent.com/tonybaloney/TransformersSharp/refs/heads/asr/Demo/assets/dog.jpg";
 
     protected override async Task OnInitializedAsync()
     {
-        detectedObjects = await DetectionApi.GetObjectDetectionAsync("https://huggingface.co/datasets/Narsil/image_dummy/raw/main/parrots.png");
+        detectedObjects = await DetectionApi.GetObjectDetectionAsync(url);
     }
 }

Demo/TransformersSharpWebDemo.Web/Components/Pages/Transcribe.razor

@@ -0,0 +1,88 @@
+@page "/transcribe"
+@rendermode InteractiveServer
+@attribute [StreamRendering(true)]
+@attribute [OutputCache(Duration = 5)]
+
+@inject DemoApiClient demoApi
+
+<PageTitle>Transcribe Audio</PageTitle>
+
+<h1>ASR Demo</h1>
+
+<p>Select a FLAC audio file to transcribe using the backend API service.</p>
+
+<InputFile OnChange="OnFileSelected" />
+<button @onclick="UploadFile" disabled="@(!isFileSelected || isUploading)">Transcribe</button>
+
+@if (isUploading)
+{
+    <p><em>Uploading and transcribing...</em></p>
+}
+@if (!string.IsNullOrEmpty(transcription))
+{
+    <h3>Transcription Result:</h3>
+    <p>@transcription?.Trim()</p>
+}
+@if (!string.IsNullOrEmpty(error))
+{
+    <p style="color:red">@error</p>
+}
+
+@code {
+    private IBrowserFile? selectedFile;
+    private bool isFileSelected = false;
+    private bool isUploading = false;
+    private string? transcription;
+    private string? error;
+
+    private void OnFileSelected(InputFileChangeEventArgs e)
+    {
+        var file = e.File;
+        if (file.ContentType != "audio/flac"){
+            error = "Must be flac";
+            selectedFile = null;
+            isFileSelected = false;
+            return;
+        }
+
+        if (file != null)
+        {
+            selectedFile = file;
+            isFileSelected = true;
+            error = null;
+        }
+        else
+        {
+            error = "No files selected";
+            selectedFile = null;
+            isFileSelected = false;
+        }
+    }
+
+    private async Task UploadFile()
+    {
+        if (selectedFile == null)
+        {
+            error = "Please select a FLAC file.";
+            return;
+        }
+
+        isUploading = true;
+        transcription = null;
+        error = null;
+
+        try
+        {
+
+            transcription = await demoApi.GetTranscribeAsync(selectedFile);
+        }
+        catch (Exception ex)
+        {
+            error = $"Error: {ex.Message}";
+        }
+        finally
+        {
+            isUploading = false;
+        }
+    }
+}

Demo/TransformersSharpWebDemo.Web/DemoApiClient.cs

@@ -0,0 +1,53 @@
+using Microsoft.AspNetCore.Components.Forms;
+using static TransformersSharp.Pipelines.ObjectDetectionPipeline;
+
+namespace TransformersSharpWebDemo.Web;
+
+public class DemoApiClient(HttpClient httpClient)
+{
+    public async Task<DetectResponse> GetObjectDetectionAsync(string imageUrl, CancellationToken cancellationToken = default)
+    {
+        List<DetectionResult>? detectedObjects = [];
+        var url = imageUrl;
+        DetectRequest detectRequest = new(url); // Replace with actual URL
+        // Extend timeout because this can take a while
+        httpClient.Timeout = TimeSpan.FromMinutes(5);
+        var response = await httpClient.PostAsJsonAsync("/detect", detectRequest, cancellationToken);
+
+        foreach (var detectionResult in await response.Content.ReadFromJsonAsync<DetectionResult[]>(cancellationToken))
+        {
+            detectedObjects.Add(detectionResult);
+        }
+
+        return new(url, detectedObjects?.ToArray() ?? []);
+    }
+
+    public async Task<string> GetTranscribeAsync(IBrowserFile selectedFile)
+    {
+        var content = new MultipartFormDataContent();
+        var stream = selectedFile.OpenReadStream();
+        var fileContent = new StreamContent(stream);
+        fileContent.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("audio/flac");
+        content.Add(fileContent, "file", selectedFile.Name);
+
+        // Adjust the API URL as needed for your environment
+        var response = await httpClient.PostAsync("/transcribe", content);
+
+        if (response.IsSuccessStatusCode)
+        {
+            return await response.Content.ReadAsStringAsync();
+        }
+        else
+        {
+            throw new Exception($"Transcription failed: {response.ReasonPhrase}");
+        }
+    }
+}
+
+public record DetectRequest(string Url)
+{
+}
+
+public record DetectResponse(string Url, DetectionResult[] DetectionResults)
+{
+}

Demo/TransformersSharpWebDemo.Web/Program.cs

@@ -12,7 +12,7 @@
 
 builder.Services.AddOutputCache();
 
-builder.Services.AddHttpClient<DetectionApiClient>(client =>
+builder.Services.AddHttpClient<DemoApiClient>(client =>
     {
         // This URL uses "https+http://" to indicate HTTPS is preferred over HTTP.
         // Learn more about service discovery scheme resolution at https://aka.ms/dotnet/sdschemes.