<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AIScribe | Text Recognition from Images</title>
    <meta name="description" content="Free online OCR tool to extract text from images using AI technology.">
    <meta name="keywords" content="OCR, Text recognition, AI OCR, image to text, extract text from image online, extract text from image, PDF OCR">
    <meta name="author" content="AIScribe by Emojisama">
    
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://getaiscribe.com/">
    <meta property="og:title" content="AIScribe OCR | Text Recognition">
    <meta property="og:description" content="Free OCR tool to extract text from images.">
    <meta property="og:image" content="https://getaiscribe.com/favicon/android-chrome-512x512.png">

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://getaiscribe.com/">
    <meta property="twitter:title" content="AIScribe OCR | Text Recognition">
    <meta property="twitter:description" content="Free OCR tool to extract text from images.">
    <meta property="twitter:image" content="https://getaiscribe.com/favicon/android-chrome-512x512.png">
    
    <!-- Canonical URL -->
    <link rel="canonical" href="https://getaiscribe.com/">
    
    <!-- Favicon links -->
    <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
    <link rel="manifest" href="/favicon/site.webmanifest">
    <link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">
    <meta name="google-adsense-account" content="ca-pub-4461919902418559">
    
    <!-- CSS and Font links -->
    <link rel="stylesheet" href="styles.css">
    <!-- Removed reference to language-button.css -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Suwannaphum:wght@400;700&display=swap" rel="stylesheet">


    <!-- Clerk SDK -->
    <script>
        // Make Clerk Publishable Key available globally
        window.clerkPublishableKey = "pk_live_Y2xlcmsuZ2V0YWlzY3JpYmUuY29tJA";
    </script>
    <script
        async
        crossorigin="anonymous"
        data-clerk-publishable-key="pk_live_Y2xlcmsuZ2V0YWlzY3JpYmUuY29tJA"
        src="https://accounts.getaiscribe.com/npm/@clerk/clerk-js@latest/dist/clerk.browser.js"
        type="text/javascript"
    ></script>
    <!-- Load Fingerprint2 for device fingerprinting -->
    <script src="https://cdn.jsdelivr.net/npm/fingerprintjs2@2.1.4/dist/fingerprint2.min.js"></script>
    <!-- Add Supabase and JWT dependencies -->
    <script src="https://unpkg.com/@supabase/supabase-js@2"></script>
    <script src="https://unpkg.com/jwt-decode@3.1.2/build/jwt-decode.js"></script>
    
    <!-- Add Supabase JS from CDN with correct content type -->
    <script src="https://unpkg.com/@supabase/supabase-js@2/dist/umd/supabase.js"></script>
    
    <!-- Load error-handler.js early -->
    <script src="error-handler.js"></script>
    
    <!-- Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-NM1X8PGQ30"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());
        gtag('config', 'G-NM1X8PGQ30');
    </script>

    <!-- Inline styles -->
    <style>
        body {
            font-family: 'Suwannaphum', serif;
        }
        h1, h2, h3, h4, h5, h6, button, .primary-button, .secondary-button, .action-button {
            font-family: 'Suwannaphum', serif;
        }
    </style>
