WIP solution drafting

README.md

@@ -10,3 +10,11 @@ short_description: Requirements Extractor
 ---
 
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+
+## Used libraries
+
+**Check requirements.txt for server-side libraries**
+
+**Client side libraries**
+- `markedjs` : For rendering markdown content.
+- `zod` : For clientside schema validation. 

api/requirements.py

@@ -1,3 +1,4 @@
+import logging
 from fastapi import APIRouter, Depends, HTTPException
 from jinja2 import Environment
 from litellm.router import Router
@@ -22,12 +23,12 @@ def find_requirements_from_problem_description(req: ReqSearchRequest, llm_router
         messages=[{"role": "user", "content": f"Given all the requirements : \n {requirements_text} \n and the problem description \"{query}\", return a list of 'Selection ID' for the most relevant corresponding requirements that reference or best cover the problem. If none of the requirements covers the problem, simply return an empty list"}],
         response_format=ReqSearchLLMResponse
     )
-    print("Answered")
-    print(resp_ai.choices[0].message.content)
 
     out_llm = ReqSearchLLMResponse.model_validate_json(
         resp_ai.choices[0].message.content).selected
 
+    logging.info(f"Found {len(out_llm)} reqs matching case.")
+
     if max(out_llm) > len(requirements) - 1:
         raise HTTPException(
             status_code=500, detail="LLM error : Generated a wrong index, please try again.")

api/solutions.py

@@ -1,13 +1,13 @@
 import asyncio
 import json
 import logging
-from fastapi import APIRouter, Depends, HTTPException
+from fastapi import APIRouter, Depends, HTTPException, Response
 from httpx import AsyncClient
-from jinja2 import Environment
+from jinja2 import Environment, TemplateNotFound
 from litellm.router import Router
 from dependencies import INSIGHT_FINDER_BASE_URL, get_http_client, get_llm_router, get_prompt_templates
 from typing import Awaitable, Callable, TypeVar
-from schemas import _RefinedSolutionModel,  _BootstrappedSolutionModel, _SolutionCriticismOutput, CriticizeSolutionsRequest, CritiqueResponse, InsightFinderConstraintsList, ReqGroupingCategory, ReqGroupingRequest, ReqGroupingResponse, ReqSearchLLMResponse, ReqSearchRequest, ReqSearchResponse, SolutionCriticism, SolutionModel, SolutionBootstrapResponse, SolutionBootstrapRequest, TechnologyData
+from schemas import _RefinedSolutionModel,  _BootstrappedSolutionModel, _SolutionCriticismOutput, CriticizeSolutionsRequest, CritiqueResponse, InsightFinderConstraintsList, PriorArtSearchRequest, PriorArtSearchResponse, ReqGroupingCategory, ReqGroupingRequest, ReqGroupingResponse, ReqSearchLLMResponse, ReqSearchRequest, ReqSearchResponse, SolutionCriticism, SolutionModel, SolutionBootstrapResponse, SolutionBootstrapRequest, TechnologyData
 
 # Router for solution generation and critique
 router = APIRouter(tags=["solution generation and critique"])
