local-deep-research 0.1.26__py3-none-any.whl → 0.2.2__py3-none-any.whl

local_deep_research/web/static/js/services/ui.js

@@ -0,0 +1,546 @@
+/**
+ * UI utility functions
+ */
+
+/**
+ * Update a progress bar UI element
+ * @param {string|Element} fillElementId - The ID or element to fill
+ * @param {string|Element} percentageElementId - The ID or element to show percentage
+ * @param {number} percentage - The percentage to set
+ */
+function updateProgressBar(fillElementId, percentageElementId, percentage) {
+    const progressFill = typeof fillElementId === 'string' ? document.getElementById(fillElementId) : fillElementId;
+    const progressPercentage = typeof percentageElementId === 'string' ? document.getElementById(percentageElementId) : percentageElementId;
+
+    if (progressFill && progressPercentage) {
+        // Convert any value to a percentage between 0-100
+        const safePercentage = Math.min(100, Math.max(0, percentage || 0));
+
+        // Update the width of the fill element
+        progressFill.style.width = `${safePercentage}%`;
+
+        // Update the percentage text
+        progressPercentage.textContent = `${Math.round(safePercentage)}%`;
+
+        // Add classes for visual feedback
+        if (safePercentage >= 100) {
+            progressFill.classList.add('complete');
+        } else {
+            progressFill.classList.remove('complete');
+        }
+    }
+}
+
+/**
+ * Show a loading spinner
+ * @param {string|Element} container - The container ID or element to add the spinner to
+ * @param {string} message - Optional message to show with the spinner
+ */
+function showSpinner(container, message = 'Loading...') {
+    const containerEl = typeof container === 'string' ? document.getElementById(container) : container;
+
+    if (containerEl) {
+        containerEl.innerHTML = '';
+
+        const spinnerHTML = `
+            <div class="loading-spinner centered">
+                <div class="spinner"></div>
+                ${message ? `<div class="spinner-message">${message}</div>` : ''}
+            </div>
+        `;
+
+        containerEl.innerHTML = spinnerHTML;
+    }
+}
+
+/**
+ * Hide a loading spinner
+ * @param {string|Element} container - The container ID or element with the spinner
+ */
+function hideSpinner(container) {
+    const containerEl = typeof container === 'string' ? document.getElementById(container) : container;
+
+    if (containerEl) {
+        const spinner = containerEl.querySelector('.loading-spinner');
+        if (spinner) {
+            spinner.remove();
+        }
+    }
+}
+
+/**
+ * Show an error message
+ * @param {string|Element} container - The container ID or element to add the error to
+ * @param {string} message - The error message
+ */
+function showError(container, message) {
+    const containerEl = typeof container === 'string' ? document.getElementById(container) : container;
+
+    if (containerEl) {
+        const errorHTML = `
+            <div class="error-message">
+                <i class="fas fa-exclamation-circle"></i>
+                <span>${message}</span>
+            </div>
+        `;
+
+        containerEl.innerHTML = errorHTML;
+    }
+}
+
+/**
+ * Show a notification message
+ * @param {string} message - The message to display
+ * @param {string} type - Message type: 'success', 'error', 'info', 'warning'
+ * @param {number} duration - How long to show the message in ms
+ */
+function showMessage(message, type = 'success', duration = 3000) {
+    // Check if the toast container exists
+    let toastContainer = document.getElementById('toast-container');
+
+    // Create it if it doesn't exist
+    if (!toastContainer) {
+        toastContainer = document.createElement('div');
+        toastContainer.id = 'toast-container';
+        document.body.appendChild(toastContainer);
+    }
+
+    // Create a new toast
+    const toast = document.createElement('div');
+    toast.className = `toast toast-${type}`;
+
+    // Add icon based on type
+    let icon = '';
+    switch (type) {
+        case 'success':
+            icon = '<i class="fas fa-check-circle"></i>';
+            break;
+        case 'error':
+            icon = '<i class="fas fa-exclamation-circle"></i>';
+            break;
+        case 'info':
+            icon = '<i class="fas fa-info-circle"></i>';
+            break;
+        case 'warning':
+            icon = '<i class="fas fa-exclamation-triangle"></i>';
+            break;
+    }
+
+    // Set the content
+    toast.innerHTML = `
+        ${icon}
+        <div class="toast-message">${message}</div>
+    `;
+
+    // Add to container
+    toastContainer.appendChild(toast);
+
+    // Show with animation
+    setTimeout(() => {
+        toast.classList.add('visible');
+    }, 10);
+
+    // Remove after duration
+    setTimeout(() => {
+        toast.classList.remove('visible');
+
+        // Remove from DOM after animation
+        setTimeout(() => {
+            toast.remove();
+        }, 300);
+    }, duration);
+}
+
+/**
+ * Format and render Markdown content
+ * @param {string} markdown - The markdown content
+ * @returns {string} The rendered HTML
+ */
+function renderMarkdown(markdown) {
+    if (!markdown) {
+        return '<div class="alert alert-warning">No content available</div>';
+    }
+
+    try {
+        // Use marked library if available
+        if (typeof marked !== 'undefined') {
+            // Configure marked options
+            marked.setOptions({
+                breaks: true,
+                gfm: true,
+                headerIds: true,
+                smartLists: true,
+                smartypants: true,
+                highlight: function(code, language) {
+                    // Use Prism for syntax highlighting if available
+                    if (typeof Prism !== 'undefined' && Prism.languages[language]) {
+                        return Prism.highlight(code, Prism.languages[language], language);
+                    }
+                    return code;
+                }
+            });
+
+            // Parse markdown and return HTML
+            const html = marked.parse(markdown);
+
+            // Process any special elements like image references
+            const processedHtml = processSpecialMarkdown(html);
+
+            return `<div class="markdown-content">${processedHtml}</div>`;
+        } else {
+            // Basic fallback if marked is not available
+            console.warn('Marked library not available. Using basic formatting.');
+            const basic = markdown
+                .replace(/\n\n/g, '<br><br>')
+                .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+                .replace(/\*(.*?)\*/g, '<em>$1</em>')
+                .replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2" target="_blank">$1</a>');
+
+            return `<div class="markdown-content">${basic}</div>`;
+        }
+    } catch (error) {
+        console.error('Error rendering markdown:', error);
+        return `<div class="alert alert-danger">Error rendering content: ${error.message}</div>`;
+    }
+}
+
+/**
+ * Process special markdown elements
+ * @param {string} html - HTML content to process
+ * @returns {string} - Processed HTML
+ */
+function processSpecialMarkdown(html) {
+    // Process image references
+    return html.replace(/\!\[ref:([^\]]+)\]/g, (match, ref) => {
+        // Check if this is a reference to a generated image
+        if (ref.startsWith('image-')) {
+            return `<div class="generated-image" data-image-id="${ref}">
+                <img src="/research/static/img/generated/${ref}.png"
+                     alt="Generated image ${ref}"
+                     class="img-fluid"
+                     loading="lazy" />
+                <div class="image-caption">Generated image (${ref})</div>
+            </div>`;
+        }
+        return match;
+    });
+}
+
+/**
+ * Create a dynamic favicon
+ * @param {string} emoji - The emoji to use for the favicon
+ */
+function createDynamicFavicon(emoji = '⚡') {
+    // Create a canvas element
+    const canvas = document.createElement('canvas');
+    canvas.width = 64;
+    canvas.height = 64;
+
+    // Get the 2D drawing context
+    const ctx = canvas.getContext('2d');
+
+    // Clear the canvas
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    // Set font
+    ctx.font = '48px Arial';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+
+    // Draw the emoji
+    ctx.fillText(emoji, 32, 32);
+
+    // Convert to data URL
+    const dataUrl = canvas.toDataURL('image/png');
+
+    // Create or update the favicon link
+    let link = document.querySelector('link[rel="icon"]');
+    if (!link) {
+        link = document.createElement('link');
+        link.rel = 'icon';
+        document.head.appendChild(link);
+    }
+
+    // Set the new favicon
+    link.href = dataUrl;
+}
+
+/**
+ * Update favicon based on status
+ * @param {string} status - The research status
+ */
+function updateFavicon(status) {
+    try {
+        // Find favicon link or create it if it doesn't exist
+        let link = document.querySelector("link[rel='icon']") ||
+                document.querySelector("link[rel='shortcut icon']");
+
+        if (!link) {
+            console.log('Favicon link not found, creating a new one');
+            link = document.createElement('link');
+            link.rel = 'icon';
+            link.type = 'image/x-icon';
+            document.head.appendChild(link);
+        }
+
+        // Create dynamic favicon using canvas
+        const canvas = document.createElement('canvas');
+        canvas.width = 32;
+        canvas.height = 32;
+        const ctx = canvas.getContext('2d');
+
+        // Background color based on status
+        let bgColor = '#007bff'; // Default blue
+
+        if (status === 'completed') {
+            bgColor = '#28a745'; // Success green
+        } else if (status === 'failed' || status === 'error') {
+            bgColor = '#dc3545'; // Error red
+        } else if (status === 'cancelled') {
+            bgColor = '#6c757d'; // Gray
+        }
+
+        // Draw circle background
+        ctx.fillStyle = bgColor;
+        ctx.beginPath();
+        ctx.arc(16, 16, 16, 0, 2 * Math.PI);
+        ctx.fill();
+
+        // Draw inner circle
+        ctx.fillStyle = '#ffffff';
+        ctx.beginPath();
+        ctx.arc(16, 16, 10, 0, 2 * Math.PI);
+        ctx.fill();
+
+        // Draw letter R
+        ctx.fillStyle = bgColor;
+        ctx.font = 'bold 16px Arial';
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText('R', 16, 16);
+
+        // Set the favicon to the canvas data URL
+        link.href = canvas.toDataURL('image/png');
+
+        console.log('Updated favicon to:', status);
+    } catch (error) {
+        console.error('Error updating favicon:', error);
+    }
+}
+
+/**
+ * Show an alert message in a container on the page
+ * @param {string} message - The message to display
+ * @param {string} type - The alert type: success, error, warning, info
+ * @param {boolean} skipIfToastShown - Whether to skip showing this alert if a toast was already shown
+ */
+function showAlert(message, type = 'info', skipIfToastShown = true) {
+    // If we're showing a toast and we want to skip the regular alert, just return
+    if (skipIfToastShown && window.ui && window.ui.showMessage) {
+        return;
+    }
+
+    // Find the alert container - look for different possible alert containers
+    let alertContainer = document.getElementById('filtered-settings-alert');
+
+    // If not found, try other common alert containers
+    if (!alertContainer) {
+        alertContainer = document.getElementById('settings-alert');
+    }
+
+    if (!alertContainer) {
+        alertContainer = document.getElementById('research-alert');
+    }
+
+    if (!alertContainer) return;
+
+    // Clear any existing alerts
+    alertContainer.innerHTML = '';
+
+    // Create alert element
+    const alert = document.createElement('div');
+    alert.className = `alert alert-${type}`;
+    alert.innerHTML = `<i class="fas ${type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'}"></i> ${message}`;
+
+    // Add a close button
+    const closeBtn = document.createElement('span');
+    closeBtn.className = 'alert-close';
+    closeBtn.innerHTML = '&times;';
+    closeBtn.addEventListener('click', () => {
+        alert.remove();
+        alertContainer.style.display = 'none';
+    });
+
+    alert.appendChild(closeBtn);
+
+    // Add to container
+    alertContainer.appendChild(alert);
+    alertContainer.style.display = 'block';
+
+    // Auto-hide after 5 seconds
+    setTimeout(() => {
+        alert.remove();
+        if (alertContainer.children.length === 0) {
+            alertContainer.style.display = 'none';
+        }
+    }, 5000);
+}
+
+// Add CSS for toast messages
+function addToastStyles() {
+    if (document.getElementById('toast-styles')) return;
+
+    const styleEl = document.createElement('style');
+    styleEl.id = 'toast-styles';
+    styleEl.textContent = `
+        #toast-container {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            z-index: 9999;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+
+        .toast {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            background-color: var(--card-bg, #2a2a2a);
+            color: var(--text-color, #fff);
+            padding: 12px 16px;
+            border-radius: 8px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            max-width: 350px;
+            transform: translateX(120%);
+            opacity: 0;
+            transition: transform 0.3s ease, opacity 0.3s ease;
+            border-left: 4px solid transparent;
+        }
+
+        .toast.visible {
+            transform: translateX(0);
+            opacity: 1;
+        }
+
+        .toast i {
+            font-size: 1.2rem;
+        }
+
+        .toast-success {
+            border-left-color: var(--success-color, #28a745);
+        }
+
+        .toast-success i {
+            color: var(--success-color, #28a745);
+        }
+
+        .toast-error {
+            border-left-color: var(--danger-color, #dc3545);
+        }
+
+        .toast-error i {
+            color: var(--danger-color, #dc3545);
+        }
+
+        .toast-info {
+            border-left-color: var(--info-color, #17a2b8);
+        }
+
+        .toast-info i {
+            color: var(--info-color, #17a2b8);
+        }
+
+        .toast-warning {
+            border-left-color: var(--warning-color, #ffc107);
+        }
+
+        .toast-warning i {
+            color: var(--warning-color, #ffc107);
+        }
+    `;
+
+    document.head.appendChild(styleEl);
+}
+
+// Add CSS for alert styles
+function addAlertStyles() {
+    if (document.getElementById('alert-styles')) return;
+
+    const styleEl = document.createElement('style');
+    styleEl.id = 'alert-styles';
+    styleEl.textContent = `
+        .alert {
+            padding: 12px 16px;
+            margin-bottom: 1rem;
+            border-radius: 8px;
+            display: flex;
+            align-items: center;
+            position: relative;
+        }
+
+        .alert i {
+            margin-right: 12px;
+            font-size: 1.2rem;
+        }
+
+        .alert-success {
+            background-color: rgba(40, 167, 69, 0.15);
+            color: var(--success-color, #28a745);
+            border-left: 4px solid var(--success-color, #28a745);
+        }
+
+        .alert-error, .alert-danger {
+            background-color: rgba(220, 53, 69, 0.15);
+            color: var(--danger-color, #dc3545);
+            border-left: 4px solid var(--danger-color, #dc3545);
+        }
+
+        .alert-info {
+            background-color: rgba(23, 162, 184, 0.15);
+            color: var(--info-color, #17a2b8);
+            border-left: 4px solid var(--info-color, #17a2b8);
+        }
+
+        .alert-warning {
+            background-color: rgba(255, 193, 7, 0.15);
+            color: var(--warning-color, #ffc107);
+            border-left: 4px solid var(--warning-color, #ffc107);
+        }
+
+        .alert-close {
+            position: absolute;
+            right: 10px;
+            top: 8px;
+            font-size: 1.2rem;
+            font-weight: bold;
+            cursor: pointer;
+            opacity: 0.7;
+        }
+
+        .alert-close:hover {
+            opacity: 1;
+        }
+    `;
+
+    document.head.appendChild(styleEl);
+}
+
+// Add toast styles when the script loads
+addToastStyles();
+// Add alert styles when the script loads
+addAlertStyles();
+
+// Export the UI functions
+window.ui = {
+    updateProgressBar,
+    showSpinner,
+    hideSpinner,
+    showError,
+    showMessage,
+    renderMarkdown,
+    createDynamicFavicon,
+    updateFavicon,
+    showAlert
+};

