Instant SmolLM

This is a smol model, go easy on it. Check out this demo for full conversations.

generateCompletion(inputText)}
        disabled={isLoading}
        class="w-full text-lg" 
        placeholder="Say something..."
    />

{#if isLoading}
        <p class="text-sm text-slate-600 text-center">{loadingStatus}</p>
    {:else if error}
        <p class="text-sm text-red-600">{error}</p>
    {:else}
        <div class="flex gap-2">
            {#if completionSpeed !== null}
                <Badge>{completionSpeed}ms</Badge>
            {/if}
            {#if tokensPerSecond !== null}
                <Badge>{tokensPerSecond} tok/s</Badge>
            {/if}
        </div>
    {/if}
    <div class="w-full flex flex-col items-center gap-2">
        <input 
            type="range" 
            id="max-tokens" 
            bind:value={maxTokens} 
            min="15" 
            max="75" 
            step="1"
            class="w-full accent-black"
        />
        <label for="max-tokens" class="text-xs italic text-slate-800">Max of {maxTokens} tokens</label>
    </div>
    <div class="flex flex-col items-center mb-4">
        {#if inputText === '' && !isLoading}
        <p class="text-sm mb-2">Try these examples:</p>
        <div class="flex flex-wrap justify-center gap-2">
            {#each promptExamples as prompt}
                <button on:click={() => setPrompt(prompt)}>
                    <Badge
                        variant="outline"
                        class="cursor-pointer bg-orange-100 hover:bg-orange-200"
                    >
                        {prompt}
                    </Badge>
                </button>
            {/each}
        </div>
        {/if}
    </div>
    <pre class="text-xl font-bold whitespace-pre-wrap">{outputText}</pre>

</div>