-
Notifications
You must be signed in to change notification settings - Fork 131
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[OPIK-220] [UX Improvement] Add quickstart page
- Loading branch information
1 parent
6e5bb09
commit 6fb70d5
Showing
20 changed files
with
785 additions
and
188 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
146 changes: 146 additions & 0 deletions
146
apps/opik-frontend/src/components/pages/GetStartedPage/GetStarted.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,146 @@ | ||
| import { MoveRight, SquareArrowOutUpRight } from "lucide-react"; | ||
| import { Link } from "@tanstack/react-router"; | ||
| import { Button } from "@/components/ui/button"; | ||
| import useAppStore from "@/store/AppStore"; | ||
| import demoProjectImageUrl from "/images/demo-project.png"; | ||
| import langChainLogoUrl from "/images/integrations/langchain.png"; | ||
| import liteLLMLogoUrl from "/images/integrations/litellm.png"; | ||
| import openAILogoUrl from "/images/integrations/openai.png"; | ||
| import pythonLogoUrl from "/images/integrations/python.png"; | ||
| import ragasLogoUrl from "/images/integrations/ragas.png"; | ||
| import ApiKeyInput from "@/components/shared/ApiKeyInput/ApiKeyInput"; | ||
| import React from "react"; | ||
|
|
||
| const LOGO_IMAGES = [ | ||
| pythonLogoUrl, | ||
| liteLLMLogoUrl, | ||
| openAILogoUrl, | ||
| ragasLogoUrl, | ||
| langChainLogoUrl, | ||
| ]; | ||
|
|
||
| type GetStartedProps = { | ||
| apiKey?: string; | ||
| userName: string; | ||
| }; | ||
|
|
||
| const GetStarted: React.FunctionComponent<GetStartedProps> = ({ | ||
| apiKey, | ||
| userName, | ||
| }) => { | ||
| const workspaceName = useAppStore((state) => state.activeWorkspaceName); | ||
|
|
||
| return ( | ||
| <div className="flex w-full justify-center px-4 pb-2 pt-12"> | ||
| <div className="flex max-w-[1200px] flex-col gap-8"> | ||
| <div className="flex flex-col gap-3"> | ||
| <div className="flex flex-row justify-between"> | ||
| <div className="flex flex-col gap-3"> | ||
| <div className="comet-body-s text-muted-slate"> | ||
| Welcome {userName} | ||
| </div> | ||
|
|
||
| <h1 className="comet-title-l text-foreground-secondary"> | ||
| Get Started with Opik | ||
| </h1> | ||
| </div> | ||
|
|
||
| <Link to="/$workspaceName/projects" params={{ workspaceName }}> | ||
| <Button variant="secondary"> | ||
| Explore the platform on my own | ||
| </Button> | ||
| </Link> | ||
| </div> | ||
|
|
||
| <div className="comet-body-s text-muted-slate"> | ||
| Start with one of our integrations or a few lines of code to log, | ||
| view and evaluate your LLM traces during both development and | ||
| production. | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="flex w-full flex-col gap-14"> | ||
| <div className="flex w-full flex-row gap-5"> | ||
| <div className="flex min-w-[65%] flex-1 flex-row justify-between gap-20 rounded-md border bg-white px-8 py-10"> | ||
| <div className="flex flex-col gap-4"> | ||
| <div className="comet-title-s text-nowrap text-foreground-secondary"> | ||
| Integrate Opik | ||
| </div> | ||
| <div className="comet-body-s text-muted-slate"> | ||
| A step by step guide for adding Opik into your existing | ||
| application. Includes detailed examples. | ||
| </div> | ||
| <div> | ||
| <Link | ||
| to="/$workspaceName/quickstart" | ||
| params={{ workspaceName }} | ||
| search={{ from: "get-started" }} | ||
| > | ||
| <Button> | ||
| To the Quickstart guide | ||
| <SquareArrowOutUpRight className="ml-2 size-4" /> | ||
| </Button> | ||
| </Link> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="flex min-w-[180px] flex-row flex-wrap content-start items-center gap-3 self-center"> | ||
| {LOGO_IMAGES.map((url) => { | ||
| return <img className="size-[50px]" key={url} src={url} />; | ||
| })} | ||
| </div> | ||
| </div> | ||
|
|
||
| {apiKey && ( | ||
| <div className="flex flex-1 flex-col justify-between gap-5 rounded-md border bg-white px-8 py-10"> | ||
| <div className="flex flex-col gap-4"> | ||
| <div className="comet-title-s text-nowrap text-foreground-secondary"> | ||
| Copy your API key | ||
| </div> | ||
| <div className="comet-body-s text-muted-slate"> | ||
| API keys are used to send traces to the Opik platform. | ||
| </div> | ||
| </div> | ||
|
|
||
| <ApiKeyInput apiKey={apiKey} /> | ||
| </div> | ||
| )} | ||
| </div> | ||
|
|
||
| <div className="flex flex-col gap-5"> | ||
| <div className="comet-body-accented">Explore demo project</div> | ||
|
|
||
| <Link | ||
| className="flex cursor-pointer flex-row justify-between rounded-md border bg-white lg:w-[65%]" | ||
| to="/$workspaceName/projects" | ||
| params={{ workspaceName }} | ||
| target="_blank" | ||
| > | ||
| <img | ||
| className="min-w-[340px] object-cover" | ||
| src={demoProjectImageUrl} | ||
| /> | ||
| <div className="flex flex-col justify-between px-8 py-10"> | ||
| <div className="flex flex-col gap-4"> | ||
| <div className="comet-title-s text-foreground-secondary"> | ||
| SQL query generation | ||
| </div> | ||
| <div className="comet-body-s text-muted-slate"> | ||
| Perform a text to SQL query generation using LangChain. The | ||
| example uses the Chinook database of a music store, with | ||
| both employee, customer and invoice data. | ||
| </div> | ||
| </div> | ||
| <div className="comet-body-s flex flex-row items-center justify-end text-[#5155F5]"> | ||
| Explore project <MoveRight className="ml-2 size-4" /> | ||
| </div> | ||
| </div> | ||
| </Link> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default GetStarted; |
8 changes: 2 additions & 6 deletions
8
apps/opik-frontend/src/components/pages/GetStartedPage/GetStartedPage.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,18 +1,14 @@ | ||
| import useAppStore from "@/store/AppStore"; | ||
| import usePluginsStore from "@/store/PluginsStore"; | ||
| import { Navigate } from "@tanstack/react-router"; | ||
| import GetStarted from "@/components/pages/GetStartedPage/GetStarted"; | ||
|
|
||
| const GetStartedPage = () => { | ||
| const workspaceName = useAppStore((state) => state.activeWorkspaceName); | ||
| const GetStartedPage = usePluginsStore((state) => state.GetStartedPage); | ||
|
|
||
| if (GetStartedPage) { | ||
| return <GetStartedPage />; | ||
| } | ||
|
|
||
| return ( | ||
| <Navigate to={"/$workspaceName/projects"} params={{ workspaceName }} /> | ||
| ); | ||
| return <GetStarted userName="User" />; | ||
| }; | ||
|
|
||
| export default GetStartedPage; |
Oops, something went wrong.