index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Expires" content="0" />
  <title>Eva - ChatGPT</title>

  <!-- Scripts -->
  <script src="core/js/options.js"></script> 
  <script src="core/js/external.js"></script>
  <script src="core/js/gpt-core.js"></script>
  <script src="core/js/gl-google.js"></script>
  <script src="core/js/lm-studio.js"></script>
  <script src="core/js/dalle3.js"></script>
  <script src="core/js/aws-sdk-2.1304.0.min.js"></script>
  <script>
    auth();
    // Adjust for Mobile User Agents
    mobile_txtout();
  </script>

  <!-- Original CSS -->
  <link rel="stylesheet" type="text/css" href="core/style.css">

</head>

<body onload="OnLoad()">
  <script>
    // Adjust for Mobile User Agents
    useragent_adjust();
  </script>

  <div id="idContainer">
    <div id="textToSynth">
      <!-- Chat Output Area -->
      <div id="txtOutput" rows="10" wrap="soft" placeholder="Output">
        <!-- Example Chat Messages -->
        <div class="chat-message user">
          <div class="bubble">Hi there, how's your day going?<div class="bubble-time">9:00 AM</div>
          </div>
        </div>
        <div class="chat-message eva">
          <div class="bubble">Busy but good! Working on some code. You?<div class="bubble-time">9:02 AM</div>
          </div>
        </div>
        <div class="chat-message user">
          <div class="bubble">Same here! Let's catch up later.<div class="bubble-time">9:05 AM</div>
          </div>
        </div>
      </div>

      <div class="container">
        <button class="speakSend" aria-label="Speak the text"
                onClick="speakText(); document.getElementById('audioPlayback').setAttribute('autoplay', true);"
                id="speakSend" title="Speak This">
        </button>
      </div>


  <!-- Settings Menu (initially hidden) -->
  <div class="settingsMenu" id="settingsMenu">
    <h3>Settings</h3>
    <label for="selEngine">Engine:</label>
    <select id="selEngine" onchange="ChangeLang(this)">
      <option value="standard">Standard</option>
      <option value="neural">Neural</option>
      <option value="generative">Generative</option>
      <option value="bark">Bark</option>
    </select>
    <br/><br/>

    <label for="selVoice">Voice:</label>
    <select id="selVoice" onchange="ChangeLang(this)">
      <option value="Salli">English</option>
      <option value="Ruth">English(gen)</option>
      <option value="Seoyeon">Korean</option>
      <option value="Mia">Spanish</option>
      <option value="Tatyana">Ukrainian</option>
    </select>
    <br/><br/>

    <label for="autoSpeak">Auto Speak:</label>
    <input type="checkbox" id="autoSpeak">
    <br/><br/>

    <label for="selModel">Model:</label>
    <select id="selModel" onchange="updateButton()">
      <option value="gpt-4o" title="gpt-4o">gpt-4o</option>
      <option value="o1" title="o1">o1</option>
      <option value="o1-preview" title="o1-preview">o1-preview</option>
      <option value="o1-mini" title="o1-mini">o1-mini</option>
      <option value="o3-mini" title="o3-mini">o3-mini</option>	    
      <option value="dall-e-3" title="Image Generation">dall-e-3</option>
      <option value="gemini" title="Google Gemini">gemini</option>
      <option value="lm-studio" title="lm-studio">lm-studio</option>
      <option value="gpt-4o-mini" title="gpt-4o-mini">gpt-4o-mini</option>
    </select>
    <br/><br/>

  <label for="selPers">Select Personality:</label>
    <select id="selPers" aria-label="Select personality" onchange="ChangeLang(this)"> 
      <option value="You are Eva, a knowledgeable AI assistant. Your goal is to provide accurate, and helpful responses to questions, while being honest and straightforward. You have access to provide updated real-time news, information and media. " title="Eva's Default Personality.">Default</option>
      <option value="Eva is a large language model. Browsing: enabled. Instructions: Answer factual questions concisely. You have access to updated real-time news and information. " title="Eva will answer concisely">Concise</option> 
      <option value="You are Eva. Your function is to generate human-like text based on the inputs given, and your goal is to assist users in generating informative, helpful and engaging responses to questions and requests. Please provide a detailed response with lists, where applicable. You have access to updated real-time news, information and media. " title="Eva will give detailed responses.">Advanced</option>   
      <option value="I want you to act as a linux terminal. I will type commands and you will reply with what the terminal should show. I want you to only reply with the terminal output inside one unique code block, and nothing else. do not write explanations. do not type commands unless I instruct you to do so. when i need to tell you something in english, i will do so by putting text inside curly brackets {like this}. my first command is pwd" title="Emulate a Linux Bash Shell">Linux Terminal</option>
    </select>
  </div>

      <p id="result"></p>
   </div>

    <audio id="audioPlayback" class="audio" controls aria-label="Audio playback">
      <source id="audioSource" type="audio/mp3" src="">
    </audio>

<!--    <p></p> -->
    
<div class="chat-input-container">
    <div id="txtMsg" contenteditable="true" rows="2" placeholder="Input Text" aria-label="Input text"></div>
      <label for="imgInput">&#128206;</label>
	<input type="file" id="imgInput" aria-label="Upload image" style="display:none;"> 

      <button type="button" onclick="sendData()" id="btnSend" aria-label="Send data">Send</button>
      <button onclick="startSpeechRecognition()" id="micButton" class="mic-button" aria-label="Start speech recognition"></button>
   <script>
      insertImage();
    </script>
    <div>
</div>

    </div>

    <script>
      // Capture CTRL + Enter Key
      shiftBreak();
    </script>

  <footer>
    <img id="eEgg" src="core/img/eEgg.gif" alt="Image" style="display:none;">
    <div id="idText"></div>
    <button id="settingsButton" style="margin: 1em;">Settings</button>
    <button onclick="printMaster()" aria-label="Print output">Print Output</button>
    <button id="clearMessagesBtn" onclick="clearMessages()" aria-label="Clear memory">Clear Memory</button>
  </footer> 

</body>
</html>