Experimental release, stable build (#1)

* Hello world!

* Fill in prePrompt and postPrompt

* Add logging

* Add error icon

* Add configurable settings for interactive mode

* Stable, all experimental features

* Update comments, tab button color

* Adjust defaults

* Add README

* Update README.md

* Update README.md

* add resize observer and bind it to html video element.

Co-authored-by: a96lex <[email protected]>

README.md

@@ -0,0 +1,102 @@
+# ![icon-1](https://user-images.githubusercontent.com/64603095/206002183-b4b6a676-9fe2-4bf0-8d43-fe23082b2d63.png) Owlie - smart Youtube assistant
+
+
+Owlie is a browser extension that fetches English transcription of a Youtube video and sends it to GPT3 with user-specified parameters. It is able to generate video summaries and descriptive works in general: comments, counter-arguments, poetry etc... 
+
+
+This is an experimental build for testing purposes.
+
+## How to install
+
+### Firefox
+
+1. Clone this repo
+2. In the browser go to this address: `about:debugging#/runtime/this-firefox`
+3. Click `Load Temporary Add-on...`
+4. Select `manifest.json` in the repo's directory
+
+## How to use
+
+There are two kinds of GPT3 requests here - summary and interactive. They have separate configurations customizable in the main popup - you'll start with default values that I've found to work well.
+
+![image](https://user-images.githubusercontent.com/64603095/205995876-732f7c34-b5be-4819-8604-15d547942c4b.png)
+
+Summary request: 
+
+`<prePrompt> + <transcript> + <postPrompt> (e.g. "Summarize the key points of the above:")`
+
+Interactive request: 
+
+`<prePrompt> + <transcript> + <postPrompt>(e.g. "Based on the above answer the question:") + <interactiveFieldValue>`
+
+When visiting any Youtube video, you should see the extension's icon in the bottom panel of the video player. Click it to send the summary request. If a summary is generated, clicking it again hides the overlay (use it to re-adjust the overlay after changing the proportions of the video player).
+
+Once summary is generated, you can send interactive requests by inserting text in the interactive field and clicking enter.
+
+Click the little button in the bottom left to resend summary request.
+
+### Note!
+
+You can adjust the models' settings in the extension's pop-up during the session, in between the requests (without refreshing the page etc.) - please make use of it to have some fun with experimenting with the parameters.
+
+## Demo
+
+
+
+![video](https://user-images.githubusercontent.com/64603095/206001174-c57a5418-e0b9-4a22-b9c1-4727ea259a94.mov)
+
+
+
+## Qucik guide to GPT3
+
+[API Reference](https://beta.openai.com/docs/api-reference/completions/create)
+
+Available models are listed gradually:
+
+`Ada` - fastest, dumbest, cheapest
+
+[...]
+
+`Davinci-003` - slowest, smartest, most expensive
+
+### Parameters:
+
+`Max Tokens` - maximum amount of tokens in the output. You can think of tokens as pieces of words, where 100 tokens is about 75 words.
+
+`Temperature` - The lower the value, the more strict it will be in sticking to the prompt, which I've found optimal for summary purposes. Higher values are likely to produce weird outputs.
+
+`Presence Penalty` - positive values penalize new tokens based on whether they appear in the text so far, increasing the model's likelihood to talk about new topics. The negative rewards, increasing the likelihood of sticking to one topic.
+
+`Frequency Penalty` - positive values penalize new tokens based on their existing frequency in the text so far, decreasing the model's likelihood to repeat the same line verbatim. Useful in mitigating the likelihood of the model getting stuck in a loop repeating itself.
+
+`Prompts` - the upper prompt is inserted before the transcript, the bottom prompt is inserted after the transcript.
+
+## Known issues, things to improve
+
+### GPT3's context limit of 4097 tokens
+
+This limit makes it impossible to summarize videos that contain more than ~3000 words (from my observations, videos longer than ~15-20 minutes).
+
+A workaround I have in mind is splitting the transcript, generating multiple summaries from the splits and then summarising the summaries at the end.
+
+### Multilingual support
+
+Currently Owlie fetches only English subtitles. It could look for other available subtitles, however if these are automatically generated by Youtube + the fact that GPT3 falls off in non-english languages, it'd probably produce rather miserable results. Worth a try though.
+
+### UI can be better
+
+- the displayed text could be more readable
+- the overlay windows could be reactive to the video player's changes 
+- doesn't seem obvious to me which tab is the active one :P
+- loading indicators inside the overlay? 
+- a general revamp with a neat, "populistic" design?
+
+I'm happy to hear any suggestions.
+
+### General code clarity
+
+This is my first full project using html/css/js stack, I don't know any standards (just using linter) and the just code seems messy. Definitely needs a refactor, I'm happy to hear suggestions or see PRs :)
+
+### Bugs
+- occasional failure to overwrite settings after closing the popup (retrying helps)
+- occasionally components are positioned in places they're not supposed to

manifest.json

@@ -0,0 +1,43 @@
+{
+
+  "manifest_version": 2,
+  "name": "myext",
+  "version": "1.0",
+
+  "content_scripts": [
+    {
+      "matches": ["https://www.youtube.com/watch?v=*"],
+      "js": ["scripts/logger.js", "scripts/openai.js", "scripts/transcript.js", "scripts/ytAction.js"]
+    }
+  ],
+
+  "web_accessible_resources": [
+    "icons/*",
+    "scripts/*"
+  ],
+
+  "description": "Summarizes the content of youtube video using available transcription and NLP model.",
+
+  "icons": {
+    "48": "icons/icon-1.png"
+  },
+
+  "permissions": [
+    "webRequest",
+    "storage",
+    "https://www.youtube.com/*",
+    "https://api.openai.com/v1/*"
+  ],
+
+  "browser_action": {
+    "default_icon": "icons/icon-1.png",
+    "default_popup": "popup/popup.html"
+  },
+
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "[email protected]"
+    }
+  }
+}
+

popup/popup.css

@@ -0,0 +1,120 @@
+body {
+  width: 350px;
+  height: 400px;
+  background-color: #2b2925d5;
+  border-radius: 5px;
+}
+
+.settingsBox {
+  width: 340px;
+  height: 300px;
+  border: 1px solid #000;
+  border-color: #000000d5;
+  border-radius: 2px;
+  background-color: #716e68d5;
+}
+
+.tablink {
+  float: left;
+  width: 50%;
+  font-weight: bold;
+  border: none;
+  border-top-left-radius: 5px;
+  background: rgba(255, 255, 255, 0.629);
+  color: #665;
+}
+.tablink.active {
+  background: rgba(255, 136, 136, 0.201);
+  color: #fff;
+}
+
+.parameterName {
+  font: 12px/22px Georgia, Garamond, Serif;
+  color: rgba(255, 255, 255, 0.935);
+}
+
+.parameterValueDisplay {
+  font: 12px/22px Georgia, Garamond, Serif;
+  color: rgba(0, 0, 0, 0.935);
+  width: 25px;
+}
+
+.columnContainer {
+  width: 340px;
+  position: relative;
+  right: -10px;
+}
+
+.column {
+  float: left;
+  width: 33%;
+}
+
+.setting {
+  scale: 0.8;
+  height: 17px;
+}
+
+.shortSlider {
+  width: 70%;
+}
+
+.promptSection {
+  position: absolute;
+  right: 40px;
+  bottom: 90px;
+}
+
+.promptInput {
+  width: 300px;
+}
+
+.keyInput {
+  width: 300px;
+  position: absolute;
+  bottom: 10px;
+  left: 15px;
+  border: 2px;
+  border-color: black;
+  border-radius: 2px;
+}
+
+.owlie {
+  scale: 0.8;
+  position: relative;
+  left: 5px;
+}
+
+a{
+  text-decoration: none;
+}
+.showKey {
+  padding: 1px 2px;
+  position: absolute;
+  right: 15px;
+  bottom: 10px;
+  box-shadow: 0 2px 2px 0 #131b13;
+}
+
+.showKey:active {
+  transform: translateY(4px);
+}
+
+.txt {
+  font-size: 15px;
+  font: 12px/22px Georgia, Garamond, Serif;
+  color: rgba(216, 201, 63, 0.935);
+  position: relative;
+  left: 10px;
+  top: -30px;
+}
+
+#blockDiv {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 999;
+}
+

