シンプルなAIアプリ２

import { serveDir } from "https://deno.land/std@0.224.0/http/mod.ts";
import { IClientToServer, IServerToClient } from "../common/interface.ts";

async function handler(req: Request) {
    const url = new URL(req.url);

    if (url.pathname === "/ai-api" && req.method === "POST") {
        const { prompt } = await req.json() as IClientToServer;
        const sendData: IServerToClient = { status: 'Error', result: "プロンプトがありません。" };
        if (prompt) {
            sendData.status = 'Ok';
            sendData.result = `AI処理は未実装。以下のプロンプトを受け取りました。\n\n${prompt}`;
        }
        return new Response(JSON.stringify(sendData), {
            headers: { "content-type": "application/json" }
        });
    }

    return serveDir(req, {
        fsRoot: "public"
    })
}

Deno.serve({ port: 3456 }, handler);

/**
 * クライアントからサーバに送信するJSONデータのInterface
 */
export interface IClientToServer {
    /**
     * クライアントからサーバーに送るプロンプト
     */
    prompt: string;
}

/**
 * サーバーからクライアントに送信するJSONデータのInterface
 */
export interface IServerToClient {
    /**
     * サーバーの結果
     */
    status: 'Ok' | 'Error';
    /**
     * サーバーからクライアントに送る結果
     */
    result: string;
}

import { IClientToServer, IServerToClient } from "../common/interface.ts";

// 送信ボタンのクリックイベントを登録する
const sendButton = document.getElementById("send-button");
if (sendButton instanceof HTMLButtonElement) {
    sendButton.addEventListener("click", async () => {
        try {
            // id="ai-prompt"のtextareaからプロンプトを得る。
            const prompt = GetPrompt();

            // プロンプトが空なら、それを表示して終了する。
            if (!prompt) {
                UpdateAiResult("プロンプトがありません");
                return;
            }

            // プロンプトをサーバーの"ai-api"に送信する。
            const sendData: IClientToServer = { prompt: prompt };
            const response = await fetch("ai-api", {
                method: "POST",
                body: JSON.stringify(sendData)
            });

            // サーバーから結果が返ってきたら、それを表示する。
            const json = await response.json() as IServerToClient;
            UpdateAiResult(json.result);
        } catch (error) {
            // エラーがあった場合は、それを表示する。
            console.error('Error:', error);
            UpdateAiResult(`エラーが発生しました: ${(error as Error).message}`);
        }
    });
}

/**
 * id="ai-prompt"からプロンプトを取得する。
 * @returns 
 */
function GetPrompt() {
    const aiPromptTextArea = document.getElementById("ai-prompt") as HTMLTextAreaElement | null;
    const prompt = aiPromptTextArea?.value ?? "";
    // 前後の空白文字を削除したあとで返す。
    return prompt.trim();
}

/**
 * id="ai-result"のテキストをresultにする。
 * @param result 
 */
function UpdateAiResult(result: string) {
    const aiResult = document.getElementById("ai-result");
    if (aiResult) {
        aiResult.innerText = result;
    }
}