Upload folder using huggingface_hub

client/src/pages/TutorialTasks.tsx

@@ -85,10 +85,12 @@ const TutorialTasks: React.FC = () => {
       try {
         const y = window.scrollY;
         fn();
-        // Restore scroll position after DOM updates
+        // Restore scroll position after DOM updates with multiple frames
         requestAnimationFrame(() => {
           requestAnimationFrame(() => {
-            window.scrollTo(0, y);
+            requestAnimationFrame(() => {
+              window.scrollTo(0, y);
+            });
           });
         });
       } catch {

client/src/pages/WeeklyPractice.tsx

@@ -1744,273 +1744,12 @@ const WeeklyPractice: React.FC = () => {
         </div>
         )}
 
-        {/* Special Subtitling Interface for Week 2 (hidden from students when week is hidden) */}
-        {!isWeekTransitioning && selectedWeek === 2 && (isAdmin || !isWeekHidden) ? (
-          <div className="bg-white rounded-xl shadow p-6 mb-8">
-            <h3 className="text-lg font-semibold text-gray-900 mb-4">Week 2 Practice</h3>
-            {weeklyPracticeWeek?.translationBrief ? (
-              <div className="bg-ui-panel rounded-xl p-6 mb-6 border border-ui-border">
-                <h4 className="text-ui-text font-semibold text-base mb-2">Translation Brief</h4>
-                <div className="text-ui-text leading-relaxed whitespace-pre-wrap">{renderFormatted(weeklyPracticeWeek.translationBrief)}</div>
-              </div>
-            ) : null}
-            {((localStorage.getItem('viewMode')||'auto') !== 'student' && (JSON.parse(localStorage.getItem('user')||'{}').role === 'admin')) && (
-              <div className="mb-4">
-                <button onClick={() => setShowSubmissions(v=>!v)} className="px-3 py-1.5 text-sm rounded-md border border-gray-300">{showSubmissions ? 'Hide Subtitling UI' : 'Show Subtitling UI (Admin)'}</button>
-              </div>
-            )}
-            {weeklyPractice.length > 0 ? weeklyPractice.map((practice) => (
-              <div key={practice._id} className="bg-white rounded-xl shadow-lg border border-gray-100 p-8 hover:shadow-xl transition-shadow duration-300">
-                <div className="mb-6">
-                  <div className="flex items-center justify-between mb-4">
-                    <div className="flex items-center space-x-3">
-                      <div className="bg-pink-100 rounded-full p-2">
-                        <DocumentTextIcon className="h-5 w-5 text-pink-600" />
-                      </div>
-                      <div>
-                        <h3 className="text-lg font-semibold text-gray-900">Source Text #{weeklyPractice.indexOf(practice) + 1}</h3>
-                      </div>
-                    </div>
-                    {((localStorage.getItem('viewMode')||'auto') === 'student') ? false : (JSON.parse(localStorage.getItem('user') || '{}').role === 'admin') && (
-                        <div className="flex items-center space-x-2">
-                        {editingPractice === practice._id ? (
-                          <>
-                            <button
-                              onClick={savePractice}
-                              disabled={saving}
-                              className="bg-green-100 hover:bg-green-200 text-green-700 px-3 py-1 rounded-lg transition-colors duration-200"
-                            >
-                              {saving ? (
-                                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-green-600"></div>
-                              ) : (
-                                <CheckIcon className="h-4 w-4" />
-                              )}
-                            </button>
-                            <button
-                              onClick={cancelEditing}
-                              className="bg-red-100 hover:bg-red-200 text-red-700 px-3 py-1 rounded-lg transition-colors duration-200"
-                            >
-                              <XMarkIcon className="h-4 w-4" />
-                            </button>
-                          </>
-                        ) : (
-                          <>
-                          <button
-                            onClick={() => startEditing(practice)}
-                            className="bg-blue-100 hover:bg-blue-200 text-blue-700 px-3 py-1 rounded-lg transition-colors duration-200"
-                          >
-                            <PencilIcon className="h-4 w-4" />
-                          </button>
-                            <button
-                              onClick={() => deletePractice(practice._id)}
-                              className="bg-red-100 hover:bg-red-200 text-red-700 px-3 py-1 rounded-lg transition-colors duration-200"
-                            >
-                              <TrashIcon className="h-4 w-4" />
-                            </button>
-                          </>
-                        )}
-                      </div>
-                    )}
-                  </div>
-
-                  {/* Content - Gradient underlay + glass overlay */}
-                  <div className="relative rounded-xl mb-6 p-0 border border-pink-200/60">
-                    <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-pink-200/45 via-rose-200/40 to-pink-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-6">
-                      <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-pink-500/10 mix-blend-overlay opacity-25" />
-                    {editingPractice === practice._id ? (
-                      <div className="space-y-4">
-                        <textarea
-                          value={editForm.content}
-                          onChange={(e) => setEditForm({...editForm, content: e.target.value})}
-                          className="w-full px-4 py-3 border border-orange-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500 bg-white"
-                          rows={5}
-                          placeholder="Enter source text..."
-                        />
-                        {selectedWeek >= 2 && (
-                          <div className="space-y-3">
-                            <div>
-                              <label className="block text-sm font-medium text-orange-700 mb-1">Image URL</label>
-                              <input
-                                type="text"
-                                value={editForm.imageUrl}
-                                onChange={(e) => setEditForm({...editForm, imageUrl: e.target.value})}
-                                className="w-full px-3 py-2 border border-orange-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500"
-                                placeholder="Enter image URL..."
-                              />
-                            </div>
-                            <div>
-                              <label className="block text-sm font-medium text-orange-700 mb-1">Image Alt Text</label>
-                              <input
-                                type="text"
-                                value={editForm.imageAlt}
-                                onChange={(e) => setEditForm({...editForm, imageAlt: e.target.value})}
-                                className="w-full px-3 py-2 border border-orange-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500"
-                                placeholder="Enter alt text for accessibility..."
-                              />
-                            </div>
-                            <div>
-                              <label className="block text-sm font-medium text-orange-700 mb-1">Upload Local Image</label>
-                              <input
-                                type="file"
-                                accept="image/*"
-                                onChange={async (e) => {
-                                  const file = e.target.files?.[0];
-                                  if (file) {
-                                    try {
-                                      const imageUrl = await handleFileUpload(file);
-                                      setEditForm({ ...editForm, imageUrl });
-                                    } catch (error) {
-                                      console.error('Error uploading file:', error);
-                                    }
-                                  }
-                                }}
-                                className="w-full px-3 py-2 border border-orange-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500"
-                              />
-                              {uploading && (
-                                <div className="mt-2 text-sm text-orange-600">
-                                  <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-orange-600 inline-block mr-2"></div>
-                                  Uploading...
-                                </div>
-                              )}
-                            </div>
-                          </div>
-                        )}
-                      </div>
-                    ) : (
-                      <div>
-                        {practice.imageUrl ? (
-                          selectedWeek >= 4 && practice.imageAlignment === 'portrait-split' ? (
-                            // Portrait split layout
-                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 items-start">
-                              <div className="w-full flex justify-center">
-                                <div className="inline-block rounded-lg shadow-md overflow-hidden">
-                                  <img src={practice.imageUrl} alt={practice.imageAlt || 'Uploaded image'} className="w-full h-auto" style={{ maxHeight: '520px', objectFit: 'contain' }} />
-                                </div>
-                              </div>
-                              <div className="w-full">
-                                <div className="mb-4 text-ui-text leading-relaxed text-lg font-source-text whitespace-pre-wrap">{practice.content}</div>
-                                {localStorage.getItem('token') && (
-                                  <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" />
-                                    <h5 className="relative z-10 text-ui-text font-semibold mb-2">Your Translation</h5>
-                                    <div className="relative z-10 flex items-center justify-end space-x-2 mb-2">
-                                      <button onClick={() => applyInlineFormat(`weekly-translation-${practice._id}`, translationText[practice._id] || '', v => setTranslationText({ ...translationText, [practice._id]: v }), '**')} className="px-2 py-1 text-xs bg-white/40 text-ui-text rounded">B</button>
-                                      <button onClick={() => applyInlineFormat(`weekly-translation-${practice._id}`, translationText[practice._id] || '', v => setTranslationText({ ...translationText, [practice._id]: v }), '*')} className="px-2 py-1 text-xs bg-white/40 text-ui-text rounded italic">I</button>
-                                      <button onClick={() => applyLinkFormat(`weekly-translation-${practice._id}`, translationText[practice._id] || '', v => setTranslationText({ ...translationText, [practice._id]: v }))} className="px-2 py-1 text-xs bg-white/40 text-ui-text rounded">Link</button>
-                                    </div>
-                                    <textarea id={`weekly-translation-${practice._id}`} value={translationText[practice._id] || ''} onChange={(e) => setTranslationText({ ...translationText, [practice._id]: e.target.value })} className="relative z-10 w-full px-4 py-3 border border-ui-border rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-pink-500 bg-white" rows={4} placeholder="Enter your translation here..." />
-                                    <div className="relative z-10 flex justify-end mt-2">
-                                      <button onClick={() => handleSubmitTranslation(practice._id)} disabled={submitting[practice._id]} 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-pink-600/70 disabled:bg-gray-400 active:translate-y-0.5 active:shadow-[inset_0_0.5px_0_rgba(255,255,255,0.6),inset_0_-1px_0_rgba(0,0,0,0.12)] 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" />
-                                        {submitting[practice._id] ? (
-                                          <>
-                                            <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
-                                            Submitting...
-                                          </>
-                                        ) : (
-                                          <>
-                                            <CheckIcon className="h-4 w-4" />
-                                            Submit Translation
-                                          </>
-                                        )}
-                                      </button>
-                                    </div>
-                                  </div>
-                                )}
-                              </div>
-                            </div>
-                          ) : (
-                            // Regular image layout
-                            <div className="space-y-4">
-                              <div className="flex justify-center">
-                                <div className="inline-block rounded-lg shadow-md overflow-hidden">
-                                  <img src={practice.imageUrl} alt={practice.imageAlt || 'Uploaded image'} className="w-full h-auto" style={{ maxHeight: '400px', objectFit: 'contain' }} />
-                                </div>
-                              </div>
-                              <div className="text-ui-text leading-relaxed text-lg font-source-text whitespace-pre-wrap">{practice.content}</div>
-                              {localStorage.getItem('token') && (
-                                <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" />
-                                  <h5 className="relative z-10 text-ui-text font-semibold mb-2">Your Translation</h5>
-                                  <div className="relative z-10 flex items-center justify-end space-x-2 mb-2">
-                                    <button onClick={() => applyInlineFormat(`weekly-translation-${practice._id}`, translationText[practice._id] || '', v => setTranslationText({ ...translationText, [practice._id]: v }), '**')} className="px-2 py-1 text-xs bg-white/40 text-ui-text rounded">B</button>
-                                    <button onClick={() => applyInlineFormat(`weekly-translation-${practice._id}`, translationText[practice._id] || '', v => setTranslationText({ ...translationText, [practice._id]: v }), '*')} className="px-2 py-1 text-xs bg-white/40 text-ui-text rounded italic">I</button>
-                                    <button onClick={() => applyLinkFormat(`weekly-translation-${practice._id}`, translationText[practice._id] || '', v => setTranslationText({ ...translationText, [practice._id]: v }))} className="px-2 py-1 text-xs bg-white/40 text-ui-text rounded">Link</button>
-                                  </div>
-                                  <textarea id={`weekly-translation-${practice._id}`} value={translationText[practice._id] || ''} onChange={(e) => setTranslationText({ ...translationText, [practice._id]: e.target.value })} className="relative z-10 w-full px-4 py-3 border border-ui-border rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-pink-500 bg-white" rows={4} placeholder="Enter your translation here..." />
-                                  <div className="relative z-10 flex justify-end mt-2">
-                                    <button onClick={() => handleSubmitTranslation(practice._id)} disabled={submitting[practice._id]} 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-pink-600/70 disabled:bg-gray-400 active:translate-y-0.5 active:shadow-[inset_0_0.5px_0_rgba(255,255,255,0.6),inset_0_-1px_0_rgba(0,0,0,0.12)] 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" />
-                                      {submitting[practice._id] ? (
-                                        <>
-                                          <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
-                                          Submitting...
-                                        </>
-                                      ) : (
-                                        <>
-                                          <CheckIcon className="h-4 w-4" />
-                                          Submit Translation
-                                        </>
-                                      )}
-                                    </button>
-                                  </div>
-                                </div>
-                              )}
-                            </div>
-                          )
-                        ) : (
-                          // Text-only layout
-                          <div className="mb-4 text-ui-text leading-relaxed text-lg font-source-text whitespace-pre-wrap">{practice.content}</div>
-                        )}
-                        {localStorage.getItem('token') && !practice.imageUrl && (
-                          <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" />
-                            <h5 className="relative z-10 text-ui-text font-semibold mb-2">Your Translation</h5>
-                            <div className="relative z-10 flex items-center justify-end space-x-2 mb-2">
-                              <button onClick={() => applyInlineFormat(`weekly-translation-${practice._id}`, translationText[practice._id] || '', v => setTranslationText({ ...translationText, [practice._id]: v }), '**')} className="px-2 py-1 text-xs bg-white/40 text-ui-text rounded">B</button>
-                              <button onClick={() => applyInlineFormat(`weekly-translation-${practice._id}`, translationText[practice._id] || '', v => setTranslationText({ ...translationText, [practice._id]: v }), '*')} className="px-2 py-1 text-xs bg-white/40 text-ui-text rounded italic">I</button>
-                              <button onClick={() => applyLinkFormat(`weekly-translation-${practice._id}`, translationText[practice._id] || '', v => setTranslationText({ ...translationText, [practice._id]: v }))} className="px-2 py-1 text-xs bg-white/40 text-ui-text rounded">Link</button>
-                            </div>
-                            <textarea id={`weekly-translation-${practice._id}`} value={translationText[practice._id] || ''} onChange={(e) => setTranslationText({ ...translationText, [practice._id]: e.target.value })} className="relative z-10 w-full px-4 py-3 border border-ui-border rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-pink-500 bg-white" rows={4} placeholder="Enter your translation here..." />
-                            <div className="relative z-10 flex justify-end mt-2">
-                              <button onClick={() => handleSubmitTranslation(practice._id)} disabled={submitting[practice._id]} 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-pink-600/70 disabled:bg-gray-400 active:translate-y-0.5 active:shadow-[inset_0_0.5px_0_rgba(255,255,255,0.6),inset_0_-1px_0_rgba(0,0,0,0.12)] 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" />
-                                {submitting[practice._id] ? (
-                                  <>
-                                    <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
-                                    Submitting...
-                                  </>
-                                ) : (
-                                  <>
-                                    <CheckIcon className="h-4 w-4" />
-                                    Submit Translation
-                                  </>
-                                )}
-                              </button>
-                            </div>
-                          </div>
-                        )}
-                      </div>
-                    )}
-                    </div>
-                  </div>
-                </div>
-              </div>
-            )) : (
-              <div className="text-gray-600">No practice items for Week 2 yet.</div>
-            )}
-          </div>
-        ) : null}
+        {/* Subtitling UI for Week 2 (admin only) */}
+        {!isWeekTransitioning && selectedWeek === 2 && (isAdmin || !isWeekHidden) && showSubmissions && (
+          <div className="mb-8">
+            <div className="mb-4">
+              <button onClick={() => setShowSubmissions(false)} className="px-3 py-1.5 text-sm rounded-md border border-gray-300">Hide Subtitling UI</button>
+            </div>
         {((localStorage.getItem('viewMode')||'auto') !== 'student' && (JSON.parse(localStorage.getItem('user')||'{}').role === 'admin') && showSubmissions) && (
             <>
              <div className="bg-white rounded-xl shadow-lg border border-gray-100 p-6">
@@ -2212,6 +1951,16 @@ const WeeklyPractice: React.FC = () => {
           </div>
         ) : (
         <div className="space-y-6">
+          {/* Show Subtitling UI Button for Week 2 Admin */}
+          {selectedWeek === 2 && (() => {
+            const user = JSON.parse(localStorage.getItem('user') || '{}');
+            const viewMode = (localStorage.getItem('viewMode') || 'auto');
+            return viewMode === 'student' ? false : user.role === 'admin';
+          })() && (
+            <div className="mb-4">
+              <button onClick={() => setShowSubmissions(v=>!v)} className="px-3 py-1.5 text-sm rounded-md border border-gray-300">{showSubmissions ? 'Hide Subtitling UI' : 'Show Subtitling UI (Admin)'}</button>
+            </div>
+          )}
           {/* Add Practice Button for Admin */}
           {(() => {
             const user = JSON.parse(localStorage.getItem('user') || '{}');