feat: reduce execution queue length to 5 from 25

src/huesoporro/libs/db.py

@@ -266,7 +266,7 @@ class Database:
                     );
                     """)
                     self.add_execute_queue(
-                        f'INSERT INTO MarkovGrammar{first_char}{second_char} SELECT * FROM MarkovGrammar{first_char} WHERE word2 LIKE "{second_char}%";',  # noqa: S608
+                        f'INSERT INTO MarkovGrammar{first_char}{second_char} SELECT * FROM MarkovGrammar{first_char} WHERE word2 LIKE "{second_char}%";',
                     )
                     self.add_execute_queue(
                         f'DELETE FROM MarkovGrammar{first_char} WHERE word2 LIKE "{second_char}%";',  # noqa: S608
@@ -597,9 +597,14 @@ class Database:
             self._execute_queue.append((sql, values))
         else:
             self._execute_queue.append((sql,))
-        # Commit these executes if there are more than 25 queries
-        if auto_commit and len(self._execute_queue) > 25:  # noqa: PLR2004
+        # Commit these executes if there are more than 5 queries
+        if auto_commit and len(self._execute_queue) > 4:  # noqa: PLR2004
+            logger.info(f"Queue length limit reached, executing query {sql}")
             self.execute_commit()
+        else:
+            logger.info(
+                f"Not enough queries in queue to commit: {len(self._execute_queue)}/5"
+            )
 
     def execute_commit(self, fetch: bool = False) -> Any:
         """Execute the SQL queries added to the queue with `self.add_execute_queue`.
@@ -618,7 +623,7 @@ class Database:
                 for sql in self._execute_queue:
                     cur.execute(*sql)
                 self._execute_queue.clear()
-                cur.execute("commit")
+                conn.commit()
                 if fetch:
                     return cur.fetchall()
         return None

src/huesoporro/main.py

@@ -131,6 +131,22 @@ async def get_tts_overlay() -> Template:
     return Template(template_name="tts.html")
 
 
