From 1eb26b72f2a9aa67c74e8e024c6c957da457e60e Mon Sep 17 00:00:00 2001
From: Peter Burns <rictic@google.com>
Date: Fri, 11 Oct 2024 19:40:11 -0700
Subject: [PATCH] Improve robustness a bit, both in error handling and by
 asking nicely.

---
 index.html | 43 ++++++++++++++++++++++++++++++-------------
 llm.js     |  5 ++++-
 2 files changed, 34 insertions(+), 14 deletions(-)
diff --git a/index.html b/index.html
index c31e44f..992d67f 100644
--- a/index.html
+++ b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <meta charset="utf-8" />
 <title>jsonriver - a streaming JSON parser</title>
 <style>
@@ -140,23 +140,40 @@ <h2>Example 2: Streaming JSON from a language model by asking it nicely</h2>
     const requestText =
       input.value || `What are the top five movies about time travel?`;
     const request = makeLlmRequest(requestText, signal);
-    for await (const response of request) {
-      signal.throwIfAborted();
+    try {
+      for await (const response of request) {
+        signal.throwIfAborted();
+        render(
+          html`
+            <h3>You asked:</h3>
+            <p>"${requestText}"</p>
+            <h3>Response</h3>
+            ${response.map(
+              (r) =>
+                html`<h4>${r.heading}</h4>
+                  <p>${r.body}</p>`,
+            )}
+          `,
+          llmOutput,
+        );
+        // smooth scroll llmOutput to the bottom
+        llmOutput.scrollTop = llmOutput.scrollHeight;
+      }
+    } catch (e) {
+      // If the request is aborted, don't show an error
+      if (e.name === 'AbortError') return;
+
       render(
         html`
-          <h3>You asked:</h3>
-          <p>"${requestText}"</p>
-          <h3>Response</h3>
-          ${response.map(
-            (r) =>
-              html`<h4>${r.heading}</h4>
-                <p>${r.body}</p>`,
-          )}
+          <h3>Error</h3>
+          <p>${e.message}</p>
+          <p>
+            Sometimes, if a question touches on sensitive subjects, the model
+            won't return JSON. It's silly, but it happens.
+          </p>
         `,
         llmOutput,
       );
-      // smooth scroll llmOutput to the bottom
-      llmOutput.scrollTop = llmOutput.scrollHeight;
     }
   }
   askButton.addEventListener('click', askAndStreamOutput);
diff --git a/llm.js b/llm.js
index e3f1124..e364d5b 100644
--- a/llm.js
+++ b/llm.js
@@ -59,7 +59,10 @@ Assistant: [
     "heading": "Grandma Mazur (\"One for the Money\")",
     "body": "Grandma Mazur is a character from Janet Evanovich's Stephanie Plum novel series, who appeared in the film adaptation \"One for the Money.\" In her 70s, Grandma Mazur is anything but a typical grandmother. She's fond of attending funeral viewings for entertainment, carries a .45 caliber handgun in her purse, and often provides comic relief with her inappropriate comments and actions. In the books, she lives with Stephanie's parents and often drives her son-in-law to distraction. While the film wasn't as successful as fans hoped, Debbie Reynolds' portrayal captured Grandma Mazur's spirited and unconventional nature."
   }
-]`,
+]
+
+No matter what kind of question the user asks, always return a JSON array, with objects that have a 'heading' and a 'body'. It's ok to be silly, or strange, and to really stretch what the user is asking for in order to turn it into a list. This is just for a simple demo site, so the output doesn't matter too much. Have fun!
+`,
           },
           {
             role: 'user',
