inamprograms · sidratulhayatkhan · Dec 8, 2024 · Dec 8, 2024 · Dec 8, 2024 · Dec 8, 2024
diff --git a/Images_needed b/Images_needed
@@ -0,0 +1 @@
+
diff --git a/ReadMe.md 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
diff --git a/images/Image2.jpg b/images/Image2.jpg
diff --git a/images/for_background.webp b/images/for_background.webp
diff --git a/images/logo.jpg b/images/logo.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Chatbot Interface</title>
+    <link rel="stylesheet" href="styles.css">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
+</head>
+<body>
+    <div class="chatbot-container">
+        <div class="header">
+            <h1>Crypto ChatBot</h1>
+        </div>
+        <div class="chat-interface">
+            <div class="crypto-ticker">
+                <marquee>BTC: $99,949.00 | ETH: $3,985.18 | LTC: $133.15</marquee>
+            </div>
+            <div class="chat-window">
+                <div id="chat-log">
+                    <!-- Chat messages will appear here -->
+                </div>
+            </div>
+            <div class="user-input">
+                <div class="logo-container">
+                    <img src="images/logo.jpg" alt="Logo" class="logo">
+                    <h2>BlockWhere Technologies</h2>
+                </div>
+                <div class="search-box">
+                    <input type="text" id="user-input" placeholder="Share your thought..." class="form-control large-input">
+                    <!-- <input type="file" id="file-upload" class="form-control file-input"> -->
+                </div>
+                <div class="controls">
+                    <select id="search-options" class="form-select">
+                        <option value="text">Text</option>
+                        <option value="image">Image</option>
+                        <option value="video">Video</option>
+                        <option value="meme">Meme</option>
+                        <option value="all">All</option>
+                    </select>
+                    <button id="send-button" class="btn btn-primary">Send</button>
+
+                    <!-- Dropdown for Social Media Posts -->
+                    <div class="dropdown">
+                        <button class="btn btn-success dropdown-toggle" type="button" id="socialPostDropdown" data-bs-toggle="dropdown" aria-expanded="false">
+                            Social Media Post For
+                        </button>
+                        <ul class="dropdown-menu" aria-labelledby="socialPostDropdown">
+                            <!-- <li><a class="dropdown-item" href="#" id="facebook-post">Facebook Post</a></li> -->
+                            <li><a class="dropdown-item" href="#" id="linkedin-post">LinkedIn</a></li>
+                            <li><a class="dropdown-item" href="#" id="x-post">X (formerly Twitter)</a></li>
+                            <li><a class="dropdown-item" href="#" id="instagram-post">Instagram</a></li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <div class="quick-replies">
+                <button class="btn btn-secondary">What is Crypto?</button>
+                <button class="btn btn-secondary">Crypto Trends</button>
+                <button class="btn btn-secondary">Crypto Tips</button>
+            </div>
+        </div>
+        <div class="daily-tip">
+            <h4>Crypto Tip of the Day</h4>
+            <p id="tip-content">Loading...</p>
+        </div>
+    </div>
+    <script src="script.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>
diff --git a/script.js 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
@@ -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;
+}