Upload folder using huggingface_hub

client/src/components/Refinity.tsx

@@ -54,6 +54,7 @@ const Refinity: React.FC = () => {
   const [taskMenuOpen, setTaskMenuOpen] = React.useState<boolean>(false);
   const [pastedTranslation, setPastedTranslation] = React.useState<string>('');
   const [taskStageNote, setTaskStageNote] = React.useState<string>('');
+  const [showPreviewDiff, setShowPreviewDiff] = React.useState<boolean>(false);
 
   const task = React.useMemo(() => tasks.find(t => t.id === selectedTaskId) || tasks[0], [tasks, selectedTaskId]);
   const taskVersions = React.useMemo(() => versions.filter(v => v.taskId === (task?.id || '')), [versions, task?.id]);
@@ -385,7 +386,7 @@ const Refinity: React.FC = () => {
                             <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">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>
+                          <button onClick={()=>{ setPreviewVersionId(v.id); setShowPreviewDiff(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>
@@ -403,6 +404,7 @@ const Refinity: React.FC = () => {
           version={taskVersions.find(v => v.id === previewVersionId) || null}
           onBack={()=>setStage('flow')}
           onEdit={()=>{ if (previewVersionId) { setCurrentVersionId(previewVersionId); setStage('editor'); } }}
+          compareInitially={showPreviewDiff}
         />
       )}
 
@@ -513,7 +515,12 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
 
 export default Refinity;
 
-const PreviewPane: React.FC<{ version: Version | null; onBack: ()=>void; onEdit: ()=>void }>=({ version, onBack, onEdit })=>{
+const PreviewPane: React.FC<{ version: Version | null; onBack: ()=>void; onEdit: ()=>void; compareInitially?: boolean }>=({ version, onBack, onEdit, compareInitially })=>{
+  const [diffHtml, setDiffHtml] = React.useState<string>('');
+  const [showDiff, setShowDiff] = React.useState<boolean>(!!compareInitially);
+  React.useEffect(()=>{
+    setShowDiff(!!compareInitially);
+  },[compareInitially]);
   if (!version) return (
     <div>
       <div className="text-gray-700">No version selected.</div>
@@ -522,6 +529,18 @@ const PreviewPane: React.FC<{ version: Version | null; onBack: ()=>void; onEdit:
       </div>
     </div>
   );
+  const doCompare = async ()=>{
+    try {
+      const base = ((api.defaults as any)?.baseURL as string || '').replace(/\/$/, '');
+      // Compare this version with its parent if available
+      const prevText = (version as any)?.parentContent || '';
+      const resp = await fetch(`${base}/api/refinity/diff`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prev: prevText, current: version.content || '' }) });
+      const data = await resp.json().catch(()=>({}));
+      if (!resp.ok) throw new Error(data?.error || 'Diff failed');
+      setDiffHtml(String(data?.html || ''));
+      setShowDiff(true);
+    } catch {}
+  };
   return (
     <div>
       <div className="mb-3 text-gray-700 text-sm">Original: {version.originalAuthor} · Revised by: {version.revisedBy || '—'} (v{version.versionNumber})</div>
@@ -530,12 +549,18 @@ const PreviewPane: React.FC<{ version: Version | null; onBack: ()=>void; onEdit:
         <div className="relative rounded-xl bg-white/10 backdrop-blur-md ring-1 ring-inset ring-white/30 shadow-[inset_0_0.5px_0_rgba(255,255,255,0.5),inset_0_-1px_1.5px_rgba(0,0,0,0.12)] p-6">
           <div className="pointer-events-none absolute inset-0 rounded-xl opacity-50 [background:linear-gradient(to_bottom,rgba(255,255,255,0.3),rgba(255,255,255,0)_28%),linear-gradient(to_right,rgba(255,255,255,0.28),rgba(255,255,255,0)_28%)]" />
           <div className="pointer-events-none absolute inset-0 rounded-xl bg-gradient-to-tr from-white/30 via-white/10 to-transparent opacity-45" />
-          <div className="relative whitespace-pre-wrap text-gray-900 min-h-[220px]">{version.content}</div>
+          {!showDiff && (
+            <div className="relative whitespace-pre-wrap text-gray-900 min-h-[220px]">{version.content}</div>
+          )}
+          {showDiff && (
+            <div className="relative prose prose-sm max-w-none text-gray-900" dangerouslySetInnerHTML={{ __html: diffHtml }} />
+          )}
         </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">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>
+        <button onClick={doCompare} 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">Compare</button>
       </div>
     </div>
   );