Style output

initialcapacity · Apr 20, 2024 · edcab15 · edcab15
1 parent c6153e1
commit edcab15
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 14 deletions.
diff --git a/src/app.ts b/src/app.ts
@@ -13,6 +13,9 @@ app.get('/', c => c.html(layout(indexHtml())))
 app.post('/', async c => {
     const data = await c.req.formData()
     const query = data.get("query")
+    if (typeof query !== "string") {
+        return c.html(layout(indexHtml({response: "Unable to answer query"})));
+    }
 
     const queryVector: EmbeddingResponse = await c.env.AI.run('@cf/baai/bge-large-en-v1.5', {
         text: [query],
@@ -26,13 +29,13 @@ app.post('/', async c => {
 
     const metadata = result.matches[0]?.metadata;
     if (metadata === undefined) {
-        return c.html(layout(indexHtml({response: "Unable to answer query"})));
+        return c.html(layout(indexHtml({query, response: "Unable to answer query"})));
     }
 
     const matchLink = metadata.link as string;
     const article = await c.env.ARTICLES.get(matchLink)
     if (article === null) {
-        return c.html(layout(indexHtml({response: "Unable to answer query"})));
+        return c.html(layout(indexHtml({query, response: "Unable to answer query", source: matchLink})));
     }
     const messages = [
         { role: "system", content: "You are a friendly assistant" },
@@ -44,7 +47,7 @@ app.post('/', async c => {
     ];
 
     const textResult = await c.env.AI.run("@cf/meta/llama-2-7b-chat-fp16", { messages });
-    return c.html(layout(indexHtml({response: textResult.response, source: matchLink})));
+    return c.html(layout(indexHtml({query, response: textResult.response, source: matchLink})));
 })
 
 export default app satisfies ExportedHandler<Env>;
diff --git a/src/templates/indexHtml.ts b/src/templates/indexHtml.ts
@@ -1,24 +1,47 @@
 import {html} from "hono/html";
 
-export const indexHtml = ({response, source}: {response?: string | undefined, source?: string | undefined} = {}) => html`
+type IndexProperties = {
+    query?: string | undefined,
+    response?: string | undefined,
+    source?: string | undefined,
+};
+
+export const indexHtml = ({query, response, source}: IndexProperties = {}) => html`
     <section>
         <h1>What would you like to know?</h1>
         <form action="/" method="post">
             <fieldset>
-                <label for="">
-                    Question
+                <label>
+                    ${query === undefined
+                            ? html`Query`
+                            : html`New Query`}
                     <input type="text" name="query">
                 </label>
                 <button type="submit">Ask</button>
             </fieldset>
         </form>
-        ${response === undefined
-                ? html``
-                : html`<p>${response}</p>`}
-        ${source === undefined
-                ? html``
-                : html`
-                    <p>Source: <a href="${source}">${source}</a></p>
-                `}
     </section>
+
+    ${query === undefined
+            ? html``
+            : html`
+                <section>
+                    <h2>Question</h2>
+                    <p>${query}</p>
+                </section>
+            `}
+    ${response === undefined
+            ? html``
+            : html`
+                <section>
+                    <h2>Answer</h2>
+                    <p>${response}</p>
+                    ${source === undefined
+                            ? html``
+                            : html`
+                                <h3>Source</h3>
+                                <p><a href="${source}">${source}</a></p>
+                            `}
+                </section>
+            `}
 `