feat(frontend): add HuggingFace audio upload component

Register the huggingface-audio-upload formly field type and declare
HuggingFaceAudioUploadComponent in AppModule. Handles server-side audio
storage via the /huggingface/upload-audio endpoint with local preview.

Co-Authored-By: Anish Shivamurthy <anish@uci.edu>

Author: ELin2025

frontend/src/app/app.module.ts

@@ -107,6 +107,7 @@ import { AgentChatComponent } from "./workspace/component/agent/agent-panel/agen
 import { AgentRegistrationComponent } from "./workspace/component/agent/agent-panel/agent-registration/agent-registration.component";
 import { HuggingFaceImageUploadComponent } from "./workspace/component/hugging-face-image-upload/hugging-face-image-upload.component";
 import { HuggingFaceComponent } from "./workspace/component/hugging-face/hugging-face.component";
+import { HuggingFaceAudioUploadComponent } from "./workspace/component/hugging-face-audio-upload/hugging-face-audio-upload.component";
 import { DatasetFileSelectorComponent } from "./workspace/component/dataset-file-selector/dataset-file-selector.component";
 import { DatasetVersionSelectorComponent } from "./workspace/component/dataset-version-selector/dataset-version-selector.component";
 import { DatasetSelectionModalComponent } from "./workspace/component/dataset-selection-modal/dataset-selection-modal.component";
@@ -332,6 +333,7 @@ registerLocaleData(en);
     AgentRegistrationComponent,
     AgentInteractionComponent,
     HuggingFaceComponent,
+    HuggingFaceAudioUploadComponent,
     HuggingFaceImageUploadComponent,
     DatasetFileSelectorComponent,
     DatasetVersionSelectorComponent,

frontend/src/app/common/formly/formly-config.ts

@@ -31,6 +31,7 @@ import { UiUdfParametersComponent } from "../../workspace/component/ui-udf-param
 import { DatasetVersionSelectorComponent } from "../../workspace/component/dataset-version-selector/dataset-version-selector.component";
 import { HuggingFaceImageUploadComponent } from "../../workspace/component/hugging-face-image-upload/hugging-face-image-upload.component";
 import { HuggingFaceComponent } from "../../workspace/component/hugging-face/hugging-face.component";
