diff --git a/Images_needed b/Images_needed new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/Images_needed @@ -0,0 +1 @@ + diff --git a/ReadMe.md b/ReadMe.md new file mode 100644 index 0000000..76a9f4c --- /dev/null +++ b/ReadMe.md @@ -0,0 +1,21 @@ +# AI Agents / RAG Agents - Frontend + +This repository contains the **frontend implementation** for an AI Agents or RAG Agents project. The frontend is designed to deliver an intuitive, responsive, and visually appealing user interface to facilitate seamless interaction with AI models or retrieval-augmented generation systems. + +## Features +- **Responsive Design**: Adaptable to various screen sizes for an optimal user experience. +- **Dynamic Content**: Real-time updates for interactions with AI agents. +- **Modern Styling**: Clean and professional design with smooth user interactions. +- **Customizable Input/Output UI**: Designed to handle text queries, responses, and any AI agent-specific interactions. + +## Tech Stack +- **HTML5**: For building a semantic and structured layout. +- **CSS3**: For styling and ensuring a responsive user interface. +- **JavaScript**: For managing dynamic updates and user interactions. +- **Optional Libraries**: Additional JavaScript libraries or frameworks (e.g., Bootstrap or Tailwind) for enhanced styling and functionality. + +## How to Use +- Clone the repository. +- Open `index.html` in your browser. + + diff --git a/images/Image1.jpg b/images/Image1.jpg new file mode 100644 index 0000000..27042ce Binary files /dev/null and b/images/Image1.jpg differ diff --git a/images/Image2.jpg b/images/Image2.jpg new file mode 100644 index 0000000..c401ac6 Binary files /dev/null and b/images/Image2.jpg differ diff --git a/images/for_background.webp b/images/for_background.webp new file mode 100644 index 0000000..70d39a3 Binary files /dev/null and b/images/for_background.webp differ diff --git a/images/logo.jpg b/images/logo.jpg new file mode 100644 index 0000000..dc5cdf7 Binary files /dev/null and b/images/logo.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..beb16c3 --- /dev/null +++ b/index.html @@ -0,0 +1,71 @@ + + + + + + Chatbot Interface + + + + +
+
+

Crypto ChatBot

+
+
+
+ BTC: $99,949.00 | ETH: $3,985.18 | LTC: $133.15 +
+
+
+ +
+
+
+
+ +

BlockWhere Technologies

+
+
+ + +
+
+ + + + +
+ + +
+
+
+
+ + + +
+
+
+

Crypto Tip of the Day

+

Loading...

