Hugging Face's logo

Spaces:
ANESBENYELLES
/
anes
Sleeping

App Files Community
anes
File size: 8,532 Bytes 
fb63210
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AI Tools Interface</title>
  <link rel="stylesheet" href="/static/styles.css">
  <link rel="icon" href="/static/favicon.ico" type="image/x-icon">
</head>
<body>
  <div class="container">
    <header>
      <h1>AI Tools Interface</h1>
      <p class="subtitle">Outils d'IA pour le traitement de documents et d'images</p>
    </header>
    
    <div class="tab-container">
      <!-- Navigation des onglets -->
      <nav class="tab-nav">
        <button onclick="openTab('summarize')" class="tab-btn active" data-tab="summarize" aria-selected="true" aria-controls="summarize">
          <i class="icon">📝</i> Résumer
        </button>
        <button onclick="openTab('interpret-image')" class="tab-btn" data-tab="interpret-image" aria-selected="false" aria-controls="interpret-image">
          <i class="icon">🖼️</i> Légende Image
        </button>
        <button onclick="openTab('answer-question')" class="tab-btn" data-tab="answer-question" aria-selected="false" aria-controls="answer-question">
          <i class="icon">❓</i> Réponse Question
        </button>
        <button onclick="openTab('generate-visualization')" class="tab-btn" data-tab="generate-visualization" aria-selected="false" aria-controls="generate-visualization">
          <i class="icon">📊</i> Visualisation
        </button>
        <button onclick="openTab('translate-document')" class="tab-btn" data-tab="translate-document" aria-selected="false" aria-controls="translate-document">
          <i class="icon">🌐</i> Traduire
        </button>
      </nav>

      <!-- Contenu des onglets -->
      <div class="tab-content-wrapper">
        <!-- Onglet Résumer -->
        <section id="summarize" class="tab-content" role="tabpanel" aria-labelledby="summarize-tab">
          <h2>Résumer un document</h2>
          <form id="summarize-form" class="form">
            <div class="file-upload-container">
              <input type="file" id="summarize-file" accept=".txt,.pdf,.docx,.pptx" class="hidden-file" required />
              <label for="summarize-file" class="file-upload">
                <span class="file-icon">📁</span>
                <span class="file-label">Sélectionner un fichier (TXT, PDF, DOCX, PPTX)</span>
              </label>
              <div id="summarize-filename" class="filename-display"></div>
            </div>
            <button type="submit" class="btn btn-blue">
              <span class="btn-icon">✨</span> Générer le résumé
            </button>
          </form>
          <div id="summarize-result" class="result-box">
            <div class="placeholder">Votre résumé apparaîtra ici...</div>
          </div>
        </section>

        <!-- Onglet Légende Image -->
        <section id="interpret-image" class="tab-content hidden" role="tabpanel" aria-labelledby="interpret-image-tab">
          <h2>Générer une légende d'image</h2>
          <form id="interpret-image-form" class="form">
            <div class="file-upload-container">
              <input type="file" id="interpret-image-file" accept="image/*" class="hidden-file" required />
              <label for="interpret-image-file" class="file-upload">
                <span class="file-icon">🖼️</span>
                <span class="file-label">Sélectionner une image (JPG, PNG, etc.)</span>
              </label>
              <div id="interpret-image-filename" class="filename-display"></div>
            </div>
            <button type="submit" class="btn btn-purple">
              <span class="btn-icon">🔍</span> Générer la légende
            </button>
          </form>
          <div id="interpret-image-result" class="result-box">
            <div class="placeholder">La description de votre image apparaîtra ici...</div>
          </div>
        </section>

        <!-- Onglet Réponse Question -->
        <section id="answer-question" class="tab-content hidden" role="tabpanel" aria-labelledby="answer-question-tab">
          <h2>Poser une question à un document</h2>
          <form id="answer-question-form" class="form">
            <div class="form-group">
              <label for="question-input" class="form-label">Votre question</label>
              <textarea id="question-input" placeholder="Posez votre question ici..." class="textarea" rows="3" required></textarea>
            </div>
            <div class="file-upload-container">
              <input type="file" id="answer-question-file" accept=".txt,.pdf,.docx" class="hidden-file" />
              <label for="answer-question-file" class="file-upload">
                <span class="file-icon">📄</span>
                <span class="file-label">Document de référence (optionnel)</span>
              </label>
              <div id="answer-question-filename" class="filename-display"></div>
            </div>
            <button type="submit" class="btn btn-green">
              <span class="btn-icon">💡</span> Obtenir la réponse
            </button>
          </form>
          <div id="answer-question-result" class="result-box">
            <div class="placeholder">La réponse à votre question apparaîtra ici...</div>
          </div>
        </section>

        <!-- Onglet Visualisation -->
        <section id="generate-visualization" class="tab-content hidden" role="tabpanel" aria-labelledby="generate-visualization-tab">
          <h2>Générer une visualisation</h2>
          <form id="generate-visualization-form" class="form">
            <div class="file-upload-container">
              <input type="file" id="visualization-file" accept=".xlsx,.xls,.csv" class="hidden-file" required />
              <label for="visualization-file" class="file-upload">
                <span class="file-icon">📈</span>
                <span class="file-label">Sélectionner un fichier Excel/CSV</span>
              </label>
              <div id="visualization-filename" class="filename-display"></div>
            </div>
            <div class="form-group">
              <label for="visualization-request" class="form-label">Type de visualisation</label>
              <input type="text" id="visualization-request" placeholder="Ex: histogramme des ventes par mois" class="input-text" required>
            </div>
            <button type="submit" class="btn btn-indigo">
              <span class="btn-icon">📊</span> Générer le graphique
            </button>
          </form>
          <div id="generate-visualization-result" class="result-box">
            <div class="placeholder">Votre visualisation apparaîtra ici...</div>
          </div>
        </section>

        <!-- Onglet Traduction -->
        <section id="translate-document" class="tab-content hidden" role="tabpanel" aria-labelledby="translate-document-tab">
          <h2>Traduire un document</h2>
          <form id="translate-document-form" class="form">
            <div class="file-upload-container">
              <input type="file" id="translate-file" accept=".txt,.docx,.pdf" class="hidden-file" required />
              <label for="translate-file" class="file-upload">
                <span class="file-icon">📑</span>
                <span class="file-label">Sélectionner un document</span>
              </label>
              <div id="translate-filename" class="filename-display"></div>
            </div>
            <div class="form-group">
              <label for="target-language" class="form-label">Langue cible</label>
              <select id="target-language" class="select" required>
                <option value="" disabled selected>Choisir une langue</option>
                <option value="en">Anglais</option>
                <option value="fr">Français</option>
                <option value="es">Espagnol</option>
                <option value="de">Allemand</option>
                <option value="it">Italien</option>
                <option value="pt">Portugais</option>
              </select>
            </div>
            <button type="submit" class="btn btn-pink">
              <span class="btn-icon">🔤</span> Traduire
            </button>
          </form>
          <div id="translate-document-result" class="result-box">
            <div class="placeholder">La traduction apparaîtra ici...</div>
          </div>
        </section>
      </div>
    </div>
  </div>
  
  <script src="/static/script.js"></script>
</body>
</html>