alexjercan · August 2, 2023 13:59
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Chat App</title>
    <script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/+esm"></script>
 </head>
 <body>
    <div>
        <label for="openai-key">API key</label>
        <input type="password" id="openai-key" placeholder="Enter the API key...">
        <button id="openai-key-submit">Submit</button>
    </div>
    <div>
        <label for="chat-system">System Prompt</label>
        <input type="text" id="chat-system" placeholder="Enter the system prompt...">
        <button id="chat-system-submit">Submit</button>
    </div>
    <div id="chat-history"></div>
    <div>
        <input type="text" id="chat-input" placeholder="Enter your message...">
        <button id="chat-submit">Submit</button>
    </div>

    <script type="module">
        import openai from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";

        let apiKey = null;
        let history = [];

        function handleChatSystemSubmit() {
            const system = document.getElementById("chat-system").value;
            history = [{role: "system", content: system}];
        }

        document.getElementById("chat-system-submit").addEventListener("click", handleChatSystemSubmit);

        document.getElementById("chat-system").addEventListener("keydown", function(event) {
            if (event.keyCode === 13) {
                handleChatSystemSubmit();
            }
        });

        function handleOpenaiKeySubmit() {
            const key = document.getElementById("openai-key").value;
            apiKey = key;
        }

        document.getElementById("openai-key-submit").addEventListener("click", handleOpenaiKeySubmit);

        document.getElementById("openai-key").addEventListener("keydown", function(event) {
            if (event.keyCode === 13) {
                handleOpenaiKeySubmit();
            }
        });

        function createChatElement(who, message) {
            const div = document.createElement("div");
            div.innerText = `${who}: ${message}`;

            document.getElementById("chat-history").appendChild(div);
        }

        async function handleChatSubmit() {
            const message = document.getElementById("chat-input").value;
            document.getElementById("chat-input").value = "";

            history.push({role: "user", content: message});

            const configuration = new openai.Configuration({
                apiKey: apiKey,
            });
            const openai_api = new openai.OpenAIApi(configuration);

            const chatCompletion = await openai_api.createChatCompletion({
                model: "gpt-3.5-turbo",
                messages: history,
            });

            const response = chatCompletion.data.choices[0].message;

            createChatElement("user", message);
            createChatElement("bot", response.content);

            history.push(response);
        }

        document.getElementById("chat-submit").addEventListener("click", handleChatSubmit);

        document.getElementById("chat-input").addEventListener("keydown", function(event) {
            if (event.keyCode === 13) {
                handleChatSubmit();
            }
        });

    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Chat App</title>
	<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/+esm"></script>
	</head>
	<body>
	<div>
	<label for="openai-key">API key</label>
	<input type="password" id="openai-key" placeholder="Enter the API key...">
	<button id="openai-key-submit">Submit</button>
	</div>
	<div>
	<label for="chat-system">System Prompt</label>
	<input type="text" id="chat-system" placeholder="Enter the system prompt...">
	<button id="chat-system-submit">Submit</button>
	</div>
	<div id="chat-history"></div>
	<div>
	<input type="text" id="chat-input" placeholder="Enter your message...">
	<button id="chat-submit">Submit</button>
	</div>

	<script type="module">
	import openai from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";

	let apiKey = null;
	let history = [];

	function handleChatSystemSubmit() {
	const system = document.getElementById("chat-system").value;
	history = [{role: "system", content: system}];
	}

	document.getElementById("chat-system-submit").addEventListener("click", handleChatSystemSubmit);

	document.getElementById("chat-system").addEventListener("keydown", function(event) {
	if (event.keyCode === 13) {
	handleChatSystemSubmit();
	}
	});

	function handleOpenaiKeySubmit() {
	const key = document.getElementById("openai-key").value;
	apiKey = key;
	}

	document.getElementById("openai-key-submit").addEventListener("click", handleOpenaiKeySubmit);

	document.getElementById("openai-key").addEventListener("keydown", function(event) {
	if (event.keyCode === 13) {
	handleOpenaiKeySubmit();
	}
	});

	function createChatElement(who, message) {
	const div = document.createElement("div");
	div.innerText = `${who}: ${message}`;

	document.getElementById("chat-history").appendChild(div);
	}

	async function handleChatSubmit() {
	const message = document.getElementById("chat-input").value;
	document.getElementById("chat-input").value = "";

	history.push({role: "user", content: message});

	const configuration = new openai.Configuration({
	apiKey: apiKey,
	});
	const openai_api = new openai.OpenAIApi(configuration);

	const chatCompletion = await openai_api.createChatCompletion({
	model: "gpt-3.5-turbo",
	messages: history,
	});

	const response = chatCompletion.data.choices[0].message;

	createChatElement("user", message);
	createChatElement("bot", response.content);

	history.push(response);
	}

	document.getElementById("chat-submit").addEventListener("click", handleChatSubmit);

	document.getElementById("chat-input").addEventListener("keydown", function(event) {
	if (event.keyCode === 13) {
	handleChatSubmit();
	}
	});

	</script>
	</body>
	</html>