[AiConfig Branded Editor]

I styled the local editor to match ai-config brand colors. This is just iteration 1...more to come
lastmile-ai · Jan 5, 2024 · 29d15f9 · 29d15f9
1 parent fd8c5c9
commit 29d15f9
Show file tree

Hide file tree

Showing 13 changed files with 193 additions and 57 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/cookbooks/Getting-Started/travel.aiconfig.json b/cookbooks/Getting-Started/travel.aiconfig.json
@@ -1,8 +1,10 @@
 {
   "name": "NYC Trip Planner",
-  "description": "Intrepid explorer with ChatGPT and AIConfig",
   "schema_version": "latest",
   "metadata": {
+    "parameters": {
+      "": ""
+    },
     "models": {
       "gpt-3.5-turbo": {
         "model": "gpt-3.5-turbo",
@@ -17,10 +19,38 @@
     },
     "default_model": "gpt-3.5-turbo"
   },
+  "description": "Intrepid explorer with ChatGPT and AIConfig",
   "prompts": [
     {
-      "name": "get_activities",
-      "input": "Tell me 10 fun attractions to do in NYC."
+      "name": "diff_name",
+      "input": "hello world \n\ni can now keep on typing and see it all\n\n\n\nerg\nerger\nger\nger\ngerger\n",
+      "metadata": {
+        "model": {
+          "name": "gpt-4-0613",
+          "settings": {
+            "frequency_penalty": -1.2,
+            "functions": [],
+            "n": 1,
+            "presence_penalty": -0.8,
+            "stop": [],
+            "stream": false,
+            "temperature": 1,
+            "top_p": 0.4,
+            "user": ""
+          }
+        },
+        "parameters": {}
+      },
+      "outputs": []
+    },
+    {
+      "name": "prompt_3",
+      "input": "",
+      "metadata": {
+        "model": "GPT-4",
+        "parameters": {}
+      },
+      "outputs": []
     },
     {
       "name": "gen_itinerary",
@@ -30,9 +60,9 @@
         "parameters": {
           "order_by": "geographic location"
         }
-      }
+      },
+      "outputs": []
     }
-  ]
-}
-
-
+  ],
+  "$schema": "https://json.schemastore.org/aiconfig-1.0"
+}
diff --git a/python/src/aiconfig/editor/client/public/images/aiconfigLogo.png b/python/src/aiconfig/editor/client/public/images/aiconfigLogo.png
diff --git a/python/src/aiconfig/editor/client/src/Editor.tsx b/python/src/aiconfig/editor/client/src/Editor.tsx
@@ -141,8 +141,115 @@ export default function Editor() {
   );
 
   return (
-    <div>
-      <MantineProvider withGlobalStyles withNormalizeCSS>
+    <div className="editorBackground">
+      <MantineProvider
+        withGlobalStyles
+        withNormalizeCSS
+        theme={{
+          colorScheme: "dark",
+
+          colors: {
+            // Add your color
+            deepBlue: ["#E9EDFC", "#C1CCF6", "#99ABF0" /* ... */],
+            // or replace default theme color
+            // gray: ["#E9EDFC", "#C1CCF6", "#99ABF0" /* ... */],
+            blue: ["#E9EDFC", "#C1CCF6", "#99ABF0" /* ... */],
+          },
+
+          shadows: {
+            md: "1px 1px 3px rgba(0, 0, 0, .25)",
+            xl: "5px 5px 3px rgba(0, 0, 0, .25)",
+          },
+
+          headings: {
+            fontFamily:
+              "system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Arial, sans-serif",
+            sizes: {
+              h1: { fontSize: "2rem" },
+            },
+          },
+
+          defaultGradient: {
+            from: "pink",
+            to: "pink",
+            deg: 45,
+          },
+
+          globalStyles: (theme) => ({
+            ".editorBackground": {
+              background:
+                "radial-gradient(ellipse at top,#08122d,#030712),radial-gradient(ellipse at bottom,#030712,#030712)",
+              margin: "0 auto",
+              minHeight: "100vh",
+            },
+            ".monoFont": {
+              fontFamily:
+                "sf mono, ui-monospace, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+            },
+            ".ghost": {
+              border: "none",
+              borderRadius: "4px",
+              padding: "4px",
+              margin: "0px",
+              backgroundColor: "transparent",
+              ":hover": {
+                backgroundColor: "rgba(226,232,255,.1)",
+              },
+              input: {
+                maxHeight: "16px",
+                fontFamily:
+                  "sf mono, ui-monospace, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+              },
+            },
+            ".cellStyle": {
+              border: "1px solid rgba(226,232,255,.1) !important",
+              background: "rgb(12 21 57 / 10%)",
+              flex: 1,
+              borderTopRightRadius: "0px",
+              borderBottomRightRadius: "0px",
+              ":hover": {
+                background: "rgba(255, 255, 255, 0.03) !important",
+              },
+              textarea: {
+                border: "1px solid rgba(226,232,255,.1)",
+                backgroundColor: "#060c21",
+                ":focus": {
+                  outline: "solid 1px #ff1cf7 !important",
+                  outlineOffset: "-1px",
+                },
+              },
+            },
+            ".sidePanel": {
+              border: "1px solid rgba(226,232,255,.1)",
+              borderLeft: "none",
+              borderTopRightRadius: "4px",
+              borderBottomRightRadius: "4px",
+              input: {
+                border: "1px solid rgba(226,232,255,.1)",
+                backgroundColor: "#060c21",
+                ":focus": {
+                  outline: "solid 1px #ff1cf7 !important",
+                  outlineOffset: "-1px",
+                },
+              },
+            },
+            ".divider": {
+              borderTopWidth: "1px",
+              borderTopColor: "rgba(226,232,255,.1)",
+              marginBottom: "0.5em",
+            },
+            ".primaryPinkButton": {
+              background: "#ff1cf7",
+              color: "white",
+              borderRadius: "0",
+              height: "auto",
+            },
+            ".actionTabsPanel": {
+              width: "400px",
+            },
+          }),
+        }}
+      >
         {!aiconfig ? (
           <Flex justify="center" mt="xl">
             <Loader size="xl" />

diff --git a/python/src/aiconfig/editor/client/src/components/EditorContainer.tsx b/python/src/aiconfig/editor/client/src/components/EditorContainer.tsx
@@ -2,6 +2,7 @@ import PromptContainer from "./prompt/PromptContainer";
 import {
   Container,
   Button,
+  Image,
   createStyles,
   Stack,
   Flex,
@@ -103,6 +104,14 @@ const useStyles = createStyles((theme) => ({
     },
     paddingBottom: 400,
   },
+
+  toolbar: {
+    width: "100%",
+    margin: "0 0 0 16px",
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
 }));
 
 export default function EditorContainer({
@@ -676,12 +685,20 @@ export default function EditorContainer({
           <Tooltip
             label={isDirty ? "Save changes to config" : "No unsaved changes"}
           >
-            <div>
+            <div className={classes.toolbar}>
+              <Image
+                withPlaceholder
+                maw={140}
+                src="images/aiconfigLogo.png"
+                alt="AiConfig Logo"
+              />
               <Button
                 leftIcon={<IconDeviceFloppy />}
                 loading={isSaving}
                 onClick={onSave}
                 disabled={!isDirty}
+                size="xs"
+                variant="gradient"
               >
                 Save
               </Button>

diff --git a/python/src/aiconfig/editor/client/src/components/prompt/ModelSelector.tsx b/python/src/aiconfig/editor/client/src/components/prompt/ModelSelector.tsx
@@ -40,12 +40,15 @@ export default memo(function ModelSelector({
     <Autocomplete
       placeholder="Select model"
       limit={100}
+      className="ghost"
+      variant="unstyled"
       maxDropdownHeight={200}
       rightSection={
         selectedModel ? (
           <Button
             size="xs"
             variant="subtle"
+            className="ghost"
             mr={10}
             onClick={() => {
               onSelectModel(undefined);

diff --git a/python/src/aiconfig/editor/client/src/components/prompt/PromptActionBar.tsx b/python/src/aiconfig/editor/client/src/components/prompt/PromptActionBar.tsx
@@ -66,7 +66,7 @@ export default memo(function PromptActionBar({
                 )}
               </Tabs.List>
 
-              <Tabs.Panel value="settings">
+              <Tabs.Panel value="settings" className="actionTabsPanel">
                 <ModelSettingsRenderer
                   settings={getModelSettings(prompt)}
                   schema={modelSettingsSchema}
@@ -79,7 +79,7 @@ export default memo(function PromptActionBar({
               </Tabs.Panel>
 
               {checkParametersSupported(prompt) && (
-                <Tabs.Panel value="parameters">
+                <Tabs.Panel value="parameters" className="actionTabsPanel">
                   <ParametersRenderer
                     initialValue={getPromptParameters(prompt)}
                     onUpdateParameters={onUpdateParameters}

diff --git a/python/src/aiconfig/editor/client/src/components/prompt/PromptContainer.tsx b/python/src/aiconfig/editor/client/src/components/prompt/PromptContainer.tsx
@@ -3,7 +3,7 @@ import PromptInputRenderer from "./prompt_input/PromptInputRenderer";
 import PromptOutputsRenderer from "./prompt_outputs/PromptOutputsRenderer";
 import { ClientPrompt } from "../../shared/types";
 import { getPromptSchema } from "../../utils/promptUtils";
-import { Flex, Card, createStyles } from "@mantine/core";
+import { Flex, Card } from "@mantine/core";
 import { PromptInput as AIConfigPromptInput, JSONObject } from "aiconfig";
 import { memo, useCallback } from "react";
 import PromptOutputBar from "./PromptOutputBar";
@@ -31,21 +31,6 @@ type Props = {
   defaultConfigModelName?: string;
 };
 
-const useStyles = createStyles((theme) => ({
-  promptInputCard: {
-    flex: 1,
-    borderRight: "0 !important",
-    borderBottomRightRadius: 0,
-    borderTopRightRadius: 0,
-  },
-  actionBar: {
-    border: `1px solid ${theme.colors.gray[3]}`,
-    borderRadius: "0.25em",
-    borderBottomLeftRadius: 0,
-    borderTopLeftRadius: 0,
-  },
-}));
-
 export default memo(function PromptContainer({
   prompt,
   getModels,
@@ -96,11 +81,9 @@ export default memo(function PromptContainer({
   const promptSchema = getPromptSchema(prompt, defaultConfigModelName);
   const inputSchema = promptSchema?.input;
 
-  const { classes } = useStyles();
-
   return (
     <Flex justify="space-between" w="100%">
-      <Card withBorder className={classes.promptInputCard}>
+      <Card withBorder className="cellStyle">
         <Flex direction="column">
           <Flex justify="space-between" mb="0.5em">
             <PromptName
@@ -124,7 +107,7 @@ export default memo(function PromptContainer({
           {prompt.outputs && <PromptOutputsRenderer outputs={prompt.outputs} />}
         </Flex>
       </Card>
-      <div className={classes.actionBar}>
+      <div className="sidePanel">
         <PromptActionBar
           prompt={prompt}
           promptSchema={promptSchema}

diff --git a/python/src/aiconfig/editor/client/src/components/prompt/PromptName.tsx b/python/src/aiconfig/editor/client/src/components/prompt/PromptName.tsx
@@ -23,6 +23,8 @@ export default memo(function PromptName({ promptId, name, onUpdate }: Props) {
   return (
     <TextInput
       value={nameInput}
+      className="ghost"
+      variant="unstyled"
       placeholder="Name this prompt"
       onChange={onChange}
       error={

diff --git a/python/src/aiconfig/editor/client/src/components/prompt/PromptOutputBar.tsx b/python/src/aiconfig/editor/client/src/components/prompt/PromptOutputBar.tsx
@@ -4,8 +4,10 @@ import { memo } from "react";
 export default memo(function PromptOutputBar() {
   return (
     <Flex direction="column" mt="0.5em">
-      <Divider size="sm" mt="0.5em" mb="0.5em" />
-      <Text color="dimmed">Output</Text>
+      <Divider size="sm" className="divider" />
+      <Text color="dimmed" size={"xs"} className="monoFont">
+        Output
+      </Text>
       {/* TODO: Add output metrics */}
     </Flex>
   );

diff --git a/python/src/aiconfig/editor/client/src/components/prompt/RunPromptButton.tsx b/python/src/aiconfig/editor/client/src/components/prompt/RunPromptButton.tsx
@@ -1,4 +1,4 @@
-import { Button, createStyles, Loader, Text } from "@mantine/core";
+import { Button, Loader, Text } from "@mantine/core";
 import { IconPlayerPlayFilled, IconPlayerStop } from "@tabler/icons-react";
 import { memo } from "react";
 
@@ -8,28 +8,19 @@ type Props = {
   size: "compact" | "full";
 };
 
-const useStyles = createStyles(() => ({
-  executeButton: {
-    borderBottomLeftRadius: 0,
-    borderTopLeftRadius: 0,
-    borderTopRightRadius: 0,
-  },
-}));
-
 export default memo(function RunPromptButton({
   runPrompt,
   size,
   isRunning = false,
 }: Props) {
-  const { classes } = useStyles();
   return (
     <Button
       onClick={runPrompt}
       disabled={isRunning}
       p="xs"
       size="xs"
       fullWidth={size === "full"}
-      className={classes.executeButton}
+      className="primaryPinkButton"
     >
       {isRunning ? (
         <div>