add zoom、vary

Zo3i · Jul 2, 2023 · 12a1d4a · 12a1d4a
1 parent 678d60a
commit 12a1d4a
Show file tree

Hide file tree

Showing 2 changed files with 98 additions and 2 deletions.
diff --git a/app/components/chat.tsx b/app/components/chat.tsx
@@ -749,6 +749,28 @@ export function Chat() {
     scrollToBottom();
   };
 
+  const Vary = (messages: RenderMessage, index: any) => {
+    setIsLoading(true);
+    if (!messages.clickedList) {
+      messages.clickedList = [];
+    }
+    messages.clickedList.push("vary-" + index);
+    let opMsg = `/mj VARY|${messages.imageId}|${index}`;
+    chatStore.onUserInput(opMsg).then(() => setIsLoading(false));
+    scrollToBottom();
+  };
+
+  const Zoom = (messages: RenderMessage, index: any) => {
+    setIsLoading(true);
+    if (!messages.clickedList) {
+      messages.clickedList = [];
+    }
+    messages.clickedList.push("zoom-" + index);
+    let opMsg = `/mj ZOOM|${messages.imageId}|${index}`;
+    chatStore.onUserInput(opMsg).then(() => setIsLoading(false));
+    scrollToBottom();
+  };
+
   const RESET = (messages: RenderMessage) => {
     setIsLoading(true);
     if (!messages.clickedList) {
@@ -1040,6 +1062,60 @@ export function Chat() {
                           </div>
                         </div>
                       )}
+                      {message.type && message.type == "imageUPSCALE" && (
+                        <div>
+                          <div className={styles["imageResult"]}>
+                            <button
+                              className={
+                                message.clickedList
+                                  ? message.clickedList.includes("vary-1")
+                                    ? styles["imageResultBntClick"]
+                                    : styles["imageResultBnt"]
+                                  : ""
+                              }
+                              onClick={() => Vary(message, 1)}
+                            >
+                              Vary(Strong)
+                            </button>
+                            <button
+                              className={
+                                message.clickedList
+                                  ? message.clickedList.includes("vary-0")
+                                    ? styles["imageResultBntClick"]
+                                    : styles["imageResultBnt"]
+                                  : ""
+                              }
+                              onClick={() => Vary(message, 0)}
+                            >
+                              Vary(Subtle)
+                            </button>
+                            <button
+                              className={
+                                message.clickedList
+                                  ? message.clickedList.includes("zoom-50")
+                                    ? styles["imageResultBntClick"]
+                                    : styles["imageResultBnt"]
+                                  : ""
+                              }
+                              onClick={() => Zoom(message, 50)}
+                            >
+                              ZoomOut2x
+                            </button>
+                            <button
+                              className={
+                                message.clickedList
+                                  ? message.clickedList.includes("zoom-75")
+                                    ? styles["imageResultBntClick"]
+                                    : styles["imageResultBnt"]
+                                  : ""
+                              }
+                              onClick={() => Zoom(message, 75)}
+                            >
+                              ZoomOut1.5x
+                            </button>
+                          </div>
+                        </div>
+                      )}
                     </div>
                   )}
                 </div>

diff --git a/app/store/chat.ts b/app/store/chat.ts
@@ -23,7 +23,7 @@ export type ChatMessage = RequestMessage & {
   taskId?: string;
   imageId?: string;
   clickedList?: string[];
-  type?: "chat" | "image" | "imageResult";
+  type?: "chat" | "image" | "imageResult" | "imageUPSCALE";
 };
 
 export function createMessage(override: Partial<ChatMessage>): ChatMessage {
@@ -333,6 +333,26 @@ export const useChatStore = create<ChatStore>()(
               undefined,
               ops[1],
             );
+          } else if (lastMessage.content.startsWith("/mj VARY")) {
+            let ops = lastMessage.content.split("|");
+            op = "VARY";
+            res = await requestImage(
+              "VARY",
+              true,
+              undefined,
+              Number(ops[2]),
+              ops[1],
+            );
+          } else if (lastMessage.content.startsWith("/mj ZOOM")) {
+            let ops = lastMessage.content.split("|");
+            op = "ZOOM";
+            res = await requestImage(
+              "ZOOM",
+              true,
+              undefined,
+              Number(ops[2]),
+              ops[1],
+            );
           } else {
             res = await requestImage(
               "CREATE_IMAGE",
@@ -408,7 +428,7 @@ export const useChatStore = create<ChatStore>()(
                     streaming: true,
                     id: userMessage.id! + 1,
                     model: modelConfig.model,
-                    type: op == "UPSCALE" ? "image" : "imageResult",
+                    type: op == "UPSCALE" ? "imageUPSCALE" : "imageResult",
                     clickedList: [],
                   });
                   const sessionIndex = get().currentSessionIndex;