Spaces:
Running
Running
| <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/[email protected]/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"> | |
| © 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> | |