Hugging Face's logo

Spaces:
Docfile
/
Mphilo3
Running

App Files Community
Mphilo3
File size: 6,586 Bytes 
112c759
 
 
e21d62d
 
 
 
 
 
 
 
 
 
 
 
 
112c759
e21d62d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
112c759
 
e21d62d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
c62db4e
e21d62d
 
 
 
 
 
 
 
 
 
c62db4e
e21d62d
 
 
 
c62db4e
099fcfc
e21d62d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
112c759
e21d62d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
112c759
e21d62d
 
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
 
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exercice de Philosophie</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',
          }
        }
      }
    }
  </script>
  <style>
    .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;
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    .animate-fade-in {
      animation: fadeIn 1s ease-out;
    }
  </style>
</head>
<body class="bg-gray-50 min-h-screen">
  <div class="container mx-auto px-4 py-8 max-w-6xl">
    <!-- Header -->
    <header class="text-center mb-12 animate-fade-in">
      <h1 class="text-5xl font-bold text-primary mb-4">
        ✨ Exercice de Philosophie ✨
      </h1>
      <p class="text-gray-600 text-lg">
        Bienvenue ! Téléchargez vos images et laissez l'analyse philosophique opérer.
      </p>
    </header>

    <!-- Main Content -->
    <div class="grid md:grid-cols-2 gap-8">
      <!-- Upload Section -->
      <div class="bg-white rounded-xl shadow-lg p-6">
        <h2 class="text-2xl font-semibold text-primary mb-4">📷 Téléchargement d'images</h2>
        <div 
          class="upload-zone border-2 border-dashed border-primary rounded-lg p-8 text-center cursor-pointer hover:bg-gray-50 transition-colors"
          onclick="document.getElementById('image-upload').click()">
          <input type="file" id="image-upload" multiple accept="image/*" class="hidden">
          <div class="flex flex-col items-center">
            <svg class="h-12 w-12 text-primary mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
            </svg>
            <span class="text-gray-600">Cliquez ou glissez vos images ici</span>
          </div>
        </div>
        <div id="preview-container" class="mt-4 grid grid-cols-2 gap-4"></div>
      </div>

      <!-- Bouton de soumission (seulement) -->
      <div class="bg-white rounded-xl shadow-lg p-6 flex flex-col justify-center">
        <button id="submit-btn" class="w-full mt-6 bg-primary hover:bg-primary-dark text-white font-bold py-3 px-6 rounded-lg transition-all transform hover:-translate-y-1 hover:shadow-lg disabled:opacity-50 disabled:cursor-not-allowed">
          🚀 Soumettre
        </button>
      </div>
    </div>

    <!-- Résultats -->
    <div id="results" class="mt-12 bg-white rounded-xl 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 prose max-w-none"></div>
    </div>

    <!-- Footer -->
    <footer class="mt-12 text-center text-gray-600">
      <hr class="my-4">
      <p>© 2025 Mariam AI - Tous droits réservés.</p>
    </footer>
  </div>

  <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 = [];

      imageUpload.addEventListener('change', handleFileSelect);
      submitBtn.addEventListener('click', handleSubmit);

      function handleFileSelect(event) {
        uploadedFiles = Array.from(event.target.files);
        updatePreview();
      }

      function updatePreview() {
        previewContainer.innerHTML = '';
        uploadedFiles.forEach((file, index) => {
          const preview = document.createElement('div');
          preview.className = 'relative';
          preview.innerHTML = `
            <img src="${URL.createObjectURL(file)}" alt="Preview" class="w-full h-32 object-cover rounded-lg">
            <button onclick="removeImage(${index})" class="absolute top-2 right-2 bg-red-500 text-white rounded-full p-1 hover:bg-red-600">
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
              </svg>
            </button>
          `;
          previewContainer.appendChild(preview);
        });
        submitBtn.disabled = uploadedFiles.length === 0;
      }

      function removeImage(index) {
        uploadedFiles.splice(index, 1);
        updatePreview();
      }

      async function handleSubmit() {
        if (uploadedFiles.length === 0) {
          alert('Veuillez sélectionner au moins une image.');
          return;
        }

        const formData = new FormData();
        // On n'envoie plus de type d'analyse, l'analyse est toujours philosophique.
        uploadedFiles.forEach(file => formData.append('images', file));

        submitBtn.disabled = true;
        submitBtn.innerHTML = '<span class="animate-pulse">Analyse en cours...</span>';

        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');
          analysisResult.innerHTML = marked.parse(data.result);
          resultsSection.scrollIntoView({ behavior: 'smooth' });
        } catch (error) {
          alert('Erreur lors de l\'analyse: ' + error.message);
        } finally {
          submitBtn.disabled = false;
          submitBtn.innerHTML = '🚀 Soumettre';
        }
      }

      window.removeImage = removeImage;
    });
  </script>
</body>
</html>