Spaces:
Sleeping
Sleeping
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Docxtract</title> | |
| <!--See JS imports for ESM modules--> | |
| <link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" /> | |
| <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> | |
| <script src=" https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js "></script> | |
| </head> | |
| <body class="bg-gray-100 min-h-screen"> | |
| <!-- Loading Overlay --> | |
| <div id="loading-overlay" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white p-6 rounded-lg shadow-lg text-center"> | |
| <span class="loading loading-spinner loading-xl"></span> | |
| <p id="progress-text" class="text-gray-700">Chargement en cours...</p> | |
| </div> | |
| </div> | |
| <div class="container mx-auto p-6"> | |
| <div class="relative flex justify-center items-center p-4"> | |
| <h1 class="text-3xl font-bold">Docxtract</h1> | |
| <button class="absolute right-4 btn btn-sm btn-circle btn-outline" id="settings-btn" | |
| onclick="settings_modal.showModal()" title="Settings">🔧</button> | |
| </div> | |
| <div id="selection-container" class="mb-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <!-- WG selection--> | |
| <div> | |
| <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="" selected>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> | |
| <option value="RAN1">RAN1</option> | |
| <option value="RAN2">RAN2</option> | |
| </select> | |
| </div> | |
| <!-- Meeting & Action Button Group --> | |
| <div> | |
| <label for="meeting-select" class="block text-sm font-medium text-gray-700 mb-2">Meeting</label> | |
| <div class="flex items-end gap-2"> | |
| <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="px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600 flex-shrink-0"> | |
| Get TDocs | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <hr> | |
| <!-- Tab list for subsections --> | |
| <div role="tablist" class="tabs tabs-border tabs-xl" id="tab-container"> | |
| <a role="tab" class="tab tab-active" id="doc-table-tab">📝 | |
| Documents</a> | |
| <a role="tab" class="tab tab-disabled" id="requirements-tab" title="List all requirements"> | |
| <div class="flex items-center gap-1"> | |
| <div class="badge badge-neutral badge-outline badge-xs" id="requirements-tab-badge">0</div> | |
| <span>Requirements</span> | |
| </div> | |
| </a> | |
| <a role="tab" class="tab tab-disabled" id="solutions-tab" | |
| title="Group requirements into categories and bootstrap a solution">🔨 Group and Bootstrap</a> | |
| <a role="tab" class="tab tab-disabled hidden" id="draft-tab">🖋 Draft and Assess</a> | |
| <a role="tab" class="tab tab-disabled" id="query-tab">🔎 Find relevant requirements</a> | |
| </div> | |
| <div id="doc-table-tab-contents" class="hidden"> | |
| <!-- Filters --> | |
| <div id="filters-container" class="mb-6 hidden pt-10"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <!-- Type Filter Dropdown --> | |
| <div class="dropdown dropdown-bottom dropdown-center w-full mb-4"> | |
| <div tabindex="0" role="button" class="btn w-full justify-between" id="doc-type-filter-btn"> | |
| <span id="doc-type-filter-label">Type</span> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2" fill="none" viewBox="0 0 24 24" | |
| stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" | |
| d="M19 9l-7 7-7-7" /> | |
| </svg> | |
| </div> | |
| <ul tabindex="0" | |
| class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-full min-w-[200px] max-h-60 overflow-y-auto" | |
| id="doc-type-filter-menu"> | |
| <!-- Rempli par JS --> | |
| </ul> | |
| </div> | |
| <!-- Status Filter Dropdown --> | |
| <div class="dropdown dropdown-bottom dropdown-center w-full mb-4"> | |
| <div tabindex="0" role="button" class="btn w-full justify-between" id="status-dropdown-btn"> | |
| <span id="status-filter-label">Status (Tous)</span> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2" fill="none" viewBox="0 0 24 24" | |
| stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" | |
| d="M19 9l-7 7-7-7" /> | |
| </svg> | |
| </div> | |
| <ul tabindex="0" | |
| class="dropdown-content z-[1] p-2 shadow bg-base-100 rounded-box w-full max-h-60 overflow-y-auto"> | |
| <li class="border-b pb-2 mb-2"> | |
| <label class="flex items-center gap-2 cursor-pointer"> | |
| <input type="checkbox" class="status-checkbox" value="all" checked> | |
| <span class="font-semibold">Tous</span> | |
| </label> | |
| </li> | |
| <div id="status-options" class="flex flex-col gap-1"></div> | |
| </ul> | |
| </div> | |
| <!-- Agenda Item Filter Dropdown --> | |
| <div class="dropdown dropdown-bottom dropdown-center w-full mb-4"> | |
| <div tabindex="0" role="button" class="btn w-full justify-between" id="agenda-dropdown-btn"> | |
| <span id="agenda-filter-label">Agenda Item (Tous)</span> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2" fill="none" viewBox="0 0 24 24" | |
| stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" | |
| d="M19 9l-7 7-7-7" /> | |
| </svg> | |
| </div> | |
| <ul tabindex="0" | |
| class="dropdown-content z-[1] p-2 shadow bg-base-100 rounded-box w-full max-h-60 overflow-y-auto"> | |
| <li class="border-b pb-2 mb-2"> | |
| <label class="flex items-center gap-2 cursor-pointer"> | |
| <input type="checkbox" class="agenda-checkbox" value="all" checked> | |
| <span class="font-semibold">Tous</span> | |
| </label> | |
| </li> | |
| <div id="agenda-options" class="flex flex-col gap-1"></div> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Data Table Informations --> | |
| <div class="flex justify-between items-center mb-2 pt-5" id="data-table-info-container"> | |
| <div class="flex gap-2 items-center"> | |
| <div class="tooltip" data-tip="Extract requirements from selected pCR / CR documents"> | |
| <button id="extract-requirements-btn" | |
| class="bg-orange-300 text-white text-sm rounded px-3 py-1 shadow hover:bg-orange-600">💉 | |
| Extract Requirements from CRs | |
| </button> | |
| </div> | |
| <div class="tooltip" data-tip="Download all selected docs as text files"> | |
| <button id="download-tdocs-btn" class="text-sm rounded px-3 py-1 shadow cursor-pointer"> | |
| 📦 Download Selected Docs | |
| </button> | |
| </div> | |
| </div> | |
| <!-- document counts --> | |
| <div class="flex gap-2 items-center"> | |
| <span id="displayed-count" class="text-sm text-gray-700 bg-white rounded px-3 py-1 shadow"> | |
| 0 total documents | |
| </span> | |
| <span id="selected-count" class="text-sm text-blue-700 bg-blue-50 rounded px-3 py-1 shadow"> | |
| 0 selected documents | |
| </span> | |
| </div> | |
| </div> | |
| <!-- TDoc table --> | |
| <div id="data-table-container" class="mb-6"> | |
| <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> | |
| </div> | |
| <!-- Requirement list tab--> | |
| <div id="requirements-tab-contents" class="hidden pt-10"> | |
| <div id="requirements-container" class="mb-6"> | |
| <div class="flex"> | |
| <h2 class="text-2xl font-bold mb-4">Extracted requirement list</h2> | |
| <div class="justify-end pl-5"> | |
| <div class="tooltip" data-tip="Copy ALL requirements to clipboard"> | |
| <button class="btn btn-square" id="copy-all-reqs-btn" aria-label="Copy"> | |
| 📋 | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="requirements-list"></div> | |
| </div> | |
| </div> | |
| <!-- Query Requirements --> | |
| <div id="query-tab-contents" class="hidden pt-10"> | |
| <div id="query-requirements-container" class="mb-6"> | |
| <h2 class="text-2xl font-bold mb-4">Find relevant requirements for a query</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> | |
| </div> | |
| <!-- Solution tab --> | |
| <div id="solutions-tab-contents" class="hidden pt-10"> | |
| <!--Header de catégorisation des requirements--> | |
| <div class="w-full mx-auto mt-4 p-4 bg-base-100 rounded-box shadow-lg border border-base-200"> | |
| <!-- Séléction du nb de catégories / mode auto--> | |
| <div class="flex flex-wrap justify-begin items-center gap-6"> | |
| <!-- Number input --> | |
| <div class="form-control flex flex-col items-center justify-center"> | |
| <label class="label" for="category-count"> | |
| <span class="label-text text-base-content"># Categories</span> | |
| </label> | |
| <input id="category-count" type="number" class="input input-bordered w-24" min="1" value="3" /> | |
| </div> | |
| <!-- Auto detect toggle --> | |
| <div class="form-control flex flex-col items-center justify-center"> | |
| <label class="label"> | |
| <span class="label-text text-base-content">Number of categories</span> | |
| </label> | |
| <input type="checkbox" class="toggle toggle-primary" id="auto-detect-toggle" checked="true" /> | |
| <div class="text-xs mt-1 text-base-content">Manual | Auto detect</div> | |
| </div> | |
| <!-- Action Button --> | |
| <button id="categorize-requirements-btn" class="btn btn-primary btn-l self-center"> | |
| Categorize | |
| </button> | |
| </div> | |
| </div> | |
| <div id="categorized-requirements-container pt-10" class="mb-6"> | |
| <div class="flex mb-4 pt-10"> | |
| <div class="justify-begin"> | |
| <h2 class="text-2xl font-bold">Requirements categories list</h2> | |
| </div> | |
| <div class="justify-end pl-5"> | |
| <!--Copy reqs button--> | |
| <div class="tooltip" data-tip="Copy selected requirements to clipboard"> | |
| <button class="btn btn-square" id="copy-reqs-btn" aria-label="Copy"> | |
| 📋 | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <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 items-center"> | |
| <div class="join"> | |
| <input id="solution-gen-nsteps" type="number" class="input join-item w-24" min="1" value="3" /> | |
| <button id="get-solutions-btn" | |
| class="btn join-item px-4 py-2 bg-indigo-500 text-white rounded-md hover:bg-indigo-600"> | |
| Run multiple steps | |
| </button> | |
| </div> | |
| <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 class="dropdown dropdown-center"> | |
| <div id="additional-gen-instr-btn" tabindex="0" role="button" class="btn m-1">🎨 Additional | |
| generation constraints</div> | |
| <div tabindex="0" class="dropdown-content card card-sm bg-base-100 z-1 w-256 shadow-md"> | |
| <div class="card-body"> | |
| <h3>Add additional constraints to follow when generating the solutions</h3> | |
| <textarea id="additional-gen-instr" | |
| class="textarea textarea-bordered w-full"></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Solutions Container --> | |
| <div id="solutions-container" class="mb-6"> | |
| <h2 class="text-2xl font-bold mb-4">Solutions</h2> | |
| <div id="solutions-list"></div> | |
| </div> | |
| </div> | |
| <div id="draft-tab-contents" class="mb-6 hidden"> | |
| <h2 class="text-2xl font-bold mt-4">Draft and assess solution</h2> | |
| <div id="draft-container" class="mt-4"> | |
| <div class="max-w-9xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Actual solution draft container --> | |
| <div class="lg:col-span-2 flex flex-col gap-6"> | |
| <div id="draft-assessment-container" class="flex-col gap-6"> | |
| <!-- card with the solution --> | |
| <div class="card bg-base-100 shadow-xl"> | |
| <div class="card-body"> | |
| <h2 class="card-title text-2xl mb-2 font-bold">Solution Draft</h2> | |
| <div id="solution-draft-display" class="space-y-2"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Assessment and Insights Card --> | |
| <div class="card bg-base-100 shadow-xl mt-4"> | |
| <div class="card-body"> | |
| <h2 class="text-xl font-bold">Assessment Result</h2> | |
| <div id="assessment-results" class="space-y-2"> | |
| <div> | |
| <p class="font-bold text-m">Patcom recommendation: </p> | |
| <p class="text-m font-bold" id="assessment-recommendation-status">?????</p> | |
| </div> | |
| <div> | |
| <p class="font-bold text-m">Quick summary:</p> | |
| <p class="text-m" id="assessment-recommendation-summary">A short resumé of | |
| the patcom | |
| sayings should go there.</p> | |
| </div> | |
| <button class="btn btn-ghost font-bold" id="read-assessment-button">Read whole | |
| assessment</button> | |
| </div> | |
| <div class="divider my-1"></div> | |
| <h3 class="text-lg font-bold mt-2">Actionable Insights</h3> | |
| <p class="text-sm text-base-content/70">Select insights below to guide the next | |
| refinement. | |
| </p> | |
| <div id="insights-container" class="form-control mt-4 space-y-2 break-words"> | |
| <!-- Checkboxes will be dynamically inserted here --> | |
| </div> | |
| <!-- User insights--> | |
| <div class="max-w space-y-2"> | |
| <p class="font-bold text-lg">User insights</p> | |
| <p class="text-m text-base-content/70">You can provide here additional guidance | |
| for selected refinement insights above, or provide a customized additional | |
| insight.</p> | |
| <textarea id="user-insight-text" class="textarea w-full" style="height: 197px;"> | |
| </textarea> | |
| </div> | |
| <div class="card-actions justify-end mt-6"> | |
| <button id="fto-analysis-btn" class="btn btn-warning">🔎 Perform FTO on | |
| draft</button> | |
| <button id="refine-btn" class="btn btn-primary">📝 Refine draft</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- draft timeline --> | |
| <div class="lg:col-span-1"> | |
| <div class="card bg-base-100 shadow-xl"> | |
| <div class="card-body"> | |
| <h2 class="card-title">Draft timeline</h2> | |
| <div class="flex justify-center p-4 mt-4"> | |
| <ul id="timeline-container" class="steps steps-vertical"> | |
| <li class="step">Enter initial solution draft</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="card-actions justify-center mt-6 mb-4"> | |
| <button id="export-timeline-btn" class="btn btn-primary">📦 Export Timeline</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!--full screen modal to read the full assessment--> | |
| <dialog id="read-assessment-modal" class="modal"> | |
| <div class="modal-box w-11/12 max-w-5xl"> | |
| <div class="modal-action"> | |
| <form method="dialog"> | |
| <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button> | |
| </form> | |
| </div> | |
| <div id="read-assessment-content"> | |
| <p>Nothing to read here</p> | |
| </div> | |
| </dialog> | |
| </div> | |
| <!--App settings modal container--> | |
| <dialog id="settings_modal" class="modal"> | |
| <div class="modal-box w-11/12 max-w-5xl"> | |
| <h2 class="text-xl font-bold">Application session settings</h3> | |
| <div class="modal-action"> | |
| <form method="dialog"> | |
| <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button> | |
| </form> | |
| </div> | |
| <!--LLM api settings--> | |
| <div class="space-y-4"> | |
| <div class="space-y-2"> | |
| <h2 class="text-lg font-bold">LLM API access settings</h2> | |
| <p class="font-s">Detail your LLM credentials under to draft and generate solutions using | |
| the | |
| provided private LLM served over a OpenAI-like API</p> | |
| <div class="space-y-4"> | |
| <div> | |
| <label for="provider-url" class="block mb-2 text-sm font-medium">LLM provider URL | |
| (without last leading /)</label> | |
| <input id="settings-provider-url" name="provider-url" | |
| class="input input-bordered w-full"> | |
| </div> | |
| <div> | |
| <label for="provider-token" class="block mb-2 text-sm font-medium">LLM provider | |
| token</label> | |
| <input id="settings-provider-token" name="provider-token" | |
| class="input input-bordered w-full" type="password"> | |
| </div> | |
| </div> | |
| </div> | |
| <!--LLM model selection for each task--> | |
| <div class="space-y-2"> | |
| <h3 class="text-m font-bold">Model selection</h3> | |
| <p class="font-s">Select the models to use for solution evaluation, refinement and | |
| summarization.</p> | |
| <button id="settings-fetch-models" class="btn btn-outline">Fetch models</button> | |
| <div> | |
| <label for="reasoning-model-selection" class="block mb-2 text-sm font-medium">Model for | |
| reasoning tasks (evaluation, assessment)</label> | |
| <select id="settings-reasoning-model" name="reasoning-model-selection" class="select"> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="fast-model-selection" class="block mb-2 text-sm font-medium">Model for fast, | |
| simple tasks (summarizing, structured output)</label> | |
| <select id="settings-fast-model" name="fast-model-selection" class="select"> | |
| </select> | |
| </div> | |
| </div> | |
| <!--Solution assessment settings--> | |
| <div class="space-y-2"> | |
| <h3 class="text-m font-bold">Solution assessment settings</h3> | |
| <div> | |
| <label for="assessment-rules" class="block mb-2 text-sm font-medium">Assessment | |
| rules</label> | |
| <textarea id="settings-assessment-rules" name="assessment-rules" | |
| class="textarea textarea-bordered w-full h-48" | |
| placeholder="Enter your rules here..."></textarea> | |
| </div> | |
| <div> | |
| <label for="portfolio-info" class="block mb-2 text-sm font-medium">Portfolio | |
| information</label> | |
| <textarea id="settings-portfolio" name="portfolio-info" | |
| class="textarea textarea-bordered w-full h-48" | |
| placeholder="Enter your portfolio info here..."></textarea> | |
| </div> | |
| </div> | |
| <div class="space-y-2"> | |
| <h2 class="text-m font-bold">FTO analysis</h2> | |
| <p class="text-s">Configure the max numbers of topics explored in the FTO analysis.</p> | |
| <div class="w-full max-w-xs"> | |
| <label for="settings-fto-topic-count">Number of topics to explore for FTO</label> | |
| <input id="settings-fto-topic-count" name="settings-fto-topic-count" type="range" | |
| min="1" max="10" value="4" class="range" step="1" /> | |
| <!--c moche mais ca marche--> | |
| <div class="flex justify-between px-2.5 mt-2 text-xs"> | |
| <span>|</span> | |
| <span></span> | |
| <span>|</span> | |
| <span></span> | |
| <span></span> | |
| <span>|</span> | |
| </div> | |
| <div class="flex justify-between px-2.5 mt-2 text-xs"> | |
| <span>1</span> | |
| <span></span> | |
| <span>5</span> | |
| <span></span> | |
| <span></span> | |
| <span>10</span> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="py-4">⚠ 'Save configuration' to keep the current configuration across sessions.</p> | |
| </div> | |
| <div class="mt-2 space-x-2"> | |
| <button class="btn btn-success" id="settings-save-btn">Save config</button> | |
| <button class="btn btn-error absolute right-5" id="settings-clear-btn">Clear saved | |
| configuration</button> | |
| </div> | |
| </div> | |
| </dialog> | |
| <script type="module" src="js/app.js"></script> | |
| </body> | |
| </html> |