Hugging Face's logo

Spaces:
SamiKLN
/
DocImageAI-Explorer
Sleeping

App Files Community
DocImageAI-Explorer
File size: 6,669 Bytes
70f0b76
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DocImageAI Explorer - Analyse de Documents et Images</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <!-- Fond vidéo -->
    <video autoplay muted loop id="bg-video">
        <source src="background.mp4" type="video/mp4">
        Votre navigateur ne supporte pas les vidéos HTML5.
    </video>

    <!-- Conteneur principal -->
    <div class="container">
        <header>
            <h1>DocImageAI Explorer</h1>
            <p class="subtitle">Analyse intelligente de documents et images avec IA</p>
        </header>

        <!-- Navigation par onglets -->
        <div class="tabs">
            <button class="tab-button active" onclick="openTab('upload')">Upload</button>
            <button class="tab-button" onclick="openTab('summarize')">Résumé</button>
            <button class="tab-button" onclick="openTab('caption')">Images</button>
            <button class="tab-button" onclick="openTab('qa')">Questions</button>
            <button class="tab-button" onclick="openTab('about')">À propos</button>
        </div>

        <!-- Onglet Upload -->
        <div id="upload" class="tab-content active">
            <h2><i class="icon">📤</i> Upload de Fichiers</h2>
            <div class="upload-area" id="dropArea">
                <input type="file" id="fileInput" multiple accept=".pdf,.docx,.pptx,.xlsx,.jpg,.jpeg,.png">
                <div class="upload-icon">⬆️</div>
                <p>Glissez-déposez vos fichiers ici ou cliquez pour parcourir</p>
                <p class="file-types">Formats supportés : PDF, DOCX, PPTX, XLSX, JPG, PNG</p>
            </div>
            <div id="fileList" class="file-list">
                <p class="empty-message">Aucun fichier uploadé</p>
            </div>
            <div id="uploadStatus" class="status-message"></div>
        </div>

        <!-- Onglet Résumé -->
        <div id="summarize" class="tab-content">
            <h2><i class="icon">📝</i> Résumé de Document</h2>
            <div class="form-group">
                <label for="summaryFile">Sélectionnez un document :</label>
                <select id="summaryFile" class="file-selector">
                    <option value="">-- Choisir un document --</option>
                </select>
            </div>
            <div class="action-area">
                <button id="summarizeBtn" class="action-btn">
                    <span class="btn-icon">✍️</span> Générer le Résumé
                </button>
                <div class="loading-spinner" id="summarySpinner"></div>
            </div>
            <div id="summaryResult" class="result-box">
                <p class="placeholder">Votre résumé apparaîtra ici...</p>
            </div>
        </div>

        <!-- Onglet Images -->
        <div id="caption" class="tab-content">
            <h2><i class="icon">🖼️</i> Analyse d'Image</h2>
            <div class="form-group">
                <label for="captionFile">Sélectionnez une image :</label>
                <select id="captionFile" class="file-selector">
                    <option value="">-- Choisir une image --</option>
                </select>
            </div>
            <div id="imagePreview" class="image-preview">
                <div class="preview-placeholder">
                    <div class="placeholder-icon">🖼️</div>
                    <p>Aperçu de l'image</p>
                </div>
            </div>
            <div class="action-area">
                <button id="captionBtn" class="action-btn">
                    <span class="btn-icon">🔍</span> Analyser l'Image
                </button>
                <div class="loading-spinner" id="captionSpinner"></div>
            </div>
            <div id="captionResult" class="result-box">
                <p class="placeholder">La description de votre image apparaîtra ici...</p>
            </div>
        </div>

        <!-- Onglet Questions -->
        <div id="qa" class="tab-content">
            <h2><i class="icon">❓</i> Questions & Réponses</h2>
            <div class="form-group">
                <label for="qaFile">Document/Image (optionnel) :</label>
                <select id="qaFile" class="file-selector">
                    <option value="">-- Aucun --</option>
                </select>
            </div>
            <div class="form-group">
                <label for="questionInput">Votre question :</label>
                <textarea id="questionInput" rows="4" placeholder="Posez une question sur le document ou l'image..."></textarea>
            </div>
            <div class="action-area">
                <button id="askBtn" class="action-btn">
                    <span class="btn-icon">💡</span> Poser la Question
                </button>
                <div class="loading-spinner" id="qaSpinner"></div>
            </div>
            <div id="answerResult" class="result-box">
                <p class="placeholder">La réponse à votre question apparaîtra ici...</p>
            </div>
        </div>

        <!-- Onglet À propos -->
        <div id="about" class="tab-content">
            <h2><i class="icon">ℹ️</i> À propos</h2>
            <div class="about-content">
                <div class="about-card">
                    <h3>Fonctionnalités</h3>
                    <ul>
                        <li>📄 Résumé automatique de documents</li>
                        <li>🖼️ Description d'images par IA</li>
                        <li>❓ Réponses à vos questions</li>
                        <li>⚡ Traitement rapide</li>
                    </ul>
                </div>
                <div class="about-card">
                    <h3>Technologies</h3>
                    <ul>
                        <li>🧠 Modèles Hugging Face</li>
                        <li>🐍 Backend FastAPI</li>
                        <li>⚛️ Frontend moderne</li>
                        <li>🐳 Dockerisé</li>
                    </ul>
                </div>
            </div>
            <div class="footer">
                <p>Projet développé par Kaloun & Tif - © 2025</p>
                <p class="version">Version 1.0.0</p>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>