local_deep_research/web/templates/base.html

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+    <title>{% block title %}Deep Research System{% endblock %}</title>
+    <link rel="stylesheet" href="{{ url_for('research.serve_static', path='css/styles.css') }}">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github-dark.min.css">
+    {% block extra_head %}{% endblock %}
+</head>
+<body>
+    <div class="app-container">
+        <!-- Sidebar -->
+        {% include 'components/sidebar.html' %}
+
+        <!-- Main Content -->
+        <main class="main-content">
+            {% block content %}{% endblock %}
+
+            <!-- Collapsible Log Panel is included in specific pages -->
+        </main>
+    </div>
+
+    <!-- Mobile Tab Bar -->
+    {% include 'components/mobile_nav.html' %}
+
+    <!-- Common Templates -->
+    {% block templates %}{% endblock %}
+
+    <!-- Scripts -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.1/socket.io.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/marked@4.3.0/lib/marked.umd.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js" integrity="sha512-BNaRQnYJYiPSqHHDb58B0yaPfCu+Wgds8Gp/gU33kqBtgNS4tSPHuGibyoeqMV/TJlSKda6FXzoEyYGjTe+vXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+    <!-- Core JS -->
+    <script src="{{ url_for('research.serve_static', path='js/services/formatting.js') }}"></script>
+    <script src="{{ url_for('research.serve_static', path='js/services/ui.js') }}"></script>
+    <script src="{{ url_for('research.serve_static', path='js/services/api.js') }}"></script>
+    <script src="{{ url_for('research.serve_static', path='js/services/socket.js') }}"></script>
+
+    <!-- Shared Components -->
+    <script src="{{ url_for('research.serve_static', path='js/components/logpanel.js') }}"></script>
+
+    <!-- Page-specific Components -->
+    {% block component_scripts %}{% endblock %}
+
+    <!-- Page-specific JS -->
+    {% block page_scripts %}{% endblock %}
+
+    <script>
+        // Configure marked to not use eval
+        if (typeof marked !== 'undefined') {
+            marked.setOptions({
+                headerIds: false,
+                mangle: false,
+                smartypants: false
+            });
+        }
+
+        // Configure html2canvas to avoid using eval if possible
+        if (typeof html2canvas !== 'undefined') {
+            window.html2canvas_noSandbox = true;
+        }
+    </script>
+
+    <script src="/research/static/js/components/settings_sync.js"></script>
+</body>
+</html>

