Spaces:

sameernotes
/

sakshi-new-ui-ocr

Running

App Files Files Community

sameernotes commited on Apr 24, 2025

Commit

dd72ec3

verified ·

1 Parent(s): 5ef6fb6

Upload 14 files

Browse files

Files changed (14) hide show

admin.html +613 -0
contact.html +271 -0
features.html +247 -0
feedback.html +303 -0
gender_predictor.html +448 -0
home.html +247 -0
images/example-1.jpg +0 -0
images//340/244/205/340/244/202/340/244/244/340/244/260/340/245/215/340/244/260/340/244/276/340/244/267/340/245/215/340/244/237/340/245/215/340/244/260/340/245/200/340/244/257.png +0 -0
images//340/244/205/340/244/227/340/245/215/340/244/260/340/244/270/340/244/260.png +0 -0
images//340/244/205/340/244/247/340/245/215/340/244/257/340/244/257/340/244/250.png +0 -0
images//340/244/205/340/244/250/340/245/201/340/244/270/340/244/202/340/244/247/340/244/276/340/244/250.png +0 -0
index.html +1114 -19
style.css +501 -28
translation.html +443 -0

admin.html ADDED Viewed

	@@ -0,0 +1,613 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hindi OCR App - Admin Panel</title>
+    <style>
+        /* ---  REUSABLE STYLES (from translation.html) --- */
+        :root {
+            --primary-color: #4a90e2;  /*  Consistent primary color */
+            --secondary-color: #f8f9fa;
+            --text-color: #2c3e50;
+            --border-radius: 12px;
+            --transition: all 0.3s ease;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; /* Consistent font */
+            line-height: 1.6;
+            color: var(--text-color);
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); /* Consistent background */
+            min-height: 100vh;
+            padding: 2rem;
+        }
+        .container {
+            max-width: 1000px;
+            margin: 0 auto;
+            background: white;
+            padding: 2rem;
+            border-radius: var(--border-radius);
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+        }
+        h1 {
+            color: var(--primary-color);
+            text-align: center;
+            margin-bottom: 2rem;
+            font-size: 2.5rem;
+            font-weight: 700;
+        }
+        h2 {
+            color: var(--text-color);
+            margin-bottom: 1.5rem;
+            font-size: 1.8rem;
+        }
+        label {
+            display: block;
+            margin-bottom: 0.5rem;
+            font-weight: 600;
+            color: var(--text-color);
+        }
+       input[type="text"], input[type="password"], input[type="email"]  {
+            width: 100%;
+            padding: 1rem;
+            margin-bottom: 1.5rem;
+            border: 2px solid #e1e8ed;
+            border-radius: var(--border-radius);
+            font-size: 1rem;
+            transition: var(--transition);
+            background: white;
+        }
+        input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus  {
+            outline: none;
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
+        }
+        button {
+            background: var(--primary-color);
+            color: white;
+            padding: 1rem 2rem;
+            border: none;
+            border-radius: var(--border-radius);
+            font-size: 1.1rem;
+            cursor: pointer;
+            transition: var(--transition);
+            width: 100%;
+            margin-top: 1rem;
+        }
+        button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(74, 144, 226, 0.3);
+        }
+        /* --- ERROR MESSAGE --- */
+        .error-message {
+            background: #fee2e2;
+            color: #dc2626;
+            padding: 1rem;
+            border-radius: var(--border-radius);
+            margin-top: 1rem;
+            display: none; /* Hidden by default */
+        }
+        /* --- BUTTONS --- */
+        .button-secondary {
+            background-color: var(--secondary-color);
+            color: var(--primary-color);
+            border: 2px solid var(--primary-color);
+             width: auto;
+        }
+        .button-secondary:hover {
+            background-color: rgba(74, 144, 226, 0.1);
+            box-shadow: 0 5px 15px rgba(74, 144, 226, 0.3);
+        }
+          /* --- NAVIGATION BAR --- */
+        nav {
+            display: flex;
+            flex-wrap: wrap; /* Allow wrapping on smaller screens */
+            gap: 1rem;
+            justify-content: center; /* Center items */
+            margin-bottom: 2rem;
+            border-bottom: 2px solid var(--secondary-color);
+            padding-bottom: 1rem;
+        }
+        nav a {
+            color: var(--primary-color);
+            text-decoration: none;
+            padding: 0.5rem 1rem;
+            border-radius: var(--border-radius);
+            transition: var(--transition);
+        }
+        nav a:hover {
+            background-color: rgba(74, 144, 226, 0.1);
+        }
+         nav a.active {
+            background-color: var(--primary-color);
+            color: white;
+        }
+           .subtitle {
+            text-align: center;
+            color: #64748b;
+            margin-bottom: 1rem;
+        }
+        .attribution {
+            text-align: center;
+            color: #64748b;
+            font-size: 0.875rem;
+            margin-bottom: 2rem;
+        }
+/* --- LOGOUT BUTTON --- */
+        .logout-button {
+            position: absolute;
+            top: 1rem;
+            right: 1rem;
+            width: auto; /* Let the button size itself based on content */
+        }
+        .logout-button svg {
+            margin-right: 0.5rem;
+        }
+        /* --- ADMIN TABLE STYLES --- */
+        .admin-table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-top: 1rem; /* Reduced margin */
+        }
+        .admin-table th, .admin-table td {
+            border: 1px solid #e1e8ed; /* Lighter border */
+            padding: 0.75rem; /* Reduced padding */
+            text-align: left;
+            font-size: 0.9rem; /* Smaller font size */
+        }
+        .admin-table th {
+            background-color: var(--secondary-color);
+            font-weight: 600; /* Use font-weight from variables */
+             color: var(--text-color);
+        }
+        /* --- ADMIN BUTTONS (Pagination) --- */
+        .admin-buttons {
+            display: flex;
+            gap: 0.5rem; /* Reduced gap */
+            justify-content: center;
+            margin-top: 1rem; /* Reduced margin */
+        }
+        .admin-buttons button {
+            width: auto;  /* Let buttons size to content */
+            padding: 0.5rem 1rem; /* Smaller padding */
+            font-size: 0.9rem;
+            margin-top: 0; /* Remove top margin from generic button style */
+        }
+        /* --- RESPONSIVE --- */
+        @media (max-width: 768px) {
+            body {
+                padding: 1rem;
+            }
+            .container {
+                padding: 1rem;
+            }
+              nav {
+                justify-content: space-between; /* Adjust as needed */
+            }
+            nav a {
+                padding: 0.5rem; /* Smaller padding on mobile */
+            }
+             .admin-table th,
+            .admin-table td {
+                padding: 0.5rem;  /*Even smaller padding on mobile*/
+                font-size: 0.8rem;
+            }
+            .admin-buttons button {
+                padding: 0.4rem 0.8rem; /*Smaller padding on mobile*/
+                font-size: 0.8rem;
+            }
+        }
+    .credits {
+        text-align: center;
+        margin-top: 2rem;
+        color: var(--text-color);
+        font-size: 0.875rem;
+    }
+       .feedback-form {
+            padding: 2rem;
+            background: var(--secondary-color);
+            border-radius: var(--border-radius);
+            margin-bottom: 2rem;
+        }
+    </style>
+</head>
+<body>
+    <div class="container" id="admin-app-container" style="display: none;">
+        <header>
+            <nav>
+                <a href="home.html">Home</a>
+                <a href="translation.html" target="_blank">translation</a>   <!-- Open in new tab -->
+                <a href="gender_predictor.html" target="_blank">Gender predictor</a>   <!-- Open in new tab -->
+                <a href="index.html">OCR App</a>
+                <a href="features.html" target="_blank">Key Features</a>
+                <a href="feedback.html" target="_blank">Feedback</a>
+                <a href="contact.html" target="_blank">Contact Us</a>
+                <a href="admin.html" class="active">Admin Panel</a>
+            </nav>
+             <button id="adminLogoutButton" class="logout-button button-secondary">
+                Logout
+            </button>
+            <h1>Hindi OCR Admin Panel</h1>
+            <p class="subtitle">Manage users and feedback for the Hindi OCR Application</p>
+            <p class="attribution">Powered by Sakshi's Hindi OCR Engine</p>
+        </header>
+        <div class="main-content">
+           <div class="container">
+                <h2> User Management</h2>
+                <div class="error-message" id="userErrorMessage"></div>
+                <div class = "feedback-form">
+                     <table class="admin-table" id="userTable">
+                        <thead>
+                            <tr>
+                                <th>ID</th>
+                                <th>Username</th>
+                                <th>Email</th>
+                                <th>Is Active</th>
+                                <th>Is Admin</th>
+                                <th>Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody id="userTableBody">
+                            <tr><td colspan="6">Loading users...</td></tr>
+                        </tbody>
+                    </table>
+                    <div class="admin-buttons" id="userPagination">
+                        <button id="prevUsers" disabled>< Previous</button>
+                        <button id="nextUsers">Next ></button>
+                    </div>
+                </div>
+            </div>
+            <div class="container">
+                <h2>Feedback Management</h2>
+                <div class="error-message" id="feedbackErrorMessage"></div>
+                <div class = "feedback-form">
+                     <table class="admin-table" id="feedbackTable">
+                        <thead>
+                            <tr>
+                                <th>ID</th>
+                                <th>Username</th>
+                                <th>Comment</th>
+                                <th>Created At</th>
+                            </tr>
+                        </thead>
+                        <tbody id="feedbackTableBody">
+                            <tr><td colspan="4">Loading feedback...</td></tr>
+                        </tbody>
+                    </table>
+                    <div class="admin-buttons" id="feedbackPagination">
+                        <button id="prevFeedback" disabled>< Previous</button>
+                        <button id="nextFeedback">Next ></button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="credits">
+            <p>Powered by <strong>D SAKSHI</strong> (MCA Final Year BIT Durg, Chhattisgarh) | © SlimShadow Org. All Rights Reserved.</p>
+        </div>
+    </div>
+    <div id="login-container" style="display:flex; justify-content: center; align-items: center;">
+       <div class="container" id="admin-login-card">
+            <h2>Admin Login</h2>
+            <p>Login to access the Admin Panel.</p>
+            <div class="error-message" id="adminLoginErrorMessage"></div>
+             <label for="adminUsername">Username</label>
+            <input type="text" id="adminUsername" placeholder="Username" value="admin">
+             <label for="adminPassword">Password</label>
+            <input type="password" id="adminPassword" placeholder="Password" value="adminpassword">
+            <button id="adminLoginButton">Login</button>
+        </div>
+    </div>
+    <script>
+        const API_BASE_URL = 'https://sameernotes-ocr.hf.space';
+        let adminAccessToken = null;
+        const adminAppContainer = document.getElementById('admin-app-container');
+        const loginContainer = document.getElementById('login-container');
+        const adminLoginCard = document.getElementById('admin-login-card');
+        // Admin Login Elements
+        const adminUsernameInput = document.getElementById('adminUsername');
+        const adminPasswordInput = document.getElementById('adminPassword');
+        const adminLoginButton = document.getElementById('adminLoginButton');
+        const adminLoginErrorMessage = document.getElementById('adminLoginErrorMessage');
+        const adminLogoutButton = document.getElementById('adminLogoutButton');
+        // User Table Elements
+        const userTableBody = document.getElementById('userTableBody');
+        const userErrorMessage = document.getElementById('userErrorMessage');
+        const prevUsersButton = document.getElementById('prevUsers');
+        const nextUsersButton = document.getElementById('nextUsers');
+        let currentUserPage = 0;
+        const usersPerPage = 5; // Adjust as needed
+        // Feedback Table Elements
+        const feedbackTableBody = document.getElementById('feedbackTableBody');
+        const feedbackErrorMessage = document.getElementById('feedbackErrorMessage');
+        const prevFeedbackButton = document.getElementById('prevFeedback');
+        const nextFeedbackButton = document.getElementById('nextFeedback');
+        let currentFeedbackPage = 0;
+        const feedbackPerPage = 5; // Adjust as needed
+        adminLoginButton.addEventListener('click', async () => {
+            const username = adminUsernameInput.value;
+            const password = adminPasswordInput.value;
+             if (!username || !password) {
+               showAdminLoginError("Please fill in all fields.");
+                return;
+            }
+            const formData = new URLSearchParams();
+            formData.append('username', username);
+            formData.append('password', password);
+            try {
+                const response = await fetch(`${API_BASE_URL}/token`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/x-www-form-urlencoded'
+                    },
+                    body: formData.toString()
+                });
+                if (!response.ok) {
+                    const errorData = await response.json();
+                    showAdminLoginError(errorData.detail || "Login failed");
+                    return;
+                }
+                const data = await response.json();
+                adminAccessToken = data.access_token;
+                loginContainer.style.display = 'none';
+                adminAppContainer.style.display = 'block';
+                adminLoginErrorMessage.style.display = 'none';
+                loadUsers(); // Load users table after login
+                loadFeedback(); // Load feedback table after login
+            } catch (error) {
+                showAdminLoginError( "Error during login. Please try again.");
+                console.error("Admin Login error:", error);
+            }
+        });
+        adminLogoutButton.addEventListener('click', () => {
+            adminAccessToken = null;
+            adminAppContainer.style.display = 'none';
+            loginContainer.style.display = 'flex';
+             // Redirect to index.html
+            window.location.href = "index.html";
+        });
+        async function loadUsers() {
+            userTableBody.innerHTML = '<tr><td colspan="6">Loading users...</td></tr>';
+            userErrorMessage.style.display = 'none';
+            try {
+                const response = await fetch(`${API_BASE_URL}/admin/users/?skip=${currentUserPage * usersPerPage}&limit=${usersPerPage}`, {
+                    headers: {
+                        'Authorization': `Bearer ${adminAccessToken}`
+                    }
+                });
+                if (!response.ok) {
+                    if (response.status === 403) {
+                        showUserError( "Unauthorized: Admin access required.");
+                    } else {
+                        showUserError( `Failed to load users. Status: ${response.status}`);
+                    }
+                    userTableBody.innerHTML = '<tr><td colspan="6">Error loading users.</td></tr>';
+                    return;
+                }
+                const users = await response.json();
+                if (users.length === 0 && currentUserPage > 0) {
+                    currentUserPage--; // Adjust page if no users on current page and not on first page
+                    await loadUsers(); // Reload users with adjusted page
+                    return;
+                }
+                populateUserTable(users);
+            } catch (error) {
+                 showUserError("Error loading users. Please check console.");
+                userTableBody.innerHTML = '<tr><td colspan="6">Error loading users.</td></tr>';
+                console.error("Error fetching users:", error);
+            }
+        }
+        function populateUserTable(users) {
+            userTableBody.innerHTML = '';
+            if (users.length === 0) {
+                userTableBody.innerHTML = '<tr><td colspan="6">No users found.</td></tr>';
+                return;
+            }
+            users.forEach(user => {
+                const row = userTableBody.insertRow();
+                row.insertCell(0).textContent = user.id;
+                row.insertCell(1).textContent = user.username;
+                row.insertCell(2).textContent = user.email;
+                row.insertCell(3).textContent = user.is_active ? 'Yes' : 'No';
+                row.insertCell(4).textContent = user.is_admin ? 'Yes' : 'No';
+                const actionsCell = row.insertCell(5);
+                actionsCell.innerHTML = `<button class="button-secondary" onclick="deleteUser(${user.id})">Delete</button>`;
+            });
+            // Update pagination button states
+            prevUsersButton.disabled = currentUserPage === 0;
+            nextUsersButton.disabled = users.length < usersPerPage; // Disable if fewer users than per page, assuming last page
+        }
+        prevUsersButton.addEventListener('click', async () => {
+            if (currentUserPage > 0) {
+                currentUserPage--;
+                await loadUsers();
+            }
+        });
+        nextUsersButton.addEventListener('click', async () => {
+            currentUserPage++;
+            await loadUsers();
+        });
+        async function deleteUser(userId) {
+            if (confirm(`Are you sure you want to delete user ID ${userId}?`)) {
+                try {
+                    const response = await fetch(`${API_BASE_URL}/admin/users/${userId}`, {
+                        method: 'DELETE',
+                        headers: {
+                            'Authorization': `Bearer ${adminAccessToken}`
+                        }
+                    });
+                    if (!response.ok) {
+                        const errorData = await response.json();
+                         showUserError( errorData.detail || `Failed to delete user. Status: ${response.status}`);
+                        return;
+                    }
+                    userErrorMessage.style.display = 'none';
+                    alert(`User ID ${userId} deleted successfully.`);
+                    loadUsers(); // Reload user list
+                } catch (error) {
+                    showUserError("Error deleting user. Please check console.");
+                    console.error("Error deleting user:", error);
+                }
+            }
+        }
+        async function loadFeedback() {
+            feedbackTableBody.innerHTML = '<tr><td colspan="4">Loading feedback...</td></tr>';
+            feedbackErrorMessage.style.display = 'none';
+            try {
+                const response = await fetch(`${API_BASE_URL}/admin/feedback/?skip=${currentFeedbackPage * feedbackPerPage}&limit=${feedbackPerPage}`, {
+                    headers: {
+                        'Authorization': `Bearer ${adminAccessToken}`
+                    }
+                });
+                if (!response.ok) {
+                    if (response.status === 403) {
+                        showFeedbackError( "Unauthorized access.");
+                    } else {
+                        showFeedbackError(  `Failed to load feedback. Status: ${response.status}`);
+                    }
+                    feedbackTableBody.innerHTML = '<tr><td colspan="4">Error loading feedback.</td></tr>';
+                    return;
+                }
+                const feedbackData = await response.json();
+                if (feedbackData.length === 0 && currentFeedbackPage > 0) {
+                    currentFeedbackPage--;
+                    await loadFeedback();
+                    return;
+                }
+                populateFeedbackTable(feedbackData);
+            } catch (error) {
+                showFeedbackError("Error loading feedback. Please check console.");
+                feedbackTableBody.innerHTML = '<tr><td colspan="4">Error loading feedback.</td></tr>';
+                console.error("Error fetching feedback:", error);
+            }
+        }
+        function populateFeedbackTable(feedbackData) {
+            feedbackTableBody.innerHTML = '';
+            if (feedbackData.length === 0) {
+                feedbackTableBody.innerHTML = '<tr><td colspan="4">No feedback found.</td></tr>';
+                return;
+            }
+            feedbackData.forEach(feedback => {
+                const row = feedbackTableBody.insertRow();
+                row.insertCell(0).textContent = feedback.id;
+                row.insertCell(1).textContent = feedback.username;
+                row.insertCell(2).textContent = feedback.comment;
+                row.insertCell(3).textContent = new Date(feedback.created_at).toLocaleString();
+            });
+            prevFeedbackButton.disabled = currentFeedbackPage === 0;
+            nextFeedbackButton.disabled = feedbackData.length < feedbackPerPage;
+        }
+        prevFeedbackButton.addEventListener('click', async () => {
+            if (currentFeedbackPage > 0) {
+                currentFeedbackPage--;
+                await loadFeedback();
+            }
+        });
+        nextFeedbackButton.addEventListener('click', async () => {
+            currentFeedbackPage++;
+            await loadFeedback();
+        });
+      function showAdminLoginError(message) {
+        adminLoginErrorMessage.textContent = message;
+        adminLoginErrorMessage.style.display = 'block';
+        setTimeout(() => {
+            adminLoginErrorMessage.style.display = 'none';
+        }, 5000); // Hide after 5 seconds
+    }
+      function showUserError(message) {
+            userErrorMessage.textContent = message;
+            userErrorMessage.style.display = 'block';
+              setTimeout(() => {
+                userErrorMessage.style.display = 'none';
+            }, 5000);
+        }
+        function showFeedbackError(message) {
+            feedbackErrorMessage.textContent = message;
+            feedbackErrorMessage.style.display = 'block';
+            setTimeout(() => {
+                feedbackErrorMessage.style.display = 'none';
+            }, 5000);
+        }
+        // --- Initial Check for Admin Token ---
+        // For simplicity, always start at admin login for this example
+        loginContainer.style.display = 'flex';
+        adminAppContainer.style.display = 'none';
+    </script>
+</body>
+</html>

