Upload folder using huggingface_hub

client/src/components/Refinity.tsx

@@ -0,0 +1,239 @@
+import React from 'react';
+
+type Stage = 'task' | 'flow' | 'editor';
+
+type Version = {
+  id: string;
+  taskId: string;
+  originalAuthor: string;
+  revisedBy?: string;
+  versionNumber: number; // 1-based
+  content: string; // translated text
+  parentVersionId?: string; // lineage
+};
+
+type Task = {
+  id: string;
+  title: string;
+  sourceText: string;
+};
+
+const mockTasks: Task[] = [
+  { id: 't1', title: 'Refinity Demo Task 1', sourceText: 'The quick brown fox jumps over the lazy dog.' },
+  { id: 't2', title: 'Refinity Demo Task 2', sourceText: 'To be, or not to be, that is the question.' },
+];
+
+const Refinity: React.FC = () => {
+  const [stage, setStage] = React.useState<Stage>('task');
+  const [tasks] = React.useState<Task[]>(mockTasks);
+  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>(() => {
+    try {
+      const u = localStorage.getItem('user');
+      const name = u ? (JSON.parse(u)?.name || JSON.parse(u)?.email || 'Anonymous') : 'Anonymous';
+      return String(name);
+    } catch {
+      return 'Anonymous';
+    }
+  });
+
+  // File upload (.docx placeholder)
+  const [uploading, setUploading] = React.useState(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]);
+
+  const focusedIndex = React.useMemo(() => {
+    const idx = taskVersions.findIndex(v => v.id === currentVersionId);
+    return idx >= 0 ? idx : (taskVersions.length ? taskVersions.length - 1 : -1);
+  }, [taskVersions, currentVersionId]);
+
+  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 nextVersionNumber = (taskVersions[taskVersions.length - 1]?.versionNumber || 0) + 1;
+      const newVersion: Version = {
+        id: `v_${Date.now()}`,
+        taskId: task?.id || 't1',
+        originalAuthor: username,
+        revisedBy: undefined,
+        versionNumber: nextVersionNumber,
+        content: baseText,
+      };
+      setVersions(prev => [...prev, newVersion]);
+      setCurrentVersionId(newVersion.id);
+      setStage('flow');
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  const assignRandom = () => {
+    const pool = taskVersions.filter(v => (v.originalAuthor !== username && v.revisedBy !== username));
+    if (!pool.length) return;
+    const pick = pool[Math.floor(Math.random() * pool.length)];
+    setCurrentVersionId(pick.id);
+    setStage('editor');
+  };
+
+  const selectManual = (id: string) => {
+    setCurrentVersionId(id);
+    setStage('editor');
+  };
+
+  const handleSaveRevision = (newContent: string) => {
+    const parent = taskVersions.find(v => v.id === currentVersionId);
+    const nextVersionNumber = (taskVersions[taskVersions.length - 1]?.versionNumber || 0) + 1;
+    const v: Version = {
+      id: `v_${Date.now()}`,
+      taskId: task?.id || 't1',
+      originalAuthor: parent?.originalAuthor || username,
+      revisedBy: username,
+      versionNumber: nextVersionNumber,
+      content: newContent,
+      parentVersionId: parent?.id,
+    };
+    setVersions(prev => [...prev, v]);
+    setCurrentVersionId(v.id);
+    setStage('flow');
+  };
+
+  return (
+    <div className="bg-slate-900 text-slate-50">
+      {/* Stage 1: Task Creation / Selection */}
+      {stage === 'task' && (
+        <div className="p-6">
+          <div className="mb-6">
+            <h2 className="text-2xl font-semibold">Refinity</h2>
+            <p className="text-slate-300">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">
+                {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>
+          </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>
+          </div>
+        </div>
+      )}
+
+      {/* Stage 2: Version Flow */}
+      {stage === 'flow' && (
+        <div className="p-6">
+          <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>
+            </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>
+            </div>
+          </div>
+
+          <div className="relative overflow-x-auto py-10">
+            <div className="flex items-center gap-8 min-w-max px-6">
+              {taskVersions.map((v, idx) => {
+                const isCenter = idx === focusedIndex;
+                const sideOffset = Math.abs(idx - focusedIndex);
+                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);
+                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`}
+                         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>
+                      {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>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Stage 3: Editor */}
+      {stage === 'editor' && (
+        <EditorPane
+          source={task?.sourceText || ''}
+          initialTranslation={taskVersions.find(v => v.id === currentVersionId)?.content || ''}
+          onBack={()=>setStage('flow')}
+          onSave={handleSaveRevision}
+        />
+      )}
+    </div>
+  );
+};
+
+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 save = async ()=>{
+    setSaving(true);
+    try {
+      onSave(text);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  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.');
+  };
+
+  return (
+    <div className="p-6">
+      <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>
+        <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="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>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Refinity;
+
+

client/src/pages/Toolkit.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import SyntaxReorderer from '../components/SyntaxReorderer';
+import Refinity from '../components/Refinity';
 import { api } from '../services/api';
 import { 
   DocumentTextIcon,
@@ -9,7 +9,7 @@ import {
   ArrowsRightLeftIcon
 } from '@heroicons/react/24/outline';
 
-type ToolKey = 'quality-lens' | 'mymemory' | 'dictionary' | 'syntax-reorderer' | 'mt' | 'links';
+type ToolKey = 'quality-lens' | 'mymemory' | 'dictionary' | 'refinity' | 'mt' | 'links';
 
 interface MyMemoryResponse {
   responseData?: {
@@ -50,7 +50,7 @@ const TOOL_URLS: Record<ToolKey, string> = {
   'quality-lens': 'https://linguabot-quality-lens.hf.space',
   'mymemory': '',
   'dictionary': '',
-  'syntax-reorderer': '',
+  'refinity': '',
   'mt': '',
   'links': ''
 };
@@ -124,7 +124,7 @@ const Toolkit: React.FC = () => {
       { key: 'quality-lens' as ToolKey, name: 'Quality Lens', desc: 'BLASER/COMET QE + Hallucination', type: 'iframe' },
       { key: 'mymemory' as ToolKey, name: 'MyMemory', desc: 'Public MT memory lookup', type: 'native' },
       { key: 'dictionary' as ToolKey, name: 'Dictionary (EN⇄ZH)', desc: 'Iciba suggest', type: 'native' },
-      { key: 'syntax-reorderer' as ToolKey, name: 'Syntax Reorderer', desc: 'EN↔ZH structural practice', type: 'native' },
+      { key: 'refinity' as ToolKey, name: 'Refinity', desc: 'Infinite peer-based revision', type: 'native' },
       { key: 'links' as ToolKey, name: 'Useful Links', desc: 'Curated external resources', type: 'native' }
     ];
     if (!isVisitor) base.splice(2, 0, { key: 'mt' as ToolKey, name: 'MT (DeepL/Google)', desc: 'Translate with MT engines', type: 'native' });
@@ -613,19 +613,19 @@ const Toolkit: React.FC = () => {
                 </div>
               )}
 
-              {selectedTool === 'syntax-reorderer' && (
+              {selectedTool === 'refinity' && (
                 <div>
                   <div className="flex items-center space-x-3 mb-4">
-                    <div className="bg-amber-600 rounded-lg p-2">
-                      <DocumentTextIcon className="h-5 w-5 text-white" />
+                    <div className="bg-indigo-600 rounded-lg p-2">
+                      <WrenchScrewdriverIcon className="h-5 w-5 text-white" />
                     </div>
                     <div>
-                      <h3 className="text-amber-900 font-semibold text-xl">Syntax Reorderer (EN↔ZH)</h3>
-                      <p className="text-gray-600 text-sm">Label chunks, assign roles, and reorder to practice structural shifts.</p>
+                      <h3 className="text-indigo-900 font-semibold text-xl">Refinity</h3>
+                      <p className="text-gray-600 text-sm">An elegant, collaborative, infinite revision platform.</p>
                     </div>
                   </div>
                   <div className="border rounded-lg overflow-hidden">
-                    <SyntaxReorderer />
+                    <Refinity />
                   </div>
                 </div>
               )}