+import { HuggingFaceAudioUploadComponent } from "../../workspace/component/hugging-face-audio-upload/hugging-face-audio-upload.component";
 
 /**
  * Configuration for using Json Schema with Formly.
@@ -83,6 +84,7 @@ export const TEXERA_FORMLY_CONFIG = {
     { name: "inputautocomplete", component: DatasetFileSelectorComponent, wrappers: ["form-field"] },
     { name: "datasetversionselector", component: DatasetVersionSelectorComponent, wrappers: ["form-field"] },
     { name: "huggingface", component: HuggingFaceComponent, wrappers: ["form-field"] },
+    { name: "huggingface-audio-upload", component: HuggingFaceAudioUploadComponent, wrappers: ["form-field"] },
     { name: "huggingface-image-upload", component: HuggingFaceImageUploadComponent, wrappers: ["form-field"] },
     { name: "repeat-section-dnd", component: FormlyRepeatDndComponent },
     { name: "ui-udf-parameters", component: UiUdfParametersComponent, wrappers: ["form-field"] },

frontend/src/app/workspace/component/hugging-face-audio-upload/hugging-face-audio-upload.component.html

@@ -0,0 +1,44 @@
+<!--
+ Licensed to the Apache Software Foundation (ASF) under one
+ or more contributor license agreements.  See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership.  The ASF licenses this file
+ to you under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance
+ with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing,
+ software distributed under the License is distributed on an
+ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ KIND, either express or implied.  See the License for the
+ specific language governing permissions and limitations
+ under the License.
+-->
+
+<div class="hf-audio-upload">
+  <div class="hf-audio-guidance">
+    Audio files are uploaded to temporary backend storage and referenced from the operator, so larger clips can be used without bloating the workflow JSON.
+  </div>
+
+  <input
+    #fileInput
+    type="file"
+    accept="audio/*"
+    class="hf-audio-upload-input"
+    (change)="onFileSelected($event)" />
+
+  <div *ngIf="previewSrc" class="hf-audio-preview">
+    <audio controls [src]="previewSrc"></audio>
+    <div class="hf-audio-meta">
+      <span>{{ fileName || "Selected audio" }}</span>
+      <span *ngIf="isUploading" class="hf-audio-status">Uploading...</span>
+      <button nz-button nzSize="small" type="button" (click)="clearAudio(fileInput)">Clear</button>
+    </div>
+  </div>
+
+  <div *ngIf="errorMessage" class="hf-audio-error">
+    {{ errorMessage }}
+  </div>
+</div>

frontend/src/app/workspace/component/hugging-face-audio-upload/hugging-face-audio-upload.component.scss

@@ -0,0 +1,68 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.hf-audio-upload {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.hf-audio-guidance {
+  color: #595959;
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.hf-audio-upload-input {
+  width: 100%;
+}
+
+.hf-audio-preview {
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  padding: 8px;
+}
+
+.hf-audio-preview audio {
+  display: block;
+  width: 100%;
+}
+
+.hf-audio-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.hf-audio-meta span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.hf-audio-status {
+  color: #595959;
+  font-size: 12px;
+}
+
+.hf-audio-error {
+  color: #cf1322;
+}

frontend/src/app/workspace/component/hugging-face-audio-upload/hugging-face-audio-upload.component.spec.ts

@@ -0,0 +1,36 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { HuggingFaceAudioUploadComponent } from "./hugging-face-audio-upload.component";
+
+describe("HuggingFaceAudioUploadComponent (unit)", () => {
+  it("should be defined", () => {
+    expect(HuggingFaceAudioUploadComponent).toBeDefined();
+  });
+
+  it("should have the correct selector", () => {
+    const metadata = Reflect.getOwnPropertyDescriptor(
+      HuggingFaceAudioUploadComponent,
+      "__annotations"
+    );
+    // Component decorator metadata is available via the Angular compiler;
+    // at minimum verify the class is importable and constructable metadata exists.
+    expect(HuggingFaceAudioUploadComponent.prototype).toBeDefined();
+  });
+});

frontend/src/app/workspace/component/hugging-face-audio-upload/hugging-face-audio-upload.component.ts

@@ -0,0 +1,153 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Component, OnDestroy, OnInit } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { FieldType, FieldTypeConfig } from "@ngx-formly/core";
+import { HttpClient } from "@angular/common/http";
+import { NzButtonModule } from "ng-zorro-antd/button";
+import { firstValueFrom } from "rxjs";
+import { AppSettings } from "../../../common/app-setting";
+
+interface HuggingFaceAudioUploadResponse {
+  path: string;
+  fileName: string;
+}
+
+@Component({
+  selector: "texera-hugging-face-audio-upload",
+  templateUrl: "./hugging-face-audio-upload.component.html",
+  styleUrls: ["./hugging-face-audio-upload.component.scss"],
+  imports: [CommonModule, NzButtonModule],
+})
+export class HuggingFaceAudioUploadComponent extends FieldType<FieldTypeConfig> implements OnInit, OnDestroy {
+  fileName = "";
+  errorMessage = "";
+  isUploading = false;
+  private localPreviewUrl = "";
+
+  ngOnInit(): void {
+    if (typeof this.formControl.value === "string" && this.formControl.value.trim().length > 0) {
+      this.fileName = this.getDisplayName(this.formControl.value);
+    }
+  }
+
+  constructor(private http: HttpClient) {
+    super();
+  }
+
+  get previewSrc(): string {
+    if (this.localPreviewUrl) {
+      return this.localPreviewUrl;
+    }
+    const value = this.formControl.value;
+    if (typeof value !== "string" || value.trim().length === 0) {
+      return "";
+    }
+    if (value.startsWith("data:audio/")) {
+      return value;
+    }
+    return `${AppSettings.getApiEndpoint()}/huggingface/audio-preview?path=${encodeURIComponent(value)}`;
+  }
+
+  ngOnDestroy(): void {
+    this.revokePreviewUrl();
+  }
+
+  async onFileSelected(event: Event): Promise<void> {
+    this.errorMessage = "";
+    const input = event.target as HTMLInputElement;
+    const file = input.files?.[0];
+
+    if (!file) {
+      return;
+    }
+    if (!file.type.startsWith("audio/")) {
+      this.errorMessage = "Choose an audio file.";
+      input.value = "";
+      return;
+    }
+    this.revokePreviewUrl();
+    this.localPreviewUrl = URL.createObjectURL(file);
+    this.isUploading = true;
+
+    try {
+      const response = await firstValueFrom(
+        this.http.post<HuggingFaceAudioUploadResponse>(
+          `${AppSettings.getApiEndpoint()}/huggingface/upload-audio?filename=${encodeURIComponent(file.name)}`,
+          file,
+          {
+            headers: {
+              "Content-Type": "application/octet-stream",
+            },
+          }
+        )
+      );
+      this.fileName = response.fileName || file.name;
+      this.formControl.setValue(response.path);
+      if (typeof this.key === "string" && this.model) {
+        this.model[this.key] = response.path;
+      }
+      this.formControl.markAsDirty();
+      this.formControl.markAsTouched();
+      this.formControl.updateValueAndValidity();
+    } catch {
+      this.clearAudio(input, false);
+      this.errorMessage = "Could not upload this audio file.";
+    } finally {
+      this.isUploading = false;
+    }
+  }
+
+  clearAudio(input: HTMLInputElement, clearError: boolean = true): void {
+    this.fileName = "";
+    if (clearError) {
+      this.errorMessage = "";
+    }
+    this.isUploading = false;
+    this.revokePreviewUrl();
+    input.value = "";
+    this.formControl.setValue("");
+    if (typeof this.key === "string" && this.model) {
+      this.model[this.key] = "";
+    }
+    this.formControl.markAsDirty();
+    this.formControl.markAsTouched();
+    this.formControl.updateValueAndValidity();
+  }
+
+  private revokePreviewUrl(): void {
+    if (this.localPreviewUrl) {
+      URL.revokeObjectURL(this.localPreviewUrl);
+      this.localPreviewUrl = "";
+    }
+  }
+
+  private getDisplayName(value: string): string {
+    const trimmedValue = value.trim();
+    if (!trimmedValue) {
+      return "";
+    }
+    if (trimmedValue.startsWith("data:audio/")) {
+      return "Selected audio";
+    }
+    const segments = trimmedValue.split(/[\\/]/);
+    return segments[segments.length - 1] || "Selected audio";
+  }
+}