xinyin025/ChatGPT-Next-Web
1
0
Fork 0
mirror of https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web.git synced 2025-10-01 23:56:39 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat: add PlayIcon and StopPlayIcon to chat component

Browse Source
This commit is contained in:
dakai 2024-10-13 14:29:57 +08:00
parent 05e6e4bffb
commit a90090c162
4 changed files with 74 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
app/components/chat.tsx
View File

@ -1227,16 +1227,19 @@ function _Chat() {
});
}
setSpeechStatus(true);
ttsPlayer
.play(audioBuffer, () => {
try {
await ttsPlayer.play(audioBuffer, () => {
setSpeechStatus(false);
})
.catch((e) => {
});
const audioFile = new Blob([audioBuffer], { type: "audio/wav" });
const url = uploadAudio(audioFile);
} catch (e) {
console.error("[OpenAI Speech]", e);
showToast(prettyObject(e));
setSpeechStatus(false);
})
.finally(() => setSpeechLoading(false));
} finally {
setSpeechLoading(false);
}
}
}
@ -1505,6 +1508,53 @@ function _Chat() {
setAttachImages(images);
}
async function uploadAudio(file: Blob) {
const audioUrl: string = await uploadImageRemote(file);
console.log("audioUrl: ", audioUrl);
//const images: string[] = [];
//images.push(...attachImages);
//images.push(
// ...(await new Promise<string[]>((res, rej) => {
// const fileInput = document.createElement("input");
// fileInput.type = "file";
// fileInput.accept =
// "image/png, image/jpeg, image/webp, image/heic, image/heif";
// fileInput.multiple = true;
// fileInput.onchange = (event: any) => {
// setUploading(true);
// const files = event.target.files;
// const imagesData: string[] = [];
// for (let i = 0; i < files.length; i++) {
// const file = event.target.files[i];
// uploadImageRemote(file)
// .then((dataUrl) => {
// imagesData.push(dataUrl);
// if (
// imagesData.length === 3 ||
// imagesData.length === files.length
// ) {
// setUploading(false);
// res(imagesData);
// }
// })
// .catch((e) => {
// setUploading(false);
// rej(e);
// });
// }
// };
// fileInput.click();
// })),
//);
//const imagesLength = images.length;
//if (imagesLength > 3) {
// images.splice(3, imagesLength - 3);
//}
//setAttachImages(images);
}
// 快捷键 shortcut keys
const [showShortcutKeyModal, setShowShortcutKeyModal] = useState(false);

1
app/icons/play.svg Normal file
View File

@ -0,0 +1 @@
<svg class="svg-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M384 810.666667c-8.533333 0-12.8 0-21.333333-4.266667C349.866667 797.866667 341.333333 785.066667 341.333333 768L341.333333 256c0-17.066667 8.533333-29.866667 21.333333-38.4 12.8-8.533333 29.866667-8.533333 42.666667 0l384 256c12.8 8.533333 17.066667 21.333333 17.066667 34.133333s-8.533333 25.6-17.066667 34.133333l-384 256C401.066667 806.4 392.533333 810.666667 384 810.666667zM426.666667 337.066667l0 354.133333 264.533333-174.933333L426.666667 337.066667z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 666 B

1
app/icons/stop.svg Normal file
View File

@ -0,0 +1 @@
<svg class="svg-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M256 256l512 0 0 512-512 0 0-512Z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 240 B

13
app/utils.ts
View File

@ -250,6 +250,19 @@ export function getMessageImages(message: RequestMessage): string[] {
return urls;
}
//export function getMessageAudio(message: RequestMessage): string[] {
// if (typeof message.content === "string") {
// return [];
// }
// const urls: string[] = [];
// for (const c of message.content) {
// if (c.type === "image_url") {
// urls.push(c.image_url?.url ?? "");
// }
// }
// return urls;
//}
export function isVisionModel(model: string) {
// Note: This is a better way using the TypeScript feature instead of `&&` or `||` (ts v5.5.0-dev.20240314 I've been using)