index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Scientific Article Summarizer</title>
    <link rel="stylesheet" href="/static/styles.css" />
</head>
<body>
    <h1>Scientific Article Summarizer</h1>

    <div class="container">
        <h2>Summarize Text</h2>
        <textarea id="inputText" placeholder="Insert scientific text..."></textarea>
        <div class="row">
            <button id="summTextBtn" onclick="summarizeText()">Summarize Text</button>
            <button onclick="copySummary()">Copy Summary</button>
        </div>

        <h2>Summarize PDF</h2>
        <input type="file" id="pdfFile" accept="application/pdf" />
        <div class="row">
            <button id="summPdfBtn" onclick="summarizePDF()">Summarize PDF</button>
        </div>

        <h2>Summary Result</h2>
        <div id="summaryBox" style="white-space: pre-line;"></div>

        <div id="errorBox" class="error" hidden></div>
    </div>

    <script src="/static/script.js"></script>
</body>
</html>