Upload folder using huggingface_hub

client/src/components/Refinity.tsx

@@ -367,7 +367,7 @@ const Refinity: React.FC = () => {
             </div>
           </div>
 
-          <div className="relative overflow-hidden py-10" style={{ perspective: '1200px' }}>
+          <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>
@@ -375,7 +375,7 @@ const Refinity: React.FC = () => {
               <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-10 px-16 transition-transform duration-300"
+              className="relative h-[360px] px-16"
               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)));
@@ -390,19 +390,18 @@ const Refinity: React.FC = () => {
                 const offset = idx - focusedIndex;
                 const abs = Math.abs(offset);
                 const isCenter = abs === 0;
-                const translateX = offset * 300; // spacing between cards (wider)
-                const rotateY = -offset * 35; // gentler angle
-                const translateZ = -abs * 120; // less depth to avoid squish
-                const scale = isCenter ? 1.02 : 1.0; // minimal size change
+                const delta = 580; // card width + gap
+                const translateX = offset * delta;
+                const scale = isCenter ? 1.02 : 1.0;
                 const opacity = isCenter ? 1 : Math.max(0.6, 1 - abs * 0.15);
                 const zIndex = 100 - abs;
                 const snippet = (v.content || '').slice(0, 180) + ((v.content || '').length > 180 ? '…' : '');
                 return (
                   <div
                     key={v.id}
-                    className="transition-transform duration-300 cursor-pointer"
+                    className="transition-transform duration-300 cursor-pointer absolute top-0 left-1/2"
                     style={{
-                      transform: `translateX(${translateX}px) translateZ(${translateZ}px) rotateY(${rotateY}deg) scale(${scale})`,
+                      transform: `translateX(${translateX - 260}px) translateX(-50%) scale(${scale})`,
                       opacity,
                       zIndex,
                     }}
@@ -412,11 +411,7 @@ const Refinity: React.FC = () => {
                       <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>
+                      {/* No reflection to preserve clarity */}
                       {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">