Time Taken Indicators (#66)

* init

* time given

* time and ai

* prompt update

* time and prompt fix

* time added

package.json

@@ -24,8 +24,8 @@
     "@sveltejs/adapter-node": "^5.2.9",
     "@sveltejs/adapter-vercel": "^5.4.7",
     "@sveltejs/kit": "^2.8.1",
-    "@sveltejs/vite-plugin-svelte": "^4.0.0",
-    "@tanstack/svelte-query-devtools": "^5.59.20",
+    "@sveltejs/vite-plugin-svelte": "^4.0.1",
+    "@tanstack/svelte-query-devtools": "^5.60.5",
     "@trigger.dev/build": "3.2.0",
     "@types/cli-progress": "^3.11.6",
     "@types/js-yaml": "^4.0.9",
@@ -41,8 +41,8 @@
     "prettier": "^3.3.3",
     "prettier-plugin-svelte": "^3.2.8",
     "sass": "1.78.0",
-    "svelte": "^5.2.0",
-    "svelte-check": "^4.0.7",
+    "svelte": "^5.2.2",
+    "svelte-check": "^4.0.9",
     "trpc-sveltekit": "^3.6.2",
     "tslib": "^2.8.1",
     "tsx": "^4.19.2",
@@ -62,7 +62,7 @@
     "@skeletonlabs/skeleton": "^2.10.3",
     "@skeletonlabs/tw-plugin": "^0.4.0",
     "@tailwindcss/forms": "^0.5.9",
-    "@tanstack/svelte-query": "^5.59.20",
+    "@tanstack/svelte-query": "^5.60.5",
     "@trigger.dev/sdk": "3.2.0",
     "@trpc/client": "^10.45.2",
     "@trpc/server": "^10.45.2",
@@ -83,6 +83,7 @@
     "postcss": "^8.4.49",
     "postcss-load-config": "^6.0.1",
     "prettier-plugin-tailwindcss": "^0.6.8",
+    "pretty-ms": "^9.2.0",
     "superjson": "^2.2.1",
     "svelte-icons-pack": "^3.1.3",
     "tailwind-merge": "^2.5.4",

src/api/routers/ai/ai_types.ts

@@ -2,13 +2,14 @@ import { z } from 'zod';
 
 export const translation_out_schema = z
   .object({
-    text: z.string().describe('The trnalstion text'),
+    text: z.string().describe('The translation text'),
     shloka_num: z
       .number()
       .describe('The index of shlokas to be generated, use 0 for starting and -1 for ending.')
   })
-  .array()
-  .describe('This array will contain the text and the index of the shlokas to be generated.');
+  .describe(
+    'This object will contain the translated text and the index of the shloka to be generated.'
+  );
 
 export const text_models_enum = z.enum(['gpt-4o', 'claude-3.5-sonnet']);
 
@@ -24,7 +25,7 @@ export const sarga_translate_schema = {
       .array()
   }),
   output: z.union([
-    z.object({ success: z.literal(true), translations: translation_out_schema }),
+    z.object({ success: z.literal(true), translations: translation_out_schema.array() }),
     z.object({ success: z.literal(false) })
   ])
 };

src/api/routers/ai/generate_image.ts

@@ -142,10 +142,16 @@ export const get_generated_images_route = protectedAdminProcedure
     })
   )
   .mutation(async ({ input: { image_prompt, number_of_images, image_model } }) => {
+    const time_start = Date.now();
+    let response: (image_output_type | null)[] = null!;
     if (image_model === 'sd3-core')
-      return await make_image_sd3_core(image_prompt, number_of_images);
+      response = await make_image_sd3_core(image_prompt, number_of_images);
+    else response = await make_image_dall_e_3(image_prompt, number_of_images);
     // default` dall-e-3`
-    return await make_image_dall_e_3(image_prompt, number_of_images);
+    return {
+      images: response,
+      time_taken: Date.now() - time_start
+    };
   });
 
 // const make_image_sdxl = async (image_prompt: string, number_of_images: number) => {

src/api/routers/ai/get_image_prompt.ts

