inti

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

README copy.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

layouts/main.tsx

@@ -0,0 +1,57 @@
+import dynamic from 'next/dynamic'
+import Link from 'next/link'
+import React, { ReactNode } from 'react';
+
+import {
+  SmileOutlined,
+} from '@ant-design/icons'
+import withTheme from '../theme';
+
+import { Route, MenuDataItem } from '@ant-design/pro-layout/lib/typing'
+const ProLayout = dynamic(() => import('@ant-design/pro-layout'), {
+  ssr: false,
+})
+
+const ROUTES: Route = {
+  path: '/',
+  routes: [
+    {
+      path: '/',
+      name: 'MidJourney',
+      icon: <SmileOutlined />,
+    },
+  ],
+}
+
+const menuHeaderRender = (
+  logo: React.ReactNode,
+  title: React.ReactNode,
+) => (
+    <Link href="/">
+        {logo}
+        {title}
+    </Link>
+  )
+
+const menuItemRender = (options: MenuDataItem, element: React.ReactNode) => (
+  <Link href={options.path ?? '/'}>
+   {element}
+  </Link>
+)
+interface MainProps {
+  children: ReactNode;
+}
+export default function Main({ children }: MainProps) {
+  return withTheme(
+    <ProLayout
+      logo={"logo.png"}
+      title="AI Draw"
+      style={{ minHeight: '100vh' }}
+      route={ROUTES}
+      menuItemRender={menuItemRender}
+      menuHeaderRender={menuHeaderRender}
+    >
+      {children}
+    </ProLayout>
+  )
+}

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  transpilePackages: ['antd'],
+};
+
+module.exports = nextConfig;

package.json

@@ -0,0 +1,53 @@
+{
+  "name": "midjourney-ui",
+  "version": "1.0.0",
+  "description": "midjourney-ui",
+  "main": "index.js",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "predev": "ts-node --project ./tsconfig.node.json ./scripts/genAntdCss.tsx",
+    "prebuild": "cross-env NODE_ENV=production ts-node --project ./tsconfig.node.json ./scripts/genAntdCss.tsx"
+  },
+
+  "devDependencies": {
+    "@ant-design/cssinjs": "^1.3.0",
+    "@ant-design/static-style-extract": "~1.0.1",
+    "@next/font": "^13.1.1",
+    "@types/marked": "^4.0.8",
+    "@types/node": "^18.11.17",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
+    "antd": "^5.1.0",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.30.0",
+    "eslint-config-next": "^13.1.1",
+    "next": "^13.1.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "ts-node": "^10.9.1",
+    "tslib": "^2.5.0",
+    "typescript": "^4.9.4"
+  },
+  "dependencies": {
+    "@ant-design/pro-layout": "^7.10.3",
+    "axios": "^1.3.6",
+    "marked": "^4.3.0"
+  },
+  "keywords": [
+    "midjourney-api",
+    "midjourney"
+  ],
+  "author": "Eric Yang <[email protected]>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/erictik/midjourney-ui.git"
+  },
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/erictik/midjourney-ui/issues"
+  },
+  "homepage": "https://github.com/erictik/midjourney-ui#readme"
+}

pages/_app.tsx

@@ -0,0 +1,12 @@
+import '../public/antd.min.css';
+import '../styles/globals.css';
+import type { AppProps } from 'next/app';
+import MainLayout from '../layouts/main'
+
+export default function App({ Component, pageProps }: AppProps) {
+  return (
+    < MainLayout>
+      <Component {...pageProps} />
+    </MainLayout>
+  );
+}

pages/_document.tsx

@@ -0,0 +1,32 @@
+import Document, {
+  Html,
+  Head,
+  Main,
+  NextScript,
+  DocumentContext,
+} from 'next/document';
+export default class MyDocument extends Document {
+  static async getInitialProps(ctx: DocumentContext) {
+    const initialProps = await Document.getInitialProps(ctx);
+    return {
+      ...initialProps,
+      styles: (
+        <>
+          {initialProps.styles}
+        </>
+      ),
+    };
+  }
+
+  render() {
+    return (
+      <Html lang='en'>
+        <Head />
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}

pages/api/hello.ts

@@ -0,0 +1,13 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type Data = {
+  name: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+  res.status(200).json({ name: 'John Doe' })
+}

pages/index.tsx

@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import { Input, Button, List } from 'antd';
+import { SendOutlined } from '@ant-design/icons';
+import { marked } from 'marked';
+
+const { TextArea } = Input;
+
+interface Message {
+  text: string;
+  timestamp: Date;
+}
+
+const Index: React.FC = () => {
+  const [inputValue, setInputValue] = useState('');
+  const [messages, setMessages] = useState<Message[]>([]);
+
+  const handleMessageSend = () => {
+    const newMessage: Message = {
+      text: inputValue.trim(),
+      timestamp: new Date(),
+    };
+
+    if (newMessage.text) {
+      setMessages([...messages, newMessage]);
+      setInputValue('');
+    }
+  };
+
+  const renderMessage = (message: Message) => {
+    const html = marked(message.text);
+    return (
+      <List.Item>
+        <div dangerouslySetInnerHTML={{ __html: html }} />
+        <br />
+        <small>{message.timestamp.toLocaleTimeString()}</small>
+      </List.Item>
+    );
+  };
+
+  return (
+    <div>
+      <List
+        dataSource={messages}
+        renderItem={renderMessage}
+        style={{ height: 400, overflowY: 'scroll' ,maxWidth: '36rem'}}
+      />
+       <div style={{ position: 'relative' }}>
+        <TextArea
+          value={inputValue}
+          onChange={(e) => setInputValue(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' && e.shiftKey) {
+              setInputValue(`${inputValue}\n`);
+              e.preventDefault();
+            } else if (e.key === 'Enter') {
+              handleMessageSend();
+              e.preventDefault();
+            }
+          }}
+          placeholder="Start typing your main idea..."
+          autoSize={{ minRows: 1, maxRows: 6 }}
+          style={{ paddingRight: 30 }}
+        />
+        <Button
+          type="primary"
+          onClick={handleMessageSend}
+          icon={<SendOutlined style={{color: "#000"}} />}
+          title='Send'
+          style={{ position: 'absolute', bottom: 0, right: 0 ,background: 'transparent', border: 'none', boxShadow: 'none'}}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Index;

scripts/genAntdCss.tsx

@@ -0,0 +1,17 @@
+import fs from "fs";
+import { extractStyle } from "@ant-design/static-style-extract";
+import withTheme from "../theme";
+
+const outputPath = "./public/antd.min.css";
+
+// 1. default theme
+
+// const css = extractStyle();
+
+// 2. With custom theme
+
+const css = extractStyle(withTheme);
+
+fs.writeFileSync(outputPath, css);
+
+console.log(`🎉 Antd CSS generated at ${outputPath}`);