Add imagePrompt to display default image hint

VisualQnA/ui/svelte/package.json

@@ -13,11 +13,13 @@
   },
   "devDependencies": {
     "@fortawesome/free-solid-svg-icons": "6.2.0",
-    "@playwright/test": "^1.45.2",
+    "@playwright/test": "^1.33.0",
     "@sveltejs/adapter-auto": "1.0.0-next.75",
-    "@sveltejs/kit": "^1.30.4",
+    "@sveltejs/adapter-static": "^3.0.0",
+    "@sveltejs/kit": "^2.0.0",
     "@tailwindcss/typography": "0.5.7",
     "@types/debug": "4.1.7",
+    "@types/node": "^20.12.13",
     "@typescript-eslint/eslint-plugin": "^5.27.0",
     "@typescript-eslint/parser": "^5.27.0",
     "autoprefixer": "^10.4.7",
@@ -27,21 +29,20 @@
     "eslint": "^8.16.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-neverthrow": "1.1.4",
-    "eslint-plugin-svelte3": "^4.0.0",
     "postcss": "^8.4.31",
     "postcss-load-config": "^4.0.1",
     "postcss-preset-env": "^8.3.2",
     "prettier": "^2.8.8",
     "prettier-plugin-svelte": "^2.7.0",
     "prettier-plugin-tailwindcss": "^0.3.0",
-    "svelte": "^3.59.1",
-    "svelte-check": "^2.7.1",
+    "svelte": "^4.0.0",
+    "svelte-check": "^3.0.0",
     "svelte-fa": "3.0.3",
-    "svelte-preprocess": "^4.10.7",
+    "svelte-preprocess": "^6.0.2",
     "tailwindcss": "^3.1.5",
     "tslib": "^2.3.1",
-    "typescript": "^4.7.4",
-    "vite": "^4.5.2"
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0"
   },
   "type": "module",
   "dependencies": {
@@ -51,6 +52,7 @@
     "flowbite-svelte-icons": "^1.4.0",
     "fuse.js": "^6.6.2",
     "lodash": "^4.17.21",
+    "playwright": "^1.44.0",
     "ramda": "^0.29.0",
     "sse.js": "^0.6.1",
     "svelte-notifications": "^0.9.98",

VisualQnA/ui/svelte/src/lib/modules/chat/ChatMessage.svelte

@@ -24,7 +24,7 @@
 
 	export let msg: Message;
 	export let time: string = "";
-	console.log("msg", msg);
+	export const imgSrc: string = "";
 </script>
 
 <div
@@ -42,10 +42,12 @@
 	>
 		<MessageAvatar role={msg.role} />
 	</div>
-	<div class="group relative items-center">
-		<div>
+	<div class="group relative flex items-start">
+		<div class="flex flex-col items-start">
+			<img src={msg.imgSrc} alt="Uploaded Image" class="m-2 max-w-28 max-h-28" />
+
 			<p
-				class="xl:max-w-[65vw] max-w-[60vw] items-center whitespace-pre-line break-keep text-[0.8rem] leading-5 sm:max-w-[50rem]"
+				class="xl:max-w-[65vw] max-w-[60vw] items-start whitespace-pre-line break-keep text-[0.8rem] leading-5 sm:max-w-[50rem]"
 			>
 				{@html msg.content}
 			</p>

VisualQnA/ui/svelte/src/lib/modules/upload/imagePrompt.svelte

@@ -0,0 +1,97 @@
+<!--
+  Copyright (C) 2024 Intel Corporation
+  SPDX-License-Identifier: Apache-2.0
+-->
+
+<script>
+	import { createEventDispatcher } from "svelte";
+  import extreme_ironing from '$lib/assets/imageData/extreme_ironing.jpg';
+  import waterview from '$lib/assets/imageData/waterview.jpg';
+	import { base64ImageStore } from "$lib/shared/stores/common/Store";
+
+  let dispatch = createEventDispatcher();
+
+  let images = [
+    {
+      id: 1,
+      alt: 'Waterview',
+      imgurl: waterview,
+      prompt: 'What are the things I should be cautious about when I visit here?'
+    },
+    {
+      id: 0,
+      alt: 'Extreme Ironing',
+      imgurl: extreme_ironing,
+      prompt: 'What is unusual about this image?'
+    }
+  ];
+
+  let currentIndex = 0;
+
+  function nextImage() {
+    currentIndex = (currentIndex + 1) % images.length;
+  }
+
+  function prevImage() {
+    currentIndex = (currentIndex - 1 + images.length) % images.length;
+  }
+
+
+  async function handleImageClick() {
+    const imgUrl = images[currentIndex].imgurl;
+    const base64Data = await convertImageToBase64(imgUrl);
+    const currentPrompt = images[currentIndex].prompt;
+    dispatch("imagePrompt", { content: currentPrompt });
+    base64ImageStore.set(base64Data);
+  }
+
+  async function convertImageToBase64(url) {
+    const response = await fetch(url);
+    const blob = await response.blob();
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onloadend = () => resolve(reader.result);
+      reader.onerror = reject;
+      reader.readAsDataURL(blob);
+    });
+  }
+</script>
+
+<div class="flex w-full flex-col gap-3 rounded-xl bg-white p-5 my-2">
+  <p>Example</p>
+  <div class="relative w-full max-w-4xl mx-auto">
+    <button
+      class="absolute left-0 top-1/2 transform -translate-y-1/2 z-10  w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none"
+      on:click={prevImage}
+      aria-label="Previous image"
+    >
+      &#10094;
+    </button>
+
+    <div class="relative">
+      <img
+        src={images[currentIndex].imgurl}
+        alt={images[currentIndex].alt}
+        class="carousel-image w-full h-auto cursor-pointer"
+        on:click={handleImageClick}
+      />
+      <div class="absolute bottom-0 left-0 bg-opacity-55 bg-black text-white p-3 w-full">
+        <p>{images[currentIndex].prompt}</p>
+      </div>
+    </div>
+
+    <button
+      class="absolute right-0 top-1/2 transform -translate-y-1/2 z-10  w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none"
+      on:click={nextImage}
+      aria-label="Next image"
+    >
+      &#10095;
+    </button>
+  </div>
+</div>
+
+<style>
+  .relative img {
+    object-fit: cover;
+  }
+</style>

VisualQnA/ui/svelte/src/lib/modules/upload/uploadImg.svelte

@@ -106,7 +106,3 @@
 		<img src={imageUrl} alt="Uploaded Image" class="m-2 mx-auto block" />
 	{/if}
 </Dropzone>
-
-{#if value.length !== 0}
-	<p class="bg-white p-2 text-center">{showFiles(value)}</p>
-{/if}

VisualQnA/ui/svelte/src/lib/shared/constant/Interface.ts

@@ -35,6 +35,7 @@ type Map<T> = T extends MessageType.Text | MessageType.SingleAudio
 			: { imgSrc: string; imgId: string }[];
 
 export interface Message {
+	imgSrc: string | null | undefined;
 	role: MessageRole;
 	type: MessageType;
 	content: Map<Message["type"]>;