local_deep_research/web/templates/components/custom_dropdown.html

@@ -0,0 +1,47 @@
+{% macro render_dropdown(input_id, dropdown_id, placeholder, label=None, help_text=None, allow_custom=False, show_refresh=False, refresh_aria_label="Refresh options", data_setting_key=None) %}
+<div class="form-group">
+    {% if label %}
+    <label for="{{ input_id }}">{{ label }}</label>
+    {% endif %}
+
+    {% if show_refresh %}
+    <div class="custom-dropdown-with-refresh">
+        <div class="custom-dropdown" id="{{ dropdown_id }}">
+            <input type="text"
+                   id="{{ input_id }}"
+                   data-key="{{ data_setting_key or input_id }}"
+                   class="custom-dropdown-input"
+                   placeholder="{{ placeholder }}"
+                   autocomplete="off"
+                   aria-haspopup="listbox">
+            <!-- Hidden input that will be included in form submission -->
+            <input type="hidden" name="{{ input_id }}" id="{{ input_id }}_hidden" value="">
+            <div class="custom-dropdown-list" id="{{ dropdown_id }}-list"></div>
+        </div>
+        <button type="button"
+                class="custom-dropdown-refresh-btn dropdown-refresh-button"
+                id="{{ input_id }}-refresh"
+                aria-label="{{ refresh_aria_label }}">
+            <i class="fas fa-sync-alt"></i>
+        </button>
+    </div>
+    {% else %}
+    <div class="custom-dropdown" id="{{ dropdown_id }}">
+        <input type="text"
+               id="{{ input_id }}"
+               data-key="{{ data_setting_key or input_id }}"
+               class="custom-dropdown-input"
+               placeholder="{{ placeholder }}"
+               autocomplete="off"
+               aria-haspopup="listbox">
+        <!-- Hidden input that will be included in form submission -->
+        <input type="hidden" name="{{ input_id }}" id="{{ input_id }}_hidden" value="">
+        <div class="custom-dropdown-list" id="{{ dropdown_id }}-list"></div>
+    </div>
+    {% endif %}
+
+    {% if help_text %}
+    <span class="input-help">{{ help_text }}</span>
+    {% endif %}
+</div>
+{% endmacro %}

