tkh44/local-chrome-ai.html

## local-chrome-ai.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My New Website</title>
    <link rel="stylesheet" href="https://unpkg.com/simpledotcss/simple.css">
    <script type="module">
        const session = await window.ai.createTextSession();
        const inputEl = document.getElementById("input");
        const responseEl = document.getElementById("response");
        const timeEl = document.getElementById("time");
        let timeoutId;

        inputEl.addEventListener("input", debounce(queryAPI, 40));

        function debounce(func, wait) {
            return function executedFunction() {
                clearTimeout(timeoutId);
                timeoutId = setTimeout(func, wait);
            };
        }

        async function queryAPI() {
            const input = inputEl.value ?? "";
            const startTime = performance.now();
            timeEl.textContent = input.length < 1 ? "type something" : "Loading...";

            const result = await session.prompt(input);
            const endTime = performance.now();

            responseEl.textContent = result;
            timeEl.textContent = `${Math.floor(endTime - startTime)}ms`;
        }
    </script>
</head>

<body>
    <header>
        <h1>Local Gemini Test</h1>

    </header>

    <main>
        <div class="center">
            <form>
                <textarea id="input" rows="4" cols="50"></textarea>
            </form>
            <mark id="time">0 ms</mark>
            <code><pre id="response">waiting for input</pre></code>

        </div>


        <style>
            .center {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                text-align: center;
            }

            pre {
                text-align: left;
                white-space: pre-wrap;
                max-width: 90dvw;
            }

            #time {
                min-height: 1em;
                min-width: 4em;
            }
        </style>
    </main>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>My New Website</title>
	<link rel="stylesheet" href="https://unpkg.com/simpledotcss/simple.css">
	<script type="module">
	const session = await window.ai.createTextSession();
	const inputEl = document.getElementById("input");
	const responseEl = document.getElementById("response");
	const timeEl = document.getElementById("time");
	let timeoutId;

	inputEl.addEventListener("input", debounce(queryAPI, 40));

	function debounce(func, wait) {
	return function executedFunction() {
	clearTimeout(timeoutId);
	timeoutId = setTimeout(func, wait);
	};
	}

	async function queryAPI() {
	const input = inputEl.value ?? "";
	const startTime = performance.now();
	timeEl.textContent = input.length < 1 ? "type something" : "Loading...";

	const result = await session.prompt(input);
	const endTime = performance.now();

	responseEl.textContent = result;
	timeEl.textContent = `${Math.floor(endTime - startTime)}ms`;
	}
	</script>
	</head>

	<body>
	<header>
	<h1>Local Gemini Test</h1>

	</header>

	<main>
	<div class="center">
	<form>
	<textarea id="input" rows="4" cols="50"></textarea>
	</form>
	<mark id="time">0 ms</mark>
	<code><pre id="response">waiting for input</pre></code>

	</div>



	<style>
	.center {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	}

	pre {
	text-align: left;
	white-space: pre-wrap;
	max-width: 90dvw;
	}

	#time {
	min-height: 1em;
	min-width: 4em;
	}
	</style>
	</main>
	</body>

	</html>