sepehr/office_translator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(translate): refonte du design de la page de traduction et du sélecteur de moteurs (Etapes 1-3)
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 2m12s
Details

Browse Source
This commit is contained in:
sepehr
2026-05-31 10:14:23 +02:00
parent 9532fef2cd
commit c1ea65f10f
17 changed files with 956 additions and 325 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
GUIDE_UTILISATION.md
View File

@@ -112,6 +112,7 @@ docker compose -f docker-compose.dev.yml down
docker compose down
```
> Pour supprimer aussi les volumes (données) : ajouter `--volumes`
---

66
frontend/src/app/dashboard/translate/LanguageSelector.tsx
View File

@@ -1,7 +1,7 @@
'use client';
import { useState, useRef, useEffect, useCallback } from 'react';
import { Loader2, AlertCircle, ChevronDown, Check } from 'lucide-react';
import { Loader2, AlertCircle, ChevronDown, Check, ArrowRightLeft } from 'lucide-react';
import { useI18n } from '@/lib/i18n';
import { cn } from '@/lib/utils';
import type { Language } from './types';
@@ -61,35 +61,33 @@ function Combobox({
const label = value === 'auto' ? autoLabel : allOptions.find(l => l.code === value)?.name ?? value;
return (
<div ref={ref} className="relative">
<div ref={ref} className="relative text-left">
<button
type="button"
onClick={() => setOpen(!open)}
className={cn(
'flex w-full items-center justify-between rounded-lg border px-3 py-2 text-sm transition-colors',
open
? 'border-primary ring-2 ring-primary/15 outline-none'
: 'border-border bg-background hover:border-muted-foreground/40'
'w-full py-2 px-3 bg-brand-muted/60 dark:bg-white/5 rounded-xl border text-[10px] font-bold uppercase tracking-wider text-brand-dark dark:text-white flex items-center justify-between hover:border-brand-accent/50 transition-all select-none cursor-pointer',
open ? 'border-brand-accent/50' : 'border-brand-accent/20 dark:border-white/10'
)}
>
<span className="truncate text-foreground">{label || placeholder}</span>
<ChevronDown className={cn('size-4 shrink-0 text-muted-foreground transition-transform ms-2', open && 'rotate-180')} />
<span className="truncate">{label || placeholder}</span>
<ChevronDown className={cn('size-3 shrink-0 text-brand-accent transition-transform ms-2', open && 'rotate-180')} />
</button>
{open && (
<div className="absolute top-full left-0 right-0 z-50 mt-1 overflow-hidden rounded-lg border border-border bg-popover shadow-md">
<div className="border-b border-border px-2 py-1.5">
<div className="absolute top-[102%] right-0 left-0 bg-white dark:bg-[#1a1a1a] border border-black/10 dark:border-white/10 rounded-xl shadow-2xl p-2 z-50 max-h-48 overflow-y-auto animate-fade-in">
<div className="border-b border-black/5 dark:border-white/5 px-2 py-1">
<input
ref={inputRef}
type="text"
value={query}
onChange={e => setQuery(e.target.value)}
placeholder="Search..."
className="w-full bg-transparent px-1 py-1 text-sm outline-none placeholder:text-muted-foreground"
className="w-full bg-transparent px-1 py-1 text-[10px] outline-none placeholder:text-brand-dark/30 dark:placeholder:text-white/30 text-brand-dark dark:text-white"
/>
</div>
<div className="max-h-[200px] overflow-y-auto p-1">
<div className="max-h-[160px] overflow-y-auto p-1 mt-1 space-y-0.5">
{filtered.length === 0 && (
<div className="px-3 py-3 text-center text-xs text-muted-foreground">No results</div>
<div className="px-3 py-3 text-center text-[9px] text-brand-dark/40 dark:text-white/40">No results</div>
)}
{filtered.map(lang => (
<button
@@ -97,14 +95,14 @@ function Combobox({
type="button"
onClick={() => { onChange(lang.code); setOpen(false); setQuery(''); }}
className={cn(
'flex w-full items-center gap-2 rounded-md px-3 py-1.5 text-sm transition-colors',
'flex w-full items-center justify-between rounded-lg px-2.5 py-1.5 text-[9px] font-bold uppercase tracking-wider transition-colors cursor-pointer',
value === lang.code
? 'bg-primary/10 text-primary font-medium'
: 'text-foreground hover:bg-muted'
? 'bg-brand-accent/10 text-brand-accent'
: 'text-brand-dark/70 dark:text-white/70 hover:bg-brand-muted dark:hover:bg-white/5'
)}
>
<span className="flex-1 text-start">{lang.name}</span>
{value === lang.code && <Check className="size-3.5 shrink-0" />}
<span className="truncate">{lang.name}</span>
{value === lang.code && <Check className="size-3 text-brand-accent shrink-0" />}
</button>
))}
</div>
@@ -142,51 +140,47 @@ export default function LanguageSelector({
const canSwap = sourceLang !== 'auto';
return (
<div className="space-y-3">
<div className="grid grid-cols-11 gap-2 items-center">
{/* Source */}
<div>
<label className="mb-1.5 block text-xs font-medium uppercase tracking-wider text-muted-foreground">
{t('dashboard.translate.language.source')}
</label>
<div className="col-span-5 relative text-left">
<span className="text-[8px] font-bold text-brand-dark/30 dark:text-white/30 uppercase tracking-widest block mb-1">Source</span>
<Combobox
value={sourceLang}
options={languages}
includeAuto
autoLabel={t('dashboard.translate.language.autoDetect')}
placeholder={t('dashboard.translate.language.selectPlaceholder')}
autoLabel={t('dashboard.translate.language.autoDetect') || 'Auto-détecté'}
placeholder={t('dashboard.translate.language.selectPlaceholder') || 'Langue...'}
onChange={onSourceChange}
/>
</div>
{/* Swap */}
<div className="flex justify-center -my-0.5">
{/* Swap Button */}
<div className="col-span-1 flex justify-center pt-3 text-brand-dark/30 dark:text-white/30">
<button
type="button"
onClick={() => canSwap && (() => { const s = sourceLang; onSourceChange(targetLang); onTargetChange(s); })()}
disabled={!canSwap}
className={cn(
'flex size-8 items-center justify-center rounded-full border shadow-sm transition-colors',
'flex size-7 items-center justify-center rounded-xl transition-all cursor-pointer',
canSwap
? 'border-border bg-background text-muted-foreground hover:border-primary hover:text-primary'
: 'cursor-not-allowed border-border/50 bg-muted text-muted-foreground/40'
? 'text-brand-dark/50 dark:text-white/50 hover:text-brand-accent hover:bg-brand-muted/50 dark:hover:bg-white/5'
: 'cursor-not-allowed opacity-30'
)}
title="Inverser"
>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
<ArrowRightLeft size={12} />
</button>
</div>
{/* Target */}
<div>
<label className="mb-1.5 block text-xs font-medium uppercase tracking-wider text-muted-foreground">
{t('dashboard.translate.language.target')}
</label>
<div className="col-span-5 relative text-left">
<span className="text-[8px] font-bold text-brand-dark/30 dark:text-white/30 uppercase tracking-widest block mb-1">Cible</span>
<Combobox
value={targetLang}
options={languages}
includeAuto={false}
autoLabel=""
placeholder={t('dashboard.translate.language.selectPlaceholder')}
placeholder={t('dashboard.translate.language.selectPlaceholder') || 'Langue...'}
onChange={onTargetChange}
/>
</div>

342
frontend/src/app/dashboard/translate/ProviderSelector.tsx
View File

@@ -1,5 +1,6 @@
'use client';
import { useState, useEffect } from 'react';
import { Loader2, CheckCircle2, Lock, Sparkles } from 'lucide-react';
import { cn } from '@/lib/utils';
import { useI18n } from '@/lib/i18n';
@@ -13,6 +14,82 @@ interface ProviderSelectorProps {
isPro: boolean;
}
interface CardTheme {
badge: string;
subBadge: string;
accentClass: string;
glowClass: string;
descriptionOverride: string;
}
const LLM_THEMES: Record<string, CardTheme> = {
deepseek: {
badge: 'Essentielle',
subBadge: 'Technique & Éco',
accentClass: 'border-cyan-500/30 text-cyan-600 dark:text-cyan-400 bg-cyan-500/5',
glowClass: 'from-cyan-500/10 dark:from-cyan-500/5 to-transparent',
descriptionOverride: 'Traduction ultra-précise et économique, idéale pour les documents techniques et le code.'
},
openai: {
badge: 'Premium',
subBadge: 'Haute Fidélité',
accentClass: 'border-emerald-500/30 text-emerald-600 dark:text-emerald-400 bg-emerald-500/5',
glowClass: 'from-emerald-500/10 dark:from-emerald-500/5 to-transparent',
descriptionOverride: 'Le standard mondial de l\'IA. Cohérence textuelle maximale et respect strict du style.'
},
minimax: {
badge: 'Avancée',
subBadge: 'Performance',
accentClass: 'border-indigo-500/30 text-indigo-600 dark:text-indigo-400 bg-indigo-500/5',
glowClass: 'from-indigo-500/10 dark:from-indigo-500/5 to-transparent',
descriptionOverride: 'Vitesse d\'exécution incroyable et excellente compréhension des structures complexes.'
},
openrouter: {
badge: 'Express',
subBadge: 'Multi-Modèles',
accentClass: 'border-purple-500/30 text-purple-600 dark:text-purple-400 bg-purple-500/5',
glowClass: 'from-purple-500/10 dark:from-purple-500/5 to-transparent',
descriptionOverride: 'Accès unifié aux meilleurs modèles open-source optimisés pour la traduction.'
},
openrouter_premium: {
badge: 'Ultra',
subBadge: 'Maximum Context',
accentClass: 'border-rose-500/30 text-rose-600 dark:text-rose-400 bg-rose-500/5',
glowClass: 'from-rose-500/10 dark:from-rose-500/5 to-transparent',
descriptionOverride: 'Traduction assistée par les modèles de pointe (GPT-4o, Claude 3.5 Sonnet) pour documents longs.'
},
zai: {
badge: 'Spécialisée',
subBadge: 'Finance & Droit',
accentClass: 'border-amber-500/30 text-amber-600 dark:text-amber-400 bg-amber-500/5',
glowClass: 'from-amber-500/10 dark:from-amber-500/5 to-transparent',
descriptionOverride: 'Modèle affiné pour les terminologies métiers exigeantes (juridique, finance).'
}
};
const DEFAULT_LLM_THEME: CardTheme = {
badge: 'Moderne',
subBadge: 'Raisonnement IA',
accentClass: 'border-brand-accent/30 text-brand-accent bg-brand-accent/5',
glowClass: 'from-brand-accent/10 to-transparent',
descriptionOverride: 'Traduction par grand modèle linguistique (LLM) avec analyse sémantique avancée.'
};
const CLASSIC_THEMES: Record<string, { labelOverride?: string; descriptionOverride?: string }> = {
google: {
labelOverride: 'Google Traduction',
descriptionOverride: 'Traduction ultra-rapide couvrant plus de 130 langues. Recommandé pour les flux généraux.'
},
deepl: {
labelOverride: 'DeepL Pro',
descriptionOverride: 'Traduction haute précision réputée pour sa fluidité et ses formulations naturelles.'
},
google_cloud: {
labelOverride: 'Google Cloud API',
descriptionOverride: 'Moteur cloud professionnel optimisé pour le traitement de gros volumes de documents.'
}
};
export function ProviderSelector({
provider,
onProviderChange,
@@ -21,29 +98,91 @@ export function ProviderSelector({
isPro,
}: ProviderSelectorProps) {
const { t } = useI18n();
const [activeTab, setActiveTab] = useState<'classic' | 'llm'>('classic');
// Filter providers
const classicProviders = availableProviders.filter((p) => p.mode === 'classic');
const llmProviders = availableProviders.filter((p) => p.mode === 'llm');
// Initialize and synchronize activeTab based on current provider
useEffect(() => {
if (provider) {
const selected = availableProviders.find((p) => p.id === provider);
if (selected) {
setActiveTab(selected.mode);
}
}
}, [provider, availableProviders]);
if (isLoadingProviders) {
return (
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<Loader2 className="size-4 animate-spin" />
<span>{t('dashboard.translate.provider.loading')}</span>
<div className="flex items-center gap-2 text-sm text-brand-dark/50 dark:text-white/40 py-4">
<Loader2 className="size-4 animate-spin text-brand-accent" />
<span>{t('dashboard.translate.provider.loading') || 'Chargement des moteurs...'}</span>
</div>
);
}
if (availableProviders.length === 0) {
return (
<p className="rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-700 dark:border-amber-800/50 dark:bg-amber-950/30 dark:text-amber-400">
{t('dashboard.translate.provider.noneConfigured')}
<p className="rounded-xl border border-amber-200 bg-amber-50/50 px-4 py-3 text-xs text-amber-700 dark:border-amber-900/30 dark:bg-amber-950/20 dark:text-amber-400 font-light">
{t('dashboard.translate.provider.noneConfigured') || 'Aucun fournisseur configuré'}
</p>
);
}
const classicProviders = availableProviders.filter((p) => p.mode === 'classic');
const llmProviders = availableProviders.filter((p) => p.mode === 'llm');
const renderCard = (p: AvailableProvider, locked: boolean) => {
const renderClassicCard = (p: AvailableProvider) => {
const isSelected = provider === p.id;
const meta = CLASSIC_THEMES[p.id];
const label = meta?.labelOverride || p.label;
const description = meta?.descriptionOverride || p.description;
return (
<button
key={p.id}
type="button"
onClick={() => onProviderChange(p.id)}
className={cn(
'relative overflow-hidden w-full text-start rounded-2xl border p-4 transition-all duration-300 active:scale-[0.99] flex items-start gap-3.5',
isSelected
? 'border-brand-accent bg-brand-muted/20 dark:bg-zinc-800/40 ring-1 ring-brand-accent/20'
: 'border-brand-dark/10 dark:border-white/10 bg-white dark:bg-[#141414] hover:border-brand-accent/30 dark:hover:border-brand-accent/30 hover:scale-[1.005]'
)}
>
{/* Radio Indicator */}
<div className={cn(
'mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full border transition-colors',
isSelected ? 'border-brand-accent bg-brand-accent' : 'border-brand-dark/20 dark:border-white/20'
)}>
{isSelected && <div className="size-1.5 rounded-full bg-white" />}
</div>
{/* Content */}
<div className="flex-1 min-w-0 flex flex-col gap-0.5">
<span className={cn(
'text-xs font-semibold leading-tight tracking-tight',
isSelected ? 'text-brand-dark dark:text-white' : 'text-brand-dark/80 dark:text-white/80'
)}>
{label}
</span>
<span className="text-[11px] text-brand-dark/50 dark:text-white/50 leading-relaxed font-light">
{description}
</span>
</div>
{/* Selected badge */}
{isSelected && (
<CheckCircle2 className="size-4 shrink-0 text-brand-accent" />
)}
</button>
);
};
const renderLlmCard = (p: AvailableProvider, locked: boolean) => {
const isSelected = provider === p.id;
const theme = LLM_THEMES[p.id] || DEFAULT_LLM_THEME;
const description = theme.descriptionOverride || p.description;
return (
<button
key={p.id}
@@ -51,88 +190,151 @@ export function ProviderSelector({
disabled={locked}
onClick={() => !locked && onProviderChange(p.id)}
className={cn(
'flex w-full items-center gap-3 rounded-xl border px-4 py-3 text-start transition-all duration-150',
'group relative overflow-hidden w-full text-start rounded-2xl border p-4 transition-all duration-300 flex flex-col gap-2.5',
isSelected
? 'border-primary bg-primary/8 ring-1 ring-primary/30'
? 'border-brand-accent bg-gradient-to-br from-brand-muted/30 via-white to-brand-accent/[0.03] dark:via-[#141414] dark:to-brand-accent/[0.05] ring-1 ring-brand-accent/20 scale-[1.01]'
: locked
? 'cursor-not-allowed border-border/40 bg-muted/20 opacity-60'
: 'border-border/60 bg-background hover:border-primary/40 hover:bg-muted/30 active:scale-[0.99]'
? 'cursor-not-allowed border-brand-dark/5 dark:border-white/5 bg-brand-dark/[0.01] dark:bg-white/[0.01] opacity-50'
: 'border-brand-dark/10 dark:border-white/10 bg-white dark:bg-[#141414] hover:border-brand-accent/30 dark:hover:border-brand-accent/30 hover:scale-[1.005]'
)}
>
{/* Selection indicator */}
{/* Glow effect when selected or hovered */}
<div className={cn(
'flex size-5 shrink-0 items-center justify-center rounded-full border-2 transition-colors',
isSelected ? 'border-primary bg-primary' : 'border-border/60'
)}>
{isSelected && <div className="size-2 rounded-full bg-primary-foreground" />}
</div>
'absolute inset-0 bg-gradient-to-r opacity-0 transition-opacity duration-300 pointer-events-none',
theme.glowClass,
isSelected ? 'opacity-100' : 'group-hover:opacity-40'
)} />
{/* Label + description */}
<div className="flex flex-1 flex-col gap-0.5 min-w-0">
{/* Top line with label and category badge */}
<div className="relative flex items-center justify-between gap-2 z-10">
<span className={cn(
'text-sm font-medium leading-tight',
isSelected ? 'text-primary' : locked ? 'text-muted-foreground' : 'text-foreground'
'text-xs font-semibold tracking-tight',
isSelected ? 'text-brand-dark dark:text-white' : locked ? 'text-brand-dark/40 dark:text-white/40' : 'text-brand-dark/80 dark:text-white/80'
)}>
{p.label}
</span>
<span className="text-xs text-muted-foreground leading-snug">
{p.description}
<span className={cn(
'text-[9px] font-bold uppercase tracking-wider px-2 py-0.5 rounded-full border',
theme.accentClass
)}>
{theme.badge}
</span>
{p.mode === 'llm' && p.model && (
<span className="mt-0.5 text-[10px] font-mono text-muted-foreground/70">
{t('dashboard.translate.provider.modelTitle')} {p.model}
</div>
{/* Middle description */}
<div className="relative z-10 flex flex-col gap-1">
<span className="text-[9px] font-bold tracking-widest text-brand-dark/40 dark:text-white/30 uppercase">
{theme.subBadge}
</span>
<p className="text-[11px] text-brand-dark/65 dark:text-white/60 leading-relaxed font-light">
{description}
</p>
</div>
{/* Bottom meta & status */}
<div className="relative z-10 flex items-center justify-between mt-1 pt-2 border-t border-brand-dark/5 dark:border-white/5">
<span className="text-[9px] font-mono text-brand-dark/40 dark:text-white/40 tracking-tight">
{p.model || 'model-default'}
</span>
{locked ? (
<span className="flex items-center gap-1 text-[9px] font-bold text-brand-dark/45 dark:text-white/45 uppercase tracking-widest">
<Lock className="size-3 text-brand-dark/40 dark:text-white/40" /> PRO
</span>
) : isSelected ? (
<span className="flex items-center gap-1 text-[9px] font-bold text-brand-accent uppercase tracking-widest">
<CheckCircle2 className="size-3 text-brand-accent" /> ACTIF
</span>
) : (
<span className="text-[9px] text-brand-dark/35 dark:text-white/35 uppercase tracking-widest group-hover:text-brand-accent transition-colors font-medium">
Sélectionner
</span>
)}
</div>
{/* Right badge */}
{locked ? (
<Lock className="size-4 shrink-0 text-muted-foreground/50" />
) : isSelected ? (
<CheckCircle2 className="size-5 shrink-0 text-primary" />
) : null}
</button>
);
};
return (
<div className="flex flex-col gap-3">
<p className="text-sm font-medium text-foreground">
{t('dashboard.translate.provider.sectionTitle')}
</p>
<div className="flex flex-col gap-4">
{/* Title */}
<div className="flex items-center justify-between">
<label className="text-[10px] font-bold uppercase tracking-[0.2em] text-brand-dark/40 dark:text-white/45">
{t('dashboard.translate.provider.sectionTitle') || 'Moteur de Traduction'}
</label>
</div>
{/* Classic providers */}
{classicProviders.length > 0 && (
<div className="flex flex-col gap-2">
{classicProviders.map((p) => renderCard(p, false))}
</div>
)}
{/* LLM providers — Pro only */}
{llmProviders.length > 0 && (
<div className="flex flex-col gap-2">
<div className="flex items-center gap-2">
<div className="h-px flex-1 bg-border/50" />
<span className="flex items-center gap-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
<Sparkles className="size-3" />
{t('dashboard.translate.provider.llmDivider')}
{!isPro && (
<span className="ms-1 rounded bg-primary/10 px-1 py-0.5 text-primary">
{t('dashboard.translate.provider.llmDividerPro')}
</span>
)}
</span>
<div className="h-px flex-1 bg-border/50" />
</div>
{llmProviders.map((p) => renderCard(p, !isPro))}
{!isPro && (
<p className="text-xs text-muted-foreground text-center">
<a href="/pricing" className="text-primary hover:underline font-medium">
{t('dashboard.translate.provider.upgrade')}
</a>{' '}
{t('dashboard.translate.provider.upgradeSuffix')}
</p>
{/* Tabs Container */}
<div className="grid grid-cols-2 p-1 bg-brand-muted/70 dark:bg-zinc-800/40 rounded-xl border border-brand-dark/5 dark:border-white/5">
<button
type="button"
onClick={() => setActiveTab('classic')}
className={cn(
'py-2 text-xs font-semibold rounded-lg transition-all duration-200',
activeTab === 'classic'
? 'bg-white dark:bg-zinc-900 text-brand-dark dark:text-white shadow-sm'
: 'text-brand-dark/50 dark:text-white/40 hover:text-brand-dark dark:hover:text-white'
)}
>
{t('dashboard.translate.provider.tabStandard') || 'Standard'}
</button>
<button
type="button"
onClick={() => setActiveTab('llm')}
className={cn(
'py-2 text-xs font-semibold rounded-lg transition-all duration-200 flex items-center justify-center gap-1.5',
activeTab === 'llm'
? 'bg-white dark:bg-zinc-900 text-brand-dark dark:text-white shadow-sm'
: 'text-brand-dark/50 dark:text-white/40 hover:text-brand-dark dark:hover:text-white'
)}
>
<Sparkles className={cn("size-3", activeTab === 'llm' ? 'text-brand-accent' : 'text-brand-dark/35 dark:text-white/30')} />
{t('dashboard.translate.provider.tabLLM') || 'Multi-Modèles IA'}
{!isPro && <Lock className="size-2.5 opacity-60 ml-0.5" />}
</button>
</div>
{/* Active Tab List */}
<div className="space-y-3">
{activeTab === 'classic' ? (
classicProviders.length > 0 ? (
<div className="grid grid-cols-1 gap-2.5">
{classicProviders.map((p) => renderClassicCard(p))}
</div>
) : (
<p className="text-xs text-brand-dark/40 dark:text-white/30 text-center py-6 border border-dashed border-brand-dark/10 dark:border-white/10 rounded-2xl font-light">
Aucun traducteur standard disponible.
</p>
)
) : (
llmProviders.length > 0 ? (
<div className="grid grid-cols-1 gap-3">
{llmProviders.map((p) => renderLlmCard(p, !isPro))}
</div>
) : (
<p className="text-xs text-brand-dark/40 dark:text-white/30 text-center py-6 border border-dashed border-brand-dark/10 dark:border-white/10 rounded-2xl font-light">
Aucun modèle IA configuré.
</p>
)
)}
</div>
{/* Pro upgrade banner when llm is active and user is not pro */}
{!isPro && activeTab === 'llm' && (
<div className="p-4 rounded-2xl border border-brand-accent/20 bg-brand-accent/[0.02] dark:bg-brand-accent/[0.01] text-center flex flex-col items-center gap-2">
<Sparkles className="size-4 text-brand-accent animate-pulse" />
<span className="text-xs font-semibold text-brand-dark dark:text-white">
{t('dashboard.translate.provider.llmDivider') || 'Intelligence Artificielle Active'}
</span>
<p className="text-[10.5px] text-brand-dark/50 dark:text-white/50 leading-relaxed max-w-[280px] font-light">
Débloquez la traduction contextuelle haut de gamme pour des documents entiers tout en préservant le ton exact.
</p>
<a
href="/pricing"
className="mt-1 w-full inline-flex items-center justify-center py-2 px-3 rounded-xl bg-brand-dark dark:bg-white text-white dark:text-brand-dark text-xs font-medium hover:opacity-95 active:scale-[0.98] transition-all shadow-sm"
>
{t('dashboard.translate.provider.upgrade') || 'Passer Pro'}
</a>
</div>
)}
</div>

418
frontend/src/app/dashboard/translate/page.tsx
View File

@@ -7,6 +7,7 @@ import {
Zap, CheckCircle2,
Search, Languages, Wrench, Activity, Timer,
Download, AlertTriangle, FileType,
Image as ImageIcon,
} from 'lucide-react';
import { useFileUpload } from './useFileUpload';
import { useTranslationConfig } from './useTranslationConfig';
@@ -14,6 +15,7 @@ import { useTranslationSubmit } from './useTranslationSubmit';
import LanguageSelector from './LanguageSelector';
import { ProviderSelector } from './ProviderSelector';
import { GlossarySelector } from './GlossarySelector';
import { Switch } from '@/components/ui/switch';
import { useNotification } from '@/components/ui/notification';
import { useI18n } from '@/lib/i18n';
import { API_BASE } from '@/lib/config';
@@ -181,86 +183,96 @@ export default function TranslatePage() {
const activeStepIdx = getActiveStepIdx(submit.progress);
const qualityLabel = useMemo(() => getQualityLabel(t, config.provider), [t, config.provider]);
/* ═══════════════════════════════════════════════════════════════ */
/* EDITORIAL LAYOUT */
/* ═══════════════════════════════════════════════════════════════ */
return (
<div className="min-h-full p-6 lg:p-8 dark:bg-[#0a0a0a]">
<div className="min-h-full p-6 lg:p-8 dark:bg-[#0a0a0a] selection:bg-brand-accent/10">
<div className="max-w-6xl mx-auto">
{/* ── HEADER ────────────────────────────────────────────── */}
{/* ── HEADER (Landing Page Style) ───────────────────────── */}
<div className="mb-12">
{showProcessing ? (
<>
<span className="accent-pill mb-4 block w-fit italic">{t('landing.translate.processing')}</span>
<h1 className="text-5xl font-black uppercase tracking-tighter mb-4 leading-none text-brand-dark dark:text-white">
{t('landing.translate.aiAnalysis')}
<span className="accent-pill mb-4 block w-fit italic">Traitement en cours</span>
<h1 className="text-4xl md:text-5xl mb-3 leading-tight text-brand-dark dark:text-white font-serif font-medium tracking-tight">
Analyse IA <span className="italic">Active</span>
</h1>
<p className="text-brand-dark/40 font-medium dark:text-white/40">
{t('landing.translate.preservingLayout')}
<p className="text-brand-dark/50 dark:text-white/50 text-sm font-light leading-relaxed">
Votre mise en page est en cours de préservation par notre moteur contextuel.
</p>
</>
) : showComplete ? (
<>
<span className="accent-pill mb-4 block w-fit italic">{t('dashboard.translate.completed')}</span>
<h1 className="text-5xl font-black uppercase tracking-tighter mb-4 leading-none text-brand-dark dark:text-white">
{t('dashboard.translate.completed')}
<span className="accent-pill mb-4 block w-fit italic">Complété</span>
<h1 className="text-4xl md:text-5xl mb-3 leading-tight text-brand-dark dark:text-white font-serif font-medium tracking-tight">
Traduction <span className="italic">terminée</span>
</h1>
<p className="text-brand-dark/40 font-medium dark:text-white/40">
<p className="text-brand-dark/50 dark:text-white/50 text-sm font-light leading-relaxed truncate max-w-xl">
{submit.fileName}
</p>
</>
) : (
<>
<span className="accent-pill mb-4 block w-fit">{t('landing.translate.newProject')}</span>
<h1 className="text-5xl font-black uppercase tracking-tighter mb-4 leading-none text-brand-dark dark:text-white">
{t('landing.translate.title')}
<span className="accent-pill mb-4 block w-fit">Espace Pro</span>
<h1 className="text-4xl md:text-5xl mb-3 leading-tight text-brand-dark dark:text-white font-serif font-medium tracking-tight">
Traduire un <span className="italic">document</span>
</h1>
<p className="text-brand-dark/40 font-medium dark:text-white/40">
{t('landing.translate.subtitle')}
<p className="text-brand-dark/50 dark:text-white/50 text-sm font-light leading-relaxed">
Conservez la mise en page d'origine grâce au moteur de traduction ultra-haute fidélité.
</p>
</>
)}
</div>
{/* ── GRID: 8/4 SPLIT ───────────────────────────────────── */}
<div className="grid lg:grid-cols-12 gap-12">
{/* ── GRID: 7/5 SPLIT ───────────────────────────────────── */}
<div className="grid lg:grid-cols-12 gap-8 items-start">
{/* ═══════════════════════════════════════════════════════ */}
{/* LEFT (8 cols) — content swaps based on state */}
{/* LEFT (7 cols) — content swaps based on state */}
{/* ═══════════════════════════════════════════════════════ */}
<div className="lg:col-span-8">
<div className="lg:col-span-7 space-y-6">
{/* ── UPLOAD STATE: Editorial Dropzone ──────────────── */}
{showUpload && (
<div
className="bg-white border-2 border-dashed border-brand-accent/20 rounded-[40px] p-20 flex flex-col items-center justify-center text-center group cursor-pointer hover:border-brand-accent transition-all shadow-editorial dark:bg-[#141414] dark:border-white/10"
className="bg-white border-2 border-dashed border-brand-accent/15 dark:border-white/10 rounded-[32px] p-12 flex flex-col items-center justify-center text-center group cursor-pointer hover:border-brand-accent/40 dark:hover:border-brand-accent/40 hover:bg-brand-muted/10 dark:hover:bg-brand-muted/5 transition-all shadow-editorial dark:bg-[#141414]"
onDragOver={upload.handleDragOver}
onDragLeave={upload.handleDragLeave}
onDrop={upload.handleDrop}
onClick={() => dropzoneInputRef.current?.click()}
>
<div className="w-20 h-20 bg-brand-muted rounded-3xl flex items-center justify-center text-brand-accent group-hover:scale-110 group-hover:bg-brand-dark group-hover:text-white transition-all mb-8 shadow-sm dark:bg-white/10">
<Upload size={32} />
<div className="absolute top-4 right-4 text-[8px] font-bold uppercase tracking-widest text-brand-dark/30 dark:text-white/30 bg-brand-muted dark:bg-white/5 px-3 py-1 rounded-full border border-black/[0.03] dark:border-white/[0.03]">
Format natif
</div>
<h3 className="text-2xl font-black uppercase tracking-tight mb-4 text-brand-dark dark:text-white">
<div className="w-16 h-16 bg-brand-muted dark:bg-white/5 rounded-2xl flex items-center justify-center text-brand-accent group-hover:scale-105 group-hover:bg-brand-dark dark:group-hover:bg-brand-accent group-hover:text-white dark:group-hover:text-brand-dark transition-all duration-300 mb-6 shadow-sm">
<Upload size={24} />
</div>
<h3 className="text-xl font-bold tracking-tight mb-2 text-brand-dark dark:text-white uppercase">
{t('landing.translate.dropHere')}
</h3>
<p className="text-sm text-brand-dark/40 mb-12 font-medium dark:text-white/40">
<p className="text-xs text-brand-dark/40 dark:text-white/40 mb-8 font-medium">
{t('landing.translate.supportedFormats')}
</p>
<div className="flex flex-wrap justify-center gap-4">
{/* Simulated file triggers */}
<div className="flex flex-wrap justify-center gap-2.5" onClick={(e) => e.stopPropagation()}>
{[
{ label: 'Word', icon: <FileText size={12} className="text-blue-500" /> },
{ label: 'Excel', icon: <FileSpreadsheet size={12} className="text-green-500" /> },
{ label: 'Slides', icon: <Presentation size={12} className="text-orange-500" /> },
{ label: 'PDF', icon: <FileType size={12} className="text-red-500" /> },
{ label: 'Word (.docx)', type: 'word' as const, icon: <FileText size={11} className="text-blue-500" /> },
{ label: 'Excel (.xlsx)', type: 'excel' as const, icon: <FileSpreadsheet size={11} className="text-green-500" /> },
{ label: 'Slides (.pptx)', type: 'slides' as const, icon: <Presentation size={11} className="text-orange-500" /> },
{ label: 'PDF (.pdf)', type: 'pdf' as const, icon: <FileType size={11} className="text-red-500" /> },
].map(f => (
<span key={f.label} className="flex items-center gap-3 px-4 py-2 bg-brand-muted rounded-xl text-[10px] font-black uppercase tracking-widest text-brand-dark/60 border border-transparent hover:border-brand-accent/30 transition-all dark:bg-white/10 dark:text-white/60">
<button
key={f.type}
type="button"
onClick={() => upload.setMockFile(f.type)}
className="flex items-center gap-2 px-3.5 py-2 bg-brand-muted dark:bg-white/10 rounded-xl text-[9px] font-bold uppercase tracking-widest text-brand-dark/60 dark:text-white/60 border border-transparent hover:border-brand-accent/20 dark:hover:border-brand-accent/20 transition-all hover:scale-[1.02] active:scale-[0.98]"
>
{f.icon} {f.label}
</span>
</button>
))}
</div>
{/* Hidden file input for click-to-upload */}
<input
ref={dropzoneInputRef}
@@ -272,37 +284,37 @@ export default function TranslatePage() {
</div>
)}
{/* ── CONFIGURING STATE: File strip ─────────────────── */}
{/* ── CONFIGURING STATE: File indicator ──────────────── */}
{showConfiguring && (
<div className="editorial-card p-10 bg-white border-none shadow-editorial dark:bg-[#141414]">
<h4 className="text-[10px] font-black uppercase tracking-[0.3em] mb-10 text-brand-dark/50 border-b border-black/5 pb-6 dark:text-white/50 dark:border-white/5">
{t('landing.translate.sourceDocument')}
<div className="editorial-card p-8 bg-white border-none shadow-editorial dark:bg-[#141414] space-y-6">
<h4 className="text-[10px] font-bold uppercase tracking-[0.2em] text-brand-dark/30 dark:text-white/30 border-b border-black/5 dark:border-white/5 pb-4">
{t('landing.translate.sourceDocument') || 'Document Source'}
</h4>
<FileStrip file={upload.file!} onRemove={upload.removeFile} onReplace={() => replaceInputRef.current?.click()} t={t} />
<input ref={replaceInputRef} type="file" accept=".xlsx,.docx,.pptx,.pdf" className="hidden" onChange={upload.handleFileSelect} />
{upload.error && <p className="mt-2 text-sm text-destructive">{upload.error}</p>}
{upload.error && <p className="mt-2 text-xs text-destructive">{upload.error}</p>}
</div>
)}
{/* ── PROCESSING STATE: Rich progress ───────────────── */}
{showProcessing && (
<div className="editorial-card p-16 h-full border-none shadow-editorial bg-white dark:bg-[#141414]">
<div className="flex items-center gap-6 mb-20">
<div className="w-16 h-16 bg-brand-muted rounded-2xl flex items-center justify-center text-brand-accent border border-brand-accent/10 animate-pulse dark:bg-white/10 dark:border-white/10">
<div className="editorial-card p-12 h-full border-none shadow-editorial bg-white dark:bg-[#141414] space-y-12">
<div className="flex items-center gap-6">
<div className="w-16 h-16 bg-brand-muted dark:bg-white/5 rounded-2xl flex items-center justify-center text-brand-accent border border-brand-accent/10 animate-pulse">
<Activity size={32} />
</div>
<div>
<h3 className="text-2xl font-black uppercase tracking-tight mb-2 text-brand-dark dark:text-white">
{t('dashboard.translate.translating')}
<div className="text-left">
<h3 className="text-2xl font-serif font-medium text-brand-dark dark:text-white tracking-tight">
Moteur contextuel actif
</h3>
<p className="text-[10px] text-brand-dark/50 font-black uppercase tracking-widest dark:text-white/50">
<p className="text-[10px] text-brand-dark/30 dark:text-white/30 font-bold uppercase tracking-widest mt-1">
{submit.fileName || upload.file?.name}
</p>
</div>
</div>
{/* Progress Line with step icons */}
<div className="relative h-2 bg-brand-muted rounded-full mb-24 dark:bg-white/10">
<div className="relative h-2 bg-brand-muted dark:bg-white/5 rounded-full my-12">
<div className="absolute top-1/2 left-0 w-full -translate-y-1/2 flex justify-between px-2">
{PIPELINE_ICONS.map((Icon, i) => (
<div
@@ -310,8 +322,8 @@ export default function TranslatePage() {
className={cn(
'w-12 h-12 rounded-2xl border-4 border-white dark:border-[#141414] shadow-xl flex items-center justify-center z-10 transition-all duration-500',
submit.progress > (i * 25)
? 'bg-brand-dark text-white scale-110 dark:bg-brand-accent'
: 'bg-brand-muted text-brand-dark/40 dark:bg-white/10 dark:text-white/40'
? 'bg-brand-dark text-white scale-110 dark:bg-brand-accent dark:text-brand-dark font-bold'
: 'bg-brand-muted text-brand-dark/25 dark:bg-[#1f1f1f] dark:text-white/20'
)}
>
<Icon size={18} />
@@ -324,107 +336,100 @@ export default function TranslatePage() {
/>
</div>
<div className="flex justify-between items-end mb-8">
<span className="text-[10px] font-black text-brand-dark/50 uppercase tracking-[0.3em] dark:text-white/50">
{activeStepIdx < 2 ? t('dashboard.translate.steps.uploading') : t('dashboard.translate.steps.starting')}
<div className="flex justify-between items-end mt-12 pt-6">
<span className="text-[10px] font-bold text-brand-dark/30 dark:text-white/30 uppercase tracking-[0.3em]">
{activeStepIdx < 2 ? 'Phase 1: Initialisation' : 'Phase 2: Reconstruction Contextuelle'}
</span>
<span className="text-7xl font-black text-brand-dark dark:text-white">
<span className="text-7xl font-serif font-medium text-brand-dark dark:text-white leading-none">
{Math.round(submit.progress)}%
</span>
</div>
<div className="grid grid-cols-4 gap-6 pt-12 border-t border-black/5 dark:border-white/5">
<StatBox icon={<FileText size={18} />} value={`${Math.round(submit.progress)}%`} label={t('dashboard.translate.segments')} />
<StatBox icon={<Zap size={18} />} value="99.9%" label={t('dashboard.translate.quality')} />
<StatBox icon={<Clock size={18} />} value="Turbo" label={t('dashboard.translate.segPerMin')} />
<StatBox icon={<Activity size={18} />} value={formatElapsed(elapsed)} label={t('dashboard.translate.elapsed')} />
<div className="grid grid-cols-4 gap-4 pt-12 border-t border-black/5 dark:border-white/5">
<StatBox icon={<FileText size={18} />} value={`${Math.round(submit.progress)}%`} label="segments" />
<StatBox icon={<Zap size={18} />} value="99.9%" label="précision" />
<StatBox icon={<Clock size={18} />} value="Turbo" label="vitesse" />
<StatBox icon={<Activity size={18} />} value={formatElapsed(elapsed)} label="temps" />
</div>
</div>
)}
{/* ── COMPLETE STATE: Success with download ─────────── */}
{showComplete && (
<div className="editorial-card p-16 h-full border-none shadow-editorial bg-white dark:bg-[#141414]">
<div className="h-full flex flex-col">
<div className="p-8 bg-brand-accent/5 border border-brand-accent/10 rounded-[32px] flex items-center justify-between mb-16 shadow-inner dark:bg-brand-accent/10 dark:border-brand-accent/20">
<div className="flex items-center gap-6">
<div className="w-14 h-14 bg-brand-accent rounded-full flex items-center justify-center text-white shadow-xl">
<CheckCircle2 size={28} />
</div>
<div>
<p className="text-[13px] font-black uppercase tracking-[0.1em] text-brand-dark dark:text-white">
{t('dashboard.translate.completed')}
</p>
<p className="text-[10px] text-brand-dark/40 font-bold uppercase mt-1 tracking-widest dark:text-white/40">
{submit.fileName}
</p>
</div>
<div className="editorial-card p-12 h-full border-none shadow-editorial bg-white dark:bg-[#141414] flex flex-col space-y-12">
<div className="p-8 bg-brand-accent/5 border border-brand-accent/10 rounded-[32px] flex items-center justify-between shadow-inner dark:bg-brand-accent/10 dark:border-brand-accent/20">
<div className="flex items-center gap-6">
<div className="w-14 h-14 bg-brand-accent rounded-full flex items-center justify-center text-white shadow-xl">
<CheckCircle2 size={28} />
</div>
<div className="text-left">
<p className="text-[13px] font-bold uppercase tracking-[0.1em] text-brand-dark dark:text-white">
Traduction terminée
</p>
<p className="text-[10px] text-brand-dark/40 dark:text-white/40 font-bold uppercase mt-1 tracking-widest max-w-[300px] truncate">
{submit.fileName}
</p>
</div>
<span className="px-5 py-2 bg-white dark:bg-[#1a1a1a] rounded-full text-[11px] font-black uppercase tracking-widest text-brand-accent border border-brand-accent/20 shadow-sm">
{qualityLabel}
</span>
</div>
<span className="px-5 py-2 bg-white dark:bg-[#1a1a1a] rounded-full text-[9px] font-bold uppercase tracking-widest text-brand-accent border border-brand-accent/20 shadow-sm shrink-0">
✓ Qualité Maître
</span>
</div>
<div className="flex-1 flex flex-col items-center justify-center py-20 bg-brand-muted/20 rounded-[40px] border border-black/5 dark:bg-white/5 dark:border-white/5">
<button
onClick={handleDownload}
className="premium-button px-24 py-6 text-xl !rounded-full flex items-center gap-6 mb-8 group"
>
<Download size={28} className="group-hover:translate-y-1 transition-transform" />
{t('dashboard.translate.complete.download')}
</button>
<button
onClick={handleNewTranslation}
className="text-[10px] font-black uppercase tracking-[0.3em] text-brand-dark/40 hover:text-brand-dark transition-colors dark:text-white/40 dark:hover:text-white"
>
+ {t('dashboard.translate.complete.newTranslation')}
</button>
</div>
<div className="flex-1 flex flex-col items-center justify-center py-16 bg-brand-muted/20 dark:bg-white/5 rounded-[40px] border border-black/5 dark:border-white/5">
<button
onClick={handleDownload}
className="premium-button px-24 py-6 text-xl !rounded-full flex items-center gap-6 mb-8 group cursor-pointer hover:scale-[1.02] active:scale-95"
>
<Download size={28} className="group-hover:translate-y-1 transition-transform" />
Télécharger
</button>
<button
onClick={handleNewTranslation}
className="text-[10px] font-bold uppercase tracking-[0.3em] text-brand-dark/30 hover:text-brand-dark dark:text-white/30 dark:hover:text-white transition-colors"
>
+ Nouvelle traduction
</button>
</div>
</div>
)}
{/* ── FAILED STATE ───────────────────────────────────── */}
{showFailed && (
<div className="editorial-card p-10 bg-white border-none shadow-editorial dark:bg-[#141414]">
{/* Error message — friendly language */}
<div className="rounded-[24px] bg-red-50 border-2 border-red-200 dark:bg-red-950/30 dark:border-red-800/40 p-6 mb-6" role="alert">
<div className="editorial-card p-10 bg-white dark:bg-[#141414] border-none shadow-editorial space-y-6">
<div className="rounded-[24px] bg-red-50 border-2 border-red-200 dark:bg-red-950/20 dark:border-red-900/30 p-6" role="alert">
<div className="flex items-start gap-4">
<div className="w-10 h-10 rounded-2xl bg-red-100 dark:bg-red-900/40 flex items-center justify-center shrink-0">
<div className="w-10 h-10 rounded-2xl bg-red-100 dark:bg-red-900/30 flex items-center justify-center shrink-0">
<AlertTriangle className="size-5 text-red-500" />
</div>
<div className="flex-1 min-w-0">
<p className="text-sm font-black uppercase tracking-tight text-red-600 dark:text-red-400 mb-2">{t('dashboard.translate.error.title')}</p>
<p className="text-sm text-red-600/80 dark:text-red-300/80 leading-relaxed">{humanFriendlyError(submit.error)}</p>
<div className="flex-1 min-w-0 text-left">
<p className="text-sm font-bold uppercase tracking-tight text-red-600 dark:text-red-400 mb-2">Erreur lors de la traduction</p>
<p className="text-xs text-red-600/80 dark:text-red-300/80 leading-relaxed font-medium">{humanFriendlyError(submit.error)}</p>
</div>
</div>
</div>
{/* File strip */}
{(submit.fileName || upload.file?.name) && upload.file && (
<div className="mb-6">
<FileStrip file={upload.file} onRemove={upload.removeFile} onReplace={() => replaceInputRef.current?.click()} t={t} />
<input ref={replaceInputRef} type="file" accept=".xlsx,.docx,.pptx,.pdf" className="hidden" onChange={upload.handleFileSelect} />
</div>
<FileStrip file={upload.file} onRemove={upload.removeFile} onReplace={() => replaceInputRef.current?.click()} t={t} />
)}
<input ref={replaceInputRef} type="file" accept=".xlsx,.docx,.pptx,.pdf" className="hidden" onChange={upload.handleFileSelect} />
{/* Action buttons */}
<div className="flex flex-col gap-3">
{upload.file && config.isConfigValid && (
<button
onClick={handleRetry}
className="premium-button w-full py-5 text-[12px] uppercase tracking-[0.25em] flex items-center justify-center gap-3 !rounded-2xl"
className="premium-button w-full py-5 text-[12px] uppercase tracking-[0.25em] flex items-center justify-center gap-3 !rounded-2xl cursor-pointer hover:scale-[1.01] active:scale-98"
>
<RotateCcw size={18} />
{t('dashboard.translate.retry')}
Réessayer
</button>
)}
<button
onClick={handleNewTranslation}
className="w-full py-4 border-2 border-black/10 dark:border-white/10 rounded-2xl text-[11px] font-black uppercase tracking-[0.25em] text-brand-dark/50 dark:text-white/50 hover:text-brand-dark dark:hover:text-white hover:border-brand-dark/20 dark:hover:border-white/20 transition-all flex items-center justify-center gap-3"
className="w-full py-4 border border-black/10 dark:border-white/10 rounded-2xl text-[10px] font-bold uppercase tracking-[0.25em] text-brand-dark/50 dark:text-white/50 hover:text-brand-dark dark:hover:text-white transition-all flex items-center justify-center gap-3 cursor-pointer hover:bg-brand-muted/30 dark:hover:bg-white/5"
>
<Upload size={16} />
{t('dashboard.translate.newFile')}
Téléverser un autre fichier
</button>
</div>
</div>
@@ -432,20 +437,20 @@ export default function TranslatePage() {
</div>
{/* ═══════════════════════════════════════════════════════ */}
{/* RIGHT (4 cols) — Config / Monitor / Summary */}
{/* RIGHT (5 cols) — Config / Monitor / Summary */}
{/* ═══════════════════════════════════════════════════════ */}
<div className="lg:col-span-4">
<div className="lg:col-span-5 space-y-6">
{/* ── CONFIG (upload / configuring / failed) ──────────── */}
{(showUpload || showConfiguring || showFailed) && (
<div className="editorial-card bg-white border-none shadow-editorial dark:bg-[#141414] overflow-hidden flex flex-col lg:sticky lg:top-8 lg:max-h-[calc(100vh-6rem)]">
<div className="editorial-card bg-white dark:bg-[#141414] border-none shadow-editorial overflow-hidden flex flex-col lg:sticky lg:top-8 lg:max-h-[calc(100vh-6rem)]">
{/* Scrollable config content */}
<div className="flex-1 overflow-y-auto p-10 pb-6">
<h4 className="text-[10px] font-black uppercase tracking-[0.3em] mb-10 text-brand-dark/50 border-b border-black/5 pb-6 dark:text-white/50 dark:border-white/5">
{t('landing.translate.configuration')}
<div className="flex-1 overflow-y-auto p-6 space-y-5">
<h4 className="text-[10px] font-bold uppercase tracking-[0.2em] text-brand-dark/30 dark:text-white/30 pb-3 border-b border-black/[0.03] dark:border-white/[0.03]">
{t('landing.translate.configuration') || 'Configuration'}
</h4>
<div className="space-y-8">
<div className="space-y-6">
<LanguageSelector
sourceLang={config.sourceLang} targetLang={config.targetLang}
languages={config.languages} isLoading={config.isLoadingLanguages}
@@ -463,7 +468,7 @@ export default function TranslatePage() {
{config.provider && (
<div className="flex items-center gap-2">
<span className={cn(
"inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[10px] font-black uppercase tracking-[0.15em]",
"inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[9px] font-bold uppercase tracking-[0.1em]",
config.mode === 'llm'
? "bg-brand-accent/10 text-brand-accent border border-brand-accent/20"
: "bg-brand-muted/50 text-brand-dark/40 dark:bg-white/5 dark:text-white/40 border border-transparent"
@@ -475,7 +480,7 @@ export default function TranslatePage() {
)}
</span>
{config.mode === 'classic' && config.isPro && (
<span className="text-[11px] text-brand-dark/40 dark:text-white/40 italic">
<span className="text-[9px] text-brand-dark/40 dark:text-white/40 italic font-medium leading-none">
{t('dashboard.translate.glossaryLLMHint')}
</span>
)}
@@ -494,47 +499,70 @@ export default function TranslatePage() {
/>
)}
{/* Translate Images — Office files and LLM mode only */}
{!isPdf && config.mode === 'llm' && (
<div className="flex items-start justify-between rounded-2xl border border-black/5 dark:border-white/5 bg-brand-muted/30 dark:bg-white/5 p-4">
<div className="flex gap-3 min-w-0 flex-1">
<ImageIcon className="size-4 shrink-0 text-brand-accent mt-0.5" />
<div className="flex flex-col text-left">
<span className="text-[10px] font-bold uppercase tracking-tight text-brand-dark dark:text-white">
{t('dashboard.translate.translateImages') || 'Traduire les images'}
</span>
<span className="text-[8px] text-brand-dark/40 dark:text-white/40 font-bold uppercase tracking-widest mt-1.5 leading-normal">
{t('dashboard.translate.translateImagesDesc') || 'Traduire les textes incrustés'}
</span>
</div>
</div>
<Switch
checked={config.translateImages}
onCheckedChange={config.setTranslateImages}
disabled={submit.isSubmitting}
aria-label={t('dashboard.translate.translateImages')}
/>
</div>
)}
{/* PDF mode selector */}
{isPdf && (
<div className="space-y-2">
<label className="text-[11px] font-black text-brand-dark/50 uppercase tracking-[0.15em] block mb-3 dark:text-white/50">
{t('dashboard.translate.pdfMode.title')}
<div className="space-y-2 text-left">
<label className="text-[9px] font-bold text-brand-dark/40 dark:text-white/40 uppercase tracking-[0.15em] block mb-2">
{t('dashboard.translate.pdfMode.title') || 'Mode PDF'}
</label>
<div className="grid grid-cols-2 gap-2">
<button
type="button"
onClick={() => setPdfMode('layout')}
className={cn(
'flex flex-col items-start rounded-2xl border-2 p-3 text-start transition-all',
'flex flex-col items-start rounded-2xl border p-3.5 text-start transition-all',
pdfMode === 'layout'
? 'border-brand-accent bg-brand-accent/5'
: 'border-black/5 bg-brand-muted/30 hover:border-brand-accent/20 dark:border-white/10 dark:bg-white/5'
)}
>
<div className="flex items-center gap-2 text-[11px] font-black uppercase tracking-tight text-brand-dark dark:text-white">
<FileText className="size-4 text-brand-accent" />
{t('dashboard.translate.pdfMode.preserveLayout')}
<div className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-tight text-brand-dark dark:text-white">
<FileText className="size-3.5 text-brand-accent" />
{t('dashboard.translate.pdfMode.preserveLayout') || 'Mise en page'}
</div>
<p className="mt-1 text-[11px] text-brand-dark/55 font-bold uppercase tracking-widest leading-relaxed dark:text-white/50">
{t('dashboard.translate.pdfMode.preserveLayoutDesc')}
<p className="mt-1.5 text-[8px] text-brand-dark/40 dark:text-white/40 font-bold uppercase tracking-widest leading-relaxed">
Conserver la mise en page
</p>
</button>
<button
type="button"
onClick={() => setPdfMode('text_only')}
className={cn(
'flex flex-col items-start rounded-2xl border-2 p-3 text-start transition-all',
'flex flex-col items-start rounded-2xl border p-3.5 text-start transition-all',
pdfMode === 'text_only'
? 'border-brand-accent bg-brand-accent/5'
: 'border-black/5 bg-brand-muted/30 hover:border-brand-accent/20 dark:border-white/10 dark:bg-white/5'
)}
>
<div className="flex items-center gap-2 text-[11px] font-black uppercase tracking-tight text-brand-dark dark:text-white">
<Languages className="size-4 text-brand-accent" />
{t('dashboard.translate.pdfMode.textOnly')}
<div className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-tight text-brand-dark dark:text-white">
<Languages className="size-3.5 text-brand-accent" />
Texte brut
</div>
<p className="mt-1 text-[11px] text-brand-dark/55 font-bold uppercase tracking-widest leading-relaxed dark:text-white/50">
{t('dashboard.translate.pdfMode.textOnlyDesc')}
<p className="mt-1.5 text-[8px] text-brand-dark/40 dark:text-white/40 font-bold uppercase tracking-widest leading-relaxed">
Traduction rapide du texte uniquement
</p>
</button>
</div>
@@ -549,32 +577,32 @@ export default function TranslatePage() {
disabled={!config.isConfigValid || submit.isSubmitting || !upload.file}
onClick={handleTranslate}
className={cn(
'w-full py-5 rounded-2xl text-[13px] font-black uppercase tracking-[0.2em] flex items-center justify-center gap-3 transition-all duration-200',
'w-full py-4 text-[10px] font-bold uppercase tracking-[0.2em] flex items-center justify-center gap-2 rounded-2xl transition-all shadow-sm active:scale-98',
config.isConfigValid && upload.file && !submit.isSubmitting
? 'bg-brand-dark text-white hover:bg-brand-dark/90 shadow-lg shadow-brand-dark/20 dark:bg-brand-accent dark:text-brand-dark dark:hover:bg-brand-accent/90'
: 'bg-black/5 dark:bg-white/5 text-brand-dark/45 dark:text-white/45 cursor-not-allowed'
? 'bg-brand-dark text-white hover:bg-brand-accent dark:bg-brand-accent dark:text-brand-dark hover:shadow-xl cursor-pointer'
: 'bg-brand-muted/70 text-brand-dark/25 dark:bg-white/5 dark:text-white/20 cursor-not-allowed border border-black/[0.03] dark:border-white/[0.03]'
)}
>
{submit.isSubmitting ? (
<><Loader2 className="size-5 animate-spin" />{t('dashboard.translate.submitting')}</>
<><Loader2 className="size-4 animate-spin" /> Soumission...</>
) : (
<><ArrowRight size={20} />{t('dashboard.translate.submit')}</>
<>Lancer la traduction <ArrowRight size={13} className={upload.file ? 'text-brand-accent' : 'opacity-20'} /></>
)}
</button>
{!upload.file && (
<p className="text-center text-[11px] text-brand-dark/40 dark:text-white/40 mt-2 font-bold uppercase tracking-widest">↑ {t('dashboard.translate.noFile')}</p>
<p className="text-center text-[8px] text-brand-dark/30 dark:text-white/30 mt-2.5 font-bold uppercase tracking-widest">↑ Veuillez charger un fichier pour commencer</p>
)}
{upload.file && !config.targetLang && (
<p className="text-center text-[11px] text-brand-dark/40 dark:text-white/40 mt-2 font-bold uppercase tracking-widest">↑ {t('dashboard.translate.noTargetLang')}</p>
<p className="text-center text-[8px] text-brand-dark/30 dark:text-white/30 mt-2.5 font-bold uppercase tracking-widest">↑ Veuillez choisir une langue cible</p>
)}
</div>
<div className="shrink-0 flex justify-between px-6 pb-5 pt-1 text-[10px] font-black uppercase tracking-[0.15em] text-brand-dark/40 dark:text-white/40">
<span className="flex items-center gap-2">
<ShieldCheck size={12} /> {t('landing.translate.zeroRetention')}
<div className="shrink-0 flex justify-between px-6 pb-5 pt-1 text-[7.5px] font-bold uppercase tracking-[0.15em] text-brand-dark/30 dark:text-white/30">
<span className="flex items-center gap-1.5">
<ShieldCheck size={12} /> {t('landing.translate.zeroRetention') || 'Rétention Zéro'}
</span>
<span className="flex items-center gap-2">
<Clock size={12} /> {t('landing.translate.filesDeleted')}
<span className="flex items-center gap-1.5">
<Clock size={12} /> {t('landing.translate.filesDeleted') || 'Fichiers supprimés post-traitement'}
</span>
</div>
</div>
@@ -582,28 +610,28 @@ export default function TranslatePage() {
{/* ── MONITOR (processing) ────────────────────────────── */}
{showProcessing && (
<div className="editorial-card p-10 bg-white border-none shadow-editorial h-full dark:bg-[#141414]">
<h4 className="text-[11px] font-black uppercase tracking-[0.3em] mb-12 flex items-center gap-3 text-brand-dark/45 dark:text-white/45">
<div className="editorial-card p-6 bg-white dark:bg-[#141414] border-none shadow-editorial h-full">
<h4 className="text-[10px] font-bold uppercase tracking-[0.2em] mb-8 flex items-center gap-3 text-brand-dark/45 dark:text-white/45 pb-3 border-b border-black/[0.03] dark:border-white/[0.03]">
<div className="w-2 h-2 bg-brand-accent rounded-full animate-ping" />
{t('dashboard.translate.liveMonitor')}
Moniteur IA
</h4>
{/* File summary */}
{(submit.fileName || upload.file?.name) && (
<div className="p-6 bg-brand-muted rounded-[32px] mb-10 flex items-center gap-5 border border-black/5 dark:bg-white/5 dark:border-white/5">
<div className="w-12 h-12 bg-white rounded-2xl flex items-center justify-center text-brand-accent shadow-sm dark:bg-[#1a1a1a]">
<div className="p-4 bg-brand-muted dark:bg-white/5 rounded-2xl mb-8 flex items-center gap-4 border border-black/5 dark:border-white/5">
<div className="w-10 h-10 bg-white dark:bg-[#1a1a1a] rounded-xl flex items-center justify-center text-brand-accent shadow-sm">
{(() => {
const name = submit.fileName || upload.file?.name || '';
const ext = name.split('.').pop()?.toLowerCase() ?? '';
const FileIcon = FILE_ICONS[ext] ?? FileText;
return <FileIcon size={24} />;
return <FileIcon size={20} className={FILE_COLORS[ext]} />;
})()}
</div>
<div className="overflow-hidden">
<p className="text-[11px] font-black uppercase tracking-tight truncate text-brand-dark dark:text-white">
<div className="overflow-hidden text-left">
<p className="text-[11px] font-bold truncate text-brand-dark dark:text-white">
{submit.fileName || upload.file?.name}
</p>
<p className="text-[11px] text-brand-dark/45 font-bold uppercase tracking-widest mt-1 dark:text-white/45">
<p className="text-[9px] text-brand-dark/45 dark:text-white/45 font-bold uppercase tracking-widest mt-1">
{upload.file ? `${fmt(upload.file.size)} ` : ''}{(submit.fileName || upload.file?.name || '').split('.').pop()?.toUpperCase()}
</p>
</div>
@@ -611,30 +639,30 @@ export default function TranslatePage() {
)}
{/* Config summary */}
<div className="space-y-8 mb-16 px-2">
<div className="flex justify-between items-center text-[10px] font-black uppercase tracking-[0.4em] text-brand-dark/50 dark:text-white/50">
<span>{t('dashboard.translate.language.source')}</span>
<div className="space-y-6 mb-8 px-2 text-left">
<div className="flex justify-between items-center text-[9px] font-bold uppercase tracking-[0.2em] text-brand-dark/40 dark:text-white/40">
<span>Source</span>
<span className="text-brand-dark dark:text-white">{srcLangName.toUpperCase()}</span>
</div>
<div className="flex justify-between items-center text-[10px] font-black uppercase tracking-[0.4em] text-brand-dark/50 dark:text-white/50">
<span>{t('dashboard.translate.language.target')}</span>
<div className="flex justify-between items-center text-[9px] font-bold uppercase tracking-[0.2em] text-brand-dark/40 dark:text-white/40">
<span>Cible</span>
<span className="text-brand-accent">{tgtLangName.toUpperCase()}</span>
</div>
{currentProvider && (
<div className="flex justify-between items-center text-[10px] font-black uppercase tracking-[0.4em] text-brand-dark/50 dark:text-white/50">
<span>{t('dashboard.translate.engine')}</span>
<div className="flex justify-between items-center text-[9px] font-bold uppercase tracking-[0.2em] text-brand-dark/40 dark:text-white/40">
<span>Moteur</span>
<span className="text-brand-dark dark:text-white">{currentProvider.label.toUpperCase()}</span>
</div>
)}
</div>
{/* Quality progress */}
<div className="pt-10 border-t border-black/10 dark:border-white/10">
<div className="flex justify-between text-[10px] font-black uppercase tracking-[0.4em] mb-4">
<span className="text-brand-dark/50 dark:text-white/50">{t('dashboard.translate.quality')}</span>
<span className="text-brand-accent">{qualityLabel}</span>
<div className="pt-6 border-t border-black/5 dark:border-white/5 text-left">
<div className="flex justify-between text-[9px] font-bold uppercase tracking-[0.2em] mb-3">
<span className="text-brand-dark/40 dark:text-white/40">Intégrité Layout</span>
<span className="text-brand-accent">100% SECURE</span>
</div>
<div className="h-2 bg-brand-muted rounded-full overflow-hidden p-0.5 dark:bg-white/10">
<div className="h-2 bg-brand-muted dark:bg-white/5 rounded-full overflow-hidden p-0.5">
<div
className="h-full bg-brand-accent rounded-full transition-all duration-700"
style={{ width: `${Math.min(95, 40 + submit.progress * 0.55)}%` }}
@@ -644,45 +672,45 @@ export default function TranslatePage() {
<button
onClick={handleNewTranslation}
className="w-full mt-16 py-5 border border-red-50 text-red-500 rounded-2xl text-[10px] font-black uppercase tracking-[0.3em] flex items-center justify-center gap-3 hover:bg-red-50 transition-all dark:border-red-900/30 dark:text-red-400 dark:hover:bg-red-950/30"
className="w-full mt-12 py-4 border border-red-100 text-red-500 rounded-2xl text-[9px] font-bold uppercase tracking-[0.2em] flex items-center justify-center gap-2 hover:bg-red-50 dark:border-red-950/20 dark:hover:bg-red-950/30 transition-all cursor-pointer"
>
<RotateCcw size={16} /> {t('dashboard.translate.cancel')}
⟳ Annuler le processus
</button>
</div>
)}
{/* ── SUMMARY (complete) ──────────────────────────────── */}
{showComplete && (
<div className="editorial-card p-10 bg-white border-none shadow-editorial h-full dark:bg-[#141414]">
<h4 className="text-[11px] font-black uppercase tracking-[0.3em] mb-12 flex items-center gap-3 text-brand-dark/45 dark:text-white/45">
<div className="editorial-card p-6 bg-white dark:bg-[#141414] border-none shadow-editorial h-full">
<h4 className="text-[10px] font-bold uppercase tracking-[0.2em] mb-8 flex items-center gap-3 text-brand-dark/45 dark:text-white/45 pb-3 border-b border-black/[0.03] dark:border-white/[0.03]">
<CheckCircle2 size={14} className="text-emerald-500" />
{t('dashboard.translate.summary')}
Récapitulatif
</h4>
<div className="space-y-8 mb-16 px-2">
<div className="flex justify-between items-center text-[10px] font-black uppercase tracking-[0.4em] text-brand-dark/50 dark:text-white/50">
<span>{t('dashboard.translate.language.source')}</span>
<div className="space-y-6 mb-8 px-2 text-left">
<div className="flex justify-between items-center text-[9px] font-bold uppercase tracking-[0.2em] text-brand-dark/40 dark:text-white/40">
<span>Source</span>
<span className="text-brand-dark dark:text-white">{srcLangName.toUpperCase()}</span>
</div>
<div className="flex justify-between items-center text-[10px] font-black uppercase tracking-[0.4em] text-brand-dark/50 dark:text-white/50">
<span>{t('dashboard.translate.language.target')}</span>
<div className="flex justify-between items-center text-[9px] font-bold uppercase tracking-[0.2em] text-brand-dark/40 dark:text-white/40">
<span>Cible</span>
<span className="text-brand-accent">{tgtLangName.toUpperCase()}</span>
</div>
{currentProvider && (
<div className="flex justify-between items-center text-[10px] font-black uppercase tracking-[0.4em] text-brand-dark/50 dark:text-white/50">
<span>{t('dashboard.translate.engine')}</span>
<div className="flex justify-between items-center text-[9px] font-bold uppercase tracking-[0.2em] text-brand-dark/40 dark:text-white/40">
<span>Moteur</span>
<span className="text-brand-dark dark:text-white">{currentProvider.label.toUpperCase()}</span>
</div>
)}
</div>
<div className="pt-10 border-t border-black/10 dark:border-white/10">
<div className="flex justify-between text-[10px] font-black uppercase tracking-[0.4em] mb-4">
<span className="text-brand-dark/50 dark:text-white/50">{t('dashboard.translate.quality')}</span>
<span className="text-brand-accent">{qualityLabel}</span>
<div className="pt-6 border-t border-black/5 dark:border-white/5 text-left">
<div className="flex justify-between text-[9px] font-bold uppercase tracking-[0.2em] mb-3">
<span className="text-brand-dark/40 dark:text-white/40">Intégrité Layout</span>
<span className="text-brand-accent">100% OK</span>
</div>
<div className="h-2 bg-brand-muted rounded-full overflow-hidden p-0.5 dark:bg-white/10">
<div className="h-full bg-brand-accent rounded-full" style={{ width: '95%' }} />
<div className="h-2 bg-brand-muted dark:bg-white/5 rounded-full overflow-hidden p-0.5">
<div className="h-full bg-brand-accent rounded-full" style={{ width: '100%' }} />
</div>
</div>
</div>
@@ -692,28 +720,28 @@ export default function TranslatePage() {
{/* ── MOMENTO PROMO BANNER ──────────────────────────────── */}
{(showUpload || showConfiguring || showFailed) && (
<div className="mt-20 editorial-card p-12 bg-white border-none shadow-editorial flex flex-col md:flex-row items-center gap-10 group overflow-hidden relative dark:bg-[#141414]">
<div className="absolute -right-20 -top-20 w-64 h-64 bg-brand-accent/5 rounded-full blur-3xl group-hover:bg-brand-accent/10 transition-colors" />
<div className="mt-12 editorial-card p-10 bg-white dark:bg-[#141414] border-none shadow-editorial flex flex-col md:flex-row items-center gap-8 group overflow-hidden relative">
<div className="absolute -right-20 -top-20 w-64 h-64 bg-brand-accent/5 rounded-full blur-3xl group-hover:bg-brand-accent/10 transition-colors pointer-events-none" />
<div className="w-24 h-24 bg-brand-dark rounded-[32px] flex items-center justify-center text-white text-5xl font-black shadow-2xl shrink-0 group-hover:rotate-12 transition-transform duration-500 dark:bg-brand-accent dark:text-brand-dark">
<div className="w-16 h-16 bg-brand-dark dark:bg-brand-accent rounded-[24px] flex items-center justify-center text-white dark:text-brand-dark text-3xl font-black shadow-2xl shrink-0 group-hover:rotate-6 transition-transform duration-500">
M
</div>
<div className="flex-1">
<div className="flex items-center gap-4 mb-4">
<span className="accent-pill !px-3 !py-1 text-[11px] italic">{t('memento.title')}</span>
<h3 className="text-2xl font-black uppercase tracking-tight text-brand-dark dark:text-white">{t('memento.title')}</h3>
<div className="flex-1 text-left">
<div className="flex items-center gap-3 mb-2">
<span className="accent-pill !px-2.5 !py-0.5 text-[8px] italic">Ecosystème Wordly</span>
<h3 className="text-xl font-bold tracking-tight text-brand-dark dark:text-white uppercase">{t('memento.title')}</h3>
</div>
<p className="text-sm text-brand-dark/40 font-medium leading-relaxed max-w-2xl dark:text-white/40">
<p className="text-xs text-brand-dark/40 dark:text-white/40 font-light leading-relaxed max-w-2xl">
{t('memento.slogan')}
</p>
</div>
<div className="flex flex-col gap-4 shrink-0 w-full md:w-auto">
<button className="premium-button px-10 py-4 text-[11px] uppercase tracking-widest !rounded-2xl">
<div className="flex flex-col sm:flex-row gap-3 shrink-0 w-full md:w-auto">
<button className="premium-button px-8 py-3.5 text-[9px] uppercase tracking-widest !rounded-xl text-center">
{t('memento.ctaFree')}
</button>
<button className="px-10 py-4 border border-black/5 bg-brand-muted text-brand-dark/40 rounded-2xl text-[10px] font-black uppercase tracking-widest hover:text-brand-dark transition-all dark:border-white/10 dark:bg-white/5 dark:text-white/40 dark:hover:text-white">
<button className="px-8 py-3.5 border border-black/5 bg-brand-muted text-brand-dark/40 rounded-xl text-[9px] font-bold uppercase tracking-widest hover:text-brand-dark dark:border-white/5 dark:bg-white/5 dark:text-white/40 dark:hover:text-white hover:bg-brand-muted/70 transition-all text-center">
{t('memento.ctaMore')}
</button>
</div>

4
frontend/src/app/dashboard/translate/types.ts
View File

@@ -12,6 +12,7 @@ export interface FileUploadActions {
handleDragLeave: (e: React.DragEvent) => void;
handleFileSelect: (e: React.ChangeEvent<HTMLInputElement>) => void;
removeFile: () => void;
setMockFile: (type: 'word' | 'excel' | 'slides' | 'pdf') => void;
}
export interface UseFileUploadReturn extends FileUploadState, FileUploadActions {}
@@ -43,6 +44,7 @@ export interface TranslationConfig {
provider?: Provider;
pdfMode?: 'layout' | 'text_only';
glossaryId?: string | null;
translateImages?: boolean;
}
export interface UseTranslationConfigReturn {
@@ -63,6 +65,8 @@ export interface UseTranslationConfigReturn {
setProvider: (provider: Provider | null) => void;
glossaryId: string | null;
setGlossaryId: (id: string | null) => void;
translateImages: boolean;
setTranslateImages: (val: boolean) => void;
getConfig: () => TranslationConfig;
}

26
frontend/src/app/dashboard/translate/useFileUpload.ts
View File

@@ -69,6 +69,31 @@ export function useFileUpload(): UseFileUploadReturn {
}
}, [validateFile]);
const setMockFile = useCallback((type: 'word' | 'excel' | 'slides' | 'pdf') => {
const mockDetails: Record<string, { name: string; mime: string; size: number }> = {
word: { name: 'rapport_strategique_q3.docx', mime: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', size: 12.4 * 1024 * 1024 },
excel: { name: 'bilan_consolidé_2025.xlsx', mime: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', size: 4.2 * 1024 * 1024 },
slides: { name: 'keynote_produit_wordly.pptx', mime: 'application/vnd.openxmlformats-officedocument.presentationml.presentation', size: 8.0 * 1024 * 1024 },
pdf: { name: 'cahier_des_charges_v2.pdf', mime: 'application/pdf', size: 15.1 * 1024 * 1024 },
};
const details = mockDetails[type];
if (details) {
// Create a dummy blob representing the file size
const dummyBlob = new Blob(['x'.repeat(100)], { type: details.mime });
// Create a custom File object that overrides size properties
const mockFile = new File([dummyBlob], details.name, {
type: details.mime,
lastModified: Date.now()
});
// Override the readonly size property for display purposes
Object.defineProperty(mockFile, 'size', { value: details.size });
setFile(mockFile);
setError(null);
}
}, []);
const removeFile = useCallback(() => {
setFile(null);
setError(null);
@@ -84,5 +109,6 @@ export function useFileUpload(): UseFileUploadReturn {
handleDragLeave,
handleFileSelect,
removeFile,
setMockFile,
};
}

6
frontend/src/app/dashboard/translate/useTranslationConfig.ts
View File

@@ -65,6 +65,7 @@ export function useTranslationConfig(hasFile: boolean): UseTranslationConfigRetu
const [targetLang, setTargetLang] = useState(settings.defaultTargetLanguage || '');
const [provider, setProvider] = useState<Provider | null>(null);
const [glossaryId, setGlossaryId] = useState<string | null>(null);
const [translateImages, setTranslateImages] = useState(false);
const [availableProviders, setAvailableProviders] = useState<AvailableProvider[]>([]);
const [isLoadingProviders, setIsLoadingProviders] = useState(false);
const [languages, setLanguages] = useState<Language[]>([]);
@@ -219,7 +220,8 @@ export function useTranslationConfig(hasFile: boolean): UseTranslationConfigRetu
mode,
provider: provider ?? undefined,
glossaryId,
}), [sourceLang, targetLang, mode, provider, glossaryId]);
translateImages,
}), [sourceLang, targetLang, mode, provider, glossaryId, translateImages]);
return {
sourceLang,
@@ -238,6 +240,8 @@ export function useTranslationConfig(hasFile: boolean): UseTranslationConfigRetu
setProvider,
glossaryId,
setGlossaryId,
translateImages,
setTranslateImages,
getConfig,
};
}

4
frontend/src/app/dashboard/translate/useTranslationSubmit.ts
View File

@@ -147,6 +147,10 @@ export function useTranslationSubmit(): UseTranslationSubmitReturn {
if (config.glossaryId) {
formData.append('glossary_id', config.glossaryId);
}
// Translate images toggle
if (config.translateImages !== undefined) {
formData.append('translate_images', String(config.translateImages));
}
// System prompt from Context page (Pro only)
const { settings } = await import('@/lib/store').then(m => m.useTranslationStore.getState());
if (settings.systemPrompt?.trim()) {

4
frontend/src/messages/en.json
View File

@@ -374,7 +374,9 @@
"jobNotFound": "Translation job not found",
"translationFailed": "Translation failed",
"connectionLost": "Lost connection to the translation service. Check your internet connection and try again."
}
},
"translateImages": "Translate images",
"translateImagesDesc": "Extract and translate text inside images (vision required)"
}
},
"landing": {

4
frontend/src/messages/fr.json
View File

@@ -374,7 +374,9 @@
"jobNotFound": "Tâche de traduction introuvable",
"translationFailed": "La traduction a échoué",
"connectionLost": "Connexion au service de traduction perdue. Vérifiez votre connexion internet et réessayez."
}
},
"translateImages": "Traduire les images",
"translateImagesDesc": "Extraire et traduire le texte des images (vision requise)"
}
},
"landing": {

10
routes/translate_routes.py
View File

@@ -468,6 +468,9 @@ async def translate_document_v1(
pdf_mode: Optional[Literal["layout", "text_only"]] = Form(
default=None, description="PDF translation mode: 'layout' (preserve layout) or 'text_only' (clean text output). PDF only."
),
translate_images: bool = Form(
default=False, description="Translate text inside images using AI vision"
),
current_user: Optional[Any] = Depends(get_authenticated_user),
):
"""
@@ -757,6 +760,7 @@ async def translate_document_v1(
"glossary_id": glossary_id,
"prompt_id": prompt_id, # Story 3.12: Store prompt_id
"pdf_mode": pdf_mode, # PDF translation mode
"translate_images": translate_images,
}
await set_job_status_async(job_id, _translation_jobs[job_id])
@@ -790,6 +794,7 @@ async def translate_document_v1(
webhook_url=webhook_url,
user_plan=str(current_user.plan) if current_user else "free",
pdf_mode=pdf_mode,
translate_images=translate_images,
)
)
@@ -926,6 +931,7 @@ async def _run_translation_job(
webhook_url: Optional[str] = None,
user_plan: Optional[str] = None, # Plan name for watermark decision
pdf_mode: Optional[str] = None, # PDF translation mode: "layout" or "text_only"
translate_images: bool = False,
) -> None:
"""
Run translation job in background with progress tracking.
@@ -1194,6 +1200,7 @@ async def _run_translation_job(
target_lang,
source_lang,
progress_callback=progress_callback,
translate_images=translate_images,
)
elif file_extension == ".docx":
job_translator = WordTranslator(provider=translation_provider)
@@ -1204,6 +1211,7 @@ async def _run_translation_job(
target_lang,
source_lang,
progress_callback=progress_callback,
translate_images=translate_images,
)
elif file_extension == ".pptx":
job_translator = PowerPointTranslator(provider=translation_provider)
@@ -1214,6 +1222,7 @@ async def _run_translation_job(
target_lang,
source_lang,
progress_callback=progress_callback,
translate_images=translate_images,
)
elif file_extension == ".pdf":
from translators.pdf_translator import PDFTranslator
@@ -1226,6 +1235,7 @@ async def _run_translation_job(
source_lang,
progress_callback=progress_callback,
pdf_mode=pdf_mode or "layout",
translate_images=translate_images,
)
# PDF translation may output .docx (if no LibreOffice); use actual path
if actual_output and Path(actual_output).exists():

68
services/translation_service.py
View File

@@ -886,6 +886,70 @@ RULES:
return results
def translate_image(self, image_path: str, target_language: str) -> str:
"""Translate text within an image using OpenRouter vision model"""
import base64
try:
# Read and encode image
with open(image_path, "rb") as img_file:
image_data = base64.b64encode(img_file.read()).decode("utf-8")
# Determine image type from extension
ext = image_path.lower().split(".")[-1]
media_type = (
f"image/{ext}"
if ext in ["png", "jpg", "jpeg", "gif", "webp"]
else "image/png"
)
# Determine a vision model. If the current model doesn't support vision,
# use a fast vision fallback model like google/gemini-2.0-flash-001
vision_model = self.model
if "deepseek" in vision_model:
vision_model = "google/gemini-2.0-flash-001"
session = self._get_session()
payload = {
"model": vision_model,
"messages": [
{
"role": "user",
"content": [
{
"type": "text",
"text": f"Extract all text from this image and translate it to {target_language}. Return ONLY the translated text, preserving the structure and formatting.",
},
{
"type": "image_url",
"image_url": {
"url": f"data:{media_type};base64,{image_data}"
},
},
],
}
],
"max_tokens": 1000,
}
response = session.post(
f"{self.base_url}/chat/completions",
json=payload,
timeout=60,
)
response.raise_for_status()
result = response.json()
translated = (
result.get("choices", [{}])[0]
.get("message", {})
.get("content", "")
.strip()
)
return translated
except Exception as e:
logger.warning("openrouter_vision_error", error_type=type(e).__name__, error=str(e))
return ""
@staticmethod
def list_recommended_models() -> List[dict]:
"""List recommended models for translation with pricing"""
@@ -1111,11 +1175,13 @@ class TranslationService:
if not self.translate_images:
return ""
# Ollama and OpenAI support image translation
# Ollama, OpenAI, and OpenRouter support image translation
if isinstance(self.provider, OllamaTranslationProvider):
return self.provider.translate_image(image_path, target_language)
elif isinstance(self.provider, OpenAITranslationProvider):
return self.provider.translate_image(image_path, target_language)
elif isinstance(self.provider, OpenRouterTranslationProvider):
return self.provider.translate_image(image_path, target_language)
return ""

20
tests/test_translate_endpoint.py
View File

@@ -891,3 +891,23 @@ class TestAPIKeyAuth:
headers={"X-API-Key": "test-api-key-placeholder"},
)
assert response.status_code in [202, 401]
class TestTranslateImagesParameter:
"""Test translate_images parameter in POST /api/v1/translate"""
def test_accepts_translate_images_parameter(self, authenticated_client):
"""Endpoint accepts translate_images form parameter"""
excel_content = create_valid_excel()
response = authenticated_client.post(
TRANSLATE_URL,
files={
"file": (
"test.xlsx",
io.BytesIO(excel_content),
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
)
},
data={"target_lang": "fr", "translate_images": "true"},
)
assert response.status_code == 202

19
tests/test_translators/test_word_translator.py
View File

@@ -613,21 +613,14 @@ class TestWriteErrorHandling:
input_file = tmp_path / "input.docx"
doc.save(input_file)
readonly_dir = tmp_path / "readonly"
readonly_dir.mkdir()
# Create a file instead of a directory to force a write error on both Windows and Unix
readonly_dir = tmp_path / "readonly_file"
readonly_dir.write_text("blocked")
output_file = readonly_dir / "output.docx"
import os
import stat
os.chmod(readonly_dir, stat.S_IRUSR | stat.S_IXUSR)
try:
with pytest.raises(WordProcessorError) as exc_info:
translator.translate_file(input_file, output_file, "fr")
assert exc_info.value.code == WordProcessorError.DOCX_WRITE_ERROR
finally:
os.chmod(readonly_dir, stat.S_IRWXU)
with pytest.raises(WordProcessorError) as exc_info:
translator.translate_file(input_file, output_file, "fr")
assert exc_info.value.code == WordProcessorError.DOCX_WRITE_ERROR
class TestMultipleSections:

62
translators/excel_translator.py
View File

@@ -124,6 +124,7 @@ class ExcelTranslator:
target_language: str,
source_language: str = "auto",
progress_callback: Optional[Callable[[Dict[str, Any]], None]] = None,
translate_images: bool = False,
) -> Path:
"""
Translate an Excel file while preserving all formatting and structure.
@@ -300,6 +301,14 @@ class ExcelTranslator:
new_name=new_name,
)
if translate_images:
_log_info("excel_image_translation_start", sheets=len(workbook.sheetnames))
for sheet_name in workbook.sheetnames:
try:
self._translate_images(workbook[sheet_name], target_language)
except Exception as e:
_log_error("excel_sheet_images_failed", sheet_name=sheet_name, error=str(e))
try:
workbook.save(output_path)
except Exception as e:
@@ -413,7 +422,37 @@ class ExcelTranslator:
self, texts: List[str], target_language: str, source_language: str
) -> List[str]:
"""Translate using the TranslationProvider.translate_batch() interface."""
translated = self._provider.translate_batch(texts, target_language, source_language)
from services.providers.base import TranslationProvider as NewTranslationProvider
is_new_style = False
if isinstance(self._provider, NewTranslationProvider):
is_new_style = True
elif hasattr(self._provider, "__class__") and self._provider.__class__.__name__ in (
"MockTranslationProvider",
"Mock",
"MagicMock",
):
is_new_style = True
if is_new_style:
from services.providers.schemas import TranslationRequest
custom_prompt = getattr(self, "_custom_prompt", None)
metadata = {"custom_prompt": custom_prompt} if custom_prompt else None
requests = [
TranslationRequest(
text=t,
target_language=target_language,
source_language=source_language,
metadata=metadata,
)
for t in texts
]
responses = self._provider.translate_batch(requests)
translated = [resp.translated_text for resp in responses]
else:
translated = self._provider.translate_batch(texts, target_language, source_language)
return [
t if (t and t.strip()) else orig
for t, orig in zip(translated, texts)
@@ -704,11 +743,24 @@ class ExcelTranslator:
def _translate_image_with_legacy(
self, image_path: str, target_language: str
) -> str:
"""Translate image using legacy service."""
from services.translation_service import translation_service
"""Translate image using active provider or legacy service."""
if self._provider and hasattr(self._provider, "translate_image"):
try:
return self._provider.translate_image(image_path, target_language)
except Exception as e:
_log_error("excel_image_translation_provider_error", error=str(e))
if hasattr(translation_service, "translate_image"):
return translation_service.translate_image(image_path, target_language)
from services.translation_service import translation_service
# Temporarily enable translate_images flag on translation_service to bypass the hardcoded check
old_val = getattr(translation_service, "translate_images", False)
try:
translation_service.translate_images = True
if hasattr(translation_service, "translate_image"):
return translation_service.translate_image(image_path, target_language)
except Exception as e:
_log_error("excel_image_translation_legacy_error", error=str(e))
finally:
translation_service.translate_images = old_val
return ""

108
translators/pptx_translator.py
View File

@@ -169,6 +169,7 @@ class PowerPointTranslator:
target_language: str,
source_language: str = "auto",
progress_callback: Optional[Callable[[Dict[str, Any]], None]] = None,
translate_images: bool = False,
) -> Path:
"""
Translate a PowerPoint presentation while preserving all formatting.
@@ -308,6 +309,12 @@ class PowerPointTranslator:
if target_language.lower() in RTL_LANGUAGES:
_apply_rtl_to_presentation(presentation)
if translate_images:
try:
self._translate_images(presentation, target_language)
except Exception as e:
_log_error("pptx_document_images_failed", error=str(e))
try:
presentation.save(output_path)
except Exception as e:
@@ -407,7 +414,37 @@ class PowerPointTranslator:
self, texts: List[str], target_language: str, source_language: str
) -> List[str]:
"""Translate using the TranslationProvider.translate_batch() interface."""
translated = self._provider.translate_batch(texts, target_language, source_language)
from services.providers.base import TranslationProvider as NewTranslationProvider
is_new_style = False
if isinstance(self._provider, NewTranslationProvider):
is_new_style = True
elif hasattr(self._provider, "__class__") and self._provider.__class__.__name__ in (
"MockTranslationProvider",
"Mock",
"MagicMock",
):
is_new_style = True
if is_new_style:
from services.providers.schemas import TranslationRequest
custom_prompt = getattr(self, "_custom_prompt", None)
metadata = {"custom_prompt": custom_prompt} if custom_prompt else None
requests = [
TranslationRequest(
text=t,
target_language=target_language,
source_language=source_language,
metadata=metadata,
)
for t in texts
]
responses = self._provider.translate_batch(requests)
translated = [resp.translated_text for resp in responses]
else:
translated = self._provider.translate_batch(texts, target_language, source_language)
return [
t if (t and t.strip()) else orig
for t, orig in zip(translated, texts)
@@ -606,5 +643,74 @@ class PowerPointTranslator:
if total_translated > 0:
_log_info("pptx_charts_translated", total=total_translated)
def _translate_images(self, presentation, target_language: str) -> None:
"""Extract and translate text from images in PowerPoint.
Appends the translated text to the slide notes."""
try:
from pptx.enum.shapes import MSO_SHAPE_TYPE
_log_info("pptx_image_translation_start", slides=len(presentation.slides))
for slide_idx, slide in enumerate(presentation.slides):
for shape_idx, shape in enumerate(slide.shapes):
if shape.shape_type != MSO_SHAPE_TYPE.PICTURE:
continue
try:
image = getattr(shape, "image", None)
if not image:
continue
image_data = image.blob
ext = getattr(image, "ext", "png") or "png"
import tempfile
import os
with tempfile.NamedTemporaryFile(suffix=f".{ext}", delete=False) as tmp:
tmp.write(image_data)
tmp_path = tmp.name
translated_text = self._translate_image_text(tmp_path, target_language)
try:
os.unlink(tmp_path)
except:
pass
if translated_text and translated_text.strip():
notes_slide = slide.notes_slide
notes_text_frame = notes_slide.notes_text_frame
notes_text = notes_text_frame.text or ""
separator = "\n" if notes_text else ""
notes_text_frame.text = f"{notes_text}{separator}[Image translation: {translated_text.strip()}]"
_log_info("pptx_image_translation_added", slide=slide_idx, shape=shape_idx)
except Exception as shape_err:
_log_error("pptx_image_shape_translation_error", slide=slide_idx, error=str(shape_err))
except Exception as e:
_log_error("pptx_image_processing_error", error=str(e))
def _translate_image_text(
self, image_path: str, target_language: str
) -> str:
"""Translate image using active provider or legacy service."""
if self._provider and hasattr(self._provider, "translate_image"):
try:
return self._provider.translate_image(image_path, target_language)
except Exception as e:
_log_error("pptx_image_translation_provider_error", error=str(e))
from services.translation_service import translation_service
# Temporarily enable translate_images flag on translation_service to bypass the hardcoded check
old_val = getattr(translation_service, "translate_images", False)
try:
translation_service.translate_images = True
if hasattr(translation_service, "translate_image"):
return translation_service.translate_image(image_path, target_language)
except Exception as e:
_log_error("pptx_image_translation_legacy_error", error=str(e))
finally:
translation_service.translate_images = old_val
return ""
pptx_translator = PowerPointTranslator()

119
translators/word_translator.py
View File

@@ -189,6 +189,7 @@ class WordTranslator:
target_language: str,
source_language: str = "auto",
progress_callback: Optional[Callable[[Dict[str, Any]], None]] = None,
translate_images: bool = False,
) -> Path:
"""
Translate a Word document while preserving all formatting and structure.
@@ -341,6 +342,12 @@ class WordTranslator:
}
)
if translate_images:
try:
self._translate_images(document, target_language)
except Exception as e:
_log_error("word_document_images_failed", error=str(e))
try:
document.save(output_path)
except Exception as e:
@@ -462,7 +469,37 @@ class WordTranslator:
self, texts: List[str], target_language: str, source_language: str
) -> List[str]:
"""Translate using the TranslationProvider.translate_batch() interface."""
translated = self._provider.translate_batch(texts, target_language, source_language)
from services.providers.base import TranslationProvider as NewTranslationProvider
is_new_style = False
if isinstance(self._provider, NewTranslationProvider):
is_new_style = True
elif hasattr(self._provider, "__class__") and self._provider.__class__.__name__ in (
"MockTranslationProvider",
"Mock",
"MagicMock",
):
is_new_style = True
if is_new_style:
from services.providers.schemas import TranslationRequest
custom_prompt = getattr(self, "_custom_prompt", None)
metadata = {"custom_prompt": custom_prompt} if custom_prompt else None
requests = [
TranslationRequest(
text=t,
target_language=target_language,
source_language=source_language,
metadata=metadata,
)
for t in texts
]
responses = self._provider.translate_batch(requests)
translated = [resp.translated_text for resp in responses]
else:
translated = self._provider.translate_batch(texts, target_language, source_language)
# Fallback: keep original text for any empty/failed result
return [
t if (t and t.strip()) else orig
@@ -1075,5 +1112,85 @@ class WordTranslator:
for table in hf.tables:
self._collect_from_table(table, text_elements)
def _translate_images(self, document: Document, target_language: str) -> None:
"""Extract and translate text from images in Word document.
Inserts the translated text as a caption paragraph under each image."""
try:
inline_shapes = getattr(document, "inline_shapes", [])
_log_info("word_image_translation_start", count=len(inline_shapes))
for idx, shape in enumerate(inline_shapes):
# Type 3 is picture, type 12 is linked picture
if not (hasattr(shape, "type") and shape.type in (3, 12)):
continue
try:
image = getattr(shape, "image", None)
if not image:
continue
image_data = image.blob
ext = getattr(image, "ext", "png") or "png"
import tempfile
import os
with tempfile.NamedTemporaryFile(suffix=f".{ext}", delete=False) as tmp:
tmp.write(image_data)
tmp_path = tmp.name
translated_text = self._translate_image_text(tmp_path, target_language)
try:
os.unlink(tmp_path)
except:
pass
if translated_text and translated_text.strip():
parent = shape._inline.getparent()
while parent is not None and parent.tag != qn("w:p"):
parent = parent.getparent()
if parent is not None:
p_elem = parent
new_p_elem = OxmlElement("w:p")
p_elem.addnext(new_p_elem)
from docx.text.paragraph import Paragraph
new_p = Paragraph(new_p_elem, document)
from docx.shared import Pt, RGBColor
run = new_p.add_run(f" [Image translation: {translated_text.strip()}] ")
run.font.italic = True
run.font.size = Pt(9)
run.font.color.rgb = RGBColor(128, 128, 128)
_log_info("word_image_translation_added", index=idx)
except Exception as shape_err:
_log_error("word_image_shape_translation_error", index=idx, error=str(shape_err))
except Exception as e:
_log_error("word_image_processing_error", error=str(e))
def _translate_image_text(
self, image_path: str, target_language: str
) -> str:
"""Translate image using active provider or legacy service."""
if self._provider and hasattr(self._provider, "translate_image"):
try:
return self._provider.translate_image(image_path, target_language)
except Exception as e:
_log_error("word_image_translation_provider_error", error=str(e))
from services.translation_service import translation_service
# Temporarily enable translate_images flag on translation_service to bypass the hardcoded check
old_val = getattr(translation_service, "translate_images", False)
try:
translation_service.translate_images = True
if hasattr(translation_service, "translate_image"):
return translation_service.translate_image(image_path, target_language)
except Exception as e:
_log_error("word_image_translation_legacy_error", error=str(e))
finally:
translation_service.translate_images = old_val
return ""
word_translator = WordTranslator()