Add compiling option for captioning. Added progress bar for captioning on active job widget. Track steps on caption. Added reverse proxy iframe that plugins can use to add ui functionality.

ui/src/app/api/jobs/[jobID]/plugin/route.ts

@@ -0,0 +1,47 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { PrismaClient } from '@prisma/client';
+import path from 'path';
+import fs from 'fs';
+import { getTrainingFolder } from '@/server/settings';
+
+const prisma = new PrismaClient();
+
+export async function GET(request: NextRequest, { params }: { params: { jobID: string } }) {
+  const { jobID } = await params;
+
+  const job = await prisma.job.findUnique({
+    where: { id: jobID },
+  });
+
+  if (!job) {
+    return NextResponse.json({ error: 'Job not found' }, { status: 404 });
+  }
+
+  const trainingFolder = await getTrainingFolder();
+  const jobFolder = path.join(trainingFolder, job.name);
+  const pluginPath = path.join(jobFolder, 'plugin.html');
+
+  if (!fs.existsSync(pluginPath)) {
+    return NextResponse.json({ exists: false, html: null });
+  }
+
+  // lightweight existence check used to decide if the Plugin tab should show
+  if (request.nextUrl.searchParams.get('check') === '1') {
+    return NextResponse.json({ exists: true, html: null });
+  }
+
+  // serve the raw html so it can be loaded directly as an iframe src
+  let html = '';
+  try {
+    html = fs.readFileSync(pluginPath, 'utf-8');
+  } catch (error) {
+    console.error('Error reading plugin file:', error);
+    return NextResponse.json({ error: 'Error reading plugin file' }, { status: 500 });
+  }
+  return new NextResponse(html, {
+    headers: {
+      'Content-Type': 'text/html; charset=utf-8',
+      'Cache-Control': 'no-store',
+    },
+  });
+}

ui/src/app/jobs/[jobID]/page.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import { useState, use } from 'react';
+import { useState, useEffect, use } from 'react';
 import { FaChevronLeft } from 'react-icons/fa';
-import { MdDashboard, MdImage, MdShowChart, MdCode } from 'react-icons/md';
+import { MdDashboard, MdImage, MdShowChart, MdCode, MdExtension } from 'react-icons/md';
 import { Button } from '@headlessui/react';
 import { TopBar, MainContent } from '@/components/layout';
 import useJob from '@/hooks/useJob';
@@ -12,9 +12,11 @@ import { redirect } from 'next/navigation';
 import JobActionBar from '@/components/JobActionBar';
 import JobConfigViewer from '@/components/JobConfigViewer';
 import JobLossGraph from '@/components/JobLossGraph';
+import JobPlugin from '@/components/JobPlugin';
 import { Job } from '@prisma/client';
+import { apiClient } from '@/utils/api';
 
-type PageKey = 'overview' | 'samples' | 'config' | 'loss_log';
+type PageKey = 'overview' | 'samples' | 'config' | 'loss_log' | 'plugin';
 
 interface Page {
   name: string;
@@ -58,6 +60,13 @@ const pages: Page[] = [
     component: JobConfigViewer,
     mainCss: 'pt-[80px] px-0 pb-0',
   },
+  {
+    name: 'Plugin',
+    value: 'plugin',
+    icon: MdExtension,
+    component: JobPlugin,
+    mainCss: 'pt-[80px] px-0 pb-0',
+  },
 ];
 
 export default function JobPage({ params }: { params: { jobID: string } }) {
@@ -65,6 +74,21 @@ export default function JobPage({ params }: { params: { jobID: string } }) {
   const jobID = usableParams.jobID;
   const { job, status, refreshJob } = useJob(jobID, 5000);
   const [pageKey, setPageKey] = useState<PageKey>('overview');
+  const [hasPlugin, setHasPlugin] = useState(false);
+
+  // poll for plugin.html in the job folder; show the Plugin tab if it exists
+  useEffect(() => {
+    const checkPlugin = () => {
+      apiClient
+        .get(`/api/jobs/${jobID}/plugin?check=1`)
+        .then(res => res.data)
+        .then(data => setHasPlugin(!!data.exists))
+        .catch(() => {});
+    };
+    checkPlugin();
+    const interval = setInterval(checkPlugin, 5000);
+    return () => clearInterval(interval);
+  }, [jobID]);
 
   const page = pages.find(p => p.value === pageKey);
 
@@ -117,6 +141,9 @@ export default function JobPage({ params }: { params: { jobID: string } }) {
           if (page.jobTypes && !page.jobTypes.includes(jobType)) {
             return null;
           }
+          if (page.value === 'plugin' && !hasPlugin) {
+            return null;
+          }
           return (
             <Button
               key={page.value}