([]);
+ const LOTTERY_POOL = getLotteryPool();
+ return (
+
+
+ {activeTokens.map((token, index) => (
+
+ ))}
+
+
+ );
+};
diff --git a/src/scene/menu.tsx b/src/scene/menu.tsx
new file mode 100644
index 0000000..d119497
--- /dev/null
+++ b/src/scene/menu.tsx
@@ -0,0 +1,17 @@
+import { Button } from "@mui/material";
+import React from "react";
+import { GAME_SCENES, SceneProps } from "types";
+
+/** 菜单界面 */
+export const MenuScene = ({ setScene }: SceneProps) => {
+ return (
+
+ );
+};
diff --git a/src/scene/ui.tsx b/src/scene/ui.tsx
new file mode 100644
index 0000000..637b43c
--- /dev/null
+++ b/src/scene/ui.tsx
@@ -0,0 +1,21 @@
+import React, { useState } from "react";
+import { GAME_SCENES, PromptToken } from "types";
+import { MenuScene } from "./menu";
+import { LotteryScene } from "./lottery";
+import { GenerateScene } from "./generate";
+
+export const GameUI = () => {
+ const [scene, setScene] = useState(GAME_SCENES.MENU);
+ const [tokens, setTokens] = useState([]);
+ return (
+
+ {scene === GAME_SCENES.MENU && }
+ {scene === GAME_SCENES.LOTTERY && (
+
+ )}
+ {scene === GAME_SCENES.GENERATE && (
+
+ )}
+
+ );
+};
diff --git a/src/service/index.js b/src/service/index.js
deleted file mode 100644
index 0874297..0000000
--- a/src/service/index.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import axios from "axios";
-
-export const GAME_API = "http://47.242.123.114:8000";
-
-export const GENERATE_API = "http://bore.pub:34493/";
-
-const gameServer = axios.create({
- baseURL: GAME_API,
-});
-
-const generateServer = axios.create({
- baseURL: GENERATE_API,
-});
-
-export const getHelloWorld = () => gameServer.get("/ping");
-
-export const generatePicture = (params) =>
- generateServer.post("/generate-stream", {
- height: 384,
- n_samples: 1,
- prompt:
- "masterpiece, best quality, extremely detailed, masterpiece, illustration, cg, wallpaper, extremely high quality, 1girl, very long light blue hair, ahoge, bang to the side, long bang, long light blue hair, military style, full body, long white shirt, small waist, small breasts, dark blue jacket, small jacket, crop military jacket, golden aiguillette, small skirt, dark blue military skirt, black garters, white stockings, military boots, high heels, women boots, blue round boots ",
- sampler: "k_euler_ancestral",
- scale: 12,
- seed: 981820335,
- steps: 28,
- 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,
- });
diff --git a/src/service/service.ts b/src/service/service.ts
new file mode 100644
index 0000000..df1ef3b
--- /dev/null
+++ b/src/service/service.ts
@@ -0,0 +1,19 @@
+import axios from "axios";
+import { GeneratePictureParams } from "../types";
+
+export const GAME_API = "http://47.242.123.114:8000";
+
+export const GENERATE_API = "http://bore.pub:34493/";
+
+const gameServer = axios.create({
+ baseURL: GAME_API,
+});
+
+const generateServer = axios.create({
+ baseURL: GENERATE_API,
+});
+
+export const getHelloWorld = () => gameServer.get("/ping");
+
+export const generatePicture = (params: GeneratePictureParams) =>
+ generateServer.post("/generate-stream", params);
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 0000000..4e4a75f
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1,28 @@
+import React from "react";
+
+export interface GeneratePictureParams {
+ height: number;
+ n_samples: number;
+ prompt: string;
+ sampler: string;
+ scale: number;
+ seed: number;
+ steps: number;
+ uc: string;
+ ucPreset: number;
+ width: number;
+}
+
+export enum GAME_SCENES {
+ MENU,
+ LOTTERY,
+ GENERATE,
+}
+
+export type SceneProps = {
+ setScene: React.Dispatch>;
+};
+
+export type PromptToken = {
+ value: string;
+};
diff --git a/src/ui/ui.js b/src/ui/ui.js
deleted file mode 100644
index 166a91f..0000000
--- a/src/ui/ui.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React, { useState } from "react";
-import { generatePicture, getHelloWorld } from "../service";
-import { Button } from "@mui/material";
-
-export const GameUI = () => {
- const [code, setCode] = useState("");
- return (
-
-
-
-
-