前端 API

import { createPluginClient } from "@semicoder/malatang-sdk/client";
import type { JSONValue, ModelInfo, ModelRequest, ModelRun } from "@semicoder/malatang-sdk/types";
 
const client = createPluginClient("my-model");

import "./styles.css";
import { useEffect, useRef, useState } from "react";
import { createPluginClient } from "@semicoder/malatang-sdk/client";
import type { ModelInfo, ModelRun } from "@semicoder/malatang-sdk/types";
import {
  Alert,
  Button,
  EmptyState,
  Field,
  Loading,
  ModelSelect,
  Page,
  PageHeader,
  Textarea,
} from "@semicoder/malatang-sdk/ui";
 
const client = createPluginClient("my-model");
export default function ModelPage() {
  const [models, setModels] = useState<ModelInfo[]>([]);
  const [modelId, setModelId] = useState("");
  const [prompt, setPrompt] = useState("");
  const [run, setRun] = useState<ModelRun | null>(null);
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(true);
  const [pending, setPending] = useState(false);
  const selectedRun = useRef("");
  const live = useRef(false);
  const requestPending = useRef(false);
 
  function accept(next: ModelRun) {
    if (!live.current || selectedRun.current !== next.id) return;
    setRun((previous) =>
      !previous || previous.id !== next.id || next.revision >= previous.revision ? next : previous,
    );
  }
 
  useEffect(() => {
    let active = true;
    let generation = 0;
    live.current = true;
    async function refreshModels() {
      const current = ++generation;
      try {
        const items = await client.models.list();
        if (active && current === generation) {
          setModels(items);
          setModelId((value) =>
            items.some((item) => item.id === value && item.configured) ? value : "",
          );
        }
      } catch (reason) {
        if (active && current === generation) setError(String(reason));
      } finally {
        if (active && current === generation) setLoading(false);
      }
    }
    async function refreshRun() {
      const id = selectedRun.current;
      if (!id) return;
      try {
        const next = await client.runs.get(id);
        if (active) accept(next);
      } catch (reason) {
        if (active && selectedRun.current === id) setError(String(reason));
      }
    }
    const offModels = client.models.onChange(() => void refreshModels());
    const offRuns = client.runs.onChange(() => void refreshRun());
    const offReconnect = client.onReconnect(() => {
      void refreshModels();
      void refreshRun();
    });
    void refreshModels();
    return () => {
      active = false;
      live.current = false;
      offModels();
      offRuns();
      offReconnect();
    };
  }, []);
 
  async function start() {
    if (requestPending.current) return;
    requestPending.current = true;
    setPending(true);
    setError("");
    setRun(null);
    selectedRun.current = "";
    try {
      const initial = await client.models.start({ modelId, prompt });
      if (!live.current) return;
      selectedRun.current = initial.id;
      accept(initial);
      accept(await client.runs.get(initial.id));
    } catch (reason) {
      if (live.current) setError(String(reason));
    } finally {
      requestPending.current = false;
      if (live.current) setPending(false);
    }
  }
  async function cancel() {
    if (!run || requestPending.current) return;
    requestPending.current = true;
    setPending(true);
    setError("");
    try {
      accept(await client.runs.cancel(run.id));
    } catch (reason) {
      if (live.current) setError(String(reason));
    } finally {
      requestPending.current = false;
      if (live.current) setPending(false);
    }
  }
  const busy = pending || run?.status === "running";
  const available = models.some((item) => item.configured);
  const selected = models.some((item) => item.id === modelId && item.configured);
  return (
    <Page className="p:space-y-4">
      <PageHeader title="模型示例" />
      {loading && <Loading label="读取模型" />}
      {!loading && !available && (
        <EmptyState title="尚无可用模型" description="请在设置 → 模型服务中添加并连接模型。" />
      )}
      <Field label="模型">
        <ModelSelect models={models} value={modelId} disabled={busy} onValueChange={setModelId} />
      </Field>
      <Field label="提示词">
        <Textarea
          value={prompt}
          maxLength={16000}
          disabled={busy}
          onChange={(event) => setPrompt(event.target.value)}
        />
      </Field>
      {run?.status === "running" ? (
        <Button variant="secondary" loading={pending} onClick={() => void cancel()}>
          取消生成
        </Button>
      ) : (
        <Button
          loading={pending}
          disabled={!selected || !prompt.trim()}
          onClick={() => void start()}
        >
          生成
        </Button>
      )}
      <div className="p:whitespace-pre-wrap p:break-words" aria-live="polite">
        {run?.output}
      </div>
      {run && <p>状态：{run.status}</p>}
      {(error || run?.error) && <Alert>{error || run?.error}</Alert>}
    </Page>
  );
}