ai-gui-web/frontend/src/App.tsx

import {
  createSignal,
  type Component,
  createMemo,
  For,
  createResource,
} from "solid-js";

const App: Component = () => {
  const [input, setInput] = createSignal("");
  const [output, setOutput] = createSignal("");

  const [selectedAI, setSelectedAI] = createSignal("");
  const [temperature, setTemperature] = createSignal(1.0);
  const [maxTokens, setMaxTokens] = createSignal(1000);

  const [ais] = createResource(async () => {
    const res: string[] = await (await fetch("/api/ais")).json();

    setSelectedAI(res[0]);

    return res;
  });

  async function generate() {
    setOutput("Generating...");

    const res = await (
      await fetch("/api/generate", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          ai: selectedAI(),
          params: {
            prompt: input(),
            temperature: temperature(),
            max_tokens: maxTokens(),
          },
        }),
      })
    ).text();

    setOutput(res);
  }

  return (
    <div class="root">
      {/* TODO: Make this part of the ui better */}
      <div class="bar">
        <button onClick={generate}>Generate</button>

        <label for="ais">AI</label>
        <select id="ais" onChange={(e) => setSelectedAI(e.target.value)}>
          <For each={ais()}>{(ai) => <option>{ai}</option>}</For>
        </select>

        <label for="temperature">Temperature</label>
        <input
          id="temperature"
          type="number"
          min="0"
          max="2"
          step="0.1"
          value="1"
          onChange={(e) => setTemperature(e.currentTarget.valueAsNumber)}
        />

        <label for="maxTokens">Max Tokens</label>
        <input
          id="maxTokens"
          type="number"
          min="0"
          max="2000"
          step="10"
          value="1000"
          onChange={(e) => setMaxTokens(e.currentTarget.valueAsNumber)}
        />
      </div>
      <div class="io">
        <textarea onInput={(e) => setInput(e.currentTarget.value)} />
        <textarea readonly={true} value={output()} />
      </div>
    </div>
  );
};

export default App;