Spaces:

OrganizedProgrammers
/

arXiv

Sleeping

App Files Files Community

Omar ID EL MOUMEN commited on Mar 27

Commit

327d208

1 Parent(s): 95d420b

Upload frontend

Browse files

Files changed (3) hide show

frontend/index.html +26 -0
frontend/script.js +201 -0
frontend/style.css +130 -0

frontend/index.html ADDED Viewed

	@@ -0,0 +1,26 @@

+<head>
+    <title>ArXiv 6G Research Search</title>
+    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <h1>ArXiv 6G Research Search</h1>
+    <div id="search-container">
+        <input type="text" id="keyword-input" placeholder="Enter search keyword">
+        <input type="number" min="1" id="limit-input" value="15" disabled placeholder="Enter limit of documents">
+        <button id="search-button">Search</button>
+    </div>
+    <input type="checkbox" name="limit" id="limit-check"><label for="limit-check">Custom limit ?</label>
+    <div id="results-container"></div>
+    <div id="popup" class="popup">
+        <div class="popup-content">
+            <span class="close">&times;</span>
+            <h2 id="popup-title">Fenêtre Popup</h2>
+            <div class="scrollable-text">
+            </div>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>

frontend/script.js ADDED Viewed

	@@ -0,0 +1,201 @@

+document.addEventListener('DOMContentLoaded', function() {
+    const searchInput = document.getElementById('keyword-input');
+    const limitInput = document.getElementById("limit-input");
+    const searchButton = document.getElementById('search-button');
+    const limitCheckbox = document.getElementById("limit-check");
+    const popupText = document.querySelector(".scrollable-text");
+    const popupTitle = document.getElementById("popup-title");
+    const body = document.body;
+    const resultsContainer = document.getElementById('results-container');
+    // Function to perform the search
+    async function performSearch() {
+        const keyword = searchInput.value.trim();
+        let limit = limitInput.value.trim();
+        if (!keyword) {
+            resultsContainer.innerHTML = '<div class="error-message">Please enter a search keyword.</div>';
+            return;
+        }
+        if (!limit){
+            limit = 15;
+        }
+        // Show loading indicator
+        resultsContainer.innerHTML = '<div class="loading">Searching for ' + limit.toString() + ' papers about "' + keyword + '"...</div>';
+        try {
+            const response = await fetch('https://om4r932-arxiv.hf.space/search', {
+                method: 'POST',
+                headers: {
+                    'Accept': 'application/json',
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    keyword: keyword,
+                    limit: limit
+                })
+            });
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const data = await response.json();
+            if (data.error) {
+                resultsContainer.innerHTML = `<div class="error-message">Search error: ${data.message}</div>`;
+                return;
+            }
+            displayResults(data.message);
+        } catch (error) {
+            console.error('Search error:', error);
+            resultsContainer.innerHTML = `<div class="error-message">Error performing search: ${error.message}</div>`;
+        }
+    }
+    function handleCustomLimit(){
+        if(limitCheckbox.checked){
+            limitInput.removeAttribute("disabled")
+        } else {
+            limitInput.value = 15;
+            limitInput.setAttribute("disabled", "")
+        }
+    }
+    // Function to display the results
+    function displayResults(results) {
+        resultsContainer.innerHTML = '';
+        if (!results || Object.keys(results).length === 0) {
+            resultsContainer.innerHTML = '<div class="error-message">No results found. Try a different keyword.</div>';
+            return;
+        }
+        const resultsCount = Object.keys(results).length;
+        const resultsHeader = document.createElement('h2');
+        resultsHeader.textContent = `Found ${resultsCount} paper${resultsCount > 1 ? 's' : ''}`;
+        resultsContainer.appendChild(resultsHeader);
+        Object.entries(results).forEach(([id, paper]) => {
+            const paperElement = document.createElement('div');
+            paperElement.classList.add('paper-result');
+            // Format the abstract to preserve line breaks
+            const formattedAbstract = paper.abstract;
+            paperElement.innerHTML = `
+                <div class="paper-title">${paper.title}</div>
+                <div class="paper-authors">${paper.authors}</div>
+                <div class="paper-date">Published: ${paper.date}</div>
+                <div class="paper-abstract">${formattedAbstract}</div>
+                <div class="paper-id">ArXiv ID: ${id}</div>
+                <a type="button" class="btn btn-primary" role="button" href="${paper.pdf}">Show PDF</a>
+                <input type="button" value="Extract Text" doc="${id}" class="extractText btn btn-success"/>
+                <input type="button" value="Get titles" doc="${id}" class="getTitle btn btn-danger"/>
+            `;
+            resultsContainer.appendChild(paperElement);
+        });
+        document.querySelectorAll(".extractText").forEach(btn => {
+            btn.addEventListener("click", async function () {
+                let id_doc = btn.getAttribute("doc");
+                popupTitle.textContent = `PDF extraction - Document no ${id_doc}`;
+                try {
+                    const response = await fetch('https://om4r932-arxiv.hf.space/extract', {
+                        method: 'POST',
+                        headers: {
+                            'Accept': 'application/json',
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify({
+                            doc_id: id_doc
+                        })
+                    });
+                    if (!response.ok) {
+                        throw new Error(`HTTP error! status: ${response.status}`);
+                    }
+                    const data = await response.json();
+                    if (data.error) {
+                        popupText.innerHTML = `<div class="error-message">Search error: ${data.message}</div>`;
+                        return;
+                    }
+                    popupText.textContent = data.text;
+                } catch (error) {
+                    console.error('Search error:', error);
+                    popupText.innerHTML = `<div class="error-message">Error performing search: ${error.message}</div>`;
+                }
+                document.getElementById("popup").style.display = "flex";
+                body.classList.add("no-scroll")
+            });
+        })
+        document.querySelectorAll(".getTitle").forEach(btn => {
+            btn.addEventListener("click", async function () {
+                let id_doc = btn.getAttribute("doc");
+                popupTitle.textContent = `Chapters - Document no ${id_doc}`;
+                try {
+                    const response = await fetch('https://om4r932-arxiv.hf.space/extract', {
+                        method: 'POST',
+                        headers: {
+                            'Accept': 'application/json',
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify({
+                            doc_id: id_doc
+                        })
+                    });
+                    if (!response.ok) {
+                        throw new Error(`HTTP error! status: ${response.status}`);
+                    }
+                    const data = await response.json();
+                    if (data.error) {
+                        popupText.innerHTML = `<div class="error-message">Search error: ${data.message}</div>`;
+                        return;
+                    }
+                    let t = "";
+                    if(typeof data.titles == Array){
+                        data.titles.forEach(title => {
+                            t += title + "\n";
+                        });
+                        popupText.textContent = t;
+                    }else {
+                        popupText.textContent = data.titles;
+                    }
+                } catch (error) {
+                    console.error('Search error:', error);
+                    popupText.innerHTML = `<div class="error-message">Error performing search: ${error.message}</div>`;
+                }
+                document.getElementById("popup").style.display = "flex";
+                body.classList.add("no-scroll")
+            });
+        })
+    }
+    // Add event listeners
+    document.querySelector(".close").addEventListener("click", () => {
+        document.getElementById("popup").style.display = "none";
+        body.classList.remove("no-scroll");
+    })
+    window.addEventListener("click", function (event) {
+        if (event.target === popup) {
+            popup.style.display = "none";
+            body.classList.remove("no-scroll");
+        }
+    });
+    searchButton.addEventListener('click', performSearch);
+    limitCheckbox.addEventListener("change", handleCustomLimit);
+    searchInput.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') performSearch();
+    });
+});

