fix:load from server

OpenAI-Next · Jul 27, 2024 · 6c828d8 · 6c828d8
1 parent 6271ea8
commit 6c828d8
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 29 deletions.
diff --git a/app/components/ShellApiApiKey.tsx b/app/components/ShellApiApiKey.tsx
@@ -1,6 +1,6 @@
 // app/components/ShellApiApiKey.tsx
 
-import {Button, Modal, Result, StepProps, Steps, Table} from "antd";
+import {App, Button, Modal, Result, StepProps, Steps, Table} from "antd";
 import {ShellApi, ShellApiLoginRequest, ShellApiToken} from "@/app/client/shell-api";
 import React, {useState} from "react";
 import {SmileOutlined, SolutionOutlined, UserOutlined} from "@ant-design/icons";
@@ -10,11 +10,9 @@ const ShellApiApiKey = (props: {
     open: boolean;
     onClose: () => void;
     baseUrl: string;
-    onSelect: (token: ShellApiToken) => void;
 }) => {
-
+    const {message} = App.useApp()
     const api = new ShellApi(props.baseUrl);
-
     const [step, setStep] = useState(0);
 
     const [status, setStatus] = useState<("error" | "wait" | "process" | "finish" | undefined)[]>(['process', 'wait', 'wait']);
@@ -38,6 +36,12 @@ const ShellApiApiKey = (props: {
             closeIcon={false}
             width={580}
             centered={true}
+            destroyOnClose={true}
+            afterClose={() => {
+                setStep(0);
+                setStatus(["process", "wait", "wait"]);
+                setError(undefined);
+            }}
         >
             <Steps items={steps} style={{marginBottom: 32}}/>
             {step === 0 &&
@@ -139,9 +143,13 @@ const ShellApiApiKey = (props: {
                                     <Button
                                         block
                                         type="link"
-                                        onClick={() => props.onSelect(record)}
+                                        onClick={async () => {
+                                            await window.navigator.clipboard.writeText("sk-" + record.key);
+                                            message.success("API Key copied to clipboard");
+                                            props.onClose();
+                                        }}
                                     >
-                                        Select
+                                        Copy
                                     </Button>
                                 )
                             }

diff --git a/app/icons/stable-diffusion.svg b/app/icons/stable-diffusion.svg
diff --git a/app/pages/Settings.tsx b/app/pages/Settings.tsx
@@ -1,8 +1,8 @@
 import React, {lazy, useState} from "react";
-import {Provider, PROVIDER_NAME, ProviderBaseUrlMap, useAppConfig,} from "../store";
+import {Provider, PROVIDER_NAME, ProviderRealBaseUrlMap, useAppConfig,} from "../store";
 
 import {SCROLL_STYLE, SITE_TITLE} from "@/constant";
-import {Button, Col, Row, Space} from "antd";
+import {Button, Col, message, Row, Space} from "antd";
 import {ProCard, ProCardProps, ProForm, ProFormList, ProFormSelect, ProFormText} from '@ant-design/pro-components';
 import {DeleteOutlined, DownloadOutlined, UploadOutlined} from "@ant-design/icons";
 import {ShellApiToken} from "@/app/client/shell-api";
@@ -20,6 +20,7 @@ export function Settings() {
     const updateConfig = config.update;
 
     const [showShellApiApiKeyModal, setShowShellApiApiKeyModal] = useState(false);
+    const [shellApiBaseUrl, setShellApiBaseUrl] = useState('')
 
     const onExport = () => {
         const data = JSON.stringify(localStorage, null, 2);
@@ -144,10 +145,16 @@ export function Settings() {
                                                             config.apiKeys[index].apiKey = e.target.value
                                                         }),
                                                     }}
-                                                    extra={(config?.apiKeys[index]?.provider === Provider.NextAPI && !config?.apiKeys[index]?.apiKey) ?
-                                                        <a style={{marginLeft:2}} onClick={() => setShowShellApiApiKeyModal(true)}>
-                                                            Load from NextAPI
-                                                        </a> : null}
+                                                    extra={(!config?.apiKeys[index]?.apiKey) &&
+                                                        <a
+                                                            style={{marginLeft: 2}}
+                                                            onClick={() => {
+                                                                setShellApiBaseUrl(ProviderRealBaseUrlMap[config?.apiKeys[index]?.provider])
+                                                                setShowShellApiApiKeyModal(true)
+                                                            }}
+                                                        >
+                                                            Load from {PROVIDER_NAME[config?.apiKeys[index]?.provider]}
+                                                        </a>}
                                                 />
                                             </>
                                         )
@@ -190,13 +197,7 @@ export function Settings() {
             <ShellApiApiKey
                 open={showShellApiApiKeyModal}
                 onClose={() => setShowShellApiApiKeyModal(false)}
-                baseUrl={ProviderBaseUrlMap[Provider.NextAPI]}
-                onSelect={(token: ShellApiToken) => {
-                    updateConfig((config) => {
-                        config.apiKeys.find((k) => k.provider === Provider.NextAPI)!.apiKey = token.key;
-                    });
-                    setShowShellApiApiKeyModal(false);
-                }}
+                baseUrl={shellApiBaseUrl}
             />
         </>
     );

diff --git a/app/pages/StableDiffusion.tsx b/app/pages/StableDiffusion.tsx
@@ -32,6 +32,7 @@ export interface StableDiffusionResponse {
 
 interface StableDiffusionData extends StableDiffusionResponse {
     prompt: any;
+    output_format: "jpeg" | "png" | "webp";
 }
 
 const StableDiffusionForm = (props: {
@@ -50,7 +51,6 @@ const StableDiffusionForm = (props: {
     const [abortController, setAbortController] = useState<AbortController | null>(null);
 
     const selectedMode = (ProForm.useWatch("mode", props.form) || "text-to-image") as "image-to-image" | "text-to-image";
-
     const selectedModel = ProForm.useWatch("model", props.form) as "sd3-medium" | "sd3-large" | "sd3-large-turbo";
 
     return (
@@ -78,7 +78,11 @@ const StableDiffusionForm = (props: {
                         const res = await props.api.submit(sdType, values, controller.signal);
                         if (res.ok) {
                             const resJson = await res.json() as StableDiffusionResponse;
-                            props.updateResponse({prompt: values.prompt, ...resJson});
+                            props.updateResponse({
+                                ...resJson,
+                                prompt: values.prompt,
+                                output_format: values.output_format ?? "png",
+                            });
                         } else {
                             await handelResponseError(res, props.updateError);
                         }
@@ -248,13 +252,30 @@ const StableDiffusionDataRenderer = (props: {
                             dataIndex: ["seed"],
                             copyable: true,
                         },
+                        {
+                            title: "Image File",
+                            key: "image_download",
+                            render: (_dom, record) => {
+                                return <a
+                                    onClick={() => {
+                                        const url = "data:image/" + record.output_format + ";base64," + record.image;
+                                        const a = document.createElement('a');
+                                        a.href = url;
+                                        a.download = `${record.prompt}.` + record.output_format;
+                                        a.click();
+                                    }}
+                                >
+                                    Click to download
+                                </a>
+                            }
+                        },
                         {
                             title: "Image Preview",
                             key: "image",
                             render: (_dom, record) => {
                                 if (record?.image) {
                                     return <Image
-                                        src={"data:image;base64," + record.image}
+                                        src={"data:image/" + record.output_format + ";base64," + record.image}
                                         alt={record.image}
                                         style={{maxWidth: 240}}
                                     />;
@@ -271,12 +292,7 @@ const StableDiffusionDataRenderer = (props: {
                             title: '操作',
                             valueType: 'option',
                             render: () => [
-                                <a
-                                    key="delete"
-                                    onClick={() => props.onDelData(index)}
-                                >
-                                    Delete
-                                </a>,
+                                <a key="delete" onClick={() => props.onDelData(index)}>Delete</a>
                             ],
                         },
                     ]}

diff --git a/app/store/config.ts b/app/store/config.ts
@@ -35,6 +35,11 @@ export const ProviderBaseUrlMap = {
     [Provider.ProxyAPI]: "/proxyapi",
 } as const;
 
+export const ProviderRealBaseUrlMap = {
+    [Provider.NextAPI]: "https://api.openai-next.com",
+    [Provider.ProxyAPI]: "https://mj.openai-next.com",
+} as const;
+
 export const api2Provider = {
     Chat: Provider.NextAPI,
     Embeddings: Provider.NextAPI,