feat: 🎸 事件交互响应

src/keywords/dict.ts

@@ -5,17 +5,23 @@ export const PROMPT_DICT: {
   [part: string]: PromptToken[];
 } = {
   test: [
-    { value: "黑长直" },
-    { value: "电波系" },
-    { value: "伪娘" },
-    { value: "兔女郎" },
-    { value: "傲娇" },
-    { value: "病娇" },
-    { value: "天然呆" },
-    { value: "活力" },
-    { value: "抖S" },
-    { value: "抖M" },
-    { value: "三无" },
+    { value: "黑长直", class: "adj" },
+    { value: "电波系", class: "adj" },
+    { value: "伪娘", class: "n" },
+    { value: "兔女郎", class: "adj" },
+    { value: "傲娇", class: "adj" },
+    { value: "病娇", class: "adj" },
+    { value: "天然呆", class: "adj" },
+    { value: "活力", class: "adj" },
+    { value: "抖S", class: "adj" },
+    { value: "抖M", class: "adj" },
+    { value: "三无", class: "adj" },
+    { value: "泳装", class: "adj" },
+    { value: "银发", class: "adj" },
+    { value: "女仆", class: "n" },
+    { value: "美少女", class: "n" },
+    { value: "御姐", class: "n" },
+    { value: "萝莉", class: "n" },
   ],
 };
 

src/scene/generate.tsx

@@ -1,8 +1,9 @@
-import { Button, Skeleton } from "@mui/material";
+import { Button, CircularProgress, Divider, Skeleton } from "@mui/material";
 import { PRESET_TOKENS } from "prompts/presets";
 import React, { useEffect, useState } from "react";
 import { generatePicture } from "service/service";
 import { GAME_SCENES, SceneProps } from "types";
