Hugging Face's logo

Spaces:
multimodalart
/
ai-toolkit
Running on CPU Upgrade

App Files Community
15
ai-toolkit
File size: 3,236 Bytes 
f555806
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
'use client';

import { useHFJobStatus } from '@/hooks/useHFJobStatus';
import { ExternalLink, RefreshCw } from 'lucide-react';
import { Button } from '@headlessui/react';

interface HFJobStatusProps {
  hfJobId: string;
  hfJobUrl?: string;
}

export default function HFJobStatus({ hfJobId, hfJobUrl }: HFJobStatusProps) {
  const { status, loading, error } = useHFJobStatus(hfJobId);

  if (error) {
    return (
      <div className="flex items-center gap-2">
        <span className="text-xs text-red-400">Status Error</span>
        {hfJobUrl && (
          <a 
            href={hfJobUrl} 
            target="_blank" 
            rel="noopener noreferrer" 
            className="text-blue-400 hover:text-blue-300"
            title="Check logs on HF Jobs"
          >
            <ExternalLink size={14} />
          </a>
        )}
      </div>
    );
  }

  if (loading && !status) {
    return (
      <div className="flex items-center gap-2">
        <RefreshCw size={14} className="animate-spin" />
        <span className="text-xs text-gray-400">Checking...</span>
      </div>
    );
  }

  if (!status) {
    return (
      <div className="flex items-center gap-2">
        <span className="text-xs text-gray-400">Unknown</span>
        {hfJobUrl && (
          <a 
            href={hfJobUrl} 
            target="_blank" 
            rel="noopener noreferrer" 
            className="text-blue-400 hover:text-blue-300"
            title="Check logs on HF Jobs"
          >
            <ExternalLink size={14} />
          </a>
        )}
      </div>
    );
  }

  const getStatusColor = (statusStage: string) => {
    switch (statusStage.toUpperCase()) {
      case 'RUNNING':
        return 'text-blue-400';
      case 'COMPLETED':
      case 'SUCCESS':
        return 'text-green-400';
      case 'FAILED':
      case 'ERROR':
        return 'text-red-400';
      case 'PENDING':
      case 'QUEUED':
        return 'text-yellow-400';
      case 'CANCELLED':
      case 'STOPPED':
        return 'text-gray-400';
      default:
        return 'text-gray-400';
    }
  };

  const getStatusLabel = (statusStage: string) => {
    switch (statusStage.toUpperCase()) {
      case 'RUNNING':
        return 'Running';
      case 'COMPLETED':
        return 'Completed';
      case 'FAILED':
        return 'Failed';
      case 'PENDING':
        return 'Pending';
      case 'QUEUED':
        return 'Queued';
      case 'CANCELLED':
        return 'Cancelled';
      case 'STOPPED':
        return 'Stopped';
      default:
        return statusStage;
    }
  };

  return (
    <div className="flex items-center gap-2">
      <div className="flex items-center gap-1">
        {loading && <RefreshCw size={12} className="animate-spin" />}
        <span className={`text-xs font-medium ${getStatusColor(status.status)}`}>
          {getStatusLabel(status.status)}
        </span>
      </div>
      {hfJobUrl && (
        <a 
          href={hfJobUrl} 
          target="_blank" 
          rel="noopener noreferrer" 
          className="text-blue-400 hover:text-blue-300"
          title={`Check logs on HF Jobs (${status.flavor})`}
        >
          <ExternalLink size={14} />
        </a>
      )}
    </div>
  );
}