</head>
<body>
    <!-- Theme initialization script to prevent flashing -->
    <script>
        (function() {
            const savedTheme = localStorage.getItem('dark-theme');
            if (savedTheme === 'true') {
                document.documentElement.setAttribute('data-theme', 'dark');
            } else {
                document.documentElement.setAttribute('data-theme', 'light');
            }
        })();
    </script>

    <div class="container">
        <header class="app-header">
            <div class="header-top">
                <div class="left-section">
                    <h1 class="logo">AIScribe</h1>
                </div>
                <div class="user-section">
                    <a href="https://kh.getaiscribe.com" class="khmer-flag-link" title="ភាសាខ្មែរ - Khmer Version">
                        <img src="qr/cambodia.png" alt="Khmer Flag" class="khmer-flag">
                    </a>
                    <button id="theme-toggle" class="theme-toggle" aria-label="Toggle dark mode">
                        <i class="fas fa-moon"></i>
                    </button>
                    <button id="sign-in-button" class="action-button hidden">
                        <i class="fas fa-sign-in-alt"  title="log in"></i>
                    </button>
                    <div id="user-button" class="hidden"></div>
                </div>
            </div>
            <p class="subtitle">Free text extraction from images using AI</p>
            <div class="usage-counter">
                <p>Daily usage: <span id="usage-count">0</span>/<span id="usage-limit">3</span></p>
            </div>
        </header>
     
        <main>
            <div class="upload-container" id="upload-area">
                
                <div class="upload-content" id="drop-area">
                    <i class="fas fa-cloud-upload-alt"></i>
                    <p>Drag and drop images here</p>
                    <p>or</p>
                    <label for="file-input" class="upload-button">Select File</label>
                    <input type="file" id="file-input" accept="image/*" hidden>
                </div>
                <div class="supported-formats">
                    <h4><i class="fas fa-info-circle"></i> Supported File Types</h4>
                    <p>For best results, please use the following file types:</p>
                    <div class="format-list">
                        <div class="format-item"><strong>Images:</strong> JPG, JPEG, PNG, GIF, BMP, WEBP</div>
                        <div class="format-item"><strong>Documents:</strong> PDF (first page only)</div>
                        <div class="format-item"><strong>Maximum file size:</strong> 5MB</div>
                    </div>
                    <p class="format-tips">
                        <i class="fas fa-lightbulb"></i> <strong>Tip:</strong> Clear, high-quality images with good lighting will give the best results!
                    </p>
                </div>
            </div>

            <div class="preview-container hidden" id="preview-container">
                <div class="preview-header">
                    <h3>Selected Image</h3>
                    <button id="change-image" class="action-button">
                        <i class="fas fa-redo"></i> Change Image
                    </button>
                </div>
                <div class="image-preview">
                    <img id="preview-image" src="#" alt="Image to process">
                </div>
                <div id="progress-container" class="progress-container hidden">
                    <div class="progress-bar">
                        <div class="progress-bar-fill"></div>
                        <div class="progress-text">AI is extracting text...</div>
                    </div>
                </div>
                <button id="extract-text" class="primary-button"><i class="fas fa-magic"></i> Extract Text</button>
              </div>

            <div class="results-container hidden" id="results-container">
                <div class="results-header">
                    <h3>Extracted Text</h3>
                    <div class="actions">
                        <button id="copy-text" class="action-button">
                            <i class="fas fa-copy"></i> Copy
                        </button>
                        <button id="download-text" class="action-button">
                            <i class="fas fa-download"></i> Download
                        </button>
                    </div>
                </div>
                <div class="results-content">
                    <textarea id="extracted-text" readonly></textarea>
                </div>
              
            </div>

            <section id="history-section" class="history-section hidden">
                <div class="history-header">
                    <h3>Usage History</h3>
                    <div class="actions">
                        <button id="download-all" class="action-button">
                            <i class="fas fa-download"></i> Download All
                        </button>
                    </div>
                </div>
                <div id="history-items" class="history-items">
                    <!-- History items will be populated here by JavaScript -->
                </div>
            </section>
        </main>

        <div class="notice-section">
            <h3>📍About AIScribe📍</h3>
            <p>📢 This application uses AI technology to extract text from images or PDFs. Processing happens in your browser. We do not store your images in any form.</p>
            <p>✨ You can use it <strong>3 times</strong> without creating an account, or <strong>10 times</strong> per day if you create an account. Users with accounts can access their text extraction history.</p>
            <p class="note">💡Note: The accuracy of the text extraction may vary depending on image quality, text clarity, and font type. The amount of text will also affect the extraction time.</p>
        </div>

        <footer>
            <p>© 2025 AIScribe | Made with ❤️ by Emojisama</p>
            <a href="privacy.html">Privacy Policy</a>
            <a href="faq.html">Frequently Asked Questions</a>
        </footer>
    </div>

    <!-- JSON-LD structured data for better SEO -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "WebApplication",
        "name": "AIScribe OCR",
        "url": "https://getaiscribe.com",
        "description": "Free online OCR tool to extract text from images using AI technology.",
        "applicationCategory": "Utility",
        "operatingSystem": "Web browser",
        "offers": {
            "@type": "Offer",
            "price": "0",
            "priceCurrency": "USD"
        },
        "inLanguage": ["en"],
        "creator": {
            "@type": "Organization",
            "name": "AIScribe",
            "url": "https://getaiscribe.com"
        }
    }
    </script>

    <!-- Application scripts -->
    <script src="error-handler.js"></script>
    <script src="supabase-client.js" type="text/javascript"></script>
    <script src="script.js" defer></script>
    <!-- Removed reference to language-button.js -->
    <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9264a89e292d677b',t:'MTc0Mjk3MTI0OC4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>
    <script>
        // Replace the old usage limit check
        function checkUsageLimit(currentUsage, maxUsage) {
            if (currentUsage >= maxUsage) {
                // Instead of showing old popup, use our new modal system
                const isLoggedIn = window.Clerk && window.Clerk.user;
                showLimitReachedModal(isLoggedIn);
                return false;
            }
            return true;
        }
    </script>
<!-- Cloudflare Pages Analytics --><script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "a1b76ef4305c4fe89fc4ad226d3262e5"}'></script><!-- Cloudflare Pages Analytics --></body>
</html>