+
+
+ + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..c79eae3 --- /dev/null +++ b/script.js @@ -0,0 +1,152 @@ +// Event Listener for Send Button +document.getElementById("send-button").addEventListener("click", function () { + // Get the selected option from the dropdown + const selectedOption = document.getElementById("search-options").value; + + // Prepare the data to send + const dataToSend = { + type: selectedOption, // Send the selected type (e.g., text, image, video, meme, or all) + }; + + // Send the data to the backend + fetch("/api/search", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(dataToSend), // Send the data as JSON + }) + .then((response) => { + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + return response.json(); + }) + .then((data) => { + if (data.success) { + alert(`Request for ${selectedOption} sent successfully!`); + } else { + alert(`Failed to send request for ${selectedOption}. Please try again.`); + } + }) + .catch((error) => { + console.error("Error:", error); + alert("An error occurred while sending the request."); + }); +}); + +// Event Listeners for Dropdown Items +document.querySelectorAll(".dropdown-item").forEach((item) => { + item.addEventListener("click", function (event) { + const userMessage = document.getElementById("user-input").value.trim(); // Get the user's message + const platformId = event.target.id; // Get the ID of the clicked item + + if (userMessage) { + let platform = ""; // Initialize the platform variable + + // Determine the platform based on the clicked item's ID + if (platformId === "linkedin-post") { + platform = "LinkedIn"; + } else if (platformId === "x-post") { + platform = "X"; + } else if (platformId === "instagram-post") { + platform = "Instagram"; + } else { + alert("Invalid platform selected!"); + return; + } + + const postContent = `🌟 ${platform} Post 🌟\n\n"${userMessage}"\n\n#CryptoChat #Blockchain`; + + // Send data to the backend + fetch("/api/post", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ platform, message: postContent }), // Send platform and content + }) + .then((response) => { + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + return response.json(); + }) + .then((data) => { + if (data.success) { + alert(`${platform} Post sent successfully!`); + } else { + alert(`Failed to send ${platform} Post. Please try again.`); + } + }) + .catch((error) => { + console.error("Error:", error); + alert("An error occurred while sending the post."); + }); + + // Optionally copy the content to clipboard for user convenience + navigator.clipboard.writeText(postContent).catch((err) => { + console.error("Clipboard copy failed:", err); + }); + } else { + alert("Please type a message to create a social media post!"); + } + }); +}); + +// Function to Append Messages +function appendMessage(chatLog, message, className) { + try { + const newMessage = document.createElement("div"); + newMessage.className = `message ${className}`; + newMessage.innerText = message; + chatLog.appendChild(newMessage); + } catch (error) { + console.error("Error appending message:", error); + } +} + +// Function to Append Bot Response +function appendBotResponse(chatLog, botResponse, contentType) { + try { + const botMessage = document.createElement("div"); + botMessage.className = "message bot-message"; + + if (contentType === "text") { + botMessage.innerText = botResponse.response; + } else if (contentType === "image") { + const img = document.createElement("img"); + img.src = botResponse.response; + img.alt = "Generated Image"; + botMessage.appendChild(img); + } + chatLog.appendChild(botMessage); + } catch (error) { + console.error("Error appending bot response:", error); + } +} + +// Function to Call API +async function callAPI(query, contentType, platformType) { + const apiUrl = `https://blockwhere.onrender.com/api/${contentType}`; + try { + const response = await fetch(apiUrl, { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ + query: query, + content_type: contentType, + platform_type: platformType, // Pass platform type correctly + }), + }); + + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + + return await response.json(); // Parse and return the JSON response + } catch (error) { + console.error("Error calling API:", error); + throw error; // Re-throw the error for further handling if needed + } +} + +// Show a Random Tip +const tips = ["Diversify investments!", "Secure private keys!", "Use a hardware wallet!", "Track market trends!"]; +document.getElementById("tip-content").innerText = tips[Math.floor(Math.random() * tips.length)]; diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..bf174c6 --- /dev/null +++ b/styles.css @@ -0,0 +1,139 @@ +body { + margin: 0; + padding: 0; + font-family: Arial, sans-serif; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + background-image: url('images/for_background.webp'); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + color: white; +} + +.chatbot-container { + width: 500px; + height: 750px; + background: rgba(0, 0, 0, 0.8); + border-radius: 15px; + display: flex; + flex-direction: column; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + overflow: hidden; +} + +.header { + padding: 15px; + background-color: #1a1a2e; + text-align: center; +} + +.crypto-ticker { + background: rgba(0, 0, 0, 0.7); /* Optional background for visibility */ + color: white; /* Text color */ + padding: 10px; + border-radius: 5px; + margin: 20px auto 0; /* Push it down by 20px from the top */ + width: 90%; /* Optional: Adjust width if needed */ + text-align: center; /* Center-align text */ +} + + +.chat-interface { + flex: 1; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.chat-window { + flex: 1; + padding: 15px; + overflow-y: auto; + border-bottom: 1px solid #333; +} + +.user-input { + display: flex; + flex-direction: column; + gap: 15px; + padding: 15px; + background-color: #333; +} + +.logo-container img { + width: 80px; + height: auto; + margin: 0 auto; +} + +.logo-container h2 { + margin: 10px 0 0; + font-size: 24px; + font-weight: bold; + color: white; +} + +.search-box { + display: flex; + flex-direction: column; + gap: 10px; +} + +.large-input, .file-input { + font-size: 18px; + border-radius: 5px; +} + +.controls { + display: flex; + gap: 10px; +} + +#send-button, .dropdown-toggle { + border: none; + color: white; + padding: 10px 15px; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +#send-button { + background-color: #007bff; +} + +#send-button:hover { + background-color: #0056b3; +} + +.dropdown-menu { + background-color: #333; + color: white; +} + +.dropdown-item { + color: white; +} + +.dropdown-item:hover { + background-color: #28a745; +} + +.quick-replies { + display: flex; + justify-content: space-around; + margin-top: 15px; +} + +.daily-tip { + background: rgba(255, 255, 255, 0.1); + color: white; + padding: 15px; + border-radius: 10px; + margin: 20px; + font-size: 16px; + text-align: center; +}