initial framework for platform AI
This commit is contained in:
Martin McKeaveney
parent
e2a355b4b1
commit
1a57e37d38
3 changed files with 159 additions and 0 deletions
|
|
@ -0,0 +1,81 @@
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
ModalContent,
|
||||||
|
Label,
|
||||||
|
Input,
|
||||||
|
Select,
|
||||||
|
Toggle,
|
||||||
|
Dropzone,
|
||||||
|
Body,
|
||||||
|
notifications,
|
||||||
|
} from "@budibase/bbui"
|
||||||
|
import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte"
|
||||||
|
import { plugins } from "stores/portal"
|
||||||
|
import { PluginSource } from "constants"
|
||||||
|
|
||||||
|
const options = [
|
||||||
|
"OpenAI",
|
||||||
|
"Anthropic",
|
||||||
|
"Together AI",
|
||||||
|
"Azure Open AI",
|
||||||
|
"Custom"
|
||||||
|
]
|
||||||
|
|
||||||
|
let source = PluginSource.GITHUB
|
||||||
|
let dynamicValues = {}
|
||||||
|
|
||||||
|
let name
|
||||||
|
let baseUrl
|
||||||
|
let apiKey
|
||||||
|
let active
|
||||||
|
let isDefault
|
||||||
|
|
||||||
|
let validation
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<ModalContent
|
||||||
|
confirmText={"Save"}
|
||||||
|
onConfirm={() => {}}
|
||||||
|
disabled={!validation}
|
||||||
|
size="M"
|
||||||
|
title="Custom AI Configuration"
|
||||||
|
>
|
||||||
|
<div class="form-row">
|
||||||
|
<Label size="M">Provider</Label>
|
||||||
|
<Select
|
||||||
|
placeholder={null}
|
||||||
|
bind:value={source}
|
||||||
|
options={options}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="form-row">
|
||||||
|
<Label size="M">Model</Label>
|
||||||
|
<Select
|
||||||
|
placeholder={null}
|
||||||
|
bind:value={source}
|
||||||
|
options={Object.values(PluginSource)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="form-row">
|
||||||
|
<Label size="M">Name</Label>
|
||||||
|
<Input placeholder={"Test 1"} bind:value={name} />
|
||||||
|
</div>
|
||||||
|
<div class="form-row">
|
||||||
|
<Label size="M">Base URL</Label>
|
||||||
|
<Input placeholder={"www.google.com"} bind:value={baseUrl} />
|
||||||
|
</div>
|
||||||
|
<div class="form-row">
|
||||||
|
<Label size="M">API Key</Label>
|
||||||
|
<Input bind:value={apiKey} />
|
||||||
|
</div>
|
||||||
|
<Toggle text="Active" bind:value={active} />
|
||||||
|
<Toggle text="Set as default" bind:value={isDefault} />
|
||||||
|
</ModalContent>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.form-row {
|
||||||
|
display: grid;
|
||||||
|
grid-gap: var(--spacing-s);
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,74 @@
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Layout,
|
||||||
|
Heading,
|
||||||
|
Body,
|
||||||
|
Helpers,
|
||||||
|
Divider,
|
||||||
|
notifications,
|
||||||
|
Modal,
|
||||||
|
ModalContent,
|
||||||
|
} from "@budibase/bbui"
|
||||||
|
import { auth, admin } from "stores/portal"
|
||||||
|
import { redirect } from "@roxi/routify"
|
||||||
|
import { API } from "api"
|
||||||
|
import AIConfigModal from "./ConfigModal.svelte"
|
||||||
|
import { onMount } from "svelte"
|
||||||
|
import { sdk } from "@budibase/shared-core"
|
||||||
|
|
||||||
|
let diagnosticInfo = ""
|
||||||
|
let modal
|
||||||
|
|
||||||
|
// async function fetchSystemDebugInfo() {
|
||||||
|
// const diagnostics = await API.fetchSystemDebugInfo()
|
||||||
|
// diagnosticInfo = {
|
||||||
|
// browser: {
|
||||||
|
// language: navigator.language || navigator.userLanguage,
|
||||||
|
// userAgent: navigator.userAgent,
|
||||||
|
// platform: navigator.platform,
|
||||||
|
// vendor: navigator.vendor,
|
||||||
|
// },
|
||||||
|
// server: diagnostics,
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
// const copyToClipboard = async () => {
|
||||||
|
// await Helpers.copyToClipboard(JSON.stringify(diagnosticInfo, undefined, 2))
|
||||||
|
// notifications.success("Copied")
|
||||||
|
// }
|
||||||
|
|
||||||
|
onMount(async () => {
|
||||||
|
// await fetchSystemDebugInfo()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||||
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||||
|
|
||||||
|
<Modal bind:this={modal}>
|
||||||
|
<AIConfigModal />
|
||||||
|
</Modal>
|
||||||
|
<Layout noPadding>
|
||||||
|
<Layout gap="XS" noPadding>
|
||||||
|
<Heading size="M">AI</Heading>
|
||||||
|
<Body>Configure your AI settings within this section:</Body>
|
||||||
|
</Layout>
|
||||||
|
<Divider />
|
||||||
|
<Layout noPadding>
|
||||||
|
<div class="config-heading">
|
||||||
|
<Heading size="S">AI Configurations</Heading>
|
||||||
|
<Button size="S" cta on:click={modal.show}>Add configuration</Button>
|
||||||
|
</div>
|
||||||
|
<Body size="S">Use the following interface to select your preferred AI configuration.</Body>
|
||||||
|
<Body size="S">Select your AI Model:</Body>
|
||||||
|
</Layout>
|
||||||
|
</Layout>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.config-heading {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -45,6 +45,10 @@ export const menu = derived([admin, auth], ([$admin, $auth]) => {
|
||||||
title: "Auth",
|
title: "Auth",
|
||||||
href: "/builder/portal/settings/auth",
|
href: "/builder/portal/settings/auth",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: "AI",
|
||||||
|
href: "/builder/portal/settings/ai",
|
||||||
|
},
|
||||||
{
|
{
|
||||||
title: "Email",
|
title: "Email",
|
||||||
href: "/builder/portal/settings/email",
|
href: "/builder/portal/settings/email",
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue