examples/gpt-2/index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WasmGPT</title>

    <meta property="og:title" content="WasmGPT – “ChatGPT” in the Browser, No WebGPU or Server Needed">
    <meta property="og:description" content="WASM-powered chatbot directly in the browser. No WebGPU or server is required to enjoy.">
    <!-- <meta property="og:image" content="[insert URL of image you want to use]">
    <meta property="og:url" content="[insert URL of your page]"> -->

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="WasmGPT – “ChatGPT” in the Browser, No WebGPU or Server Needed">
    <meta name="twitter:description" content="WASM-powered chatbot directly in the browser. No WebGPU or server is required to enjoy.">
    <!-- <meta name="twitter:image" content="[insert URL of image you want to use]">
    <meta name="twitter:url" content="[insert URL of your page]"> -->

    <style>
        body {
            min-height: 100vh;
            min-height: fill-available;
            min-height: -webkit-fill-available;
        }

        html {
            height: fill-available;
            height: -webkit-fill-available;
            box-sizing: border-box;
        }

        *,
        *:before,
        *:after {
            box-sizing: inherit;
        }

        * {
            margin: 0;
            padding: 0;
        }

        body {
            font-family: monospace;
            font-size: 16px;
            margin: 0;
            padding: 0;
        }

        #wrap {
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100%;
            max-height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: stretch;
            flex-direction: column;
            padding: 0;
        }

        #wrap > * {
            padding: 10px;
        }

        #stdout {
            white-space: pre-wrap;
            height: 200px;
            overflow-y: auto;
        }

        #output {
            white-space: pre-wrap;
            overflow-y: auto;
        }

        #stdout-wrapper {
            color: #eee;
            background-color: #333;
        }

        #chat {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 5px;
        }

        #chatbox, #params {
            display: flex;
            flex-direction: row;
            align-items: stretch;
            gap: 5px;
        }

        #params {
            align-items: stretch;
            justify-content: space-evenly;
        }


        #chat input, #chat button {    
            padding: 3px 10px;
            font-size: 16px;
        }

        #launch {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }

        #launch-button {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            cursor: pointer;
            background-color: #eee;
            border: #333 4px solid;

            padding: 10px;
            font-family: monospace;

            gap: 10px;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
            <div><b>WasmGPT</b></div>
            <div style="flex: 1"></div>
            <a class="icon github-icon" href="https://github.com/lxe/ggml/tree/wasm-demo"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33c.85 0 1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2Z"/></svg></a>
            <a class="icon twitter-icon" href="https://twitter.com/lxe"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M22.46 6c-.77.35-1.6.58-2.46.69c.88-.53 1.56-1.37 1.88-2.38c-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29c0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15c0 1.49.75 2.81 1.91 3.56c-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07a4.28 4.28 0 0 0 4 2.98a8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21C16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56c.84-.6 1.56-1.36 2.14-2.23Z"/></svg></a>

        </div>

        <div id="launch">
            <button id="launch-button">
                <h2>Launch</h2> 
                <span>(will download a ~900MB file once, then will use cache)</span>
            </button>
        </div>

        <code id="chat-wrapper"><pre id="output"></pre></code>

    
        <div style="flex:1"></div>

        <form id="chat" style="display: none;">
            <div id="chatbox">
                <input style="flex: 1" type="text" id="inputPrompt" placeholder="Ask a Question" />
                <button style="max-width: 100px;"><img alt="" style="height:32px" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBVcGxvYWRlZCB0bzogU1ZHIFJlcG8sIHd3dy5zdmdyZXBvLmNvbSwgR2VuZXJhdG9yOiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIGZpbGw9IiMwMDAwMDAiIGhlaWdodD0iODAwcHgiIHdpZHRoPSI4MDBweCIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiANCgkgdmlld0JveD0iMCAwIDQ5NS4wMDMgNDk1LjAwMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8ZyBpZD0iWE1MSURfNTFfIj4NCgk8cGF0aCBpZD0iWE1MSURfNTNfIiBkPSJNMTY0LjcxMSw0NTYuNjg3YzAsMi45NjYsMS42NDcsNS42ODYsNC4yNjYsNy4wNzJjMi42MTcsMS4zODUsNS43OTksMS4yMDcsOC4yNDUtMC40NjhsNTUuMDktMzcuNjE2DQoJCWwtNjcuNi0zMi4yMlY0NTYuNjg3eiIvPg0KCTxwYXRoIGlkPSJYTUxJRF81Ml8iIGQ9Ik00OTIuNDMxLDMyLjQ0M2MtMS41MTMtMS4zOTUtMy40NjYtMi4xMjUtNS40NC0yLjEyNWMtMS4xOSwwLTIuMzc3LDAuMjY0LTMuNSwwLjgxNkw3LjkwNSwyNjQuNDIyDQoJCWMtNC44NjEsMi4zODktNy45MzcsNy4zNTMtNy45MDQsMTIuNzgzYzAuMDMzLDUuNDIzLDMuMTYxLDEwLjM1Myw4LjA1NywxMi42ODlsMTI1LjM0Miw1OS43MjRsMjUwLjYyLTIwNS45OUwxNjQuNDU1LDM2NC40MTQNCgkJbDE1Ni4xNDUsNzQuNGMxLjkxOCwwLjkxOSw0LjAxMiwxLjM3Niw2LjA4NCwxLjM3NmMxLjc2OCwwLDMuNTE5LTAuMzIyLDUuMTg2LTAuOTc3YzMuNjM3LTEuNDM4LDYuNTI3LTQuMzE4LDcuOTctNy45NTYNCgkJTDQ5NC40MzYsNDEuMjU3QzQ5NS42NiwzOC4xODgsNDk0Ljg2MiwzNC42NzksNDkyLjQzMSwzMi40NDN6Ii8+DQo8L2c+DQo8L3N2Zz4=" /></button>
            </div>

            <div id="params">
                <div>Top K: <input id="top_k" style="width: 55px;" value="80" /></div>
                <div>Top P: <input id="top_p" style="width: 55px;" value="0.9" /></div>
                <div>Temp: <input id="temp" style="width: 55px;" value="0.8" /></div>
                <div>Rep Penalty: <input id="repetition_penalty" style="width: 55px;" value="1.2" /></div>
            </div>
            

        </form>

        <code id="stdout-wrapper"><pre id="stdout"></pre></code>
    </div>

    <script type='text/javascript'>

        const $stdout = document.getElementById('stdout');

        $stdout.addEventListener('DOMNodeInserted', () => {
            $stdout.scrollTop = $stdout.scrollHeight;
        });

        const $launchButton = document.getElementById('launch-button');
        $launchButton.addEventListener('click', () => {
            document.getElementById('launch').style.display = 'none';

            const script = document.createElement('script');
            script.src = 'gpt-2.js';
            script.async = true;
            document.body.appendChild(script);

            $stdout.innerHTML = 'Loading model...';
        });

        const $output = document.getElementById("output")

        $output.addEventListener('DOMNodeInserted', () => {
            $output.scrollTop = $output.scrollHeight;
        });

        function print(text) {
            $stdout.innerHTML += text + "<br>";
        }

        let isGenerating = false;
        runawayGenerateTimer = null;

        var Module = {
            'print': print,
            'printErr': print,

            callback: function (resultStr) {
                console.log(resultStr);
                if (resultStr === '<|endoftext|>') {
                    $output.innerHTML += '\n'
                    $input.diabled = false;
                    isGenerating = false;
                } else {
                    const text = $output.innerHTML + resultStr;
                    $output.innerHTML = text
                        .replace(/(User|Assistant):(\S)/g, '$1: $2')

                    if (runawayGenerateTimer) clearTimeout(runawayGenerateTimer)
                    runawayGenerateTimer = setTimeout(function () {
                        $input.diabled = false;
                        isGenerating = false;
                    }, 10000);
                }
            },

            onRuntimeInitialized: function () {
                Module.init();

                $chat = document.getElementById("chat");
                $chat.style.display = "flex";

                $input = document.getElementById("inputPrompt");

                $chat.addEventListener("submit", function (e) {
                    e.preventDefault();

                    if (isGenerating) return false;

                    const inputPrompt = $input.value;
                    $input.value = "";

                    const prompt = '' + 
                        // 'A conversation between a human and an intelligent and helpful AI assistant:\n\n' + 
                        // 'Human: What is the capital of France?\n' + 
                        // 'Assistant: The capital of France is Paris.\n\n' +
                        // 'Human: How many people live in Paris?\n' +
                        // 'Assistant: About 2.2 million people live in Paris.\n\n' + $input.innerText + '\n' + 
                        'User: ' + inputPrompt + '\nAssistant:';

                    console.log(prompt);

                    const top_k = parseInt(document.getElementById('top_k').value, 10) || 80;
                    const top_p = parseFloat(document.getElementById('top_p').value) || 0.9;
                    const temp = parseFloat(document.getElementById('temp').value) || 0.8;
                    const repetition_penalty = parseFloat(document.getElementById('repetition_penalty').value) || 1.2;
                        
                    Module.generate(prompt, top_k, top_p, temp, repetition_penalty);
                    isGenerating = true;
                    $input.diabled = true;

                    return false;
                });
            },
        };

    </script>

    <!-- Add the javascript glue code (index.js) as generated by Emscripten -->
    <!-- {{{ SCRIPT }}} -->

</body>

</html>