contact.html ADDED Viewed

	@@ -0,0 +1,271 @@

+<!DOCTYPE html>
+<!-- Start with lang="en" and no 'dark' class initially -->
+<html lang="en" class="">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vision and Discern - Feedback</title> <!-- Updated Title -->
+    <!-- Tailwind CSS via CDN -->
+    <script src="https://cdn.tailwindcss.com/3.4.1"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class', // Enable class-based dark mode
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#4a90e2', // Match main app's primary color
+                        secondary: '#f0f8ff',
+                    },
+                    borderRadius: {
+                        'none': '0px', 'sm': '4px', DEFAULT: '8px', 'md': '12px',
+                        'lg': '16px', 'xl': '20px', '2xl': '24px', '3xl': '32px',
+                        'full': '9999px',
+                        'button': '4px' // Match main app's button radius
+                    }
+                }
+            }
+        }
+    </script>
+    <!-- Fonts -->
+    <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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <!-- Icons (Remixicon) -->
+    <link href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css" rel="stylesheet">
+    <!-- Custom Styles (Mainly for the switch) -->
+    <style>
+        body { font-family: 'Inter', sans-serif; }
+        /* Custom Switch Styles - Copied from main app */
+        .custom-switch { position: relative; display: inline-block; width: 50px; height: 24px; }
+        .custom-switch-input { opacity: 0; width: 0; height: 0; }
+        .custom-switch-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; }
+        .custom-switch-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
+        .custom-switch-input:checked + .custom-switch-slider { background-color: #4a90e2; } /* Your primary color */
+        .custom-switch-input:checked + .custom-switch-slider:before { transform: translateX(26px); }
+         /* Base dark mode styles - Copied from main app */
+        html.dark body { background-color: #111827; color: #d1d5db; }
+        html.dark header, html.dark footer { background-color: #1f2937; }
+        html.dark .card { background-color: #1f2937; border-color: #374151; }
+        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 .subtitle, html.dark .info-text, html.dark .credits p, html.dark .attribution { color: #d1d5db; }
+        html.dark .text-gray-600 { color: #9ca3af; }
+        html.dark .text-gray-700 { color: #9ca3af; }
+        html.dark .text-gray-500 { color: #6b7280; }
+        /* Input/Textarea dark styles */
+         html.dark input[type="text"],
+         html.dark input[type="email"],
+         html.dark textarea {
+             background-color: #374151; /* gray-700 */
+             border-color: #4b5563; /* gray-600 */
+             color: #d1d5db; /* gray-300 */
+         }
+         html.dark input::placeholder,
+         html.dark textarea::placeholder {
+             color: #9ca3af; /* gray-400 */
+         }
+        html.dark .button-secondary { background-color: #4b5563; color: #d1d5db; }
+        html.dark .button-secondary:hover { background-color: #374151; }
+        /* Success message dark */
+        html.dark #feedbackSuccessMessage {
+             background-color: #065f46; /* emerald-800 */
+             color: #a7f3d0; /* emerald-200 */
+             border-color: #047857; /* emerald-700 */
+        }
+    </style>
+</head>
+<body class="bg-gray-100 dark:bg-gray-900 min-h-screen flex flex-col text-gray-900 dark:text-gray-200">
+    <!-- Main Application Container -->
+    <div id="app-container" class="flex-grow flex flex-col">
+        <!-- Header -->
+        <header class="bg-white dark:bg-gray-800 shadow-sm sticky top-0 z-50">
+            <div class="container mx-auto px-4 py-3 flex items-center justify-between">
+                <!-- Left Side: Logo & Nav -->
+                <div class="flex items-center">
+                    <a href="home.html" class="text-xl font-bold text-primary dark:text-blue-400 mr-6">Vision & Discern</a>
+                    <nav class="hidden md:flex space-x-6">
+                        <a href="home.html" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-blue-400">Home</a>
+                        <a href="index.html" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-blue-400">OCR</a>
+                        <a href="features.html" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-blue-400">Features</a>
+                        <a href="feedback.html" class="text-primary dark:text-blue-400 font-medium">Feedback</a>
+                        <a href="contact.html" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-blue-400">Contact Us</a>
+                    </nav>
+                </div>
+                <!-- Right Side: Switches & Logout -->
+                <div class="flex items-center space-x-4">
+                    <!-- Theme Switch -->
+                    <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>
+                     <!-- Logout Button -->
+                    <button id="logoutButton" class="button-secondary bg-red-600 hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-800 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>
+                        Logout
+                    </button>
+                    <!-- Mobile Menu Button (Placeholder) -->
+                    <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>
+                </div>
+            </div>
+        </header>
+        <!-- Main Content Area -->
+        <main class="flex-grow container mx-auto px-4 py-8">
+            <!-- Page Header Section -->
+            <section class="mb-10 text-center border-b border-gray-200 dark:border-gray-700 pb-6">
+                <h1 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-2">Feedback</h1>
+                <p class="subtitle text-lg text-gray-700 dark:text-gray-300 mb-1">Help us improve by sharing your thoughts</p>
+            </section>
+            <!-- Feedback Form Section -->
+            <div class="card bg-white dark:bg-gray-800 p-6 md:p-8 rounded-lg shadow-lg border border-gray-100 dark:border-gray-700 max-w-2xl mx-auto">
+                 <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-6 flex items-center gap-3 border-b border-gray-200 dark:border-gray-600 pb-3">
+                     <i class="ri-mail-send-line text-primary dark:text-blue-400 text-3xl"></i>
+                     <span>Submit Your Feedback</span>
+                 </h2>
+                <!-- Success Message Placeholder -->
+                <div id="feedbackSuccessMessage" class="hidden bg-emerald-100 border border-emerald-300 text-emerald-800 dark:bg-emerald-900 dark:bg-opacity-60 dark:border-emerald-700 dark:text-emerald-200 px-4 py-3 rounded-md text-sm mb-6" role="alert">
+                    <p><strong class="font-medium">Thank you!</strong> Your feedback has been submitted successfully.</p>
+                </div>
+                <form id="feedbackForm" class="space-y-5">
+                    <div>
+                        <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Name</label>
+                        <input type="text" id="name" name="name" required
+                               class="w-full px-4 py-2 border border-gray-300 rounded-button focus:outline-none focus:ring-2 focus:ring-primary/50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200"
+                               placeholder="Your Name">
+                    </div>
+                    <div>
+                        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label>
+                        <input type="email" id="email" name="email" required
+                               class="w-full px-4 py-2 border border-gray-300 rounded-button focus:outline-none focus:ring-2 focus:ring-primary/50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200"
+                               placeholder="you@example.com">
+                    </div>
+                    <div>
+                        <label for="feedback" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Feedback / Comments</label>
+                        <textarea id="feedback" name="feedback" rows="5" required
+                                  class="w-full px-4 py-2 border border-gray-300 rounded-button focus:outline-none focus:ring-2 focus:ring-primary/50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200"
+                                  placeholder="Please share your experience, suggestions, or any issues you encountered..."></textarea>
+                    </div>
+                    <div class="pt-2">
+                        <button type="submit"
+                                class="w-full sm:w-auto bg-primary text-white px-6 py-2.5 rounded-button hover:bg-blue-700 transition-colors font-medium inline-flex items-center justify-center gap-2 disabled:opacity-50">
+                            <i class="ri-send-plane-2-line"></i> Send Feedback
+                        </button>
+                    </div>
+                </form>
+            </div> <!-- End Feedback Card -->
+        </main>
+        <!-- Footer -->
+        <footer class="bg-gray-800 text-gray-400 py-8 mt-12">
+            <div class="container mx-auto px-4 text-center">
+                <div class="credits text-sm mb-4">
+                   <p>Powered by <strong>D SAKSHI</strong> (MCA Final Year BIT Durg, Chhattisgarh) | © SlimShadow Org. All Rights Reserved.</p>
+                </div>
+                <div class="flex justify-center 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>
+        </footer>
+    </div> <!-- End #app-container -->
+    <script>
+        // --- THEME TOGGLE LOGIC ---
+        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;
+            }
+        }
+        // Check localStorage on load
+        const prefersDark = localStorage.getItem('theme') === 'dark' ||
+                           (localStorage.getItem('theme') === null && window.matchMedia('(prefers-color-scheme: dark)').matches);
+        applyTheme(prefersDark);
+        // Add listener to toggle button
+        if (themeToggle) {
+            themeToggle.addEventListener('change', (event) => {
+                const isDark = event.target.checked;
+                applyTheme(isDark);
+                localStorage.setItem('theme', isDark ? 'dark' : 'light');
+            });
+        }
+        // --- Logout Button Logic ---
+        const logoutButton = document.getElementById("logoutButton");
+        if (logoutButton) {
+            logoutButton.addEventListener("click", function() {
+                console.log("Logout clicked, redirecting...");
+                window.location.href = "index.html"; // Redirect to main app/login
+            });
+        } else {
+            console.warn("Logout button not found.");
+        }
+        // --- Feedback Form Logic ---
+        const feedbackForm = document.getElementById('feedbackForm');
+        const successMessage = document.getElementById('feedbackSuccessMessage');
+        if (feedbackForm) {
+            feedbackForm.addEventListener('submit', function(event) {
+                event.preventDefault(); // Prevent default form submission
+                // Basic validation (Tailwind uses :required for browser validation)
+                // You could add more JS validation here if needed
+                // Simulate submission (Replace with actual fetch/API call)
+                console.log('Feedback form submitted (simulation)');
+                const formData = new FormData(feedbackForm);
+                for (let [key, value] of formData.entries()) {
+                    console.log(`${key}: ${value}`);
+                }
+                // Clear the form
+                feedbackForm.reset();
+                // Show success message
+                if (successMessage) {
+                    successMessage.classList.remove('hidden');
+                    // Optional: Hide the message after a few seconds
+                    setTimeout(() => {
+                        successMessage.classList.add('hidden');
+                    }, 5000); // Hide after 5 seconds
+                }
+                alert('Thank you for your feedback! (Simulation)'); // Simple alert for now
+            });
+        } else {
+            console.warn("Feedback form not found.");
+        }
+    </script>
+</body>
+</html>

features.html ADDED Viewed

	@@ -0,0 +1,247 @@

+<!DOCTYPE html>
+<!-- Start with lang="en" and no 'dark' class initially -->
+<html lang="en" class="">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vision and Discern - Key Features</title> <!-- Updated Title -->
+    <!-- Tailwind CSS via CDN -->
+    <script src="https://cdn.tailwindcss.com/3.4.1"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class', // Enable class-based dark mode
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#4a90e2', // Match main app's primary color
+                        secondary: '#f0f8ff', // Light blueish background for reference
+                    },
+                    borderRadius: {
+                        'none': '0px', 'sm': '4px', DEFAULT: '8px', 'md': '12px',
+                        'lg': '16px', 'xl': '20px', '2xl': '24px', '3xl': '32px',
+                        'full': '9999px',
+                        'button': '4px' // Match main app's button radius
+                    }
+                }
+            }
+        }
+    </script>
+    <!-- Fonts -->
+    <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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <!-- Icons (Remixicon) -->
+    <link href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css" rel="stylesheet">
+    <!-- Custom Styles (Mainly for the switch) -->
+    <style>
+        body { font-family: 'Inter', sans-serif; }
+        /* Custom Switch Styles - Copied from main app */
+        .custom-switch { position: relative; display: inline-block; width: 50px; height: 24px; }
+        .custom-switch-input { opacity: 0; width: 0; height: 0; }
+        .custom-switch-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; }
+        .custom-switch-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
+        .custom-switch-input:checked + .custom-switch-slider { background-color: #4a90e2; } /* Your primary color */
+        .custom-switch-input:checked + .custom-switch-slider:before { transform: translateX(26px); }
+         /* Base dark mode styles - Copied from main app */
+        html.dark body { background-color: #111827; color: #d1d5db; }
+        html.dark header, html.dark footer { background-color: #1f2937; }
+        html.dark .card { background-color: #1f2937; border-color: #374151; }
+        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 .subtitle, html.dark .info-text, html.dark .credits p, html.dark .attribution { color: #d1d5db; }
+        html.dark .text-gray-600 { color: #9ca3af; }
+        html.dark .text-gray-700 { color: #9ca3af; }
+        html.dark .text-gray-500 { color: #6b7280; }
+        html.dark .button-secondary { background-color: #4b5563; color: #d1d5db; }
+        html.dark .button-secondary:hover { background-color: #374151; }
+        html.dark .features-list li strong { color: #e5e7eb; } /* Slightly lighter strong tag in dark mode */
+    </style>
+</head>
+<body class="bg-gray-100 dark:bg-gray-900 min-h-screen flex flex-col text-gray-900 dark:text-gray-200">
+    <!-- Main Application Container -->
+    <div id="app-container" class="flex-grow flex flex-col">
+        <!-- Header -->
+        <header class="bg-white dark:bg-gray-800 shadow-sm sticky top-0 z-50">
+            <div class="container mx-auto px-4 py-3 flex items-center justify-between">
+                <!-- Left Side: Logo & Nav -->
+                <div class="flex items-center">
+                    <a href="home.html" class="text-xl font-bold text-primary dark:text-blue-400 mr-6">Vision & Discern</a>
+                    <nav class="hidden md:flex space-x-6">
+                        <a href="home.html" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-blue-400">Home</a>
+                        <a href="index.html" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-blue-400">OCR</a>
+                        <!-- Links to other tools (optional, consider if they are separate apps or tabs) -->
+                        <!-- <a href="translation.html" target="_blank" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-blue-400">Translation</a> -->
+                        <!-- <a href="gender_predictor.html" target="_blank" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-blue-400">Gender</a> -->
+                        <a href="features.html" class="text-primary dark:text-blue-400 font-medium">Features</a>
+                        <a href="feedback.html" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-blue-400">Feedback</a>
+                        <a href="contact.html" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-blue-400">Contact Us</a>
+                        <!-- <a href="admin.html" target="_blank" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-blue-400">Admin</a> -->
+                    </nav>
+                </div>
+                <!-- Right Side: Switches & Logout -->
+                <div class="flex items-center space-x-4">
+                    <!-- Theme Switch -->
+                    <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>
+                     <!-- Logout Button -->
+                    <button id="logoutButton" class="button-secondary bg-red-600 hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-800 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>
+                        Logout
+                    </button>
+                    <!-- Mobile Menu Button (Placeholder) -->
+                    <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>
+                </div>
+            </div>
+        </header>
+        <!-- Main Content Area -->
+        <main class="flex-grow container mx-auto px-4 py-8">
+            <!-- Page Header Section -->
+            <section class="mb-10 text-center border-b border-gray-200 dark:border-gray-700 pb-6">
+                <h1 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-2">Application Features</h1>
+                <p class="subtitle text-lg text-gray-700 dark:text-gray-300 mb-1">Explore the capabilities of our AI-powered tools</p>
+                <p class="attribution text-sm text-gray-500 dark:text-gray-400">Powered by Sakshi's Engines</p>
+            </section>
+            <!-- Features Section -->
+            <div class="card bg-white dark:bg-gray-800 p-6 md:p-8 rounded-lg shadow-lg border border-gray-100 dark:border-gray-700 max-w-3xl mx-auto">
+                 <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-6 flex items-center gap-3 border-b border-gray-200 dark:border-gray-600 pb-3">
+                     <i class="ri-star-line text-primary dark:text-blue-400 text-3xl"></i>
+                     <span>Key Features</span>
+                 </h2>
+                 <!-- Using Tailwind for the list -->
+                 <ul class="features-list list-none space-y-4 text-gray-700 dark:text-gray-300">
+                     <li class="flex items-start gap-3">
+                         <i class="ri-text-scan-line text-lg mt-1 text-primary dark:text-blue-400"></i>
+                         <div>
+                             <strong class="font-semibold text-gray-800 dark:text-gray-100">Accurate Hindi OCR:</strong>
+                             <span>Extracts Hindi text from images with high precision using advanced deep learning models.</span>
+                         </div>
+                     </li>
+                     <li class="flex items-start gap-3">
+                         <i class="ri-focus-3-line text-lg mt-1 text-primary dark:text-blue-400"></i>
+                         <div>
+                             <strong class="font-semibold text-gray-800 dark:text-gray-100">Word Detection:</strong>
+                             <span>Identifies and visually highlights individual word boundaries within the uploaded image.</span>
+                         </div>
+                     </li>
+                     <li class="flex items-start gap-3">
+                        <i class="ri-markup-line text-lg mt-1 text-primary dark:text-blue-400"></i>
+                        <div>
+                            <strong class="font-semibold text-gray-800 dark:text-gray-100">Text Prediction:</strong>
+                            <span>Provides the most likely textual representation of the detected handwritten words.</span>
+                        </div>
+                    </li>
+                     <li class="flex items-start gap-3">
+                         <i class="ri-translate-2 text-lg mt-1 text-primary dark:text-blue-400"></i>
+                         <div>
+                             <strong class="font-semibold text-gray-800 dark:text-gray-100">Multi-Language Translation:</strong>
+                             <span>Translates the extracted text (or any input text) between numerous languages.</span>
+                         </div>
+                     </li>
+                      <li class="flex items-start gap-3">
+                         <i class="ri-men-line text-lg mt-1 text-primary dark:text-blue-400"></i> <i class="ri-women-line text-lg mt-1 text-primary dark:text-blue-400 -ml-2"></i>
+                         <div class="ml-1">
+                             <strong class="font-semibold text-gray-800 dark:text-gray-100">Gender Prediction:</strong>
+                             <span>Predicts the likely gender associated with given names based on statistical models.</span>
+                         </div>
+                     </li>
+                      <li class="flex items-start gap-3">
+                         <i class="ri-drag-move-2-line text-lg mt-1 text-primary dark:text-blue-400"></i>
+                         <div>
+                             <strong class="font-semibold text-gray-800 dark:text-gray-100">User-Friendly Interface:</strong>
+                             <span>Simple, intuitive, and responsive design built with Tailwind CSS for ease of use across devices. Drag & drop supported for uploads.</span>
+                         </div>
+                     </li>
+                     <li class="flex items-start gap-3">
+                         <i class="ri-lock-password-line text-lg mt-1 text-primary dark:text-blue-400"></i>
+                         <div>
+                             <strong class="font-semibold text-gray-800 dark:text-gray-100">Secure Authentication:</strong>
+                             <span>Protects access with JWT-based login and signup functionality, ensuring only registered users can use the core features.</span>
+                         </div>
+                     </li>
+                      <li class="flex items-start gap-3">
+                         <i class="ri-moon-foggy-line text-lg mt-1 text-primary dark:text-blue-400"></i>
+                         <div>
+                             <strong class="font-semibold text-gray-800 dark:text-gray-100">Dark Mode Support:</strong>
+                             <span>Includes a theme toggle for comfortable viewing in different lighting conditions.</span>
+                         </div>
+                     </li>
+                 </ul>
+            </div> <!-- End Features Card -->
+        </main>
+        <!-- Footer -->
+        <footer class="bg-gray-800 text-gray-400 py-8 mt-12">
+            <div class="container mx-auto px-4 text-center">
+                <div class="credits text-sm mb-4">
+                   <p>Powered by <strong>D SAKSHI</strong> (MCA Final Year BIT Durg, Chhattisgarh) | © SlimShadow Org. All Rights Reserved.</p>
+                </div>
+                <div class="flex justify-center 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>
+        </footer>
+    </div> <!-- End #app-container -->
+    <script>
+        // --- THEME TOGGLE LOGIC ---
+        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;
+            }
+        }
+        // Check localStorage on load
+        const prefersDark = localStorage.getItem('theme') === 'dark' ||
+                           (localStorage.getItem('theme') === null && window.matchMedia('(prefers-color-scheme: dark)').matches);
+        applyTheme(prefersDark);
+        // Add listener to toggle button
+        if (themeToggle) {
+            themeToggle.addEventListener('change', (event) => {
+                const isDark = event.target.checked;
+                applyTheme(isDark);
+                localStorage.setItem('theme', isDark ? 'dark' : 'light');
+            });
+        }
+        // --- Logout Button Logic ---
+        const logoutButton = document.getElementById("logoutButton");
+        if (logoutButton) {
+            logoutButton.addEventListener("click", function() {
+                console.log("Logout clicked, redirecting...");
+                window.location.href = "index.html"; // Redirect to main app/login
+            });
+        } else {
+            console.warn("Logout button not found.");
+        }
+    </script>
+</body>
+</html>

feedback.html ADDED Viewed

	@@ -0,0 +1,303 @@

+<!DOCTYPE html>
+<!-- Start with lang="en" and no 'dark' class initially -->
+<html lang="en" class="">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vision and Discern - Feedback</title> <!-- Updated Title -->
+    <!-- Tailwind CSS via CDN -->
+    <script src="https://cdn.tailwindcss.com/3.4.1"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class', // Enable class-based dark mode
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#4a90e2', // Match main app's primary color
+                        secondary: '#f8f9fa', // Using light gray for backgrounds now
+                        success: '#10b981', // emerald-500
+                        danger: '#ef4444',  // red-500
+                    },
+                    borderRadius: {
+                        'none': '0px', 'sm': '4px', DEFAULT: '8px', 'md': '12px',
+                        'lg': '16px', 'xl': '20px', '2xl': '24px', '3xl': '32px',
+                        'full': '9999px',
+                        'button': '8px' // Using slightly rounder buttons like NIC project
+                        // 'button': '4px' // Or keep the previous style
+                    }
+                }
+            }
+        }
+    </script>
+    <!-- Fonts -->
+    <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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <!-- Icons (Remixicon) -->
+    <link href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css" rel="stylesheet">
+    <!-- Custom Styles (Mainly for the switch) -->
+    <style>
+        body { font-family: 'Inter', sans-serif; }
+        /* Custom Switch Styles - Copied from main app */
+        .custom-switch { position: relative; display: inline-block; width: 50px; height: 24px; }
+        .custom-switch-input { opacity: 0; width: 0; height: 0; }
+        .custom-switch-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; }
+        .custom-switch-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
+        .custom-switch-input:checked + .custom-switch-slider { background-color: #4a90e2; } /* Your primary color */
+        .custom-switch-input:checked + .custom-switch-slider:before { transform: translateX(26px); }
+         /* Base dark mode styles - Copied from main app */
+        html.dark body { background-color: #111827; color: #d1d5db; }
+        html.dark header, html.dark footer { background-color: #1f2937; }
+        html.dark .card { background-color: #1f2937; border-color: #374151; }
+        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 .subtitle, html.dark .info-text, html.dark .credits p, html.dark .attribution { color: #d1d5db; }
+        html.dark .text-gray-600 { color: #9ca3af; }
+        html.dark .text-gray-700 { color: #9ca3af; }
+        html.dark .text-gray-500 { color: #6b7280; }
+        /* Input/Textarea dark styles */
+         html.dark input[type="text"],
+         html.dark input[type="email"],
+         html.dark textarea {
+             background-color: #374151; /* gray-700 */
+             border-color: #4b5563; /* gray-600 */
+             color: #d1d5db; /* gray-300 */
+         }
+         html.dark input::placeholder,
+         html.dark textarea::placeholder {
+             color: #9ca3af; /* gray-400 */
+         }
+        html.dark .button-secondary { background-color: #4b5563; color: #d1d5db; }
+        html.dark .button-secondary:hover { background-color: #374151; }
+        /* Feedback Message Dark Mode */
+        html.dark .feedback-message-success { background-color: #065f46; color: #a7f3d0; } /* emerald */
+        html.dark .feedback-message-error { background-color: #991b1b; color: #fecaca; } /* red */
+    </style>
+</head>
+<body class="bg-gray-50 dark:bg-gray-900 min-h-screen flex flex-col text-gray-900 dark:text-gray-200">
+    <!-- Main Application Container -->
+    <div id="app-container" class="flex-grow flex flex-col">
+        <!-- Header -->
+        <header class="bg-white dark:bg-gray-800 shadow-sm sticky top-0 z-50">
+            <div class="container mx-auto px-4 py-3 flex items-center justify-between">
+                <!-- Left Side: Logo & Nav -->
+                <div class="flex items-center">
+                    <a href="home.html" class="text-xl font-bold text-primary dark:text-blue-400 mr-6">Vision & Discern</a>
+                    <nav class="hidden md:flex space-x-6">
+                        <a href="home.html" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-blue-400">Home</a>
+                        <a href="index.html" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-blue-400">OCR</a>
+                         <!-- Optional Links, remove if not separate pages -->
+                        <!-- <a href="translation.html" target="_blank" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-blue-400">Translation</a> -->
+                        <!-- <a href="gender_predictor.html" target="_blank" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-blue-400">Gender</a> -->
+                        <a href="features.html" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-blue-400">Features</a>
+                        <a href="feedback.html" class="text-primary dark:text-blue-400 font-medium">Feedback</a>
+                        <a href="contact.html" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-blue-400">Contact Us</a>
+                         <!-- <a href="admin.html" target="_blank" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-blue-400">Admin</a> -->
+                    </nav>
+                </div>
+                <!-- Right Side: Switches & Logout -->
+                <div class="flex items-center space-x-4">
+                    <!-- Theme Switch -->
+                    <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>
+                     <!-- Logout Button -->
+                    <button id="logoutButton" class="button-secondary bg-red-600 hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-800 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>
+                        Logout
+                    </button>
+                    <!-- Mobile Menu Button (Placeholder) -->
+                    <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>
+                </div>
+            </div>
+        </header>
+        <!-- Main Content Area -->
+        <main class="flex-grow container mx-auto px-4 py-8">
+            <!-- Page Header Section -->
+            <section class="mb-10 text-center border-b border-gray-200 dark:border-gray-700 pb-6">
+                <h1 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-2">Feedback</h1>
+                <p class="subtitle text-lg text-gray-700 dark:text-gray-300 mb-1">Share your feedback to help us improve</p>
+                <p class="attribution text-sm text-gray-500 dark:text-gray-400">Powered by Sakshi's Hindi OCR Engine</p>
+            </section>
+            <!-- Feedback Form Section -->
+            <div class="card bg-white dark:bg-gray-800 p-6 md:p-8 rounded-lg shadow-lg border border-gray-100 dark:border-gray-700 max-w-xl mx-auto" id="feedback">
+                 <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4 flex items-center gap-3">
+                    <i class="ri-chat-voice-line text-primary dark:text-blue-400"></i>
+                    <span>Your Feedback</span>
+                 </h2>
+                 <!-- Removed feedback-form wrapper div, styling applied to card -->
+                 <p class="text-gray-600 dark:text-gray-400 mb-6">We appreciate your input! Please let us know your thoughts, suggestions, or any issues you encountered with the application.</p>
+                <!-- Using a standard form element -->
+                <form id="feedbackFormActual" class="space-y-5">
+                    <div>
+                        <label for="feedbackText" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 sr-only">Feedback</label> <!-- Screen reader only label -->
+                        <textarea id="feedbackText" name="comment" required rows="6"
+                                  class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200"
+                                  placeholder="Enter your feedback here..."></textarea>
+                    </div>
+                    <!-- Feedback Message Placeholder - Styled with Tailwind -->
+                    <p id="feedbackMessage" class="info-text text-sm font-medium p-3 rounded-md hidden"></p>
+                    <div class="pt-1">
+                        <button id="submitFeedback" type="submit"
+                                class="w-full bg-primary text-white px-6 py-2.5 rounded-button hover:bg-blue-700 transition-colors font-medium inline-flex items-center justify-center gap-2 disabled:opacity-50">
+                             <i class="ri-send-plane-2-line"></i> Submit Feedback
+                        </button>
+                    </div>
+                 </form>
+            </div> <!-- End Feedback Card -->
+        </main>
+        <!-- Footer -->
+        <footer class="bg-gray-800 text-gray-400 py-8 mt-12">
+            <div class="container mx-auto px-4 text-center">
+                <div class="credits text-sm mb-4">
+                   <p>Powered by <strong>D SAKSHI</strong> (MCA Final Year BIT Durg, Chhattisgarh) | © SlimShadow Org. All Rights Reserved.</p>
+                </div>
+                <div class="flex justify-center 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>
+        </footer>
+    </div> <!-- End #app-container -->
+    <script>
+        // --- API Base URL ---
+        const API_BASE_URL = 'https://sameernotes-ocr.hf.space';
+        // --- DOM Elements ---
+        const themeToggle = document.getElementById('themeToggle');
+        const htmlElement = document.documentElement;
+        const logoutButton = document.getElementById('logoutButton');
+        const feedbackForm = document.getElementById('feedbackFormActual'); // Get the form element
+        const submitFeedbackButton = document.getElementById('submitFeedback');
+        const feedbackText = document.getElementById('feedbackText');
+        const feedbackMessage = document.getElementById('feedbackMessage');
+        // --- THEME TOGGLE LOGIC ---
+        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');
+            });
+        }
+        // --- Logout Button Logic ---
+        if (logoutButton) {
+            logoutButton.addEventListener("click", function() {
+                console.log("Logout clicked, redirecting...");
+                window.location.href = "index.html"; // Redirect to main app/login
+            });
+        }
+        // --- Feedback Submission Logic ---
+        function showFeedbackMessage(message, type = 'info') { // type can be 'info', 'success', 'error'
+            if (!feedbackMessage) return;
+            feedbackMessage.textContent = message;
+            // Remove previous color classes
+            feedbackMessage.classList.remove('hidden', 'feedback-message-success', 'bg-emerald-100', 'text-emerald-800', 'feedback-message-error', 'bg-red-100', 'text-red-800', 'dark:bg-emerald-900', 'dark:text-emerald-200', 'dark:bg-red-900', 'dark:text-red-200');
+            if (type === 'success') {
+                 feedbackMessage.classList.add('feedback-message-success', 'bg-emerald-100', 'text-emerald-800', 'dark:bg-emerald-900', 'dark:text-emerald-200');
+            } else if (type === 'error') {
+                 feedbackMessage.classList.add('feedback-message-error', 'bg-red-100', 'text-red-800', 'dark:bg-red-900', 'dark:text-red-200');
+            } else {
+                // Default info style (optional)
+                 feedbackMessage.classList.add('text-gray-600', 'dark:text-gray-400');
+            }
+            feedbackMessage.classList.remove('hidden'); // Make it visible
+            // Auto-hide after 5 seconds
+            setTimeout(() => {
+                feedbackMessage.classList.add('hidden');
+                feedbackMessage.textContent = '';
+                 // Clean up color classes after hiding
+                feedbackMessage.classList.remove('feedback-message-success', 'bg-emerald-100', 'text-emerald-800', 'feedback-message-error', 'bg-red-100', 'text-red-800', 'dark:bg-emerald-900', 'dark:text-emerald-200', 'dark:bg-red-900', 'dark:text-red-200', 'text-gray-600', 'dark:text-gray-400');
+            }, 5000);
+        }
+        if (feedbackForm) {
+             feedbackForm.addEventListener('submit', async (event) => { // Use the form's submit event
+                event.preventDefault(); // Prevent default form submission
+                submitFeedbackButton.disabled = true; // Disable button during submission
+                const comment = feedbackText.value.trim();
+                if (!comment) {
+                   showFeedbackMessage('Please enter your feedback.', 'error');
+                   submitFeedbackButton.disabled = false; // Re-enable button
+                   return;
+                }
+                try {
+                    // Assuming the API accepts anonymous feedback or you handle authentication differently
+                    const response = await fetch(`${API_BASE_URL}/feedback/`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            // If authentication is sometimes required, add Authorization header conditionally
+                            // 'Authorization': `Bearer ${accessToken}` // Example if token needed
+                        },
+                        body: JSON.stringify({
+                             username: "Anonymous", // Or get username if available
+                             comment: comment
+                        })
+                    });
+                    if (response.ok) {
+                        showFeedbackMessage('Feedback submitted successfully! Thank you.', 'success');
+                        feedbackText.value = ''; // Clear input
+                    } else {
+                        const errorData = await response.json().catch(() => ({ detail: 'Failed to submit feedback.' }));
+                        showFeedbackMessage(`Error: ${errorData.detail || 'Failed to submit feedback.'}`, 'error');
+                    }
+                } catch (error) {
+                    showFeedbackMessage("Network error submitting feedback. Please try again.", 'error');
+                    console.error("Feedback submission error:", error);
+                } finally {
+                     submitFeedbackButton.disabled = false; // Re-enable button
+                }
+            });
+        } else {
+             console.warn("Feedback form element not found");
+        }
+    </script>
+</body>
+</html>

gender_predictor.html ADDED Viewed

	@@ -0,0 +1,448 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Name Gender Predictor</title>
+    <style>
+        /* ---  REUSABLE STYLES (from translation.html) --- */
+        :root {
+            --primary-color: #4a90e2;  /*  Consistent primary color */
+            --secondary-color: #f8f9fa;
+            --text-color: #2c3e50;
+            --border-radius: 12px;
+            --transition: all 0.3s ease;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; /* Consistent font */
+            line-height: 1.6;
+            color: var(--text-color);
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); /* Consistent background */
+            min-height: 100vh;
+            padding: 2rem;
+        }
+        .container {
+            max-width: 1000px;
+            margin: 0 auto;
+            background: white;
+            padding: 2rem;
+            border-radius: var(--border-radius);
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+        }
+        h1 {
+            color: var(--primary-color);
+            text-align: center;
+            margin-bottom: 2rem;
+            font-size: 2.5rem;
+            font-weight: 700;
+        }
+        h2 {
+            color: var(--text-color);
+            margin-bottom: 1.5rem;
+            font-size: 1.8rem;
+        }
+        /* --- TAB STYLES --- */
+        .tab {
+            display: flex;
+            gap: 1rem;
+            margin-bottom: 2rem;
+            border: none;
+            background: none;
+        }
+        .tab button {
+            flex: 1;
+            padding: 1rem;
+            font-size: 1.1rem;
+            border: 2px solid var(--primary-color);
+            background: transparent;
+            color: var(--primary-color);
+            border-radius: var(--border-radius);
+            cursor: pointer;
+            transition: var(--transition);
+        }
+        .tab button:hover {
+            background: rgba(74, 144, 226, 0.1);
+        }
+        .tab button.active {
+            background: var(--primary-color);
+            color: white;
+        }
+        .tabcontent {
+            display: none;  /*  Initially hidden */
+            padding: 2rem;
+            background: var(--secondary-color);
+            border-radius: var(--border-radius);
+            margin-bottom: 2rem;
+        }
+        /* --- END TAB STYLES --- */
+        label {
+            display: block;
+            margin-bottom: 0.5rem;
+            font-weight: 600;
+            color: var(--text-color);
+        }
+        textarea, input[type="text"] {
+            width: 100%;
+            padding: 1rem;
+            margin-bottom: 1.5rem;
+            border: 2px solid #e1e8ed;
+            border-radius: var(--border-radius);
+            font-size: 1rem;
+            transition: var(--transition);
+            background: white;
+        }
+        textarea {
+            min-height: 150px;
+            resize: vertical;
+        }
+        textarea:focus, input[type="text"]:focus {
+            outline: none;
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
+        }
+        button {
+            background: var(--primary-color);
+            color: white;
+            padding: 1rem 2rem;
+            border: none;
+            border-radius: var(--border-radius);
+            font-size: 1.1rem;
+            cursor: pointer;
+            transition: var(--transition);
+            width: 100%;
+            margin-top: 1rem;
+        }
+        button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(74, 144, 226, 0.3);
+        }
+        .loading-indicator {
+            display: none;
+            text-align: center;
+            color: var(--primary-color);
+            margin: 1rem 0;
+            font-weight: 600;
+        }
+        /* --- RESULT STYLES (from translation.html)--- */
+        #results {
+            background: white;
+            padding: 1.5rem;
+            border-radius: var(--border-radius);
+            margin-top: 2rem;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+        }
+        .result-header {
+            color: var(--primary-color);
+            margin-bottom: 1rem;
+            font-size: 1.3rem;
+        }
+        .result-item {
+            margin-bottom: 1rem;
+            padding-bottom: 1rem;
+            border-bottom: 1px solid #e1e8ed;
+        }
+        .result-item:last-child {
+            border-bottom: none;
+            margin-bottom: 0;
+            padding-bottom: 0;
+        }
+      .result-label {
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+        }
+        /* --- ERROR MESSAGE --- */
+        #error-message {
+            background: #fee2e2;
+            color: #dc2626;
+            padding: 1rem;
+            border-radius: var(--border-radius);
+            margin-top: 1rem;
+            display: none;
+        }
+        /* --- RESPONSIVE --- */
+        @media (max-width: 768px) {
+            body {
+                padding: 1rem;
+            }
+            .container {
+                padding: 1rem;
+            }
+            .tab button {
+                padding: 0.8rem;
+                font-size: 1rem;
+            }
+            .tabcontent {
+                padding: 1rem;
+            }
+        }
+    .credits {
+        text-align: center;
+        margin-top: 2rem;
+        color: var(--text-color);
+        font-size: 0.875rem;
+    }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Name Gender Predictor</h1>
+        <div class="tab">
+            <button class="tablinks active" onclick="openTab(event, 'single')">Single Name</button>
+            <button class="tablinks" onclick="openTab(event, 'batch')">Batch Names</button>
+        </div>
+        <!-- Single Name Prediction Tab -->
+        <div id="single" class="tabcontent" style="display: block;">
+            <h2>Single Name Prediction</h2>
+            <label for="singleName">Enter a single name:</label>
+            <input type="text" id="singleName" name="singleName" placeholder="e.g., Sakshi">
+            <button id="predictSingleButton">Predict Gender</button>
+            <div class="loading-indicator" id="singleLoading">
+                Analyzing name...
+            </div>
+            <div id="singleResult" class = "results">
+                 <h3 class="result-header">Prediction Results</h3>
+            </div>
+        </div>
+        <!-- Batch Name Prediction Tab -->
+        <div id="batch" class="tabcontent">
+            <h2>Batch Name Prediction</h2>
+            <label for="batchNames">Enter names (comma-separated):</label>
+            <textarea id="batchNames" name="batchNames" rows="4" placeholder="e.g., Sakshi, Sameer, Shweta"></textarea>
+            <button id="predictBatchButton">Predict Multiple Names</button>
+            <div class="loading-indicator" id="batchLoading">
+                Analyzing names...
+            </div>
+             <div id="batchResults" class = "results">
+                <h3 class="result-header">Prediction Results</h3>
+            </div>
+        </div>
+        <div id="error-message"></div>
+          <div class="credits">
+            <p>Powered by <strong>D SAKSHI</strong> (MCA Final Year BIT Durg, Chhattisgarh)</p>
+            <p>© SlimShadow Org. All Rights Reserved.</p>
+        </div>
+    </div>
+    <script>
+        const API_BASE_URL = "https://sameernotes-gender-prediction-space.hf.space";
+        // ---  ELEMENTS ---
+        const singleNameInput = document.getElementById('singleName');
+        const predictSingleButton = document.getElementById('predictSingleButton');
+        const singleResultDiv = document.getElementById('singleResult');
+        const batchNamesInput = document.getElementById('batchNames');
+        const predictBatchButton = document.getElementById('predictBatchButton');
+        const batchResultsDiv = document.getElementById('batchResults');
+        const errorMessageDiv = document.getElementById('error-message');
+        const singleLoadingDiv = document.getElementById('singleLoading'); //  Separate loading indicators
+        const batchLoadingDiv = document.getElementById('batchLoading');
+        // --- TAB FUNCTIONALITY ---
+        function openTab(evt, tabName) {
+            const tabcontent = document.getElementsByClassName("tabcontent");
+            for (let i = 0; i < tabcontent.length; i++) {
+                tabcontent[i].style.display = "none";
+            }
+            const tablinks = document.getElementsByClassName("tablinks");
+            for (let i = 0; i < tablinks.length; i++) {
+                tablinks[i].className = tablinks[i].className.replace(" active", "");
+            }
+            document.getElementById(tabName).style.display = "block";
+            evt.currentTarget.className += " active";
+             // Hide results on tab switch
+            singleResultDiv.innerHTML = '';
+            batchResultsDiv.innerHTML = '';
+        }
+        // --- SINGLE PREDICTION ---
+        predictSingleButton.addEventListener('click', async () => {
+            const name = singleNameInput.value.trim();
+            if (!name) {
+                showError("Please enter a name.");
+                return;
+            }
+            hideError();
+            showLoading(singleLoadingDiv);  //  Show single loading
+            singleResultDiv.innerHTML = ''; // Clear previous results
+            try {
+                const response = await fetch(`${API_BASE_URL}/predict_single?name=${encodeURIComponent(name)}&threshold=0.5`);
+                if (!response.ok) {
+                    const errorData = await response.json();
+                    showError(`Error: ${errorData.detail || 'An unexpected error occurred.'}`);
+                    return;
+                }
+                const data = await response.json();
+                displaySingleResult(data);
+            } catch (error) {
+                showError("An error occurred during prediction. Please try again.");
+                console.error("Prediction error:", error);
+            } finally {
+                hideLoading(singleLoadingDiv); // Hide single loading
+            }
+        });
+        // --- BATCH PREDICTION ---
+       predictBatchButton.addEventListener('click', async () => {
+            const namesString = batchNamesInput.value.trim();
+            const names = namesString.split(',').map(name => name.trim()).filter(name => name !== "");
+            if (names.length === 0) {
+                showError("Please enter at least one valid name.");
+                return;
+            }
+            hideError();
+            showLoading(batchLoadingDiv); // Show batch loading
+            batchResultsDiv.innerHTML = ''; // Clear previous results.
+            try {
+                const response = await fetch(`${API_BASE_URL}/predict`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({ names: names, threshold: 0.5 })
+                });
+                if (!response.ok) {
+                    const errorData = await response.json();
+                    showError(`Error: ${errorData.detail || 'An unexpected error occurred.'}`);
+                    return;
+                }
+                const data = await response.json();
+                displayBatchResults(data);
+            } catch (error) {
+                showError("An error occurred during prediction. Please try again.");
+                console.error("Prediction error:", error);
+            } finally {
+                hideLoading(batchLoadingDiv); // Hide batch loading
+            }
+        });
+        // --- DISPLAY RESULTS (REFACTORED) ---
+          function displaySingleResult(data) {
+            const resultHTML = `
+                <div class="result-item">
+                   <div class="result-label">Name:</div>
+                   <div>${data.name}</div>
+                </div>
+                 <div class="result-item">
+                    <div class="result-label">Predicted Gender:</div>
+                    <div>${data.predicted_gender}</div>
+                </div>
+                  <div class="result-item">
+                    <div class="result-label">Male Probability:</div>
+                    <div> ${data.male_probability.toFixed(2)}</div>
+                </div>
+                <div class="result-item">
+                  <div class="result-label">Confidence:</div>
+                  <div>${data.confidence.toFixed(2)}</div>
+                </div>
+            `;
+            singleResultDiv.innerHTML = resultHTML;
+        }
+        function displayBatchResults(data) {
+            let resultsHTML = '';
+            for (const prediction of data.predictions) {
+              resultsHTML += `
+                <div class="result-item">
+                   <div class="result-label">Name:</div>
+                   <div>${prediction.name}</div>
+                </div>
+                 <div class="result-item">
+                    <div class="result-label">Predicted Gender:</div>
+                    <div>${prediction.predicted_gender}</div>
+                </div>
+                  <div class="result-item">
+                    <div class="result-label">Male Probability:</div>
+                    <div> ${prediction.male_probability.toFixed(2)}</div>
+                </div>
+                <div class="result-item">
+                  <div class="result-label">Confidence:</div>
+                  <div>${prediction.confidence.toFixed(2)}</div>
+                </div>
+            `;
+            }
+            batchResultsDiv.innerHTML = resultsHTML;
+        }
+        // --- UTILITY FUNCTIONS ---
+        function showError(message) {
+            errorMessageDiv.textContent = message;
+            errorMessageDiv.style.display = 'block';
+              setTimeout(() => {
+                errorMessageDiv.style.display = 'none';
+            }, 5000);
+        }
+        function hideError() {
+            errorMessageDiv.style.display = 'none';
+        }
+        function showLoading(loadingIndicator) {
+            loadingIndicator.style.display = 'block';
+        }
+        function hideLoading(loadingIndicator) {
+            loadingIndicator.style.display = 'none';
+        }
+    </script>
+</body>
+</html>

home.html ADDED Viewed

	@@ -0,0 +1,247 @@

+<!DOCTYPE html>
+<!-- Start with lang="en" and no 'dark' class initially -->
+<html lang="en" class="">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vision and Discern - Home</title> <!-- Updated Title -->
+    <!-- Tailwind CSS via CDN -->
+    <script src="https://cdn.tailwindcss.com/3.4.1"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class', // Enable class-based dark mode
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#4a90e2', // Match main app's primary color
+                        secondary: '#f0f8ff',
+                    },
+                    borderRadius: {
+                        'none': '0px', 'sm': '4px', DEFAULT: '8px', 'md': '12px',
+                        'lg': '16px', 'xl': '20px', '2xl': '24px', '3xl': '32px',
+                        'full': '9999px',
+                        'button': '4px' // Match main app's button radius
+                    }
+                }
+            }
+        }
+    </script>
+    <!-- Fonts -->
+    <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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <!-- Icons (Remixicon) -->
+    <link href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css" rel="stylesheet">
+    <!-- Custom Styles (Mainly for the switch) -->
+    <style>
+        body { font-family: 'Inter', sans-serif; }
+        /* Custom Switch Styles - Copied from main app */
+        .custom-switch { position: relative; display: inline-block; width: 50px; height: 24px; }
+        .custom-switch-input { opacity: 0; width: 0; height: 0; }
+        .custom-switch-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; }
+        .custom-switch-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
+        .custom-switch-input:checked + .custom-switch-slider { background-color: #4a90e2; } /* Your primary color */
+        .custom-switch-input:checked + .custom-switch-slider:before { transform: translateX(26px); }
+         /* Base dark mode styles - Copied from main app */
+        html.dark body { background-color: #111827; color: #d1d5db; }
+        html.dark header, html.dark footer { background-color: #1f2937; }
+        html.dark .card { background-color: #1f2937; border-color: #374151; }
+        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 .subtitle, html.dark .info-text, html.dark .credits p, html.dark .attribution { color: #d1d5db; }
+        html.dark .text-gray-600 { color: #9ca3af; }
+        html.dark .text-gray-700 { color: #9ca3af; }
+        html.dark .text-gray-500 { color: #6b7280; }
+        html.dark .button-secondary { background-color: #4b5563; color: #d1d5db; }
+        html.dark .button-secondary:hover { background-color: #374151; }
+    </style>
+</head>
+<body class="bg-gray-100 dark:bg-gray-900 min-h-screen flex flex-col text-gray-900 dark:text-gray-200">
+    <!-- Main Application Container -->
+    <div id="app-container" class="flex-grow flex flex-col">
+        <!-- Header -->
+        <header class="bg-white dark:bg-gray-800 shadow-sm sticky top-0 z-50">
+            <div class="container mx-auto px-4 py-3 flex items-center justify-between">
+                <!-- Left Side: Logo & Nav -->
+                <div class="flex items-center">
+                    <a href="home.html" class="text-xl font-bold text-primary dark:text-blue-400 mr-6">Vision & Discern</a>
+                    <nav class="hidden md:flex space-x-6">
+                        <!-- Set 'active' class for the current page -->
+                        <a href="home.html" class="text-primary dark:text-blue-400 font-medium">Home</a>
+                        <a href="index.html" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-blue-400">OCR</a>
+                        <a href="features.html" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-blue-400">Features</a>
+                        <a href="feedback.html" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-blue-400">Feedback</a>
+                        <a href="contact.html" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-blue-400">Contact Us</a>
+                    </nav>
+                </div>
+                <!-- Right Side: Switches & Logout -->
+                <div class="flex items-center space-x-4">
+                    <!-- Theme Switch -->
+                    <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>
+                     <!-- Logout Button -->
+                    <button id="logoutButton" class="button-secondary bg-red-600 hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-800 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>
+                        Logout
+                    </button>
+                     <!-- Mobile Menu Button (Placeholder) -->
+                    <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>
+                </div>
+            </div>
+        </header>
+        <!-- Main Content Area -->
+        <main class="flex-grow container mx-auto px-4 py-8">
+            <!-- Page Header Section -->
+            <section class="mb-10 text-center border-b border-gray-200 dark:border-gray-700 pb-6">
+                <h1 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-2">Hindi OCR Application</h1>
+                <p class="subtitle text-lg text-gray-700 dark:text-gray-300 mb-1">Convert Images to Hindi Text with Ease</p>
+                <p class="attribution text-sm text-gray-500 dark:text-gray-400">Powered by Sakshi's Hindi OCR Engine</p>
+            </section>
+            <!-- Main Content Grid -->
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                <!-- Welcome Section -->
+                <div class="card bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-100 dark:border-gray-700">
+                    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4 flex items-center gap-2">
+                        <i class="ri-sparkling-2-line text-primary dark:text-blue-400"></i>
+                        Welcome!
+                    </h2>
+                    <p class="text-gray-700 dark:text-gray-300 mb-4">
+                        Welcome to the Hindi OCR application. This tool allows you to easily extract text from images containing Hindi script.
+                    </p>
+                    <p class="text-gray-700 dark:text-gray-300">
+                        Navigate to the <a href="index.html" class="text-primary dark:text-blue-400 hover:underline font-medium">OCR</a> page to start converting your images.
+                    </p>
+                    <div class="mt-6 flex justify-center">
+                         <img src="placeholder.svg" alt="Illustration showing OCR process" class="h-40 w-auto text-gray-400 dark:text-gray-600 border border-dashed rounded p-4" />
+                         <!-- Replace placeholder.svg with a relevant image or SVG if available -->
+                    </div>
+                </div>
+                <!-- How to Use Section -->
+                <div class="card bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-100 dark:border-gray-700">
+                    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4 flex items-center gap-2">
+                         <i class="ri-question-line text-primary dark:text-blue-400"></i>
+                         How to Use
+                    </h2>
+                    <ol class="list-decimal list-inside space-y-3 text-gray-700 dark:text-gray-300">
+                        <li class="flex items-start gap-2">
+                            <i class="ri-user-add-line mt-1 text-primary dark:text-blue-400"></i>
+                            <span>Register or Login with your credentials.</span>
+                        </li>
+                         <li class="flex items-start gap-2">
+                            <i class="ri-computer-line mt-1 text-primary dark:text-blue-400"></i>
+                            <span>Navigate to the <a href="index.html" class="text-primary dark:text-blue-400 hover:underline font-medium">OCR tab</a>.</span>
+                        </li>
+                        <li class="flex items-start gap-2">
+                            <i class="ri-upload-2-line mt-1 text-primary dark:text-blue-400"></i>
+                            <span>Click the upload area or drag & drop an image containing Hindi text. You can also select a sample image.</span>
+                        </li>
+                        <li class="flex items-start gap-2">
+                             <i class="ri-camera-lens-line mt-1 text-primary dark:text-blue-400"></i>
+                             <span>Press the <strong>Process Image</strong> button.</span>
+                        </li>
+                        <li class="flex items-start gap-2">
+                            <i class="ri-timer-line mt-1 text-primary dark:text-blue-400"></i>
+                            <span>Wait briefly for the AI to analyze and extract the text.</span>
+                        </li>
+                        <li class="flex items-start gap-2">
+                            <i class="ri-file-copy-line mt-1 text-primary dark:text-blue-400"></i>
+                            <span>View and copy the extracted text from the results area.</span>
+                        </li>
+                        <li class="flex items-start gap-2">
+                             <i class="ri-translate-2 mt-1 text-primary dark:text-blue-400"></i>
+                             <span>Optionally, use the <strong>Translation</strong> tab to translate the extracted text.</span>
+                         </li>
+                         <li class="flex items-start gap-2">
+                             <i class="ri-user-search-line mt-1 text-primary dark:text-blue-400"></i>
+                             <span>Explore the <strong>Gender Prediction</strong> tab for name analysis.</span>
+                         </li>
+                        <li class="flex items-start gap-2">
+                            <i class="ri-feedback-line mt-1 text-primary dark:text-blue-400"></i>
+                            <span>Use the <a href="feedback.html" class="text-primary dark:text-blue-400 hover:underline font-medium">Feedback</a> link to share your thoughts.</span>
+                        </li>
+                    </ol>
+                </div>
+            </div> <!-- End Grid -->
+        </main>
+        <!-- Footer -->
+        <footer class="bg-gray-800 text-gray-400 py-8 mt-12">
+             <div class="container mx-auto px-4 text-center">
+                 <div class="credits text-sm mb-4">
+                    <p>Powered by <strong>D SAKSHI</strong> (MCA Final Year BIT Durg, Chhattisgarh) | © SlimShadow Org. All Rights Reserved.</p>
+                 </div>
+                 <div class="flex justify-center 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>
+        </footer>
+    </div> <!-- End #app-container -->
+    <script>
+        // --- THEME TOGGLE LOGIC ---
+        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;
+            }
+        }
+        // Check localStorage on load
+        const prefersDark = localStorage.getItem('theme') === 'dark' ||
+                           (localStorage.getItem('theme') === null && window.matchMedia('(prefers-color-scheme: dark)').matches);
+        applyTheme(prefersDark);
+        // Add listener to toggle button
+        if (themeToggle) {
+            themeToggle.addEventListener('change', (event) => {
+                const isDark = event.target.checked;
+                applyTheme(isDark);
+                localStorage.setItem('theme', isDark ? 'dark' : 'light');
+            });
+        }
+        // --- Logout Button Logic ---
+        const logoutButton = document.getElementById("logoutButton");
+        if (logoutButton) {
+            logoutButton.addEventListener("click", function() {
+                // TODO: Add actual logout logic here if needed (e.g., clear tokens)
+                console.log("Logout clicked, redirecting...");
+                // Redirect to index.html (which should show the login screen if not authenticated)
+                window.location.href = "index.html";
+            });
+        } else {
+            console.warn("Logout button not found.");
+        }
+    </script>
+</body>
+</html>

images/example-1.jpg ADDED Viewed

images//340/244/205/340/244/202/340/244/244/340/244/260/340/245/215/340/244/260/340/244/276/340/244/267/340/245/215/340/244/237/340/245/215/340/244/260/340/245/200/340/244/257.png ADDED Viewed

images//340/244/205/340/244/227/340/245/215/340/244/260/340/244/270/340/244/260.png ADDED Viewed

images//340/244/205/340/244/247/340/245/215/340/244/257/340/244/257/340/244/250.png ADDED Viewed

images//340/244/205/340/244/250/340/245/201/340/244/270/340/244/202/340/244/247/340/244/276/340/244/250.png ADDED Viewed

index.html CHANGED Viewed

@@ -1,19 +1,1114 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<!-- Start with lang="en" and no 'dark' class initially -->
+<html lang="en" class="">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vision and Discern - AI Text Analysis</title>
+    <!-- Tailwind CSS via CDN -->
+    <script src="https://cdn.tailwindcss.com/3.4.1"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class', // Enable class-based dark mode
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#4a90e2', // Adjusted primary to match old button color
+                        // primary: '#1a73e8', // Or use the NIC project's primary
+                        secondary: '#f0f8ff', // Light blueish background
+                        // Define dark mode colors or rely on Tailwind's defaults
+                    },
+                    borderRadius: {
+                        'none': '0px', 'sm': '4px', DEFAULT: '8px', 'md': '12px',
+                        'lg': '16px', 'xl': '20px', '2xl': '24px', '3xl': '32px',
+                        'full': '9999px',
+                        'button': '4px' // Match old button radius
+                        // 'button': '8px' // Or use the NIC project's button radius
+                    }
+                }
+            }
+        }
+    </script>
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <!-- Using Inter like the NIC project, add Noto Sans Devanagari if needed for specific Hindi text -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+Devanagari:wght@400;700&display=swap" rel="stylesheet">
+    <!-- Icons (Remixicon like the NIC project) -->
+    <link href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css" rel="stylesheet">
+    <!-- Custom Styles (Mainly for the switch, keep this) -->
+    <style>
+        body { font-family: 'Inter', sans-serif; }
+        .hindi-font { font-family: 'Noto Sans Devanagari', sans-serif; } /* Add if displaying Hindi */
+        /* Custom Switch Styles - Keep As Is from NIC Project */
+        .custom-switch { position: relative; display: inline-block; width: 50px; height: 24px; }
+        .custom-switch-input { opacity: 0; width: 0; height: 0; }
+        .custom-switch-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; }
+        .custom-switch-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
+        /* Use the primary color from Tailwind config if possible, or hardcode */
+        .custom-switch-input:checked + .custom-switch-slider { background-color: #4a90e2; } /* Your primary */
+        /* .custom-switch-input:checked + .custom-switch-slider { background-color: #1a73e8; } /* NIC primary */
+        .custom-switch-input:checked + .custom-switch-slider:before { transform: translateX(26px); }
+         /* Base dark mode styles adapted from NIC project */
+        html.dark body {
+            background-color: #111827; /* Tailwind gray-900 */
+            color: #d1d5db; /* Tailwind gray-300 */
+        }
+        html.dark header, html.dark footer {
+            background-color: #1f2937; /* Tailwind gray-800 */
+        }
+         html.dark .tab-container {
+             border-bottom-color: #4b5563; /* gray-600 */
+         }
+         html.dark .tab-button {
+             color: #9ca3af; /* gray-400 */
+         }
+         html.dark .tab-button.active {
+             color: #60a5fa; /* blue-400 */
+             border-bottom-color: #60a5fa; /* blue-400 */
+         }
+         html.dark .card,
+         html.dark .auth-card,
+         html.dark .results {
+             background-color: #1f2937; /* gray-800 */
+             border-color: #374151; /* gray-700 */
+         }
+         /* Adjust general text elements */
+         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 .subtitle, html.dark .info-text, html.dark .credits p {
+             color: #d1d5db; /* gray-300 */
+         }
+         /* Adjust specific text colors */
+         html.dark .text-gray-600 { color: #9ca3af; /* gray-400 */ }
+         html.dark .text-gray-500 { color: #6b7280; /* gray-500 */ }
+         html.dark .text-gray-700 { color: #9ca3af; /* gray-400 */ }
+         /* Input/Textarea dark styles */
+         html.dark input[type="text"],
+         html.dark input[type="password"],
+         html.dark input[type="email"],
+         html.dark textarea {
+             background-color: #374151; /* gray-700 */
+             border-color: #4b5563; /* gray-600 */
+             color: #d1d5db; /* gray-300 */
+         }
+         html.dark input::placeholder,
+         html.dark textarea::placeholder {
+             color: #9ca3af; /* gray-400 */
+         }
+         /* Button dark styles */
+         html.dark .button-secondary {
+             background-color: #4b5563; /* gray-600 */
+             color: #d1d5db; /* gray-300 */
+         }
+          html.dark .button-secondary:hover {
+             background-color: #374151; /* gray-700 */
+         }
+         /* Error message dark styles */
+         html.dark .error-message {
+             background-color: #450a0a; /* red-950 */
+             color: #fecaca; /* red-200 */
+             border-color: #7f1d1d; /* red-800 */
+         }
+         /* Upload area dark */
+         html.dark .upload-area {
+             border-color: #4b5563; /* gray-600 */
+             color: #9ca3af; /* gray-400 */
+         }
+          html.dark .upload-area.dragover {
+             border-color: #60a5fa; /* blue-400 */
+             background-color: #1e3a8a; /* blue-900 */
+         }
+         /* Image borders dark */
+         html.dark #imagePreview,
+         html.dark .sample-image,
+         html.dark .result-image {
+              border-color: #4b5563; /* gray-600 */
+         }
+         /* Results dark */
+         html.dark .ocr-result {
+             background-color: #374151; /* gray-700 */
+             border-color: #4b5563; /* gray-600 */
+         }
+         html.dark .result-content {
+              background-color: #1f2937; /* gray-800 */
+              border-color: #4b5563; /* gray-600 */
+         }
+         html.dark .result-item {
+            border-bottom-color: #4b5563; /* gray-600 */
+         }
+    </style>
+</head>
+<!-- Add dark mode background/text for body base -->
+<body class="bg-gray-100 dark:bg-gray-900 min-h-screen flex flex-col text-gray-900 dark:text-gray-200">
+    <!-- Login Section - Styled with Tailwind -->
+    <div id="login-container" class="min-h-screen flex items-center justify-center p-4">
+        <!-- Login Card -->
+        <div class="auth-card bg-white dark:bg-gray-800 p-6 md:p-8 rounded-lg shadow-lg text-center w-full max-w-sm border dark:border-gray-700">
+            <h1 class="text-2xl font-bold mb-2 text-primary dark:text-blue-400">Vision and Discern</h1>
+            <h2 class="text-xl font-semibold mb-3">Welcome!</h2>
+            <p class="text-gray-600 dark:text-gray-400 mb-6 text-sm">Login to access the applications.</p>
+            <div class="error-message bg-red-100 border border-red-300 text-red-800 dark:bg-red-900 dark:bg-opacity-50 dark:border-red-600 dark:text-red-200 px-4 py-2 rounded-md text-sm mb-4 hidden" id="loginErrorMessage"></div>
+            <input type="text" id="username" placeholder="Username" class="w-full px-4 py-2 mb-4 border border-gray-300 rounded-button focus:outline-none focus:ring-2 focus:ring-primary/50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200">
+            <input type="password" id="password" placeholder="Password" class="w-full px-4 py-2 mb-4 border border-gray-300 rounded-button focus:outline-none focus:ring-2 focus:ring-primary/50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200">
+            <button id="loginButton" class="w-full bg-primary text-white px-4 py-2 rounded-button hover:bg-blue-700 transition-colors font-medium disabled:opacity-50">Login</button>
+            <div class="mt-4 text-sm text-gray-600 dark:text-gray-400">
+                Don't have an account? <a href="#" id="signup-link" class="text-primary dark:text-blue-400 hover:underline">Sign up</a>
+            </div>
+        </div>
+        <!-- Signup Card -->
+        <div class="auth-card bg-white dark:bg-gray-800 p-6 md:p-8 rounded-lg shadow-lg text-center w-full max-w-sm border dark:border-gray-700 hidden" id="signup-card">
+            <h1 class="text-2xl font-bold mb-2 text-primary dark:text-blue-400">Vision and Discern</h1>
+            <h2 class="text-xl font-semibold mb-3">Create Account</h2>
+            <p class="text-gray-600 dark:text-gray-400 mb-6 text-sm">Sign up to start using applications.</p>
+            <div class="error-message bg-red-100 border border-red-300 text-red-800 dark:bg-red-900 dark:bg-opacity-50 dark:border-red-600 dark:text-red-200 px-4 py-2 rounded-md text-sm mb-4 hidden" id="signupErrorMessage"></div>
+            <input type="text" id="signupUsername" placeholder="Username" class="w-full px-4 py-2 mb-4 border border-gray-300 rounded-button focus:outline-none focus:ring-2 focus:ring-primary/50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200">
+            <input type="email" id="signupEmail" placeholder="Email" class="w-full px-4 py-2 mb-4 border border-gray-300 rounded-button focus:outline-none focus:ring-2 focus:ring-primary/50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200">
+            <input type="password" id="signupPassword" placeholder="Password" class="w-full px-4 py-2 mb-4 border border-gray-300 rounded-button focus:outline-none focus:ring-2 focus:ring-primary/50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200">
+            <button id="signupButton" class="w-full bg-primary text-white px-4 py-2 rounded-button hover:bg-blue-700 transition-colors font-medium disabled:opacity-50">Sign Up</button>
+            <div class="mt-4 text-sm text-gray-600 dark:text-gray-400">
+                Already have an account? <a href="#" id="login-link" class="text-primary dark:text-blue-400 hover:underline">Login</a>
+            </div>
+        </div>
+    </div>
+    <!-- Main Application Container (Initially Hidden) -->
+    <div id="app-container" class="hidden flex-grow flex flex-col">
+        <!-- Header -->
+        <header class="bg-white dark:bg-gray-800 shadow-sm sticky top-0 z-50">
+            <div class="container mx-auto px-4 py-3 flex items-center justify-between">
+                <!-- Left Side: Logo & Nav -->
+                <div class="flex items-center">
+                    <a href="#" class="text-xl font-bold text-primary dark:text-blue-400 mr-6">Vision & Discern</a>
+                    <nav class="hidden md:flex space-x-6">
+                        <a href="home.html" target="_blank" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-blue-400">Home</a>
+                        <a href="features.html" target="_blank" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-blue-400">Key Features</a>
+                        <a href="feedback.html" target="_blank" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-blue-400">Feedback</a>
+                        <a href="contact.html" target="_blank" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-blue-400">Contact Us</a>
+                    </nav>
+                </div>
+                <!-- Right Side: Switches & Logout -->
+                <div class="flex items-center space-x-4">
+                    <!-- Language Switch (Placeholder Structure) -->
+                    <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" disabled> <!-- Disabled for now -->
+                            <span class="custom-switch-slider"></span>
+                        </label>
+                        <span class="text-sm text-gray-600 dark:text-gray-400 hindi-font">हिंदी</span>
+                    </div>
+                    <!-- Theme Switch -->
+                    <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>
+                     <!-- Logout Button -->
+                    <button id="logoutButton" class="button-secondary bg-red-600 hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-800 text-white px-3 py-1.5 rounded-button text-sm inline-flex items-center">
+                        <i class="ri-logout-box-r-line mr-1"></i>
+                        Logout
+                    </button>
+                    <!-- Mobile Menu Button (Placeholder) -->
+                    <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>
+                </div>
+            </div>
+        </header>
+        <!-- Main Content Area -->
+        <main class="flex-grow container mx-auto px-4 py-8">
+            <!-- App Header Section -->
+            <section class="mb-8 text-center">
+                <h1 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-3">Comprehensive AI-Powered Text Analysis</h1>
+                <p class="subtitle text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
+                    Leverage advanced AI to extract Hindi text from images, translate it, and predict gender from names.
+                </p>
+            </section>
+            <!-- Tab Navigation - Styled with Tailwind -->
+            <div class="tab-container flex justify-center border-b border-gray-200 dark:border-gray-700 mb-6">
+                 <!-- Added Icons to Tabs -->
+                <button class="tab-button flex items-center gap-2 px-6 py-3 text-gray-600 dark:text-gray-300 border-b-2 border-transparent hover:text-primary dark:hover:text-blue-400 transition-colors active" data-tab="ocr">
+                     <i class="ri-image-line"></i> OCR
+                </button>
+                <button class="tab-button flex items-center gap-2 px-6 py-3 text-gray-600 dark:text-gray-300 border-b-2 border-transparent hover:text-primary dark:hover:text-blue-400 transition-colors" data-tab="translation">
+                     <i class="ri-translate-2"></i> Translation
+                </button>
+                <button class="tab-button flex items-center gap-2 px-6 py-3 text-gray-600 dark:text-gray-300 border-b-2 border-transparent hover:text-primary dark:hover:text-blue-400 transition-colors" data-tab="gender">
+                    <i class="ri-men-line"></i><i class="ri-women-line"></i> Gender
+                </button>
+            </div>
+            <!-- Tab Content Sections -->
+            <div>
+                <!-- OCR Tab Content -->
+                <div class="tab-content active" id="ocr">
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        <!-- Input Card -->
+                        <div class="card bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-100 dark:border-gray-700">
+                            <h2 class="card-title 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">
+                                <i class="ri-upload-cloud-2-line mr-2 text-primary dark:text-blue-400"></i>
+                                Upload Image
+                            </h2>
+                            <div id="uploadArea" class="upload-area border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-6 text-center cursor-pointer hover:border-primary dark:hover:border-blue-400 mb-4 transition-colors">
+                                <div class="upload-icon text-4xl text-gray-400 dark:text-gray-500 mb-2"><i class="ri-image-add-line"></i></div>
+                                <p class="text-gray-700 dark:text-gray-300">Click to select or drag & drop</p>
+                                <p class="info-text text-sm text-gray-500 dark:text-gray-400">PNG, JPG, JPEG</p>
+                            </div>
+                            <input type="file" id="fileInput" accept="image/png, image/jpeg, image/jpg" class="hidden"/>
+                            <!-- Sample Images Section -->
+                            <div class="sample-images-container mt-4 pt-4 border-t border-gray-200 dark:border-gray-600">
+                                <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Or try a sample image:</h3>
+                                <div class="flex flex-wrap gap-2">
+                                    <img src="https://raw.githubusercontent.com/sameer-banchhor-git/data-sakshi/refs/heads/main/%E0%A4%B9%E0%A5%89%E0%A4%B8%E0%A5%8D%E0%A4%9F%E0%A4%B2.png"
+                                         data-src="https://raw.githubusercontent.com/sameer-banchhor-git/data-sakshi/refs/heads/main/%E0%A4%B9%E0%A5%89%E0%A4%B8%E0%A5%8D%E0%A4%9F%E0%A4%B2.png"
+                                         alt="Sample Hostel Image" class="sample-image h-16 w-auto border border-gray-300 dark:border-gray-600 rounded-sm cursor-pointer hover:scale-105 hover:shadow-md transition-transform" title="Load Hostel Sample">
+                                    <img src="https://raw.githubusercontent.com/sameer-banchhor-git/data-sakshi/refs/heads/main/%E0%A4%B8%E0%A5%8D%E0%A4%B5%E0%A4%BE%E0%A4%B8%E0%A5%8D%E0%A4%A5%E0%A5%8D%E0%A4%AF.png"
+                                         data-src="https://raw.githubusercontent.com/sameer-banchhor-git/data-sakshi/refs/heads/main/%E0%A4%B8%E0%A5%8D%E0%A4%B5%E0%A4%BE%E0%A4%B8%E0%A5%8D%E0%A4%A5%E0%A5%8D%E0%A4%AF.png"
+                                         alt="Sample Swasthya Image" class="sample-image h-16 w-auto border border-gray-300 dark:border-gray-600 rounded-sm cursor-pointer hover:scale-105 hover:shadow-md transition-transform" title="Load Swasthya Sample">
+                                     <img src="https://raw.githubusercontent.com/sameer-banchhor-git/data-sakshi/refs/heads/main/%E0%A4%B9%E0%A5%81%E0%A4%88.png"
+                                          data-src="https://raw.githubusercontent.com/sameer-banchhor-git/data-sakshi/refs/heads/main/%E0%A4%B9%E0%A5%81%E0%A4%88.png"
+                                          alt="Sample Hui Image" class="sample-image h-16 w-auto border border-gray-300 dark:border-gray-600 rounded-sm cursor-pointer hover:scale-105 hover:shadow-md transition-transform" title="Load Hui Sample">
+                                </div>
+                            </div>
+                            <!-- Preview Area -->
+                             <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-600">
+                                <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 text-center">Preview</h3>
+                                <div class="flex justify-center">
+                                    <img id="imagePreview" src="#" alt="Image Preview" class="hidden max-h-48 w-auto rounded border bg-gray-50 dark:bg-gray-700 dark:border-gray-600 p-1"/>
+                                </div>
+                            </div>
+                            <!-- Action Buttons -->
+                            <div class="mt-6 flex gap-3">
+                                <button id="processButton" disabled class="flex-1 bg-green-600 text-white px-4 py-2 rounded-button font-medium hover:bg-green-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center justify-center gap-2">
+                                    <i class="ri-camera-lens-line"></i> Process
+                                </button>
+                                <button id="clearButton" class="button-secondary flex-1 bg-gray-300 text-gray-800 px-4 py-2 rounded-button hover:bg-gray-400 dark:bg-gray-600 dark:text-gray-200 dark:hover:bg-gray-500 transition-colors inline-flex items-center justify-center gap-2 hidden">
+                                    <i class="ri-delete-bin-line"></i> Clear
+                                </button>
+                            </div>
+                             <div class="error-message bg-red-100 border border-red-300 text-red-800 dark:bg-red-900 dark:bg-opacity-50 dark:border-red-600 dark:text-red-200 px-4 py-2 rounded-md text-sm mt-4 hidden" id="ocrErrorMessage"></div>
+                         </div>
+                        <!-- Results Card -->
+                        <div class="card 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 justify-center">
+                             <h2 class="card-title 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">
+                                 <i class="ri-file-text-line mr-2 text-primary dark:text-blue-400"></i>
+                                 Results
+                             </h2>
+                             <!-- Loading Indicator -->
+                            <div id="loadingSpinner" class="flex flex-col items-center justify-center my-4 text-primary dark:text-blue-400 hidden">
+                                <svg class="animate-spin h-8 w-8 text-primary dark:text-blue-400 mb-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                                </svg>
+                                <p class="text-sm">Processing your image...</p>
+                            </div>
+                            <!-- Results Display Area -->
+                            <div id="resultsSection" class="w-full space-y-6 hidden">
+                                 <!-- Combined OCR Output Card -->
+                                <div class="ocr-result bg-gray-50 dark:bg-gray-700 p-4 rounded-md border border-gray-200 dark:border-gray-600">
+                                    <div class="result-title text-md font-semibold text-gray-800 dark:text-white mb-2">OCR Text Output</div>
+                                    <div class="result-content bg-white dark:bg-gray-800 p-3 rounded text-lg font-medium min-h-[50px] border border-gray-200 dark:border-gray-600" id="ocrOutput">
+                                        <!-- Text will appear here -->
+                                    </div>
+                                </div>
+                                 <!-- Word Detection Card -->
+                                <div class="result-card border-t border-gray-200 dark:border-gray-600 pt-4">
+                                    <div class="result-title text-md font-semibold text-gray-800 dark:text-white mb-2">Word Detection</div>
+                                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Words Detected: <strong class="text-gray-800 dark:text-white"><span id="wordCount">0</span></strong></p>
+                                    <img id="wordDetectionImg" class="result-image w-full h-auto max-h-48 object-contain border border-gray-200 dark:border-gray-600 rounded bg-gray-100 dark:bg-gray-700 hidden" src="" alt="Word Detection">
+                                </div>
+                                <!-- Prediction Card -->
+                                <div class="result-card border-t border-gray-200 dark:border-gray-600 pt-4">
+                                    <div class="result-title text-md font-semibold text-gray-800 dark:text-white mb-2">Prediction</div>
+                                     <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Predicted Text: <strong class="text-gray-800 dark:text-white"><span id="predictionLabel">N/A</span></strong></p>
+                                    <img id="predictionImg" class="result-image w-full h-auto max-h-48 object-contain border border-gray-200 dark:border-gray-600 rounded bg-gray-100 dark:bg-gray-700 hidden" src="" alt="Prediction">
+                                </div>
+                            </div>
+                            <p id="initialMessage" class="text-center text-gray-500 dark:text-gray-400 text-sm mt-4">Upload or select a sample image and click 'Process' to see the results.</p>
+                        </div>
+                    </div>
+                </div>
+                <!-- Translation Tab Content -->
+                <div class="tab-content hidden" id="translation">
+                    <div class="card bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-100 dark:border-gray-700 max-w-2xl mx-auto">
+                        <h2 class="card-title 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">
+                            <i class="ri-translate-2 mr-2 text-primary dark:text-blue-400"></i>
+                            Text Translation
+                        </h2>
+                        <div class="space-y-4">
+                            <div>
+                                <label for="text-to-translate" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Text to Translate:</label>
+                                <textarea id="text-to-translate" placeholder="Enter text here or it will be populated from OCR results..." rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-button focus:outline-none focus:ring-2 focus:ring-primary/50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200"></textarea>
+                            </div>
+                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                                <div>
+                                    <label for="source-language" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Source Language (Optional):</label>
+                                    <input type="text" id="source-language" placeholder="Auto-detect if empty" class="w-full px-3 py-2 border border-gray-300 rounded-button focus:outline-none focus:ring-2 focus:ring-primary/50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200">
+                                </div>
+                                <div>
+                                    <label for="target-language" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Target Language:</label>
+                                    <input type="text" id="target-language" placeholder="e.g., English, Hindi" required class="w-full px-3 py-2 border border-gray-300 rounded-button focus:outline-none focus:ring-2 focus:ring-primary/50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200">
+                                </div>
+                            </div>
+                            <div>
+                                <button id="translate-button" class="w-full sm:w-auto bg-primary text-white px-5 py-2 rounded-button hover:bg-blue-700 transition-colors font-medium inline-flex items-center justify-center gap-2 disabled:opacity-50">
+                                    <i class="ri-translate"></i> Translate Text
+                                </button>
+                            </div>
+                        </div>
+                        <!-- Loading Indicator -->
+                        <div id="translation-loading" class="flex items-center justify-center my-4 text-primary dark:text-blue-400 hidden">
+                             <svg class="animate-spin -ml-1 mr-3 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                            </svg>
+                            <span>Translating...</span>
+                        </div>
+                         <div class="error-message bg-red-100 border border-red-300 text-red-800 dark:bg-red-900 dark:bg-opacity-50 dark:border-red-600 dark:text-red-200 px-4 py-2 rounded-md text-sm mt-4 hidden" id="translationErrorMessage"></div>
+                    </div>
+                    <!-- Translation Results -->
+                    <div id="translation-result" class="results card bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-100 dark:border-gray-700 max-w-2xl mx-auto mt-6 hidden">
+                        <h3 class="result-header text-lg font-semibold text-gray-800 dark:text-white mb-4 border-b border-gray-200 dark:border-gray-600 pb-2">Translation Result</h3>
+                        <div class="space-y-3 text-sm">
+                            <div class="result-item flex justify-between">
+                                <span class="result-label font-medium text-gray-600 dark:text-gray-400">Source Language:</span>
+                                <span id="detected-source-language" class="text-gray-800 dark:text-white font-medium"></span>
+                            </div>
+                             <div class="result-item flex justify-between">
+                                <span class="result-label font-medium text-gray-600 dark:text-gray-400">Target Language:</span>
+                                <span id="translation-target-language" class="text-gray-800 dark:text-white font-medium"></span>
+                            </div>
+                             <div class="result-item pt-3 mt-3 border-t border-gray-200 dark:border-gray-600">
+                                <div class="result-label font-medium text-gray-600 dark:text-gray-400 mb-1">Translated Text:</div>
+                                <div id="translated-text" class="result-content bg-gray-50 dark:bg-gray-700 p-3 rounded border border-gray-200 dark:border-gray-600 text-gray-800 dark:text-white"></div>
+                            </div>
+                        </div>
+                    </div>
+                 </div>
+                <!-- Gender Prediction Tab Content -->
+                <div class="tab-content hidden" id="gender">
+                     <div class="card bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-100 dark:border-gray-700 max-w-2xl mx-auto">
+                        <h2 class="card-title 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">
+                             <i class="ri-user-search-line mr-2 text-primary dark:text-blue-400"></i>
+                             Gender Prediction
+                        </h2>
+                        <div class="space-y-4">
+                            <div>
+                                <label for="names-input" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Enter names (comma-separated):</label>
+                                <textarea id="names-input" placeholder="e.g., Sakshi, Sameer, Priya" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-button focus:outline-none focus:ring-2 focus:ring-primary/50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200"></textarea>
+                            </div>
+                             <div>
+                                <button id="predict-gender-button" class="w-full sm:w-auto bg-primary text-white px-5 py-2 rounded-button hover:bg-blue-700 transition-colors font-medium inline-flex items-center justify-center gap-2 disabled:opacity-50">
+                                    <i class="ri-user-shared-line"></i> Predict Gender
+                                </button>
+                            </div>
+                        </div>
+                         <!-- Loading Indicator -->
+                        <div id="gender-loading" class="flex items-center justify-center my-4 text-primary dark:text-blue-400 hidden">
+                             <svg class="animate-spin -ml-1 mr-3 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                            </svg>
+                            <span>Analyzing names...</span>
+                        </div>
+                        <div class="error-message bg-red-100 border border-red-300 text-red-800 dark:bg-red-900 dark:bg-opacity-50 dark:border-red-600 dark:text-red-200 px-4 py-2 rounded-md text-sm mt-4 hidden" id="genderErrorMessage"></div>
+                    </div>
+                     <!-- Gender Prediction Results -->
+                    <div id="gender-results" class="results card bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-100 dark:border-gray-700 max-w-2xl mx-auto mt-6 hidden">
+                        <h3 class="result-header text-lg font-semibold text-gray-800 dark:text-white mb-4 border-b border-gray-200 dark:border-gray-600 pb-2">Prediction Results</h3>
+                         <!-- Results populated by JS -->
+                         <div class="space-y-4 text-sm">
+                             <!-- JS will insert result items here -->
+                         </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+        <!-- Footer -->
+        <footer class="bg-gray-800 text-gray-400 py-8 mt-12"> <!-- Similar style to NIC project footer -->
+            <div class="container mx-auto px-4 text-center">
+                 <div class="mb-4">
+                     <a href="#" class="text-xl font-bold text-white hover:text-blue-300">Vision & Discern</a>
+                 </div>
+                 <div class="credits text-sm mb-4">
+                    <p>Powered by <strong>D SAKSHI</strong> (MCA Final Year BIT Durg, Chhattisgarh) | © SlimShadow Org. All Rights Reserved.</p>
+                 </div>
+                 <div class="flex justify-center 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>
+                     <a href="#" class="hover:text-white" title="Twitter (Placeholder)"><i class="ri-twitter-fill"></i></a>
+                 </div>
+            </div>
+        </footer>
+    </div> <!-- End #app-container -->
+    <script>
+        // --- API Base URLs ---
+        const OCR_API_BASE_URL = 'https://sameernotes-ocr.hf.space';
+        const TRANSLATION_API_BASE_URL = 'https://sameernotes-translation-prediction-space.hf.space';
+        const GENDER_API_BASE_URL = "https://sidvilas-gender-prediction-space.hf.space";
+        const supportedLanguages = ["Afrikaans", "Arabic", "Armenian", "Azerbaijani", "Belarusian", "Bosnian", "Bulgarian", "Catalan", "Chinese", "Croatian", "Czech", "Danish", "Dutch", "English", "Estonian", "Finnish", "French", "Galician", "German", "Greek", "Hebrew", "Hindi", "Hungarian", "Icelandic", "Indonesian", "Italian", "Japanese", "Kannada", "Kazakh", "Korean", "Latvian", "Lithuanian", "Macedonian", "Malay", "Marathi", "Maori", "Nepali", "Norwegian", "Persian", "Polish", "Portuguese", "Romanian", "Russian", "Serbian", "Slovak", "Slovenian", "Spanish", "Swahili", "Swedish", "Tagalog", "Tamil", "Thai", "Turkish", "Ukrainian", "Urdu", "Vietnamese", "Welsh"];
+        let accessToken = null;
+        let selectedImageSource = null; // Holds the File object or Blob for processing
+        // --- DOM Element References (Consolidated) ---
+        const htmlElement = document.documentElement; // Target <html> for dark mode/lang
+        // Login/Signup
+        const loginContainer = document.getElementById('login-container');
+        const appContainer = document.getElementById('app-container');
+        const loginCard = document.getElementById('login-card');
+        const signupCard = document.getElementById('signup-card');
+        const loginLink = document.getElementById('login-link');
+        const signupLink = document.getElementById('signup-link');
+        const usernameInput = document.getElementById('username');
+        const passwordInput = document.getElementById('password');
+        const loginButton = document.getElementById('loginButton');
+        const loginErrorMessage = document.getElementById('loginErrorMessage');
+        const signupUsernameInput = document.getElementById('signupUsername');
+        const signupEmailInput = document.getElementById('signupEmail');
+        const signupPasswordInput = document.getElementById('signupPassword');
+        const signupButton = document.getElementById('signupButton');
+        const signupErrorMessage = document.getElementById('signupErrorMessage');
+        const logoutButton = document.getElementById('logoutButton');
+        // --- Theme/Lang Toggles ---
+        const themeToggle = document.getElementById('themeToggle');
+        const languageToggle = document.getElementById('languageToggle'); // Added for structure
+        // --- OCR Elements ---
+        const fileInput = document.getElementById('fileInput');
+        const uploadArea = document.getElementById('uploadArea');
+        const imagePreview = document.getElementById('imagePreview');
+        const processButton = document.getElementById('processButton');
+        const clearButton = document.getElementById('clearButton');
+        const sampleImages = document.querySelectorAll('.sample-image');
+        const loadingSpinner = document.getElementById('loadingSpinner');
+        const resultsSection = document.getElementById('resultsSection');
+        const initialMessage = document.getElementById('initialMessage');
+        const ocrErrorMessage = document.getElementById('ocrErrorMessage');
+        const ocrOutput = document.getElementById('ocrOutput');
+        const wordCount = document.getElementById('wordCount');
+        const wordDetectionImg = document.getElementById('wordDetectionImg');
+        const predictionLabel = document.getElementById('predictionLabel');
+        const predictionImg = document.getElementById('predictionImg');
+        // --- Translation Elements ---
+        const textToTranslateInput = document.getElementById('text-to-translate');
+        const sourceLanguageInput = document.getElementById('source-language');
+        const targetLanguageInput = document.getElementById('target-language');
+        const translateButton = document.getElementById('translate-button');
+        const translationLoading = document.getElementById('translation-loading');
+        const translationResultDiv = document.getElementById('translation-result');
+        const detectedSourceLanguage = document.getElementById('detected-source-language');
+        const translationTargetLanguage = document.getElementById('translation-target-language');
+        const translatedText = document.getElementById('translated-text');
+        const translationErrorMessage = document.getElementById('translationErrorMessage');
+        // --- Gender Prediction Elements ---
+        const namesInput = document.getElementById('names-input');
+        const predictGenderButton = document.getElementById('predict-gender-button');
+        const genderLoadingDiv = document.getElementById('gender-loading');
+        const genderResultsDiv = document.getElementById('gender-results');
+        const genderErrorMessageDiv = document.getElementById('genderErrorMessage');
+        // --- Tab Management ---
+        const tabs = document.querySelectorAll('.tab-button');
+        const tabContents = document.querySelectorAll('.tab-content');
+        // --- THEME TOGGLE LOGIC (from NIC Project) ---
+        function applyTheme(isDark) {
+            if (isDark) {
+                htmlElement.classList.add('dark');
+                if (themeToggle) themeToggle.checked = true;
+                console.log("Theme applied: dark");
+            } else {
+                htmlElement.classList.remove('dark');
+                if (themeToggle) themeToggle.checked = false;
+                console.log("Theme applied: light");
+            }
+        }
+        // Check localStorage on load
+        const prefersDark = localStorage.getItem('theme') === 'dark' ||
+                           (localStorage.getItem('theme') === null && window.matchMedia('(prefers-color-scheme: dark)').matches);
+        applyTheme(prefersDark);
+        // Add listener to toggle button
+        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.");
+        }
+        // --- LANGUAGE TOGGLE LOGIC (Placeholder from NIC Project) ---
+        // Note: This app doesn't use data-lang attributes yet, so this just sets the toggle state and html lang.
+        function applyLanguage(lang) { // lang should be 'en' or 'hi'
+             console.log("Applying language:", lang);
+             htmlElement.setAttribute('lang', lang); // Set overall page lang
+             // TODO: If you add data-lang attributes, iterate and update text here
+             // Update toggle state
+             if (languageToggle) languageToggle.checked = (lang === 'hi');
+             // Save preference
+             localStorage.setItem('language', lang);
+        }
+        // Check localStorage on load for language
+        const savedLang = localStorage.getItem('language') || 'en'; // Default to English
+        applyLanguage(savedLang);
+        // Add listener to language toggle button
+        if (languageToggle) {
+            languageToggle.disabled = false; // Enable if found
+            languageToggle.addEventListener('change', (event) => {
+                const newLang = event.target.checked ? 'hi' : 'en';
+                applyLanguage(newLang);
+            });
+        } else {
+             console.warn("Language toggle button not found.");
+        }
+        // --- TAB MANAGEMENT ---
+        tabs.forEach(tab => {
+            tab.addEventListener('click', () => {
+                // Deactivate all tabs and content
+                tabs.forEach(t => {
+                    t.classList.remove('active', 'text-primary', 'dark:text-blue-400', 'border-primary', 'dark:border-blue-400', 'font-medium');
+                    t.classList.add('text-gray-600', 'dark:text-gray-300', 'border-transparent');
+                });
+                tabContents.forEach(c => c.classList.add('hidden')); // Use hidden class
+                // Activate clicked tab and corresponding content
+                tab.classList.add('active', 'text-primary', 'dark:text-blue-400', 'border-primary', 'dark:border-blue-400', 'font-medium');
+                tab.classList.remove('text-gray-600', 'dark:text-gray-300', 'border-transparent');
+                const activeTabContent = document.getElementById(tab.dataset.tab);
+                if (activeTabContent) {
+                    activeTabContent.classList.remove('hidden'); // Show active content
+                }
+            });
+        });
+        // --- LOGIN/SIGNUP LOGIC (Adapted for hidden class) ---
+        loginLink.addEventListener('click', (e) => {
+            e.preventDefault();
+            signupCard.classList.add('hidden');
+            loginCard.classList.remove('hidden');
+        });
+        signupLink.addEventListener('click', (e) => {
+            e.preventDefault();
+            loginCard.classList.add('hidden');
+            signupCard.classList.remove('hidden');
+        });
+        loginButton.addEventListener('click', async () => {
+            loginButton.disabled = true;
+            hideElement(loginErrorMessage); // Use helper
+            const username = usernameInput.value;
+            const password = passwordInput.value;
+            if (!username || !password) {
+                showLoginError("Please enter both username and password.");
+                loginButton.disabled = false;
+                return;
+            }
+            const formData = new URLSearchParams();
+            formData.append('username', username);
+            formData.append('password', password);
+            try {
+                const response = await fetch(`${OCR_API_BASE_URL}/token`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+                    body: formData.toString()
+                });
+                if (!response.ok) {
+                    const errorData = await response.json().catch(() => ({ detail: "Login failed. Check credentials." }));
+                    showLoginError(errorData.detail || "Login failed. Check credentials.");
+                    return;
+                }
+                const data = await response.json();
+                accessToken = data.access_token;
+                hideElement(loginContainer); // Hide login section
+                showElement(appContainer, 'flex flex-col'); // Show app container using flex for layout
+            } catch (error) {
+                showLoginError("Network error during login. Please try again.");
+                console.error("Login error:", error);
+            } finally {
+                 loginButton.disabled = false;
+            }
+        });
+        signupButton.addEventListener('click', async () => {
+            signupButton.disabled = true;
+            hideElement(signupErrorMessage); // Use helper
+            const username = signupUsernameInput.value;
+            const email = signupEmailInput.value;
+            const password = signupPasswordInput.value;
+            if (!username || !email || !password) {
+                showSignupError("Please fill in all fields.");
+                signupButton.disabled = false;
+                return;
+            }
+            if (!/\S+@\S+\.\S+/.test(email)) {
+                showSignupError("Please enter a valid email address.");
+                signupButton.disabled = false;
+                return;
+            }
+            try {
+                const response = await fetch(`${OCR_API_BASE_URL}/signup`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ username, email, password })
+                });
+                if (!response.ok) {
+                    let errorMsg = "Signup failed.";
+                    try {
+                         const errorData = await response.json();
+                         errorMsg = `Signup failed: ${errorData.detail || 'Unknown error'}`;
+                    } catch (e) { errorMsg = `Signup failed with status ${response.status}.`; }
+                    showSignupError(errorMsg);
+                    return;
+                }
+                 alert('Signup successful! Please login.');
+                 hideElement(signupCard); // Use helper
+                 showElement(loginCard); // Use helper
+                 signupUsernameInput.value = '';
+                 signupEmailInput.value = '';
+                 signupPasswordInput.value = '';
+            } catch (error) {
+                showSignupError("Network error during signup. Please try again.");
+                console.error("Signup error:", error);
+            } finally {
+                 signupButton.disabled = false;
+            }
+        });
+        logoutButton.addEventListener('click', () => {
+            accessToken = null;
+            selectedImageSource = null;
+            hideElement(appContainer); // Use helper
+            showElement(loginContainer, 'flex'); // Use helper for flex centering
+            usernameInput.value = '';
+            passwordInput.value = '';
+            hideElement(loginErrorMessage);
+            clearOCRResults();
+            clearTranslationResults();
+            clearGenderResults();
+        });
+        // --- OCR FUNCTIONALITY (Adapted for hidden class) ---
+        uploadArea.addEventListener('click', () => fileInput.click());
+        uploadArea.addEventListener('dragover', (e) => { e.preventDefault(); uploadArea.classList.add('dragover', 'border-primary', 'dark:border-blue-400', 'bg-secondary'); });
+        uploadArea.addEventListener('dragleave', () => uploadArea.classList.remove('dragover', 'border-primary', 'dark:border-blue-400', 'bg-secondary'));
+        uploadArea.addEventListener('drop', (e) => {
+            e.preventDefault();
+            uploadArea.classList.remove('dragover', 'border-primary', 'dark:border-blue-400', 'bg-secondary');
+            if (e.dataTransfer.files.length) {
+                fileInput.files = e.dataTransfer.files;
+                handleFileSelect();
+            }
+        });
+        fileInput.addEventListener('change', handleFileSelect);
+        sampleImages.forEach(img => {
+            img.addEventListener('click', () => {
+                const imageUrl = img.dataset.src;
+                if (imageUrl) { loadSampleImage(imageUrl); }
+                else { showOCRError("Sample image URL is missing."); }
+            });
+        });
+        async function loadSampleImage(imageUrl) {
+            clearOCRResults();
+            showLoading(loadingSpinner);
+            imagePreview.src = imageUrl;
+            showElement(imagePreview); // Show preview
+            processButton.disabled = true;
+            showElement(clearButton, 'inline-flex');
+            hideOCRError();
+            try {
+                const response = await fetch(imageUrl);
+                if (!response.ok) throw new Error(`Failed to fetch sample image: ${response.statusText}`);
+                const blob = await response.blob();
+                const filename = decodeURIComponent(imageUrl.substring(imageUrl.lastIndexOf('/') + 1) || 'sample.png');
+                selectedImageSource = new File([blob], filename, { type: blob.type });
+                processButton.disabled = false;
+                hideElement(initialMessage);
+            } catch (error) {
+                console.error('Error loading sample image:', error);
+                showOCRError(`Could not load sample image: ${error.message}`);
+                clearOCRResults();
+            } finally {
+                hideLoading(loadingSpinner);
+            }
+        }
+        function handleFileSelect() {
+            const file = fileInput.files[0];
+            if (file) {
+                if (!file.type.startsWith('image/')) {
+                    showOCRError('Please select a valid image file (PNG, JPG, JPEG).');
+                    fileInput.value = ''; return;
+                }
+                hideOCRError();
+                clearOCRResults();
+                selectedImageSource = file;
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    imagePreview.src = e.target.result;
+                    showElement(imagePreview);
+                    processButton.disabled = false;
+                    showElement(clearButton, 'inline-flex');
+                    hideElement(initialMessage);
+                };
+                reader.onerror = () => { showOCRError('Error reading the selected file.'); };
+                reader.readAsDataURL(file);
+            }
+        }
+        processButton.addEventListener('click', processImage);
+        clearButton.addEventListener('click', clearOCRResults);
+        async function processImage() {
+            const imageSource = selectedImageSource;
+            if (!imageSource) { showOCRError('Please select or click a sample image first.'); return; }
+            showLoading(loadingSpinner);
+            hideElement(resultsSection);
+            hideElement(initialMessage);
+            processButton.disabled = true;
+            clearButton.disabled = true;
+            hideOCRError();
+            try {
+                const formData = new FormData();
+                formData.append('file', imageSource, imageSource.name || 'image.png');
+                const response = await fetch(`${OCR_API_BASE_URL}/process/`, {
+                    method: 'POST',
+                    headers: { 'Authorization': `Bearer ${accessToken}`, 'accept': 'application/json' },
+                    body: formData
+                });
+                if (response.status === 401) {
+                    showOCRError('Authentication failed. Please log out and log back in.');
+                    logoutButton.click(); return;
+                }
+                if (!response.ok) {
+                    let errorMsg = `Image processing failed (Status: ${response.status})`;
+                    try { const errorData = await response.json(); errorMsg = `Image processing failed: ${errorData.detail || response.statusText}`; } catch (e) { }
+                    throw new Error(errorMsg);
+                }
+                const data = await response.json();
+                ocrOutput.textContent = data.sakshi_output || 'No text detected.';
+                textToTranslateInput.value = data.sakshi_output || '';
+                wordCount.textContent = data.word_count ?? '0';
+                predictionLabel.textContent = data.prediction_label || 'N/A';
+                const fetchImage = async (url, imgElement) => {
+                    if (!url) { imgElement.src = ''; hideElement(imgElement); return; }
+                    try {
+                        const imageResponse = await fetch(url, { headers: { 'Authorization': `Bearer ${accessToken}` } });
+                        if (imageResponse.ok) {
+                            const blob = await imageResponse.blob();
+                            imgElement.src = URL.createObjectURL(blob);
+                            showElement(imgElement); // Show the image
+                            // Ensure parent card is visible if it contains the image
+                             const parentCard = imgElement.closest('.result-card');
+                             if(parentCard) showElement(parentCard);
+                        } else { console.error('Failed to fetch result image:', url, imageResponse.status); imgElement.src = ''; hideElement(imgElement); }
+                    } catch (fetchError) { console.error('Error fetching result image:', url, fetchError); imgElement.src = ''; hideElement(imgElement); }
+                };
+                // Use absolute URLs if provided by API, otherwise construct them
+                const wordDetectionUrl = data.word_detection_url ? (data.word_detection_url.startsWith('http') ? data.word_detection_url : `${OCR_API_BASE_URL}${data.word_detection_url}`) : null;
+                const predictionUrl = data.prediction_image_url ? (data.prediction_image_url.startsWith('http') ? data.prediction_image_url : `${OCR_API_BASE_URL}${data.prediction_image_url}`) : null;
+                await Promise.all([
+                    fetchImage(wordDetectionUrl, wordDetectionImg),
+                    fetchImage(predictionUrl, predictionImg)
+                ]);
+                showElement(resultsSection); // Show results section
+                hideElement(initialMessage);
+            } catch (error) {
+                console.error('Error processing image:', error);
+                showOCRError(`Error: ${error.message}`);
+                hideElement(resultsSection);
+                showElement(initialMessage);
+                initialMessage.textContent = 'An error occurred during processing. Please try again.';
+            } finally {
+                hideLoading(loadingSpinner);
+                processButton.disabled = false;
+                clearButton.disabled = false;
+            }
+        }
+        // --- TRANSLATION FUNCTIONALITY (Adapted for hidden class) ---
+        translateButton.addEventListener('click', async () => {
+            const text = textToTranslateInput.value.trim();
+            const sourceLanguage = sourceLanguageInput.value.trim();
+            const targetLanguage = targetLanguageInput.value.trim();
+            clearTranslationError();
+            hideElement(translationResultDiv);
+            if (!text) { showTranslationError('Please enter text to translate.'); return; }
+            if (!targetLanguage) { showTranslationError('Please enter the target language.'); return; }
+            showLoading(translationLoading);
+            translateButton.disabled = true;
+            try {
+                const requestBody = { text: text, target_language: targetLanguage };
+                if (sourceLanguage) { requestBody.source_language = sourceLanguage; }
+                const response = await fetch(`${TRANSLATION_API_BASE_URL}/translate`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${accessToken}`, 'accept': 'application/json' },
+                    body: JSON.stringify(requestBody)
+                });
+                if (response.status === 401) { showTranslationError('Authentication failed...'); logoutButton.click(); return; }
+                if (!response.ok) {
+                    let errorMsg = `Translation failed (Status: ${response.status})`;
+                    try { const errorData = await response.json(); errorMsg = `Translation failed: ${errorData.detail || response.statusText}`; } catch (e) { }
+                    throw new Error(errorMsg);
+                }
+                const data = await response.json();
+                detectedSourceLanguage.textContent = data.source_language || (sourceLanguage || "Auto-detected");
+                translationTargetLanguage.textContent = data.target_language || targetLanguage;
+                translatedText.textContent = data.translated_text || "No translation returned.";
+                showElement(translationResultDiv); // Show results
+            } catch (error) {
+                showTranslationError(`Error: ${error.message}`);
+                console.error('Error during translation:', error);
+            } finally {
+                hideLoading(translationLoading);
+                translateButton.disabled = false;
+            }
+        });
+        // --- GENDER PREDICTION FUNCTIONALITY (Adapted for hidden class) ---
+        predictGenderButton.addEventListener('click', async () => {
+            const namesString = namesInput.value.trim();
+            const names = namesString.split(',').map(name => name.trim()).filter(name => name !== "");
+            if (names.length === 0) { showGenderError("Please enter at least one name."); return; }
+            clearGenderError();
+            hideElement(genderResultsDiv);
+            showLoading(genderLoadingDiv);
+            predictGenderButton.disabled = true;
+            try {
+                const response = await fetch(`${GENDER_API_BASE_URL}/predict`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${accessToken}`, 'accept': 'application/json' },
+                    body: JSON.stringify({ names: names, threshold: 0.5 }) // API expects { names: [...] }
+                });
+                if (response.status === 401) { showGenderError('Authentication failed...'); logoutButton.click(); return; }
+                if (!response.ok) {
+                    let errorMsg = `Gender prediction failed (Status: ${response.status})`;
+                    try { const errorData = await response.json(); errorMsg = `Prediction failed: ${errorData.detail || response.statusText}`; } catch (e) { }
+                    throw new Error(errorMsg);
+                }
+                const data = await response.json();
+                if (data && Array.isArray(data.predictions)) {
+                    displayGenderResults(data.predictions);
+                    showElement(genderResultsDiv); // Show results container
+                } else {
+                    console.error("Unexpected response format:", data);
+                    showGenderError("Received an unexpected response format from the server.");
+                }
+            } catch (error) {
+                showGenderError(`Error: ${error.message}`);
+                console.error("Prediction error:", error);
+            } finally {
+                hideLoading(genderLoadingDiv);
+                predictGenderButton.disabled = false;
+            }
+        });
+        // --- DISPLAY RESULTS (GENDER) ---
+        function displayGenderResults(predictions) {
+             const resultsContainer = genderResultsDiv.querySelector('.space-y-4'); // Target the inner container
+             resultsContainer.innerHTML = ''; // Clear previous results first
+            if (predictions.length === 0) {
+                 resultsContainer.innerHTML = '<p class="text-gray-500 dark:text-gray-400">No predictions were returned.</p>';
+            } else {
+                predictions.forEach(prediction => {
+                    const name = prediction.name || 'N/A';
+                    const gender = prediction.predicted_gender || 'Unknown';
+                    const maleProb = typeof prediction.male_probability === 'number' ? (prediction.male_probability * 100).toFixed(1) + '%' : 'N/A';
+                    const confidence = typeof prediction.confidence === 'number' ? (prediction.confidence * 100).toFixed(1) + '%' : 'N/A';
+                     // Create structure with Tailwind classes
+                    const resultItemHTML = `
+                        <div class="result-item border-b border-gray-200 dark:border-gray-600 pb-3 last:border-b-0 last:pb-0">
+                            <div class="flex justify-between mb-1">
+                                <span class="result-label font-medium text-gray-600 dark:text-gray-400">Name:</span>
+                                <span class="text-gray-800 dark:text-white font-semibold">${name}</span>
+                            </div>
+                            <div class="flex justify-between mb-1">
+                                <span class="result-label font-medium text-gray-600 dark:text-gray-400">Predicted Gender:</span>
+                                <span class="text-gray-800 dark:text-white">${gender}</span>
+                             </div>
+                             <div class="flex justify-between mb-1">
+                                <span class="result-label font-medium text-gray-600 dark:text-gray-400">Confidence:</span>
+                                <span class="text-gray-800 dark:text-white">${confidence}</span>
+                            </div>
+                            <div class="flex justify-between">
+                                <span class="result-label font-medium text-gray-600 dark:text-gray-400">Male Probability:</span>
+                                <span class="text-gray-800 dark:text-white">${maleProb}</span>
+                            </div>
+                        </div>
+                    `;
+                    resultsContainer.innerHTML += resultItemHTML;
+                });
+            }
+            showElement(genderResultsDiv); // Ensure results container is visible
+        }
+        // --- UTILITY FUNCTIONS (Error Handling, Loading, Clearing using hidden class) ---
+        function showElement(element, displayType = 'block') {
+            if (element) {
+                 element.classList.remove('hidden');
+                 // If a specific display type like 'flex' is needed when visible
+                 if (displayType !== 'block') {
+                     // Ensure Tailwind classes for the display type are present
+                     // This might require removing 'block' if it was added by default
+                     element.classList.remove('block', 'inline-block', 'flex', 'grid'); // Remove common display types
+                     element.classList.add(...displayType.split(' ')); // Add the required classes
+                 }
+            }
+        }
+        function hideElement(element) {
+            if (element) element.classList.add('hidden');
+        }
+        function showLoginError(message) { loginErrorMessage.textContent = message; showElement(loginErrorMessage); }
+        function showSignupError(message) { signupErrorMessage.textContent = message; showElement(signupErrorMessage); }
+        function showOCRError(message) { ocrErrorMessage.textContent = message; showElement(ocrErrorMessage); }
+        function hideOCRError() { hideElement(ocrErrorMessage); }
+        function showTranslationError(message) { translationErrorMessage.textContent = message; showElement(translationErrorMessage); }
+        function clearTranslationError() { translationErrorMessage.textContent = ''; hideElement(translationErrorMessage); }
+        function showGenderError(message) { genderErrorMessageDiv.textContent = message; showElement(genderErrorMessageDiv); }
+        function clearGenderError() { genderErrorMessageDiv.textContent = ''; hideElement(genderErrorMessageDiv); }
+        function showLoading(loadingIndicator) { showElement(loadingIndicator, 'flex flex-col items-center justify-center'); } // Assuming flex layout for spinner
+        function hideLoading(loadingIndicator) { hideElement(loadingIndicator); }
+        function clearOCRResults() {
+            fileInput.value = '';
+            selectedImageSource = null;
+            hideElement(imagePreview); imagePreview.src = '';
+            hideElement(wordDetectionImg); wordDetectionImg.src = '';
+            hideElement(predictionImg); predictionImg.src = '';
+            ocrOutput.textContent = '';
+            wordCount.textContent = '0';
+            predictionLabel.textContent = 'N/A';
+            hideElement(resultsSection);
+            showElement(initialMessage);
+            initialMessage.textContent = "Upload or select a sample image and click 'Process' to see the results.";
+            processButton.disabled = true;
+            hideElement(clearButton);
+            hideOCRError();
+            hideLoading(loadingSpinner);
+        }
+        function clearTranslationResults() {
+            textToTranslateInput.value = ''; sourceLanguageInput.value = ''; targetLanguageInput.value = '';
+            detectedSourceLanguage.textContent = ''; translationTargetLanguage.textContent = ''; translatedText.textContent = '';
+            hideElement(translationResultDiv);
+            clearTranslationError();
+            hideLoading(translationLoading);
+        }
+        function clearGenderResults() {
+            namesInput.value = '';
+             // Clear only the content inside the results div, keep the header
+             const resultsContainer = genderResultsDiv.querySelector('.space-y-4');
+             if (resultsContainer) resultsContainer.innerHTML = '';
+            hideElement(genderResultsDiv);
+            clearGenderError();
+            hideLoading(genderLoadingDiv);
+        }
+        // --- Initial state: show login screen ---
+        showElement(loginContainer, 'flex'); // Use flex for centering
+        hideElement(appContainer); // Hide app initially
+    </script>
+</body>
+</html>

style.css CHANGED Viewed

@@ -1,28 +1,501 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-.card p:last-child {
-	margin-bottom: 0;
-}

+:root {
+    --primary: #4f46e5;
+    --primary-light: #818cf8;
+    --primary-dark: #3730a3;
+    --secondary: #f97316;
+    --background: #f8fafc;
+    --text: #1e293b;
+    --gray-50: #f8fafc;
+    --gray-100: #f1f5f9;
+    --gray-200: #e2e8f0;
+    --gray-300: #cbd5e1;
+    --gray-400: #94a3b8;
+    --gray-800: #1e293b;
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+    --radius-sm: 4px;
+    --radius: 8px;
+    --radius-lg: 12px;
+  }
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
+  }
+  body {
+    background: linear-gradient(135deg, var(--gray-50), var(--gray-100));
+    color: var(--text);
+    line-height: 1.6;
+    min-height: 100vh;
+  }
+  .container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem;
+  }
+  header {
+    padding: 2.5rem 2rem;
+    text-align: center;
+    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
+    color: white;
+    border-radius: var(--radius-lg);
+    margin-bottom: 3rem;
+    box-shadow: var(--shadow-lg);
+    position: relative;
+    overflow: hidden;
+  }
+  header::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(45deg, rgba(255,255,255,0.1) 25%, transparent 25%),
+                linear-gradient(-45deg, rgba(255,255,255,0.1) 25%, transparent 25%),
+                linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.1) 75%),
+                linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.1) 75%);
+    background-size: 20px 20px;
+    opacity: 0.1;
+  }
+  h1 {
+    font-size: 3rem;
+    font-weight: 800;
+    margin-bottom: 1rem;
+    letter-spacing: -0.025em;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
+  }
+  .subtitle {
+    font-size: 1.25rem;
+    opacity: 0.9;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+  }
+  .attribution {
+    margin-top: 1rem;
+    font-size: 0.875rem;
+    opacity: 0.8;
+    font-weight: 500;
+  }
+  nav {
+    display: flex;
+    justify-content: center;
+    gap: 2rem;
+    padding: 1rem 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+    margin-bottom: 2rem;
+  }
+  nav a {
+    color: white;
+    text-decoration: none;
+    font-weight: 600;
+    opacity: 0.9;
+    transition: all 0.2s ease;
+    padding: 0.5rem 1rem;
+    border-radius: var(--radius);
+    position: relative;
+  }
+  nav a::after {
+    content: '';
+    position: absolute;
+    bottom: -2px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 0;
+    height: 2px;
+    background-color: white;
+    transition: width 0.2s ease;
+  }
+  nav a:hover::after {
+    width: 100%;
+  }
+  nav a:hover {
+    opacity: 1;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  nav a.active {
+    background-color: rgba(255, 255, 255, 0.2);
+    opacity: 1;
+  }
+  .main-content {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 2rem;
+  }
+  @media (min-width: 768px) {
+    .main-content {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+  .card {
+    background: white;
+    border-radius: var(--radius-lg);
+    padding: 2rem;
+    box-shadow: var(--shadow);
+    transition: all 0.3s ease;
+    border: 1px solid var(--gray-200);
+  }
+  .card:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-lg);
+  }
+  .card-title {
+    font-size: 1.5rem;
+    color: var(--primary);
+    margin-bottom: 1.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    font-weight: 700;
+  }
+  .card-title svg {
+    width: 1.5rem;
+    height: 1.5rem;
+    stroke-width: 2;
+  }
+  .upload-area {
+    border: 2px dashed var(--gray-300);
+    border-radius: var(--radius);
+    padding: 3rem 2rem;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    margin-bottom: 1.5rem;
+    background-color: var(--gray-50);
+  }
+  .upload-area:hover, .upload-area.dragover {
+    border-color: var(--primary);
+    background-color: rgba(79, 70, 229, 0.05);
+  }
+  .upload-icon {
+    font-size: 3rem;
+    color: var(--gray-400);
+    margin-bottom: 1rem;
+  }
+  #imagePreview {
+    max-width: 100%;
+    max-height: 300px;
+    margin: 1.5rem auto;
+    display: none;
+    border-radius: var(--radius);
+    box-shadow: var(--shadow);
+  }
+  button {
+    background-color: var(--primary);
+    color: white;
+    border: none;
+    padding: 0.75rem 1.5rem;
+    border-radius: var(--radius);
+    cursor: pointer;
+    font-size: 1rem;
+    font-weight: 600;
+    transition: all 0.2s ease;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  button:hover {
+    background-color: var(--primary-dark);
+    transform: translateY(-1px);
+  }
+  button:active {
+    transform: translateY(0);
+  }
+  button:disabled {
+    background-color: var(--gray-300);
+    cursor: not-allowed;
+    transform: none;
+  }
+  .button-secondary {
+    background-color: var(--secondary);
+  }
+  .button-secondary:hover {
+    background-color: #ea580c;
+  }
+  .results-section {
+    margin-top: 2rem;
+  }
+  .result-card {
+    background-color: var(--gray-50);
+    border-radius: var(--radius);
+    padding: 1.5rem;
+    margin-bottom: 1.5rem;
+    border: 1px solid var(--gray-200);
+  }
+  .result-title {
+    font-size: 1.25rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    color: var(--primary-dark);
+  }
+  .result-content {
+    background-color: white;
+    padding: 1.25rem;
+    border-radius: var(--radius);
+    border: 1px solid var(--gray-200);
+    overflow-wrap: break-word;
+  }
+  .result-image {
+    max-width: 100%;
+    border-radius: var(--radius);
+    margin-top: 1rem;
+    box-shadow: var(--shadow);
+  }
+  .loading-spinner {
+    display: none;
+    text-align: center;
+    margin: 2rem 0;
+  }
+  .spinner {
+    width: 2.5rem;
+    height: 2.5rem;
+    border: 3px solid rgba(79, 70, 229, 0.1);
+    border-left-color: var(--primary);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+    margin: 0 auto;
+  }
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  .error-message {
+    color: #dc2626;
+    background-color: #fee2e2;
+    padding: 1rem;
+    border-radius: var(--radius);
+    display: none;
+    margin: 1rem 0;
+    font-weight: 500;
+    border: 1px solid #fecaca;
+  }
+  .info-text {
+    color: var(--gray-400);
+    font-size: 0.875rem;
+    margin-top: 0.75rem;
+  }
+  .credits {
+    text-align: center;
+    margin-top: 3rem;
+    padding-top: 1.5rem;
+    border-top: 1px solid var(--gray-200);
+    color: var(--gray-400);
+    font-size: 0.875rem;
+  }
+  #login-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background: linear-gradient(135deg, var(--gray-50), var(--gray-100));
+    padding: 2rem;
+  }
+  .auth-card {
+    background: white;
+    border-radius: var(--radius-lg);
+    padding: 2.5rem;
+    box-shadow: var(--shadow-lg);
+    width: 100%;
+    max-width: 400px;
+    text-align: center;
+    border: 1px solid var(--gray-200);
+  }
+  .auth-card h2 {
+    font-size: 2rem;
+    color: var(--primary);
+    margin-bottom: 1.5rem;
+    font-weight: 700;
+  }
+  .auth-card input[type="text"],
+  .auth-card input[type="password"],
+  .auth-card input[type="email"] {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    margin-bottom: 1rem;
+    border: 1px solid var(--gray-300);
+    border-radius: var(--radius);
+    font-size: 1rem;
+    transition: all 0.2s ease;
+  }
+  .auth-card input:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+  }
+  .auth-card button {
+    width: 100%;
+    padding: 0.875rem;
+    font-size: 1rem;
+    font-weight: 600;
+    margin-top: 0.5rem;
+  }
+  .auth-card .form-switch {
+    margin-top: 1.25rem;
+    font-size: 0.875rem;
+    color: var(--gray-400);
+  }
+  .auth-card .form-switch a {
+    color: var(--primary);
+    text-decoration: none;
+    font-weight: 600;
+    transition: color 0.2s ease;
+  }
+  .auth-card .form-switch a:hover {
+    color: var(--primary-dark);
+    text-decoration: underline;
+  }
+  .logout-button {
+    position: absolute;
+    top: 1.5rem;
+    right: 1.5rem;
+    background-color: var(--secondary);
+    padding: 0.625rem 1.25rem;
+    font-size: 0.875rem;
+  }
+  .features-list {
+    list-style-type: none;
+    padding: 0;
+  }
+  .features-list li {
+    margin-bottom: 1rem;
+    padding-left: 1.5rem;
+    position: relative;
+  }
+  .features-list li::before {
+    content: '•';
+    position: absolute;
+    left: 0;
+    color: var(--primary);
+    font-weight: bold;
+  }
+  .contact-info p,
+  .feedback-form p {
+    margin-bottom: 1rem;
+  }
+  .feedback-form textarea {
+    width: 100%;
+    padding: 1rem;
+    margin-bottom: 1rem;
+    border: 1px solid var(--gray-300);
+    border-radius: var(--radius);
+    font-size: 1rem;
+    min-height: 120px;
+    resize: vertical;
+    transition: all 0.2s ease;
+  }
+  .feedback-form textarea:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+  }
+  .video-bg {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    z-index: -1;
+  }
+  .video-bg video {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    min-width: 100%;
+    min-height: 100%;
+    width: auto;
+    height: auto;
+    transform: translate(-50%, -50%);
+    object-fit: cover;
+    filter: brightness(40%) saturate(120%);
+  }
+  @media (max-width: 640px) {
+    .container {
+      padding: 1rem;
+    }
+    header {
+      padding: 1.5rem 1rem;
+    }
+    h1 {
+      font-size: 2rem;
+    }
+    .card {
+      padding: 1.5rem;
+    }
+    nav {
+      gap: 1rem;
+      flex-wrap: wrap;
+    }
+    nav a {
+      padding: 0.375rem 0.75rem;
+      font-size: 0.875rem;
+    }
+  }

