{# index.html.template #}
<!DOCTYPE html>
<html>
  <head>
<!--    <meta http-equiv="Content-Security-Policy" content="script-src *  'self' 'unsafe-inline' 'unsafe-eval' default-src * data: blob: vscode-webview-resource: ;"> -->
  <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline' 'unsafe-eval' data: blob:; script-src * 'unsafe-inline' 'unsafe-eval' data: blob:; style-src * 'unsafe-inline' 'unsafe-eval' data: blob:; img-src * 'unsafe-inline' 'unsafe-eval' data: blob:; connect-src * 'unsafe-inline' 'unsafe-eval' data: blob:; font-src * 'unsafe-inline' 'unsafe-eval' data: blob:; object-src * 'unsafe-inline' 'unsafe-eval' data: blob:; media-src * 'unsafe-inline' 'unsafe-eval' data: blob:; frame-src * 'unsafe-inline' 'unsafe-eval' data: blob:;">
<!--    <meta http-equiv="Content-Security-Policy" content="default-src * data: blob: vscode-webview-resource: 'unsafe-inline' 'unsafe-eval' ; script-src * data: blob: vscode-webview-resource: 'unsafe-inline' 'unsafe-eval';"> -->
    <title>Scalene</title>
    <link rel="icon" href="https://raw.githubusercontent.com/plasma-umass/scalene/master/scalene/scalene-gui/favicon.ico" type="image/x-icon">
    <!-- Latest compiled and minified CSS -->
    <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <style>
#vg-tooltip-element {
  z-index: 2000;
}
 body { 
  padding: 0 0 90px 0;
}
    </style>
    <style>
      {{ prism_css }}
    </style>
    <style>
      .table-condensed>thead>tr>th, .table-condensed>tbody>tr>th, .table-condensed>tfoot>tr>th, .table-condensed>thead>tr>td, .table-condensed>tbody>tr>td, .table-condensed>tfoot>tr>td{
	  padding: 1px; border-spacing: 0px; border:none;
      }
    form label:hover, form button:hover {
      background-color: black;
      color: white;
    }

    form label:active, form button:active {
      background-color: blue;
      color: white;
    }

    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
	
    .text-and-upload {
      display: inline-flex;
      align-items: center; /* Align items vertically */
      }
      
      /* Ensuring the p tag takes the full width */
    .text-center {
        width: 100%;
        text-align: center;
    }

    /* Styling for the SVG */
    .svg-upload {
        height: 20px;
        width: 20px;
        cursor: pointer;
    }
    
    /* Hiding the file input but keeping it functional */
    #fileinput {
        height: 0;
        width: 0;
        opacity: 0;
        position: absolute;
    }
    </style>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-4JXPHEBMTY"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      
      gtag('config', 'G-4JXPHEBMTY');
    </script>

    <script>
      {{ prism_js }}
</script>
    <script>
      {{ tablesort_js }}
    </script>
    <script>
      {{ tablesort_number_js }}
    </script>
    <script>
      const profile = {{ profile }}
    </script>
    <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
    <script>
        function clickToLoadFile() {
            // Trigger the file input when the SVG is clicked
            document.getElementById('fileinput').click();
        }

        function handleFileChange() {
            var fileInput = document.getElementById('fileinput');
            if (fileInput.files.length > 0) {
                // Here, you can add what you want to do with the file
                console.log('File selected:', fileInput.files[0].name);
            }
        }
    </script>
	
  </head>
  <body>
    <div class="header">
      <p class="text-center">
	<a href="https://github.com/plasma-umass/scalene">
	  <img src="https://github.com/plasma-umass/scalene/raw/master/scalene/scalene-gui/scalene-image.png" height="100">
	</a>
      </p>
    </div>
	<div class="d-flex justify-content-center">
	  <details id="ai-optimization-options">
	    <summary style="font-size:0.8rem; color: blue">AI optimization options</summary>
	  <!-- <label for='demoinput' style="padding: 5px 5px; border-radius: 5px; border: 1px ridge black; font-size: 0.8rem; height: auto;">demo</label>
	  <input style="height: 0; width: 0; opacity:0" type='button' id='demoinput' accept='.json' onclick="loadDemo();">
	  -->
        <label for="service-select" style="font-size: 0.8rem">AI service provider:</label>
        <select style="font-size: 0.8rem" id="service-select" class="persistent" onchange="toggleServiceFields()">
          <option value="openai">OpenAI</span></option>
          <option value="amazon">Amazon Bedrock</option>
          <option value="azure-openai">Azure OpenAI</option>
          <option value="local">Local</option>
    </select>
