Hugging Face's logo

Spaces:
multimodalart
/
ai-toolkit
Building on CPU Upgrade

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

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

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

const extractNamespaceFromUrl = (url?: string) => {
  if (!url) {
    return undefined;
  }
  try {
    const match = url.match(/\/jobs\/([^\/]+)\//);
    return match?.[1];
  } catch (error) {
    console.warn('Failed to derive HF job namespace from URL:', error);
    return undefined;
  }
};

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

  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>
  );
}