Ron Au commited on
Commit
9421891
1 Parent(s): 3750ff9

feat(errors): Add better error handling

Browse files
Files changed (4) hide show
  1. app.py +9 -5
  2. static/js/index.js +7 -2
  3. static/js/network.js +4 -0
  4. static/style.css +21 -4
app.py CHANGED
@@ -66,11 +66,15 @@ def create_task():
66
  def queue_task():
67
  task_id = request.args.get('task_id')
68
 
69
- tasks[task_id]["value"] = generate_image(tasks[task_id]["prompt"])
70
-
71
- tasks[task_id]["status"] = "completed"
72
-
73
- tasks[task_id]["completed_at"] = time()
 
 
 
 
74
 
75
  return jsonify(tasks[task_id])
76
 
 
66
  def queue_task():
67
  task_id = request.args.get('task_id')
68
 
69
+ try:
70
+ tasks[task_id]["value"] = generate_image(tasks[task_id]["prompt"])
71
+ except Exception as ex:
72
+ tasks[task_id]["status"] = "failed"
73
+ tasks[task_id]["error"] = repr(ex)
74
+ else:
75
+ tasks[task_id]["status"] = "completed"
76
+ finally:
77
+ tasks[task_id]["completed_at"] = time()
78
 
79
  return jsonify(tasks[task_id])
80
 
static/js/index.js CHANGED
@@ -47,11 +47,16 @@ const generate = async () => {
47
  const longPromises = [queueTask(task.task_id), longPollTask(task)];
48
  const completedTask = await Promise.any(longPromises);
49
 
50
- setOutput('booster', 'completed');
51
-
52
  generating = false;
53
  timerCleanup(completedTask);
54
 
 
 
 
 
 
 
 
55
  cardSlot.innerHTML = cardHTML(details);
56
  updateCardName(trainerName, pokeName, useTrainerName);
57
  const picture = document.querySelector('img.picture');
 
47
  const longPromises = [queueTask(task.task_id), longPollTask(task)];
48
  const completedTask = await Promise.any(longPromises);
49
 
 
 
50
  generating = false;
51
  timerCleanup(completedTask);
52
 
53
+ if (completedTask.status === 'failed') {
54
+ setOutput('booster', 'failed');
55
+ throw new Error(`Task failed: ${completedTask.error}`);
56
+ }
57
+
58
+ setOutput('booster', 'completed');
59
+
60
  cardSlot.innerHTML = cardHTML(details);
61
  updateCardName(trainerName, pokeName, useTrainerName);
62
  const picture = document.querySelector('img.picture');
static/js/network.js CHANGED
@@ -34,6 +34,10 @@ const longPollTask = async (task, interval = 10_000, max) => {
34
  return task;
35
  }
36
 
 
 
 
 
37
  etaDisplay.textContent = Math.round(task.eta);
38
 
39
  await new Promise((resolve) => setTimeout(resolve, interval));
 
34
  return task;
35
  }
36
 
37
+ if (task.status === 'failed') {
38
+ return task;
39
+ }
40
+
41
  etaDisplay.textContent = Math.round(task.eta);
42
 
43
  await new Promise((resolve) => setTimeout(resolve, interval));
static/style.css CHANGED
@@ -4,8 +4,9 @@
4
  --theme-secondary: hsl(165 67% 48%);
5
  --theme-ternary: hsl(112 46% 75%);
6
  --theme-highlight: hsl(111 95% 92%);
7
- --theme-white: hsl(0 100% 100%);
8
  --theme-subtext: hsl(0 0% 30%);
 
 
9
  }
10
 
11
  html,
@@ -38,7 +39,7 @@ body {
38
  body {
39
  height: 100vh;
40
  background-color: whitesmoke;
41
- background-image: linear-gradient(300deg, var(--theme-highlight), var(--theme-white));
42
  font-family: 'Gill Sans', 'Gill Sans Mt', 'sans-serif';
43
  }
44
 
@@ -249,6 +250,22 @@ button.toggle-name.off {
249
  opacity: 1;
250
  }
251
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
252
  .scene {
253
  --scale: 0.9;
254
  height: 40rem;
@@ -562,11 +579,11 @@ img.hf-logo {
562
  }
563
  }
564
 
565
- [data-mode='booster']:is([data-state='ready'], [data-state='generating'], [data-state='completed']) .booster {
566
  display: block;
567
  }
568
 
569
- [data-state='ready'] .booster {
570
  animation: 5s bounce infinite ease-out;
571
  }
572
 
 
4
  --theme-secondary: hsl(165 67% 48%);
5
  --theme-ternary: hsl(112 46% 75%);
6
  --theme-highlight: hsl(111 95% 92%);
 
7
  --theme-subtext: hsl(0 0% 30%);
8
+ --theme-error-bg: hsl(6 93% 71%);
9
+ --theme-error-border: hsl(355 85% 55%);
10
  }
11
 
12
  html,
 
39
  body {
40
  height: 100vh;
41
  background-color: whitesmoke;
42
+ background-image: linear-gradient(300deg, var(--theme-highlight), white);
43
  font-family: 'Gill Sans', 'Gill Sans Mt', 'sans-serif';
44
  }
45
 
 
250
  opacity: 1;
251
  }
252
 
253
+ [data-state="failed"] .duration {
254
+ border-color: var(--theme-error-border);
255
+ background-color: var(--theme-error-bg);
256
+ color: transparent;
257
+ }
258
+
259
+ [data-state="failed"] .duration.displayed::after {
260
+ content: 'ERROR';
261
+ position: absolute;
262
+ top: 20%;
263
+ left: 0;
264
+ width: 100%;
265
+ text-align: center;
266
+ color: white;
267
+ }
268
+
269
  .scene {
270
  --scale: 0.9;
271
  height: 40rem;
 
579
  }
580
  }
581
 
582
+ [data-mode='booster']:is([data-state='ready'], [data-state='generating'], [data-state='completed'], [data-state='failed']) .booster {
583
  display: block;
584
  }
585
 
586
+ :is([data-state='ready'], [data-state='failed']) .booster {
587
  animation: 5s bounce infinite ease-out;
588
  }
589