InstantScribe/index.html at main · cs-util-com/InstantScribe · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Audio Recorder</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="icon"
      href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='%23ff0000'/%3E%3C/svg%3E"
      type="image/svg+xml"
    />
    <!-- Add lamejs library -->
    <script src="https://cdn.jsdelivr.net/npm/lamejs@1.2.1/lame.min.js"></script>
    <!-- Added Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
  </head>

  <body class="font-mono m-0 p-2.5 bg-gray-900 text-gray-200">
    <div class="max-w-3xl mx-auto bg-gray-800 p-4 rounded-lg shadow-md">
      <div class="flex flex-wrap items-center gap-2.5 mb-4">
        <!-- Grouped input and save button in a non-wrapping flex container -->
        <div class="flex items-center gap-2.5">
          <input
            type="text"
            id="custom-filename"
            placeholder="File title..."
            class="p-1.5 text-base bg-gray-700 border border-gray-600 rounded text-gray-200"
          />
          <button
            id="stop"
            class="py-2 px-3 bg-blue-600 text-white border-none rounded cursor-pointer text-base hover:bg-blue-700"
          >
            Stop Recording
          </button>
        </div>
        <div class="flex items-center gap-1.5">
          <label for="language-select">Transcribe in </label>
          <select
            id="language-select"
            class="p-1.5 text-base bg-gray-700 border border-gray-600 rounded text-gray-200"
          >
            <option value="en-US">English (US)</option>
            <option value="en-GB">English (UK)</option>
            <option value="de-DE">German</option>
            <option value="fr-FR">French</option>
            <option value="es-ES">Spanish</option>
            <option value="it-IT">Italian</option>
            <option value="ja-JP">Japanese</option>
            <option value="zh-CN">Chinese (Simplified)</option>
          </select>
        </div>
      </div>

      <h3 class="my-2.5 text-lg text-white">Transcription:</h3>
      <div
        id="transcription-container"
        class="mt-4 p-2.5 border border-gray-600 rounded whitespace-pre-wrap font-mono text-sm bg-gray-700 text-gray-200"
      >
        <!-- The transcription element is contenteditable (editable by the user) -->
        <div id="transcription" contenteditable="true"></div>
      </div>

      <!-- Add high-quality transcript container -->
      <div id="high-quality-container" class="hidden mt-4">
        <h3 class="my-2.5 text-lg text-white">High-Quality Transcription:</h3>
        <div
          class="p-2.5 border border-green-600 rounded whitespace-pre-wrap font-mono text-sm bg-gray-700 text-gray-200"
        >
          <div id="high-quality-transcription" contenteditable="true"></div>
        </div>
      </div>

      <!-- Moved summarize section to after transcription -->
      <div class="mt-5 border-t border-gray-600 pt-4">
        <div class="flex flex-wrap items-center gap-2.5 mb-4">
          <button
            id="whisper-transcribe"
            class="w-full py-2 px-3 bg-green-600 text-white border-none rounded cursor-pointer text-base hover:bg-green-700 relative"
          >
            Generate High-Quality Transcript from recorded audio
            <!-- Add drag-drop instruction -->
            <span class="text-xs block opacity-70"
              >or drop audio file here</span
            >
          </button>
          <button
            id="summarize"
            class="w-full py-2 px-3 bg-blue-600 text-white border-none rounded cursor-pointer text-base hover:bg-blue-700 hidden"
          >
            Summarize Text
          </button>
        </div>

        <!-- API Key Section -->
        <div
          class="my-2.5 p-2.5 border border-dashed border-gray-500 rounded bg-gray-800"
        >
          <div class="api-key-toggle cursor-pointer text-blue-500 select-none">
            ⚙️ OpenAI API Settings (click to expand)
          </div>
          <div class="api-key-input hidden mt-2">
            <input
              type="password"
              id="api-key"
              placeholder="Enter your OpenAI API key (sk-...)"
              class="w-[calc(100%-125px)] mr-2.5 p-1.5 text-base bg-gray-700 border border-gray-600 rounded text-gray-200"
            />
            <button
              id="save-api-key"
              class="py-2 px-3 bg-blue-600 text-white border-none rounded cursor-pointer text-base hover:bg-blue-700"
            >
              Save
            </button>
            <!-- Helpful link for users who don't know where to get an OpenAI API key -->
            <div class="text-sm text-gray-400 mt-2">
              Don't have an OpenAI API key?
              <a
                href="https://platform.openai.com/account/api-keys"
                target="_blank"
                rel="noopener noreferrer"
                class="text-blue-400 underline"
                >Get one from OpenAI</a
              >.
            </div>
          </div>
        </div>
      </div>

      <!-- Summary Section -->
      <h3 id="summary-heading" class="hidden my-2.5 text-lg text-white">
        Summary:
      </h3>
      <div
        id="summary-container"
        class="hidden mt-4 p-2.5 border border-gray-600 rounded bg-gray-700"
      >
        <div
          id="summary-content"
          class="whitespace-pre-wrap font-mono text-sm text-green-300"
          contenteditable="true"
        ></div>
      </div>

      <!-- Download AI texts button -->
      <div id="download-ai-texts-container" class="hidden mt-4">
        <button
          id="download-ai-texts"
          class="w-full py-2 px-3 bg-purple-600 text-white border-none rounded cursor-pointer text-base hover:bg-purple-700"
        >
          Download AI Texts
        </button>
      </div>
    </div>

    <script>
      // Local ORT and Silero VAD defaults for development.
      // These can be overridden by setting the same window properties before this page loads.
      window.ORT_WASM_PATH = window.ORT_WASM_PATH || '/ort/';
      window.SILERO_VAD_MODEL =
        window.SILERO_VAD_MODEL || '/model/silero_vad.onnx';
    </script>

    <script type="module" src="./src/main.js"></script>
  </body>
</html>