Spaces:

DeepRat
/

TrueEye_Reports

Paused

App Files Files Community

DeepRat commited on Jun 27, 2025

Commit

02fc4de

verified ·

1 Parent(s): e5c3ef3

Update static/index.html

Browse files

Files changed (1) hide show

static/index.html +102 -12

static/index.html CHANGED Viewed

@@ -25,10 +25,11 @@
             color: #f6ae2d;
             text-decoration: underline;
         }
-        .markdown-content h1, .markdown-content h2, .markdown-content h3 {
             color: #f6ae2d;
             margin-top: 1rem;
             margin-bottom: 0.5rem;
         }
         .markdown-content p {
             margin-bottom: 1rem;
@@ -37,6 +38,9 @@
             margin-left: 1.5rem;
             margin-bottom: 1rem;
         }
         .markdown-content code {
             background-color: rgba(246, 174, 45, 0.2);
             padding: 0.2rem 0.4rem;
@@ -56,6 +60,17 @@
             color: #777;
             margin-bottom: 1rem;
         }
     </style>
 </head>
 <body class="bg-gray-100 dark:bg-dark min-h-screen transition-colors duration-300">
@@ -86,7 +101,7 @@
                     >
                     <button
                         id="analyze-btn"
-                        class="px-6 py-3 bg-primary hover:bg-yellow-500 text-secondary font-semibold rounded-lg transition-colors duration-300 flex items-center justify-center gap-2"
                     >
                         <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                             <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
@@ -97,22 +112,42 @@
                 <div id="error-message" class="mt-2 text-red-500 hidden"></div>
             </div>
-            <div id="loading" class="hidden flex justify-center items-center py-8">
-                <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary"></div>
             </div>
             <div id="result-container" class="hidden bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transition-colors duration-300">
                 <h2 class="text-2xl font-semibold text-secondary dark:text-primary mb-4">Analysis Result</h2>
                 <div id="result" class="markdown-content text-gray-700 dark:text-gray-300"></div>
             </div>
         </main>
         <footer class="mt-12 text-center text-gray-500 dark:text-gray-400">
-            <p>© 2023 TrueEye. All rights reserved.</p>
         </footer>
     </div>
     <script>
         // Theme toggle
         const themeToggle = document.getElementById('theme-toggle');
         const themeIconDark = document.getElementById('theme-icon-dark');
