wilson/language-learning-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Show translated article preview on job page

Browse source
This commit is contained in:
wilson 2026-03-31 07:22:18 +01:00
parent 43df46f26b
commit 0d0c2491e7
2 changed files with 19 additions and 146 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
frontend/src/routes/app/jobs/[job_id]/+page.server.ts
View file

@ -1,5 +1,5 @@
import { error, type ServerLoad } from '@sveltejs/kit';
import { getJobApiJobsJobIdGet } from '../../../../client/sdk.gen.ts';
import { getJobApiJobsJobIdGet, getArticleBffArticlesArticleIdGet } from '../../../../client/sdk.gen.ts';
import { PUBLIC_API_BASE_URL } from '$env/static/public';
export const load: ServerLoad = async ({ params, locals }) => {
@ -8,10 +8,23 @@ export const load: ServerLoad = async ({ params, locals }) => {
path: { job_id: params.job_id as string }
});
let translatedArticle = null;
if (!data || response.status !== 200) {
error(response.status === 404 ? 404 : 500, 'Job not found');
}
if (data.translated_article_id) {
const articleResponse = await getArticleBffArticlesArticleIdGet({
headers: { Authorization: `Bearer ${locals.authToken ?? ''}` },
path: { article_id: data.translated_article_id as string }
});
if (articleResponse.data) {
translatedArticle = articleResponse.data;
}
}
const fullAudioUrl = `${PUBLIC_API_BASE_URL}/media/${data.audio_url}`;
return { job: data, fullAudioUrl };
return { job: data, fullAudioUrl, translatedArticle };
};

148
frontend/src/routes/app/jobs/[job_id]/+page.svelte
View file

@ -1,18 +1,10 @@
<script lang="ts">
import { formatLanguage } from '$lib/formatters';
import type { PageProps } from './$types';
import ArticlePreview from './ArticlePreview.svelte';
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 { job, fullAudioUrl, translatedArticle } = data;
const fmt = (iso: string | null | undefined) => {
if (!iso) return null;
@ -42,10 +34,6 @@
</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>
@ -80,62 +68,7 @@
</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}
<!-- 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(job.audio_transcript, 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}
<ArticlePreview article={translatedArticle} {fullAudioUrl} />
</div>
<style>
@ -251,79 +184,6 @@
}
}
/* --- 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;
}
.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;
}
/* --- Audio --- */
.audio-player {
width: 100%;
accent-color: var(--color-primary);
}
/* --- Responsive --- */
@media (max-width: 640px) {