translation.html ADDED Viewed

	@@ -0,0 +1,443 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Translation API</title>
+    <style>
+        :root {
+            --primary-color: #4a90e2;
+            --secondary-color: #f8f9fa;
+            --text-color: #2c3e50;
+            --border-radius: 12px;
+            --transition: all 0.3s ease;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+            line-height: 1.6;
+            color: var(--text-color);
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            min-height: 100vh;
+            padding: 2rem;
+        }
+        .container {
+            max-width: 1000px;
+            margin: 0 auto;
+            background: white;
+            padding: 2rem;
+            border-radius: var(--border-radius);
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+        }
+        h1 {
+            color: var(--primary-color);
+            text-align: center;
+            margin-bottom: 2rem;
+            font-size: 2.5rem;
+            font-weight: 700;
+        }
+        h2 {
+            color: var(--text-color);
+            margin-bottom: 1.5rem;
+            font-size: 1.8rem;
+        }
+        .tab {
+            display: flex;
+            gap: 1rem;
+            margin-bottom: 2rem;
+            border: none;
+            background: none;
+        }
+        .tab button {
+            flex: 1;
+            padding: 1rem;
+            font-size: 1.1rem;
+            border: 2px solid var(--primary-color);
+            background: transparent;
+            color: var(--primary-color);
+            border-radius: var(--border-radius);
+            cursor: pointer;
+            transition: var(--transition);
+        }
+        .tab button:hover {
+            background: rgba(74, 144, 226, 0.1);
+        }
+        .tab button.active {
+            background: var(--primary-color);
+            color: white;
+        }
+        .tabcontent {
+            display: none;
+            padding: 2rem;
+            background: var(--secondary-color);
+            border-radius: var(--border-radius);
+            margin-bottom: 2rem;
+        }
+        label {
+            display: block;
+            margin-bottom: 0.5rem;
+            font-weight: 600;
+            color: var(--text-color);
+        }
+        textarea, input[type="text"] {
+            width: 100%;
+            padding: 1rem;
+            margin-bottom: 1.5rem;
+            border: 2px solid #e1e8ed;
+            border-radius: var(--border-radius);
+            font-size: 1rem;
+            transition: var(--transition);
+            background: white;
+        }
+        textarea {
+            min-height: 150px;
+            resize: vertical;
+        }
+        textarea:focus, input[type="text"]:focus {
+            outline: none;
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
+        }
+        button {
+            background: var(--primary-color);
+            color: white;
+            padding: 1rem 2rem;
+            border: none;
+            border-radius: var(--border-radius);
+            font-size: 1.1rem;
+            cursor: pointer;
+            transition: var(--transition);
+            width: 100%;
+            margin-top: 1rem;
+        }
+        button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(74, 144, 226, 0.3);
+        }
+        .loading-indicator {
+            display: none;
+            text-align: center;
+            color: var(--primary-color);
+            margin: 1rem 0;
+            font-weight: 600;
+        }
+        #translation-result, #detection-result {
+            background: white;
+            padding: 1.5rem;
+            border-radius: var(--border-radius);
+            margin-top: 2rem;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+        }
+        #error-message {
+            background: #fee2e2;
+            color: #dc2626;
+            padding: 1rem;
+            border-radius: var(--border-radius);
+            margin-top: 1rem;
+            display: none;
+        }
+        .result-header {
+            color: var(--primary-color);
+            margin-bottom: 1rem;
+            font-size: 1.3rem;
+        }
+        .result-item {
+            margin-bottom: 1rem;
+            padding-bottom: 1rem;
+            border-bottom: 1px solid #e1e8ed;
+        }
+        .result-item:last-child {
+            border-bottom: none;
+            margin-bottom: 0;
+            padding-bottom: 0;
+        }
+        .result-label {
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+        }
+        #translation-options-list {
+            list-style: none;
+            margin-top: 1rem;
+        }
+        #translation-options-list li {
+            padding: 0.5rem 0;
+            border-bottom: 1px solid #e1e8ed;
+        }
+        #translation-options-list li:last-child {
+            border-bottom: none;
+        }
+        @media (max-width: 768px) {
+            body {
+                padding: 1rem;
+            }
+            .container {
+                padding: 1rem;
+            }
+            .tab button {
+                padding: 0.8rem;
+                font-size: 1rem;
+            }
+            .tabcontent {
+                padding: 1rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Translation & Language Detection</h1>
+        <div class="tab">
+            <button class="tablinks active" onclick="openTab(event, 'translate')">Translate</button>
+            <button class="tablinks" onclick="openTab(event, 'detect')">Detect Language</button>
+        </div>
+        <div id="translate" class="tabcontent" style="display: block;">
+            <h2>Text Translation</h2>
+            <label for="text-to-translate">Text to Translate</label>
+            <textarea id="text-to-translate" placeholder="Enter your text here..."></textarea>
+            <label for="source-language">Source Language (optional)</label>
+            <input type="text" id="source-language" placeholder="Leave empty for auto-detection">
+            <label for="target-language">Target Language</label>
+            <input type="text" id="target-language" placeholder="e.g., Spanish, French, German">
+            <button id="translate-button">Translate Text</button>
+            <div class="loading-indicator" id="translation-loading">
+                Translating your text...
+            </div>
+            <div id="translation-result">
+                <h3 class="result-header">Translation Results</h3>
+                <div class="result-item">
+                    <div class="result-label">Source Language:</div>
+                    <div id="detected-source-language"></div>
+                </div>
+                <div class="result-item">
+                    <div class="result-label">Target Language:</div>
+                    <div id="translation-target-language"></div>
+                </div>
+                <div class="result-item">
+                    <div class="result-label">Translated Text:</div>
+                    <div id="translated-text"></div>
+                </div>
+            </div>
+        </div>
+        <div id="detect" class="tabcontent">
+            <h2>Language Detection</h2>
+            <label for="text-to-detect">Text to Analyze</label>
+            <textarea id="text-to-detect" placeholder="Enter text to detect its language..."></textarea>
+            <button id="detect-button">Detect Language</button>
+            <div class="loading-indicator" id="detection-loading">
+                Detecting language...
+            </div>
+            <div id="detection-result">
+                <h3 class="result-header">Detection Results</h3>
+                <div class="result-item">
+                    <div class="result-label">Detected Language:</div>
+                    <div id="detected-language"></div>
+                </div>
+                <div id="translation-options-container">
+                    <h4 class="result-header">Translation Options</h4>
+                    <ul id="translation-options-list"></ul>
+                </div>
+            </div>
+        </div>
+        <div id="error-message"></div>
+    </div>
+    <script>
+        const API_BASE_URL = 'https://sameernotes-translation-prediction-space.hf.space';
+        const supportedLanguages = ["Afrikaans","Arabic","Armenian","Azerbaijani","Belarusian","Bosnian","Bulgarian","Catalan","Chinese","Croatian","Czech","Danish","Dutch","English","Estonian","Finnish","French","Galician","German","Greek","Hebrew","Hindi","Hungarian","Icelandic","Indonesian","Italian","Japanese","Kannada","Kazakh","Korean","Latvian","Lithuanian","Macedonian","Malay","Marathi","Maori","Nepali","Norwegian","Persian","Polish","Portuguese","Romanian","Russian","Serbian","Slovak","Slovenian","Spanish","Swahili","Swedish","Tagalog","Tamil","Thai","Turkish","Ukrainian","Urdu","Vietnamese","Welsh"];
+        function showError(message) {
+            const errorElement = document.getElementById('error-message');
+            errorElement.textContent = message;
+            errorElement.style.display = 'block';
+            setTimeout(() => {
+                errorElement.style.display = 'none';
+            }, 5000);
+        }
+        function clearError() {
+            document.getElementById('error-message').style.display = 'none';
+        }
+        function openTab(evt, tabName) {
+            const tabcontent = document.getElementsByClassName("tabcontent");
+            for (let i = 0; i < tabcontent.length; i++) {
+                tabcontent[i].style.display = "none";
+            }
+            const tablinks = document.getElementsByClassName("tablinks");
+            for (let i = 0; i < tablinks.length; i++) {
+                tablinks[i].className = tablinks[i].className.replace(" active", "");
+            }
+            document.getElementById(tabName).style.display = "block";
+            evt.currentTarget.className += " active";
+            document.getElementById('translation-result').style.display = 'none';
+            document.getElementById('detection-result').style.display = 'none';
+        }
+        document.getElementById('translate-button').addEventListener('click', async () => {
+            const text = document.getElementById('text-to-translate').value;
+            const sourceLanguage = document.getElementById('source-language').value;
+            const targetLanguage = document.getElementById('target-language').value;
+            clearError();
+            document.getElementById('translation-loading').style.display = 'block';
+            document.getElementById('translation-result').style.display = 'none';
+            if (!text) {
+                showError('Please enter text to translate.');
+                document.getElementById('translation-loading').style.display = 'none';
+                return;
+            }
+            if (!targetLanguage) {
+                showError('Please enter the target language.');
+                document.getElementById('translation-loading').style.display = 'none';
+                return;
+            }
+            if (!supportedLanguages.includes(targetLanguage)) {
+                showError(`Target language '${targetLanguage}' is not supported. Supported languages are: ${supportedLanguages.join(', ')}`);
+                document.getElementById('translation-loading').style.display = 'none';
+                return;
+            }
+            try {
+                const response = await fetch(`${API_BASE_URL}/translate`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'accept': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        text: text,
+                        source_language: sourceLanguage || undefined,
+                        target_language: targetLanguage
+                    })
+                });
+                if (!response.ok) {
+                    const errorData = await response.json();
+                    showError(`Translation failed: ${errorData.detail}`);
+                    return;
+                }
+                const htmlResponse = await response.text();
+                document.getElementById('detected-source-language').textContent = sourceLanguage || "Auto-detected";
+                document.getElementById('translation-target-language').textContent = targetLanguage;
+                document.getElementById('translated-text').innerHTML = htmlResponse;
+                document.getElementById('translation-result').style.display = 'block';
+            } catch (error) {
+                showError(`Error: ${error.message}`);
+                console.error('Error during translation:', error);
+            } finally {
+                document.getElementById('translation-loading').style.display = 'none';
+            }
+        });
+        document.getElementById('detect-button').addEventListener('click', async () => {
+            const text = document.getElementById('text-to-detect').value;
+            clearError();
+            document.getElementById('detection-loading').style.display = 'block';
+            document.getElementById('detection-result').style.display = 'none';
+            if (!text) {
+                showError('Please enter text to detect its language.');
+                document.getElementById('detection-loading').style.display = 'none';
+                return;
+            }
+            try {
+                const response = await fetch(`${API_BASE_URL}/detect_language`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'accept': 'application/json',
+                    },
+                    body: JSON.stringify({ text: text }),
+                });
+                if (!response.ok) {
+                    const errorData = await response.json();
+                    showError(`Detection failed: ${errorData.detail}`);
+                    return;
+                }
+                const data = await response.json();
+                document.getElementById('detected-language').textContent = data.source_language;
+                const optionsList = document.getElementById('translation-options-list');
+                optionsList.innerHTML = '';
+                if (data.translation_options && typeof data.translation_options === 'object') {
+                    for (const [key, value] of Object.entries(data.translation_options)) {
+                        const listItem = document.createElement('li');
+                        listItem.textContent = `${key}: ${value}`;
+                        optionsList.appendChild(listItem);
+                    }
+                    document.getElementById('translation-options-container').style.display = 'block';
+                } else {
+                    document.getElementById('translation-options-container').style.display = 'none';
+                }
+                document.getElementById('detection-result').style.display = 'block';
+            } catch (error) {
+                showError(`Error: ${error.message}`);
+                console.error('Error during language detection:', error);
+            } finally {
+                document.getElementById('detection-loading').style.display = 'none';
+            }
+        });
+    </script>
+</body>
+</html>