sameernotes/slimshadow-ocr
1
1<!-- this is index.html (Tailwind UI with Auth, OCR, Translation, Gender - Fixed Nav & OCR Prediction - REVISED OCR OUTPUT LAYOUT) -->2<!DOCTYPE html>3<html lang="en" class=""> <!-- Start without 'dark' initially -->4<head>5 <meta charset="UTF-8">6 <meta name="viewport" content="width=device-width, initial-scale=1.0">7 <title>AI Text Analysis - NIC Project</title>8 <!-- Tailwind CSS via CDN -->9 <script src="https://cdn.tailwindcss.com/3.4.1"></script>10 <script>11 // Tailwind config12 tailwind.config = {13 darkMode: 'class',14 theme: {15 extend: {16 colors: { primary: '#1a73e8', secondary: '#e8f0fe' },17 borderRadius: { 'none': '0px', 'sm': '4px', DEFAULT: '8px', 'md': '12px', 'lg': '16px', 'xl': '20px', '2xl': '24px', '3xl': '32px', 'full': '9999px', 'button': '8px' }18 }19 }20 }21 </script>22 <!-- Fonts -->23 <link rel="preconnect" href="https://fonts.googleapis.com">24 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>25 <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">26 <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari:wght@400;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">27 <!-- Icons -->28 <link href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css" rel="stylesheet">29 <!-- Custom Styles -->30 <style>31 body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }32 .hindi-font { font-family: 'Noto Sans Devanagari', sans-serif; }33 .custom-switch { position: relative; display: inline-block; width: 50px; height: 24px; }34 .custom-switch-input { opacity: 0; width: 0; height: 0; }35 .custom-switch-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; }36 .custom-switch-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }37 .custom-switch-input:checked + .custom-switch-slider { background-color: #1a73e8; }38 .custom-switch-input:checked + .custom-switch-slider:before { transform: translateX(26px); }39 *:focus-visible { outline: 2px solid #1a73e8; outline-offset: 2px; box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.3); }40 /* Base Dark Mode */41 html.dark body { background-color: #1a202c; color: #e2e8f0; }42 html.dark header, html.dark footer { background-color: #2d3748; color: #e2e8f0; }43 html.dark .card, html.dark .auth-card, html.dark .result-card { background-color: #2d3748; border-color: #4a5568; }44 html.dark h1, html.dark h2, html.dark h3, html.dark p, html.dark span, html.dark li, html.dark label, html.dark small, html.dark strong, html.dark button:not(.bg-red-500):not(.bg-green-600), html.dark a { color: #e2e8f0; } /* Adjusted a selector */45 html.dark a.text-primary { color: #60a5fa; } /* Make sure primary links are visible */46 html.dark .text-gray-600, html.dark .text-gray-700, html.dark .text-gray-800, html.dark .text-gray-900 { color: #a0aec0; }47 html.dark .text-gray-500, html.dark .text-gray-400 { color: #718096; }48 html.dark .text-muted { color: #718096; }49 html.dark .bg-white { background-color: #2d3748 !important; }50 html.dark .bg-gray-50 { background-color: #1a202c !important; }51 html.dark .bg-gray-100 { background-color: #374151 !important; }52 html.dark .border-gray-100, html.dark .border-gray-200 { border-color: #4a5568 !important; }53 html.dark .hover\:bg-gray-50:hover { background-color: #4a5568 !important; }54 /* Dark mode Forms */55 html.dark input, html.dark textarea { background-color: #1f2937; border-color: #4b5563; color: #e5e7eb; }56 html.dark input::placeholder, html.dark textarea::placeholder { color: #6b7280; }57 html.dark .auth-link { color: #60a5fa; } html.dark .auth-link:hover { color: #93c5fd; }58 html.dark .error-message { background-color: #450a0a; color: #fecaca; border-color: #7f1d1d; }59 html.dark .spinner { border-color: rgba(255, 255, 255, 0.1); border-left-color: #60a5fa; }60 /* Example Images */61 .example-image-container { cursor: pointer; transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; border: 1px solid transparent; aspect-ratio: 1 / 1; }62 .example-image-container:hover { transform: scale(1.05); box-shadow: 0 4px 8px rgba(0,0,0,0.1); }63 .example-image-container.selected { border: 2px solid #1a73e8; box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.3); }64 .example-image { width: 100%; height: 100%; object-fit: contain; }65 html.dark .example-image-container.selected { border-color: #60a5fa; box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.3); }66 html.dark .example-image-container { background-color: #4a5568; }67 /* General Loading Spinner */68 .spinner { border: 3px solid rgba(255, 255, 255, 0.3); width: 16px; height: 16px; border-radius: 50%; border-left-color: #fff; animation: spin 1s ease infinite; }69 @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }70 /* Error Message Styling */71 .error-message { color: #dc2626; background-color: #fee2e2; padding: 0.75rem 1rem; border-radius: 8px; margin-top: 1rem; font-weight: 500; border: 1px solid #fecaca; font-size: 0.9rem; display: none; }72 /* Result Images */73 .result-image { max-width: 100%; height: auto; display: block; margin: 1rem auto 0 auto; border: 1px solid; border-radius: 8px; background-color: #eee; min-height: 100px; } /* Centered result image */74 html.dark .result-image { background-color: #4a5568; border-color: #4a5568;}75 /* Tab Styling */76 .tab-button { transition: all 0.3s ease; border-bottom: 3px solid transparent; }77 .tab-button.active { border-bottom-color: #1a73e8; color: #1a73e8; font-weight: 600; }78 html.dark .tab-button.active { border-bottom-color: #60a5fa; color: #60a5fa; }79 .tab-content { display: none; animation: fadeIn 0.5s ease-in-out; }80 .tab-content.active { display: block; }81 @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }82 /* Result Styling Refinements */83 .result-card { background-color: #f9fafb; border: 1px solid #e5e7eb; margin-bottom: 1.5rem; padding: 1.5rem; border-radius: 8px; }84 html.dark .result-card { background-color: #374151; border-color: #4b5563; }85 .result-label { font-weight: 600; color: #4b5563; }86 html.dark .result-label { color: #9ca3af; }87 .result-value { font-weight: 500; word-break: break-word; }88 html.dark .result-value { color: #e5e7eb; }89 .result-item { display: grid; grid-template-columns: 1fr; gap: 0.25rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #e5e7eb; }90 html.dark .result-item { border-color: #4b5563; }91 .result-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }92 @media (min-width: 768px) { .result-item { grid-template-columns: 150px 1fr; gap: 1rem; align-items: start; } .result-label { text-align: right; } } /* Grid for larger screens */93 /* Loading Indicator general */94 .loading-indicator { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; margin: 1.5rem 0; color: #6b7280; }95 html.dark .loading-indicator { color: #9ca3af; }96 .loading-indicator .spinner { width: 24px; height: 24px; border-width: 3px; }97 98 </style>99</head>100<body class="bg-gray-50 dark:bg-gray-900 min-h-screen flex flex-col text-gray-900 dark:text-gray-200">101 102 <!-- Header -->103 <header class="bg-white dark:bg-gray-800 shadow-sm sticky top-0 z-50">104 <div class="container mx-auto px-4 py-3 flex items-center justify-between">105 <div class="flex items-center">106 <!-- *** Updated Brand Name *** -->107 <a href="/" class="text-2xl font-['Pacifico'] text-primary dark:text-blue-400 mr-8" data-lang-en="AI Text Tools" data-lang-hi="एआई टेक्स्ट उपकरण">AI Text Tools</a>108 <!-- *** RESTORED Navigation Links *** -->109 <nav id="mainNav" class="hidden md:flex space-x-6">110 <a href="index.html" class="nav-link hover:text-primary dark:hover:text-blue-400 text-gray-600 dark:text-gray-300" data-lang-en="Home" data-lang-hi="होम">Home</a>111 <a href="recognizer.html" class="nav-link hover:text-primary dark:hover:text-blue-400 text-primary dark:text-blue-400 font-medium" data-lang-en="Recognize" data-lang-hi="पहचानें">Recognize</a> <!-- Current page? -->112 <a href="examples.html" class="nav-link hover:text-primary dark:hover:text-blue-400 text-gray-600 dark:text-gray-300" data-lang-en="Examples" data-lang-hi="उदाहरण">Examples</a> <!-- Link to examples section? -->113 <a href="technology.html" class="nav-link hover:text-primary dark:hover:text-blue-400 text-gray-600 dark:text-gray-300" data-lang-en="Technology" data-lang-hi="तकनीक">Technology</a>114 <a href="about.html" class="nav-link hover:text-primary dark:hover:text-blue-400 text-gray-600 dark:text-gray-300" data-lang-en="About" data-lang-hi="बारे में">About</a>115 <a href="contact.html" class="nav-link hover:text-primary dark:hover:text-blue-400 text-gray-600 dark:text-gray-300" data-lang-en="contact" data-lang-hi="बारे में">contact</a>116 <a href="feedback.html" class="nav-link hover:text-primary dark:hover:text-blue-400 text-gray-600 dark:text-gray-300" data-lang-en="feedback" data-lang-hi="बारे में">feedback</a>117 </nav>118 </div>119 <!-- Right side header items (Theme, Lang, Logout, etc.) -->120 <div class="flex items-center space-x-4">121 <div class="items-center space-x-2 hidden md:flex"> <span class="text-sm text-gray-600 dark:text-gray-400">EN</span> <label class="custom-switch"><input type="checkbox" id="languageToggle" class="custom-switch-input"><span class="custom-switch-slider"></span></label> <span class="text-sm text-gray-600 dark:text-gray-400 hindi-font">हिंदी</span> </div>122 <div class="items-center space-x-2 hidden md:flex"> <span class="text-sm text-gray-600 dark:text-gray-400"><i class="ri-sun-line"></i></span> <label class="custom-switch"><input type="checkbox" id="themeToggle" class="custom-switch-input"><span class="custom-switch-slider"></span></label> <span class="text-sm text-gray-600 dark:text-gray-400"><i class="ri-moon-line"></i></span> </div>123 <button id="logoutButton" class="hidden bg-red-500 hover:bg-red-600 text-white px-3 py-1.5 rounded-button text-sm inline-flex items-center gap-1"> <i class="ri-logout-box-r-line"></i> <span data-lang-en="Logout" data-lang-hi="लॉग आउट">Logout</span> </button>124 <div id="userInfoIcons" class="hidden md:flex items-center space-x-4"> <div class="w-10 h-10 flex items-center justify-center bg-gray-100 dark:bg-gray-700 rounded-full cursor-pointer" title="User Profile (Placeholder)"><i class="ri-user-line text-gray-600 dark:text-gray-300"></i></div> </div>125 <button class="md:hidden w-10 h-10 flex items-center justify-center" aria-label="Toggle Menu"><i class="ri-menu-line text-gray-600 dark:text-gray-300 text-xl"></i></button>126 </div>127 </div>128 </header>129 130 <!-- ===== Authentication Container ===== -->131 <div id="authContainer" class="flex-grow flex items-center justify-center p-4">132 <!-- Login/Signup Forms (Keep as is) -->133 <div class="w-full max-w-md"> <form id="loginForm" class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md border border-gray-100 dark:border-gray-700 auth-card"> <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-white mb-6" data-lang-en="Login" data-lang-hi="लॉग इन करें">Login</h2> <div id="loginErrorDiv" class="error-message"></div> <div class="mb-4"> <label for="loginUsername" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" data-lang-en="Username" data-lang-hi="उपयोगकर्ता नाम">Username</label> <input type="text" id="loginUsername" required autocomplete="username" class="input-field w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white"> </div> <div class="mb-6"> <label for="loginPassword" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" data-lang-en="Password" data-lang-hi="पासवर्ड">Password</label> <input type="password" id="loginPassword" required autocomplete="current-password" class="input-field w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white"> </div> <button type="submit" id="loginSubmitButton" class="w-full flex justify-center items-center gap-2 py-2 px-4 border border-transparent rounded-button shadow-sm text-sm font-medium text-white bg-primary hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary dark:focus:ring-offset-gray-800 disabled:opacity-50"> <span data-lang-en="Login" data-lang-hi="लॉग इन करें">Login</span><div class="spinner hidden"></div> </button> <p class="mt-4 text-center text-sm text-gray-600 dark:text-gray-400"> <span data-lang-en="Don't have an account?" data-lang-hi="खाता नहीं है?">Don't have an account?</span> <a href="#" id="showSignupLink" class="font-medium text-primary hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 auth-link" data-lang-en="Sign up" data-lang-hi="साइन अप करें">Sign up</a> </p> </form> <form id="signupForm" class="hidden bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md border border-gray-100 dark:border-gray-700 auth-card"> <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-white mb-6" data-lang-en="Sign Up" data-lang-hi="साइन अप करें">Sign Up</h2> <div id="signupErrorDiv" class="error-message"></div> <div class="mb-4"><label for="signupUsername" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" data-lang-en="Username" data-lang-hi="उपयोगकर्ता नाम">Username</label><input type="text" id="signupUsername" required minlength="3" maxlength="50" autocomplete="username" class="input-field w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white"></div> <div class="mb-4"><label for="signupEmail" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" data-lang-en="Email" data-lang-hi="ईमेल">Email</label><input type="email" id="signupEmail" required autocomplete="email" class="input-field w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white"></div> <div class="mb-6"><label for="signupPassword" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" data-lang-en="Password (min. 6 chars)" data-lang-hi="पासवर्ड (न्यून. 6 अक्षर)">Password (min. 6 chars)</label><input type="password" id="signupPassword" required minlength="6" autocomplete="new-password" class="input-field w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white"></div> <button type="submit" id="signupSubmitButton" class="w-full flex justify-center items-center gap-2 py-2 px-4 border border-transparent rounded-button shadow-sm text-sm font-medium text-white bg-primary hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary dark:focus:ring-offset-gray-800 disabled:opacity-50"> <span data-lang-en="Sign Up" data-lang-hi="साइन अप करें">Sign Up</span><div class="spinner hidden"></div> </button> <p class="mt-4 text-center text-sm text-gray-600 dark:text-gray-400"> <span data-lang-en="Already have an account?" data-lang-hi="पहले से ही खाता है?">Already have an account?</span> <a href="#" id="showLoginLink" class="font-medium text-primary hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 auth-link" data-lang-en="Login" data-lang-hi="लॉग इन करें">Login</a> </p> </form> </div>134 </div>135 136 <!-- ===== Main Application Container ===== -->137 <main id="appContainer" class="hidden flex-grow container mx-auto px-4 py-8">138 139 <!-- Tab Navigation -->140 <div class="mb-6 border-b border-gray-200 dark:border-gray-700">141 <nav class="-mb-px flex space-x-6 overflow-x-auto" aria-label="Tabs"> <!-- Added overflow-x-auto -->142 <button class="tab-button active whitespace-nowrap py-4 px-1 text-sm font-medium flex items-center gap-2" data-tab="ocr"> <i class="ri-image-line text-lg"></i> <span data-lang-en="Hindi OCR" data-lang-hi="हिन्दी ओसीआर">Hindi OCR</span> </button>143 <button class="tab-button whitespace-nowrap py-4 px-1 text-sm font-medium flex items-center gap-2" data-tab="translation"> <i class="ri-translate-2 text-lg"></i> <span data-lang-en="Translation" data-lang-hi="अनुवाद">Translation</span> </button>144 <button class="tab-button whitespace-nowrap py-4 px-1 text-sm font-medium flex items-center gap-2" data-tab="gender"> <i class="ri-men-line text-lg"></i><i class="ri-women-line text-lg -ml-1"></i> <span data-lang-en="Gender Prediction" data-lang-hi="लिंग भविष्यवाणी">Gender Prediction</span> </button>145 </nav>146 </div>147 148 <!-- Tab Content Area -->149 <div>150 <!-- OCR Tab Content -->151 <div id="ocrContent" class="tab-content active">152 <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-8">153 <!-- Input Column -->154 <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-100 dark:border-gray-700 card">155 <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4 border-b border-gray-200 dark:border-gray-600 pb-2 flex items-center gap-2"> <i class="ri-image-add-line text-primary dark:text-blue-400"></i><span data-lang-en="Input Image" data-lang-hi="इनपुट छवि">Input Image</span> </h2>156 <p class="text-gray-600 dark:text-gray-400 text-sm mb-4" data-lang-en="Upload a Hindi word image (PNG, JPG, JPEG) or select an example." data-lang-hi="एक हिन्दी शब्द छवि (PNG, JPG, JPEG) अपलोड करें या उदाहरण चुनें।">Upload a Hindi word image (PNG, JPG, JPEG) or select an example.</p>157 <input type="file" id="imageUpload" accept="image/png, image/jpeg, image/jpg" class="hidden"/>158 <div class="flex items-center mb-4"><label for="imageUpload" class="bg-primary text-white px-4 py-2 rounded-button cursor-pointer hover:bg-blue-700 transition-colors text-sm inline-flex items-center mr-4 whitespace-nowrap gap-2"><i class="ri-upload-2-line"></i><span data-lang-en="Choose File" data-lang-hi="फ़ाइल चुनें">Choose File</span></label><span id="fileName" class="text-gray-500 dark:text-gray-400 text-sm italic truncate" data-lang-en="No file chosen" data-lang-hi="कोई फ़ाइल नहीं चुनी गई">No file chosen</span></div>159 <h3 class="text-md font-semibold text-gray-700 dark:text-gray-300 mb-2" data-lang-en="Examples" data-lang-hi="उदाहरण">Examples</h3>160 <div id="examplesContainer" class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-3 mb-4"><div class="col-span-full"><span id="examplesLoadingText" class="text-gray-500 dark:text-gray-400 text-sm" data-lang-en="Loading examples..." data-lang-hi="उदाहरण लोड हो रहे हैं...">Loading examples...</span></div></div>161 <div id="imagePreviewContainer" class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-600 hidden"><h3 class="text-md font-semibold text-gray-700 dark:text-gray-300 mb-2 text-center" data-lang-en="Preview" data-lang-hi="पूर्वावलोकन">Preview</h3><div class="flex justify-center items-center bg-gray-50 dark:bg-gray-700 dark:border-gray-600 rounded border p-1 min-h-[100px]"><img id="imagePreview" src="#" alt="Image Preview" class="max-h-60 w-auto rounded"/></div></div>162 <div class="mt-6 pt-4 border-t border-gray-200 dark:border-gray-600 flex gap-4">163 <button id="predictButton" class="flex-1 bg-green-600 text-white px-6 py-3 rounded-button font-medium hover:bg-green-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-lg inline-flex items-center justify-center gap-2" disabled><i class="ri-search-line"></i><span data-lang-en="Recognize" data-lang-hi="पहचानें">Recognize</span></button>164 <button id="clearButton" class="flex-none bg-gray-200 hover:bg-gray-300 dark:bg-gray-600 dark:hover:bg-gray-500 text-gray-800 dark:text-gray-200 px-4 py-3 rounded-button text-lg inline-flex items-center justify-center gap-2 hidden"><i class="ri-delete-bin-line"></i><span data-lang-en="Clear" data-lang-hi="साफ़ करें">Clear</span></button>165 </div>166 <div id="errorMessage" class="error-message mt-4"></div>167 </div>168 169 <!-- ***** MODIFIED Output Column ***** -->170 <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-100 dark:border-gray-700 flex flex-col items-center card">171 <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4 border-b border-gray-200 dark:border-gray-600 pb-2 w-full text-center flex items-center justify-center gap-2"><i class="ri-text text-primary dark:text-blue-400"></i><span data-lang-en="Recognition Result" data-lang-hi="पहचान परिणाम">Recognition Result</span></h2>172 <div id="loadingIndicator" class="loading-indicator w-full"><div class="spinner"></div><span id="loadingText" data-lang-en="Processing... Please wait." data-lang-hi="संसाधित हो रहा है... कृपया प्रतीक्षा करें।">Processing...</span></div>173 <div id="resultDisplay" class="mt-4 w-full text-center hidden space-y-6">174 175 <!-- *** MOVED Word Detection Section First *** -->176 <div class="result-card !p-4"> <!-- Adjusted padding -->177 <h3 class="text-md font-semibold text-center mb-2" data-lang-en="Word Detection" data-lang-hi="शब्द पहचान">Word Detection</h3>178 <img id="wordDetectionImg" src="#" alt="Word Detection Preview" class="result-image" style="display: none;">179 </div>180 181 <!-- *** REMOVED Recognized Text Section *** -->182 <!-- The div containing ocrRecognizedText and wordCountText has been deleted -->183 184 <!-- Raw Detector Output Section (Now Second) -->185 <div class="result-card">186 <h3 class="text-md font-semibold mb-2" data-lang-en="Raw Detector Output:" data-lang-hi="रॉ डिटेक्टर आउटपुट:">Raw Detector Output:</h3>187 <pre id="sakshiOutputText" class="text-xs text-left whitespace-pre-wrap break-words max-h-40 overflow-y-auto bg-gray-50 dark:bg-gray-800 p-2 rounded border border-gray-200 dark:border-gray-600"></pre>188 </div>189 190 </div>191 <p id="initialMessageOutput" class="text-gray-500 dark:text-gray-400 mt-6 text-center" data-lang-en="Results will appear here." data-lang-hi="परिणाम यहां दिखाई देंगे।">Results will appear here.</p>192 </div>193 <!-- ***** End of MODIFIED Output Column ***** -->194 195 </div>196 </div>197 198 <!-- Translation Tab Content -->199 <div id="translationContent" class="tab-content">200 <div class="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">201 <!-- Translation Input -->202 <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-100 dark:border-gray-700 card">203 <h2 class="text-xl font-semibold mb-4 border-b pb-2 flex items-center gap-2"><i class="ri-translate-2 text-primary dark:text-blue-400"></i><span data-lang-en="Translate Text" data-lang-hi="पाठ का अनुवाद करें">Translate Text</span></h2>204 <div class="mb-4">205 <label for="textToTranslate" class="block text-sm font-medium mb-1" data-lang-en="Text to Translate:" data-lang-hi="अनुवाद के लिए पाठ:">Text to Translate:</label>206 <textarea id="textToTranslate" rows="5" placeholder="Enter text here or use OCR output..." class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm dark:bg-gray-700 dark:border-gray-600"></textarea>207 </div>208 <div class="mb-4">209 <label for="sourceLanguage" class="block text-sm font-medium mb-1" data-lang-en="Source Language (Optional):" data-lang-hi="स्रोत भाषा (वैकल्पिक):">Source Language (Optional):</label>210 <input type="text" id="sourceLanguage" placeholder="Leave empty for auto-detection" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm dark:bg-gray-700 dark:border-gray-600">211 </div>212 <div class="mb-4">213 <label for="targetLanguage" class="block text-sm font-medium mb-1" data-lang-en="Target Language:" data-lang-hi="लक्ष्य भाषा:">Target Language:</label>214 <input type="text" id="targetLanguage" placeholder="e.g., English, Hindi, French" required class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm dark:bg-gray-700 dark:border-gray-600">215 <p class="text-xs text-gray-500 dark:text-gray-400 mt-1" data-lang-en="Enter target language name (e.g., English)." data-lang-hi="लक्ष्य भाषा का नाम दर्ज करें (उदा., English)।">Enter target language name (e.g., English).</p>216 </div>217 <button id="translateButton" class="w-full bg-primary text-white px-4 py-2 rounded-button hover:bg-blue-700 transition-colors inline-flex items-center justify-center gap-2">218 <i class="ri-translate"></i><span data-lang-en="Translate" data-lang-hi="अनुवाद करें">Translate</span>219 </button>220 <div id="translationError" class="error-message mt-4"></div>221 </div>222 <!-- Translation Output -->223 <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-100 dark:border-gray-700 card">224 <h2 class="text-xl font-semibold mb-4 border-b pb-2 flex items-center gap-2"><i class="ri-chat-check-line text-primary dark:text-blue-400"></i><span data-lang-en="Translation Result" data-lang-hi="अनुवाद परिणाम">Translation Result</span></h2>225 <div id="translationLoading" class="loading-indicator"><div class="spinner"></div><span data-lang-en="Translating..." data-lang-hi="अनुवाद हो रहा है...">Translating...</span></div>226 <div id="translationResultDisplay" class="hidden space-y-4">227 <div class="result-item !border-none !pb-0"> <div class="result-label" data-lang-en="Source Language:" data-lang-hi="स्रोत भाषा:">Source Language:</div> <div id="detectedSourceLanguage" class="result-value font-medium"></div> </div>228 <div class="result-item !border-none !pb-0"> <div class="result-label" data-lang-en="Target Language:" data-lang-hi="लक्ष्य भाषा:">Target Language:</div> <div id="translationTargetLanguage" class="result-value font-medium"></div> </div>229 <div class="mt-2"> <div class="result-label mb-1" data-lang-en="Translated Text:" data-lang-hi="अनुवादित पाठ:">Translated Text:</div> <div id="translatedText" class="result-value p-3 bg-gray-100 dark:bg-gray-700 rounded border border-gray-200 dark:border-gray-600 min-h-[100px] whitespace-pre-wrap"></div> </div>230 </div>231 <p id="initialMessageTranslation" class="text-gray-500 dark:text-gray-400 mt-6 text-center" data-lang-en="Enter text and languages, then click Translate." data-lang-hi="पाठ और भाषाएँ दर्ज करें, फिर अनुवाद करें पर क्लिक करें।">Enter text and languages, then click Translate.</p>232 </div>233 </div>234 </div>235 236 <!-- Gender Prediction Tab Content -->237 <div id="genderContent" class="tab-content">238 <div class="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">239 <!-- Gender Input -->240 <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-100 dark:border-gray-700 card">241 <h2 class="text-xl font-semibold mb-4 border-b pb-2 flex items-center gap-2"><i class="ri-user-search-line text-primary dark:text-blue-400"></i><span data-lang-en="Predict Gender from Names" data-lang-hi="नामों से लिंग की भविष्यवाणी करें">Predict Gender from Names</span></h2>242 <div class="mb-4">243 <label for="namesInput" class="block text-sm font-medium mb-1" data-lang-en="Enter Names (comma-separated):" data-lang-hi="नाम दर्ज करें (अल्पविराम से अलग):">Enter Names (comma-separated):</label>244 <textarea id="namesInput" rows="5" placeholder="e.g., Priya, Rahul, Alex, Sam" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm dark:bg-gray-700 dark:border-gray-600"></textarea>245 </div>246 <button id="predictGenderButton" class="w-full bg-primary text-white px-4 py-2 rounded-button hover:bg-blue-700 transition-colors inline-flex items-center justify-center gap-2">247 <i class="ri-men-line"></i><i class="ri-women-line -ml-1"></i><span data-lang-en="Predict Gender" data-lang-hi="लिंग की भविष्यवाणी करें">Predict Gender</span>248 </button>249 <div id="genderError" class="error-message mt-4"></div>250 </div>251 <!-- Gender Output -->252 <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-100 dark:border-gray-700 card">253 <h2 class="text-xl font-semibold mb-4 border-b pb-2 flex items-center gap-2"><i class="ri-bar-chart-2-line text-primary dark:text-blue-400"></i><span data-lang-en="Prediction Results" data-lang-hi="भविष्यवाणी परिणाम">Prediction Results</span></h2>254 <div id="genderLoading" class="loading-indicator"><div class="spinner"></div><span data-lang-en="Analyzing..." data-lang-hi="विश्लेषण हो रहा है...">Analyzing...</span></div>255 <div id="genderResultDisplay" class="hidden space-y-4"> <!-- Results populated here --> </div>256 <p id="initialMessageGender" class="text-gray-500 dark:text-gray-400 mt-6 text-center" data-lang-en="Enter names and click Predict." data-lang-hi="नाम दर्ज करें और भविष्यवाणी पर क्लिक करें।">Enter names and click Predict.</p>257 </div>258 </div>259 </div>260 </div>261 262 </main>263 264 <!-- Footer -->265 <footer class="bg-gray-900 text-gray-400 py-12 mt-12">266 <!-- Footer content (Keep as is) -->267 <div class="container mx-auto px-4"> <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> <div><a href="/" class="text-2xl font-['Pacifico'] text-white mb-4 inline-block" data-lang-en="AI Text Tools" data-lang-hi="एआई टेक्स्ट उपकरण">AI Text Tools</a><p class="mb-4 text-sm" data-lang-en="AI-powered tools for text analysis and processing." data-lang-hi="पाठ विश्लेषण और प्रसंस्करण के लिए एआई-संचालित उपकरण।">AI-powered tools for text analysis.</p><div class="flex space-x-4"><a href="#" class="hover:text-white" title="GitHub (Placeholder)"><i class="ri-github-fill"></i></a><a href="#" class="hover:text-white" title="LinkedIn (Placeholder)"><i class="ri-linkedin-box-fill"></i></a></div></div> <div><h3 class="text-lg font-medium text-white mb-4" data-lang-en="Quick Links" data-lang-hi="त्वरित लिंक्स">Quick Links</h3><ul class="space-y-2 text-sm"><li><a href="#" class="hover:text-white" data-lang-en="Home" data-lang-hi="होम">Home</a></li><li><a href="#" class="hover:text-white" data-lang-en="Tools" data-lang-hi="उपकरण">Tools</a></li><li><a href="#" class="hover:text-white" data-lang-en="About" data-lang-hi="बारे में">About</a></li></ul></div> <div><h3 class="text-lg font-medium text-white mb-4" data-lang-en="Resources" data-lang-hi="संसाधन">Resources</h3><ul class="space-y-2 text-sm"><li><a href="#" class="hover:text-white" data-lang-en="API Docs (TBD)" data-lang-hi="एपीआई डॉक्स (TBD)">API Docs (TBD)</a></li><li><a href="#" class="hover:text-white" data-lang-en="GitHub Repo" data-lang-hi="गिटहब रेपो">GitHub Repo</a></li></ul></div> <div><h3 class="text-lg font-medium text-white mb-4" data-lang-en="Contact" data-lang-hi="संपर्क">Contact</h3><ul class="space-y-2 text-sm"><li class="flex items-start"><i class="ri-mail-line mt-1 mr-2"></i><span>your-email@example.com</span></li></ul></div> </div> <div class="border-t border-gray-700 mt-8 pt-8 text-center"><p class="text-sm">© 2025 Slimshadow.org | AI Text Tools Project</p></div> </div>268 </footer>269 270 <!-- Base Theme/Language Script -->271 <script>272 // Theme Toggle (Keep as is)273 const themeToggle = document.getElementById('themeToggle'); const htmlElement = document.documentElement; function applyTheme(isDark) { if (isDark) { htmlElement.classList.add('dark'); if(themeToggle) themeToggle.checked = true; } else { htmlElement.classList.remove('dark'); if(themeToggle) themeToggle.checked = false; } } const prefersDark = localStorage.getItem('theme') === 'dark' || (localStorage.getItem('theme') === null && window.matchMedia('(prefers-color-scheme: dark)').matches); applyTheme(prefersDark); if(themeToggle){ themeToggle.addEventListener('change', (event) => { const isDark = event.target.checked; applyTheme(isDark); localStorage.setItem('theme', isDark ? 'dark' : 'light'); }); } else { console.warn("Theme toggle button not found."); }274 // Language Toggle (Keep as is)275 const languageToggle = document.getElementById('languageToggle'); const langElements = document.querySelectorAll('[data-lang-en]'); function applyLanguage(lang) { htmlElement.setAttribute('lang', lang); langElements.forEach(el => { const text = el.getAttribute(`data-lang-${lang}`); if (text) { const icon = el.querySelector('i'); if (icon && el.childNodes.length > 1) { let updated = false; el.childNodes.forEach(node => { if (node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== '') { node.textContent = ` ${text} `; updated = true; } }); if (!updated) { const currentText = el.getAttribute(`data-lang-${lang === 'en' ? 'hi' : 'en'}`); if(currentText) el.innerHTML = el.innerHTML.replace(currentText, text);}} else { el.textContent = text; } } }); if (languageToggle) languageToggle.checked = (lang === 'hi'); localStorage.setItem('language', lang); } const savedLang = localStorage.getItem('language') || 'en'; if (languageToggle) { languageToggle.addEventListener('change', (event) => { const newLang = event.target.checked ? 'hi' : 'en'; applyLanguage(newLang); }); } else { console.warn("Language toggle button not found."); }276 </script>277 278 <!-- ***** Page Interaction & Full App Script (MODIFIED) ***** -->279 <script>280 // --- API Configuration ---281 const OCR_API_BASE_URL = 'https://sameernotes-ocr.hf.space';282 const TRANSLATION_API_BASE_URL = 'https://sameernotes-translation-prediction-space.hf.space';283 const GENDER_API_BASE_URL = "https://sidvilas-gender-prediction-space.hf.space";284 const TOKEN_ENDPOINT = `${OCR_API_BASE_URL}/token`;285 const SIGNUP_ENDPOINT = `${OCR_API_BASE_URL}/signup`;286 const PROCESS_ENDPOINT = `${OCR_API_BASE_URL}/process/`;287 const WORD_DETECT_ENDPOINT = `${OCR_API_BASE_URL}/word-detection/`;288 // const PREDICTION_IMG_ENDPOINT = `${OCR_API_BASE_URL}/prediction/`; // Removed289 const TRANSLATE_ENDPOINT = `${TRANSLATION_API_BASE_URL}/translate`;290 const GENDER_PREDICT_ENDPOINT = `${GENDER_API_BASE_URL}/predict`;291 const TOKEN_STORAGE_KEY = 'aiTextToolsAuthToken';292 293 // --- State Variables ---294 let accessToken = localStorage.getItem(TOKEN_STORAGE_KEY);295 let currentImageSource = null;296 let currentExampleSelection = null;297 298 // --- DOM Elements ---299 // Auth & Core App300 const authContainer = document.getElementById('authContainer');301 const appContainer = document.getElementById('appContainer');302 const loginForm = document.getElementById('loginForm');303 const signupForm = document.getElementById('signupForm');304 const loginUsernameInput = document.getElementById('loginUsername');305 const loginPasswordInput = document.getElementById('loginPassword');306 const loginErrorDiv = document.getElementById('loginErrorDiv');307 const loginSubmitButton = document.getElementById('loginSubmitButton');308 const signupUsernameInput = document.getElementById('signupUsername');309 const signupEmailInput = document.getElementById('signupEmail');310 const signupPasswordInput = document.getElementById('signupPassword');311 const signupErrorDiv = document.getElementById('signupErrorDiv');312 const signupSubmitButton = document.getElementById('signupSubmitButton');313 const showSignupLink = document.getElementById('showSignupLink');314 const showLoginLink = document.getElementById('showLoginLink');315 const logoutButton = document.getElementById('logoutButton');316 const mainNav = document.getElementById('mainNav');317 const userInfoIcons = document.getElementById('userInfoIcons');318 // Tabs319 const tabButtons = document.querySelectorAll('.tab-button');320 const tabContents = document.querySelectorAll('.tab-content');321 // OCR Input322 const imageUpload = document.getElementById('imageUpload');323 const fileNameSpan = document.getElementById('fileName');324 const examplesContainer = document.getElementById('examplesContainer');325 const examplesLoadingText = document.getElementById('examplesLoadingText');326 const imagePreviewContainer = document.getElementById('imagePreviewContainer');327 const imagePreview = document.getElementById('imagePreview');328 const predictButton = document.getElementById('predictButton');329 const clearButton = document.getElementById('clearButton');330 const errorMessage = document.getElementById('errorMessage');331 // OCR Output332 const loadingIndicator = document.getElementById('loadingIndicator');333 const loadingText = document.getElementById('loadingText');334 const resultDisplay = document.getElementById('resultDisplay');335 // const ocrRecognizedText = document.getElementById('ocrRecognizedText'); // *** REMOVED ***336 // const wordCountText = document.getElementById('wordCountText'); // *** REMOVED ***337 const sakshiOutputText = document.getElementById('sakshiOutputText');338 const wordDetectionImg = document.getElementById('wordDetectionImg');339 // const predictionImg = document.getElementById('predictionImg'); // Removed340 const initialMessageOutput = document.getElementById('initialMessageOutput');341 // Translation342 const textToTranslateInput = document.getElementById('textToTranslate');343 const sourceLanguageInput = document.getElementById('sourceLanguage');344 const targetLanguageInput = document.getElementById('targetLanguage');345 const translateButton = document.getElementById('translateButton');346 const translationLoading = document.getElementById('translationLoading');347 const translationResultDisplay = document.getElementById('translationResultDisplay');348 const detectedSourceLanguage = document.getElementById('detectedSourceLanguage');349 const translationTargetLanguage = document.getElementById('translationTargetLanguage');350 const translatedText = document.getElementById('translatedText');351 const translationError = document.getElementById('translationError');352 const initialMessageTranslation = document.getElementById('initialMessageTranslation');353 // Gender Prediction354 const namesInput = document.getElementById('namesInput');355 const predictGenderButton = document.getElementById('predictGenderButton');356 const genderLoading = document.getElementById('genderLoading');357 const genderResultDisplay = document.getElementById('genderResultDisplay');358 const genderError = document.getElementById('genderError');359 const initialMessageGender = document.getElementById('initialMessageGender');360 361 // --- Example Images ---362 const exampleImages = [363 { name: "अखिल", url: "samples/अखिल.png" }, // Assuming a relative path based on the image structure364 { name: "अग्रसर", url: "samples/अग्रसर.png" },365 { name: "अंतर्राष्ट्रीय", url: "samples/अंतर्राष्ट्रीय.png" },366 { name: "अध्ययन", url: "samples/अध्ययन.png" },367 { name: "अनुसंधान", url: "samples/अनुसंधान.png" },368 { name: "अन्य", url: "samples/अन्य.png" },369 { name: "अलावा", url: "samples/अलावा.png" },370 { name: "अवसर", url: "samples/अवसर.png" },371 { name: "आती", url: "samples/आती.png" },372 { name: "आधुनिक", url: "samples/आधुनिक.png" }373];374 // --- Helper Functions (Auth UI, Error, Loading) ---375 // ... (Keep showAuthScreen, showAppScreen, displayError, hideError, showAuthLoading, showLoadingIndicator, showOcrLoading functions exactly as in the previous version) ...376 function showAuthScreen() { console.log("Showing Auth Screen"); accessToken = null; localStorage.removeItem(TOKEN_STORAGE_KEY); if (authContainer) authContainer.classList.remove('hidden'); if (appContainer) appContainer.classList.add('hidden'); if (mainNav) mainNav.classList.add('hidden'); if (userInfoIcons) userInfoIcons.classList.add('hidden'); if (logoutButton) logoutButton.classList.add('hidden'); hideError(loginErrorDiv); hideError(signupErrorDiv); if(loginForm) loginForm.classList.remove('hidden'); if(signupForm) signupForm.classList.add('hidden'); if(loginUsernameInput) loginUsernameInput.value = ''; if(loginPasswordInput) loginPasswordInput.value = ''; }377 function showAppScreen() { console.log("Showing App Screen"); if (!accessToken) { showAuthScreen(); return; } if (authContainer) authContainer.classList.add('hidden'); if (appContainer) appContainer.classList.remove('hidden'); if (mainNav) mainNav.classList.remove('hidden', 'md:flex'); if (mainNav) mainNav.classList.add('md:flex'); if (userInfoIcons) userInfoIcons.classList.remove('hidden', 'md:flex'); if (userInfoIcons) userInfoIcons.classList.add('md:flex'); if (logoutButton) logoutButton.classList.remove('hidden'); loadExamples(); activateTab('ocr'); }378 function displayError(element, message) { if (element) { element.textContent = message; element.classList.remove('hidden'); console.warn("Error:", message); } else { console.error("Element missing for error:", message); } }379 function hideError(element) { if (element) { element.classList.add('hidden'); element.textContent = ''; } }380 function showAuthLoading(formType, isLoading) { const button = formType === 'login' ? loginSubmitButton : signupSubmitButton; if (!button) return; const spinner = button.querySelector('.spinner'); button.disabled = isLoading; if (spinner) spinner.classList.toggle('hidden', !isLoading); }381 function showLoadingIndicator(element, show = true) { if (element) { element.style.display = show ? 'flex' : 'none'; } }382 function showOcrLoading(isLoading, message = "Processing...") { if (loadingIndicator) { loadingIndicator.classList.toggle('hidden', !isLoading); if (loadingText) loadingText.textContent = message; } if (predictButton) predictButton.disabled = isLoading; if (clearButton) clearButton.disabled = isLoading; }383 384 385 // --- Generic Authenticated Fetch ---386 // ... (Keep authenticatedFetch function exactly as in the previous correct version) ...387 async function authenticatedFetch(url, options = {}) { if (!accessToken) { showAuthScreen(); throw new Error("Not authenticated."); } const defaultOptions = { headers: { 'Authorization': `Bearer ${accessToken}`, 'Accept': 'application/json', ...options.headers }, }; if (options.body && !(options.body instanceof FormData) && !(options.body instanceof URLSearchParams) && !defaultOptions.headers['Content-Type']) { defaultOptions.headers['Content-Type'] = 'application/json'; } const finalOptions = { ...options, ...defaultOptions }; /* console.log("Auth Fetch:", url); */ try { const response = await fetch(url, finalOptions); /* console.log(`Status ${url}:`, response.status); */ if (!response.ok) { let errorData = { detail: `Request failed: ${response.status}` }; let bodyText = ''; try { bodyText = await response.text(); errorData = JSON.parse(bodyText); if (!errorData.detail) errorData.detail = bodyText; } catch (e) { errorData.detail = bodyText || errorData.detail; } console.error(`API Error ${url}:`, response.status, errorData.detail); if (response.status === 401) { showAuthScreen(); throw new Error("Auth failed/expired."); } throw new Error(typeof errorData.detail === 'string' ? errorData.detail : JSON.stringify(errorData.detail)); } const contentType = response.headers.get("content-type"); if (response.status === 204) return null; if (contentType?.includes("application/json")) return await response.json(); if (contentType?.includes("image/") || contentType?.includes("application/octet-stream")) return await response.blob(); return await response.text(); } catch (error) { console.error(`Fetch Catch ${url}:`, error); throw error; } }388 389 // --- LOGIN / SIGNUP / LOGOUT ---390 // ... (Keep handleLogin, handleSignup, handleLogout functions exactly as in the previous correct version) ...391 if (loginForm) { loginForm.addEventListener('submit', async (event) => { event.preventDefault(); const username = loginUsernameInput.value.trim(); const password = loginPasswordInput.value.trim(); hideError(loginErrorDiv); if (!username || !password) { displayError(loginErrorDiv, "Username & Password required."); return; } const body = new URLSearchParams(); body.append('username', username); body.append('password', password); showAuthLoading('login', true); try { const response = await fetch(TOKEN_ENDPOINT, { method: 'POST', headers: {'Content-Type': 'application/x-www-form-urlencoded', 'Accept': 'application/json'}, body: body }); const data = await response.json().catch(() => null); if (!response.ok) { throw new Error(data?.detail || `Login failed (${response.status})`); } if (data?.access_token) { accessToken = data.access_token; localStorage.setItem(TOKEN_STORAGE_KEY, accessToken); console.log("Login success."); showAppScreen(); } else { throw new Error('No access token received.'); } } catch (error) { let msg = error.message || "Unknown login error."; if (msg.includes("Incorrect")) msg = "Incorrect username or password."; if (error instanceof TypeError) msg = "Network error."; displayError(loginErrorDiv, msg); } finally { showAuthLoading('login', false); } }); }392 if (signupForm) { signupForm.addEventListener('submit', async (event) => { event.preventDefault(); const username = signupUsernameInput.value.trim(); const email = signupEmailInput.value.trim(); const password = signupPasswordInput.value.trim(); hideError(signupErrorDiv); if (!username || !email || !password) { displayError(signupErrorDiv, "Please fill all fields."); return; } if (password.length < 6) { displayError(signupErrorDiv, "Password must be >= 6 characters."); return; } if (!/\S+@\S+\.\S+/.test(email)) { displayError(signupErrorDiv, "Invalid email format."); return; } showAuthLoading('signup', true); try { const response = await fetch(SIGNUP_ENDPOINT, { method: 'POST', headers: {'Content-Type': 'application/json', 'Accept': 'application/json'}, body: JSON.stringify({ username, email, password }) }); const data = await response.json().catch(() => null); if (!response.ok) { throw new Error(data?.detail || `Signup failed (${response.status})`); } console.log("Signup successful:", data); alert('Signup successful! Please login.'); if(signupForm) signupForm.classList.add('hidden'); if(loginForm) loginForm.classList.remove('hidden'); signupUsernameInput.value = ''; signupEmailInput.value = ''; signupPasswordInput.value = ''; } catch (error) { let msg = error.message || "Unknown signup error."; if (error instanceof TypeError) msg = "Network error."; displayError(signupErrorDiv, msg); } finally { showAuthLoading('signup', false); } }); }393 if(logoutButton) logoutButton.addEventListener('click', () => { showAuthScreen(); clearOCRState(); clearTranslationState(); clearGenderState(); });394 if (showSignupLink) showSignupLink.addEventListener('click', (e) => { e.preventDefault(); if(loginForm) loginForm.classList.add('hidden'); if(signupForm) signupForm.classList.remove('hidden'); hideError(loginErrorDiv); hideError(signupErrorDiv); });395 if (showLoginLink) showLoginLink.addEventListener('click', (e) => { e.preventDefault(); if(signupForm) signupForm.classList.add('hidden'); if(loginForm) loginForm.classList.remove('hidden'); hideError(loginErrorDiv); hideError(signupErrorDiv); });396 397 398 // --- TAB MANAGEMENT ---399 function activateTab(tabId) { /* ... (Keep implementation) ... */ tabButtons.forEach(b => { b.classList.toggle('active', b.dataset.tab === tabId); }); tabContents.forEach(c => { c.classList.toggle('active', c.id === `${tabId}Content`); }); console.log("Activated tab:", tabId); }400 tabButtons.forEach(button => { button.addEventListener('click', () => activateTab(button.dataset.tab)); });401 402 // --- OCR Functionality ---403 function loadExamples() { /* ... (Keep implementation) ... */ if (!examplesContainer || !appContainer || appContainer.classList.contains('hidden')) return; if (examplesLoadingText) examplesContainer.innerHTML = ''; const examplesToShow = exampleImages.slice(0, 12); examplesToShow.forEach((imgData, index) => { const div = document.createElement('div'); div.className = 'example-image-container bg-gray-100 dark:bg-gray-700 rounded-md overflow-hidden border border-gray-200 dark:border-gray-600'; div.setAttribute('role', 'button'); div.setAttribute('tabindex', '0'); div.setAttribute('aria-label', `Example ${index + 1}: ${imgData.name}`); div.dataset.imageUrl = imgData.url; div.dataset.imageName = imgData.name; const img = document.createElement('img'); img.src = imgData.url; img.alt = `Example ${index + 1}: ${imgData.name}`; img.className = 'example-image'; img.loading = 'lazy'; img.onerror = () => { div.innerHTML = `<span class="text-xs text-red-500 p-1">Load Error</span>`; }; div.appendChild(img); div.addEventListener('click', () => handleExampleClick(div, imgData.url, imgData.name)); div.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleExampleClick(div, imgData.url, imgData.name); } }); examplesContainer.appendChild(div); }); }404 async function handleExampleClick(element, imageUrl, imageName) { /* ... (Keep implementation) ... */ if (currentExampleSelection) { currentExampleSelection.classList.remove('selected'); } element.classList.add('selected'); currentExampleSelection = element; if (imageUpload) imageUpload.value = null; displayFileName(`Example: ${imageName}`); resetResultState(); hideError(errorMessage); try { showPreview(imageUrl); showOcrLoading(true, "Fetching..."); const response = await fetch(imageUrl); if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); const blob = await response.blob(); const fileName = imageUrl.substring(imageUrl.lastIndexOf('/') + 1)?.split('?')[0] || `${imageName.replace(/\s+/g, '_')}.png`; currentImageSource = new File([blob], fileName, { type: blob.type || 'image/png' }); enableProcessButtons(); } catch (error) { console.error("Error fetching example:", error); displayError(errorMessage, `Could not load example: ${error.message}`); disableProcessButtons(); currentImageSource = null; hidePreview(); } finally { showOcrLoading(false); } }405 function handleFileSelect() { /* ... (Keep implementation) ... */ const file = imageUpload.files[0]; if (!file) return; const allowed = ['image/png', 'image/jpeg', 'image/jpg']; if (!allowed.includes(file.type)) { displayError(errorMessage, 'Invalid file type.'); clearOCRState(); return; } currentImageSource = file; displayFileName(file.name); resetResultState(); hideError(errorMessage); if (currentExampleSelection) { currentExampleSelection.classList.remove('selected'); currentExampleSelection = null; } showPreview(file); enableProcessButtons(); }406 function displayFileName(name) { /* ... (Keep implementation) ... */ if (fileNameSpan) { fileNameSpan.textContent = name; fileNameSpan.classList.remove('italic', 'text-gray-500', 'dark:text-gray-400'); fileNameSpan.classList.add('font-medium'); } }407 function resetFileName() { /* ... (Keep implementation) ... */ if (fileNameSpan) { const defaultEn = "No file chosen"; const defaultHi = "कोई फ़ाइल नहीं चुनी गई"; const currentLang = document.documentElement.lang || 'en'; fileNameSpan.textContent = currentLang === 'hi' ? defaultHi : defaultEn; fileNameSpan.classList.add('italic', 'text-gray-500', 'dark:text-gray-400'); fileNameSpan.classList.remove('font-medium'); } }408 function showPreview(source) { /* ... (Keep implementation) ... */ if (!imagePreview || !imagePreviewContainer) return; imagePreview.src = ''; imagePreviewContainer.classList.remove('hidden'); if (typeof source === 'string') { imagePreview.src = source; } else if (source instanceof File) { const reader = new FileReader(); reader.onload = (e) => { imagePreview.src = e.target.result; }; reader.onerror = () => displayError(errorMessage, "Could not read file."); reader.readAsDataURL(source); } }409 function hidePreview() { /* ... (Keep implementation) ... */ if (imagePreview && imagePreviewContainer) { imagePreview.src = '#'; imagePreviewContainer.classList.add('hidden'); } }410 function enableProcessButtons() { /* ... (Keep implementation) ... */ if (predictButton) predictButton.disabled = false; if (clearButton) clearButton.classList.remove('hidden'); }411 function disableProcessButtons() { /* ... (Keep implementation) ... */ if (predictButton) predictButton.disabled = true; if (clearButton) clearButton.classList.add('hidden'); }412 413 function resetResultState() { /* *** MODIFIED *** */414 if (resultDisplay) resultDisplay.classList.add('hidden');415 if (initialMessageOutput) initialMessageOutput.classList.remove('hidden');416 // *** REMOVED lines for ocrRecognizedText and wordCountText ***417 if (sakshiOutputText) sakshiOutputText.textContent = '';418 if (wordDetectionImg) { wordDetectionImg.src = '#'; wordDetectionImg.style.display = 'none'; }419 hideError(errorMessage);420 }421 422 function clearOCRState() { /* *** MODIFIED (only removed reference to predictionImg reset which was already removed) *** */423 if (imageUpload) imageUpload.value = ''; currentImageSource = null; if (currentExampleSelection) { currentExampleSelection.classList.remove('selected'); currentExampleSelection = null; } hidePreview(); resetFileName(); disableProcessButtons(); resetResultState(); hideError(errorMessage); showOcrLoading(false); console.log("OCR State Cleared");424 }425 426 if (imageUpload) imageUpload.addEventListener('change', handleFileSelect);427 if (predictButton) predictButton.addEventListener('click', processImage);428 if (clearButton) clearButton.addEventListener('click', clearOCRState);429 430 async function processImage() { /* *** MODIFIED *** */431 if (!currentImageSource) { displayError(errorMessage, 'Please choose/select an image.'); return; } hideError(errorMessage); resetResultState(); showOcrLoading(true, "Preparing...");432 try {433 const formData = new FormData(); if (currentImageSource instanceof File) { formData.append('file', currentImageSource); } else if (typeof currentImageSource === 'string') { showOcrLoading(true, "Fetching sample..."); const response = await fetch(currentImageSource); if (!response.ok) throw new Error(`Fetch failed: ${response.statusText}`); const blob = await response.blob(); const filename = currentImageSource.split('/').pop()?.split('?')[0] || 'sample.png'; formData.append('file', new File([blob], filename, { type: blob.type || 'image/png' })); } else { throw new Error("Invalid image source."); }434 showOcrLoading(true, "Processing OCR...");435 const data = await authenticatedFetch(PROCESS_ENDPOINT, { method: 'POST', body: formData });436 console.log("OCR Response:", data);437 438 // *** REMOVED lines for ocrRecognizedText and wordCountText ***439 440 // *** KEPT these lines ***441 if(sakshiOutputText) sakshiOutputText.textContent = data.sakshi_output || 'No raw output.';442 if(textToTranslateInput) textToTranslateInput.value = data.prediction_label || ''; // Use prediction_label for translate input443 444 // *** Only fetch Word Detection Image ***445 const fetchWordDetectImage = async () => {446 wordDetectionImg.style.display = 'none';447 wordDetectionImg.src = '#';448 try {449 showOcrLoading(true, `Fetching Word Detection...`);450 const blob = await authenticatedFetch(WORD_DETECT_ENDPOINT);451 if (blob instanceof Blob) {452 const imageUrl = URL.createObjectURL(blob);453 wordDetectionImg.onload = () => URL.revokeObjectURL(imageUrl);454 wordDetectionImg.onerror = () => console.error(`Failed to load Word Detection from blob URL`);455 wordDetectionImg.src = imageUrl;456 wordDetectionImg.alt = "Word Detection Preview";457 wordDetectionImg.style.display = 'block';458 } else {459 console.warn(`Failed blob fetch for Word Detection`);460 }461 } catch (imgError) {462 console.error(`Error fetching Word Detection image:`, imgError);463 }464 };465 466 await fetchWordDetectImage(); // Await only the word detection image467 468 if(resultDisplay) resultDisplay.classList.remove('hidden');469 if(initialMessageOutput) initialMessageOutput.classList.add('hidden');470 } catch (error) {471 console.error('Error processing image:', error);472 displayError(errorMessage, `Processing Error: ${error.message}`);473 resetResultState(); // Ensure results are cleared on error474 } finally {475 showOcrLoading(false);476 }477 }478 479 // --- TRANSLATION Functionality (Updated for Gemini Backend) ---480 function clearTranslationState() {481 if(textToTranslateInput) textToTranslateInput.value = '';482 if(sourceLanguageInput) sourceLanguageInput.value = '';483 if(targetLanguageInput) targetLanguageInput.value = '';484 if(translationResultDisplay) translationResultDisplay.classList.add('hidden');485 if(initialMessageTranslation) initialMessageTranslation.classList.remove('hidden');486 // No 'detectedSourceLanguage' element to clear anymore487 if(translationTargetLanguage) translationTargetLanguage.textContent = '';488 if(translatedText) translatedText.innerHTML = ''; // Clear innerHTML489 hideError(translationError);490 showLoadingIndicator(translationLoading, false);491 console.log("Translation Cleared");492 // Ensure source language row is hidden on clear493 const sourceLangItem = document.getElementById('detectedSourceLanguage')?.closest('.result-item');494 if (sourceLangItem) {495 sourceLangItem.style.display = 'none';496 }497 }498 499 if(translateButton) {500 translateButton.addEventListener('click', async () => {501 const text = textToTranslateInput.value.trim();502 const sourceLang = sourceLanguageInput.value.trim();503 const targetLang = targetLanguageInput.value.trim();504 505 hideError(translationError);506 showLoadingIndicator(translationLoading, true);507 if(translationResultDisplay) translationResultDisplay.classList.add('hidden');508 if(initialMessageTranslation) initialMessageTranslation.classList.remove('hidden'); // Show initial message while loading/error509 510 if (!text) {511 displayError(translationError, 'Please enter text to translate.');512 showLoadingIndicator(translationLoading, false);513 return;514 }515 if (!targetLang) {516 displayError(translationError, 'Please enter the target language (e.g., English, Hindi).');517 showLoadingIndicator(translationLoading, false);518 return;519 }520 521 console.log(`Attempting translation from '${sourceLang || 'auto-detect'}' to '${targetLang}'. Text:`, text.substring(0, 50) + "...");522 523 const payload = {524 text: text,525 target_language: targetLang526 };527 // Only include source_language if the user provided it528 if (sourceLang) {529 payload.source_language = sourceLang;530 }531 console.log("Translation API Request Payload:", payload);532 533 try {534 // Use standard fetch, NOT authenticatedFetch, as this endpoint doesn't require the OCR token535 const response = await fetch(TRANSLATE_ENDPOINT, {536 method: 'POST',537 headers: {538 'Content-Type': 'application/json',539 'Accept': 'text/html' // Indicate preference for HTML response540 },541 body: JSON.stringify(payload)542 });543 544 // Check if the request was successful (status code 2xx)545 if (!response.ok) {546 let errorDetail = `Request failed with status: ${response.status}`;547 try {548 // Try to parse FastAPI's JSON error response549 const errorJson = await response.json();550 errorDetail = errorJson.detail || JSON.stringify(errorJson);551 } catch (e) {552 // If parsing JSON fails, try to get plain text error553 try {554 errorDetail = await response.text();555 } catch (textErr) {556 // Keep the original status code message if text fails too557 }558 }559 // Throw an error with the extracted detail560 throw new Error(errorDetail);561 }562 563 // Get the response body as HTML text564 const translatedHtml = await response.text();565 console.log("Translation API Raw HTML Response:", translatedHtml);566 567 // --- Update UI ---568 // Display the target language requested by the user569 if(translationTargetLanguage) translationTargetLanguage.textContent = targetLang;570 // Set the innerHTML of the result element to render the HTML tags571 if(translatedText) translatedText.innerHTML = translatedHtml;572 573 // Remove the section displaying detected source language as it's not returned574 const sourceLangItem = document.getElementById('detectedSourceLanguage')?.closest('.result-item');575 if (sourceLangItem) {576 sourceLangItem.style.display = 'none'; // Hide the source language display row577 }578 579 580 if(translationResultDisplay) translationResultDisplay.classList.remove('hidden');581 if(initialMessageTranslation) initialMessageTranslation.classList.add('hidden'); // Hide initial message on success582 583 } catch (error) {584 console.error('Error during translation fetch/processing:', error);585 let userMessage = `Translation Error: ${error.message}`; // Default message586 587 // Provide more specific feedback if possible588 if (error.message.includes("supported")) {589 userMessage = `Translation Error: The target language '${targetLang}' might not be supported by the backend.`;590 } else if (error.message.includes("Failed to fetch")) {591 userMessage = "Translation Error: Network error or CORS issue. Could not reach the translation server. Check console logs.";592 } else if (error.message.startsWith("Request failed with status:")) {593 userMessage = `Translation Error: Server responded with an error (${error.message})`; // Show status code error594 }595 596 displayError(translationError, userMessage);597 if(initialMessageTranslation) initialMessageTranslation.classList.remove('hidden'); // Ensure initial message placeholder is visible on error598 } finally {599 showLoadingIndicator(translationLoading, false);600 }601 });602 }603 604 // --- GENDER PREDICTION Functionality ---605 function clearGenderState() { /* ... (Keep implementation) ... */ if(namesInput) namesInput.value = ''; if(genderResultDisplay) genderResultDisplay.innerHTML = ''; if(genderResultDisplay) genderResultDisplay.classList.add('hidden'); if(initialMessageGender) initialMessageGender.classList.remove('hidden'); hideError(genderError); showLoadingIndicator(genderLoading, false); console.log("Gender Cleared"); }606 function displayGenderResults(data) { /* ... (Keep implementation) ... */ if (!genderResultDisplay) return; genderResultDisplay.innerHTML = ''; if (!data || !data.predictions || data.predictions.length === 0) { genderResultDisplay.innerHTML = "<p class='text-center text-gray-500 dark:text-gray-400'>No prediction results.</p>"; return; } let resultsHTML = ''; data.predictions.forEach(p => { const maleProb = (p.male_probability !== null && p.male_probability !== undefined) ? p.male_probability.toFixed(2) : 'N/A'; const confidence = (p.confidence !== null && p.confidence !== undefined) ? p.confidence.toFixed(2) : 'N/A'; resultsHTML += `<div class="result-item"><div class="result-label">Name:</div><div class="result-value">${p.name || 'N/A'}</div><div class="result-label">Predicted:</div><div class="result-value">${p.predicted_gender || 'N/A'}</div><div class="result-label">Male Prob:</div><div class="result-value">${maleProb}</div><div class="result-label">Confidence:</div><div class="result-value">${confidence}</div></div>`; }); genderResultDisplay.innerHTML = resultsHTML; genderResultDisplay.classList.remove('hidden'); if(initialMessageGender) initialMessageGender.classList.add('hidden'); }607 if(predictGenderButton) {608 predictGenderButton.addEventListener('click', async () => { /* ... (Keep implementation) ... */609 const namesString = namesInput.value.trim(); const names = namesString.split(',').map(name => name.trim()).filter(Boolean); hideError(genderError); showLoadingIndicator(genderLoading, true); if(genderResultDisplay) genderResultDisplay.classList.add('hidden'); if(initialMessageGender) initialMessageGender.classList.remove('hidden'); if (names.length === 0) { displayError(genderError, "Please enter names."); showLoadingIndicator(genderLoading, false); return; }610 try { const data = await authenticatedFetch(GENDER_PREDICT_ENDPOINT, { method: 'POST', body: JSON.stringify({ names: names, threshold: 0.5 }) }); console.log("Gender Response:", data); displayGenderResults(data); } catch (error) { console.error("Gender Prediction error:", error); displayError(genderError, `Prediction Error: ${error.message}`); } finally { showLoadingIndicator(genderLoading, false); }611 });612 }613 614 // --- Initialization ---615 document.addEventListener('DOMContentLoaded', () => {616 console.log("DOM Loaded. Initializing...");617 accessToken = localStorage.getItem(TOKEN_STORAGE_KEY);618 if (accessToken) { showAppScreen(); } else { showAuthScreen(); }619 resetFileName(); applyLanguage(savedLang);620 clearOCRState(); clearTranslationState(); clearGenderState();621 activateTab('ocr'); // Ensure OCR tab is active first622 // Ensure source language row is hidden initially623 const sourceLangItem = document.getElementById('detectedSourceLanguage')?.closest('.result-item');624 if (sourceLangItem) {625 sourceLangItem.style.display = 'none';626 }627 });628 629 </script>630 631</body>632</html>