From 6d9beec035207745a456aabf74edfb304479d6a1 Mon Sep 17 00:00:00 2001 From: Kadxy <2230318258@qq.com> Date: Wed, 7 Aug 2024 04:52:20 +0800 Subject: [PATCH] feat: Flux basic --- app/client/FluxProxy.ts | 33 ++++++++++++++++++ app/home.tsx | 13 +++++++ app/icons/flux.svg | 23 +++++++++++++ app/pages/Flux.tsx | 75 +++++++++++++++++++++++++++++++++++++++++ app/store/config.ts | 2 ++ constant/system.ts | 1 + 6 files changed, 147 insertions(+) create mode 100644 app/client/FluxProxy.ts create mode 100644 app/icons/flux.svg create mode 100644 app/pages/Flux.tsx diff --git a/app/client/FluxProxy.ts b/app/client/FluxProxy.ts new file mode 100644 index 0000000..9f8e4a1 --- /dev/null +++ b/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; + } + + +} diff --git a/app/home.tsx b/app/home.tsx index babeea1..4ac79e3 100644 --- a/app/home.tsx +++ b/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: () => }/>, }); +const FluxPage = dynamic(async () => (await import("./pages/Flux")).FluxPage, { + loading: () => }/>, +}); + const PikaPage = dynamic(async () => (await import("./pages/Pika")).default, { loading: () => }/>, }); @@ -135,6 +140,8 @@ const Doc2XPage = dynamic(async () => (await import("./pages/Doc2X")).default, { loading: () => , }); + + const printCopyRight = () => console.log("@Kadxy 2024.") const useHasHydrated = () => { @@ -214,6 +221,11 @@ const App = (props: { dark: boolean, updateConfig: any }) => { name: "DALL·E", icon: , }, + { + path: Path.Flux, + name: "Flux", + icon: , + }, { path: Path.TTS, name: "TTS", @@ -294,6 +306,7 @@ const App = (props: { dark: boolean, updateConfig: any }) => { }/> }/> }/> + }/> }/> }/> }/> diff --git a/app/icons/flux.svg b/app/icons/flux.svg new file mode 100644 index 0000000..c8b074d --- /dev/null +++ b/app/icons/flux.svg @@ -0,0 +1,23 @@ + + + + + + + + + + diff --git a/app/pages/Flux.tsx b/app/pages/Flux.tsx new file mode 100644 index 0000000..b256105 --- /dev/null +++ b/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([]); + const [errorData, setErrorData] = useState(null) + + const type_options = [ + {label: "Generate", value: "generate", icon: }, + ] + + 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 ( + <> + + setFormType(value as typeof formType)} + /> + + + + + + + +

Tasks Info

+ + {errorData && <> +

Error

+ {renderCode(safeJsonStringify(errorData, errorData.toString()))} + } + + + ) +} diff --git a/app/store/config.ts b/app/store/config.ts index 41d68c2..ebf3b17 100644 --- a/app/store/config.ts +++ b/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], diff --git a/constant/system.ts b/constant/system.ts index 0a33f93..a4f7cbb 100644 --- a/constant/system.ts +++ b/constant/system.ts @@ -7,6 +7,7 @@ export enum Path { Chat = "/chat", Embeddings = "/embeddings", Dalle = "/dalle", + Flux = "/flux", TTS = "/tts", ASR = "/asr", Settings = "/settings",