chore: images create

2024-11-22 10:00:34 +08:00
parent c3473673da
commit dde937f460
52 changed files with 1883 additions and 941 deletions
@@ -1,26 +1,33 @@
+import AlertInfo from '@/components/alert-info';
+import SealInput from '@/components/seal-form/seal-input';
+import SealSelect from '@/components/seal-form/seal-select';
 import useOverlayScroller from '@/hooks/use-overlay-scroller';
-import useRequestToken from '@/hooks/use-request-token';
 import ThumbImg from '@/pages/playground/components/thumb-img';
+import { fetchChunkedData, readStreamData } from '@/utils/fetch-chunk-data';
+import { FileImageOutlined } from '@ant-design/icons';
 import { useIntl, useSearchParams } from '@umijs/max';
+import { Form } from 'antd';
 import classNames from 'classnames';
 import _ from 'lodash';
 import 'overlayscrollbars/overlayscrollbars.css';
 import React, {
  forwardRef,
  memo,
+  useCallback,
  useEffect,
  useImperativeHandle,
+  useMemo,
  useRef,
  useState
 } from 'react';
-import { createImages } from '../apis';
+import { CREAT_IMAGE_API } from '../apis';
+import { OpenAIViewCode } from '../config';
 import { ImageParamsConfig as paramsConfig } from '../config/params-config';
-import { MessageItem } from '../config/types';
+import { MessageItem, ParamsSchema } from '../config/types';
 import '../style/ground-left.less';
 import '../style/system-message-wrap.less';
+import DynamicParams from './dynamic-params';
 import MessageInput from './message-input';
-import ReferenceParams from './reference-params';
-import RerankerParams from './reranker-params';
 import ViewCodeModal from './view-code-modal';

 interface MessageProps {
@@ -33,18 +40,98 @@ const initialValues = {
  n: 1,
  size: '512x512',
  quality: 'standard',
-  style: 'vivid'
+  style: ''
 };

+const extraConfig: ParamsSchema[] = [
+  {
+    type: 'Select',
+    name: 'quality',
+    options: [
+      { label: 'standard', value: 'standard' },
+      { label: 'hd', value: 'hd' }
+    ],
+    label: {
+      text: 'playground.params.quality',
+      isLocalized: true
+    },
+    rules: [
+      {
+        required: false
+      }
+    ]
+  },
+  {
+    type: 'Select',
+    name: 'style',
+    options: [
+      { label: 'vivid', value: 'vivid' },
+      { label: 'natural', value: 'natural' }
+    ],
+    label: {
+      text: 'playground.params.style',
+      isLocalized: true
+    },
+    rules: [
+      {
+        required: false
+      }
+    ]
+  }
+];
+
 const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
  const { modelList } = props;
  const messageId = useRef<number>(0);
-  const [messageList, setMessageList] = useState<
-    { dataUrl: string; height: number; uid: number }[]
-  >([]);
+  const [imageList, setImageList] = useState<
+    {
+      dataUrl: string;
+      height: number | string;
+      width: string | number;
+      uid: number;
+      span?: number;
+      progress?: number;
+    }[]
+  >([
+    {
+      dataUrl:
+        'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+      height: 'auto',
+      width: 'auto',
+      uid: 0,
+      span: 12,
+      progress: 10
+    },
+    {
+      dataUrl:
+        'https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp',
+      height: 'auto',
+      width: 'auto',
+      uid: 1,
+      span: 12,
+      progress: 15
+    },
+    {
+      dataUrl:
+        'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+      height: 'auto',
+      width: 'auto',
+      uid: 3,
+      span: 12,
+      progress: 10
+    },
+    {
+      dataUrl:
+        'https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp',
+      height: 'auto',
+      width: 'auto',
+      uid: 4,
+      span: 12,
+      progress: 15
+    }
+  ]);

  const intl = useIntl();
-  const requestSource = useRequestToken();
  const [searchParams] = useSearchParams();
  const selectModel = searchParams.get('model') || '';
  const [parameters, setParams] = useState<any>({});
@@ -57,6 +144,9 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
  const messageListLengthCache = useRef<number>(0);
  const requestToken = useRef<any>(null);
  const [currentPrompt, setCurrentPrompt] = useState<string>('');
+  const form = useRef<any>(null);
+
+  const size = Form.useWatch('size', form.current?.form);

  const { initialize, updateScrollerPosition } = useOverlayScroller();
  const { initialize: innitializeParams } = useOverlayScroller();
@@ -73,79 +163,150 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
    };
  });

