Upload folder using huggingface_hub

client/src/components/Refinity.tsx

@@ -53,8 +53,10 @@ type Task = {
 
 // ---- Filename helpers ----
 function toSafeName(input: string): string {
+  // Keep CJK and most unicode letters; remove only forbidden filename characters and collapse whitespace
   return String(input || '')
-    .replace(/[^\w\-\s]/g, '')
+    .replace(/[\\/:*?"<>|]+/g, '_') // forbidden on Windows/macOS
+    .replace(/[\u0000-\u001F\u007F]/g, '') // control chars
     .trim()
     .replace(/\s+/g, '_');
 }
@@ -70,6 +72,30 @@ function yyyymmdd_hhmm(d = new Date()): string {
   return `${Y}${M}${D}_${h}${m}`;
 }
 
+// Download helpers with fail-safes
+async function saveBlobToDisk(blob: Blob, filename: string) {
+  const url = window.URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+  window.URL.revokeObjectURL(url);
+}
+function saveTextFallback(text: string, filename: string) {
+  const blob = new Blob([text || ''], { type: 'text/plain;charset=utf-8' });
+  const fallbackName = filename.replace(/\.docx$/i, '') + '.txt';
+  return saveBlobToDisk(blob, fallbackName);
+}
+async function tryFetchDocx(url: string, body: any): Promise<Response> {
+  return await fetch(url, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body)
+  });
+}
+
 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.' },
@@ -1249,11 +1275,17 @@ const Refinity: React.FC = () => {
                             if (!a || !b || a.id===b.id) return;
                             try {
                               const base = ((api.defaults as any)?.baseURL as string || '').replace(/\/$/, '');
-                              const latestReviser = (b.revisedBy || b.originalAuthor || username || 'User');
-                              const A = a.versionNumber, B = b.versionNumber;
+                              const older = (a.versionNumber <= b.versionNumber) ? a : b;
+                              const newer = (a.versionNumber <= b.versionNumber) ? b : a;
+                              const latestReviser = (newer.revisedBy || newer.originalAuthor || username || 'User');
+                              const A = older.versionNumber, B = newer.versionNumber;
                               const filename = `${toSafeName(task?.title||'Task')}_Compare-v${A}-v${B}_Inline_${yyyymmdd_hhmm()}_${toSafeName(latestReviser)}.docx`;
-                              const body = { prev: a.content||'', current: b.content||'', filename, authorName: latestReviser };
-                              const resp = await fetch(`${base}/api/refinity/track-changes-comments`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
+                              const body = { prev: older.content||'', current: newer.content||'', filename, authorName: latestReviser };
+                              let resp = await fetch(`${base}/api/refinity/track-changes`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
+                              if (!resp.ok) {
+                                // Fallback to plain export of current text
+                                resp = await fetch(`${base}/api/refinity/export-plain`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ current: b.content||'', filename }) });
+                              }
                               if (!resp.ok) throw new Error('Export failed');
                               const blob = await resp.blob();
                               const url = window.URL.createObjectURL(blob);
@@ -1268,18 +1300,27 @@ const Refinity: React.FC = () => {
                             if (!a || !b || a.id===b.id) return;
                             try {
                               const base = ((api.defaults as any)?.baseURL as string || '').replace(/\/$/, '');
-                              const latestReviser = (b.revisedBy || b.originalAuthor || username || 'User');
-                              const A = a.versionNumber, B = b.versionNumber;
+                              const older = (a.versionNumber <= b.versionNumber) ? a : b;
+                              const newer = (a.versionNumber <= b.versionNumber) ? b : a;
+                              const latestReviser = (newer.revisedBy || newer.originalAuthor || username || 'User');
+                              const A = older.versionNumber, B = newer.versionNumber;
                               const filename = `${toSafeName(task?.title||'Task')}_Compare-v${A}-v${B}_Comments_${yyyymmdd_hhmm()}_${toSafeName(latestReviser)}.docx`;
-                              const body = { prev: a.content||'', current: b.content||'', filename, authorName: latestReviser };
-                              const resp = await fetch(`${base}/api/refinity/track-changes-ooxml`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
+                              const body = { prev: older.content||'', current: newer.content||'', filename, authorName: latestReviser, includeComments: false };
+                              let resp = await fetch(`${base}/api/refinity/track-changes-ooxml`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
+                              if (!resp.ok) {
+                                // Fallback to inline; then to plain as last resort
+                                resp = await fetch(`${base}/api/refinity/track-changes-ooxml`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ ...body, includeComments: false }) });
+                                if (!resp.ok) {
+                                  resp = await fetch(`${base}/api/refinity/export-plain`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ current: b.content||'', filename }) });
+                                }
+                              }
                               if (!resp.ok) throw new Error('Export failed');
                               const blob = await resp.blob();
                               const url = window.URL.createObjectURL(blob);
                               const link = document.createElement('a');
                               link.href = url; link.download = filename; document.body.appendChild(link); link.click(); link.remove(); window.URL.revokeObjectURL(url);
                             } catch {}
