add simple site

kp-forks · May 20, 2022 · 9fde3d8 · 9fde3d8
1 parent ddc333f
commit 9fde3d8
Show file tree

Hide file tree

Showing 3 changed files with 183 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -3,6 +3,15 @@ Videogrep
 
 Videogrep is a command line tool that searches through dialog in video files and makes supercuts based on what it finds. It will recognize `.srt` or `.vtt` subtitle tracks, or transcriptions that can be generated with vosk, pocketsphinx, and other tools.
 
+#### Examples
+
+* [All the instances of the phrase "time" in the movie "In Time"](https://www.youtube.com/watch?v=PQMzOUeprlk)
+* [All the one to two second silences in "Total Recall"](https://www.youtube.com/watch?v=qEtEbXVbYJQ)
+* [The President's former press secretary telling us what he can tell us](https://www.youtube.com/watch?v=D7pymdCU5NQ)
+* [The Meta Experience](https://www.youtube.com/watch?v=nGHbOckpifw)
+
+----
+
 ## Installation
 
 Videogrep is compatible with Python versions 3.6 to 3.10.
@@ -30,6 +39,8 @@ pip install vosk
 # pip install videogrep[full]
 ```
 
+Note: the previous version of videogrep supported pocketsphinx for speech-to-text. Vosk seems *much* better so I've added support for it and will likely be phasing out support for pocketsphinx.
+
 ## Usage
 
 The most basic use:
@@ -155,7 +166,3 @@ The videogrep module accepts the same parameters as the command line script. To
 
 ----
 
-## Samples 
-* [All the instances of the phrase "time" in the movie "In Time"](https://www.youtube.com/watch?v=PQMzOUeprlk)
-* [All the one to two second silences in "Total Recall"](https://www.youtube.com/watch?v=qEtEbXVbYJQ)
-* [The President's former press secretary telling us what he can tell us](https://www.youtube.com/watch?v=D7pymdCU5NQ)
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Videogrep</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="container">
+      <h1>Videogrep</h1>
+
+      <p>
+        Videogrep is a command line tool written by <a href="https://lav.io">Sam Lavigne</a> that
+        searches through dialog in video files and makes "supercuts" based on what it finds. It will
+        recognize .srt or .vtt subtitle tracks, or transcriptions that can be generated with vosk.
+      </p>
+
+      <p>
+        For installation, usage instructions, and code, see:
+        <a href="https://github.com/antiboredom/videogrep"
+          >https://github.com/antiboredom/videogrep</a
+        >.
+      </p>
+
+      <h2>Gallery</h2>
+
+      <p>
+        Here are a few videos I've made using Videogrep. For an infinite stream, see
+        <a href="https://twitter.com/CSPANFive">CSPAN-5</a>.
+      </p>
+
+      <div class="gallery">
+        <div class="item">
+          <div class="embed">
+            <iframe
+              src="https://www.youtube.com/embed/nGHbOckpifw"
+              frameborder="0"
+              allowfullscreen
+            ></iframe>
+          </div>
+          <p class="caption">The Meta Experience</p>
+        </div>
+
+        <div class="item">
+          <div class="embed">
+            <iframe
+              src="https://www.youtube.com/embed/lgFnF77AyeI"
+              frameborder="0"
+              allowfullscreen
+            ></iframe>
+          </div>
+          <p class="caption">Donald Trump saying his own name for over 4 minutes (sorry)</p>
+        </div>
+
+        <div class="item">
+          <div class="embed">
+            <iframe
+              src="https://www.youtube.com/embed/PQMzOUeprlk"
+              frameborder="0"
+              allowfullscreen
+            ></iframe>
+          </div>
+          <p class="caption">All the instances of the phrase "time" in the movie "In Time"</p>
+        </div>
+
+        <div class="item">
+          <div class="embed">
+            <iframe
+              src="https://www.youtube.com/embed/qEtEbXVbYJQ"
+              frameborder="0"
+              allowfullscreen
+            ></iframe>
+          </div>
+          <p class="caption">Silences in "Total Recall"</p>
+        </div>
+
+        <div class="item">
+          <div class="embed">
+            <iframe
+              src="https://www.youtube.com/embed/D7pymdCU5NQ"
+              frameborder="0"
+              allowfullscreen
+            ></iframe>
+          </div>
+          <p class="caption">A presidential press secretary telling us what he can tell us</p>
+        </div>
+
+        <div class="item">
+          <div class="embed">
+            <iframe
+              src="https://www.youtube.com/embed/DAR0RBbua34"
+              frameborder="0"
+              allowfullscreen
+            ></iframe>
+          </div>
+          <p class="caption">Gerund determiner adjective noun combos in ted talks</p>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/docs/style.css b/docs/style.css
@@ -0,0 +1,70 @@
+body {
+  font: 18px "Times New Roman", "Times", serif;
+  margin: 0px;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  font-weight: normal;
+}
+
+a {
+  color: red;
+}
+
+.container {
+  max-width: 1100px;
+  margin: auto;
+  padding: 20px;
+}
+
+div.code {
+  background-color: #eee;
+  padding: 10px;
+}
+code {
+  font-size: 13px;
+  background-color: #eee;
+}
+
+h4 code {
+  border-bottom: 1px solid #ccc;
+  padding: 3px;
+  font-weight: bold;
+}
+
+.gallery {
+  display: grid;
+  grid-template-columns: 2fr 2fr;
+  grid-column-gap: 20px;
+}
+
+.embed {
+  position: relative;
+  padding-bottom: 56.25%;
+  height: 0;
+  overflow: hidden;
+  max-width: 100%;
+}
+
+.embed iframe,
+.embed object,
+.embed embed {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.caption {
+  font-size: 0.8em;
+  margin: 0;
+  margin-top: 5px;
+  text-align: center;
+}
+.item {
+  margin: 10px 0px;
+}