305 lines
12 KiB
HTML
305 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{% block title %}News{% endblock %}</title>
|
|
|
|
<!-- Bootstrap CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<!-- Add jQuery from CDN (before other scripts) -->
|
|
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
|
|
<!-- Markdown -->
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
<!-- Bootstrap JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<!-- Custom Styles -->
|
|
<style>
|
|
body {
|
|
background-color: #f4f4f4;
|
|
}
|
|
.navbar-dark .navbar-nav .nav-link {
|
|
color: rgba(255,255,255,0.75);
|
|
}
|
|
.chat-box {
|
|
background-color: #fff;
|
|
border: 1px solid #ddd;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
overflow-y: auto; /* Enable vertical scrolling */
|
|
max-width: 100%;
|
|
min-height: 150px;
|
|
max-height: 450px;
|
|
white-space: normal;
|
|
word-wrap: break-word;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.table {
|
|
table-layout: auto;
|
|
width: 100%;
|
|
}
|
|
th {
|
|
white-space: nowrap;
|
|
}
|
|
td {
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
|
|
}
|
|
|
|
/* Sidebar */
|
|
.sidebar {
|
|
min-width: 110px; /* Minimum width */
|
|
max-width: 200px; /* Maximum width */
|
|
width: 100%; /* Make it take full width within the defined min and max */
|
|
padding: 5px;
|
|
box-sizing: border-box; /* Ensure padding doesn't increase the overall width */
|
|
transition: width 0.3s ease-in-out; /* Smooth transition for resizing */
|
|
background-color: #f4f4f4;
|
|
box-sizing: border-box;
|
|
word-wrap: break-word; /* Allow wrapping of long words */
|
|
overflow-wrap: break-word; /* Ensures wrapping across browsers */
|
|
white-space: normal; /* Ensure normal word wrapping */
|
|
}
|
|
|
|
.dark-mode .sidebar {
|
|
background-color: #1e1e1e;
|
|
}
|
|
|
|
|
|
</style>
|
|
</head>
|
|
<script>
|
|
//////////////////////////////////////////////////////////////////////
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
//////////////////////////////////////////////
|
|
// Timestamp to local timezone
|
|
document.querySelectorAll(".ts-fetch").forEach(element => {
|
|
let utcDate = element.getAttribute("data-ts"); // Get timestamp from data attribute
|
|
let options = { year: 'numeric', month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12:false};
|
|
if (utcDate) {
|
|
let localDate = new Date(utcDate).toLocaleString("en-GB", options); // Convert to local timezone
|
|
element.textContent = localDate; // Update the text content
|
|
}
|
|
});
|
|
document.querySelectorAll(".ts-publish").forEach(element => {
|
|
let utcDate = element.getAttribute("data-ts"); // Get timestamp from data attribute
|
|
let options = { year: 'numeric', month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12:false};
|
|
if (utcDate) {
|
|
let localDate = new Date(utcDate).toLocaleString("en-GB", options); // Convert to local timezone
|
|
element.textContent = localDate; // Update the text content
|
|
}
|
|
});
|
|
});
|
|
|
|
// CSRF token helper (required if CSRF protection is enabled)
|
|
function getCookie(name) {
|
|
const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
|
|
return match ? match[2] : null;
|
|
}
|
|
|
|
function fetchDetails(urlId, url) {
|
|
// Show the loading spinner
|
|
document.getElementById("loading-spinner").style.display = "block";
|
|
|
|
// Get the input value
|
|
let inputText = document.getElementById(`custom-input-${urlId}`).value;
|
|
// Get the input model
|
|
let selectedModel = document.getElementById(`options-${urlId}`).value;
|
|
// Check if a model is selected
|
|
if (!selectedModel) {
|
|
alert("Please select a model before fetching details.");
|
|
return;
|
|
}
|
|
|
|
// Fetch URL
|
|
let fetchUrl = `/llm/`;
|
|
|
|
let resultContainer = $("#chat-output");
|
|
resultContainer.html(""); // Clear previous content before fetching
|
|
let fetchButton = $("button[onclick^='fetchDetails']"); // Select the button
|
|
fetchButton.prop("disabled", true); // Disable button
|
|
|
|
fetch(fetchUrl, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-type": "application/json; charset=UTF-8",
|
|
'X-CSRFToken': getCookie('csrftoken') // required if CSRF middleware is active
|
|
},
|
|
body: JSON.stringify({
|
|
model: selectedModel,
|
|
message: inputText
|
|
})
|
|
}).then(response => {
|
|
if (!response.ok) {
|
|
throw new Error("Error on network response");
|
|
}
|
|
const reader = response.body.getReader();
|
|
const decoder = new TextDecoder();
|
|
|
|
let accumulatedText = ""; // Store streamed text before rendering Markdown
|
|
let messageContainer = $('<div class="chat-message"></div>'); // Create a temporary container for streaming response
|
|
resultContainer.append(messageContainer);
|
|
|
|
function read() {
|
|
return reader.read().then(({ done, value }) => {
|
|
if (done) {
|
|
messageContainer.html(marked.parse(accumulatedText));
|
|
fetchButton.prop("disabled", false); // Re-enable button when done
|
|
return;
|
|
}
|
|
// Decode the streamed chunk
|
|
let chunk = decoder.decode(value);
|
|
// Append to the accumulated text
|
|
accumulatedText += chunk;
|
|
// Render Markdown progressively (but safely)
|
|
messageContainer.html(marked.parse(accumulatedText));
|
|
// Auto-scroll to bottom
|
|
resultContainer.scrollTop(resultContainer[0].scrollHeight);
|
|
return read();
|
|
});
|
|
}
|
|
return read();
|
|
})
|
|
.catch(error => {
|
|
resultContainer.html(`<p class="text-danger">Error fetching details: ${error.message}</p>`);
|
|
fetchButton.prop("disabled", false); // Re-enable button on error
|
|
})
|
|
.finally(() => {
|
|
// Hide the loading spinner after request is complete
|
|
document.getElementById("loading-spinner").style.display = "none";
|
|
});
|
|
}
|
|
</script>
|
|
<body>
|
|
|
|
<!--
|
|
<div class="sidebar">
|
|
<div class="button-container">
|
|
<button id="homeButton" class="home-button">🏠</button>
|
|
<button id="themeToggle" class="theme-button">🌙</button>
|
|
</div>
|
|
</div>
|
|
-->
|
|
|
|
<!-- Main Content -->
|
|
<div class="container mt-4">
|
|
<!-- <h2>URL Details</h2> -->
|
|
<table class="table table-bordered">
|
|
<tr>
|
|
<th>URL <a href="/task/publish_{{ url_item.id }}" target="_blank">[✍️ Publish]</a></th>
|
|
<td><a href="{{ url_item.url|safe }}" target="_blank">{{ url_item.url }}</a></td>
|
|
</tr>
|
|
<tr>
|
|
<th>Fetch Date</th>
|
|
<td> <span class="ts-fetch" data-ts="{{ url_item.ts_fetch|date:'c' }}"></span> </td>
|
|
</tr>
|
|
<tr>
|
|
<th>Source</th>
|
|
<td>{{ sources|join:", " }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Search</th>
|
|
<td>{{ searches|join:", " }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Status</th>
|
|
<td>{{ url_item.status }} {% if url_canonical != None %}<a href="/urls/{{ url_canonical.id }}" target="_blank">[{{ url_canonical.id }}]</a>{% endif %} </td>
|
|
</tr>
|
|
<tr>
|
|
<th>URL host</th>
|
|
<td> <a href="{{ url_content.url_host|safe }}" target="_blank">{{ url_content.url_host }}</a> </td>
|
|
</tr>
|
|
<tr>
|
|
<th>Site name</th>
|
|
<td>{{ url_content.site_name|default:"" }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Published Date</th>
|
|
<td> <span class="ts-publish" data-ts="{{ url_content.date_published|date:'c' }}"></span> </td>
|
|
</tr>
|
|
<tr>
|
|
<th>Valid news content?</th>
|
|
<td>{{ url_content.valid_content }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Tags</th>
|
|
<td>{{ url_content.tags|default:"" }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Authors</th>
|
|
<td>{{ url_content.authors|default:"" }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Keywords</th>
|
|
<td>{{ url_content.keywords|default:"" }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Language</th>
|
|
<td>{{ url_content.language|default:"" }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Main image</th>
|
|
<td><a href="{{ url_content.image_main_url|safe }}" target="_blank">{{ url_content.image_main_url|default:"" }}</a></td>
|
|
</tr>
|
|
<tr>
|
|
<th>Image URLs</th>
|
|
<td>{{ url_content.image_urls|default:"" }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Video URLs</th>
|
|
<td>{{ url_content.videos_url|default:"" }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Title</th>
|
|
<td>{{ url_content.title|default:"" }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Description</th>
|
|
<td>{{ url_content.description|default:"" }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Content</th>
|
|
<td>{{ url_content.content|default:"" }}</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<!-- Independent form for optional values -->
|
|
<form onsubmit="fetchDetailsWithSelection(event, {{ url_item.id }}, '{{ url_item.url }}')">
|
|
<label for="options-{{ url_item.id }}">Model:</label>
|
|
<select id="options-{{ url_item.id }}" class="form-control mb-2">
|
|
{% for model in models %}
|
|
<option value="{{ model }}">{{ model }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</form>
|
|
|
|
<!-- Input field with a default value -->
|
|
<label for="custom-input-{{ url_item.id }}">Prompt:</label>
|
|
<textarea id="custom-input-{{ url_item.id }}" class="form-control mb-2" rows="5">{{ prompt }}</textarea>
|
|
|
|
<div class="d-flex align-items-center">
|
|
<!-- Fetch details button -->
|
|
<button class="btn btn-primary" onclick="fetchDetails({{ url_item.id }}, '{{ url_item.url }}')">
|
|
Fetch Details
|
|
</button>
|
|
|
|
<!-- Loading Spinner (Hidden by Default) -->
|
|
<div id="loading-spinner" class="spinner-border text-primary ms-2" role="status" style="display: none;">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chatbot-style response box -->
|
|
<div class="chat-box mt-3 p-3 border rounded">
|
|
<div id="chat-output"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{% block extra_js %}{% endblock %}
|
|
</body>
|
|
</html>
|