feat: generate images

src/pages/playground/images.tsx

@@ -0,0 +1,126 @@
+import IconFont from '@/components/icon-font';
+import breakpoints from '@/config/breakpoints';
+import HotKeys from '@/config/hotkeys';
+import useWindowResize from '@/hooks/use-window-resize';
+import { PageContainer } from '@ant-design/pro-components';
+import { useIntl } from '@umijs/max';
+import { Button, Space } from 'antd';
+import classNames from 'classnames';
+import _ from 'lodash';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { queryModelsList } from './apis';
+import GroundImages from './components/ground-images';
+import './style/play-ground.less';
+
+const TextToImages: React.FC = () => {
+  const intl = useIntl();
+  const { size } = useWindowResize();
+  const groundTabRef1 = useRef<any>(null);
+  const [modelList, setModelList] = useState<Global.BaseOption<string>[]>([]);
+  const [loaded, setLoaded] = useState(false);
+
+  const handleViewCode = useCallback(() => {
+    groundTabRef1.current?.viewCode?.();
+  }, []);
+
+  const handleToggleCollapse = useCallback(() => {
+    groundTabRef1.current?.setCollapse?.();
+  }, []);
+
+  useEffect(() => {
+    if (size.width < breakpoints.lg) {
+      if (!groundTabRef1.current?.collapse) {
+        groundTabRef1.current?.setCollapse?.();
+      }
+    }
+  }, [size.width]);
+
+  useEffect(() => {
+    const getModelList = async () => {
+      try {
+        const params = {
+          embedding_only: false
+        };
+        const res = await queryModelsList(params);
+        const list = _.map(res.data || [], (item: any) => {
+          return {
+            value: item.id,
+            label: item.id
+          };
+        }) as Global.BaseOption<string>[];
+        return list;
+      } catch (error) {
+        console.error(error);
+        return [];
+      }
+    };
+
+    const fetchData = async () => {
+      try {
+        const modelist = await getModelList();
+        setModelList(modelist);
+      } catch (error) {
+        setLoaded(true);
+      }
+    };
+    fetchData();
+  }, []);
+
+  const renderExtra = () => {
+    return (
+      <Space key="buttons">
+        <Button
+          size="middle"
+          onClick={handleViewCode}
+          icon={<IconFont type="icon-code" className="font-size-16"></IconFont>}
+        >
+          {intl.formatMessage({ id: 'playground.viewcode' })}
+        </Button>
+        <Button
+          size="middle"
+          onClick={handleToggleCollapse}
+          icon={
+            <IconFont
+              type="icon-a-layout6-line"
+              className="font-size-16"
+            ></IconFont>
+          }
+        ></Button>
+      </Space>
+    );
+  };
+
+  useHotkeys(
+    HotKeys.RIGHT.join(','),
+    () => {
+      groundTabRef1.current?.setCollapse?.();
+    },
+    {
+      preventDefault: true
+    }
+  );
+
+  return (
+    <PageContainer
+      ghost
+      header={{
+        title: intl.formatMessage({ id: 'menu.playground.text2images' }),
+        breadcrumb: {}
+      }}
+      extra={renderExtra()}
+      className={classNames('playground-container chat')}
+    >
+      <div className="play-ground">
+        <div className="chat">
+          <GroundImages
+            ref={groundTabRef1}
+            modelList={modelList}
+          ></GroundImages>
+        </div>
+      </div>
+    </PageContainer>
+  );
+};
+
+export default TextToImages;