From 6e084c2386ae963e20380a52b964d4522c5292cf Mon Sep 17 00:00:00 2001
From: Eric <eric@baochi.xin>
Date: Thu, 4 May 2023 21:41:49 +0800
Subject: [PATCH 1/2] add tag

---
 components/tag.tsx    |  44 ++++++++++
 interfaces/message.ts |   5 +-
 pages/index.tsx       | 190 ++++++++++++++++++++++++++++++++++--------
 3 files changed, 203 insertions(+), 36 deletions(-)
 create mode 100644 components/tag.tsx

diff --git a/components/tag.tsx b/components/tag.tsx
new file mode 100644
index 0000000..acce46f
--- /dev/null
+++ b/components/tag.tsx
@@ -0,0 +1,44 @@
+import React, { useState } from "react";
+import { Space, Tag } from "antd";
+
+const { CheckableTag } = Tag;
+
+interface Props {
+  Data: string[];
+  onClick?: (tag: string) => void;
+}
+
+const App = ({ Data, onClick }: Props) => {
+  const [selectedTags, setSelectedTags] = useState<string[]>([]);
+  // const tagsData = ["V1", "V2", "V3", "V4"];
+  const handleChange = (tag: string, checked: boolean) => {
+    if (!checked) return;
+    const nextSelectedTags = checked
+      ? [...selectedTags, tag]
+      : selectedTags.filter((t) => t !== tag);
+    console.log("You are interested in: ", nextSelectedTags);
+    onClick && onClick(tag);
+    setSelectedTags(nextSelectedTags);
+  };
+
+  return (
+    <>
+      <Space className="ml-5" size={16} wrap>
+        {Data.map((tag) => (
+          <CheckableTag
+            className={
+              selectedTags.includes(tag) ? "bg-neutral-700" : "bg-neutral-200"
+            }
+            key={tag}
+            checked={selectedTags.includes(tag)}
+            onChange={(checked) => handleChange(tag, checked)}
+          >
+            {tag}
+          </CheckableTag>
+        ))}
+      </Space>
+    </>
+  );
+};
+
+export default App;
diff --git a/interfaces/message.ts b/interfaces/message.ts
index 585899d..f9125de 100644
--- a/interfaces/message.ts
+++ b/interfaces/message.ts
@@ -1,4 +1,7 @@
 export interface Message {
   text: string;
   img: string;
-}
\ No newline at end of file
+  msgID?: string;
+  msgHash?: string;
+  hasTag: boolean;
+}
diff --git a/pages/index.tsx b/pages/index.tsx
index e5a532b..3c4185c 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,73 +1,186 @@
-import React, { useState } from 'react';
-import { Input, Button, List, Image, Typography } from 'antd';
-import { SendOutlined } from '@ant-design/icons';
-import { Imagine } from '../request';
-import { MJMessage } from 'midjourney';
-import { Message } from '../interfaces/message';
-
+import React, { useState } from "react";
+import { Input, Button, List, Image, Typography } from "antd";
+import { SendOutlined } from "@ant-design/icons";
+import { Imagine, Upscale, Variation } from "../request";
+import { MJMessage } from "midjourney";
+import { Message } from "../interfaces/message";
+import Tag from "../components/tag";
 const { TextArea } = Input;
