<!DOCTYPE html>
<html
  lang="en"
  class="w-full bg-gradient-to-br from-indigo-50 via-white to-cyan-100 text-white font-sans"
>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>VoicePointGPT</title>
    <link rel="stylesheet" href="/static/main.css" />
    <!-- Scripts -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script type="text/javascript" src="/static/SimpleToast.js"></script>
    <link rel="icon" href="/static/favicon.ico" />

    <!-- DragDrop UI -->
    <script
      src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"
      defer
    ></script>
    <script src="https://unpkg.com/create-file-list"></script>
  </head>
  <body>
    <!-- Navigation Header -->
    <div class="top_nav">
      <nav class="bg-slate-100 bg-opacity-30">
        <div
          class="top-0 left-0 flex flex-row justify-between w-screen p-5 md:pr-10"
        >
          <a href="/" class="flex">
            <span
              class="self-center text-xl font-bold whitespace-nowrap hover:text-violet-300 md:hover:bg-transparent md:p-0 text-black"
              >VoicePointGPT</span
            >
          </a>

          <div class="items-center justify-between md:flex">
            <ul
              class="flex flex-row pl-4 pr-0 py-4 md:p-0 font-bold md:flex-row md:space-x-8 md:mt-0 md:border-0 ml-auto"
            >
              <li>
                <a
                  href="/about"
                  class="block py-2 pl-3 pr-4 hover:text-violet-300 md:hover:bg-transparent md:p-0 text-black"
                  >About</a
                >
              </li>
              <li>
                <a
                  href="https://github.com/nitroz3us/"
                  target="_blank"
                  class="block py-2 pl-3 pr-4 text-black rounded hover:text-violet-300 md:hover:bg-transparent md:p-0"
                  >GitHub</a
                >
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </div>

    <!-- Main Body -->
    <div
      class="main-body fade-in-down mt-20 m-10 max-w-screen-2xl relative mx-auto"
    >
      <div class="flex flex-col justify-center items-center">
        <h1
          class="w-full font-bold text-black text-4xl md:text-7xl drop-shadow-sm text-center font-display bg-gradient-to-r from-black to-stone-500 bg-clip-text text-transparent"
        >
          Effortless narration
        </h1>
        <span
          href=""
          target="_blank"
          class="bg-gradient-to-r from-blue-500 to-indigo-500 bg-clip-text text-transparent text-center font-bold text-4xl md:text-7xl"
        >
          with VoicePointGPT
        </span>
        <div class="md:text-xl text-center text-gray-500 mt-6">
          Just upload your PDF and automatically
        </div>
        <div class="md:text-xl text-center text-gray-500">
          get an AI narration of your presentation
        </div>
      </div>
      <div class="my-10 w-full place-items-center px-5 xl:px-0">
        <!-- add form here later -->

        <div class="max-w-3xl mx-auto">
          <div class="mb-4 flex justify-end">
            <button
              class="rounded-full border border-black bg-black p-1.5 px-4 text-sm text-white transition-all hover:bg-white hover:text-black"
              onclick="toggleModal()"
            >
              Add OpenAI API Key
            </button>
          </div>
          <div
            class="relative mb-10 flex flex-col rounded-xl border border-gray-200 bg-white p-6 shadow-md"
          >
            <div class="text-md font-bold text-gray-900">
              Upload your PowerPoint slides in PDF & check it out!
            </div>
            <!-- add form here later -->
            <form
              action="/"
              method="post"
              enctype="multipart/form-data"
              id="generateForm"
            >
              <div id="dragDropUI" class="rounded mb-4 mt-4">
                <div
                  x-data="dataFileDnD()"
                  id="dragDropContainer"
                  class="relative flex flex-col p-2 text-gray-400 border-2 border-gray-400 rounded-lg"
                >
                  <div
                    x-ref="dnd"
                    class="relative flex flex-col text-gray-400 border border-gray-700 border-dashed rounded p-7"
                  >
                    <input
                      accept=".pdf"
                      type="file"
                      name="file_upload"
                      id="dragDropInput"
                      class="absolute inset-0 z-50 w-full h-full p-0 m-5 outline-none opacity-0"
                      @change="addFiles($event)"
                      @dragover="$refs.dnd.classList.add('border-blue-400'); $refs.dnd.classList.add('ring-4'); $refs.dnd.classList.add('ring-inset');"
                      @dragleave="$refs.dnd.classList.remove('border-blue-400'); $refs.dnd.classList.remove('ring-4'); $refs.dnd.classList.remove('ring-inset');"
                      @drop="$refs.dnd.classList.remove('border-blue-400'); $refs.dnd.classList.remove('ring-4'); $refs.dnd.classList.remove('ring-inset');"
                      title=""
                      required
                      disabled
                    />

                    <div
                      class="flex flex-col items-center justify-center py-10 text-center"
                    >
                      <svg
                        class="w-6 h-6 mr-1 text-current-50"
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                      >
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          stroke-width="2"
                          d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
                        />
                      </svg>
                      <p class="m-0">
                        Drag your PDF file here or click in this area.
                      </p>
                    </div>
                  </div>

                  <template x-if="files.length > 0">
                    <div
                      class="grid grid-cols-2 gap-4 mt-4 md:grid-cols-6"
                      @drop.prevent="drop($event)"
                      @dragover.prevent="$event.dataTransfer.dropEffect = 'move'"
                    >
                      <template
                        x-for="(_, index) in Array.from({ length: files.length })"
                      >
                        <div
                          class="relative flex flex-col items-center overflow-hidden text-center bg-gray-300 border rounded cursor-move select-none"
                          style="padding-top: 100%"
                          @dragstart="dragstart($event)"
                          @dragend="fileDragging = null"
                          :class="{'border-blue-600': fileDragging == index}"
                          draggable="true"
                          :data-index="index"
                        >
                          <button
                            class="absolute top-0 right-0 z-50 p-1 bg-white rounded-bl focus:outline-none"
                            type="button"
                            @click="remove(index)"
                          >
                            <svg
                              class="w-4 h-4 text-gray-700"
                              xmlns="http://www.w3.org/2000/svg"
                              fill="none"
                              viewBox="0 0 24 24"
                              stroke="currentColor"
                            >
                              <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
                              />
                            </svg>
                          </button>
                          <template
                            x-if="files[index].type.includes('application/pdf')"
                          >
                            <svg
                              class="absolute w-12 h-12 text-gray-400 transform top-1/2 -translate-y-2/3"
                              xmlns="http://www.w3.org/2000/svg"
                              fill="none"
                              viewBox="0 0 24 24"
                              stroke="currentColor"
                            >
                              <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
                              />
                            </svg>
                          </template>
                          <div
                            class="absolute bottom-0 left-0 right-0 flex flex-col p-2 text-xs bg-white bg-opacity-50"
                          >
                            <span
                              class="w-full font-bold text-gray-900 truncate"
                              x-text="files[index].name"
                              >Loading</span
                            >
                            <span
                              class="text-xs text-gray-900"
                              x-text="humanFileSize(files[index].size)"
                              >...</span
                            >
                          </div>

                          <div
                            class="absolute inset-0 z-40 transition-colors duration-300"
                            @dragenter="dragenter($event)"
                            @dragleave="fileDropping = null"
                            :class="{'bg-blue-200 bg-opacity-80': fileDropping == index && fileDragging != index}"
                          ></div>
                        </div>
                      </template>
                    </div>
                  </template>
                </div>
              </div>
              <div class="flex flex-row -mx-3 mb-2 mt-2">
                <div class="w-full px-3 mb-6 md:mb-0">
                  <label
                    class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
                    for="voiceChoice"
                  >
                    Voice
                  </label>

                  <div class="relative">
                    <select
                      class="block appearance-none w-full border border-gray-300 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500 shadow-sm"
                      id="voiceChoice"
                      name="voiceChoice"
                      disabled
                    >
                      <option>alloy</option>
                      <option>echo</option>
                      <option>fable</option>
                      <option>onyx</option>
                      <option>nova</option>
                      <option>shimmer</option>
                    </select>
                    <div
                      class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"
                    >
                      <svg
                        class="fill-current h-4 w-4"
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 20 20"
                      >
                        <path
                          d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
                        />
                      </svg>
                    </div>
                  </div>
                </div>
                <div class="w-full px-3 mb-6 md:mb-0">
                  <label
                    class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
                    for="modelChoice"
                  >
                    Model
                  </label>
                  <div class="relative">
                    <select
                      class="block appearance-none w-full border border-gray-300 text-gray-700 py-3 px-4 pr-8 rounded shadow-sm leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
                      id="modelChoice"
                      name="modelChoice"
                      disabled
                    >
                      <option>tts-1</option>
                      <option>tts-1-hd</option>
                    </select>
                    <div
                      class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"
                    >
                      <svg
                        class="fill-current h-4 w-4"
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 20 20"
                      >
                        <path
                          d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
                        />
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
              <div class="mt-8">
                <label
                  class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
                  for="scriptText"
                >
                  Generated Script
                </label>
                <div
                  class="markdown editable mt-1 mb-2 block w-full rounded-md border border-gray-400 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 p-4 text-black"
                  contenteditable="false"
                  id="scriptText"
                  rows="8"
                  onfocus="handleFocus()"
                  onblur="handleBlur()"
                >
                  {{result}}
                </div>
                <div class="text-xs text-gray-500 mt-2">
                  <label>Total Words: <span id="totalWords">0</span></label
                  ><span style="margin: 0 10px">|</span
                  ><label
                    >Estimated Presentation Time:
                    <span id="totalMinutes">0</span> minutes
                    <span id="totalSeconds">0</span> seconds
                  </label>
                </div>
              </div>
              <div class="text-black">
                <div class="flex mt-4 hidden" id="audioDiv">
                  <audio controls></audio>
                </div>
                <div class="flex flex-row gap-4">
                  <button
                    type="submit"
                    class="submit text-white font-medium bg-black mt-4 rounded-lg text-base px-5 py-2.5 text-center w-full"
                    id="submitBtn"
                    onclick="generateScript()"
                    disabled
                  >
                    Generate Script
                  </button>
                  <button
                    type="button"
                    class="text-white font-medium bg-black mt-4 rounded-lg text-base px-5 py-2.5 text-center w-full hidden"
                    id="narrateBtn"
                    onclick="generateSpeech()"
                  >
                    Generate Text-to-Speech
                  </button>

                  <button
                    disabled
                    type="button"
                    id="loadingAudioSpinner"
                    class="text-white font-medium bg-black mt-4 rounded-lg text-base px-5 py-2.5 text-center w-full cursor-no-drop hidden"
                  >
                    <div
                      class="inline-block h-5 w-5 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.3em] motion-reduce:animate-[spin_1.5s_linear_infinite]"
                      role="status"
                    ></div>
                    Synthesizing Audio...
                  </button>
                </div>

                <button
                  disabled
                  type="button"
                  id="loadingSpinner"
                  class="text-white font-medium bg-black mt-4 rounded-lg text-base px-5 py-2.5 text-center w-full cursor-no-drop hidden"
                >
                  <div
                    class="inline-block h-5 w-5 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.3em] motion-reduce:animate-[spin_1.5s_linear_infinite]"
                    role="status"
                  ></div>
                  Generating Script...
                </button>
              </div>
              <div
                id="modal-backdrop"
                class="fixed inset-0 z-50 bg-gray-100 bg-opacity-50 backdrop-blur-md"
                data-aria-hidden="true"
                aria-hidden="true"
                style="pointer-events: auto; display: none"
                onclick="closeModal()"
              ></div>
              <!-- form to get the openai key-->
              <div
                role="dialog"
                id="modal"
                class="fixed inset-0 z-50 m-auto max-h-fit w-full max-w-md overflow-hidden border border-gray-200 bg-white p-0 shadow-lg md:rounded-2xl fade-in-down"
                style="pointer-events: auto; display: none"
              >
                <div
                  class="w-full overflow-hidden shadow-xl md:max-w-md md:rounded-2xl md:border md:border-gray-200"
                >
                  <div
                    class="flex flex-col items-center justify-center space-y-3 border-b border-gray-200 bg-white px-4 py-6 pt-8 text-center md:px-16"
                  >
                    <h3 class="font-display text-2xl font-bold text-black">
                      Set OpenAI API Key
                    </h3>
                    <p class="text-sm text-gray-500">
                      Enter your OpenAI API key to use the app.
                    </p>
                  </div>
                  <div
                    class="flex flex-col space-y-4 bg-gray-50 px-4 py-8 md:px-16"
                  >
                    <input
                      placeholder="OpenAI API Key"
                      class="w-full rounded-md border px-4 py-2 text-base text-gray-700"
                      type="password"
                      name="apiKey"
                      id="apiKeyInput"
                      maxlength="51"
                      required
                    />
                    <div class="flex flex-row gap-4">
                      <button
                        class="w-full rounded-md bg-black px-4 py-2 text-sm text-white shadow-sm hover:bg-opacity-90 focus:outline-none focus:ring-2 focus:ring-black focus:ring-opacity-50"
                        type="button"
                        id="saveBtn"
                        onclick="saveButton()"
                      >
                        Save
                      </button>
                      <button
                        class="w-full rounded-md bg-black px-4 py-2 text-sm text-white shadow-sm hover:bg-opacity-90 focus:outline-none focus:ring-2 focus:ring-black focus:ring-opacity-50 hidden"
                        type="button"
                        id="loadingSpinnerSave"
                      >
                        <div
                          class="inline-block h-5 w-5 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.3em] motion-reduce:animate-[spin_1.5s_linear_infinite]"
                          role="status"
                        ></div>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </form>
            <!-- end form here -->
          </div>
        </div>
      </div>
      <div class="flex flex-col justify-center">
        <div class="text-center text-sm text-black">
          <p>Ensure files are less than 500MB.</p>
          <p>Files are deleted after upload.</p>
        </div>
      </div>
    </div>
    <script type="text/javascript" src="/static/main.js"></script>
    <script>
      toastInit();
    </script>
  </body>
</html>
