// services/api.ts
interface GenerateRequest {
  prompt: string;
  duration?: number;
  temperature?: number;
  seed?: number;
  style?: string;
}

async function generateMusic(req: GenerateRequest): Promise<string> {
  const response = await fetch('/api/generate', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(req),
  });
  const data = await response.json();
  return data.audioUrl;
}

git clone https://github.com/fspecii/ace-step-ui.git
cd ace-step-ui

npm install
# 或者使用 yarn
yarn install

# 创建环境变量文件
cp .env.example .env
# 编辑 .env 文件
VITE_API_BASE_URL=http://your-ace-step-server:port

npm run dev
# 或
yarn dev

npm run build
npm run preview  # 本地预览生产构建

# docker-compose.yml（示例）
version: '3.8'
services:
  ace-step-backend:
    image: ace-step-model:latest
    ports:
      - "8000:8000"

  ace-step-ui:
    build: .
    ports:
      - "3000:3000"
    environment:
      - VITE_API_BASE_URL=http://ace-step-backend:8000

docker-compose up -d

// utils/audioPlayer.ts
export class AudioPlayer {
  private audioContext: AudioContext;
  private audioElement: HTMLAudioElement;

  constructor() {
    this.audioContext = new AudioContext();
    this.audioElement = new Audio();
  }

  async load(url: string): Promise<void> {
    this.audioElement.src = url;
    await this.audioElement.load();
  }

  play(): void {
    this.audioElement.play();
  }

  pause(): void {
    this.audioElement.pause();
  }

  seek(time: number): void {
    this.audioElement.currentTime = time;
  }

  getProgress(): number {
    return this.audioElement.currentTime / this.audioElement.duration;
  }

  onTimeUpdate(callback: (time: number) => void): void {
    this.audioElement.ontimeupdate = () => {
      callback(this.audioElement.currentTime);
    };
  }
}

// services/aceStep.ts
const API_BASE = import.meta.env.VITE_API_BASE_URL || 'http://localhost:8000';

export interface GenerationResult {
  id: string;
  audioUrl: string;
  duration: number;
  prompt: string;
}

export interface GenerationStatus {
  status: 'queued' | 'processing' | 'completed' | 'failed';
  progress?: number;
  error?: string;
}

export async function submitGeneration(
  prompt: string,
  params: { duration?: number; temperature?: number; seed?: number }
): Promise<string> {
  const response = await fetch(`${API_BASE}/api/generate`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ prompt, ...params }),
  });

  if (!response.ok) {
    throw new Error(`Generation failed: ${response.statusText}`);
  }

  const data = await response.json();
  return data.id;
}

export async function pollStatus(id: string): Promise<GenerationStatus> {
  const response = await fetch(`${API_BASE}/api/status/${id}`);
  return response.json();
}

export async function fetchAudioUrl(id: string): Promise<string> {
  const response = await fetch(`${API_BASE}/api/result/${id}`);
  const data = await response.json();
  return data.audioUrl;
}

// stores/historyStore.ts
import { create } from 'zustand';
import { persist } from 'zustand/middleware';

interface HistoryItem {
  id: string;
  prompt: string;
  params: Record<string, unknown>;
  audioUrl: string;
  createdAt: number;
}

interface HistoryStore {
  items: HistoryItem[];
  addItem: (item: Omit<HistoryItem, 'createdAt'>) => void;
  removeItem: (id: string) => void;
  clearHistory: () => void;
}

export const useHistoryStore = create<HistoryStore>()(
  persist(
    (set) => ({
      items: [],
      addItem: (item) =>
        set((state) => ({
          items: [{ ...item, createdAt: Date.now() }, ...state.items],
        })),
      removeItem: (id) =>
        set((state) => ({
          items: state.items.filter((i) => i.id !== id),
        })),
      clearHistory: () => set({ items: [] }),
    }),
    { name: 'ace-step-history' }
  )
);