<hr />

<!-- OpenAI API Key Field -->
<div id="openai-fields">

  <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 5px;">
    <label for="api-key" style="font-size: 0.8rem; width: 150px;">
      OpenAI <a href="https://beta.openai.com/signup">API key</a>:
    </label>
    <input
      type="text"
      style="font-size: 0.8rem; flex: 1;"
      size="22"
      placeholder="(OpenAI API key)"
      id="api-key"
      oninput="checkApiKey(event.target.value)"
    />
    <span id="valid-api-key"></span>
  </div>

  <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 5px;">
    <label for="language-model-openai" style="font-size: 0.8rem; width: 150px;">
      Language model:
    </label>
    <select
      style="font-size: 0.8rem; flex: 1;"
      id="language-model-openai"
      class="persistent"
      name="language-model-openai-label"
    >
      <option value="gpt-3.5-turbo">GPT 3.5</option>
      <option value="gpt-4" selected>GPT 4.0</option>
    </select>
  </div>

</div>

<!-- Azure OpenAI API Key Field -->
<div id="azure-openai-fields" style="display: none;">

  <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 5px;">
    <label for="azure-api-key" style="font-size: 0.8rem; width: 150px;">Azure OpenAI API key:</label>
    <input
      type="text"
      style="font-size: 0.8rem; flex: 1;"
      size="22"
      placeholder="(Azure OpenAI API key)"
      id="azure-api-key"
    />
    <span id="valid-api-key"></span>
  </div>

  <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 5px;">
    <label for="azure-api-url" style="font-size: 0.8rem; width: 150px;">API URL Azure Open AI:</label>
    <input
      type="text"
      style="font-size: 0.8rem; flex: 1;"
      size="22"
      placeholder="(Azure OpenAI API URL)"
      id="azure-api-url"
    />
  </div>

  <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 5px;">
    <label for="azure-api-model" style="font-size: 0.8rem; width: 150px;">Language model:</label>
    <input
      type="text"
      style="font-size: 0.8rem; flex: 1;"
      size="22"
      placeholder="(Azure OpenAI API Model)"
      id="azure-api-model"
    />
  </div>

  <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 5px;">
    <label for="azure-api-model-version" style="font-size: 0.8rem; width: 150px;">API Version:</label>
    <input
      type="text"
      style="font-size: 0.8rem; flex: 1;"
      size="22"
      placeholder="(Azure OpenAI API Version)"
      id="azure-api-model-version"
    />
  </div>

</div>


	
        <!-- Amazon Bedrock Fields -->
<div id="amazon-fields" style="display: none;">
  <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 5px;">
    <label for="aws-access-key" style="font-size: 0.8rem; width: 150px;">AWS Access Key ID:</label>
    <input
      type="text"
      style="font-size: 0.8rem; flex: 1;"
      size="22"
      placeholder="AKIAxxxxxxxxxxxxxxxx"
      id="aws-access-key"
      class="persistent"
    />
  </div>

  <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 5px;">
    <label for="aws-secret-key" style="font-size: 0.8rem; width: 150px;">AWS Secret Access Key:</label>
    <input
      type="text"
      style="font-size: 0.8rem; flex: 1;"
      size="22"
      placeholder="(Secret Access Key)"
      id="aws-secret-key"
      class="persistent"
    />
  </div>

  <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 5px;">
    <label for="aws-region" style="font-size: 0.8rem; width: 150px;">AWS Region:</label>
    <input
      type="text"
      style="font-size: 0.8rem; flex: 1;"
      size="22"
      placeholder="us-east-1"
      id="aws-region"
      class="persistent"
    />
  </div>

  <div style="display: flex; align-items: center; gap: 8px;">
    <label style="font-size: 0.8rem; width: 150px;" for="language-model-amazon">
      Language model:
    </label>
    <select
      style="font-size: 0.8rem; flex: 1;"
      id="language-model-amazon"
      name="language-model-amazon-label"
    >
      <option value="claude-3.5" selected>Claude 3.5</option>
    </select>
  </div>