+@get(
+    "/tts/permalink",
+    media_type=MediaType.HTML,
+)
+async def get_tts_permalink(access_token: str) -> Template:
+    """Handler for the /tts permalink endpoint to be used by apps that can only give the authentication as a query
+    param and not as a cookie, i.e. OBS"""
+
+    # authenticate the user using the provided access token
+    await _authenticate(access_token)
+
+    return Template(
+        template_name="tts.html",
+    )
+
+
 @get(
     "/",
     media_type=MediaType.HTML,
@@ -162,6 +178,14 @@ def get_health() -> dict:
     return {"status": "ok"}
 
 
+@get("/lefunny")
+def get_lefunny() -> Template:
+    return Template(
+        template_name="lefunny.html",
+        context={"sentences": [{"sentence": "Hola huesoperro", "id": 1}]},
+    )
+
+
 def exception_handler(_: Request, exc: Exception) -> Response:
     status_code = getattr(exc, "status_code", HTTP_500_INTERNAL_SERVER_ERROR)
     detail = getattr(exc, "detail", "")
@@ -197,6 +221,8 @@ def create_app():
             login,
             get_index,
             get_tts_overlay,
+            get_tts_permalink,
+            get_lefunny,
             WebsocketHandler,
         ],
         static_files_config=(

src/huesoporro/static/css/mvp.css

@@ -1,594 +0,0 @@
-/* MVP.css v1.17 - https://github.com/andybrewer/mvp */
-
-:root {
-  --active-brightness: 0.85;
-  --border-radius: 5px;
-  --box-shadow: 2px 2px 10px;
-  --color-accent: #118bee15;
-  --color-bg: #fff;
-  --color-bg-secondary: #e9e9e9;
-  --color-link: #118bee;
-  --color-secondary: #920de9;
-  --color-secondary-accent: #920de90b;
-  --color-shadow: #f4f4f4;
-  --color-table: #118bee;
-  --color-text: #000;
-  --color-text-secondary: #999;
-  --color-scrollbar: #cacae8;
-  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-  --hover-brightness: 1.2;
-  --justify-important: center;
-  --justify-normal: left;
-  --line-height: 1.5;
-  --width-card: 285px;
-  --width-card-medium: 460px;
-  --width-card-wide: 800px;
-  --width-content: 1080px;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root[color-mode="user"] {
-    --color-accent: #0097fc4f;
-    --color-bg: #333;
-    --color-bg-secondary: #555;
-    --color-link: #0097fc;
-    --color-secondary: #e20de9;
-    --color-secondary-accent: #e20de94f;
-    --color-shadow: #bbbbbb20;
-    --color-table: #0097fc;
-    --color-text: #f7f7f7;
-    --color-text-secondary: #aaa;
-  }
-}
-
-html {
-  scroll-behavior: smooth;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  html {
-    scroll-behavior: auto;
-  }
-}
-
-/* Layout */
-article aside {
-  background: var(--color-secondary-accent);
-  border-left: 4px solid var(--color-secondary);
-  padding: 0.01rem 0.8rem;
-}
-
-body {
-  background: var(--color-bg);
-  color: var(--color-text);
-  font-family: var(--font-family);
-  line-height: var(--line-height);
-  margin: 0;
-  overflow-x: hidden;
-  padding: 0;
-}
-
-footer,
-header,
-main {
-  margin: 0 auto;
-  max-width: var(--width-content);
-  padding: 3rem 1rem;
-}
-
-hr {
-  background-color: var(--color-bg-secondary);
-  border: none;
-  height: 1px;
-  margin: 4rem 0;
-  width: 100%;
-}
-
-section {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: var(--justify-important);
-}
-
-section img,
-article img {
-  max-width: 100%;
-}
-
-section pre {
-  overflow: auto;
-}
-
-section aside {
-  border: 1px solid var(--color-bg-secondary);
-  border-radius: var(--border-radius);
-  box-shadow: var(--box-shadow) var(--color-shadow);
-  margin: 1rem;
-  padding: 1.25rem;
-  width: var(--width-card);
-}
-
-section aside:hover {
-  box-shadow: var(--box-shadow) var(--color-bg-secondary);
-}
-
-[hidden] {
-  display: none;
-}
-
-/* Headers */
-article header,
-div header,
-main header {
-  padding-top: 0;
-}
-
-header {
-  text-align: var(--justify-important);
-}
-
-header a b,
-header a em,
-header a i,
-header a strong {
-  margin-left: 0.5rem;
-  margin-right: 0.5rem;
-}
-
-header nav img {
-  margin: 1rem 0;
-}
-
-section header {
-  padding-top: 0;
-  width: 100%;
-}
-
-/* Nav */
-nav {
-  align-items: center;
-  display: flex;
-  font-weight: bold;
-  justify-content: space-between;
-  margin-bottom: 7rem;
-}
-
-nav ul {
-  list-style: none;
-  padding: 0;
-}
-
-nav ul li {
-  display: inline-block;
-  margin: 0 0.5rem;
-  position: relative;
-  text-align: left;
-}
-
-/* Nav Dropdown */
-nav ul li:hover ul {
-  display: block;
-}
-
-nav ul li ul {
-  background: var(--color-bg);
-  border: 1px solid var(--color-bg-secondary);
-  border-radius: var(--border-radius);
-  box-shadow: var(--box-shadow) var(--color-shadow);
-  display: none;
-  height: auto;
-  left: -2px;
-  padding: 0.5rem 1rem;
-  position: absolute;
-  top: 1.7rem;
-  white-space: nowrap;
-  width: auto;
-  z-index: 1;
-}
-
-nav ul li ul::before {
-  /* fill gap above to make mousing over them easier */
-  content: "";
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: -0.5rem;
-  height: 0.5rem;
-}
-
-nav ul li ul li,
-nav ul li ul li a {
-  display: block;
-}
-
-/* Nav for Mobile */
-@media (max-width: 768px) {
-  nav {
-    flex-wrap: wrap;
-  }
-
-  nav ul li {
-    width: calc(100% - 1em);
-  }
-
-  nav ul li ul {
-    border: none;
-    box-shadow: none;
-    display: block;
-    position: static;
-  }
-}
-
-/* Typography */
-code,
-samp {
-  background-color: var(--color-accent);
-  border-radius: var(--border-radius);
-  color: var(--color-text);
-  display: inline-block;
-  margin: 0 0.1rem;
-  padding: 0 0.5rem;
-}
-
-details {
-  margin: 1.3rem 0;
-}
-
-details summary {
-  font-weight: bold;
-  cursor: pointer;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  line-height: var(--line-height);
-  text-wrap: balance;
-}
-
-mark {
-  padding: 0.1rem;
-}
-
-ol li,
-ul li {
-  padding: 0.2rem 0;
-}
-
-p {
-  margin: 0.75rem 0;
-  padding: 0;
-  width: 100%;
-}
-
-pre {
-  margin: 1rem 0;
-  max-width: var(--width-card-wide);
-  padding: 1rem 0;
-}
-
-pre code,
-pre samp {
-  display: block;
-  max-width: var(--width-card-wide);
-  padding: 0.5rem 2rem;
-  white-space: pre-wrap;
-}
-
-small {
-  color: var(--color-text-secondary);
-}
-
-sup {
-  background-color: var(--color-secondary);
-  border-radius: var(--border-radius);
-  color: var(--color-bg);
-  font-size: xx-small;
-  font-weight: bold;
-  margin: 0.2rem;
-  padding: 0.2rem 0.3rem;
-  position: relative;
-  top: -2px;
-}
-
-/* Links */
-a {
-  color: var(--color-link);
-  display: inline-block;
-  font-weight: bold;
-  text-decoration: underline;
-}
-
-a:hover {
-  filter: brightness(var(--hover-brightness));
-}
-
-a:active {
-  filter: brightness(var(--active-brightness));
-}
-
-a b,
-a em,
-a i,
-a strong,
-button,
-input[type="submit"] {
-  border-radius: var(--border-radius);
-  display: inline-block;
-  font-size: medium;
-  font-weight: bold;
-  line-height: var(--line-height);
-  margin: 0.5rem 0;
-  padding: 1rem 2rem;
-}
-
-button,
-input[type="submit"] {
-  font-family: var(--font-family);
-}
-
-button:hover,
-input[type="submit"]:hover {
-  cursor: pointer;
-  filter: brightness(var(--hover-brightness));
-}
-
-button:active,
-input[type="submit"]:active {
-  filter: brightness(var(--active-brightness));
-}
-
-a b,
-a strong,
-button,
-input[type="submit"] {
-  background-color: var(--color-link);
-  border: 2px solid var(--color-link);
-  color: var(--color-bg);
-}
-
-a em,
-a i {
-  border: 2px solid var(--color-link);
-  border-radius: var(--border-radius);
-  color: var(--color-link);
-  display: inline-block;
-  padding: 1rem 2rem;
-}
-
-article aside a {
-  color: var(--color-secondary);
-}
-
-/* Images */
-figure {
-  margin: 0;
-  padding: 0;
-}
-
-figure img {
-  max-width: 100%;
-}
-
-figure figcaption {
-  color: var(--color-text-secondary);
-}
-
-/* Forms */
-button:disabled,
-input:disabled {
-  background: var(--color-bg-secondary);
-  border-color: var(--color-bg-secondary);
-  color: var(--color-text-secondary);
-  cursor: not-allowed;
-}
-
-button[disabled]:hover,
-input[type="submit"][disabled]:hover {
-  filter: none;
-}
-
-form {
-  border: 1px solid var(--color-bg-secondary);
-  border-radius: var(--border-radius);
-  box-shadow: var(--box-shadow) var(--color-shadow);
-  display: block;
-  max-width: var(--width-card-wide);
-  min-width: var(--width-card);
-  padding: 1.5rem;
-  text-align: var(--justify-normal);
-}
-
-form header {
-  margin: 1.5rem 0;
-  padding: 1.5rem 0;
-}
-
-input,
-label,
-select,
-textarea {
-  display: block;
-  font-size: inherit;
-  max-width: var(--width-card-wide);
-}
-
-input[type="checkbox"],
-input[type="radio"] {
-  display: inline-block;
-}
-
-input[type="checkbox"] + label,
-input[type="radio"] + label {
-  display: inline-block;
-  font-weight: normal;
-  position: relative;
-  top: 1px;
-}
-
-input[type="range"] {
-  padding: 0.4rem 0;
-}
-
-input,
-select,
-textarea {
-  border: 1px solid var(--color-bg-secondary);
-  border-radius: var(--border-radius);
-  margin-bottom: 1rem;
-  padding: 0.4rem 0.8rem;
-}
-
-input[type="text"],
-input[type="password"],
-textarea {
-  width: calc(100% - 1.6rem);
-}
-
-input[readonly],
-textarea[readonly] {
-  background-color: var(--color-bg-secondary);
-}
-
-label {
-  font-weight: bold;
-  margin-bottom: 0.2rem;
-}
-
-/* Popups */
-dialog {
-  max-width: 90%;
-  max-height: 85dvh;
-  margin: auto;
-  padding: 0;
-  border: 1px solid var(--color-bg-secondary);
-  border-radius: 0.5rem;
-  overscroll-behavior: contain;
-  scroll-behavior: smooth;
-  scrollbar-width: none; /* Hide scrollbar for Firefox */
-  -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
-  scrollbar-color: transparent transparent;
-  animation: bottom-to-top 0.25s ease-in-out forwards;
-}
-
-dialog::-webkit-scrollbar {
-  width: 0;
-  display: none;
-}
-
-dialog::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-dialog::-webkit-scrollbar-thumb {
-  background-color: transparent;
-}
-
-@media (min-width: 650px) {
-  dialog {
-    max-width: 39rem;
-  }
-}
-
-dialog::backdrop {
-  background-color: rgba(0, 0, 0, 0.5);
-}
-
-@keyframes bottom-to-top {
-  0% {
-    opacity: 0;
-    transform: translateY(10%);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* Tables */
-table {
-  border: 1px solid var(--color-bg-secondary);
-  border-radius: var(--border-radius);
-  border-spacing: 0;
-  display: inline-block;
-  max-width: 100%;
-  overflow-x: auto;
-  padding: 0;
-  white-space: nowrap;
-}
-
-table td,
-table th,
-table tr {
-  padding: 0.4rem 0.8rem;
-  text-align: var(--justify-important);
-}
-
-table thead {
-  background-color: var(--color-table);
-  border-collapse: collapse;
-  border-radius: var(--border-radius);
-  color: var(--color-bg);
-  margin: 0;
-  padding: 0;
-}
-
-table thead tr:first-child th:first-child {
-  border-top-left-radius: var(--border-radius);
-}
-
-table thead tr:first-child th:last-child {
-  border-top-right-radius: var(--border-radius);
-}
-
-table thead th:first-child,
-table tr td:first-child {
-  text-align: var(--justify-normal);
-}
-
-table tr:nth-child(even) {
-  background-color: var(--color-accent);
-}
-
-/* Quotes */
-blockquote {
-  display: block;
-  font-size: x-large;
-  line-height: var(--line-height);
-  margin: 1rem auto;
-  max-width: var(--width-card-medium);
-  padding: 1.5rem 1rem;
-  text-align: var(--justify-important);
-}
-
-blockquote footer {
-  color: var(--color-text-secondary);
-  display: block;
-  font-size: small;
-  line-height: var(--line-height);
-  padding: 1.5rem 0;
-}
-
-/* Scrollbars */
-* {
-  scrollbar-width: thin;
-  scrollbar-color: var(--color-scrollbar) transparent;
-}
-
-*::-webkit-scrollbar {
-  width: 5px;
-  height: 5px;
-}
-
-*::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-*::-webkit-scrollbar-thumb {
-  background-color: var(--color-scrollbar);
-  border-radius: 10px;
-}