allow querying available models from backend

Author: dasmy

frontend/src/App.tsx

@@ -2,7 +2,7 @@ import "./App.css";
 import Input from "./components/Input";
 import Sidebar from "./components/Sidebar";
 import Chat, { WaitingStates } from "./components/Chat";
-import React, { useState } from "react";
+import React, { useState, useEffect  } from "react";
 import Config from "./config";
 import { useLocalStorage } from "usehooks-ts";
 
@@ -14,16 +14,23 @@ export type MessageDict = {
 
 function App() {
   const COMMANDS = ["reset"];
-  const MODELS = [
-    {
-      displayName: "GPT-3.5",
-      name: "gpt-3.5-turbo",
-    },
-    {
-      displayName: "GPT-4",
-      name: "gpt-4",
-    },
-  ];
+
+  let [MODELS, setModels] = useState([{displayName: "GPT-3.5", name: "gpt-3.5-turbo"}]);
+
+  useEffect(() => {
+    const getModels = async () => {
+      try {
+        const response = await fetch(`${Config.WEB_ADDRESS}/models`);
+        const json = await response.json();
+        console.log(json);
+        setModels(json);
+      } catch (e) {
+        console.error(e);
+      };
+    };
+
+    getModels();
+ }, []);
 
   let [selectedModel, setSelectedModel] = useLocalStorage<string>(
     "model",

gpt_code_ui/webapp/main.py

@@ -1,7 +1,6 @@
 # The GPT web UI as a template based Flask app
 import os
 import requests
-import json
 import asyncio
 import re
 import logging
@@ -197,6 +196,14 @@ def index():
     return send_from_directory('static', 'index.html')
 
 
+@app.route("/models")
+def models():
+    return jsonify([
+        {"displayName": "GPT-3.5", "name": "gpt-3.5-turbo"},
+        {"displayName": "GPT-4", "name": "gpt-4"},
+    ])
+
+
 @app.route('/api/<path:path>', methods=["GET", "POST"])
 def proxy_kernel_manager(path):
     if request.method == "POST":