Upload folder using huggingface_hub

client/src/components/Refinity.tsx

@@ -94,6 +94,19 @@ const Refinity: React.FC = () => {
     return Math.min(Math.max(taskVersions.length - 1, 0), flowIndex);
   }, [taskVersions, currentVersionId, flowIndex]);
 
+  // Keyboard navigation for cover flow
+  React.useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'ArrowLeft') {
+        setFlowIndex(i => Math.max(i - 1, 0));
+      } else if (e.key === 'ArrowRight') {
+        setFlowIndex(i => Math.min(i + 1, Math.max(taskVersions.length - 1, 0)));
+      }
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [taskVersions.length]);
+
   const uploadDocx = async (file: File) => {
     setUploading(true);
     try {
@@ -351,29 +364,56 @@ const Refinity: React.FC = () => {
             </div>
           </div>
 
-          <div className="relative overflow-hidden py-10">
+          <div className="relative overflow-hidden py-10" style={{ perspective: '1200px' }}>
             <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">
+            <div
+              className="flex items-center justify-center gap-10 px-16 transition-transform duration-300"
+              onWheel={(e)=>{
+                if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) {
+                  if (e.deltaX > 0) setFlowIndex(i => Math.min(i+1, Math.max(taskVersions.length-1,0)));
+                  else setFlowIndex(i => Math.max(i-1, 0));
+                } else {
+                  if (e.deltaY > 0) setFlowIndex(i => Math.min(i+1, Math.max(taskVersions.length-1,0)));
+                  else setFlowIndex(i => Math.max(i-1, 0));
+                }
+              }}
+            >
               {taskVersions.map((v, idx) => {
-                const isCenter = idx === focusedIndex;
-                const sideOffset = Math.abs(idx - focusedIndex);
-                // 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 ? '…' : '');
+                const offset = idx - focusedIndex;
+                const abs = Math.abs(offset);
+                const isCenter = abs === 0;
+                const translateX = offset * 260; // spacing between cards
+                const rotateY = -offset * 45; // angle for side cards
+                const translateZ = -abs * 140; // push side cards back a bit
+                const scale = isCenter ? 1.08 : 0.9;
+                const opacity = isCenter ? 1 : Math.max(0.6, 1 - abs * 0.15);
+                const zIndex = 100 - abs;
+                const snippet = (v.content || '').slice(0, 140) + ((v.content || '').length > 140 ? '…' : '');
                 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)]">
+                  <div
+                    key={v.id}
+                    className="transition-transform duration-300 cursor-pointer"
+                    style={{
+                      transform: `translateX(${translateX}px) translateZ(${translateZ}px) rotateY(${rotateY}deg) scale(${scale})`,
+                      opacity,
+                      zIndex,
+                    }}
+                    onClick={() => { if (!isCenter) setFlowIndex(idx); }}
+                  >
+                    <div className="relative w-[520px] rounded-xl p-5 bg-white/10 backdrop-blur-md ring-1 ring-inset ring-white/30 shadow-[0_20px_40px_rgba(0,0,0,0.15),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-[100px]">{snippet}</div>
+                      {/* Reflection */}
+                      <div className="pointer-events-none absolute left-0 right-0 -bottom-20 h-16 opacity-35" style={{ transform: 'scaleY(-1)' }}>
+                        <div className="w-full h-full rounded-xl bg-white/10 ring-1 ring-inset ring-white/30" />
+                        <div className="absolute inset-0 bg-gradient-to-t from-white to-transparent" />
+                      </div>
                       {isCenter && (
                         <div className="mt-4 flex gap-3">
                           <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">