Transcription API

<!-- Container for invoice upload -->
<div>
    <label for="invoiceFileInput">Select Invoice:</label>
    <input type="file" id="invoiceFileInput" accept=".pdf,.jpg,.jpeg,.png">
    <button id="uploadButton">Transcribe Invoice</button>
</div>

<!-- Area to display status and results -->
<div id="statusArea" style="margin-top: 15px;"></div>

<!-- Container for the JSON response (hidden by default) -->
<pre id="responseContainer" style="display:none;"><code class="language-json"></code></pre>

document.addEventListener("DOMContentLoaded", () => {
    const fileInput = document.getElementById("invoiceFileInput");
    const uploadButton = document.getElementById("uploadButton");
    const statusArea = document.getElementById("statusArea");
    const responseContainer = document.getElementById("responseContainer");
    const jsonCodeBlock = responseContainer.querySelector("code");

    // IMPORTANT: Manage your API Key securely.
    // Never expose it directly in frontend code in production.
    const API_KEY = "YOUR_X-CAPDATA-TOKEN_HERE";
    const API_ENDPOINT = "https://capdata.es/api/transcribe-invoice";

    uploadButton.addEventListener("click", async () => {
        const file = fileInput.files[0];

        if (!file) {
            statusArea.textContent = "Please select a file first.";
            return;
        }

        // --- 1. Prepare the request ---
        const formData = new FormData();
        formData.append("files", file); // The key must be "files"

        // --- 2. Update UI and make the call ---
        statusArea.textContent = "Transcribing, please wait...";
        uploadButton.disabled = true;
        responseContainer.style.display = "none";

        try {
            const response = await fetch(API_ENDPOINT, {
                method: "POST",
                headers: {
                    "X-CapData-Token": API_KEY
                },
                body: formData
            });

            const responseData = await response.json();

            if (!response.ok) {
                // If the API returns an error (4xx, 5xx), we throw it
                throw new Error(responseData.error || `HTTP Error: ${response.status}`);
            }

            // --- 3. Process the successful response ---
            statusArea.textContent = "Transcription completed successfully!";
            jsonCodeBlock.textContent = JSON.stringify(responseData, null, 2);
            responseContainer.style.display = "block";

            // Optional: Highlight syntax if you use Prism.js
            if (window.Prism) {
                Prism.highlightElement(jsonCodeBlock);
            }
            
            // Here you would save `responseData.results[0].full_view_url`
            // to use in Phase 2.

        } catch (error) {
            statusArea.textContent = `Error: ${error.message}`;
            console.error("Error in transcription:", error);
        } finally {
            uploadButton.disabled = false;
        }
    });
});