feat: propagate error playground

packages/backend/src/managers/playground.ts

@@ -178,11 +178,11 @@ export class PlayGroundManager {
       throw new Error('model is not running');
     }
 
-    const query = {
+    const query: QueryState = {
       id: this.getNextQueryId(),
       modelId: modelInfo.id,
       prompt: prompt,
-    } as QueryState;
+    };
 
     const post_data = JSON.stringify({
       model: modelInfo.file,
@@ -213,17 +213,22 @@ export class PlayGroundManager {
           if (!q) {
             throw new Error('query not found in state');
           }
+          q.error = undefined;
           q.response = result as ModelResponse;
           this.queries.set(query.id, q);
-          this.sendQueriesState().catch((err: unknown) => {
-            console.error('playground: unable to send the response to the frontend', err);
-          });
+          void this.sendQueriesState();
         }
       });
     });
     // post the data
     post_req.write(post_data);
     post_req.end();
+    post_req.on('error', (error) => {
+      console.error('connection on error.');
+      const q = this.queries.get(query.id);
+      q.error = `Something went wrong while trying to request model.${String(error)}`;
+      void this.sendQueriesState();
+    });
 
     this.queries.set(query.id, query);
     await this.sendQueriesState();

packages/frontend/src/lib/ErrorMessage.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import Fa from 'svelte-fa';
+  import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
+  import Tooltip from './Tooltip.svelte';
+
+  export let error: string;
+  export let icon = false;
+</script>
+
+{#if icon}
+  {#if error !== undefined && error !== ''}
+    <Tooltip tip="{error}" top>
+      <Fa size="18" class="cursor-pointer text-red-500 {$$props.class}" icon="{faExclamationCircle}" />
+    </Tooltip>
+  {/if}
+{:else}
+  <div
+    class="text-red-500 p-1 flex flex-row items-center {$$props.class}"
+    class:opacity-0="{error === undefined || error === ''}">
+    <Fa size="18" class="cursor-pointer text-red-500" icon="{faExclamationCircle}" />
+    <div role="alert" aria-label="Error Message Content" class="ml-2">{error}</div>
+  </div>
+{/if}

packages/frontend/src/pages/ModelPlayground.svelte

@@ -12,11 +12,13 @@
   export let model: ModelInfo | undefined;
   import Fa from 'svelte-fa';
   import { faPlay, faStop, faInfo, faWarning } from '@fortawesome/free-solid-svg-icons';
+  import ErrorMessage from '/@/lib/ErrorMessage.svelte';
 
   let prompt = '';
   let queryId: number;
   let result: ModelResponseChoice | undefined = undefined;
   let inProgress = false;
+  let error: string | undefined = undefined;
   let playgroundState: PlaygroundState | undefined = undefined;
 
   onMount(() => {
@@ -53,6 +55,12 @@
   });
 
   function displayQuery(query: QueryState) {
+    if(query.error) {
+      error = query.error;
+      inProgress = false;
+      return;
+    }
+
     if (query.response) {
       inProgress = false;
       prompt = query.prompt;
@@ -72,6 +80,8 @@
     }
     inProgress = true;
     result = undefined;
+    error = undefined;
+
     // do not display anything before we get a response from askPlayground
     // (we can receive a new queryState before the new QueryId)
     queryId = -1;
@@ -150,6 +160,11 @@
 </script>
 
 <div class="m-4 w-full flew flex-col">
+  {#if error}
+    <div class="mb-2">
+      <ErrorMessage error="{error}"/>
+    </div>
+  {/if}
   <Card classes="bg-charcoal-800">
     <div slot="content" class="my-2 mx-4 w-full text-base font-normal flex flex-row items-center">
       {#key playgroundState?.status}
@@ -167,6 +182,7 @@
     placeholder="Type your prompt here"></textarea>
 
   <div class="mt-4 text-right">
+    <span>inProgress: {inProgress}</span>
     {#key playgroundState?.status}
       <Button disabled={!isPromptable()} inProgress={inProgress} on:click={() => askPlayground()}>Send Request</Button>
     {/key}

packages/shared/src/models/IPlaygroundQueryState.ts

@@ -5,4 +5,5 @@ export interface QueryState {
   modelId: string;
   prompt: string;
   response?: ModelResponse;
+  error?: string;
 }