-                          }} className="block w-full text-left px-3 py-2 text-sm hover:bg-gray-50">Side Comments</button>
+                          }} className="block w-full text-left px-3 py-2 text-sm hover:bg-gray-50">Tracked Changes</button>
                         </div>, document.body
                       )}
                     </div>
@@ -1332,11 +1373,13 @@ const Refinity: React.FC = () => {
                         const b = taskVersions.find(v=>v.id===lastDiffIds.b || v.id===compareB);
                         if (!a || !b || a.id===b.id) return;
                         const base = ((api.defaults as any)?.baseURL as string || '').replace(/\/$/, '');
-                        const latestReviser = (b?.revisedBy || b?.originalAuthor || username || 'User');
-                        const A = a.versionNumber, B = b.versionNumber;
+                        const older = (a.versionNumber <= b.versionNumber) ? a : b;
+                        const newer = (a.versionNumber <= b.versionNumber) ? b : a;
+                        const latestReviser = (newer?.revisedBy || newer?.originalAuthor || username || 'User');
+                        const A = older.versionNumber, B = newer.versionNumber;
                         const filename = `${toSafeName(task?.title||'Task')}_Compare-v${A}-v${B}_Inline_${yyyymmdd_hhmm()}_${toSafeName(latestReviser)}.docx`;
-                        const body = { prev: (a.content||''), current: (b.content||''), filename, authorName: latestReviser };
-                        const resp = await fetch(`${base}/api/refinity/track-changes-comments`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
+                        const body = { prev: (older.content||''), current: (newer.content||''), filename, authorName: latestReviser };
+                        const resp = await fetch(`${base}/api/refinity/track-changes`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
                         if (!resp.ok) throw new Error('Export failed');
                         const blob = await resp.blob();
                         const url = window.URL.createObjectURL(blob);
@@ -1350,10 +1393,12 @@ const Refinity: React.FC = () => {
                         const b = taskVersions.find(v=>v.id===lastDiffIds.b || v.id===compareB);
                         if (!a || !b || a.id===b.id) return;
                         const base = ((api.defaults as any)?.baseURL as string || '').replace(/\/$/, '');
-                        const latestReviser = (b?.revisedBy || b?.originalAuthor || username || 'User');
-                        const A = a.versionNumber, B = b.versionNumber;
+                        const older = (a.versionNumber <= b.versionNumber) ? a : b;
+                        const newer = (a.versionNumber <= b.versionNumber) ? b : a;
+                        const latestReviser = (newer?.revisedBy || newer?.originalAuthor || username || 'User');
+                        const A = older.versionNumber, B = newer.versionNumber;
                         const filename = `${toSafeName(task?.title||'Task')}_Compare-v${A}-v${B}_Comments_${yyyymmdd_hhmm()}_${toSafeName(latestReviser)}.docx`;
-                        const body = { prev: (a.content||''), current: (b.content||''), filename, authorName: latestReviser };
+                        const body = { prev: (older.content||''), current: (newer.content||''), filename, authorName: latestReviser, includeComments: false };
                         const resp = await fetch(`${base}/api/refinity/track-changes-ooxml`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
                         if (!resp.ok) throw new Error('Export failed');
                         const blob = await resp.blob();
@@ -1361,11 +1406,11 @@ const Refinity: React.FC = () => {
                         const link = document.createElement('a');
                         link.href = url; link.download = filename; document.body.appendChild(link); link.click(); link.remove(); window.URL.revokeObjectURL(url);
                       } catch {}
-                    }} className="px-3 py-1.5 text-sm rounded-md border border-gray-300 bg-white">Export (Side Comments)</button>
+                    }} className="px-3 py-1.5 text-sm rounded-md border border-gray-300 bg-white">Export (Tracked Changes)</button>
                     <button onClick={()=>setCompareModalOpen(false)} className="px-3 py-1.5 text-sm rounded-md border border-gray-300 bg-white">Close</button>
                   </div>
                 </div>
-                <div className="prose prose-sm max-w-none text-gray-900" dangerouslySetInnerHTML={{ __html: compareDiffHtml }} />
+                <div className="prose prose-sm max-w-none text-gray-900 whitespace-pre-wrap" dangerouslySetInnerHTML={{ __html: compareDiffHtml }} />
               </div>
             </div>
           )}
