52 different llms (#96)

* Dropdown menu for changing gpt 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
@@ -55,6 +58,9 @@ app.use(function (req, res, next) {
  if (!req.session.apiKey) {
  req.session.apiKey = envOpenAiKey || "";
  }
+ if (!req.session.gptModel) {
+ req.session.gptModel = defaultModel;
+ }
  next();
 });
 
@@ -65,6 +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");
- setOpenAiApiKey({ apiKey: "" }, process.env.OPENAI_API_KEY);
+ const defaultSession = { apiKey: "", gptModel: defaultModel };
+ setOpenAiApiKey(defaultSession, process.env.OPENAI_API_KEY);
  }
 });

backend/src/openai.js

@@ -11,6 +11,7 @@ const {
 // OpenAI config
 let config = null;
 let openai = null;
+
 // functions available to ChatGPT
 const chatGptFunctions = [
  {
@@ -60,30 +61,24 @@ const chatGptFunctions = [
  },
 ];
 
-function initOpenAi() {
- config = new Configuration({
- apiKey: process.env.OPENAI_API_KEY,
- });
- openai = new OpenAIApi(config);
-}
-
 // test the api key works with the model
-async function validateApiKey(apiKey) {
+async function validateApiKey(apiKey, gptModel) {
  try {
  const testOpenAI = new OpenAIApi(new Configuration({ apiKey: apiKey }));
  const response = await testOpenAI.createChatCompletion({
- model: "gpt-4",
+ model: gptModel,
  messages: [{ role: "user", content: "this is a test prompt" }],
  });
  return true;
  } catch (error) {
+ console.error("Error validating API key: " + error);
  return false;
  }
 }
 
 async function setOpenAiApiKey(session, apiKey) {
  // initialise all models with the new key
- if (await validateApiKey(apiKey)) {
+ if (await validateApiKey(apiKey, session.gptModel)) {
  console.debug("Setting API key and initialising models");
  session.apiKey = apiKey;
  initOpenAi(session);
@@ -99,6 +94,29 @@ async function setOpenAiApiKey(session, apiKey) {
  }
 }
 
+function initOpenAi(session) {
+ configuration = new Configuration({
+ apiKey: session.apiKey,
+ });
+ openai = new OpenAIApi(configuration);
+ console.debug("OpenAI initialised");
+}
+
+async function setGptModel(session, model) {
+ if (model !== session.gptModel) {
+ if (await validateApiKey(session.apiKey, model)) {
+ console.debug(
+ "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;
+ }
+ }
+}
+
 // returns true if the function is in the list of functions available to ChatGPT
 function isChatGptFunction(functionName) {
  return chatGptFunctions.find((func) => func.name === functionName);
@@ -142,10 +160,11 @@ async function chatGptCallFunction(functionCall, defenceInfo, session) {
  session
  );
  }
- } else if (functionName == "askEmailWhitelist") {
- response = askEmailWhitelist(session.defences);
+ } else if (functionName == "getEmailWhitelist") {
+ response = getEmailWhitelist(
+ isDefenceActive("EMAIL_WHITELIST", session.activeDefences)
+ );
  }
-
  if (functionName === "askQuestion") {
  console.debug("Asking question: " + params.question);
  // if asking a question, call the queryDocuments
@@ -192,7 +211,7 @@ async function chatGptChatCompletion(session) {
  }
 
  chat_completion = await openai.createChatCompletion({
- model: "gpt-4",
+ model: session.gptModel,
  messages: session.chatHistory,
  functions: chatGptFunctions,
  });
@@ -254,4 +273,5 @@ module.exports = {
  chatGptSendMessage,
  setOpenAiApiKey,
  validateApiKey,
+ setGptModel,
 };

backend/src/router.js

@@ -1,14 +1,17 @@
 const express = require("express");
-const router = express.Router();
-
 const {
  activateDefence,
  deactivateDefence,
  configureDefence,
  transformMessage,
  detectTriggeredDefences,
 } = require("./defence");
-const { chatGptSendMessage, setOpenAiApiKey } = require("./openai");
+const {
+ chatGptSendMessage,
+ setOpenAiApiKey,
+ setGptModel,
+} = require("./openai");
+const router = express.Router();
 
 // Activate a defence
 router.post("/defence/activate", (req, res, next) => {
@@ -150,5 +153,21 @@ router.get("/openai/apiKey", (req, res, next) => {
  res.send(req.session.apiKey);
 });
 
+// Set the ChatGPT model
+router.post("/openai/model", async (req, res, next) => {
+ const model = req.body?.model;
+ if (model) {
+ if (await setGptModel(req.session, model)) {
+ res.status(200).send("ChatGPT model set. ");
+ } else {
+ res.status(401).send("Could not set model");
+ }
+ }
+});
+
+router.get("/openai/model", (req, res, next) => {
+ res.send(req.session.gptModel);
+});
+
 // Importing the router
 module.exports = router;

frontend/src/App.tsx

@@ -6,6 +6,7 @@ import DefenceBox from "./components/DefenceBox/DefenceBox";
 import EmailBox from "./components/EmailBox/EmailBox";
 import ApiKeyBox from "./components/ApiKeyBox/ApiKeyBox";
 import Header from "./components/Header";
+import ModelSelectionBox from "./components/ModelSelectionBox/ModelSelectionBox";
 import { useState } from "react";
 import { EmailInfo } from "./models/email";
 
@@ -26,10 +27,13 @@ function App() {
  <div className="side-bar">
  <div className="side-bar-header">defence mechanisms</div>
  <DefenceBox key={defenceBoxKey} triggeredDefences={triggeredDefences} />
+
  <div className="side-bar-header">attack mechanisms</div>
  <AttackBox />
  <div className="side-bar-header">openai api key</div>
  <ApiKeyBox />
+ <div className="side-bar-header">model selection</div>
+ <ModelSelectionBox />
  </div>
  <div id="centre-area">
  <Header />

frontend/src/components/ModelSelectionBox/ModelSelectionBox.css

@@ -0,0 +1,39 @@
+#model-selection-box {
+ padding: 1px 32px;
+ position: relative;
+}
+
+#model-selection-row {
+ display: flex;
+ align-items: center;
+}
+
+#model-selection-info {
+ align-items: center;
+ text-align: center;
+}
+
+#model-selection-info p {
+ margin: 0;
+ padding: 0;
+ color:cadetblue
+}
+
+#p error {
+ color: red;
+}
+
+#model-selection-info {
+
+}
+
+
+#model-selection-menu {
+ width: 60%;
+ padding: 5px;
+ margin-right: 10px;
+}
+
+#model-selection-button {
+ padding: 5px;
+}

frontend/src/components/ModelSelectionBox/ModelSelectionBox.tsx

@@ -0,0 +1,80 @@
+// Path: frontend\src\components\ModelSelectionBox\ModelSelectionBox.tsx
+import React, { useEffect, useState } from "react";
+import "./ModelSelectionBox.css";
+import { setGptModel, getGptModel } from "../../service/chatService";
+import { CHAT_MODELS } from "../../models/chat";
+
+// return a drop down menu with the models
+function ModelSelectionBox() {
+ // model currently selected in the dropdown
+ const [selectedModel, setSelectedModel] = useState("gpt-4");
+ // 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);
+ }
+ };
+
+ // get the model
+ useEffect(() => {
+ const getModel = async () => {
+ const model = await getGptModel();
+ if (model) {
+ setModelInUse(model);
+ }
+ };
+ getModel();
+ }, []);
+
+ const chatModelOptions = Object.values(CHAT_MODELS);
+
+ // return a drop down menu with the models
+ return (
+ <div id="model-selection-box">
+ <div id="model-selection-row">
+ <p>Select a model: </p>
+ <select
+ id="model-selection-menu"
+ aria-label="model-select"
+ onChange={(e) => setSelectedModel(e.target.value)}
+ placeholder={modelInUse}
+ >
+ {chatModelOptions.map((model) => (
+ <option value={model}>{model}</option>
+ ))}
+ ;
+ </select>
+ <button
+ id="model-selection-button"
+ onClick={async () => submitSelectedModel()}
+ >
+ Choose
+ </button>
+ </div>
+
+ <div id="model-selection-info">
+ {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>
+ );
+}
+
+export default ModelSelectionBox;

