Update playground to let select the flavor

Author: kefniark

playground/src/App.vue

@@ -7,6 +7,20 @@
           <p class="text-sm font-normal mt-2 text-slate-300">
             Tiny Language Detector, simply detect the language of a unicode UTF-8 text
           </p>
+          <div class="flex justify-between mt-4">
+            <div class="flex items-center px-4 py-2 rounded border border-gray-200 dark:border-gray-700 bg-slate-200">
+              <input id="bordered-radio-2" type="radio" v-model="flavor" value="tinyld-light" name="bordered-radio" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
+              <label for="bordered-radio-2" class="ml-2 w-full text-sm font-medium text-gray-900 dark:text-gray-300">TinyLD Light <span class="text-slate-400">~65KB</span></label>
+            </div>
+            <div class="flex items-center px-4 py-2 rounded border border-gray-200 dark:border-gray-700 bg-slate-200">
+              <input id="bordered-radio-1" type="radio" v-model="flavor" value="tinyld" name="bordered-radio" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
+              <label for="bordered-radio-1" class="ml-2 w-full text-sm font-medium text-gray-900 dark:text-gray-300">TinyLD <span class="text-slate-400">~500KB</span></label>
+            </div>
+            <div class="flex items-center px-4 py-2 rounded border border-gray-200 dark:border-gray-700 bg-slate-200">
+              <input id="bordered-radio-3" type="radio" v-model="flavor" value="tinyld-heavy" name="bordered-radio" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
+              <label for="bordered-radio-3" class="ml-2 w-full text-sm font-medium text-gray-900 dark:text-gray-300">TinyLD Heavy <span class="text-slate-400">~2MB</span></label>
+            </div>
+          </div>
           <textarea
             rows="8"
             v-model="input"
@@ -68,12 +82,18 @@
 <script setup>
 import { ref, computed } from 'vue'
 import { detectAll } from 'tinyld'
+import { detectAll as detectAllLight } from 'tinyld/light'
+import { detectAll as detectAllHeavy } from 'tinyld/heavy'
 import { useClipboard } from '@vueuse/core'
 
 const input = ref('')
+const flavor = ref('tinyld')
 const results = computed(() => {
+  if (flavor.value === "tinyld-light") return detectAllLight(input.value)
+  if (flavor.value === "tinyld-heavy") return detectAllHeavy(input.value)
   return detectAll(input.value)
 })
+
 const link = computed(() => {
   return `https://tinyld.vercel.app/?text=${encodeURIComponent(input.value)}`
 })

playground/src/main.js

@@ -12,7 +12,6 @@ library.add(faGithub)
 library.add(faChartLine)
 library.add(faShareFromSquare)
 library.add(faCircleQuestion)
-console.log(faShareFromSquare)
 
 const app = createApp(App)
 app.component('v-icon', FontAwesomeIcon)

playground/yarn.lock

@@ -741,9 +741,9 @@ tailwindcss@^3.2.3:
     resolve "^1.22.1"
 
 tinyld@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/tinyld/-/tinyld-1.3.1.tgz#048388a01f03f283911183af733c7b079fdcbc5a"
-  integrity sha512-INB2is03ygze5dUeAp5wCYBUf/+FsXcElCmfewe1ujirCUTe4nGUNDN229Ay/C2W+f15qD7uhclstNHY+a6fgg==
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/tinyld/-/tinyld-1.3.2.tgz#6a5a639a60183ad5cb5110fad1f7be70139bf5c6"
+  integrity sha512-VBeK+qS2mDggbJpNm+iCitULKbrJnkdvv3Lm/ptSVRBzKaPS/LXGKCByrascOFaFGYZM5sXT2JyqfcHKp9a2kg==
 
 to-regex-range@^5.0.1:
   version "5.0.1"