@@ -1626,7 +1671,10 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
       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 || ''));
+      // Ensure layout preserved if backend HTML lacks <br/>
+      const raw = String(data?.html || '');
+      const ensured = raw.includes('<br') ? raw : raw.replace(/\n/g, '<br/>');
+      setDiffHtml(ensured);
       setShowDiff(true);
     } catch {}
   };
@@ -1638,7 +1686,7 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
       const userNameSafe = toSafeName(username || 'User');
       const vNum = `v${nextVersionNumber}`;
       const filename = `${taskNameSafe}_${vNum}_Clean_${yyyymmdd_hhmm()}_${userNameSafe}.docx`;
-      const resp = await fetch(`${base}/api/refinity/track-changes`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prev: initialTranslation || '', current: text || '', filename }) });
+      const resp = await fetch(`${base}/api/refinity/track-changes-ooxml`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prev: initialTranslation || '', current: text || '', filename, includeComments: false }) });
       if (!resp.ok) throw new Error('Export failed');
       const blob = await resp.blob();
       const url = window.URL.createObjectURL(blob);
@@ -1763,8 +1811,8 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
               </button>
               {revDownloadOpen && revMenuPos && createPortal(
                 <div style={{ position: 'fixed', left: revMenuPos.left, top: revMenuPos.top, zIndex: 10000, maxHeight: '240px', overflowY: 'auto' }} className="w-56 rounded-md border border-gray-200 bg-white shadow-lg text-left">
-                  <button onClick={async()=>{ setRevDownloadOpen(false); try { const base=((api.defaults as any)?.baseURL as string||'').replace(/\/$/,''); const filename=`${toSafeName(taskTitle||'Task')}_${yyyymmdd_hhmm()}_${toSafeName(username||'User')}.docx`; const body={ current: text||'', filename }; const resp=await fetch(`${base}/api/refinity/export-plain`,{ method:'POST', headers:{ 'Content-Type':'application/json' }, body: JSON.stringify(body) }); if(!resp.ok) throw new Error('Export failed'); const blob=await resp.blob(); const url=window.URL.createObjectURL(blob); const link=document.createElement('a'); link.href=url; link.download=filename; document.body.appendChild(link); link.click(); link.remove(); window.URL.revokeObjectURL(url);} catch {} }} className="block w-full text-left px-3 py-2 text-sm hover:bg-gray-50">Without Annotations</button>
-                  <button onClick={async()=>{ setRevDownloadOpen(false); try { const base=((api.defaults as any)?.baseURL as string||'').replace(/\/$/,''); const filename=`${toSafeName(taskTitle||'Task')}_v${nextVersionNumber}_Annotated_${yyyymmdd_hhmm()}_${toSafeName(username||'User')}.docx`; const list=versionAnnotations.map(a=>({ start:a.start, end:a.end, category:a.category, comment:a.comment })); const body={ current: text||'', filename, annotations: list }; const resp=await fetch(`${base}/api/refinity/export-plain-with-annotations`,{ method:'POST', headers:{ 'Content-Type':'application/json' }, body: JSON.stringify(body) }); if(!resp.ok) throw new Error('Export failed'); const blob=await resp.blob(); const url=window.URL.createObjectURL(blob); const link=document.createElement('a'); link.href=url; link.download=filename; document.body.appendChild(link); link.click(); link.remove(); window.URL.revokeObjectURL(url);} catch {} }} className="block w-full text-left px-3 py-2 text-sm hover:bg-gray-50">With Annotations</button>
+                  <button onClick={async()=>{ setRevDownloadOpen(false); try { const base=((api.defaults as any)?.baseURL as string||'').replace(/\/$/,''); const filename=`${toSafeName(taskTitle||'Task')}_${yyyymmdd_hhmm()}_${toSafeName(username||'User')}.docx`; const body={ current: text||'', filename }; let resp=await fetch(`${base}/api/refinity/export-plain`,{ method:'POST', headers:{ 'Content-Type':'application/json' }, body: JSON.stringify(body) }); if(!resp.ok) throw new Error('Export failed'); const blob=await resp.blob(); await saveBlobToDisk(blob, filename);} catch { await saveTextFallback(text||'', `${toSafeName(taskTitle||'Task')}_${yyyymmdd_hhmm()}_${toSafeName(username||'User')}.txt`);} }} className="block w-full text-left px-3 py-2 text-sm hover:bg-gray-50">Without Annotations</button>
+                  <button onClick={async()=>{ setRevDownloadOpen(false); try { const base=((api.defaults as any)?.baseURL as string||'').replace(/\/$/,''); const filename=`${toSafeName(taskTitle||'Task')}_v${nextVersionNumber}_Annotated_${yyyymmdd_hhmm()}_${toSafeName(username||'User')}.docx`; const list=versionAnnotations.map(a=>({ start:a.start, end:a.end, category:a.category, comment:a.comment })); const body={ current: text||'', filename, annotations: list }; let resp=await fetch(`${base}/api/refinity/export-plain-with-annotations`,{ method:'POST', headers:{ 'Content-Type':'application/json' }, body: JSON.stringify(body) }); if(!resp.ok){ resp=await fetch(`${base}/api/refinity/export-plain`,{ method:'POST', headers:{ 'Content-Type':'application/json' }, body: JSON.stringify({ current: text||'', filename }) }); } if(!resp.ok) throw new Error('Export failed'); const blob=await resp.blob(); await saveBlobToDisk(blob, filename);} catch { await saveTextFallback(text||'', `${toSafeName(taskTitle||'Task')}_${yyyymmdd_hhmm()}_${toSafeName(username||'User')}.txt`);} }} className="block w-full text-left px-3 py-2 text-sm hover:bg-gray-50">With Annotations</button>
                 </div>, document.body
               )}
             </div>
