frontend: Add more details to the jobs/[job_id] page

frontend/src/client/index.ts

@@ -1,4 +1,4 @@
 // This file is auto-generated by @hey-api/openapi-ts
 
-export { analyzePosApiPosPost, createGenerationJobApiGeneratePost, getJobApiJobsJobIdGet, getJobsApiJobsGet, getMediaFileMediaFilenameGet, healthHealthGet, loginAuthLoginPost, type Options, regenerateAudioApiJobsJobIdRegenerateAudioPost, registerAuthRegisterPost, translateTextApiTranslateGet } from './sdk.gen';
+export { analyzePosApiPosPost, createGenerationJobApiGeneratePost, getArticlesBffArticlesGet, getJobApiJobsJobIdGet, getJobsApiJobsGet, getMediaFileMediaFilenameGet, healthHealthGet, loginAuthLoginPost, type Options, regenerateAudioApiJobsJobIdRegenerateAudioPost, registerAuthRegisterPost, translateTextApiTranslateGet } from './sdk.gen';
-export type { AnalyzePosApiPosPostData, AnalyzePosApiPosPostError, AnalyzePosApiPosPostErrors, AnalyzePosApiPosPostResponse, AnalyzePosApiPosPostResponses, ClientOptions, CreateGenerationJobApiGeneratePostData, CreateGenerationJobApiGeneratePostError, CreateGenerationJobApiGeneratePostErrors, CreateGenerationJobApiGeneratePostResponse, CreateGenerationJobApiGeneratePostResponses, GenerationRequest, GenerationResponse, GetJobApiJobsJobIdGetData, GetJobApiJobsJobIdGetError, GetJobApiJobsJobIdGetErrors, GetJobApiJobsJobIdGetResponse, GetJobApiJobsJobIdGetResponses, GetJobsApiJobsGetData, GetJobsApiJobsGetResponse, GetJobsApiJobsGetResponses, GetMediaFileMediaFilenameGetData, GetMediaFileMediaFilenameGetError, GetMediaFileMediaFilenameGetErrors, GetMediaFileMediaFilenameGetResponses, HealthHealthGetData, HealthHealthGetResponse, HealthHealthGetResponses, HttpValidationError, JobListResponse, JobResponse, JobSummary, LoginAuthLoginPostData, LoginAuthLoginPostError, LoginAuthLoginPostErrors, LoginAuthLoginPostResponse, LoginAuthLoginPostResponses, LoginRequest, PosRequest, PosResponse, RegenerateAudioApiJobsJobIdRegenerateAudioPostData, RegenerateAudioApiJobsJobIdRegenerateAudioPostError, RegenerateAudioApiJobsJobIdRegenerateAudioPostErrors, RegenerateAudioApiJobsJobIdRegenerateAudioPostResponse, RegenerateAudioApiJobsJobIdRegenerateAudioPostResponses, RegisterAuthRegisterPostData, RegisterAuthRegisterPostError, RegisterAuthRegisterPostErrors, RegisterAuthRegisterPostResponses, RegisterRequest, TokenInfo, TokenResponse, TranslateTextApiTranslateGetData, TranslateTextApiTranslateGetError, TranslateTextApiTranslateGetErrors, TranslateTextApiTranslateGetResponse, TranslateTextApiTranslateGetResponses, TranslationResponse, ValidationError } from './types.gen';
+export type { AnalyzePosApiPosPostData, AnalyzePosApiPosPostError, AnalyzePosApiPosPostErrors, AnalyzePosApiPosPostResponse, AnalyzePosApiPosPostResponses, ArticleResponse, ArticlesResponse, ClientOptions, CreateGenerationJobApiGeneratePostData, CreateGenerationJobApiGeneratePostError, CreateGenerationJobApiGeneratePostErrors, CreateGenerationJobApiGeneratePostResponse, CreateGenerationJobApiGeneratePostResponses, GenerationRequest, GenerationResponse, GetArticlesBffArticlesGetData, GetArticlesBffArticlesGetResponse, GetArticlesBffArticlesGetResponses, GetJobApiJobsJobIdGetData, GetJobApiJobsJobIdGetError, GetJobApiJobsJobIdGetErrors, GetJobApiJobsJobIdGetResponse, GetJobApiJobsJobIdGetResponses, GetJobsApiJobsGetData, GetJobsApiJobsGetResponse, GetJobsApiJobsGetResponses, GetMediaFileMediaFilenameGetData, GetMediaFileMediaFilenameGetError, GetMediaFileMediaFilenameGetErrors, GetMediaFileMediaFilenameGetResponses, HealthHealthGetData, HealthHealthGetResponse, HealthHealthGetResponses, HttpValidationError, JobListResponse, JobResponse, JobSummary, LoginAuthLoginPostData, LoginAuthLoginPostError, LoginAuthLoginPostErrors, LoginAuthLoginPostResponse, LoginAuthLoginPostResponses, LoginRequest, PosRequest, PosResponse, RegenerateAudioApiJobsJobIdRegenerateAudioPostData, RegenerateAudioApiJobsJobIdRegenerateAudioPostError, RegenerateAudioApiJobsJobIdRegenerateAudioPostErrors, RegenerateAudioApiJobsJobIdRegenerateAudioPostResponse, RegenerateAudioApiJobsJobIdRegenerateAudioPostResponses, RegisterAuthRegisterPostData, RegisterAuthRegisterPostError, RegisterAuthRegisterPostErrors, RegisterAuthRegisterPostResponses, RegisterRequest, TokenInfo, TokenResponse, TranslateTextApiTranslateGetData, TranslateTextApiTranslateGetError, TranslateTextApiTranslateGetErrors, TranslateTextApiTranslateGetResponse, TranslateTextApiTranslateGetResponses, TranslationResponse, ValidationError } from './types.gen';

