inclusive-design · klown · Mar 28, 2025 · Mar 28, 2025 · Apr 1, 2025 · Apr 1, 2025
diff --git a/apps/ollama/ollama.js b/apps/ollama/ollama.js
@@ -1,5 +1,5 @@
 /*
- * Copyright 2024 Inclusive Design Research Centre, OCAD University
+ * Copyright 2024-2025 Inclusive Design Research Centre, OCAD University
  * All rights reserved.
  *
  * Licensed under the New BSD license. You may not use this file except in
@@ -8,31 +8,13 @@
  * You may obtain a copy of the License at
  * https://github.com/inclusive-design/adaptive-palette/blob/main/LICENSE
  */
-
-import ollama from "ollama/browser";
+import { getModelNames, queryChat } from "../../src/client/ollamaApi";
 
 // Default name of model used (aka, none).  Set in setSelectedModel() handler.
 let nameOfModelToUse = "";
 const USE_ALL_MODELS = "useAllModels";
 const NO_AVAILABLE_MODELS = "No Available Models";
-
-/**
- * Retrieve a list of LLMs available from the service
- * @return {Array}    - Array of the names of the available models.
- */
-async function getModelNames () {
-  let modelNames = [];
-  try {
-    const list = await ollama.list();
-    list.models.forEach( (model) => {
-      modelNames.push(model.name);
-    });
-  }
-  catch (error) {
-    console.debug(error);
-  }
-  return modelNames;
-}
+const STREAM_RESPONSE = true;
 
 /**
  * Initialize the model <select> element's options:
@@ -129,33 +111,6 @@ function askClicked(event) {
   }
 }
 
-/**
- * Function for passing the chat prompt to the ollama service.
- * @param {String} query      - The prompt string to query the service with.
- * @param {String} modelName  - The name of the LLM to query.
- * @return {Object}           - The response from the service.
- */
-async function queryChat (query, modelName) {
-  let messageArray = [];
-  const textFromSystemPrompt = document.getElementById("systemPrompt").value.trim();
-  if (textFromSystemPrompt !== "") {
-    messageArray.push({
-      role: "system",
-      content: textFromSystemPrompt
-    });
-    console.debug(`queryChat(): system prompt is: "${textFromSystemPrompt}")`);
-  }
-  messageArray.push({ role: "user", content: query });
-  const response = await ollama.chat({
-    model: modelName,
-    messages: messageArray,
-    raw: true,
-    stream: true,
-    keep_alive: 15
-  });
-  return response;
-}
-
 /**
  * Handle the "Ask" button press by contructing a prompt from the text area
  * input and which of the "Ask" buttons was pressed.  Query the service with
@@ -175,7 +130,11 @@ async function executeAsk (addSingleToPrompt) {
     queryEachModel(promptText);
   }
   else if (modelInSelect !== NO_AVAILABLE_MODELS) {
-    const response = await queryChat(promptText, modelInSelect);
+    const textFromSystemPrompt = document.getElementById("systemPrompt").value.trim();
+    console.debug(`executeAsk(): promptText: ${promptText}`);
+    console.debug(`  textFromSystemPrompt: ${textFromSystemPrompt}`);
+    console.debug(`  modelInSelect: ${modelInSelect}`);
+    const response = await queryChat(promptText, modelInSelect, STREAM_RESPONSE, textFromSystemPrompt);
     outputResult(response, document.getElementById("ollamaOutput"), "No Result");
   }
   else {
@@ -237,7 +196,8 @@ async function queryEachModel (promptText) {
   const names = await getModelNames();
   let count = 0;
   names.forEach ((modelName) => {
-    queryChat(promptText, modelName)
+    const textFromSystemPrompt = document.getElementById("systemPrompt").value.trim();
+    queryChat(promptText, modelName, STREAM_RESPONSE, textFromSystemPrompt)
       .then(async (response) => {
         const outputEl = createOutputSection(modelName);
         await outputResult(response, outputEl, "No Result");

diff --git a/index.html b/index.html
@@ -7,21 +7,32 @@
     <title>Adaptive Palette</title>
   </head>
   <body>
+    <!--
+      Expandable form for the LLM prompts.
+    -->
+    <details style="margin-left: 0.5em; display:inline-grid;">
+      <summary style="color:white">Prompt Dialog</summary>
+      <div id="llm_prompt" style="display:inline-grid;"></div>
+    </details>
+    </div>
+    <div id="askForLlmSuggestions" style="margin-left: 0.5em;"></div>
+    <div id="llm_suggestions" style="color: white; background-color: black; margin-left:0.5em"></div>
     <div id="inputArea">
       <div id="input_palette"></div>
     </div>
-    <div class="oneRow">
-      <div id="backup_palette"></div>
+    <div>
       <div id="indicators"></div>
     </div>
     <div>
       <div id="modifiers"></div>
     </div>
-    <div>&nbsp;</div>
-    <div id="mainPaletteDisplayArea">
+    <div class="oneRow">
+      <div id="backup_palette"></div>
+      <div id="mainPaletteDisplayArea">
       <script type="module">
         import "./src/client/index.js";
       </script>
     </div>
+    <div>&nbsp;</div>
   </body>
 </html>
diff --git a/src/client/ActionTextCell.scss b/src/client/ActionTextCell.scss
@@ -0,0 +1,21 @@
+/*
+ * Copyright 2025 Inclusive Design Research Centre, OCAD University
+ * All rights reserved.
+ *
+ * Licensed under the New BSD license. You may not use this file except in
+ * compliance with this License.
+ *
+ * You may obtain a copy of the License at
+ * https://github.com/inclusive-design/adaptive-palette/blob/main/LICENSE
+ */
+
+.actionTextCell {
+  border: 2px solid black;
+  color: black;
+  background-color: white;
+  margin-left: 1rem;
+  padding-inline: 0.5rem;
+  text-align: left;
+  font-size: 1rem;
+  width: 50%;
+}
diff --git a/src/client/ActionTextCell.ts b/src/client/ActionTextCell.ts
@@ -0,0 +1,39 @@
+/*
+ * Copyright 2023-2024 Inclusive Design Research Centre, OCAD University
+ * All rights reserved.
+ *
+ * Licensed under the New BSD license. You may not use this file except in
+ * compliance with this License.
+ *
+ * You may obtain a copy of the License at
+ * https://github.com/inclusive-design/adaptive-palette/blob/main/LICENSE
+ */
+
+import { VNode } from "preact";
+import { html } from "htm/preact";
+
+import { generateGridStyle, speak } from "./GlobalUtils";
+import { BlissSymbolInfoType, LayoutInfoType } from "./index.d";
+import "./ActionTextCell.scss";
+
+type ActionTextCellPropsType = {
+  id: string,
+  options: BlissSymbolInfoType & LayoutInfoType
+};
+
+export function ActionTextCell (props: ActionTextCellPropsType): VNode {
+  const {
+    columnStart, columnSpan, rowStart, rowSpan, label
+  } = props.options;
+  const gridStyles = generateGridStyle(columnStart, columnSpan, rowStart, rowSpan);
+
+  const sentenceClicked = () => {
+    speak(label.replace(/^[0-9]+./,"").trim());  // remove any leading "1. "
+  };
+
+  return html`
+    <button id="${props.id}" class="actionTextCell" style="${gridStyles}" onClick=${sentenceClicked}>
+      ${label}
+    </button>
+  `;
+}
diff --git a/src/client/CommandTelegraphicCompletions.scss b/src/client/CommandTelegraphicCompletions.scss
@@ -0,0 +1,16 @@
+/*
+ * Copyright 2025 Inclusive Design Research Centre, OCAD University
+ * All rights reserved.
+ *
+ * Licensed under the New BSD license. You may not use this file except in
+ * compliance with this License.
+ *
+ * You may obtain a copy of the License at
+ * https://github.com/inclusive-design/adaptive-palette/blob/main/LICENSE
+ */
+
+.commandTelegraphicCompletions {
+  button {
+    font-size: 1rem;
+  }
+}
diff --git a/src/client/CommandTelegraphicCompletions.test.ts b/src/client/CommandTelegraphicCompletions.test.ts
@@ -0,0 +1,34 @@
+/*
+ * Copyright 2025 Inclusive Design Research Centre, OCAD University
+ * All rights reserved.
+ *
+ * Licensed under the New BSD license. You may not use this file except in
+ * compliance with this License.
+ *
+ * You may obtain a copy of the License at
+ * https://github.com/inclusive-design/adaptive-palette/blob/main/LICENSE
+ */
+
+import { render, screen } from "@testing-library/preact";
+import "@testing-library/jest-dom";
+import { html } from "htm/preact";
+
+import {
+  CommandTelegraphicCompletions, TELEGRPAHIC_BUTTON_LABEL, CANCEL_BUTTON_LABEL
+} from "./CommandTelegraphicCompletions";
+
+describe("CommandTelegraphicCompletions component", (): void => {
+
+  test("Render telegraphic buttons", async(): Promise<void> => {
+    render(html`
+      <${CommandTelegraphicCompletions} model="llama3.1:latest" stream=false />`
+    );
+    const triggerButton = await screen.findByText(TELEGRPAHIC_BUTTON_LABEL);
+    expect(triggerButton).toBeInTheDocument();
+    expect(triggerButton).toBeInstanceOf(HTMLButtonElement);
+
+    const cancelButton = await screen.findByText(CANCEL_BUTTON_LABEL);
+    expect(cancelButton).toBeInTheDocument();
+    expect(cancelButton).toBeInstanceOf(HTMLButtonElement);
+  });
+});
diff --git a/src/client/CommandTelegraphicCompletions.ts b/src/client/CommandTelegraphicCompletions.ts
@@ -0,0 +1,76 @@
+/*
+ * Copyright 2025 Inclusive Design Research Centre, OCAD University
+ * All rights reserved.
+ *
+ * Licensed under the New BSD license. You may not use this file except in
+ * compliance with this License.
+ *
+ * You may obtain a copy of the License at
+ * https://github.com/inclusive-design/adaptive-palette/blob/main/LICENSE
+ */
+
+import { VNode } from "preact";
+import { html } from "htm/preact";
+
+import { changeEncodingContents, sentenceCompletionsSignal } from "./GlobalData";
+import { TEXTAREA_ID } from "./DialogPromptEntries";
+import { queryChat } from "./ollamaApi";
+
+import "./CommandTelegraphicCompletions.scss";
+
+export const TELEGRPAHIC_BUTTON_LABEL = "Telegraphic Completions";
+export const CANCEL_BUTTON_LABEL = "Cancel";
+
+type CommandTelegraphicCompletionsProps = {
+  id: string,
+  model: string,
+  // This should be a boolean type, but for Preact/html the type of the value is
+  // string.  It should be "true" or "false".
+  stream: ("true" | "false")
+};
+
+export function CommandTelegraphicCompletions (props: CommandTelegraphicCompletionsProps): VNode {
+
+  const { model, stream } = props;
+  const streamAsBoolean = ( stream === "true" ? true : false );
+
+  // Handler for getting completions from ollama and into the
+  // `sentenceCompletionsSignal` signal's value.
+  const getTelegraphicCompletions = async (event): Promise<void> => {
+    event.preventDefault();
+    // Empty out the response area
+    sentenceCompletionsSignal.value = ["Working ..."];
+
+    // Get the label texts from each symbol in `changeEncodingContents`
+    const labelText = [];
+    changeEncodingContents.value.payloads.forEach( (value) => {
+      labelText.push(value.label);
+    });
+    const systemPrompt = (document.getElementById(TEXTAREA_ID) as HTMLTextAreaElement).value;
+    const response = await queryChat(
+      labelText.join(" "), model, streamAsBoolean, systemPrompt
+    );
+    // Parse the query response messages into an array of strings.  Note that
+    // with Llama3.1 each message is one of the suggested sentence completions.
+    // That might just be luck.
+    sentenceCompletionsSignal.value = response.message.content.split("\n");
+    console.log(`getTelegraphicCompletions(), ${sentenceCompletionsSignal.value}`);
+  };
+
+  // Handler to remove all of the suggested completions.
+  const removeSuggestions = (): void => {
+    sentenceCompletionsSignal.value = [];
+  };
+
+  return html`
+    <p class="commandTelegraphicCompletions">
+      <button onClick=${getTelegraphicCompletions}>
+        ${TELEGRPAHIC_BUTTON_LABEL}
+      </button>
+      <span style="visibility: hidden">F</span>
+      <button onClick=${removeSuggestions}>
+        ${CANCEL_BUTTON_LABEL}
+      </button>
+    </p>
+  `;
+}
diff --git a/src/client/DialogPromptEntries.scss b/src/client/DialogPromptEntries.scss
@@ -0,0 +1,15 @@
+/*
+ * Copyright 2025 Inclusive Design Research Centre, OCAD University
+ * All rights reserved.
+ *
+ * Licensed under the New BSD license. You may not use this file except in
+ * compliance with this License.
+ *
+ * You may obtain a copy of the License at
+ * https://github.com/inclusive-design/adaptive-palette/blob/main/LICENSE
+ */
+
+form.dialogPromptEntries {
+  display: inline-grid;
+  background:white;
+}