Hugging Face's logo

Spaces:
Docfile
/
Mariam-cc
Running

App Files Community
Mariam-cc / templates /index.html
Docfile's picture
Docfile
Update templates/index.html
4b3bfd2 verified
raw
history blame contribute delete
47.2 kB
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<!-- **Optimisation Mobile: Assure un bon affichage et désactive le zoom manuel** -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Mariam AI - Analyse Littéraire</title>
<!-- Bibliothèque marked pour l'AFFICHAGE UTILISATEUR SEULEMENT -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.6/marked.min.js"></script>
<!-- Bibliothèque jsPDF pour la génération PDF directe -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<!-- Plugin jsPDF-AutoTable pour les tableaux -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.28/jspdf.plugin.autotable.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;500;600;700&display=swap');
:root {
--primary: #4361ee;
--primary-dark: #3a56d4;
--secondary: #2b2d42;
--secondary-light: #8d99ae; /* For secondary button */
--accent: #ef476f;
--light: #f8f9fa;
--gray-100: #f1f3f5;
--gray-200: #e9ecef;
--gray-300: #dee2e6;
--gray-400: #ced4da;
--gray-700: #495057;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
--radius-sm: 0.375rem; /* 6px */
--radius-md: 0.5rem; /* 8px */
--radius-lg: 0.75rem; /* 12px */
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { /* Améliore le défilement sur mobile */ -webkit-overflow-scrolling: touch; }
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #f6f8fb 0%, #f1f3f5 100%);
color: var(--secondary);
line-height: 1.6;
padding-bottom: 2rem;
min-height: 100vh; /* Assure que le dégradé couvre tout l'écran */
}
header {
background-color: white;
padding: 1.5rem 1rem; /* Padding par défaut */
text-align: center;
box-shadow: var(--shadow-sm);
position: sticky; /* **Mobile: Rend l'en-tête collant en haut** */
top: 0;
z-index: 10;
width: 100%; /* Nécessaire avec sticky */
}
.logo {
font-family: 'Playfair Display', serif;
font-size: 2rem; /* Taille par défaut */
color: var(--secondary);
margin-bottom: 0.25rem;
}
.tagline {
font-size: 0.9rem; /* Taille par défaut */
color: var(--gray-700);
font-weight: 500;
}
.card {
background: white;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
padding: 1.5rem; /* Padding par défaut */
margin: 1rem; /* Marge par défaut */
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.upload-area {
border: 2px dashed var(--gray-300);
border-radius: var(--radius-md);
padding: 1.5rem 1rem; /* Padding par défaut */
text-align: center;
cursor: pointer;
transition: all 0.2s ease;
margin: 1.5rem 0;
}
.upload-area:hover, .upload-area.active {
border-color: var(--primary);
background-color: rgba(67, 97, 238, 0.05);
}
.upload-icon {
width: 3.5rem; height: 3.5rem; /* Taille par défaut */
margin: 0 auto 1rem;
color: var(--gray-400);
}
.upload-area:hover .upload-icon, .upload-area.active .upload-icon {
color: var(--primary);
}
.input-group { margin-bottom: 1.5rem; }
.label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
font-size: 0.9rem; /* Taille par défaut */
}
.input {
width: 100%;
padding: 0.75rem; /* Padding par défaut */
border: 1px solid var(--gray-300);
border-radius: var(--radius-md);
font-family: 'Inter', sans-serif;
font-size: 1rem; /* Taille par défaut */
transition: border-color 0.2s ease;
/* **Mobile: Assure que le zoom n'est pas activé sur focus input sous iOS** */
-webkit-appearance: none;
appearance: none;
}
.input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
}
.preview-container { margin: 1.5rem 0; }
.preview-title {
font-weight: 600;
margin-bottom: 0.5rem;
font-size: 0.9rem; /* Taille par défaut */
}
.preview-image-container {
background-color: var(--gray-100);
border-radius: var(--radius-md);
overflow: hidden;
position: relative;
}
.preview-image {
max-width: 100%;
max-height: 15rem; /* Limite hauteur aperçu */
height: auto;
margin: 0 auto;
display: block;
}
.btn {
display: block;
width: 100%;
padding: 0.875rem; /* Padding par défaut */
font-weight: 600;
text-align: center;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
transition: all 0.2s ease;
font-size: 1rem; /* Taille par défaut */
/* **Mobile: Empêche la sélection de texte sur appui long** */
-webkit-user-select: none; user-select: none;
}
.btn:disabled {
background-color: var(--gray-300) !important;
color: var(--gray-700) !important;
cursor: not-allowed;
opacity: 0.7;
transform: none !important;
box-shadow: none !important;
}
.btn-primary { background-color: var(--primary); color: white; }
.btn-primary:not(:disabled):hover, .btn-primary:not(:disabled):focus { background-color: var(--primary-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-primary:not(:disabled):active { transform: translateY(0); }
.btn-secondary { background-color: var(--secondary-light); color: var(--secondary); margin-top: 0.75rem; } /* Style for DeepThink */
.btn-secondary:not(:disabled):hover, .btn-secondary:not(:disabled):focus { background-color: var(--secondary); color: white; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-secondary:not(:disabled):active { transform: translateY(0); }
.loading-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 100; padding: 1rem; /* Ajout padding pour mobile */ }
.loading-card { background-color: white; padding: 2rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); text-align: center; max-width: 90%; /* Légère augmentation pour petits écrans */ }
.spinner { width: 3rem; height: 3rem; border: 4px solid var(--gray-200); border-radius: 50%; border-top-color: var(--primary); animation: spin 1s linear infinite; margin: 0 auto 1rem; }
@keyframes spin { to { transform: rotate(360deg); } }
.result-card { padding: 0; overflow: hidden; }
.tabs { display: flex; border-bottom: 1px solid var(--gray-200); background-color: var(--gray-100); width: 100%; /* Assure pleine largeur */ }
.tab {
flex: 1; /* Prend espace égal */
text-align: center;
padding: 1rem 0.5rem; /* Padding par défaut */
font-weight: 600;
font-size: 0.9rem; /* Taille par défaut */
color: var(--gray-700);
background-color: transparent;
border: none;
border-bottom: 3px solid transparent;
cursor: pointer;
transition: color 0.2s ease, border-color 0.2s ease;
margin-bottom: -1px;
/* **Mobile: Empêche la sélection de texte** */
-webkit-user-select: none; user-select: none;
white-space: nowrap; /* Empêche le retour à la ligne si texte long */
overflow: hidden; /* Cache le texte qui dépasse */
text-overflow: ellipsis; /* Ajoute ... si texte dépasse */
}
.tab:hover { color: var(--primary); }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.tab-content { padding: 1.5rem; /* Padding par défaut */ }
/* Styles pour le contenu généré (prose/texte) */
.custom-prose { font-size: 1rem; line-height: 1.8; } /* Taille/interligne par défaut */
.custom-prose h1, .custom-prose h2, .custom-prose h3 { font-family: 'Playfair Display', serif; margin-top: 1.5em; margin-bottom: 0.75em; line-height: 1.3; color: var(--primary-dark); }
.custom-prose h1 { font-size: 1.75rem; } .custom-prose h2 { font-size: 1.5rem; } .custom-prose h3 { font-size: 1.25rem; } /* Tailles titres par défaut */
.custom-prose p { margin-bottom: 1.25em; } .custom-prose ul, .custom-prose ol { margin-top: 1em; margin-bottom: 1em; padding-left: 1.5em; } .custom-prose li { margin-bottom: 0.5em; }
/* Styles pour les tableaux générés */
.markdown-table {
overflow-x: auto; /* ESSENTIEL pour mobile */
-webkit-overflow-scrolling: touch; /* Défilement fluide sur iOS */
border: 1px solid var(--gray-200);
border-radius: var(--radius-sm);
margin-top: 1em;
margin-left: -1.5rem; /* Compense le padding du parent pour utiliser toute la largeur */
margin-right: -1.5rem; /* Compense le padding du parent */
padding-left: 0.5rem; /* Petit padding interne pour ne pas coller au bord */
padding-right: 0.5rem;
}
/* Cache l'overflow quand on imprime ou génère PDF */
#pdfContentWrapper .markdown-table, @media print { overflow-x: visible; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0;}
.markdown-table table { width: 100%; border-collapse: collapse; border-spacing: 0; table-layout: auto; }
.markdown-table th { background: var(--primary); color: white; font-weight: 600; padding: 0.75rem 1rem; text-align: left; font-size: 0.9rem; border-bottom: 2px solid var(--primary-dark); white-space: nowrap; /* Empêche retour à la ligne des titres */ }
.markdown-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--gray-200); font-size: 0.9rem; vertical-align: top; word-break: break-word; /* Permet au texte long de passer à la ligne */ }
.markdown-table tr:nth-child(even) td { background-color: var(--gray-100); }
.markdown-table tr:hover td { background-color: rgba(67, 97, 238, 0.1); }
.upload-instructions { font-size: 0.85rem; color: var(--gray-700); margin-top: 0.5rem; }
.file-input { display: none; }
.slide-up { animation: slide-up 0.4s ease forwards; }
@keyframes slide-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.streaming-cursor { display: inline-block; width: 2px; height: 1.2em; background-color: var(--primary); margin-left: 1px; animation: blink 1s infinite; vertical-align: text-bottom; opacity: 1; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.final-cursor { display: none !important; }
.button-container { margin-top: 1.5rem; } /* Container for buttons */
/* ============================================ */
/* == OPTIMISATIONS POUR SMARTPHONES (<= 600px) == */
/* ============================================ */
@media (max-width: 600px) {
body {
padding-bottom: 1rem; /* Moins de padding en bas */
-webkit-text-size-adjust: 100%; /* Empêche l'ajustement auto de la taille du texte sur iOS */
}
header {
padding: 1rem; /* Header plus compact */
}
.logo {
font-size: 1.75rem; /* Logo légèrement plus petit */
}
.tagline {
font-size: 0.85rem; /* Slogan légèrement plus petit */
}
.card {
margin: 0.75rem; /* Moins de marge horizontale */
padding: 1.25rem; /* Moins de padding interne */
border-radius: var(--radius-md); /* Coins un peu moins arrondis si désiré */
}
main .card:first-of-type {
margin-top: 1rem; /* Espace après le header sticky */
}
.upload-area {
padding: 1.25rem 1rem; /* Ajustement padding */
}
.upload-icon {
width: 3rem; height: 3rem; /* Icône légèrement plus petite */
}
.upload-instructions {
font-size: 0.8rem; /* Texte instructions plus petit */
}
.label {
font-size: 0.85rem; /* Label légèrement plus petit */
}
.input {
padding: 0.8rem; /* Padding input ajusté pour le toucher */
font-size: 1rem; /* Garder 1rem évite le zoom auto sur iOS */
}
.preview-title {
font-size: 0.85rem;
}
.btn {
padding: 0.9rem; /* Boutons un peu plus grands pour le toucher */
font-size: 0.95rem; /* Texte bouton légèrement plus petit */
border-radius: var(--radius-sm); /* Rayon plus petit pour boutons */
}
.btn-secondary {
margin-top: 1rem; /* Un peu plus d'espace entre les boutons */
}
.tab {
padding: 0.9rem 0.25rem; /* Padding vertical augmenté pour toucher, horizontal réduit */
font-size: 0.8rem; /* Texte onglet plus petit */
}
.tab-content {
padding: 1.25rem; /* Padding contenu onglet réduit */
}
/* Ajustements taille texte contenu généré */
.custom-prose {
font-size: 0.95rem; /* Taille texte principal légèrement réduite */
line-height: 1.7; /* Interligne confortable */
}
.custom-prose h1 { font-size: 1.5rem; }
.custom-prose h2 { font-size: 1.3rem; }
.custom-prose h3 { font-size: 1.1rem; }
/* Ajustements tableau pour mobile */
.markdown-table {
margin-left: -1.25rem; /* Ajuster pour le nouveau padding du parent */
margin-right: -1.25rem; /* Ajuster pour le nouveau padding du parent */
padding-left: 0.4rem;
padding-right: 0.4rem;
}
.markdown-table th, .markdown-table td {
padding: 0.6rem 0.75rem; /* Cellules tableau plus compactes */
font-size: 0.85rem; /* Texte tableau plus petit */
}
/* Optionnel: Rendre le texte des cellules un peu plus petit si nécessaire */
/* .markdown-table td { font-size: 0.8rem; } */
.loading-card {
padding: 1.5rem; /* Padding chargement réduit */
}
.spinner {
width: 2.5rem; height: 2.5rem; /* Spinner légèrement plus petit */
margin-bottom: 0.8rem;
}
.loading-card p {
font-size: 0.9rem; /* Texte chargement plus petit */
}
}
</style>
</head>
<body>
<header>
<h1 class="logo">Mariam AI</h1>
<p class="tagline">Assistant d'Analyse Littéraire</p>
</header>
<main>
<div class="card">
<form id="uploadForm">
<div class="input-group">
<label for="imageInput" class="label">Votre document</label>
<div id="uploadArea" class="upload-area">
<svg class="upload-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" /></svg>
<p>Touchez pour télécharger</p>
<p class="upload-instructions">PNG, JPG jusqu'à 10MB</p>
<input id="imageInput" type="file" class="file-input" accept="image/*" required>
</div>
</div>
<div class="input-group">
<label for="consignesInput" class="label">Consignes (optionnel)</label>
<input id="consignesInput" type="text" class="input" placeholder="Entrez vos consignes ici">
</div>
<div id="previewContainer" class="preview-container" style="display: none;">
<p class="preview-title">Aperçu du document</p>
<div class="preview-image-container"><img id="previewImage" class="preview-image" src="#" alt="Aperçu"></div>
</div>
<div class="button-container">
<button type="submit" class="btn btn-primary">Lancer l'analyse standard</button>
<button type="button" id="deepThinkBtn" class="btn btn-secondary">DeepThink (1/jour)</button>
</div>
</form>
</div>
<div id="result" class="card result-card" style="display: none;">
<div class="tabs">
<button id="dissertationTab" class="tab active">Dissertation</button>
<button id="tableauTab" class="tab">Tableau</button>
</div>
<div id="displayContentWrapper">
<div id="dissertationContentWrapper" class="tab-content">
<div id="dissertationContent" class="custom-prose"></div>
</div>
<div id="tableauContentWrapper" class="tab-content" style="display: none;">
<!-- **Mobile: Conteneur spécifique pour le style 'markdown-table' qui gère l'overflow** -->
<div id="tableauContent" class="markdown-table">
<!-- Le contenu HTML du tableau sera injecté ici par Marked.js -->
</div>
</div>
</div>
<div style="padding: 0 1.25rem 1.25rem;"> <!-- Padding ajusté pour mobile -->
<button id="downloadPdf" class="btn btn-primary" style="margin-top: 1rem;" disabled>Télécharger en PDF</button>
</div>
</div>
</main>
<div id="loading" class="loading-overlay" style="display: none;">
<div class="loading-card"><div class="spinner"></div><p>Préparation de l'analyse...</p></div>
</div>
<script>
// Vérification bibliothèques
if (typeof window.jspdf === 'undefined') { console.error("Erreur: jsPDF non chargée."); }
else { console.log("jsPDF chargée:", window.jspdf.jsPDF.version);
if (typeof window.jspdf.jsPDF.API?.autoTable === 'undefined') { console.error("Erreur: Plugin jsPDF-AutoTable non chargé."); }
else { console.log("Plugin jsPDF-AutoTable détecté."); }
}
if (typeof window.marked === 'undefined') { console.error("Erreur: Marked.js non chargée."); }
// DOM Elements
const uploadForm = document.getElementById('uploadForm');
const imageInput = document.getElementById('imageInput');
const consignesInput = document.getElementById('consignesInput');
const uploadArea = document.getElementById('uploadArea');
const previewContainer = document.getElementById('previewContainer');
const previewImage = document.getElementById('previewImage');
const loadingIndicator = document.getElementById('loading');
const resultDiv = document.getElementById('result');
const dissertationTab = document.getElementById('dissertationTab');
const tableauTab = document.getElementById('tableauTab');
const dissertationContentWrapper = document.getElementById('dissertationContentWrapper');
const tableauContentWrapper = document.getElementById('tableauContentWrapper');
const dissertationContent = document.getElementById('dissertationContent');
const tableauContent = document.getElementById('tableauContent'); // Référence au conteneur du tableau
const downloadPdfBtn = document.getElementById('downloadPdf');
const deepThinkBtn = document.getElementById('deepThinkBtn'); // DeepThink Button
// Config marked
if (typeof window.marked !== 'undefined') {
marked.setOptions({ breaks: true, gfm: true, mangle: false, headerIds: false });
}
// --- Global state & Constants ---
let tableauMarkdownRaw = '';
let dissertationMarkdownRaw = '';
let currentlyStreaming = null;
let streamComplete = false;
const dissertationCursorId = 'dissertationCursor';
const tableauCursorId = 'tableauCursor';
const DEEPTHINK_STORAGE_KEY = 'deepThinkLastUsedDate'; // Key for Local Storage
// --- Helper Functions ---
function getCursorElement(type) { return document.getElementById(type === 'dissertation' ? dissertationCursorId : tableauCursorId); }
function removeCursor(type) { const cursor = getCursorElement(type); if (cursor) { cursor.style.display = 'none'; cursor.classList.add('final-cursor'); } }
function ensureCursor(type, container) {
let cursor = getCursorElement(type);
// Try to append cursor after the table if it exists, otherwise just append to the container.
// This helps visibility in the scrollable table container.
const tableElement = container.querySelector('table');
const targetContainer = (type === 'tableau' && tableElement) ? tableElement.parentElement : container;
if (!cursor) {
cursor = document.createElement('span');
cursor.id = type === 'dissertation' ? dissertationCursorId : tableauCursorId;
cursor.className = 'streaming-cursor';
targetContainer.appendChild(cursor);
}
cursor.style.display = 'inline-block';
cursor.classList.remove('final-cursor');
targetContainer.appendChild(cursor); // Ensure it's the last element in the target container
}
// --- UI Management ---
// Standard click for desktop compatibility
uploadArea.addEventListener('click', () => {
// Prevent click if triggered immediately after touch end on mobile
if (uploadArea.dataset.touched) {
delete uploadArea.dataset.touched;
return;
}
imageInput.click();
});
// Utilisation de touchstart/touchend pour réactivité immédiate sur mobile
uploadArea.addEventListener('touchstart', function(e) {
e.preventDefault(); // Prevent default touch behavior like scrolling or double-tap zoom
this.classList.add('active');
this.dataset.touched = true; // Flag that touch happened
}, { passive: false });
uploadArea.addEventListener('touchend', function(e) {
this.classList.remove('active');
// Only trigger click if the touch didn't move significantly (optional check, simple version here)
e.preventDefault(); // Prevent ghost click on some devices
imageInput.click();
// Set a flag or timeout to potentially ignore the subsequent 'click' event
setTimeout(() => { delete uploadArea.dataset.touched; }, 300); // Remove flag after a delay
});
imageInput.addEventListener('change', function() { const file = this.files[0]; if (file) { const reader = new FileReader(); reader.onload = function(e) { previewImage.src = e.target.result; previewContainer.style.display = 'block'; previewContainer.classList.add('slide-up'); uploadArea.classList.add('active'); }; reader.readAsDataURL(file); } else { previewContainer.style.display = 'none'; uploadArea.classList.remove('active'); } });
dissertationTab.addEventListener('click', () => switchTab('dissertation'));
tableauTab.addEventListener('click', () => switchTab('tableau'));
function switchTab(tabName) { const isDissertation = tabName === 'dissertation'; dissertationTab.classList.toggle('active', isDissertation); tableauTab.classList.toggle('active', !isDissertation); dissertationContentWrapper.style.display = isDissertation ? 'block' : 'none'; tableauContentWrapper.style.display = !isDissertation ? 'block' : 'none'; }
// --- DeepThink Daily Limit Logic ---
function checkDeepThinkLimit() {
const lastUsedDate = localStorage.getItem(DEEPTHINK_STORAGE_KEY);
const todayDate = new Date().toDateString(); // Gets "Mon Apr 15 2024" format
if (lastUsedDate === todayDate) {
deepThinkBtn.disabled = true;
deepThinkBtn.textContent = "DeepThink (Utilisé)"; // Texte plus court pour mobile
console.log("DeepThink limit reached for today.");
} else {
deepThinkBtn.disabled = false;
deepThinkBtn.textContent = "DeepThink (1/jour)";
console.log("DeepThink available.");
}
}
function recordDeepThinkUsage() {
const todayDate = new Date().toDateString();
localStorage.setItem(DEEPTHINK_STORAGE_KEY, todayDate);
deepThinkBtn.disabled = true;
deepThinkBtn.textContent = "DeepThink (Utilisé)"; // Texte plus court pour mobile
console.log("DeepThink usage recorded for today.");
}
// --- Streaming Logic ---
function updateDisplayContent(type) {
if (typeof window.marked === 'undefined') return;
if (type === 'tableau') {
// Injecte le HTML généré par Marked DANS le div 'tableauContent'.
// Le div 'tableauContent' a déjà la classe 'markdown-table' pour l'overflow.
tableauContent.innerHTML = marked.parse(tableauMarkdownRaw);
ensureCursor('tableau', tableauContent); // Place cursor within the container
} else if (type === 'dissertation') {
dissertationContent.innerHTML = marked.parse(dissertationMarkdownRaw);
ensureCursor('dissertation', dissertationContent);
}
}
function processStreamChunk(jsonData, isDeepThink) { // Pass deepthink flag
try {
const parsedData = JSON.parse(jsonData);
if (parsedData.error) { console.error("Erreur serveur:", parsedData.error); alert("Erreur serveur: " + parsedData.error); loadingIndicator.style.display = 'none'; downloadPdfBtn.disabled = true; if (currentlyStreaming) removeCursor(currentlyStreaming); streamComplete = true; return; }
// First chunk received successfully
if (resultDiv.style.display === 'none') {
resultDiv.style.display = 'block';
resultDiv.classList.add('slide-up');
loadingIndicator.style.display = 'none';
switchTab('dissertation'); // Default to dissertation tab
// Record usage ONLY if it was a DeepThink request and this is the first chunk
if (isDeepThink) {
recordDeepThinkUsage();
}
}
if (parsedData.type === 'tableau') { tableauMarkdownRaw += parsedData.chunk; }
else if (parsedData.type === 'dissertation') { dissertationMarkdownRaw += parsedData.chunk; }
else { console.warn("Type de chunk inconnu reçu:", parsedData.type); return; }
if (currentlyStreaming !== parsedData.type) { if (currentlyStreaming) { removeCursor(currentlyStreaming); } currentlyStreaming = parsedData.type; }
updateDisplayContent(parsedData.type);
} catch (e) { if (e instanceof SyntaxError) { console.warn("Chunk JSON invalide:", jsonData, e); } else { console.error("Erreur traitement chunk:", e, jsonData); } }
}
function handleStreamEnd() { console.log("Fin du stream."); streamComplete = true; if (currentlyStreaming) { removeCursor(currentlyStreaming); } loadingIndicator.style.display = 'none'; downloadPdfBtn.disabled = false; currentlyStreaming = null; }
// --- Analysis Request Logic (Reusable) ---
function startAnalysis(formData) {
// Reset state before starting
tableauMarkdownRaw = ''; dissertationMarkdownRaw = ''; currentlyStreaming = null; streamComplete = false;
dissertationContent.innerHTML = ''; tableauContent.innerHTML = ''; // Clear previous content
resultDiv.style.display = 'none'; loadingIndicator.style.display = 'flex'; downloadPdfBtn.disabled = true; switchTab('dissertation');
const isDeepThinkRequest = formData.get('use_deepthink') === 'true';
console.log(`Lancement de l'analyse ${isDeepThinkRequest ? 'DeepThink' : 'standard'}...`);
fetch('/analyze', { method: 'POST', body: formData })
.then(response => {
if (!response.ok) {
return response.text().then(text => {
let errorMsg = `Erreur HTTP ${response.status}: ${response.statusText}`;
try { const errData = JSON.parse(text); errorMsg += `. Détail: ${errData.error || text}`; } catch (e) { errorMsg += `. Détail: ${text}`; }
throw new Error(errorMsg);
});
}
if (!response.body) { throw new Error("Réponse serveur sans corps."); }
const reader = response.body.getReader();
const decoder = new TextDecoder();
function read() {
reader.read().then(({done, value}) => {
if (done) { handleStreamEnd(); return; }
const text = decoder.decode(value, {stream: true});
const lines = text.split('\n').filter(line => line.trim() !== '');
// Pass the isDeepThinkRequest flag to processStreamChunk
lines.forEach(line => { processStreamChunk(line, isDeepThinkRequest); });
read();
}).catch(error => { console.error('Erreur lecture stream:', error); alert('Erreur réception analyse: ' + error.message); loadingIndicator.style.display = 'none'; downloadPdfBtn.disabled = true; if (currentlyStreaming) removeCursor(currentlyStreaming); streamComplete = true; });
}
read();
})
.catch(error => { console.error('Erreur Fetch:', error); loadingIndicator.style.display = 'none'; alert(`Erreur connexion/analyse: ${error.message}`); downloadPdfBtn.disabled = true; streamComplete = true; });
}
// --- Form Submission Handlers ---
uploadForm.addEventListener('submit', function(e) {
e.preventDefault(); // Prevent default form submission
if (imageInput.files.length === 0) { alert("Veuillez sélectionner un fichier image."); return; }
const formData = new FormData();
formData.append('image', imageInput.files[0]);
formData.append('consignes', consignesInput.value);
// NO use_deepthink flag here for standard analysis
startAnalysis(formData); // Call the reusable analysis function
});
deepThinkBtn.addEventListener('click', function() {
if (this.disabled) {
alert("La fonctionnalité DeepThink est limitée à une utilisation par jour.");
return;
}
if (imageInput.files.length === 0) { alert("Veuillez sélectionner un fichier image avant de lancer DeepThink."); return; }
// Double check limit just before sending
const lastUsedDate = localStorage.getItem(DEEPTHINK_STORAGE_KEY);
const todayDate = new Date().toDateString();
if(lastUsedDate === todayDate) {
alert("DeepThink a déjà été utilisé aujourd'hui.");
checkDeepThinkLimit(); // Update button state if needed
return;
}
const formData = new FormData();
formData.append('image', imageInput.files[0]);
formData.append('consignes', consignesInput.value);
formData.append('use_deepthink', 'true'); // ADD THE FLAG FOR DEEPTHINK
startAnalysis(formData); // Call the reusable analysis function
});
// --- PDF Download Logic (Unchanged logic, should still work) ---
downloadPdfBtn.addEventListener('click', () => {
if (!streamComplete || (!dissertationMarkdownRaw && !tableauMarkdownRaw)) {
alert("Analyse non terminée ou contenu vide.");
return;
}
if (typeof window.jspdf === 'undefined' || typeof window.jspdf.jsPDF === 'undefined' || typeof window.jspdf.jsPDF.API.autoTable === 'undefined') {
alert("Erreur critique : jsPDF ou le plugin AutoTable ne sont pas disponibles.");
return;
}
const { jsPDF } = window.jspdf;
console.log("Préparation du PDF avec détection de blocs...");
downloadPdfBtn.disabled = true;
downloadPdfBtn.textContent = "Génération PDF...";
try {
const pdf = new jsPDF({ orientation: 'p', unit: 'pt', format: 'letter' });
const pageHeight = pdf.internal.pageSize.getHeight();
const pageWidth = pdf.internal.pageSize.getWidth();
const margin = 40;
const maxLineWidth = pageWidth - margin * 2;
const fontSize = 10; // Base font size for PDF
const lineHeightFactor = 1.3;
const lineHeight = fontSize * lineHeightFactor;
let cursorY = margin;
pdf.setFontSize(fontSize);
// Utiliser une police standard comme Helvetica pour une meilleure compatibilité PDF embarquée
pdf.setFont("Helvetica", "normal");
function addTextToPage(text) {
if (!text) return;
// Basic cleaning: remove markdown markers for simplicity in PDF text blocks
const simplifiedText = text.trim()
.replace(/^#+\s+/gm, '') // Remove heading markers
.replace(/^[\*\-]\s+/gm, ' '); // Replace list markers with indent
const lines = pdf.splitTextToSize(simplifiedText, maxLineWidth);
lines.forEach(line => {
if (cursorY + lineHeight > pageHeight - margin) { pdf.addPage(); cursorY = margin; }
pdf.text(line, margin, cursorY); cursorY += lineHeight;
});
cursorY += lineHeight * 0.5; // Add some space after paragraph
}
function addTitleToPage(titleText, level = 1) {
if (!titleText) return;
const titleSize = level === 1 ? 16 : (level === 2 ? 14 : 12);
const titleLineHeight = titleSize * lineHeightFactor;
if (cursorY + titleLineHeight > pageHeight - margin) { pdf.addPage(); cursorY = margin; }
pdf.setFontSize(titleSize); pdf.setFont("Helvetica", "bold");
pdf.text(titleText.trim(), margin, cursorY);
pdf.setFontSize(fontSize); pdf.setFont("Helvetica", "normal"); // Reset to normal
cursorY += titleLineHeight + 6; // Space after title
}
function parseMarkdownTable(mdTableBlock) {
if (!mdTableBlock || typeof mdTableBlock !== 'string') return { head: [], body: [] };
const lines = mdTableBlock.trim().split('\n');
const cleanCell = (cell) => cell ? cell.trim() : ''; // Function to trim cell content
let headerLineIndex = -1, separatorLineIndex = -1;
// Find header and separator lines more robustly
for(let i = 0; i < lines.length; i++) {
const trimmedLine = lines[i].trim();
if (trimmedLine.startsWith('|') && trimmedLine.endsWith('|')) {
// Check for separator line (allows alignment colons)
if (trimmedLine.includes('-') && trimmedLine.replace(/\|/g, '').replace(/-/g, '').replace(/:/g, '').trim() === '') {
separatorLineIndex = i;
// Check if the previous line looks like a header
if (i > 0 && lines[i-1].trim().startsWith('|') && lines[i-1].trim().endsWith('|')) {
headerLineIndex = i - 1;
break; // Found both, exit loop
}
} else if (headerLineIndex === -1 && separatorLineIndex === -1) {
// Potential header line if we haven't found one yet and not passed separator
headerLineIndex = i;
}
}
}
// Validate findings
if (headerLineIndex === -1 || separatorLineIndex === -1 || separatorLineIndex !== headerLineIndex + 1) {
console.warn("Structure de tableau Markdown non standard ou incomplète:", mdTableBlock.substring(0, 100));
// Fallback attempt if structure is simple (Header \n Separator \n ...)
if (lines.length >= 2 && lines[0].includes('|') && lines[1].includes('|') && lines[1].includes('-')) {
headerLineIndex = 0; separatorLineIndex = 1;
console.log("Fallback: Utilisation des deux premières lignes comme header/separator.");
} else {
return { head: [], body: [] }; // Cannot parse reliably
}
}
const headerLine = lines[headerLineIndex];
// Extract header cells, removing empty strings from start/end splits
const head = headerLine.split('|').map(cleanCell).filter((cell, i, arr) => i > 0 && i < arr.length - 1);
const body = lines.slice(separatorLineIndex + 1)
.map(line => {
const trimmedLine = line.trim();
// Ensure it's a valid table row line
if (!trimmedLine.startsWith('|') || !trimmedLine.endsWith('|')) return null;
// Extract row cells, removing empty strings from start/end splits
return trimmedLine.split('|').map(cleanCell).filter((cell, i, arr) => i > 0 && i < arr.length - 1);
})
// Keep only valid rows (not null) with the correct number of cells matching the header
.filter(row => row && row.length === head.length);
return { head: [head], body: body }; // Return jspdf-autotable compatible format
}
// Combine dissertation and table markdown for sequential processing
const fullMarkdownText = dissertationMarkdownRaw + "\n\n" + tableauMarkdownRaw;
const lines = fullMarkdownText.split('\n');
let currentBlock = ''; // Accumulates lines of text or a table
let isInsideTable = false; // Flag to track if we are processing table lines
for (let i = 0; i < lines.length; i++) {
const line = lines[i];
const trimmedLine = line.trim();
const isTableLine = trimmedLine.startsWith('|') && trimmedLine.endsWith('|');
// More robust separator check (allows for alignment colons like |:---|:--|)
const isSeparatorLine = isTableLine && trimmedLine.includes('-') && trimmedLine.replace(/\|/g, '').replace(/-/g, '').replace(/:/g, '').trim() === '';
if (isTableLine && !isSeparatorLine) { // Potential header or data row
if (!isInsideTable) {
// Check if the *next* line is a separator to confirm start of a table
const nextLineIndex = i + 1;
const nextLine = (nextLineIndex < lines.length) ? lines[nextLineIndex].trim() : null;
const nextLineIsSeparator = nextLine && nextLine.startsWith('|') && nextLine.endsWith('|') && nextLine.includes('-') && nextLine.replace(/\|/g, '').replace(/-/g, '').replace(/:/g, '').trim() === '';
if (nextLineIsSeparator) {
// Start of a table detected
if (currentBlock.trim()) { // Add any preceding text first
addTextToPage(currentBlock.trim());
}
currentBlock = line + '\n'; // Start accumulating table block
isInsideTable = true;
} else {
// Just a regular line containing pipes, treat as text
currentBlock += line + '\n';
}
} else {
// Already inside a table, accumulate the line
currentBlock += line + '\n';
}
} else if (isSeparatorLine) { // Separator line
if (isInsideTable) {
// Part of the current table block
currentBlock += line + '\n';
} else {
// Separator outside a table context? Treat as text.
// This might happen with badly formatted markdown.
currentBlock += line + '\n';
}
} else { // Not a table line (or separator)
if (isInsideTable) {
// End of the table block detected (current line is non-table)
console.log("Traitement bloc tableau détecté.");
const tableData = parseMarkdownTable(currentBlock.trim());
if (tableData.head.length > 0 && tableData.head[0].length > 0) {
if (cursorY + 30 > pageHeight - margin) { pdf.addPage(); cursorY = margin; } // Check space before adding table
pdf.autoTable({
head: tableData.head, body: tableData.body, startY: cursorY,
theme: 'grid', // 'striped', 'grid', 'plain'
styles: { fontSize: 9, cellPadding: 5, overflow: 'linebreak', font: "Helvetica" }, // Use standard font
headStyles: { fillColor: [67, 97, 238], textColor: [255, 255, 255], fontStyle: 'bold', halign: 'center' },
didParseCell: function (data) { data.cell.styles.valign = 'middle'; }, // Vertically align cell content
margin: { left: margin, right: margin }
});
cursorY = pdf.previousAutoTable.finalY + lineHeight; // Update cursor position
} else {
console.warn("Échec parsing bloc tableau ou tableau vide.");
addTextToPage("(Erreur: Bloc tableau non formaté ou vide)\n" + currentBlock.trim());
}
currentBlock = line + '\n'; // Start new text block with the current line
isInsideTable = false;
} else {
// Regular text line processing
if (trimmedLine.startsWith('#')) { // Handle headings
if (currentBlock.trim()) { addTextToPage(currentBlock.trim()); } // Add preceding text
const level = (trimmedLine.match(/^#+/) || [''])[0].length;
const titleText = trimmedLine.replace(/^#+\s*/, '');
addTitleToPage(titleText, level);
currentBlock = ''; // Reset block after title
} else {
// Accumulate regular text line
currentBlock += line + '\n';
}
}
}
}
// Process any remaining block after the loop finishes
if (currentBlock.trim()) {
if (isInsideTable) {
// The document ended while inside a table block
console.log("Traitement dernier bloc (tableau).");
const tableData = parseMarkdownTable(currentBlock.trim());
if (tableData.head.length > 0 && tableData.head[0].length > 0) {
if (cursorY + 30 > pageHeight - margin) { pdf.addPage(); cursorY = margin; }
pdf.autoTable({
head: tableData.head, body: tableData.body, startY: cursorY,
theme: 'grid', styles: { fontSize: 9, cellPadding: 5, overflow: 'linebreak', font: "Helvetica" },
headStyles: { fillColor: [67, 97, 238], textColor: [255, 255, 255], fontStyle: 'bold', halign: 'center' },
didParseCell: function (data) { data.cell.styles.valign = 'middle'; },
margin: { left: margin, right: margin }
});
} else {
console.warn("Échec parsing dernier bloc tableau ou tableau vide.");
addTextToPage("(Erreur: Dernier bloc tableau non formaté ou vide)\n" + currentBlock.trim());
}
} else {
// Last block was text
console.log("Ajout dernier bloc texte.");
addTextToPage(currentBlock.trim());
}
}
console.log("Contenu ajouté, sauvegarde du PDF...");
pdf.save('MariamAI-Analyse-Resultat.pdf');
} catch (error) {
console.error("Erreur lors de la génération du PDF mixte:", error);
alert("Une erreur s'est produite lors de la création du PDF mixte.");
} finally {
downloadPdfBtn.disabled = false;
downloadPdfBtn.textContent = "Télécharger en PDF";
}
});
// --- Initialisation ---
document.addEventListener('DOMContentLoaded', () => {
switchTab('dissertation');
checkDeepThinkLimit(); // Check limit on page load
// Améliorations tactiles génériques (peuvent rester pour les boutons/tabs)
const interactiveElements = document.querySelectorAll('.btn, .tab'); // Upload area has specific handlers now
interactiveElements.forEach(el => {
let touchMoved = false;
// Use passive: true where possible to improve scrolling performance
el.addEventListener('touchstart', function() {
touchMoved = false;
if (!this.disabled) {
// Apply visual feedback instantly on touch
this.style.transition = 'transform 0.1s ease, background-color 0.1s ease';
this.style.transform = 'scale(0.97)';
// Maybe slightly change background for immediate feedback
// Example: this.style.backgroundColor = 'rgba(0,0,0,0.05)';
}
}, { passive: true });
el.addEventListener('touchmove', function() {
touchMoved = true; // User is likely scrolling
this.style.transform = 'scale(1)'; // Reset visual feedback if touch moves
// Reset background if changed on touchstart
}, { passive: true });
el.addEventListener('touchend', function() {
// Reset transform only on touchend, giving the 'pressed' effect
this.style.transform = 'scale(1)';
// Reset background if changed on touchstart
}); // Not passive, might be needed for subsequent logic
// Keep mouse events for desktop compatibility
el.addEventListener('mousedown', function() { if (!this.disabled) { this.style.transform = 'scale(0.97)'; } });
el.addEventListener('mouseup', function() { this.style.transform = 'scale(1)'; });
el.addEventListener('mouseleave', function() { this.style.transform = 'scale(1)'; }); // Reset if mouse leaves while pressed
});
});
</script>
</body>
</html>