<!DOCTYPE html>
<html data-wf-domain="askme-ai.vercel.app" data-wf-page="640a5eb26ecc85081b9284ca" data-wf-site="640a5eb26ecc85046e9284c6" lang="en">
   <head>
      <meta charset="utf-8"/>
      <title>Ask me</title>
      <meta content="width=device-width, initial-scale=1" name="viewport"/>
      <meta content="Webflow" name="generator"/>
      <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" type="text/css">
      <link href="https://fonts.googleapis.com" rel="preconnect"/>
      <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous"/>
      <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script><script type="text/javascript">WebFont.load({  google: {    families: ["Inter:100,200,300,regular,500,600,700,800,900"]  }});</script>
      <script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
      <link href="{{ url_for('static', filename='favicon.png') }}" rel="shortcut icon" type="image/x-icon"/>
      <link href="{{ url_for('static', filename='favicon.png') }}" rel="apple-touch-icon"/>
    
      
      <style>
         * {
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
         }
      </style>
      <style>
		/* Style for loading animation */
		@keyframes loading {
			0% { transform: rotate(0deg); }
			100% { transform: rotate(360deg); }
		}

		.loader {
			animation: loading 2s linear infinite;
			display: none; /* hide the loader by default */
		}

		.loader.show {
			display: block; /* show the loader when .show class is added */
		}
        .submit-button .w-button .hide{
            display:none;
        }
        .submit-button{
           box-shadow: inset 0 1px 0 0 hsl(0deg 0% 100% / 20%);
        }
        .text-left-answer {
           line-height: 1.6em;
           margin-top:0px !important;
         text-align: start;
        }
        .text-left-answer p{
           line-height: 1.6em;
         text-align: start;
        }
        .max-width-small.align-center{
           grid-row-gap: 0px;
        }
        .wide{
           margin-top:0px;
        }
        @media screen and (max-width: 479px){
         .mag-wrapper {
            margin-top: -10px;
         }
        }
	</style>	
   </head>
   <body class="background-color-black">
      <div class="page-wrapper">
         <div class="global-styles w-embed">
            <style>
               /* Get rid of top margin on first element in any rich text element */
               .w-richtext > :not(div):first-child, .w-richtext > div:first-child > :first-child {
               margin-top: 0 !important;
               }
               /* Get rid of bottom margin on last element in any rich text element */
               .w-richtext>:last-child, .w-richtext ol li:last-child, .w-richtext ul li:last-child {
               margin-bottom: 0 !important;
               }
               /* 
               Make the following elements inherit typography styles from the parent and not have hardcoded values. 
               Important: You will not be able to style for example "All Links" in Designer with this CSS applied.
               Uncomment this CSS to use it in the project. Leave this message for future hand-off.
               */
               /*
               a,
               .w-input,
               .w-select,
               .w-tab-link,
               .w-nav-link,
               .w-dropdown-btn,
               .w-dropdown-toggle,
               .w-dropdown-link {
               color: inherit;
               text-decoration: inherit;
               font-size: inherit;
               }
               */
               /* Prevent all click and hover interaction with an element */
               .pointer-events-off {
               pointer-events: none;
               }
               /* Enables all click and hover interaction with an element */
               .pointer-events-on {
               pointer-events: auto;
               }
               /* Snippet enables you to add class of div-square which creates and maintains a 1:1 dimension of a div.*/
               .div-square::after {
               content: "";
               display: block;
               padding-bottom: 100%;
               }
               /*Hide focus outline for main content element*/
               main:focus-visible {
               outline: -webkit-focus-ring-color auto 0px;
               }
               /* Make sure containers never lose their center alignment*/
               .container-medium, .container-small, .container-large {
               margin-right: auto !important;
               margin-left: auto !important;
               }
               /*Reset selects, buttons, and links styles*/
               .w-input, .w-select, a {
               color: inherit;
               text-decoration: inherit;
               font-size: inherit;
               }
               /*Apply "..." after 3 lines of text */
               .text-style-3lines {
               display: -webkit-box;
               overflow: hidden;
               -webkit-line-clamp: 3;
               -webkit-box-orient: vertical;
               }
               /* Apply "..." after 2 lines of text */
               .text-style-2lines {
               display: -webkit-box;
               overflow: hidden;
               -webkit-line-clamp: 2;
               -webkit-box-orient: vertical;
               }
               /* Apply "..." at 100% width */
               .truncate-width { 
               width: 100%; 
               white-space: nowrap; 
               overflow: hidden; 
               text-overflow: ellipsis; 
               }
               /* Removes native scrollbar */
               .no-scrollbar {
               -ms-overflow-style: none;  
               overflow: -moz-scrollbars-none; 
               }
               .no-scrollbar::-webkit-scrollbar {
               display: none;
               }
               /* Adds inline flex display */
               .display-inlineflex {
               display: inline-flex;
               }
               /* These classes are never overwritten */
               .hide {
               display: none !important;
               }
               @media screen and (max-width: 991px) 
               @media screen and (max-width: 479px){
               .hide, .hide-tablet{
               display: none !important;
               }
               }
               @media screen and (max-width: 767px)
               .hide-mobile-landscape{
               display: none !important;
               }
               @media screen and (max-width: 479px)
               .hide-mobile{
               display: none !important;
               }
               }
               .margin-0 {
               margin: 0rem !important;
               }
               .padding-0 {
               padding: 0rem !important;
               }
               .spacing-clean {
               padding: 0rem !important;
               margin: 0rem !important;
               }
               .margin-top {
               margin-right: 0rem !important;
               margin-bottom: 0rem !important;
               margin-left: 0rem !important;
               }
               .padding-top {
               padding-right: 0rem !important;
               padding-bottom: 0rem !important;
               padding-left: 0rem !important;
               }
               .margin-right {
               margin-top: 0rem !important;
               margin-bottom: 0rem !important;
               margin-left: 0rem !important;
               }
               .padding-right {
               padding-top: 0rem !important;
               padding-bottom: 0rem !important;
               padding-left: 0rem !important;
               }
               .margin-bottom {
               margin-top: 0rem !important;
               margin-right: 0rem !important;
               margin-left: 0rem !important;
               }
               .padding-bottom {
               padding-top: 0rem !important;
               padding-right: 0rem !important;
               padding-left: 0rem !important;
               }
               .margin-left {
               margin-top: 0rem !important;
               margin-right: 0rem !important;
               margin-bottom: 0rem !important;
               }
               .padding-left {
               padding-top: 0rem !important;
               padding-right: 0rem !important;
               padding-bottom: 0rem !important;
               }
               .margin-horizontal {
               margin-top: 0rem !important;
               margin-bottom: 0rem !important;
               }
               .padding-horizontal {
               padding-top: 0rem !important;
               padding-bottom: 0rem !important;
               }
               .margin-vertical {
               margin-right: 0rem !important;
               margin-left: 0rem !important;
               }
               .padding-vertical {
               padding-right: 0rem !important;
               padding-left: 0rem !important;
               }
               @media screen and (max-width: 767px){
                  .padding-section-large {
               padding-top: 5rem;
               padding-bottom: 4rem;
               }
               }
            </style>
             <style>
        body {
        -ms-overflow-style: none; 
        overflow: -moz-scrollbars-none;  
        }
        body::-webkit-scrollbar {
        display: none; 
        }
     </style>
         </div>
         <main class="main-wrapper">
            <header id="home" data-w-id="c75a846a-133a-546b-c19d-ff0c67daf880" class="section_header">
               <div class="padding-global">
                  <div class="container-small">
                     <div class="header-80vh">
                        <div class="padding-section-large">
                           <div class="text-align-center">
                              <div class="margin-bottom margin-small">
                                 <div class="home-header_heading-wrapper">
                                    <div class="header_engineers-wrapper">
                                       <img src="https://uploads-ssl.webflow.com/640a5eb26ecc85046e9284c6/640a5eb26ecc85364392850e_engineers.png" loading="lazy" sizes="100vw" srcset="https://uploads-ssl.webflow.com/640a5eb26ecc85046e9284c6/640a5eb26ecc85364392850e_engineers-p-500.png 500w, https://uploads-ssl.webflow.com/640a5eb26ecc85046e9284c6/640a5eb26ecc85364392850e_engineers-p-800.png 800w, https://uploads-ssl.webflow.com/640a5eb26ecc85046e9284c6/640a5eb26ecc85364392850e_engineers.png 1076w" alt="" class="header_engineers-outline"/></div>
                                    <div class="header_researchers-wrapper">
                                       <h1 class="home_heading">Just ask me</h1>
                                       <div data-w-id="fac58d81-770f-d8a2-2728-645b06ba78e4" style="-webkit-transform:translate3d(-0.5rem, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(-0.5rem, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(-0.5rem, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(-0.5rem, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0)" class="mag-wrapper">
                                          <div class="mag-blur"></div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                              <div data-w-id="c75a846a-133a-546b-c19d-ff0c67daf88b" class="navbar_wrapper">
                                 <div class="navbar_outline">
                                    <div class="navbar">
                                       <div id="w-node-d40fc199-13d8-aa9b-1910-cc90e5a86593-1b9284ca" class="for-block w-form">
                                          <form method="post" class="text-input">
                                          <input type="text" class="text-field w-input" style="display:none;" maxlength="256" name="name" data-name="Name" placeholder="Tell me" id="input"/>
                                          <input id="updateBtn" type="submit" style="display:none;" value="Ask" data-wait="Please wait..." class="submit-button w-button"/>
                                          <div class="loader">
                                             <img style='height:100%;' src="https://uploads-ssl.webflow.com/640a5eb26ecc85046e9284c6/640b3d13ba675219c9dc6472_Loading.svg">
                                          </div>
                                          </form>
                                          <div class="text-input">
                                          <input id="submit-openai-key" type="password" class="text-field w-input" maxlength="256" name="name" data-name="Name" placeholder="Enter your OpenAI API KEY" >
                                          <buttom onclick="hideOpenAIKey()" type="submit" id="send-open" value="Save" class="submit-button w-button">Save</buttom>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                              <div class="max-width-small align-center">
                           
                                 <p id="output" class="text-size-medium text-color-white text-style-muted">I can help you with almost everything. Like What&#x27;s the meaning of life? or What&#x27;s the airspeed velocity of an unladen swallow?</p>
                                
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="header_background-image-wrapper"></div>
            </header>
         </main>
      <div class="change-key">
      <buttom onclick="showOpenAIKey()" id="change-yourkey" class="div-links w-button">Change your key</buttom>
      <div class="text-size-medium text-color-white text-style-muted shorter" style="text-decoration: underline;"><a href="https://platform.openai.com/account/api-keys" target="_blank">OpenAI key here</a></div>
      </div>
      </div>
      <script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=640a5eb26ecc85046e9284c6" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous">
      </script>
      <script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@latest/bundled/lenis.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
   
      <script>
       document.getElementById("submit-openai-key").addEventListener("keydown", function(event) {
    if (event.key === "Enter") {
      hideOpenAIKey();
    }
  }); 
  </script>
  <script>
  var isOpen = false;
  var button = document.getElementById("change-yourkey");

  button.addEventListener("click", function() {
    if (isOpen) {
      hideOpenAIKey();
      isOpen = false;
    } else {
      showOpenAIKey();
      isOpen = true;
    }
  });
  </script>
  
  
   <script>
   function showOpenAIKey() {
  var displaysendopen = document.getElementById("send-open");
  var displaysubmitopenaikey = document.getElementById("submit-openai-key");
  var displayupdateBtn = document.getElementById("updateBtn");
  var displayinput = document.getElementById("input");
        
  displaysendopen.style.display = "block";
  displaysubmitopenaikey.style.display = "block";
  displayupdateBtn.style.display = "none";
  displayinput.style.display = "none";
}
   </script>
      <script>
     function hideOpenAIKey() {
  var displaysendopen = document.getElementById("send-open");
  var displaysubmitopenaikey = document.getElementById("submit-openai-key");
  var displayupdateBtn = document.getElementById("updateBtn");
  var displayinput = document.getElementById("input");
        
  displaysendopen.style.display = "none";
  displaysubmitopenaikey.style.display = "none";
  displayupdateBtn.style.display = "inline-block";
  displayinput.style.display = "block";
}

