Upload folder using huggingface_hub

client/src/components/Refinity.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { api } from '../services/api';
 
-type Stage = 'task' | 'flow' | 'editor';
+type Stage = 'task' | 'flow' | 'preview' | 'editor';
 
 type Version = {
   id: string;
@@ -30,6 +30,7 @@ const Refinity: React.FC = () => {
   const [selectedTaskId, setSelectedTaskId] = React.useState<string>('');
   const [versions, setVersions] = React.useState<Version[]>([]);
   const [currentVersionId, setCurrentVersionId] = React.useState<string | null>(null);
+  const [previewVersionId, setPreviewVersionId] = React.useState<string | null>(null);
   const [username] = React.useState<string>(() => {
     try {
       const u = localStorage.getItem('user');
@@ -261,13 +262,13 @@ const Refinity: React.FC = () => {
             <button onClick={assignRandom} 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">
               <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">Start Revising (Random)</span>
+              <span className="relative z-10">Random Mode</span>
             </button>
             {taskVersions.length > 0 && (
               <button onClick={()=>setStage('flow')} 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">
                 <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">Browse Versions</span>
+                <span className="relative z-10">Manual Selection</span>
               </button>
             )}
             <button onClick={()=>setShowAddTask(v=>!v)} 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">
@@ -337,25 +338,20 @@ const Refinity: React.FC = () => {
                 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);
+                const snippet = (v.content || '').slice(0, 160) + ((v.content || '').length > 160 ? '…' : '');
                 return (
                   <div key={v.id} className="transition-transform duration-300"
                        style={{ transform: `scale(${scale}) rotateY(${rotate}deg)`, opacity }}>
-                    <div className="relative w-[520px] rounded-xl p-5 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)]"
-                         onClick={()=>setCurrentVersionId(v.id)}>
+                    <div className="relative w-[520px] rounded-xl p-5 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)]">
                       <div className="text-gray-800 text-sm mb-2">Original: {v.originalAuthor}</div>
                       <div className="text-gray-600 text-xs mb-3">Revised by: {v.revisedBy ? `${v.revisedBy} (v${v.versionNumber})` : `— (v${v.versionNumber})`}</div>
-                      <div className="text-gray-900 whitespace-pre-wrap break-words min-h-[160px]">{v.content}</div>
+                      <div className="text-gray-900 whitespace-pre-wrap break-words min-h-[100px]">{snippet}</div>
                       {isCenter && (
                         <div className="mt-4 flex gap-3">
-                          <button 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">
+                          <button onClick={()=>{ setPreviewVersionId(v.id); 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">
                             <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">Compare</span>
-                          </button>
-                          <button 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">
-                            <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">Comment</span>
+                            <span className="relative z-10">Preview</span>
                           </button>
                           <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%)]" />
@@ -373,6 +369,15 @@ const Refinity: React.FC = () => {
         </div>
       )}
 
+      {/* Stage: Preview full text */}
+      {stage === 'preview' && (
+        <PreviewPane
+          version={taskVersions.find(v => v.id === previewVersionId) || null}
+          onBack={()=>setStage('flow')}
+          onEdit={()=>{ if (previewVersionId) { setCurrentVersionId(previewVersionId); setStage('editor'); } }}
+        />
+      )}
+
       {/* Stage 3: Editor */}
       {stage === 'editor' && (
         <EditorPane
@@ -472,4 +477,32 @@ 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 })=>{
+  if (!version) return (
+    <div>
+      <div className="text-gray-700">No version selected.</div>
+      <div className="mt-3">
+        <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>
+  );
+  return (
+    <div>
+      <div className="mb-3 text-gray-700 text-sm">Original: {version.originalAuthor} · Revised by: {version.revisedBy || '—'} (v{version.versionNumber})</div>
+      <div className="relative rounded-xl">
+        <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-indigo-200/45 via-indigo-100/40 to-indigo-300/45" />
+        <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>
+        </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={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>
+  );
+};
+