frontend/style.css ADDED Viewed

	@@ -0,0 +1,130 @@

+body {
+    font-family: Arial, sans-serif;
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+}
+#search-container {
+    display: flex;
+    margin-bottom: 20px;
+}
+#keyword-input {
+    flex-grow: 1;
+    padding: 10px;
+    font-size: 16px;
+    border: 1px solid #ccc;
+    border-radius: 4px 0 0 4px;
+}
+#search-button {
+    padding: 10px 20px;
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    border-radius: 0 4px 4px 0;
+    cursor: pointer;
+    font-size: 16px;
+}
+#search-button:hover {
+    background-color: #45a049;
+}
+#results-container {
+    margin-top: 20px;
+}
+.paper-result {
+    border: 1px solid #ddd;
+    margin-bottom: 20px;
+    padding: 15px;
+    border-radius: 5px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+.paper-title {
+    font-weight: bold;
+    font-size: 18px;
+    margin-bottom: 10px;
+    color: #333;
+}
+.paper-authors {
+    color: #666;
+    margin-bottom: 5px;
+    font-style: italic;
+}
+.paper-date {
+    color: #888;
+    margin-bottom: 10px;
+    font-size: 14px;
+}
+.paper-abstract {
+    line-height: 1.6;
+    white-space: pre-line;
+    color: #444;
+}
+.paper-id {
+    color: #999;
+    font-size: 12px;
+    text-align: right;
+    margin-top: 10px;
+}
+.loading {
+    text-align: center;
+    padding: 20px;
+    font-style: italic;
+    color: #666;
+}
+.error-message {
+    color: #d9534f;
+    padding: 10px;
+    border: 1px solid #d9534f;
+    border-radius: 4px;
+    background-color: #f9f2f2;
+}
+/* Styles pour la popup */
+.popup {
+    display: none; /* Cachée par défaut */
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5); /* Fond assombri */
+    justify-content: center;
+    align-items: center;
+}
+/* Contenu de la popup */
+.popup-content {
+    background: white;
+    padding: 20px;
+    border-radius: 10px;
+    text-align: center;
+    width: 65%;
+    height: 70%;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+    display: flex;
+    flex-direction: column;
+}
+/* Champ texte défilant */
+.scrollable-text {
+    flex-grow: 1;
+    margin-top: 10px;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    height: 100%;
+    overflow: auto;
+    background: #f9f9f9;
+    text-align: left;
+}
+/* Bouton de fermeture */
+.close {
+    align-self: flex-end;
+    font-size: 24px;
+    cursor: pointer;
+    font-weight: bold;
+}
+.no-scroll {
+    overflow: hidden;
+}