// Get the submit button and input field
const submitButton = document.getElementById('send-open');
const submitInput = document.getElementById('submit-openai-key');

// Add event listener to the button
submitButton.addEventListener('click', function() {
  saveInputValue();
});

// Add event listener to the input field
submitInput.addEventListener('keydown', function(event) {
  if (event.key === 'Enter') {
    saveInputValue();
  }
});

// Save the input value to a cookie and hide the OpenAI key
function saveInputValue() {
  // Get the value of the input field
  const inputValue = submitInput.value;

  // Set the cookie with the input value
  document.cookie = `not-api-cookie=${inputValue}`;

  // Call the hideOpenAIKey function
  hideOpenAIKey();
}
    </script>
       <script>
if (document.cookie.split(';').some((item) => item.trim().startsWith('not-api-cookie='))) {
  // Run the hideOpenAIKey function
  hideOpenAIKey();
}
       </script>
      <script>
         const form = document.querySelector('form');
         const output = document.querySelector('#output');
         
         form.addEventListener('submit', async event => {
            event.preventDefault();
             
            const inputValue = document.querySelector('#input').value;
            const response = await fetch('/submit', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({inputValue})
            });
             
            const data = await response.json();
            const answer = data.message
            console.log(answer)
            /* output.textContent = data.message;*/
            output.classList.add('text-left-answer');
            document.getElementById("output").innerHTML =  marked.parse(answer);
         });
      </script>
      <script>
		const div = document.getElementById('output');
		const updateBtn = document.getElementById('updateBtn');
		const loader = document.querySelector('.loader');

		updateBtn.addEventListener('click', () => {
			loader.classList.add('show');
            updateBtn.classList.add('hide'); // show the loader by adding the .show class
			// You can do any other processing here, like fetching new data using AJAX
		
		});

		// Create a new MutationObserver instance
		const observer = new MutationObserver((mutations) => {
			mutations.forEach((mutation) => {
				// Check if the mutation was a childList change (i.e. the div was updated)
				if (mutation.type === 'childList') {
					loader.classList.remove('show');
                    updateBtn.classList.remove('hide'); // hide the loader by removing the .show class
				}
			});
		});

		// Start observing the div for changes
		observer.observe(div, { childList: true });
	</script>
   </body>
</html>