init

c0152a50 · web · 0ce5adcb · c0152a50 · c0152a50 · c0152a50
Commit c0152a50 authored Apr 10, 2024 by web
114 changed files
--- a/.DS_Store
+++ b/.DS_Store
--- a/.gitignore
+++ b/.gitignore
+node_modules
+build
+dist
+.vscode
\ No newline at end of file
--- a/config-overrides.js
+++ b/config-overrides.js
+const webpack = require("webpack");
+
+module.exports = function override(config) {
+  const fallback = config.resolve.fallback || {};
+  Object.assign(fallback, {
+    crypto: false, // require.resolve("crypto-browserify") can be polyfilled here if needed
+    stream: false, // require.resolve("stream-browserify") can be polyfilled here if needed
+    assert: false, // require.resolve("assert") can be polyfilled here if needed
+    http: false, // require.resolve("stream-http") can be polyfilled here if needed
+    https: false, // require.resolve("https-browserify") can be polyfilled here if needed
+    os: false, // require.resolve("os-browserify") can be polyfilled here if needed
+    url: false, // require.resolve("url") can be polyfilled here if needed
+    zlib: false, // require.resolve("browserify-zlib") can be polyfilled here if needed
+  });
+  config.resolve.fallback = fallback;
+  config.plugins = (config.plugins || []).concat([
+    new webpack.ProvidePlugin({
+      process: "process/browser",
+      Buffer: ["buffer", "Buffer"],
+    }),
+  ]);
+  config.ignoreWarnings = [/Failed to parse source map/];
+  config.module.rules.push({
+    test: /\.(js|mjs|jsx)$/,
+    enforce: "pre",
+    loader: require.resolve("source-map-loader"),
+    resolve: {
+      fullySpecified: false,
+    },
+  });
+  return config;
+};
\ No newline at end of file
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
+{
+  "name": "ai",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^13.0.0",
+    "@testing-library/user-event": "^13.2.1",
+    "@traptitech/markdown-it-katex": "^3.6.0",
+    "@wavesurfer/react": "^1.0.4",
+    "@web3auth/ethereum-provider": "^8.0.1",
+    "@web3auth/modal": "^7.3.1",
+    "antd": "^5.15.1",
+    "antd-style": "^3.6.1",
+    "autoprefixer": "^10.4.16",
+    "bootstrap": "^5.3.2",
+    "clipboard-copy": "^4.0.1",
+    "crypto-browserify": "^3.12.0",
+    "jose": "^5.2.3",
+    "moment": "^2.30.1",
+    "postcss": "^8.4.32",
+    "react": "^18.2.0",
+    "react-bootstrap": "^2.9.2",
+    "react-copy-to-clipboard": "^5.1.0",
+    "react-dom": "^18.2.0",
+    "react-markdown": "^9.0.1",
+    "react-router-dom": "^6.21.1",
+    "react-scripts": "5.0.1",
+    "react-slick": "^0.30.2",
+    "react-syntax-highlighter": "^15.5.0",
+    "slick-carousel": "^1.8.1",
+    "stream-browserify": "^3.0.0",
+    "swiper": "^11.0.5",
+    "video-react": "^0.16.0",
+    "vm-browserify": "^1.1.2",
+    "wavesurfer.js": "^7.7.5",
+    "web-vitals": "^2.1.0",
+    "web3": "^4.6.0"
+  },
+  "scripts": {
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test",
+    "eject": "react-app-rewired eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "react-app-rewired": "^2.2.1",
+    "sass": "^1.69.6",
+    "sass-loader": "^13.3.3",
+    "tailwindcss": "^3.4.0"
+  }
+}
--- a/public/.DS_Store
+++ b/public/.DS_Store
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
+<!DOCTYPE html>
+<html lang="en" class="h-full">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content=""
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon.ico" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>AIGIC</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
--- a/public/manifest.json
+++ b/public/manifest.json
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
--- a/public/playgroundData.json
+++ b/public/playgroundData.json
+{
+    "data": [
+        {
+            "key": "sdxl",
+            "icon": "",
+            "tit": "Stable Diffusion XL",
+            "content": "Stable Diffusion is a latent text-to-image diffusion model capable of generating photo-realistic images given any text input.",
+            "tags": ["Image", "text-to-image"]
+        },
+        {
+            "key": "chat",
+            "icon": "",
+            "tit": "ChatGLM2-6B",
+            "content": "ChatGLM2-6B is the second-generation version of the open-source bilingual (Chinese-English) chat model ChatGLM-6B. It retains the smooth conversation flow and low deployment threshold of the first-generation model, while introducing the new features including stronger performance, longer contex and more efficient inference.",
+            "tags": ["LLM", "text"]
+        }
+    ]
+}
\ No newline at end of file
--- a/public/robots.txt
+++ b/public/robots.txt
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
--- a/src/.DS_Store
+++ b/src/.DS_Store
--- a/src/App.css
+++ b/src/App.css
+.App {
+  text-align: center;
+  position: relative;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+.ant-form-item-extra {
+  text-align: left;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
--- a/src/App.js
+++ b/src/App.js
+import { BrowserRouter as Router } from 'react-router-dom';
+import Layout from './components/Layout';
+import AppRoutes from './routes';
+import { ConfigProvider } from 'antd';
+import 'video-react/dist/video-react.css';
+import './assets/fonts/fonts.scss'
+import './index.css';
+import './App.css';
+import './styles.scss'
+import { LoginProvider } from './context/LoginContext';
+
+function App() {
+  const host = window.location.host;
+  const hostname = window.location.hostname;
+  const targetAdminHost = hostname !== 'localhost' ? 'https://console.' + host : 'http://' + host
+  return (
+    <div className="App">
+      <ConfigProvider
+        theme={
+          {
+            token: {
+              colorPrimary: '#722ED1',
+            },
+            components: {
+              Button: {
+                borderRadius: 24,
+                colorPrimary: '#722ED1',
+                defaultColor: '#722ED1',
+                defaultBorderColor: '#722ED1',
+                defaultActiveBg: '#722ED1',
+                defaultActiveBorderColor: '#722ED1',
+                defaultActiveColor: '#fff',
+                primaryShadow: 'none',
+                colorPrimaryBg: '#722ED1',
+              },
+              Select: {
+                optionSelectedBg: '#722ED1',
+              },
+              Table: {
+                headerBg: '#EFDBFF',
+                headerColor: '#000',
+                cellFontSize: 16,
+                headerBorderRadius: 0,
+              }
+            }
+          }
+        }
+      >
+        <Router basename='/' >
+          <LoginProvider>
+            <Layout>
+              <AppRoutes />
+              <iframe id="targetFrame" src={`${targetAdminHost}/receiver`} title="Target Frame" style={{ display: 'none' }} />
+            </Layout>
+          </LoginProvider>
+        </Router>
+      </ConfigProvider>
+
+
+    </div>
+  );
+}
+
+export default App;
--- a/src/App.test.js
+++ b/src/App.test.js
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});
--- a/src/assets/.DS_Store
+++ b/src/assets/.DS_Store
--- a/src/assets/fonts/.DS_Store
+++ b/src/assets/fonts/.DS_Store
--- a/src/assets/fonts/SourceHanSansSC-Bold.woff2
+++ b/src/assets/fonts/SourceHanSansSC-Bold.woff2
--- a/src/assets/fonts/SourceHanSansSC-Heavy.woff2
+++ b/src/assets/fonts/SourceHanSansSC-Heavy.woff2
--- a/src/assets/fonts/SourceHanSansSC-Medium.woff2
+++ b/src/assets/fonts/SourceHanSansSC-Medium.woff2
--- a/src/assets/fonts/SourceHanSansSC-Regular.woff2
+++ b/src/assets/fonts/SourceHanSansSC-Regular.woff2
--- a/src/assets/fonts/fonts.scss
+++ b/src/assets/fonts/fonts.scss
+@font-face {
+    font-family: 'SourceHanSansSC-Bold';
+    src: url('./SourceHanSansSC-Bold.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'SourceHanSansSC-Heavy';
+    src: url('./SourceHanSansSC-Heavy.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'SourceHanSansSC-Medium';
+    src: url('./SourceHanSansSC-Medium.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'SourceHanSansSC-Regular';
+    src: url('./SourceHanSansSC-Regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+}
+
+
+$font_sc_Bold: 'SourceHanSansSC-Bold';
+$font_sc_Heavy: 'SourceHanSansSC-Heavy';
+$font_sc_Medium: 'SourceHanSansSC-Medium';
+$font_sc_Regular: 'SourceHanSansSC-Regular';
\ No newline at end of file
--- a/src/assets/images/.DS_Store
+++ b/src/assets/images/.DS_Store
--- a/src/assets/images/headers/.DS_Store
+++ b/src/assets/images/headers/.DS_Store
--- a/src/assets/images/headers/close.png
+++ b/src/assets/images/headers/close.png
--- a/src/assets/images/headers/menu.png
+++ b/src/assets/images/headers/menu.png
--- a/src/assets/images/headers/right.png
+++ b/src/assets/images/headers/right.png
--- a/src/assets/images/home/.DS_Store
+++ b/src/assets/images/home/.DS_Store
--- a/src/assets/images/home/adminPage.png
+++ b/src/assets/images/home/adminPage.png
--- a/src/assets/images/home/cloud1.png
+++ b/src/assets/images/home/cloud1.png
--- a/src/assets/images/home/cloud2.png
+++ b/src/assets/images/home/cloud2.png
--- a/src/assets/images/home/cloud3.png
+++ b/src/assets/images/home/cloud3.png
--- a/src/assets/images/home/explore.png
+++ b/src/assets/images/home/explore.png
--- a/src/assets/images/home/fifth_bg.png
+++ b/src/assets/images/home/fifth_bg.png
--- a/src/assets/images/home/footer_bg.png
+++ b/src/assets/images/home/footer_bg.png
--- a/src/assets/images/home/footer_line.png
+++ b/src/assets/images/home/footer_line.png
--- a/src/assets/images/home/footer_line2.png
+++ b/src/assets/images/home/footer_line2.png
--- a/src/assets/images/home/footer_line3.png
+++ b/src/assets/images/home/footer_line3.png
--- a/src/assets/images/home/footer_logo.png
+++ b/src/assets/images/home/footer_logo.png
--- a/src/assets/images/home/info.png
+++ b/src/assets/images/home/info.png
--- a/src/assets/images/home/model_icon1.png
+++ b/src/assets/images/home/model_icon1.png
--- a/src/assets/images/home/model_icon2.png
+++ b/src/assets/images/home/model_icon2.png
--- a/src/assets/images/home/model_icon2_bg.png
+++ b/src/assets/images/home/model_icon2_bg.png
--- a/src/assets/images/home/model_icon3.jpg
+++ b/src/assets/images/home/model_icon3.jpg
--- a/src/assets/images/home/model_icon3.png
+++ b/src/assets/images/home/model_icon3.png
--- a/src/assets/images/home/model_icon4.jpg
+++ b/src/assets/images/home/model_icon4.jpg
--- a/src/assets/images/home/model_icon4.png
+++ b/src/assets/images/home/model_icon4.png
--- a/src/assets/images/home/pause.png
+++ b/src/assets/images/home/pause.png
--- a/src/assets/images/home/play-fill.png
+++ b/src/assets/images/home/play-fill.png
--- a/src/assets/images/home/secod_page_bg.png
+++ b/src/assets/images/home/secod_page_bg.png
--- a/src/assets/images/home/sixth_ava.png
+++ b/src/assets/images/home/sixth_ava.png
--- a/src/assets/images/home/sixth_ava2.png
+++ b/src/assets/images/home/sixth_ava2.png
--- a/src/assets/images/home/sixth_ava3.png
+++ b/src/assets/images/home/sixth_ava3.png
--- a/src/assets/images/home/sixth_btmIcon.png
+++ b/src/assets/images/home/sixth_btmIcon.png
--- a/src/assets/images/home/sixth_btmIcon2.png
+++ b/src/assets/images/home/sixth_btmIcon2.png
--- a/src/assets/images/home/sixth_btmIcon3.png
+++ b/src/assets/images/home/sixth_btmIcon3.png
--- a/src/assets/images/home/sound.png
+++ b/src/assets/images/home/sound.png
--- a/src/assets/images/home/third_left_bg.png
+++ b/src/assets/images/home/third_left_bg.png
--- a/src/assets/images/home/third_text_bg.png
+++ b/src/assets/images/home/third_text_bg.png
--- a/src/assets/images/home/third_text_bg2.png
+++ b/src/assets/images/home/third_text_bg2.png
--- a/src/assets/images/home/third_text_bg3.png
+++ b/src/assets/images/home/third_text_bg3.png
--- a/src/assets/images/home/third_text_bg4.png
+++ b/src/assets/images/home/third_text_bg4.png
--- a/src/assets/images/logo_.png
+++ b/src/assets/images/logo_.png
--- a/src/assets/images/logo_white.png
+++ b/src/assets/images/logo_white.png
--- a/src/assets/images/playground/.DS_Store
+++ b/src/assets/images/playground/.DS_Store
--- a/src/assets/images/playground/add.png
+++ b/src/assets/images/playground/add.png
--- a/src/assets/images/playground/change.png
+++ b/src/assets/images/playground/change.png
--- a/src/assets/images/playground/collect.png
+++ b/src/assets/images/playground/collect.png
--- a/src/assets/images/playground/collect_filter.png
+++ b/src/assets/images/playground/collect_filter.png
--- a/src/assets/images/playground/collected.png
+++ b/src/assets/images/playground/collected.png
--- a/src/assets/images/playground/copy.png
+++ b/src/assets/images/playground/copy.png
--- a/src/assets/images/playground/download.png
+++ b/src/assets/images/playground/download.png
--- a/src/assets/images/playground/loading.gif
+++ b/src/assets/images/playground/loading.gif
--- a/src/assets/images/playground/loading.png
+++ b/src/assets/images/playground/loading.png
--- a/src/assets/images/playground/no_data.png
+++ b/src/assets/images/playground/no_data.png
--- a/src/assets/images/playground/question.png
+++ b/src/assets/images/playground/question.png
--- a/src/assets/images/playground/res_bg.png
+++ b/src/assets/images/playground/res_bg.png
--- a/src/assets/images/playground/search.png
+++ b/src/assets/images/playground/search.png
--- a/src/assets/images/playground/type_chat.png
+++ b/src/assets/images/playground/type_chat.png
--- a/src/assets/images/playground/type_img.png
+++ b/src/assets/images/playground/type_img.png
--- a/src/assets/images/playground/type_mv.png
+++ b/src/assets/images/playground/type_mv.png
--- a/src/assets/images/playground/type_search.png
+++ b/src/assets/images/playground/type_search.png
--- a/src/assets/images/playground/type_video.png
+++ b/src/assets/images/playground/type_video.png
--- a/src/components/AudioPlayer.js
+++ b/src/components/AudioPlayer.js
+import React, { useCallback, useRef } from 'react';
+import { useWavesurfer } from '@wavesurfer/react'
+
+const formatTime = (seconds) => [seconds / 60, seconds % 60].map((v) => `0${Math.floor(v)}`.slice(-2)).join(':')
+
+const AudioPlayer = ({ audioUrl }) => {
+    const containerRef = useRef(null)
+
+    const { wavesurfer, isPlaying, currentTime } = useWavesurfer({
+        container: containerRef,
+        height: 150,
+        waveColor: '#fff',
+        progressColor: '#722ED1',
+        url: audioUrl,
+    })
+
+    const onPlayPause = useCallback(() => {
+        try {
+            wavesurfer && wavesurfer.playPause()
+        } catch (error) {
+            console.log(error)
+        }
+
+    }, [wavesurfer])
+
+    return (
+        <>
+            {(
+                <>
+                    <div
+                        className="playIcon"
+                        onClick={() => {
+                            if (!wavesurfer?.getDuration()) {
+                                return
+                            }
+                            onPlayPause()
+                        }}>
+                        {!isPlaying ? <img className="handleBtn" src={require('../assets/images/home/play-fill.png')} alt="" /> : <img className="handleBtn" src={require('../assets/images/home/pause.png')} alt="" />}
+                    </div>
+                    <div className="times">{formatTime(currentTime)}</div>
+                    <div className="process">
+                        <div ref={containerRef}></div>
+                        {!wavesurfer?.getDuration() && <div className="process_null"></div>}
+                    </div>
+                    <div className="times">{formatTime(wavesurfer?.getDuration())}</div>
+                </>
+            )}
+        </>
+    );
+};
+
+export default AudioPlayer;
--- a/src/components/CodeSnippet.js
+++ b/src/components/CodeSnippet.js
+// CodeSnippet.js
+import React, { useState } from 'react';
+import { message } from 'antd';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { duotoneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+
+const CodeSnippet = ({ code, isHome, lang }) => {
+    const handleCopy = (e) => {
+        navigator.clipboard.writeText(e)
+            .then(() => {
+                message.success('Copied');
+            })
+            .catch(() => {
+                message.error('Copied Failed');
+            });
+    };
+
+    return (
+        <div className='overflow-auto' style={!isHome ? { height: '23.02vw' } : {}}>
+            <CopyToClipboard text={code} onCopy={handleCopy}>
+                <img className='absolute top-2 right-4 cursor-pointer' style={{height: '1.25vw', width: '1.25vw'}} src={require('../assets/images/playground/copy.png')} alt="" />
+            </CopyToClipboard>
+            <SyntaxHighlighter language={lang} customStyle={{ margin: 0, height: '100%', backgroundColor: '#22075E', fontSize: '.83vw', fontWeight: 400, color: '#fff',  textShadow: 'none', fontFamily: 'SourceHanSansSC-Regular' }}>
+                {code && code.length ? code : "Stay tuned, we'll be here soon"}
+            </SyntaxHighlighter>
+        </div>
+    );
+};
+
+export default CodeSnippet;
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
+const Footer = () => {
+    return (
+        <footer className="flex-0 relative px-8 py-3 bg-zinc-900 border-t border-zinc-800">
+            <div className="flex flex-row items-center justify-between gap-5">
+                <div className="flex gap-6">
+                    <p className="text-xs text-zinc-400">© AIGIC Labs</p>
+                </div>
+            </div>
+        </footer>
+    )
+}
+
+export default Footer
\ No newline at end of file
--- a/src/components/Header.js
+++ b/src/components/Header.js
+import { useLocation } from 'react-router-dom';
+import './styles/header_dark.scss'
+import { useState } from "react";
+
+
+const Header = () => {
+    const location = useLocation();
+    const pathname = location.pathname;
+    const host = window.location.host;
+    const hostname = window.location.hostname;
+    const targetDocsHost = hostname !== 'localhost' ? 'https://docs.' + host.replace('www.', '') : 'http://' + host
+
+    const [isExpanded, setIsExpanded] = useState(false);
+
+    const toggleExpand = () => {
+        setIsExpanded(!isExpanded);
+    };
+
+
+    return (
+        <header style={isExpanded || pathname !== '/' ? { backgroundColor: '#22075E' } : {}}>
+            <nav className='flex flex-row items-center justify-between'>
+                <a href="/">
+                    <div className="logo">
+                        <img src={require('../assets/images/logo_.png')} alt="" />
+                    </div>
+                </a>
+
+
+                <div className="menu">
+                    <img className='menuIcon' src={require(`../assets/images/headers/${isExpanded ? 'close' : 'menu'}.png`)} onClick={toggleExpand} alt="" />
+                    <ul className={isExpanded ? 'expanded' : 'collapsed'}>
+                        <li>
+                            <a href="/playground" onClick={toggleExpand}>
+                                <span>Built with AIGIC</span>
+                                <img src={require('../assets/images/headers/right.png')} alt="" />
+                            </a>
+                        </li>
+
+                        <li>
+                            <a href={targetDocsHost} target='_blank' onClick={toggleExpand}>
+                                <span>Docs</span>
+                                <img src={require('../assets/images/headers/right.png')} alt="" />
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+
+            </nav>
+        </header>
+    );
+};
+
+export default Header;
\ No newline at end of file
--- a/src/components/HeaderDropdown.js
+++ b/src/components/HeaderDropdown.js
+import { Dropdown } from 'antd';
+import React from 'react';
+
+const HeaderDropdown = ({ ...restProps }) => {
+    return <Dropdown {...restProps} />;
+};
+
+export default HeaderDropdown;
\ No newline at end of file
--- a/src/components/Layout.js
+++ b/src/components/Layout.js
+import React from 'react';
+import Header from './Header';
+import Footer from './Footer';
+
+const Layout = ({ children }) => {
+  return (
+    <div className='relative flex min-h-screen flex-col overflow-hidden text-zinc-100'>
+      <Header></Header>
+      <div className="flex flex-1 flex-col content">
+        {children}
+      </div>
+      {/* <Footer></Footer> */}
+    </div>
+  );
+};
+
+export default Layout;
--- a/src/components/MarkdownRenderer.js
+++ b/src/components/MarkdownRenderer.js
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+const CodeBlock = ({ language, children }) => {
+  return (
+    <SyntaxHighlighter language={language} style={vscDarkPlus}>
+      {children}
+    </SyntaxHighlighter>
+  );
+};
+
+const MarkdownRenderer = ({ markdownContent }) => {
+  return (
+    <ReactMarkdown
+      components={{
+        code: CodeBlock,
+      }}
+    >
+      {markdownContent}
+    </ReactMarkdown>
+  );
+};
+
+export default MarkdownRenderer;
--- a/src/components/styles/header_dark.scss
+++ b/src/components/styles/header_dark.scss
+header {
+    background: #000;
+    padding: 3.08vw 6.15vw;
+    width: 100%;
+    color: #fff;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 100;
+
+    nav {
+        .logo img {
+            width: 23.59vw;
+            height: 8.21vw;
+        }
+
+        .menu {
+            .menuIcon {
+                height: 6.15vw;
+                width: 6.15vw;
+            }
+
+            .expanded {
+                height: calc(100vh - 14.36vw);
+                display: flex;
+                opacity: 1;
+                transition: all 0.3s ease;
+                position: fixed;
+                top: 14.36vw;
+                left: 0;
+                padding: 2.05vw 0;
+            }
+
+            .collapsed {
+                height: 0;
+                padding: 0;
+                position: absolute;
+                left: 0;
+                top: 14.36vw;
+            }
+
+            ul {
+                overflow: hidden;
+                height: 0;
+                opacity: 0;
+                width: 100%;
+                z-index: 99;
+                display: flex;
+                flex-direction: column;
+                background-color: #22075E;
+
+                li {
+                    width: 100%;
+
+                    a {
+                        padding: 2.05vw 6.15vw;
+
+                        font-size: 2.56vw;
+                        font-family: SourceHanSansSC-Medium;
+                        font-weight: 500;
+                        display: flex;
+                        flex-direction: row;
+                        justify-content: space-between;
+
+                        img {
+                            height: 4.1vw;
+                            width: 4.1vw;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
--- a/src/context/LoginContext.js
+++ b/src/context/LoginContext.js
+import React, { createContext,useContext, useState } from 'react';
+import { doLogin, doLogout } from '../utils/login';
+
+
+const LoginContext = createContext();
+
+export const LoginProvider = ({ children }) => {
+    const [isLogin, setIsLogin] = useState(false);
+  
+    const login = (callbak) => {
+      // 登录逻辑...
+        doLogin((res,error) => {
+            console.log("doLogin",res,error)
+            if (error == null) {
+                setIsLogin(true)
+            }
+            callbak(res,error)
+        })
+    };
+  
+    const logout = (callbak) => {
+      // 登出逻辑...
+      doLogout((res,error) => {
+        console.log("doLogout",res,error)
+        if (error == null) {
+            setIsLogin(false)
+        }
+        callbak(res,error)
+    })
+    };
+  
+    return (
+      <LoginContext.Provider value={{ isLogin, setIsLogin,login, logout }}>
+        {children}
+      </LoginContext.Provider>
+    );
+  };
+
+  export const useLoginContext = () => useContext(LoginContext);
+
+  
+  
\ No newline at end of file
--- a/src/index.css
+++ b/src/index.css
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  margin: 0;
+  font-family: SourceHanSansSC-Regular;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+} */
--- a/src/index.js
+++ b/src/index.js
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+// document.documentElement.classList.add('dark');
+
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();
--- a/src/logo.svg
+++ b/src/logo.svg
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
\ No newline at end of file
--- a/src/pages/.DS_Store
+++ b/src/pages/.DS_Store
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
--- a/src/pages/Info.jsx
+++ b/src/pages/Info.jsx
+import './styles/info.scss'
+import { Link } from 'react-router-dom'
+const Info = () => {
+    return (
+        <div className="info">
+            <img src={require('../assets/images/home/info.png')} alt="" />
+            <p>Please Login With Your Computer To Use Full Functionality</p>
+            <p className='info_text'>Using your computer to log in to AIGIC, not only can you use the complete functions of all models, copy model codes to your application with just one click, but you can also receive free Computility every day.</p>
+            <Link to="/playground"><button className="exploreBtn">Explore Other</button></Link>
+        </div>
+    )
+}
+
+export default Info;
\ No newline at end of file
--- a/src/pages/Playground_list.jsx
+++ b/src/pages/Playground_list.jsx
+
+import { Row, Col, Button, Tabs, Input, Flex, Spin, message } from 'antd'
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import Fetch_ from "../utils/fetch";
+import { useLoginContext } from '../context/LoginContext';
+
+import './styles/playground_list.scss'
+
+const PlaygroundList = () => {
+    const { isLogin, login } = useLoginContext();
+
+    const [loading, setLoading] = useState(false);
+    const navigate = useNavigate();
+
+    async function handleCollect(event, type, id) {
+        event.stopPropagation()
+        if (!isLogin) {
+            login((res, error) => {
+                if (error == null) handleCollect()
+            })
+            return
+        }
+        type = type === 0 ? 'add' : 'cancel'
+        try {
+            const result = await Fetch_(`/admin/api/favorite/${type}`, {
+                method: "post",
+                body: JSON.stringify({ task_type_id: Number(id) }),
+            })
+            const res = await result.json();
+            if (res.code === 200) {
+                message.success(type === 'add' ? 'Collection successful' : 'Cancel collection successful')
+                fetchData('collect')
+            }
+        } catch (error) {
+            console.log(error)
+        }
+    }
+
+    async function getData(params, eventIn) {
+        try {
+            if(!eventIn) setLoading(true)
+            const res = await Fetch_('/admin/api/task/models', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ ...params, size: 100 }),
+            });
+            const jsonData = await res.json()
+            return jsonData
+        } catch (error) {
+            setLoading(false)
+            console.log(error)
+        }
+
+    }
+
+    async function getCategorys(params) {
+        const res = await fetch('/admin/api/task/allcategorys', {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json',
+            }
+        });
+
+        const jsonData = await res.json()
+        return jsonData
+    }
+
+    const [dataArr, setDataArr] = useState([])
+    const [activeTab, setActiveTab] = useState(0);
+    const [categorys, setCategorys] = useState([])
+    const [keyword, setKeyword] = useState('')
+
+    const handleTabClick = async (tab) => {
+        console.log("handleTabClick", tab)
+        tab = parseInt(tab)
+        setActiveTab(tab);
+        const data = await getData({ keyword: keyword, category: tab });
+        setDataArr(data.data.data)
+        setLoading(false)
+    };
+
+    const handleSearch = async () => {
+        const data = await getData({ keyword });
+        setDataArr(data.data.data)
+        setLoading(false)
+    }
+
+    const goPlayground = (item) => {
+        navigate(`/info`)
+    }
+
+    async function fetchData(eventIn) {
+
+        const data = await getData({}, eventIn)
+        if (data && data.data && data.data.data) {
+            setDataArr(data.data.data)
+            setLoading(false)
+            const categoryData = await getCategorys()
+            if (categoryData && categoryData.data && categoryData.data.length) {
+                let categorys = categoryData.data.map(item => {
+                    item.key = item.id + ""
+                    item.label = item.en_desc
+                    return item
+                })
+                categorys.unshift({
+                    key: "0",
+                    label: "All",
+                    id: 0,
+                    desc: "All",
+                    en_desc: "All",
+                    sort: 0,
+                })
+                setCategorys(categorys)
+            }
+        }
+
+    }
+
+    useEffect(() => {
+        fetchData()
+    }, [])
+    return (
+        <div className="playground_list">
+            <div className="list_content">
+                <div className="search">
+                    <Input allowClear onChange={e => setKeyword(e.target.value)} placeholder="Search" prefix={<img style={{ height: '4.1vw', width: '4.1vw' }} src={require('../assets/images/playground/search.png')} />} />
+                    <button onClick={()=> handleSearch()}>Search</button>
+                    {/* <Button icon={<img src={require('../assets/images/playground/collect_filter.png')} />}> default collation</Button> */}
+                </div>
+
+                <div className="list">
+                    {loading ? <Spin size='large' spinning={loading} />
+                        : !dataArr || dataArr.length <= 0 && !loading ? (
+                            <div className="no_data">
+                                <img src={require('../assets/images/playground/no_data.png')} alt="" />
+                                <span>You haven't collected the model yet</span>
+                            </div>
+                        ) : (
+                            <Flex wrap="wrap" className="list_items">
+                                {
+                                    dataArr && dataArr.length > 0 && dataArr.map((item, index) => {
+                                        return (
+                                            <div key={index} className="item" onClick={() => goPlayground(item)}>
+                                                <div className="item_top">
+                                                    {/* 2 4 7 11 text */}
+                                                    <div className="tags">
+                                                        {
+                                                            item.type === 1 || item.type === 6 || item.type === 8 ?
+                                                                <img className='typeIcon' src={require('../assets/images/playground/type_img.png')} alt="" />
+                                                                : item.type === 2 || item.type === 4 || item.type === 7 || item.type === 11 ?
+                                                                    <img className='typeIcon' src={require('../assets/images/playground/type_chat.png')} alt="" />
+                                                                    : item.type === 3 || item.type === 5 || item.type === 9 ?
+                                                                        <img className='typeIcon' src={require('../assets/images/playground/type_mv.png')} alt="" />
+                                                                        : item.type === 10 ?
+                                                                            <img className='typeIcon' src={require('../assets/images/playground/type_video.png')} alt="" />
+                                                                            : <img className='typeIcon' src={require('../assets/images/playground/type_img.png')} alt="" />
+                                                        }
+                                                        {item.tags && item.tags.map((tag, index) => {
+                                                            return (
+                                                                <span key={index} className="tag">
+                                                                    {tag}
+                                                                </span>
+                                                            )
+                                                        })}
+                                                    </div>
+                                                </div>
+                                                <div className="item_con">
+                                                    <span className='name'>{item.tit}</span>
+                                                    <span className='desc'>{item.content}</span>
+                                                </div>
+                                            </div>
+                                        )
+                                    })
+                                }
+
+                            </Flex>
+                        )}
+
+
+                </div>
+
+
+            </div>
+        </div>
+    )
+}
+
+export default PlaygroundList
\ No newline at end of file
--- a/src/pages/ReceiveMessage.jsx
+++ b/src/pages/ReceiveMessage.jsx
+import { useEffect } from "react";
+
+const ReceiveMessage = () => {
+    const handleMessage = (event) => {
+        const data = event.data;
+        if (data.token) localStorage.setItem('token', data.token)
+        // 验证消息来源
+        if (event.origin !== window.location.origin) {
+            console.log('(Web)Received message from invalid origin:', event.origin, window.location.origin);
+            return;
+        }
+    
+        // 处理收到的消息
+        console.log('(Web)Received message:', event.data);
+    };
+
+    
+    useEffect(()=> {
+        window.addEventListener('message', handleMessage);
+    }, [])
+
+    return <div></div>
+}
+
+export default ReceiveMessage;
\ No newline at end of file
--- a/src/pages/components/Playground_API.jsx
+++ b/src/pages/components/Playground_API.jsx
--- a/src/pages/components/Playground_Version.jsx
+++ b/src/pages/components/Playground_Version.jsx
--- a/src/pages/styles/home_dark.scss
+++ b/src/pages/styles/home_dark.scss
--- a/src/pages/styles/info.scss
+++ b/src/pages/styles/info.scss
--- a/src/pages/styles/playground.scss
+++ b/src/pages/styles/playground.scss
--- a/src/pages/styles/playground_list.scss
+++ b/src/pages/styles/playground_list.scss
--- a/src/reportWebVitals.js
+++ b/src/reportWebVitals.js
--- a/src/routes.js
+++ b/src/routes.js
--- a/src/setupProxy.js
+++ b/src/setupProxy.js
--- a/src/setupTests.js
+++ b/src/setupTests.js
--- a/src/styles.scss
+++ b/src/styles.scss
--- a/src/utils/fetch.js
+++ b/src/utils/fetch.js
--- a/src/utils/login.js
+++ b/src/utils/login.js
--- a/tailwind.config.js
+++ b/tailwind.config.js