popup/popup.html

@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="popup.css" />
+  </head>
+  <body>
+    <img class="owlie" src="../icons/icon-1.png" />
+    <text class="txt">Hey, guy! Are you spoko?</text>
+
+    <div id="settingsBox" class="settingsBox">
+      <div id="summarySettings" class="settingsTab">
+        <div class="columnContainer">
+          <div class="column" id="parameterNames">
+            <p class="parameterName">Model</p>
+            <p class="parameterName">Max Tokens</p>
+            <p class="parameterName">Temperature</p>
+            <p class="parameterName">Presence Penalty</p>
+            <p class="parameterName">Frequency Penalty</p>
+          </div>
+          <div class="column" id="parameterValues">
+            <p class="setting" id="summarySettings-model">
+              <select name="model" id="model">
+                <option value="text-ada-001">Ada</option>
+                <option value="text-babbage-001">Babbage</option>
+                <option value="text-curie-001">Curie</option>
+                <option value="text-davinci-002">Davinci</option>
+                <option selected value="text-davinci-003">Davinci-003</option>
+              </select>
+            </p>
+            <p class="setting" id="summarySettings-maxTokens">
+              <input class="shortSlider" type="range" id="maxTokens" name="maxTokens" min="25" max="250" value="150" step="5">
+            </p>
+            <p class="setting" id="summarySettings-temperature">
+              <input class="shortSlider" type="range" id="temperature" name="temperature" min="0" max="1" value="0" step="0.05">
+            </p>
+            <p class="setting" id="summarySettings-presencePenalty">
+              <input class="shortSlider" type="range" id="presencePenalty" name="presencePenalty" min="-2" max="2" value="0.8" step="0.1">
+            </p>
+            <p class="setting" id="summarySettings-frequencyPenalty">
+              <input class="shortSlider" type="range" id="frequencyPenalty" name="frequencyPenalty" min="-2" max="2" value="1.5" step="0.1">
+            </p>
+          </div>
+          <div class="column" id="parameterValueDisplays">
+            <p class="parameterValueDisplay">‎ ‎</p>
+            <p class="parameterValueDisplay" id="maxTokensDisplayedValue">100</p>
+            <p class="parameterValueDisplay" id="temperatureDisplayedValue">0.1</p>
+            <p class="parameterValueDisplay" id="presencePenaltyDisplayedValue">-0.5</p>
+            <p class="parameterValueDisplay" id="frequencyPenaltyDisplayedValue">1</p>
+          </div>
+        </div>
+        <div class="promptSection">
+          <p class="parameterName">Prompts:</p>
+          <div class="setting" id="summarySettings-prePrompt">
+            <input type="text" placeholder="Before transcript" class="promptInput" id="prePrompt"></input>
+          </div>
+          <div class="setting" id="summarySettings-postPrompt">
+            <input type="text" placeholder="After transcript" class="promptInput" id="postPrompt" value="Summarize the key points mentioned above:"></input>
+          </div>
+        </div>
+      </div>
+
+      <div id="interactiveSettings" class="settingsTab">
+        <div class="columnContainer">
+          <div class="column" id="parameterNames">
+            <p class="parameterName">Model</p>
+            <p class="parameterName">Max Tokens</p>
+            <p class="parameterName">Temperature</p>
+            <p class="parameterName">Presence Penalty</p>
+            <p class="parameterName">Frequency Penalty</p>
+          </div>
+          <div class="column" id="parameterValues">
+            <p class="setting" id="interactiveSettings-model">
+              <select name="model" id="Imodel">
+                <option value="text-ada-001">Ada</option>
+                <option value="text-babbage-001">Babbage</option>
+                <option value="text-curie-001">Curie</option>
+                <option selected value="text-davinci-002">Davinci</option>
+                <option value="text-davinci-003">Davinci-003</option>
+              </select>
+            </p>
+            <p class="setting" id="interactiveSettings-maxTokens">
+              <input class="shortSlider" type="range" id="ImaxTokens" name="maxTokens" min="25" max="250" value="85" step="5">
+            </p>
+            <p class="setting" id="interactiveSettings-temperature">
+              <input class="shortSlider" type="range" id="Itemperature" name="temperature" min="0" max="1" value="0.1" step="0.05">
+            </p>
+            <p class="setting" id="interactiveSettings-presencePenalty">
+              <input class="shortSlider" type="range" id="IpresencePenalty" name="presencePenalty" min="-2" max="2" value="-0.5" step="0.1">
+            </p>
+            <p class="setting" id="interactiveSettings-frequencyPenalty">
+              <input class="shortSlider" type="range" id="IfrequencyPenalty" name="frequencyPenalty" min="-2" max="2" value="1" step="0.1">
+            </p>
+          </div>
+          <div class="column" id="parameterValueDisplays">
+            <p class="parameterValueDisplay">‎ ‎</p>
+            <p class="parameterValueDisplay" id="ImaxTokensDisplayedValue">100</p>
+            <p class="parameterValueDisplay" id="ItemperatureDisplayedValue">0.1</p>
+            <p class="parameterValueDisplay" id="IpresencePenaltyDisplayedValue">-0.5</p>
+            <p class="parameterValueDisplay" id="IfrequencyPenaltyDisplayedValue">1</p>
+          </div>
+        </div>
+        <div class="promptSection">
+          <p class="parameterName">Prompts:</p>
+          <div class="setting" id="interactiveSettings-prePrompt">
+            <input type="text" placeholder="Before transcript" class="promptInput" id="IprePrompt"></input>
+          </div>
+          <div class="setting" id="interactiveSettings-postPrompt">
+            <input type="text" placeholder="After transcript" class="promptInput" id="IpostPrompt" value="Based on the above answer the question:"></input>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <input type="input" class="keyInput" id="openAiApiKey" name="OpenAI API key" placeholder="OpenAI API key"></input>
+    <a href="#" id="showKey" class="showKey">🔓</a>
+    <script src="../scripts/logger.js"></script><script src="popup.js"></script>
+  </body>
+</html>