gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-12-18 23:02:31 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3772 from vidluther/master

Browse Source 
Add support for GPT-4o (Omni) and switch to GPT 4 Turbo GA
This commit is contained in:
Caleb Owens 2024-05-16 18:17:43 +01:00 committed by GitHub
commit 800e608208
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 6 additions and 307 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/src/lib/ai/types.ts
View File

@ -7,7 +7,8 @@ export enum ModelKind {
export enum OpenAIModelName {
GPT35Turbo = 'gpt-3.5-turbo',
GPT4 = 'gpt-4',
GPT4Turbo = 'gpt-4-turbo-preview'
GPT4Turbo = 'gpt-4-turbo',
GPT4o = 'gpt-4o'
}
export enum AnthropicModelName {

306
app/src/lib/components/AISettings.svelte
View File

@ -1,306 +0,0 @@
<script lang="ts">
import InfoMessage from './InfoMessage.svelte';
import Select from './Select.svelte';
import SelectItem from './SelectItem.svelte';
import Spacer from './Spacer.svelte';
import TextBox from './TextBox.svelte';
import WelcomeSigninAction from './WelcomeSigninAction.svelte';
import { AIService, GitAIConfigKey, KeyOption } from '$lib/ai/service';
import { OpenAIModelName, AnthropicModelName, ModelKind } from '$lib/ai/types';
import { GitConfigService } from '$lib/backend/gitConfigService';
import RadioButton from '$lib/components/RadioButton.svelte';
import SectionCard from '$lib/components/SectionCard.svelte';
import { UserService } from '$lib/stores/user';
import { getContext } from '$lib/utils/context';
import { onMount, tick } from 'svelte';
const gitConfigService = getContext(GitConfigService);
const aiService = getContext(AIService);
const userService = getContext(UserService);
const user = userService.user;
let initialized = false;
let modelKind: ModelKind | undefined;
let openAIKeyOption: KeyOption | undefined;
let anthropicKeyOption: KeyOption | undefined;
let openAIKey: string | undefined;
let openAIModelName: OpenAIModelName | undefined;
let anthropicKey: string | undefined;
let anthropicModelName: AnthropicModelName | undefined;
let diffLengthLimit: number | undefined;
function setConfiguration(key: GitAIConfigKey, value: string | undefined) {
if (!initialized) return;
gitConfigService.set(key, value || '');
}
$: setConfiguration(GitAIConfigKey.ModelProvider, modelKind);
$: setConfiguration(GitAIConfigKey.OpenAIKeyOption, openAIKeyOption);
$: setConfiguration(GitAIConfigKey.OpenAIModelName, openAIModelName);
$: setConfiguration(GitAIConfigKey.OpenAIKey, openAIKey);
$: setConfiguration(GitAIConfigKey.AnthropicKeyOption, anthropicKeyOption);
$: setConfiguration(GitAIConfigKey.AnthropicModelName, anthropicModelName);
$: setConfiguration(GitAIConfigKey.AnthropicKey, anthropicKey);
$: setConfiguration(GitAIConfigKey.DiffLengthLimit, diffLengthLimit?.toString());
onMount(async () => {
modelKind = await aiService.getModelKind();
openAIKeyOption = await aiService.getOpenAIKeyOption();
openAIModelName = await aiService.getOpenAIModleName();
openAIKey = await aiService.getOpenAIKey();
anthropicKeyOption = await aiService.getAnthropicKeyOption();
anthropicModelName = await aiService.getAnthropicModelName();
anthropicKey = await aiService.getAnthropicKey();
diffLengthLimit = await aiService.getDiffLengthLimit();
// Ensure reactive declarations have finished running before we set initialized to true
await tick();
initialized = true;
});
$: if (form) form.modelKind.value = modelKind;
const keyOptions = [
{
name: 'Use GitButler API',
value: KeyOption.ButlerAPI
},
{
name: 'Your own key',
value: KeyOption.BringYourOwn
}
];
const openAIModelOptions = [
{
name: 'GPT 3.5 Turbo',
value: OpenAIModelName.GPT35Turbo
},
{
name: 'GPT 4',
value: OpenAIModelName.GPT4
},
{
name: 'GPT 4 Turbo',
value: OpenAIModelName.GPT4Turbo
}
];
const anthropicModelOptions = [
{
name: 'Sonnet',
value: AnthropicModelName.Sonnet
},
{
name: 'Opus',
value: AnthropicModelName.Opus
},
{
name: 'Haiku',
value: AnthropicModelName.Haiku
}
];
let form: HTMLFormElement;
function onFormChange(form: HTMLFormElement) {
const formData = new FormData(form);
modelKind = formData.get('modelKind') as ModelKind;
}
</script>
<!-- <div class="ai-settings-wrap"> -->
<p class="text-base-body-13 ai-settings__text">
GitButler supports multiple providers for its AI powered features. We currently support models
from OpenAI and Anthropic either proxied through the GitButler API, or in a bring your own key
configuration.
</p>
{#if !$user}
<InfoMessage>
<svelte:fragment slot="title">You must be logged in to use the GitButler API</svelte:fragment>
</InfoMessage>
{/if}
<form class="git-radio" bind:this={form} on:change={(e) => onFormChange(e.currentTarget)}>
<SectionCard
roundedBottom={false}
orientation="row"
labelFor="open-ai"
bottomBorder={modelKind != ModelKind.OpenAI}
>
<svelte:fragment slot="title">Open AI</svelte:fragment>
<svelte:fragment slot="actions">
<RadioButton name="modelKind" id="open-ai" value={ModelKind.OpenAI} />
</svelte:fragment>
</SectionCard>
{#if modelKind == ModelKind.OpenAI}
<SectionCard
hasTopRadius={false}
roundedTop={false}
roundedBottom={false}
orientation="row"
topDivider
>
<div class="inputs-group">
<Select
items={keyOptions}
bind:selectedItemId={openAIKeyOption}
itemId="value"
labelId="name"
label="Do you want to provide your own key?"
>
<SelectItem slot="template" let:item>
{item.name}
</SelectItem>
</Select>
{#if openAIKeyOption == KeyOption.ButlerAPI}
<InfoMessage filled outlined={false} style="pop" icon="ai">
<svelte:fragment slot="title">
GitButler uses OpenAI API for commit messages and branch names
</svelte:fragment>
</InfoMessage>
{/if}
{#if openAIKeyOption == KeyOption.BringYourOwn}
<TextBox label="API Key" bind:value={openAIKey} required placeholder="sk-..." />
<Select
items={openAIModelOptions}
bind:selectedItemId={openAIModelName}
itemId="value"
labelId="name"
label="Model Version"
>
<SelectItem slot="template" let:item>
{item.name}
</SelectItem>
</Select>
{:else if !$user}
<WelcomeSigninAction prompt="A user is required to make use of the GitButler API" />
{/if}
</div>
</SectionCard>
{/if}
<SectionCard
roundedTop={false}
roundedBottom={false}
orientation="row"
labelFor="anthropic"
bottomBorder={modelKind != ModelKind.Anthropic}
>
<svelte:fragment slot="title">Anthropic</svelte:fragment>
<svelte:fragment slot="actions">
<RadioButton name="modelKind" id="anthropic" value={ModelKind.Anthropic} />
</svelte:fragment>
</SectionCard>
{#if modelKind == ModelKind.Anthropic}
<SectionCard
hasTopRadius={false}
roundedTop={false}
roundedBottom={false}
orientation="row"
topDivider
>
<div class="inputs-group">
<Select
items={keyOptions}
bind:selectedItemId={anthropicKeyOption}
itemId="value"
labelId="name"
label="Do you want to provide your own key?"
>
<SelectItem slot="template" let:item>
{item.name}
</SelectItem>
</Select>
{#if anthropicKeyOption == KeyOption.ButlerAPI}
<InfoMessage filled outlined={false} style="pop" icon="ai">
<svelte:fragment slot="title">
GitButler uses OpenAI API for commit messages and branch names
</svelte:fragment>
</InfoMessage>
{/if}
{#if anthropicKeyOption == KeyOption.BringYourOwn}
<TextBox
label="API Key"
bind:value={anthropicKey}
required
placeholder="sk-ant-api03-..."
/>
<Select
items={anthropicModelOptions}
bind:selectedItemId={anthropicModelName}
itemId="value"
labelId="name"
label="Model Version"
>
<SelectItem slot="template" let:item>
{item.name}
</SelectItem>
</Select>
{:else if !$user}
<WelcomeSigninAction prompt="A user is required to make use of the GitButler API" />
{/if}
</div>
</SectionCard>
{/if}
<SectionCard roundedTop={false} orientation="row" disabled={true}>
<svelte:fragment slot="title">Custom Endpoint</svelte:fragment>
<svelte:fragment slot="actions">
<RadioButton disabled={true} name="modelKind" />
</svelte:fragment>
<svelte:fragment slot="caption">Support for custom AI endpoints is coming soon!</svelte:fragment
>
</SectionCard>
</form>
<Spacer />
<SectionCard orientation="row">
<svelte:fragment slot="title">Amount of provided context</svelte:fragment>
<svelte:fragment slot="caption">
How many characters of your git diff should be provided to AI
</svelte:fragment>
<svelte:fragment slot="actions">
<TextBox
type="number"
width={80}
textAlign="center"
value={diffLengthLimit?.toString()}
minVal={100}
on:input={(e) => {
diffLengthLimit = parseInt(e.detail);
}}
placeholder="5000"
/>
</svelte:fragment>
</SectionCard>
<style>
.ai-settings__text {
color: var(--clr-text-2);
margin-bottom: var(--size-12);
}
.inputs-group {
display: flex;
flex-direction: column;
gap: var(--size-16);
width: 100%;
}
</style>

4
app/src/routes/settings/ai/+page.svelte
View File

@ -100,6 +100,10 @@
{
name: 'GPT 4 Turbo',
value: OpenAIModelName.GPT4Turbo
},
{
name: 'GPT 4 Omni',
value: OpenAIModelName.GPT4o
}
];