- {/* live2d */}
-
+ 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);
+
+ 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();
+ 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: 0,
+ });
+
+ 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");
+ }
+ });
+ console.log("ok")
+ })();
+ }, []);
+
+ return (
+
+ {typeof window !== "undefined" &&
+ typeof window.Live2D !== "undefined" && (
+
- );
+ {/* 输入框 */}
+
+ )}
+
+ );
}
+ {/* live2d */}
+
+
+ {/* 旧叉 */}
+ {/*
- )}
-
{response ? response : "请输入文字和我聊天吧"}
*/}
- {/* 角色信息 */}
-
-
-
+ {/* 角色信息 */}
+ 昵称
-
+
+
- {/* 消息泡泡 */}
- 昵称
+
- {response ? response : "请输入文字和我聊天吧"}
-
+ {/* 消息泡泡 */}
+
+ {response ? response : "请输入文字和我聊天吧"}
+
- {/* 选项 */}
-
- {opList.map((item) => (
-
+ {/* 选项 */}
+
-
- ))}
-
- 
-
- {item.title}
-
+ {opList.map((item) => (
+
- {/* 旧叉 */}
- {/* */}
- {/*
+ {/* 旧叉 */}
+ {/* */}
+ {/*
*/}
- {/* 输入框 */}
-
+
+ ))}
+
+
+
+ {item.title}
+
-
- {useVoice ? (
-
- ) : (
- {
- setInputText(e.target.value);
- console.log(e.target.value);
- }}
- >
- )}
-
-
-
+
+ {useVoice ? (
+
+ ) : (
+ {
+ setInputText(e.target.value);
+ console.log(e.target.value);
+ }}
+ >
+ )}
+
+
+