Load OpenAI key from KV store and type AI answer

radu-matei · Mar 9, 2023 · 46a80ce · 46a80ce
1 parent b1726a1
commit 46a80ce
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 14 deletions.
diff --git a/api/src/index.ts b/api/src/index.ts
@@ -34,8 +34,10 @@ router.delete("/api/:id", async (req) => {
 
 router.post("/api/generate", async (_req, extra) => {
   try {
+    // Open the default KV store.
+    let kv = spinSdk.kv.openDefault();
     let configuration = new Configuration({
-      apiKey: spinSdk.config.get("openai_key"),
+      apiKey: decoder.decode(kv.get("openai_key")),
     });
 
     let openai = new OpenAIApi(configuration);
@@ -44,8 +46,6 @@ router.post("/api/generate", async (_req, extra) => {
     let p = JSON.parse(decoder.decode(extra.body)) as UserPrompt;
 
     console.log(`ID: ${p.id}, Message: ${p.message}`);
-    // Open the default KV store.
-    let kv = spinSdk.kv.openDefault();
 
     // Check the KV store if there is a record for the current conversation ID, otherwise, create a new conversation.
     let chat: Conversation;

diff --git a/spin.toml b/spin.toml
@@ -1,13 +1,22 @@
 spin_version = "1"
 authors = ["Radu Matei <radu.matei@fermyon.com>"]
 description = "Simple Spin application calling OpenAI APIs"
-name = "openai-demo"
+name = "openai-demo2"
 trigger = { type = "http", base = "/" }
 version = "0.1.0"
 
 [variables]
 openai_key = { required = true }
 
+
+# Chat UI
+[[component]]
+source = { url = "https://github.com/fermyon/spin-fileserver/releases/download/v0.0.1/spin_static_fs.wasm", digest = "sha256:650376c33a0756b1a52cad7ca670f1126391b79050df0321407da9c741d32375" }
+id = "web"
+files = [{ source = "web", destination = "/" }]
+[component.trigger]
+route = "/..."
+
 # API
 [[component]]
 id = "api"
@@ -22,15 +31,6 @@ route = "/api/..."
 command = "npm run build"
 workdir = "api"
 
-# Chat UI
-[[component]]
-source = { url = "https://github.com/fermyon/spin-fileserver/releases/download/v0.0.1/spin_static_fs.wasm", digest = "sha256:650376c33a0756b1a52cad7ca670f1126391b79050df0321407da9c741d32375" }
-id = "web"
-files = [{ source = "web", destination = "/" }]
-[component.trigger]
-route = "/..."
-
-
 # Spin KV explorer component
 [[component]]
 source = { url = "https://github.com/radu-matei/spin-kv-explorer/releases/download/v0.5.0/spin-kv-explorer.wasm", digest = "sha256:d5f9e1f6b61b90f7404e3800285f7860fe2cfc7d0116023efc370adbb403fe87" }

diff --git a/web/main.js b/web/main.js
@@ -14,12 +14,29 @@ function addMessageToChatHistory(speaker, message) {
 	chatHistory.scrollTop = chatHistory.scrollHeight;
 }
 
+// Function to add a new message to the chat history with typing animation
+function typeMessage(speaker, message) {
+	const msg = message.replace(/^\s+|\s+$/g, '');
+	const newMessage = document.createElement('p');
+	chatHistory.appendChild(newMessage);
+
+	let i = 0;
+	const typingAnimation = setInterval(() => {
+		newMessage.innerText = `${speaker}: ${msg.substring(0, i++)}_`;
+		if (i > msg.length) {
+			newMessage.innerText = `${speaker}: ${msg}`;
+			clearInterval(typingAnimation);
+			chatHistory.scrollTop = chatHistory.scrollHeight;
+		}
+	}, 30);
+}
+
 // Function to handle sending a message to the OpenAI API
 async function sendMessageToAPI(id, message) {
 	// TODO: Add code to send message to OpenAI API and get response
 	// The response should be passed to the addMessageToChatHistory function
 	let response = await fetch("/api/generate", { method: "POST", body: JSON.stringify({ id: id, message: message }) });
-	addMessageToChatHistory("AI", await response.text());
+	typeMessage("AI", await response.text());
 }
 
 // Event listener for send button click