Upload folder using huggingface_hub

client/src/pages/WeeklyPractice.tsx

@@ -1769,273 +1769,203 @@ const WeeklyPractice: React.FC = () => {
           </div>
         ) : null}
         {((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">
-               <div className="mb-4">
-                 <h3 className="text-xl font-bold text-gray-900 mb-2">{videoInfo.title}</h3>
-               </div>
-               
-               {/* Video Player */}
-               <div className="bg-black rounded-lg aspect-video overflow-hidden relative">
-                 <video
-                   className="w-full h-full"
-                   controls
-                   preload="metadata"
-                   id="nike-video"
-                   onError={(e) => console.error('Video loading error:', e)}
-                   onLoadStart={() => console.log('Video loading started')}
-                   onCanPlay={() => console.log('Video can play')}
-                 >
-                   <source src="https://huggingface.co/spaces/linguabot/transcreation-frontend/resolve/main/public/videos/nike-winning-isnt-for-everyone.mp4" type="video/mp4" />
-                   Your browser does not support the video tag.
-                 </video>
-                 
-                 {/* On-screen subtitles */}
-                 {currentDisplayedSubtitle && (
-                   <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-10">
-                     <div className="bg-black bg-opacity-80 text-white px-6 py-3 rounded-lg text-center max-w-lg">
-                       <p className={`text-base font-medium leading-relaxed tracking-wide ${currentDisplayedSubtitle.length <= 42 ? 'whitespace-nowrap' : 'whitespace-pre-line'}`} style={{ fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' }}>
-                         {formatSubtitleForDisplay(currentDisplayedSubtitle)}
-                       </p>
-                     </div>
-                   </div>
-                 )}
-               </div>
-             </div>
- 
-             {/* Right Panel - Translation Workspace */}
+            <>
              <div className="bg-white rounded-xl shadow-lg border border-gray-100 p-6">
-               <h3 className="text-xl font-bold text-gray-900 mb-4">Translation Workspace</h3>
-               
-               {/* Segment Navigation Grid */}
-               {loadingSubtitles ? (
-                 <div className="grid grid-cols-9 gap-1 mb-6">
-                   {Array.from({ length: 26 }, (_, i) => (
-                     <div key={i} className="px-1 py-1 rounded text-xs w-full bg-gray-200 animate-pulse">
-                       {i + 1}
-                     </div>
-                   ))}
-                 </div>
-               ) : (
-                 <div className="grid grid-cols-9 gap-1 mb-6">
-                   {subtitleSegments.map((segment) => (
-                     <button
-                       key={segment.id}
-                       onClick={() => handleSegmentClick(segment.id)}
-                       className={`px-1 py-1 rounded text-xs w-full ${getSegmentButtonClass(segment.id)}`}
-                     >
-                       {segment.id}
-                     </button>
-                   ))}
-                 </div>
-               )}
-               
-               {/* Admin Time Code Editor */}
-               {editingSegment && (((localStorage.getItem('viewMode')||'auto') === 'student') ? false : (JSON.parse(localStorage.getItem('user') || '{}').role === 'admin')) && (
-                 <div className="bg-indigo-50 border border-indigo-200 rounded-lg p-4 mb-4">
-                   <h4 className="text-sm font-medium text-indigo-800 mb-2">Edit Time Codes for Segment {editingSegment}</h4>
-                   <div className="grid grid-cols-2 gap-2">
-                     <div>
-                       <label className="block text-xs text-indigo-700 mb-1">Start Time</label>
-                       <input
-                         type="text"
-                         id="startTimeInput"
-                         defaultValue={subtitleSegments[editingSegment - 1]?.startTime}
-                         className="w-full px-2 py-1 text-xs border border-indigo-300 rounded"
-                         placeholder="00:00:00,000"
-                       />
-                     </div>
-                     <div>
-                       <label className="block text-xs text-indigo-700 mb-1">End Time</label>
-                       <input
-                         type="text"
-                         id="endTimeInput"
-                         defaultValue={subtitleSegments[editingSegment - 1]?.endTime}
-                         className="w-full px-2 py-1 text-xs border border-indigo-300 rounded"
-                         placeholder="00:00:00,000"
-                       />
-                     </div>
-                   </div>
-                   <div className="flex space-x-2 mt-2">
-                     <button
-                       onClick={() => setEditingSegment(null)}
-                       className="px-2 py-1 text-xs bg-gray-500 text-white rounded"
-                     >
-                       Cancel
-                     </button>
-                     <button
-                       onClick={() => {
-                         const startInput = document.getElementById('startTimeInput') as HTMLInputElement;
-                         const endInput = document.getElementById('endTimeInput') as HTMLInputElement;
-                         if (startInput && endInput && startInput.value && endInput.value) {
-                           handleSaveTimeCode(editingSegment, startInput.value, endInput.value);
-                         }
-                       }}
-                       className="px-2 py-1 text-xs bg-indigo-600 text-white rounded"
-                     >
-                       Save
-                     </button>
-                   </div>
-                 </div>
-               )}
-               
-               {/* Current Segment Details */}
-               <div className="bg-gray-50 rounded-lg p-4 mb-4 border border-gray-200">
-                 <div className="flex items-center justify-between">
-                   <p className="text-gray-800">
-                     Segment {currentSegment}: {subtitleSegments[currentSegment - 1]?.startTime} – {subtitleSegments[currentSegment - 1]?.endTime} ({subtitleSegments[currentSegment - 1]?.duration})
-                   </p>
-                   {((localStorage.getItem('viewMode')||'auto') === 'student') ? false : (JSON.parse(localStorage.getItem('user') || '{}').role === 'admin') && (
-                     <button
-                       onClick={() => handleEditTimeCode(currentSegment)}
-                       className="bg-indigo-600 hover:bg-indigo-700 text-white px-2 py-1 rounded text-xs flex items-center space-x-1"
-                       title="Edit time codes"
-                     >
-                       <PencilIcon className="w-3 h-3" />
-                       <span>Edit</span>
-                     </button>
-                   )}
-                 </div>
-               </div>
-               
-               {/* Source Text */}
-               <div className="mb-4">
-                 <label className="block text-sm font-medium text-gray-700 mb-2">Source Text</label>
-                 <textarea
-                   value={subtitleText}
-                   readOnly
-                   className="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-50 text-gray-800"
-                   rows={2}
-                 />
-               </div>
-               
-               {/* Target Text */}
-               <div className="mb-4">
-                 <label className="block text-sm font-medium text-gray-700 mb-2">Target Text</label>
-                 <textarea
-                   value={targetText}
-                   onChange={(e) => handleTargetTextChange(e.target.value)}
-                   className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
-                   rows={2}
-                   placeholder="Enter your translation..."
-                 />
-                 <div className="flex justify-between items-center mt-2">
-                   <span className="text-xs text-gray-600">Recommended: 2 lines max, 16 chars/line (Netflix standard)</span>
-                   <span className="text-xs text-gray-600">{characterCount} characters</span>
-                 </div>
-               </div>
-               
-               {/* Action Buttons */}
-               <div className="flex space-x-3 mb-4">
-                 <button
-                   onClick={handleSaveTranslation}
-                   className={`px-4 py-2 rounded-lg ${
-                     saveStatus === 'Saved!' ? 'bg-green-600 hover:bg-green-700' :
-                     saveStatus === 'Saved Locally' ? 'bg-yellow-600 hover:bg-yellow-700' :
-                     saveStatus === 'Error' ? 'bg-red-600 hover:bg-red-700' :
-                     'bg-indigo-600 hover:bg-indigo-700'
-                   } text-white`}
-                 >
-                   {saveStatus}
-                 </button>
-                 <button
-                   onClick={handlePreviewTranslation}
-                   className={`px-4 py-2 rounded-lg flex items-center space-x-2 ${
-                     showTranslatedSubtitles 
-                       ? 'bg-green-500 hover:bg-green-600 text-white' 
-                       : 'bg-gray-500 hover:bg-gray-600 text-white'
-                   }`}
-                 >
-                   <span>{showTranslatedSubtitles ? 'Show Original' : 'Show Translation'}</span>
-                 </button>
-               </div>
-               
-               {/* Translation Progress */}
-               <div className="mb-4">
-                 <div className="flex justify-between items-center mb-2">
-                   <span className="text-sm font-medium text-gray-700">Translation Progress</span>
-                   <span className="text-sm text-gray-600">{Object.keys(subtitleTranslations).length} of {subtitleSegments.length} segments completed</span>
-                 </div>
-                 <div className="w-full bg-gray-200 rounded-full h-2">
-                   <div 
-                     className="bg-green-500 h-2 rounded-full transition-all duration-300"
-                     style={{ width: `${(Object.keys(subtitleTranslations).length / subtitleSegments.length) * 100}%` }}
-                   ></div>
-                 </div>
-               </div>
-             </div>
-             
-             {/* Submissions Panel - Only show for Week 2 subtitling */}
--            {selectedWeek === 2 && (
-+            {false && selectedWeek === 2 && (
-               <div className="mt-6 col-span-2">
-                 <div className="bg-white rounded-xl shadow-lg border border-gray-100 p-6">
-                   <div className="flex items-center justify-between mb-4">
-                     <h3 className="text-lg font-semibold text-gray-900">
-                       👥 View Submissions for Segment {currentSegment}
-                     </h3>
-                     <button
-                       onClick={toggleSubmissions}
-                       className={`px-4 py-2 rounded-lg flex items-center space-x-2 transition-colors duration-200 ${
-                         showSubmissions 
-                           ? 'bg-gray-500 hover:bg-gray-600 text-white' 
-                           : 'bg-purple-600 hover:bg-purple-700 text-white'
-                       }`}
-                     >
-                       <span>{showSubmissions ? 'Hide Submissions' : 'Show Submissions'}</span>
-                       <span>{showSubmissions ? '▼' : '▶'}</span>
-                     </button>
-                   </div>
-                   
-                   {showSubmissions && (
-                     <div className="space-y-4">
-                       {loadingSubmissions ? (
-                         <div className="text-center py-8">
-                           <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600 mx-auto mb-4"></div>
-                           <p className="text-gray-600">Loading submissions...</p>
-                         </div>
-                       ) : submissions.length > 0 ? (
-                         <>
-                           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
-                             {submissions.map((submission) => (
-                               <div key={submission._id} className="bg-gray-50 rounded-lg p-4 border border-gray-200">
-                                 <div className="flex items-center justify-between mb-2">
-                                   <span className="font-medium text-gray-900">
-                                     {submission.username}
-                                   </span>
-                                   <div className="flex items-center space-x-2">
-                                     <span className="text-xs text-gray-500">
-                                       {new Date(submission.submissionDate).toLocaleString()}
-                                     </span>
-                                     {((localStorage.getItem('viewMode')||'auto') === 'student') ? false : (JSON.parse(localStorage.getItem('user') || '{}').role === 'admin') && (
-                                       <button
-                                         className="px-2 py-1 text-xs bg-red-500 text-white rounded hover:bg-red-600"
-                                         onClick={async () => {
-                                           try {
-                                             await api.delete(`/api/subtitles/${submission._id}`);
-                                             await fetchUserSubmissions(weeklyPractice);
-                                           } catch (e) {
-                                             console.error('Delete subtitle submission failed', e);
-                                           }
-                                         }}
-                                       >
-                                         Delete
-                                       </button>
-                                     )}
-                                   </div>
-                                 </div>
-                                 <div className="text-sm text-gray-800 whitespace-pre-wrap">{submission.chineseTranslation}</div>
-                               </div>
-                             ))}
-                           </div>
-                         </>
-                       ) : (
-                         <div className="text-gray-600">No submissions yet.</div>
-                       )}
-                     </div>
-                   )}
-                 </div>
-               </div>
-             )}
+                <div className="mb-4">
+                  <h3 className="text-xl font-bold text-gray-900 mb-2">{videoInfo.title}</h3>
+                </div>
+                
+                {/* Video Player */}
+                <div className="bg-black rounded-lg aspect-video overflow-hidden relative">
+                  <video
+                    className="w-full h-full"
+                    controls
+                    preload="metadata"
+                    id="nike-video"
+                    onError={(e) => console.error('Video loading error:', e)}
+                    onLoadStart={() => console.log('Video loading started')}
+                    onCanPlay={() => console.log('Video can play')}
+                  >
+                    <source src="https://huggingface.co/spaces/linguabot/transcreation-frontend/resolve/main/public/videos/nike-winning-isnt-for-everyone.mp4" type="video/mp4" />
+                    Your browser does not support the video tag.
+                  </video>
+                  
+                  {/* On-screen subtitles */}
+                  {currentDisplayedSubtitle && (
+                    <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-10">
+                      <div className="bg-black bg-opacity-80 text-white px-6 py-3 rounded-lg text-center max-w-lg">
+                        <p className={`text-base font-medium leading-relaxed tracking-wide ${currentDisplayedSubtitle.length <= 42 ? 'whitespace-nowrap' : 'whitespace-pre-line'}`} style={{ fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' }}>
+                          {formatSubtitleForDisplay(currentDisplayedSubtitle)}
+                        </p>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+ 
+              {/* Right Panel - Translation Workspace */}
+              <div className="bg-white rounded-xl shadow-lg border border-gray-100 p-6">
+                <h3 className="text-xl font-bold text-gray-900 mb-4">Translation Workspace</h3>
+                
+                {/* Segment Navigation Grid */}
+                {loadingSubtitles ? (
+                  <div className="grid grid-cols-9 gap-1 mb-6">
+                    {Array.from({ length: 26 }, (_, i) => (
+                      <div key={i} className="px-1 py-1 rounded text-xs w-full bg-gray-200 animate-pulse">
+                        {i + 1}
+                      </div>
+                    ))}
+                  </div>
+                ) : (
+                  <div className="grid grid-cols-9 gap-1 mb-6">
+                    {subtitleSegments.map((segment) => (
+                      <button
+                        key={segment.id}
+                        onClick={() => handleSegmentClick(segment.id)}
+                        className={`px-1 py-1 rounded text-xs w-full ${getSegmentButtonClass(segment.id)}`}
+                      >
+                        {segment.id}
+                      </button>
+                    ))}
+                  </div>
+                )}
+                
+                {/* Admin Time Code Editor */}
+                {editingSegment && (((localStorage.getItem('viewMode')||'auto') === 'student') ? false : (JSON.parse(localStorage.getItem('user') || '{}').role === 'admin')) && (
+                  <div className="bg-indigo-50 border border-indigo-200 rounded-lg p-4 mb-4">
+                    <h4 className="text-sm font-medium text-indigo-800 mb-2">Edit Time Codes for Segment {editingSegment}</h4>
+                    <div className="grid grid-cols-2 gap-2">
+                      <div>
+                        <label className="block text-xs text-indigo-700 mb-1">Start Time</label>
+                        <input
+                          type="text"
+                          id="startTimeInput"
+                          defaultValue={subtitleSegments[editingSegment - 1]?.startTime}
+                          className="w-full px-2 py-1 text-xs border border-indigo-300 rounded"
+                          placeholder="00:00:00,000"
+                        />
+                      </div>
+                      <div>
+                        <label className="block text-xs text-indigo-700 mb-1">End Time</label>
+                        <input
+                          type="text"
+                          id="endTimeInput"
+                          defaultValue={subtitleSegments[editingSegment - 1]?.endTime}
+                          className="w-full px-2 py-1 text-xs border border-indigo-300 rounded"
+                          placeholder="00:00:00,000"
+                        />
+                      </div>
+                    </div>
+                    <div className="flex space-x-2 mt-2">
+                      <button
+                        onClick={() => setEditingSegment(null)}
+                        className="px-2 py-1 text-xs bg-gray-500 text-white rounded"
+                      >
+                        Cancel
+                      </button>
+                      <button
+                        onClick={() => {
+                          const startInput = document.getElementById('startTimeInput') as HTMLInputElement;
+                          const endInput = document.getElementById('endTimeInput') as HTMLInputElement;
+                          if (startInput && endInput && startInput.value && endInput.value) {
+                            handleSaveTimeCode(editingSegment, startInput.value, endInput.value);
+                          }
+                        }}
+                        className="px-2 py-1 text-xs bg-indigo-600 text-white rounded"
+                      >
+                        Save
+                      </button>
+                    </div>
+                  </div>
+                )}
+                
+                {/* Current Segment Details */}
+                <div className="bg-gray-50 rounded-lg p-4 mb-4 border border-gray-200">
+                  <div className="flex items-center justify-between">
+                    <p className="text-gray-800">
+                      Segment {currentSegment}: {subtitleSegments[currentSegment - 1]?.startTime} – {subtitleSegments[currentSegment - 1]?.endTime} ({subtitleSegments[currentSegment - 1]?.duration})
+                    </p>
+                    {((localStorage.getItem('viewMode')||'auto') === 'student') ? false : (JSON.parse(localStorage.getItem('user') || '{}').role === 'admin') && (
+                      <button
+                        onClick={() => handleEditTimeCode(currentSegment)}
+                        className="bg-indigo-600 hover:bg-indigo-700 text-white px-2 py-1 rounded text-xs flex items-center space-x-1"
+                        title="Edit time codes"
+                      >
+                        <PencilIcon className="w-3 h-3" />
+                        <span>Edit</span>
+                      </button>
+                    )}
+                  </div>
+                </div>
+                
+                {/* Source Text */}
+                <div className="mb-4">
+                  <label className="block text-sm font-medium text-gray-700 mb-2">Source Text</label>
+                  <textarea
+                    value={subtitleText}
+                    readOnly
+                    className="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-50 text-gray-800"
+                    rows={2}
+                  />
+                </div>
+                
+                {/* Target Text */}
+                <div className="mb-4">
+                  <label className="block text-sm font-medium text-gray-700 mb-2">Target Text</label>
+                  <textarea
+                    value={targetText}
+                    onChange={(e) => handleTargetTextChange(e.target.value)}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+                    rows={2}
+                    placeholder="Enter your translation..."
+                  />
+                  <div className="flex justify-between items-center mt-2">
+                    <span className="text-xs text-gray-600">Recommended: 2 lines max, 16 chars/line (Netflix standard)</span>
+                    <span className="text-xs text-gray-600">{characterCount} characters</span>
+                  </div>
+                </div>
+                
+                {/* Action Buttons */}
+                <div className="flex space-x-3 mb-4">
+                  <button
+                    onClick={handleSaveTranslation}
+                    className={`px-4 py-2 rounded-lg ${
+                      saveStatus === 'Saved!' ? 'bg-green-600 hover:bg-green-700' :
+                      saveStatus === 'Saved Locally' ? 'bg-yellow-600 hover:bg-yellow-700' :
+                      saveStatus === 'Error' ? 'bg-red-600 hover:bg-red-700' :
+                      'bg-indigo-600 hover:bg-indigo-700'
+                    } text-white`}
+                  >
+                    {saveStatus}
+                  </button>
+                  <button
+                    onClick={handlePreviewTranslation}
+                    className={`px-4 py-2 rounded-lg flex items-center space-x-2 ${
+                      showTranslatedSubtitles 
+                        ? 'bg-green-500 hover:bg-green-600 text-white' 
+                        : 'bg-gray-500 hover:bg-gray-600 text-white'
+                    }`}
+                  >
+                    <span>{showTranslatedSubtitles ? 'Show Original' : 'Show Translation'}</span>
+                  </button>
+                </div>
+                
+                {/* Translation Progress */}
+                <div className="mb-4">
+                  <div className="flex justify-between items-center mb-2">
+                    <span className="text-sm font-medium text-gray-700">Translation Progress</span>
+                    <span className="text-sm text-gray-600">{Object.keys(subtitleTranslations).length} of {subtitleSegments.length} segments completed</span>
+                  </div>
+                  <div className="w-full bg-gray-200 rounded-full h-2">
+                    <div 
+                      className="bg-green-500 h-2 rounded-full transition-all duration-300"
+                      style={{ width: `${(Object.keys(subtitleTranslations).length / subtitleSegments.length) * 100}%` }}
+                    ></div>
+                  </div>
+                </div>
+              </div>
+            </>
+          )}
           </div>
         ) : (
           /* Weekly Practice */