@@ -149,6 +184,7 @@
         const resultDiv = document.getElementById('result');
         const loadingDiv = document.getElementById('loading');
         const errorMessage = document.getElementById('error-message');
         analyzeBtn.addEventListener('click', async () => {
             const url = inputUrl.value.trim();
@@ -164,8 +200,7 @@
             }
             clearError();
-            loadingDiv.classList.remove('hidden');
-            resultContainer.classList.add('hidden');
             try {
                 const response = await fetch(window.location.origin + '/analyze', {
@@ -177,20 +212,63 @@
                 });
                 if (!response.ok) {
-                    throw new Error(Server returned ${response.status});
                 }
                 const data = await response.json();
                 resultDiv.innerHTML = marked.parse(data.result);
                 resultContainer.classList.remove('hidden');
             } catch (error) {
                 showError('Failed to analyze URL. Please try again later.');
                 console.error('Error:', error);
-            } finally {
-                loadingDiv.classList.add('hidden');
             }
         });
         function isValidUrl(string) {
             try {
                 new URL(string);
@@ -212,10 +290,22 @@
         // Allow pressing Enter in the input field
         inputUrl.addEventListener('keypress', (e) => {
-            if (e.key === 'Enter') {
                 analyzeBtn.click();
             }
         });
     </script>
 </body>
-</html>

             color: #f6ae2d;
             text-decoration: underline;
         }
+        .markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4 {
             color: #f6ae2d;
             margin-top: 1rem;
             margin-bottom: 0.5rem;
+            font-weight: bold;
         }
         .markdown-content p {
             margin-bottom: 1rem;
             margin-left: 1.5rem;
             margin-bottom: 1rem;
         }
+        .markdown-content li {
+            margin-bottom: 0.5rem;
+        }
         .markdown-content code {
             background-color: rgba(246, 174, 45, 0.2);
             padding: 0.2rem 0.4rem;
             color: #777;
             margin-bottom: 1rem;
         }
+        .markdown-content strong {
+            font-weight: bold;
+            color: #f6ae2d;
+        }
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+        .loading-message {
+            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+        }
     </style>
 </head>
 <body class="bg-gray-100 dark:bg-dark min-h-screen transition-colors duration-300">
                     >
                     <button
                         id="analyze-btn"
+                        class="px-6 py-3 bg-primary hover:bg-yellow-500 text-secondary font-semibold rounded-lg transition-colors duration-300 flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
                     >
                         <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                             <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
                 <div id="error-message" class="mt-2 text-red-500 hidden"></div>
             </div>
+            <div id="loading" class="hidden">
+                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8 text-center">
+                    <div class="flex justify-center items-center mb-4">
+                        <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary"></div>
+                    </div>
+                    <p class="text-gray-600 dark:text-gray-300 loading-message">Analyzing content...</p>
+                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">This may take a few minutes as we perform a comprehensive analysis</p>
+                    <div id="progress-timer" class="text-xs text-gray-400 dark:text-gray-500 mt-4">Time elapsed: 0:00</div>
+                </div>
             </div>
             <div id="result-container" class="hidden bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transition-colors duration-300">
                 <h2 class="text-2xl font-semibold text-secondary dark:text-primary mb-4">Analysis Result</h2>
                 <div id="result" class="markdown-content text-gray-700 dark:text-gray-300"></div>
             </div>
+            <div id="info-box" class="mt-8 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
+                <h3 class="text-lg font-semibold text-blue-700 dark:text-blue-300 mb-2">How it works</h3>
+                <p class="text-blue-600 dark:text-blue-400 text-sm">
+                    TrueEye analyzes news articles and web content to detect bias, identify target audiences,
+                    and reveal hidden agendas. Simply paste a URL and let our AI-powered system provide you
+                    with a comprehensive media literacy report.
+                </p>
+            </div>
         </main>
         <footer class="mt-12 text-center text-gray-500 dark:text-gray-400">
+            <p>© 2025 TrueEye. All rights reserved.</p>
         </footer>
     </div>
     <script>
+        // Global variables
+        let analysisStartTime = null;
+        let timerInterval = null;
         // Theme toggle
         const themeToggle = document.getElementById('theme-toggle');
         const themeIconDark = document.getElementById('theme-icon-dark');
         const resultDiv = document.getElementById('result');
         const loadingDiv = document.getElementById('loading');
         const errorMessage = document.getElementById('error-message');
+        const progressTimer = document.getElementById('progress-timer');
         analyzeBtn.addEventListener('click', async () => {
             const url = inputUrl.value.trim();
             }
             clearError();
+            startAnalysis();
             try {
                 const response = await fetch(window.location.origin + '/analyze', {
                 });
                 if (!response.ok) {
+                    throw new Error(`Server returned ${response.status}`);
                 }
                 const data = await response.json();
+                if (!data.success && data.error) {
+                    // Handle specific error types
+                    if (data.error === 'timeout') {
+                        showError('The analysis took too long. Please try again with a simpler article or try again later.');
+                    } else if (data.error === 'connection') {
+                        showError('Could not connect to the analysis service. Please check your connection and try again.');
+                    } else {
+                        showError(data.result || 'An error occurred during analysis.');
+                    }
+                    stopAnalysis();
+                    return;
+                }
+                // Show results
                 resultDiv.innerHTML = marked.parse(data.result);
                 resultContainer.classList.remove('hidden');
+                stopAnalysis();
+                // Scroll to results
+                resultContainer.scrollIntoView({ behavior: 'smooth', block: 'start' });
             } catch (error) {
                 showError('Failed to analyze URL. Please try again later.');
                 console.error('Error:', error);
+                stopAnalysis();
             }
         });
+        function startAnalysis() {
+            loadingDiv.classList.remove('hidden');
+            resultContainer.classList.add('hidden');
+            analyzeBtn.disabled = true;
+            analysisStartTime = Date.now();
+            // Update timer every second
+            timerInterval = setInterval(() => {
+                const elapsed = Date.now() - analysisStartTime;
+                const minutes = Math.floor(elapsed / 60000);
+                const seconds = Math.floor((elapsed % 60000) / 1000);
+                progressTimer.textContent = `Time elapsed: ${minutes}:${seconds.toString().padStart(2, '0')}`;
+            }, 1000);
+        }
+        function stopAnalysis() {
+            loadingDiv.classList.add('hidden');
+            analyzeBtn.disabled = false;
+            if (timerInterval) {
+                clearInterval(timerInterval);
+                timerInterval = null;
+            }
+        }
         function isValidUrl(string) {
             try {
                 new URL(string);
         // Allow pressing Enter in the input field
         inputUrl.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter' && !analyzeBtn.disabled) {
                 analyzeBtn.click();
             }
         });
+        // Example URLs for testing
+        const exampleUrls = [
+            'https://example.com/news-article',
+            'https://bbc.com/news/article-123',
+            'https://cnn.com/2025/01/article'
+        ];
+        // Add example URL on double-click (for testing)
+        inputUrl.addEventListener('dblclick', () => {
+            inputUrl.value = exampleUrls[Math.floor(Math.random() * exampleUrls.length)];
+        });
     </script>
 </body>
+</html>