Upload folder using huggingface_hub

README.md

@@ -1,9 +1,9 @@
 
 ---
 tags: [gradio-custom-component,gradio-template-Chatbot]
-title: gradio_gptchatbot V0.0.1
-colorFrom: indigo
-colorTo: pink
+title: gradio_gptchatbot V0.0.2
+colorFrom: red
+colorTo: red
 sdk: docker
 pinned: false
 license: apache-2.0

app.py

@@ -10,7 +10,7 @@ example = [
 
 with gr.Blocks() as demo:
     with gr.Row():
-        GPTChatbot(label="Blank"),  # blank component
+        GPTChatbot(label="Blank", placeholder_title="GradioGPT", placeholder_image="https://i.ibb.co/H2kSY2R/Gradio-component-1.png"),  # blank component
         GPTChatbot(value=example, label="Populated", layout="panel"),  # populated component
 
 

requirements.txt

@@ -1 +1 @@
-gradio_gptchatbot-0.0.1-py3-none-any.whl
+gradio_gptchatbot-0.0.2-py3-none-any.whl

src/backend/gradio_gptchatbot/gptchatbot.py

@@ -68,6 +68,8 @@ class GPTChatbot(Component):
         line_breaks: bool = True,
         likeable: bool = False,
         layout: Literal["panel", "bubble"] | None = None,
+        placeholder_image: str | Path | None = None,
+        placeholder_title: str | None = None,
     ):
         """
         Parameters:
@@ -126,13 +128,17 @@ class GPTChatbot(Component):
             value=value,
         )
         self.avatar_images: list[str | None] = [None, None]
-        if avatar_images is None:
-            pass
-        else:
+        if avatar_images is not None:
             self.avatar_images = [
                 processing_utils.move_resource_to_block_cache(avatar_images[0], self),
                 processing_utils.move_resource_to_block_cache(avatar_images[1], self),
             ]
+        self.placeholder_image = None
+        if placeholder_image is not None:
+            self.placeholder_image = processing_utils.move_resource_to_block_cache(
+                placeholder_image, self
+            )
+        self.placeholder_title = placeholder_title
 
     def _preprocess_chat_messages(
         self, chat_message: str | FileMessage | None

src/backend/gradio_gptchatbot/gptchatbot.pyi

@@ -76,6 +76,8 @@ class GPTChatbot(Component):
         line_breaks: bool = True,
         likeable: bool = False,
         layout: Literal["panel", "bubble"] | None = None,
+        placeholder_image: str | Path | None = None,
+        placeholder_title: str | None = None,
     ):
         """
         Parameters:
@@ -134,13 +136,17 @@ class GPTChatbot(Component):
             value=value,
         )
         self.avatar_images: list[str | None] = [None, None]
-        if avatar_images is None:
-            pass
-        else:
+        if avatar_images is not None:
             self.avatar_images = [
                 processing_utils.move_resource_to_block_cache(avatar_images[0], self),
                 processing_utils.move_resource_to_block_cache(avatar_images[1], self),
             ]
+        self.placeholder_image = None
+        if placeholder_image is not None:
+            self.placeholder_image = processing_utils.move_resource_to_block_cache(
+                placeholder_image, self
+            )
+        self.placeholder_title = placeholder_title
 
     def _preprocess_chat_messages(
         self, chat_message: str | FileMessage | None

src/demo/app.py

@@ -10,7 +10,7 @@ example = [
 
 with gr.Blocks() as demo:
     with gr.Row():
-        GPTChatbot(label="Blank"),  # blank component
+        GPTChatbot(label="Blank", placeholder_title="GradioGPT", placeholder_image="https://i.ibb.co/H2kSY2R/Gradio-component-1.png"),  # blank component
         GPTChatbot(value=example, label="Populated", layout="panel"),  # populated component
 
 

src/frontend/Index.svelte

@@ -48,6 +48,8 @@
 		like: LikeData;
 	}>;
 	export let avatar_images: [string | null, string | null] = [null, null];
+	export let placeholder_image: string | null = null;
+	export let placeholder_title: string | null = null;
 
 	let _value: [
 		string | { file: FileData; alt_text: string | null } | null,
@@ -136,6 +138,8 @@
 			{layout}
 			{proxy_url}
 			{root}
+			{placeholder_image}
+			{placeholder_title}
 		/>
 	</div>
 </Block>

src/frontend/shared/ChatBot.svelte

@@ -45,6 +45,8 @@
 	export let proxy_url: null | string;
 	export let i18n: I18nFormatter;
 	export let layout: "bubble" | "panel" = "bubble";
+	export let placeholder_image: string | null = null;
+	export let placeholder_title: string | null = null;
 
 	let div: HTMLDivElement;
 	let autoscroll: boolean;
@@ -136,19 +138,31 @@
 			aria-label="chatbot conversation"
 			aria-live="polite"
 		>
-			<div class="logo-container">
-				<img class="centered-logo" src="https://raw.githubusercontent.com/gradio-app/gradio/main/js/_website/static/favicon.png" alt="Chatbot Logo" />
+			{#if placeholder_image}
+				<div class="logo-container">
+				<img
+				class="centered-logo"
+				src={get_fetchable_url_or_file(
+					placeholder_image,
+					root,
+					proxy_url
+				)}
+				alt="logo"
+			/>
 			</div>
-			<p class="placeholder-text">How can I help you today?</p>
+			{/if}
+			{#if placeholder_title}
+				<p class="placeholder-text">{placeholder_title}</p>
+			{/if}
 			<div class="message-wrap" class:bubble-gap={layout === "bubble"} use:copy>
 				<!-- Existing message elements -->
 			</div>
-			<div class="buttons-container">
+			<!-- <div class="buttons-container">
 				<button class="action-button">Plan a trip</button>
 				<button class="action-button">Brainstorm names</button>
 				<button class="action-button">Write a spreadsheet formula</button>
 				<button class="action-button">Create a charter</button>
-			</div>
+			</div> -->
 		</div>
 	
 		{:else}
@@ -580,14 +594,15 @@
 }
 
 .centered-logo {
-    max-width: 150px; /* Adjust as needed */
+    max-width: 100px !important;
     margin: 0 auto;
 }
 
 .placeholder-text {
     text-align: center;
-    color: #666; /* Placeholder text color */
+    color: black; /* Placeholder text color */
 	font-size: large;
+	font-weight: bold;
     margin-bottom: 20px;
 }
 

src/pyproject.toml

@@ -8,7 +8,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "gradio_gptchatbot"
-version = "0.0.1"
+version = "0.0.2"
 description = "Python library for easily interacting with trained machine learning models"
 readme = "README.md"
 license = "Apache-2.0"
@@ -39,7 +39,7 @@ classifiers = [
 dev = ["build", "twine"]
 
 [tool.hatch.build]
-artifacts = ["/backend/gradio_gptchatbot/templates", "*.pyi", "backend/gradio_gptchatbot/templates"]
+artifacts = ["/backend/gradio_gptchatbot/templates", "*.pyi", "backend/gradio_gptchatbot/templates", "backend/gradio_gptchatbot/templates"]
 
 [tool.hatch.build.targets.wheel]
 packages = ["/backend/gradio_gptchatbot"]