From 389e121477a3b738250913aec090c55f81c5902f Mon Sep 17 00:00:00 2001 From: Sarmad Qadri Date: Tue, 9 Jan 2024 16:08:37 -0500 Subject: [PATCH] Styling changes for Gradio Workbook Plus publish script for test-pypi --- python/pyproject.toml | 4 +- .../editor/client/src/LocalEditor.tsx | 570 ++++++++++++------ .../src/components/ParametersRenderer.tsx | 1 + .../src/components/prompt/ModelSelector.tsx | 2 +- .../src/components/prompt/PromptName.tsx | 1 + .../PromptInputSchemaRenderer.tsx | 1 + .../editor/server/static/asset-manifest.json | 8 +- .../server/static/images/aiconfigLogo.png | Bin 0 -> 2899 bytes .../aiconfig/editor/server/static/index.html | 2 +- .../static/static/js/787.d5fa4d18.chunk.js | 2 - .../static/js/787.d5fa4d18.chunk.js.map | 1 - .../server/static/static/js/main.612f69d0.js | 3 - .../static/js/main.612f69d0.js.LICENSE.txt | 39 -- .../static/static/js/main.612f69d0.js.map | 1 - .../server/static/static/js/main.7d3460b8.js | 3 + .../static/js/main.7d3460b8.js.LICENSE.txt | 88 +++ .../static/static/js/main.7d3460b8.js.map | 1 + python/testpypi-publish.sh | 27 + 18 files changed, 515 insertions(+), 239 deletions(-) create mode 100644 python/src/aiconfig/editor/server/static/images/aiconfigLogo.png delete mode 100644 python/src/aiconfig/editor/server/static/static/js/787.d5fa4d18.chunk.js delete mode 100644 python/src/aiconfig/editor/server/static/static/js/787.d5fa4d18.chunk.js.map delete mode 100644 python/src/aiconfig/editor/server/static/static/js/main.612f69d0.js delete mode 100644 python/src/aiconfig/editor/server/static/static/js/main.612f69d0.js.LICENSE.txt delete mode 100644 python/src/aiconfig/editor/server/static/static/js/main.612f69d0.js.map create mode 100644 python/src/aiconfig/editor/server/static/static/js/main.7d3460b8.js create mode 100644 python/src/aiconfig/editor/server/static/static/js/main.7d3460b8.js.LICENSE.txt create mode 100644 python/src/aiconfig/editor/server/static/static/js/main.7d3460b8.js.map create mode 100755 python/testpypi-publish.sh diff --git a/python/pyproject.toml b/python/pyproject.toml index c17dfea9b..d36abb4c9 100644 --- a/python/pyproject.toml +++ b/python/pyproject.toml @@ -2,8 +2,8 @@ requires = ["setuptools", "wheel"] [project] -name = "python-aiconfig" -version = "1.1.9" +name = "python-aiconfig-test" +version = "1.1.25" authors = [ { name="Sarmad Qadri", email="sarmad@lastmileai.dev" }, ] diff --git a/python/src/aiconfig/editor/client/src/LocalEditor.tsx b/python/src/aiconfig/editor/client/src/LocalEditor.tsx index 40a48171c..f3a1c1bff 100644 --- a/python/src/aiconfig/editor/client/src/LocalEditor.tsx +++ b/python/src/aiconfig/editor/client/src/LocalEditor.tsx @@ -4,7 +4,13 @@ import AIConfigEditor, { RunPromptStreamErrorCallback, RunPromptStreamErrorEvent, } from "./components/AIConfigEditor"; -import { Flex, Loader, MantineProvider, Image } from "@mantine/core"; +import { + Flex, + Loader, + MantineProvider, + Image, + MantineThemeOverride, +} from "@mantine/core"; import { AIConfig, InferenceSettings, @@ -207,194 +213,390 @@ export default function Editor() { ] ); - return ( -
- ({ + ".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", + border: "none", + borderRadius: "4px", + padding: "4px", + margin: "0px", + backgroundColor: "transparent", + }, + }, + ".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", + }, + }, + ".mantine-InputWrapper-label": { + display: "none", + }, + }, + ".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", + }, + }, + textarea: { + 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", + }, + ".runPromptButton": { + background: "#ff1cf7", + color: "white", + borderRadius: "0", + height: "auto", + "&:hover": { + background: "#ff46f8", + }, + }, + ".actionTabsPanel": { + width: "400px", + }, + ".logo": { + maxWidth: "80rem", + margin: "0 auto", + padding: "32px 0 0 32px", + display: "flex", + justifyContent: "space-between", + alignItems: "center", + }, - defaultGradient: { - from: "pink", - to: "pink", - deg: 45, + ".parametersContainer": { + maxWidth: "1250px", + maxHeight: "-webkit-fill-available", + margin: "16px auto", + padding: "0", + backgroundColor: "rgba(226,232,255,.1)", + borderRadius: "4px", + border: "1px solid rgba(226,232,255,.1) !important", + button: { + ":hover": { + backgroundColor: "rgba(226,232,255,.1)", + }, + }, + input: { + border: "1px solid rgba(226,232,255,.1)", + backgroundColor: "#060c21", + borderRadius: "4px", + ":focus": { + outline: "solid 1px #ff1cf7 !important", + outlineOffset: "-1px", }, - // local editor theme - globalStyles: () => ({ - ".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", - border: "none", - borderRadius: "4px", - padding: "4px", - margin: "0px", - backgroundColor: "transparent", - }, - }, - ".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", - }, - }, - ".mantine-InputWrapper-label": { - display: "none", - }, - }, - ".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", - }, - }, - textarea: { - 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", - }, - ".runPromptButton": { - background: "#ff1cf7", - color: "white", - borderRadius: "0", - height: "auto", - "&:hover": { - background: "#ff46f8", - }, - }, - ".actionTabsPanel": { - width: "400px", - }, - ".logo": { - maxWidth: "80rem", - margin: "0 auto", - padding: "32px 0 0 32px", - display: "flex", - justifyContent: "space-between", - alignItems: "center", - }, + }, + textarea: { + border: "1px solid rgba(226,232,255,.1)", + backgroundColor: "#060c21", + borderRadius: "4px", + ":focus": { + outline: "solid 1px #ff1cf7 !important", + outlineOffset: "-1px", + }, + }, + }, + ".addParameterButton": { + position: "sticky", + left: "0", + bottom: "0", + margin: "16px 0 0 0", + background: "#ff1cf7", + "&:hover": { + background: "#ff46f8", + }, + }, + ".mantine-Slider-thumb": { + border: "0.25rem solid #ff1cf7", + backgroundColor: "white", + }, + ".mantine-Slider-bar": { + backgroundColor: "#ff1cf7", + }, + ".mantine-Tabs-tab[data-active]": { + borderBottom: "solid 1px #ff1cf7", + ":hover": { + borderBottom: "solid 1px #ff1cf7", + }, + }, + }), + }; + + const gradioTheme: MantineThemeOverride = { + //colorScheme: "dark", - ".parametersContainer": { - maxWidth: "1250px", - maxHeight: "-webkit-fill-available", - margin: "16px auto", - padding: "0", - backgroundColor: "rgba(226,232,255,.1)", - borderRadius: "4px", - border: "1px solid rgba(226,232,255,.1) !important", - button: { - ":hover": { - backgroundColor: "rgba(226,232,255,.1)", - }, - }, - input: { - border: "1px solid rgba(226,232,255,.1)", - backgroundColor: "#060c21", - borderRadius: "4px", - ":focus": { - outline: "solid 1px #ff1cf7 !important", - outlineOffset: "-1px", - }, - }, - textarea: { - border: "1px solid rgba(226,232,255,.1)", - backgroundColor: "#060c21", - borderRadius: "4px", - ":focus": { - outline: "solid 1px #ff1cf7 !important", - outlineOffset: "-1px", - }, - }, - }, - ".addParameterButton": { - position: "sticky", - left: "0", - bottom: "0", - margin: "16px 0 0 0", - background: "#ff1cf7", - "&:hover": { - background: "#ff46f8", - }, - }, - ".mantine-Slider-thumb": { - border: "0.25rem solid #ff1cf7", - backgroundColor: "white", - }, - ".mantine-Slider-bar": { - backgroundColor: "#ff1cf7", - }, - ".mantine-Tabs-tab[data-active]": { - borderBottom: "solid 1px #ff1cf7", - ":hover": { - borderBottom: "solid 1px #ff1cf7", - }, - }, - }), - }} - > -
- AiConfig Logo -
+ 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: "#E88949", + to: "#E85921", + deg: 90, + }, + // local editor theme + globalStyles: (theme) => ({ + ".editorBackground": { + background: theme.colorScheme === "light" ? "white" : "#0b0f19", + margin: "0 auto", + minHeight: "100vh", + }, + ".monoFont": { + fontFamily: + "sf mono, ui-monospace, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace", + }, + ".ghost": { + input: { + maxHeight: "16px", + fontFamily: + "sf mono, ui-monospace, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace", + borderRadius: "8px", + margin: "8px 0px 0px 0px", + backgroundColor: theme.colorScheme === "light" ? "white" : "#384152", + boxShadow: "0px 1px 4px 0px rgba(0, 0, 0, 0.05) inset", + ":focus": { + outline: "solid 1px #E85921 !important", + outlineOffset: "-1px", + }, + }, + }, + ".cellStyle": { + border: "1px solid", + borderColor: theme.colorScheme === "light" ? "#E5E7EB" : "#384152", + background: theme.colorScheme === "light" ? "white" : "#1f2938", + flex: 1, + borderTopRightRadius: "0px", + borderBottomRightRadius: "0px", + borderTopLeftRadius: "8px", + borderBottomLeftRadius: "8px", + ":hover": { + background: + theme.colorScheme === "light" + ? "rgba(249, 250, 251, 0.5) !important" + : "#1f2938", + }, + textarea: { + border: "1px solid !important", + borderColor: + theme.colorScheme === "light" + ? "#E5E7EB !important" + : "#384152 !important", + borderRadius: "8px", + margin: "8px 0px 0px 0px", + boxShadow: "0px 1px 4px 0px rgba(0, 0, 0, 0.05) inset", + backgroundColor: theme.colorScheme === "light" ? "white" : "#384152", + ":focus": { + outline: "solid 1px #E85921 !important", + outlineOffset: "-1px", + }, + }, + ".mantine-InputWrapper-label": { + display: "none", + }, + }, + ".sidePanel": { + border: "1px solid", + borderColor: theme.colorScheme === "light" ? "#E5E7EB" : "#384152", + borderLeft: "none", + borderTopRightRadius: "8px", + borderBottomRightRadius: "8px", + background: + theme.colorScheme === "light" + ? "linear-gradient(90deg, #F6F6F6, #FFFFFF)" + : "transparent", + input: { + border: "1px solid #E5E7EB !important", + boxShadow: "0px 1px 4px 0px rgba(0, 0, 0, 0.05) inset", + backgroundColor: "#ffffff", + ":focus": { + outline: "solid 1px #E85921 !important", + outlineOffset: "-1px", + }, + }, + textarea: { + 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", + }, + ".runPromptButton": { + borderRadius: "8px", + border: "1px solid #FDD7AD", + background: "linear-gradient(180deg, #FEE1C0 0%, #FCC792 100%)", + boxShadow: "0px 1px 4px 0px rgba(0, 0, 0, 0.05)", + margin: "4px", + height: "auto", + color: "#E85921", + path: { + color: "#E85921", + }, + ":hover": { + background: "linear-gradient(180deg, #FEE1C0 0%, #FF9E3D 100%)", + }, + }, + ".actionTabsPanel": { + width: "400px", + }, + ".logo": { + maxWidth: "80rem", + margin: "0 auto", + padding: "32px 0 0 32px", + display: "flex", + justifyContent: "space-between", + alignItems: "center", + }, + + ".parametersContainer": { + maxWidth: "1250px", + maxHeight: "-webkit-fill-available", + margin: "16px auto", + padding: "0", + backgroundColor: theme.colorScheme === "light" ? "#F9FAFB" : "#1f2938", + borderRadius: "8px", + border: "1px solid", + borderColor: theme.colorScheme === "light" ? "#E5E7EB" : "#384152", + button: { + ":hover": { + backgroundColor: + theme.colorScheme === "light" ? "#F0F1F1" : "transparent", + }, + }, + input: { + border: "1px solid !important", + borderColor: + theme.colorScheme === "light" + ? "#E5E7EB !important" + : "#384152 !important", + boxShadow: "0px 1px 4px 0px rgba(0, 0, 0, 0.05) inset", + borderRadius: "8px", + backgroundColor: theme.colorScheme === "light" ? "white" : "#384152", + ":focus": { + outline: "solid 1px #E85921 !important", + outlineOffset: "-1px", + }, + }, + textarea: { + border: "1px solid !important", + borderColor: + theme.colorScheme === "light" + ? "#E5E7EB !important" + : "#384152 !important", + boxShadow: "0px 1px 4px 0px rgba(0, 0, 0, 0.05) inset", + borderRadius: "8px", + backgroundColor: theme.colorScheme === "light" ? "white" : "#384152", + ":focus": { + outline: "solid 1px #E85921 !important", + outlineOffset: "-1px", + }, + }, + ".addParameterButton": { + position: "sticky", + left: "0", + bottom: "0", + margin: "16px 0 0 0", + background: "linear-gradient(180deg, #FEE1C0 0%, #FCC792 100%)", + path: { + color: "#E85921", + }, + }, + }, + + ".mantine-Slider-thumb": { + border: "0.25rem solid #E85921", + }, + ".mantine-Slider-bar": { + backgroundColor: "#E85921", + }, + ".mantine-Tabs-tab[data-active]": { + borderBottom: "solid 1px #E85921", + ":hover": { + borderBottom: "solid 1px #E85921", + }, + }, + }), + }; + + return ( +
+ {!aiconfig ? ( diff --git a/python/src/aiconfig/editor/client/src/components/ParametersRenderer.tsx b/python/src/aiconfig/editor/client/src/components/ParametersRenderer.tsx index 067e11c2d..853121837 100644 --- a/python/src/aiconfig/editor/client/src/components/ParametersRenderer.tsx +++ b/python/src/aiconfig/editor/client/src/components/ParametersRenderer.tsx @@ -105,6 +105,7 @@ const ParameterInput = memo(function ParameterInput(props: { value={parameterValueString} autosize size="xs" + minRows={3} maxRows={5} onChange={(event) => { setParameterValueString(event.target.value); diff --git a/python/src/aiconfig/editor/client/src/components/prompt/ModelSelector.tsx b/python/src/aiconfig/editor/client/src/components/prompt/ModelSelector.tsx index 143f392b6..db0708ca9 100644 --- a/python/src/aiconfig/editor/client/src/components/prompt/ModelSelector.tsx +++ b/python/src/aiconfig/editor/client/src/components/prompt/ModelSelector.tsx @@ -41,7 +41,7 @@ export default memo(function ModelSelector({ placeholder="Select model" limit={100} className="ghost" - variant="unstyled" + variant="Model" maxDropdownHeight={200} rightSection={ selectedModel ? ( diff --git a/python/src/aiconfig/editor/client/src/components/prompt/PromptName.tsx b/python/src/aiconfig/editor/client/src/components/prompt/PromptName.tsx index 38095148a..dc0389405 100644 --- a/python/src/aiconfig/editor/client/src/components/prompt/PromptName.tsx +++ b/python/src/aiconfig/editor/client/src/components/prompt/PromptName.tsx @@ -26,6 +26,7 @@ export default memo(function PromptName({ promptId, name, onUpdate }: Props) { className="ghost" variant="unstyled" placeholder="Name this prompt" + label="Prompt Name" onChange={onChange} error={ getState().prompts.some( diff --git a/python/src/aiconfig/editor/client/src/components/prompt/prompt_input/schema_renderer/PromptInputSchemaRenderer.tsx b/python/src/aiconfig/editor/client/src/components/prompt/prompt_input/schema_renderer/PromptInputSchemaRenderer.tsx index ca1b32ef6..e259795fd 100644 --- a/python/src/aiconfig/editor/client/src/components/prompt/prompt_input/schema_renderer/PromptInputSchemaRenderer.tsx +++ b/python/src/aiconfig/editor/client/src/components/prompt/prompt_input/schema_renderer/PromptInputSchemaRenderer.tsx @@ -72,6 +72,7 @@ export default memo(function PromptInputSchemaRenderer(props: Props) { return (