Update

demo_list.py

@@ -24,7 +24,7 @@ class DemoList:
         ['created', 'str'],
         ['sdk', 'markdown'],
         ['sdk_version', 'str'],
-        ['suggested_hardware', 'str'],
+        ['suggested_hardware', 'markdown'],
     ]
 
     def __init__(self):
@@ -45,7 +45,7 @@ class DemoList:
             card = space_info.cardData
             info = data[url]
             info['title'] = card['title']
-            info['sdk'] = self.colorize_sdk(card['sdk'])
+            info['sdk'] = self.to_div(card['sdk'], category_name='sdk')
             info['sdk_version'] = card.get('sdk_version', '')
             info['likes'] = space_info.likes
             last_modified = datetime.datetime.strptime(
@@ -54,11 +54,14 @@ class DemoList:
             created = datetime.datetime.strptime(info['created'],
                                                  '%Y-%m-%d-%H-%M-%S')
             info['created'] = created.strftime('%Y/%m/%d %H:%M:%S')
-            info['status'] = self.colorize_status(space_info.runtime['stage'])
-            info['suggested_hardware'] = card.get('suggested_hardware', '')
-            info['hardware'] = self.colorize_hardware(
+            info['status'] = self.to_div(space_info.runtime['stage'],
+                                         category_name='status')
+            info['suggested_hardware'] = self.to_div(card.get(
+                'suggested_hardware', ''),
+                                                     category_name='hardware')
+            info['hardware'] = self.to_div(
                 space_info.runtime['hardware']['current'],
-                info['suggested_hardware'])
+                category_name='hardware')
         return data
 
     @staticmethod
@@ -91,37 +94,11 @@ class DemoList:
     def column_datatype(self):
         return list(map(operator.itemgetter(1), self.COLUMN_INFO))
 
-    def colorize_status(self, status: str) -> str:
-        if status == 'RUNNING':
-            color = 'green'
-        elif status in ['STOPPED', 'PAUSED']:
-            color = 'orange'
-        elif status in ['RUNTIME_ERROR', 'BUILD_ERROR']:
-            color = 'red'
-        else:
-            color = ''
-        return f'<div class="{color}">{status}</div>'
-
-    def colorize_sdk(self, sdk: str) -> str:
-        if sdk == 'gradio':
-            color = 'orange'
-        elif sdk == 'docker':
-            color = 'deepskyblue'
-        else:
-            color = ''
-        return f'<div class="{color}">{sdk}</div>'
-
-    def colorize_hardware(self, hardware: str | None,
-                          suggested_hardware: str) -> str:
-        if hardware is None:
-            return ''
-        if 't4' in hardware or 'a10g' in hardware or 'a100' in hardware:
-            color = 'red'
-        elif suggested_hardware and 'cpu' not in suggested_hardware:
-            color = 'deepskyblue'
-        else:
-            return hardware
-        return f'<div class="{color}">{hardware}</div>'
+    def to_div(self, text: str | None, category_name: str) -> str:
+        if text is None:
+            text = ''
+        class_name = f'{category_name}-{text.lower()}'
+        return f'<div class="{class_name}">{text}</div>'
 
     def to_df(self) -> pd.DataFrame:
         data = copy.deepcopy(self.data)

style.css

@@ -18,22 +18,47 @@ body a:hover {
   text-decoration: underline;
 }
 
-div.green {
+/* set colors for statuses */
+div.status-running {
   color: green;
 }
 
-div.red {
+div.status-stopped,
+div.status-paused {
+  color: orange;
+}
+
+div.status-runtime_error,
+div.status-build_error {
   color: red;
 }
 
-div.deepskyblue {
+/* set colors for sdks */
+div.sdk-gradio {
+  color: orange;
+}
+
+div.sdk-docker {
   color: deepskyblue;
 }
 
-div.orange {
+/* set colors for hardware types */
+div.hardware-a100-large,
+div.hardware-zero-a10g,
+div.hardware-a10g-large,
+div.hardware-a10g-small {
+  color: red;
+}
+
+div.hardware-t4-medium,
+div.hardware-t4-small {
   color: orange;
 }
 
-div.cyan {
-  color: cyan;
+div.hardware-cpu-upgrade {
+  color: green;
+}
+
+div.hardware-cpu-basic {
+  color: deepskyblue;
 }