refactor: updated helper page

src/app/globals.css

@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+* {
+  box-sizing: border-box;
+}
+
 :root {
   --foreground-rgb: 0, 0, 0;
   --background-start-rgb: 214, 219, 220;

src/app/helper.tsx

@@ -1,222 +1,332 @@
-"use client"
+"use client";
-import dynamic from 'next/dynamic';
+import dynamic from "next/dynamic";
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from "react";
-import '@/deps/live2d.min.js'
+import "@/deps/live2d.min.js";
 import useVoice2Txt from "@/hooks/useVoice2txt";
-import useTxt2Voice from '@/hooks/useTxt2Voice';
+import useTxt2Voice from "@/hooks/useTxt2Voice";
-import axios from 'axios';
+import axios from "axios";
-import * as PIXI from 'pixi.js';
+import * as PIXI from "pixi.js";
-import { Live2DModel } from 'pixi-live2d-display/cubism2';
+import { Live2DModel } from "pixi-live2d-display/cubism2";
 
+// fake list
+const opList = [
+  {
+    id: 1,
+    title: "幸运转盘",
+    src: "http://picdown.jchysoft.com/uiIcon/xingyunzhuanpan.png",
+  },
+  {
+    id: 2,
+    title: "领券中心",
+    src: "http://picdown.jchysoft.com/uiIcon/lingjuanzhongxin.png",
+  }, // bjt错别字将错就错版
+  {
+    id: 3,
+    title: "0元抽",
+    src: "http://picdown.jchysoft.com/uiIcon/0yuanchou.png",
+  },
+  {
+    id: 4,
+    title: "欧宝赏",
+    src: "http://picdown.jchysoft.com/uiIcon/oubanshang.png",
+  }, // bjt错别字
+];
 
 //import "@/deps/live2dcubismcore.min.js"
 export default function Home() {
-    function draggable(model: any) {
+  const [useVoice, setUseVoice] = useState(false);
-        model.buttonMode = true;
+
-        model.on("pointerdown", (e: any) => {
+  function draggable(model: any) {
-            model.dragging = true;
+    model.buttonMode = true;
-            model._pointerX = e.data.global.x - model.x;
+    model.on("pointerdown", (e: any) => {
-            model._pointerY = e.data.global.y - model.y;
+      model.dragging = true;
-        });
+      model._pointerX = e.data.global.x - model.x;
-        model.on("pointermove", (e: any) => {
+      model._pointerY = e.data.global.y - model.y;
-            if (model.dragging) {
+    });
-                model.position.x = e.data.global.x - model._pointerX;
+    model.on("pointermove", (e: any) => {
-                model.position.y = e.data.global.y - model._pointerY;
+      if (model.dragging) {
-            }
+        model.position.x = e.data.global.x - model._pointerX;
-        });
+        model.position.y = e.data.global.y - model._pointerY;
-        model.on("pointerupoutside", () => (model.dragging = false));
+      }
-        model.on("pointerup", () => (model.dragging = false));
+    });
+    model.on("pointerupoutside", () => (model.dragging = false));
+    model.on("pointerup", () => (model.dragging = false));
+  }
+
+  function addFrame(model: any) {
+    const foreground = PIXI.Sprite.from(PIXI.Texture.WHITE);
+    foreground.width = model.internalModel.width;
+    foreground.height = model.internalModel.height;
+    foreground.alpha = 0.2;
+
+    model.addChild(foreground);
+    // 这里先叉了
+    // checkbox("Model Frames", (checked: any) => (foreground.visible = checked));
+  }
+
+  function addHitAreaFrames(model: any) {
+    try {
+      //@ts-ignore
+      const hitAreaFrames = new PIXI.live2d.HitAreaFrames();
+
+      model.addChild(hitAreaFrames);
+
+      checkbox(
+        "Hit Area Frames",
+        (checked: any) => (hitAreaFrames.visible = checked)
+      );
+    } catch (err) {}
+  }
+
+  function checkbox(name: any, onChange: any) {
+    const id = name.replace(/\W/g, "").toLowerCase();
+
+    let checkbox = document.getElementById(id);
+
+    if (!checkbox) {
+      const p = document.createElement("p")!;
+      p.innerHTML = `<input type="checkbox" id="${id}"> <label for="${id}">${name}</label>`;
+
+      document!.getElementById("control")!.appendChild(p);
+      checkbox = p.firstChild as HTMLElement;
     }
 
-    function addFrame(model: any) {
+    checkbox.addEventListener("change", () => {
-        const foreground = PIXI.Sprite.from(PIXI.Texture.WHITE);
+      //@ts-ignore
-        foreground.width = model.internalModel.width;
+      onChange(checkbox.checked);
-        foreground.height = model.internalModel.height;
+    });
-        foreground.alpha = 0.2;
+    //@ts-ignore
-
+    onChange(checkbox.checked);
-        model.addChild(foreground);
+  }
-
+  const send = (inputText: string) => {
-        checkbox("Model Frames", (checked: any) => (foreground.visible = checked));
+    setResponse(inputText);
-    }
+    if (!inputText) return;
-
+    console.log(inputText);
-    function addHitAreaFrames(model: any) {
+    let data = JSON.stringify({
-        try {
+      messages: [
-            //@ts-ignore
+        {
-            const hitAreaFrames = new PIXI.live2d.HitAreaFrames();
+          content: `回答用户的问题，尽可能简短。`,
-
+          role: "system",
-            model.addChild(hitAreaFrames);
+        },
-
+        {
-            checkbox("Hit Area Frames", (checked: any) => (hitAreaFrames.visible = checked));
+          content: inputText,
-        } catch (err) {
+          role: "user",
-
+        },
-        }
+      ],
-
+      model: "deepseek-chat",
-    }
+      frequency_penalty: 0,
-
+      max_tokens: 2048,
-    function checkbox(name: any, onChange: any) {
+      presence_penalty: 0,
-        const id = name.replace(/\W/g, "").toLowerCase();
+      stop: null,
-
+      stream: false,
-        let checkbox = document.getElementById(id);
+      temperature: 1,
-
+      top_p: 1,
-        if (!checkbox) {
-            const p = document.createElement("p")!;
-            p.innerHTML = `<input type="checkbox" id="${id}"> <label for="${id}">${name}</label>`;
-
-            document!.getElementById("control")!.appendChild(p);
-            checkbox = p.firstChild as HTMLElement;
-        }
-
-        checkbox.addEventListener("change", () => {
-            //@ts-ignore
-            onChange(checkbox.checked);
-        });
-        //@ts-ignore
-        onChange(checkbox.checked);
-    }
-    const send = (inputText: string) => {
-        setResponse(inputText)
-        if (!inputText) return;
-        console.log(inputText)
-        let data = JSON.stringify({
-            "messages": [
-                {
-                    "content": `回答用户的问题，尽可能简短。`,
-                    "role": "system"
-                },
-                {
-                    "content": inputText,
-                    "role": "user"
-                }
-            ],
-            "model": "deepseek-chat",
-            "frequency_penalty": 0,
-            "max_tokens": 2048,
-            "presence_penalty": 0,
-            "stop": null,
-            "stream": false,
-            "temperature": 1,
-            "top_p": 1
-        });
-
-        let config = {
-            method: 'post',
-            maxBodyLength: Infinity,
-            url: 'https://api.deepseek.com/chat/completions',
-            headers: {
-                'Content-Type': 'application/json',
-                'Accept': 'application/json',
-                'Authorization': 'Bearer sk-dd24ae704e8d4939aeed8f050d04d36b'
-            },
-            data: data
-        };
-        try {
-            axios(config)
-                .then((response) => {
-                    console.log(`response`, response);
-                    console.log(response.data);
-                    typeof speak !== 'undefined' && speak(response.data.choices[0].message.content) || model!.motion('tap_body');;
-                    setResponse(response.data.choices[0].message.content);
-                })
-                .catch((error) => {
-                    setResponse(error!.toString());
-                    console.log(error);
-                });
-        } catch (error) {
-            setResponse(error!.toString());
-            console.log(error);
-        }
-
-    }
-
-    const { start, end, text, isListening, error } = useVoice2Txt({
-        lang: 'cmn-Hans-CN',
-        continuous: false
     });
 
-    const {
+    let config = {
-        isSpeaking,
+      method: "post",
-        speak,
+      maxBodyLength: Infinity,
-        stop
+      url: "https://api.deepseek.com/chat/completions",
-    } = useTxt2Voice();
+      headers: {
-    const [inputText, setInputText] = useState("");
+        "Content-Type": "application/json",
-    const isMouthOpen = useRef(false);
+        Accept: "application/json",
-    const [response, setResponse] = useState("");
+        Authorization: "Bearer sk-dd24ae704e8d4939aeed8f050d04d36b",
-    useEffect(() => {
+      },
-        console.log(text, error)
+      data: data,
-        if (!text) return;
+    };
-        send(text);
+    try {
-        if (error) {
+      axios(config)
-            setResponse(error);
+        .then((response) => {
-            return;
+          console.log(`response`, response);
+          console.log(response.data);
+
+          if (typeof speak !== "undefined") {
+            setResponse(response.data.choices[0].message.content);
+            speak(response.data.choices[0].message.content);
+          } else {
+            model!.motion("tap_body");
+          }
+        })
+        .catch((error) => {
+          //   setResponse(error!.toString());
+          console.log(error);
+        });
+    } catch (error) {
+      setResponse(error!.toString());
+      console.log(error);
+    }
+  };
+
+  const { start, end, text, isListening, error } = useVoice2Txt({
+    lang: "cmn-Hans-CN",
+    continuous: false,
+  });
+
+  const { isSpeaking, speak, stop } = useTxt2Voice();
+  const [inputText, setInputText] = useState("");
+  const isMouthOpen = useRef(false);
+  const [response, setResponse] = useState("来和我聊天吧~");
+  useEffect(() => {
+    console.log(text, error);
+    if (!text) return;
+    send(text);
+    // 先叉了这里防止消息展示error
+    // if (error) {
+    //   setResponse(error);
+    //   return;
+    // }
+  }, [text, error]);
+  const [model, setModel] = useState<Live2DModel>();
+  useEffect(() => {
+    if (!isSpeaking) {
+      isMouthOpen.current = false;
+    }
+  }, [isSpeaking]);
+
+  useEffect(() => {
+    if (!isListening && !isSpeaking) {
+    }
+  }, [isListening]);
+
+  useEffect(() => {
+    // expose PIXI to window so that this plugin is able to
+    // reference window.PIXI.Ticker to automatically update Live2D models
+    //@ts-ignore
+    typeof window !== "undefined" && (window.PIXI = PIXI);
+    (async function () {
+      const app = new PIXI.Application({
+        view: document.getElementById("canvas") as HTMLCanvasElement,
+        backgroundAlpha: 1,
+      });
+
+      const model = await Live2DModel.from(
+        "https://cdn.jsdelivr.net/gh/guansss/pixi-live2d-display/test/assets/shizuku/shizuku.model.json"
+      );
+
+      app.stage.addChild(model);
+      const scaleX = (innerWidth * 0.4) / model.width;
+      const scaleY = (innerHeight * 0.8) / model.height;
+
+      // fit the window
+      model.scale.set(0.3);
+
+      model.y = innerHeight * 0.1;
+
+      draggable(model);
+      addFrame(model);
+      addHitAreaFrames(model);
+      setModel(model);
+      model.on("hit", (hitAreas) => {
+        if (hitAreas.includes("body")) {
+          model.motion("tap_body");
+          model.motion("speak");
         }
-    }, [text, error]);
+      });
-    const [model, setModel] = useState<Live2DModel>();
+    })();
-    useEffect(() => {
+  }, []);
-        if (!isSpeaking) {
-            isMouthOpen.current = false;
-        }
-    }, [isSpeaking]);
 
-    useEffect(() => {
+  return (
-        if (!isListening && !isSpeaking) { }
+    <main className="w-full h-full bg-blue-200">
-    }, [isListening]);
+      {typeof window !== "undefined" &&
+        typeof window.Live2D !== "undefined" && (
+          <div className="flex w-full flex-col h-full items-center justify-center relative text-white">
+            {/* live2d */}
+            <canvas className="w-full" id="canvas"></canvas>
 
-    useEffect(() => {
+            {/* 旧叉 */}
-        // expose PIXI to window so that this plugin is able to
+            {/* <div className="absolute right-[20vw] top-4 bg-orange-300 rounded w-[20vw] h-auto text-sm">
-        // reference window.PIXI.Ticker to automatically update Live2D models
+              {response ? response : "请输入文字和我聊天吧"}
-        //@ts-ignore
+            </div> */}
-        typeof window !== 'undefined' && (window.PIXI = PIXI);
-        (async function () {
-            const app = new PIXI.Application({
-                view: document.getElementById('canvas') as HTMLCanvasElement,
-                backgroundAlpha: 1
-            });
 
-            const model = await Live2DModel.from('https://cdn.jsdelivr.net/gh/guansss/pixi-live2d-display/test/assets/shizuku/shizuku.model.json');
+            {/* 角色信息 */}
+            <div className="absolute left-[4vw] top-4 bg-orange-300 rounded-full w-[36vw] h-auto text-sm flex flex-nowrap px-2 py-1 gap-2">
+              <div className="w-10 h-10 rounded-full bg-white"></div>
+              <div className="text-xl">昵称</div>
+            </div>
 
-            app.stage.addChild(model);
+            {/* 消息泡泡 */}
-            const scaleX = (innerWidth * 0.4) / model.width;
+            <div className="absolute left-1/2 -translate-x-1/2 top-[10vh] bg-black bg-opacity-30 rounded-2xl w-[60vw] h-auto p-2 whitespace-normal break-words">
-            const scaleY = (innerHeight * 0.8) / model.height;
+              {response ? response : "请输入文字和我聊天吧"}
+            </div>
 
-            // fit the window
+            {/* 选项 */}
-            model.scale.set(0.3);
+            <div className="absolute right-0 top-[20vh] w-[16vw] flex flex-col flex-nowrap items-center gap-10">
+              {opList.map((item) => (
+                <div
+                  key={item.id}
+                  className="bg-orange-300 rounded-l-full w-full h-auto text-sm flex flex-col flex-nowrap items-center pl-1 py-1"
+                >
+                  <div className="w-6 h-6 overflow-hidden">
+                    <img
+                      // 这图片中图标和空白的比例太邪门了
+                      className="w-full h-full scale-[2.5]"
+                      src={item.src}
+                      alt={item.title}
+                    />
+                  </div>
+                  <div className="text-xs">{item.title}</div>
+                </div>
+              ))}
+            </div>
 
-            model.y = innerHeight * 0.1;
+            {/* 旧叉 */}
+            {/* <div id="control"></div> */}
+            {/* <button onClick={start}>语音输入</button>
+                    <button onClick={end}>结束语音输入</button> */}
 
-            draggable(model);
+            {/* 输入框 */}
-            addFrame(model);
+            <div className="absolute w-[90vw] h-10 bottom-2 left-1/2 -translate-x-1/2 bg-white rounded-xl flex flex-nowrap items-center justify-evenly gap-2 px-2 py-1">
-            addHitAreaFrames(model);
+              <button
-            setModel(model);
+                className="w-6 h-6 overflow-hidden"
-            model.on('hit', (hitAreas) => {
+                onClick={() => {
-                if (hitAreas.includes('body')) {
+                  // 切换语音/键盘
-                    model.motion('tap_body');
+                  useVoice ? setUseVoice(false) : setUseVoice(true);
-                    model.motion('speak')
+                }}
-                }
+              >
-            });
+                <img
-        })();
+                  className="w-full h-full scale-[2.5]"
-    }, [])
+                  src={`http://picdown.jchysoft.com/uiIcon/${
-    return (
+                    useVoice ? "jianpan" : "yuyin"
-
+                  }.png`}
-        <main>
+                  alt="输入方式"
-            {
+                />
-                typeof window !== 'undefined'
+              </button>
-                && typeof window.Live2D !== 'undefined'
+              {useVoice ? (
-                && (<div className='flex w-full flex-col h-full items-center justify-center relative'>
+                <button
-                    <canvas className='w-full h-full' id="canvas"></canvas>
+                  onMouseDown={start}
-                    <div className='absolute right-[20vw] top-4 bg-white rounded w-[20vw] h-auto text-sm text-black'>{response ? response : "请输入文字和我聊天吧"}</div>
+                  onMouseUp={end}
-                    <div id="control"></div>
+                  onTouchStart={start}
-                    <button onClick={start}>语音输入</button>
+                  onTouchEnd={end}
-                    <button onClick={end}>结束语音输入</button>
+                  className="h-full bg-gray-300 flex-1 text-center rounded active:bg-gray-500 focus:outline-none select-none"
-                    <input className='text-black' value={inputText} onChange={(e) => {
+                >
-                        setInputText(e.target.value);
+                  按住说话
-                        console.log(e.target.value)
+                </button>
-                    }}></input>
+              ) : (
-                    <button onClick={() => {
+                <input
-                        send(inputText);
+                  className="h-full text-black rounded flex-1 bg-gray-200 pl-2"
-                        setInputText("");
+                  value={inputText}
-                    }}>发送</button>
+                  onChange={(e) => {
-                </div>)
+                    setInputText(e.target.value);
-            }
+                    console.log(e.target.value);
-        </main>
+                  }}
-    );
+                ></input>
-}
+              )}
+              <button
+                className="w-6 h-6 overflow-hidden"
+                onClick={() => {
+                  send(inputText);
+                  setInputText("");
+                }}
+              >
+                <img
+                  className="w-full h-full scale-[2.5]"
+                  src="http://picdown.jchysoft.com/uiIcon/fasong.png"
+                  alt="发送按钮"
+                />
+              </button>
+            </div>
+          </div>
+        )}
+    </main>
+  );
+}

src/app/layout.tsx

@@ -17,7 +17,7 @@ export default function RootLayout({
       <head>
         {/* <script src="http://publicjs.supmiao.com/live2dcubismcore.min.js"></script> */}
       </head>
-      <body>{children}</body>
+      <body className="w-screen h-screen">{children}</body>
     </html>
   );
 }