markupr 2.1.8 → 2.5.0

package/src/renderer/components/ModelDownloadDialog.tsx

@@ -1,844 +0,0 @@
-/**
- * ModelDownloadDialog.tsx - Whisper Model Download Prompt
- *
- * Shown on first launch when no Whisper model is downloaded.
- * Allows users to download the recommended model for offline transcription.
- */
-
-import React, { useState, useEffect, useCallback } from 'react';
-import { useTheme } from '../hooks/useTheme';
-
-// ============================================================================
-// Types
-// ============================================================================
-
-interface ModelDownloadDialogProps {
-  onComplete: () => void;
-  onSkip: () => void;
-}
-
-interface ModelInfo {
-  name: string;
-  filename: string;
-  sizeMB: number;
-  ramRequired: string;
-  quality: string;
-  isDownloaded: boolean;
-}
-
-interface DownloadProgress {
-  model: string;
-  downloadedBytes: number;
-  totalBytes: number;
-  percent: number;
-  speedBps: number;
-  estimatedSecondsRemaining: number;
-}
-
-type DialogState = 'prompt' | 'downloading' | 'complete' | 'error';
-
-// ============================================================================
-// Helper Functions
-// ============================================================================
-
-function formatBytes(bytes: number): string {
-  if (bytes === 0) return '0 B';
-  const k = 1024;
-  const sizes = ['B', 'KB', 'MB', 'GB'];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
-}
-
-function formatSpeed(bytesPerSecond: number): string {
-  return formatBytes(bytesPerSecond) + '/s';
-}
-
-function formatTime(seconds: number): string {
-  if (seconds < 60) return `${Math.round(seconds)}s`;
-  const minutes = Math.floor(seconds / 60);
-  const secs = Math.round(seconds % 60);
-  return `${minutes}m ${secs}s`;
-}
-
-// ============================================================================
-// useModelDownload Hook
-// ============================================================================
-
-interface UseModelDownloadResult {
-  isDownloading: boolean;
-  progress: DownloadProgress | null;
-  error: string | null;
-  downloadModel: (model: string) => Promise<void>;
-  cancelDownload: (model: string) => void;
-}
-
-function useModelDownload(): UseModelDownloadResult {
-  const [isDownloading, setIsDownloading] = useState(false);
-  const [progress, setProgress] = useState<DownloadProgress | null>(null);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    // Subscribe to download events
-    const unsubProgress = window.markupr.whisper.onDownloadProgress((p) => {
-      setProgress(p);
-    });
-
-    const unsubComplete = window.markupr.whisper.onDownloadComplete(() => {
-      setIsDownloading(false);
-      setProgress(null);
-    });
-
-    const unsubError = window.markupr.whisper.onDownloadError(({ error: err }) => {
-      setIsDownloading(false);
-      setError(err);
-    });
-
-    return () => {
-      unsubProgress();
-      unsubComplete();
-      unsubError();
-    };
-  }, []);
-
-  const downloadModel = useCallback(async (model: string) => {
-    setIsDownloading(true);
-    setError(null);
-    setProgress(null);
-
-    const result = await window.markupr.whisper.downloadModel(model);
-    if (!result.success && result.error) {
-      setError(result.error);
-      setIsDownloading(false);
-    }
-  }, []);
-
-  const cancelDownload = useCallback((model: string) => {
-    window.markupr.whisper.cancelDownload(model);
-    setIsDownloading(false);
-    setProgress(null);
-  }, []);
-
-  return {
-    isDownloading,
-    progress,
-    error,
-    downloadModel,
-    cancelDownload,
-  };
-}
-
-// ============================================================================
-// Main Component
-// ============================================================================
-
-export const ModelDownloadDialog: React.FC<ModelDownloadDialogProps> = ({
-  onComplete,
-  onSkip,
-}) => {
-  const [state, setState] = useState<DialogState>('prompt');
-  const [selectedModel, setSelectedModel] = useState<string>('tiny');
-  const [models, setModels] = useState<ModelInfo[]>([]);
-  const [showAdvanced, setShowAdvanced] = useState(false);
-  const { colors } = useTheme();
-
-  const { isDownloading, progress, error, downloadModel, cancelDownload } = useModelDownload();
-
-  // Load available models on mount
-  useEffect(() => {
-    const loadModels = async () => {
-      const availableModels = await window.markupr.whisper.getAvailableModels();
-      setModels(availableModels);
-    };
-    loadModels();
-  }, []);
-
-  // Update state based on download status
-  useEffect(() => {
-    if (isDownloading) {
-      setState('downloading');
-    } else if (error) {
-      setState('error');
-    }
-  }, [isDownloading, error]);
-
-  // Listen for download complete to transition state
-  useEffect(() => {
-    const unsubComplete = window.markupr.whisper.onDownloadComplete(() => {
-      setState('complete');
-    });
-    return unsubComplete;
-  }, []);
-
-  const handleDownload = useCallback(async () => {
-    await downloadModel(selectedModel);
-  }, [selectedModel, downloadModel]);
-
-  const handleCancel = useCallback(() => {
-    cancelDownload(selectedModel);
-    setState('prompt');
-  }, [selectedModel, cancelDownload]);
-
-  const selectedModelInfo = models.find((m) => m.name === selectedModel);
-
-  // Render different states
-  const renderContent = () => {
-    switch (state) {
-      case 'prompt':
-        return (
-          <>
-            {/* Illustration */}
-            <div style={styles.illustrationContainer}>
-              <div style={styles.iconCircle}>
-                <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
-                  <path
-                    d="M24 8c-3.3 0-6 2.7-6 6v9c0 3.3 2.7 6 6 6s6-2.7 6-6v-9c0-3.3-2.7-6-6-6z"
-                    stroke={colors.accent.default}
-                    strokeWidth="2.5"
-                    fill="none"
-                  />
-                  <path
-                    d="M36 20v3c0 6.6-5.4 12-12 12s-12-5.4-12-12v-3"
-                    stroke={colors.accent.default}
-                    strokeWidth="2.5"
-                    strokeLinecap="round"
-                  />
-                  <path
-                    d="M24 35v5M18 40h12"
-                    stroke={colors.accent.default}
-                    strokeWidth="2.5"
-                    strokeLinecap="round"
-                  />
-                  {/* Download arrow */}
-                  <path
-                    d="M38 28v6h-6M38 34l-6-6"
-                    stroke={colors.status.success}
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                </svg>
-              </div>
-            </div>
-
-            {/* Title */}
-            <h2 style={styles.title}>Download Speech Recognition Model</h2>
-
-            {/* Description */}
-            <p style={styles.description}>
-              markupr needs to download a speech recognition model ({selectedModelInfo?.sizeMB || 75}MB)
-              to transcribe your voice offline. This is a one-time download.
-            </p>
-
-            {/* Model Selection (Advanced) */}
-            {showAdvanced && (
-              <div style={styles.modelSelector}>
-                <label style={styles.modelLabel}>Select Model:</label>
-                <div style={styles.modelOptions}>
-                  {models.map((model) => (
-                    <button
-                      key={model.name}
-                      style={{
-                        ...styles.modelOption,
-                        borderColor: selectedModel === model.name ? colors.accent.default : colors.bg.tertiary,
-                        backgroundColor: selectedModel === model.name ? colors.accent.subtle : 'transparent',
-                      }}
-                      onClick={() => setSelectedModel(model.name)}
-                    >
-                      <div style={styles.modelOptionHeader}>
-                        <span style={styles.modelName}>{model.name}</span>
-                        {model.isDownloaded && (
-                          <span style={styles.downloadedBadge}>Downloaded</span>
-                        )}
-                      </div>
-                      <div style={styles.modelDetails}>
-                        <span>{model.sizeMB}MB</span>
-                        <span style={styles.modelQuality}>{model.quality}</span>
-                      </div>
-                    </button>
-                  ))}
-                </div>
-              </div>
-            )}
-
-            {/* Toggle Advanced */}
-            <button
-              style={styles.advancedToggle}
-              onClick={() => setShowAdvanced(!showAdvanced)}
-            >
-              {showAdvanced ? 'Hide options' : 'Choose different model'}
-            </button>
-
-            {/* Action Buttons */}
-            <div style={styles.buttonGroup}>
-              <button style={styles.primaryButton} onClick={handleDownload}>
-                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" style={{ marginRight: 8 }}>
-                  <path
-                    d="M10 3v10m0 0l-3-3m3 3l3-3M4 17h12"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                </svg>
-                Download Now ({selectedModelInfo?.sizeMB || 75}MB)
-              </button>
-
-              <button style={styles.skipButton} onClick={onSkip}>
-                Skip for now (recording disabled)
-              </button>
-            </div>
-          </>
-        );
-
-      case 'downloading':
-        return (
-          <>
-            {/* Progress Illustration */}
-            <div style={styles.illustrationContainer}>
-              <div style={styles.progressCircleContainer}>
-                <svg width="120" height="120" viewBox="0 0 120 120">
-                  {/* Background circle */}
-                  <circle
-                    cx="60"
-                    cy="60"
-                    r="54"
-                    fill="none"
-                    stroke={colors.bg.tertiary}
-                    strokeWidth="8"
-                  />
-                  {/* Progress circle */}
-                  <circle
-                    cx="60"
-                    cy="60"
-                    r="54"
-                    fill="none"
-                    stroke={colors.accent.default}
-                    strokeWidth="8"
-                    strokeLinecap="round"
-                    strokeDasharray={`${(progress?.percent || 0) * 3.39} 339`}
-                    transform="rotate(-90 60 60)"
-                    style={{ transition: 'stroke-dasharray 0.3s ease' }}
-                  />
-                </svg>
-                <div style={styles.progressPercent}>{progress?.percent || 0}%</div>
-              </div>
-            </div>
-
-            {/* Title */}
-            <h2 style={styles.title}>Downloading Model...</h2>
-
-            {/* Progress Details */}
-            <div style={styles.progressDetails}>
-              <div style={styles.progressRow}>
-                <span style={styles.progressLabel}>Downloaded</span>
-                <span style={styles.progressValue}>
-                  {formatBytes(progress?.downloadedBytes || 0)} / {formatBytes(progress?.totalBytes || 0)}
-                </span>
-              </div>
-              <div style={styles.progressRow}>
-                <span style={styles.progressLabel}>Speed</span>
-                <span style={styles.progressValue}>{formatSpeed(progress?.speedBps || 0)}</span>
-              </div>
-              <div style={styles.progressRow}>
-                <span style={styles.progressLabel}>Time remaining</span>
-                <span style={styles.progressValue}>
-                  {formatTime(progress?.estimatedSecondsRemaining || 0)}
-                </span>
-              </div>
-            </div>
-
-            {/* Cancel Button */}
-            <button style={styles.cancelButton} onClick={handleCancel}>
-              Cancel Download
-            </button>
-          </>
-        );
-
-      case 'complete':
-        return (
-          <>
-            {/* Success Icon */}
-            <div style={styles.illustrationContainer}>
-              <div style={styles.successCircle}>
-                <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
-                  <path
-                    d="M16 24l6 6 12-12"
-                    stroke={colors.status.success}
-                    strokeWidth="4"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                </svg>
-              </div>
-            </div>
-
-            {/* Title */}
-            <h2 style={{ ...styles.title, color: colors.status.success }}>Download Complete!</h2>
-
-            {/* Description */}
-            <p style={styles.description}>
-              The speech recognition model has been downloaded successfully.
-              markupr can now transcribe your voice offline.
-            </p>
-
-            {/* Continue Button */}
-            <button style={styles.successButton} onClick={onComplete}>
-              Start Using markupr
-              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" style={{ marginLeft: 8 }}>
-                <path
-                  d="M7.5 15l5-5-5-5"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                />
-              </svg>
-            </button>
-          </>
-        );
-
-      case 'error':
-        return (
-          <>
-            {/* Error Icon */}
-            <div style={styles.illustrationContainer}>
-              <div style={styles.errorCircle}>
-                <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
-                  <path
-                    d="M24 16v8m0 8h.01"
-                    stroke={colors.status.error}
-                    strokeWidth="4"
-                    strokeLinecap="round"
-                  />
-                </svg>
-              </div>
-            </div>
-
-            {/* Title */}
-            <h2 style={{ ...styles.title, color: colors.status.error }}>Download Failed</h2>
-
-            {/* Error Message */}
-            <div style={styles.errorBox}>
-              <span>{error}</span>
-            </div>
-
-            {/* Retry Button */}
-            <div style={styles.buttonGroup}>
-              <button style={styles.primaryButton} onClick={handleDownload}>
-                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" style={{ marginRight: 8 }}>
-                  <path
-                    d="M4 10a6 6 0 1 1 12 0m-6-6v6m0 0l-2-2m2 2l2-2"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                </svg>
-                Try Again
-              </button>
-
-              <button style={styles.skipButton} onClick={onSkip}>
-                Skip for now
-              </button>
-            </div>
-          </>
-        );
-    }
-  };
-
-  return (
-    <div style={styles.overlay}>
-      <div style={styles.backdrop} />
-      <div style={styles.modal}>
-        <div style={styles.content}>{renderContent()}</div>
-      </div>
-    </div>
-  );
-};
-
-// ============================================================================
-// useModelCheck Hook - Check if model download is needed
-// ============================================================================
-
-interface ModelCheckResult {
-  isChecking: boolean;
-  needsDownload: boolean;
-  hasTranscriptionCapability: boolean;
-}
-
-export function useModelCheck(): ModelCheckResult {
-  const [isChecking, setIsChecking] = useState(true);
-  const [needsDownload, setNeedsDownload] = useState(false);
-  const [hasTranscriptionCapability, setHasTranscriptionCapability] = useState(false);
-
-  useEffect(() => {
-    let isMounted = true;
-    const safetyTimeout = window.setTimeout(() => {
-      if (!isMounted) return;
-      console.warn('[useModelCheck] Capability check timed out, continuing startup.');
-      setIsChecking(false);
-    }, 7000);
-
-    const withTimeout = async <T,>(promise: Promise<T>, timeoutMs: number, fallback: T): Promise<T> => {
-      let timeoutId: number | null = null;
-      const timeoutPromise = new Promise<T>((resolve) => {
-        timeoutId = window.setTimeout(() => resolve(fallback), timeoutMs);
-      });
-
-      const result = await Promise.race([promise, timeoutPromise]);
-      if (timeoutId !== null) {
-        window.clearTimeout(timeoutId);
-      }
-      return result;
-    };
-
-    const checkModel = async () => {
-      try {
-        // Check if we have any transcription capability (OpenAI or Whisper)
-        const hasCapability = await withTimeout(
-          window.markupr.whisper.hasTranscriptionCapability(),
-          4000,
-          false
-        );
-        if (!isMounted) return;
-        setHasTranscriptionCapability(hasCapability);
-
-        if (!hasCapability) {
-          // Check specifically if we have a Whisper model
-          const modelCheck = await withTimeout(
-            window.markupr.whisper.checkModel(),
-            4000,
-            {
-              hasAnyModel: false,
-              defaultModel: null,
-              downloadedModels: [],
-              recommendedModel: 'tiny',
-              recommendedModelSizeMB: 75,
-            }
-          );
-          if (!isMounted) return;
-          setNeedsDownload(!modelCheck.hasAnyModel);
-        } else {
-          setNeedsDownload(false);
-        }
-      } catch (error) {
-        if (!isMounted) return;
-        console.error('[useModelCheck] Failed to check model status:', error);
-        setNeedsDownload(true);
-      } finally {
-        window.clearTimeout(safetyTimeout);
-        if (isMounted) {
-          setIsChecking(false);
-        }
-      }
-    };
-
-    checkModel();
-
-    return () => {
-      isMounted = false;
-      window.clearTimeout(safetyTimeout);
-    };
-  }, []);
-
-  return { isChecking, needsDownload, hasTranscriptionCapability };
-}
-
-// ============================================================================
-// Styles
-// ============================================================================
-
-type ExtendedCSSProperties = React.CSSProperties & {
-  WebkitAppRegion?: 'drag' | 'no-drag';
-};
-
-const styles: Record<string, ExtendedCSSProperties> = {
-  overlay: {
-    position: 'fixed',
-    inset: 0,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    zIndex: 50,
-    // Solid background to work with transparent Electron window
-    background: 'linear-gradient(135deg, #0f172a 0%, #1e293b 100%)',
-  },
-
-  backdrop: {
-    position: 'absolute',
-    inset: 0,
-    // Keep backdrop for additional depth but make it subtle
-    backgroundColor: 'rgba(0, 0, 0, 0.3)',
-    backdropFilter: 'blur(8px)',
-    WebkitBackdropFilter: 'blur(8px)',
-  },
-
-  modal: {
-    position: 'relative',
-    width: '100%',
-    maxWidth: 420,
-    margin: 24,
-    // Fully opaque background for the modal
-    backgroundColor: 'rgb(17, 24, 39)',
-    borderRadius: 24,
-    boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1)',
-    overflow: 'hidden',
-    WebkitAppRegion: 'no-drag',
-  },
-
-  content: {
-    padding: '40px 32px',
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    textAlign: 'center',
-    overflowY: 'auto',
-  },
-
-  illustrationContainer: {
-    marginBottom: 24,
-  },
-
-  iconCircle: {
-    width: 96,
-    height: 96,
-    borderRadius: '50%',
-    backgroundColor: 'var(--accent-subtle)',
-    border: '2px solid var(--accent-default)',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-
-  title: {
-    fontSize: 22,
-    fontWeight: 600,
-    color: 'var(--text-primary)',
-    marginBottom: 12,
-    letterSpacing: '-0.01em',
-  },
-
-  description: {
-    fontSize: 14,
-    lineHeight: 1.6,
-    color: 'var(--text-secondary)',
-    marginBottom: 24,
-    maxWidth: 340,
-  },
-
-  buttonGroup: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: 12,
-    width: '100%',
-    maxWidth: 300,
-  },
-
-  primaryButton: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: '100%',
-    padding: '14px 24px',
-    backgroundColor: 'var(--accent-default)',
-    border: 'none',
-    borderRadius: 12,
-    color: 'var(--text-inverse)',
-    fontSize: 15,
-    fontWeight: 600,
-    cursor: 'pointer',
-    transition: 'all 0.2s ease',
-  },
-
-  skipButton: {
-    padding: '10px 16px',
-    backgroundColor: 'transparent',
-    border: 'none',
-    color: 'var(--text-tertiary)',
-    fontSize: 13,
-    cursor: 'pointer',
-    transition: 'color 0.2s ease',
-  },
-
-  advancedToggle: {
-    marginBottom: 24,
-    padding: '8px 16px',
-    backgroundColor: 'transparent',
-    border: 'none',
-    color: 'var(--text-link)',
-    fontSize: 13,
-    cursor: 'pointer',
-    transition: 'color 0.2s ease',
-  },
-
-  modelSelector: {
-    width: '100%',
-    marginBottom: 16,
-  },
-
-  modelLabel: {
-    display: 'block',
-    fontSize: 13,
-    color: 'var(--text-secondary)',
-    marginBottom: 12,
-    textAlign: 'left',
-  },
-
-  modelOptions: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: 8,
-  },
-
-  modelOption: {
-    width: '100%',
-    padding: '12px 16px',
-    backgroundColor: 'transparent',
-    border: '1px solid var(--bg-tertiary)',
-    borderRadius: 10,
-    cursor: 'pointer',
-    transition: 'all 0.2s ease',
-    textAlign: 'left',
-  },
-
-  modelOptionHeader: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginBottom: 4,
-  },
-
-  modelName: {
-    fontSize: 14,
-    fontWeight: 600,
-    color: 'var(--text-primary)',
-    textTransform: 'capitalize',
-  },
-
-  downloadedBadge: {
-    fontSize: 11,
-    padding: '2px 8px',
-    backgroundColor: 'var(--status-success-subtle)',
-    color: 'var(--status-success)',
-    borderRadius: 4,
-  },
-
-  modelDetails: {
-    display: 'flex',
-    gap: 12,
-    fontSize: 12,
-    color: 'var(--text-tertiary)',
-  },
-
-  modelQuality: {
-    color: 'var(--text-secondary)',
-  },
-
-  // Progress state styles
-  progressCircleContainer: {
-    position: 'relative',
-    width: 120,
-    height: 120,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-
-  progressPercent: {
-    position: 'absolute',
-    fontSize: 24,
-    fontWeight: 700,
-    color: 'var(--text-primary)',
-  },
-
-  progressDetails: {
-    width: '100%',
-    maxWidth: 280,
-    marginBottom: 24,
-  },
-
-  progressRow: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    padding: '8px 0',
-    borderBottom: '1px solid rgba(255, 255, 255, 0.05)',
-  },
-
-  progressLabel: {
-    fontSize: 13,
-    color: 'var(--text-tertiary)',
-  },
-
-  progressValue: {
-    fontSize: 13,
-    color: 'var(--text-primary)',
-    fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',
-  },
-
-  cancelButton: {
-    padding: '12px 24px',
-    backgroundColor: 'transparent',
-    border: '1px solid var(--border-strong)',
-    borderRadius: 10,
-    color: 'var(--text-secondary)',
-    fontSize: 14,
-    cursor: 'pointer',
-    transition: 'all 0.2s ease',
-  },
-
-  // Success state styles
-  successCircle: {
-    width: 96,
-    height: 96,
-    borderRadius: '50%',
-    backgroundColor: 'var(--status-success-subtle)',
-    border: '2px solid var(--status-success)',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-
-  successButton: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: '100%',
-    maxWidth: 300,
-    padding: '14px 24px',
-    background: 'linear-gradient(135deg, var(--status-success) 0%, #059669 100%)',
-    border: 'none',
-    borderRadius: 12,
-    color: 'var(--text-inverse)',
-    fontSize: 15,
-    fontWeight: 600,
-    cursor: 'pointer',
-    transition: 'all 0.2s ease',
-  },
-
-  // Error state styles
-  errorCircle: {
-    width: 96,
-    height: 96,
-    borderRadius: '50%',
-    backgroundColor: 'var(--status-error-subtle)',
-    border: '2px solid var(--status-error)',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-
-  errorBox: {
-    width: '100%',
-    maxWidth: 300,
-    padding: 12,
-    backgroundColor: 'var(--status-error-subtle)',
-    border: '1px solid rgba(239, 68, 68, 0.3)',
-    borderRadius: 8,
-    marginBottom: 24,
-    fontSize: 13,
-    color: 'var(--status-error)',
-    textAlign: 'center',
-  },
-};
-
-export default ModelDownloadDialog;