Spaces:
Paused
Paused
File size: 3,284 Bytes
a7634ef |
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 98 99 100 101 102 103 104 105 106 107 108 109 110 |
import { usePubSub } from "create-pubsub/react";
import {
disableAiResponseSettingPubSub,
summarizeLinksSettingPubSub,
useLargerModelSettingPubSub,
disableWebGpuUsageSettingPubSub,
} from "../modules/pubSub";
import { Tooltip } from "react-tooltip";
import { isWebGPUAvailable } from "../modules/webGpu";
import type { ChangeEventHandler } from "react";
export function SettingsForm() {
const [disableAiResponse, setDisableAiResponse] = usePubSub(
disableAiResponseSettingPubSub,
);
const [summarizeLinks, setSummarizeLinks] = usePubSub(
summarizeLinksSettingPubSub,
);
const [useLargerModel, setUseLargerModel] = usePubSub(
useLargerModelSettingPubSub,
);
const [disableWebGpuUsage, setDisableWebGpuUsage] = usePubSub(
disableWebGpuUsageSettingPubSub,
);
return (
<div>
<div
style={{
textAlign: "center",
fontSize: "16px",
fontWeight: "bolder",
margin: "10px",
}}
>
Settings
</div>
<div>
<SettingCheckbox
label="Use a larger AI model"
checked={useLargerModel}
onChange={(event) => setUseLargerModel(event.target.checked)}
tooltipId="use-large-model-setting-tooltip"
tooltipContent="Generates better responses, but takes longer to load"
/>
</div>
<div>
<SettingCheckbox
label="Summarize links"
checked={summarizeLinks}
onChange={(event) => setSummarizeLinks(event.target.checked)}
tooltipId="summarize-links-setting-tooltip"
tooltipContent="Provides a short overview for each of the links from the web search results"
/>
</div>
{isWebGPUAvailable && (
<div>
<SettingCheckbox
label="Disable WebGPU usage"
checked={disableWebGpuUsage}
onChange={(event) => setDisableWebGpuUsage(event.target.checked)}
tooltipId="use-large-model-setting-tooltip"
tooltipContent="Disables the WebGPU and run smaller AI models only using the CPU"
/>
</div>
)}
<div>
<SettingCheckbox
label="Disable AI response"
checked={disableAiResponse}
onChange={(event) => setDisableAiResponse(event.target.checked)}
tooltipId="disable-ai-setting-tooltip"
tooltipContent="Disables the AI response, in case you only want to see the links from the web search results"
/>
</div>
</div>
);
}
function SettingCheckbox(props: {
label: string;
checked?: boolean;
onChange?: ChangeEventHandler<HTMLInputElement>;
tooltipId?: string;
tooltipContent?: string;
}) {
return (
<>
<Tooltip
id={props.tooltipId}
place="top-start"
variant="info"
opacity="1"
style={{ maxWidth: "90vw" }}
/>
<label
data-tooltip-id={props.tooltipId}
data-tooltip-content={props.tooltipContent}
>
<input
type="checkbox"
checked={props.checked}
onChange={props.onChange}
/>
{props.label}
</label>
</>
);
}
|