feat(frontend): add HuggingFace media output rendering in result panel (#5675)

### What changes were proposed in this PR?

Render image, audio, and video outputs from HuggingFace tasks inline in
the workflow result panel instead of displaying raw data URLs as text.

**New file — `media-type.util.ts`:**

- `isImageUrl` — detects `data:image/` data URLs and common image
extensions (`.png`, `.jpg`, `.jpeg`, `.gif`, `.webp`)
- `isAudioUrl` — detects `data:audio/` data URLs and common audio
extensions (`.mp3`, `.wav`, `.ogg`, `.m4a`, `.flac`)
- `isVideoUrl` — detects `data:video/` data URLs, common video
extensions (`.mp4`, `.webm`, `.ogg`), and the `fal.media` CDN host used
by fal.ai text-to-video outputs

**Changes to `result-table-frame.component.{ts,html}`:**

- Add `isImageCell` / `isAudioCell` / `isVideoCell` methods that
delegate to the detection helpers
- Show a media type icon (play/image/audio) in the table cell; the
actual `<img>`, `<audio controls>`, `<video controls>` elements render
inline in the row detail modal
- Precompute each cell's media type once per row when result data
arrives (`cellMediaTypes[rowIndex][columnIndex]`), instead of re-running
the detection helpers and getCell on every change-detection cycle

**Changes to `result-panel-modal.component.{ts,html}`:**

- Build `rowEntries` with per-field media metadata on modal open
- Render media fields inline in the row detail view with a
copy-to-clipboard fallback for the raw URL
- Fetch remote media through the backend's /huggingface/media-proxy
endpoint (with JWT auth) rather than loading cross-origin URLs directly
in the browser
- On a proxy failure (e.g. the backend's SSRF allowlist rejects the
URL), fall back to the plain-text view instead of loading the raw remote
URL directly
- Revoke allocated blob URLs on `ngOnDestroy` to avoid leaking object
URLs for the life of the page

**Changes to `result-panel-model.component.scss`:**

- Add modal-toolbar and row-detail styles for media display

**Changes to `operator-property-edit-frame.component.ts`:⋆

- Show validation messages (`validation.show = true`) for the
image/audio upload and prompt-column fields on HuggingFace operators

**New file — `media-type.util.spec.ts`:**

- 22 unit tests covering all three helpers across data URL prefixes,
file extensions (including case-insensitivity and query strings), the
`fal.media` CDN URL and empty/plain-string inputs

### Any related issues, documentation, discussions?

- Tracking issue: #5674
- Closes: #5674
- Stacked on: #5568
- Parent issue: #5041

### How was this PR tested?
- `media-type.util.spec.ts` (22 cases): data URL prefixes, file
extensions, case-insensitivity, query strings, the fal.media CDN URL,
cross-type rejection, and non-string input handling
- `result-table-frame.component.spec.ts`: media cell icon rendering —
Play Video/Play Audio/View Image indicators and plain-text fallback
- `result-panel-modal.component.spec.ts`: row-entry construction from
data URLs vs. remote URLs, blob-fetch success/failure, the SSRF-safe
proxy-failure fallback, clipboard copy, and inline video/image `src`
binding
- Run with `ng test`

### Was this PR authored or co-authored using generative AI tooling?

Co-authored with Claude Sonnet 4.6 in compliance with ASF guidelines

---------

Signed-off-by: Elliot Lin <36275109+ELin2025@users.noreply.github.com>
Signed-off-by: Julie Cao <116243642+juliethecao@users.noreply.github.com>
Co-authored-by: Elliot <36275109+Falcons-Royale@users.noreply.github.com>
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: Elliot Lin <36275109+ELin2025@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Anish Shivamurthy <anish@uci.edu>
Co-authored-by: Anish Shivamurthy <anishshiva7@gmail.com>
Co-authored-by: PG1204 <vidya0dhar@gmail.com>
Co-authored-by: Matthew B. <mgball@uci.edu>

Author: 8 people

frontend/src/app/common/util/media-type.util.spec.ts

@@ -0,0 +1,148 @@
+/**
+ * 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 { isAudioUrl, isImageUrl, isVideoUrl } from "./media-type.util";
+
+describe("isImageUrl", () => {
+  it("should return true for data:image/ data URLs", () => {
+    expect(isImageUrl("data:image/png;base64,abc123")).toBe(true);
+    expect(isImageUrl("data:image/jpeg;base64,abc123")).toBe(true);
+    expect(isImageUrl("data:image/webp;base64,abc123")).toBe(true);
+  });
+
+  it("should return true for common image file extensions", () => {
+    expect(isImageUrl("https://example.com/photo.png")).toBe(true);
+    expect(isImageUrl("https://example.com/photo.jpg")).toBe(true);
+    expect(isImageUrl("https://example.com/photo.jpeg")).toBe(true);
+    expect(isImageUrl("https://example.com/photo.gif")).toBe(true);
+    expect(isImageUrl("https://example.com/photo.webp")).toBe(true);
+  });
+
+  it("should be case-insensitive for extensions", () => {
+    expect(isImageUrl("https://example.com/photo.PNG")).toBe(true);
+    expect(isImageUrl("https://example.com/photo.JPG")).toBe(true);
+  });
+
+  it("should return true for URLs with query strings", () => {
+    expect(isImageUrl("https://example.com/photo.png?v=1")).toBe(true);
+  });
+
+  it("should return false for audio and video URLs", () => {
+    expect(isImageUrl("data:audio/mp3;base64,abc")).toBe(false);
+    expect(isImageUrl("data:video/mp4;base64,abc")).toBe(false);
+    expect(isImageUrl("https://example.com/clip.mp4")).toBe(false);
+  });
+
+  it("should return false for plain text strings", () => {
+    expect(isImageUrl("hello world")).toBe(false);
+    expect(isImageUrl("")).toBe(false);
+  });
+});
+
+describe("isAudioUrl", () => {
+  it("should return true for data:audio/ data URLs", () => {
+    expect(isAudioUrl("data:audio/mp3;base64,abc123")).toBe(true);
+    expect(isAudioUrl("data:audio/wav;base64,abc123")).toBe(true);
+  });
+
+  it("should return true for common audio file extensions", () => {
+    expect(isAudioUrl("https://example.com/clip.mp3")).toBe(true);
+    expect(isAudioUrl("https://example.com/clip.wav")).toBe(true);
+    expect(isAudioUrl("https://example.com/clip.ogg")).toBe(true);
+    expect(isAudioUrl("https://example.com/clip.m4a")).toBe(true);
+    expect(isAudioUrl("https://example.com/clip.flac")).toBe(true);
+  });
+
+  it("should be case-insensitive for extensions", () => {
+    expect(isAudioUrl("https://example.com/clip.MP3")).toBe(true);
+    expect(isAudioUrl("https://example.com/clip.WAV")).toBe(true);
+  });
+
+  it("should return true for URLs with query strings", () => {
+    expect(isAudioUrl("https://example.com/clip.mp3?token=xyz")).toBe(true);
+  });
+
+  it("should return false for image and video URLs", () => {
+    expect(isAudioUrl("data:image/png;base64,abc")).toBe(false);
+    expect(isAudioUrl("data:video/mp4;base64,abc")).toBe(false);
+    expect(isAudioUrl("https://example.com/photo.png")).toBe(false);
+  });
+
+  it("should return false for plain text strings", () => {
+    expect(isAudioUrl("hello world")).toBe(false);
+    expect(isAudioUrl("")).toBe(false);
+  });
+});
+
+describe("isVideoUrl", () => {
+  it("should return true for data:video/ data URLs", () => {
+    expect(isVideoUrl("data:video/mp4;base64,abc123")).toBe(true);
+    expect(isVideoUrl("data:video/webm;base64,abc123")).toBe(true);
+  });
+
+  it("should return true for common video file extensions", () => {
+    expect(isVideoUrl("https://example.com/clip.mp4")).toBe(true);
+    expect(isVideoUrl("https://example.com/clip.webm")).toBe(true);
+    expect(isVideoUrl("https://example.com/clip.ogv")).toBe(true);
+  });
+
+  it("should return true for fal.media CDN URLs", () => {
+    expect(isVideoUrl("https://v3b.fal.media/files/abc123/output.mp4")).toBe(true);
+  });
+
+  it("should be case-insensitive for extensions", () => {
+    expect(isVideoUrl("https://example.com/clip.MP4")).toBe(true);
+    expect(isVideoUrl("https://example.com/clip.WEBM")).toBe(true);
+  });
+
+  it("should return true for URLs with query strings", () => {
+    expect(isVideoUrl("https://example.com/clip.mp4?t=5")).toBe(true);
+  });
+
+  it("should return false for image and audio URLs", () => {
+    expect(isVideoUrl("data:image/png;base64,abc")).toBe(false);
+    expect(isVideoUrl("data:audio/mp3;base64,abc")).toBe(false);
+    expect(isVideoUrl("https://example.com/photo.jpg")).toBe(false);
+  });
+
+  it("should return false for plain text strings", () => {
+    expect(isVideoUrl("hello world")).toBe(false);
+    expect(isVideoUrl("")).toBe(false);
+  });
+
+  it("should return false for non-string types", () => {
+    expect(isVideoUrl(null as unknown as string)).toBe(false);
+    expect(isVideoUrl(undefined as unknown as string)).toBe(false);
+    expect(isVideoUrl(42 as unknown as string)).toBe(false);
+  });
+});
+
+describe("non-string type guard (shared)", () => {
+  it("isAudioUrl should return false for non-string types", () => {
+    expect(isAudioUrl(null as unknown as string)).toBe(false);
+    expect(isAudioUrl(undefined as unknown as string)).toBe(false);
+    expect(isAudioUrl(true as unknown as string)).toBe(false);
+  });
+
+  it("isImageUrl should return false for non-string types", () => {
+    expect(isImageUrl(null as unknown as string)).toBe(false);
+    expect(isImageUrl(undefined as unknown as string)).toBe(false);
+    expect(isImageUrl([] as unknown as string)).toBe(false);
+  });
+});

frontend/src/app/common/util/media-type.util.ts

@@ -0,0 +1,37 @@
+/**
+ * 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.
+ */
+
+export function isVideoUrl(value: string): boolean {
+  if (typeof value !== "string") return false;
+  return (
+    /^https?:\/\/.+\.(mp4|webm|ogv)(\?.*)?$/i.test(value) ||
+    value.startsWith("data:video/") ||
+    /^https:\/\/[a-z0-9-]+\.fal\.media\/files\//i.test(value)
+  );
+}
+
+export function isAudioUrl(value: string): boolean {
+  if (typeof value !== "string") return false;
+  return /^https?:\/\/.+\.(mp3|wav|ogg|m4a|flac)(\?.*)?$/i.test(value) || value.startsWith("data:audio/");
+}
+
+export function isImageUrl(value: string): boolean {
+  if (typeof value !== "string") return false;
+  return /^https?:\/\/.+\.(png|jpg|jpeg|gif|webp)(\?.*)?$/i.test(value) || value.startsWith("data:image/");
+}