</div>

    <div id="local-fields" style="display: none; font-size: 0.8rem">
    Use this option if you are running a local language model. We currently support <a href="https://ollama.ai/">Ollama</a>.
    <br />
          <label for='local-ip' style="font-size: 0.8rem">IP Address:</label>
          <input type="text" style="font-size: 0.8rem" size="22" placeholder="localhost" id="local-ip" class="persistent" value="localhost"></input>
          <label for='local-port' style="font-size: 0.8rem">Port:</label>
    <input type="number" style="font-size: 0.8rem" size="22" placeholder="11434" id="local-port" class="persistent" value="11434"></input>
    <br />
    <div id="install-models-message" style="display:none;">
      <span style="color: red">Server not found or no language models installed.</span><br />
      Install language models as in <span style="background-color:rgb(220 220 220);"><code>ollama pull codellama:34b-python</code></span>.
    </div>


    <br />
    <div id="local-models-list">
          <label style="font-size: 0.8rem" for="language-model-local">
            Language model:
          </label>
    <span style="font-size: 0.8rem">
    </span>
    <div id="language-local-models"></div>
    </div>
        </div>
	  <br />
	  <B style="font-size:0.8rem">Proposed optimizations</B><BR />
	  <div>
	    <input type="radio" name="optimize-radio" id="optimize-performance" value="performance" class="persistent" checked>
	    <label style="font-size: 0.8rem" for="optimize-performance">
	      Optimize runtime performance
	    </label>
	  </div>
	  <div>
	    <input type="radio" name="optimize-radio" id="optimize-memory" class="persistent" value="memory">
	    <label style="font-size: 0.8rem" for="optimize-memory">
	      Optimize memory efficiency
	    </label>
	  </div>
	  <input type="checkbox" id="use-gpu-checkbox" name="use-gpu-checkbox-label" class="persistent" >
	  <!-- onclick="try { window.localStorage.setItem('scalene-gpu-checkbox', document.getElementById('use-gpu-checkbox').checked); } catch {}" -->
	  <label style="font-size: 0.8rem" for="use-gpu-checkbox" class="persistent">
	    Include GPU optimizations
	  </label>
	  <br />
	  <font style="font-size: 0.8rem">
	    Click on an explosion (&#128165;) to see proposed optimizations for a region of code,<br />
	    or on a lightning bolt (&#9889;) to propose optimizations for a specific line.<br />
	    Click again to generate a different one.<br />
	    <em>Note that optimizations are AI-generated and may not be correct.</em>
	    <br />
	  </font>
	  <br />
	  </details>
	</div>
    <div id="profile">
    </div>
    <script type="text/javascript">
      {{ gui_js }}
      window.addEventListener("load", () => {
	  load(profile);
      });
      //load(profile);
    </script>
      <nav class="navbar fixed-bottom navbar-default justify-content-center bg-light bg-opacity-75" style="backdrop-filter: blur(2px);">
	<div class="container justify-content-center">
	  <p class="text-center">
	    <font style="font-size:small">
	      <div class="text-and-upload">
		  <a href="https://github.com/plasma-umass/scalene">Scalene</a> version {{ scalene_version }}, {{ scalene_date }}
		  &nbsp;|&nbsp;
		  <a href="https://github.com/plasma-umass/scalene/issues/new/choose">report an issue or request a feature</a>
		  &nbsp;|&nbsp;
		  <a href="https://github.com/plasma-umass/scalene/issues/58">share your Scalene success stories</a>
		  &nbsp;|&nbsp;
		  <a href="javascript:void(0);" onclick="clickToLoadFile();">load another profile</a>
		<form id="jsonFile" name="jsonFile" enctype="multipart/form-data" method="post" style="display: inline;">
		  <input style="height: 0; width: 0; opacity: 0" type="file" id="fileinput" accept=".json" onchange="loadFile()">
		  <!-- SVG icon -->
		  <svg class="svg-upload" onclick="clickToLoadFile();" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
		    <title>Load another profile (.json)</title>
		    <g data-name="upload">
		      <rect width="16" height="2" x="4" y="4" rx="1" ry="1" transform="rotate(180 12 5)"></rect>
		      <rect width="4" height="2" x="17" y="5" rx="1" ry="1" transform="rotate(90 19 6)"></rect>
		      <rect width="4" height="2" x="3" y="5" rx="1" ry="1" transform="rotate(90 5 6)"></rect>
		      <path d="M8 14a1 1 0 0 1-.8-.4 1 1 0 0 1 .2-1.4l4-3a1 1 0 0 1 1.18 0l4 2.82a1 1 0 0 1 .24 1.39 1 1 0 0 1-1.4.24L12 11.24 8.6 13.8a1 1 0 0 1-.6.2z"></path>
		      <path d="M12 21a1 1 0 0 1-1-1v-8a1 1 0 0 1 2 0v8a1 1 0 0 1-1 1z"></path>
		    </g>
		  </svg>
		</form>
	      </div>
	    </font>
	  </p>
	</div>
      </nav>
  </body>
</html>