+  const setImageSize = useCallback(() => {
+    let size: Record<string, string | number> = {
+      with: 256,
+      height: 256,
+      span: 12
+    };
+    if (parameters.n === 1) {
+      size.width = '100%';
+      size.height = '100%';
+      size.span = 24;
+    }
+    if (parameters.n === 2) {
+      size.width = '50%';
+      size.height = 256;
+      size.span = 12;
+    }
+    if (parameters.n === 3) {
+      size.width = '33%';
+      size.height = 256;
+      size.span = 12;
+    }
+    if (parameters.n === 4) {
+      size.width = '25%';
+      size.height = 256;
+      size.span = 12;
+    }
+    return size;
+  }, [parameters.n]);
+
+  const finalParameters = useMemo(() => {
+    if (parameters.size === 'custom') {
+      return {
+        ..._.omit(parameters, ['width', 'height']),
+        size:
+          parameters.width && parameters.height
+            ? `${parameters.width}x${parameters.height}`
+            : ''
+      };
+    }
+    return {
+      ..._.omit(parameters, ['width', 'height'])
+    };
+  }, [parameters]);
+
  const setMessageId = () => {
    messageId.current = messageId.current + 1;
    return messageId.current;
  };

  const handleStopConversation = () => {
-    requestToken.current?.cancel?.();
+    requestToken.current?.abort?.();
    setLoading(false);
  };

  const submitMessage = async (current?: { role: string; content: string }) => {
-    if (!parameters.model) return;
    try {
+      await form.current?.form?.validateFields();
+      if (!parameters.model) return;
+      const size: any = setImageSize();
      setLoading(true);
      setMessageId();
      setCurrentPrompt(current?.content || '');
-      setMessageList(
-        Array(parameters.n)
-          .fill({})
-          .map((item, index: number) => {
-            return {
-              dataUrl: '',
-              height: 256,
-              width: 256,
-              uid: index
-            };
-          })
-      );

-      requestToken.current?.cancel?.();
-      requestToken.current = requestSource();
+      let newImageList = Array(parameters.n)
+        .fill({})
+        .map((item, index: number) => {
+          return {
+            dataUr: '',
+            ...size,
+            progress: 0,
+            height: 'auto',
+            width: 'auto',
+            uid: index
+          };
+        });
+      setImageList(newImageList);
+
+      requestToken.current?.abort?.();
+      requestToken.current = new AbortController();

      const params = {
+        stream: true,
        prompt: current?.content || currentPrompt || '',
-        ...parameters
+        ..._.omitBy(finalParameters, (value: string) => !value)
      };

-      const result = await createImages(params, {
-        cancelToken: requestToken.current.token
+      const result: any = await fetchChunkedData({
+        data: params,
+        url: CREAT_IMAGE_API,
+        signal: requestToken.current.signal
      });

-      const imgList = _.map(result.data, (item: any, index: number) => {
-        return {
-          dataUrl: `data:image/png;base64,${item.b64_json}`,
-          created: result.created,
-          height: 256,
-          width: 256,
-          uid: index
-        };
-      });
-      setMessageList(imgList);
-      console.log('result:', imgList);
+      if (result?.error) {
+        setTokenResult({
+          error: true,
+          errorMessage:
+            result?.data?.error?.message || result?.data?.message || ''
+        });
+        return;
+      }

-      setMessageId();
+      const { reader, decoder } = result;
+
+      await readStreamData(reader, decoder, (chunk: any) => {
+        if (chunk?.error) {
+          setTokenResult({
+            error: true,
+            errorMessage: chunk?.error?.message || chunk?.message || ''
+          });
+          return;
+        }
+        const data = chunk?.data || [];
+        data.forEach((item: any) => {
+          const imgItem = newImageList[item.index];
+          newImageList[item.index] = {
+            dataUrl: `data:image/png;base64,${item.b64_json}`,
+            height: '100%',
+            width: '100%',
+            uid: imgItem.uid,
+            span: imgItem.span,
+            progress: _.round(item.progress, 0)
+          };
+        });
+        setImageList([...newImageList]);
+      });
+      console.log('result:', newImageList);
    } catch (error) {
-      // console.log('error:', error);
-      requestToken.current?.cancel?.();
-      setMessageList([]);
+      console.log('error:', error);
+      requestToken.current?.abort?.();
+      setImageList([]);
    } finally {
      setLoading(false);
    }
  };
  const handleClear = () => {
-    if (!messageList.length) {
+    if (!imageList.length) {
      return;
    }
    setMessageId();
-    setMessageList([]);
+    setImageList([]);
    setTokenResult(null);
  };

  const handleSendMessage = (message: Omit<MessageItem, 'uid'>) => {
-    console.log('message:', message);
    const currentMessage = message.content ? message : undefined;
    submitMessage(currentMessage);
  };
@@ -154,6 +315,78 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
    setShow(false);
  };

+  const renderExtra = useMemo(() => {
+    return extraConfig.map((item: ParamsSchema) => {
+      return (
+        <Form.Item name={item.name} rules={item.rules} key={item.name}>
+          <SealSelect
+            {...item.attrs}
+            options={item.options}
+            label={
+              item.label.isLocalized
+                ? intl.formatMessage({ id: item.label.text })
+                : item.label.text
+            }
+          ></SealSelect>
+        </Form.Item>
+      );
+    });
+  }, [extraConfig, intl]);
+
+  const renderCustomSize = useMemo(() => {
+    if (size === 'custom') {
+      return (
+        <div className="flex gap-10" key="custom">
+          <Form.Item
+            name="width"
+            key="width"
+            rules={[
+              {
+                required: true,
+                message: intl.formatMessage(
+                  {
+                    id: 'common.form.rule.input'
+                  },
+                  {
+                    name: intl.formatMessage({ id: 'playground.params.width' })
+                  }
+                )
+              }
+            ]}
+          >
+            <SealInput.Number
+              style={{ width: '100%' }}
+              label={intl.formatMessage({ id: 'playground.params.width' })}
+            ></SealInput.Number>
+          </Form.Item>
+          <Form.Item
+            name="height"
+            key="height"
+            rules={[
+              {
+                required: true,
+                message: intl.formatMessage(
+                  {
+                    id: 'common.form.rule.input'
+                  },
+                  {
+                    name: intl.formatMessage({ id: 'playground.params.height' })
+                  }
+                )
+              }
+            ]}
+          >
+            <SealInput.Number
+              style={{ width: '100%' }}
+              label="Height"
+            ></SealInput.Number>
+          </Form.Item>
+        </div>
+      );
+    }
+    return null;
+  }, [size, intl]);
+
  useEffect(() => {
    if (scroller.current) {
      initialize(scroller.current);
@@ -170,42 +403,70 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
    if (loading) {
      updateScrollerPosition();
    }
-  }, [messageList, loading]);
+  }, [imageList, loading]);

  useEffect(() => {
-    if (messageList.length > messageListLengthCache.current) {
+    if (imageList.length > messageListLengthCache.current) {
      updateScrollerPosition();
    }
-    messageListLengthCache.current = messageList.length;
-  }, [messageList.length]);
+    messageListLengthCache.current = imageList.length;
+    console.log('imageList:', imageList);
+  }, [imageList.length]);

  return (
    <div className="ground-left-wrapper">
      <div className="ground-left">
-        <div className="message-list-wrap" ref={scroller}>
+        <div
+          className="message-list-wrap"
+          ref={scroller}
+          style={{ paddingBottom: 16 }}
+        >
          <>
-            <div className="content">
+            <div className="content" style={{ height: '100%' }}>
              <ThumbImg
-                style={{ paddingInline: 0 }}
+                style={{
+                  padding: 0,
+                  height: '100%',
+                  justifyContent: 'center',
+                  flexDirection: 'column',
+                  flexWrap: 'unset',
+                  alignItems: 'center'
+                }}
                editable={false}
-                dataList={messageList}
+                dataList={imageList}
                loading={loading}
+                responseable={true}
+                gutter={[16, 16]}
+                autoSize={true}
              ></ThumbImg>
+              {!imageList.length && (
+                <div className="flex-column font-size-14 flex-center gap-20 justify-center hold-wrapper">
+                  <span>
+                    <FileImageOutlined className="font-size-32 text-secondary" />
+                  </span>
+                  <span>
+                    {intl.formatMessage({ id: 'playground.params.empty.tips' })}
+                  </span>
+                </div>
+              )}
            </div>
          </>
        </div>
        {tokenResult && (
          <div style={{ height: 40 }}>
-            <ReferenceParams usage={tokenResult}></ReferenceParams>
+            <AlertInfo
+              type="danger"
+              message={tokenResult?.errorMessage}
+            ></AlertInfo>
          </div>
        )}
        <div className="ground-left-footer">
          <MessageInput
            placeholer="Type <kbd>/</kbd> to input prompt"
-            actions={['clear']}
+            actions={[]}
            loading={loading}
            disabled={!parameters.model}
-            isEmpty={!messageList.length}
+            isEmpty={!imageList.length}
            handleSubmit={handleSendMessage}
            handleAbortFetch={handleStopConversation}
            shouldResetMessage={false}
@@ -220,23 +481,28 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
        ref={paramsRef}
      >
        <div className="box">
-          <RerankerParams
+          <DynamicParams
+            ref={form}
            setParams={setParams}
            paramsConfig={paramsConfig}
            initialValues={initialValues}
            params={parameters}
            selectedModel={selectModel}
            modelList={modelList}
+            extra={[renderCustomSize, ...renderExtra]}
          />
        </div>
      </div>

      <ViewCodeModal
+        {...OpenAIViewCode.images}
        open={show}
        payLoad={{
          prompt: currentPrompt
        }}
-        parameters={parameters}
+        parameters={{
+          ...finalParameters
+        }}
        onCancel={handleCloseViewCode}
        title={intl.formatMessage({ id: 'playground.viewcode' })}
      ></ViewCodeModal>