Validate api key again before changing model

backend/src/app.js

@@ -14,6 +14,9 @@ const port = process.env.PORT || 3001;
 
 const envOpenAiKey = process.env.OPENAI_API_KEY;
 
+// use default model
+const defaultModel = "gpt-4";
+
 // Creating express server
 const app = express();
 // for parsing application/json
@@ -56,7 +59,7 @@ app.use(function (req, res, next) {
  req.session.apiKey = envOpenAiKey || "";
  }
  if (!req.session.gptModel) {
- req.session.gptModel = "gpt-4";
+ req.session.gptModel = defaultModel;
  }
  next();
 });
@@ -68,7 +71,7 @@ app.listen(port, () => {
  // for dev purposes only - set the API key from the environment variable
  if (envOpenAiKey) {
  console.debug("Initializing models with API key from environment variable");
- const defaultSession = { apiKey: "", gptModel: "gpt-4" };
+ const defaultSession = { apiKey: "", gptModel: defaultModel };
  setOpenAiApiKey(defaultSession, process.env.OPENAI_API_KEY);
  }
 });

backend/src/openai.js

@@ -63,7 +63,6 @@ const chatGptFunctions = [
 
 // test the api key works with the model
 async function validateApiKey(apiKey, gptModel) {
- console.debug("Validating API key: " + apiKey + " with model: " + gptModel);
  try {
  const testOpenAI = new OpenAIApi(new Configuration({ apiKey: apiKey }));
  const response = await testOpenAI.createChatCompletion({
@@ -110,8 +109,10 @@ async function setGptModel(session, model) {
  "Setting GPT model from: " + session.gptModel + " to: " + model
  );
  session.gptModel = model;
+ return true;
  } else {
  console.debug("Could not validate apiKey with model=" + model);
+ return false;
  }
  }
 }

backend/src/router.js

@@ -154,11 +154,14 @@ router.get("/openai/apiKey", (req, res, next) => {
 });
 
 // Set the ChatGPT model
-router.post("/openai/model", (req, res, next) => {
+router.post("/openai/model", async (req, res, next) => {
  const model = req.body?.model;
  if (model) {
- setGptModel(req.session, model);
- res.send("ChatGPT model set. ");
+ if (await setGptModel(req.session, model)) {
+ res.status(200).send("ChatGPT model set. ");
+ } else {
+ res.status(401).send("Could not set model");
+ }
  }
 });
 

frontend/src/components/ModelSelectionBox/ModelSelectionBox.css

@@ -19,11 +19,15 @@
  color:cadetblue
 }
 
-#model-selection-row p {
- margin-right: 10px;
- padding: 0;
+#p error {
+ color: red;
+}
+
+#model-selection-info {
+
 }
 
+
 #model-selection-menu {
  width: 60%;
  padding: 5px;

frontend/src/components/ModelSelectionBox/ModelSelectionBox.tsx

@@ -1,7 +1,7 @@
 // Path: frontend\src\components\ModelSelectionBox\ModelSelectionBox.tsx
 import React, { useEffect, useState } from "react";
 import "./ModelSelectionBox.css";
-import { setGptModel, getGptModel } from "../../service/openaiService";
+import { setGptModel, getGptModel } from "../../service/chatService";
 import { CHAT_MODELS } from "../../models/chat";
 
 // return a drop down menu with the models
@@ -11,11 +11,16 @@ function ModelSelectionBox() {
  // model in use by the app
  const [modelInUse, setModelInUse] = useState("gpt-4");
 
+ const [errorChangingModel, setErrorChangingModel] = useState(false);
+
  // handle button click to log the selected model
  const submitSelectedModel = async () => {
  console.log("selected model: " + selectedModel);
  if (await setGptModel(selectedModel)) {
  setModelInUse(selectedModel);
+ setErrorChangingModel(false);
+ } else {
+ setErrorChangingModel(true);
  }
  };
 
@@ -55,10 +60,18 @@ function ModelSelectionBox() {
  Choose
  </button>
  </div>
+
  <div id="model-selection-info">
- <p>
- You are chatting to model: <b> {modelInUse}</b>
- </p>
+ {errorChangingModel ? (
+ <p id="error">
+ Could not change model. You are still chatting to:
+ <b> {modelInUse} </b>
+ </p>
+ ) : (
+ <p>
+ You are chatting to model: <b> {modelInUse}</b>
+ </p>
+ )}
  </div>
  </div>
  );

frontend/src/service/chatService.ts

@@ -37,7 +37,6 @@ const getOpenAIApiKey = async (): Promise<string> => {
 };
 
 const setGptModel = async (model: string): Promise<boolean> => {
- console.log("Setting gpt model to " + model);
  const response = await sendRequest(
  PATH + "model",
  "POST",