@@ -67,7 +67,7 @@ async def bootstrap_solutions(req: SolutionBootstrapRequest, prompt_env: Environ
 
         format_solution = await llm_router.acompletion("gemini-v2", messages=[{
             "role": "user",
-            "content": await prompt_env.get_template("synthesize_solution.txt").render_async(**{
+            "content": await prompt_env.get_template("bootstrap_solution.txt").render_async(**{
                 "category": cat.model_dump(),
                 "technologies": technologies.model_dump()["technologies"],
                 "user_constraints": req.user_constraints,
@@ -155,3 +155,40 @@ async def refine_solutions(params: CritiqueResponse, prompt_env: Environment = D
     refined_solutions = await asyncio.gather(*[__refine_solution(crit) for crit in params.critiques], return_exceptions=False)
 
     return SolutionBootstrapResponse(solutions=refined_solutions)
+
+
+@router.post("/search_prior_art")
+async def search_prior_art(req: PriorArtSearchRequest, prompt_env: Environment = Depends(get_prompt_templates), llm_router: Router = Depends(get_llm_router)) -> PriorArtSearchResponse:
+    """Performs a comprehensive prior art search / FTO search against the provided topics for a drafted solution"""
+
+    sema = asyncio.Semaphore(4)
+
+    async def __search_topic(topic: str) -> str:
+        search_prompt = await prompt_env.get_template("search/search_topic.txt").render_async(**{
+            "topic": topic
+        })
+
+        try:
+            await sema.acquire()
+
+            search_completion = await llm_router.acompletion(model="gemini-v2", messages=[
+                {"role": "user", "content": search_prompt}
+            ], temperature=0.3, tools=[{"googleSearch": {}}])
+
+            return {"topic": topic, "content": search_completion.choices[0].message.content}
+        finally:
+            sema.release()
+
+    # Dispatch the individual tasks for topic search
+    topics = await asyncio.gather(*[__search_topic(top) for top in req.topics], return_exceptions=False)
+
+    consolidation_prompt = await prompt_env.get_template("search/build_final_report.txt").render_async(**{
+        "searches": topics
+    })
+
+    # Then consolidate everything into a single detailed topic
+    consolidation_completion = await llm_router.acompletion(model="gemini-v2", messages=[
+        {"role": "user", "content": consolidation_prompt}
+    ], temperature=0.5)
+
+    return PriorArtSearchResponse(content=consolidation_completion.choices[0].message.content, references=[])

app.py

@@ -2,13 +2,14 @@ import asyncio
 import logging
 from dotenv import load_dotenv
 from typing import Literal
+from jinja2 import Environment, TemplateNotFound
 import nltk
 import warnings
 import os
-from fastapi import Depends, FastAPI, BackgroundTasks, HTTPException, Request
+from fastapi import Depends, FastAPI, BackgroundTasks, HTTPException, Request, Response
 from fastapi.staticfiles import StaticFiles
 import api.solutions
-from dependencies import get_llm_router, init_dependencies
+from dependencies import get_llm_router, get_prompt_templates, init_dependencies
 import api.docs
 import api.requirements
 from api.docs import docx_to_txt
@@ -40,9 +41,22 @@ app = FastAPI(title="Requirements Extractor", docs_url="/apidocs")
 app.add_middleware(CORSMiddleware, allow_credentials=True, allow_headers=[
                    "*"], allow_methods=["*"], allow_origins=["*"])
 
-# =======================================================================================================================================================================================
 
 app.include_router(api.docs.router, prefix="/docs")
 app.include_router(api.requirements.router, prefix="/requirements")
 app.include_router(api.solutions.router, prefix="/solutions")
+
+# INTERNAL ROUTE TO RETRIEVE PROMPT TEMPLATES FOR PRIVATE COMPUTE
+@app.get("/prompt/{task}", include_in_schema=True)
+async def retrieve_prompt(task: str, prompt_env: Environment = Depends(get_prompt_templates)):
+    """Retrieves a prompt for client-side private inference"""
+    try:
+        logging.info(f"Retrieving template for on device private task {task}.")
+        prompt, filename, _ = prompt_env.loader.get_source(
+            prompt_env,  f"private/{task}.txt")
+        return prompt
+    except TemplateNotFound as _:
+        return Response(content="", status_code=404)
+
+
 app.mount("/", StaticFiles(directory="static", html=True), name="static")

prompts/{synthesize_solution.txt → bootstrap_solution.txt}

@@ -26,7 +26,6 @@ Requirements:
 Here are the technologies you may use for the mechanisms that compose the solution:
 {% for tech in technologies -%}
 - {{tech["title"]}} : {{tech["purpose"]}}
-  * Key Components : {{tech["key_components"]}}
 {% endfor %}
 </available_technologies>
 

prompts/private/README

@@ -0,0 +1 @@
+Prompts for client-side inference (in `private/`) should only use basic variable templating.

prompts/private/assess.txt

@@ -0,0 +1,25 @@
+<role> You are a patent committee expert, critical and no sugarcoating. Your criteria of selection of an idea is whether the idea would more likely lead to a patentable solution that add value and can be monetized to/by your business.</role>
+<task> 
+ Analyze the patentability and added value of the proposed invention. Ensure that it ensures with your business line and patent portfolio.
+ Patentability criteria are originality, innovative process, detectable,non-obvious by a person of the art, surprising. 
+ Evaluate the patent using the following notation criterias while taking into account the business line and portfolio.
+ Finally end your analysis by stating whether the idea is a "NO-GO", "CONDITIONAL-GO", "IMMEDIATE-GO" and provide a list of actionnable insights to help refine substantially the idea to better align to the business line if need be.
+</task>
+
+<business>
+{{business}}
+</business>
+
+<notation_criterias>
+{{notation_criterias}}
+</notation_criterias>
+
+<idea>
+**The idea is as follows:**
+
+## Problem description
+{{problem_description}}
+
+## Solution description
+{{solution_description}}
+</idea>

prompts/private/extract.txt

@@ -0,0 +1,24 @@
+<role>You are an useful assistant great at summarizing and extracting insight from reports</role>
+<task>Extract from the report you're given the final verdict for the evaluated idea ("NO-GO", "CONDITIONAL-GO", "IMMEDIATE-GO"), summarize the global report feedback 
+and extract the actionnable insights.
+</task>
+
+<report>
+{{report}}
+</report>
+
+<response_format>
+Reply in JSON using the following schema:
+{{response_schema}}
+
+
+Here's an example response:
+{
+    "final_verdict": "NO-GO",
+    "summary": "<summary>",
+    "insights": [
+        "Develop the training part",
+        "Review the model architechture design"
+    ]
+}
+</response_format>

prompts/private/refine.txt

@@ -0,0 +1,24 @@
+<role>You are an expert system designer</role>
+<task>
+Your task is to refine an idea to account for the given insights. 
+</task>
+
+<idea>
+**The idea is as follows:**
+
+## Problem description
+{{problem_description}}
+
+## Solution description
+{{solution_description}}
+</idea>
+
+<insights>
+Here are the insights:
+{{insights}}
+</insights>
+
+<business>
+Here is some business info to help for refining based on the insights:
+{{business_info}}
+</business>

prompts/search/build_final_report.txt

@@ -0,0 +1,57 @@
+<role>You are a deep researcher agent which excels in prior art analysis for ideas</role>
+<task>
+Your task is to consolidate a list of searches done for multiple topics in a single report detailling the current prior art for a solution.
+- Present a high-level summary of the most relevant prior art identified, mentioning the general approaches and technologies.
+
+For each identified piece of prior art (patent or academic document):
+
+*   **Identification:**
+    *   **Type:** Patent / Academic Paper
+    *   **Identifier:** [Patent Number/Publication Number or Paper Title/DOI]
+    *   **Title:** [Title of Patent/Paper]
+    *   **Authors/Inventors:** [Names]
+    *   **Publication Date:** [Date]
+    *   **Assignee/Publisher:** [Company/Institution/Journal]
+    *   **Link/Source:** [URL or DOI if applicable]
+
+*   **Mechanism Description:**
+    *   Detail the core working principle and mechanism(s) described in the prior art.
+    *   Explain how it functions and the underlying scientific or engineering concepts.
+    *   [Specific instructions on detail level - e.g., "Describe at a conceptual level", "Include schematic representations if described", "Focus on the functional blocks"]
+
+*   **Key Features:**
+    *   List and describe the significant features of the mechanism.
+    *   Highlight unique aspects, advantages, and potential applications.
+    *   [Specific instructions on features to focus on - e.g., "Focus on efficiency metrics", "Describe material choices", "Mention any novel components"]
+
+*   **Advantages and Disadvantages/Limitations:**
+    *   Outline the benefits and drawbacks of the described mechanism.
+    *   Identify any limitations or potential challenges.
+
+*   **Relevance to topic:**
+    *   Clearly explain how this prior art relates to the given topic.
+    *   Quantify or qualify the degree of relevance if possible.
+
+- Comparison of Prior Art 
+
+*   If multiple similar prior arts are found, create a comparative analysis.
+*   Highlight similarities and differences in mechanisms, features, and performance.
+*   Consider presenting this in a table format.
+
+- Gaps and Opportunities
+
+*   Based on the analysis, identify areas where current prior art is lacking or could be improved.
+*   Suggest potential opportunities for innovation or further development in relation to topic.
+
+- Conclusion
+
+*   Summarize the key findings of the prior art search.
+*   Provide a concluding statement on the landscape of existing technologies related to topic.
+</task>
+
+<searches>
+{% for search in searches -%}
+### Topic: {{search['topic']}}
+{{search['content']}}
+{% endfor %}
+</searches>

prompts/search/search_topic.txt

@@ -0,0 +1,12 @@
+<role>You are a deep researcher agent which excels in prior art analysis for ideas</role>
+<task>
+Your task is to search prior art which will also serve for Freedom-to-Operate analysis on a following given topic. 
+Analyze patents and academic documents and detail the found mechanisms and their features.
+</task>
+
+<topic>
+**The topic is**
+{{topic}}
+
+Use keywords adapted and relevant to the context to perform your searches. 
+</topic>

schemas.py

@@ -1,5 +1,5 @@
 from pydantic import BaseModel, Field
-from typing import Any, List, Dict, Optional
+from typing import Any, List, Dict, Literal, Optional
 
 
 class MeetingsRequest(BaseModel):
@@ -90,7 +90,7 @@ class SolutionModel(BaseModel):
                                       description="Detailed description of the solution.")
     references: list[dict] = Field(
         ..., description="References to documents used for the solution.")
-    
+
     category_id: int = Field(
         ..., description="ID of the requirements category the solution is based on")
 
@@ -126,6 +126,30 @@ class _ReqGroupingOutput(BaseModel):
 
 
 # =================================================================== bootstrap solution response
+# Helpers for integration with insights finder.
+
+class InsightFinderConstraintItem(BaseModel):
+    title: str
+    description: str
+
+
+class InsightFinderConstraintsList(BaseModel):
+    constraints: list[InsightFinderConstraintItem]
+
+#TODO: aller voir la doc, breakage API
+class Technology(BaseModel):
+    """Represents a single technology entry with its details."""
+    title: str = Field(..., alias="name")
+    purpose: str
+    advantages: str
+    limitations: str
+
+
+
+class TechnologyData(BaseModel):
+    """Represents the top-level object containing a list of technologies."""
+    technologies: List[Technology]
+
 
 class _SolutionBootstrapOutput(BaseModel):
     solution: SolutionModel
@@ -183,39 +207,22 @@ class CritiqueResponse(BaseModel):
 # ==========================================================================
 
 class _RefinedSolutionModel(BaseModel):
-    """Internal model used for solution refining"""
+    """Internal model used for bootstrapped solution refining"""
 
     problem_description: str = Field(...,
                                      description="New description of the problem being solved.")
     solution_description: str = Field(...,
                                       description="New detailed description of the solution.")
 
+# ===========================================================================
 
-# ================================================================= search solutions using insight finder endpoints
+class PriorArtSearchRequest(BaseModel):
+    topics: list[str] = Field(
+        ..., description="The list of topics to search for to create an exhaustive prior art search for a problem draft.")
+    mode: Literal['prior_art', 'fto'] = Field(default="fto", description="")
 
-# Helpers to extract constraints for Insights Finder
 
-class InsightFinderConstraintItem(BaseModel):
-    title: str
-    description: str
-
-
-class InsightFinderConstraintsList(BaseModel):
-    constraints: list[InsightFinderConstraintItem]
-
-# =================================================
-
-
-class Technology(BaseModel):
-    """Represents a single technology entry with its details."""
-    title: str
-    purpose: str
-    key_components: str
-    advantages: str
-    limitations: str
-    id: int
-
-
-class TechnologyData(BaseModel):
-    """Represents the top-level object containing a list of technologies."""
-    technologies: List[Technology]
+class PriorArtSearchResponse(BaseModel):
+    content: str
+    references: list[dict]
+    pass

static/index.html

@@ -5,9 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Requirements Extractor</title>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/16.0.0/lib/marked.umd.min.js"
-        integrity="sha512-ygzQGrI/8Bfkm9ToUkBEuSMrapUZcHUys05feZh4ScVrKCYEXJsCBYNeVWZ0ghpH+n3Sl7OYlRZ/1ko01pYUCQ=="
-        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <!--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>
 </head>
@@ -75,16 +73,16 @@
         <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">
+            <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">Group and
-                Solve</a>
-            <a role="tab" class="tab tab-disabled" id="query-tab">🔎 Find relevant
-                requirements</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">
@@ -323,20 +321,100 @@
             </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" id="assessment-recommendation-status">NO-GO</p>
+                                        </div>
+                                        <div>
+                                            <p class="font-bold text-m">Quick summary:</p>
+                                            <p id="assessment-recommendation-summary">A short resumé of the patcom sayings should go there.</p>
+                                        </div>
+                                        <button class="btn btn-info" 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">
+                                        <!-- Checkboxes will be dynamically inserted here -->
+                                    </div>
+                                    <div class="card-actions justify-end mt-6">
+                                        <button id="refine-btn" class="btn btn-primary">Refine with Selected
+                                            Insights</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>
+                    </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">
-                <h3 class="text-lg font-bold">Reqxtract settings</h3>
-                <p class="py-4">Enter your LLM provider URL and key to enable using private solution assessment and
-                    refining</p>
+                <h3 class="text-lg font-bold">Application 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>
                 <h2 class="text-lg font-bold">Private generation settings</h2>
-                <form class="space-y-4">
+                <p class="py-4">Detail your private LLM credentials under to draft and generate solution using private LLM</p>
+                <div class="space-y-4">
                     <div>
                         <label for="provider-url" class="block mb-2 text-sm font-medium">LLM provider URL</label>
                         <input id="settings-provider-url" name="provider-url" class="input input-bordered w-full">
@@ -348,6 +426,13 @@
                             type="password">
                     </div>
 
+                    <div>
+                        <label for="provider-model" class="block mb-2 text-sm font-medium">Model</label>
+                        <button id="settings-fetch-models" class="btn btn-outline">Fetch models</button>
+                        <select id="settings-provider-model" name="provider-model" class="select">
+                        </select>
+                    </div>
+
                     <div>
                         <label for="assessment-rules" class="block mb-2 text-sm font-medium">Assessment rules</label>
                         <textarea id="settings-assessment-rules" name="assessment-rules"
@@ -361,15 +446,13 @@
                             class="textarea textarea-bordered w-full h-48"
                             placeholder="Enter your portfolio info here..."></textarea>
                     </div>
-                </form>
+                </div>
                 <div class="flex">
                     <button class="btn btn-success" id="test-btn">Save config</button>
                 </div>
             </div>
         </dialog>
 
-        <script type="module" src="js/sse.js"></script>
-        <script type="module" src="js/ui-utils.js"></script>
         <script type="module" src="js/app.js"></script>
 </body>
 

static/js/app.js

@@ -1,9 +1,9 @@
 
 import {
     toggleElementsEnabled, toggleContainersVisibility, showLoadingOverlay, hideLoadingOverlay, populateSelect,
-    populateCheckboxDropdown, updateCheckboxDropdownLabel, updateSelectedFilters, populateDaisyDropdown, updateFilterLabel,
-    extractTableData, switchTab, enableTabSwitching, debounceAutoCategoryCount,
-    bindTabs, checkCanUsePrivateGen
+    populateCheckboxDropdown, populateDaisyDropdown, extractTableData, switchTab, enableTabSwitching, debounceAutoCategoryCount,
+    bindTabs, checkPrivateLLMInfoAvailable, moveSolutionToDrafts, buildSolutionSubCategories, handleDraftRefine, renderDraftUI, populateLLMModelSelect,
+    displayFullAssessment
 } from "./ui-utils.js";
 import { postWithSSE } from "./sse.js";
 
@@ -15,15 +15,18 @@ let selectedType = ""; // "" = Tous
 let selectedStatus = new Set(); // valeurs cochées (hors "Tous")
 let selectedAgenda = new Set();
 
-// Generation de solutions
-let accordionStates = {};
+// Requirements
 let formattedRequirements = [];
 let categorizedRequirements = [];
+// les requirements ont ils été extraits au moins une fois ?
+let hasRequirementsExtracted = false;
+
+// Generation de solutions
+let solutionAccordionStates = {};
 let solutionsCriticizedVersions = [];
 // checksum pour vérifier si les requirements séléctionnés ont changé
 let lastSelectedRequirementsChecksum = null;
-// les requirements ont ils été extraits au moins une fois ?
-let hasRequirementsExtracted = false;
+
 
 // =============================================================================
 // FONCTIONS MÉTIER
@@ -428,7 +431,7 @@ async function categorizeRequirements(max_categories) {
         const data = await response.json();
         categorizedRequirements = data;
         displayCategorizedRequirements(categorizedRequirements.categories);
-        clearAllSolutions();
+        clearAllBootstrapSolutions();
 
         // Masquer le container de query et afficher les catégories et boutons solutions
         // toggleContainersVisibility(['query-requirements-container'], false);
@@ -586,7 +589,6 @@ function copySelectedRequirementsAsMarkdown() {
     const markdownText = lines.join('\n');
 
     navigator.clipboard.writeText(markdownText).then(() => {
-        console.log("Markdown copied to clipboard.");
         alert("Selected requirements copied to clipboard");
     }).catch(err => {
         console.error("Failed to copy markdown:", err);
@@ -718,6 +720,8 @@ function displaySearchResults(results) {
     container.appendChild(resultsDiv);
 }
 
+// =========================================== Solution bootstrapping ==============================================
+
 function createSolutionAccordion(solutionCriticizedHistory, containerId, versionIndex = 0, categoryIndex = null) {
     const container = document.getElementById(containerId);
     if (!container) {
@@ -809,66 +813,30 @@ function createSingleAccordionItem(item, index, versionIndex, solutionCriticized
     content.className = `accordion-content px-4 py-3 space-y-3`;
     content.id = `content-${solution['category_id']}`;
 
+    // enable solution drafting if private LLM info is present to enable solution private drafting
+    if (checkPrivateLLMInfoAvailable()) {
+        // Boutons pour passer la solution en draft
+        const body_btn_div = document.createElement('div');
+        body_btn_div.className = "flex justify-end";
+
+        const draft_btn = document.createElement('button');
+        draft_btn.className = "btn btn-secondary rounded-full";
+        draft_btn.innerText = "✏ Draft solution"
+        body_btn_div.appendChild(draft_btn);
+        content.appendChild(body_btn_div);
+
+        draft_btn.addEventListener('click', _ => {
+            // alert(`Drafting solution ${solution['category_id']} ${versionIndex}`)
+            moveSolutionToDrafts(solution);
+        });
+    }
+
     // Vérifier l'état d'ouverture précédent
-    const isOpen = accordionStates[solution['category_id']] || false;
+    const isOpen = solutionAccordionStates[solution['category_id']] || false;
     console.log(isOpen);
     if (!isOpen)
         content.classList.add('hidden');
 
-    // Section Problem Description
-    const problemSection = document.createElement('div');
-    problemSection.className = 'bg-red-50 border-l-2 border-red-400 p-3 rounded-r-md';
-    problemSection.innerHTML = `
-        <h4 class="text-sm font-semibold text-red-800 mb-2 flex items-center">
-            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
-                <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
-            </svg>
-            Problem Description
-        </h4>
-        <p class="text-xs text-gray-700 leading-relaxed">${solution["problem_description"] || 'Aucune description du problème disponible.'}</p>
-    `;
-
-    // Section Problem requirements
-    const reqsSection = document.createElement('div');
-    reqsSection.className = "bg-gray-50 border-l-2 border-red-400 p-3 rounded-r-md";
-    const reqItemsUl = solution["requirements"].map(req => `<li>${req}</li>`).join('');
-    reqsSection.innerHTML = `
-        <h4 class="text-sm font-semibold text-gray-800 mb-2 flex items-center">
-            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
-                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
-            </svg>
-            Addressed requirements
-        </h4>
-        <ul class="list-disc pl-5 space-y-1 text-gray-700 text-xs">
-            ${reqItemsUl}
-        </ul>
-    `
-
-    // Section Solution Description
-    const solutionSection = document.createElement('div');
-    solutionSection.className = 'bg-green-50 border-l-2 border-green-400 p-3 rounded-r-md';
-    solutionSection.innerHTML = `
-        <h4 class="text-sm font-semibold text-green-800 mb-2 flex items-center">
-            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
-                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
-            </svg>
-            Solution Description
-        </h4>
-    `;
-
-    // container for markdown content
-    const solContents = document.createElement('div');
-    solContents.className = "text-xs text-gray-700 leading-relaxed";
-    solutionSection.appendChild(solContents);
-
-    try {
-        solContents.innerHTML = marked.parse(solution['solution_description']);
-    }
-    catch (e) {
-        solContents.innerHTML = `<p class="text-xs text-gray-700 leading-relaxed">${solution['solution_description'] || 'No available solution description'}</p>`;
-    }
-
-
     // Section Critique
     const critiqueSection = document.createElement('div');
     critiqueSection.className = 'bg-yellow-50 border-l-2 border-yellow-400 p-3 rounded-r-md';
@@ -918,65 +886,12 @@ function createSingleAccordionItem(item, index, versionIndex, solutionCriticized
 
     critiqueSection.innerHTML = critiqueContent;
 
-    // ===================================== Section sources ================================
-
-    const createEl = (tag, properties) => {
-        const element = document.createElement(tag);
-        Object.assign(element, properties);
-        return element;
-    };
-
-    // conteneur des sources
-    const sourcesSection = createEl('div', {
-        className: 'bg-gray-50 border-l-2 border-gray-400 p-3 rounded-r-md'
-    });
-
-    const heading = createEl('h4', {
-        className: 'text-sm font-semibold text-black mb-2 flex items-center',
-        innerHTML: `
-        <svg 
-            xmlns="http://www.w3.org/2000/svg" 
-            class="w-4 h-4 mr-1" 
-            fill="none" 
-            viewBox="0 0 24 24" 
-            stroke="currentColor" 
-            stroke-width="2">
-                <path 
-                    stroke-linecap="round" 
-                    stroke-linejoin="round" 
-                    d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" 
-                />
-        </svg>
-        Sources
-    `
-    });
-
-    const pillContainer = createEl('div', {
-        className: 'flex flex-wrap mt-1'
-    });
-
-    // create source reference pills
-    solution['references'].forEach(source => {
-        const pillLink = createEl('a', {
-            href: source.url,
-            target: '_blank',
-            rel: 'noopener noreferrer',
-            className: 'inline-block bg-gray-100 text-black text-xs font-medium mr-2 mb-2 px-3 py-1 rounded-full hover:bg-gray-400 transition-colors',
-            textContent: source.name
-        });
-        pillContainer.appendChild(pillLink);
-    });
-
-    sourcesSection.append(heading, pillContainer);
-
     // ======================================================================================
 
-    // Ajouter les sections au contenu
-    content.appendChild(problemSection);
-    content.appendChild(reqsSection);
-    content.appendChild(solutionSection);
+    for (let item of buildSolutionSubCategories(solution))
+        content.appendChild(item);
+
     content.appendChild(critiqueSection);
-    content.appendChild(sourcesSection);
 
     // Événement de clic pour l'accordéon (exclure les boutons de navigation)
     header.addEventListener('click', (e) => {
@@ -987,7 +902,7 @@ function createSingleAccordionItem(item, index, versionIndex, solutionCriticized
 
         // handling open state
         const isCurrentlyOpen = !content.classList.contains('hidden');
-        accordionStates[solution['Category_Id']] = isCurrentlyOpen;
+        solutionAccordionStates[solution['category_id']] = isCurrentlyOpen;
         if (isCurrentlyOpen)
             content.classList.add('hidden');
         else
@@ -1036,20 +951,20 @@ function updateSingleAccordion(solutionCriticizedHistory, containerId, newVersio
 // Fonction d'initialisation simplifiée
 function initializeSolutionAccordion(solutionCriticizedHistory, containerId, startVersion = 0) {
     // Réinitialiser les états d'accordéon
-    accordionStates = {};
+    solutionAccordionStates = {};
     createSolutionAccordion(solutionCriticizedHistory, containerId, startVersion);
     document.getElementById(containerId).classList.remove('hidden')
 }
 
 // Supprime toutes les accordéons de solutions générées
 //FIXME: À terme, ne devrait pas exister
-function clearAllSolutions() {
-    accordionStates = {}
+function clearAllBootstrapSolutions() {
+    solutionAccordionStates = {}
     solutionsCriticizedVersions = []
     document.querySelectorAll('.solution-accordion').forEach(a => a.remove());
 }
 
-async function generateSolutions(selected_categories, user_constraints = null) {
+async function generateBootstrapSolutions(selected_categories, user_constraints = null) {
     console.log(selected_categories);
 
     let input_req = structuredClone(selected_categories);
@@ -1060,21 +975,21 @@ async function generateSolutions(selected_categories, user_constraints = null) {
     return responseObj;
 }
 
-async function generateCriticisms(solutions) {
+async function generateBootstrapCriticisms(solutions) {
     let response = await fetch('/solutions/criticize_solution', { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(solutions) })
     let responseObj = await response.json()
     solutionsCriticizedVersions.push(responseObj)
 }
 
-async function refineSolutions(critiques) {
+async function refineBootstrapSolutions(critiques) {
     let response = await fetch('/solutions/refine_solutions', { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(critiques) })
     let responseObj = await response.json()
-    await generateCriticisms(responseObj)
+    await generateBootstrapCriticisms(responseObj)
 }
 
-async function workflow(steps = 1) {
+async function boostrapWorkflow(steps = 1) {
     let soluce;
-    showLoadingOverlay('Génération des solutions & critiques ....');
+    showLoadingOverlay('Boostrapping solutions ....');
 
     const selected_requirements = getSelectedRequirementsByCategory();
     const user_constraints = document.getElementById('additional-gen-instr').value;
@@ -1086,17 +1001,17 @@ async function workflow(steps = 1) {
 
     for (let step = 1; step <= steps; step++) {
         if (requirements_changed) {
-            clearAllSolutions();
+            clearAllBootstrapSolutions();
             console.log("Requirements checksum changed. Cleaning up");
             lastSelectedRequirementsChecksum = selected_requirements.requirements_checksum;
         }
 
         if (solutionsCriticizedVersions.length == 0) {
-            soluce = await generateSolutions(selected_requirements, user_constraints ? user_constraints : null);
-            await generateCriticisms(soluce)
+            soluce = await generateBootstrapSolutions(selected_requirements, user_constraints ? user_constraints : null);
+            await generateBootstrapCriticisms(soluce)
         } else {
             let prevSoluce = solutionsCriticizedVersions[solutionsCriticizedVersions.length - 1];
-            await refineSolutions(prevSoluce)
+            await refineBootstrapSolutions(prevSoluce)
         }
     }
     hideLoadingOverlay();
@@ -1108,12 +1023,14 @@ async function workflow(steps = 1) {
 // =============================================================================
 
 document.addEventListener('DOMContentLoaded', function () {
+    // Bind tous les tabs
     bindTabs();
+
     // Événements des boutons principaux
-    // document.getElementById('get-meetings-btn').addEventListener('click', getMeetings);
     document.getElementById('working-group-select').addEventListener('change', (ev) => {
         getMeetings();
     });
+
     document.getElementById('get-tdocs-btn').addEventListener('click', getTDocs);
     document.getElementById('download-tdocs-btn').addEventListener('click', downloadTDocs);
     document.getElementById('extract-requirements-btn').addEventListener('click', extractRequirements);
@@ -1126,14 +1043,20 @@ document.addEventListener('DOMContentLoaded', function () {
     // Événement pour la recherche
     document.getElementById('search-requirements-btn').addEventListener('click', searchRequirements);
 
-    // Événements pour les boutons de solutions (à implémenter plus tard)
+    // Événements pour les boutons de solutions bootstrappées
     document.getElementById('get-solutions-btn').addEventListener('click', () => {
         const n_steps = document.getElementById('solution-gen-nsteps').value;
-        workflow(n_steps);
+        boostrapWorkflow(n_steps);
     });
     document.getElementById('get-solutions-step-btn').addEventListener('click', () => {
-        workflow(1);
+        boostrapWorkflow(1);
     });
+
+    // Events des boutons pour le drafting de solutions
+    const refineBtn = document.getElementById('refine-btn');
+    refineBtn.addEventListener('click', handleDraftRefine);
+
+    renderDraftUI();
 });
 
 // dseactiver le choix du nb de catégories lorsqu'en mode auto
@@ -1145,12 +1068,23 @@ document.getElementById("additional-gen-instr-btn").addEventListener('click', (e
     document.getElementById('additional-gen-instr').focus()
 })
 
+// copy requirements
 document.getElementById('copy-reqs-btn').addEventListener('click', (ev) => {
     copySelectedRequirementsAsMarkdown();
 });
 
+// copy all requirements 
 document.getElementById('copy-all-reqs-btn').addEventListener('click', copyAllRequirementsAsMarkdown);
 
-document.getElementById('test-btn').addEventListener('click', _ => {
-    console.log(checkCanUsePrivateGen());
+// button to fetch llm models
+document.getElementById('settings-fetch-models').addEventListener('click', _ => {
+    const url = document.getElementById('settings-provider-url').value;
+    const token = document.getElementById('settings-provider-token').value;
+
+    populateLLMModelSelect('settings-provider-model', url, token).catch(e => alert("Error while fetching models: " + e))
+});
+
+// button to open full assessment modal 
+document.getElementById('read-assessment-button').addEventListener('click', _ => {
+    displayFullAssessment();
 });

static/js/gen.js

@@ -0,0 +1,239 @@
+import zod from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm'
+
+/**
+ * Met en forme le prompt template passé en paramètres avec les arguments
+ * @param {String} template 
+ * @param {Object} args 
+ */
+export function formatTemplate(template, args) {
+    return template.replace(/\{\{(\w+)\}\}/g, (_, key) => {
+        // 'match' est la correspondance complète (ex: "{nom}")
+        // 'key' est le contenu du premier groupe capturé (ex: "nom")
+
+        if (key in args)
+            return args[key];
+
+        // Si la clé n'est pas trouvée dans args, on laisse le placeholder tel quel.
+        return "";
+    });
+}
+
+/**
+ * Recupère le prompt pour la tâche spécifiée.
+ * @param {String} task 
+ */
+export async function retrieveTemplate(task) {
+    const req = await fetch(`/prompt/${task}`)
+    return await req.text();
+}
+
+/**
+ * Lance un deep search sur le serveur pour les topics donnés.
+ * @param {Array} topics 
+ */
+async function performDeepSearch(topics) {
+    const response = await fetch('/solutions/search_prior_art', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ topics: topics })
+    });
+    const results = await response.json();
+}
+
+/**
+ * Genère une completion avec le LLM specifié
+ * @param {String} providerUrl - URL du provider du LLM
+ * @param {String} modelName - Nom du modèle à appeler
+ * @param {String} apiKey - API key a utiliser
+ * @param {Array<{role: string, content: string}>} messages - Liste de messages à passer au modèle
+ * @param {Number} temperature - Température à utiliser pour la génération
+ */
+export async function generateCompletion(providerUrl, modelName, apiKey, messages, temperature = 0.5) {
+    const genEndpoint = providerUrl + "/chat/completions"
+
+    try {
+        const response = await fetch(genEndpoint, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${apiKey}`, // OpenAI-like authorization header
+            },
+            body: JSON.stringify({
+                model: modelName,
+                messages: messages,
+                temperature: temperature,
+            }),
+        });
+
+        if (!response.ok) {
+            const errorData = await response.json();
+            throw new Error(`API request failed with status ${response.status}: ${errorData.error?.message || 'Unknown error'}`);
+        }
+
+        const data = await response.json();
+
+        if (data.choices && data.choices.length > 0 && data.choices[0].message && data.choices[0].message.content)
+            return data.choices[0].message.content;
+
+    } catch (error) {
+        console.error("Error calling private LLM :", error);
+        throw error;
+    }
+}
+
+/**
+ * Genère une completion avec le LLM specifié
+ * @param {String} providerUrl - URL du provider du LLM
+ * @param {String} modelName - Nom du modèle à appeler
+ * @param {String} apiKey - API key a utiliser
+ * @param {Array<{role: string, content: string}>} messages - Liste de messages à passer au modèle
+ * @param {Object} schema - Zod schema to use for structured generation
+ * @param {Number} temperature - Température à utiliser pour la génération
+ */
+export async function generateStructuredCompletion(providerUrl, modelName, apiKey, messages, schema, temperature = 0.5) {
+    const genEndpoint = providerUrl + "/chat/completions";
+    try {
+        const response = await fetch(genEndpoint, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${apiKey}`,
+            },
+            body: JSON.stringify({
+                model: modelName,
+                messages: messages,
+                temperature: temperature,
+                response_format: { type: "json_object" }
+            }),
+        });
+
+        if (!response.ok) {
+            const errorData = await response.json();
+            throw new Error(`API request failed with status ${response.status}: ${errorData.error?.message || 'Unknown error'}`);
+        }
+
+        const data = await response.json();
+
+        console.log(data.choices[0].message.content);
+
+        // parse json output
+        const parsedJSON = JSON.parse(data.choices[0].message.content.replace('```json', '').replace("```", ""));
+
+        // validate output with zod
+        const validatedSchema = schema.parse(parsedJSON);
+
+        return validatedSchema;
+    } catch (error) {
+        console.error("Error calling private LLM :", error);
+        throw error;
+    }
+}
+
+/**
+ * Retrieves a list of available models from an OpenAI-compatible API using fetch.
+ *
+ * @param {string} providerUrl The base URL of the OpenAI-compatible API endpoint (e.g., "http://localhost:8000/v1").
+ * @param {string} apiKey The API key for authentication.
+ * @returns {Promise<Array<string>>} A promise that resolves with an array of model names, or rejects with an error.
+ */
+export async function getModelList(providerUrl, apiKey) {
+    try {
+        // Construct the full URL for the models endpoint
+        const modelsUrl = `${providerUrl}/models`;
+
+        console.log(modelsUrl);
+
+        // Make a GET request to the models endpoint using fetch
+        const response = await fetch(modelsUrl, {
+            method: 'GET', // Explicitly state the method
+            headers: {
+                'Authorization': `Bearer ${apiKey}`, // OpenAI-compatible authorization header
+                'Content-Type': 'application/json',
+            },
+        });
+
+        // Check if the request was successful (status code 200-299)
+        if (!response.ok) {
+            // If the response is not OK, try to get more error details
+            const errorData = await response.json().catch(() => ({})); // Attempt to parse JSON error, fallback to empty object
+            throw new Error(`HTTP error! Status: ${response.status}, Message: ${errorData.message || response.statusText}`);
+        }
+
+        // Parse the JSON response body
+        const data = await response.json();
+
+        // The response data structure for OpenAI-compatible APIs usually contains a 'data' array
+        // where each item represents a model and has an 'id' property.
+        if (data && Array.isArray(data.data)) {
+            const allModelNames = data.data.map(model => model.id);
+
+            // Filter out models containing "embedding" (case-insensitive)
+            const filteredModelNames = allModelNames.filter(modelName =>
+                !modelName.toLowerCase().includes('embedding')
+            );
+
+            return filteredModelNames;
+        } else {
+            // Handle cases where the response format is unexpected
+            throw new Error('Unexpected response format from the API. Could not find model list.');
+        }
+
+    } catch (error) {
+        console.error('Error fetching model list:', error.message);
+        // Re-throw the error to allow the caller to handle it
+        throw error;
+    }
+}
+
+// # ========================================================================================== Idea assessment logic ==================================================================
+
+const StructuredAssessmentOutput = zod.object({
+    final_verdict: zod.string(),
+    summary: zod.string(),
+    insights: zod.array(zod.string()),
+});
+
+export async function assessSolution(providerUrl, modelName, apiKey, solution, assessment_rules, portfolio_info) {
+    const template = await retrieveTemplate("assess");
+
+    const assessment_template = formatTemplate(template, {
+        notation_criterias: assessment_rules,
+        business: portfolio_info,
+        problem_description: solution.problem_description,
+        solution_description: solution.solution_description,
+    });
+
+    const assessment_full = await generateCompletion(providerUrl, modelName, apiKey, [
+        { role: "user", content: assessment_template }
+    ]);
+
+    const structured_template = await retrieveTemplate("extract");
+    const structured_filled_template = formatTemplate(structured_template, {
+        "report": assessment_full,
+        "response_schema": zod.toJSONSchema(StructuredAssessmentOutput)
+    })
+
+    const extracted_info = await generateStructuredCompletion(providerUrl, modelName, apiKey, [{ role: "user", content: structured_filled_template }], StructuredAssessmentOutput);
+
+    return { assessment_full, extracted_info };
+}
+
+export async function refineSolution(providerUrl, modelName, apiKey, solution, insights, assessment_rules, portfolio_info) {
+    const template = await retrieveTemplate("refine");
+
+    const refine_template = formatTemplate(template, {
+        "problem_description": solution.problem_description,
+        "solution_description": solution.solution_description,
+        "insights": insights.map(i => i.text).join("\n -"),
+        "business_info": portfolio_info,
+    });
+
+    console.log(refine_template);
+
+    const refined_idea = await generateCompletion(providerUrl, modelName, apiKey, [{ role: "user", content: refine_template }]);
+
+    const newSolution = structuredClone(solution);
+    newSolution.solution_description = refined_idea;
+
+    return newSolution;
+}

static/js/ui-utils.js

@@ -1,3 +1,6 @@
+import { marked } from 'https://cdnjs.cloudflare.com/ajax/libs/marked/16.1.1/lib/marked.esm.js';
+import { assessSolution, getModelList, refineSolution } from "./gen.js"
+
 // =============================================================================
 // FONCTIONS UTILITAIRES POUR LA GESTION DES ÉLÉMENTS
 // =============================================================================
@@ -212,11 +215,74 @@ export function extractTableData(mapping) {
     return data;
 }
 
+/**
+ * Construit les sous-catégories communes dans l'affichage des solutions
+ */
+export function buildSolutionSubCategories(solution) {
+    // Section Problem Description
+    const problemSection = document.createElement('div');
+    problemSection.className = 'bg-red-50 border-l-2 border-red-400 p-3 rounded-r-md';
+    problemSection.innerHTML = `
+        <h4 class="text-sm font-semibold text-red-800 mb-2 flex items-center">
+            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
+                <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
+            </svg>
+            Problem Description
+        </h4>
+        <p class="text-xs text-gray-700 leading-relaxed">${solution["problem_description"] || 'Aucune description du problème disponible.'}</p>
+    `;
+
+    // Section Problem requirements
+    const reqsSection = document.createElement('div');
+    reqsSection.className = "bg-gray-50 border-l-2 border-red-400 p-3 rounded-r-md";
+    const reqItemsUl = solution["requirements"].map(req => `<li>${req}</li>`).join('');
+    reqsSection.innerHTML = `
+        <h4 class="text-sm font-semibold text-gray-800 mb-2 flex items-center">
+            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
+                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
+            </svg>
+            Addressed 3GPP requirements
+        </h4>
+        <ul class="list-disc pl-5 space-y-1 text-gray-700 text-xs">
+            ${reqItemsUl}
+        </ul>
+    `
+
+    // Section Solution Description
+    const solutionSection = document.createElement('div');
+    solutionSection.className = 'bg-green-50 border-l-2 border-green-400 p-3 rounded-r-md';
+    solutionSection.innerHTML = `
+        <h4 class="text-sm font-semibold text-green-800 mb-2 flex items-center">
+            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
+                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
+            </svg>
+            Solution Description
+        </h4>
+    `;
+
+    // container for markdown content
+    const solContents = document.createElement('div');
+    solContents.className = "text-xs text-gray-700 leading-relaxed";
+    solutionSection.appendChild(solContents);
+
+    try {
+        solContents.innerHTML = marked.parse(solution['solution_description']);
+    }
+    catch (e) {
+        console.error(e);
+        solContents.innerHTML = `<p class="text-xs text-gray-700 leading-relaxed">${solution['solution_description'] || 'No available solution description'}</p>`;
+    }
+
+    return [problemSection, reqsSection, solutionSection]
+}
+
+
 const TABS = {
     'doc-table-tab': 'doc-table-tab-contents',
     'requirements-tab': 'requirements-tab-contents',
     'solutions-tab': 'solutions-tab-contents',
-    'query-tab': 'query-tab-contents'
+    'query-tab': 'query-tab-contents',
+    'draft-tab': 'draft-tab-contents'
 };
 
 /**
@@ -279,16 +345,316 @@ export function debounceAutoCategoryCount(state) {
     document.getElementById('category-count').disabled = state;
 }
 
-
-/**
-*  Vérifie si les paramètres sont bien renseignés pour utiliser la génération privée.
-*/
-export function checkCanUsePrivateGen() {
+export function getPrivateLLMInfo() {
     const provider_url = document.getElementById('settings-provider-url').value;
     const provider_token = document.getElementById('settings-provider-token').value;
+    const provider_model = document.getElementById('settings-provider-model').value;
     const assessment_rules = document.getElementById('settings-assessment-rules').value;
     const portfolio_info = document.getElementById('settings-portfolio').value;
 
+    return { provider_url, provider_token, provider_model, assessment_rules, portfolio_info };
+}
+
+/**
+*  Vérifie si les paramètres sont bien renseignés pour utiliser la génération privée.
+*/
+export function checkPrivateLLMInfoAvailable() {
+    const { provider_url, provider_token, provider_model, assessment_rules, portfolio_info } = getPrivateLLMInfo();
     const isEmpty = (str) => (!str?.length);
-    return !isEmpty(provider_url) && !isEmpty(provider_token) && !isEmpty(assessment_rules) && !isEmpty(portfolio_info);
-} 
+    return !isEmpty(provider_url) && !isEmpty(provider_token) && !isEmpty(assessment_rules) && !isEmpty(portfolio_info) && !isEmpty(provider_model);
+    // return true;
+}
+
+
+/**
+ * Populates a select element with model names fetched from the API.
+ * @param {string} selectElementId The ID of the HTML select element to populate.
+ * @param {string} providerUrl The API provider URL.
+ * @param {string} apiKey The API key.
+ */
+export async function populateLLMModelSelect(selectElementId, providerUrl, apiKey) {
+    const selectElement = document.getElementById(selectElementId);
+    if (!selectElement) {
+        console.error(`Select element with ID "${selectElementId}" not found.`);
+        return;
+    }
+
+    // Clear the "Loading..." option or any existing options
+    selectElement.innerHTML = '';
+
+    try {
+        const models = await getModelList(providerUrl, apiKey);
+
+        if (models.length === 0) {
+            const option = document.createElement('option');
+            option.value = "";
+            option.textContent = "No models found";
+            selectElement.appendChild(option);
+            selectElement.disabled = true; // Disable if no models
+            return;
+        }
+
+        // Add a default "Please select" option
+        const defaultOption = document.createElement('option');
+        defaultOption.value = ""; // Or a placeholder like "select-model"
+        defaultOption.textContent = "Select a model";
+        defaultOption.disabled = true; // Make it unselectable initially
+        defaultOption.selected = true; // Make it the default selected option
+        selectElement.appendChild(defaultOption);
+
+        // Populate with the fetched models
+        models.forEach(modelName => {
+            const option = document.createElement('option');
+            option.value = modelName;
+            option.textContent = modelName;
+            selectElement.appendChild(option);
+        });
+    } catch (error) {
+        throw error;
+    }
+}
+
+
+
+// ================================================================================ Solution drafting using private LLMs ==========================================================
+
+/** History of previously created drafts
+ * The draftHistory will look like this:
+ * {
+ *   solution: {} - the solution object
+ *   insights: [
+ *     { id: 'i1', text: 'Some insight text', checked: false },
+ *     { id: 'i2', text: 'Another insight', checked: true }
+ *   ],
+ *   assessment_full: The full assessment text
+ * }
+*/
+let draftHistory = [];
+
+// Index of the latest draft in the draft history.
+// -1 means theres no draft.
+let draftCurrentIndex = -1;
+
+/**
+ * Passe une solution bootstrappée en draft pour être itérée sur le private compute
+ * @param {Object} solution - Un objet qui représente une solution bootstrappée (SolutionModel).
+ */
+export function moveSolutionToDrafts(solution) {
+    const draft_tab_item = document.getElementById('draft-tab');
+    if (draft_tab_item.classList.contains("hidden"))  // un-hide the draft tab the first time a solution is drafted
+        draft_tab_item.classList.remove("hidden");
+
+    switchTab('draft-tab');
+
+    const { provider_url, provider_token, provider_model, assessment_rules, portfolio_info } = getPrivateLLMInfo();
+
+    showLoadingOverlay("Assessing solution ....");
+    assessSolution(provider_url, provider_model, provider_token, solution, assessment_rules, portfolio_info).then(response => {
+        // reset the state of the draft history
+        draftHistory = [];
+        draftCurrentIndex = -1;
+
+        const insights = response.extracted_info.insights.map((e, idx, __) => ({ id: idx, text: e, checked: false }));
+
+        // push the solution to the draft history
+        draftHistory.push({
+            solution: solution,
+            insights: insights,
+            assessment_full: response.assessment_full,
+            final_verdict: response.extracted_info.final_verdict,
+            assessment_summary: response.extracted_info.summary,
+        });
+
+        draftCurrentIndex++;
+        // update the UI by rendering it
+        renderDraftUI();
+    }).catch(e => {
+        alert(e);
+    }).finally(() => {
+        hideLoadingOverlay();
+    })
+}
+
+/**
+ * SIMULATED API CALL
+ * In a real app, this would be an async fetch call to a backend AI/service.
+ * @param {string} previousSolution - The text of the previous solution.
+ * @param {Array<string>} selectedInsights - An array of the selected insight texts.
+ * @returns {object} - An object with the new solution and new insights.
+ */
+function assessSolutionDraft(previousSolution, selectedInsights = []) {
+    const version = draftHistory.length + 1;
+    let newSolutionText;
+
+    if (selectedInsights.length > 0) {
+        newSolutionText = `V${version}: Based on "${previousSolution.substring(0, 30)}..." and the insights: [${selectedInsights.join(', ')}], we've refined the plan to focus more on digital outreach and local partnerships.`;
+    } else {
+        newSolutionText = `V${version}: This is an initial assessment of "${previousSolution.substring(0, 50)}...". The plan seems solid but could use more detail.`;
+    }
+
+    // Generate some random new insights
+    const newInsights = [
+        { id: `v${version}-i1`, text: `Consider social media marketing (Insight ${Math.floor(Math.random() * 100)})`, checked: false },
+        { id: `v${version}-i2`, text: `Focus on customer retention (Insight ${Math.floor(Math.random() * 100)})`, checked: false },
+        { id: `v${version}-i3`, text: `Expand the product line (Insight ${Math.floor(Math.random() * 100)})`, checked: false },
+    ];
+
+    return { newSolutionText, newInsights };
+}
+
+/**
+ * Renders the timeline UI based on the current state
+ * @param {Number} currentIndex - Current index for latest draft
+ * @param {Array} drafts - Current history of previous drafts
+ */
+function renderDraftTimeline(timelineContainer, currentIndex, drafts) {
+    timelineContainer.innerHTML = '';
+    drafts.forEach((state, idx) => {
+        const li = document.createElement('li');
+        li.className = `step ${idx <= currentIndex ? 'step-primary' : ''}`;
+        li.textContent = `Draft #${idx + 1}`;
+        li.onclick = () => jumpToDraft(idx);
+        timelineContainer.appendChild(li);
+    });
+}
+
+/**
+ * Renders the entire UI based on the current state (draftHistory[currentIndex]).
+ */
+export function renderDraftUI() {
+    const solutionDisplay = document.getElementById('solution-draft-display');
+    const insightsContainer = document.getElementById('insights-container');
+    const timelineContainer = document.getElementById('timeline-container');
+
+    if (draftCurrentIndex < 0) {
+        solutionDisplay.innerHTML = `<p>No drafted solutions for now</p>`
+        insightsContainer.innerHTML = '';
+        timelineContainer.innerHTML = '';
+        return;
+    }
+
+    const currentState = draftHistory[draftCurrentIndex];
+
+    const solutionSections = buildSolutionSubCategories(currentState.solution);
+    solutionDisplay.innerHTML = '';
+
+    // 1. Render Solution
+    for (let child of solutionSections)
+        solutionDisplay.appendChild(child);
+
+    //3. but 2. actually:  Print verdict and quick summary
+    document.getElementById('assessment-recommendation-status').innerText = currentState.final_verdict;
+    document.getElementById('assessment-recommendation-summary').innerText = currentState.assessment_summary;
+
+    // 2. Render Insights Checkboxes
+    insightsContainer.innerHTML = '';
+    currentState.insights.forEach(insight => {
+        const isChecked = insight.checked ? 'checked' : '';
+        const insightEl = document.createElement('label');
+        insightEl.className = 'label cursor-pointer justify-start gap-4';
+        insightEl.innerHTML = `
+                    <input type="checkbox" id="${insight.id}" ${isChecked} class="checkbox checkbox-primary" />
+                    <span class="label-text">${insight.text}</span>
+                `;
+        // Add event listener to update state on check/uncheck
+        insightEl.querySelector('input').addEventListener('change', (e) => {
+            insight.checked = e.target.checked;
+        });
+        insightsContainer.appendChild(insightEl);
+    });
+
+
+    // Render the timeline with the fetched timeline container
+    renderDraftTimeline(timelineContainer, draftCurrentIndex, draftHistory);
+
+    console.log(draftHistory);
+    console.log(draftCurrentIndex);
+}
+
+/**
+ * Handles the "Refine" button click.
+ */
+export function handleDraftRefine() {
+    // Fetch DOM elements here
+    const refineBtn = document.getElementById('refine-btn');
+
+    const currentState = draftHistory[draftCurrentIndex];
+
+    // Get selected insights from the current state
+    const selectedInsights = currentState.insights
+        .filter(i => i.checked)
+        .map(i => i.text);
+
+    if (selectedInsights.length === 0) {
+        alert('Please select at least one insight to refine the solution.');
+        return;
+    }
+
+    // --- THIS IS THE KEY LOGIC FOR INVALIDATING THE FUTURE ---
+    // If we are not at the end of the timeline, chop off the future states.
+    if (draftCurrentIndex < draftHistory.length - 1) {
+        draftHistory = draftHistory.slice(0, draftCurrentIndex + 1);
+    }
+    // ---
+
+    const { provider_url, provider_token, provider_model, assessment_rules, portfolio_info } = getPrivateLLMInfo();
+
+    showLoadingOverlay('Refining and assessing ....')
+
+    refineSolution(provider_url, provider_model, provider_token, currentState.solution, selectedInsights, assessment_rules, portfolio_info)
+        .then(newSolution => {
+            const refinedSolution = newSolution;
+            return assessSolution(provider_url, provider_model, provider_token, newSolution, assessment_rules, portfolio_info)
+                .then(assessedResult => {
+                    return { refinedSolution, assessedResult };
+                });
+        })
+        .then(result => {
+            const newInsights = result.assessedResult.extracted_info.insights.map((e, idx, __) => ({ id: idx, text: e, checked: false }));
+
+            draftHistory.push({
+                solution: result.refinedSolution,
+                insights: newInsights,
+                assessment_full: result.assessedResult.assessment_full,
+                final_verdict: result.assessedResult.extracted_info.final_verdict,
+                assessment_summary: result.assessedResult.extracted_info.summary,
+            });
+
+            draftCurrentIndex++;
+            renderDraftUI();
+        })
+        .catch(error => {
+            // Handle any errors
+            alert("An error occurred:" + error);
+        }).finally(() => {
+            hideLoadingOverlay();
+        });
+}
+
+/**
+ * Jumps to a specific state in the draftHistory timeline.
+ */
+function jumpToDraft(index) {
+    if (index >= 0 && index < draftHistory.length) {
+        draftCurrentIndex = index;
+        renderDraftUI();
+    }
+}
+
+export function displayFullAssessment() {
+    const full_assessment_content = document.getElementById('read-assessment-content');
+    const modal = document.getElementById('read-assessment-modal');
+
+    if (draftCurrentIndex < 0)
+        return;
+
+    const lastDraft = draftHistory[draftCurrentIndex];
+    try {
+        full_assessment_content.innerHTML = marked.parse(lastDraft.assessment_full);
+    }
+    catch (e) {
+        full_assessment_content.innerHTML = lastDraft.assessment_full;
+    }
+
+    modal.showModal();
+}