@@ -23,6 +23,7 @@ export const get_image_prompt_route = protectedAdminProcedure
   )
   .mutation(async ({ input: { messages, model } }) => {
     try {
+      const time_start = Date.now();
       const result = await generateObject({
         model: {
           'gpt-4o': openai_text_model('gpt-4o'),
@@ -33,7 +34,7 @@ export const get_image_prompt_route = protectedAdminProcedure
           image_prompt: z.string()
         })
       });
-      return result.object;
+      return { ...result.object, time_taken: Date.now() - time_start };
     } catch (e) {
       return { image_prompt: null };
     }

src/api/routers/ai/trigger_funcs.ts

@@ -54,7 +54,8 @@ const retrive_run_info_route = protectedProcedure
       z.object({ completed: z.literal(false) }),
       z.object({
         completed: z.literal(true),
-        output: z.any()
+        output: z.any(),
+        time_taken: z.number().int()
       }),
       z.object({
         error_code: z.string()
@@ -73,7 +74,10 @@ const retrive_run_info_route = protectedProcedure
     if (!run_id) return { error_code: 'UNAUTHORIZED' };
     const run_info = await runs.retrieve(run_id);
     if (run_info.status !== 'COMPLETED') return { completed: false };
-    else if (run_info.status === 'COMPLETED') return { completed: true, output: run_info.output };
+    else if (run_info.status === 'COMPLETED') {
+      const time_taken = run_info.finishedAt!.getTime() - run_info.startedAt!.getTime();
+      return { completed: true, output: run_info.output, time_taken };
+    }
     return { error_code: run_info.status };
   });
 

src/components/pages/main_page/ai_image_tool/AIImageGenerator.svelte

@@ -14,7 +14,7 @@
   import { client } from '~/api/client';
   import { lipi_parivartak } from '~/tools/converter';
   import { copy_text_to_clipboard, format_string_text, get_permutations } from '~/tools/kry';
-  import { onMount } from 'svelte';
+  import { onDestroy, onMount } from 'svelte';
   import { loadLocalConfig } from '../load_local_config';
   import { BsDownload, BsCopy } from 'svelte-icons-pack/bs';
   import {
@@ -23,11 +23,12 @@
   } from '~/tools/download_file_browser';
   import { cl_join } from '~/tools/cl_join';
   import { LuCopy } from 'svelte-icons-pack/lu';
-  import { OiCopy16 } from 'svelte-icons-pack/oi';
+  import { OiCopy16, OiStopwatch16 } from 'svelte-icons-pack/oi';
   import { BsClipboard2Check } from 'svelte-icons-pack/bs';
   import { createMutation } from '@tanstack/svelte-query';
   import { ai_sample_data } from './ai_sample_data';
   import { delay } from '~/tools/delay';
+  import pretty_ms from 'pretty-ms';
 
   let base_prompts = image_tool_prompts as {
     main_prompt: {
@@ -62,6 +63,28 @@
   let load_ai_sample_data = $state(false);
   let image_prompt_request_error = $state(false);
 
+  let show_prompt_time_status = $state(false);
+  let show_image_time_status = $state(false);
+
+  onDestroy(() => {
+    show_prompt_time_status = false;
+    show_image_time_status = false;
+    // ^ may be not needed
+  });
+
+  $effect(() => {
+    if (show_prompt_time_status) {
+      const t_id = setTimeout(() => (show_prompt_time_status = false), 10 * 1000);
+      return () => clearTimeout(t_id);
+    }
+  });
+  $effect(() => {
+    if (show_image_time_status) {
+      const t_id = setTimeout(() => (show_image_time_status = false), 10 * 1000);
+      return () => clearTimeout(t_id);
+    }
+  });
+
   type image_models_type = Parameters<
     typeof client.ai.get_generated_images.mutate
   >[0]['image_model'];
@@ -135,9 +158,10 @@
   };
   const image_prompt_mut = createMutation({
     mutationFn: async (input: Parameters<typeof client.ai.get_image_prompt.mutate>[0]) => {
+      show_prompt_time_status = false;
       if (import.meta.env.DEV && load_ai_sample_data) {
         await delay(1000);
-        return { image_prompt: ai_sample_data.sample_text_prompt };
+        return { image_prompt: ai_sample_data.sample_text_prompt, time_taken: 0 };
       }
       return await client.ai.get_image_prompt.mutate(input);
     },
@@ -146,13 +170,15 @@
         $image_prompt = dt.image_prompt;
         if ($auto_gen_image) generate_image();
         image_prompt_request_error = false;
+        show_prompt_time_status = true;
       } else {
         image_prompt_request_error = true;
       }
     }
   });
   const image_mut = createMutation({
     mutationFn: async (input: Parameters<typeof client.ai.get_generated_images.mutate>[0]) => {
+      show_image_time_status = false;
       if (import.meta.env.DEV && load_ai_sample_data) {
         await delay(2000);
         const list: {
@@ -175,15 +201,18 @@
             out_format: 'url'
           });
         }
-        return list;
+        return { images: list, time_taken: 0 };
       }
       return await client.ai.get_generated_images.mutate(input);
     },
     onSuccess(data) {
-      $image_data = data;
+      $image_data = data.images;
+      show_image_time_status = true;
     }
   });
-  type image_data_type = Awaited<ReturnType<typeof client.ai.get_generated_images.mutate>>[0];
+  type image_data_type = Awaited<
+    ReturnType<typeof client.ai.get_generated_images.mutate>
+  >['images'][0];
   let image_data = writable<image_data_type[]>([]);
 
   const download_image = (image: image_data_type) => {
@@ -261,6 +290,12 @@
       <option value={key} title={value[1]}>{value[0]}</option>
     {/each}
   </select>
+  {#if show_prompt_time_status && $image_prompt_mut.isSuccess && $image_prompt_mut.data.image_prompt}
+    <span class="ml-4 select-none text-xs text-stone-500 dark:text-stone-300">
+      <Icon src={OiStopwatch16} class="text-base" />
+      {pretty_ms($image_prompt_mut.data.time_taken)}
+    </span>
+  {/if}
 </div>
 <div>
   <div class="block space-y-1.5">
@@ -352,6 +387,11 @@
           track="stroke-primary-500/30"
           strokeLinecap="butt"
         />
+      {:else if show_image_time_status && $image_mut.isSuccess}
+        <span class="ml-4 select-none text-xs text-stone-500 dark:text-stone-300">
+          <Icon src={OiStopwatch16} class="text-base" />
+          {pretty_ms($image_mut.data.time_taken)}
+        </span>
       {/if}
     </div>
     <textarea
@@ -368,7 +408,7 @@
       {:else}
         <div>
           <section class="mb-10 grid grid-cols-2 gap-3">
-            {#each $image_mut.data! as image}
+            {#each $image_mut.data.images! as image}
               {#if image}
                 <div class="space-y-1">
                   <img