All files / web/src/app/vision-training/train/components/wizard/cards LoadingCard.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client'

import { css } from '../../../../../../../styled-system/css'
import type { DatasetInfo, LoadingProgress } from '../types'
import { isColumnClassifierDatasetInfo, isBoundaryDetectorDatasetInfo } from '../types'

interface LoadingCardProps {
  datasetInfo: DatasetInfo | null
  loadingProgress: LoadingProgress | null
  message: string
}

export function LoadingCard({ datasetInfo, loadingProgress, message }: LoadingCardProps) {
  // Get display text based on dataset type
  const getDatasetDisplayInfo = () => {
    if (!datasetInfo) return null

    if (isColumnClassifierDatasetInfo(datasetInfo)) {
      return {
        count: datasetInfo.total_images.toLocaleString(),
        label: 'images loaded',
        augmented: false,
        rawCount: null,
      }
    }

    if (isBoundaryDetectorDatasetInfo(datasetInfo)) {
      return {
        count: datasetInfo.total_frames.toLocaleString(),
        label: 'frames loaded',
        augmented: datasetInfo.color_augmentation_enabled || false,
        rawCount: datasetInfo.raw_frames?.toLocaleString() || null,
      }
    }

    return null
  }

  const displayInfo = getDatasetDisplayInfo()

  // Calculate progress percentage
  const progressPercent =
    loadingProgress && loadingProgress.total > 0
      ? Math.round((loadingProgress.current / loadingProgress.total) * 100)
      : 0

  // Get step label for display
  const getStepLabel = () => {
    if (!loadingProgress) return null
    switch (loadingProgress.step) {
      case 'scanning':
        return 'Scanning files'
      case 'loading_raw':
        return 'Loading raw frames'
      case 'augmenting':
        return 'Augmenting data'
      case 'finalizing':
        return 'Finalizing'
      default:
        return 'Processing'
    }
  }

  return (
    <div className={css({ textAlign: 'center', py: 4 })}>
      <div
        className={css({
          fontSize: '2xl',
          mb: 3,
          animation: 'spin 1s linear infinite',
        })}
      >
        📥
      </div>
      <div
        className={css({
          fontSize: 'lg',
          fontWeight: 'medium',
          color: 'gray.200',
          mb: 2,
        })}
      >
        Loading Dataset
      </div>

      {/* Progress bar and counts */}
      {loadingProgress && loadingProgress.total > 0 && (
        <div className={css({ mb: 3 })}>
          {/* Step label - use message if available, otherwise fallback to step label */}
          <div className={css({ fontSize: 'xs', color: 'gray.500', mb: 1 })}>
            {loadingProgress.message || getStepLabel()}
          </div>

          {/* Progress bar */}
          <div
            className={css({
              height: '8px',
              bg: 'gray.700',
              borderRadius: 'full',
              overflow: 'hidden',
              mb: 1,
            })}
          >
            <div
              className={css({
                height: '100%',
                bg: 'blue.500',
                borderRadius: 'full',
                transition: 'width 0.2s ease',
              })}
              style={{ width: `${progressPercent}%` }}
            />
          </div>

          {/* Progress text */}
          <div className={css({ fontSize: 'sm', color: 'gray.400' })}>
            <span className={css({ color: 'blue.400', fontWeight: 'medium' })}>
              {loadingProgress.current.toLocaleString()}
            </span>
            <span className={css({ color: 'gray.600' })}> / </span>
            <span>{loadingProgress.total.toLocaleString()}</span>
            <span className={css({ color: 'gray.600', ml: 2 })}>({progressPercent}%)</span>
          </div>
        </div>
      )}

      {/* Status message when no progress data */}
      {!loadingProgress && (
        <div className={css({ color: 'gray.400', fontSize: 'sm', mb: 3 })}>
          {message || 'Loading training data...'}
        </div>
      )}

      {/* Final loaded count (shown when dataset_loaded fires) */}
      {displayInfo && (
        <div
          className={css({
            display: 'inline-flex',
            flexDirection: 'column',
            alignItems: 'center',
            gap: 1,
          })}
        >
          <div
            className={css({
              display: 'inline-block',
              px: 3,
              py: 1.5,
              bg: 'gray.700',
              borderRadius: 'lg',
              fontSize: 'sm',
            })}
          >
            <span className={css({ color: 'blue.400', fontWeight: 'bold' })}>
              {displayInfo.count}
            </span>
            <span className={css({ color: 'gray.400' })}> {displayInfo.label}</span>
          </div>
          {displayInfo.augmented && displayInfo.rawCount && (
            <div className={css({ fontSize: 'xs', color: 'gray.500' })}>
              <span className={css({ color: 'green.400' })}>🎨</span> Color augmentation from{' '}
              {displayInfo.rawCount} originals
            </div>
          )}
        </div>
      )}
    </div>
  )
}