Hugging Face's logo

Spaces:
Docfile
/
HistoireGeo
Sleeping

App Files Community
Docfile commited on
Commit
bc59ba6
·
verified ·
1 Parent(s): 7e3e885

Create templates/histoire.html

Browse files
Files changed (1) hide show
  1. templates/histoire.html +105 -0
templates/histoire.html ADDED
@@ -0,0 +1,105 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Histoire et Géographie</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.0.2/marked.min.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/@gradio/[email protected]/dist/index.min.js"></script>
10
+ <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
11
+ <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
12
+ </head>
13
+ <body class="bg-gray-100 min-h-screen">
14
+ <nav class="bg-blue-600 p-4">
15
+ <h1 class="text-white text-2xl font-bold">Histoire et Géographie</h1>
16
+ </nav>
17
+ <div class="container mx-auto p-8">
18
+ <div class="mb-8 bg-white rounded-lg shadow-lg p-6">
19
+ <h2 class="text-xl font-bold mb-4">Histoire type 1&3</h2>
20
+ <form id="histoire-form" class="space-y-4">
21
+ <div>
22
+ <label for="sujet-histoire" class="block text-sm font-medium text-gray-700">Sujet:</label>
23
+ <textarea id="sujet-histoire" rows="2" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"></textarea>
24
+ </div>
25
+ <div>
26
+ <label for="point1-histoire" class="block text-sm font-medium text-gray-700">Point 1:</label>
27
+ <input type="text" id="point1-histoire" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
28
+ </div>
29
+ <div>
30
+ <label for="point2-histoire" class="block text-sm font-medium text-gray-700">Point 2:</label>
31
+ <input type="text" id="point2-histoire" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
32
+ </div>
33
+ <div>
34
+ <label for="point3-histoire" class="block text-sm font-medium text-gray-700">Point 3:</label>
35
+ <input type="text" id="point3-histoire" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
36
+ </div>
37
+ <button type="submit" class="w-full bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Générer</button>
38
+ </form>
39
+ <div id="histoire-output" class="mt-4 p-4 bg-gray-50 rounded-lg"></div>
40
+ </div>
41
+
42
+ <div class="mb-8 bg-white rounded-lg shadow-lg p-6">
43
+ <h2 class="text-xl font-bold mb-4">Histoire type 2</h2>
44
+ <form id="histoire-type2-form" class="space-y-4">
45
+ <div>
46
+ <label for="sujet-histoire-type2" class="block text-sm font-medium text-gray-700">Sujet:</label>
47
+ <textarea id="sujet-histoire-type2" rows="2" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"></textarea>
48
+ </div>
49
+ <div>
50
+ <label for="point1-histoire-type2" class="block text-sm font-medium text-gray-700">Point 1:</label>
51
+ <input type="text" id="point1-histoire-type2" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
52
+ </div>
53
+ <div>
54
+ <label for="point2-histoire-type2" class="block text-sm font-medium text-gray-700">Point 2:</label>
55
+ <input type="text" id="point2-histoire-type2" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
56
+ </div>
57
+ <div>
58
+ <label for="point3-histoire-type2" class="block text-sm font-medium text-gray-700">Point 3:</label>
59
+ <input type="text" id="point3-histoire-type2" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
60
+ </div>
61
+ <button type="submit" class="w-full bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Générer</button>
62
+ </form>
63
+ <div id="histoire-type2-output" class="mt-4 p-4 bg-gray-50 rounded-lg"></div>
64
+ </div>
65
+
66
+ <div class="bg-white rounded-lg shadow-lg p-6">
67
+ <h2 class="text-xl font-bold mb-4">Géographie</h2>
68
+ <form id="geographie-form" class="space-y-4">
69
+ <div>
70
+ <label for="sujet-geographie" class="block text-sm font-medium text-gray-700">Sujet:</label>
71
+ <textarea id="sujet-geographie" rows="3" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"></textarea>
72
+ </div>
73
+ <button type="submit" class="w-full bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Générer</button>
74
+ </form>
75
+ <div id="geographie-output" class="mt-4 p-4 bg-gray-50 rounded-lg"></div>
76
+ </div>
77
+ </div>
78
+
79
+ <script>
80
+ async function submitForm(formId, outputId, endpoint) {
81
+ const form = document.getElementById(formId);
82
+ const output = document.getElementById(outputId);
83
+
84
+ form.addEventListener('submit', async (e) => {
85
+ e.preventDefault();
86
+ output.innerHTML = '<p>Chargement en cours...</p>';
87
+
88
+ const formData = new FormData(form);
89
+ const response = await fetch(endpoint, {
90
+ method: 'POST',
91
+ body: formData
92
+ });
93
+
94
+ const result = await response.json();
95
+ output.innerHTML = marked.parse(result.output);
96
+ MathJax.typesetPromise([output]);
97
+ });
98
+ }
99
+
100
+ submitForm('histoire-form', 'histoire-output', '/api/histoire');
101
+ submitForm('histoire-type2-form', 'histoire-type2-output', '/api/histoire-type2');
102
+ submitForm('geographie-form', 'geographie-output', '/api/geographie');
103
+ </script>
104
+ </body>
105
+ </html>