From d1025c259122398f6dbf4c75e3fa3a9d4293c4bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E6=99=93=E5=AE=87?= <1329218916@qq.com>
Date: Fri, 31 Mar 2023 23:53:31 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E5=88=9D=E6=AD=A5=E7=94=9F=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.js           | 12 ------------
 src/service/index.js | 25 +++++++++++++++++++++++--
 src/ui/ui.js         | 42 ++++++++++++++++++++++++++++++++++--------
 3 files changed, 57 insertions(+), 22 deletions(-)

diff --git a/src/App.js b/src/App.js
index e749eb8..154b412 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,18 +5,6 @@ function App() {
   return (
     <div className="App">
       <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
         <GameUI></GameUI>
       </header>
     </div>
diff --git a/src/service/index.js b/src/service/index.js
index 2b256c5..0874297 100644
--- a/src/service/index.js
+++ b/src/service/index.js
@@ -2,8 +2,29 @@ import axios from "axios";
 
 export const GAME_API = "http://47.242.123.114:8000";
 
-const server = axios.create({
+export const GENERATE_API = "http://bore.pub:34493/";
+
+const gameServer = axios.create({
   baseURL: GAME_API,
 });
 
-export const getHelloWorld = () => server.get("/ping");
+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/ui/ui.js b/src/ui/ui.js
index a49c40e..166a91f 100644
--- a/src/ui/ui.js
+++ b/src/ui/ui.js
@@ -1,11 +1,37 @@
-import React, { useEffect } from "react";
-import { getHelloWorld } from "../service";
+import React, { useState } from "react";
+import { generatePicture, getHelloWorld } from "../service";
+import { Button } from "@mui/material";
 
 export const GameUI = () => {
-  useEffect(() => {
-    getHelloWorld().then((result) => {
-      console.log(result);
-    });
-  }, []);
-  return <div></div>;
+  const [code, setCode] = useState("");
+  return (
+    <div>
+      <Button
+        onClick={() => {
+          console.time();
+          generatePicture().then((result) => {
+            console.log(result);
+            const source = result.data.split("\n");
+            const fields = {};
+            source?.forEach((d) => {
+              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);
+          });
+        }}
+      >
+        召唤
+      </Button>
+      <canvas id="picture" width={256} height={384}></canvas>
+      <img src={`data:image/jpeg;base64,${code}`}></img>
+    </div>
+  );
 };