Hugging Face's logo

Spaces:
OrganizedProgrammers
/
Docxtract
Running

App Files Community
1
Docxtract / static /index.html
Lucas ARRIESSE
Add ability to do free form conversion of user files
f282fc7
raw
history blame
34 kB
 <!DOCTYPE html>
<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-500 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">
<!--Extract xCR button-->
<div class="tooltip" data-tip="Extract requirements from selected pCR / CR documents">
<button id="extract-requirements-btn"
class="btn bg-orange-300 text-white text-sm rounded px-3 py-1 shadow hover:bg-orange-600">💉
Extract Requirements from CRs
</button>
</div>
<!--Download button-->
<div class="tooltip" data-tip="Download all selected docs as text files">
<div class="dropdown">
<div tabindex="0" role="button"
class="btn btn-primary text-sm rounded px-3 py-1 shadow cursor-pointer">
📦 Download </div>
<div class="dropdown-content card card-sm bg-base-100 z-1 w-64 shadow-md">
<div class="card-body space-y-2">
<label class="label">
<input class="checkbox checkbox-primary" name="download-sorted-files"
type="checkbox" id="download-sorted-files">
<p class="text-m">Sort files by agenda</p>
</label>
<button id="download-tdocs-btn"
class="btn text-sm rounded px-3 py-1 shadow cursor-pointer">
📦 Download docs
</button>
</div>
</div>
</div>
</div>
<!--Free form convert zone-->
<div class="tooltip" data-tip="Convert user uploaded files to text">
<div class="dropdown">
<div tabindex="0" role="button"
class="btn btn-secondary text-sm rounded px-3 py-1 shadow cursor-pointer">
⚗ Freeform convert </div>
<div class="dropdown-content card card-sm bg-base-100 z-1 w-128 shadow-md">
<div class="card-body space-y-2">
<fieldset class="fieldset">
<legend class="fieldset-legend">Select files to convert to text</legend>
<input id="freeform-convert-files" type="file" class="file-input" multiple />
</fieldset>
<button id="freeform-convert-btn"
class="btn text-sm rounded px-3 py-1 shadow cursor-pointer">
📦 Download converted docs
</button>
</div>
</div>
</div>
</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">
<div class="flex flex-wrap">
<!-- First Group: Aligned to the start (left) -->
<div class="flex items-center gap-6">
<!-- Number input -->
<div class="form-control flex flex-col items-center justify-center">
<div class="tooltip" data-tip="Number of categories for sorting requirements">
<label class="label" for="category-count">
<span class="label-text text-base-content"># Categories</span>
</label>
</div>
<input id="category-count" type="number" class="input input-bordered w-24" min="1" value="3"
disabled="">
</div>
<!-- Auto detect toggle -->
<div class="form-control flex flex-col items-center justify-center">
<div class="tooltip"
data-tip="Whether to use the user provided value for sorting or determine automatically the number of categories">
<label class="label">
<span class="label-text text-base-content">Number of categories</span>
</label>
</div>
<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 -->
<div class="tooltip" data-tip="Categorize the selected requirements">
<button id="categorize-requirements-btn" class="btn btn-primary btn-l self-center">
Categorize
</button>
</div>
</div>
<!-- Second Group: Pushed to the end (right) -->
<div class="flex items-center gap-6 ml-auto"> <!-- Added ml-auto here -->
<div class="form-control flex flex-col items-center justify-center">
<div class="tooltip"
data-tip="Disable the sorting checks. Use if models fails repeatedly at sorting requirements">
<label class="label">
<span class="label-text text-base-content">Disable sort checks</span>
</label>
</div>
<input type="checkbox" class="toggle toggle-error" id="disable-sort-checks">
<div class="text-xs mt-1 text-base-content">Checks on | Checks off</div>
</div>
</div>
</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>
<p class="text-gray-700">Indicate here a set of rules to use for assessing the ideas.
The rules should use a point-based notation.</p>
<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>