LLM explainer language and loading...

docs/.vitepress/theme/components/VocabQuiz.vue

@@ -67,23 +67,21 @@
           <div v-else v-html="v.notes"></div>
         </blockquote>
         <div v-if="example">
-          <div v-if="exNotes">
-            <button
-              type="button"
-              @click="
+          <button
+            type="button"
+            :disabled="!!exNotesLoading"
+            @click="
+              if (exNotes) {
                 exNotes = '';
-                explainSentence(example.ko);
-              "
-            >
-              New explanation
-            </button>
-            <blockquote v-html="markdownIt.render(exNotes)" />
-          </div>
-          <div v-else>
-            <button type="button" @click="explainSentence(example.ko)">
-              Explain sentence
-            </button>
-          </div>
+              }
+              explainSentence(example.ko);
+            "
+          >
+            <span v-if="!!exNotesLoading"> {{ exNotesLoading }} </span>
+            <span v-else-if="!exNotes"> Explain Sentence </span>
+            <span v-else> New explanation </span>
+          </button>
+          <blockquote v-if="exNotes" v-html="markdownIt.render(exNotes)" />
         </div>
       </details>
     </nav>
@@ -162,6 +160,7 @@ const isEdit = ref(false);
 const vEditContent = ref("");
 
 const exNotes = ref("");
+const exNotesLoading = ref("");
 
 const quizState = reactive({
   vChosenCats: [] as string[],
@@ -437,16 +436,30 @@ const markdownIt = new MarkdownIt({
   typographer: true,
 });
 
+let loadingIntervalId = 0;
+
 async function explainSentence(ko: string) {
+  if (loadingIntervalId) return;
+
   ko = ko.replaceAll("**", "");
 
+  exNotesLoading.value = ".";
+  loadingIntervalId = window.setInterval(() => {
+    exNotesLoading.value += ".";
+  }, 1000);
+
+  // Needs to be specified, or DeepSeek will vacillate between Korean, English, and Chinese.
+  const LANG_EXPLAIN = "Japanese";
+
   for await (const data of LLMstream({
     model: "deepseek-v4-flash",
     messages: [
       {
         role: "system",
-        content:
-          "Explain how this sentence works in 500 characters. Give key vocabularies.",
+        content: `
+          Explain in ${LANG_EXPLAIN} how this sentence works in 500 characters.
+          Give me key vocabularies.
+          `,
       },
       { role: "user", content: ko },
     ],
@@ -457,7 +470,11 @@ async function explainSentence(ko: string) {
     }
   }
 
-  if (supabase) {
+  clearInterval(loadingIntervalId);
+  exNotesLoading.value = "";
+  loadingIntervalId = 0;
+
+  if (exNotes.value && supabase) {
     const user_id = await supabase.auth.getUser().then((r) => r.data.user?.id);
 
     await supabase.from("sentence-explain").upsert(