Upload folder using huggingface_hub

client/src/components/Refinity.tsx

@@ -86,10 +86,12 @@ const Refinity: React.FC = () => {
     })();
   }, [task?.id]);
 
+  const [flowIndex, setFlowIndex] = React.useState<number>(0);
   const focusedIndex = React.useMemo(() => {
     const idx = taskVersions.findIndex(v => v.id === currentVersionId);
-    return idx >= 0 ? idx : (taskVersions.length ? taskVersions.length - 1 : -1);
-  }, [taskVersions, currentVersionId]);
+    if (idx >= 0) return idx;
+    return Math.min(Math.max(taskVersions.length - 1, 0), flowIndex);
+  }, [taskVersions, currentVersionId, flowIndex]);
 
   const uploadDocx = async (file: File) => {
     setUploading(true);
@@ -348,14 +350,21 @@ const Refinity: React.FC = () => {
             </div>
           </div>
 
-          <div className="relative overflow-x-auto py-10">
-            <div className="flex items-center gap-8 min-w-max px-6">
+          <div className="relative overflow-hidden py-10">
+            <div className="absolute left-2 top-1/2 -translate-y-1/2 z-10">
+              <button onClick={()=> setFlowIndex((i)=> Math.max(i-1, 0))} className="px-2 py-1 rounded-2xl bg-white/50 ring-1 ring-white/50 backdrop-blur-md text-sm">‹</button>
+            </div>
+            <div className="absolute right-2 top-1/2 -translate-y-1/2 z-10">
+              <button onClick={()=> setFlowIndex((i)=> Math.min(i+1, Math.max(taskVersions.length-1, 0)))} className="px-2 py-1 rounded-2xl bg-white/50 ring-1 ring-white/50 backdrop-blur-md text-sm">›</button>
+            </div>
+            <div className="flex items-center justify-center gap-8 px-16 transition-transform duration-300">
               {taskVersions.map((v, idx) => {
                 const isCenter = idx === focusedIndex;
                 const sideOffset = Math.abs(idx - focusedIndex);
-                const scale = isCenter ? 1.0 : Math.max(0.8, 1 - sideOffset * 0.08);
-                const rotate = isCenter ? 0 : (idx < focusedIndex ? -12 : 12);
-                const opacity = isCenter ? 1 : Math.max(0.35, 1 - sideOffset * 0.2);
+                // Apple coverflow style: center slightly larger; others equal smaller, slight angle
+                const scale = isCenter ? 1.05 : 0.9;
+                const rotate = isCenter ? 0 : (idx < focusedIndex ? -10 : 10);
+                const opacity = isCenter ? 1 : 0.85;
                 const snippet = (v.content || '').slice(0, 160) + ((v.content || '').length > 160 ? '…' : '');
                 return (
                   <div key={v.id} className="transition-transform duration-300"
@@ -374,8 +383,9 @@ const Refinity: React.FC = () => {
                           <button onClick={()=>selectManual(v.id)} className="relative overflow-hidden inline-flex items-center justify-center gap-2 px-3 py-2 text-sm font-medium rounded-2xl text-white ring-1 ring-inset ring-white/50 backdrop-blur-md backdrop-brightness-110 backdrop-saturate-150 bg-indigo-600/70 active:translate-y-0.5 transition-all duration-200">
                             <div className="pointer-events-none absolute inset-0 rounded-2xl opacity-60 [background:linear-gradient(to_bottom,rgba(255,255,255,0.35),rgba(255,255,255,0)_28%),linear-gradient(to_right,rgba(255,255,255,0.35),rgba(255,255,255,0)_28%)]" />
                             <div className="pointer-events-none absolute inset-0 rounded-2xl bg-gradient-to-tr from-white/30 via-white/10 to-transparent opacity-50" />
-                            <span className="relative z-10">Edit</span>
+                            <span className="relative z-10">Revise</span>
                           </button>
+                          <button onClick={()=>{ setPreviewVersionId(v.id); setShowDiff(true); setStage('preview'); }} className="relative overflow-hidden inline-flex items-center justify-center gap-2 px-3 py-2 text-sm font-medium rounded-2xl text-black ring-1 ring-inset ring-white/50 backdrop-blur-md bg-white/30 active:translate-y-0.5 transition-all duration-200">Compare</button>
                         </div>
                       )}
                     </div>
@@ -440,13 +450,21 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
   const downloadWithTrackChanges = async ()=>{
     try {
       const base = ((api.defaults as any)?.baseURL as string || '').replace(/\/$/, '');
-      const resp = await fetch(`${base}/api/refinity/track-changes`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prev: initialTranslation || '', current: text || '' }) });
+      const taskNameSafe = (task?.title || 'Task').replace(/[^\w\-\s]/g,'').replace(/\s+/g,'_');
+      const userNameSafe = (username || 'User').replace(/[^\w\-\s]/g,'').replace(/\s+/g,'_');
+      const currentNum = (String((initialTranslation||'').length) && 'v') + String((text||'').length ? '' : '');
+      const vNum = (()=>{
+        const target = (task?.id ? (versions.filter(v=>v.taskId===task.id).slice(-1)[0]?.versionNumber || 0) : 0) + 1;
+        return `v${target}`;
+      })();
+      const filename = `${taskNameSafe}_${userNameSafe}_${vNum}.docx`;
+      const resp = await fetch(`${base}/api/refinity/track-changes`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prev: initialTranslation || '', current: text || '', filename }) });
       if (!resp.ok) throw new Error('Export failed');
       const blob = await resp.blob();
       const url = window.URL.createObjectURL(blob);
       const a = document.createElement('a');
       a.href = url;
-      a.download = 'refinity-tracked.docx';
+      a.download = filename;
       document.body.appendChild(a);
       a.click();
       a.remove();
@@ -516,7 +534,7 @@ const PreviewPane: React.FC<{ version: Version | null; onBack: ()=>void; onEdit:
         </div>
       </div>
       <div className="mt-4 flex gap-3">
-        <button onClick={onEdit} className="relative overflow-hidden inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium rounded-2xl text-white ring-1 ring-inset ring-white/50 backdrop-blur-md backdrop-brightness-110 backdrop-saturate-150 bg-indigo-600/70 active:translate-y-0.5 transition-all duration-200">Edit</button>
+        <button onClick={onEdit} className="relative overflow-hidden inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium rounded-2xl text-white ring-1 ring-inset ring-white/50 backdrop-blur-md backdrop-brightness-110 backdrop-saturate-150 bg-indigo-600/70 active:translate-y-0.5 transition-all duration-200">Revise</button>
         <button onClick={onBack} className="relative overflow-hidden inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium rounded-2xl text-black ring-1 ring-inset ring-white/50 backdrop-blur-md bg-white/30 active:translate-y-0.5 transition-all duration-200">Back</button>
       </div>
     </div>