+import { Message } from "./ui";
 
 type GenerateSceneProps = {
   prompts: string[];
@@ -27,24 +28,28 @@ export const GenerateScene = ({ setScene, prompts }: GenerateSceneProps) => {
       uc: "lowres, bad anatomy, bad hands, text, error, missing fingers, extra digit, fewer digits, cropped, worst quality, low quality, normal quality, jpeg artifacts, signature, watermark, username, blurry",
       ucPreset: 0,
       width: 256,
-    }).then((result) => {
-      setLoading(false);
-      console.log(result);
-      const source = result.data.split("\n");
-      const fields = {} as any;
-      source?.forEach((d: string) => {
-        const [name, s] = d.split(":");
-        fields[name] = s;
+    })
+      .then((result) => {
+        setLoading(false);
+        console.log(result);
+        const source = result.data.split("\n");
+        const fields = {} as any;
+        source?.forEach((d: string) => {
+          const [name, s] = d.split(":");
+          fields[name] = s;
+        });
+        console.timeEnd();
+        setCode(fields.data);
+        // const data = new Uint8ClampedArray(buffer);
+        // console.log(data);
+        // const imageData = new ImageData(data, 256, 384);
+        // const canvas = document.getElementById("picture");
+        // const context = canvas.getContext("2d");
+        // context.putImageData(imageData);
+      })
+      .catch((e) => {
+        Message.error(e.message);
       });
-      console.timeEnd();
-      setCode(fields.data);
-      // const data = new Uint8ClampedArray(buffer);
-      // console.log(data);
-      // const imageData = new ImageData(data, 256, 384);
-      // const canvas = document.getElementById("picture");
-      // const context = canvas.getContext("2d");
-      // context.putImageData(imageData);
-    });
   };
   useEffect(() => {
     generate();
@@ -52,17 +57,11 @@ export const GenerateScene = ({ setScene, prompts }: GenerateSceneProps) => {
 
   return (
     <div>
-      {loading && (
-        <Skeleton
-          sx={{ bgcolor: "grey.900" }}
-          variant="rectangular"
-          width={256}
-          height={384}
-        />
-      )}
+      {loading && <CircularProgress />}
       {!loading && !!code && (
         <div>
           <img src={`data:image/jpeg;base64,${code}`}></img>
+          <Divider />
           <Button
             variant={"outlined"}
             onClick={() => {

src/scene/lottery.tsx

@@ -1,8 +1,9 @@
-import { Button } from "@mui/material";
+import { Button, CircularProgress, Divider } from "@mui/material";
 import { getLotteryPool } from "../keywords/dict";
 import React, { useCallback, useEffect, useState } from "react";
 import { GAME_SCENES, PromptToken, SceneProps } from "types";
 import { OpenAIService } from "service/gpt";
+import { Message } from "./ui";
 
 type LotterySceneProps = {
   setPrompts: React.Dispatch<React.SetStateAction<string[]>>;
@@ -15,6 +16,7 @@ type ActivePromptToken = {
 /** 抽奖界面 */
 export const LotteryScene = ({ setScene, setPrompts }: LotterySceneProps) => {
   const [activeTokens, setActiveTokens] = useState<ActivePromptToken[]>([]);
+  const [loading, setLoading] = useState(false);
   const LOTTERY_POOL = getLotteryPool();
   const getPromptsByTokens = useCallback(async () => {
     const { getPrompts } = await OpenAIService();
@@ -48,25 +50,36 @@ export const LotteryScene = ({ setScene, setPrompts }: LotterySceneProps) => {
       >
         十连抽！
       </Button>
+      <Divider />
       {activeTokens.map((token, index) => (
         <Button
           variant={token.active ? "contained" : "outlined"}
           key={token.value}
           onClick={() => {
-            activeTokens[index].active = !activeTokens[index].active;
-            setActiveTokens(activeTokens);
+            const tokens = [...activeTokens];
+            tokens[index].active = !activeTokens[index].active;
+            setActiveTokens(tokens);
           }}
         >
           {token.value}
         </Button>
       ))}
+      <Divider />
       <Button
+        variant={"outlined"}
         onClick={async () => {
-          await getPromptsByTokens();
-          setScene(GAME_SCENES.GENERATE);
+          try {
+            setLoading(true);
+            await getPromptsByTokens();
+            setLoading(false);
+            setScene(GAME_SCENES.GENERATE);
+          } catch (e: any) {
+            console.log(e);
+            Message.error(e.message);
+          }
         }}
       >
-        开始召唤！
+        {loading ? <CircularProgress /> : "开始召唤！"}
       </Button>
     </div>
   );

src/scene/ui.tsx

@@ -1,12 +1,66 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { GAME_SCENES, PromptToken } from "types";
 import { MenuScene } from "./menu";
 import { LotteryScene } from "./lottery";
 import { GenerateScene } from "./generate";
+import { Alert, Snackbar } from "@mui/material";
+
+type SnackSetterFunction = (snack: {
+  open: boolean;
+  message: string;
+  type: "error" | "success" | "warning" | "info";
+}) => void;
+
+const Snacker = {} as any;
+
+export const Message = {
+  error: (message: string) => {
+    Snacker.setSnack({
+      open: true,
+      message,
+      type: "error",
+    });
+  },
+  warning: (message: string) => {
+    Snacker.setSnack({
+      open: true,
+      message,
+      type: "warning",
+    });
+  },
+  success: (message: string) => {
+    Snacker.setSnack({
+      open: true,
+      message,
+      type: "success",
+    });
+  },
+  show: (message: string) => {
+    Snacker.setSnack({
+      open: true,
+      message,
+      type: "info",
+    });
+  },
+};
 
 export const GameUI = () => {
   const [scene, setScene] = useState<GAME_SCENES>(GAME_SCENES.MENU);
   const [prompts, setPrompts] = useState<string[]>([]);
+  const [snack, setSnack] = useState({
+    open: false,
+    message: "",
+    type: "info" as "error" | "success" | "warning" | "info",
+  });
+  const handleClose = () => {
+    setSnack({
+      ...snack,
+      open: false,
+    });
+  };
+  useEffect(() => {
+    Snacker.setSnack = setSnack;
+  }, []);
   return (
     <div>
       {scene === GAME_SCENES.MENU && <MenuScene setScene={setScene} />}
@@ -16,6 +70,19 @@ export const GameUI = () => {
       {scene === GAME_SCENES.GENERATE && (
         <GenerateScene setScene={setScene} prompts={prompts} />
       )}
+      <Snackbar
+        anchorOrigin={{ vertical: "top", horizontal: "center" }}
+        open={snack.open}
+        onClose={handleClose}
+      >
+        <Alert
+          onClose={handleClose}
+          severity={snack.type}
+          sx={{ width: "100%" }}
+        >
+          {snack.message}
+        </Alert>
+      </Snackbar>
     </div>
   );
 };

src/service/gpt.ts

@@ -16,7 +16,7 @@ export const OpenAIService = async () => {
             role: "user",
             content: `我想用NovelAI生成一张${keywords.join(
               ","
-            )}少女画像，请为我生成不少于20个提示词，请使用英文表示。`,
+            )}画像，请为我生成不少于20个提示词，请使用英文表示。`,
           },
         ],
       });

src/types.ts

@@ -25,4 +25,5 @@ export type SceneProps = {
 
 export type PromptToken = {
   value: string;
+  class: "n" | "v" | "adj" | "adv";
 };