index.html

<html>
    <head>
        <link rel="stylesheet" href="style.css">       
    </head>

    <body>
        <div class="main-company" id="rrMain">
            <h3 class="main-heading">RR Technologies - Retro Poster Board</h3>
            <p class="details">               
                <ul>
                <li>This site is designed as a platform for fostering innovative ideas and conducting comprehensive market research and feasibility analyses.</li>
                <li>It operates as a dynamic poster board environment, enabling businesses to showcase their products and offer targeted promotions.</li>
                <li>This site design and overall aesthetic are regularly reviewed and updated to ensure an engaging user experience.</li>
                <li>The platform provides a space for businesses to publicly advertise their offerings and disseminate promotional campaigns.</li>
                <li>All content pertaining to businesses is sourced directly from their owners and published with the understanding that it represents their official brand messaging.</li>
                </ul>               
            </p>
            <p>
                &nbsp;&nbsp;&nbsp;&nbsp;<span class="disclaimer">Disclaimer:</span>
                <ul>
                
                <li>We are dedicated to protecting user privacy and ensuring a secure environment.</li>
                <li>We do not store any personal data and do not facilitate any commercial transactions on the platform.</li>
                <li>All information presented is sourced from the respective business owners and is intended for informational purposes only.</li>
                </ul>
            </p>

        </div>
        <div class="tabs">
            
            <button class="tab-link" onclick="openTab(event, 'Plnb')"><span class="tab-heading">NUTRITION</span></button>
            <button class="tab-link" onclick="openTab(event, 'Hcs')"><span class="tab-heading">CAKES</span></button>
            <button disabled class="tab-link" onclick="openTab(event, 'Sports')"><span class="tab-heading">SPORTS</span></button>
            <button disabled class="tab-link" onclick="openTab(event, 'Nature')"><span class="tab-heading">NATURE</span></button>
            <button disabled class="tab-link" onclick="openTab(event, 'Upcoming')"><span class="tab-heading">UPCOMING-1</span></button>
            <button disabled class="tab-link" onclick="openTab(event, 'Upcoming')"><span class="tab-heading">UPCOMING-2</span></button>
            <button disabled class="tab-link" onclick="openTab(event, 'Upcoming')"><span class="tab-heading">UPCOMING-3</span></button>
            <button disabled class="tab-link" onclick="openTab(event, 'Upcoming')"><span class="tab-heading">UPCOMING-4</span></button>           
            <button disabled class="tab-link" onclick="openTab(event, 'About')"><span class="tab-heading">ABOUT</span></button>
        
        </div>
  
        <div id="Plnb" class="tab-content">
            <h4>Project LeanNation </h4> 
                <table >
                    <tr>
                        <td>
                            <p>
                                We are incredibly excited to announce the launch of a new store <a href="https://projectleannation.com/locations/burlington-ma" alt="Project LeanNation" target="_blank" rel="noopener noreferrer">Project Lean Nation</a> in Burlington mid-June.<br>
                                We would like to introduce the owner, Shweta, a former Google engineer who has transitioned her passion for nutrition and building healthier habits into a community-focused endeavor.<br>
                                Shweta is currently looking to connect with the community and would love to partner
                                with local groups, corporate teams, fitness studios, sports clubs and other organizations to host pop-ups. <br>
                                <br>
                                They offer macro-balanced meals and nutrition coaching designed to make healthy eating simple, 
                                convenient, and sustainable for busy professionals.<br>
                                These are great ways to sample meals, try protein snacks, and learn more about the nutrition program in a fun, low-pressure setting.<br>
                                We would love to connect you with Shweta and explore potential wellness initiatives for your teams!<br>        
                                Please use the link to avial the introductary founding member discounts, <a href="https://pln.fit/e/M-ARUN" alt="Singup link" target="_blank" rel="noopener noreferrer">Signup</a>
                                <br> If you're open to it, we would be happy to make an introduction.
                            </p>
                        </td>
                        <td>
                            <img src="images/QR_PLNB.png" height="150" width="150" style="background-position: top right;"></img>
                        </td>
                    </tr>
                </table>        
        </div>

        <div id="Hcs" class="tab-content">
            <h4>Harshali Custom Cake Shop</h4>
            <table >
             <tr>
            <td vertical-align="top"> 
                   
                We are happy to introduce a speciality cake shop by Harshali in Boston Neighborhood.<br>
                Harshali creates affordable and handmade theme based cake design's that suit your needs. <br>
                Please check out her <a class="anchor-tags" href="https://www.facebook.com/harshaliscreativecakes/" alt="Harshali Cake Shop" target="_blank" rel="noopener noreferrer">Facebook</a> link to discuss customizations based on your preferences! 
          
            </td>
            <td><span style="visibility: hidden;">space filler for now!</span></td>
            <td >
                <table >                    
                    <tr>
                        <td><img src="images/20230407_140300.jpg" height="100" width="80"/></td>
                        <td><img  src="images/20240501_175250.jpg" height="100" width="80"/></td>
                        <td><img src="images/20250407_183652.jpg" height="100" width="80"/></td>
                        <td><img src="images/20250510_145255.jpg" height="100" width="80"/></td>
                    </tr>
                </table>
            </td>
            </tr>
            </table>
            <br>
            <p>
                If you like to hear more,  we would be happy to make an introduction.
            </p>

        </div>

        <div id="Sports" class="tab-content">
            <h4>Sports</h4>
            <p>TSK Cricket Team</p>
        </div>

        <div id="About" class="tab-content">
            <h4>About</h4>
            <p>Learn more about our project and mission.</p>
            <p>
                Design<br><br>
                [Client (Web/Mobile)]  <-->  [API Layer (Fastapi/Python)]  <-->  [LLM Integration (OpenAI)]  <--> [Data Layer (Optional)]
                <ol>
                <li>We have built the software stack powered by various language models, content RAG using llamaindex</li>
                
                </ol>
            </p>
        </div>

        <div class="ai-assistant-container" id="aiAssistant">
            <img src="images/bP.png" alt="AI Assistant Avatar" class="assistant-avatar" id="net-ai">

            <!-- Chat Bubble (Text Area) -->
            <div class="chat-bubble" id="net">
                <p>Hello! RR Technologies assistant here, how may I help you? 
                <ol>
                    <li>Please click the icon to collapse this window</li>
                    <li>Please type your question and press enter</li>
                    <li>Please dblclick to clear the contents!</li>
                </ol>
                </p>
                <textarea rows="10" cols="35" id="console" style="display:none" >
                </textarea>
            </div>

        </div>
 
        <script>
            function openTab(evt, tabName) {
                var i, tabcontent, tablinks;

                // Hide all elements with class="tab-content"
                tabcontent = document.getElementsByClassName("tab-content");
                for (i = 0; i < tabcontent.length; i++) {
                    tabcontent[i].style.display = "none";
                }

                // Remove the "active" class from all tab buttons
                tablinks = document.getElementsByClassName("tab-link");
                for (i = 0; i < tablinks.length; i++) {
                    tablinks[i].className = tablinks[i].className.replace(" active", "");
                }

                // Show the current tab, and add an "active" class to the button that opened the tab
                document.getElementById(tabName).style.display = "block";
                evt.currentTarget.className += " active";
            }

        </script>
     
        
        <script type="module">
        import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
        async function callGradioAPI(userInput) {
            // 1. Connect to the app (use your Space name or URL)
            const app =  await Client.connect('https://rr19tech-my-proxy.hf.space');
            // 2. Call the endpoint with user input passed as an array
            const result = await app.predict("/call_private_api", [userInput]);
            // 3. Access the returned data
            console.log("Result:", result.data);
            return result.data;
            }
        
        const consoleArea = document.getElementById('console');
        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 
            

        });

        function get_api_results(result){
            callGradioAPI(result)		
                .then(data => {
                    if (data) {
                        console.log('Received data:', data);
                        consoleArea.value = data;
                        return data;
                    }
                else{
                    console.log("No data received");
                }
  		    });
	    }
            consoleArea.addEventListener('keydown', function(event) {
            
            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);
                let result = get_api_results(command);
                //console.log("data is: " + result);
                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>