From 83b0ab03780cdd0f767e39fc28a40330b7c9c2da Mon Sep 17 00:00:00 2001 From: Sanchita Date: Wed, 13 Mar 2024 19:27:49 +0530 Subject: [PATCH 1/2] update frontend code --- .../frontend/dashboard/public/Documents.svg | 9 + .../frontend/dashboard/public/GitHub.svg | 9 + .../frontend/dashboard/public/ThumbsUp.svg | 9 + .../dashboard/public/ThumbsUpLight.svg | 9 + .../dashboard/src/app/api-keys/page.js | 221 +---------------- .../dashboard/src/app/contact-us/page.js | 70 +----- .../src/app/evaluations/[slug]/page.js | 227 ++++++++++++++++- .../dashboard/src/app/evaluations/page.js | 123 ++++++---- .../src/app/experiment/[slug]/page.js | 191 ++++++++++++++- .../dashboard/src/app/experiment/page.js | 28 +-- .../frontend/dashboard/src/app/globals.css | 4 + .../frontend/dashboard/src/app/layout.js | 1 - .../frontend/dashboard/src/app/not-found.js | 36 +-- .../frontend/dashboard/src/app/page.js | 56 ++--- .../dashboard/src/app/prompts/[slug]/page.js | 229 ++++++++++++++++++ .../dashboard/src/app/prompts/page.js | 43 ++-- .../src/components/ApiKeys/ApiKeySection.js | 32 +++ .../src/components/ApiKeys/ButtonSection.js | 38 +++ .../src/components/ApiKeys/CreditsSection.js | 25 ++ .../src/components/ApiKeys/TabButton.js | 18 ++ .../src/components/ApiKeys/WorkingSection.js | 115 +++++++++ .../{Evaluations => Common}/ButtonSection.js | 4 +- .../CompareSection/CompareSection.js | 2 +- .../src/components/ContactUs/CalendlyPopUp.js | 17 ++ .../src/components/ContactUs/ContactCard.js | 48 ++++ .../CreateProjectModal/CloseButtonSection.js | 2 +- .../CreateProjectModal/CreateProjectModal.js | 42 +++- .../components/CreateProjectModal/Step1.js | 19 +- .../components/CustomSelect/CustomSelect.js | 4 +- .../components/DropDowns/CustomMultiSelect.js | 78 ++++++ .../CustomSingleCheckBox.js | 0 .../{FilterSection => DropDowns}/DownArrow.js | 0 .../{UI => DropDowns}/SingleSelect.js | 8 +- .../src/components/Evaluations/BarChart.js | 2 +- .../src/components/Evaluations/LineChart.js | 2 +- .../components/Evaluations/Logs/AllLogs.js | 7 +- .../components/Evaluations/Logs/AllLogsRow.js | 41 ++++ .../Evaluations/Logs/AllLogsRowTop.js | 117 ++++++++- .../components/Evaluations/Logs/DataModal.js | 5 + .../components/Evaluations/Logs/DataRow.js | 7 +- .../components/Evaluations/Logs/LikeModal.js | 98 ++++++++ .../Evaluations/Logs_InsightsTable.js | 4 +- .../Experiment/AllLogs/AllLogsRow.js | 36 +++ .../Experiment/AllLogs/AllLogsRowTop.js | 3 +- .../Experiment/AllLogs/AllLogs_Experiment.js | 3 + .../Experiment/AllLogs/DataModal.js | 3 + .../components/Experiment/AllLogs/DataRow.js | 29 +-- .../components/Experiment/ButtonSection.js | 22 -- .../Experiment/Insights/Insights.js | 6 +- .../Experiment/Insights/InsightsModal.js | 1 + .../Experiment/Logs_InsightsTable.js | 8 +- .../FilterContainer/FilterContainer.js | 70 ++++++ .../components/FilterSection/FilterSection.js | 2 +- .../dashboard/src/components/Header.js | 9 - .../ProjectSection/CreateProjectTab.js | 2 +- .../HomePage/ProjectSection/ProjectCard.js | 10 +- .../dashboard/src/components/Layout.js | 72 +++++- .../src/components/PivotTable/PivotTable.js | 2 +- .../ProjectFilterSection.js | 201 +++++++++++++++ .../components/Prompts/AddNewProjectCard.js | 2 +- .../src/components/Prompts/ProjectCard.js | 4 +- .../src/components/Prompts/ProjectSection.js | 2 +- .../dashboard/src/components/Prompts/Row.js | 3 +- .../src/components/SideBar/LinkElement.js | 27 +++ .../src/components/SideBar/SideBar.js | 63 +++-- .../components/Tables/Insights/Insights.js | 16 +- .../Tables/Insights/InsightsModal.js | 1 + .../Tables/RecentRuns/RecentRuns.js | 2 +- .../src/components/UI/SpinningLoader.js | 8 +- .../dashboard/src/utils/changeDateFormat.js | 2 +- 70 files changed, 2059 insertions(+), 550 deletions(-) create mode 100644 uptrain/dashboard/frontend/dashboard/public/Documents.svg create mode 100644 uptrain/dashboard/frontend/dashboard/public/GitHub.svg create mode 100644 uptrain/dashboard/frontend/dashboard/public/ThumbsUp.svg create mode 100644 uptrain/dashboard/frontend/dashboard/public/ThumbsUpLight.svg create mode 100644 uptrain/dashboard/frontend/dashboard/src/app/prompts/[slug]/page.js create mode 100644 uptrain/dashboard/frontend/dashboard/src/components/ApiKeys/ApiKeySection.js create mode 100644 uptrain/dashboard/frontend/dashboard/src/components/ApiKeys/ButtonSection.js create mode 100644 uptrain/dashboard/frontend/dashboard/src/components/ApiKeys/CreditsSection.js create mode 100644 uptrain/dashboard/frontend/dashboard/src/components/ApiKeys/TabButton.js create mode 100644 uptrain/dashboard/frontend/dashboard/src/components/ApiKeys/WorkingSection.js rename uptrain/dashboard/frontend/dashboard/src/components/{Evaluations => Common}/ButtonSection.js (89%) create mode 100644 uptrain/dashboard/frontend/dashboard/src/components/ContactUs/CalendlyPopUp.js create mode 100644 uptrain/dashboard/frontend/dashboard/src/components/ContactUs/ContactCard.js create mode 100644 uptrain/dashboard/frontend/dashboard/src/components/DropDowns/CustomMultiSelect.js rename uptrain/dashboard/frontend/dashboard/src/components/{FilterSection => DropDowns}/CustomSingleCheckBox.js (100%) rename uptrain/dashboard/frontend/dashboard/src/components/{FilterSection => DropDowns}/DownArrow.js (100%) rename uptrain/dashboard/frontend/dashboard/src/components/{UI => DropDowns}/SingleSelect.js (91%) create mode 100644 uptrain/dashboard/frontend/dashboard/src/components/Evaluations/Logs/LikeModal.js delete mode 100644 uptrain/dashboard/frontend/dashboard/src/components/Experiment/ButtonSection.js create mode 100644 uptrain/dashboard/frontend/dashboard/src/components/FilterContainer/FilterContainer.js create mode 100644 uptrain/dashboard/frontend/dashboard/src/components/ProjectFilterSection/ProjectFilterSection.js create mode 100644 uptrain/dashboard/frontend/dashboard/src/components/SideBar/LinkElement.js diff --git a/uptrain/dashboard/frontend/dashboard/public/Documents.svg b/uptrain/dashboard/frontend/dashboard/public/Documents.svg new file mode 100644 index 00000000..3a68c4e2 --- /dev/null +++ b/uptrain/dashboard/frontend/dashboard/public/Documents.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/uptrain/dashboard/frontend/dashboard/public/GitHub.svg b/uptrain/dashboard/frontend/dashboard/public/GitHub.svg new file mode 100644 index 00000000..4fe1608c --- /dev/null +++ b/uptrain/dashboard/frontend/dashboard/public/GitHub.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/uptrain/dashboard/frontend/dashboard/public/ThumbsUp.svg b/uptrain/dashboard/frontend/dashboard/public/ThumbsUp.svg new file mode 100644 index 00000000..e88c5d41 --- /dev/null +++ b/uptrain/dashboard/frontend/dashboard/public/ThumbsUp.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/uptrain/dashboard/frontend/dashboard/public/ThumbsUpLight.svg b/uptrain/dashboard/frontend/dashboard/public/ThumbsUpLight.svg new file mode 100644 index 00000000..4ede7eeb --- /dev/null +++ b/uptrain/dashboard/frontend/dashboard/public/ThumbsUpLight.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/uptrain/dashboard/frontend/dashboard/src/app/api-keys/page.js b/uptrain/dashboard/frontend/dashboard/src/app/api-keys/page.js index 1ce3a0fd..22c6c864 100644 --- a/uptrain/dashboard/frontend/dashboard/src/app/api-keys/page.js +++ b/uptrain/dashboard/frontend/dashboard/src/app/api-keys/page.js @@ -1,224 +1,15 @@ "use client"; -import CodeViewer from "@/components/ApiKeys/CodeViewer"; +import ApiKeySection from "@/components/ApiKeys/ApiKeySection"; +import CreditsSection from "@/components/ApiKeys/CreditsSection"; +import WorkingSection from "@/components/ApiKeys/WorkingSection"; import Layout from "@/components/Layout"; -import GrayParah18 from "@/components/UI/GrayParah18"; -import GraySmallHeading from "@/components/UI/GraySmallHeading"; -import { - selectTotalCredits, - selectUptrainAccessKey, - selectUsedCredits, -} from "@/store/reducers/userInfo"; -import Image from "next/image"; -import React, { useState } from "react"; -import { useSelector } from "react-redux"; - -const Working = (props) => { - return ( -
- {props.children} -
- ); -}; - -const ApiSection = () => { - const uptrainAccessKey = useSelector(selectUptrainAccessKey); - const copyToClipboard = () => { - navigator.clipboard.writeText(uptrainAccessKey); - }; - - return ( -
- Your API Key -
-
- {uptrainAccessKey} - -
- {/* */} -
-
- ); -}; - -const CreditsSection = () => { - const totalCredits = useSelector(selectTotalCredits); - const usedCredits = useSelector(selectUsedCredits); - - return ( -
- Credits left - - {usedCredits} - /{totalCredits} - -
- ); -}; - -const TabButton = (props) => { - return ( - - ); -}; - -const ButtonSection = (props) => { - return ( -
-
- { - props.setTabs(0); - }} - title="Log and Evaluate" - /> - { - props.setTabs(1); - }} - title="Experiments" - /> - { - props.setTabs(2); - }} - title="Open Source" - /> -
- -
- ); -}; - -const WorkingSection = () => { - const [tabs, setTabs] = useState(0); - const apiKey = useSelector(selectUptrainAccessKey); - - const openSource = `from uptrain import EvalLLM, Evals, CritiqueTone -import json - -OPENAI_API_KEY = "sk-***************" - -data = [{ - 'question': 'Which is the most popular global sport?', - 'context': "The popularity of sports can be measured in various ways, including TV viewership, social media presence, number of participants, and economic impact. Football is undoubtedly the world's most popular sport with major events like the FIFA World Cup and sports personalities like Ronaldo and Messi, drawing a followership of more than 4 billion people. ", - 'response': 'Football is the most popular sport with around 4 billion followers worldwide' -}] - -eval_llm = EvalLLM(openai_api_key=OPENAI_API_KEY) - -results = eval_llm.evaluate( - data=data, - checks=[Evals.CONTEXT_RELEVANCE, Evals.FACTUAL_ACCURACY, Evals.RESPONSE_RELEVANCE, CritiqueTone(persona="teacher")] -) - -print(json.dumps(results, indent=3))`; - - const experiments = `from uptrain import APIClient, Evals, CritiqueTone -import json - -UPTRAIN_API_KEY = "${ - apiKey == undefined || apiKey == "None" ? "up-***************" : apiKey - }" - -data = [{ - "question": "How can you ensure that a designed prompt elicits the desired response from a language model?", - "context": "nudge the model to generate a desired result. Prompt design can be an efficient way to experiment with adapting a language model for a specific use case.", - "response": "To ensure that a designed prompt elicits the desired response from a language model, you can experiment with different prompt designs that nudge the model towards generating the desired result. This can be an efficient way to adapt the language model for a specific use case.", - "chunk_size": 200 -}, -{ - "question": "How can you ensure that a designed prompt elicits the desired response from a language model?", - "context": "Design and save your own promptsPrompt design is the process of manually creating prompts that elicit the desired response from a language model. By carefully crafting prompts, you can nudge the model to generate a desired result. Prompt design can be an efficient way to experiment with adapting a language model for a specific use case. You can create and save your own prompts in Vertex AI Studio. When creating a new prompt, you enter the prompt text, specify the model to use, configure parameter values, and test the prompt by generating a response. You can iterate on the prompt and its configurations until you get the desired results. When you are done designing the prompt, you can save it in Vertex AI Studio. Response citations If you are using a text model in Vertex AI Studio like text-bison, you receive text responses based on your input. Our features are intended to produce original content and not replicate existing content at length. If", - "response": "To ensure that a designed prompt elicits the desired response from a language model, you can manually create prompts that carefully craft the desired result. By iterating on the prompt and its configurations in Vertex AI Studio, you can experiment and adjust until you achieve the desired results. Additionally, it is important to note that the text models in Vertex AI Studio are designed to produce original content and not replicate existing content at length.", - "chunk_size": 1000 -}] - -client = APIClient(uptrain_api_key=UPTRAIN_API_KEY) - -results = client.evaluate_experiments( - project_name="Chunk-Size-Experiment", - data=data, - checks=[Evals.CONTEXT_RELEVANCE, Evals.RESPONSE_RELEVANCE, Evals.FACTUAL_ACCURACY], - exp_columns=["chunk_size"] -) - -print(json.dumps(results, indent=3))`; - - const log = `from uptrain import APIClient, Evals, CritiqueTone -import json - -UPTRAIN_API_KEY = "${ - apiKey == undefined || apiKey == "None" ? "up-***************" : apiKey - }" - -data = [{ - 'question': 'Which is the most popular global sport?', - 'context': "The popularity of sports can be measured in various ways, including TV viewership, social media presence, number of participants, and economic impact. Football is undoubtedly the world's most popular sport with major events like the FIFA World Cup and sports personalities like Ronaldo and Messi, drawing a followership of more than 4 billion people. ", - 'response': 'Football is the most popular sport with around 4 billion followers worldwide' -}] - -client = APIClient(uptrain_api_key=UPTRAIN_API_KEY) - -results = client.log_and_evaluate( - project_name="Sample-Project", - data=data, - checks=[Evals.CONTEXT_RELEVANCE, Evals.FACTUAL_ACCURACY, Evals.RESPONSE_RELEVANCE, CritiqueTone(persona="teacher")] -) - -print(json.dumps(results, indent=3))`; - - const copyToClipboard = () => { - navigator.clipboard.writeText( - tabs === 0 ? log : tabs === 1 ? experiments : openSource - ); - }; - - return ( -
- How it Works - - - 
-          {tabs === 0 ? (
-            {log}
-          ) : tabs === 1 ? (
-            {experiments}
-          ) : (
-            {openSource}
-          )}
-
- -
- ); -}; +import React from "react"; const page = () => { return ( -
- {/* +
+ {/* */}
diff --git a/uptrain/dashboard/frontend/dashboard/src/app/contact-us/page.js b/uptrain/dashboard/frontend/dashboard/src/app/contact-us/page.js index 5515d196..3a7fdead 100644 --- a/uptrain/dashboard/frontend/dashboard/src/app/contact-us/page.js +++ b/uptrain/dashboard/frontend/dashboard/src/app/contact-us/page.js @@ -1,65 +1,9 @@ "use client"; +import CalendlyPopUp from "@/components/ContactUs/CalendlyPopUp"; +import ContactCard from "@/components/ContactUs/ContactCard"; import Layout from "@/components/Layout"; import Image from "next/image"; import React, { useState } from "react"; -import { InlineWidget } from "react-calendly"; - -const ContactCard = (props) => { - const [isHovered, setIsHovered] = useState(false); - - const handleMouseEnter = () => { - setIsHovered(true); - }; - - const handleMouseLeave = () => { - setIsHovered(false); - }; - - return ( -
- {props.children} -

- {props.heading} -

-

- {props.parah} -

- {isHovered ? ( - - ) : ( - - )} -
- ); -}; - -const CalendlyPopUp = (props) => { - return ( -
-
- -
-
- ); -}; const page = () => { const [openCalendlyPopUp, setOpenCalendlyPopUp] = useState(false); @@ -78,12 +22,18 @@ const page = () => { parah="Upon clicking, you'll be directed to a form page where you can compose your query and submit it to us." heading="Share your thoughts" + onClick={() => { + window.open( + "https://docs.google.com/forms/d/e/1FAIpQLSezGUkkC0JoEvx-0gCrRSmGutA-jqyb7kl2lomXv302_C3MnQ/viewform?ts=65e1846d", + "_blank" + ); + }} > @@ -98,7 +48,7 @@ const page = () => { src="/ContactUs-Calls.png" width={63} height={63} - alt="" + alt="contact us candely Image" className="mb-5 w-[63px] h-[63px]" /> diff --git a/uptrain/dashboard/frontend/dashboard/src/app/evaluations/[slug]/page.js b/uptrain/dashboard/frontend/dashboard/src/app/evaluations/[slug]/page.js index ed2ee28f..35b3e50a 100644 --- a/uptrain/dashboard/frontend/dashboard/src/app/evaluations/[slug]/page.js +++ b/uptrain/dashboard/frontend/dashboard/src/app/evaluations/[slug]/page.js @@ -1,15 +1,232 @@ "use client"; +import ChartSection from "@/components/Evaluations/ChartSection"; +import TableSection from "@/components/Evaluations/Logs_InsightsTable"; +import FilterSection from "@/components/FilterSection/FilterSection"; +import Layout from "@/components/Layout"; +import React, { useEffect, useLayoutEffect, useState } from "react"; +import { useSelector } from "react-redux"; +import { selectUptrainAccessKey } from "@/store/reducers/userInfo"; +import ButtonSection from "@/components/Common/ButtonSection"; +import SpinningLoader from "@/components/UI/SpinningLoader"; import { useRouter } from "next/navigation"; -import React, { useLayoutEffect } from "react"; -const page = () => { +const fetchData = async ( + uptrainAccessKey, + setData, + timeFilter, + setSelectedProject, + slug, + router +) => { + const num_days = + timeFilter === 0 ? 1 : timeFilter === 1 ? 7 : timeFilter === 2 ? 30 : 10000; + + try { + const response = await fetch( + process.env.NEXT_PUBLIC_BACKEND_URL + + `api/public/get_evaluations_list?num_days=${num_days}`, + { + method: "GET", + headers: { + "Content-Type": "application/json", + "uptrain-access-token": `${uptrainAccessKey}`, + }, + } + ); + + if (response.ok) { + const responseData = await response.json(); + setData(responseData.data); + + slug = decodeURIComponent(slug); + + const projectIndex = responseData.data.findIndex( + (project) => project.project === slug + ); + + if (projectIndex != -1) { + setSelectedProject(projectIndex); + } else { + router.replace("/404"); + } + } else { + console.error("Failed to submit API Key:", response.statusText); + // Handle error cases + } + } catch (error) { + console.error("Error submitting API Key:", error.message); + // Handle network errors or other exceptions + } +}; + +const fetchProjectData = async ( + uptrainAccessKey, + setData, + projectName, + TimeFilter +) => { + const num_days = + TimeFilter === 0 ? 1 : TimeFilter === 1 ? 7 : TimeFilter === 2 ? 30 : 10000; + + try { + const response = await fetch( + process.env.NEXT_PUBLIC_BACKEND_URL + + `api/public/get_project_data?project_name=${projectName}&num_days=${num_days}`, + { + method: "GET", + headers: { + "Content-Type": "application/json", + "uptrain-access-token": `${uptrainAccessKey}`, + }, + } + ); + + if (response.ok) { + const responseData = await response.json(); + setData(responseData.data); + } else { + console.error("Failed to submit API Key:", response.statusText); + setData(null); + } + } catch (error) { + console.error("Error submitting API Key:", error.message); + setData(null); + } +}; + +const page = ({ params: { slug } }) => { const router = useRouter(); + const uptrainAccessKey = useSelector(selectUptrainAccessKey); + + const [TimeFilter, setTimeFilter] = useState(3); + const [data, setData] = useState([]); + const [projectData, setProjectData] = useState(null); + const [selectedProject, setSelectedProject] = useState(0); + const [Tab, setTab] = useState(0); + const [projectFilters, setProjectFilters] = useState({}); + + const tabs = projectData && projectData[4]; + const projectNames = data.length !== 0 ? data.map((obj) => obj.project) : []; + + const handleProjectChange = (index) => { + setSelectedProject(index); + }; + useLayoutEffect(() => { - router.push("/evaluations"); - }, []); + const fetchDataAsync = async () => { + await fetchData( + uptrainAccessKey, + setData, + TimeFilter, + setSelectedProject, + slug, + router + ); + }; + + if (uptrainAccessKey) fetchDataAsync(); + }, [uptrainAccessKey, TimeFilter]); // Dependency array to re-run effect when uptrainAccessKey changes + + useEffect(() => { + setProjectData(null); + setProjectFilters({}); + const fetchProjectDataAsync = async () => { + await fetchProjectData( + uptrainAccessKey, + setProjectData, + projectNames[selectedProject], + TimeFilter + ); + }; + + if (uptrainAccessKey && data.length !== 0) { + fetchProjectDataAsync(); + } + }, [uptrainAccessKey, data, selectedProject, TimeFilter]); + + useEffect(() => { + setProjectFilters({}); + }, [Tab]); + + const selectedTab = tabs && tabs[Tab]; + + let filteredData = JSON.parse(JSON.stringify(projectData)); + + if (filteredData) { + filteredData[0] = filteredData[0].map((item, index) => { + item.id = index; // Assuming 'id' is the field you want to update + return item; + }); + } + + if (filteredData && projectFilters.hasOwnProperty("index")) { + filteredData[0] = filteredData[0].filter( + (item, index) => !projectFilters["index"].includes(index + 1) + ); + } + + if (filteredData && projectFilters.hasOwnProperty("scores")) { + filteredData[0] = filteredData[0].filter((item, index) => { + console.log(item["checks"][`score_${selectedTab}`]); + return !projectFilters["scores"].includes( + item["checks"][`score_${selectedTab}`] + ); + }); + } + + if (filteredData && projectFilters.hasOwnProperty("confidence")) { + filteredData[0] = filteredData[0].filter((item, index) => { + return !projectFilters["confidence"].includes( + item["metadata"][`score_confidence_${selectedTab}`] + ); + }); + } - return
Loading
; + return ( + +
+ {projectData ? ( + <> + + + + + ) : !projectNames[selectedProject] ? ( +
+

+ No Projects found for this duration +

+
+ ) : ( +
+ +
+ )} +
+ + ); }; export default page; diff --git a/uptrain/dashboard/frontend/dashboard/src/app/evaluations/page.js b/uptrain/dashboard/frontend/dashboard/src/app/evaluations/page.js index cf907e7c..9b45753e 100644 --- a/uptrain/dashboard/frontend/dashboard/src/app/evaluations/page.js +++ b/uptrain/dashboard/frontend/dashboard/src/app/evaluations/page.js @@ -7,8 +7,9 @@ import Layout from "@/components/Layout"; import React, { useEffect, useLayoutEffect, useState } from "react"; import { useSelector } from "react-redux"; import { selectUptrainAccessKey } from "@/store/reducers/userInfo"; -import ButtonSection from "@/components/Evaluations/ButtonSection"; +import ButtonSection from "@/components/Common/ButtonSection"; import SpinningLoader from "@/components/UI/SpinningLoader"; +import FilterContainer from "@/components/FilterContainer/FilterContainer"; const fetchData = async (uptrainAccessKey, setData, timeFilter) => { const num_days = @@ -83,6 +84,7 @@ const page = () => { const [projectData, setProjectData] = useState(null); const [selectedProject, setSelectedProject] = useState(0); const [Tab, setTab] = useState(0); + const [projectFilters, setProjectFilters] = useState({}); const tabs = projectData && projectData[4]; const projectNames = data.length !== 0 ? data.map((obj) => obj.project) : []; @@ -101,6 +103,7 @@ const page = () => { useEffect(() => { setProjectData(null); + setProjectFilters({}); const fetchProjectDataAsync = async () => { await fetchProjectData( uptrainAccessKey, @@ -115,47 +118,85 @@ const page = () => { } }, [uptrainAccessKey, data, selectedProject, TimeFilter]); + useEffect(() => { + setProjectFilters({}); + }, [Tab]); + + const selectedTab = tabs && tabs[Tab]; + + let filteredData = JSON.parse(JSON.stringify(projectData)); + + if (filteredData) { + filteredData[0] = filteredData[0].map((item, index) => { + item.id = index; // Assuming 'id' is the field you want to update + return item; + }); + } + + if (filteredData && projectFilters.hasOwnProperty("index")) { + filteredData[0] = filteredData[0].filter( + (item, index) => !projectFilters["index"].includes(index + 1) + ); + } + + if (filteredData && projectFilters.hasOwnProperty("scores")) { + filteredData[0] = filteredData[0].filter((item, index) => { + return !projectFilters["scores"].includes( + item["checks"][`score_${selectedTab}`] + ); + }); + } + + if (filteredData && projectFilters.hasOwnProperty("confidence")) { + filteredData[0] = filteredData[0].filter((item, index) => { + return !projectFilters["confidence"].includes( + item["metadata"][`score_confidence_${selectedTab}`] + ); + }); + } + + console.log(filteredData); return ( - -
-
- {projectData ? ( - <> - - - - - ) : !projectNames[selectedProject] ? ( -
-

- No Projects found for this duration -

-
- ) : ( -
- -
- )} -
-
- - {/* */} -
+ +
+ {projectData ? ( + <> + + + + + ) : !projectNames[selectedProject] ? ( +
+

+ No Projects found for this duration +

+
+ ) : ( +
+ +
+ )}
); diff --git a/uptrain/dashboard/frontend/dashboard/src/app/experiment/[slug]/page.js b/uptrain/dashboard/frontend/dashboard/src/app/experiment/[slug]/page.js index 4363a61e..1e049b00 100644 --- a/uptrain/dashboard/frontend/dashboard/src/app/experiment/[slug]/page.js +++ b/uptrain/dashboard/frontend/dashboard/src/app/experiment/[slug]/page.js @@ -1,15 +1,196 @@ "use client"; + +import PivotTable from "@/components/PivotTable/PivotTable"; +import FilterSection from "@/components/FilterSection/FilterSection"; +import Layout from "@/components/Layout"; +import React, { useEffect, useLayoutEffect, useState } from "react"; +import ChartSection from "@/components/Experiment/ChartSection"; +import TableSection from "@/components/Experiment/Logs_InsightsTable"; +import { useSelector } from "react-redux"; +import { selectUptrainAccessKey } from "@/store/reducers/userInfo"; +import SpinningLoader from "@/components/UI/SpinningLoader"; import { useRouter } from "next/navigation"; -import React, { useLayoutEffect } from "react"; +import ButtonSection from "@/components/Common/ButtonSection"; + +const fetchData = async ( + uptrainAccessKey, + setData, + timeFilter, + setSelectedProject, + slug, + router +) => { + const num_days = + timeFilter === 0 ? 1 : timeFilter === 1 ? 7 : timeFilter === 2 ? 30 : 10000; + + try { + const response = await fetch( + process.env.NEXT_PUBLIC_BACKEND_URL + + `api/public/get_experiments_list?num_days=${num_days}`, + { + method: "GET", + headers: { + "Content-Type": "application/json", + "uptrain-access-token": `${uptrainAccessKey}`, + }, + } + ); + + if (response.ok) { + const responseData = await response.json(); + setData(responseData.data); + + slug = decodeURIComponent(slug); + + const projectIndex = responseData.data.findIndex( + (project) => project.project === slug + ); + + if (projectIndex != -1) { + setSelectedProject(projectIndex); + } else { + router.replace("/404"); + } + } else { + console.error("Failed to submit API Key:", response.statusText); + // Handle error cases + } + } catch (error) { + console.error("Error submitting API Key:", error.message); + // Handle network errors or other exceptions + } +}; + +const fetchProjectData = async ( + uptrainAccessKey, + setData, + projectName, + TimeFilter +) => { + const num_days = + TimeFilter === 0 ? 1 : TimeFilter === 1 ? 7 : TimeFilter === 2 ? 30 : 10000; + + try { + const response = await fetch( + process.env.NEXT_PUBLIC_BACKEND_URL + + `api/public/get_project_data?project_name=${projectName}&num_days=${num_days}`, + { + method: "GET", + headers: { + "Content-Type": "application/json", + "uptrain-access-token": `${uptrainAccessKey}`, + }, + } + ); + + if (response.ok) { + const responseData = await response.json(); + setData(responseData.data); + } else { + console.error("Failed to submit API Key:", response.statusText); + setData(null); + // Handle error cases + } + } catch (error) { + console.error("Error submitting API Key:", error.message); + setData(null); -const page = () => { + // Handle network errors or other exceptions + } +}; + +const page = ({ params: { slug } }) => { const router = useRouter(); + const uptrainAccessKey = useSelector(selectUptrainAccessKey); + + const [TimeFilter, setTimeFilter] = useState(3); + const [data, setData] = useState([]); + const [projectData, setProjectData] = useState(null); + const [selectedProject, setSelectedProject] = useState(0); + const [Tab, setTab] = useState(0); + + const tabs = projectData && projectData[4]; + + const handleProjectChange = (index) => { + setSelectedProject(index); + }; + + const projectNames = data.length !== 0 ? data.map((obj) => obj.project) : []; + useLayoutEffect(() => { - router.push("/experiment"); - }, []); + const fetchDataAsync = async () => { + await fetchData( + uptrainAccessKey, + setData, + TimeFilter, + setSelectedProject, + slug, + router + ); + }; + + if (uptrainAccessKey) fetchDataAsync(); + }, [uptrainAccessKey, TimeFilter]); // Dependency array to re-run effect when uptrainAccessKey changes + + useEffect(() => { + setProjectData(null); + const fetchProjectDataAsync = async () => { + await fetchProjectData( + uptrainAccessKey, + setProjectData, + projectNames[selectedProject], + TimeFilter + ); + }; + + if (uptrainAccessKey && data.length !== 0) { + fetchProjectDataAsync(); + } + }, [uptrainAccessKey, data, selectedProject, TimeFilter]); - return
Loading
; + return ( + +
+
+ {projectData ? ( + <> + + + + + ) : !projectNames[selectedProject] ? ( +
+

+ No Projects found for this duration +

+
+ ) : ( +
+ +
+ )} +
+
+ + ); }; export default page; diff --git a/uptrain/dashboard/frontend/dashboard/src/app/experiment/page.js b/uptrain/dashboard/frontend/dashboard/src/app/experiment/page.js index 6c6631f7..e8b5ce3b 100644 --- a/uptrain/dashboard/frontend/dashboard/src/app/experiment/page.js +++ b/uptrain/dashboard/frontend/dashboard/src/app/experiment/page.js @@ -8,8 +8,8 @@ import ChartSection from "@/components/Experiment/ChartSection"; import TableSection from "@/components/Experiment/Logs_InsightsTable"; import { useSelector } from "react-redux"; import { selectUptrainAccessKey } from "@/store/reducers/userInfo"; -import ButtonSection from "@/components/Experiment/ButtonSection"; import SpinningLoader from "@/components/UI/SpinningLoader"; +import ButtonSection from "@/components/Common/ButtonSection"; const fetchData = async (uptrainAccessKey, setData, timeFilter) => { const num_days = @@ -121,7 +121,17 @@ const page = () => { }, [uptrainAccessKey, data, selectedProject, TimeFilter]); return ( - +
{projectData ? ( @@ -144,23 +154,11 @@ const page = () => {

) : ( -
+
)}
-
- - {/* */} -
); diff --git a/uptrain/dashboard/frontend/dashboard/src/app/globals.css b/uptrain/dashboard/frontend/dashboard/src/app/globals.css index b971db1e..dae53329 100644 --- a/uptrain/dashboard/frontend/dashboard/src/app/globals.css +++ b/uptrain/dashboard/frontend/dashboard/src/app/globals.css @@ -70,3 +70,7 @@ body { ::-webkit-scrollbar-thumb:hover { background: #7d76d6; } + +.scrollHorizontal::-webkit-scrollbar-thumb { + background: white; +} \ No newline at end of file diff --git a/uptrain/dashboard/frontend/dashboard/src/app/layout.js b/uptrain/dashboard/frontend/dashboard/src/app/layout.js index 19dc121a..ee26bdf0 100644 --- a/uptrain/dashboard/frontend/dashboard/src/app/layout.js +++ b/uptrain/dashboard/frontend/dashboard/src/app/layout.js @@ -7,7 +7,6 @@ import { store } from "@/store/store"; const inter = Inter({ subsets: ["latin"] }); - export default function RootLayout({ children }) { return ( diff --git a/uptrain/dashboard/frontend/dashboard/src/app/not-found.js b/uptrain/dashboard/frontend/dashboard/src/app/not-found.js index 9a2d3395..46c339a1 100644 --- a/uptrain/dashboard/frontend/dashboard/src/app/not-found.js +++ b/uptrain/dashboard/frontend/dashboard/src/app/not-found.js @@ -1,25 +1,29 @@ +import Layout from "@/components/Layout"; import Image from "next/image"; import React from "react"; const page = () => { return ( -
- -

- Page Not Found -

-
-

Oops! Something went wrong

-

- Try to refresh this page or Try again later -

+ +
+ 404 image +

+ Page Not Found +

+
+

Oops! Something went wrong

+

+ Try to refresh this page or Try again later +

+
-
+ ); }; diff --git a/uptrain/dashboard/frontend/dashboard/src/app/page.js b/uptrain/dashboard/frontend/dashboard/src/app/page.js index df3c42ca..24016d57 100644 --- a/uptrain/dashboard/frontend/dashboard/src/app/page.js +++ b/uptrain/dashboard/frontend/dashboard/src/app/page.js @@ -55,7 +55,7 @@ const page = () => { await fetchData(uptrainAccessKey, setData, timeFilter); }; - fetchDataAsync(); + if (uptrainAccessKey) fetchDataAsync(); }, [uptrainAccessKey, timeFilter]); const reloadData = () => { @@ -66,39 +66,35 @@ const page = () => { fetchDataAsync(); }; - + return ( - -
- {openModal && ( - { - setopenModal(false); + + {openModal && ( + { + setopenModal(false); + }} + reloadData={reloadData} + /> + )} +
+ {data ? ( + { + setopenModal(true); }} - reloadData={reloadData} /> + ) : ( +
+ +
)} -
- {data ? ( - { - setopenModal(true); - }} - /> - ) : ( -
- -
- )} -
-
- -
); diff --git a/uptrain/dashboard/frontend/dashboard/src/app/prompts/[slug]/page.js b/uptrain/dashboard/frontend/dashboard/src/app/prompts/[slug]/page.js new file mode 100644 index 00000000..6bb07ef8 --- /dev/null +++ b/uptrain/dashboard/frontend/dashboard/src/app/prompts/[slug]/page.js @@ -0,0 +1,229 @@ +"use client"; +import CompareSection from "@/components/CompareSection/CompareSection"; +import CreateProjectModal from "@/components/CreateProjectModal/CreateProjectModal"; +import FilterSection from "@/components/FilterSection/FilterSection"; +import Layout from "@/components/Layout"; +import ProjectSection from "@/components/Prompts/ProjectSection"; +import SpinningLoader from "@/components/UI/SpinningLoader"; +import { selectUptrainAccessKey } from "@/store/reducers/userInfo"; +import { useRouter } from "next/navigation"; +import { useEffect, useLayoutEffect, useState } from "react"; +import { useSelector } from "react-redux"; + +const fetchData = async ( + uptrainAccessKey, + setData, + timeFilter, + setSelectedProject, + slug, + router +) => { + const num_days = + timeFilter === 0 ? 1 : timeFilter === 1 ? 7 : timeFilter === 2 ? 30 : 10000; + + try { + const response = await fetch( + process.env.NEXT_PUBLIC_BACKEND_URL + + `api/public/get_prompts_list?num_days=${num_days}`, + { + method: "GET", + headers: { + "Content-Type": "application/json", + "uptrain-access-token": `${uptrainAccessKey}`, + }, + } + ); + + if (response.ok) { + const responseData = await response.json(); + setData(responseData.data); + + slug = decodeURIComponent(slug); + + const projectIndex = responseData.data.findIndex( + (project) => project.project === slug + ); + + if (projectIndex != -1) { + setSelectedProject(projectIndex); + } else { + router.replace("/404"); + } + } else { + console.error("Failed to submit API Key:", response.statusText); + // Handle error cases + } + } catch (error) { + console.error("Error submitting API Key:", error.message); + // Handle network errors or other exceptions + } +}; + +const fetchProjectData = async ( + uptrainAccessKey, + setData, + projectName, + TimeFilter +) => { + const num_days = + TimeFilter === 0 ? 1 : TimeFilter === 1 ? 7 : TimeFilter === 2 ? 30 : 10000; + + try { + const response = await fetch( + process.env.NEXT_PUBLIC_BACKEND_URL + + `api/public/get_prompt_data?project_name=${projectName}&num_days=${num_days}`, + { + method: "GET", + headers: { + "Content-Type": "application/json", + "uptrain-access-token": `${uptrainAccessKey}`, + }, + } + ); + + if (response.ok) { + const responseData = await response.json(); + setData(responseData.data); + } else { + console.error("Failed to submit API Key:", response.statusText); + setData(null); + } + } catch (error) { + console.error("Error submitting API Key:", error.message); + setData(null); + } +}; + +const page = ({ params: { slug } }) => { + const router = useRouter(); + + const uptrainAccessKey = useSelector(selectUptrainAccessKey); + + const [timeFilter, setTimeFilter] = useState(3); + const [selectedProject, setSelectedProject] = useState(0); + const [data, setData] = useState(null); + const [projectData, setProjectData] = useState(null); + const [openModal, setOpenModal] = useState(false); + const [promptVersionName, setPromptVersionName] = useState(null); + const [selectedCompareProject, setSelectedCompareProject] = useState(null); + const [selectedVersion1, setSelectedVersion1] = useState(null); + const [selectedVersion2, setSelectedVersion2] = useState(null); + + const projectNames = data ? data.map((obj) => obj.project) : []; + + const filteredProjects = + projectData && projectData.filter((item) => item.prompts.length > 1); + + useLayoutEffect(() => { + const fetchDataAsync = async () => { + await fetchData( + uptrainAccessKey, + setData, + timeFilter, + setSelectedProject, + slug, + router + ); + }; + + if (uptrainAccessKey) fetchDataAsync(); + }, [uptrainAccessKey, timeFilter]); // Dependency array to re-run effect when uptrainAccessKey changes + + useEffect(() => { + setSelectedCompareProject(null); + setProjectData(null); + const fetchProjectDataAsync = async () => { + await fetchProjectData( + uptrainAccessKey, + setProjectData, + projectNames[selectedProject], + timeFilter + ); + }; + + if (uptrainAccessKey && data) { + fetchProjectDataAsync(); + } + }, [uptrainAccessKey, data, selectedProject]); + + useEffect(() => { + setSelectedVersion1(null); + setSelectedVersion2(null); + }, [selectedCompareProject]); + + const handleProjectChange = (index) => { + setSelectedProject(index); + }; + + const reloadData = () => { + const fetchProjectDataAsync = async () => { + await fetchProjectData( + uptrainAccessKey, + setProjectData, + projectNames[selectedProject], + timeFilter + ); + }; + + setProjectData(null); + fetchProjectDataAsync(); + }; + + return ( + + {openModal && ( + { + setOpenModal(false); + }} + reloadData={reloadData} + promptProjectName={projectNames[selectedProject]} + promptVersionName={promptVersionName} + /> + )} +
+ {projectData ? ( + setOpenModal(true)} + setPromptVersionName={setPromptVersionName} + selectedCompareProject={selectedCompareProject} + filteredProjects={filteredProjects} + selectedVersion1={selectedVersion1} + selectedVersion2={selectedVersion2} + /> + ) : !projectNames[selectedProject] ? ( +
+

+ No Projects found for this duration +

+
+ ) : ( +
+ +
+ )} +
+ + ); +}; + +export default page; diff --git a/uptrain/dashboard/frontend/dashboard/src/app/prompts/page.js b/uptrain/dashboard/frontend/dashboard/src/app/prompts/page.js index 0e224198..57ddf3db 100644 --- a/uptrain/dashboard/frontend/dashboard/src/app/prompts/page.js +++ b/uptrain/dashboard/frontend/dashboard/src/app/prompts/page.js @@ -88,6 +88,7 @@ const page = () => { const [selectedVersion2, setSelectedVersion2] = useState(null); const projectNames = data ? data.map((obj) => obj.project) : []; + const filteredProjects = projectData && projectData.filter((item) => item.prompts.length > 1); @@ -141,7 +142,25 @@ const page = () => { }; return ( - + {openModal && ( { @@ -170,30 +189,10 @@ const page = () => {

) : ( -
+
)} -
- - -
); diff --git a/uptrain/dashboard/frontend/dashboard/src/components/ApiKeys/ApiKeySection.js b/uptrain/dashboard/frontend/dashboard/src/components/ApiKeys/ApiKeySection.js new file mode 100644 index 00000000..ca0a5353 --- /dev/null +++ b/uptrain/dashboard/frontend/dashboard/src/components/ApiKeys/ApiKeySection.js @@ -0,0 +1,32 @@ +import { selectUptrainAccessKey } from "@/store/reducers/userInfo"; +import React from "react"; +import { useSelector } from "react-redux"; +import GraySmallHeading from "../UI/GraySmallHeading"; +import GrayParah18 from "../UI/GrayParah18"; +import Image from "next/image"; + +const ApiKeySection = () => { + const uptrainAccessKey = useSelector(selectUptrainAccessKey); + const copyToClipboard = () => { + navigator.clipboard.writeText(uptrainAccessKey); + }; + + return ( +
+ Your API Key +
+
+ {uptrainAccessKey} + +
+ {/* */} +
+
+ ); +}; + +export default ApiKeySection; diff --git a/uptrain/dashboard/frontend/dashboard/src/components/ApiKeys/ButtonSection.js b/uptrain/dashboard/frontend/dashboard/src/components/ApiKeys/ButtonSection.js new file mode 100644 index 00000000..5d0a4fd6 --- /dev/null +++ b/uptrain/dashboard/frontend/dashboard/src/components/ApiKeys/ButtonSection.js @@ -0,0 +1,38 @@ +import React from "react"; +import TabButton from "./TabButton"; +import Image from "next/image"; + +const ButtonSection = (props) => { + return ( +
+
+ { + props.setTabs(0); + }} + title="Log and Evaluate" + /> + { + props.setTabs(1); + }} + title="Experiments" + /> + { + props.setTabs(2); + }} + title="Open Source" + /> +
+ +
+ ); +}; + +export default ButtonSection; diff --git a/uptrain/dashboard/frontend/dashboard/src/components/ApiKeys/CreditsSection.js b/uptrain/dashboard/frontend/dashboard/src/components/ApiKeys/CreditsSection.js new file mode 100644 index 00000000..2c1ef164 --- /dev/null +++ b/uptrain/dashboard/frontend/dashboard/src/components/ApiKeys/CreditsSection.js @@ -0,0 +1,25 @@ +import React from "react"; +import GraySmallHeading from "../UI/GraySmallHeading"; +import GrayParah18 from "../UI/GrayParah18"; +import { useSelector } from "react-redux"; +import { + selectTotalCredits, + selectUsedCredits, +} from "@/store/reducers/userInfo"; + +const CreditsSection = () => { + const totalCredits = useSelector(selectTotalCredits); + const usedCredits = useSelector(selectUsedCredits); + + return ( +
+ Credits left + + {usedCredits} + /{totalCredits} + +
+ ); +}; + +export default CreditsSection; diff --git a/uptrain/dashboard/frontend/dashboard/src/components/ApiKeys/TabButton.js b/uptrain/dashboard/frontend/dashboard/src/components/ApiKeys/TabButton.js new file mode 100644 index 00000000..414ae657 --- /dev/null +++ b/uptrain/dashboard/frontend/dashboard/src/components/ApiKeys/TabButton.js @@ -0,0 +1,18 @@ +import React from "react"; + +const TabButton = (props) => { + return ( + + ); +}; + +export default TabButton; diff --git a/uptrain/dashboard/frontend/dashboard/src/components/ApiKeys/WorkingSection.js b/uptrain/dashboard/frontend/dashboard/src/components/ApiKeys/WorkingSection.js new file mode 100644 index 00000000..488c826b --- /dev/null +++ b/uptrain/dashboard/frontend/dashboard/src/components/ApiKeys/WorkingSection.js @@ -0,0 +1,115 @@ +import React, { useState } from "react"; +import CodeViewer from "./CodeViewer"; +import GraySmallHeading from "../UI/GraySmallHeading"; +import ButtonSection from "./ButtonSection"; +import { useSelector } from "react-redux"; +import { selectUptrainAccessKey } from "@/store/reducers/userInfo"; + +const WorkingSection = () => { + const [tabs, setTabs] = useState(0); + const apiKey = useSelector(selectUptrainAccessKey); + + const openSource = `from uptrain import EvalLLM, Evals, CritiqueTone + import json + + OPENAI_API_KEY = "sk-***************" + + data = [{ + 'question': 'Which is the most popular global sport?', + 'context': "The popularity of sports can be measured in various ways, including TV viewership, social media presence, number of participants, and economic impact. Football is undoubtedly the world's most popular sport with major events like the FIFA World Cup and sports personalities like Ronaldo and Messi, drawing a followership of more than 4 billion people. ", + 'response': 'Football is the most popular sport with around 4 billion followers worldwide' + }] + + eval_llm = EvalLLM(openai_api_key=OPENAI_API_KEY) + + results = eval_llm.evaluate( + data=data, + checks=[Evals.CONTEXT_RELEVANCE, Evals.FACTUAL_ACCURACY, Evals.RESPONSE_RELEVANCE, CritiqueTone(persona="teacher")] + ) + + print(json.dumps(results, indent=3))`; + + const experiments = `from uptrain import APIClient, Evals, CritiqueTone + import json + + UPTRAIN_API_KEY = "${ + apiKey == undefined || apiKey == "None" ? "up-***************" : apiKey + }" + + data = [{ + "question": "How can you ensure that a designed prompt elicits the desired response from a language model?", + "context": "nudge the model to generate a desired result. Prompt design can be an efficient way to experiment with adapting a language model for a specific use case.", + "response": "To ensure that a designed prompt elicits the desired response from a language model, you can experiment with different prompt designs that nudge the model towards generating the desired result. This can be an efficient way to adapt the language model for a specific use case.", + "chunk_size": 200 + }, + { + "question": "How can you ensure that a designed prompt elicits the desired response from a language model?", + "context": "Design and save your own promptsPrompt design is the process of manually creating prompts that elicit the desired response from a language model. By carefully crafting prompts, you can nudge the model to generate a desired result. Prompt design can be an efficient way to experiment with adapting a language model for a specific use case. You can create and save your own prompts in Vertex AI Studio. When creating a new prompt, you enter the prompt text, specify the model to use, configure parameter values, and test the prompt by generating a response. You can iterate on the prompt and its configurations until you get the desired results. When you are done designing the prompt, you can save it in Vertex AI Studio. Response citations If you are using a text model in Vertex AI Studio like text-bison, you receive text responses based on your input. Our features are intended to produce original content and not replicate existing content at length. If", + "response": "To ensure that a designed prompt elicits the desired response from a language model, you can manually create prompts that carefully craft the desired result. By iterating on the prompt and its configurations in Vertex AI Studio, you can experiment and adjust until you achieve the desired results. Additionally, it is important to note that the text models in Vertex AI Studio are designed to produce original content and not replicate existing content at length.", + "chunk_size": 1000 + }] + + client = APIClient(uptrain_api_key=UPTRAIN_API_KEY) + + results = client.evaluate_experiments( + project_name="Chunk-Size-Experiment", + data=data, + checks=[Evals.CONTEXT_RELEVANCE, Evals.RESPONSE_RELEVANCE, Evals.FACTUAL_ACCURACY], + exp_columns=["chunk_size"] + ) + + print(json.dumps(results, indent=3))`; + + const log = `from uptrain import APIClient, Evals, CritiqueTone + import json + + UPTRAIN_API_KEY = "${ + apiKey == undefined || apiKey == "None" ? "up-***************" : apiKey + }" + + data = [{ + 'question': 'Which is the most popular global sport?', + 'context': "The popularity of sports can be measured in various ways, including TV viewership, social media presence, number of participants, and economic impact. Football is undoubtedly the world's most popular sport with major events like the FIFA World Cup and sports personalities like Ronaldo and Messi, drawing a followership of more than 4 billion people. ", + 'response': 'Football is the most popular sport with around 4 billion followers worldwide' + }] + + client = APIClient(uptrain_api_key=UPTRAIN_API_KEY) + + results = client.log_and_evaluate( + project_name="Sample-Project", + data=data, + checks=[Evals.CONTEXT_RELEVANCE, Evals.FACTUAL_ACCURACY, Evals.RESPONSE_RELEVANCE, CritiqueTone(persona="teacher")] + ) + + print(json.dumps(results, indent=3))`; + + const copyToClipboard = () => { + navigator.clipboard.writeText( + tabs === 0 ? log : tabs === 1 ? experiments : openSource + ); + }; + + return ( +
+ How it Works +
+ + 
+          {tabs === 0 ? (
+            {log}
+          ) : tabs === 1 ? (
+            {experiments}
+          ) : (
+            {openSource}
+          )}
+
+
+
+ ); +}; + +export default WorkingSection; diff --git a/uptrain/dashboard/frontend/dashboard/src/components/Evaluations/ButtonSection.js b/uptrain/dashboard/frontend/dashboard/src/components/Common/ButtonSection.js similarity index 89% rename from uptrain/dashboard/frontend/dashboard/src/components/Evaluations/ButtonSection.js rename to uptrain/dashboard/frontend/dashboard/src/components/Common/ButtonSection.js index c1dab159..c814c93e 100644 --- a/uptrain/dashboard/frontend/dashboard/src/components/Evaluations/ButtonSection.js +++ b/uptrain/dashboard/frontend/dashboard/src/components/Common/ButtonSection.js @@ -1,9 +1,9 @@ -import React, { useState } from "react"; +import React from "react"; import CustomTabButton from "../UI/CustomTabButton"; const ButtonSection = (props) => { return ( -
+
{props.tabs && props.tabs.map((item, index) => ( { const versions = diff --git a/uptrain/dashboard/frontend/dashboard/src/components/ContactUs/CalendlyPopUp.js b/uptrain/dashboard/frontend/dashboard/src/components/ContactUs/CalendlyPopUp.js new file mode 100644 index 00000000..dd899a85 --- /dev/null +++ b/uptrain/dashboard/frontend/dashboard/src/components/ContactUs/CalendlyPopUp.js @@ -0,0 +1,17 @@ +import React from 'react' +import { InlineWidget } from 'react-calendly'; + +const CalendlyPopUp = (props) => { + return ( +
+
+ +
+
+ ); + }; + +export default CalendlyPopUp \ No newline at end of file diff --git a/uptrain/dashboard/frontend/dashboard/src/components/ContactUs/ContactCard.js b/uptrain/dashboard/frontend/dashboard/src/components/ContactUs/ContactCard.js new file mode 100644 index 00000000..0d549e6c --- /dev/null +++ b/uptrain/dashboard/frontend/dashboard/src/components/ContactUs/ContactCard.js @@ -0,0 +1,48 @@ +import Image from "next/image"; +import React, { useState } from "react"; + +const ContactCard = (props) => { + const [isHovered, setIsHovered] = useState(false); + + const handleMouseEnter = () => { + setIsHovered(true); + }; + + const handleMouseLeave = () => { + setIsHovered(false); + }; + + return ( + + {props.children} +

+ {props.heading} +

+

+ {props.parah} +

+ {isHovered ? ( + Arrow Icon + ) : ( + Arrow Icon + )} + + ); +}; + +export default ContactCard; diff --git a/uptrain/dashboard/frontend/dashboard/src/components/CreateProjectModal/CloseButtonSection.js b/uptrain/dashboard/frontend/dashboard/src/components/CreateProjectModal/CloseButtonSection.js index 378aa2fc..d247771b 100644 --- a/uptrain/dashboard/frontend/dashboard/src/components/CreateProjectModal/CloseButtonSection.js +++ b/uptrain/dashboard/frontend/dashboard/src/components/CreateProjectModal/CloseButtonSection.js @@ -5,7 +5,7 @@ const CloseButtonSection = (props) => { return (
); diff --git a/uptrain/dashboard/frontend/dashboard/src/components/CreateProjectModal/CreateProjectModal.js b/uptrain/dashboard/frontend/dashboard/src/components/CreateProjectModal/CreateProjectModal.js index 0cbd4470..4449b16d 100644 --- a/uptrain/dashboard/frontend/dashboard/src/components/CreateProjectModal/CreateProjectModal.js +++ b/uptrain/dashboard/frontend/dashboard/src/components/CreateProjectModal/CreateProjectModal.js @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import { useSelector } from "react-redux"; import { selectUptrainAccessKey } from "@/store/reducers/userInfo"; import SpinningLoader from "../UI/SpinningLoader"; @@ -7,6 +7,34 @@ import Step1 from "./Step1"; import Step2 from "./Step2"; import Step3 from "./Step3"; + +const fetchData = async (uptrainAccessKey, setData) => { + try { + const response = await fetch( + process.env.NEXT_PUBLIC_BACKEND_URL + + `api/public/get_projects_list?num_days=${10000}`, + { + method: "GET", + headers: { + "Content-Type": "application/json", + "uptrain-access-token": `${uptrainAccessKey}`, + }, + } + ); + + if (response.ok) { + const responseData = await response.json(); + setData(responseData.data); + } else { + console.error("Failed to submit API Key:", response.statusText); + // Handle error cases + } + } catch (error) { + console.error("Error submitting API Key:", error.message); + // Handle network errors or other exceptions + } +}; + const CreateProjectModal = (props) => { const uptrainAccessKey = useSelector(selectUptrainAccessKey); @@ -22,6 +50,15 @@ const CreateProjectModal = (props) => { const [prompt, setPrompt] = useState(""); const [loading, setLoading] = useState(false); const [metadata, setMetadata] = useState({}); + const [allProject, setAllProject] = useState(); + + useEffect(() => { + const fetchDataAsync = async () => { + await fetchData(uptrainAccessKey, setAllProject); + }; + + if (uptrainAccessKey) fetchDataAsync(); + }, [uptrainAccessKey]); const singleMetrics = [ "context_relevance", @@ -66,8 +103,6 @@ const CreateProjectModal = (props) => { event.preventDefault(); setLoading(true); - console.log(metadata); - try { const formData = new FormData(); formData.append("model", selectedOption); @@ -193,6 +228,7 @@ const CreateProjectModal = (props) => { promptProjectName={props.promptProjectName} metadata={metadata} setMetadata={setMetadata} + allProject={allProject} /> ) : step === 2 ? ( { + const [error, setError] = useState(); + + console.log(error) + + const projectName = props.promptProjectName + ? props.promptProjectName + : props.projectName; const fileInputRef = useRef(null); const [openModal, setOpenModal] = useState(false); @@ -17,6 +24,16 @@ const Step1 = (props) => { const handleSubmit = (event) => { event.preventDefault(); + if (!props.selectedFile) { + setError("Please upload a dataset"); + return; + } + + if (props.allProject.some(obj => obj.project === projectName)) { + setError("Given Project name already exists"); + return; + } + props.promptProjectName ? props.nextPrompt() : props.selectedProjectType === "Evaluation" @@ -68,7 +85,6 @@ const Step1 = (props) => { onChange={handleFileChange} ref={fileInputRef} style={{ display: "none" }} - required /> {!props.promptProjectName && ( { className="rounded-xl px-6 py-4" required /> +

{error}

diff --git a/uptrain/dashboard/frontend/dashboard/src/components/DropDowns/CustomMultiSelect.js b/uptrain/dashboard/frontend/dashboard/src/components/DropDowns/CustomMultiSelect.js new file mode 100644 index 00000000..bf530242 --- /dev/null +++ b/uptrain/dashboard/frontend/dashboard/src/components/DropDowns/CustomMultiSelect.js @@ -0,0 +1,78 @@ +import React, { useEffect, useRef, useState } from "react"; +import DownArrow from "./DownArrow"; + +const CustomMultiCheckBox = (props) => { + return ( +
+ + +
+ ); +}; + +const CustomMultiSelect = (props) => { + const dropdownRef = useRef(null); + + useEffect(() => { + const handleClickOutside = (event) => { + if (dropdownRef.current && !dropdownRef.current.contains(event.target)) { + setSelected(false); + } + }; + + document.addEventListener("click", handleClickOutside); + return () => { + document.removeEventListener("click", handleClickOutside); + }; + }, []); + + const [selected, setSelected] = useState(false); + + return ( +
+ {props.title && ( +

{props.title}

+ )} +
+
+
setSelected((prev) => !prev)} + > +

+ {props.placeholder ? props.placeholder : "Choose an option"} +

+ +
+ {selected && ( +
+
+ {/*
+ +
*/} +
+ {props.selections && + props.selections.map((item, index) => ( + props.onSelect(item)} + selected={props.selected && props.selected.includes(item)} + /> + ))} +
+
+ )} +
+
+
+ ); +}; + +export default CustomMultiSelect; diff --git a/uptrain/dashboard/frontend/dashboard/src/components/FilterSection/CustomSingleCheckBox.js b/uptrain/dashboard/frontend/dashboard/src/components/DropDowns/CustomSingleCheckBox.js similarity index 100% rename from uptrain/dashboard/frontend/dashboard/src/components/FilterSection/CustomSingleCheckBox.js rename to uptrain/dashboard/frontend/dashboard/src/components/DropDowns/CustomSingleCheckBox.js diff --git a/uptrain/dashboard/frontend/dashboard/src/components/FilterSection/DownArrow.js b/uptrain/dashboard/frontend/dashboard/src/components/DropDowns/DownArrow.js similarity index 100% rename from uptrain/dashboard/frontend/dashboard/src/components/FilterSection/DownArrow.js rename to uptrain/dashboard/frontend/dashboard/src/components/DropDowns/DownArrow.js diff --git a/uptrain/dashboard/frontend/dashboard/src/components/UI/SingleSelect.js b/uptrain/dashboard/frontend/dashboard/src/components/DropDowns/SingleSelect.js similarity index 91% rename from uptrain/dashboard/frontend/dashboard/src/components/UI/SingleSelect.js rename to uptrain/dashboard/frontend/dashboard/src/components/DropDowns/SingleSelect.js index 5c35ecc7..9e7e1be4 100644 --- a/uptrain/dashboard/frontend/dashboard/src/components/UI/SingleSelect.js +++ b/uptrain/dashboard/frontend/dashboard/src/components/DropDowns/SingleSelect.js @@ -1,6 +1,6 @@ import React, { useState, useRef, useEffect } from "react"; -import DownArrow from "../FilterSection/DownArrow"; -import CustomSingleCheckBox from "../FilterSection/CustomSingleCheckBox"; +import DownArrow from "./DownArrow"; +import CustomSingleCheckBox from "./CustomSingleCheckBox"; const SingleSelect = (props) => { const [selected, setSelected] = useState(false); @@ -20,11 +20,11 @@ const SingleSelect = (props) => { }, []); return ( -
+
{props.title && (

{props.title}

)} -
+
{ }, }, ticks: { - + precision: 0, font: { size: 16, }, diff --git a/uptrain/dashboard/frontend/dashboard/src/components/Evaluations/LineChart.js b/uptrain/dashboard/frontend/dashboard/src/components/Evaluations/LineChart.js index c2110b36..ddf0bb53 100644 --- a/uptrain/dashboard/frontend/dashboard/src/components/Evaluations/LineChart.js +++ b/uptrain/dashboard/frontend/dashboard/src/components/Evaluations/LineChart.js @@ -59,7 +59,7 @@ const LineChart = (props) => { backgroundColor: "#192C59", borderColor: "#192C59", data: count, - borderWidth: 2, + borderWidth: 4, yAxisID: "y1", }, ], diff --git a/uptrain/dashboard/frontend/dashboard/src/components/Evaluations/Logs/AllLogs.js b/uptrain/dashboard/frontend/dashboard/src/components/Evaluations/Logs/AllLogs.js index b33ceef6..947fbd2c 100644 --- a/uptrain/dashboard/frontend/dashboard/src/components/Evaluations/Logs/AllLogs.js +++ b/uptrain/dashboard/frontend/dashboard/src/components/Evaluations/Logs/AllLogs.js @@ -11,7 +11,7 @@ const AllLogs = (props) => { props.projectData[0].map((item, index) => ( { selectedTab={props.selectedTab} explanation={item.checks[`explanation_${props.selectedTab}`]} score={item.checks[`score_${props.selectedTab}`]} + data={item.data} + updated={item.metadata && item.metadata[`score_${props.selectedTab}`]} + uuid={item.metadata && item.metadata["row_uuid"]} + AiConfidence={item.metadata && item.metadata[`score_confidence_${props.selectedTab}`]} + projectName={item.project} /> ))}
diff --git a/uptrain/dashboard/frontend/dashboard/src/components/Evaluations/Logs/AllLogsRow.js b/uptrain/dashboard/frontend/dashboard/src/components/Evaluations/Logs/AllLogsRow.js index 553ff2c1..84b9ef26 100644 --- a/uptrain/dashboard/frontend/dashboard/src/components/Evaluations/Logs/AllLogsRow.js +++ b/uptrain/dashboard/frontend/dashboard/src/components/Evaluations/Logs/AllLogsRow.js @@ -3,10 +3,12 @@ import AllLogsRowTop from "./AllLogsRowTop"; import Divider from "./Divider"; import DataRow from "./DataRow"; import DataModal from "./DataModal"; +import LikeModal from "./LikeModal"; const AllLogsRow = (props) => { const [expand, setExpand] = useState(false); const [showFull, setShowFull] = useState(false); + const [showLikeModal, setShowLikeModal] = useState(false); let index = typeof props.index !== "string" ? String(props.index + 1) : props.index; @@ -25,7 +27,22 @@ const AllLogsRow = (props) => { timestamp={props.timestamp} response={props.response} explanation={props.explanation} + data={props.data} + item={props.item} inModal + updated={props.updated} + uuid={props.uuid} + AiConfidence={props.AiConfidence} + projectName={props.projectName} + /> + )} + {showLikeModal && ( + setShowLikeModal(false)} + uuid={props.uuid} + selectedTab={props.selectedTab} + score={props.score} + projectName={props.projectName} /> )} { setExpand={setExpand} inModal={props.inModal} selectedTab={props.selectedTab} + setShowLikeModal={setShowLikeModal} + updated={props.updated} + uuid={props.uuid} + projectName={props.projectName} + AiConfidence={props.AiConfidence} /> {expand || props.inModal ? ( <> @@ -63,6 +85,25 @@ const AllLogsRow = (props) => { /> )} + {Object.entries(props.data) + .filter( + ([key, value]) => + key !== "response" && + key !== "explanation" && + key !== "question" + ) + .map(([key, value], index) => ( +
+ + +
+ ))} ) : ( <> diff --git a/uptrain/dashboard/frontend/dashboard/src/components/Evaluations/Logs/AllLogsRowTop.js b/uptrain/dashboard/frontend/dashboard/src/components/Evaluations/Logs/AllLogsRowTop.js index 0afb3c40..28c79d69 100644 --- a/uptrain/dashboard/frontend/dashboard/src/components/Evaluations/Logs/AllLogsRowTop.js +++ b/uptrain/dashboard/frontend/dashboard/src/components/Evaluations/Logs/AllLogsRowTop.js @@ -1,9 +1,54 @@ +import { selectUptrainAccessKey } from "@/store/reducers/userInfo"; import { changeDateFormat } from "@/utils/changeDateFormat"; import Image from "next/image"; -import React from "react"; +import React, { useEffect, useState } from "react"; +import { useSelector } from "react-redux"; const AllLogsRowTop = (props) => { + const [liked, setLiked] = useState(); const formattedDate = changeDateFormat(props.date); + const uptrainAccessKey = useSelector(selectUptrainAccessKey); + + useEffect(() => { + if (liked == false) { + props.setShowLikeModal(true); + } + }, [liked]); + + const likeHandler = async () => { + setLiked(true); + try { + const data = { + row_uuid: props.uuid, + check: props.selectedTab, + project_name: props.projectName, + human_score: props.score, + }; + + const response = await fetch( + process.env.NEXT_PUBLIC_BACKEND_URL + `api/public/human_feedback`, + { + method: "POST", + headers: { + "uptrain-access-token": `${uptrainAccessKey}`, + "Content-Type": "application/json", + }, + body: JSON.stringify(data), + } + ); + + if (response.ok) { + const responseData = await response.json(); + console.log(responseData); + } else { + console.error("Failed to submit:", response.statusText); + // Handle error cases + } + } catch (error) { + console.error("Error submitting:", error.message); + // Handle network errors or other exceptions + } + }; return (
@@ -12,16 +57,77 @@ const AllLogsRowTop = (props) => {

{props.question}

-
-
+
+

- {props.selectedTab} Score:{" "} + Score:{" "} {props.score}

+ {props.AiConfidence && ( + <> +
+

+ Confidence:{" "} + {props.AiConfidence} +

+ + )}

{formattedDate}

+ {props.uuid && ( + <> +
+ +
+ + +
+ + )} + {props.updated && ( + <> +
+

+ {props.updated} +

+ + )}
{!props.inModal ? ( ) : ( diff --git a/uptrain/dashboard/frontend/dashboard/src/components/Evaluations/Logs/DataModal.js b/uptrain/dashboard/frontend/dashboard/src/components/Evaluations/Logs/DataModal.js index 8ac806bb..951798e3 100644 --- a/uptrain/dashboard/frontend/dashboard/src/components/Evaluations/Logs/DataModal.js +++ b/uptrain/dashboard/frontend/dashboard/src/components/Evaluations/Logs/DataModal.js @@ -16,6 +16,11 @@ const DataModal = (props) => { timestamp={props.timestamp} response={props.response} explanation={props.explanation} + data={props.data} + updated={props.updated} + uuid={props.uuid} + AiConfidence={props.AiConfidence} + projectName={props.projectName} />
diff --git a/uptrain/dashboard/frontend/dashboard/src/components/Evaluations/Logs/DataRow.js b/uptrain/dashboard/frontend/dashboard/src/components/Evaluations/Logs/DataRow.js index 475e37d9..64938a38 100644 --- a/uptrain/dashboard/frontend/dashboard/src/components/Evaluations/Logs/DataRow.js +++ b/uptrain/dashboard/frontend/dashboard/src/components/Evaluations/Logs/DataRow.js @@ -3,15 +3,18 @@ import React from "react"; const DataRow = (props) => { const wordsLimit = 80; + let data = typeof props.data !== "string" ? String(props.data) : props.data; + data = data === null ? "" : data; + const truncateExplanation = (explanation) => { const words = explanation.split(" "); const truncatedWords = words.slice(0, wordsLimit); return truncatedWords.join(" "); }; - const truncatedExplanation = truncateExplanation(props.data); + const truncatedExplanation = truncateExplanation(data); - const wordsCount = props.data.split(" ").length; + const wordsCount = data.split(" ").length; const shouldShowMoreButton = wordsCount > wordsLimit; return ( diff --git a/uptrain/dashboard/frontend/dashboard/src/components/Evaluations/Logs/LikeModal.js b/uptrain/dashboard/frontend/dashboard/src/components/Evaluations/Logs/LikeModal.js new file mode 100644 index 00000000..b734c40f --- /dev/null +++ b/uptrain/dashboard/frontend/dashboard/src/components/Evaluations/Logs/LikeModal.js @@ -0,0 +1,98 @@ +import { selectUptrainAccessKey } from "@/store/reducers/userInfo"; +import Image from "next/image"; +import React from "react"; +import { useSelector } from "react-redux"; + +const LikeModal = (props) => { + var scores = [0, 0.5, 1]; + const uptrainAccessKey = useSelector(selectUptrainAccessKey); + + // // Loop from 0 to 1 with a step size of 0.1 + // for (var i = 0; i <= 1; i += 0.1) { + // // Round the number to avoid floating point precision issues + // var value = Math.round(i * 10) / 10; + // // Push the rounded value to the array + // scores.push(value); + // } + + const likeHandler = async (score) => { + props.onClick(); + + try { + const data = { + row_uuid: props.uuid, + check: props.selectedTab, + project_name: props.projectName, + human_score: score, + }; + + const response = await fetch( + process.env.NEXT_PUBLIC_BACKEND_URL + `api/public/human_feedback`, + { + method: "POST", + headers: { + "uptrain-access-token": `${uptrainAccessKey}`, + "Content-Type": "application/json", + }, + body: JSON.stringify(data), + } + ); + + if (response.ok) { + const responseData = await response.json(); + console.log(responseData); + } else { + console.error("Failed to submit:", response.statusText); + // Handle error cases + } + } catch (error) { + console.error("Error submitting:", error.message); + // Handle network errors or other exceptions + } + }; + + return ( +
+
+

+ Modify Score +

+
+

Shared Feedback:

+ + +
+
+

+ {props.selectedTab} Score: +

+

{props.score}

+
+
+

+ Select Score: +

+
+ {scores.map((item, index) => ( + + ))} +
+
+
+
+ ); +}; + +export default LikeModal; diff --git a/uptrain/dashboard/frontend/dashboard/src/components/Evaluations/Logs_InsightsTable.js b/uptrain/dashboard/frontend/dashboard/src/components/Evaluations/Logs_InsightsTable.js index 71298650..acd528ed 100644 --- a/uptrain/dashboard/frontend/dashboard/src/components/Evaluations/Logs_InsightsTable.js +++ b/uptrain/dashboard/frontend/dashboard/src/components/Evaluations/Logs_InsightsTable.js @@ -25,7 +25,7 @@ const ButtonSection = (props) => { />
); @@ -35,7 +35,7 @@ const TableSection = (props) => { const [Tab, setTab] = useState(1); return ( -
+
{Tab == 1 ? ( { response={props.response} explanation={props.explanation} inModal + prompt_version={props.prompt_version} + data={props.data} + model={props.model} /> )} { /> {expand || props.inModal ? (
+ {props.prompt_version && ( + <> + + + + )} + {props.score && ( <> @@ -74,6 +89,27 @@ const AllLogsRow = (props) => { /> )} + {Object.entries(props.data) + .filter( + ([key, value]) => + key !== "response" && + key !== "explanation" && + key !== "question" && + key !== "uptrain_experiment_columns" && + key !== props.model + ) + .map(([key, value], index) => ( +
+ + +
+ ))}
) : ( <> diff --git a/uptrain/dashboard/frontend/dashboard/src/components/Experiment/AllLogs/AllLogsRowTop.js b/uptrain/dashboard/frontend/dashboard/src/components/Experiment/AllLogs/AllLogsRowTop.js index 5a3bc945..3d1670d4 100644 --- a/uptrain/dashboard/frontend/dashboard/src/components/Experiment/AllLogs/AllLogsRowTop.js +++ b/uptrain/dashboard/frontend/dashboard/src/components/Experiment/AllLogs/AllLogsRowTop.js @@ -26,7 +26,8 @@ const AllLogsRowTop = (props) => { width={11} className={`${ props.expand && "rotate-180" - } transition-all delay-150`} + } transition-all delay-150 w-auto h-auto`} + alt="Drop Down Icon" /> ) : ( diff --git a/uptrain/dashboard/frontend/dashboard/src/components/Experiment/AllLogs/AllLogs_Experiment.js b/uptrain/dashboard/frontend/dashboard/src/components/Experiment/AllLogs/AllLogs_Experiment.js index 26fe553e..bbe78381 100644 --- a/uptrain/dashboard/frontend/dashboard/src/components/Experiment/AllLogs/AllLogs_Experiment.js +++ b/uptrain/dashboard/frontend/dashboard/src/components/Experiment/AllLogs/AllLogs_Experiment.js @@ -16,6 +16,9 @@ const AllLogs = (props) => { response={item.response} explanation={item[`explanation_${props.selectedTab}`]} score={item[`score_${props.selectedTab}`]} + prompt_version={props.projectData[5]} + data={item} + model={props.projectData[6]} /> ))}
diff --git a/uptrain/dashboard/frontend/dashboard/src/components/Experiment/AllLogs/DataModal.js b/uptrain/dashboard/frontend/dashboard/src/components/Experiment/AllLogs/DataModal.js index f09dbb95..a593ccba 100644 --- a/uptrain/dashboard/frontend/dashboard/src/components/Experiment/AllLogs/DataModal.js +++ b/uptrain/dashboard/frontend/dashboard/src/components/Experiment/AllLogs/DataModal.js @@ -16,6 +16,9 @@ const DataModal = (props) => { date={props.date} response={props.response} explanation={props.explanation} + prompt_version={props.prompt_version} + data={props.data} + model={props.model} />
diff --git a/uptrain/dashboard/frontend/dashboard/src/components/Experiment/AllLogs/DataRow.js b/uptrain/dashboard/frontend/dashboard/src/components/Experiment/AllLogs/DataRow.js index 30ffbfad..31a35856 100644 --- a/uptrain/dashboard/frontend/dashboard/src/components/Experiment/AllLogs/DataRow.js +++ b/uptrain/dashboard/frontend/dashboard/src/components/Experiment/AllLogs/DataRow.js @@ -3,19 +3,22 @@ import React from "react"; const DataBox = (props) => { const wordsLimit = 50; + let data = typeof props.data !== "string" ? String(props.data) : props.data; + data = data === null ? "" : data; + const truncateExplanation = (explanation) => { const words = explanation.split(" "); const truncatedWords = words.slice(0, wordsLimit); return truncatedWords.join(" "); }; - const truncatedExplanation = truncateExplanation(props.data); + const truncatedExplanation = truncateExplanation(data); - const wordsCount = props.data.split(" ").length; + const wordsCount = data.split(" ").length; const shouldShowMoreButton = wordsCount > wordsLimit; return ( -
+

{ return ( <>

-

+

{props.title}

{props.data.map((item, index) => props.score ? ( -
-

{item}

-
- ) : ( - - ) - )} - {props.data.map((item, index) => - props.score ? ( -
+

{item}

) : ( diff --git a/uptrain/dashboard/frontend/dashboard/src/components/Experiment/ButtonSection.js b/uptrain/dashboard/frontend/dashboard/src/components/Experiment/ButtonSection.js deleted file mode 100644 index c1dab159..00000000 --- a/uptrain/dashboard/frontend/dashboard/src/components/Experiment/ButtonSection.js +++ /dev/null @@ -1,22 +0,0 @@ -import React, { useState } from "react"; -import CustomTabButton from "../UI/CustomTabButton"; - -const ButtonSection = (props) => { - return ( -
- {props.tabs && - props.tabs.map((item, index) => ( - { - props.setTab(index); - }} - title={item} - selected={props.Tab == index} - /> - ))} -
- ); -}; - -export default ButtonSection; diff --git a/uptrain/dashboard/frontend/dashboard/src/components/Experiment/Insights/Insights.js b/uptrain/dashboard/frontend/dashboard/src/components/Experiment/Insights/Insights.js index bae563b3..9f12d65f 100644 --- a/uptrain/dashboard/frontend/dashboard/src/components/Experiment/Insights/Insights.js +++ b/uptrain/dashboard/frontend/dashboard/src/components/Experiment/Insights/Insights.js @@ -28,9 +28,9 @@ const InsightRow = (props) => {

Score: {props.score}

{props.drop ? ( - + Down Arrow Icon ) : ( - + Up Arrow Icon )}

( {props.details} )

@@ -41,7 +41,7 @@ const InsightRow = (props) => { 01-01-23, 02:36 AM

{isHovered ? ( - + Arrow Icon ) : ( <> )} diff --git a/uptrain/dashboard/frontend/dashboard/src/components/Experiment/Insights/InsightsModal.js b/uptrain/dashboard/frontend/dashboard/src/components/Experiment/Insights/InsightsModal.js index fee1c169..39332b25 100644 --- a/uptrain/dashboard/frontend/dashboard/src/components/Experiment/Insights/InsightsModal.js +++ b/uptrain/dashboard/frontend/dashboard/src/components/Experiment/Insights/InsightsModal.js @@ -59,6 +59,7 @@ const InsightsModal = (props) => { width={683} height={318} className="w-full h-auto" + alt="Insights Access Image" />
diff --git a/uptrain/dashboard/frontend/dashboard/src/components/Experiment/Logs_InsightsTable.js b/uptrain/dashboard/frontend/dashboard/src/components/Experiment/Logs_InsightsTable.js index 656e6287..fc4d77b5 100644 --- a/uptrain/dashboard/frontend/dashboard/src/components/Experiment/Logs_InsightsTable.js +++ b/uptrain/dashboard/frontend/dashboard/src/components/Experiment/Logs_InsightsTable.js @@ -25,7 +25,13 @@ const ButtonSection = (props) => { />
); diff --git a/uptrain/dashboard/frontend/dashboard/src/components/FilterContainer/FilterContainer.js b/uptrain/dashboard/frontend/dashboard/src/components/FilterContainer/FilterContainer.js new file mode 100644 index 00000000..35276a6b --- /dev/null +++ b/uptrain/dashboard/frontend/dashboard/src/components/FilterContainer/FilterContainer.js @@ -0,0 +1,70 @@ +import Image from "next/image"; +import React from "react"; + +const FilterContainer = (props) => { + return ( +
+
+ + + + + + + {/* + + +
+
+ +
*/} +
+ {props.show && ( +
+ {props.children} +
+ )} +
+ ); +}; + +export default FilterContainer; diff --git a/uptrain/dashboard/frontend/dashboard/src/components/FilterSection/FilterSection.js b/uptrain/dashboard/frontend/dashboard/src/components/FilterSection/FilterSection.js index 9b7cb39f..56caf5d2 100644 --- a/uptrain/dashboard/frontend/dashboard/src/components/FilterSection/FilterSection.js +++ b/uptrain/dashboard/frontend/dashboard/src/components/FilterSection/FilterSection.js @@ -1,6 +1,6 @@ "use client"; import React, { useState } from "react"; -import SingleSelect from "../UI/SingleSelect"; +import SingleSelect from "../DropDowns/SingleSelect"; const CustomMultiCheckBox = (props) => { const [isChecked, setChecked] = useState(false); diff --git a/uptrain/dashboard/frontend/dashboard/src/components/Header.js b/uptrain/dashboard/frontend/dashboard/src/components/Header.js index 2d93c858..9cfb5ab2 100644 --- a/uptrain/dashboard/frontend/dashboard/src/components/Header.js +++ b/uptrain/dashboard/frontend/dashboard/src/components/Header.js @@ -15,15 +15,6 @@ const Header = (props) => {
)}
-
- - - -
-
- -
-
); }; diff --git a/uptrain/dashboard/frontend/dashboard/src/components/HomePage/ProjectSection/CreateProjectTab.js b/uptrain/dashboard/frontend/dashboard/src/components/HomePage/ProjectSection/CreateProjectTab.js index 5df48aec..01b44735 100644 --- a/uptrain/dashboard/frontend/dashboard/src/components/HomePage/ProjectSection/CreateProjectTab.js +++ b/uptrain/dashboard/frontend/dashboard/src/components/HomePage/ProjectSection/CreateProjectTab.js @@ -7,7 +7,7 @@ const CreateProjectTab = (props) => { className="bg-[#1C1C25] w-full h-full min-h-[150px] px-4 rounded-xl flex items-center justify-center flex-col cursor-pointer" onClick={props.setopenModal} > - + add Icon

Create New Project

); diff --git a/uptrain/dashboard/frontend/dashboard/src/components/HomePage/ProjectSection/ProjectCard.js b/uptrain/dashboard/frontend/dashboard/src/components/HomePage/ProjectSection/ProjectCard.js index 5b51625e..03bbbde8 100644 --- a/uptrain/dashboard/frontend/dashboard/src/components/HomePage/ProjectSection/ProjectCard.js +++ b/uptrain/dashboard/frontend/dashboard/src/components/HomePage/ProjectSection/ProjectCard.js @@ -7,6 +7,8 @@ const ProjectCard = (props) => { const [isHovered, setIsHovered] = useState(false); const router = useRouter(); + const goToProjectpage = !props.title.includes("/"); + return ( ); diff --git a/uptrain/dashboard/frontend/dashboard/src/components/Prompts/ProjectCard.js b/uptrain/dashboard/frontend/dashboard/src/components/Prompts/ProjectCard.js index bfb85699..51b18a52 100644 --- a/uptrain/dashboard/frontend/dashboard/src/components/Prompts/ProjectCard.js +++ b/uptrain/dashboard/frontend/dashboard/src/components/Prompts/ProjectCard.js @@ -36,10 +36,10 @@ const ProjectCard = (props) => { props.selectedVersion2 == null && expand && props.data.prompts.slice(1).map((item, index) => ( - <> +
- +
))} {props.selectedVersion1 == null && props.selectedVersion2 == null && diff --git a/uptrain/dashboard/frontend/dashboard/src/components/Prompts/ProjectSection.js b/uptrain/dashboard/frontend/dashboard/src/components/Prompts/ProjectSection.js index 81e58db6..ae0ce5c7 100644 --- a/uptrain/dashboard/frontend/dashboard/src/components/Prompts/ProjectSection.js +++ b/uptrain/dashboard/frontend/dashboard/src/components/Prompts/ProjectSection.js @@ -3,7 +3,6 @@ import AddNewProjectCard from "./AddNewProjectCard"; import ProjectCard from "./ProjectCard"; const ProjectSection = (props) => { - console.log(props); return (

All Prompts

@@ -24,6 +23,7 @@ const ProjectSection = (props) => { data={item} openModal={props.openModal} setPromptVersionName={props.setPromptVersionName} + key={index} /> ))} diff --git a/uptrain/dashboard/frontend/dashboard/src/components/Prompts/Row.js b/uptrain/dashboard/frontend/dashboard/src/components/Prompts/Row.js index fe16d7b8..bf7e0fd7 100644 --- a/uptrain/dashboard/frontend/dashboard/src/components/Prompts/Row.js +++ b/uptrain/dashboard/frontend/dashboard/src/components/Prompts/Row.js @@ -45,7 +45,8 @@ const Row = (props) => { width={11} className={`${ props.expand && "rotate-180" - } transition-all delay-150`} + } transition-all delay-150 min-w-[11px] w-auto h-auto`} + alt="Drop-down Icon" /> )} diff --git a/uptrain/dashboard/frontend/dashboard/src/components/SideBar/LinkElement.js b/uptrain/dashboard/frontend/dashboard/src/components/SideBar/LinkElement.js new file mode 100644 index 00000000..fdd87a0b --- /dev/null +++ b/uptrain/dashboard/frontend/dashboard/src/components/SideBar/LinkElement.js @@ -0,0 +1,27 @@ +import Link from "next/link"; +import { usePathname } from "next/navigation"; +import React from "react"; + +const LinkElement = (props) => { + const pathname = usePathname(); + + return ( + +
+
+ {props.children} +

+ {props.title} +

+
+ + ); +}; + +export default LinkElement; diff --git a/uptrain/dashboard/frontend/dashboard/src/components/SideBar/SideBar.js b/uptrain/dashboard/frontend/dashboard/src/components/SideBar/SideBar.js index bcbfac82..2b1da0f8 100644 --- a/uptrain/dashboard/frontend/dashboard/src/components/SideBar/SideBar.js +++ b/uptrain/dashboard/frontend/dashboard/src/components/SideBar/SideBar.js @@ -3,30 +3,7 @@ import Image from "next/image"; import Link from "next/link"; import React from "react"; import { usePathname } from "next/navigation"; - -const LinkElement = (props) => { - const pathname = usePathname(); - - return ( - -
-
- {props.children} -

- {props.title} -

-
- - ); -}; +import LinkElement from "./LinkElement"; const SideBar = () => { const pathname = usePathname(); @@ -45,7 +22,7 @@ const SideBar = () => {
- + {pathname == "/" ? ( { /> )} - - {pathname == "/evaluations" ? ( + + {pathname.includes("/evaluations") ? ( { /> )} - - {pathname == "/experiment" ? ( + + {pathname.includes("/experiment") ? ( { /> )} - - {pathname == "/prompts" ? ( + + {pathname.includes("/prompts") ? ( { /> )} - + {pathname == "/api-keys" ? ( { /> )} - + {pathname == "/contact-us" ? ( {

Score: {props.score}

{props.drop ? ( - + Down Arrow Icon ) : ( - + Up Arrow Icon )}

( {props.details} )

@@ -43,7 +48,12 @@ const InsightRow = (props) => { 01-01-23, 02:36 AM

{isHovered ? ( - + Arrow Icon ) : ( <> )} diff --git a/uptrain/dashboard/frontend/dashboard/src/components/Tables/Insights/InsightsModal.js b/uptrain/dashboard/frontend/dashboard/src/components/Tables/Insights/InsightsModal.js index c5649387..7b10c9a4 100644 --- a/uptrain/dashboard/frontend/dashboard/src/components/Tables/Insights/InsightsModal.js +++ b/uptrain/dashboard/frontend/dashboard/src/components/Tables/Insights/InsightsModal.js @@ -59,6 +59,7 @@ const InsightsModal = (props) => { width={683} height={318} className="w-full h-auto" + alt="Insights Access Image" />
diff --git a/uptrain/dashboard/frontend/dashboard/src/components/Tables/RecentRuns/RecentRuns.js b/uptrain/dashboard/frontend/dashboard/src/components/Tables/RecentRuns/RecentRuns.js index bef0ca5d..90819ad4 100644 --- a/uptrain/dashboard/frontend/dashboard/src/components/Tables/RecentRuns/RecentRuns.js +++ b/uptrain/dashboard/frontend/dashboard/src/components/Tables/RecentRuns/RecentRuns.js @@ -47,7 +47,7 @@ const RecentRunsRow = (props) => { {props.date}

{isHovered ? ( - + ) : ( <> )} diff --git a/uptrain/dashboard/frontend/dashboard/src/components/UI/SpinningLoader.js b/uptrain/dashboard/frontend/dashboard/src/components/UI/SpinningLoader.js index 76d20bde..e61adb54 100644 --- a/uptrain/dashboard/frontend/dashboard/src/components/UI/SpinningLoader.js +++ b/uptrain/dashboard/frontend/dashboard/src/components/UI/SpinningLoader.js @@ -3,21 +3,21 @@ import React from "react"; const SpinningLoader = () => { return ( diff --git a/uptrain/dashboard/frontend/dashboard/src/utils/changeDateFormat.js b/uptrain/dashboard/frontend/dashboard/src/utils/changeDateFormat.js index 55224769..d12780cb 100644 --- a/uptrain/dashboard/frontend/dashboard/src/utils/changeDateFormat.js +++ b/uptrain/dashboard/frontend/dashboard/src/utils/changeDateFormat.js @@ -33,7 +33,7 @@ export const changeDateFormat = (date) => { hours = hours ? hours : 12; // Handle midnight (0 hours) // Format the date string - var formattedDateString = `${day}-${month}-${year} ${hours}:${minutes}:${seconds} ${meridiem}`; + var formattedDateString = `${day}-${month}-${year} ${hours}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')} ${meridiem}`; return formattedDateString; }; From 0f6af2ede4de1ed6a9f2923691de533246b0a8d7 Mon Sep 17 00:00:00 2001 From: Sanchita Date: Sun, 17 Mar 2024 18:29:49 +0530 Subject: [PATCH 2/2] remove checking common name functionality --- uptrain/dashboard/frontend/dashboard/.env | 1 + .../CreateProjectModal/CreateProjectModal.js | 62 +++++++++---------- .../components/CreateProjectModal/Step1.js | 22 +++---- 3 files changed, 40 insertions(+), 45 deletions(-) diff --git a/uptrain/dashboard/frontend/dashboard/.env b/uptrain/dashboard/frontend/dashboard/.env index e4a4413d..b2f0923d 100644 --- a/uptrain/dashboard/frontend/dashboard/.env +++ b/uptrain/dashboard/frontend/dashboard/.env @@ -1 +1,2 @@ NEXT_PUBLIC_BACKEND_URL=http://localhost:4300/ + \ No newline at end of file diff --git a/uptrain/dashboard/frontend/dashboard/src/components/CreateProjectModal/CreateProjectModal.js b/uptrain/dashboard/frontend/dashboard/src/components/CreateProjectModal/CreateProjectModal.js index 4449b16d..bd5bec0b 100644 --- a/uptrain/dashboard/frontend/dashboard/src/components/CreateProjectModal/CreateProjectModal.js +++ b/uptrain/dashboard/frontend/dashboard/src/components/CreateProjectModal/CreateProjectModal.js @@ -8,32 +8,32 @@ import Step2 from "./Step2"; import Step3 from "./Step3"; -const fetchData = async (uptrainAccessKey, setData) => { - try { - const response = await fetch( - process.env.NEXT_PUBLIC_BACKEND_URL + - `api/public/get_projects_list?num_days=${10000}`, - { - method: "GET", - headers: { - "Content-Type": "application/json", - "uptrain-access-token": `${uptrainAccessKey}`, - }, - } - ); +// const fetchData = async (uptrainAccessKey, setData) => { +// try { +// const response = await fetch( +// process.env.NEXT_PUBLIC_BACKEND_URL + +// `api/public/get_projects_list?num_days=${10000}`, +// { +// method: "GET", +// headers: { +// "Content-Type": "application/json", +// "uptrain-access-token": `${uptrainAccessKey}`, +// }, +// } +// ); - if (response.ok) { - const responseData = await response.json(); - setData(responseData.data); - } else { - console.error("Failed to submit API Key:", response.statusText); - // Handle error cases - } - } catch (error) { - console.error("Error submitting API Key:", error.message); - // Handle network errors or other exceptions - } -}; +// if (response.ok) { +// const responseData = await response.json(); +// setData(responseData.data); +// } else { +// console.error("Failed to submit API Key:", response.statusText); +// // Handle error cases +// } +// } catch (error) { +// console.error("Error submitting API Key:", error.message); +// // Handle network errors or other exceptions +// } +// }; const CreateProjectModal = (props) => { const uptrainAccessKey = useSelector(selectUptrainAccessKey); @@ -52,13 +52,13 @@ const CreateProjectModal = (props) => { const [metadata, setMetadata] = useState({}); const [allProject, setAllProject] = useState(); - useEffect(() => { - const fetchDataAsync = async () => { - await fetchData(uptrainAccessKey, setAllProject); - }; + // useEffect(() => { + // const fetchDataAsync = async () => { + // await fetchData(uptrainAccessKey, setAllProject); + // }; - if (uptrainAccessKey) fetchDataAsync(); - }, [uptrainAccessKey]); + // if (uptrainAccessKey) fetchDataAsync(); + // }, [uptrainAccessKey]); const singleMetrics = [ "context_relevance", diff --git a/uptrain/dashboard/frontend/dashboard/src/components/CreateProjectModal/Step1.js b/uptrain/dashboard/frontend/dashboard/src/components/CreateProjectModal/Step1.js index c9585c7b..b4a1d585 100644 --- a/uptrain/dashboard/frontend/dashboard/src/components/CreateProjectModal/Step1.js +++ b/uptrain/dashboard/frontend/dashboard/src/components/CreateProjectModal/Step1.js @@ -5,11 +5,9 @@ import Step3OverModal from "./Step3OverModal"; const Step1 = (props) => { const [error, setError] = useState(); - console.log(error) - const projectName = props.promptProjectName - ? props.promptProjectName - : props.projectName; + ? props.promptProjectName + : props.projectName; const fileInputRef = useRef(null); const [openModal, setOpenModal] = useState(false); @@ -29,10 +27,10 @@ const Step1 = (props) => { return; } - if (props.allProject.some(obj => obj.project === projectName)) { - setError("Given Project name already exists"); - return; - } + // if (props.allProject.some(obj => obj.project === projectName)) { + // setError("Given Project name already exists"); + // return; + // } props.promptProjectName ? props.nextPrompt() @@ -63,11 +61,7 @@ const Step1 = (props) => { className="bg-[#171721] rounded-xl px-6 py-4 text-[#B6B6B9] w-full" placeholder="Project name" onChange={(e) => props.setProjectName(e.target.value)} - value={ - props.promptProjectName - ? props.promptProjectName - : props.projectName - } + value={projectName} required disabled={props.promptProjectName} /> @@ -118,7 +112,7 @@ const Step1 = (props) => { className="rounded-xl px-6 py-4" required /> -

{error}

+

{error}