preview textgen

src/lib/components/image-generation/Preview.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  export let body: Record<string, any>;
+  export let res: string;
+</script>
+
+<div class="text-white p-6 font-code text-xs !leading-loose">
+  <div class="max-w-max relative ">
+    <img src={res} alt="" class="w-full max-w-lg object-contain" />
+    <div class="absolute bottom-3 left-3 bg-white/20 backdrop-blur-sm px-2 py-0.5 rounded-lg text-slate-900">{body?.inputs}</div>
+  </div>
+</div>

src/lib/components/image-generation/Response.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
   import Icon from '@iconify/svelte';
+  import Highlight, { LineNumbers } from "svelte-highlight";
+  import json from "svelte-highlight/languages/json";
+  import "svelte-highlight/styles/night-owl.css"
 
   import Loading from "$lib/components/Loading.svelte"
   import CodePreview from '$lib/components/CodePreview.svelte';
-	import Preview from '$lib/components/text-generation/Preview.svelte';
+	import Preview from '$lib/components/image-generation/Preview.svelte';
 
   export let loading: boolean;
   export let res: any;
@@ -25,9 +28,24 @@
     icon: "carbon:code",
   },
 ];
+
+$: console.log(res)
 </script>
 
 <div class="lg:h-screen flex flex-col relative">
+  <!-- <div class="w-full jsonResponse relative">
+    <div class="bg-slate-950 w-full uppercase px-5 py-4 text-zinc-400 text-sm font-semibold border-b border-slate-900 flex items-center justify-start gap-2">
+      <Icon icon="carbon:json" class="w-5 h-5" />
+      Response
+    </div>
+    <Highlight language={json} {code}>
+    </Highlight>
+    {#if loading}
+      <Loading>
+        <p class="text-slate-400 text-lg mt-4">Processing...</p>
+      </Loading>
+    {/if}
+  </div> -->
   <div class="bg-slate-950 overflow-auto flex-1">
     <div class="w-full uppercase text-zinc-400 text-sm font-semibold border-t border-slate-900 flex items-start sticky top-0 bg-slate-950">
       {#each TABS as { label, icon }, idx }

src/routes/api/image-generation/+server.ts

@@ -18,7 +18,7 @@ export async function POST({ request }: RequestEvent) {
     headers: {
       Authorization: `Bearer ${env.SECRET_HF_TOKEN}`,
       'Content-Type': 'application/json',
-      ['x-use-cache']: "0"
+      // ['x-use-cache']: "0"
     },
     body: JSON.stringify({
       ...body,
@@ -34,13 +34,12 @@ export async function POST({ request }: RequestEvent) {
   })
 
   if ("error" in response) {
-    error(400, response.error as string)
+    throw error(400, response.error as string)
   }
-
-  return {
+  
+  return new Response(response, {
     headers: {
       'Content-Type': 'image/png',
     },
-    body: response,
-  }
+  })
 }

src/routes/image-generation/+page.svelte

@@ -33,13 +33,20 @@
     })
     const blob = await request?.clone()?.blob()
 
-    const reader = new FileReader()
-    reader.readAsDataURL(blob)
-    reader.onloadend = () => {
-      const base64data = reader.result
-      data = base64data
+    if (blob) {
+      const reader = new FileReader()
+      reader.readAsDataURL(blob)
+      reader.onloadend = () => {
+        const base64data = reader.result
+        data = base64data
+      }
+    }
+
+    const res = await request.clone().json().catch(() => ({}))
+    if (res) {
+      data = res
     }
-    
+
     bodyRequest = form
     loading = false
   }