feat(frontend): render HuggingFace media results inline in the result panel

Add isImageUrl/isAudioUrl/isVideoUrl detection helpers and wire them into
the result table and row detail modal so image, audio, and video outputs
from HuggingFace tasks render inline instead of as raw URLs. Gate backend
string truncation on output mode so HF data URLs are never cut off.

Author: juliethecao

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

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

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 (
+    value.match(/\.(mp4|webm|ogg)(\?.*)?$/i) !== null ||
+    value.startsWith("data:video/") ||
+    value.startsWith("https://v3b.fal.media/files/")
+  );
+}
+
+export function isAudioUrl(value: string): boolean {
+  if (typeof value !== "string") return false;
+  return value.match(/\.(mp3|wav|ogg|m4a|flac)(\?.*)?$/i) !== null || value.startsWith("data:audio/");
+}
+
+export function isImageUrl(value: string): boolean {
+  if (typeof value !== "string") return false;
+  return value.match(/\.(png|jpg|jpeg|gif|webp)(\?.*)?$/i) !== null || value.startsWith("data:image/");
+}

frontend/src/app/workspace/component/result-panel/result-panel-modal.component.html

@@ -18,7 +18,56 @@
 -->
 
 <div class="modal-body content-body">
-  <ngx-json-viewer
-    [expanded]="false"
-    [json]="currentDisplayRowData"></ngx-json-viewer>
+  <div class="modal-toolbar">
+    <button
+      nz-button
+      nzType="default"
+      type="button"
+      (click)="copyText(prettyRowJson)">
+      Copy Row JSON
+    </button>
+  </div>
+
+  <div class="row-detail-list">
+    <div
+      *ngFor="let entry of rowEntries; trackBy: trackByEntryKey"
+      class="row-detail-item">
+      <div class="row-detail-header">
+        <div class="row-detail-key">{{ entry.key }}</div>
+        <button
+          nz-button
+          nzType="link"
+          type="button"
+          (click)="copyText(entry.value)">
+          Copy
+        </button>
+      </div>
+
+      <video
+        *ngIf="entry.isVideo; else checkAudio"
+        controls
+        [src]="entry.mediaSrc"
+        style="max-width: 100%; max-height: 480px; display: block; border: 1px solid #eee; border-radius: 4px"></video>
+
+      <ng-template #checkAudio>
+        <audio
+          *ngIf="entry.isAudio; else checkImage"
+          controls
+          [src]="entry.mediaSrc"
+          style="width: 100%; max-width: 420px; display: block"></audio>
+      </ng-template>
+
+      <ng-template #checkImage>
+        <img
+          *ngIf="entry.isImage; else textValue"
+          [src]="entry.mediaSrc"
+          alt="image result"
+          style="max-width: 100%; max-height: 480px; display: block; border: 1px solid #eee; border-radius: 4px" />
+
+        <ng-template #textValue>
+          <pre class="row-detail-pre row-detail-value">{{ entry.value }}</pre>
+        </ng-template>
+      </ng-template>
+    </div>
+  </div>
 </div>

frontend/src/app/workspace/component/result-panel/result-panel-modal.component.ts

@@ -18,11 +18,17 @@
  */
 
 import { Component, inject, OnChanges } from "@angular/core";
+import { CommonModule } from "@angular/common";
 import { NZ_MODAL_DATA, NzModalRef } from "ng-zorro-antd/modal";
+import { NzButtonModule } from "ng-zorro-antd/button";
+import { NzIconModule } from "ng-zorro-antd/icon";
 import { WorkflowResultService } from "../../service/workflow-result/workflow-result.service";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { PanelResizeService } from "../../service/workflow-result/panel-resize/panel-resize.service";
 import { NgxJsonViewerModule } from "ngx-json-viewer";
