stylistic changes (#2)

- stylistic changes (87f6bdf75870a84f1099e7c5766abce9479b952b)
- Upload logo_smollm.png (284e25b4df6d1970b1655d65fb81637de13ca6fb)


Co-authored-by: Loubna Ben Allal <[email protected]>

src/routes/+page.svelte

@@ -121,14 +121,15 @@
     onMount(loadWebLLM);
 </script>
 
-<div class="flex my-20 flex-col items-center gap-4 max-w-2xl 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 <a href="https://huggingface.co/mlc-ai" target="_blank" class="underline text-blue-500">MLC</a>,
-        <a href="https://github.com/mlc-ai/web-llm" target="_blank" class="underline text-blue-500">WebLLM</a>, and
-        <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>    
+
+<div class="flex my-12 flex-col items-center gap-6 max-w-xl mx-auto relative">
+    <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>
 
     <Textarea 
         bind:value={inputText}
@@ -137,7 +138,7 @@
         class="w-full text-lg" 
         placeholder="Say something..."
     />
-    <p class="text-center text-xs 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-blue-500">this demo</a> for full conversations.</p>
+    <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}