/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [systemMessage, setSystemMessage] = useState("You are a helpful assistant"); const [userMessage, setUserMessage] = useState(""); const [assistantMessage, setAssistantMessage] = useState(""); const [isLoading, setIsLoading] = useState(false); const isButtonEnabled = systemMessage.trim() !== "" && userMessage.trim() !== ""; const handleCompletion = async () => { setIsLoading(true); setAssistantMessage("(waiting for completion)"); try { const response = await fetch("https://rozek-gdi_aichatcompletionservice.web.val.run", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ SystemMessage: systemMessage, UserMessage: userMessage }), }); if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); const result = await response.text(); setAssistantMessage(result); } catch (error) { setAssistantMessage(`Chat completion failed with: ${error.message}`); } finally { setIsLoading(false); } }; return (

Chat Completion

System Message:

setSystemMessage(e.target.value)}
          placeholder="(enter a system message)"
          disabled={isLoading}
        />
      </div>
      <div className="input-group">
        <label htmlFor="user-message">User Message:</label>
        <textarea
          id="user-message"
          value={userMessage}
          onChange={(e) => setUserMessage(e.target.value)}
          placeholder="(enter your user message)"
          disabled={isLoading}
        />
      </div>
      <div className="button-container">
        <button onClick={handleCompletion} disabled={!isButtonEnabled || isLoading}>
          Start Completion
        </button>
      </div>
      <div className="input-group">
        <label htmlFor="assistant-message">Assistant Message:</label>
        <textarea
          id="assistant-message"
          value={assistantMessage}
          readOnly
          placeholder="(assistant message will appear here)"
        />
      </div>
    </div>
  );
}

function client() {
  createRoot(document.getElementById("root")).render(<App />);
}

if (typeof document !== "undefined") {
  client();
}

export default async function server(request: Request): Promise<Response> {
  return new Response(
    `
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Chat Completion</title>
        <style>${css}</style>
      </head>
      <body>
        <div id="root"></div>
        <script src="https://esm.town/v/std/catch"></script>
        <script type="module" src="${import.meta.url}"></script>
      </body>
    </html>
    `,
    {
      headers: {
        "content-type": "text/html",
      },
    }
  );
}

GDI_AIChatCompletion

Version 7