Upload 5 files

LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

app.py

@@ -0,0 +1,304 @@
+import os
+import tempfile
+import requests
+import logging
+from flask import Flask, request, jsonify, render_template
+from dotenv import load_dotenv
+
+# Try to import pydub for audio chunking
+try:
+    from pydub import AudioSegment
+    HAS_PYDUB = True
+except ImportError:
+    HAS_PYDUB = False
+
+load_dotenv()
+
+# Set up logging for the dynamic model selector
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+app = Flask(__name__)
+# Restrict max upload size to 32MB to prevent memory exhaustion
+app.config['MAX_CONTENT_LENGTH'] = 32 * 1024 * 1024
+
+SARVAM_API_URL = "https://api.sarvam.ai/speech-to-text"
+
+
+def get_available_model_name(api_key):
+    """
+    Dynamically finds a working model from the user's account using the REST API.
+    Adapted to be thread-safe for dynamic per-request API keys.
+    """
+    try:
+        url = f"https://generativelanguage.googleapis.com/v1beta/models?key={api_key}"
+        resp = requests.get(url, timeout=10)
+
+        if resp.status_code != 200:
+            logger.error(f"Failed to list models: {resp.text}")
+            # Fallback to the most likely stable alias if the list request fails
+            return "models/gemini-1.5-flash"
+
+        data = resp.json()
+        available_models = []
+
+        for m in data.get('models', []):
+            if 'generateContent' in m.get('supportedGenerationMethods', []):
+                available_models.append(m.get('name'))
+
+        if not available_models:
+            logger.error("No models found.")
+            return None
+
+        # Priority list: Try to find these specific powerful models first
+        preferred_order = [
+            "models/gemini-1.5-flash",
+            "models/gemini-1.5-pro",
+            "models/gemini-pro",
+            "models/gemini-1.0-pro"
+        ]
+
+        # 1. Check if any preferred model is in the available list
+        for preferred in preferred_order:
+            if preferred in available_models:
+                logger.info(f"Selected Preferred Model: {preferred}")
+                return preferred
+
+        # 2. If none of the preferred ones exist, take the first available one
+        fallback = available_models[0]
+        logger.warning(
+            f"Preferred models missing. Falling back to: {fallback}")
+        return fallback
+
+    except Exception as e:
+        logger.error(f"Error listing models: {e}")
+        return "models/gemini-1.5-flash"  # Safe default
+
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+
+@app.route('/transcribe', methods=['POST'])
+def transcribe():
+    # Cascade: Use client key if provided, fallback to environment variable
+    sarvam_key = os.getenv("SARVAM_API_KEY")
+    language = request.form.get('language', 'en-IN')
+
+    if not sarvam_key:
+        return jsonify({'error': 'Sarvam API key is required. Provide it in the UI or set SARVAM_API_KEY env var.'}), 401
+
+    if 'audio' not in request.files:
+        return jsonify({'error': 'No audio file provided in request.'}), 400
+
+    file = request.files['audio']
+    if file.filename == '':
+        return jsonify({'error': 'No file selected.'}), 400
+
+    # Ephemeral file handling
+    try:
+        with tempfile.NamedTemporaryFile(delete=False, suffix='.webm') as temp_audio:
+            file.save(temp_audio.name)
+            temp_filepath = temp_audio.name
+
+        # --- CHUNKING LOGIC FOR AUDIO > 30s ---
+        if HAS_PYDUB:
+            try:
+                audio = AudioSegment.from_file(temp_filepath)
+                # 29 seconds (safe margin below 30s)
+                chunk_length_ms = 29 * 1000
+
+                # If audio is longer than 29s, process in chunks
+                if len(audio) > chunk_length_ms:
+                    chunks = [audio[i:i + chunk_length_ms]
+                              for i in range(0, len(audio), chunk_length_ms)]
+                    full_transcript = []
+
+                    for i, chunk in enumerate(chunks):
+                        with tempfile.NamedTemporaryFile(delete=False, suffix='.wav') as chunk_file:
+                            chunk.export(chunk_file.name, format="wav")
+
+                            with open(chunk_file.name, 'rb') as f:
+                                files = {
+                                    'file': (f"chunk_{i}.wav", f, 'audio/wav')}
+                                data = {
+                                    'language_code': language,
+                                    'model': 'saarika:v2.5',
+                                    'with_timestamps': 'false'
+                                }
+                                headers = {'api-subscription-key': sarvam_key}
+
+                                response = requests.post(
+                                    SARVAM_API_URL,
+                                    headers=headers,
+                                    files=files,
+                                    data=data,
+                                    timeout=60
+                                )
+                        os.remove(chunk_file.name)
+
+                        if response.status_code == 200:
+                            result = response.json()
+                            transcript = result.get(
+                                'transcript') or result.get('text') or ''
+                            if transcript:
+                                full_transcript.append(transcript.strip())
+                        else:
+                            # Clean up and bubble error if any chunk fails
+                            os.remove(temp_filepath)
+                            try:
+                                err_msg = response.json().get('message', response.text)
+                            except ValueError:
+                                err_msg = response.text
+                            return jsonify({'error': f'Sarvam API error on chunk {i+1}: {err_msg}'}), response.status_code
+
+                    os.remove(temp_filepath)
+                    return jsonify({'success': True, 'transcript': " ".join(full_transcript)})
+
+            except Exception as e:
+                logger.warning(
+                    f"Pydub chunking failed (ffmpeg likely missing): {e}. Falling back to direct upload.")
+                pass  # Proceed to direct upload fallback
+
+        # --- DIRECT UPLOAD FALLBACK (For <30s files or missing ffmpeg) ---
+        with open(temp_filepath, 'rb') as f:
+            files = {'file': (file.filename, f, file.mimetype or 'audio/webm')}
+            data = {
+                'language_code': language,
+                'model': 'saarika:v2.5',
+                'with_timestamps': 'false'
+            }
+            headers = {'api-subscription-key': sarvam_key}
+
+            response = requests.post(
+                SARVAM_API_URL,
+                headers=headers,
+                files=files,
+                data=data,
+                timeout=60
+            )
+
+        os.remove(temp_filepath)
+
+        if response.status_code == 200:
+            result = response.json()
+            transcript = result.get('transcript') or result.get('text') or ''
+            return jsonify({'success': True, 'transcript': transcript})
+        else:
+            try:
+                err_msg = response.json().get('message', response.text)
+            except ValueError:
+                err_msg = response.text
+
+            # Intercept the specific 30s limit error to guide the user to the fix
+            if "duration exceeds" in err_msg.lower() or "30 seconds" in err_msg.lower():
+                return jsonify({'error': 'Audio > 30s. To enable automatic chunking, run: "pip install pydub" AND install ffmpeg on your server.'}), 400
+
+            return jsonify({'error': f'Sarvam API error: {err_msg}'}), response.status_code
+
+    except Exception as e:
+        if 'temp_filepath' in locals() and os.path.exists(temp_filepath):
+            os.remove(temp_filepath)
+        return jsonify({'error': f'Transcription processing failed: {str(e)}'}), 500
+
+
+@app.route('/refine', methods=['POST'])
+def refine():
+    data = request.get_json() or {}
+    gemini_key = os.getenv("GEMINI_API_KEY")
+    transcript = data.get('transcript', '').strip()
+    tone = data.get('tone', 'clear')
+
+    if not gemini_key:
+        return jsonify({'error': 'Gemini API key is required. Provide it in the UI or set GEMINI_API_KEY env var.'}), 401
+
+    if not transcript:
+        return jsonify({'error': 'No transcript provided for refinement.'}), 400
+
+    # Dynamically select the best model based on the provided API key
+    model_name = get_available_model_name(gemini_key)
+    if not model_name:
+        return jsonify({'error': 'No suitable Gemini models found for this API key.'}), 500
+
+    dynamic_gemini_url = f"https://generativelanguage.googleapis.com/v1beta/{model_name}:generateContent"
+
+    tone_instructions = {
+        'clear': 'Refine into a clear, direct, and well-structured prompt. Remove filler words while preserving the original intent.',
+        'detailed': 'Act as an expert prompt engineer. Expand this raw idea into a highly detailed, comprehensive prompt. Flesh out implicit requirements. Include specific structured sections such as: [Objective], [Target Audience], [Core Features], and [Technical Constraints]. Ensure the resulting prompt leaves no ambiguity.',
+        'concise': 'Distill this into an ultra-concise, powerful AI prompt containing only the essential keywords and core intent.',
+        'creative': 'Transform this into a creative AI prompt, suggesting innovative angles, vivid language, and out-of-the-box features related to the core idea.',
+        'technical': 'Convert this into a precise, highly technical prompt suitable for a senior engineer. Explicitly propose appropriate domain terminology, specific tech stacks, data models, or algorithms (e.g., recommendation engines, APIs) relevant to the idea.',
+        'step-by-step': 'Structure the AI prompt as a comprehensive series of actionable, numbered implementation phases.'
+    }
+
+    instruction = tone_instructions.get(tone, tone_instructions['clear'])
+
+    system_prompt = (
+        "You are a Master Prompt Engineer. The user will provide a raw, unstructured voice transcript of an idea.\n"
+        "Your ONLY job is to write a professional, highly effective prompt based on their idea that they can feed into another AI to build or execute their vision.\n"
+        "Do NOT answer or fulfill their idea yourself. Just write the expansive prompt FOR them.\n"
+        f"Style and Structure Directive: {instruction}\n"
+        "IMPORTANT RULES:\n"
+        "1. Return ONLY the final generated prompt.\n"
+        "2. Do NOT include any conversational filler (e.g., 'Here is your prompt:').\n"
+        "3. Do NOT wrap your entire response in a global markdown code block (like ```markdown), but you MAY use internal markdown like bolding, lists, and headings to structure the prompt thoroughly.\n"
+        "4. CRITICAL: Ensure the response is completely finished and fully fleshed out. DO NOT truncate or cut off mid-sentence."
+    )
+
+    headers = {"Content-Type": "application/json"}
+
+    # Merged system_prompt directly into the user contents block to ensure schema compatibility
+    payload = {
+        "contents": [
+            {
+                "role": "user",
+                "parts": [{"text": f"{system_prompt}\n\n---\nRaw Voice Transcript:\n{transcript}"}]
+            }
+        ],
+        "generationConfig": {
+            "temperature": 0.8,
+            # Tripled max tokens to prevent truncation on extremely detailed responses
+            "maxOutputTokens": 8192
+        }
+    }
+
+    try:
+        # Extended timeout to 60s to accommodate massive generated prompts
+        resp = requests.post(
+            f"{dynamic_gemini_url}?key={gemini_key}",
+            headers=headers,
+            json=payload,
+            timeout=60
+        )
+
+        if resp.status_code != 200:
+            try:
+                err_msg = resp.json().get("error", {}).get("message", resp.text)
+            except ValueError:
+                err_msg = resp.text
+            return jsonify({'error': f'Gemini API error: {err_msg}'}), resp.status_code
+
+        result = resp.json()
+        refined = (
+            result.get("candidates", [{}])[0]
+            .get("content", {})
+            .get("parts", [{}])[0]
+            .get("text", "")
+            .strip()
+        )
+
+        if not refined:
+            return jsonify({'error': 'Empty response from Gemini API. The model returned no text.'}), 500
+
+        return jsonify({'success': True, 'prompt': refined})
+
+    except requests.exceptions.Timeout:
+        return jsonify({'error': 'Gemini API request timed out while generating a response.'}), 504
+    except Exception as e:
+        return jsonify({'error': f'Refinement processing failed: {str(e)}'}), 500
+
+
+if __name__ == '__main__':
+    # Make sure 'templates' folder exists in the same directory as app.py
+    app.run(debug=True, port=5000)