-const { Text } = Typography
+const { Text } = Typography;
 
 const Index: React.FC = () => {
-  const [inputValue, setInputValue] = useState('');
+  const [inputValue, setInputValue] = useState("");
   const [inputDisable, setInputDisable] = useState(false);
   const [messages, setMessages] = useState<Message[]>([]);
 
   const handleMessageSend = async () => {
     let newMessage: Message = {
       text: inputValue.trim(),
-      img: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6UAAABRWlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSSwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwSDCIMogwMCcmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsis7PPOq3QdDFcvjV3jOD1boQVTPQrgSkktTgbSf4A4LbmgqISBgTEFyFYuLykAsTuAbJEioKOA7DkgdjqEvQHEToKwj4DVhAQ5A9k3gGyB5IxEoBmML4BsnSQk8XQkNtReEOBxcfXxUQg1Mjc0dyHgXNJBSWpFCYh2zi+oLMpMzyhRcASGUqqCZ16yno6CkYGRAQMDKMwhqj/fAIcloxgHQqxAjIHBEugw5sUIsSQpBobtQPdLciLEVJYzMPBHMDBsayhILEqEO4DxG0txmrERhM29nYGBddr//5/DGRjYNRkY/l7////39v///y4Dmn+LgeHANwDrkl1AuO+pmgAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAwqADAAQAAAABAAAAwwAAAAD9b/HnAAAHlklEQVR4Ae3dP3PTWBSGcbGzM6GCKqlIBRV0dHRJFarQ0eUT8LH4BnRU0NHR0UEFVdIlFRV7TzRksomPY8uykTk/zewQfKw/9znv4yvJynLv4uLiV2dBoDiBf4qP3/ARuCRABEFAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghgg0Aj8i0JO4OzsrPv69Wv+hi2qPHr0qNvf39+iI97soRIh4f3z58/u7du3SXX7Xt7Z2enevHmzfQe+oSN2apSAPj09TSrb+XKI/f379+08+A0cNRE2ANkupk+ACNPvkSPcAAEibACyXUyfABGm3yNHuAECRNgAZLuYPgEirKlHu7u7XdyytGwHAd8jjNyng4OD7vnz51dbPT8/7z58+NB9+/bt6jU/TI+AGWHEnrx48eJ/EsSmHzx40L18+fLyzxF3ZVMjEyDCiEDjMYZZS5wiPXnyZFbJaxMhQIQRGzHvWR7XCyOCXsOmiDAi1HmPMMQjDpbpEiDCiL358eNHurW/5SnWdIBbXiDCiA38/Pnzrce2YyZ4//59F3ePLNMl4PbpiL2J0L979+7yDtHDhw8vtzzvdGnEXdvUigSIsCLAWavHp/+qM0BcXMd/q25n1vF57TYBp0a3mUzilePj4+7k5KSLb6gt6ydAhPUzXnoPR0dHl79WGTNCfBnn1uvSCJdegQhLI1vvCk+fPu2ePXt2tZOYEV6/fn31dz+shwAR1sP1cqvLntbEN9MxA9xcYjsxS1jWR4AIa2Ibzx0tc44fYX/16lV6NDFLXH+YL32jwiACRBiEbf5KcXoTIsQSpzXx4N28Ja4BQoK7rgXiydbHjx/P25TaQAJEGAguWy0+2Q8PD6/Ki4R8EVl+bzBOnZY95fq9rj9zAkTI2SxdidBHqG9+skdw43borCXO/ZcJdraPWdv22uIEiLA4q7nvvCug8WTqzQveOH26fodo7g6uFe/a17W3+nFBAkRYENRdb1vkkz1CH9cPsVy/jrhr27PqMYvENYNlHAIesRiBYwRy0V+8iXP8+/fvX11Mr7L7ECueb/r48eMqm7FuI2BGWDEG8cm+7G3NEOfmdcTQw4h9/55lhm7DekRYKQPZF2ArbXTAyu4kDYB2YxUzwg0gi/41ztHnfQG26HbGel/crVrm7tNY+/1btkOEAZ2M05r4FB7r9GbAIdxaZYrHdOsgJ/wCEQY0J74TmOKnbxxT9n3FgGGWWsVdowHtjt9Nnvf7yQM2aZU/TIAIAxrw6dOnAWtZZcoEnBpNuTuObWMEiLAx1HY0ZQJEmHJ3HNvGCBBhY6jtaMoEiJB0Z29vL6ls58vxPcO8/zfrdo5qvKO+d3Fx8Wu8zf1dW4p/cPzLly/dtv9Ts/EbcvGAHhHyfBIhZ6NSiIBTo0LNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiEC/wGgKKC4YMA4TAAAAABJRU5ErkJggg=="
+      hasTag: false,
+      img: "data:image/png;base64,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",
     };
 
     if (newMessage.text) {
       const oldMessages = messages;
       setInputDisable(true);
       setMessages([...oldMessages, newMessage]);
-      console.log("newMessage.text")
-      await Imagine(JSON.stringify({ prompt: newMessage.text }), (data: MJMessage) => {
-        console.log(data)
-        newMessage.img = data.uri;
-        setMessages([...oldMessages, newMessage]);
-      })
-      setInputValue('');
+      console.log("newMessage.text");
+      await Imagine(
+        JSON.stringify({ prompt: newMessage.text }),
+        (data: MJMessage) => {
+          console.log(data);
+          newMessage.img = data.uri;
+          newMessage.hasTag = true;
+          newMessage.msgHash = data.hash;
+          newMessage.msgID = data.id;
+          setMessages([...oldMessages, newMessage]);
+        }
+      );
+      setInputValue("");
       setInputDisable(false);
     }
   };
 
-  const renderMessage = ({ text, img }: Message) => {
-    // const html = marked(text);
+  const upscale = async (
+    pormpt: string,
+    msgId: string,
+    msgHash: string,
+    index: number
+  ) => {
+    let newMessage: Message = {
+      text: `${pormpt} upscale U${index}`,
+      hasTag: false,
+      img: "data:image/png;base64,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",
+    };
+
+    const oldMessages = messages;
+    setInputDisable(true);
+    setMessages([...oldMessages, newMessage]);
+    await Upscale(
+      JSON.stringify({ content: pormpt, index, msgId, msgHash }),
+      (data: MJMessage) => {
+        newMessage.img = data.uri;
+        newMessage.msgHash = data.hash;
+        newMessage.msgID = data.id;
+        setMessages([...oldMessages, newMessage]);
+      }
+    );
+    setInputDisable(false);
+  };
+  const variation = async (
+    pormpt: string,
+    msgId: string,
+    msgHash: string,
+    index: number
+  ) => {
+    let newMessage: Message = {
+      text: `${pormpt} variation V${index}`,
+      hasTag: false,
+      img: "data:image/png;base64,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",
+    };
+
+    const oldMessages = messages;
+    setInputDisable(true);
+    setMessages([...oldMessages, newMessage]);
+    await Variation(
+      JSON.stringify({ content: pormpt, index, msgId, msgHash }),
+      (data: MJMessage) => {
+        newMessage.img = data.uri;
+        newMessage.hasTag = true;
+        newMessage.msgHash = data.hash;
+        newMessage.msgID = data.id;
+        setMessages([...oldMessages, newMessage]);
+      }
+    );
+    setInputDisable(false);
+  };
+  const tagClick = (
+    pormpt: string,
+    msgId: string,
+    msgHash: string,
+    tag: string
+  ) => {
+    switch (tag) {
+      case "V1":
+        variation(pormpt, msgId, msgHash, 1);
+        break;
+      case "V2":
+        variation(pormpt, msgId, msgHash, 2);
+        break;
+      case "V3":
+        variation(pormpt, msgId, msgHash, 3);
+        break;
+      case "V4":
+        variation(pormpt, msgId, msgHash, 4);
+        break;
+      case "U1":
+        upscale(pormpt, msgId, msgHash, 1);
+        break;
+      case "U2":
+        upscale(pormpt, msgId, msgHash, 2);
+        break;
+      case "U3":
+        upscale(pormpt, msgId, msgHash, 3);
+        break;
+      case "U4":
+        upscale(pormpt, msgId, msgHash, 4);
+        break;
+      default:
+        break;
+    }
+  };
+  const renderMessage = ({ text, img, hasTag, msgHash, msgID }: Message) => {
     return (
-      <List.Item className='flex flex-col space-y-4 justify-start items-start' style={{
-        alignItems: 'flex-start',
-      }}>
-        <Text >{text}</Text>
-        <Image className='ml-2 rounded-xl' width={400} src={img}
-        />
+      <List.Item
+        className="flex flex-col space-y-4 justify-start items-start"
+        style={{
+          alignItems: "flex-start",
+        }}
+      >
+        <Text>{text}</Text>
+        <Image className="ml-2 rounded-xl" width={400} src={img} />
+
+        {hasTag && (
+          <Tag
+            Data={["V1", "V2", "V3", "V4"]}
+            onClick={(tag) =>
+              tagClick(text, String(msgID), String(msgHash), tag)
+            }
+          />
+        )}
+        {hasTag && (
+          <Tag
+            Data={["U1", "U2", "U3", "U4"]}
+            onClick={(tag) =>
+              tagClick(text, String(msgID), String(msgHash), tag)
+            }
+          />
+        )}
       </List.Item>
     );
   };
 
   return (
-    <div className='w-full mx-auto px-4 h-full overflow-y-hidden' >
+    <div className="w-full mx-auto px-4 h-full overflow-y-hidden">
       <List
-        className=' mx-auto xl:w-3/5 w-4/5 justify-start overflow-y-auto'
+        className=" mx-auto xl:w-3/5 w-4/5 justify-start overflow-y-auto"
         style={{
-          height: 'calc(100vh - 96px)',
+          height: "calc(100vh - 96px)",
         }}
         dataSource={messages}
         renderItem={renderMessage}
       />
-      <div className='absolute z-10 w-2/4 xl:w-2/5 right-0 bottom-10 left-0 mx-auto '>
+      <div className="absolute z-10 w-2/4 xl:w-2/5 right-0 bottom-10 left-0 mx-auto ">
         <TextArea
-          className='w-full'
+          className="w-full"
           disabled={inputDisable}
           value={inputValue}
           onChange={(e) => setInputValue(e.target.value)}
           onKeyDown={(e) => {
-            if (e.key === 'Enter' && e.shiftKey) {
+            if (e.key === "Enter" && e.shiftKey) {
               setInputValue(`${inputValue}\n`);
               e.preventDefault();
-            } else if (e.key === 'Enter') {
+            } else if (e.key === "Enter") {
               handleMessageSend();
               e.preventDefault();
             }
@@ -77,13 +190,20 @@ const Index: React.FC = () => {
           style={{ paddingRight: 30 }}
         />
         <Button
-          className='absolute'
+          className="absolute"
           type="primary"
           onClick={handleMessageSend}
           loading={inputDisable}
           icon={<SendOutlined style={{ color: "#000" }} />}
-          title='Send'
-          style={{ position: 'absolute', bottom: 0, right: 0, background: 'transparent', border: 'none', boxShadow: 'none' }}
+          title="Send"
+          style={{
+            position: "absolute",
+            bottom: 0,
+            right: 0,
+            background: "transparent",
+            border: "none",
+            boxShadow: "none",
+          }}
         />
       </div>
     </div>

From 7b8982ced5328e89c94b352605860fe8e23da7b9 Mon Sep 17 00:00:00 2001
From: Eric <eric@baochi.xin>
Date: Fri, 5 May 2023 16:01:51 +0800
Subject: [PATCH 2/2] add upsclae & variation

---
 README.md              | 27 ++++++++++++++++---
 interfaces/message.ts  |  1 +
 pages/api/imagine.ts   |  1 +
 pages/api/upscale.ts   | 59 +++++++++++++++++++++++-----------------
 pages/api/variation.ts | 61 +++++++++++++++++++++++-------------------
 pages/index.tsx        | 40 ++++++++++++++++-----------
 request/index.ts       |  2 +-
 7 files changed, 119 insertions(+), 72 deletions(-)

diff --git a/README.md b/README.md
index 51e006d..e843d27 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,7 @@
 # midjourney-ui
 
 Midjourney UI is an open source txt2img UI for AI draw
+
 <div align="center">
 	<p>
 		<a href="https://discord.gg/dP95gZ8z"><img src="https://img.shields.io/discord/1082500871478329374?color=5865F2&logo=discord&logoColor=white" alt="Discord server" /></a>
@@ -10,11 +11,13 @@ Midjourney UI is an open source txt2img UI for AI draw
 [discord bot example](https://github.com/erictik/midjourney-discord-wrapper/)
 
 See [README.dev.md](README.dev.md) for development instructions.
-See a screenshot of the UI 
+See a screenshot of the UI
 ![screenshot](images/Screenshot.png)
 
-## Deploy 
+## Deploy
+
 #### Vercel
+
 Host your own live version of Midjourney UI with Vercel.
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Ferictik%2Fmidjourney-ui)
@@ -24,42 +27,58 @@ Host your own live version of Midjourney UI with Vercel.
 ```bash
 docker run --env-file .env -p 3000:3000 erictik/midjourney-ui
 ```
+
 or
+
 ```bash
 docker run -e SALAI_TOKEN=xxxxxxxx  -e SERVER_ID=xxxxxxxx -e CHANNEL_ID=xxxxxxxx -p 3000:3000 erictik/midjourney-ui
 ```
 
 ## Runnning locally
+
 1. clone the repo
+
 ```bash
 git clone https://github.com/erictik/midjourney-ui.git
 cd midjourney-ui
 ```
+
 2. install dependencies
+
 ```bash
 npm install
 ```
+
 or
+
 ```bash
-yarn 
+yarn
 ```
+
 3. set the environment variables [How to get your Discord SALAI_TOKEN:](https://www.androidauthority.com/get-discord-token-3149920/)
+
 ```bash
 export SALAI_TOKEN=xxxxxxxx
 export SERVER_ID=xxxxxxxx
 export CHANNEL_ID=xxxxxxxx
 ```
+
 4. run the development server
+
 ```bash
 npm run dev
 ```
+
 or
+
 ```bash
 yarn dev
 ```
+
 5. open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
 ## Route map
-- [ ] upsclae & variation
+
+- [x] upsclae & variation
 - [ ] chatgpt prompt generation
 - [ ] history of generated images
diff --git a/interfaces/message.ts b/interfaces/message.ts
index f9125de..af00c8a 100644
--- a/interfaces/message.ts
+++ b/interfaces/message.ts
@@ -3,5 +3,6 @@ export interface Message {
   img: string;
   msgID?: string;
   msgHash?: string;
+  content?: string;
   hasTag: boolean;
 }
diff --git a/pages/api/imagine.ts b/pages/api/imagine.ts
index 666dff5..f333f72 100644
--- a/pages/api/imagine.ts
+++ b/pages/api/imagine.ts
@@ -9,6 +9,7 @@ const client = new Midjourney(
   <string>process.env.CHANNEL_ID,
   <string>process.env.SALAI_TOKEN
 );
+client.maxWait = 600;
 const handler = async (req: Request) => {
   const { prompt } = await req.json();
   console.log("imagine.handler", prompt);
diff --git a/pages/api/upscale.ts b/pages/api/upscale.ts
index b4931c3..61443a9 100644
--- a/pages/api/upscale.ts
+++ b/pages/api/upscale.ts
@@ -1,28 +1,37 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import { Midjourney } from 'midjourney'
-import type { NextApiRequest, NextApiResponse } from 'next'
-import { ResponseError } from '../../interfaces'
-import { Readable } from 'stream'
-const client = new Midjourney(<string>process.env.SERVER_ID, <string>process.env.CHANNEL_ID, <string>process.env.SALAI_TOKEN)
-export default async function handler(
-  req: NextApiRequest,
-  res: NextApiResponse
-) {
-  const { content,index,msgId,msgHash } = req.body
-  const stream = new Readable({
-    read() {
-    }
+import { Midjourney } from "midjourney";
+import { ResponseError } from "../../interfaces";
+export const config = {
+  runtime: "edge",
+};
+const client = new Midjourney(
+  <string>process.env.SERVER_ID,
+  <string>process.env.CHANNEL_ID,
+  <string>process.env.SALAI_TOKEN
+);
+client.maxWait = 600;
+export default async function handler(req: Request) {
+  const { content, index, msgId, msgHash } = await req.json();
+  console.log("upscale.handler", content);
+  const encoder = new TextEncoder();
+  const readable = new ReadableStream({
+    start(controller) {
+      console.log("upscale.start", content);
+      client
+        .Upscale(content, index, msgId, msgHash, (uri: string) => {
+          console.log("upscale.loading", uri);
+          controller.enqueue(encoder.encode(JSON.stringify({ uri })));
+        })
+        .then((msg) => {
+          console.log("upscale.done", msg);
+          controller.enqueue(encoder.encode(JSON.stringify(msg)));
+          controller.close();
+        })
+        .catch((err: ResponseError) => {
+          console.log("upscale.error", err);
+          controller.close();
+        });
+    },
   });
-  client.Upscale(content,index,msgId,msgHash , (uri: string) => {
-    console.log("upsale.loading", uri)
-    stream.push(JSON.stringify({ uri }))
-  }).then((msg) => {
-    console.log("upsale.done", msg)
-    stream.push(JSON.stringify(msg))
-    stream.push(null)
-  }).catch((err: ResponseError) => {
-    console.log("upsale.error", err)
-    stream.push(null)
-  })
-  stream.pipe(res);
+  return new Response(readable, {});
 }
diff --git a/pages/api/variation.ts b/pages/api/variation.ts
index 68a2454..dfaf59e 100644
--- a/pages/api/variation.ts
+++ b/pages/api/variation.ts
@@ -1,30 +1,37 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import { Midjourney } from 'midjourney'
-import type { NextApiRequest, NextApiResponse } from 'next'
-import { ResponseError } from '../../interfaces'
-import { Readable } from 'stream'
-const client = new Midjourney(<string>process.env.SERVER_ID, <string>process.env.CHANNEL_ID, <string>process.env.SALAI_TOKEN)
-export default async function handler(
-  req: NextApiRequest,
-  res: NextApiResponse
-) {
-  const { content, index, msgId, msgHash } = req.body
-  const stream = new Readable({
-    read() {
-
-    }
+import { Midjourney } from "midjourney";
+import { ResponseError } from "../../interfaces";
+export const config = {
+  runtime: "edge",
+};
+const client = new Midjourney(
+  <string>process.env.SERVER_ID,
+  <string>process.env.CHANNEL_ID,
+  <string>process.env.SALAI_TOKEN
+);
+client.maxWait = 600;
+export default async function handler(req: Request) {
+  const { content, index, msgId, msgHash } = await req.json();
+  console.log("variation.handler", content);
+  const encoder = new TextEncoder();
+  const readable = new ReadableStream({
+    start(controller) {
+      console.log("variation.start", content);
+      client
+        .Variation(content, index, msgId, msgHash, (uri: string) => {
+          console.log("variation.loading", uri);
+          controller.enqueue(encoder.encode(JSON.stringify({ uri })));
+        })
+        .then((msg) => {
+          console.log("variation.done", msg);
+          controller.enqueue(encoder.encode(JSON.stringify(msg)));
+          controller.close();
+        })
+        .catch((err: ResponseError) => {
+          console.log("variation.error", err);
+          controller.close();
+        });
+    },
   });
-  console.log("variation.start", prompt)
-  client.Variation(content, index, msgId, msgHash, (uri: string) => {
-    console.log("variation.loading", uri)
-    stream.push(JSON.stringify({ uri }))
-  }).then((msg) => {
-    console.log("variation.done", msg)
-    stream.push(JSON.stringify(msg))
-    stream.push(null)
-  }).catch((err: ResponseError) => {
-    console.log("variation.error", err)
-    stream.push(null)
-  })
-  stream.pipe(res);
+  return new Response(readable, {});
 }
diff --git a/pages/index.tsx b/pages/index.tsx
index 3c4185c..f057cca 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -33,6 +33,7 @@ const Index: React.FC = () => {
           newMessage.hasTag = true;
           newMessage.msgHash = data.hash;
           newMessage.msgID = data.id;
+          newMessage.content = data.content;
           setMessages([...oldMessages, newMessage]);
         }
       );
@@ -62,19 +63,20 @@ const Index: React.FC = () => {
         newMessage.img = data.uri;
         newMessage.msgHash = data.hash;
         newMessage.msgID = data.id;
+        newMessage.content = data.content;
         setMessages([...oldMessages, newMessage]);
       }
     );
     setInputDisable(false);
   };
   const variation = async (
-    pormpt: string,
+    content: string,
     msgId: string,
     msgHash: string,
     index: number
   ) => {
     let newMessage: Message = {
-      text: `${pormpt} variation V${index}`,
+      text: `${content} variation V${index}`,
       hasTag: false,
       img: "data:image/png;base64,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",
     };
@@ -83,53 +85,61 @@ const Index: React.FC = () => {
     setInputDisable(true);
     setMessages([...oldMessages, newMessage]);
     await Variation(
-      JSON.stringify({ content: pormpt, index, msgId, msgHash }),
+      JSON.stringify({ content, index, msgId, msgHash }),
       (data: MJMessage) => {
         newMessage.img = data.uri;
         newMessage.hasTag = true;
         newMessage.msgHash = data.hash;
         newMessage.msgID = data.id;
+        newMessage.content = data.content;
         setMessages([...oldMessages, newMessage]);
       }
     );
     setInputDisable(false);
   };
   const tagClick = (
-    pormpt: string,
+    content: string,
     msgId: string,
     msgHash: string,
     tag: string
   ) => {
     switch (tag) {
       case "V1":
-        variation(pormpt, msgId, msgHash, 1);
+        variation(content, msgId, msgHash, 1);
         break;
       case "V2":
-        variation(pormpt, msgId, msgHash, 2);
+        variation(content, msgId, msgHash, 2);
         break;
       case "V3":
-        variation(pormpt, msgId, msgHash, 3);
+        variation(content, msgId, msgHash, 3);
         break;
       case "V4":
-        variation(pormpt, msgId, msgHash, 4);
+        variation(content, msgId, msgHash, 4);
         break;
       case "U1":
-        upscale(pormpt, msgId, msgHash, 1);
+        upscale(content, msgId, msgHash, 1);
         break;
       case "U2":
-        upscale(pormpt, msgId, msgHash, 2);
+        upscale(content, msgId, msgHash, 2);
         break;
       case "U3":
-        upscale(pormpt, msgId, msgHash, 3);
+        upscale(content, msgId, msgHash, 3);
         break;
       case "U4":
-        upscale(pormpt, msgId, msgHash, 4);
+        upscale(content, msgId, msgHash, 4);
         break;
       default:
         break;
     }
   };
-  const renderMessage = ({ text, img, hasTag, msgHash, msgID }: Message) => {
+  const renderMessage = ({
+    text,
+    img,
+    hasTag,
+    msgHash,
+    msgID,
+    content,
+  }: Message) => {
     return (
       <List.Item
         className="flex flex-col space-y-4 justify-start items-start"
@@ -144,7 +154,7 @@ const Index: React.FC = () => {
           <Tag
             Data={["V1", "V2", "V3", "V4"]}
             onClick={(tag) =>
-              tagClick(text, String(msgID), String(msgHash), tag)
+              tagClick(String(content), String(msgID), String(msgHash), tag)
             }
           />
         )}
@@ -152,7 +162,7 @@ const Index: React.FC = () => {
           <Tag
             Data={["U1", "U2", "U3", "U4"]}
             onClick={(tag) =>
-              tagClick(text, String(msgID), String(msgHash), tag)
+              tagClick(String(content), String(msgID), String(msgHash), tag)
             }
           />
         )}
diff --git a/request/index.ts b/request/index.ts
index c30d4e1..98c23f6 100644
--- a/request/index.ts
+++ b/request/index.ts
@@ -40,5 +40,5 @@ export const Upscale = (body: string, loading?: (uri: MJMessage) => void) => {
 };
 
 export const Variation = (body: string, loading?: (uri: MJMessage) => void) => {
-  return streamFetch("api/upscale", body, loading);
+  return streamFetch("api/variation", body, loading);
 };