Spaces:

arad1367
/

Chatbot_UI

Running

App Files Files Community

arad1367 commited on May 20, 2025

Commit

037b08f

verified ·

1 Parent(s): 5a16375

Update index.html

Browse files

Files changed (1) hide show

index.html +163 -18

index.html CHANGED Viewed

@@ -1,19 +1,164 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Create by Pejman</title>
+    <link
+      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
+      rel="stylesheet"
+    />
+    <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
+  </head>
+  <body
+    class="bg-gradient-to-br from-indigo-100 via-white to-blue-100 text-gray-800 font-sans"
+  >
+    <!-- Hero Section -->
+    <section
+      class="flex flex-col items-center justify-center min-h-screen text-center px-4"
+    >
+      <h1
+        class="text-4xl md:text-6xl font-bold text-indigo-800 mb-4 animate-pulse"
+      >
+        Welcome to Pejman's Educational Chatbot
+      </h1>
+      <p class="text-lg md:text-xl max-w-2xl text-gray-700 mb-6">
+        This chatbot is part of an educational practice in the
+        <strong>Deep Learning course</strong> at the
+        <strong>University of Liechtenstein</strong>.
+      </p>
+      <lottie-player
+        src="https://assets9.lottiefiles.com/packages/lf20_tno6cg2w.json"
+        background="transparent"
+        speed="1"
+        style="width: 300px; height: 300px"
+        loop
+        autoplay
+      >
+      </lottie-player>
+    </section>
+    <!-- Footer -->
+    <footer
+      class="bg-white shadow-md py-4 text-center border-t border-gray-200"
+    >
+      <p class="text-sm text-gray-600">
+        &copy; 2025 Pejman Ebrahimi – All rights reserved.
+      </p>
+    </footer>
+    <!-- Chatbot Script -->
+    <script type="module">
+      import Chatbot from "https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js";
+      Chatbot.init({
+        chatflowid: "7e8a750a-c1be-48cc-9852-3243e1a8ccae",
+        apiHost: "https://arad1367-flowise-hosttest.hf.space",
+        chatflowConfig: {
+          /* Chatflow Config */
+        },
+        observersConfig: {
+          /* Observers Config */
+        },
+        theme: {
+          button: {
+            backgroundColor: "#3B81F6",
+            right: 20,
+            bottom: 20,
+            size: 48,
+            dragAndDrop: true,
+            iconColor: "white",
+            customIconSrc:
+              "https://raw.githubusercontent.com/walkxcode/dashboard-icons/main/svg/google-messages.svg",
+            autoWindowOpen: {
+              autoOpen: true,
+              openDelay: 2,
+              autoOpenOnMobile: false,
+            },
+          },
+          tooltip: {
+            showTooltip: true,
+            tooltipMessage: "Hi There 👋!",
+            tooltipBackgroundColor: "black",
+            tooltipTextColor: "white",
+            tooltipFontSize: 16,
+          },
+          disclaimer: {
+            title: "Disclaimer",
+            message:
+              'By using this chatbot, you agree to the <a target="_blank" href="https://flowiseai.com/terms">Terms & Condition</a>',
+            textColor: "black",
+            buttonColor: "#3b82f6",
+            buttonText: "Start Chatting",
+            buttonTextColor: "white",
+            blurredBackgroundColor: "rgba(0, 0, 0, 0.4)",
+            backgroundColor: "white",
+          },
+          customCSS: ``,
+          chatWindow: {
+            showTitle: true,
+            showAgentMessages: true,
+            title: "Flowise Bot",
+            titleAvatarSrc:
+              "https://raw.githubusercontent.com/walkxcode/dashboard-icons/main/svg/google-messages.svg",
+            welcomeMessage: "Hello! This is e-service to help you",
+            errorMessage: "We will back soon.",
+            backgroundColor: "#ffffff",
+            backgroundImage: "enter image path or link",
+            height: 550,
+            width: 400,
+            fontSize: 16,
+            starterPrompts: [
+              "What is ML projects?",
+              "Who ML tutorial can help me?",
+            ],
+            starterPromptFontSize: 15,
+            clearChatOnReload: false,
+            sourceDocsTitle: "Sources:",
+            renderHTML: true,
+            botMessage: {
+              backgroundColor: "#f7f8ff",
+              textColor: "#303235",
+              showAvatar: true,
+              avatarSrc:
+                "https://raw.githubusercontent.com/zahidkhawaja/langchain-chat-nextjs/main/public/parroticon.png",
+            },
+            userMessage: {
+              backgroundColor: "#3B81F6",
+              textColor: "#ffffff",
+              showAvatar: true,
+              avatarSrc:
+                "https://raw.githubusercontent.com/zahidkhawaja/langchain-chat-nextjs/main/public/usericon.png",
+            },
+            textInput: {
+              placeholder: "Type your question",
+              backgroundColor: "#ffffff",
+              textColor: "#303235",
+              sendButtonColor: "#3B81F6",
+              maxChars: 50,
+              maxCharsWarningMessage:
+                "You exceeded the characters limit. Please input less than 50 characters.",
+              autoFocus: true,
+              sendMessageSound: true,
+              sendSoundLocation: "send_message.mp3",
+              receiveMessageSound: true,
+              receiveSoundLocation: "receive_message.mp3",
+            },
+            feedback: {
+              color: "#303235",
+            },
+            dateTimeToggle: {
+              date: true,
+              time: true,
+            },
+            footer: {
+              textColor: "#303235",
+              text: "Powered by",
+              company: "GilTech Megoldások KFT.",
+              companyLink: "https://giltech-megoldasok.com/",
+            },
+          },
+        },
+      });
+    </script>
+  </body>
 </html>