frontend/src/client/sdk.gen.ts

@@ -2,7 +2,7 @@
 
 import type { Client, Options as Options2, TDataShape } from './client';
 import { client } from './client.gen';
-import type { AnalyzePosApiPosPostData, AnalyzePosApiPosPostErrors, AnalyzePosApiPosPostResponses, CreateGenerationJobApiGeneratePostData, CreateGenerationJobApiGeneratePostErrors, CreateGenerationJobApiGeneratePostResponses, GetJobApiJobsJobIdGetData, GetJobApiJobsJobIdGetErrors, GetJobApiJobsJobIdGetResponses, GetJobsApiJobsGetData, GetJobsApiJobsGetResponses, GetMediaFileMediaFilenameGetData, GetMediaFileMediaFilenameGetErrors, GetMediaFileMediaFilenameGetResponses, HealthHealthGetData, HealthHealthGetResponses, LoginAuthLoginPostData, LoginAuthLoginPostErrors, LoginAuthLoginPostResponses, RegenerateAudioApiJobsJobIdRegenerateAudioPostData, RegenerateAudioApiJobsJobIdRegenerateAudioPostErrors, RegenerateAudioApiJobsJobIdRegenerateAudioPostResponses, RegisterAuthRegisterPostData, RegisterAuthRegisterPostErrors, RegisterAuthRegisterPostResponses, TranslateTextApiTranslateGetData, TranslateTextApiTranslateGetErrors, TranslateTextApiTranslateGetResponses } from './types.gen';
+import type { AnalyzePosApiPosPostData, AnalyzePosApiPosPostErrors, AnalyzePosApiPosPostResponses, CreateGenerationJobApiGeneratePostData, CreateGenerationJobApiGeneratePostErrors, CreateGenerationJobApiGeneratePostResponses, GetArticlesBffArticlesGetData, GetArticlesBffArticlesGetResponses, GetJobApiJobsJobIdGetData, GetJobApiJobsJobIdGetErrors, GetJobApiJobsJobIdGetResponses, GetJobsApiJobsGetData, GetJobsApiJobsGetResponses, GetMediaFileMediaFilenameGetData, GetMediaFileMediaFilenameGetErrors, GetMediaFileMediaFilenameGetResponses, HealthHealthGetData, HealthHealthGetResponses, LoginAuthLoginPostData, LoginAuthLoginPostErrors, LoginAuthLoginPostResponses, RegenerateAudioApiJobsJobIdRegenerateAudioPostData, RegenerateAudioApiJobsJobIdRegenerateAudioPostErrors, RegenerateAudioApiJobsJobIdRegenerateAudioPostResponses, RegisterAuthRegisterPostData, RegisterAuthRegisterPostErrors, RegisterAuthRegisterPostResponses, TranslateTextApiTranslateGetData, TranslateTextApiTranslateGetErrors, TranslateTextApiTranslateGetResponses } from './types.gen';
 
 export type Options<TData extends TDataShape = TDataShape, ThrowOnError extends boolean = boolean> = Options2<TData, ThrowOnError> & {
     /**
@@ -80,6 +80,11 @@ export const regenerateAudioApiJobsJobIdRegenerateAudioPost = <ThrowOnError exte
     ...options
 });
 
+/**
+ * Get Articles
+ */
+export const getArticlesBffArticlesGet = <ThrowOnError extends boolean = false>(options?: Options<GetArticlesBffArticlesGetData, ThrowOnError>) => (options?.client ?? client).get<GetArticlesBffArticlesGetResponses, unknown, ThrowOnError>({ url: '/bff/articles', ...options });
+
 /**
  * Register
  */
@@ -107,11 +112,7 @@ export const loginAuthLoginPost = <ThrowOnError extends boolean = false>(options
 /**
  * Get Media File
  */
-export const getMediaFileMediaFilenameGet = <ThrowOnError extends boolean = false>(options: Options<GetMediaFileMediaFilenameGetData, ThrowOnError>) => (options.client ?? client).get<GetMediaFileMediaFilenameGetResponses, GetMediaFileMediaFilenameGetErrors, ThrowOnError>({
+export const getMediaFileMediaFilenameGet = <ThrowOnError extends boolean = false>(options: Options<GetMediaFileMediaFilenameGetData, ThrowOnError>) => (options.client ?? client).get<GetMediaFileMediaFilenameGetResponses, GetMediaFileMediaFilenameGetErrors, ThrowOnError>({ url: '/media/{filename}', ...options });
-    security: [{ scheme: 'bearer', type: 'http' }],
-    url: '/media/{filename}',
-    ...options
-});
 
 /**
  * Health

frontend/src/client/types.gen.ts

@@ -4,6 +4,34 @@ export type ClientOptions = {
     baseUrl: `${string}://src` | (string & {});
 };
 
+/**
+ * ArticleResponse
+ */
+export type ArticleResponse = {
+    /**
+     * Target Language
+     */
+    target_language: string;
+    /**
+     * Complexity Level
+     */
+    complexity_level: string;
+    /**
+     * Input Texts
+     */
+    input_texts: Array<string>;
+};
+
+/**
+ * ArticlesResponse
+ */
+export type ArticlesResponse = {
+    /**
+     * Articles
+     */
+    articles: Array<ArticleResponse>;
+};
+
 /**
  * GenerationRequest
  */
@@ -20,10 +48,6 @@ export type GenerationRequest = {
      * Input Texts
      */
     input_texts: Array<string>;
-    /**
-     * Topic
-     */
-    topic?: string | null;
     /**
      * Source Language
      */
@@ -100,10 +124,22 @@ export type JobResponse = {
      * Generated Text
      */
     generated_text?: string | null;
+    /**
+     * Generated Text Pos
+     */
+    generated_text_pos?: {
+        [key: string]: unknown;
+    } | null;
     /**
      * Translated Text
      */
     translated_text?: string | null;
+    /**
+     * Translated Text Pos
+     */
+    translated_text_pos?: {
+        [key: string]: unknown;
+    } | null;
     /**
      * Input Summary
      */
@@ -112,6 +148,12 @@ export type JobResponse = {
      * Audio Url
      */
     audio_url?: string | null;
+    /**
+     * Audio Transcript
+     */
+    audio_transcript?: {
+        [key: string]: unknown;
+    } | null;
     /**
      * Error Message
      */
@@ -134,6 +176,14 @@ export type JobSummary = {
      * Created At
      */
     created_at: string;
+    /**
+     * Completed At
+     */
+    completed_at?: string | null;
+    /**
+     * Error Message
+     */
+    error_message?: string | null;
 };
 
 /**
@@ -450,6 +500,22 @@ export type RegenerateAudioApiJobsJobIdRegenerateAudioPostResponses = {
 
 export type RegenerateAudioApiJobsJobIdRegenerateAudioPostResponse = RegenerateAudioApiJobsJobIdRegenerateAudioPostResponses[keyof RegenerateAudioApiJobsJobIdRegenerateAudioPostResponses];
 
+export type GetArticlesBffArticlesGetData = {
+    body?: never;
+    path?: never;
+    query?: never;
+    url: '/bff/articles';
+};
+
+export type GetArticlesBffArticlesGetResponses = {
+    /**
+     * Successful Response
+     */
+    200: ArticlesResponse;
+};
+
+export type GetArticlesBffArticlesGetResponse = GetArticlesBffArticlesGetResponses[keyof GetArticlesBffArticlesGetResponses];
+
 export type RegisterAuthRegisterPostData = {
     body: RegisterRequest;
     path?: never;

frontend/src/routes/app/jobs/+page.server.ts

@@ -11,7 +11,7 @@ export const load: PageServerLoad = async ({ locals }) => {
 		}
 	});
 
-	const { data, error, response } = await getJobsApiJobsGet({
+	const { data, error } = await getJobsApiJobsGet({
 		client
 	});
 

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

@@ -5,7 +5,7 @@ import { PUBLIC_API_BASE_URL } from '$env/static/public';
 export const load: ServerLoad = async ({ params, locals }) => {
 	const { data, response } = await getJobApiJobsJobIdGet({
 		headers: { Authorization: `Bearer ${locals.authToken ?? ''}` },
-		path: { job_id: params.job_id }
+		path: { job_id: params.job_id as string }
 	});
 
 	if (!data || response.status !== 200) {

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

@@ -114,6 +114,29 @@
 			<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(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}
+
 </div>
 
 <style>
@@ -281,6 +304,21 @@
 		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 {