refactor: updated helper page
This commit is contained in:
parent
7b01a4a0a7
commit
ed2869f179
1807
package-lock.json
generated
1807
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -2,6 +2,10 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--foreground-rgb: 0, 0, 0;
|
||||
--background-start-rgb: 214, 219, 220;
|
||||
|
||||
@ -1,222 +1,332 @@
|
||||
"use client"
|
||||
import dynamic from 'next/dynamic';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import '@/deps/live2d.min.js'
|
||||
"use client";
|
||||
import dynamic from "next/dynamic";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import "@/deps/live2d.min.js";
|
||||
import useVoice2Txt from "@/hooks/useVoice2txt";
|
||||
import useTxt2Voice from '@/hooks/useTxt2Voice';
|
||||
import axios from 'axios';
|
||||
import * as PIXI from 'pixi.js';
|
||||
import { Live2DModel } from 'pixi-live2d-display/cubism2';
|
||||
import useTxt2Voice from "@/hooks/useTxt2Voice";
|
||||
import axios from "axios";
|
||||
import * as PIXI from "pixi.js";
|
||||
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) {
|
||||
model.buttonMode = true;
|
||||
model.on("pointerdown", (e: any) => {
|
||||
model.dragging = true;
|
||||
model._pointerX = e.data.global.x - model.x;
|
||||
model._pointerY = e.data.global.y - model.y;
|
||||
});
|
||||
model.on("pointermove", (e: any) => {
|
||||
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));
|
||||
const [useVoice, setUseVoice] = useState(false);
|
||||
|
||||
function draggable(model: any) {
|
||||
model.buttonMode = true;
|
||||
model.on("pointerdown", (e: any) => {
|
||||
model.dragging = true;
|
||||
model._pointerX = e.data.global.x - model.x;
|
||||
model._pointerY = e.data.global.y - model.y;
|
||||
});
|
||||
model.on("pointermove", (e: any) => {
|
||||
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));
|
||||
}
|
||||
|
||||
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) {
|
||||
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;
|
||||
}
|
||||
|
||||
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
|
||||
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,
|
||||
});
|
||||
|
||||
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);
|
||||
if (error) {
|
||||
setResponse(error);
|
||||
return;
|
||||
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<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(() => {
|
||||
if (!isListening && !isSpeaking) { }
|
||||
}, [isListening]);
|
||||
return (
|
||||
<main className="w-full h-full bg-blue-200">
|
||||
{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
|
||||
// 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
|
||||
});
|
||||
{/* 旧叉 */}
|
||||
{/* <div className="absolute right-[20vw] top-4 bg-orange-300 rounded w-[20vw] h-auto text-sm">
|
||||
{response ? response : "请输入文字和我聊天吧"}
|
||||
</div> */}
|
||||
|
||||
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;
|
||||
const scaleY = (innerHeight * 0.8) / model.height;
|
||||
{/* 消息泡泡 */}
|
||||
<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">
|
||||
{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);
|
||||
addHitAreaFrames(model);
|
||||
setModel(model);
|
||||
model.on('hit', (hitAreas) => {
|
||||
if (hitAreas.includes('body')) {
|
||||
model.motion('tap_body');
|
||||
model.motion('speak')
|
||||
}
|
||||
});
|
||||
})();
|
||||
}, [])
|
||||
return (
|
||||
|
||||
<main>
|
||||
{
|
||||
typeof window !== 'undefined'
|
||||
&& typeof window.Live2D !== 'undefined'
|
||||
&& (<div className='flex w-full flex-col h-full items-center justify-center relative'>
|
||||
<canvas className='w-full h-full' id="canvas"></canvas>
|
||||
<div className='absolute right-[20vw] top-4 bg-white rounded w-[20vw] h-auto text-sm text-black'>{response ? response : "请输入文字和我聊天吧"}</div>
|
||||
<div id="control"></div>
|
||||
<button onClick={start}>语音输入</button>
|
||||
<button onClick={end}>结束语音输入</button>
|
||||
<input className='text-black' value={inputText} onChange={(e) => {
|
||||
setInputText(e.target.value);
|
||||
console.log(e.target.value)
|
||||
}}></input>
|
||||
<button onClick={() => {
|
||||
send(inputText);
|
||||
setInputText("");
|
||||
}}>发送</button>
|
||||
</div>)
|
||||
}
|
||||
</main>
|
||||
);
|
||||
{/* 输入框 */}
|
||||
<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">
|
||||
<button
|
||||
className="w-6 h-6 overflow-hidden"
|
||||
onClick={() => {
|
||||
// 切换语音/键盘
|
||||
useVoice ? setUseVoice(false) : setUseVoice(true);
|
||||
}}
|
||||
>
|
||||
<img
|
||||
className="w-full h-full scale-[2.5]"
|
||||
src={`http://picdown.jchysoft.com/uiIcon/${
|
||||
useVoice ? "jianpan" : "yuyin"
|
||||
}.png`}
|
||||
alt="输入方式"
|
||||
/>
|
||||
</button>
|
||||
{useVoice ? (
|
||||
<button
|
||||
onMouseDown={start}
|
||||
onMouseUp={end}
|
||||
onTouchStart={start}
|
||||
onTouchEnd={end}
|
||||
className="h-full bg-gray-300 flex-1 text-center rounded active:bg-gray-500 focus:outline-none select-none"
|
||||
>
|
||||
按住说话
|
||||
</button>
|
||||
) : (
|
||||
<input
|
||||
className="h-full text-black rounded flex-1 bg-gray-200 pl-2"
|
||||
value={inputText}
|
||||
onChange={(e) => {
|
||||
setInputText(e.target.value);
|
||||
console.log(e.target.value);
|
||||
}}
|
||||
></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>
|
||||
);
|
||||
}
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user