feat: add German language support (de-DE) following new i18n system

Refactored the initial German language support to align with the newly
introduced i18n system.

Changes:
- Added de-DE.json with all translation keys.
- Registered de-DE in supportedLocales.
- Localized fallback strings in the generation pipeline.
- Updated UI components to dynamically use supportedLocales.
- Added Azure TTS German voices.
- Made prompts generic for multiple languages.

Closes #215

Author: harshana

app/api/generate/scene-content/route.ts

@@ -13,6 +13,7 @@ import {
   generateSceneContent,
   buildVisionUserContent,
 } from '@/lib/generation/generation-pipeline';
+import type { Locale } from '@/lib/i18n/types';
 import type { AgentInfo } from '@/lib/generation/generation-pipeline';
 import type { SceneOutline, PdfImage, ImageMapping } from '@/lib/types/generation';
 import { createLogger } from '@/lib/logger';
@@ -69,7 +70,7 @@ export async function POST(req: NextRequest) {
     // Ensure outline has language from stageInfo (fallback for older outlines)
     const outline: SceneOutline = {
       ...rawOutline,
-      language: rawOutline.language || (stageInfo?.language as 'zh-CN' | 'en-US') || 'zh-CN',
+      language: rawOutline.language || (stageInfo?.language as Locale) || 'zh-CN',
     };
 
     // ── Model resolution from request headers ──

app/page.tsx

@@ -32,6 +32,8 @@ import { useTheme } from '@/lib/hooks/use-theme';
 import { nanoid } from 'nanoid';
 import { storePdfBlob } from '@/lib/utils/image-storage';
 import type { UserRequirements } from '@/lib/types/generation';
+import type { Locale } from '@/lib/i18n/types';
+import { supportedLocales } from '@/lib/i18n/locales';
 import { useSettingsStore } from '@/lib/store/settings';
 import { useUserProfileStore, AVATAR_OPTIONS } from '@/lib/store/user-profile';
 import {
@@ -58,7 +60,7 @@ const RECENT_OPEN_STORAGE_KEY = 'recentClassroomsOpen';
 interface FormState {
   pdfFile: File | null;
   requirement: string;
-  language: 'zh-CN' | 'en-US';
+  language: Locale;
   webSearch: boolean;
 }
 
@@ -98,14 +100,21 @@ function HomePage() {
     }
     try {
       const savedWebSearch = localStorage.getItem(WEB_SEARCH_STORAGE_KEY);
-      const savedLanguage = localStorage.getItem(LANGUAGE_STORAGE_KEY);
+      const savedLanguage = localStorage.getItem(LANGUAGE_STORAGE_KEY) as Locale | null;
       const updates: Partial<FormState> = {};
       if (savedWebSearch === 'true') updates.webSearch = true;
-      if (savedLanguage === 'zh-CN' || savedLanguage === 'en-US') {
+
+      const isSupported = (lang: string | null): lang is Locale =>
+        !!lang && supportedLocales.some((l) => l.code === lang);
+
+      if (isSupported(savedLanguage)) {
         updates.language = savedLanguage;
       } else {
-        const detected = navigator.language?.startsWith('zh') ? 'zh-CN' : 'en-US';
-        updates.language = detected;
+        const browserLang = navigator.language;
+        const matched =
+          supportedLocales.find((l) => browserLang.startsWith(l.code.split('-')[0]))?.code ||
+          (browserLang.startsWith('zh') ? 'zh-CN' : 'en-US');
+        updates.language = matched as Locale;
       }
       if (Object.keys(updates).length > 0) {
         setForm((prev) => ({ ...prev, ...updates }));

components/generation/generation-toolbar.tsx

@@ -22,14 +22,17 @@ import type { ProviderId } from '@/lib/ai/providers';
 import type { SettingsSection } from '@/lib/types/settings';
 import { MediaPopover } from '@/components/generation/media-popover';
 
+import type { Locale } from '@/lib/i18n/types';
+import { supportedLocales } from '@/lib/i18n/locales';
+
 // ─── Constants ───────────────────────────────────────────────
 const MAX_PDF_SIZE_MB = 50;
 const MAX_PDF_SIZE_BYTES = MAX_PDF_SIZE_MB * 1024 * 1024;
 
 // ─── Types ───────────────────────────────────────────────────
 export interface GenerationToolbarProps {
-  language: 'zh-CN' | 'en-US';
-  onLanguageChange: (lang: 'zh-CN' | 'en-US') => void;
+  language: Locale;
+  onLanguageChange: (lang: Locale) => void;
   webSearch: boolean;
   onWebSearchChange: (v: boolean) => void;
   onSettingsOpen: (section?: SettingsSection) => void;
@@ -64,6 +67,15 @@ export function GenerationToolbar({
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [isDragging, setIsDragging] = useState(false);
 
+  // Cycle language among supported locales
+  const cycleLanguage = () => {
+    const currentIndex = supportedLocales.findIndex((l) => l.code === language);
+    const nextIndex = (currentIndex + 1) % supportedLocales.length;
+    onLanguageChange(supportedLocales[nextIndex].code);
+  };
+
+  const currentLocaleInfo = supportedLocales.find((l) => l.code === language) || supportedLocales[0];
+
   // Check if the selected web search provider has a valid config (API key or server-configured)
   const webSearchProvider = WEB_SEARCH_PROVIDERS[webSearchProviderId];
   const webSearchConfig = webSearchProvidersConfig[webSearchProviderId];
@@ -360,12 +372,9 @@ export function GenerationToolbar({
       {/* ── Language pill ── */}
       <Tooltip>
         <TooltipTrigger asChild>
-          <button
-            onClick={() => onLanguageChange(language === 'zh-CN' ? 'en-US' : 'zh-CN')}
-            className={pillMuted}
-          >
+          <button onClick={cycleLanguage} className={pillMuted}>
             <Globe className="size-3.5" />
-            <span>{language === 'zh-CN' ? '中文' : 'EN'}</span>
+            <span>{currentLocaleInfo.shortLabel}</span>
           </button>
         </TooltipTrigger>
         <TooltipContent>{t('toolbar.languageHint')}</TooltipContent>

lib/audio/constants.ts

@@ -204,6 +204,18 @@ export const TTS_PROVIDERS: Record<TTSProviderId, TTSProviderConfig> = {
         gender: 'female',
       },
       { id: 'en-US-GuyNeural', name: 'Guy', language: 'en-US', gender: 'male' },
+      {
+        id: 'de-DE-KatjaNeural',
+        name: 'Katja (女)',
+        language: 'de-DE',
+        gender: 'female',
+      },
+      {
+        id: 'de-DE-ConradNeural',
+        name: 'Conrad (男)',
+        language: 'de-DE',
+        gender: 'male',
+      },
     ],
     supportedFormats: ['mp3', 'wav', 'ogg'],
     speedRange: { min: 0.5, max: 2.0, default: 1.0 },

lib/audio/tts-providers.ts

@@ -212,11 +212,16 @@ async function generateAzureTTS(
 ): Promise<TTSGenerationResult> {
   const baseUrl = config.baseUrl || TTS_PROVIDERS['azure-tts'].defaultBaseUrl;
 
+  // Extract language from voice ID (e.g., "zh-CN-XiaoxiaoNeural" -> "zh-CN")
+  // Fallback to "zh-CN" if no match
+  const langMatch = config.voice.match(/^[a-z]{2}-[A-Z]{2}/);
+  const lang = langMatch ? langMatch[0] : 'zh-CN';
+
   // Build SSML
   const rate = config.speed ? `${((config.speed - 1) * 100).toFixed(0)}%` : '0%';
   const ssml = `
-    <speak version='1.0' xml:lang='zh-CN'>
-      <voice xml:lang='zh-CN' name='${config.voice}'>
+    <speak version='1.0' xml:lang='${lang}'>
+      <voice xml:lang='${lang}' name='${config.voice}'>
         <prosody rate='${rate}'>${escapeXml(text)}</prosody>
       </voice>
     </speak>

lib/generation/outline-generator.ts

@@ -39,8 +39,10 @@ export async function generateSceneOutlinesFromRequirements(
   },
 ): Promise<GenerationResult<SceneOutline[]>> {
   // Build available images description for the prompt
-  let availableImagesText =
-    requirements.language === 'zh-CN' ? '无可用图片' : 'No images available';
+  let availableImagesText = 'No images available';
+  if (requirements.language === 'zh-CN') availableImagesText = '无可用图片';
+  if (requirements.language === 'ja-JP') availableImagesText = '利用可能な画像はありません';
+  if (requirements.language === 'de-DE') availableImagesText = 'Keine Bilder verfügbar';
   let visionImages: Array<{ id: string; src: string }> | undefined;
 
   if (pdfImages && pdfImages.length > 0) {
@@ -103,12 +105,23 @@ export async function generateSceneOutlinesFromRequirements(
       ? pdfText.substring(0, MAX_PDF_CONTENT_CHARS)
       : requirements.language === 'zh-CN'
         ? '无'
-        : 'None',
+        : requirements.language === 'ja-JP'
+          ? 'なし'
+          : requirements.language === 'de-DE'
+            ? 'Keine'
+            : 'None',
     availableImages: availableImagesText,
     userProfile: userProfileText,
     mediaGenerationPolicy,
     researchContext:
-      options?.researchContext || (requirements.language === 'zh-CN' ? '无' : 'None'),
+      options?.researchContext ||
+      (requirements.language === 'zh-CN'
+        ? '无'
+        : requirements.language === 'ja-JP'
+          ? 'なし'
+          : requirements.language === 'de-DE'
+            ? 'Keine'
+            : 'None'),
     // Server-side generation populates this via options; client-side populates via formatTeacherPersonaForPrompt
     teacherContext: options?.teacherContext || '',
   });

lib/generation/prompt-formatters.ts

@@ -79,12 +79,16 @@ export function formatImageDescription(img: PdfImage, language: string): string
   let dimInfo = '';
   if (img.width && img.height) {
     const ratio = (img.width / img.height).toFixed(2);
-    dimInfo = ` | 尺寸: ${img.width}×${img.height} (宽高比${ratio})`;
+    if (language === 'zh-CN') dimInfo = ` | 尺寸: ${img.width}×${img.height} (宽高比${ratio})`;
+    else if (language === 'ja-JP') dimInfo = ` | サイズ: ${img.width}×${img.height} (アスペクト比${ratio})`;
+    else if (language === 'de-DE') dimInfo = ` | Größe: ${img.width}×${img.height} (Seitenverhältnis${ratio})`;
+    else dimInfo = ` | size: ${img.width}×${img.height} (ratio ${ratio})`;
   }
   const desc = img.description ? ` | ${img.description}` : '';
-  return language === 'zh-CN'
-    ? `- **${img.id}**: 来自PDF第${img.pageNumber}页${dimInfo}${desc}`
-    : `- **${img.id}**: from PDF page ${img.pageNumber}${dimInfo}${desc}`;
+  if (language === 'zh-CN') return `- **${img.id}**: 来自PDF第${img.pageNumber}页${dimInfo}${desc}`;
+  if (language === 'ja-JP') return `- **${img.id}**: PDFの${img.pageNumber}ページ目から${dimInfo}${desc}`;
+  if (language === 'de-DE') return `- **${img.id}**: von PDF-Seite ${img.pageNumber}${dimInfo}${desc}`;
+  return `- **${img.id}**: from PDF page ${img.pageNumber}${dimInfo}${desc}`;
 }
 
 /**
@@ -95,11 +99,15 @@ export function formatImagePlaceholder(img: PdfImage, language: string): string
   let dimInfo = '';
   if (img.width && img.height) {
     const ratio = (img.width / img.height).toFixed(2);
-    dimInfo = ` | 尺寸: ${img.width}×${img.height} (宽高比${ratio})`;
+    if (language === 'zh-CN') dimInfo = ` | 尺寸: ${img.width}×${img.height} (宽高比${ratio})`;
+    else if (language === 'ja-JP') dimInfo = ` | サイズ: ${img.width}×${img.height} (アスペクト比${ratio})`;
+    else if (language === 'de-DE') dimInfo = ` | Größe: ${img.width}×${img.height} (Seitenverhältnis${ratio})`;
+    else dimInfo = ` | size: ${img.width}×${img.height} (ratio ${ratio})`;
   }
-  return language === 'zh-CN'
-    ? `- **${img.id}**: PDF第${img.pageNumber}页的图片${dimInfo} [参见附图]`
-    : `- **${img.id}**: image from PDF page ${img.pageNumber}${dimInfo} [see attached]`;
+  if (language === 'zh-CN') return `- **${img.id}**: PDF第${img.pageNumber}页的图片${dimInfo} [参见附图]`;
+  if (language === 'ja-JP') return `- **${img.id}**: PDFの${img.pageNumber}ページ目の画像${dimInfo} [添付画像参照]`;
+  if (language === 'de-DE') return `- **${img.id}**: Bild von PDF-Seite ${img.pageNumber}${dimInfo} [siehe Anhang]`;
+  return `- **${img.id}**: image from PDF page ${img.pageNumber}${dimInfo} [see attached]`;
 }
 
 /**

lib/generation/prompts/templates/requirements-to-outlines/system.md

@@ -94,7 +94,7 @@ When a slide scene needs an image or video but no suitable PDF image exists, mar
 - **Image IDs**: use `"gen_img_1"`, `"gen_img_2"`, etc. — IDs are **globally unique across the entire course**, NOT reset per scene
 - **Video IDs**: use `"gen_vid_1"`, `"gen_vid_2"`, etc. — same global numbering rule
 - The prompt should describe the desired media clearly and specifically
-- **Language in images**: If the image contains text, labels, or annotations, the prompt MUST explicitly specify that all text in the image should be in the course language (e.g., "all labels in Chinese" for zh-CN courses, "all labels in English" for en-US courses). For purely visual images without text, language does not matter.
+- **Language in images**: If the image contains text, labels, or annotations, the prompt MUST explicitly specify that all text in the image should be in the course language (e.g., "all labels in German" for de-DE courses). For purely visual images without text, language does not matter.
 - Only request media generation when it genuinely enhances the content — not every slide needs an image or video
 - Video generation is slow (1-2 minutes each), so only request videos when motion genuinely enhances understanding
 - If a suitable PDF image exists, prefer using `suggestedImageIds` instead
@@ -280,7 +280,7 @@ You must output a JSON array where each element is a scene outline object:
   "projectDescription": "Brief description of what students will build/accomplish",
   "targetSkills": ["Skill 1", "Skill 2", "Skill 3"],
   "issueCount": 3,
-  "language": "zh-CN"
+  "language": "de-DE"
 }
 ```
 

lib/generation/prompts/templates/requirements-to-outlines/user.md

@@ -14,7 +14,7 @@ Please generate scene outlines based on the following course requirements.
 
 **Required language**: {{language}}
 
-(If language is zh-CN, all content must be in Chinese; if en-US, all content must be in English)
+(Strictly generate all content in the required language: zh-CN -> Chinese, en-US -> English, ja-JP -> Japanese, de-DE -> German, etc.)
 
 ---
 

lib/generation/scene-generator.ts

@@ -1035,13 +1035,27 @@ export async function generateSceneActions(
 /**
  * Generate default PBL Actions (fallback)
  */
-function generateDefaultPBLActions(_outline: SceneOutline): Action[] {
+function generateDefaultPBLActions(outline: SceneOutline): Action[] {
+  const lang = outline.language || 'zh-CN';
+  let title = 'PBL Project Intro';
+  let text = 'Let\'s start a Project-Based Learning activity. Choose your role, check the issue board, and collaborate to complete the project.';
+  if (lang === 'zh-CN') {
+    title = 'PBL 项目介绍';
+    text = '现在让我们开始一个项目式学习活动。请选择你的角色，查看任务看板，开始协作完成项目。';
+  } else if (lang === 'ja-JP') {
+    title = 'PBLプロジェクト紹介';
+    text = 'プロジェクトベース学習活動を開始しましょう。役割を選択し、課題ボードを確認して、協力してプロジェクトを完了させてください。';
+  } else if (lang === 'de-DE') {
+    title = 'PBL Projekt-Einführung';
+    text = 'Beginnen wir mit einer projektbasierten Lernaktivität. Wählen Sie Ihre Rolle, prüfen Sie das Aufgabenboard und arbeiten Sie zusammen, um das Projekt abzuschließen.';
+  }
+
   return [
     {
       id: `action_${nanoid(8)}`,
       type: 'speech',
-      title: 'PBL 项目介绍',
-      text: '现在让我们开始一个项目式学习活动。请选择你的角色，查看任务看板，开始协作完成项目。',
+      title,
+      text,
     },
   ];
 }
@@ -1143,26 +1157,39 @@ function processActions(actions: Action[], elements: PPTElement[], agents?: Agen
  */
 function generateDefaultSlideActions(outline: SceneOutline, elements: PPTElement[]): Action[] {
   const actions: Action[] = [];
+  const lang = outline.language || 'zh-CN';
 
   // Add spotlight for text elements
   const textElements = elements.filter((el) => el.type === 'text');
   if (textElements.length > 0) {
+    let spotlightTitle = 'Focus';
+    if (lang === 'zh-CN') spotlightTitle = '聚焦重点';
+    else if (lang === 'ja-JP') spotlightTitle = '重要ポイント';
+    else if (lang === 'de-DE') spotlightTitle = 'Fokus';
+
     actions.push({
       id: `action_${nanoid(8)}`,
       type: 'spotlight',
-      title: '聚焦重点',
+      title: spotlightTitle,
       elementId: textElements[0].id,
     });
   }
 
   // Add opening speech based on key points
+  let speechTitle = 'Scene Explanation';
+  if (lang === 'zh-CN') speechTitle = '场景讲解';
+  else if (lang === 'ja-JP') speechTitle = 'シーン解説';
+  else if (lang === 'de-DE') speechTitle = 'Szenenerklärung';
+
+  const separator = lang === 'zh-CN' || lang === 'ja-JP' ? '。' : '. ';
   const speechText = outline.keyPoints?.length
-    ? outline.keyPoints.join('。') + '。'
+    ? outline.keyPoints.join(separator) + (lang === 'zh-CN' || lang === 'ja-JP' ? '。' : '.')
     : outline.description || outline.title;
+
   actions.push({
     id: `action_${nanoid(8)}`,
     type: 'speech',
-    title: '场景讲解',
+    title: speechTitle,
     text: speechText,
   });
 
@@ -1172,27 +1199,55 @@ function generateDefaultSlideActions(outline: SceneOutline, elements: PPTElement
 /**
  * Generate default quiz Actions (fallback)
  */
-function generateDefaultQuizActions(_outline: SceneOutline): Action[] {
+function generateDefaultQuizActions(outline: SceneOutline): Action[] {
+  const lang = outline.language || 'zh-CN';
+  let title = 'Quiz Intro';
+  let text = 'Now let\'s take a short quiz to test what we\'ve learned.';
+  if (lang === 'zh-CN') {
+    title = '测验引导';
+    text = '现在让我们来做一个小测验，检验一下学习成果。';
+  } else if (lang === 'ja-JP') {
+    title = 'クイズ案内';
+    text = '学んだことをテストするために、短いクイズに答えましょう。';
+  } else if (lang === 'de-DE') {
+    title = 'Quiz-Einführung';
+    text = 'Machen wir nun ein kurzes Quiz, um das Gelernte zu testen.';
+  }
+
   return [
     {
       id: `action_${nanoid(8)}`,
       type: 'speech',
-      title: '测验引导',
-      text: '现在让我们来做一个小测验，检验一下学习成果。',
+      title,
+      text,
     },
   ];
 }
 
 /**
  * Generate default interactive Actions (fallback)
  */
-function generateDefaultInteractiveActions(_outline: SceneOutline): Action[] {
+function generateDefaultInteractiveActions(outline: SceneOutline): Action[] {
+  const lang = outline.language || 'zh-CN';
+  let title = 'Interactive Intro';
+  let text = 'Now let\'s explore this concept through interactive visualization. Try interacting with the elements on the page to see how they change.';
+  if (lang === 'zh-CN') {
+    title = '交互引导';
+    text = '现在让我们通过交互式可视化来探索这个概念。请尝试操作页面中的元素，观察变化。';
+  } else if (lang === 'ja-JP') {
+    title = 'インタラクティブ案内';
+    text = 'インタラクティブな視覚化を通じて、この概念を探求しましょう。ページ上の要素を操作して、どのように変化するか確認してください。';
+  } else if (lang === 'de-DE') {
+    title = 'Interaktive Einführung';
+    text = 'Erforschen wir nun dieses Konzept durch eine interaktive Visualisierung. Versuchen Sie, mit den Elementen auf der Seite zu interagieren, um zu sehen, wie sie sich verändern.';
+  }
+
   return [
     {
       id: `action_${nanoid(8)}`,
       type: 'speech',
-      title: '交互引导',
-      text: '现在让我们通过交互式可视化来探索这个概念。请尝试操作页面中的元素，观察变化。',
+      title,
+      text,
     },
   ];
 }