local_deep_research/web/templates/components/log_panel.html

@@ -0,0 +1,32 @@
+<div class="collapsible-log-panel">
+    <div class="log-panel-header" id="log-panel-toggle">
+        <i class="fas fa-chevron-right toggle-icon"></i>
+        <span>Research Logs</span>
+        <span class="log-indicator" id="log-indicator">0</span>
+    </div>
+    <div class="log-panel-content collapsed" id="log-panel-content">
+        <div class="log-controls">
+            <div class="log-filter">
+                <div class="filter-buttons">
+                    <button class="small-btn selected" onclick="window.filterLogsByType('all')">All</button>
+                    <button class="small-btn" onclick="window.filterLogsByType('milestone')">Milestones</button>
+                    <button class="small-btn" onclick="window.filterLogsByType('info')">Info</button>
+                    <button class="small-btn" onclick="window.filterLogsByType('error')">Errors</button>
+                </div>
+            </div>
+        </div>
+        <div class="console-log" id="console-log-container">
+            <!-- Logs will be added here dynamically -->
+            <div class="empty-log-message">No logs yet. Research logs will appear here as they occur.</div>
+        </div>
+    </div>
+</div>
+
+<!-- Template for console log entries -->
+<template id="console-log-entry-template">
+    <div class="console-log-entry">
+        <span class="log-timestamp"></span>
+        <span class="log-badge"></span>
+        <span class="log-message"></span>
+    </div>
+</template>