Merge branch 'feat/custom_ai_url' into 'main'

Enable custom ai server

See merge request !391

src/api/ygoAgent/create.ts

-import { useConfig } from "@/config";
-
 import { handleHttps } from "..";
-import { agentHeader } from "./util";
+import { agentHeader, getAgentServer } from "./util";
 
-const { agentServer } = useConfig();
 const API_PATH = "v0/duels";
 
 interface CreateResp {
@@ -14,7 +11,7 @@ interface CreateResp {
 export async function createDuel(): Promise<CreateResp | undefined> {
   const headers = agentHeader();
 
-  const resp = await fetch(`${agentServer}/${API_PATH}`, {
+  const resp = await fetch(`${getAgentServer()}/${API_PATH}`, {
     method: "POST",
     headers,
     redirect: "follow",

src/api/ygoAgent/delete.ts

-import { useConfig } from "@/config";
-
 import { handleHttps } from "..";
-import { agentHeader } from "./util";
-const { agentServer } = useConfig();
+import { agentHeader, getAgentServer } from "./util";
 const API_PATH = "/v0/duels";
 
 export async function deleteDuel(duelId: string): Promise<void | undefined> {
   const headers = agentHeader();
 
-  const apiPath = `${agentServer}/${API_PATH}/${duelId}`;
+  const apiPath = `${getAgentServer()}/${API_PATH}/${duelId}`;
 
   const resp = await fetch(apiPath, {
     method: "DELETE",

src/api/ygoAgent/predict.ts

-import { useConfig } from "@/config";
-
 import { handleHttps } from "..";
 import { Input, MsgResponse } from "./schema";
-import { agentHeader } from "./util";
+import { agentHeader, getAgentServer } from "./util";
 
-const { agentServer } = useConfig();
 const apiPath = (duelId: string) => `v0/duels/${duelId}/predict`;
 
 export interface PredictReq {
@@ -33,7 +30,7 @@ export async function predictDuel(
     "Content-Type": "application/json",
   };
 
-  const resp = await fetch(`${agentServer}/${apiPath(duelId)}`, {
+  const resp = await fetch(`${getAgentServer()}/${apiPath(duelId)}`, {
     method: "POST",
     headers,
     body: JSON.stringify(req),

src/api/ygoAgent/util.ts

+import { useConfig } from "@/config";
+import { settingStore } from "@/stores/settingStore";
+
+const { agentServer } = useConfig();
+
 export function agentHeader(): Headers {
   const myHeaders = new Headers();
   myHeaders.append("User-Agent", "Apifox/1.0.0 (https://apifox.com)");
 
   return myHeaders;
 }
+
+export function getAgentServer(): string {
+  return settingStore.ai.server ?? agentServer;
+}

src/stores/settingStore/ai.ts

+export interface AIConfig {
+  // custom AI model server
+  server?: string;
+}
+
+export const defaultAIConfig: AIConfig = {};

src/stores/settingStore/index.ts

@@ -3,6 +3,7 @@ import { pick } from "lodash-es";
 import { proxy, subscribe } from "valtio";
 
 import { type NeosStore } from "../shared";
+import { AIConfig, defaultAIConfig } from "./ai";
 import { AnimationConfig, defaultAnimationConfig } from "./animation";
 import { AudioConfig, defaultAudioConfig } from "./audio";
 
@@ -10,12 +11,13 @@ import { AudioConfig, defaultAudioConfig } from "./audio";
 const NEO_SETTING_CONFIG = "__neo_setting_config__";
 
 /** 设置项 */
-type SettingStoreConfig = Pick<SettingStore, "audio" | "animation">;
+type SettingStoreConfig = Pick<SettingStore, "audio" | "animation" | "ai">;
 
 /** 默认设置 */
 const defaultSettingConfig: SettingStoreConfig = {
   audio: defaultAudioConfig,
   animation: defaultAnimationConfig,
+  ai: defaultAIConfig,
 };
 
 /** 获取默认设置 */
@@ -28,6 +30,7 @@ function getDefaultSetting() {
       if (config.audio === undefined) config.audio = defaultAudioConfig;
       if (config.animation === undefined)
         config.animation = defaultAnimationConfig;
+      if (config.ai === undefined) config.ai = defaultAIConfig;
       return config;
     }
   }
@@ -44,6 +47,9 @@ class SettingStore implements NeosStore {
   /** Animation Configuration */
   animation: AnimationConfig = defaultSetting.animation;
 
+  /** AI Configuration */
+  ai: AIConfig = defaultSetting.ai;
+
   /** 保存音频设置 */
   saveAudioConfig(config: Partial<AudioConfig>): void {
     Object.assign(this.audio, config);
@@ -54,6 +60,11 @@ class SettingStore implements NeosStore {
     Object.assign(this.animation, config);
   }
 
+  /** save AI Configuration */
+  saveAIConfig(config: Partial<AIConfig>): void {
+    Object.assign(this.ai, config);
+  }
+
   reset(): void {
     const defaultSetting = getDefaultSetting();
     this.audio = defaultSetting.audio;
@@ -69,7 +80,7 @@ subscribe(settingStore, () => {
   if (!isSSR()) {
     localStorage.setItem(
       NEO_SETTING_CONFIG,
-      JSON.stringify(pick(settingStore, ["audio", "animation"])),
+      JSON.stringify(pick(settingStore, ["audio", "animation", "ai"])),
     );
   }
 });

src/ui/I18N/Source/Chinese/translation.json

@@ -203,7 +203,11 @@
     "SwitchMusicAccordingToTheEnvironment": "根据环境切换音乐",
     "LanguageSettings": "语言",
     "AnimationSettings": "动画",
-    "AnimationSpeed": "动画速度"
+    "AnimationSpeed": "动画速度",
+    "AISettings": "AI设置",
+    "CustomAIServer": "输入自定义AI模型服务器URL",
+    "ApplyAISettings": "应用",
+    "RecoverDefault": "恢复默认设置"
   },
   "DeckResults": {
     "NoDeckGroupFound": "找不到相应卡组"

src/ui/Setting/AISettings.tsx

+import { App, Button, Col, Input, Row } from "antd";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { useConfig } from "@/config";
+import { settingStore } from "@/stores/settingStore";
+
+const { agentServer } = useConfig();
+
+export const AISettings: React.FC = () => {
+  const { message } = App.useApp();
+  const [server, setServer] = useState<string>(
+    settingStore.ai.server ?? agentServer,
+  );
+
+  const onApply = () => {
+    settingStore.saveAIConfig({ server });
+    message.info("设置成功");
+  };
+
+  const onRestore = () => {
+    settingStore.saveAIConfig({ server: agentServer });
+    setServer(agentServer);
+  };
+  const { t: i18n } = useTranslation("SystemSettings");
+  return (
+    <div>
+      <Row style={{ marginBottom: "20px" }}>
+        <Col span={24}>
+          <p>{i18n("CustomAIServer")}</p>
+        </Col>
+      </Row>
+      <Row style={{ marginBottom: "20px" }}>
+        <Col span={24}>
+          <Input
+            placeholder="Text your URL"
+            value={server}
+            onChange={(e) => setServer(e.target.value)}
+          />
+        </Col>
+      </Row>
+      <Row justify="end">
+        <Col>
+          <Button
+            type="primary"
+            style={{ marginRight: "8px" }}
+            onClick={onApply}
+          >
+            {i18n("ApplyAISettings")}
+          </Button>
+          <Button onClick={onRestore}>{i18n("RecoverDefault")}</Button>
+        </Col>
+      </Row>
+    </div>
+  );
+};

src/ui/Setting/index.tsx

 import {
   AudioFilled,
+  OpenAIOutlined,
   PlayCircleOutlined,
   TranslationOutlined,
 } from "@ant-design/icons";
@@ -11,6 +12,7 @@ import { useTranslation } from "react-i18next";
 
 import { I18NSelector } from "../I18N";
 import { theme } from "../theme";
+import { AISettings } from "./AISettings";
 import { AnimationSetting } from "./Animation";
 import { AudioSetting } from "./Audio";
 
@@ -52,6 +54,15 @@ export const Setting = (props: SettingProps) => {
       ),
       children: <AnimationSetting />,
     },
+    {
+      key: "ai",
+      label: (
+        <>
+          {i18n("AISettings")} <OpenAIOutlined />
+        </>
+      ),
+      children: <AISettings />,
+    },
   ];
 
   return <Tabs defaultActiveKey={defaultKey} items={items} />;