Hugging Face's logo

Spaces:
Hakim18
/
Space2
Sleeping

App Files Community
Space2
File size: 2,775 Bytes
11133f2
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>AskLAQ</title>

<style>

body { font-family: Arial; margin:20px; background:#fafafa; }

h2 { text-align:center; margin-bottom:20px; }

#chat { border:1px solid #ccc; background:#fff; padding:12px; border-radius:10px; height:400px; overflow-y:auto; }

#question { width:70%; padding:10px; border-radius:8px; border:1px solid #ccc; font-size:14px; }

#sendBtn { padding:10px 16px; font-size:14px; border:none; border-radius:8px; background:#1976D2; color:#fff; cursor:pointer; }

#sendBtn:hover { background:#1565C0; }

.user-msg { background:#E3F2FD; padding:10px; border-radius:10px; margin:6px 0; }

.bot-msg { background:#F1F8E9; padding:10px; border-radius:10px; margin:6px 0; }

.recs a { color:#1565C0; cursor:pointer; text-decoration:none; display:block; margin-left:12px; }

.recs a:hover { text-decoration:underline; }

#info { margin-top:10px; background:#f5f5f5; padding:10px; border-radius:8px; border:1px solid #e0e0e0; }

#conf-bar { width:100%; height:18px; background:#ddd; border-radius:8px; margin:6px 0; }

#conf-fill { height:100%; background:#43A047; width:0%; border-radius:8px; text-align:right; padding-right:4px; color:#fff; font-size:12px; line-height:18px; }

.stars { margin-top:8px; }

.star { font-size:26px; color:#FFC107; cursor:pointer; margin-right:4px; }

</style>
</head>

<body>

<h2>Assistant d’Analyse Conversationnelle</h2>

<div id="chat">
    <div>💬 <b>Bienvenue 👋</b><br>Analyse des relations <i>Pourquoi / Comment</i>.</div>
</div>

<div style="margin-top:12px;">
    <input type="text" id="question" placeholder="Tapez votre question…">
    <button id="sendBtn">🚀 Envoyer</button>
</div>

<!-- Bloc information + satisfaction -->
<div id="info">
    <p>🧭 Intent : <span id="intent">—</span></p>
    <p>🎯 Question correspondante : <span id="matched">—</span></p>

    <div id="conf-bar">
        <div id="conf-fill">0%</div>
    </div>

    <!-- ⭐ Étoiles de satisfaction -->
    <div class="stars">
        <span class="star" data-value="1">☆</span>
        <span class="star" data-value="2">☆</span>
        <span class="star" data-value="3">☆</span>
        <span class="star" data-value="4">☆</span>
        <span class="star" data-value="5">☆</span>
    </div>

    <!-- 👉 LIEN QUESTIONNAIRE (TOUJOURS VISIBLE) -->
    <div style="margin-top:6px; text-align:left;">
        👉 <a href="https://forms.gle/9kHtHPrhTpBcFJhJ7"

             target="_blank"

             style="color:#1976D2; font-weight:bold; text-decoration:none;">
            Questionnaire de satisfaction
        </a>
    </div>
</div>

<script src="/static/script.js"></script>

</body>
</html>