File size: 3,497 Bytes
1813a37 a417977 1813a37 a417977 1813a37 a417977 1813a37 a417977 1813a37 a417977 1813a37 a417977 1813a37 a417977 1813a37 a417977 1813a37 a417977 1813a37 a417977 1813a37 a417977 1813a37 a417977 1813a37 1982de5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
import {Input} from "../input";
import {X, Link, Key} from "preact-feather";
import {Button} from "../button";
import {useContext} from "preact/hooks";
import {Slider} from "../slider";
import {FormGroup} from "../form";
import {settingsCtx, Settings as SettingsType} from "@/contexts/settings";
import {routeCtx} from "@/contexts/route";
import {topicsCtx} from "@/contexts/topics";
import style from "./style.module.scss";
import {logCtx} from "@/contexts/log";
import {Radio} from "@/components/radio";
export function Settings() {
const [, , routeActions] = useContext(routeCtx);
const [settings, setSettings, settingsActions] = useContext(settingsCtx);
const [, , topicsActions] = useContext(topicsCtx);
const [log, , logActions] = useContext(logCtx);
const resetApp = () => {
settingsActions.reset();
topicsActions.reset();
logActions.reset();
}
return <div>
<form>
<FormGroup>
<label htmlFor="api">Type d'API</label>
<Radio<{[key in SettingsType["apiType"]]: string}>
name="apiType"
choices={{"ooba": "Oobabooga", "beam": "Beam Cloud"}}
value={settings.apiType}
onChoose={(choice) => setSettings({...settings, apiType: choice})}
/>
</FormGroup>
<FormGroup>
<label htmlFor="api">Url d'API</label>
<Input
type="text"
placeholder={settings.apiType === "beam" ? "Ex: https://jvcgpt-d692de2-v1.app.beam.cloud/stream" : "Ex: https://ouruq7zepnehg2-5000.proxy.runpod.net/"}
icon={Link}
value={settings.apiURL}
onChange={(v) => setSettings({...settings, apiURL: v as string})}
/>
</FormGroup>
<FormGroup>
<label htmlFor="api">Clé d'API</label>
<Input
type="password"
placeholder="Ex: zyCH5svVE-qXv_J34ZLGc0vKQaGbYf_7YTbl2VKaAIqgwa_-qCeA=="
icon={Key}
value={settings.apiKey}
onChange={(v) => setSettings({...settings, apiKey: v as string})}
/>
</FormGroup>
<FormGroup>
<label for="temperature">Temperature</label>
<Slider
name="temperature"
value={settings.temperature}
onChange={(v) => setSettings({...settings, temperature: v})}
min={0.1}
max={2}
step={0.1}
/>
</FormGroup>
<div>
<Button
onClick={resetApp}
secondary={true}
title="Tout réinitialiser"
>
Tout réinitialiser
</Button>
</div>
<br/>
<div>
<Button onClick={routeActions.goBack}>
Retour
</Button>
</div>
</form>
<hr/>
<div>
<h2>Log</h2>
<pre className={style.log}>
{log}
</pre>
<div>
<Button onClick={logActions.reset} title="Vider le log">
<X/>
</Button>
</div>
</div>
</div>
} |