From b7ae9a648471fb7b211b6dd601871ef3ef8b5aa0 Mon Sep 17 00:00:00 2001
From: Johannes Reichhardt <johannes.reichhardt@gmail.com>
Date: Wed, 1 Apr 2026 00:01:13 -0500
Subject: [PATCH] Bump to v1.0.9: Fix counter bug, use emoji shortcodes, and
 add loading spinner UI.

---
 app.py               | 19 +++++++++----------
 k8s/deployment.yaml  |  2 +-
 static/style.css     | 33 ++++++++++++++++++++++++++++++---
 templates/index.html | 16 ++++++++++++++--
 4 files changed, 54 insertions(+), 16 deletions(-)

diff --git a/app.py b/app.py
index 4c9ab69..1cb2266 100644
--- a/app.py
+++ b/app.py
@@ -11,11 +11,7 @@ app = Flask(__name__)
 app.secret_key = os.environ.get("FLASK_SECRET_KEY", "prod-secret-7721")
 
 metrics = PrometheusMetrics(app)
-metrics.info('app_info', 'Application info', version='1.0.8')
-
-conversion_counter = metrics.counter(
-    'txt2md_conversions_total', 'Total number of text conversions'
-)
+metrics.info('app_info', 'Application info', version='1.0.9')
 
 # API Configuration
 api_key = os.environ.get("AI_API_KEY")
@@ -25,8 +21,9 @@ if api_key:
         "You are a text-to-markdown conversion specialist. You always produce "
         "standard CommonMark/GitHub Flavored Markdown. You strictly use ATX "
         "headings (#) and never use wiki-style syntax like '==' or '==='. "
-        "Additionally, you insert relevant and tasteful emojis at the beginning "
-        "of section headings to represent the topic."
+        "Additionally, you insert relevant and tasteful emojis as Markdown "
+        "shortcodes (e.g., :rocket:, :bulb:, :memo:) at the beginning of section "
+        "headings to represent the topic."
     )
     model = genai.GenerativeModel(
         model_name='gemini-2.5-flash',
@@ -36,6 +33,8 @@ else:
     model = None
 
 @app.route("/", methods=["GET", "POST"])
+@metrics.counter('txt2md_conversions_total', 'Total number of text conversions',
+                 labels={'result': lambda: request.method})
 def index():
     converted_html = None
     markdown_content = ""
@@ -54,13 +53,13 @@ def index():
                 prompt = (
                     f"Convert the following text into high-quality standard Markdown. "
                     f"Use ATX headings (#), standard formatting, and include relevant "
-                    f"emojis for each section heading to make the document more engaging. "
-                    f"Return ONLY the markdown content:\n\n{original_text}"
+                    f"emoji shortcodes (like :smile:) for each section heading to make "
+                    f"the document more engaging. Return ONLY the markdown content:\n\n"
+                    f"{original_text}"
                 )
                 response = model.generate_content(prompt)
                 markdown_content = response.text
                 converted_html = markdown(markdown_content, extensions=['extra', 'codehilite'])
-                conversion_counter.inc()
             except Exception as e:
                 flash(f"Error during processing: {str(e)}", "error")
                 
diff --git a/k8s/deployment.yaml b/k8s/deployment.yaml
index afbf7c6..c13ba15 100644
--- a/k8s/deployment.yaml
+++ b/k8s/deployment.yaml
@@ -70,7 +70,7 @@ spec:
       serviceAccountName: txt2md-sa
       containers:
       - name: txt2md
-        image: europe-west3-docker.pkg.dev/project-84ddd43d-e408-4cb9-8cb/txt2md-repo/txt2md:v1.0.8
+        image: europe-west3-docker.pkg.dev/project-84ddd43d-e408-4cb9-8cb/txt2md-repo/txt2md:v1.0.9
         ports:
         - containerPort: 5000
         env:
diff --git a/static/style.css b/static/style.css
index bf4a376..dc789bb 100644
--- a/static/style.css
+++ b/static/style.css
@@ -73,7 +73,9 @@ textarea:focus {
 }
 
 button {
-    display: block;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     width: 100%;
     padding: 0.75rem;
     margin-top: 1rem;
@@ -84,13 +86,38 @@ button {
     font-size: 1rem;
     font-weight: 600;
     cursor: pointer;
-    transition: background-color 0.3s ease;
+    transition: all 0.3s ease;
 }
 
-button:hover {
+button:hover:not(:disabled) {
     background-color: #2980b9;
 }
 
+button:disabled {
+    background-color: #a5ccea;
+    cursor: not-allowed;
+    opacity: 0.8;
+}
+
+.spinner {
+    display: none;
+    width: 20px;
+    height: 20px;
+    border: 3px solid rgba(255, 255, 255, 0.3);
+    border-radius: 50%;
+    border-top-color: #fff;
+    animation: spin 1s ease-in-out infinite;
+    margin-right: 10px;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+button.loading .spinner {
+    display: inline-block;
+}
+
 .preview {
     background-color: white;
     padding: 1rem;
diff --git a/templates/index.html b/templates/index.html
index 0dd6d5d..a579605 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -26,9 +26,12 @@
         <div class="editor-grid">
             <section class="input-section">
                 <h2>Raw Input</h2>
-                <form method="POST">
+                <form id="convert-form" method="POST">
                     <textarea name="text" placeholder="Paste your text here..." required>{{ original_text }}</textarea>
-                    <button type="submit">Convert</button>
+                    <button type="submit" id="convert-btn">
+                        <span class="spinner"></span>
+                        <span class="btn-text">Convert</span>
+                    </button>
                 </form>
             </section>
 
@@ -47,5 +50,14 @@
             </section>
         </div>
     </div>
+
+    <script>
+        document.getElementById('convert-form').addEventListener('submit', function() {
+            const btn = document.getElementById('convert-btn');
+            btn.disabled = true;
+            btn.classList.add('loading');
+            btn.querySelector('.btn-text').textContent = 'Converting...';
+        });
+    </script>
 </body>
 </html>