Spaces:
Sleeping
Sleeping
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Requirements Extractor</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| </head> | |
| <body class="bg-gray-100 min-h-screen"> | |
| <!-- Loading Overlay --> | |
| <div id="loading-overlay" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white p-6 rounded-lg shadow-lg text-center"> | |
| <div id="loading-bar" class="w-64 h-4 bg-gray-200 rounded-full mb-4"> | |
| <div class="h-full bg-blue-500 rounded-full animate-pulse"></div> | |
| </div> | |
| <p id="progress-text" class="text-gray-700">Chargement en cours...</p> | |
| </div> | |
| </div> | |
| <div class="container mx-auto p-6"> | |
| <h1 class="text-3xl font-bold text-center mb-8">Requirements Extractor</h1> | |
| <!-- Working Group Selection --> | |
| <div id="working-group-container" class="mb-6"> | |
| <label for="working-group-select" class="block text-sm font-medium text-gray-700 mb-2">Working Group</label> | |
| <select id="working-group-select" class="w-full p-2 border border-gray-300 rounded-md"> | |
| <option value="">Select a working group</option> | |
| <option value="SA1">SA1</option> | |
| <option value="SA2">SA2</option> | |
| <option value="SA3">SA3</option> | |
| <option value="SA4">SA4</option> | |
| <option value="SA5">SA5</option> | |
| <option value="SA6">SA6</option> | |
| <option value="CT1">CT1</option> | |
| <option value="CT2">CT2</option> | |
| <option value="CT3">CT3</option> | |
| <option value="CT4">CT4</option> | |
| <option value="CT5">CT5</option> | |
| <option value="CT6">CT6</option> | |
| </select> | |
| <button id="get-meetings-btn" class="mt-2 px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"> | |
| Get Meetings | |
| </button> | |
| </div> | |
| <!-- Meeting Selection --> | |
| <div id="meeting-container" class="mb-6 hidden"> | |
| <label for="meeting-select" class="block text-sm font-medium text-gray-700 mb-2">Meeting</label> | |
| <select id="meeting-select" class="w-full p-2 border border-gray-300 rounded-md"> | |
| <option value="">Select a meeting</option> | |
| </select> | |
| <button id="get-tdocs-btn" class="mt-2 px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600"> | |
| Get TDocs | |
| </button> | |
| </div> | |
| <!-- Filters --> | |
| <div id="filters-container" class="mb-6 hidden"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div> | |
| <label for="doc-type-filter" class="block text-sm font-medium text-gray-700 mb-2">Type</label> | |
| <select id="doc-type-filter" class="w-full p-2 border border-gray-300 rounded-md"> | |
| <option value="">Tous</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="doc-status-filter" class="block text-sm font-medium text-gray-700 mb-2">Status</label> | |
| <select id="doc-status-filter" class="w-full p-2 border border-gray-300 rounded-md"> | |
| <option value="">Tous</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="agenda-item-filter" class="block text-sm font-medium text-gray-700 mb-2">Agenda Item</label> | |
| <select id="agenda-item-filter" class="w-full p-2 border border-gray-300 rounded-md"> | |
| <option value="">Tous</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Action Buttons --> | |
| <div id="action-buttons-container" class="mb-6 hidden"> | |
| <div class="flex flex-wrap gap-2"> | |
| <button id="download-tdocs-btn" class="px-4 py-2 bg-purple-500 text-white rounded-md hover:bg-purple-600"> | |
| Download TDocs | |
| </button> | |
| <button id="extract-requirements-btn" class="px-4 py-2 bg-orange-500 text-white rounded-md hover:bg-orange-600"> | |
| Extract Requirements | |
| </button> | |
| <button id="find-requirements-btn" class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 hidden"> | |
| Find Requirements | |
| </button> | |
| <button id="categorize-requirements-btn" class="px-4 py-2 bg-yellow-500 text-white rounded-md hover:bg-yellow-600 hidden"> | |
| Categorize Requirements | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Data Table --> | |
| <div id="data-table-container" class="mb-6 hidden"> | |
| <table id="data-table" class="w-full bg-white rounded-lg shadow overflow-hidden"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-4 py-2 text-left"> | |
| <input type="checkbox" id="select-all-checkbox"> | |
| </th> | |
| <th class="px-4 py-2 text-left">TDoc</th> | |
| <th class="px-4 py-2 text-left">Title</th> | |
| <th class="px-4 py-2 text-left">Type</th> | |
| <th class="px-4 py-2 text-left">Status</th> | |
| <th class="px-4 py-2 text-left">Agenda Item</th> | |
| <th class="px-4 py-2 text-left">URL</th> | |
| </tr> | |
| </thead> | |
| <tbody></tbody> | |
| </table> | |
| </div> | |
| <!-- Requirements Container --> | |
| <div id="requirements-container" class="mb-6 hidden"> | |
| <h2 class="text-2xl font-bold mb-4">Requirements extracted</h2> | |
| <div id="requirements-list"></div> | |
| </div> | |
| <!-- Query Requirements --> | |
| <div id="query-requirements-container" class="mb-6 hidden"> | |
| <h2 class="text-2xl font-bold mb-4">Query requirements</h2> | |
| <div class="flex gap-2"> | |
| <input type="text" id="query-input" class="flex-1 p-2 border border-gray-300 rounded-md" placeholder="Enter your query..."> | |
| <button id="search-requirements-btn" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"> | |
| Search | |
| </button> | |
| </div> | |
| <div id="query-results" class="mt-4"></div> | |
| </div> | |
| <!-- Categorized Requirements Container --> | |
| <div id="categorized-requirements-container" class="mb-6 hidden"> | |
| <h2 class="text-2xl font-bold mb-4">Requirements categories list</h2> | |
| <div id="categorized-requirements-list"></div> | |
| </div> | |
| <!-- Solutions Action Buttons --> | |
| <div id="solutions-action-buttons-container" class="mb-6 hidden"> | |
| <div class="flex flex-wrap gap-2 justify-center"> | |
| <button id="get-solutions-btn" class="px-4 py-2 bg-indigo-500 text-white rounded-md hover:bg-indigo-600"> | |
| Get Solutions | |
| </button> | |
| <button id="get-solutions-step-btn" class="px-4 py-2 bg-pink-500 text-white rounded-md hover:bg-pink-600"> | |
| Get Solutions (Step-by-step) | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Solutions Container --> | |
| <div id="solutions-container" class="mb-6 hidden"> | |
| <h2 class="text-2xl font-bold mb-4">Solutions</h2> | |
| <div id="solutions-list"></div> | |
| </div> | |
| </div> | |
| <script src="/static/script.js"></script> | |
| </body> | |
| </html> | |