zjt/live2d_test
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: updated helper page

Browse Source
This commit is contained in:
Ra-Liz
2024-06-25 21:20:05 +08:00
parent 7b01a4a0a7
commit ed2869f179
5 changed files with 576 additions and 2271 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/globals.css
View File

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

520
src/app/helper.tsx
View File

@@ -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>
);
}

2
src/app/layout.tsx
View File

@@ -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>
);
}