Dashboard: Find common topics (uptrain-ai#695)

* frontend changes * Add find common topic support to new dashboard * api key in common topic * bug fixes * delete .env --------- Co-authored-by: Sanchita <sanchitasingh3007@gmail.com> Co-authored-by: ashish-1600 <ashish@uptrain.ai>
adventure8812 · Apr 30, 2024 · e25ddca · e25ddca
1 parent 70aa31e
commit e25ddca
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 27 deletions.
diff --git a/uptrain/dashboard/backend/app.py b/uptrain/dashboard/backend/app.py
@@ -650,10 +650,15 @@ async def find_common_topic(
 
     user_headers = {"openai_api_key": user_name}
 
+    settings_data = {}
+    settings_data["model"] = args.model
+    settings_data["uptrain_local_url"] = os.environ["UPTRAIN_LOCAL_URL"]
+    settings_data.update(args.metadata[args.model])
+
     try:
         result = (
             TopicGenerator()
-            .setup(UserSettings(**user_headers))
+            .setup(UserSettings(**settings_data))
             .run(pl.DataFrame(data))["output"]
         )
         return {"common_topic": result.to_dicts()[0]["topic"]}

diff --git a/uptrain/dashboard/frontend/dashboard/src/components/Evaluations/ChartPage/Logs/TopBar.js b/uptrain/dashboard/frontend/dashboard/src/components/Evaluations/ChartPage/Logs/TopBar.js
@@ -1,35 +1,61 @@
+import Step2OverModal from "@/components/Common/Step2OverModal";
 import SpinningLoader from "@/components/UI/SpinningLoader";
 import { selectUptrainAccessKey } from "@/store/reducers/userInfo";
 import React, { useState } from "react";
 import { useSelector } from "react-redux";
+import { models } from "@/utils/models";
+import ModelSelector from "@/components/Common/ModelSelector";
+import CloseButtonSection from "@/components/Common/CloseButtonSection";
 
-// const CustomSelect = (props) => {
-//   const [selectedOption, setSelectedOption] = useState("");
+const KeyModal = (props) => {
+  const [openModal, setOpenModal] = useState(false);
 
-//   const handleSelectChange = (event) => {
-//     setSelectedOption(event.target.value);
-//   };
-
-//   return (
-//     <div className="rounded-xl bg-[#232331] px-6 py-2.5 text-[#B6B6B9] flex-1 max-w-[240px]">
-//       <select
-//         id="exampleSelect"
-//         value={selectedOption}
-//         onChange={handleSelectChange}
-//         className="w-full border-none bg-[#232331] text-sm"
-//       >
-//         <option value="">Choose row</option>
-//         <option value="option1">Choose an option</option>
-//         <option value="option2">Choose an option</option>
-//         <option value="option3">Choose an option</option>
-//       </select>
-//     </div>
-//   );
-// };
+  return (
+    <div className="fixed top-0 left-0 w-screen h-screen backdrop-blur flex items-center justify-center overflow-auto p-10 z-40">
+      <div className="rounded-xl border-[#5587FD] bg-[#23232D] p-8 max-w-[70%] w-full max-h-[100%] overflow-auto">
+        <CloseButtonSection onClick={props.close} />
+        <h2 className="text-lg text-[#B0B0B1] font-medium mb-5">
+          {props.selectedKey} values
+        </h2>
+        {openModal && (
+          <Step2OverModal
+            selectedKey={props.selectedOption}
+            close={() => setOpenModal(false)}
+            data={props.models}
+            metadata={props.metadata}
+            setMetadata={props.setMetadata}
+          />
+        )}
+        <form onSubmit={props.handleSubmit}>
+          <ModelSelector
+            selectedOption={props.selectedOption}
+            models={props.models}
+            metadata={props.metadata}
+            setMetadata={props.setMetadata}
+            setSelectedOption={props.setSelectedOption}
+            setOpenModal={setOpenModal}
+          />
+          <div className="flex justify-end mt-5">
+            <button
+              type="Submit"
+              className="bg-[#5587FD] text-white px-10 py-2.5 font-semibold text-lg rounded-xl"
+            >
+              Next
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
 
 const TopBar = (props) => {
   const [loading, setLoading] = useState(false);
   const [commonTopic, setCommonTopic] = useState(null);
+  const [openKeyModal, setOpenKeyModal] = useState(false);
+
+  const [metadata, setMetadata] = useState({});
+  const [selectedOption, setSelectedOption] = useState("");
 
   const uptrainAccessKey = useSelector(selectUptrainAccessKey);
   const questions =
@@ -39,12 +65,22 @@ const TopBar = (props) => {
     props.projectData[0] &&
     props.projectData[0].map((item) => item[`score_${props.selectedTab}`]);
 
-  const handleSubmit = async (event) => {
+  const handleSubmit = (event) => {
     event.preventDefault();
+    setOpenKeyModal(false);
+    SubmitData();
+  };
+
+  const SubmitData = async () => {
     setLoading(true);
 
     try {
-      const data = { items: questions, scores: score };
+      const data = {
+        items: questions,
+        scores: score,
+        model: selectedOption,
+        metadata: metadata,
+      };
 
       const response = await fetch(
         process.env.NEXT_PUBLIC_BACKEND_URL + `api/public/find_common_topic`,
@@ -74,12 +110,22 @@ const TopBar = (props) => {
 
   return (
     <div className="bg-[#2B3962] py-2.5 px-4 rounded-xl mb-4">
+      {openKeyModal && (
+        <KeyModal
+          models={models}
+          close={() => setOpenKeyModal(false)}
+          metadata={metadata}
+          setMetadata={setMetadata}
+          selectedOption={selectedOption}
+          setSelectedOption={setSelectedOption}
+          handleSubmit={handleSubmit}
+        />
+      )}
       {commonTopic ? (
         loading ? (
           <SpinningLoader />
         ) : (
           <div className="flex gap-5 items-center">
-            {" "}
             <p className="text-sm text-[#B6B6B9] max-w-lg text-center">
               The common topic is :
             </p>
@@ -95,7 +141,13 @@ const TopBar = (props) => {
             Get the common topic of questions with low scores
           </p>
           <button
-            onClick={handleSubmit}
+            onClick={
+              uptrainAccessKey == "default_key"
+                ? () => {
+                    setOpenKeyModal(1);
+                  }
+                : handleSubmit
+            }
             className="bg-[#232331] text-white text-sm py-2.5 px-7 rounded-xl disabled:opacity-20"
           >
             Find Common Topic

diff --git a/uptrain/dashboard/frontend/dashboard/src/store/reducers/userInfo.js b/uptrain/dashboard/frontend/dashboard/src/store/reducers/userInfo.js
@@ -17,6 +17,12 @@ const userInfoSlice = createSlice({
       state.user_name = user_name;
       state.uptrain_access_token = api_key;
     },
+    removeUserData(state, action) {
+      state.credits_total = null;
+      state.credits_used = null;
+      state.user_name = null;
+      state.uptrain_access_token = null;
+    },
   },
 });
 

diff --git a/uptrain/utilities/app_schema.py b/uptrain/utilities/app_schema.py
@@ -14,6 +14,8 @@ class Dataset(BaseModel):
 class TopicGenerate(BaseModel):
     items: list[t.Any]
     scores: list[t.Any]
+    model: str
+    metadata: t.Any
 
 
 class UserCreate(BaseModel):