add slider for max tokens

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, tick } from 'svelte';
+    import { onMount } from 'svelte';
 
     let selectedModel = "smollm-360M-instruct-add-basics-q0f32-MLC";
 
@@ -16,6 +16,7 @@
     let tokensPerSecond: number | null = null;
     let isGenerating = false;
     let pendingRequest: string | null = null;
+    let maxTokens = 15; 
 
     const promptExamples = [
         "Tell me a story about a cat.",
@@ -81,21 +82,15 @@
         isGenerating = true;
         const startTime = performance.now();
         try {
-            console.log("Generating completion:", content);
             const response = await engine.chat.completions.create({
                 messages: [
                     {role: "user", content: content}
                 ],
-                max_tokens: 15,
+                max_tokens: maxTokens,
             });
 
             outputText = response.choices[0].message.content || "";
 
-            // indicate that the response was cut short if it doesn't end with a period
-            if (response.choices[0].finish_reason === "length" && outputText[outputText.length - 1] !== ".") {
-                outputText += "...";
-            }
-
             const endTime = performance.now();
             const elapsedTimeInSeconds = (endTime - startTime) / 1000;
             completionSpeed = Math.round(endTime - startTime);
@@ -122,14 +117,15 @@
 </script>
 
 
-<div class="flex my-12 flex-col items-center gap-6 max-w-xl mx-auto relative">
+<div class="flex my-12 flex-col items-center gap-6 max-w-xl mx-auto relative font-sans">
     <img 
       src="logo_smollm.png" 
       alt="logo" 
     class="absolute top-0 right-0 w-28 h-28 object-contain -mt-8 -mr-8 lg:-mr-16"
     />
-    <h1 class="text-center font-sans font-bold text-5xl text-gray-800 mb-2">SmolLM Playground</h1>
-    <p class="text-center font-sans text-sm text-gray-600 mb-4">Powered by <a href="https://huggingface.co/mlc-ai" target="_blank" class="underline text-gray-800">MLC</a> WebLLM <a class="underline text-gray-800" 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>
+    <h1 class="text-center font-bold text-5xl text-gray-800 mb-2">SmolLM Playground</h1>
+    <p class="text-center text-sm text-gray-600">Powered by <a href="https://huggingface.co/mlc-ai" target="_blank" class="underline text-gray-800">MLC</a> WebLLM <a class="underline text-gray-800" href="https://huggingface.co/HuggingFaceTB/smollm-360M-instruct-add-basics" target="_blank">SmolLM-360M-Instruct-Add-Basics</a></p>
+    <p class="text-center text-xs text-gray-600 mb-4 italic">This is a smol model, go easy on it. Check out <a href="https://huggingface.co/spaces/HuggingFaceTB/SmolLM-360M-Instruct-WebGPU" target="_blank" class="underline text-gray-800">this demo</a> for full conversations.</p>
 
     <Textarea 
         bind:value={inputText}
@@ -138,7 +134,7 @@
         class="w-full text-lg" 
         placeholder="Say something..."
     />
-    <p class="text-center font-sans text-xs text-gray-600 mb-4 italic">This is a smol model, go easy on it. Check out <a href="https://huggingface.co/spaces/HuggingFaceTB/SmolLM-360M-Instruct-WebGPU" target="_blank" class="underline text-gray-800">this demo</a> for full conversations.</p>
+
     {#if isLoading}
         <p class="text-sm text-slate-600 text-center">{loadingStatus}</p>
     {:else if error}
@@ -153,6 +149,18 @@
             {/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>