2026-03-26 20:46:15 +00:00
|
|
|
<script lang="ts">
|
|
|
|
|
import type { PageProps } from './$types';
|
|
|
|
|
|
|
|
|
|
const { data }: PageProps = $props();
|
|
|
|
|
const { job } = data;
|
|
|
|
|
|
|
|
|
|
const languageNames: Record<string, string> = {
|
|
|
|
|
en: 'English',
|
|
|
|
|
fr: 'French',
|
|
|
|
|
es: 'Spanish',
|
|
|
|
|
it: 'Italian',
|
|
|
|
|
de: 'German'
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const lang = (code: string) => languageNames[code] ?? code.toUpperCase();
|
|
|
|
|
|
|
|
|
|
const fmt = (iso: string | null | undefined) => {
|
|
|
|
|
if (!iso) return null;
|
|
|
|
|
return new Intl.DateTimeFormat('en-GB', {
|
|
|
|
|
year: 'numeric',
|
|
|
|
|
month: 'short',
|
|
|
|
|
day: 'numeric',
|
|
|
|
|
hour: '2-digit',
|
|
|
|
|
minute: '2-digit'
|
|
|
|
|
}).format(new Date(iso));
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const isTerminal = job.status === 'succeeded' || job.status === 'failed';
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<div class="page">
|
|
|
|
|
<nav class="breadcrumb">
|
|
|
|
|
<a href="/app/jobs" class="link">← Jobs</a>
|
|
|
|
|
</nav>
|
|
|
|
|
|
|
|
|
|
<header class="page-header">
|
|
|
|
|
<div class="header-top">
|
|
|
|
|
<h1 class="form-title">Job Details</h1>
|
|
|
|
|
<span class="status-badge" data-status={job.status}>{job.status}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<p class="job-id">{job.id}</p>
|
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
<dl class="meta-grid">
|
|
|
|
|
<div class="meta-item">
|
|
|
|
|
<dt class="field-label">Language Pair</dt>
|
|
|
|
|
<dd class="meta-value">{lang(job.source_language)} → {lang(job.target_language)}</dd>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="meta-item">
|
|
|
|
|
<dt class="field-label">Complexity</dt>
|
|
|
|
|
<dd class="meta-value">{job.complexity_level}</dd>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="meta-item">
|
|
|
|
|
<dt class="field-label">Created</dt>
|
|
|
|
|
<dd class="meta-value">{fmt(job.created_at)}</dd>
|
|
|
|
|
</div>
|
|
|
|
|
{#if job.started_at}
|
|
|
|
|
<div class="meta-item">
|
|
|
|
|
<dt class="field-label">Started</dt>
|
|
|
|
|
<dd class="meta-value">{fmt(job.started_at)}</dd>
|
|
|
|
|
</div>
|
|
|
|
|
{/if}
|
|
|
|
|
{#if job.completed_at}
|
|
|
|
|
<div class="meta-item">
|
|
|
|
|
<dt class="field-label">Completed</dt>
|
|
|
|
|
<dd class="meta-value">{fmt(job.completed_at)}</dd>
|
|
|
|
|
</div>
|
|
|
|
|
{/if}
|
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
|
|
{#if job.status === 'failed' && job.error_message}
|
|
|
|
|
<div class="alert alert-error" role="alert">
|
|
|
|
|
<strong>Job failed:</strong>
|
|
|
|
|
{job.error_message}
|
|
|
|
|
</div>
|
|
|
|
|
{:else if !isTerminal}
|
|
|
|
|
<div class="pending-notice">
|
|
|
|
|
<div class="spinner" aria-hidden="true"></div>
|
|
|
|
|
<p>This job is <strong>{job.status}</strong>. Refresh to check for updates.</p>
|
|
|
|
|
</div>
|
|
|
|
|
{/if}
|
|
|
|
|
|
|
|
|
|
{#if job.input_summary}
|
|
|
|
|
<section class="content-section">
|
|
|
|
|
<h2 class="section-title">Input Summary</h2>
|
|
|
|
|
<div class="prose">{job.input_summary}</div>
|
|
|
|
|
</section>
|
|
|
|
|
{/if}
|
|
|
|
|
|
|
|
|
|
{#if job.generated_text}
|
|
|
|
|
<section class="content-section">
|
|
|
|
|
<h2 class="section-title">
|
|
|
|
|
Generated Text
|
|
|
|
|
<span class="section-lang">{lang(job.target_language)}</span>
|
|
|
|
|
</h2>
|
|
|
|
|
{#if job.audio_url}
|
|
|
|
|
<section class="content-section">
|
|
|
|
|
<h2 class="section-title">Audio</h2>
|
|
|
|
|
<audio class="audio-player" controls src={data.fullAudioUrl}>
|
|
|
|
|
Your browser does not support the audio element.
|
|
|
|
|
</audio>
|
|
|
|
|
</section>
|
|
|
|
|
{/if}
|
|
|
|
|
<div class="prose prose-target">{job.generated_text}</div>
|
|
|
|
|
</section>
|
|
|
|
|
{/if}
|
|
|
|
|
|
|
|
|
|
{#if job.translated_text}
|
|
|
|
|
<section class="content-section">
|
|
|
|
|
<h2 class="section-title">
|
|
|
|
|
Translation
|
|
|
|
|
<span class="section-lang">{lang(job.source_language)}</span>
|
|
|
|
|
</h2>
|
|
|
|
|
<div class="prose prose-translated">{job.translated_text}</div>
|
|
|
|
|
</section>
|
|
|
|
|
{/if}
|
2026-03-27 09:46:26 +00:00
|
|
|
|
|
|
|
|
<!-- POS is JSON data about parts-of-speech -->
|
|
|
|
|
{#if job.audio_transcript}
|
|
|
|
|
<section class="content-section">
|
|
|
|
|
<h2 class="section-title">Audio Transcript</h2>
|
|
|
|
|
<div class="pos-text">{JSON.stringify(JSON.parse(job.audio_transcript as any), null, 2)}</div>
|
|
|
|
|
</section>
|
|
|
|
|
{/if}
|
|
|
|
|
|
|
|
|
|
{#if job.generated_text_pos}
|
|
|
|
|
<section class="content-section">
|
|
|
|
|
<h2 class="section-title">Generated Text with POS Tags</h2>
|
|
|
|
|
<div class="pos-text">{JSON.stringify(job.generated_text_pos, null, 2)}</div>
|
|
|
|
|
</section>
|
|
|
|
|
{/if}
|
|
|
|
|
|
|
|
|
|
{#if job.translated_text_pos}
|
|
|
|
|
<section class="content-section">
|
|
|
|
|
<h2 class="section-title">Translated Text with POS Tags</h2>
|
|
|
|
|
<div class="pos-text">{JSON.stringify(job.translated_text_pos, null, 2)}</div>
|
|
|
|
|
</section>
|
|
|
|
|
{/if}
|
|
|
|
|
|
2026-03-26 20:46:15 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
.page {
|
|
|
|
|
max-width: 52rem;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
padding: var(--space-8) var(--space-6);
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
gap: var(--space-6);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* --- Breadcrumb --- */
|
|
|
|
|
|
|
|
|
|
.breadcrumb {
|
|
|
|
|
font-family: var(--font-label);
|
|
|
|
|
font-size: var(--text-label-lg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* --- Header --- */
|
|
|
|
|
|
|
|
|
|
.header-top {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: var(--space-3);
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.job-id {
|
|
|
|
|
font-family: var(--font-label);
|
|
|
|
|
font-size: var(--text-label-md);
|
|
|
|
|
color: var(--color-on-surface-variant);
|
|
|
|
|
margin-top: var(--space-1);
|
|
|
|
|
word-break: break-all;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* --- Status badge --- */
|
|
|
|
|
|
|
|
|
|
.status-badge {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
padding: 0.2em 0.75em;
|
|
|
|
|
border-radius: var(--radius-full);
|
|
|
|
|
font-family: var(--font-label);
|
|
|
|
|
font-size: var(--text-label-md);
|
|
|
|
|
font-weight: var(--weight-medium);
|
|
|
|
|
letter-spacing: var(--tracking-wide);
|
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
background-color: var(--color-secondary-container);
|
|
|
|
|
color: var(--color-on-secondary-container);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.status-badge[data-status='completed'] {
|
|
|
|
|
background-color: var(--color-primary-container);
|
|
|
|
|
color: var(--color-on-primary-container);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.status-badge[data-status='failed'] {
|
|
|
|
|
background-color: color-mix(in srgb, #b3261e 12%, var(--color-surface));
|
|
|
|
|
color: #b3261e;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* --- Metadata grid --- */
|
|
|
|
|
|
|
|
|
|
.meta-grid {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
|
|
|
|
|
gap: var(--space-3) var(--space-5);
|
|
|
|
|
padding: var(--space-4);
|
|
|
|
|
background-color: var(--color-surface-container-low);
|
|
|
|
|
border-radius: var(--radius-lg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.meta-item {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
gap: var(--space-1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.meta-value {
|
|
|
|
|
font-family: var(--font-display);
|
|
|
|
|
font-size: var(--text-body-md);
|
|
|
|
|
font-weight: var(--weight-medium);
|
|
|
|
|
color: var(--color-on-surface);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* --- Pending notice --- */
|
|
|
|
|
|
|
|
|
|
.pending-notice {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: var(--space-3);
|
|
|
|
|
padding: var(--space-4);
|
|
|
|
|
background-color: var(--color-secondary-container);
|
|
|
|
|
border-radius: var(--radius-lg);
|
|
|
|
|
font-family: var(--font-label);
|
|
|
|
|
font-size: var(--text-body-sm);
|
|
|
|
|
color: var(--color-on-secondary-container);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.spinner {
|
|
|
|
|
width: 1.25rem;
|
|
|
|
|
height: 1.25rem;
|
|
|
|
|
border: 2px solid var(--color-outline-variant);
|
|
|
|
|
border-top-color: var(--color-primary);
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
animation: spin 0.9s linear infinite;
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes spin {
|
|
|
|
|
to {
|
|
|
|
|
transform: rotate(360deg);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* --- Content sections --- */
|
|
|
|
|
|
|
|
|
|
.content-section {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
gap: var(--space-3);
|
|
|
|
|
padding-top: var(--space-4);
|
|
|
|
|
border-top: 1px solid color-mix(in srgb, var(--color-outline-variant) 30%, transparent);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.section-title {
|
|
|
|
|
font-family: var(--font-display);
|
|
|
|
|
font-size: var(--text-title-lg);
|
|
|
|
|
font-weight: var(--weight-semibold);
|
|
|
|
|
color: var(--color-on-surface);
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: baseline;
|
|
|
|
|
gap: var(--space-2);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.section-lang {
|
|
|
|
|
font-family: var(--font-label);
|
|
|
|
|
font-size: var(--text-label-md);
|
|
|
|
|
font-weight: var(--weight-medium);
|
|
|
|
|
letter-spacing: var(--tracking-wide);
|
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
color: var(--color-on-surface-variant);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* --- Prose --- */
|
|
|
|
|
|
|
|
|
|
.prose {
|
|
|
|
|
font-family: var(--font-body);
|
|
|
|
|
font-size: var(--text-body-lg);
|
|
|
|
|
line-height: var(--leading-relaxed);
|
|
|
|
|
color: var(--color-on-surface);
|
|
|
|
|
white-space: pre-wrap;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.prose-target {
|
|
|
|
|
padding: var(--space-5) var(--space-6);
|
|
|
|
|
background-color: var(--color-surface-container-low);
|
|
|
|
|
border-radius: var(--radius-lg);
|
|
|
|
|
font-size: calc(var(--text-body-lg) * 1.05);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.prose-translated {
|
|
|
|
|
color: var(--color-on-surface-variant);
|
|
|
|
|
font-size: var(--text-body-md);
|
|
|
|
|
font-style: italic;
|
|
|
|
|
}
|
|
|
|
|
|
2026-03-27 09:46:26 +00:00
|
|
|
.pos-text {
|
|
|
|
|
font-family: var(--font-mono);
|
|
|
|
|
font-size: var(--text-body-sm);
|
|
|
|
|
line-height: var(--leading-relaxed);
|
|
|
|
|
color: var(--color-on-surface);
|
|
|
|
|
background-color: var(--color-surface-container-low);
|
|
|
|
|
padding: var(--space-4);
|
|
|
|
|
border-radius: var(--radius-md);
|
|
|
|
|
overflow-x: auto;
|
|
|
|
|
overflow-y: scroll;
|
|
|
|
|
max-height: 300px;
|
|
|
|
|
white-space: pre-wrap;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
2026-03-26 20:46:15 +00:00
|
|
|
/* --- Audio --- */
|
|
|
|
|
|
|
|
|
|
.audio-player {
|
|
|
|
|
width: 100%;
|
|
|
|
|
accent-color: var(--color-primary);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* --- Responsive --- */
|
|
|
|
|
|
|
|
|
|
@media (max-width: 640px) {
|
|
|
|
|
.page {
|
|
|
|
|
padding: var(--space-6) var(--space-4);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
