feat(errors): Add better error handling

app.py

@@ -66,11 +66,15 @@ def create_task():
 def queue_task():
     task_id = request.args.get('task_id')
 
-    tasks[task_id]["value"] = generate_image(tasks[task_id]["prompt"])
-
-    tasks[task_id]["status"] = "completed"
-
-    tasks[task_id]["completed_at"] = time()
+    try:
+        tasks[task_id]["value"] = generate_image(tasks[task_id]["prompt"])
+    except Exception as ex:
+        tasks[task_id]["status"] = "failed"
+        tasks[task_id]["error"] = repr(ex)
+    else:
+        tasks[task_id]["status"] = "completed"
+    finally:
+        tasks[task_id]["completed_at"] = time()
 
     return jsonify(tasks[task_id])
 

static/js/index.js

@@ -47,11 +47,16 @@ const generate = async () => {
     const longPromises = [queueTask(task.task_id), longPollTask(task)];
     const completedTask = await Promise.any(longPromises);
 
-    setOutput('booster', 'completed');
-
     generating = false;
     timerCleanup(completedTask);
 
+    if (completedTask.status === 'failed') {
+      setOutput('booster', 'failed');
+      throw new Error(`Task failed: ${completedTask.error}`);
+    }
+
+    setOutput('booster', 'completed');
+
     cardSlot.innerHTML = cardHTML(details);
     updateCardName(trainerName, pokeName, useTrainerName);
     const picture = document.querySelector('img.picture');

static/js/network.js

@@ -34,6 +34,10 @@ const longPollTask = async (task, interval = 10_000, max) => {
     return task;
   }
 
+  if (task.status === 'failed') {
+    return task;
+  }
+
   etaDisplay.textContent = Math.round(task.eta);
 
   await new Promise((resolve) => setTimeout(resolve, interval));

static/style.css

@@ -4,8 +4,9 @@
   --theme-secondary: hsl(165 67% 48%);
   --theme-ternary: hsl(112 46% 75%);
   --theme-highlight: hsl(111 95% 92%);
-  --theme-white: hsl(0 100% 100%);
   --theme-subtext: hsl(0 0% 30%);
+  --theme-error-bg: hsl(6 93% 71%);
+  --theme-error-border: hsl(355 85% 55%);
 }
 
 html,
@@ -38,7 +39,7 @@ body {
 body {
   height: 100vh;
   background-color: whitesmoke;
-  background-image: linear-gradient(300deg, var(--theme-highlight), var(--theme-white));
+  background-image: linear-gradient(300deg, var(--theme-highlight), white);
   font-family: 'Gill Sans', 'Gill Sans Mt', 'sans-serif';
 }
 
@@ -249,6 +250,22 @@ button.toggle-name.off {
   opacity: 1;
 }
 
+[data-state="failed"] .duration {
+  border-color: var(--theme-error-border);
+  background-color: var(--theme-error-bg);
+  color: transparent;
+}
+
+[data-state="failed"] .duration.displayed::after {
+  content: 'ERROR';
+  position: absolute;
+  top: 20%;
+  left: 0;
+  width: 100%;
+  text-align: center;
+  color: white;
+}
+
 .scene {
   --scale: 0.9;
   height: 40rem;
@@ -562,11 +579,11 @@ img.hf-logo {
   }
 }
 
-[data-mode='booster']:is([data-state='ready'], [data-state='generating'], [data-state='completed']) .booster {
+[data-mode='booster']:is([data-state='ready'], [data-state='generating'], [data-state='completed'], [data-state='failed']) .booster {
   display: block;
 }
 
-[data-state='ready'] .booster {
+:is([data-state='ready'], [data-state='failed']) .booster {
   animation: 5s bounce infinite ease-out;
 }