Spaces:

rr19tech
/

ForAmma

Running

App Files Files Community

rr19tech commited on 17 days ago

Commit

ea0cf2f

verified ·

1 Parent(s): 7382619

Updated index.html

Browse files

Files changed (1) hide show

index.html +94 -16

index.html CHANGED Viewed

@@ -1,19 +1,97 @@
 <!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>
+    <head>
+        <link rel="stylesheet" href="style.css">
+        <script src="client.js" type="module"></script>
+    </head>
+    <body>
+        <div class="ai-assistant-container" id="aiAssistant">
+            <img src="bP.png" alt="AI Assistant Avatar" class="assistant-avatar" id="net-ai">
+            <!-- Chat Bubble (Text Area) -->
+            <div class="chat-bubble" id="net">
+                <p>Hello! I am your plnb assistant, how may I help you?
+                <ol><li>Please dblclick to clear the contents!</li></ol>
+                </p>
+                <textarea rows="3" cols="35" id="console" style="display:none" >
+                </textarea>
+            </div>
+        </div>
+        <script type="module">
+        import {client} from "./client.js";
+        const consoleArea = document.getElementById('console');
+        async function call_api(message){
+            //We should be hitting the api server first and get the relavant context to the question
+            let static_context="menu items for the lunch are dal and roti. menu items for breakfast are idli and dosa, menu item for dinner is pizza and pasta";
+            message="Context: " + static_context + "Question:" +  message;
+            console.log("message is: " + message);
+            const result = await client.predict("/chat", {
+            message: message, // User input
+        });
+            let resp = result.data;
+            console.log(resp); // AI response
+            //let's repopulate the text box with the result
+            consoleArea.value = resp;
+        }
+        //for the AI assistant
+        // Get elements by their IDs/classes
+        //const assistantAvatar = document.querySelector('.assistant-avatar');
+        //const chatBubble = document.querySelector('.chat-bubble');
+        const assistantAvatar = document.getElementById('net-ai');
+        const chatBubble = document.getElementById('net');
+        const aiChatArea = document.getElementById("console");
+        // Add a click event listener to the avatar
+        assistantAvatar.addEventListener('click', () => {
+        // Toggle the display style to show or hide the chat bubble
+        if (chatBubble.style.display === 'none' || chatBubble.style.display === '') {
+                chatBubble.style.display = 'block';
+                aiChatArea.style.display = "block";
+                //AiResults.style.display = "block";
+            } else {
+                chatBubble.style.display = 'none';
+                aiChatArea.style.display = "none";
+                //AiResults.style.display = "none";
+            }
+            console.log("Is the button clicked!! net-ai");
+            //we have to call the language model from this chat
+        });
+            // Add a keydown event listener to the chat console area of the chat bublle
+            consoleArea.addEventListener('keydown', function(event) {
+            //clear the existing text
+            // Check if the key pressed is the 'Enter' key
+            if (event.key === 'Enter') {
+            //not sure if we need below to prevent the default behaviour
+                event.preventDefault();
+                console.log('Enter key pressed! Perform action.');
+                //get the entered value
+                let command = consoleArea.value;
+                call_api(command);
+                consoleArea.value = "";//null the value
+            }
+            });
+            //adding a double click event to clear the contents for next question
+            consoleArea.addEventListener('dblclick', function(event) {
+                console.log("am i double clicked!!");
+                consoleArea.value = ""; //clearning for next question
+            });
+        </script>
+    </body>
 </html>