@@ -1778,7 +1826,7 @@ const EditorPane: React.FC<{ source: string; initialTranslation: string; onBack:
               <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 className="relative text-gray-900 prose prose-sm max-w-none whitespace-pre-wrap" dangerouslySetInnerHTML={{ __html: diffHtml }} />
               </div>
             </div>
           )}

client/src/services/api.ts

@@ -1,28 +1,76 @@
 import axios from 'axios';
 
-// Create axios instance with base configuration
-// Resolve base URL from environment, falling back to TransHub backend host
+// Create axios instance with dynamic base configuration and auto-discovery
+// 1) Resolve env REACT_APP_API_URL (strip trailing /api if present)
 const envUrlRaw = (process.env.REACT_APP_API_URL || '').trim();
 const envUrlNoTrailingSlash = envUrlRaw.replace(/\/$/, '');
-// If env provides .../api, strip the trailing /api so we can append /api ourselves consistently
 const envBaseWithoutApi = envUrlNoTrailingSlash.replace(/\/api$/, '');
-const resolvedBaseURL = envBaseWithoutApi || 'https://linguabot-transhub-backend.hf.space';
+// 2) Prefer localhost if the app runs on localhost
+const isLocalhost = typeof window !== 'undefined' && /^(localhost|127\.0\.0\.1)$/i.test(window.location.hostname);
+const localCandidates = isLocalhost ? ['http://localhost:7860', 'http://127.0.0.1:7860', 'http://localhost:5000', 'http://127.0.0.1:5000'] : [];
+// 3) HF backend as final fallback
+const hfBackend = 'https://linguabot-transhub-backend.hf.space';
+// 4) Build candidate list (deduped, truthy)
+const candidateSet = new Set<string>([
+  envBaseWithoutApi,
+  ...localCandidates,
+  hfBackend
+].filter(Boolean) as string[]);
+const candidates = Array.from(candidateSet);
+// 5) Use persisted base if any
+const storedBase = typeof window !== 'undefined' ? (localStorage.getItem('refinity_api_base') || '') : '';
+let activeBase = storedBase && candidateSet.has(storedBase) ? storedBase : (candidates[0] || hfBackend);
 
 const api = axios.create({
-  baseURL: resolvedBaseURL,
+  baseURL: activeBase,
   headers: {
     'Content-Type': 'application/json',
   },
   timeout: 10000, // 10 second timeout
 });
 
