save whisper / tts / image gen api

2023-11-11 13:16:55 +08:00
parent a72e98ad25
commit f3953693fd
7 changed files with 280 additions and 77 deletions
--- a/src/addImage.tsx
+++ b/src/addImage.tsx
@@ -24,7 +24,7 @@ export function AddImage({
 }: Props) {
  const [enableHighResolution, setEnableHighResolution] = useState(true);
  const [imageGenPrompt, setImageGenPrompt] = useState("");
-  const [imageGenModel, setImageGenModel] = useState("dall-e-2");
+  const [imageGenModel, setImageGenModel] = useState("dall-e-3");
  const [imageGenN, setImageGenN] = useState(1);
  const [imageGenQuality, setImageGEnQuality] = useState("standard");
  const [imageGenResponseFormat, setImageGenResponseFormat] =
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -118,6 +118,9 @@ const STORAGE_NAME_INDEXES = `${STORAGE_NAME}-indexes`;
 const STORAGE_NAME_TOTALCOST = `${STORAGE_NAME}-totalcost`;
 export const STORAGE_NAME_TEMPLATE = `${STORAGE_NAME}-template`;
 export const STORAGE_NAME_TEMPLATE_API = `${STORAGE_NAME_TEMPLATE}-api`;
+export const STORAGE_NAME_TEMPLATE_API_WHISPER = `${STORAGE_NAME_TEMPLATE}-api-whisper`;
+export const STORAGE_NAME_TEMPLATE_API_TTS = `${STORAGE_NAME_TEMPLATE}-api-tts`;
+export const STORAGE_NAME_TEMPLATE_API_IMAGE_GEN = `${STORAGE_NAME_TEMPLATE}-api-image-gen`;

 export function addTotalCost(cost: number) {
  let totalCost = getTotalCost();
--- a/src/chatbox.tsx
+++ b/src/chatbox.tsx
@@ -7,6 +7,9 @@ import {
  ChatStoreMessage,
  STORAGE_NAME_TEMPLATE,
  STORAGE_NAME_TEMPLATE_API,
+  STORAGE_NAME_TEMPLATE_API_IMAGE_GEN,
+  STORAGE_NAME_TEMPLATE_API_TTS,
+  STORAGE_NAME_TEMPLATE_API_WHISPER,
  TemplateAPI,
  addTotalCost,
 } from "./app";
@@ -23,6 +26,7 @@ import models from "./models";
 import Settings from "./settings";
 import getDefaultParams from "./getDefaultParam";
 import { AddImage } from "./addImage";
+import { ListAPIs } from "./listAPIs";

 export interface TemplateChatStore extends ChatStore {
  name: string;
@@ -319,6 +323,21 @@ export default function ChatBOX(props: {
      localStorage.getItem(STORAGE_NAME_TEMPLATE_API) || "[]"
    ) as TemplateAPI[]
  );
+  const [templateAPIsWhisper, _setTemplateAPIsWhisper] = useState(
+    JSON.parse(
+      localStorage.getItem(STORAGE_NAME_TEMPLATE_API_WHISPER) || "[]"
+    ) as TemplateAPI[]
+  );
+  const [templateAPIsTTS, _setTemplateAPIsTTS] = useState(
+    JSON.parse(
+      localStorage.getItem(STORAGE_NAME_TEMPLATE_API_TTS) || "[]"
+    ) as TemplateAPI[]
+  );
+  const [templateAPIsImageGen, _setTemplateAPIsImageGen] = useState(
+    JSON.parse(
+      localStorage.getItem(STORAGE_NAME_TEMPLATE_API_IMAGE_GEN) || "[]"
+    ) as TemplateAPI[]
+  );
  const setTemplates = (templates: TemplateChatStore[]) => {
    localStorage.setItem(STORAGE_NAME_TEMPLATE, JSON.stringify(templates));
    _setTemplates(templates);
@@ -330,6 +349,27 @@ export default function ChatBOX(props: {
    );
    _setTemplateAPIs(templateAPIs);
  };
+  const setTemplateAPIsWhisper = (templateAPIWhisper: TemplateAPI[]) => {
+    localStorage.setItem(
+      STORAGE_NAME_TEMPLATE_API_WHISPER,
+      JSON.stringify(templateAPIWhisper)
+    );
+    _setTemplateAPIsWhisper(templateAPIWhisper);
+  };
+  const setTemplateAPIsTTS = (templateAPITTS: TemplateAPI[]) => {
+    localStorage.setItem(
+      STORAGE_NAME_TEMPLATE_API_TTS,
+      JSON.stringify(templateAPITTS)
+    );
+    _setTemplateAPIsTTS(templateAPITTS);
+  };
+  const setTemplateAPIsImageGen = (templateAPIImageGen: TemplateAPI[]) => {
+    localStorage.setItem(
+      STORAGE_NAME_TEMPLATE_API_IMAGE_GEN,
+      JSON.stringify(templateAPIImageGen)
+    );
+    _setTemplateAPIsImageGen(templateAPIImageGen);
+  };

  return (
    <div className="grow flex flex-col p-2 dark:text-black">
@@ -343,6 +383,12 @@ export default function ChatBOX(props: {
          setTemplates={setTemplates}
          templateAPIs={templateAPIs}
          setTemplateAPIs={setTemplateAPIs}
+          templateAPIsWhisper={templateAPIsWhisper}
+          setTemplateAPIsWhisper={setTemplateAPIsWhisper}
+          templateAPIsTTS={templateAPIsTTS}
+          setTemplateAPIsTTS={setTemplateAPIsTTS}
+          templateAPIsImageGen={templateAPIsImageGen}
+          setTemplateAPIsImageGen={setTemplateAPIsImageGen}
        />
      )}
      <div
@@ -399,60 +445,65 @@ export default function ChatBOX(props: {
            chatStore.history.filter((msg) => !msg.example).length == 0 ||
            !chatStore.apiEndpoint ||
            !chatStore.apiKey) && (
-            <div className="break-all opacity-80 p-3 rounded bg-white my-3 text-left dark:text-black">
-              <h2>{Tr("Saved API templates")}</h2>
-              <hr className="my-2" />
-              <div className="flex flex-wrap">
-                {templateAPIs.map((t, index) => (
-                  <div
-                    className={`cursor-pointer rounded ${
-                      chatStore.apiEndpoint === t.endpoint &&
-                      chatStore.apiKey === t.key
-                        ? "bg-red-600"
-                        : "bg-red-400"
-                    } w-fit p-2 m-1 flex flex-col`}
-                    onClick={() => {
-                      chatStore.apiEndpoint = t.endpoint;
-                      chatStore.apiKey = t.key;
-                      setChatStore({ ...chatStore });
-                    }}
-                  >
-                    <span className="w-full text-center">{t.name}</span>
-                    <hr className="mt-2" />
-                    <span className="flex justify-between">
-                      <button
-                        onClick={() => {
-                          const name = prompt("Give **API** template a name");
-                          if (!name) {
-                            return;
-                          }
-                          t.name = name;
-                          setTemplateAPIs(structuredClone(templateAPIs));
-                        }}
-                      >
-                        🖋
-                      </button>
-                      <button
-                        onClick={() => {
-                          if (
-                            !confirm(
-                              "Are you sure to delete this **API** template?"
-                            )
-                          ) {
-                            return;
-                          }
-                          templateAPIs.splice(index, 1);
-                          setTemplateAPIs(structuredClone(templateAPIs));
-                        }}
-                      >
-                        ❌
-                      </button>
-                    </span>
-                  </div>
-                ))}
-              </div>
-            </div>
+            <ListAPIs
+              label="API"
+              tmps={templateAPIs}
+              setTmps={setTemplateAPIs}
+              chatStore={chatStore}
+              setChatStore={setChatStore}
+              apiField="apiEndpoint"
+              keyField="apiKey"
+            />
          )}
+
+        {templateAPIsWhisper.length > 0 &&
+          (chatStore.develop_mode ||
+            chatStore.history.filter((msg) => !msg.example).length == 0 ||
+            !chatStore.whisper_api ||
+            !chatStore.whisper_key) && (
+            <ListAPIs
+              label="Whisper API"
+              tmps={templateAPIsWhisper}
+              setTmps={setTemplateAPIsWhisper}
+              chatStore={chatStore}
+              setChatStore={setChatStore}
+              apiField="whisper_api"
+              keyField="whisper_key"
+            />
+          )}
+
+        {templateAPIsTTS.length > 0 &&
+          (chatStore.develop_mode ||
+            chatStore.history.filter((msg) => !msg.example).length == 0 ||
+            !chatStore.tts_api ||
+            !chatStore.tts_key) && (
+            <ListAPIs
+              label="TTS API"
+              tmps={templateAPIsTTS}
+              setTmps={setTemplateAPIsTTS}
+              chatStore={chatStore}
+              setChatStore={setChatStore}
+              apiField="tts_api"
+              keyField="tts_key"
+            />
+          )}
+
+        {templateAPIsImageGen.length > 0 &&
+          (chatStore.develop_mode ||
+            chatStore.history.filter((msg) => !msg.example).length == 0 ||
+            !chatStore.image_gen_api ||
+            !chatStore.image_gen_key) && (
+            <ListAPIs
+              label="Image Gen API"
+              tmps={templateAPIsImageGen}
+              setTmps={setTemplateAPIsImageGen}
+              chatStore={chatStore}
+              setChatStore={setChatStore}
+              apiField="image_gen_api"
+              keyField="image_gen_key"
+            />
+          )}
+
        {chatStore.history.filter((msg) => !msg.example).length == 0 && (
          <div className="break-all opacity-80 p-3 rounded bg-white my-3 text-left dark:text-black">
            <h2>
@@ -722,6 +773,7 @@ export default function ChatBOX(props: {
          {Tr("Send")}
        </button>
        {chatStore.whisper_api &&
+          chatStore.whisper_key &&
          (chatStore.whisper_key || chatStore.apiKey) && (
            <button
              className={`disabled:line-through disabled:bg-slate-500 rounded m-1 p-1 border-2 ${
--- a/src/chatgpt.ts
+++ b/src/chatgpt.ts
@@ -152,10 +152,7 @@ class Chat {
      frequency_penalty = 0,
    } = {}
  ) {
-    if (OPENAI_API_KEY === undefined) {
-      throw "OPENAI_API_KEY is undefined";
-    }
-    this.OPENAI_API_KEY = OPENAI_API_KEY;
+    this.OPENAI_API_KEY = OPENAI_API_KEY ?? "";
    this.messages = [];
    this.total_tokens = calculate_token_length(systemMessage);
    this.max_tokens = max_tokens;
--- a/src/listAPIs.tsx
+++ b/src/listAPIs.tsx
@@ -0,0 +1,81 @@
+import { ChatStore, TemplateAPI } from "./app";
+import { Tr } from "./translate";
+
+interface Props {
+  chatStore: ChatStore;
+  setChatStore: (cs: ChatStore) => void;
+  tmps: TemplateAPI[];
+  setTmps: (tmps: TemplateAPI[]) => void;
+  label: string;
+  apiField: string;
+  keyField: string;
+}
+export function ListAPIs({
+  tmps,
+  setTmps,
+  chatStore,
+  setChatStore,
+  label,
+  apiField,
+  keyField,
+}: Props) {
+  return (
+    <div className="break-all opacity-80 p-3 rounded bg-white my-3 text-left dark:text-black">
+      <h2>{Tr(`Saved ${label} templates`)}</h2>
+      <hr className="my-2" />
+      <div className="flex flex-wrap">
+        {tmps.map((t, index) => (
+          <div
+            className={`cursor-pointer rounded ${
+              // @ts-ignore
+              chatStore[apiField] === t.endpoint &&
+              // @ts-ignore
+              chatStore[keyField] === t.key
+                ? "bg-red-600"
+                : "bg-red-400"
+            } w-fit p-2 m-1 flex flex-col`}
+            onClick={() => {
+              // @ts-ignore
+              chatStore[apiField] = t.endpoint;
+              // @ts-ignore
+              chatStore[keyField] = t.key;
+              setChatStore({ ...chatStore });
+            }}
+          >
+            <span className="w-full text-center">{t.name}</span>
+            <hr className="mt-2" />
+            <span className="flex justify-between">
+              <button
+                onClick={() => {
+                  const name = prompt(`Give **${label}** template a name`);
+                  if (!name) {
+                    return;
+                  }
+                  t.name = name;
+                  setTmps(structuredClone(tmps));
+                }}
+              >
+                🖋
+              </button>
+              <button
+                onClick={() => {
+                  if (
+                    !confirm(
+                      `Are you sure to delete this **${label}** template?`
+                    )
+                  ) {
+                    return;
+                  }
+                  tmps.splice(index, 1);
+                  setTmps(structuredClone(tmps));
+                }}
+              >
+                ❌
+              </button>
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
--- a/src/setAPIsTemplate.tsx
+++ b/src/setAPIsTemplate.tsx
@@ -0,0 +1,39 @@
+import { TemplateAPI } from "./app";
+import { Tr } from "./translate";
+
+interface Props {
+  tmps: TemplateAPI[];
+  setTmps: (tmps: TemplateAPI[]) => void;
+  label: string;
+  endpoint: string;
+  APIkey: string;
+}
+export function SetAPIsTemplate({
+  endpoint,
+  APIkey,
+  tmps,
+  setTmps,
+  label,
+}: Props) {
+  return (
+    <button
+      className="p-2 m-2 rounded bg-blue-300"
+      onClick={() => {
+        const name = prompt(`Give this **${label}** template a name:`);
+        if (!name) {
+          alert("No template name specified");
+          return;
+        }
+        const tmp: TemplateAPI = {
+          name,
+          endpoint,
+          key: APIkey,
+        };
+        tmps.push(tmp);
+        setTmps([...tmps]);
+      }}
+    >
+      {Tr(`Save ${label}`)}
+    </button>
+  );
+}
--- a/src/settings.tsx
+++ b/src/settings.tsx
@@ -6,6 +6,7 @@ import { TemplateChatStore } from "./chatbox";
 import { tr, Tr, langCodeContext, LANG_OPTIONS } from "./translate";
 import p from "preact-markdown";
 import { isVailedJSON } from "./message";
+import { SetAPIsTemplate } from "./setAPIsTemplate";

 const TTS_VOICES: string[] = [
  "alloy",
@@ -267,6 +268,12 @@ export default (props: {
  setTemplates: (templates: TemplateChatStore[]) => void;
  templateAPIs: TemplateAPI[];
  setTemplateAPIs: (templateAPIs: TemplateAPI[]) => void;
+  templateAPIsWhisper: TemplateAPI[];
+  setTemplateAPIsWhisper: (templateAPIs: TemplateAPI[]) => void;
+  templateAPIsTTS: TemplateAPI[];
+  setTemplateAPIsTTS: (templateAPIs: TemplateAPI[]) => void;
+  templateAPIsImageGen: TemplateAPI[];
+  setTemplateAPIsImageGen: (templateAPIs: TemplateAPI[]) => void;
 }) => {
  let link =
    location.protocol +
@@ -519,6 +526,43 @@ export default (props: {
              {Tr("Reset")}
            </button>
          </div>
+
+          <div className="flex justify-evenly flex-wrap">
+            <SetAPIsTemplate
+              label="Chat API"
+              endpoint={props.chatStore.apiEndpoint}
+              APIkey={props.chatStore.apiKey}
+              tmps={props.templateAPIs}
+              setTmps={props.setTemplateAPIs}
+            />
+            {props.chatStore.whisper_api && props.chatStore.whisper_key && (
+              <SetAPIsTemplate
+                label="Whisper API"
+                endpoint={props.chatStore.whisper_api}
+                APIkey={props.chatStore.whisper_key}
+                tmps={props.templateAPIsWhisper}
+                setTmps={props.setTemplateAPIsWhisper}
+              />
+            )}
+            {props.chatStore.tts_api && props.chatStore.tts_key && (
+              <SetAPIsTemplate
+                label="TTS API"
+                endpoint={props.chatStore.tts_api}
+                APIkey={props.chatStore.tts_key}
+                tmps={props.templateAPIsTTS}
+                setTmps={props.setTemplateAPIsTTS}
+              />
+            )}
+            {props.chatStore.image_gen_api && props.chatStore.image_gen_key && (
+              <SetAPIsTemplate
+                label="Image Gen API"
+                endpoint={props.chatStore.image_gen_api}
+                APIkey={props.chatStore.image_gen_key}
+                tmps={props.templateAPIsImageGen}
+                setTmps={props.setTemplateAPIsImageGen}
+              />
+            )}
+          </div>
          <p className="flex justify-evenly">
            <button
              className="p-2 m-2 rounded bg-amber-500"
@@ -554,6 +598,12 @@ export default (props: {
                // clear api because it is stored in the API template
                tmp.apiEndpoint = "";
                tmp.apiKey = "";
+                tmp.whisper_api = "";
+                tmp.whisper_key = "";
+                tmp.tts_api = "";
+                tmp.tts_key = "";
+                tmp.image_gen_api = "";
+                tmp.image_gen_key = "";
                // @ts-ignore
                tmp.name = name;
                props.templates.push(tmp as TemplateChatStore);
@@ -562,25 +612,6 @@ export default (props: {
            >
              {Tr("As template")}
            </button>
-            <button
-              className="p-2 m-2 rounded bg-amber-500"
-              onClick={() => {
-                const name = prompt("Give this **API** template a name:");
-                if (!name) {
-                  alert("No template name specified");
-                  return;
-                }
-                const tmp: TemplateAPI = {
-                  name,
-                  endpoint: props.chatStore.apiEndpoint,
-                  key: props.chatStore.apiKey,
-                };
-                props.templateAPIs.push(tmp);
-                props.setTemplateAPIs([...props.templateAPIs]);
-              }}
-            >
-              {Tr("As API Template")}
-            </button>
            <button
              className="p-2 m-2 rounded bg-amber-500"
              onClick={() => {