feat: frontend pages
This commit is contained in:
parent
dbc921d98a
commit
4fbf2abd08
17 changed files with 1460 additions and 32 deletions
|
|
@ -66,7 +66,8 @@
|
|||
--text-headline-sm: 1.25rem;
|
||||
--text-title-lg: 1.125rem;
|
||||
--text-title-md: 1rem;
|
||||
--text-body-lg: 1rem; /* long-form reading standard */
|
||||
--text-body-xl: 1.25rem; /* long-form reading standard */
|
||||
--text-body-lg: 1rem;
|
||||
--text-body-md: 0.9375rem;
|
||||
--text-body-sm: 0.875rem;
|
||||
--text-label-lg: 0.875rem;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
// This file is auto-generated by @hey-api/openapi-ts
|
||||
|
||||
export { analyzePosApiPosPost, createGenerationJobApiGeneratePost, getArticlesBffArticlesGet, getJobApiJobsJobIdGet, getJobsApiJobsGet, getMediaFileMediaFilenameGet, healthHealthGet, loginAuthLoginPost, type Options, regenerateAudioApiJobsJobIdRegenerateAudioPost, registerAuthRegisterPost, translateTextApiTranslateGet } from './sdk.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';
|
||||
export { analyzePosApiPosPost, createGenerationJobApiGeneratePost, getArticleBffArticlesArticleIdGet, getJobApiJobsJobIdGet, getJobsApiJobsGet, getMediaFileMediaFilenameGet, getUserProfileBffUserProfileGet, healthHealthGet, listArticlesBffArticlesGet, loginAuthLoginPost, type Options, regenerateAudioApiJobsJobIdRegenerateAudioPost, registerAuthRegisterPost, translateTextApiTranslateGet, upsertLearnableLanguageApiLearnableLanguagesPost } from './sdk.gen';
|
||||
export type { AnalyzePosApiPosPostData, AnalyzePosApiPosPostError, AnalyzePosApiPosPostErrors, AnalyzePosApiPosPostResponse, AnalyzePosApiPosPostResponses, ArticleDetail, ArticleItem, ArticleListResponse, ClientOptions, CreateGenerationJobApiGeneratePostData, CreateGenerationJobApiGeneratePostError, CreateGenerationJobApiGeneratePostErrors, CreateGenerationJobApiGeneratePostResponse, CreateGenerationJobApiGeneratePostResponses, GenerationRequest, GenerationResponse, GetArticleBffArticlesArticleIdGetData, GetArticleBffArticlesArticleIdGetError, GetArticleBffArticlesArticleIdGetErrors, GetArticleBffArticlesArticleIdGetResponse, GetArticleBffArticlesArticleIdGetResponses, GetJobApiJobsJobIdGetData, GetJobApiJobsJobIdGetError, GetJobApiJobsJobIdGetErrors, GetJobApiJobsJobIdGetResponse, GetJobApiJobsJobIdGetResponses, GetJobsApiJobsGetData, GetJobsApiJobsGetResponse, GetJobsApiJobsGetResponses, GetMediaFileMediaFilenameGetData, GetMediaFileMediaFilenameGetError, GetMediaFileMediaFilenameGetErrors, GetMediaFileMediaFilenameGetResponses, GetUserProfileBffUserProfileGetData, GetUserProfileBffUserProfileGetResponse, GetUserProfileBffUserProfileGetResponses, HealthHealthGetData, HealthHealthGetResponse, HealthHealthGetResponses, HttpValidationError, JobListResponse, JobResponse, JobSummary, LearnableLanguageItem, LearnableLanguageRequest, LearnableLanguageResponse, ListArticlesBffArticlesGetData, ListArticlesBffArticlesGetError, ListArticlesBffArticlesGetErrors, ListArticlesBffArticlesGetResponse, ListArticlesBffArticlesGetResponses, 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, UpsertLearnableLanguageApiLearnableLanguagesPostData, UpsertLearnableLanguageApiLearnableLanguagesPostError, UpsertLearnableLanguageApiLearnableLanguagesPostErrors, UpsertLearnableLanguageApiLearnableLanguagesPostResponse, UpsertLearnableLanguageApiLearnableLanguagesPostResponses, UserProfileResponse, ValidationError } from './types.gen';
|
||||
|
|
|
|||
|
|
@ -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, 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';
|
||||
import type { AnalyzePosApiPosPostData, AnalyzePosApiPosPostErrors, AnalyzePosApiPosPostResponses, CreateGenerationJobApiGeneratePostData, CreateGenerationJobApiGeneratePostErrors, CreateGenerationJobApiGeneratePostResponses, GetArticleBffArticlesArticleIdGetData, GetArticleBffArticlesArticleIdGetErrors, GetArticleBffArticlesArticleIdGetResponses, GetJobApiJobsJobIdGetData, GetJobApiJobsJobIdGetErrors, GetJobApiJobsJobIdGetResponses, GetJobsApiJobsGetData, GetJobsApiJobsGetResponses, GetMediaFileMediaFilenameGetData, GetMediaFileMediaFilenameGetErrors, GetMediaFileMediaFilenameGetResponses, GetUserProfileBffUserProfileGetData, GetUserProfileBffUserProfileGetResponses, HealthHealthGetData, HealthHealthGetResponses, ListArticlesBffArticlesGetData, ListArticlesBffArticlesGetErrors, ListArticlesBffArticlesGetResponses, LoginAuthLoginPostData, LoginAuthLoginPostErrors, LoginAuthLoginPostResponses, RegenerateAudioApiJobsJobIdRegenerateAudioPostData, RegenerateAudioApiJobsJobIdRegenerateAudioPostErrors, RegenerateAudioApiJobsJobIdRegenerateAudioPostResponses, RegisterAuthRegisterPostData, RegisterAuthRegisterPostErrors, RegisterAuthRegisterPostResponses, TranslateTextApiTranslateGetData, TranslateTextApiTranslateGetErrors, TranslateTextApiTranslateGetResponses, UpsertLearnableLanguageApiLearnableLanguagesPostData, UpsertLearnableLanguageApiLearnableLanguagesPostErrors, UpsertLearnableLanguageApiLearnableLanguagesPostResponses } from './types.gen';
|
||||
|
||||
export type Options<TData extends TDataShape = TDataShape, ThrowOnError extends boolean = boolean> = Options2<TData, ThrowOnError> & {
|
||||
/**
|
||||
|
|
@ -81,9 +81,44 @@ export const regenerateAudioApiJobsJobIdRegenerateAudioPost = <ThrowOnError exte
|
|||
});
|
||||
|
||||
/**
|
||||
* Get Articles
|
||||
* Upsert Learnable Language
|
||||
*/
|
||||
export const getArticlesBffArticlesGet = <ThrowOnError extends boolean = false>(options?: Options<GetArticlesBffArticlesGetData, ThrowOnError>) => (options?.client ?? client).get<GetArticlesBffArticlesGetResponses, unknown, ThrowOnError>({ url: '/bff/articles', ...options });
|
||||
export const upsertLearnableLanguageApiLearnableLanguagesPost = <ThrowOnError extends boolean = false>(options: Options<UpsertLearnableLanguageApiLearnableLanguagesPostData, ThrowOnError>) => (options.client ?? client).post<UpsertLearnableLanguageApiLearnableLanguagesPostResponses, UpsertLearnableLanguageApiLearnableLanguagesPostErrors, ThrowOnError>({
|
||||
security: [{ scheme: 'bearer', type: 'http' }],
|
||||
url: '/api/learnable_languages',
|
||||
...options,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
...options.headers
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* List Articles
|
||||
*/
|
||||
export const listArticlesBffArticlesGet = <ThrowOnError extends boolean = false>(options?: Options<ListArticlesBffArticlesGetData, ThrowOnError>) => (options?.client ?? client).get<ListArticlesBffArticlesGetResponses, ListArticlesBffArticlesGetErrors, ThrowOnError>({
|
||||
security: [{ scheme: 'bearer', type: 'http' }],
|
||||
url: '/bff/articles',
|
||||
...options
|
||||
});
|
||||
|
||||
/**
|
||||
* Get Article
|
||||
*/
|
||||
export const getArticleBffArticlesArticleIdGet = <ThrowOnError extends boolean = false>(options: Options<GetArticleBffArticlesArticleIdGetData, ThrowOnError>) => (options.client ?? client).get<GetArticleBffArticlesArticleIdGetResponses, GetArticleBffArticlesArticleIdGetErrors, ThrowOnError>({
|
||||
security: [{ scheme: 'bearer', type: 'http' }],
|
||||
url: '/bff/articles/{article_id}',
|
||||
...options
|
||||
});
|
||||
|
||||
/**
|
||||
* Get User Profile
|
||||
*/
|
||||
export const getUserProfileBffUserProfileGet = <ThrowOnError extends boolean = false>(options?: Options<GetUserProfileBffUserProfileGetData, ThrowOnError>) => (options?.client ?? client).get<GetUserProfileBffUserProfileGetResponses, unknown, ThrowOnError>({
|
||||
security: [{ scheme: 'bearer', type: 'http' }],
|
||||
url: '/bff/user_profile',
|
||||
...options
|
||||
});
|
||||
|
||||
/**
|
||||
* Register
|
||||
|
|
|
|||
|
|
@ -5,31 +5,105 @@ export type ClientOptions = {
|
|||
};
|
||||
|
||||
/**
|
||||
* ArticleResponse
|
||||
* ArticleDetail
|
||||
*/
|
||||
export type ArticleResponse = {
|
||||
export type ArticleDetail = {
|
||||
/**
|
||||
* Id
|
||||
*/
|
||||
id: string;
|
||||
/**
|
||||
* Published At
|
||||
*/
|
||||
published_at: string;
|
||||
/**
|
||||
* Source Language
|
||||
*/
|
||||
source_language: string;
|
||||
/**
|
||||
* Source Title
|
||||
*/
|
||||
source_title: string;
|
||||
/**
|
||||
* Source Body
|
||||
*/
|
||||
source_body: string;
|
||||
/**
|
||||
* Target Language
|
||||
*/
|
||||
target_language: string;
|
||||
/**
|
||||
* Complexity Level
|
||||
* Target Complexities
|
||||
*/
|
||||
complexity_level: string;
|
||||
target_complexities: Array<string>;
|
||||
/**
|
||||
* Input Texts
|
||||
* Target Title
|
||||
*/
|
||||
input_texts: Array<string>;
|
||||
target_title: string;
|
||||
/**
|
||||
* Target Body
|
||||
*/
|
||||
target_body: string;
|
||||
/**
|
||||
* Target Audio Url
|
||||
*/
|
||||
target_audio_url: string | null;
|
||||
/**
|
||||
* Target Body Pos
|
||||
*/
|
||||
target_body_pos: {
|
||||
[key: string]: unknown;
|
||||
} | null;
|
||||
/**
|
||||
* Target Body Transcript
|
||||
*/
|
||||
target_body_transcript: {
|
||||
[key: string]: unknown;
|
||||
} | null;
|
||||
};
|
||||
|
||||
/**
|
||||
* ArticlesResponse
|
||||
* ArticleItem
|
||||
*/
|
||||
export type ArticlesResponse = {
|
||||
export type ArticleItem = {
|
||||
/**
|
||||
* Id
|
||||
*/
|
||||
id: string;
|
||||
/**
|
||||
* Published At
|
||||
*/
|
||||
published_at: string;
|
||||
/**
|
||||
* Source Language
|
||||
*/
|
||||
source_language: string;
|
||||
/**
|
||||
* Source Title
|
||||
*/
|
||||
source_title: string;
|
||||
/**
|
||||
* Target Language
|
||||
*/
|
||||
target_language: string;
|
||||
/**
|
||||
* Target Complexities
|
||||
*/
|
||||
target_complexities: Array<string>;
|
||||
/**
|
||||
* Target Title
|
||||
*/
|
||||
target_title: string;
|
||||
};
|
||||
|
||||
/**
|
||||
* ArticleListResponse
|
||||
*/
|
||||
export type ArticleListResponse = {
|
||||
/**
|
||||
* Articles
|
||||
*/
|
||||
articles: Array<ArticleResponse>;
|
||||
articles: Array<ArticleItem>;
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -186,6 +260,68 @@ export type JobSummary = {
|
|||
error_message?: string | null;
|
||||
};
|
||||
|
||||
/**
|
||||
* LearnableLanguageItem
|
||||
*/
|
||||
export type LearnableLanguageItem = {
|
||||
/**
|
||||
* Id
|
||||
*/
|
||||
id: string;
|
||||
/**
|
||||
* Source Language
|
||||
*/
|
||||
source_language: string;
|
||||
/**
|
||||
* Target Language
|
||||
*/
|
||||
target_language: string;
|
||||
/**
|
||||
* Proficiencies
|
||||
*/
|
||||
proficiencies: Array<string>;
|
||||
};
|
||||
|
||||
/**
|
||||
* LearnableLanguageRequest
|
||||
*/
|
||||
export type LearnableLanguageRequest = {
|
||||
/**
|
||||
* Source Language
|
||||
*/
|
||||
source_language: string;
|
||||
/**
|
||||
* Target Language
|
||||
*/
|
||||
target_language: string;
|
||||
/**
|
||||
* Proficiencies
|
||||
*/
|
||||
proficiencies: Array<string>;
|
||||
};
|
||||
|
||||
/**
|
||||
* LearnableLanguageResponse
|
||||
*/
|
||||
export type LearnableLanguageResponse = {
|
||||
/**
|
||||
* Id
|
||||
*/
|
||||
id: string;
|
||||
/**
|
||||
* Source Language
|
||||
*/
|
||||
source_language: string;
|
||||
/**
|
||||
* Target Language
|
||||
*/
|
||||
target_language: string;
|
||||
/**
|
||||
* Proficiencies
|
||||
*/
|
||||
proficiencies: Array<string>;
|
||||
};
|
||||
|
||||
/**
|
||||
* LoginRequest
|
||||
*/
|
||||
|
|
@ -304,6 +440,16 @@ export type TranslationResponse = {
|
|||
translated_text: string;
|
||||
};
|
||||
|
||||
/**
|
||||
* UserProfileResponse
|
||||
*/
|
||||
export type UserProfileResponse = {
|
||||
/**
|
||||
* Learnable Languages
|
||||
*/
|
||||
learnable_languages: Array<LearnableLanguageItem>;
|
||||
};
|
||||
|
||||
/**
|
||||
* ValidationError
|
||||
*/
|
||||
|
|
@ -500,21 +646,106 @@ export type RegenerateAudioApiJobsJobIdRegenerateAudioPostResponses = {
|
|||
|
||||
export type RegenerateAudioApiJobsJobIdRegenerateAudioPostResponse = RegenerateAudioApiJobsJobIdRegenerateAudioPostResponses[keyof RegenerateAudioApiJobsJobIdRegenerateAudioPostResponses];
|
||||
|
||||
export type GetArticlesBffArticlesGetData = {
|
||||
body?: never;
|
||||
export type UpsertLearnableLanguageApiLearnableLanguagesPostData = {
|
||||
body: LearnableLanguageRequest;
|
||||
path?: never;
|
||||
query?: never;
|
||||
url: '/bff/articles';
|
||||
url: '/api/learnable_languages';
|
||||
};
|
||||
|
||||
export type GetArticlesBffArticlesGetResponses = {
|
||||
export type UpsertLearnableLanguageApiLearnableLanguagesPostErrors = {
|
||||
/**
|
||||
* Validation Error
|
||||
*/
|
||||
422: HttpValidationError;
|
||||
};
|
||||
|
||||
export type UpsertLearnableLanguageApiLearnableLanguagesPostError = UpsertLearnableLanguageApiLearnableLanguagesPostErrors[keyof UpsertLearnableLanguageApiLearnableLanguagesPostErrors];
|
||||
|
||||
export type UpsertLearnableLanguageApiLearnableLanguagesPostResponses = {
|
||||
/**
|
||||
* Successful Response
|
||||
*/
|
||||
200: ArticlesResponse;
|
||||
200: LearnableLanguageResponse;
|
||||
};
|
||||
|
||||
export type GetArticlesBffArticlesGetResponse = GetArticlesBffArticlesGetResponses[keyof GetArticlesBffArticlesGetResponses];
|
||||
export type UpsertLearnableLanguageApiLearnableLanguagesPostResponse = UpsertLearnableLanguageApiLearnableLanguagesPostResponses[keyof UpsertLearnableLanguageApiLearnableLanguagesPostResponses];
|
||||
|
||||
export type ListArticlesBffArticlesGetData = {
|
||||
body?: never;
|
||||
path?: never;
|
||||
query?: {
|
||||
/**
|
||||
* Target Language
|
||||
*/
|
||||
target_language?: string;
|
||||
};
|
||||
url: '/bff/articles';
|
||||
};
|
||||
|
||||
export type ListArticlesBffArticlesGetErrors = {
|
||||
/**
|
||||
* Validation Error
|
||||
*/
|
||||
422: HttpValidationError;
|
||||
};
|
||||
|
||||
export type ListArticlesBffArticlesGetError = ListArticlesBffArticlesGetErrors[keyof ListArticlesBffArticlesGetErrors];
|
||||
|
||||
export type ListArticlesBffArticlesGetResponses = {
|
||||
/**
|
||||
* Successful Response
|
||||
*/
|
||||
200: ArticleListResponse;
|
||||
};
|
||||
|
||||
export type ListArticlesBffArticlesGetResponse = ListArticlesBffArticlesGetResponses[keyof ListArticlesBffArticlesGetResponses];
|
||||
|
||||
export type GetArticleBffArticlesArticleIdGetData = {
|
||||
body?: never;
|
||||
path: {
|
||||
/**
|
||||
* Article Id
|
||||
*/
|
||||
article_id: string;
|
||||
};
|
||||
query?: never;
|
||||
url: '/bff/articles/{article_id}';
|
||||
};
|
||||
|
||||
export type GetArticleBffArticlesArticleIdGetErrors = {
|
||||
/**
|
||||
* Validation Error
|
||||
*/
|
||||
422: HttpValidationError;
|
||||
};
|
||||
|
||||
export type GetArticleBffArticlesArticleIdGetError = GetArticleBffArticlesArticleIdGetErrors[keyof GetArticleBffArticlesArticleIdGetErrors];
|
||||
|
||||
export type GetArticleBffArticlesArticleIdGetResponses = {
|
||||
/**
|
||||
* Successful Response
|
||||
*/
|
||||
200: ArticleDetail;
|
||||
};
|
||||
|
||||
export type GetArticleBffArticlesArticleIdGetResponse = GetArticleBffArticlesArticleIdGetResponses[keyof GetArticleBffArticlesArticleIdGetResponses];
|
||||
|
||||
export type GetUserProfileBffUserProfileGetData = {
|
||||
body?: never;
|
||||
path?: never;
|
||||
query?: never;
|
||||
url: '/bff/user_profile';
|
||||
};
|
||||
|
||||
export type GetUserProfileBffUserProfileGetResponses = {
|
||||
/**
|
||||
* Successful Response
|
||||
*/
|
||||
200: UserProfileResponse;
|
||||
};
|
||||
|
||||
export type GetUserProfileBffUserProfileGetResponse = GetUserProfileBffUserProfileGetResponses[keyof GetUserProfileBffUserProfileGetResponses];
|
||||
|
||||
export type RegisterAuthRegisterPostData = {
|
||||
body: RegisterRequest;
|
||||
|
|
|
|||
140
frontend/src/lib/components/TopNav.svelte
Normal file
140
frontend/src/lib/components/TopNav.svelte
Normal file
|
|
@ -0,0 +1,140 @@
|
|||
<script lang="ts">
|
||||
import { page } from '$app/state';
|
||||
|
||||
const isActive = (prefix: string) => page.url.pathname.startsWith(prefix);
|
||||
</script>
|
||||
|
||||
<header class="topnav" role="banner">
|
||||
<div class="topnav-inner">
|
||||
<a href="/app" class="wordmark" aria-label="Home">
|
||||
<span class="wordmark-text">Language Learning App</span>
|
||||
</a>
|
||||
|
||||
<nav aria-label="Main navigation">
|
||||
<ul class="nav-links" role="list">
|
||||
<li>
|
||||
<a
|
||||
href="/app/articles"
|
||||
class="nav-link"
|
||||
class:is-active={isActive('/app/articles')}
|
||||
aria-current={isActive('/app/articles') ? 'page' : undefined}
|
||||
>
|
||||
Articles
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="/app/profile"
|
||||
class="nav-link"
|
||||
class:is-active={isActive('/app/profile')}
|
||||
aria-current={isActive('/app/profile') ? 'page' : undefined}
|
||||
>
|
||||
Profile
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
.topnav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background-color: var(--glass-bg);
|
||||
backdrop-filter: blur(var(--glass-blur));
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur));
|
||||
box-shadow: 0 1px 0 color-mix(in srgb, var(--color-outline-variant) 35%, transparent);
|
||||
}
|
||||
|
||||
.topnav-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-6);
|
||||
max-width: 82rem;
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--space-6);
|
||||
height: 3.25rem;
|
||||
}
|
||||
|
||||
/* --- Wordmark --- */
|
||||
|
||||
.wordmark {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
text-decoration: none;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mark {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.625rem;
|
||||
height: 1.625rem;
|
||||
border-radius: 50%;
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-on-primary);
|
||||
font-family: var(--font-display);
|
||||
font-size: 0.75rem;
|
||||
font-weight: var(--weight-bold);
|
||||
letter-spacing: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.wordmark-text {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-body-md);
|
||||
font-weight: var(--weight-semibold);
|
||||
color: var(--color-on-surface);
|
||||
letter-spacing: var(--tracking-wide);
|
||||
}
|
||||
|
||||
/* --- Nav links --- */
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: inline-block;
|
||||
padding: var(--space-1) var(--space-3);
|
||||
font-family: var(--font-label);
|
||||
font-size: var(--text-label-lg);
|
||||
font-weight: var(--weight-medium);
|
||||
letter-spacing: var(--tracking-wide);
|
||||
color: var(--color-on-surface-variant);
|
||||
text-decoration: none;
|
||||
border-radius: var(--radius-md);
|
||||
transition:
|
||||
color var(--duration-fast) var(--ease-standard),
|
||||
background-color var(--duration-fast) var(--ease-standard);
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: var(--color-on-surface);
|
||||
background-color: color-mix(in srgb, var(--color-on-surface) 5%, transparent);
|
||||
}
|
||||
|
||||
.nav-link.is-active {
|
||||
color: var(--color-primary);
|
||||
background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.topnav-inner {
|
||||
padding: 0 var(--space-4);
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.wordmark-text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
9
frontend/src/routes/app/+layout.svelte
Normal file
9
frontend/src/routes/app/+layout.svelte
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<script lang="ts">
|
||||
import TopNav from '$lib/components/TopNav.svelte';
|
||||
|
||||
const { children } = $props();
|
||||
</script>
|
||||
|
||||
<TopNav />
|
||||
|
||||
{@render children()}
|
||||
|
|
@ -1,6 +1,172 @@
|
|||
<h1>App</h1>
|
||||
<script lang="ts">
|
||||
const hour = new Date().getHours();
|
||||
const greeting = hour < 12 ? 'Good morning' : hour < 17 ? 'Good afternoon' : 'Good evening';
|
||||
</script>
|
||||
|
||||
<menu>
|
||||
<li><a href="/app/generate/summary">Generate Summary Job</a></li>
|
||||
<li><a href="/app/jobs">Jobs</a></li>
|
||||
</menu>
|
||||
<div class="page">
|
||||
<div class="hero">
|
||||
<p class="eyebrow label-md">Dashboard</p>
|
||||
<h1 class="hero-heading">{greeting}.</h1>
|
||||
<p class="hero-sub">What will you learn today?</p>
|
||||
</div>
|
||||
|
||||
<div class="card-grid">
|
||||
<a href="/app/articles" class="card card--primary">
|
||||
<div class="card-kicker label-md">Read</div>
|
||||
<h2 class="card-title">Articles</h2>
|
||||
<p class="card-body">Browse your reading library and practice with word-by-word translations.</p>
|
||||
<span class="card-cta" aria-hidden="true">Open library →</span>
|
||||
</a>
|
||||
|
||||
<a href="/app/generate/summary" class="card">
|
||||
<div class="card-kicker label-md">Create</div>
|
||||
<h2 class="card-title">New article</h2>
|
||||
<p class="card-body">Generate a new reading from any text in the language you're learning.</p>
|
||||
<span class="card-cta" aria-hidden="true">Get started →</span>
|
||||
</a>
|
||||
|
||||
<a href="/app/jobs" class="card">
|
||||
<div class="card-kicker label-md">History</div>
|
||||
<h2 class="card-title">Jobs</h2>
|
||||
<p class="card-body">Review the status of your generation jobs and access completed content.</p>
|
||||
<span class="card-cta" aria-hidden="true">View jobs →</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.page {
|
||||
max-width: 60rem;
|
||||
margin: 0 auto;
|
||||
padding: var(--space-12) var(--space-6) var(--space-8);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-10);
|
||||
}
|
||||
|
||||
/* --- Hero --- */
|
||||
|
||||
.hero {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
color: var(--color-on-surface-variant);
|
||||
}
|
||||
|
||||
.hero-heading {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-display-md);
|
||||
font-weight: var(--weight-bold);
|
||||
line-height: var(--leading-tight);
|
||||
letter-spacing: var(--tracking-tight);
|
||||
color: var(--color-on-surface);
|
||||
}
|
||||
|
||||
.hero-sub {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-body-lg);
|
||||
color: var(--color-on-surface-variant);
|
||||
margin-top: var(--space-1);
|
||||
}
|
||||
|
||||
/* --- Card grid --- */
|
||||
|
||||
.card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
/* --- Card --- */
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-6);
|
||||
background-color: var(--color-surface-container-low);
|
||||
border-radius: var(--radius-xl);
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: background-color var(--duration-fast) var(--ease-standard);
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
background-color: var(--color-surface-container);
|
||||
}
|
||||
|
||||
.card--primary {
|
||||
background-color: var(--color-primary-container);
|
||||
}
|
||||
|
||||
.card--primary:hover {
|
||||
background-color: color-mix(in srgb, var(--color-primary-container) 80%, var(--color-primary));
|
||||
}
|
||||
|
||||
.card-kicker {
|
||||
color: var(--color-on-surface-variant);
|
||||
margin-bottom: var(--space-1);
|
||||
}
|
||||
|
||||
.card--primary .card-kicker {
|
||||
color: var(--color-on-primary-container);
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-headline-md);
|
||||
font-weight: var(--weight-semibold);
|
||||
line-height: var(--leading-snug);
|
||||
color: var(--color-on-surface);
|
||||
}
|
||||
|
||||
.card--primary .card-title {
|
||||
color: var(--color-on-primary-container);
|
||||
}
|
||||
|
||||
.card-body {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-body-sm);
|
||||
color: var(--color-on-surface-variant);
|
||||
line-height: var(--leading-relaxed);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.card--primary .card-body {
|
||||
color: var(--color-on-primary-container);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.card-cta {
|
||||
font-family: var(--font-label);
|
||||
font-size: var(--text-label-lg);
|
||||
font-weight: var(--weight-medium);
|
||||
color: var(--color-primary);
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
|
||||
.card--primary .card-cta {
|
||||
color: var(--color-on-primary-container);
|
||||
}
|
||||
|
||||
/* --- Responsive --- */
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.page {
|
||||
padding: var(--space-8) var(--space-4) var(--space-6);
|
||||
gap: var(--space-8);
|
||||
}
|
||||
|
||||
.hero-heading {
|
||||
font-size: var(--text-headline-lg);
|
||||
}
|
||||
|
||||
.card-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
18
frontend/src/routes/app/articles/+page.server.ts
Normal file
18
frontend/src/routes/app/articles/+page.server.ts
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import type { PageServerLoad } from './$types';
|
||||
import { listArticlesBffArticlesGet } from '../../../client/sdk.gen.ts';
|
||||
|
||||
export const load: PageServerLoad = async ({ locals }) => {
|
||||
const { data, response } = await listArticlesBffArticlesGet({
|
||||
headers: { Authorization: `Bearer ${locals.authToken ?? ''}` }
|
||||
});
|
||||
|
||||
if (!data || response.status !== 200) {
|
||||
return { articles: [] };
|
||||
}
|
||||
|
||||
const articles = [...data.articles].sort(
|
||||
(a, b) => new Date(b.published_at).getTime() - new Date(a.published_at).getTime()
|
||||
);
|
||||
|
||||
return { articles };
|
||||
};
|
||||
175
frontend/src/routes/app/articles/+page.svelte
Normal file
175
frontend/src/routes/app/articles/+page.svelte
Normal file
|
|
@ -0,0 +1,175 @@
|
|||
<script lang="ts">
|
||||
import type { PageProps } from './$types';
|
||||
|
||||
const { data }: PageProps = $props();
|
||||
|
||||
const languageNames: Record<string, string> = {
|
||||
en: 'English',
|
||||
fr: 'French',
|
||||
es: 'Spanish',
|
||||
it: 'Italian',
|
||||
de: 'German',
|
||||
pt: 'Portuguese',
|
||||
ja: 'Japanese',
|
||||
zh: 'Chinese',
|
||||
ko: 'Korean'
|
||||
};
|
||||
|
||||
const lang = (code: string) => languageNames[code] ?? code.toUpperCase();
|
||||
|
||||
const fmt = (iso: string) =>
|
||||
new Intl.DateTimeFormat('en-GB', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
}).format(new Date(iso));
|
||||
</script>
|
||||
|
||||
<div class="page">
|
||||
<header class="page-header">
|
||||
<p class="form-eyebrow">Reading</p>
|
||||
<h1 class="form-title">Articles</h1>
|
||||
</header>
|
||||
|
||||
{#if data.articles.length > 0}
|
||||
<ul class="article-list" role="list">
|
||||
{#each data.articles as article}
|
||||
<li class="article-item">
|
||||
<a href="/app/articles/{article.id}" class="article-link">
|
||||
<div class="article-meta">
|
||||
<span class="label-md meta-lang">{lang(article.target_language)}</span>
|
||||
{#each article.target_complexities as level}
|
||||
<span class="complexity-tag label-md">{level}</span>
|
||||
{/each}
|
||||
</div>
|
||||
<h2 class="article-title">{article.target_title}</h2>
|
||||
<p class="article-source">{article.source_title}</p>
|
||||
<time class="article-date label-md" datetime={article.published_at}>{fmt(article.published_at)}</time>
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{:else}
|
||||
<div class="empty-state">
|
||||
<p class="empty-heading">No articles yet</p>
|
||||
<p class="empty-body">Generate content to see articles here.</p>
|
||||
</div>
|
||||
{/if}
|
||||
</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);
|
||||
}
|
||||
|
||||
/* --- Article list --- */
|
||||
|
||||
.article-list {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.article-item {
|
||||
background-color: var(--color-surface-container-low);
|
||||
border-radius: var(--radius-lg);
|
||||
transition: background-color var(--duration-fast) var(--ease-standard);
|
||||
}
|
||||
|
||||
.article-item:hover {
|
||||
background-color: var(--color-surface-container);
|
||||
}
|
||||
|
||||
.article-link {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-5) var(--space-6);
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* --- Article metadata --- */
|
||||
|
||||
.article-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.meta-lang {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.complexity-tag {
|
||||
color: var(--color-on-surface-variant);
|
||||
background-color: var(--color-surface-container-high);
|
||||
padding: 0.15em 0.5em;
|
||||
border-radius: var(--radius-full);
|
||||
}
|
||||
|
||||
/* --- Article content --- */
|
||||
|
||||
.article-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-headline-md);
|
||||
font-weight: var(--weight-semibold);
|
||||
line-height: var(--leading-snug);
|
||||
color: var(--color-on-surface);
|
||||
}
|
||||
|
||||
.article-source {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-body-sm);
|
||||
color: var(--color-on-surface-variant);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.article-date {
|
||||
color: var(--color-on-surface-variant);
|
||||
margin-top: var(--space-1);
|
||||
}
|
||||
|
||||
/* --- Empty state --- */
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-10) var(--space-6);
|
||||
text-align: center;
|
||||
background-color: var(--color-surface-container-low);
|
||||
border-radius: var(--radius-xl);
|
||||
}
|
||||
|
||||
.empty-heading {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-title-lg);
|
||||
font-weight: var(--weight-semibold);
|
||||
color: var(--color-on-surface);
|
||||
}
|
||||
|
||||
.empty-body {
|
||||
font-size: var(--text-body-md);
|
||||
color: var(--color-on-surface-variant);
|
||||
max-width: 20rem;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.page {
|
||||
padding: var(--space-6) var(--space-4);
|
||||
}
|
||||
|
||||
.article-link {
|
||||
padding: var(--space-4);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import { error } from '@sveltejs/kit';
|
||||
import type { PageServerLoad } from './$types';
|
||||
import { getArticleBffArticlesArticleIdGet } from '../../../../client/sdk.gen.ts';
|
||||
import { PUBLIC_API_BASE_URL } from '$env/static/public';
|
||||
|
||||
export const load: PageServerLoad = async ({ params, locals }) => {
|
||||
const { data, response } = await getArticleBffArticlesArticleIdGet({
|
||||
headers: { Authorization: `Bearer ${locals.authToken ?? ''}` },
|
||||
path: { article_id: params.article_id }
|
||||
});
|
||||
|
||||
if (!data || response.status !== 200) {
|
||||
error(response.status === 404 ? 404 : 500, 'Article not found');
|
||||
}
|
||||
|
||||
const audioUrl = data.target_audio_url
|
||||
? `${PUBLIC_API_BASE_URL}/media/${data.target_audio_url}`
|
||||
: null;
|
||||
|
||||
return { article: data, audioUrl };
|
||||
};
|
||||
578
frontend/src/routes/app/articles/[article_id]/+page.svelte
Normal file
578
frontend/src/routes/app/articles/[article_id]/+page.svelte
Normal file
|
|
@ -0,0 +1,578 @@
|
|||
<script lang="ts">
|
||||
import type { PageProps } from './$types';
|
||||
|
||||
const { data }: PageProps = $props();
|
||||
const { article, audioUrl } = data;
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// Body parsing: split into paragraphs → sentences → tokens
|
||||
// -------------------------------------------------------------------------
|
||||
|
||||
type WordToken = { type: 'word'; text: string; wordIdx: number };
|
||||
type OtherToken = { type: 'other'; text: string };
|
||||
type Token = WordToken | OtherToken;
|
||||
|
||||
type Sentence = {
|
||||
tokens: Token[];
|
||||
idx: number; // global sentence index
|
||||
startWordIdx: number;
|
||||
endWordIdx: number;
|
||||
};
|
||||
|
||||
type Paragraph = { sentences: Sentence[] };
|
||||
|
||||
function parseBody(text: string): { paragraphs: Paragraph[]; totalWords: number } {
|
||||
const paragraphs: Paragraph[] = [];
|
||||
let wordIdx = 0;
|
||||
let sentenceIdx = 0;
|
||||
|
||||
for (const paraText of text.split(/\n\n+/)) {
|
||||
if (!paraText.trim()) continue;
|
||||
|
||||
// Split into alternating word / non-word tokens
|
||||
const rawTokens = paraText.match(/[\p{L}\p{N}\u2019'''-]+|[^\p{L}\p{N}\u2019'''-]+/gu) ?? [];
|
||||
|
||||
const sentences: Sentence[] = [];
|
||||
let currentTokens: Token[] = [];
|
||||
let startWordIdx = wordIdx;
|
||||
let hasWord = false;
|
||||
|
||||
for (const raw of rawTokens) {
|
||||
if (/[\p{L}\p{N}]/u.test(raw)) {
|
||||
currentTokens.push({ type: 'word', text: raw, wordIdx: wordIdx++ });
|
||||
hasWord = true;
|
||||
} else {
|
||||
currentTokens.push({ type: 'other', text: raw });
|
||||
// Flush sentence on sentence-ending punctuation
|
||||
if (hasWord && /[.!?]/.test(raw)) {
|
||||
sentences.push({
|
||||
tokens: [...currentTokens],
|
||||
idx: sentenceIdx++,
|
||||
startWordIdx,
|
||||
endWordIdx: wordIdx - 1
|
||||
});
|
||||
currentTokens = [];
|
||||
startWordIdx = wordIdx;
|
||||
hasWord = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (currentTokens.length > 0) {
|
||||
sentences.push({
|
||||
tokens: currentTokens,
|
||||
idx: sentenceIdx++,
|
||||
startWordIdx,
|
||||
endWordIdx: wordIdx - 1
|
||||
});
|
||||
}
|
||||
|
||||
if (sentences.length > 0) {
|
||||
paragraphs.push({ sentences });
|
||||
}
|
||||
}
|
||||
|
||||
return { paragraphs, totalWords: wordIdx };
|
||||
}
|
||||
|
||||
const { paragraphs } = parseBody(article.target_body);
|
||||
|
||||
// Flat sentence list for O(n) audio-time lookup
|
||||
const allSentences: Array<{ idx: number; startWordIdx: number; endWordIdx: number }> = [];
|
||||
for (const para of paragraphs) {
|
||||
for (const s of para.sentences) {
|
||||
allSentences.push({ idx: s.idx, startWordIdx: s.startWordIdx, endWordIdx: s.endWordIdx });
|
||||
}
|
||||
}
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// Transcript: extract per-word timings from Deepgram response
|
||||
// -------------------------------------------------------------------------
|
||||
|
||||
type WordTiming = { start: number; end: number };
|
||||
|
||||
function extractWordTimings(transcript: Record<string, unknown> | null): WordTiming[] {
|
||||
if (!transcript) return [];
|
||||
try {
|
||||
const words = (transcript as any)?.results?.channels?.[0]?.alternatives?.[0]?.words;
|
||||
if (!Array.isArray(words)) return [];
|
||||
return words.map((w: any) => ({ start: Number(w.start), end: Number(w.end) }));
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
const wordTimings = extractWordTimings(article.target_body_transcript);
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// Reactive state
|
||||
// -------------------------------------------------------------------------
|
||||
|
||||
let audioEl: HTMLAudioElement | null = $state(null);
|
||||
let activeSentenceIdx = $state(-1);
|
||||
let selectedWord: WordToken | null = $state(null);
|
||||
let translatedText: string | null = $state(null);
|
||||
let translating = $state(false);
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// Audio: sentence highlighting
|
||||
// -------------------------------------------------------------------------
|
||||
|
||||
function handleTimeUpdate() {
|
||||
if (!audioEl || wordTimings.length === 0) return;
|
||||
const t = audioEl.currentTime;
|
||||
|
||||
// Find the word index at current playback time
|
||||
let wordIdx = -1;
|
||||
for (let i = 0; i < wordTimings.length; i++) {
|
||||
if (wordTimings[i].start <= t && t <= wordTimings[i].end) {
|
||||
wordIdx = i;
|
||||
break;
|
||||
}
|
||||
// Between words: use the most recently started word
|
||||
if (wordTimings[i].start > t) {
|
||||
wordIdx = i - 1;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (wordIdx < 0) return;
|
||||
|
||||
for (const s of allSentences) {
|
||||
if (s.startWordIdx <= wordIdx && wordIdx <= s.endWordIdx) {
|
||||
activeSentenceIdx = s.idx;
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// Word click: fetch translation
|
||||
// -------------------------------------------------------------------------
|
||||
|
||||
async function handleWordClick(token: WordToken) {
|
||||
selectedWord = token;
|
||||
translatedText = null;
|
||||
translating = true;
|
||||
|
||||
try {
|
||||
const params = new URLSearchParams({
|
||||
text: token.text,
|
||||
target_language: article.source_language
|
||||
});
|
||||
const res = await fetch(`/app/translate?${params}`);
|
||||
if (res.ok) {
|
||||
const body = await res.json();
|
||||
translatedText = body.translated_text ?? null;
|
||||
}
|
||||
} catch {
|
||||
translatedText = null;
|
||||
} finally {
|
||||
translating = false;
|
||||
}
|
||||
}
|
||||
|
||||
function closePanel() {
|
||||
selectedWord = null;
|
||||
translatedText = null;
|
||||
}
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// Display helpers
|
||||
// -------------------------------------------------------------------------
|
||||
|
||||
const languageNames: Record<string, string> = {
|
||||
en: 'English',
|
||||
fr: 'French',
|
||||
es: 'Spanish',
|
||||
it: 'Italian',
|
||||
de: 'German',
|
||||
pt: 'Portuguese',
|
||||
ja: 'Japanese',
|
||||
zh: 'Chinese',
|
||||
ko: 'Korean'
|
||||
};
|
||||
|
||||
const targetLang =
|
||||
languageNames[article.target_language] ?? article.target_language.toUpperCase();
|
||||
|
||||
const publishedDate = new Intl.DateTimeFormat('en-GB', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
}).format(new Date(article.published_at));
|
||||
</script>
|
||||
|
||||
<!-- Reading progress bar (CSS scroll-driven animation) -->
|
||||
<div class="progress-bar" aria-hidden="true"></div>
|
||||
|
||||
<div class="page">
|
||||
<nav class="breadcrumb">
|
||||
<a href="/app/articles" class="link">← Articles</a>
|
||||
</nav>
|
||||
|
||||
<header class="article-header">
|
||||
<p class="article-eyebrow label-md">{targetLang} · {publishedDate}</p>
|
||||
<h1 class="article-title">{article.target_title}</h1>
|
||||
</header>
|
||||
|
||||
<div class="article-layout">
|
||||
<!-- Main content: audio + body -->
|
||||
<div class="article-main">
|
||||
{#if audioUrl}
|
||||
<div class="audio-section">
|
||||
<audio
|
||||
bind:this={audioEl}
|
||||
src={audioUrl}
|
||||
controls
|
||||
ontimeupdate={handleTimeUpdate}
|
||||
class="audio-player"
|
||||
>
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="article-body" lang={article.target_language}>
|
||||
{#each paragraphs as para}
|
||||
<p class="paragraph">
|
||||
{#each para.sentences as sentence}<span
|
||||
class="sentence"
|
||||
class:sentence--active={activeSentenceIdx === sentence.idx}
|
||||
>{#each sentence.tokens as token}{#if token.type === 'word'}<button
|
||||
class="word"
|
||||
class:word--selected={selectedWord?.wordIdx === token.wordIdx}
|
||||
onclick={() => handleWordClick(token)}>{token.text}</button
|
||||
>{:else}{token.text}{/if}{/each}</span
|
||||
>{/each}
|
||||
</p>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Translation panel (desktop: sticky sidebar; mobile: bottom drawer) -->
|
||||
<aside
|
||||
class="translation-panel"
|
||||
class:is-open={selectedWord !== null}
|
||||
aria-label="Word translation"
|
||||
>
|
||||
{#if selectedWord}
|
||||
<div class="panel-header">
|
||||
<p class="panel-word">{selectedWord.text}</p>
|
||||
<button class="btn btn-ghost panel-close" onclick={closePanel} aria-label="Close panel">
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if translating}
|
||||
<div class="panel-loading">
|
||||
<div class="spinner" aria-hidden="true"></div>
|
||||
<span>Translating…</span>
|
||||
</div>
|
||||
{:else if translatedText}
|
||||
<p class="panel-translation">{translatedText}</p>
|
||||
<button class="btn btn-secondary panel-save" disabled aria-disabled="true">
|
||||
Add to flashcard
|
||||
</button>
|
||||
{:else}
|
||||
<p class="panel-error">Could not load translation.</p>
|
||||
{/if}
|
||||
{:else}
|
||||
<p class="panel-hint">Tap any word for a translation</p>
|
||||
{/if}
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile backdrop: closes the drawer when tapped outside -->
|
||||
<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
|
||||
<div
|
||||
class="drawer-backdrop"
|
||||
class:is-visible={selectedWord !== null}
|
||||
onclick={closePanel}
|
||||
aria-hidden="true"
|
||||
></div>
|
||||
|
||||
<style>
|
||||
/* --- Reading progress bar (CSS scroll-driven animation) --- */
|
||||
/* Sits at the bottom edge of the sticky topnav (3.25rem) */
|
||||
.progress-bar {
|
||||
position: fixed;
|
||||
top: 3.25rem;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: var(--color-primary);
|
||||
transform-origin: left;
|
||||
transform: scaleX(0);
|
||||
animation: reading-progress linear both;
|
||||
animation-timeline: scroll(root);
|
||||
z-index: 99;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes reading-progress {
|
||||
from {
|
||||
transform: scaleX(0);
|
||||
}
|
||||
to {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Page shell --- */
|
||||
.page {
|
||||
padding: var(--space-8) var(--space-6);
|
||||
max-width: 82rem;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
/* --- Breadcrumb --- */
|
||||
.breadcrumb {
|
||||
font-family: var(--font-label);
|
||||
font-size: var(--text-label-lg);
|
||||
}
|
||||
|
||||
/* --- Header --- */
|
||||
.article-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
padding-top: var(--space-2);
|
||||
}
|
||||
|
||||
.article-eyebrow {
|
||||
color: var(--color-on-surface-variant);
|
||||
}
|
||||
|
||||
.article-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-display-md);
|
||||
font-weight: var(--weight-bold);
|
||||
line-height: var(--leading-tight);
|
||||
letter-spacing: var(--tracking-tight);
|
||||
color: var(--color-on-surface);
|
||||
max-width: 38rem;
|
||||
}
|
||||
|
||||
/* --- Two-column layout --- */
|
||||
.article-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-6);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.article-layout {
|
||||
grid-template-columns: 1fr 22rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Audio --- */
|
||||
.audio-section {
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
|
||||
.audio-player {
|
||||
width: 100%;
|
||||
accent-color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* --- Article body --- */
|
||||
.article-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.paragraph {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-body-xl);
|
||||
line-height: 2;
|
||||
color: var(--color-on-surface);
|
||||
}
|
||||
|
||||
/* Sentence: highlighted when audio is at that point */
|
||||
.sentence {
|
||||
border-radius: var(--radius-xs);
|
||||
transition: background-color var(--duration-normal) var(--ease-standard);
|
||||
}
|
||||
|
||||
.sentence--active {
|
||||
background-color: var(--color-primary-container);
|
||||
}
|
||||
|
||||
/* --- Word buttons --- */
|
||||
.word {
|
||||
display: inline;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0 0.05em;
|
||||
margin: 0;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
border-radius: var(--radius-xs);
|
||||
transition:
|
||||
background-color var(--duration-fast) var(--ease-standard),
|
||||
color var(--duration-fast) var(--ease-standard);
|
||||
}
|
||||
|
||||
.word:hover {
|
||||
background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.word--selected {
|
||||
background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
|
||||
color: var(--color-primary);
|
||||
font-weight: var(--weight-medium);
|
||||
}
|
||||
|
||||
/* --- Translation panel: Desktop (sticky sidebar) --- */
|
||||
@media (min-width: 768px) {
|
||||
.translation-panel {
|
||||
position: sticky;
|
||||
top: var(--space-6);
|
||||
background-color: var(--color-surface-container-lowest);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-5);
|
||||
min-height: 16rem;
|
||||
box-shadow: var(--shadow-tonal-sm);
|
||||
}
|
||||
|
||||
.drawer-backdrop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Translation panel: Mobile (bottom drawer) --- */
|
||||
@media (max-width: 767px) {
|
||||
.translation-panel {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 300;
|
||||
background-color: var(--color-surface-container-lowest);
|
||||
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
|
||||
padding: var(--space-5) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom));
|
||||
max-height: 55vh;
|
||||
overflow-y: auto;
|
||||
transform: translateY(100%);
|
||||
transition: transform var(--duration-slow) var(--ease-standard);
|
||||
box-shadow: 0 -8px 32px color-mix(in srgb, var(--color-on-surface) 8%, transparent);
|
||||
}
|
||||
|
||||
.translation-panel.is-open {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.drawer-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 200;
|
||||
background: color-mix(in srgb, var(--color-on-surface) 20%, transparent);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity var(--duration-slow) var(--ease-standard);
|
||||
}
|
||||
|
||||
.drawer-backdrop.is-visible {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Panel internals --- */
|
||||
.panel-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-2);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.panel-word {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-headline-md);
|
||||
font-weight: var(--weight-semibold);
|
||||
line-height: var(--leading-snug);
|
||||
color: var(--color-on-surface);
|
||||
}
|
||||
|
||||
.panel-close {
|
||||
flex-shrink: 0;
|
||||
color: var(--color-on-surface-variant);
|
||||
font-size: var(--text-body-lg);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.panel-translation {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-body-lg);
|
||||
line-height: var(--leading-relaxed);
|
||||
color: var(--color-on-surface-variant);
|
||||
font-style: italic;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.panel-save {
|
||||
width: 100%;
|
||||
padding-block: var(--space-2);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.panel-hint {
|
||||
font-family: var(--font-label);
|
||||
font-size: var(--text-body-sm);
|
||||
color: var(--color-on-surface-variant);
|
||||
text-align: center;
|
||||
padding: var(--space-4) 0;
|
||||
}
|
||||
|
||||
.panel-error {
|
||||
font-family: var(--font-label);
|
||||
font-size: var(--text-body-sm);
|
||||
color: var(--color-on-surface-variant);
|
||||
}
|
||||
|
||||
.panel-loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
font-family: var(--font-label);
|
||||
font-size: var(--text-body-sm);
|
||||
color: var(--color-on-surface-variant);
|
||||
}
|
||||
|
||||
.spinner {
|
||||
flex-shrink: 0;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border: 2px solid var(--color-outline-variant);
|
||||
border-top-color: var(--color-primary);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.9s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Responsive --- */
|
||||
@media (max-width: 640px) {
|
||||
.page {
|
||||
padding: var(--space-6) var(--space-4);
|
||||
}
|
||||
|
||||
.article-title {
|
||||
font-size: var(--text-headline-lg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -119,7 +119,7 @@
|
|||
{#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>
|
||||
<div class="pos-text">{JSON.stringify(job.audio_transcript, null, 2)}</div>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
|
|
@ -136,7 +136,6 @@
|
|||
<div class="pos-text">{JSON.stringify(job.translated_text_pos, null, 2)}</div>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
|
@ -316,7 +315,6 @@
|
|||
overflow-y: scroll;
|
||||
max-height: 300px;
|
||||
white-space: pre-wrap;
|
||||
|
||||
}
|
||||
|
||||
/* --- Audio --- */
|
||||
|
|
|
|||
27
frontend/src/routes/app/profile/+page.svelte
Normal file
27
frontend/src/routes/app/profile/+page.svelte
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<div class="page">
|
||||
<header>
|
||||
<p class="form-eyebrow">Account</p>
|
||||
<h1 class="form-title">Profile</h1>
|
||||
</header>
|
||||
|
||||
<p class="coming-soon">Profile settings coming soon.</p>
|
||||
|
||||
<a href="/logout" class="btn btn-ghost">Sign out</a>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.page {
|
||||
max-width: 40rem;
|
||||
margin: 0 auto;
|
||||
padding: var(--space-8) var(--space-6);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.coming-soon {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-body-md);
|
||||
color: var(--color-on-surface-variant);
|
||||
}
|
||||
</style>
|
||||
20
frontend/src/routes/app/translate/+server.ts
Normal file
20
frontend/src/routes/app/translate/+server.ts
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import { json } from '@sveltejs/kit';
|
||||
import type { RequestHandler } from './$types';
|
||||
import { translateTextApiTranslateGet } from '../../../client/sdk.gen.ts';
|
||||
|
||||
export const GET: RequestHandler = async ({ url, locals }) => {
|
||||
const text = url.searchParams.get('text') ?? '';
|
||||
const targetLanguage = url.searchParams.get('target_language') ?? 'en';
|
||||
const context = url.searchParams.get('context') ?? undefined;
|
||||
|
||||
const { data, response } = await translateTextApiTranslateGet({
|
||||
headers: { Authorization: `Bearer ${locals.authToken ?? ''}` },
|
||||
query: { text, target_language: targetLanguage, context }
|
||||
});
|
||||
|
||||
if (!data || response.status !== 200) {
|
||||
return json({ error: 'Translation failed' }, { status: 500 });
|
||||
}
|
||||
|
||||
return json(data);
|
||||
};
|
||||
|
|
@ -31,7 +31,7 @@ export const actions = {
|
|||
expires: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000) // 7 days
|
||||
});
|
||||
|
||||
return redirect(307, '/');
|
||||
return { success: true };
|
||||
}
|
||||
|
||||
return { success: response.status === 200, error: response.status !== 200 ? data : null };
|
||||
|
|
|
|||
|
|
@ -1,5 +1,14 @@
|
|||
<script lang="ts">
|
||||
import type { PageProps } from './$types';
|
||||
import { onMount } from 'svelte';
|
||||
import type { PageData, PageProps } from './$types';
|
||||
import { goto } from '$app/navigation';
|
||||
const { form }: PageProps = $props();
|
||||
|
||||
onMount(() => {
|
||||
if (form?.success) {
|
||||
goto('/app');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="page">
|
||||
|
|
|
|||
Loading…
Reference in a new issue