7x31
/
ChatGPT-Next-Web
mirror of https://github.com/Yidadaa/ChatGPT-Next-Web.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge 502be0d49e into 83cea3a90d

This commit is contained in:
Shaswat Raj 2024-12-19 14:28:29 +00:00 committed by GitHub
parent 83cea3a90d 502be0d49e
commit 27da09e136
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 18774 additions and 2485 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
app/components/markdown.tsx
View File

@ -71,6 +71,51 @@ export function Mermaid(props: { code: string }) {
);
}
function CodeActions({ onCopy }: { onCopy: () => void }) {
return <span className="copy-code-button" onClick={onCopy}></span>;
}
function CodePreview({
mermaidCode,
htmlCode,
enableArtifacts,
previewRef,
height,
}: {
mermaidCode: string;
htmlCode: string;
enableArtifacts: boolean;
previewRef: RefObject<HTMLPreviewHander>;
height: number;
}) {
return (
<>
{mermaidCode && <Mermaid code={mermaidCode} key={mermaidCode} />}
{htmlCode && enableArtifacts && (
<FullScreen className="no-dark html" right={70}>
<ArtifactsShareButton
style={{ position: "absolute", right: 20, top: 10 }}
getCode={() => htmlCode}
/>
<IconButton
style={{ position: "absolute", right: 120, top: 10 }}
bordered
icon={<ReloadButtonIcon />}
shadow
onClick={() => previewRef.current?.reload()}
/>
<HTMLPreview
ref={previewRef}
code={htmlCode}
autoHeight={!document.fullscreenElement}
height={!document.fullscreenElement ? 600 : height}
/>
</FullScreen>
)}
</>
);
}
export function PreCode(props: { children: any }) {
const ref = useRef<HTMLPreElement>(null);
const previewRef = useRef<HTMLPreviewHander>(null);
@ -133,42 +178,20 @@ export function PreCode(props: { children: any }) {
return (
<>
<pre ref={ref}>
<span
className="copy-code-button"
onClick={() => {
if (ref.current) {
copyToClipboard(
ref.current.querySelector("code")?.innerText ?? "",
);
}
}}
></span>
<CodeActions
onCopy={() =>
copyToClipboard(ref.current?.querySelector("code")?.innerText ?? "")
}
/>
{props.children}
</pre>
{mermaidCode.length > 0 && (
<Mermaid code={mermaidCode} key={mermaidCode} />
)}
{htmlCode.length > 0 && enableArtifacts && (
<FullScreen className="no-dark html" right={70}>
<ArtifactsShareButton
style={{ position: "absolute", right: 20, top: 10 }}
getCode={() => htmlCode}
/>
<IconButton
style={{ position: "absolute", right: 120, top: 10 }}
bordered
icon={<ReloadButtonIcon />}
shadow
onClick={() => previewRef.current?.reload()}
/>
<HTMLPreview
ref={previewRef}
code={htmlCode}
autoHeight={!document.fullscreenElement}
height={!document.fullscreenElement ? 600 : height}
/>
</FullScreen>
)}
<CodePreview
mermaidCode={mermaidCode}
htmlCode={htmlCode}
enableArtifacts={enableArtifacts}
previewRef={previewRef}
height={height}
/>
</>
);
}

60
app/global.d.ts vendored
View File

@ -10,34 +10,34 @@ declare module "*.scss" {
declare module "*.svg";
declare interface Window {
__TAURI__?: {
writeText(text: string): Promise<void>;
invoke(command: string, payload?: Record<string, unknown>): Promise<any>;
dialog: {
save(options?: Record<string, unknown>): Promise<string | null>;
};
fs: {
writeBinaryFile(path: string, data: Uint8Array): Promise<void>;
writeTextFile(path: string, data: string): Promise<void>;
};
notification: {
requestPermission(): Promise<Permission>;
isPermissionGranted(): Promise<boolean>;
sendNotification(options: string | Options): void;
};
updater: {
checkUpdate(): Promise<UpdateResult>;
installUpdate(): Promise<void>;
onUpdaterEvent(
handler: (status: UpdateStatusResult) => void,
): Promise<UnlistenFn>;
};
http: {
fetch<T>(
url: string,
options?: Record<string, unknown>,
): Promise<Response<T>>;
};
};
// Add more specific types
interface TauriCommands {
writeText(text: string): Promise<void>;
invoke(command: string, payload?: Record<string, unknown>): Promise<any>;
}
interface TauriDialog {
save(options?: Record<string, unknown>): Promise<string | null>;
}
interface TauriFS {
writeBinaryFile(path: string, data: Uint8Array): Promise<void>;
writeTextFile(path: string, data: string): Promise<void>;
}
interface TauriNotification {
requestPermission(): Promise<Permission>;
isPermissionGranted(): Promise<boolean>;
sendNotification(options: string | Options): void;
}
declare global {
interface Window {
__TAURI__?: {
dialog: TauriDialog;
fs: TauriFS;
notification: TauriNotification;
// ... other Tauri interfaces
};
}
}

221
app/lib/audio.ts
View File

@ -1,26 +1,10 @@
export class AudioHandler {
private context: AudioContext;
private mergeNode: ChannelMergerNode;
class AudioAnalyzer {
private analyser: AnalyserNode;
private analyserData: Uint8Array;
public analyser: AnalyserNode;
private workletNode: AudioWorkletNode | null = null;
private stream: MediaStream | null = null;
private source: MediaStreamAudioSourceNode | null = null;
private recordBuffer: Int16Array[] = [];
private readonly sampleRate = 24000;
private nextPlayTime: number = 0;
private isPlaying: boolean = false;
private playbackQueue: AudioBufferSourceNode[] = [];
private playBuffer: Int16Array[] = [];
constructor() {
this.context = new AudioContext({ sampleRate: this.sampleRate });
// using ChannelMergerNode to get merged audio data, and then get analyser data.
this.mergeNode = new ChannelMergerNode(this.context, { numberOfInputs: 2 });
this.analyser = new AnalyserNode(this.context, { fftSize: 256 });
constructor(context: AudioContext) {
this.analyser = new AnalyserNode(context, { fftSize: 256 });
this.analyserData = new Uint8Array(this.analyser.frequencyBinCount);
this.mergeNode.connect(this.analyser);
}
getByteFrequencyData() {
@ -28,173 +12,34 @@ export class AudioHandler {
return this.analyserData;
}
async initialize() {
await this.context.audioWorklet.addModule("/audio-processor.js");
}
async startRecording(onChunk: (chunk: Uint8Array) => void) {
try {
if (!this.workletNode) {
await this.initialize();
}
this.stream = await navigator.mediaDevices.getUserMedia({
audio: {
channelCount: 1,
sampleRate: this.sampleRate,
echoCancellation: true,
noiseSuppression: true,
},
});
await this.context.resume();
this.source = this.context.createMediaStreamSource(this.stream);
this.workletNode = new AudioWorkletNode(
this.context,
"audio-recorder-processor",
);
this.workletNode.port.onmessage = (event) => {
if (event.data.eventType === "audio") {
const float32Data = event.data.audioData;
const int16Data = new Int16Array(float32Data.length);
for (let i = 0; i < float32Data.length; i++) {
const s = Math.max(-1, Math.min(1, float32Data[i]));
int16Data[i] = s < 0 ? s * 0x8000 : s * 0x7fff;
}
const uint8Data = new Uint8Array(int16Data.buffer);
onChunk(uint8Data);
// save recordBuffer
// @ts-ignore
this.recordBuffer.push.apply(this.recordBuffer, int16Data);
}
};
this.source.connect(this.workletNode);
this.source.connect(this.mergeNode, 0, 0);
this.workletNode.connect(this.context.destination);
this.workletNode.port.postMessage({ command: "START_RECORDING" });
} catch (error) {
console.error("Error starting recording:", error);
throw error;
}
}
stopRecording() {
if (!this.workletNode || !this.source || !this.stream) {
throw new Error("Recording not started");
}
this.workletNode.port.postMessage({ command: "STOP_RECORDING" });
this.workletNode.disconnect();
this.source.disconnect();
this.stream.getTracks().forEach((track) => track.stop());
}
startStreamingPlayback() {
this.isPlaying = true;
this.nextPlayTime = this.context.currentTime;
}
stopStreamingPlayback() {
this.isPlaying = false;
this.playbackQueue.forEach((source) => source.stop());
this.playbackQueue = [];
this.playBuffer = [];
}
playChunk(chunk: Uint8Array) {
if (!this.isPlaying) return;
const int16Data = new Int16Array(chunk.buffer);
// @ts-ignore
this.playBuffer.push.apply(this.playBuffer, int16Data); // save playBuffer
const float32Data = new Float32Array(int16Data.length);
for (let i = 0; i < int16Data.length; i++) {
float32Data[i] = int16Data[i] / (int16Data[i] < 0 ? 0x8000 : 0x7fff);
}
const audioBuffer = this.context.createBuffer(
1,
float32Data.length,
this.sampleRate,
);
audioBuffer.getChannelData(0).set(float32Data);
const source = this.context.createBufferSource();
source.buffer = audioBuffer;
source.connect(this.context.destination);
source.connect(this.mergeNode, 0, 1);
const chunkDuration = audioBuffer.length / this.sampleRate;
source.start(this.nextPlayTime);
this.playbackQueue.push(source);
source.onended = () => {
const index = this.playbackQueue.indexOf(source);
if (index > -1) {
this.playbackQueue.splice(index, 1);
}
};
this.nextPlayTime += chunkDuration;
if (this.nextPlayTime < this.context.currentTime) {
this.nextPlayTime = this.context.currentTime;
}
}
_saveData(data: Int16Array, bytesPerSample = 16): Blob {
const headerLength = 44;
const numberOfChannels = 1;
const byteLength = data.buffer.byteLength;
const header = new Uint8Array(headerLength);
const view = new DataView(header.buffer);
view.setUint32(0, 1380533830, false); // RIFF identifier 'RIFF'
view.setUint32(4, 36 + byteLength, true); // file length minus RIFF identifier length and file description length
view.setUint32(8, 1463899717, false); // RIFF type 'WAVE'
view.setUint32(12, 1718449184, false); // format chunk identifier 'fmt '
view.setUint32(16, 16, true); // format chunk length
view.setUint16(20, 1, true); // sample format (raw)
view.setUint16(22, numberOfChannels, true); // channel count
view.setUint32(24, this.sampleRate, true); // sample rate
view.setUint32(28, this.sampleRate * 4, true); // byte rate (sample rate * block align)
view.setUint16(32, numberOfChannels * 2, true); // block align (channel count * bytes per sample)
view.setUint16(34, bytesPerSample, true); // bits per sample
view.setUint32(36, 1684108385, false); // data chunk identifier 'data'
view.setUint32(40, byteLength, true); // data chunk length
// using data.buffer, so no need to setUint16 to view.
return new Blob([view, data.buffer], { type: "audio/mpeg" });
}
savePlayFile() {
// @ts-ignore
return this._saveData(new Int16Array(this.playBuffer));
}
saveRecordFile(
audioStartMillis: number | undefined,
audioEndMillis: number | undefined,
) {
const startIndex = audioStartMillis
? Math.floor((audioStartMillis * this.sampleRate) / 1000)
: 0;
const endIndex = audioEndMillis
? Math.floor((audioEndMillis * this.sampleRate) / 1000)
: this.recordBuffer.length;
return this._saveData(
// @ts-ignore
new Int16Array(this.recordBuffer.slice(startIndex, endIndex)),
);
}
async close() {
this.recordBuffer = [];
this.workletNode?.disconnect();
this.source?.disconnect();
this.stream?.getTracks().forEach((track) => track.stop());
await this.context.close();
getNode() {
return this.analyser;
}
}
class AudioPlayback {
private nextPlayTime: number = 0;
private isPlaying: boolean = false;
private playbackQueue: AudioBufferSourceNode[] = [];
private playBuffer: Int16Array[] = [];
// Add playback related methods
}
export class AudioHandler {
private context: AudioContext;
private mergeNode: ChannelMergerNode;
private analyzer: AudioAnalyzer;
private playback: AudioPlayback;
constructor() {
this.context = new AudioContext({ sampleRate: 24000 });
this.mergeNode = new ChannelMergerNode(this.context, { numberOfInputs: 2 });
this.analyzer = new AudioAnalyzer(this.context);
this.playback = new AudioPlayback();
this.mergeNode.connect(this.analyzer.getNode());
}
// ... rest of the implementation
}

26
app/store/sd.ts
View File

@ -25,6 +25,32 @@ const DEFAULT_SD_STATE = {
currentParams: defaultParams,
};
const createDrawStore = (set: any, get: any) => ({
draw: [],
updateDraw: (_draw: any) => {
const draw = get().draw || [];
draw.some((item, index) => {
if (item.id === _draw.id) {
draw[index] = _draw;
set(() => ({ draw }));
return true;
}
});
},
});
const createModelStore = (set: any) => ({
currentModel: null,
currentParams: null,
setCurrentModel: (model: any) => set({ currentModel: model }),
setCurrentParams: (data: any) => set({ currentParams: data }),
});
export const createStore = (set: any, get: any) => ({
...createDrawStore(set, get),
...createModelStore(set),
});
export const useSdStore = createPersistStore<
{
currentId: number;

404
app/styles/globals.scss
View File

@ -1,401 +1,3 @@
@import "./animation.scss";
@import "./window.scss";
@mixin light {
--theme: light;
/* color */
--white: white;
--black: rgb(48, 48, 48);
--gray: rgb(250, 250, 250);
--primary: rgb(29, 147, 171);
--second: rgb(231, 248, 255);
--hover-color: #f3f3f3;
--bar-color: rgba(0, 0, 0, 0.1);
--theme-color: var(--gray);
/* shadow */
--shadow: 50px 50px 100px 10px rgb(0, 0, 0, 0.1);
--card-shadow: 0px 2px 4px 0px rgb(0, 0, 0, 0.05);
/* stroke */
--border-in-light: 1px solid rgb(222, 222, 222);
}
@mixin dark {
--theme: dark;
/* color */
--white: rgb(30, 30, 30);
--black: rgb(187, 187, 187);
--gray: rgb(21, 21, 21);
--primary: rgb(29, 147, 171);
--second: rgb(27 38 42);
--hover-color: #323232;
--bar-color: rgba(255, 255, 255, 0.1);
--border-in-light: 1px solid rgba(255, 255, 255, 0.192);
--theme-color: var(--gray);
div:not(.no-dark) > svg {
filter: invert(0.5);
}
}
.light {
@include light;
}
.dark {
@include dark;
}
.mask {
filter: invert(0.8);
}
:root {
@include light;
--window-width: 90vw;
--window-height: 90vh;
--sidebar-width: 300px;
--window-content-width: calc(100% - var(--sidebar-width));
--message-max-width: 80%;
--full-height: 100%;
}
@media only screen and (max-width: 600px) {
:root {
--window-width: 100vw;
--window-height: var(--full-height);
--sidebar-width: 100vw;
--window-content-width: var(--window-width);
--message-max-width: 100%;
}
.no-mobile {
display: none;
}
}
@media (prefers-color-scheme: dark) {
:root {
@include dark;
}
}
html {
height: var(--full-height);
font-family: "Noto Sans", "SF Pro SC", "SF Pro Text", "SF Pro Icons",
"PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
body {
background-color: var(--gray);
color: var(--black);
margin: 0;
padding: 0;
height: var(--full-height);
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
user-select: none;
touch-action: pan-x pan-y;
overflow: hidden;
@media only screen and (max-width: 600px) {
background-color: var(--second);
}
*:focus-visible {
outline: none;
}
}
::-webkit-scrollbar {
--bar-width: 10px;
width: var(--bar-width);
height: var(--bar-width);
}
::-webkit-scrollbar-track {
background-color: transparent;
}
::-webkit-scrollbar-thumb {
background-color: var(--bar-color);
border-radius: 20px;
background-clip: content-box;
border: 1px solid transparent;
}
select {
border: var(--border-in-light);
padding: 10px;
border-radius: 10px;
appearance: none;
cursor: pointer;
background-color: var(--white);
color: var(--black);
text-align: center;
}
label {
cursor: pointer;
}
input {
text-align: center;
font-family: inherit;
}
input[type="checkbox"] {
cursor: pointer;
background-color: var(--white);
color: var(--black);
appearance: none;
border: var(--border-in-light);
border-radius: 5px;
height: 16px;
width: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
}
input[type="checkbox"]:checked::after {
display: inline-block;
width: 8px;
height: 8px;
background-color: var(--primary);
content: " ";
border-radius: 2px;
}
input[type="range"] {
appearance: none;
background-color: var(--white);
color: var(--black);
}
@mixin thumb() {
appearance: none;
height: 8px;
width: 20px;
background-color: var(--primary);
border-radius: 10px;
cursor: pointer;
transition: all ease 0.3s;
margin-left: 5px;
border: none;
}
input[type="range"]::-webkit-slider-thumb {
@include thumb();
}
input[type="range"]::-moz-range-thumb {
@include thumb();
}
input[type="range"]::-ms-thumb {
@include thumb();
}
@mixin thumbHover() {
transform: scaleY(1.2);
width: 24px;
}
input[type="range"]::-webkit-slider-thumb:hover {
@include thumbHover();
}
input[type="range"]::-moz-range-thumb:hover {
@include thumbHover();
}
input[type="range"]::-ms-thumb:hover {
@include thumbHover();
}
input[type="number"],
input[type="text"],
input[type="password"] {
appearance: none;
border-radius: 10px;
border: var(--border-in-light);
min-height: 36px;
box-sizing: border-box;
background: var(--white);
color: var(--black);
padding: 0 10px;
max-width: 50%;
font-family: inherit;
}
div.math {
overflow-x: auto;
}
.modal-mask {
z-index: 9999;
position: fixed;
top: 0;
left: 0;
height: var(--full-height);
width: 100vw;
background-color: rgba($color: #000000, $alpha: 0.5);
display: flex;
align-items: center;
justify-content: center;
@media screen and (max-width: 600px) {
align-items: flex-end;
}
}
.link {
font-size: 12px;
color: var(--primary);
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
pre {
position: relative;
&:hover .copy-code-button {
pointer-events: all;
transform: translateX(0px);
opacity: 0.5;
}
.copy-code-button {
position: absolute;
right: 10px;
top: 1em;
cursor: pointer;
padding: 0px 5px;
background-color: var(--black);
color: var(--white);
border: var(--border-in-light);
border-radius: 10px;
transform: translateX(10px);
pointer-events: none;
opacity: 0;
transition: all ease 0.3s;
&:after {
content: "copy";
}
&:hover {
opacity: 1;
}
}
}
pre {
.show-hide-button {
border-radius: 10px;
position: absolute;
inset: 0 0 auto 0;
width: 100%;
margin: auto;
height: fit-content;
display: inline-flex;
justify-content: center;
pointer-events: none;
button{
pointer-events: auto;
margin-top: 3em;
margin-bottom: 4em;
padding: 5px 16px;
border: 0;
cursor: pointer;
border-radius: 14px;
text-align: center;
color: white;
background: #464e4e;
}
}
.expanded {
background-image: none;
}
.collapsed {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.06));
}
}
.clickable {
cursor: pointer;
&:hover {
filter: brightness(0.9);
}
&:focus {
filter: brightness(0.95);
}
}
.error {
width: 80%;
border-radius: 20px;
border: var(--border-in-light);
box-shadow: var(--card-shadow);
padding: 20px;
overflow: auto;
background-color: var(--white);
color: var(--black);
pre {
overflow: auto;
}
}
.password-input-container {
max-width: 50%;
display: flex;
justify-content: flex-end;
.password-eye {
margin-right: 4px;
}
.password-input {
min-width: 80%;
}
}
.user-avatar {
height: 30px;
min-height: 30px;
width: 30px;
min-width: 30px;
display: flex;
align-items: center;
justify-content: center;
border: var(--border-in-light);
box-shadow: var(--card-shadow);
border-radius: 11px;
}
.one-line {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.copyable {
user-select: text;
}
@import 'variables';
@import 'responsive';
@import 'base';

17379
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

3078
yarn.lock
View File

File diff suppressed because it is too large Load Diff