update ux, links, and example prompts

src/routes/+page.svelte

@@ -2,7 +2,7 @@
     import Textarea from "@/lib/components/ui/textarea/textarea.svelte";
     import Badge from "@/lib/components/ui/badge/badge.svelte";
     import * as webllm from "@mlc-ai/web-llm";
-    import { onMount } from 'svelte';
+    import { onMount, tick } from 'svelte';
 
     let selectedModel = "smollm-360M-instruct-add-basics-q0f32-MLC";
 
@@ -17,6 +17,17 @@
     let isGenerating = false;
     let pendingRequest: string | null = null;
 
+    const promptExamples = [
+        "What is the capital of France?",
+        "Tell me a story about a cat.",
+        "Write a poem about the ocean.",
+    ]
+
+    async function setPrompt(prompt: string) {
+        inputText = prompt;
+        generateCompletion(prompt);
+    }
+
     async function loadWebLLM() {
         isLoading = true;
         error = '';
@@ -26,9 +37,9 @@
 
         const appConfig: webllm.AppConfig = {
             model_list: [{
-                model: `https://huggingface.co/reach-vb/smollm-360M-instruct-add-basics-q0f32-MLC`,
+                model: `https://huggingface.co/reach-vb/smollm-360M-instruct-add-basics-q0f16-MLC`,
                 model_id: 'smollm-360M-instruct-add-basics-q0f32-MLC',
-                model_lib: `${webllm.modelLibURLPrefix}${webllm.modelVersion}/SmolLM-360M-Instruct-q0f32-ctx2k_cs1k-webgpu.wasm`,
+                model_lib: `${webllm.modelLibURLPrefix}${webllm.modelVersion}/SmolLM-360M-Instruct-q0f16-ctx2k_cs1k-webgpu.wasm`,
                 overrides: { context_window_size: 2048 },
             },
             {
@@ -108,16 +119,18 @@
     onMount(loadWebLLM);
 </script>
 
-<div class="flex my-20 flex-col items-center gap-4 max-w-lg mx-auto">
+<div class="flex my-20 flex-col items-center gap-4 max-w-xl mx-auto">
     <h1 class="text-center font-mono font-bold text-4xl">SmolLM 🤗</h1>
-    <p class="text-center font-mono text-sm mb-4">Powered by {selectedModel}</p>
+    <p class="text-center font-mono text-sm mb-4">Powered by <a href="https://huggingface.co/mlc-ai" target="_blank" class="underline text-blue-500">MLC</a> WebLLM <a class="underline text-blue-500" href="https://huggingface.co/HuggingFaceTB/smollm-360M-instruct-add-basics" target="_blank">SmolLM-360M-Instruct-Add-Basics</a> <span class="text-xs italic">(15 Max Tokens)</span></p>    
+
     <Textarea 
-        bind:value={inputText} 
-        on:input={() => generateCompletion(inputText)} 
+        bind:value={inputText}
+        on:input={() => generateCompletion(inputText)}
         disabled={isLoading}
-        class="w-full" 
+        class="w-full text-lg" 
         placeholder="Say something..."
     />
+    <p class="text-center text-xs italic">This model doesn't work well with extremely creative prompts.</p>
     {#if isLoading}
         <p class="text-sm text-slate-600 text-center">{loadingStatus}</p>
     {:else if error}
@@ -130,9 +143,25 @@
             {#if tokensPerSecond !== null}
                 <Badge>{tokensPerSecond} tok/s</Badge>
             {/if}
-            <Badge>{selectedModel}</Badge>
         </div>
     {/if}
-    <pre class="text-lg font-bold whitespace-pre-wrap">{outputText}</pre>
+    <div class="flex flex-col items-center mb-4">
+        {#if inputText === ''}
+        <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>