Spaces:
Running
Running
| <!-- Add lang attribute and potentially 'dark' class --> | |
| <html lang="en" class=""> <!-- Start without 'dark' initially --> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Prediction Examples - NIC Project</title> | |
| <!-- Tailwind CSS via CDN --> | |
| <script src="https://cdn.tailwindcss.com/3.4.1"></script> | |
| <script> | |
| // *** Add dark mode strategy to Tailwind config *** | |
| tailwind.config = { | |
| darkMode: 'class', // Enable class-based dark mode | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#1a73e8', | |
| secondary: '#e8f0fe', | |
| // Define dark mode colors if needed, or rely on Tailwind's defaults | |
| // dark: { | |
| // background: '#1a202c', | |
| // text: '#e2e8f0', | |
| // } | |
| }, | |
| borderRadius: { | |
| 'none': '0px', 'sm': '4px', DEFAULT: '8px', 'md': '12px', | |
| 'lg': '16px', 'xl': '20px', '2xl': '24px', '3xl': '32px', | |
| 'full': '9999px', 'button': '8px' | |
| } | |
| } | |
| } | |
| } | |
| </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=Pacifico&display=swap" rel="stylesheet"> | |
| <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari:wght@400;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <!-- Icons --> | |
| <link href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css" rel="stylesheet"> | |
| <!-- Custom Styles --> | |
| <style> | |
| /* --- Font Definitions (Ensure loaded via <link> tags in base.html) --- */ | |
| body { | |
| font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; | |
| -webkit-font-smoothing: antialiased; /* Smoother fonts */ | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| .hindi-font { | |
| font-family: 'Noto Sans Devanagari', sans-serif; | |
| } | |
| /* --- Custom Switch Styles (from provided HTML) --- */ | |
| .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; /* Default off color */ | |
| transition: .4s; | |
| border-radius: 34px; /* Rounded */ | |
| } | |
| .custom-switch-slider:before { | |
| position: absolute; | |
| content: ""; | |
| height: 18px; | |
| width: 18px; | |
| left: 3px; | |
| bottom: 3px; | |
| background-color: white; /* Changed from original rgb(136, 145, 212) to white for consistency with dark mode logic in base.html */ | |
| transition: .4s; | |
| border-radius: 50%; /* Circle */ | |
| } | |
| .custom-switch-input:checked + .custom-switch-slider { | |
| background-color: #1a73e8; /* Primary color when on */ | |
| } | |
| .custom-switch-input:checked + .custom-switch-slider:before { | |
| transform: translateX(26px); /* Move the circle */ | |
| } | |
| /* --- Accessibility: Ensure focus is visible --- */ | |
| /* Tailwind's default focus rings are usually good, but this is a fallback */ | |
| *:focus-visible { | |
| outline: 2px solid #1a73e8; /* Use primary color for focus */ | |
| outline-offset: 2px; | |
| box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.3); /* Optional softer focus ring */ | |
| } | |
| /* --- Other Minimal Custom Styles (if any) --- */ | |
| /* Example: Add a specific style for the example image containers if needed beyond grid/aspect ratio */ | |
| .example-image-container { | |
| /* Custom styles here */ | |
| /* aspect-ratio: 3 / 2; */ /* Tailwind handles aspect ratio now */ | |
| } | |
| .example-image { | |
| /* Custom image styles here */ | |
| } | |
| /* Add base dark mode styles */ | |
| html.dark body { | |
| background-color: #1a202c; /* Example dark background */ | |
| color: #e2e8f0; /* Example dark text */ | |
| } | |
| html.dark header, html.dark footer { /* Adjust header/footer */ | |
| background-color: #2d3748; | |
| color: #e2e8f0; | |
| } | |
| html.dark .card { /* Adjust card styles */ | |
| background-color: #2d3748; | |
| border-color: #4a5568; | |
| } | |
| html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6, html.dark p, html.dark span, html.dark li, html.dark label, html.dark small { | |
| /* Adjust general text elements */ | |
| color: #e2e8f0; /* Light text */ | |
| } | |
| html.dark .text-gray-600, html.dark .text-gray-700, html.dark .text-gray-800, html.dark .text-gray-900 { | |
| color: #a0aec0; /* Lighter gray for dark mode */ | |
| } | |
| html.dark .text-muted { | |
| color: #718096; | |
| } | |
| html.dark .bg-white { background-color: #2d3748 ; } | |
| html.dark .bg-gray-50 { background-color: #1a202c ; } | |
| html.dark .bg-gray-100 { background-color: #2d3748 ; } | |
| html.dark .border-gray-100, html.dark .border-gray-200 { border-color: #4a5568 ; } | |
| html.dark .hover\:bg-gray-50:hover { background-color: #4a5568 ; } | |
| html.dark .navbar-dark .navbar-brand, html.dark .navbar-dark .nav-link { color: #fff; } | |
| html.dark .navbar-dark .nav-link.active { color: #fff; font-weight: bold; } | |
| </style> | |
| <!-- Add specific styles for this page if needed --> | |
| <style> | |
| .example-page-img { | |
| max-height: 150px; /* Adjust height for image display on this page */ | |
| width: auto; /* Maintain aspect ratio */ | |
| object-fit: contain; /* Ensure the whole image is visible */ | |
| margin-left: auto; | |
| margin-right: auto; /* Center the image within its container */ | |
| } | |
| .card-title-fixed-height { | |
| min-height: 3em; /* Adjust as needed to prevent layout jumps */ | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| </style> | |
| </head> | |
| <!-- Add dark mode background/text for body base --> | |
| <body class="bg-gray-50 dark:bg-gray-900 min-h-screen flex flex-col text-gray-900 dark:text-gray-200"> | |
| <!-- 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"> | |
| <div class="flex items-center"> | |
| <a href="index.html" class="text-2xl font-['Pacifico'] text-primary dark:text-blue-400 mr-8" data-lang-en="AI Text Tools" data-lang-hi="एआई टेक्स्ट उपकरण">AI Text Tools</a> | |
| <!-- *** START: Updated Navigation Bar *** --> | |
| <nav id="mainNav" class="hidden md:flex space-x-6"> | |
| <a href="index.html" class="nav-link hover:text-primary dark:hover:text-blue-400 text-gray-600 dark:text-gray-300" data-lang-en="Home" data-lang-hi="होम">Home</a> | |
| <!-- Assuming recognizer.html is the main tool page, link from index.html might be better --> | |
| <a href="recognizer.html" class="nav-link hover:text-primary dark:hover:text-blue-400 text-gray-600 dark:text-gray-300" data-lang-en="Recognize" data-lang-hi="पहचानें">Recognize</a> | |
| <!-- Assuming examples.html exists --> | |
| <a href="examples.html" class="nav-link text-primary dark:text-blue-400 font-medium" data-lang-en="Examples" data-lang-hi="उदाहरण">Examples</a> | |
| <!-- Assuming technology.html exists --> | |
| <a href="technology.html" class="nav-link hover:text-primary dark:hover:text-blue-400 text-gray-600 dark:text-gray-300" data-lang-en="Technology" data-lang-hi="तकनीक">Technology</a> | |
| <!-- Assuming about.html exists --> | |
| <a href="about.html" class="nav-link hover:text-primary dark:hover:text-blue-400 text-gray-600 dark:text-gray-300" data-lang-en="About" data-lang-hi="बारे में">About</a> | |
| <!-- Link to contact.html --> | |
| <a href="contact.html" class="nav-link hover:text-primary dark:hover:text-blue-400 text-gray-600 dark:text-gray-300" data-lang-en="Contact" data-lang-hi="संपर्क">Contact</a> | |
| <!-- Active link for this page --> | |
| <a href="feedback.html" class="nav-link hover:text-primary dark:hover:text-blue-400 text-gray-600 dark:text-gray-300" data-lang-en="Feedback" data-lang-hi="प्रतिक्रिया">Feedback</a> | |
| </nav> | |
| </div> | |
| <!-- Right side header items --> | |
| <div class="flex items-center space-x-4"> | |
| <!-- Language Switch --> | |
| <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"> | |
| <!-- *** Add ID: languageToggle *** --> | |
| <input type="checkbox" id="languageToggle" class="custom-switch-input"> | |
| <span class="custom-switch-slider"></span> | |
| </label> | |
| <span class="text-sm text-gray-600 dark:text-gray-400 hindi-font">हिंदी</span> | |
| </div> | |
| <!-- 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"> | |
| <!-- *** Add ID: themeToggle *** --> | |
| <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> | |
| <!-- User/Notification Icons (Keep as placeholders) --> | |
| <div class="w-10 h-10 flex items-center justify-center bg-gray-100 dark:bg-gray-700 rounded-full cursor-pointer" title="User Profile (Placeholder)"> | |
| <i class="ri-user-line text-gray-600 dark:text-gray-300"></i> | |
| </div> | |
| <div class="w-10 h-10 flex items-center justify-center relative cursor-pointer" title="Notifications (Placeholder)"> | |
| <i class="ri-notification-3-line text-gray-600 dark:text-gray-300"></i> | |
| <span class="absolute top-0 right-0 bg-red-500 text-white text-xs w-5 h-5 flex items-center justify-center rounded-full">3</span> | |
| </div> | |
| <!-- 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"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-white mb-8 border-b border-gray-200 dark:border-gray-700 pb-4"> | |
| <i class="ri-gallery-line mr-2 text-primary align-middle"></i>Example Words & Predictions | |
| </h2> | |
| <!-- Check if there was an error message from Flask --> | |
| <!-- Check if examples_data list exists and is not empty --> | |
| <p class="text-center text-gray-600 dark:text-gray-400 mb-8"> | |
| Showing results from processing images found in the <code>src/static/examples/</code> directory using the loaded OCR model. | |
| </p> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> | |
| <!-- Loop through each example item passed from Flask - REPLACED WITH STATIC EXAMPLES --> | |
| <div class="col"> | |
| <div class="card flex flex-col h-full bg-white dark:bg-gray-800 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 overflow-hidden transition-shadow hover:shadow-lg"> | |
| <!-- Image Section --> | |
| <div class="bg-gray-50 dark:bg-gray-700 p-4 border-b border-gray-200 dark:border-gray-600 flex justify-center items-center" style="min-height: 180px;"> <!-- Fixed height container --> | |
| <!-- Placeholder Image - Replace with actual static image paths if available --> | |
| <img src="/static/examples/sample1.png" class="example-page-img" alt="sample1.png"> | |
| </div> | |
| <!-- Text Section --> | |
| <div class="card-body p-4 text-center flex-grow"> | |
| <!-- Prediction Text --> | |
| <div class="card-title-fixed-height mb-2"> <!-- Fixed height title area --> | |
| <h5 class="card-title text-2xl hindi-font font-semibold text-gray-800 dark:text-white leading-tight"> | |
| पहला | |
| </h5> | |
| </div> | |
| <!-- Probability --> | |
| <p class="card-text text-gray-500 dark:text-gray-400 text-sm mb-0"> | |
| Confidence: 98.5% | |
| </p> | |
| </div> | |
| <!-- Footer Section --> | |
| <div class="card-footer bg-gray-50 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-600 px-4 py-2"> | |
| <small class="text-gray-500 dark:text-gray-400 text-xs truncate block">sample1.png</small> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col"> | |
| <div class="card flex flex-col h-full bg-white dark:bg-gray-800 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 overflow-hidden transition-shadow hover:shadow-lg"> | |
| <!-- Image Section --> | |
| <div class="bg-gray-50 dark:bg-gray-700 p-4 border-b border-gray-200 dark:border-gray-600 flex justify-center items-center" style="min-height: 180px;"> <!-- Fixed height container --> | |
| <!-- Placeholder Image - Replace with actual static image paths if available --> | |
| <img src="/static/examples/sample2.png" class="example-page-img" alt="sample2.png"> | |
| </div> | |
| <!-- Text Section --> | |
| <div class="card-body p-4 text-center flex-grow"> | |
| <!-- Prediction Text --> | |
| <div class="card-title-fixed-height mb-2"> <!-- Fixed height title area --> | |
| <h5 class="card-title text-2xl hindi-font font-semibold text-gray-800 dark:text-white leading-tight"> | |
| नमस्ते | |
| </h5> | |
| </div> | |
| <!-- Probability --> | |
| <p class="card-text text-gray-500 dark:text-gray-400 text-sm mb-0"> | |
| Confidence: 95.2% | |
| </p> | |
| </div> | |
| <!-- Footer Section --> | |
| <div class="card-footer bg-gray-50 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-600 px-4 py-2"> | |
| <small class="text-gray-500 dark:text-gray-400 text-xs truncate block">sample2.png</small> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col"> | |
| <div class="card flex flex-col h-full bg-white dark:bg-gray-800 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 overflow-hidden transition-shadow hover:shadow-lg"> | |
| <!-- Image Section --> | |
| <div class="bg-gray-50 dark:bg-gray-700 p-4 border-b border-gray-200 dark:border-gray-600 flex justify-center items-center" style="min-height: 180px;"> <!-- Fixed height container --> | |
| <!-- Placeholder Image - Replace with actual static image paths if available --> | |
| <img src="/static/examples/sample3.png" class="example-page-img" alt="sample3.png"> | |
| </div> | |
| <!-- Text Section --> | |
| <div class="card-body p-4 text-center flex-grow"> | |
| <!-- Prediction Text --> | |
| <div class="card-title-fixed-height mb-2"> <!-- Fixed height title area --> | |
| <h5 class="card-title text-2xl hindi-font font-semibold text-gray-800 dark:text-white leading-tight"> | |
| परियोजना | |
| </h5> | |
| </div> | |
| <!-- Probability --> | |
| <p class="card-text text-gray-500 dark:text-gray-400 text-sm mb-0"> | |
| Confidence: 97.8% | |
| </p> | |
| </div> | |
| <!-- Footer Section --> | |
| <div class="card-footer bg-gray-50 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-600 px-4 py-2"> | |
| <small class="text-gray-500 dark:text-gray-400 text-xs truncate block">sample3.png</small> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- End check for examples_data --> | |
| </div> <!-- /container --> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-gray-400 py-12"> <!-- Adjusted footer text color --> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <!-- Add data-lang attributes to footer elements if needed --> | |
| <a href="/" class="text-2xl font-['Pacifico'] text-white mb-4 inline-block" data-lang-en="HindiOCR" data-lang-hi="हिन्दी ओसीआर">HindiOCR</a> | |
| <p class="mb-4 text-sm" data-lang-en="Transforming handwritten Hindi documents into digital text." data-lang-hi="हस्तलिखित हिंदी दस्तावेज़ों को डिजिटल टेक्स्ट में बदलना।">Transforming handwritten Hindi documents into digital text.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="hover:text-white" title="GitHub (Placeholder)"><i class="ri-github-fill"></i></a> | |
| <a href="#" class="hover:text-white" title="LinkedIn (Placeholder)"><i class="ri-linkedin-box-fill"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-medium text-white mb-4" data-lang-en="Quick Links" data-lang-hi="त्वरित लिंक्स">Quick Links</h3> | |
| <ul class="space-y-2 text-sm"> | |
| <li><a href="/" class="hover:text-white" data-lang-en="Home" data-lang-hi="होम">Home</a></li> | |
| <li><a href="/recognize" class="hover:text-white" data-lang-en="Recognize" data-lang-hi="पहचानें">Recognize</a></li> | |
| <li><a href="/examples" class="hover:text-white" data-lang-en="Examples" data-lang-hi="उदाहरण">Examples</a></li> | |
| <li><a href="/technology" class="hover:text-white" data-lang-en="Technology" data-lang-hi="तकनीक">Technology</a></li> | |
| <li><a href="/about" class="hover:text-white" data-lang-en="About" data-lang-hi="बारे में">About</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-medium text-white mb-4" data-lang-en="Resources" data-lang-hi="संसाधन">Resources</h3> | |
| <ul class="space-y-2 text-sm"> | |
| <li><a href="#" class="hover:text-white" data-lang-en="Documentation (TBD)" data-lang-hi="प्रलेखन (TBD)">Documentation (TBD)</a></li> | |
| <li><a href="#" class="hover:text-white" data-lang-en="GitHub Repo (Link)" data-lang-hi="गिटहब रेपो (लिंक)">GitHub Repo (Link)</a></li> | |
| <li><a href="#" class="hover:text-white" data-lang-en="Support (TBD)" data-lang-hi="समर्थन (TBD)">Support (TBD)</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-medium text-white mb-4" data-lang-en="Contact (Project)" data-lang-hi="संपर्क (परियोजना)">Contact (Project)</h3> | |
| <ul class="space-y-2 text-sm"> | |
| <li class="flex items-start"> | |
| <i class="ri-mail-line mt-1 mr-2"></i> | |
| <span>khansamayashaswini@gmail.com</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="ri-building-line mr-2"></i> | |
| <span>MATS University,Raipur / NIC Durg</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Copyright --> | |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center"> | |
| <p class="text-sm">© 2025 Yashaswini khansama | Final Year Project | NIC</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Bootstrap JS Bundle (Not needed for Tailwind, can remove if not used elsewhere) --> | |
| <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> --> | |
| <!-- Base Theme/Language Script --> | |
| <script> | |
| // --- Theme Toggle --- | |
| const themeToggle = document.getElementById('themeToggle'); | |
| const htmlElement = document.documentElement; // Target <html> tag | |
| // Function to apply theme based on preference | |
| 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); | |
| // Save preference to localStorage | |
| localStorage.setItem('theme', isDark ? 'dark' : 'light'); | |
| }); | |
| } else { | |
| console.warn("Theme toggle button not found."); | |
| } | |
| // --- Language Toggle (Simple Version) --- | |
| const languageToggle = document.getElementById('languageToggle'); | |
| const langElements = document.querySelectorAll('[data-lang-en]'); // Select elements with language data | |
| // Function to apply language | |
| function applyLanguage(lang) { // lang should be 'en' or 'hi' | |
| console.log("Applying language:", lang); | |
| htmlElement.setAttribute('lang', lang); // Set overall page lang | |
| langElements.forEach(el => { | |
| const text = el.getAttribute(`data-lang-${lang}`); | |
| if (text) { | |
| el.textContent = text; // Replace text content | |
| } | |
| }); | |
| // 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.addEventListener('change', (event) => { | |
| const newLang = event.target.checked ? 'hi' : 'en'; | |
| applyLanguage(newLang); | |
| }); | |
| } else { | |
| console.warn("Language toggle button not found."); | |
| } | |
| </script> | |
| <!-- Block for page-specific scripts --> | |
| </body> | |
| </html> |