requirements.txt

@@ -0,0 +1,4 @@
+Flask==3.0.3
+requests==2.31.0
+python-dotenv==1.0.1
+pydub==0.25.1

templates/index.html

@@ -0,0 +1,1034 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Voice → Prompt Studio</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Syne+Mono&display=swap" rel="stylesheet" />
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    :root {
+      --ink: #0d0c0a;
+      --ink2: #3a3830;
+      --ink3: #8a8880;
+      --ink4: #b8b6ae;
+      --surface: #f5f4f0;
+      --surface2: #eeede8;
+      --surface3: #e4e3dd;
+      --white: #fefefe;
+      --accent: #c94a1a;
+      --accent-light: #f0997b;
+      --accent-bg: #fdf0eb;
+      --accent-border: #f0c4b0;
+      --green: #2d5a14;
+      --green-bg: #e8f2de;
+      --red-bg: #fdeaea;
+      --red: #a32020;
+      --border: rgba(20,18,12,0.09);
+      --border2: rgba(20,18,12,0.15);
+      --border3: rgba(20,18,12,0.22);
+      --r: 18px;
+      --rm: 12px;
+      --rs: 8px;
+    }
+
+    html { background: var(--surface); color: var(--ink); scroll-behavior: smooth; }
+
+    body {
+      font-family: 'Syne', sans-serif;
+      min-height: 100vh;
+      background: var(--surface);
+      background-image:
+        radial-gradient(ellipse 60% 40% at 80% 10%, rgba(201,74,26,0.06) 0%, transparent 70%),
+        radial-gradient(ellipse 50% 30% at 10% 90%, rgba(201,74,26,0.04) 0%, transparent 70%);
+    }
+
+    .page {
+      max-width: 680px;
+      margin: 0 auto;
+      padding: 3rem 1.5rem 5rem;
+    }
+
+    /* ─── HEADER ─── */
+    .header {
+      margin-bottom: 2.5rem;
+      position: relative;
+    }
+    .header-top {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      margin-bottom: 0.25rem;
+    }
+    .brand {
+      font-size: 36px;
+      font-weight: 800;
+      letter-spacing: -1.5px;
+      line-height: 1;
+      color: var(--ink);
+    }
+    .brand .arrow {
+      color: var(--accent);
+      font-style: normal;
+      display: inline-block;
+      animation: arrowPop 2.4s ease-in-out infinite;
+    }
+    @keyframes arrowPop {
+      0%,100% { transform: translateX(0); opacity: 1; }
+      50% { transform: translateX(4px); opacity: 0.6; }
+    }
+    .studio-pill {
+      font-size: 9px;
+      font-weight: 700;
+      letter-spacing: 2px;
+      text-transform: uppercase;
+      background: var(--ink);
+      color: var(--surface);
+      padding: 5px 11px;
+      border-radius: 20px;
+      margin-top: 5px;
+    }
+    .header-sub {
+      font-size: 13px;
+      color: var(--ink3);
+      font-weight: 400;
+      letter-spacing: 0.2px;
+    }
+
+    /* ─── LANGUAGE ROW ─── */
+    .lang-row {
+      display: flex;
+      gap: 6px;
+      flex-wrap: wrap;
+      margin-bottom: 1.5rem;
+    }
+    .lang-btn {
+      font-family: 'Syne', sans-serif;
+      font-size: 11px;
+      font-weight: 600;
+      padding: 5px 14px;
+      border: 0.5px solid var(--border2);
+      border-radius: 20px;
+      background: var(--white);
+      color: var(--ink3);
+      cursor: pointer;
+      transition: all 0.15s ease;
+      letter-spacing: 0.3px;
+    }
+    .lang-btn:hover { background: var(--surface2); color: var(--ink2); border-color: var(--border3); }
+    .lang-btn.active {
+      background: var(--ink);
+      color: var(--white);
+      border-color: var(--ink);
+      box-shadow: 0 2px 8px rgba(13,12,10,0.18);
+    }
+
+    /* ─── RECORDER CARD ─── */
+    .recorder-card {
+      background: var(--white);
+      border: 0.5px solid var(--border2);
+      border-radius: var(--r);
+      padding: 2rem 1.5rem 1.5rem;
+      margin-bottom: 0.75rem;
+      position: relative;
+      overflow: hidden;
+    }
+    .recorder-card::before {
+      content: '';
+      position: absolute;
+      top: 0; left: 0; right: 0;
+      height: 2px;
+      background: linear-gradient(90deg, transparent, var(--accent), transparent);
+      opacity: 0;
+      transition: opacity 0.4s;
+    }
+    .recorder-card.is-recording::before { opacity: 1; }
+
+    .rec-inner {
+      display: flex;
+      align-items: center;
+      gap: 1.5rem;
+    }
+
+    /* Orb */
+    .orb-area { position: relative; flex-shrink: 0; }
+    .rec-orb {
+      width: 76px; height: 76px;
+      border-radius: 50%;
+      border: 0.5px solid var(--border3);
+      background: var(--surface2);
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.25s ease;
+      position: relative;
+      z-index: 1;
+      outline: none;
+    }
+    .rec-orb:hover { background: var(--surface3); transform: scale(1.04); }
+    .rec-orb:active { transform: scale(0.97); }
+    .rec-orb.recording {
+      background: var(--accent);
+      border-color: var(--accent);
+      box-shadow: 0 0 0 6px rgba(201,74,26,0.12);
+      animation: orbBreath 1.6s ease-in-out infinite;
+    }
+    .rec-orb.processing {
+      background: var(--surface3);
+      cursor: default;
+      border-color: var(--ink4);
+    }
+    .orb-icon {
+      width: 26px; height: 26px;
+      position: relative;
+      display: flex; align-items: center; justify-content: center;
+    }
+    /* Mic icon SVG */
+    .orb-icon svg { width: 22px; height: 22px; }
+
+    @keyframes orbBreath {
+      0%,100% { box-shadow: 0 0 0 6px rgba(201,74,26,0.12); }
+      50% { box-shadow: 0 0 0 14px rgba(201,74,26,0.04); }
+    }
+
+    /* Ripple rings */
+    .rec-ring {
+      position: absolute;
+      inset: -10px;
+      border-radius: 50%;
+      border: 1px solid var(--accent);
+      opacity: 0;
+      pointer-events: none;
+    }
+    .rec-orb.recording ~ .rec-ring { animation: ringOut 1.6s ease-out infinite; }
+    .rec-orb.recording ~ .rec-ring:nth-child(3) { animation-delay: 0.4s; }
+    @keyframes ringOut {
+      0% { transform: scale(1); opacity: 0.5; }
+      100% { transform: scale(1.7); opacity: 0; }
+    }
+
+    /* Right side of recorder */
+    .rec-right { flex: 1; }
+    .timer {
+      font-size: 38px;
+      font-weight: 700;
+      letter-spacing: -1px;
+      color: var(--ink);
+      line-height: 1;
+      margin-bottom: 6px;
+      font-variant-numeric: tabular-nums;
+    }
+    .timer.recording { color: var(--accent); }
+    .rec-label {
+      font-size: 11px;
+      color: var(--ink3);
+      letter-spacing: 0.5px;
+      text-transform: uppercase;
+      font-weight: 600;
+      margin-bottom: 10px;
+    }
+    .waveform {
+      display: flex;
+      align-items: center;
+      gap: 2.5px;
+      height: 28px;
+    }
+    .wave-bar {
+      width: 3px;
+      border-radius: 2px;
+      background: var(--accent-light);
+      height: 4px;
+      transition: height 0.05s ease;
+    }
+
+    /* Upload row */
+    .upload-row {
+      display: flex;
+      justify-content: flex-end;
+      margin-top: 1rem;
+      padding-top: 0.75rem;
+      border-top: 0.5px solid var(--border);
+    }
+    .upload-btn {
+      font-family: 'Syne', sans-serif;
+      font-size: 11px;
+      font-weight: 600;
+      padding: 6px 16px;
+      border: 0.5px solid var(--border2);
+      border-radius: 20px;
+      background: var(--surface);
+      color: var(--ink3);
+      cursor: pointer;
+      transition: all 0.15s;
+      letter-spacing: 0.3px;
+      display: flex; align-items: center; gap: 6px;
+    }
+    .upload-btn:hover { background: var(--surface2); color: var(--ink2); border-color: var(--border3); }
+
+    /* ─── STATUS BAR ─── */
+    .status-bar {
+      min-height: 28px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 11.5px;
+      color: var(--ink3);
+      letter-spacing: 0.3px;
+      margin-bottom: 1rem;
+      font-weight: 500;
+      padding: 0 4px;
+      transition: color 0.2s;
+    }
+    .status-bar.err {
+      color: var(--red);
+      background: var(--red-bg);
+      border-radius: var(--rs);
+      padding: 6px 12px;
+    }
+    .status-bar.ok {
+      color: var(--green);
+      background: var(--green-bg);
+      border-radius: var(--rs);
+      padding: 6px 12px;
+    }
+    .status-dot {
+      width: 6px; height: 6px;
+      border-radius: 50%;
+      background: currentColor;
+      margin-right: 7px;
+      flex-shrink: 0;
+    }
+
+    /* ─── PANELS ─── */
+    .panel {
+      background: var(--white);
+      border: 0.5px solid var(--border2);
+      border-radius: var(--r);
+      margin-bottom: 0.75rem;
+      overflow: hidden;
+    }
+    .panel-head {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 10px 16px;
+      background: var(--surface);
+      border-bottom: 0.5px solid var(--border);
+    }
+    .panel-label {
+      font-size: 9px;
+      letter-spacing: 1.8px;
+      color: var(--ink3);
+      font-weight: 700;
+      text-transform: uppercase;
+    }
+    .panel-meta { font-size: 11px; color: var(--ink4); font-weight: 500; }
+    .panel-body { padding: 16px 18px; }
+
+    .editable {
+      font-family: 'Syne Mono', monospace;
+      font-size: 13.5px;
+      line-height: 1.9;
+      color: var(--ink);
+      outline: none;
+      min-height: 60px;
+      white-space: pre-wrap;
+    }
+    .editable:empty::before { content: attr(data-ph); color: var(--ink4); }
+    .edit-hint {
+      font-size: 10.5px;
+      color: var(--ink4);
+      margin-top: 8px;
+      font-weight: 500;
+    }
+
+    /* ─── REFINE SECTION ─── */
+    .refine-section { margin-bottom: 0.75rem; }
+    .section-label {
+      font-size: 9px;
+      letter-spacing: 1.8px;
+      color: var(--ink3);
+      font-weight: 700;
+      text-transform: uppercase;
+      margin-bottom: 10px;
+    }
+    .tone-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
+    .tone-btn {
+      font-family: 'Syne', sans-serif;
+      font-size: 11px;
+      font-weight: 600;
+      padding: 6px 15px;
+      border: 0.5px solid var(--border2);
+      border-radius: 20px;
+      background: var(--white);
+      color: var(--ink3);
+      cursor: pointer;
+      transition: all 0.15s;
+      letter-spacing: 0.2px;
+    }
+    .tone-btn:hover { background: var(--surface2); color: var(--ink2); }
+    .tone-btn.active {
+      background: var(--accent-bg);
+      color: var(--accent);
+      border-color: var(--accent-border);
+      font-weight: 700;
+    }
+
+    .refine-btn {
+      font-family: 'Syne', sans-serif;
+      font-size: 13px;
+      font-weight: 700;
+      padding: 12px 26px;
+      background: var(--ink);
+      color: var(--white);
+      border: none;
+      border-radius: 40px;
+      cursor: pointer;
+      transition: all 0.2s;
+      letter-spacing: 0.3px;
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .refine-btn:hover { background: #2a2820; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(13,12,10,0.2); }
+    .refine-btn:active { transform: translateY(0); }
+    .refine-btn:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+      pointer-events: none;
+      transform: none;
+      box-shadow: none;
+    }
+    .refine-btn.cooldown { background: var(--red); }
+    .btn-arrow {
+      display: inline-block;
+      transition: transform 0.2s;
+    }
+    .refine-btn:not(:disabled):hover .btn-arrow { transform: translateX(3px); }
+
+    /* ─── PROMPT OUTPUT ─── */
+    .prompt-panel {
+      background: var(--accent-bg);
+      border: 0.5px solid var(--accent-border);
+      border-radius: var(--r);
+      margin-bottom: 0.75rem;
+      overflow: hidden;
+    }
+    .prompt-panel .panel-head {
+      background: rgba(201,74,26,0.06);
+      border-bottom-color: var(--accent-border);
+    }
+    .prompt-panel .panel-label { color: var(--accent); }
+    .prompt-text {
+      font-family: 'Syne Mono', monospace;
+      font-size: 13.5px;
+      line-height: 1.85;
+      color: var(--ink);
+      white-space: pre-wrap;
+      max-height: 420px;
+      overflow-y: auto;
+      padding-right: 6px;
+    }
+    .prompt-text::-webkit-scrollbar { width: 4px; }
+    .prompt-text::-webkit-scrollbar-thumb { background: var(--accent-border); border-radius: 4px; }
+
+    .copy-btn {
+      font-family: 'Syne', sans-serif;
+      font-size: 10px;
+      font-weight: 700;
+      letter-spacing: 0.5px;
+      padding: 5px 13px;
+      border: 0.5px solid var(--accent-border);
+      border-radius: 20px;
+      background: transparent;
+      color: var(--accent);
+      cursor: pointer;
+      transition: all 0.15s;
+    }
+    .copy-btn:hover { background: var(--accent); color: var(--white); }
+
+    /* ─── HISTORY ─── */
+    .divider {
+      height: 0.5px;
+      background: var(--border);
+      margin: 2rem 0 1.25rem;
+    }
+    .history-item {
+      display: flex;
+      align-items: flex-start;
+      gap: 12px;
+      border: 0.5px solid var(--border);
+      border-radius: var(--rm);
+      padding: 11px 14px;
+      margin-bottom: 7px;
+      cursor: pointer;
+      transition: all 0.12s;
+      background: var(--white);
+    }
+    .history-item:hover { background: var(--surface2); border-color: var(--border2); }
+    .history-num {
+      font-size: 10px;
+      font-weight: 700;
+      color: var(--ink4);
+      padding-top: 1px;
+      min-width: 18px;
+      letter-spacing: 0.3px;
+    }
+    .history-content { flex: 1; overflow: hidden; }
+    .history-snippet {
+      font-size: 12.5px;
+      color: var(--ink2);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-weight: 500;
+    }
+    .history-meta { font-size: 10px; color: var(--ink4); margin-top: 3px; font-weight: 600; letter-spacing: 0.3px; }
+    .history-tone {
+      font-size: 9px;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      background: var(--surface2);
+      color: var(--ink3);
+      padding: 2px 8px;
+      border-radius: 10px;
+      align-self: flex-start;
+      margin-top: 2px;
+    }
+
+    /* ─── PROCESSING SPINNER ─── */
+    .spin {
+      display: inline-block;
+      width: 16px; height: 16px;
+      border: 2px solid rgba(255,255,255,0.25);
+      border-top-color: #fff;
+      border-radius: 50%;
+      animation: spin 0.7s linear infinite;
+      margin-left: 2px;
+    }
+    @keyframes spin { to { transform: rotate(360deg); } }
+
+    /* ─── FOOTER ─── */
+    .footer {
+      text-align: center;
+      margin-top: 3rem;
+      padding-top: 1.5rem;
+      border-top: 0.5px solid var(--border);
+    }
+    .footer-text {
+      font-size: 11px;
+      color: var(--ink4);
+      font-weight: 600;
+      letter-spacing: 0.5px;
+    }
+    .footer-text .heart { color: var(--accent); }
+    .footer-text .name { color: var(--ink3); }
+
+    /* ─── UTILITY ─── */
+    .hidden { display: none !important; }
+    #fileInput { display: none; }
+
+    /* ─── REVEAL ANIMATION ─── */
+    .reveal {
+      opacity: 0;
+      transform: translateY(10px);
+      transition: opacity 0.35s ease, transform 0.35s ease;
+    }
+    .reveal.shown {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  </style>
+</head>
+<body>
+<div class="page">
+
+  <!-- Header -->
+  <div class="header">
+    <div class="header-top">
+      <h1 class="brand">Voice <span class="arrow">→</span> Prompt</h1>
+      <span class="studio-pill">Studio</span>
+    </div>
+    <p class="header-sub">Speak naturally — get a production-ready AI prompt</p>
+  </div>
+
+  <!-- Language Row -->
+  <div class="lang-row" id="langRow">
+    <button class="lang-btn active" data-lang="en-IN">EN</button>
+    <button class="lang-btn" data-lang="hi-IN">हि</button>
+    <button class="lang-btn" data-lang="ta-IN">த</button>
+    <button class="lang-btn" data-lang="te-IN">తె</button>
+    <button class="lang-btn" data-lang="kn-IN">ಕ</button>
+    <button class="lang-btn" data-lang="mr-IN">म</button>
+    <button class="lang-btn" data-lang="bn-IN">ব</button>
+    <button class="lang-btn" data-lang="gu-IN">ગ</button>
+  </div>
+
+  <!-- Recorder Card -->
+  <div class="recorder-card" id="recCard">
+    <div class="rec-inner">
+      <div class="orb-area">
+        <button class="rec-orb" id="recBtn" onclick="toggleRecord()" aria-label="Record voice">
+          <div class="orb-icon" id="orbIcon">
+            <!-- Mic icon -->
+            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" id="micSvg">
+              <rect x="8.5" y="2" width="7" height="12" rx="3.5" fill="currentColor"/>
+              <path d="M5 11c0 3.866 3.134 7 7 7s7-3.134 7-7" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+              <line x1="12" y1="18" x2="12" y2="22" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+              <line x1="9" y1="22" x2="15" y2="22" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+            </svg>
+          </div>
+        </button>
+        <div class="rec-ring" id="ring1"></div>
+        <div class="rec-ring" id="ring2"></div>
+      </div>
+
+      <div class="rec-right">
+        <div class="timer" id="timer">0:00</div>
+        <div class="rec-label" id="recLabel">tap to record</div>
+        <div class="waveform" id="waveform"></div>
+      </div>
+    </div>
+
+    <div class="upload-row">
+      <button class="upload-btn" onclick="document.getElementById('fileInput').click()">
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+          <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/>
+        </svg>
+        Upload audio file
+      </button>
+      <input type="file" id="fileInput" accept="audio/*,video/webm" onchange="handleUpload(event)" />
+    </div>
+  </div>
+
+  <!-- Status Bar -->
+  <div class="status-bar" id="statusBar">
+    <span class="status-dot hidden" id="statusDot"></span>
+    <span id="statusText"></span>
+  </div>
+
+  <!-- Transcript Panel -->
+  <div class="panel reveal hidden" id="transcriptCard">
+    <div class="panel-head">
+      <span class="panel-label">Transcript</span>
+      <span class="panel-meta" id="wordCount">0 words</span>
+    </div>
+    <div class="panel-body">
+      <div class="editable" id="transcriptText" contenteditable="true" data-ph="Your speech will appear here…"></div>
+      <div class="edit-hint">Editable — fix any mistakes before refining</div>
+    </div>
+  </div>
+
+  <!-- Refine Controls -->
+  <div class="refine-section reveal hidden" id="refineSection">
+    <div class="section-label">Refine Tone</div>
+    <div class="tone-row">
+      <button class="tone-btn active" data-tone="clear">Clear</button>
+      <button class="tone-btn" data-tone="detailed">Detailed</button>
+      <button class="tone-btn" data-tone="concise">Concise</button>
+      <button class="tone-btn" data-tone="creative">Creative</button>
+      <button class="tone-btn" data-tone="technical">Technical</button>
+      <button class="tone-btn" data-tone="step-by-step">Step-by-step</button>
+    </div>
+    <button class="refine-btn" id="refineBtn" onclick="refinePrompt()">
+      Refine with Gemini <span class="btn-arrow">↗</span>
+    </button>
+  </div>
+
+  <!-- Prompt Output Panel -->
+  <div class="prompt-panel panel reveal hidden" id="promptCard">
+    <div class="panel-head">
+      <span class="panel-label">Refined Prompt</span>
+      <button class="copy-btn" onclick="copyPrompt()">Copy</button>
+    </div>
+    <div class="panel-body">
+      <div class="prompt-text" id="promptText"></div>
+    </div>
+  </div>
+
+  <!-- History -->
+  <div class="hidden" id="historyWrap">
+    <div class="divider"></div>
+    <div class="section-label">Recent Prompts</div>
+    <div id="historyList"></div>
+  </div>
+
+  <!-- Footer -->
+  <div class="footer">
+    <p class="footer-text">Made with <span class="heart">♥</span> by <span class="name">Lovnish Verma</span> · © 2026</p>
+  </div>
+
+</div>
+
+<script>
+  // ── Audio Context for waveform ─��
+  let audioContext, analyser, dataArray, source;
+  const NUM_BARS = 22;
+
+  const wf = document.getElementById('waveform');
+  for (let i = 0; i < NUM_BARS; i++) {
+    const b = document.createElement('div');
+    b.className = 'wave-bar';
+    wf.appendChild(b);
+  }
+
+  let selectedLang = 'en-IN', selectedTone = 'clear';
+  let mediaRecorder, audioChunks = [], timerInterval, seconds = 0;
+  let isRecording = false, waveAnim;
+  const history = [];
+  let cooldownInterval = null;
+
+  // ── Language Selectors ──
+  document.querySelectorAll('.lang-btn').forEach(b => {
+    b.addEventListener('click', () => {
+      document.querySelectorAll('.lang-btn').forEach(x => x.classList.remove('active'));
+      b.classList.add('active');
+      selectedLang = b.dataset.lang;
+    });
+  });
+
+  // ── Tone Selectors ──
+  document.querySelectorAll('.tone-btn').forEach(b => {
+    b.addEventListener('click', () => {
+      document.querySelectorAll('.tone-btn').forEach(x => x.classList.remove('active'));
+      b.classList.add('active');
+      selectedTone = b.dataset.tone;
+    });
+  });
+
+  // ── Transcript word counter ──
+  const transcriptEl = document.getElementById('transcriptText');
+  transcriptEl.addEventListener('input', function () {
+    const wc = this.textContent.trim().split(/\s+/).filter(Boolean).length;
+    document.getElementById('wordCount').textContent = wc + ' words';
+  });
+  transcriptEl.addEventListener('paste', function(e) {
+    e.preventDefault();
+    const text = (e.originalEvent || e).clipboardData.getData('text/plain');
+    document.execCommand('insertText', false, text);
+  });
+
+  // ── Status ──
+  function setStatus(msg, type = '') {
+    const bar = document.getElementById('statusBar');
+    const txt = document.getElementById('statusText');
+    const dot = document.getElementById('statusDot');
+    txt.textContent = msg;
+    bar.className = 'status-bar ' + type;
+    dot.classList.toggle('hidden', !type);
+  }
+
+  // ── Timer ──
+  function updateTimer() {
+    seconds++;
+    const m = Math.floor(seconds / 60);
+    const s = seconds % 60;
+    const el = document.getElementById('timer');
+    el.textContent = `${m}:${s.toString().padStart(2, '0')}`;
+  }
+
+  // ── Waveform ──
+  function animateRealWave() {
+    if (!isRecording || !analyser) return;
+    waveAnim = requestAnimationFrame(animateRealWave);
+    analyser.getByteFrequencyData(dataArray);
+    const bars = document.querySelectorAll('.wave-bar');
+    const step = Math.floor(dataArray.length / NUM_BARS);
+    for (let i = 0; i < NUM_BARS; i++) {
+      const val = dataArray[i * step] || 0;
+      bars[i].style.height = (4 + (val / 255) * 22) + 'px';
+    }
+  }
+
+  function stopWave() {
+    cancelAnimationFrame(waveAnim);
+    document.querySelectorAll('.wave-bar').forEach(b => b.style.height = '4px');
+    if (audioContext && audioContext.state !== 'closed') audioContext.close();
+  }
+
+  // ── Record toggle ──
+  async function toggleRecord() {
+    if (!isRecording) await startRecord();
+    else stopRecord();
+  }
+
+  async function startRecord() {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      audioChunks = [];
+      mediaRecorder = new MediaRecorder(stream);
+      mediaRecorder.ondataavailable = e => { if (e.data.size > 0) audioChunks.push(e.data); };
+      mediaRecorder.start(100);
+
+      const AC = window.AudioContext || window.webkitAudioContext;
+      audioContext = new AC();
+      analyser = audioContext.createAnalyser();
+      source = audioContext.createMediaStreamSource(stream);
+      source.connect(analyser);
+      analyser.fftSize = 64;
+      dataArray = new Uint8Array(analyser.frequencyBinCount);
+
+      isRecording = true;
+      seconds = 0;
+      timerInterval = setInterval(updateTimer, 1000);
+      animateRealWave();
+      setOrbState('recording');
+      setStatus('Recording…');
+      document.getElementById('recCard').classList.add('is-recording');
+      document.getElementById('timer').classList.add('recording');
+    } catch (e) {
+      setStatus('Microphone access denied or unavailable', 'err');
+    }
+  }
+
+  function stopRecord() {
+    mediaRecorder.stop();
+    mediaRecorder.stream.getTracks().forEach(t => t.stop());
+    clearInterval(timerInterval);
+    stopWave();
+    isRecording = false;
+    setOrbState('processing');
+    setStatus('Processing audio…');
+    document.getElementById('recCard').classList.remove('is-recording');
+    document.getElementById('timer').classList.remove('recording');
+
+    mediaRecorder.onstop = async () => {
+      const blob = new Blob(audioChunks, { type: 'audio/webm' });
+      await sendToServer(blob, 'audio.webm');
+    };
+  }
+
+  async function handleUpload(e) {
+    const file = e.target.files[0];
+    if (!file) return;
+    setOrbState('processing');
+    setStatus('Uploading and processing…');
+    await sendToServer(file, file.name);
+    e.target.value = '';
+  }
+
+  async function sendToServer(blob, filename) {
+    const form = new FormData();
+    form.append('audio', blob, filename);
+    form.append('language', selectedLang);
+    try {
+      const res = await fetch('/transcribe', { method: 'POST', body: form });
+      const data = await res.json();
+      if (data.success) {
+        showTranscript(data.transcript);
+        setStatus('Transcription complete', 'ok');
+      } else {
+        let errMsg = data.error || 'Transcription failed';
+        if (errMsg.toLowerCase().includes('quota') || errMsg.includes('429')) {
+          errMsg = 'API rate limit reached. Please wait a moment and try again.';
+        }
+        setStatus(errMsg, 'err');
+      }
+    } catch (e) {
+      setStatus('Network or server error: ' + e.message, 'err');
+    }
+    setOrbState('idle');
+  }
+
+  // ── Orb States ──
+  function setOrbState(state) {
+    const btn = document.getElementById('recBtn');
+    const icon = document.getElementById('orbIcon');
+    const label = document.getElementById('recLabel');
+    const timer = document.getElementById('timer');
+
+    btn.className = 'rec-orb ' + state;
+
+    if (state === 'idle') {
+      icon.innerHTML = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="22" height="22">
+        <rect x="8.5" y="2" width="7" height="12" rx="3.5" fill="currentColor"/>
+        <path d="M5 11c0 3.866 3.134 7 7 7s7-3.134 7-7" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+        <line x1="12" y1="18" x2="12" y2="22" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+        <line x1="9" y1="22" x2="15" y2="22" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+      </svg>`;
+      label.textContent = 'tap to record';
+      timer.textContent = '0:00';
+      icon.style.color = 'var(--ink2)';
+    } else if (state === 'recording') {
+      icon.innerHTML = `<svg viewBox="0 0 24 24" fill="none" width="22" height="22">
+        <rect x="6" y="6" width="12" height="12" rx="2" fill="white"/>
+      </svg>`;
+      icon.style.color = 'white';
+      label.textContent = 'recording — tap to stop';
+    } else {
+      icon.innerHTML = `<svg viewBox="0 0 24 24" fill="none" width="22" height="22">
+        <path d="M12 2a10 10 0 1 0 10 10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+      </svg>`;
+      icon.style.color = 'var(--ink3)';
+      icon.style.animation = 'spin 0.7s linear infinite';
+      label.textContent = 'processing…';
+    }
+    if (state !== 'processing') icon.style.animation = '';
+  }
+
+  // ── Show / hide panels with animation ──
+  function revealPanel(id) {
+    const el = document.getElementById(id);
+    el.classList.remove('hidden');
+    setTimeout(() => el.classList.add('shown'), 20);
+  }
+
+  function showTranscript(text) {
+    transcriptEl.textContent = text;
+    transcriptEl.dispatchEvent(new Event('input'));
+    revealPanel('transcriptCard');
+    revealPanel('refineSection');
+  }
+
+  // ── Cooldown ──
+  function startCooldownTimer(secs) {
+    const btn = document.getElementById('refineBtn');
+    btn.disabled = true;
+    btn.classList.add('cooldown');
+    let remaining = secs;
+    if (cooldownInterval) clearInterval(cooldownInterval);
+    cooldownInterval = setInterval(() => {
+      if (remaining <= 0) {
+        clearInterval(cooldownInterval);
+        cooldownInterval = null;
+        btn.disabled = false;
+        btn.classList.remove('cooldown');
+        btn.innerHTML = 'Refine with Gemini <span class="btn-arrow">↗</span>';
+        setStatus('Ready to retry. Click the button again.', 'ok');
+      } else {
+        btn.innerHTML = `Locked — wait ${remaining}s`;
+        setStatus(`API quota reached. Please wait ${remaining} seconds.`, 'err');
+        remaining--;
+      }
+    }, 1000);
+  }
+
+  // ── Refine ──
+  async function refinePrompt() {
+    const transcript = transcriptEl.textContent.trim();
+    if (!transcript) { setStatus('No transcript to refine', 'err'); return; }
+
+    const btn = document.getElementById('refineBtn');
+    btn.disabled = true;
+    btn.innerHTML = `Engineering prompt… <span class="spin"></span>`;
+    setStatus('Engineering prompt with Gemini…');
+
+    await new Promise(r => setTimeout(r, 600));
+
+    try {
+      const res = await fetch('/refine', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ transcript, tone: selectedTone })
+      });
+      const data = await res.json();
+
+      if (data.success) {
+        showPrompt(data.prompt, transcript);
+        setStatus('Prompt ready', 'ok');
+        btn.disabled = false;
+        btn.innerHTML = 'Refine with Gemini <span class="btn-arrow">↗</span>';
+      } else {
+        let errMsg = data.error || 'Refinement failed';
+        if (errMsg.includes('Quota exceeded') || errMsg.includes('429') || errMsg.includes('rate-limit')) {
+          if (errMsg.includes('limit: 20') || errMsg.includes('free_tier_requests') || errMsg.includes('daily')) {
+            setStatus('Google API Daily Quota Exhausted. Update backend to gemini-2.0-flash to fix.', 'err');
+            if (cooldownInterval) clearInterval(cooldownInterval);
+            btn.disabled = true;
+            btn.classList.add('cooldown');
+            btn.innerHTML = 'Daily Limit Reached';
+            return;
+          }
+          const timeMatch = errMsg.match(/retry in ([\d.]+)\s*s?/i);
+          if (timeMatch) {
+            startCooldownTimer(Math.ceil(parseFloat(timeMatch[1])) + 5);
+          } else {
+            startCooldownTimer(60);
+          }
+          return;
+        }
+        setStatus(errMsg, 'err');
+        btn.disabled = false;
+        btn.innerHTML = 'Refine with Gemini <span class="btn-arrow">↗</span>';
+      }
+    } catch (e) {
+      setStatus('Network or server error: ' + e.message, 'err');
+      btn.disabled = false;
+      btn.innerHTML = 'Refine with Gemini <span class="btn-arrow">↗</span>';
+    }
+  }
+
+  function showPrompt(text, original) {
+    document.getElementById('promptText').textContent = text;
+    revealPanel('promptCard');
+    addHistory(text, original);
+    setTimeout(() => document.getElementById('promptCard').scrollIntoView({ behavior: 'smooth', block: 'nearest' }), 100);
+  }
+
+  // ── Copy ──
+  function copyPrompt() {
+    const text = document.getElementById('promptText').textContent;
+    const done = () => {
+      const b = document.querySelector('.copy-btn');
+      b.textContent = 'Copied!';
+      setTimeout(() => b.textContent = 'Copy', 1800);
+    };
+    if (navigator.clipboard && window.isSecureContext) {
+      navigator.clipboard.writeText(text).then(done);
+    } else {
+      const ta = document.createElement('textarea');
+      ta.value = text;
+      ta.style.position = 'fixed';
+      document.body.appendChild(ta);
+      ta.focus(); ta.select();
+      try { document.execCommand('copy'); done(); } catch {}
+      document.body.removeChild(ta);
+    }
+  }
+
+  // ── History ──
+  function addHistory(prompt, original) {
+    const now = new Date();
+    const time = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    if (history.length > 0 && history[0].prompt === prompt) return;
+    history.unshift({ prompt, original, time, tone: selectedTone });
+    if (history.length > 10) history.pop();
+    renderHistory();
+  }
+
+  function renderHistory() {
+    const list = document.getElementById('historyList');
+    const wrap = document.getElementById('historyWrap');
+    list.innerHTML = '';
+    history.forEach((h, i) => {
+      const el = document.createElement('div');
+      el.className = 'history-item';
+      el.innerHTML = `
+        <div class="history-num">${String(i+1).padStart(2,'0')}</div>
+        <div class="history-content">
+          <div class="history-snippet">${h.prompt}</div>
+          <div class="history-meta">${h.time}</div>
+        </div>
+        <div class="history-tone">${h.tone}</div>
+      `;
+      el.onclick = () => {
+        showTranscript(h.original);
+        document.getElementById('promptText').textContent = h.prompt;
+        revealPanel('promptCard');
+        document.querySelectorAll('.tone-btn').forEach(b => {
+          b.classList.toggle('active', b.dataset.tone === h.tone);
+          if (b.dataset.tone === h.tone) selectedTone = h.tone;
+        });
+        setStatus('');
+      };
+      list.appendChild(el);
+    });
+    wrap.classList.remove('hidden');
+  }
+</script>
+</body>
+</html>

