diff --git a/app/client/api.ts b/app/client/api.ts index 6f30002f9..06ab41c6c 100644 --- a/app/client/api.ts +++ b/app/client/api.ts @@ -51,6 +51,8 @@ export interface LLMConfig { presence_penalty?: number; frequency_penalty?: number; size?: DalleRequestPayload["size"]; + quality?: DalleRequestPayload["quality"]; + style?: DalleRequestPayload["style"]; } export interface ChatOptions { diff --git a/app/client/platforms/openai.ts b/app/client/platforms/openai.ts index 404f8c0f9..ee1b0dc28 100644 --- a/app/client/platforms/openai.ts +++ b/app/client/platforms/openai.ts @@ -18,7 +18,7 @@ import { base64Image2Blob, } from "@/app/utils/chat"; import { cloudflareAIGatewayUrl } from "@/app/utils/cloudflare"; -import { DalleSize } from "@/app/typing"; +import { DalleSize, DalleQuality, DalleStyle } from "@/app/typing"; import { ChatOptions, @@ -71,6 +71,8 @@ export interface DalleRequestPayload { response_format: "url" | "b64_json"; n: number; size: DalleSize; + quality: DalleQuality; + style: DalleStyle; } export class ChatGPTApi implements LLMApi { @@ -163,6 +165,8 @@ export class ChatGPTApi implements LLMApi { response_format: "b64_json", // using b64_json, and save image in CacheStorage n: 1, size: options.config?.size ?? "1024x1024", + quality: options.config?.quality ?? "standard", + style: options.config?.style ?? "vivid", }; } else { const visionModel = isVisionModel(options.config.model); diff --git a/app/components/button.tsx b/app/components/button.tsx index c6039acc2..87b4abd30 100644 --- a/app/components/button.tsx +++ b/app/components/button.tsx @@ -18,6 +18,7 @@ export function IconButton(props: { tabIndex?: number; autoFocus?: boolean; style?: CSSProperties; + aria?: string; }) { return ( ); diff --git a/app/components/chat.tsx b/app/components/chat.tsx index 7083b65f4..b508a09d4 100644 --- a/app/components/chat.tsx +++ b/app/components/chat.tsx @@ -38,6 +38,8 @@ import BottomIcon from "../icons/bottom.svg"; import StopIcon from "../icons/pause.svg"; import RobotIcon from "../icons/robot.svg"; import SizeIcon from "../icons/size.svg"; +import QualityIcon from "../icons/hd.svg"; +import StyleIcon from "../icons/palette.svg"; import PluginIcon from "../icons/plugin.svg"; // import UploadIcon from "../icons/upload.svg"; @@ -72,7 +74,7 @@ import { uploadImage as uploadImageRemote } from "@/app/utils/chat"; import dynamic from "next/dynamic"; import { ChatControllerPool } from "../client/controller"; -import { DalleSize } from "../typing"; +import { DalleSize, DalleQuality, DalleStyle } from "../typing"; import { Prompt, usePromptStore } from "../store/prompt"; import Locale from "../locales"; @@ -509,9 +511,17 @@ export function ChatActions(props: { const current_day_token = localStorage.getItem("current_day_token") ?? ""; const [showSizeSelector, setShowSizeSelector] = useState(false); + const [showQualitySelector, setShowQualitySelector] = useState(false); + const [showStyleSelector, setShowStyleSelector] = useState(false); const dalle3Sizes: DalleSize[] = ["1024x1024", "1792x1024", "1024x1792"]; + const dalle3Qualitys: DalleQuality[] = ["standard", "hd"]; + const dalle3Styles: DalleStyle[] = ["vivid", "natural"]; const currentSize = chatStore.currentSession().mask.modelConfig?.size ?? "1024x1024"; + const currentQuality = + chatStore.currentSession().mask.modelConfig?.quality ?? "standard"; + const currentStyle = + chatStore.currentSession().mask.modelConfig?.style ?? "vivid"; useEffect(() => { const show = isVisionModel(currentModel); @@ -686,6 +696,60 @@ export function ChatActions(props: { /> )} + {isDalle3(currentModel) && ( + setShowQualitySelector(true)} + text={currentQuality} + icon={} + /> + )} + + {showQualitySelector && ( + ({ + title: m, + value: m, + }))} + onClose={() => setShowQualitySelector(false)} + onSelection={(q) => { + if (q.length === 0) return; + const quality = q[0]; + chatStore.updateCurrentSession((session) => { + session.mask.modelConfig.quality = quality; + }); + showToast(quality); + }} + /> + )} + + {isDalle3(currentModel) && ( + setShowStyleSelector(true)} + text={currentStyle} + icon={} + /> + )} + + {showStyleSelector && ( + ({ + title: m, + value: m, + }))} + onClose={() => setShowStyleSelector(false)} + onSelection={(s) => { + if (s.length === 0) return; + const style = s[0]; + chatStore.updateCurrentSession((session) => { + session.mask.modelConfig.style = style; + }); + showToast(style); + }} + /> + )} + setShowPluginSelector(true)} text={Locale.Plugin.Name} @@ -1436,6 +1500,8 @@ function _Chat() { } bordered + title={Locale.Chat.EditMessage.Title} + aria={Locale.Chat.EditMessage.Title} onClick={() => setIsEditingMessage(true)} /> @@ -1455,6 +1521,8 @@ function _Chat() { : } bordered + title={Locale.Chat.Actions.FullScreen} + aria={Locale.Chat.Actions.FullScreen} onClick={() => { config.update( (config) => (config.tightBorder = !config.tightBorder), @@ -1506,6 +1574,7 @@ function _Chat() {
} + aria={Locale.Chat.Actions.Edit} onClick={async () => { const newMessage = await showPrompt( Locale.Chat.Actions.Edit, diff --git a/app/components/input-range.tsx b/app/components/input-range.tsx index a8ee9532b..08756e2c8 100644 --- a/app/components/input-range.tsx +++ b/app/components/input-range.tsx @@ -9,6 +9,7 @@ interface InputRangeProps { min: string; max: string; step: string; + aria: string; } export function InputRange({ @@ -19,11 +20,13 @@ export function InputRange({ min, max, step, + aria, }: InputRangeProps) { return (
{title || value} setShowPicker(false)} >
setShowPicker(true)} style={{ cursor: "pointer" }} > @@ -139,6 +141,7 @@ export function MaskConfig(props: { @@ -153,6 +156,7 @@ export function MaskConfig(props: { subTitle={Locale.Mask.Config.HideContext.SubTitle} > { @@ -169,6 +173,7 @@ export function MaskConfig(props: { subTitle={Locale.Mask.Config.Share.SubTitle} > } text={Locale.Mask.Config.Share.Action} onClick={copyMaskLink} @@ -182,6 +187,7 @@ export function MaskConfig(props: { subTitle={Locale.Mask.Config.Sync.SubTitle} > { diff --git a/app/components/model-config.tsx b/app/components/model-config.tsx index 346fd3a71..6ce25f664 100644 --- a/app/components/model-config.tsx +++ b/app/components/model-config.tsx @@ -17,6 +17,7 @@ export function ModelConfigList(props: { <> @@ -159,6 +166,7 @@ export function ModelConfigList(props: { subTitle={Locale.Settings.InputTemplate.SubTitle} > @@ -175,6 +183,7 @@ export function ModelConfigList(props: { subTitle={Locale.Settings.HistoryCount.SubTitle} > diff --git a/app/components/sd/sd-panel.tsx b/app/components/sd/sd-panel.tsx index c27fbd54e..a71e560dd 100644 --- a/app/components/sd/sd-panel.tsx +++ b/app/components/sd/sd-panel.tsx @@ -192,6 +192,7 @@ export function ControlParam(props: { required={item.required} > : } bordered onClick={() => { diff --git a/app/components/settings.tsx b/app/components/settings.tsx index 08f5a106d..894d2decc 100644 --- a/app/components/settings.tsx +++ b/app/components/settings.tsx @@ -246,6 +246,7 @@ function DangerItems() { subTitle={Locale.Settings.Danger.Reset.SubTitle} > { if (await showConfirm(Locale.Settings.Danger.Reset.Confirm)) { @@ -260,6 +261,7 @@ function DangerItems() { subTitle={Locale.Settings.Danger.Clear.SubTitle} > { if (await showConfirm(Locale.Settings.Danger.Clear.Confirm)) { @@ -513,6 +515,7 @@ function SyncItems() { {/*>*/} {/*
*/} {/* }*/} {/* text={Locale.UI.Config}*/} {/* onClick={() => {*/} @@ -543,6 +546,7 @@ function SyncItems() { >
} text={Locale.UI.Export} onClick={() => { @@ -550,6 +554,7 @@ function SyncItems() { }} /> } text={Locale.UI.Import} onClick={() => { @@ -687,6 +692,7 @@ export function Settings() { subTitle={Locale.Settings.Access.CustomEndpoint.SubTitle} > @@ -706,6 +712,7 @@ export function Settings() { subTitle={Locale.Settings.Access.OpenAI.Endpoint.SubTitle} >
} onClick={() => navigate(Path.Home)} bordered @@ -1267,6 +1304,8 @@ export function Settings() { open={showEmojiPicker} >
{ setShowEmojiPicker(!showEmojiPicker); @@ -1304,6 +1343,7 @@ export function Settings() { {/**/} {/* {*/} {/* updateConfig(*/} @@ -1322,6 +1362,7 @@ export function Settings() { */} {/* */} @@ -1408,6 +1453,7 @@ export function Settings() { {/* subTitle={Locale.Settings.SendPreviewBubble.SubTitle}*/} {/*>*/} {/* */} @@ -1428,6 +1474,7 @@ export function Settings() { {/* subTitle={Locale.Settings.Mask.Splash.SubTitle}*/} {/* >*/} {/* */} @@ -1445,6 +1492,7 @@ export function Settings() { {/* subTitle={Locale.Settings.Mask.Builtin.SubTitle}*/} {/* >*/} {/* */} @@ -1463,6 +1511,7 @@ export function Settings() { subTitle={Locale.Settings.Prompt.Disable.SubTitle} > @@ -1482,6 +1531,7 @@ export function Settings() { )} > } text={Locale.Settings.Prompt.Edit} onClick={() => setShowPromptModal(true)} @@ -1496,29 +1546,30 @@ export function Settings() { {/* <>*/} {/* {useCustomConfigComponent}*/} - {/* {accessStore.useCustomConfig && (*/} - {/* <>*/} - {/* */} - {/* {*/} - {/* accessStore.update(*/} - {/* (access) =>*/} - {/* (access.provider = e.target*/} - {/* .value as ServiceProvider),*/} - {/* );*/} - {/* }}*/} - {/* >*/} - {/* {Object.entries(ServiceProvider).map(([k, v]) => (*/} - {/* */} - {/* ))}*/} - {/* */} - {/* */} + {/*{accessStore.useCustomConfig && (*/} + {/* <>*/} + {/* */} + {/* {*/} + {/* accessStore.update(*/} + {/* (access) =>*/} + {/* (access.provider = e.target*/} + {/* .value as ServiceProvider),*/} + {/* );*/} + {/* }}*/} + {/* >*/} + {/* {Object.entries(ServiceProvider).map(([k, v]) => (*/} + {/* */} + {/* ))}*/} + {/* */} + {/* */} {/* {openAIConfigComponent}*/} {/* {azureConfigComponent}*/} @@ -1567,6 +1618,7 @@ export function Settings() { {/* subTitle={Locale.Settings.Access.CustomModel.SubTitle}*/} {/* >*/} {/*
- } shadow /> + } + shadow + />
{/**/} - {/* } shadow />*/} + {/* }*/} + {/* shadow*/} + {/* />*/} {/**/} + { if (await showConfirm(Locale.Settings.Danger.Clear.Confirm)) { diff --git a/app/components/ui-lib.tsx b/app/components/ui-lib.tsx index d8bef4c2f..1bc00d9bc 100644 --- a/app/components/ui-lib.tsx +++ b/app/components/ui-lib.tsx @@ -282,9 +282,10 @@ export function Input(props: InputProps) { ); } -export function PasswordInput(props: HTMLProps) { +export function PasswordInput( + props: HTMLProps & { aria?: string }, +) { const [visible, setVisible] = useState(false); - function changeVisibility() { setVisible(!visible); } @@ -292,6 +293,7 @@ export function PasswordInput(props: HTMLProps) { return (
: } onClick={changeVisibility} className={"password-eye"} diff --git a/app/constant.ts b/app/constant.ts index 368a50fb5..c74cdbb22 100644 --- a/app/constant.ts +++ b/app/constant.ts @@ -245,6 +245,7 @@ export const KnowledgeCutOffDate: Record = { "gpt-4-turbo-2024-04-09": "2023-12", "gpt-4-turbo-preview": "2023-12", "gpt-4o-2024-05-13": "2023-10", + "gpt-4o-2024-08-06": "2023-10", "gpt-4o-mini": "2023-10", "gpt-4o-mini-2024-07-18": "2023-10", "gpt-4-vision-preview": "2023-04", @@ -266,6 +267,7 @@ const openaiModels = [ "gpt-4-turbo-preview", "gpt-4o", "gpt-4o-2024-05-13", + "gpt-4o-2024-08-06", "gpt-4o-mini", "gpt-4o-mini-2024-07-18", "gpt-4-vision-preview", diff --git a/app/icons/hd.svg b/app/icons/hd.svg new file mode 100644 index 000000000..baae66af0 --- /dev/null +++ b/app/icons/hd.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/app/icons/palette.svg b/app/icons/palette.svg new file mode 100644 index 000000000..474d0e217 --- /dev/null +++ b/app/icons/palette.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/app/locales/cn.ts b/app/locales/cn.ts index f1d873c38..4abaf16b7 100644 --- a/app/locales/cn.ts +++ b/app/locales/cn.ts @@ -82,6 +82,7 @@ const cn = { PinToastAction: "查看", Delete: "删除", Edit: "编辑", + FullScreen: "全屏", }, Commands: { new: "新建聊天", @@ -172,6 +173,7 @@ const cn = { Settings: { Title: "设置", SubTitle: "所有设置选项", + ShowPassword: "显示密码", Danger: { Reset: { diff --git a/app/locales/en.ts b/app/locales/en.ts index 5fa9cee84..d1dd61a70 100644 --- a/app/locales/en.ts +++ b/app/locales/en.ts @@ -84,6 +84,7 @@ const en: LocaleType = { PinToastAction: "View", Delete: "Delete", Edit: "Edit", + FullScreen: "FullScreen", }, Commands: { new: "Start a new chat", @@ -175,6 +176,7 @@ const en: LocaleType = { Settings: { Title: "Settings", SubTitle: "All Settings", + ShowPassword: "ShowPassword", Danger: { Reset: { Title: "Reset All Settings", diff --git a/app/store/config.ts b/app/store/config.ts index db9d30e0b..e7b40a914 100644 --- a/app/store/config.ts +++ b/app/store/config.ts @@ -1,5 +1,5 @@ import { LLMModel } from "../client/api"; -import { DalleSize } from "../typing"; +import { DalleSize, DalleQuality, DalleStyle } from "../typing"; import { getClientConfig } from "../config/client"; import { DEFAULT_INPUT_TEMPLATE, @@ -68,6 +68,8 @@ export const DEFAULT_CONFIG = { enableInjectSystemPrompts: true, template: config?.template ?? DEFAULT_INPUT_TEMPLATE, size: "1024x1024" as DalleSize, + quality: "standard" as DalleQuality, + style: "vivid" as DalleStyle, }, }; diff --git a/app/typing.ts b/app/typing.ts index 863203581..0336be75d 100644 --- a/app/typing.ts +++ b/app/typing.ts @@ -9,3 +9,5 @@ export interface RequestMessage { } export type DalleSize = "1024x1024" | "1792x1024" | "1024x1792"; +export type DalleQuality = "standard" | "hd"; +export type DalleStyle = "vivid" | "natural";