alihan/OpenPipe-llm
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

more robust sidebar layout

Browse Source
This commit is contained in:
Kyle Corbitt
2023-06-28 10:37:37 -07:00
parent dc357d7611
commit 15e4fe7e5a
5 changed files with 97 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/OutputsTable/NewScenarioButton.tsx
View File

@@ -1,5 +1,4 @@
import { Button, type ButtonProps, Fade, HStack, Spinner, Icon } from "@chakra-ui/react"; import { Button, type ButtonProps, HStack, Spinner, Icon } from "@chakra-ui/react";
import { useState } from "react";
import { BsPlus } from "react-icons/bs"; import { BsPlus } from "react-icons/bs";
import { api } from "~/utils/api"; import { api } from "~/utils/api";
import { useExperiment, useHandledAsyncCallback } from "~/utils/hooks"; import { useExperiment, useHandledAsyncCallback } from "~/utils/hooks";

3
src/components/PublicPlaygroundWarning.tsx
View File

@@ -3,7 +3,6 @@ import { BsExclamationTriangleFill } from "react-icons/bs";
import { env } from "~/env.mjs"; import { env } from "~/env.mjs";
export default function PublicPlaygroundWarning() { export default function PublicPlaygroundWarning() {
console.log(env);
if (!env.NEXT_PUBLIC_IS_PUBLIC_PLAYGROUND) return null; if (!env.NEXT_PUBLIC_IS_PUBLIC_PLAYGROUND) return null;
return ( return (
@@ -12,7 +11,7 @@ export default function PublicPlaygroundWarning() {
<Text> <Text>
Warning: this is a public playground. Anyone can see, edit or delete your experiments. For Warning: this is a public playground. Anyone can see, edit or delete your experiments. For
private use,{" "} private use,{" "}
<Link textDecor="underline" href="https://github.com/corbt/prompt-lab"> <Link textDecor="underline" href="https://github.com/corbt/prompt-lab" target="_blank">
run a local copy run a local copy
</Link> </Link>
. .

150
src/components/nav/AppShell.tsx
View File

@@ -1,6 +1,5 @@
import { import {
Box, Box,
Flex,
Heading, Heading,
VStack, VStack,
Icon, Icon,
@@ -8,13 +7,16 @@ import {
type BoxProps, type BoxProps,
forwardRef, forwardRef,
Image, Image,
Link,
Grid,
GridItem,
} from "@chakra-ui/react"; } from "@chakra-ui/react";
import Head from "next/head"; import Head from "next/head";
import { api } from "~/utils/api"; import { api } from "~/utils/api";
import { BsPlusSquare } from "react-icons/bs"; import { BsGithub, BsPlusSquare, BsTwitter } from "react-icons/bs";
import { RiFlaskLine } from "react-icons/ri"; import { RiFlaskLine } from "react-icons/ri";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import Link from "next/link"; import NextLink from "next/link";
import { useHandledAsyncCallback } from "~/utils/hooks"; import { useHandledAsyncCallback } from "~/utils/hooks";
import PublicPlaygroundWarning from "../PublicPlaygroundWarning"; import PublicPlaygroundWarning from "../PublicPlaygroundWarning";
@@ -38,7 +40,9 @@ const ExperimentLink = forwardRef<BoxProps & { active: boolean | undefined }, "a
ExperimentLink.displayName = "ExperimentLink"; ExperimentLink.displayName = "ExperimentLink";
export default function AppShell(props: { children: React.ReactNode; title?: string }) { const Separator = () => <Box h="1px" bgColor="gray.300" />;
const NavSidebar = () => {
const experiments = api.experiments.list.useQuery(); const experiments = api.experiments.list.useQuery();
const router = useRouter(); const router = useRouter();
const utils = api.useContext(); const utils = api.useContext();
@@ -52,62 +56,88 @@ export default function AppShell(props: { children: React.ReactNode; title?: str
}, [createMutation, router]); }, [createMutation, router]);
return ( return (
<VStack align="stretch" spacing={0} h="100vh"> <VStack align="stretch" bgColor="gray.100" p={2} pb={0} height="100%">
<PublicPlaygroundWarning /> <HStack spacing={0}>
<Flex flex={1}> <Image src="/flask2.svg" alt="" w={6} h={6} />
<Head> <Heading size="md" p={2}>
<title>{props.title ? `${props.title} | Prompt Lab` : "Prompt Lab"}</title> Prompt Lab
</Head> </Heading>
<Box bgColor="gray.100" flexShrink={0} width="220px" p={2}> </HStack>
<VStack align="stretch"> <Separator />
<HStack spacing={0}> <VStack spacing={0} align="flex-start" overflowY="auto" flex={1}>
<Image <Heading size="xs" textAlign="center" p={2}>
src="/flask2.svg" Experiments
alt="" </Heading>
w={6} <VStack spacing={1} align="stretch" flex={1}>
h={6} <ExperimentLink
// filter="drop-shadow(0 0 2px rgb(0 0 0 / 0.4))" onClick={createExperiment}
/> active={false}
<Heading size="md" p={2}> display="flex"
Prompt Lab alignItems="center"
</Heading> >
</HStack> <Icon as={BsPlusSquare} boxSize={4} mr={2} />
<Box h="1px" bgColor="gray.400" /> New Experiment
<HStack align="center" spacing={2} p={2} pb={0}> </ExperimentLink>
<Heading size="xs" textAlign="center">
Experiments {experiments?.data?.map((exp) => (
</Heading> <ExperimentLink
</HStack> key={exp.id}
<VStack spacing={1} align="stretch"> as={NextLink}
{experiments?.data?.map((exp) => ( active={exp.id === currentId}
<ExperimentLink href={{ pathname: "/experiments/[id]", query: { id: exp.id } }}
key={exp.id} display="flex"
as={Link} alignItems="center"
active={exp.id === currentId} >
href={{ pathname: "/experiments/[id]", query: { id: exp.id } }} <Icon as={RiFlaskLine} boxSize={4} mr={2} />
display="flex" {exp.label}
alignItems="center" </ExperimentLink>
> ))}
<Icon as={RiFlaskLine} boxSize={4} mr={2} /> </VStack>
{exp.label} </VStack>
</ExperimentLink>
))} <Separator />
<ExperimentLink <HStack align="center" justify="center" spacing={4} p={2}>
onClick={createExperiment} <Link
active={false} href="https://github.com/corbt/prompt-lab"
display="flex" target="_blank"
alignItems="center" color="gray.500"
> _hover={{ color: "gray.800" }}
<Icon as={BsPlusSquare} boxSize={4} mr={2} /> >
New Experiment <Icon as={BsGithub} boxSize={8} />
</ExperimentLink> </Link>
</VStack> <Link
</VStack> href="https://twitter.com/corbtt"
</Box> target="_blank"
<Box flex={1} overflowX="auto" overflowY="auto" h="100vh"> color="gray.500"
{props.children} _hover={{ color: "gray.800" }}
</Box> >
</Flex> <Icon as={BsTwitter} boxSize={8} />
</Link>
</HStack>
</VStack> </VStack>
); );
};
export default function AppShell(props: { children: React.ReactNode; title?: string }) {
return (
<Grid
h="100vh"
templateColumns="220px minmax(0, 1fr)"
templateRows="max-content 1fr"
templateAreas={'"warning warning"\n"sidebar main"'}
>
<Head>
<title>{props.title ? `${props.title} | Prompt Lab` : "Prompt Lab"}</title>
</Head>
<GridItem area="warning">
<PublicPlaygroundWarning />
</GridItem>
<GridItem area="sidebar" overflow="auto">
<NavSidebar />
</GridItem>
<GridItem area="main" overflowY="auto">
{props.children}
</GridItem>
</Grid>
);
} }

17
src/server/api/autogen.ts
View File

@@ -104,23 +104,6 @@ export const autogenerateScenarioValues = async (
return acc; return acc;
}, {} as Record<string, { type: "string" }>); }, {} as Record<string, { type: "string" }>);
console.log({
model: "gpt-3.5-turbo-0613",
messages,
functions: [
{
name: "add_scenario",
parameters: {
type: "object",
properties: variableProperties,
},
},
],
function_call: { name: "add_scenario" },
temperature: 0.5,
});
try { try {
const completion = await openai.createChatCompletion({ const completion = await openai.createChatCompletion({
model: "gpt-3.5-turbo-0613", model: "gpt-3.5-turbo-0613",

16
src/server/auth.ts
View File

@@ -1,12 +1,6 @@
import { PrismaAdapter } from "@next-auth/prisma-adapter"; import { PrismaAdapter } from "@next-auth/prisma-adapter";
import { type GetServerSidePropsContext } from "next"; import { type GetServerSidePropsContext } from "next";
import { import { getServerSession, type NextAuthOptions, type DefaultSession } from "next-auth";
getServerSession,
type NextAuthOptions,
type DefaultSession,
} from "next-auth";
import DiscordProvider from "next-auth/providers/discord";
import { env } from "~/env.mjs";
import { prisma } from "~/server/db"; import { prisma } from "~/server/db";
/** /**
@@ -47,10 +41,10 @@ export const authOptions: NextAuthOptions = {
}, },
adapter: PrismaAdapter(prisma), adapter: PrismaAdapter(prisma),
providers: [ providers: [
DiscordProvider({ // DiscordProvider({
clientId: env.DISCORD_CLIENT_ID, // clientId: env.DISCORD_CLIENT_ID,
clientSecret: env.DISCORD_CLIENT_SECRET, // clientSecret: env.DISCORD_CLIENT_SECRET,
}), // }),
/** /**
* ...add more providers here. * ...add more providers here.
* *