test-gemini-api.py

@@ -0,0 +1,44 @@
+import os
+import google.generativeai as genai
+from dotenv import load_dotenv
+
+load_dotenv()
+
+api_key = os.getenv("GEMINI_API_KEY")
+if not api_key:
+    print("❌ Error: GEMINI_API_KEY is missing.")
+    exit(1)
+
+genai.configure(api_key=api_key)
+
+def check_connectivity():
+    print("🔄 Checking Gemini API Connectivity...\n")
+
+    try:
+        print("--- Available Models for Generation ---")
+        for m in genai.list_models():
+            if 'generateContent' in m.supported_generation_methods:
+                print(f"✅ {m.name}")
+                
+    except Exception as e:
+        print(f"❌ Failed to connect. Error: {e}")
+        return
+
+    # Explicitly using a model we know is on your account
+    test_model_name = "models/gemini-2.5-flash"
+
+    print(f"\n--- Testing connection using: {test_model_name} ---")
+    
+    try:
+        model = genai.GenerativeModel(test_model_name)
+        response = model.generate_content("Hello! This is an API connectivity test. Please reply only with: 'Connection successful!'")
+        
+        print("\nResponse received:")
+        print(f"> {response.text.strip()}\n")
+        print("✅ API Connectivity is fully functional!")
+        
+    except Exception as e:
+        print(f"❌ Failed to generate content with {test_model_name}.\nError Details: {e}")
+
+if __name__ == "__main__":
+    check_connectivity()