+import { NotificationService } from "../../../common/service/notification/notification.service";
+import { isAudioUrl, isVideoUrl, isImageUrl } from "src/app/common/util/media-type.util";
+import { AppSettings } from "../../../common/app-setting";
 
 /**
  *
@@ -42,29 +48,79 @@ import { NgxJsonViewerModule } from "ngx-json-viewer";
   selector: "texera-row-modal-content",
   templateUrl: "./result-panel-modal.component.html",
   styleUrls: ["./result-panel-model.component.scss"],
-  imports: [NgxJsonViewerModule],
+  imports: [CommonModule, NzButtonModule, NzIconModule, NgxJsonViewerModule],
 })
 export class RowModalComponent implements OnChanges {
+  rowEntries: { key: string; value: string; mediaSrc: string; isVideo: boolean; isImage: boolean; isAudio: boolean }[] =
+    [];
   // Index of current displayed row in currentResult
-  readonly operatorId: string = inject(NZ_MODAL_DATA).operatorId;
-  rowIndex: number = inject(NZ_MODAL_DATA).rowIndex;
+  private readonly modalData: { operatorId: string; rowIndex: number; rowData?: Record<string, unknown> } =
+    inject(NZ_MODAL_DATA);
+  readonly operatorId: string = this.modalData.operatorId;
+  rowIndex: number = this.modalData.rowIndex;
   currentDisplayRowData: Record<string, unknown> = {};
 
   constructor(
     public modal: NzModalRef<any, number>,
     private workflowResultService: WorkflowResultService,
-    private resizeService: PanelResizeService
+    private resizeService: PanelResizeService,
+    private notificationService: NotificationService
   ) {
+    if (this.modalData.rowData) {
+      this.currentDisplayRowData = this.modalData.rowData;
+      this.rowEntries = this.buildRowEntries(this.currentDisplayRowData);
+    }
     this.ngOnChanges();
   }
 
+  get prettyRowJson(): string {
+    return JSON.stringify(this.currentDisplayRowData, null, 2);
+  }
+
+  copyText(text: string): void {
+    navigator.clipboard.writeText(text).then(
+      () => this.notificationService.success("Copied to clipboard"),
+      () => this.notificationService.error("Failed to copy")
+    );
+  }
+
   ngOnChanges(): void {
     this.workflowResultService
       .getPaginatedResultService(this.operatorId)
       ?.selectTuple(this.rowIndex, this.resizeService.pageSize)
       .pipe(untilDestroyed(this))
       .subscribe(res => {
-        this.currentDisplayRowData = res.tuple;
+        if (res?.tuple) {
+          this.currentDisplayRowData = res.tuple;
+          this.rowEntries = this.buildRowEntries(this.currentDisplayRowData);
+        }
       });
   }
+
+  trackByEntryKey(_index: number, entry: { key: string }): string {
+    return entry.key;
+  }
+
+  private resolveMediaSrc(value: string): string {
+    if (!value.startsWith("http://") && !value.startsWith("https://")) {
+      return value;
+    }
+    return `${AppSettings.getApiEndpoint()}/huggingface/media-proxy?url=${encodeURIComponent(value)}`;
+  }
+
+  private buildRowEntries(
+    rowData: Record<string, unknown>
+  ): { key: string; value: string; mediaSrc: string; isVideo: boolean; isImage: boolean; isAudio: boolean }[] {
+    return Object.entries(rowData).map(([key, val]) => {
+      const value = typeof val === "string" ? val : JSON.stringify(val);
+      return {
+        key,
+        value,
+        mediaSrc: this.resolveMediaSrc(value),
+        isVideo: typeof val === "string" && isVideoUrl(val),
+        isImage: typeof val === "string" && isImageUrl(val),
+        isAudio: typeof val === "string" && isAudioUrl(val),
+      };
+    });
+  }
 }

frontend/src/app/workspace/component/result-panel/result-panel-model.component.scss

@@ -23,3 +23,54 @@
   height: 100%;
   width: 100%;
 }
+
+.modal-toolbar {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 12px;
+}
+
+.row-detail-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.row-detail-item {
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  padding: 12px;
+  background: #fff;
+}
+
+.row-detail-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+
+.row-detail-key {
+  font-weight: 600;
+  word-break: break-word;
+}
+
+.row-detail-pre {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: monospace;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.row-detail-value {
+  max-height: none;
+  overflow: visible;
+  padding: 8px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  background: #fafafa;
+  user-select: text;
+}