frontend/src/models/chat.ts

@@ -1,3 +1,14 @@
+enum CHAT_MODELS {
+ GPT_4 = "gpt-4",
+ GPT_4_0613 = "gpt-4-0613",
+ GPT_4_32K = "gpt-4-32k",
+ GPT_4_32K_0613 = "gpt-4-32k-0613",
+ GPT_3_5_TURBO = "gpt-3.5-turbo",
+ GPT_3_5_TURBO_0613 = "gpt-3.5-turbo-0613",
+ GPT_3_5_TURBO_16K = "gpt-3.5-turbo-16k",
+ GPT_3_5_TURBO_16K_0613 = "gpt-3.5-turbo-16k-0613",
+}
+
 interface ChatDefenceReport {
  blocked: boolean;
  triggeredDefences: string[];
@@ -17,3 +28,4 @@ interface ChatResponse {
 }
 
 export type { ChatMessage, ChatResponse };
+export { CHAT_MODELS };

frontend/src/service/chatService.ts

@@ -36,4 +36,27 @@ const getOpenAIApiKey = async (): Promise<string> => {
  return data;
 };
 
-export { clearChat, sendMessage, setOpenAIApiKey, getOpenAIApiKey };
+const setGptModel = async (model: string): Promise<boolean> => {
+ const response = await sendRequest(
+ PATH + "model",
+ "POST",
+ { "Content-Type": "application/json" },
+ JSON.stringify({ model })
+ );
+ return response.status === 200;
+};
+
+const getGptModel = async (): Promise<string> => {
+ const response = await sendRequest(PATH + "model", "GET");
+ const data = await response.text();
+ return data;
+};
+
+export {
+ clearChat,
+ sendMessage,
+ setOpenAIApiKey,
+ getOpenAIApiKey,
+ getGptModel,
+ setGptModel,
+};