Hugging Face's logo

Spaces:
OrganizedProgrammers
/
ReOpenAI
Sleeping

App Files Community
ReOpenAI
File size: 4,660 Bytes
14f00fb
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
d4292c3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
14f00fb
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Client WebSocket Simple</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            margin: 40px;
            background-color: #f0f2f5;
        }
        .container {
            max-width: 600px;
            margin: auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        #status {
            padding: 10px;
            border-radius: 5px;
            font-weight: bold;
            margin-bottom: 15px;
        }
        .connected {
            background-color: #e6ffed;
            color: #2f6f43;
        }
        .disconnected {
            background-color: #ffeef0;
            color: #c53030;
        }
        #logs {
            list-style-type: none;
            padding: 0;
            margin-top: 20px;
            background-color: #f7f7f7;
            border: 1px solid #ddd;
            border-radius: 5px;
            height: 200px;
            overflow-y: scroll;
            padding: 10px;
        }
        #logs li {
            padding: 5px;
            border-bottom: 1px solid #eee;
        }
    </style>
</head>
<body>

    <div class="container">
        <h2>Client WebSocket pour API Mock</h2>
        <div id="status" class="disconnected">Déconnecté</div>
        
        <h3>Logs de Communication :</h3>
        <ul id="logs">
            <li>En attente de connexion...</li>
        </ul>
    </div>

    <script>
        const statusDiv = document.getElementById('status');
        const logsList = document.getElementById('logs');
        let ws;

        function addLog(message) {
            const li = document.createElement('li');
            li.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
            logsList.appendChild(li);
            logsList.scrollTop = logsList.scrollHeight; // Auto-scroll
        }

        function connect() {
            const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
            const wsUrl = `${protocol}//${window.location.host}/ws`;
            ws = new WebSocket(wsUrl);

            ws.onopen = function() {
                statusDiv.textContent = 'Connecté';
                statusDiv.className = 'connected';
                addLog('Connexion WebSocket établie.');
            };

            ws.onmessage = function(event) {
                try {
                    const message = JSON.parse(event.data);
                    addLog(`Action reçue du serveur : "${message.action}" avec la donnée : "${message.data}"`);

                    let responsePayload;

                    // Décide quoi faire en fonction de l'action demandée
                    switch (message.action) {
                        case "get_sentence":
                            responsePayload = "Ceci est la phrase de réponse du client JavaScript.";
                            break;
                        case "reverse_string":
                            responsePayload = (message.data || "").split('').reverse().join('');
                            break;
                        default:
                            responsePayload = "Action inconnue.";
                            break;
                    }

                    // Construit la réponse JSON incluant l'ID de la requête
                    const response = {
                        request_id: message.request_id,
                        response: responsePayload
                    };

                    addLog(`Envoi de la réponse : "${response.response}"`);
                    ws.send(JSON.stringify(response));

                } catch (error) {
                    addLog("Erreur: Impossible de traiter le message du serveur.");
                    console.error("Erreur de parsing JSON:", error);
                }
            };

            ws.onclose = function() {
                statusDiv.textContent = 'Déconnecté';
                statusDiv.className = 'disconnected';
                addLog('Connexion WebSocket fermée. Tentative de reconnexion dans 3 secondes...');
                setTimeout(connect, 3000); 
            };

            ws.onerror = function(error) {
                addLog('Erreur WebSocket.');
                console.error('WebSocket Error:', error);
                ws.close();
            };
        }

        connect();
    </script>

</body>
</html>