feat: Flux basic

app/client/FluxProxy.ts

@@ -0,0 +1,33 @@
+// app/client/FluxProxy.ts
+
+export interface FluxImageRequest {
+    prompt: string;
+    width: number;
+    height: number;
+}
+
+export interface FluxImageResponse {
+    id: string
+}
+
+export interface FluxGetRequest {
+    request_id: string;
+}
+
+export interface FluxGetResponse {
+    id: string;
+    status: string | "Ready";
+    result: string;
+}
+
+export class FluxAPI {
+    private readonly apiKey: string;
+
+    private readonly website = "https://blackforestlabs.ai";
+
+    constructor(apiKey: string) {
+        this.apiKey = apiKey;
+    }
+
+
+}

app/home.tsx

@@ -6,6 +6,7 @@ import dynamic from "next/dynamic";
 import {CENTER_STYLE, Path} from "@/constant";
 import SystemLogo from "@/app/icons/logo/logo.svg";
 import SunoIcon from "@/app/icons/suno.svg";
+import FluxIcon from "@/app/icons/flux.svg";
 import ViduIcon from "@/app/icons/vidu.svg";
 import LoadingIcon from "@/app/icons/three-dots.svg";
 import MidjourneyIcon from "@/app/icons/midjourney.svg";
@@ -107,6 +108,10 @@ const DallePage = dynamic(async () => (await import("./pages/Dalle")).default, {
     loading: () => <Loading logo={<DalleIcon/>}/>,
 });
 
+const FluxPage = dynamic(async () => (await import("./pages/Flux")).FluxPage, {
+    loading: () => <Loading logo={<FluxIcon/>}/>,
+});
+
 const PikaPage = dynamic(async () => (await import("./pages/Pika")).default, {
     loading: () => <Loading logo={<PikaIcon/>}/>,
 });
@@ -135,6 +140,8 @@ const Doc2XPage = dynamic(async () => (await import("./pages/Doc2X")).default, {
     loading: () => <Loading/>,
 });
 
+
+
 const printCopyRight = () => console.log("@Kadxy 2024.")
 
 const useHasHydrated = () => {
@@ -214,6 +221,11 @@ const App = (props: { dark: boolean, updateConfig: any }) => {
                         name: "DALL·E",
                         icon: <PictureFilled/>,
                     },
+                    {
+                        path: Path.Flux,
+                        name: "Flux",
+                        icon: <Icon component={FluxIcon}/>,
+                    },
                     {
                         path: Path.TTS,
                         name: "TTS",
@@ -294,6 +306,7 @@ const App = (props: { dark: boolean, updateConfig: any }) => {
                     <Route path={Path.Chat} element={<ChatCompletionsPage/>}/>
                     <Route path={Path.Embeddings} element={<EmbeddingsPage/>}/>
                     <Route path={Path.Dalle} element={<DallePage/>}/>
+                    <Route path={Path.Flux} element={<FluxPage/>}/>
                     <Route path={Path.TTS} element={<TTSPage/>}/>
                     <Route path={Path.ASR} element={<WhisperPage/>}/>
                     <Route path={Path.Midjourney} element={<MidjourneyPage/>}/>

app/pages/Flux.tsx

@@ -0,0 +1,75 @@
+// /app/pages/Flux.tsx
+
+import {api2Provider, useAppConfig} from "@/app/store";
+import {FluxAPI} from "@/app/client/FluxProxy";
+import {ProForm} from "@ant-design/pro-components";
+import React, {ReactNode, useState} from "react";
+import {UnorderedListOutlined} from "@ant-design/icons";
+import {Col, Divider, Segmented} from "antd";
+import {COL_SCROLL_STYLE} from "@/constant";
+import {renderCode} from "@/app/render";
+import {safeJsonStringify} from "@/app/utils";
+
+export function FluxPage() {
+    const appConfig = useAppConfig();
+    const fluxApi = new FluxAPI(appConfig.getFirstApiKey(api2Provider.Flux));
+    const [generationForm] = ProForm.useForm();
+
+    const [taskData, setTaskData] = useState<any[]>([]);
+    const [errorData, setErrorData] = useState<any>(null)
+
+    const type_options = [
+        {label: "Generate", value: "generate", icon: <UnorderedListOutlined/>},
+    ]
+
+    const [formType, setFormType] = useState<"generate" | "query" | "upscale">("generate");
+
+    const updateTaskData = (data: any) => {
+        const updatedTaskData = taskData.slice(); // 创建 taskData 的副本
+
+        const index = updatedTaskData.findIndex((c: any) => c.id === data.id);
+
+        if (index === -1) {
+            // 如果 id 不存在，添加新数据
+            updatedTaskData.push(data);
+        } else {
+            // 如果 id 已存在，更新数据
+            updatedTaskData[index] = data;
+        }
+
+        setTaskData(updatedTaskData);
+    }
+
+    const RenderFluxForms: { [key in typeof formType]: ReactNode } = {
+        "generate": null,
+        "upscale": null,
+        "query": null,
+    }
+
+    return (
+        <>
+            <Col flex="400px" style={COL_SCROLL_STYLE}>
+                <Segmented
+                    value={formType}
+                    style={{marginBottom: 20}}
+                    options={type_options}
+                    block
+                    onChange={(value) => setFormType(value as typeof formType)}
+                />
+            </Col>
+
+            <Col flex={"none"}>
+                <Divider type={"vertical"} style={{height: "100%"}}/>
+            </Col>
+
+            <Col flex="auto" style={COL_SCROLL_STYLE}>
+                <h1>Tasks Info</h1>
+
+                {errorData && <>
+                    <h1>Error</h1>
+                    {renderCode(safeJsonStringify(errorData, errorData.toString()))}
+                </>}
+            </Col>
+        </>
+    )
+}

app/store/config.ts

@@ -44,6 +44,7 @@ export const api2Provider = {
     Chat: Provider.NextAPI,
     Embeddings: Provider.NextAPI,
     DallE: Provider.NextAPI,
+    Flux: Provider.ProxyAPI,
     TTS: Provider.NextAPI,
     Whisper: Provider.NextAPI,
     Midjourney: Provider.ProxyAPI,
@@ -61,6 +62,7 @@ export const api2ProviderBaseUrl = {
     Chat: ProviderBaseUrlMap[api2Provider.Chat],
     Embeddings: ProviderBaseUrlMap[api2Provider.Embeddings],
     DallE: ProviderBaseUrlMap[api2Provider.DallE],
+    Flux: ProviderBaseUrlMap[api2Provider.Flux],
     TTS: ProviderBaseUrlMap[api2Provider.TTS],
     Whisper: ProviderBaseUrlMap[api2Provider.Whisper],
     Midjourney: ProviderBaseUrlMap[api2Provider.Midjourney],

constant/system.ts

@@ -7,6 +7,7 @@ export enum Path {
     Chat = "/chat",
     Embeddings = "/embeddings",
     Dalle = "/dalle",
+    Flux = "/flux",
     TTS = "/tts",
     ASR = "/asr",
     Settings = "/settings",