File size: 6,652 Bytes
112c759 099fcfc 112c759 099fcfc 112c759 099fcfc 112c759 099fcfc 112c759 099fcfc 112c759 099fcfc 112c759 099fcfc 112c759 099fcfc 112c759 099fcfc 112c759 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 |
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mariam Anglais</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#4CAF50',
'primary-dark': '#3e8e41',
},
typography: {
DEFAULT: {
css: {
maxWidth: 'none',
},
},
},
}
}
}
</script>
<style>
/* Styles spécifiques pour le Markdown */
.markdown-content {
width: 100%;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
hyphens: auto;
}
.markdown-content pre {
white-space: pre-wrap;
word-wrap: break-word;
padding: 1rem;
background-color: #f3f4f6;
border-radius: 0.5rem;
margin: 1rem 0;
overflow-x: auto;
}
.markdown-content code {
background-color: #f3f4f6;
padding: 0.2rem 0.4rem;
border-radius: 0.25rem;
font-family: ui-monospace, monospace;
}
.markdown-content p {
margin: 1rem 0;
line-height: 1.7;
}
.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4 {
font-weight: bold;
margin: 1.5rem 0 1rem 0;
line-height: 1.3;
}
.markdown-content h1 { font-size: 1.875rem; }
.markdown-content h2 { font-size: 1.5rem; }
.markdown-content h3 { font-size: 1.25rem; }
.markdown-content h4 { font-size: 1.125rem; }
.markdown-content ul,
.markdown-content ol {
margin: 1rem 0;
padding-left: 1.5rem;
}
.markdown-content ul { list-style-type: disc; }
.markdown-content ol { list-style-type: decimal; }
.markdown-content li {
margin: 0.5rem 0;
}
.markdown-content blockquote {
border-left: 4px solid #e5e7eb;
padding-left: 1rem;
margin: 1rem 0;
color: #4b5563;
}
/* Ajustements pour mobile */
@media (max-width: 640px) {
.markdown-content {
font-size: 0.9375rem;
}
.markdown-content pre {
padding: 0.75rem;
font-size: 0.875rem;
}
.markdown-content h1 { font-size: 1.5rem; }
.markdown-content h2 { font-size: 1.25rem; }
.markdown-content h3 { font-size: 1.125rem; }
.markdown-content h4 { font-size: 1rem; }
}
</style>
</head>
<body class="bg-gray-50 min-h-screen">
<!-- [Previous body content remains the same until the results section] -->
<!-- Results Section with improved Markdown support -->
<div id="results" class="mt-12 bg-white rounded-lg shadow-lg p-6 hidden">
<h2 class="text-2xl font-semibold text-primary mb-4">📝 Résultat de l'analyse</h2>
<div id="analysis-result" class="markdown-content"></div>
</div>
<!-- [Rest of the body content remains the same until the script section] -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const imageUpload = document.getElementById('image-upload');
const previewContainer = document.getElementById('preview-container');
const submitBtn = document.getElementById('submit-btn');
const resultsSection = document.getElementById('results');
const analysisResult = document.getElementById('analysis-result');
let uploadedFiles = [];
// Configure marked options for better Markdown rendering
marked.setOptions({
breaks: true, // Enable line breaks
gfm: true, // Enable GitHub Flavored Markdown
headerIds: false, // Disable header IDs to prevent conflicts
mangle: false, // Disable mangling to prevent emoji issues
smartLists: true, // Enable smart lists
smartypants: true, // Enable smart punctuation
xhtml: true // Enable XHTML output
});
// [Previous event listeners and functions remain the same]
async function handleSubmit() {
const formData = new FormData();
const analysisType = document.querySelector('input[name="analysis_type"]:checked')?.value;
if (!analysisType || uploadedFiles.length === 0) {
alert('Veuillez sélectionner un type d\'analyse et au moins une image.');
return;
}
formData.append('analysis_type', analysisType);
uploadedFiles.forEach(file => formData.append('images', file));
submitBtn.disabled = true;
submitBtn.innerHTML = 'Analyse en cours...';
try {
const response = await fetch('/analyze', {
method: 'POST',
body: formData
});
const data = await response.json();
if (data.error) {
throw new Error(data.error);
}
resultsSection.classList.remove('hidden');
// Convert Markdown to HTML with proper spacing
analysisResult.innerHTML = marked.parse(data.result);
// Scroll to results
resultsSection.scrollIntoView({ behavior: 'smooth' });
} catch (error) {
alert('Erreur lors de l\'analyse: ' + error.message);
} finally {
submitBtn.disabled = false;
submitBtn.innerHTML = '🚀 Soumettre';
}
}
// Make removeImage function global
window.removeImage = removeImage;
});
</script>
</body>
</html> |