stylistic changes

#2
by loubnabnl HF staff - opened
Files changed (2) hide show
  1. src/routes/+page.svelte +10 -9
  2. static/logo_smollm.png +0 -0
src/routes/+page.svelte CHANGED
@@ -121,14 +121,15 @@
121
  onMount(loadWebLLM);
122
  </script>
123
 
124
- <div class="flex my-20 flex-col items-center gap-4 max-w-2xl mx-auto">
125
- <h1 class="text-center font-mono font-bold text-4xl">SmolLM 🤗</h1>
126
- <p class="text-center font-mono text-sm mb-4">
127
- Powered by <a href="https://huggingface.co/mlc-ai" target="_blank" class="underline text-blue-500">MLC</a>,
128
- <a href="https://github.com/mlc-ai/web-llm" target="_blank" class="underline text-blue-500">WebLLM</a>, and
129
- <a class="underline text-blue-500" href="https://huggingface.co/HuggingFaceTB/smollm-360M-instruct-add-basics" target="_blank">SmolLM-360M-Instruct-Add-Basics</a>
130
- <span class="text-xs italic">(15 Max Tokens)</span>
131
- </p>
 
132
 
133
  <Textarea
134
  bind:value={inputText}
@@ -137,7 +138,7 @@
137
  class="w-full text-lg"
138
  placeholder="Say something..."
139
  />
140
- <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>
141
  {#if isLoading}
142
  <p class="text-sm text-slate-600 text-center">{loadingStatus}</p>
143
  {:else if error}
 
121
  onMount(loadWebLLM);
122
  </script>
123
 
124
+
125
+ <div class="flex my-12 flex-col items-center gap-6 max-w-xl mx-auto relative">
126
+ <img
127
+ src="logo_smollm.png"
128
+ alt="logo"
129
+ class="absolute top-0 right-0 w-28 h-28 object-contain -mt-8 -mr-8 lg:-mr-16"
130
+ />
131
+ <h1 class="text-center font-sans font-bold text-5xl text-gray-800 mb-2">SmolLM Playground</h1>
132
+ <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>
133
 
134
  <Textarea
135
  bind:value={inputText}
 
138
  class="w-full text-lg"
139
  placeholder="Say something..."
140
  />
141
+ <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>
142
  {#if isLoading}
143
  <p class="text-sm text-slate-600 text-center">{loadingStatus}</p>
144
  {:else if error}
static/logo_smollm.png ADDED