refactor: restructure audio handling and enhance type definitions

- Refactored audio handling by separating concerns into AudioAnalyzer and AudioPlayback classes.
- Improved type definitions for Tauri commands and dialog interfaces in global.d.ts.
- Added new CodeActions and CodePreview components to enhance code display and interaction in markdown.tsx.
- Updated state management in sd.ts to include drawing functionality.
- Cleaned up global styles in globals.scss, reducing complexity and improving maintainability.

app/components/markdown.tsx

@@ -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
+        <CodeActions
-          className="copy-code-button"
+          onCopy={() =>
-          onClick={() => {
+            copyToClipboard(ref.current?.querySelector("code")?.innerText ?? "")
-            if (ref.current) {
-              copyToClipboard(
-                ref.current.querySelector("code")?.innerText ?? "",
-              );
           }
-          }}
+        />
-        ></span>
         {props.children}
       </pre>
-      {mermaidCode.length > 0 && (
+      <CodePreview
-        <Mermaid code={mermaidCode} key={mermaidCode} />
+        mermaidCode={mermaidCode}
-      )}
+        htmlCode={htmlCode}
-      {htmlCode.length > 0 && enableArtifacts && (
+        enableArtifacts={enableArtifacts}
-        <FullScreen className="no-dark html" right={70}>
+        previewRef={previewRef}
-          <ArtifactsShareButton
+        height={height}
-            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>
-      )}
     </>
   );
 }

app/global.d.ts

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

app/lib/audio.ts

@@ -1,26 +1,10 @@
-export class AudioHandler {
+class AudioAnalyzer {
-  private context: AudioContext;
+  private analyser: AnalyserNode;
-  private mergeNode: ChannelMergerNode;
   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;
+  constructor(context: AudioContext) {
-  private isPlaying: boolean = false;
+    this.analyser = new AnalyserNode(context, { fftSize: 256 });
-  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 });
     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() {
+  getNode() {
-    await this.context.audioWorklet.addModule("/audio-processor.js");
+    return this.analyser;
-  }
-
-  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() {
+class AudioPlayback {
-    if (!this.workletNode || !this.source || !this.stream) {
+  private nextPlayTime: number = 0;
-      throw new Error("Recording not started");
+  private isPlaying: boolean = false;
+  private playbackQueue: AudioBufferSourceNode[] = [];
+  private playBuffer: Int16Array[] = [];
+
+  // Add playback related methods
 }
 
-    this.workletNode.port.postMessage({ command: "STOP_RECORDING" });
+export class AudioHandler {
+  private context: AudioContext;
+  private mergeNode: ChannelMergerNode;
+  private analyzer: AudioAnalyzer;
+  private playback: AudioPlayback;
 
-    this.workletNode.disconnect();
+  constructor() {
-    this.source.disconnect();
+    this.context = new AudioContext({ sampleRate: 24000 });
-    this.stream.getTracks().forEach((track) => track.stop());
+    this.mergeNode = new ChannelMergerNode(this.context, { numberOfInputs: 2 });
-  }
+    this.analyzer = new AudioAnalyzer(this.context);
-  startStreamingPlayback() {
+    this.playback = new AudioPlayback();
-    this.isPlaying = true;
+
-    this.nextPlayTime = this.context.currentTime;
+    this.mergeNode.connect(this.analyzer.getNode());
   }
 
-  stopStreamingPlayback() {
+  // ... rest of the implementation
-    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();
-  }
 }

app/store/sd.ts

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

app/styles/globals.scss

@@ -1,401 +1,3 @@
-@import "./animation.scss";
+@import 'variables';
-@import "./window.scss";
+@import 'responsive';
-
+@import 'base';
-@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;
-}