Upload folder using huggingface_hub

client/src/components/Refinity.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { api } from '../services/api';
 
 type Stage = 'task' | 'flow' | 'editor';
 
@@ -29,7 +30,7 @@ const Refinity: React.FC = () => {
   const [selectedTaskId, setSelectedTaskId] = React.useState<string>(mockTasks[0]?.id || '');
   const [versions, setVersions] = React.useState<Version[]>([]);
   const [currentVersionId, setCurrentVersionId] = React.useState<string | null>(null);
-  const [username, setUsername] = React.useState<string>(() => {
+  const [username] = React.useState<string>(() => {
     try {
       const u = localStorage.getItem('user');
       const name = u ? (JSON.parse(u)?.name || JSON.parse(u)?.email || 'Anonymous') : 'Anonymous';
@@ -53,9 +54,13 @@ const Refinity: React.FC = () => {
   const uploadDocx = async (file: File) => {
     setUploading(true);
     try {
-      // Placeholder: In a real implementation, parse .docx client-side or via backend
-      // For now, create a mock text from filename
-      const baseText = `Uploaded translation from ${username}: ${file.name}`;
+      const base = ((api.defaults as any)?.baseURL as string || '').replace(/\/$/, '');
+      const form = new FormData();
+      form.append('file', file);
+      const resp = await fetch(`${base}/api/refinity/parse`, { method: 'POST', body: form });
+      const data = await resp.json().catch(()=>({}));
+      if (!resp.ok) throw new Error(data?.error || 'Failed to parse document');
+      const baseText = String(data?.text || '').trim() || `Uploaded translation by ${username}`;
       const nextVersionNumber = (taskVersions[taskVersions.length - 1]?.versionNumber || 0) + 1;
       const newVersion: Version = {
         id: `v_${Date.now()}`,
@@ -104,48 +109,65 @@ const Refinity: React.FC = () => {
   };
 
   return (
-    <div className="bg-slate-900 text-slate-50">
+    <div className="relative">
+      {/* Indigo-tinted gradient underlay */}
+      <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-indigo-200/45 via-indigo-100/40 to-indigo-300/45" />
+      {/* Glass card container */}
+      <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)]">
+        <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="pointer-events-none absolute inset-0 rounded-xl" style={{ background: 'radial-gradient(120% 120% at 50% 55%, rgba(0,0,0,0.03), rgba(0,0,0,0) 60%)' }} />
+        <div className="pointer-events-none absolute inset-0 rounded-xl bg-indigo-500/10 mix-blend-overlay opacity-30" />
+        <div className="relative p-6">
       {/* Stage 1: Task Creation / Selection */}
       {stage === 'task' && (
-        <div className="p-6">
+        <div>
           <div className="mb-6">
-            <h2 className="text-2xl font-semibold">Refinity</h2>
-            <p className="text-slate-300">Infinite peer-based translation revision</p>
+            <h2 className="text-2xl font-semibold text-black">Refinity</h2>
+            <p className="text-gray-700">Infinite peer-based translation revision</p>
           </div>
           <div className="grid grid-cols-1 md:grid-cols-3 gap-6 items-end">
             <div className="md:col-span-1">
-              <label className="block text-sm text-slate-300 mb-1">Your name</label>
-              <input value={username} onChange={(e)=>setUsername(e.target.value)} className="w-full px-3 py-2 rounded-md bg-slate-800 border border-slate-700 text-slate-100" />
-            </div>
-            <div className="md:col-span-1">
-              <label className="block text-sm text-slate-300 mb-1">Task</label>
-              <select value={selectedTaskId} onChange={(e)=>setSelectedTaskId(e.target.value)} className="w-full px-3 py-2 rounded-md bg-slate-800 border border-slate-700 text-slate-100">
+              <label className="block text-sm text-gray-700 mb-1">Task</label>
+              <select value={selectedTaskId} onChange={(e)=>setSelectedTaskId(e.target.value)} className="w-full px-3 py-2 rounded-lg bg-white/50 backdrop-blur border border-ui-border text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                 {tasks.map(t => <option key={t.id} value={t.id}>{t.title}</option>)}
               </select>
             </div>
-            <div className="md:col-span-1">
-              <label className="block text-sm text-slate-300 mb-1">Upload .docx translation</label>
-              <input type="file" accept=".docx" onChange={(e)=>{ const f=e.target.files?.[0]; if(f) uploadDocx(f); }} className="block w-full text-slate-200 file:px-3 file:py-2 file:rounded-md file:border-0 file:bg-indigo-600 file:text-white hover:file:bg-indigo-700 disabled:file:bg-slate-700" disabled={uploading} />
+            <div className="md:col-span-2">
+              <label className="block text-sm text-gray-700 mb-1">Upload .doc or .docx translation</label>
+              <input type="file" accept=".doc,.docx" onChange={(e)=>{ const f=e.target.files?.[0]; if(f) uploadDocx(f); }} className="block w-full text-gray-800 file:px-4 file:py-2 file:rounded-2xl file:ring-1 file:ring-inset file:ring-white/50 file:backdrop-blur-md file:backdrop-brightness-110 file:backdrop-saturate-150 file:bg-indigo-600/70 file:text-white hover:file:opacity-95 disabled:file:bg-gray-400" disabled={uploading} />
             </div>
           </div>
 
           <div className="mt-8 flex gap-3">
-            <button onClick={assignRandom} className="px-4 py-2 rounded-2xl bg-indigo-600 hover:bg-indigo-700">Start Revising (Random)</button>
-            <button onClick={()=>setStage('flow')} className="px-4 py-2 rounded-2xl bg-slate-800 border border-slate-700">Choose Manually</button>
+            <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>
+            </button>
+            <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">Choose Manually</span>
+            </button>
           </div>
         </div>
       )}
 
       {/* Stage 2: Version Flow */}
       {stage === 'flow' && (
-        <div className="p-6">
+        <div>
           <div className="flex items-center justify-between mb-4">
             <div>
-              <h3 className="text-xl font-semibold">Version Flow — {task?.title}</h3>
-              <div className="text-slate-400 text-sm">Scroll to browse. Center card is focused.</div>
+              <h3 className="text-xl font-semibold text-black">Version Flow — {task?.title}</h3>
+              <div className="text-gray-700 text-sm">Scroll to browse. Center card is focused.</div>
             </div>
             <div className="flex gap-2">
-              <button onClick={()=>setStage('task')} className="px-3 py-2 rounded-md bg-slate-800 border border-slate-700">Back</button>
+              <button onClick={()=>setStage('task')} 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">Back</span>
+              </button>
             </div>
           </div>
 
@@ -160,16 +182,28 @@ const Refinity: React.FC = () => {
                 return (
                   <div key={v.id} className="transition-transform duration-300"
                        style={{ transform: `scale(${scale}) rotateY(${rotate}deg)`, opacity }}>
-                    <div className={`w-[520px] bg-slate-800 border border-slate-700 rounded-xl shadow-xl p-5`}
+                    <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="text-slate-200 text-sm mb-2">Original: {v.originalAuthor}</div>
-                      <div className="text-slate-400 text-xs mb-3">Revised by: {v.revisedBy ? `${v.revisedBy} (v${v.versionNumber})` : `— (v${v.versionNumber})`}</div>
-                      <div className="text-slate-100 whitespace-pre-wrap break-words min-h-[160px]">{v.content}</div>
+                      <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>
                       {isCenter && (
                         <div className="mt-4 flex gap-3">
-                          <button className="px-3 py-2 rounded-md bg-slate-700 border border-slate-600">Compare</button>
-                          <button className="px-3 py-2 rounded-md bg-slate-700 border border-slate-600">Comment</button>
-                          <button onClick={()=>selectManual(v.id)} className="px-3 py-2 rounded-md bg-indigo-600">Edit</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">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>
+                          </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%)]" />
+                            <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>
+                          </button>
                         </div>
                       )}
                     </div>
@@ -190,6 +224,8 @@ const Refinity: React.FC = () => {
           onSave={handleSaveRevision}
         />
       )}
+        </div>
+      </div>
     </div>
   );
 };
@@ -197,6 +233,8 @@ const Refinity: React.FC = () => {
 const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack: ()=>void; onSave: (text: string)=>void }>=({ source, initialTranslation, onBack, onSave })=>{
   const [text, setText] = React.useState<string>(initialTranslation);
   const [saving, setSaving] = React.useState(false);
+  const [diffHtml, setDiffHtml] = React.useState<string>('');
+  const [showDiff, setShowDiff] = React.useState<boolean>(false);
 
   const save = async ()=>{
     setSaving(true);
@@ -207,27 +245,67 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
     }
   };
 
+  const compareNow = async ()=>{
+    try {
+      const base = ((api.defaults as any)?.baseURL as string || '').replace(/\/$/, '');
+      const resp = await fetch(`${base}/api/refinity/diff`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prev: initialTranslation || '', current: text || '' }) });
+      const data = await resp.json().catch(()=>({}));
+      if (!resp.ok) throw new Error(data?.error || 'Diff failed');
+      setDiffHtml(String(data?.html || ''));
+      setShowDiff(true);
+    } catch {}
+  };
+
   const downloadWithTrackChanges = async ()=>{
-    // Placeholder: Implement docx generation with track changes via backend or client lib
-    alert('Download with Track Changes is a placeholder in this prototype.');
+    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 || '' }) });
+      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';
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      window.URL.revokeObjectURL(url);
+    } catch {
+      alert('Export failed');
+    }
   };
 
   return (
-    <div className="p-6">
+    <div>
       <div className="flex items-start gap-6">
         <div className="w-1/2">
-          <div className="mb-2 text-slate-300 text-sm">Source</div>
-          <div className="rounded-lg bg-slate-800 border border-slate-700 p-4 min-h-[420px] whitespace-pre-wrap">{source}</div>
+          <div className="mb-2 text-gray-700 text-sm">Source</div>
+          <div className="relative rounded-lg">
+            <div className="absolute inset-0 rounded-lg bg-gradient-to-r from-indigo-200/45 via-indigo-100/40 to-indigo-300/45" />
+            <div className="relative rounded-lg 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-4 min-h-[420px] whitespace-pre-wrap text-gray-900">
+              {source}
+            </div>
+          </div>
         </div>
         <div className="w-1/2">
-          <div className="mb-2 text-slate-300 text-sm">Translation</div>
-          <textarea value={text} onChange={(e)=>setText(e.target.value)} className="w-full h-[420px] rounded-lg bg-slate-900 border border-slate-700 p-4 text-slate-100 focus:outline-none focus:ring-2 focus:ring-indigo-600" />
+          <div className="mb-2 text-gray-700 text-sm">Translation</div>
+          <textarea value={text} onChange={(e)=>setText(e.target.value)} className="relative z-10 w-full h-[420px] px-4 py-3 border border-ui-border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white" />
           <div className="mt-4 flex gap-3">
-            <button onClick={save} disabled={saving} className="px-4 py-2 rounded-2xl bg-indigo-600 disabled:bg-slate-700">{saving? 'Saving…':'Save'}</button>
-            <button className="px-4 py-2 rounded-2xl bg-slate-800 border border-slate-700">Compare</button>
-            <button onClick={downloadWithTrackChanges} className="px-4 py-2 rounded-2xl bg-slate-800 border border-slate-700">Download with Track Changes</button>
-            <button onClick={onBack} className="ml-auto px-4 py-2 rounded-2xl bg-slate-800 border border-slate-700">Back</button>
+            <button onClick={save} disabled={saving} 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 disabled:bg-gray-400 active:translate-y-0.5 transition-all duration-200">{saving? 'Saving…':'Save'}</button>
+            <button onClick={compareNow} 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>
+            <button onClick={downloadWithTrackChanges} 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">Download with Track Changes</button>
+            <button onClick={onBack} className="ml-auto 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>
+          {showDiff && (
+            <div className="mt-6 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-4">
+                <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 text-gray-900 prose prose-sm max-w-none" dangerouslySetInnerHTML={{ __html: diffHtml }} />
+              </div>
+            </div>
+          )}
         </div>
       </div>
     </div>