|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>URL and Text Input App</title> |
|
<script src="https://kit.fontawesome.com/4d86daed55.js" crossorigin="anonymous"></script> |
|
<style> |
|
body { |
|
font-family: Arial, sans-serif; |
|
margin: 0; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
justify-content: flex-end; |
|
min-height: 100vh; |
|
background-image: url("https://ibb.co/K2rPsZ4"); |
|
background-image: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1); |
|
background-size: cover; |
|
|
|
} |
|
|
|
#header { |
|
background-color: white; |
|
padding: 10px; |
|
width: 100%; |
|
text-align: center; |
|
position: fixed; |
|
top: 0; |
|
color: black; |
|
border: 2px solid #333; |
|
padding: 0px; |
|
border-radius: 8px; |
|
box-sizing: content-box; |
|
} |
|
|
|
#interactionHistory { |
|
width: 80%; |
|
height:75vh; |
|
text-align: left; |
|
margin-top: 20px; |
|
padding: 20px; |
|
box-sizing: border-box; |
|
border-radius: 8px; |
|
background-image: linear-gradient(to right top, #9edd91, #b2d787, #c3d081, #d1ca7f, #dcc380, #e1bd7d, #e6b87b, #ebb27a, #efab72, #f3a46a, #f79c64, #fb945f); |
|
overflow-y:auto; |
|
} |
|
|
|
#inputForm { |
|
max-width: 80%; |
|
width: 80%; |
|
background-color: #34495e; |
|
padding: 20px; |
|
box-sizing: border-box; |
|
border: 1px solid #2c3e50; |
|
border-radius: 8px; |
|
display: flex; |
|
|
|
margin-top: 20px; |
|
margin-bottom: 30px; |
|
} |
|
#downloadPdfLink { |
|
position: fixed; |
|
top: 90px; |
|
left: 10px; |
|
background-color: #3498db; |
|
color: white; |
|
border: none; |
|
padding: 5px 10px; |
|
border-radius: 4px; |
|
cursor: pointer; |
|
text-decoration: none; |
|
display: inline-block; |
|
} |
|
|
|
#shareLink { |
|
position: fixed; |
|
top: 90px; |
|
right: 10px; |
|
background-color: #3498db; |
|
color: white; |
|
border: none; |
|
padding: 5px 10px; |
|
border-radius: 4px; |
|
cursor: pointer; |
|
text-decoration: none; |
|
display: inline-block; |
|
margin-left: 5px; |
|
} |
|
|
|
#scrollButton { |
|
position: absolute; |
|
bottom: 20px; |
|
right: 20px; |
|
background-color: #3498db; |
|
color: white; |
|
border: none; |
|
border-radius: 4px; |
|
cursor: pointer; |
|
padding: 10px; |
|
} |
|
|
|
#interactionHistory::-webkit-scrollbar { |
|
width: 10px; |
|
} |
|
|
|
#interactionHistory::-webkit-scrollbar-thumb { |
|
background-color: #3498db; |
|
} |
|
#downloadPdfLink:hover, |
|
#shareLink:hover { |
|
background-color: #2980b9; |
|
} |
|
|
|
.copy-button { |
|
cursor: pointer; |
|
background-color: #3498db; |
|
color: white; |
|
border: none; |
|
padding: 5px 10px; |
|
border-radius: 4px; |
|
margin-left: 5px; |
|
} |
|
|
|
input[type="text"] { |
|
width: 260%; |
|
padding: 10px; |
|
margin: 5px 0 0 0; |
|
box-sizing: border-box; |
|
display: inline-block; |
|
border-radius:10px; |
|
height:100%; |
|
} |
|
|
|
input[type="submit"] { |
|
background-color: #3498db; |
|
color: white; |
|
border: solid; |
|
border-radius: 10px; |
|
cursor: pointer; |
|
font-size: 13px; |
|
} |
|
#userForm{ |
|
display:flex; |
|
justify-content:space-between; |
|
width:100%; |
|
} |
|
|
|
input[type="submit"]:hover { |
|
background-color: #2980b9; |
|
} |
|
.fa-solid.fa-arrow-right{ |
|
margin-top: 10%; |
|
font-size:25px; |
|
background-color: #3498db; |
|
color: white; |
|
height: 70%; |
|
padding:10px; |
|
border-radius: 10px; |
|
} |
|
#scrollDownLink { |
|
position: absolute; |
|
top: 50%; |
|
right: 20px; |
|
background-color: #3498db; |
|
color: white; |
|
border: none; |
|
border-radius: 4px; |
|
cursor: pointer; |
|
padding: 10px; |
|
} |
|
|
|
#scrollDownLink:hover { |
|
background-color: #2980b9; |
|
} |
|
|
|
</style> |
|
</head> |
|
<body> |
|
|
|
<div id="header" {% if input_submitted %} style="display: none;" {% endif %}> |
|
<h1>Supply Chain Management</h1> |
|
</div> |
|
|
|
|
|
|
|
<div id="interactionHistory"> |
|
{% if chat_history %} |
|
<div> |
|
{% for message in chat_history %} |
|
{% if 'Question' in message %} |
|
<p><strong>{{ 'Question' }}:</strong> {{ message['Question'] }}</p> |
|
{% endif %} |
|
{% if 'Article content' in message %} |
|
<p><strong>{{ 'Article Content' }}:</strong> {{ message['Article content'] }} <span class="copy-button" onclick="copyToClipboard('{{ message['Article content'] }}')"><i class="fas fa-copy"></i></span></p> |
|
{% endif %} |
|
{% if 'Short Article content' in message %} |
|
<p><strong>{{ 'Short Article Content' }}:</strong> {{ message['Short Article content'] }} <span class="copy-button" onclick="copyToClipboard('{{ message['Short Article content'] }}')"><i class="fas fa-copy"></i></span></p> |
|
{% endif %} |
|
{% if 'Classification' in message %} |
|
<p><strong>{{ 'Classification' }}:</strong> {{ message['Classification'] }}</p> |
|
{% endif %} |
|
{% if 'Summary risk' in message %} |
|
<p><strong>{{ 'Summary Risk' }}:</strong> {{ message['Summary risk'] }} <span class="copy-button" onclick="copyToClipboard('{{ message['Summary risk'] }}')"><i class="fas fa-copy"></i></span></p> |
|
{% endif %} |
|
{% if 'Opportunity Summary' in message %} |
|
<p><strong>{{ 'Opportunity Summary' }}:</strong> {{ message['Opportunity Summary'] }} <span class="copy-button" onclick="copyToClipboard('{{ message['Opportunity Summary'] }}')"><i class="fas fa-copy"></i></span></p> |
|
{% endif %} |
|
{% if message is mapping %} |
|
{% for key, value in message.items() %} |
|
{% if key not in ['Question','Article content','Summary risk','Opportunity Summary','Short Article content','Classification'] %} |
|
<p><strong>{{ key }}:</strong> {{ value }}</p> |
|
{% endif %} |
|
{% endfor %} |
|
{% else %} |
|
<p>{{ message }}</p> |
|
{% endif %} |
|
{% endfor %} |
|
</div> |
|
{% endif %} |
|
<button id="scrollButton" onclick="scrollToTop()"><i class="fa-solid fa-arrow-up"></i></button> |
|
</div> |
|
<a href="javascript:void(0);" onclick="scrollToInteractionHistory()" id="scrollDownLink"><i class="fa-solid fa-arrow-down"></i></a> |
|
|
|
<div id="inputForm"> |
|
|
|
<form action="/" method="post" id="userForm"> |
|
<input type="text" id="userInput" name="userInput" placeholder="Enter URL or Text" required> |
|
|
|
<button type="submit" onclick="sendQuestion()" style="background-color: #3498db; border: none; cursor: pointer; padding-top:6px; padding-bottom: 16px;"> |
|
<i class="fa-solid fa-arrow-right"></i> |
|
</button> |
|
</form> |
|
|
|
</div> |
|
<a href="{{ url_for('download_pdf') }}" id="downloadPdfLink" target="_blank"><i class="fa-solid fa-download"></i></a> |
|
|
|
<a href="#" id="shareLink"><i class="fa-solid fa-share-from-square"></i></a> |
|
|
|
|
|
<script> |
|
function sendQuestion() { |
|
|
|
var userInput = $('#userInput').val(); |
|
|
|
|
|
$.ajax({ |
|
type: 'POST', |
|
url: '/', |
|
data: { userInput: userInput }, |
|
success: function(response) { |
|
|
|
$('#interactionHistory').html(response); |
|
} |
|
}); |
|
} |
|
|
|
function scrollToTop() { |
|
document.getElementById('interactionHistory').scrollTop = 0; |
|
} |
|
function checkScrollPosition() { |
|
var interactionHistory = document.getElementById('interactionHistory'); |
|
var scrollButton = document.getElementById('scrollButton'); |
|
|
|
if (interactionHistory.scrollTop > 0) { |
|
scrollButton.style.display = 'block'; |
|
} else { |
|
scrollButton.style.display = 'none'; |
|
} |
|
} |
|
window.addEventListener('scroll', function () { |
|
|
|
checkScrollPosition(); |
|
}); |
|
function copyToClipboard(text) { |
|
var textarea = document.createElement("textarea"); |
|
textarea.value = text; |
|
document.body.appendChild(textarea); |
|
textarea.select(); |
|
document.execCommand('copy'); |
|
document.body.removeChild(textarea); |
|
alert('Copied to clipboard: ' + text); |
|
} |
|
|
|
function downloadPDF() { |
|
|
|
window.location.href = '/download_pdf'; |
|
} |
|
function scrollToInteractionHistory() { |
|
var interactionHistory = document.getElementById('interactionHistory'); |
|
interactionHistory.scrollTop = interactionHistory.scrollHeight; |
|
} |
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
var shareLink = document.getElementById('shareLink'); |
|
|
|
|
|
shareLink.addEventListener('click', function(event) { |
|
event.preventDefault(); |
|
|
|
|
|
if (navigator.share) { |
|
|
|
navigator.share({ |
|
title: document.title, |
|
text: 'Check out this page!', |
|
url: window.location.href |
|
}) |
|
.then(() => console.log('Shared successfully')) |
|
.catch((error) => console.error('Error sharing:', error)); |
|
} else { |
|
|
|
alert('Sharing is not supported in your browser.'); |
|
} |
|
}); |
|
}); |
|
</script> |
|
|
|
</body> |
|
</html> |
|
|