Tutorial 84 views 9 this week

How to display GPTResearcher logs using django

Kokou Elvis Khorem Blitti

Published on January 10, 2025

Hello!

Today I want to share a little experience about GPTResearcher and how to display the logs in the frontend if you're using Django in the backend. I have not tried with Flask but the process should be almost the same.

Create a custom logs handler

from typing import Dict, Any

class CustomLogsHandler:
    """A custom Logs handler class to handle JSON data."""
    def __init__(self):
        self.logs = []  # Initialize logs to store data

    async def send_json(self, data: Dict[str, Any]) -> None:
        """Send JSON data and log it."""
        self.logs.append(data)  # Append data to logs

The custom logs handler allows to have more control over the response received from the call to the GPTResearcher.

Add the logs handler to GPTResearcher

We first need to initialize the logs handler globally. That means we initialize it outside of every function. WHY? Because we need to access the same logs via another API that can be called by a JS script.

# Initialize researcher with a custom WebSocket
custom_logs_handler = CustomLogsHandler()

async def generate_research_report(query, report_source):
    """
    Generates a research report directly by invoking the GPTResearcher.
    """
    if query in report_cache:
        return report_cache[query]

    try:
        researcher = GPTResearcher(
            query,
            report_source=report_source,
            report_format="IEEE",
            websocket=custom_logs_handler
        )
        await researcher.conduct_research()
        report = await researcher.write_report()
        report_cache[query] = report
        return report
    except Exception as e:
        print(f"Error generating report: {e}")
        return {"error": str(e)}

Notice that we added the custom log in the initialization of the GPTResearcher as follows:

websocket=custom_logs_handler

Create the view

We can now create a very simple view that has access to the logs

def get_logs(request):
    """
    A view to retrieve logs and send them as a JSON response.
    """
    return JsonResponse({"logs": custom_logs_handler.logs})

Create a script

Finally, we create a scipt that can be added to an html page. The script is as follows:

const logsContainer = document.getElementById('logs-container');

async function fetchLogs() {
    try {
        const response = await fetch('/logs/'); // URL from Django
        if (response.ok) {
            const data = await response.json();
            displayLogs(data.logs);
        } else {
            console.error('Failed to fetch logs:', response.status);
        }
    } catch (error) {
        console.error('Error fetching logs:', error);
    }
}

function displayLogs(logs) {
    logsContainer.innerHTML = ''; // Clear the container
    logs.forEach(log => {
        if (log.output) { // Ensure the log has an 'output' field
            const logItem = document.createElement('div');
            logItem.classList.add('log-item');
            logItem.textContent = log.output; // Display only the 'output' field
            logsContainer.appendChild(logItem);
        }
    });
}

// Fetch logs every 5 seconds
setInterval(fetchLogs, 1000);

You can change the interval at which the logs are fetched or add your own way of fetching the logs.

Thanks for reading. That's all from my side and I hope this small tutorial can help you in your projects.

Share this article

Twitter LinkedIn