Upload folder using huggingface_hub

client/public/rebuild-nonce.txt

@@ -1 +1 @@
-Rebuild nonce: 2025-10-25T16:35:45Z
+Rebuild nonce: 2025-10-25T16:45:12Z

client/src/pages/TutorialTasks.tsx

@@ -1937,19 +1937,23 @@ const TutorialTasks: React.FC = () => {
                               </div>
                           </div>
                           ) : (
-                            // Regular task layout - use grid for stability
+                            // Regular task layout - use grid for stability like image-only layout
                             <div className="grid grid-cols-1 md:grid-cols-2 gap-6 items-start">
                               <div className="w-full flex justify-center">
-                                {task.imageUrl.startsWith('data:') ? (
+                                {task.imageUrl && task.imageUrl.startsWith('data:') ? (
                                   <div className="inline-block rounded-lg shadow-md overflow-hidden">
                                     <img src={task.imageUrl} alt={task.imageAlt || 'Uploaded image'} className="w-full h-auto" style={{ height: '200px', width: 'auto', objectFit: 'contain' }} onError={(e) => { console.error('Image failed to load:', e); (e.currentTarget as HTMLImageElement).style.display = 'none'; }} />
                                   </div>
-                                ) : (
+                                ) : task.imageUrl ? (
                                   <div className="inline-block rounded-lg shadow-md bg-green-500 text-white p-6 text-center">
                                     <div className="text-3xl mb-2">📷</div>
                                     <div className="font-semibold">Image Uploaded</div>
                                     <div className="text-sm opacity-75">{task.imageUrl}</div>
                                   </div>
+                                ) : (
+                                  <div className="w-full h-48 bg-gray-100 rounded-lg flex items-center justify-center">
+                                    <div className="text-gray-500">No image</div>
+                                  </div>
                                 )}
                               </div>
                               <div className="w-full">
@@ -1957,40 +1961,6 @@ const TutorialTasks: React.FC = () => {
                                   <h5 className="text-indigo-900 font-semibold mb-2">Source Text</h5>
                                   <div className="text-blue-800 leading-relaxed text-lg font-source-text whitespace-pre-wrap">{renderFormatted(task.content)}</div>
                                 </div>
-                                {localStorage.getItem('token') && (
-                                  <div className="bg-white rounded-lg p-4 border border-gray-200">
-                                    <h5 className="text-gray-900 font-semibold mb-2">Your Group's Translation</h5>
-                                    <div className="mb-2">
-                                      <label className="block text-xs font-medium text-gray-700 mb-1">Select Your Group</label>
-                                      <select
-                                        value={selectedGroups[task._id] || ''}
-                                        onChange={(e) => setSelectedGroups({ ...selectedGroups, [task._id]: parseInt(e.target.value) })}
-                                        className="w-40 px-2 py-1 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white text-xs"
-                                      >
-                                        <option value="">Choose...</option>
-                                        {[1,2,3,4,5,6,7,8].map((g) => (<option key={g} value={g}>Group {g}</option>))}
-                                      </select>
-                                    </div>
-                                    <div className="flex items-center justify-end space-x-2 mb-2">
-                                      <button onClick={() => applyInlineFormat(`tutorial-translation-${task._id}`, translationText[task._id] || '', v => setTranslationText({ ...translationText, [task._id]: v }), '**')} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded">B</button>
-                                      <button onClick={() => applyInlineFormat(`tutorial-translation-${task._id}`, translationText[task._id] || '', v => setTranslationText({ ...translationText, [task._id]: v }), '*')} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded italic">I</button>
-                                      <button onClick={() => applyLinkFormat(`tutorial-translation-${task._id}`, translationText[task._id] || '', v => setTranslationText({ ...translationText, [task._id]: v }))} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded">Link</button>
-                                    </div>
-                                    <textarea
-                                      id={`tutorial-translation-${task._id}`}
-                                      value={translationText[task._id] || ''}
-                                      onInput={(e) => setTranslationText({ ...translationText, [task._id]: (e.target as HTMLTextAreaElement).value })}
-                                      onChange={(e) => setTranslationText({ ...translationText, [task._id]: e.target.value })}
-                                      className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white"
-                                      style={{ height: '150px' }}
-                                      rows={4}
-                                      placeholder="Enter your group's translation here..."
-                                    />
-                                    <div className="flex justify-end mt-2">
-                                      <button onClick={() => handleSubmitTranslation(task._id)} disabled={submitting[task._id]} className="btn-primary disabled:bg-gray-400 text-white px-4 py-2 rounded-lg text-sm">{submitting[task._id] ? 'Submitting...' : 'Submit Translation'}</button>
-                                    </div>
-                                  </div>
-                                )}
                               </div>
                             </div>
                           )
@@ -2090,6 +2060,85 @@ const TutorialTasks: React.FC = () => {
                   </div>
                 )}
 
+                                  {/* Translation Input (always show if user is logged in, but hide for image-only content) */}
+                  {localStorage.getItem('token') && task.content !== 'Image-based task' && (
+                                  <div className="bg-white rounded-lg p-6 border border-gray-200 shadow-sm safari-stable-form">
+                    <div className="flex items-center space-x-3 mb-4">
+                      <div className="bg-gray-100 rounded-lg p-2">
+                        <DocumentTextIcon className="h-4 w-4 text-gray-600" />
+                      </div>
+                      <h4 className="text-gray-900 font-semibold text-lg">Group Translation</h4>
+                    </div>
+                    
+                    {/* Group Selection */}
+                    <div className="mb-4">
+                      <label className="block text-sm font-medium text-gray-700 mb-2">
+                        Select Your Group *
+                      </label>
+                      <select
+                        value={selectedGroups[task._id] || ''}
+                        onChange={(e) => {
+                          const value = parseInt(e.target.value);
+                          setSelectedGroups({ ...selectedGroups, [task._id]: value });
+                        }}
+                        className="w-48 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white text-sm"
+                        required
+                      >
+                        <option value="">Choose your group...</option>
+                        {[1, 2, 3, 4, 5, 6, 7, 8].map((group) => (
+                          <option key={group} value={group}>
+                            Group {group}
+                          </option>
+                        ))}
+                      </select>
+                    </div>
+
+                    <div className="mb-4">
+                      <label className="block text-sm font-medium text-gray-700 mb-2">
+                        Your Group's Translation *
+                      </label>
+                      <div className="flex items-center justify-end space-x-2 mb-2">
+                        <button onClick={() => applyInlineFormat(`tutorial-translation-${task._id}`, translationText[task._id] || '', v => setTranslationText({ ...translationText, [task._id]: v }), '**')} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded">B</button>
+                        <button onClick={() => applyInlineFormat(`tutorial-translation-${task._id}`, translationText[task._id] || '', v => setTranslationText({ ...translationText, [task._id]: v }), '*')} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded italic">I</button>
+                        <button onClick={() => applyLinkFormat(`tutorial-translation-${task._id}`, translationText[task._id] || '', v => setTranslationText({ ...translationText, [task._id]: v }))} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded">Link</button>
+                      </div>
+                      <textarea
+                        id={`tutorial-translation-${task._id}`}
+                        value={translationText[task._id] || ''}
+                        onInput={(e) => {
+                          const value = (e.target as HTMLTextAreaElement).value;
+                          setTranslationText({ ...translationText, [task._id]: value });
+                        }}
+                        onChange={(e) => {
+                          const value = e.target.value;
+                          setTranslationText({ ...translationText, [task._id]: value });
+                        }}
+                        className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white"
+                        style={{ height: '150px' }}
+                        rows={4}
+                        placeholder="Enter your group's translation here..."
+                      />
+                    </div>
+
+                    <button
+                      onClick={() => { (withPreservedScroll.current || ((fn)=>fn()))(() => {}); handleSubmitTranslation(task._id); }}
+                      disabled={submitting[task._id]}
+                      className="relative inline-flex items-center justify-center gap-2 px-4 py-2 rounded-2xl text-sm font-medium text-white ring-1 ring-inset ring-white/50 backdrop-blur-md backdrop-brightness-110 backdrop-saturate-150 shadow-[inset_0_1px_0_rgba(255,255,255,0.6),inset_0_-1px_0_rgba(0,0,0,0.12)] bg-sky-600/70 disabled:bg-gray-400"
+                    >
+                      {submitting[task._id] ? (
+                        <>
+                          <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
+                          Submitting...
+                        </>
+                      ) : (
+                        <>
+                          Submit Group Translation
+                          <ArrowRightIcon className="h-4 w-4 ml-2" />
+                        </>
+                      )}
+                    </button>
+                  </div>
+                )}
 
                 {/* Show login message for visitors */}
                 {!localStorage.getItem('token') && (