+// Helper to set and persist base URL used by both axios and fetch-derived code
+function setActiveBase(nextBase: string) {
+  if (!nextBase) return;
+  activeBase = nextBase.replace(/\/$/, '');
+  api.defaults.baseURL = activeBase;
+  (api.defaults as any).baseURL = activeBase; // used by components to build fetch URLs
+  try { localStorage.setItem('refinity_api_base', activeBase); } catch {}
+  console.log('[Refinity] API base updated:', activeBase);
+}
+
+// Background probe to auto-select a reachable backend
+async function probeBases() {
+  for (const base of candidates) {
+    try {
+      const controller = new AbortController();
+      const timer = setTimeout(() => controller.abort(), 2500);
+      const resp = await fetch(`${base.replace(/\/$/,'')}/api/health`, { signal: controller.signal });
+      clearTimeout(timer);
+      if (resp && resp.ok) {
+        if (activeBase !== base) setActiveBase(base);
+        return;
+      }
+    } catch {
+      // try next
+    }
+  }
+  // nothing reachable - keep current activeBase (likely HF)
+}
+// Kick off probe without blocking module init
+if (typeof window !== 'undefined') {
+  // initialize from stored or first candidate, then probe
+  setActiveBase(activeBase);
+  probeBases();
+}
+
 // Debug: Log the API URL being used
 console.log('🔧 API CONFIGURATION DEBUG');
 console.log('Environment variables:', {
   REACT_APP_API_URL: process.env.REACT_APP_API_URL,
   NODE_ENV: process.env.NODE_ENV
 });
-console.log('Resolved API Base URL:', resolvedBaseURL);
+console.log('Initial API Base URL:', activeBase);
 console.log('Build timestamp:', new Date().toISOString());
 
 // Request interceptor to add auth token and user role
@@ -76,6 +124,24 @@ api.interceptors.response.use(
   (error) => {
     console.error('❌ API request failed:', error.config?.url, error.message);
     
+    // If the current base fails with a network/cors error, rotate to next candidate and retry once
+    const isNetworkOrCORS = !error.response || error.message?.includes('Network') || error.message?.includes('Failed to fetch');
+    if (isNetworkOrCORS && typeof window !== 'undefined') {
+      const idx = candidates.indexOf(activeBase);
+      const nextIdx = (idx + 1) % candidates.length;
+      const nextBase = candidates[nextIdx];
+      if (nextBase && nextBase !== activeBase) {
+        setActiveBase(nextBase);
+        const cfg: any = error.config || {};
+        if (!cfg.__retriedWithNextBase) {
+          cfg.__retriedWithNextBase = true;
+          cfg.baseURL = activeBase;
+          console.warn('[Refinity] Retrying request with base:', activeBase);
+          return api.request(cfg);
+        }
+      }
+    }
+
     // Don't auto-redirect for admin operations - let the component handle it
     if (error.response?.status === 401 && !error.config?.url?.includes('/subtitles/update/')) {
       // Token expired or invalid - only redirect for non-admin operations