feat: 🎸 图片初步生成

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>

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,
+  });

src/ui/ui.js

@@ -1,11 +1,37 @@
-import React, { useEffect } from "react";
+import React, { useState } from "react";
-import { getHelloWorld } from "../service";
+import { generatePicture, getHelloWorld } from "../service";
+import { Button } from "@mui/material";
 
 export const GameUI = () => {
-  useEffect(() => {
+  const [code, setCode] = useState("");
-    getHelloWorld().then((result) => {
+  return (
-      console.log(result);
+    <div>
-    });
+      <Button
-  }, []);
+        onClick={() => {
-  return <div></div>;
+          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>
+  );
 };