Hugging Face's logo

Spaces:
Guymy97
/
https-huggingface-co-spaces-guymy97
Running

App Files Community
Guymy97 commited on
Commit
6a172c5
·
verified ·
1 Parent(s): 3e0af69

Deploy from anycoder

Browse files
Files changed (1) hide show
  1. index.html +378 -18
index.html CHANGED
@@ -1,19 +1,379 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ === index.html ===
2
+ <!DOCTYPE html>
3
+ <html lang="fr">
4
+ <head>
5
+ <meta charset="UTF-8" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
7
+ <title>NeoIPTV - Connexion & Catalogue + Assistant IA</title>
8
+ <meta name="color-scheme" content="dark light" />
9
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
11
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
12
+ <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
13
+ <link rel="stylesheet" href="style.css" />
14
+ <script type="module">
15
+ import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.7.3';
16
+ window.__TRANSFORMERS_PIPELINE__ = pipeline;
17
+ </script>
18
+ </head>
19
+ <body>
20
+ <header class="appbar">
21
+ <div class="appbar-inner">
22
+ <a class="brand" href="#" id="brandHome">
23
+ <div class="logo" aria-hidden="true"></div>
24
+ <div>
25
+ <h1>NeoIPTV</h1>
26
+ <small>Connexion & Catalogue</small>
27
+ </div>
28
+ </a>
29
+
30
+ <div class="top-actions">
31
+ <a href="#" id="scanBtn"><i class='bx bx-qr-scan'></i> Scanner QR</a>
32
+ <a href="#" id="helpBtn"><i class='bx bx-help-circle'></i> Aide</a>
33
+ </div>
34
+
35
+ <div class="header-right">
36
+ <a class="anycoder" href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener">Built with anycoder</a>
37
+ <div class="gpu-toggle">
38
+ <label class="switch">
39
+ <input type="checkbox" id="gpuToggle" aria-label="Activer l'exécution GPU (WebGPU)">
40
+ <span class="slider"></span>
41
+ </label>
42
+ <span id="gpuLabel" class="gpu-label" aria-live="polite">CPU</span>
43
+ </div>
44
+ <button class="theme-toggle" id="themeToggle" title="Basculer le thème" aria-label="Basculer le thème clair/sombre"><i class='bx bx-moon'></i></button>
45
+ </div>
46
+ </div>
47
+ </header>
48
+
49
+ <main>
50
+ <section class="content">
51
+ <div class="hero">
52
+ <div class="hero-inner">
53
+ <h2>Vos chaînes, films et séries en un clic</h2>
54
+ <p>Connectez-vous avec votre méthode préférée puis profitez du direct, de la VOD et des séries. Lecteur HLS intégré (m3u8).</p>
55
+ </div>
56
+ </div>
57
+
58
+ <div class="tabs" role="tablist">
59
+ <button class="tab active" data-tab="connect" role="tab" aria-selected="true"><i class='bx bx-log-in-circle'></i> Connexion</button>
60
+ <button class="tab" data-tab="live" role="tab" aria-selected="false"><i class='bx bx-play-circle'></i> Direct</button>
61
+ <button class="tab" data-tab="vod" role="tab" aria-selected="false"><i class='bx bx-movie-play'></i> Films</button>
62
+ <button class="tab" data-tab="series" role="tab" aria-selected="false"><i class='bx bx-collection'></i> Séries</button>
63
+ <button class="tab" data-tab="favs" role="tab" aria-selected="false"><i class='bx bx-star'></i> Favoris</button>
64
+ <button class="tab" data-tab="recent" role="tab" aria-selected="false"><i class='bx bx-time-five'></i> Récents</button>
65
+ </div>
66
+
67
+ <div class="toolbar" id="catalogToolbar">
68
+ <div class="searchbar">
69
+ <i class='bx bx-search' aria-hidden="true"></i>
70
+ <input id="searchInput" type="search" placeholder="Rechercher dans tous les onglets…" aria-label="Rechercher"/>
71
+ <button id="clearSearch" title="Effacer" class="btn ghost" aria-label="Effacer la recherche" style="border:none;background:transparent;color:var(--muted);padding:0;display:grid;place-items:center"><i class='bx bx-x'></i></button>
72
+ </div>
73
+ <div class="filters" role="group" aria-label="Filtres">
74
+ <button class="filter-chip active" data-filter="all" aria-pressed="true"><i class='bx bx-layer'></i> Tous</button>
75
+ <button class="filter-chip" data-filter="hd" aria-pressed="false"><i class='bx bx-video'></i> HD/4K</button>
76
+ <button class="filter-chip" data-filter="recent" aria-pressed="false"><i class='bx bx-bolt-circle'></i> Nouveautés</button>
77
+ </div>
78
+ </div>
79
+
80
+ <section id="grid-connect" class="card page" aria-label="Connexion" style="padding: clamp(16px, 2.5vw, 22px);">
81
+ <div class="connect-wrap">
82
+ <div class="connect-panel">
83
+ <div class="connect-tabs" role="tablist" aria-label="Modes de connexion">
84
+ <button class="connect-tab active" data-mode="mac"><i class='bx bx-barcode'></i> Code MAC</button>
85
+ <button class="connect-tab" data-mode="xtreme"><i class='bx bx-link'></i> Xtream Codes</button>
86
+ <button class="connect-tab" data-mode="m3u"><i class='bx bx-file'></i> M3U/M3U8</button>
87
+ <button class="connect-tab" data-mode="qr"><i class='bx bx-qr'></i> QR Code</button>
88
+ </div>
89
+
90
+ <form id="form-mac" class="form" autocomplete="on" novalidate>
91
+ <div class="field">
92
+ <label for="macAddress">Adresse MAC</label>
93
+ <div class="input">
94
+ <i class='bx bx-chip' aria-hidden="true"></i>
95
+ <input id="macAddress" name="mac" inputmode="text" placeholder="AB:CD:EF:12:34:56" maxlength="17" aria-describedby="macHelp" />
96
+ </div>
97
+ <div class="helper" id="macHelp">Format accepté: XX:XX:XX:XX:XX:XX (lettres et chiffres)</div>
98
+ </div>
99
+ <div class="field">
100
+ <label for="portalMac">Portail</label>
101
+ <div class="input">
102
+ <i class='bx bx-globe' aria-hidden="true"></i>
103
+ <input id="portalMac" name="portal" placeholder="https://mon-portail.example.com" />
104
+ </div>
105
+ </div>
106
+ <div class="cta">
107
+ <button type="button" class="btn" id="loginMac"><i class='bx bx-log-in'></i> Se connecter</button>
108
+ <button type="button" class="btn secondary" id="genMac"><i class='bx bx-dice-6'></i> Générer MAC</button>
109
+ </div>
110
+ <div class="success" id="macSuccess" role="status"><i class='bx bx-check-shield'></i> Connecté (démo) — vos playlists seront chargées.</div>
111
+ <div class="error" id="macError" role="alert"><i class='bx bx-error'></i> MAC invalide. Vérifiez le format.</div>
112
+ </form>
113
+
114
+ <form id="form-xtreme" class="form hidden" autocomplete="on" novalidate>
115
+ <div class="row-2">
116
+ <div class="field">
117
+ <label for="xtHost">Hôte/URL</label>
118
+ <div class="input">
119
+ <i class='bx bx-globe' aria-hidden="true"></i>
120
+ <input id="xtHost" placeholder="ex: http://example.com:8080" />
121
+ </div>
122
+ </div>
123
+ <div class="field">
124
+ <label for="xtProtocol">Protocole</label>
125
+ <div class="input">
126
+ <i class='bx bx-traffic-barrier' aria-hidden="true"></i>
127
+ <select id="xtProtocol">
128
+ <option value="http">HTTP</option>
129
+ <option value="https">HTTPS</option>
130
+ </select>
131
+ </div>
132
+ </div>
133
+ </div>
134
+ <div class="row-2">
135
+ <div class="field">
136
+ <label for="xtUser">Utilisateur</label>
137
+ <div class="input">
138
+ <i class='bx bx-user' aria-hidden="true"></i>
139
+ <input id="xtUser" placeholder="username" />
140
+ </div>
141
+ </div>
142
+ <div class="field">
143
+ <label for="xtPass">Mot de passe</label>
144
+ <div class="input">
145
+ <i class='bx bx-lock-alt' aria-hidden="true"></i>
146
+ <input id="xtPass" type="password" placeholder="password" />
147
+ </div>
148
+ </div>
149
+ </div>
150
+ <div class="cta">
151
+ <button type="button" class="btn" id="loginXtream"><i class='bx bx-log-in'></i> Se connecter</button>
152
+ <button type="button" class="btn secondary" id="testXtream"><i class='bx bx-plug'></i> Tester</button>
153
+ </div>
154
+ <div class="success" id="xtSuccess" role="status"><i class='bx bx-check-shield'></i> Authentification réussie (démo).</div>
155
+ <div class="error" id="xtError" role="alert"><i class='bx bx-error'></i> Paramètres Xtream incomplets.</div>
156
+ </form>
157
+
158
+ <form id="form-m3u" class="form hidden" autocomplete="on" novalidate>
159
+ <div class="field">
160
+ <label for="m3uUrl">URL de la playlist M3U/M3U8</label>
161
+ <div class="input">
162
+ <i class='bx bx-link-external' aria-hidden="true"></i>
163
+ <input id="m3uUrl" placeholder="https://.../playlist.m3u8" />
164
+ </div>
165
+ </div>
166
+ <div class="field">
167
+ <label for="m3uEpg">URL EPG (optionnel)</label>
168
+ <div class="input">
169
+ <i class='bx bx-calendar-event' aria-hidden="true"></i>
170
+ <input id="m3uEpg" placeholder="https://.../guide.xml" />
171
+ </div>
172
+ </div>
173
+ <div class="cta">
174
+ <button type="button" class="btn" id="loadM3u"><i class='bx bx-cloud-download'></i> Charger</button>
175
+ <button type="button" class="btn secondary" id="demoM3u"><i class='bx bx-line-chart'></i> Utiliser démo</button>
176
+ </div>
177
+ <div class="success" id="m3uSuccess" role="status"><i class='bx bx-check-shield'></i> Playlist chargée (démo).</div>
178
+ <div class="error" id="m3uError" role="alert"><i class='bx bx-error'></i> URL non valide.</div>
179
+ </form>
180
+
181
+ <div id="form-qr" class="form hidden">
182
+ <div class="field">
183
+ <label>Scanner un QR Code</label>
184
+ <div class="qr-box" id="qrBox">
185
+ <i class='bx bx-qr' style="font-size: 56px; color: var(--muted)"></i>
186
+ </div>
187
+ <div class="helper">Autorisez l’accès à la caméra pour scanner (démo non connectée au flux caméra).</div>
188
+ </div>
189
+ <div class="cta">
190
+ <button type="button" class="btn" id="startQr"><i class='bx bx-camera'></i> Démarrer</button>
191
+ <button type="button" class="btn secondary" id="pasteQr"><i class='bx bx-clipboard'></i> Coller un contenu</button>
192
+ </div>
193
+ <div class="success" id="qrSuccess" role="status"><i class='bx bx-check-shield'></i> QR lu (démo) — paramètres appliqués.</div>
194
+ <div class="error" id="qrError" role="alert"><i class='bx bx-error'></i> Lecture QR impossible.</div>
195
+ </div>
196
+ </div>
197
+
198
+ <div class="connect-panel">
199
+ <h3 style="margin:0 0 10px;font-size:16px">Aperçu de session</h3>
200
+ <div class="empty" id="sessionEmpty">
201
+ <i class='bx bx-id-card' style="font-size: 28px;"></i>
202
+ <div>Non connecté. Choisissez un mode de connexion à gauche.</div>
203
+ </div>
204
+ <div id="sessionInfo" class="hidden" aria-live="polite">
205
+ <div class="tag" id="sessionMode">Mode: -</div>
206
+ <div style="height:8px"></div>
207
+ <div class="grid" style="--card-w: 180px;" id="sessionPreview"></div>
208
+ <div style="height:10px"></div>
209
+ <div class="cta">
210
+ <button class="btn" id="goToLive"><i class='bx bx-television'></i> Aller au Direct</button>
211
+ <button class="btn secondary" id="disconnect"><i class='bx bx-power-off'></i> Se déconnecter</button>
212
+ </div>
213
+ </div>
214
+ </div>
215
+ </div>
216
+ </section>
217
+
218
+ <section id="page-live" class="page hidden" aria-label="Direct">
219
+ <div class="card" style="padding:14px; margin-bottom:12px;">
220
+ <div style="display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap">
221
+ <div style="display:flex;align-items:center;gap:10px">
222
+ <i class='bx bx-broadcast' style="color:var(--accent)"></i>
223
+ <strong>Direct — Chaînes TV</strong>
224
+ </div>
225
+ <div class="pager">
226
+ <button class="page-btn" id="livePrev" aria-label="Page précédente"><i class='bx bx-left-arrow'></i></button>
227
+ <span class="pill" id="livePageInfo">Page 1</span>
228
+ <button class="page-btn" id="liveNext" aria-label="Page suivante"><i class='bx bx-right-arrow'></i></button>
229
+ </div>
230
+ </div>
231
+ </div>
232
+ <div id="grid-live" class="grid" role="region" aria-label="Chaînes en direct"></div>
233
+ </section>
234
+
235
+ <section id="page-vod" class="page hidden" aria-label="Films">
236
+ <div class="card" style="padding:14px; margin-bottom:12px;">
237
+ <div style="display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap">
238
+ <div style="display:flex;align-items:center;gap:10px">
239
+ <i class='bx bx-film' style="color:var(--primary)"></i>
240
+ <strong>Films — VOD</strong>
241
+ </div>
242
+ <div class="pager">
243
+ <button class="page-btn" id="vodPrev" aria-label="Page précédente"><i class='bx bx-left-arrow'></i></button>
244
+ <span class="pill" id="vodPageInfo">Page 1</span>
245
+ <button class="page-btn" id="vodNext" aria-label="Page suivante"><i class='bx bx-right-arrow'></i></button>
246
+ </div>
247
+ </div>
248
+ </div>
249
+ <div id="grid-vod" class="grid" role="region" aria-label="Films VOD"></div>
250
+ </section>
251
+
252
+ <section id="page-series" class="page hidden" aria-label="Séries">
253
+ <div class="card" style="padding:14px; margin-bottom:12px;">
254
+ <div style="display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap">
255
+ <div style="display:flex;align-items:center;gap:10px">
256
+ <i class='bx bx-collection' style="color:var(--warn)"></i>
257
+ <strong>Séries TV</strong>
258
+ </div>
259
+ <div class="pager">
260
+ <button class="page-btn" id="seriesPrev" aria-label="Page précédente"><i class='bx bx-left-arrow'></i></button>
261
+ <span class="pill" id="seriesPageInfo">Page 1</span>
262
+ <button class="page-btn" id="seriesNext" aria-label="Page suivante"><i class='bx bx-right-arrow'></i></button>
263
+ </div>
264
+ </div>
265
+ </div>
266
+ <div id="grid-series" class="grid" role="region" aria-label="Séries"></div>
267
+ </section>
268
+
269
+ <section id="page-favs" class="page hidden" aria-label="Favoris">
270
+ <div class="empty"><i class='bx bx-star'></i> Aucun favori pour le moment.</div>
271
+ </section>
272
+
273
+ <section id="page-recent" class="page hidden" aria-label="Récents">
274
+ <div class="empty"><i class='bx bx-time-five'></i> Historique vide.</div>
275
+ </section>
276
+
277
+ </section>
278
+ </main>
279
+
280
+ <dialog class="player" id="playerDialog" aria-label="Lecteur vidéo">
281
+ <div class="player-card">
282
+ <div class="player-top">
283
+ <video id="video" playsinline controls></video>
284
+ <div id="videoFallback" class="video-fallback" hidden>
285
+ <i class='bx bx-error-circle'></i>
286
+ <span>Votre navigateur ne supporte pas HLS natif. Utilisez un lien externe.</span>
287
+ </div>
288
+ </div>
289
+ <div class="player-bottom">
290
+ <div class="player-actions">
291
+ <span class="chip" id="currentTitle">Titre</span>
292
+ <span class="chip" id="currentQuality">HLS</span>
293
+ <button class="close" id="closePlayer" aria-label="Fermer le lecteur"><i class='bx bx-x'></i> Fermer</button>
294
+ </div>
295
+ <div class="helper">Astuce: double-clic pour plein écran.</div>
296
+ </div>
297
+ </div>
298
+ </dialog>
299
+
300
+ <div class="overlay" id="sheetOverlay" aria-hidden="true"></div>
301
+
302
+ <div class="fab" id="fabIa" aria-label="Assistant IA">
303
+ <i class='bx bx-bot'></i>
304
+ </div>
305
+
306
+ <section class="ia-panel hidden" id="iaPanel" aria-label="Assistant IA">
307
+ <div class="ia-header">
308
+ <i class='bx bx-bot' style="color:var(--primary)"></i>
309
+ <div>
310
+ <div class="title">Assistant IA</div>
311
+ <div class="muted">Recherche sémantique pour vos contenus</div>
312
+ </div>
313
+ <div class="spacer" style="flex:1"></div>
314
+ <span class="pill" id="modelBadge">Chargement…</span>
315
+ </div>
316
+
317
+ <div class="ia-prompt">
318
+ <input id="iaInput" type="text" placeholder="Demandez un film d'action récent, une chaîne sport, etc." aria-label="Entrer une requête" />
319
+ <button id="iaSearchBtn" class="btn" aria-label="Rechercher"><i class='bx bx-search-alt-2'></i> Rechercher</button>
320
+ </div>
321
+
322
+ <div class="ia-actions">
323
+ <button class="ia-chip" data-quick="match de foot en direct">Foot en direct</button>
324
+ <button class="ia-chip" data-quick="comédie familiale">Comédie familiale</button>
325
+ <button class="ia-chip" data-quick="série policière">Série policière</button>
326
+ <button class="ia-chip" data-quick="film action 4K récent">Action 4K</button>
327
+ </div>
328
+
329
+ <div class="ia-results" id="iaResults" role="list"></div>
330
+
331
+ <div class="ia-footer">
332
+ <div class="ia-status" id="iaStatus">Modèle non chargé</div>
333
+ <div class="row">
334
+ <span class="kbd">GPU</span>
335
+ <span class="kbd" id="gpuState">off</span>
336
+ </div>
337
+ </div>
338
+ </section>
339
+
340
+ <footer>
341
+ <div class="credits">
342
+ <span class="tag">NeoIPTV démo</span>
343
+ <span class="tag">HLS</span>
344
+ <span class="tag" id="webgpuTag">WebGPU: test…</span>
345
+ </div>
346
+ <small class="muted">Ceci est une démo front-end. Aucun service externe n'est contacté sauf pour charger le modèle localement via transformers.js CDN.</small>
347
+ </footer>
348
+
349
+ <script src="index.js" type="module"></script>
350
+ </body>
351
  </html>
352
+
353
+ === index.js ===
354
+ /* NeoIPTV - Application front démo avec Assistant IA (transformers.js)
355
+ - Grilles de contenus simulées
356
+ - Lecteur HLS basique (m3u8), avec fallback message si non supporté
357
+ - Assistant IA: text-classification pour requêtes et recommandation simple
358
+ - WebGPU toggle si supporté
359
+ */
360
+
361
+ const $ = (sel, root = document) => root.querySelector(sel);
362
+ const $$ = (sel, root = document) => Array.from(root.querySelectorAll(sel));
363
+
364
+ /* THEME */
365
+ const themeToggle = $("#themeToggle");
366
+ const prefersDark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
367
+ function applyTheme(theme) {
368
+ document.documentElement.dataset.theme = theme;
369
+ themeToggle.innerHTML = theme
370
+
371
+ === style.css ===
372
+ :root {
373
+ --bg: #0c0f14;
374
+ --bg-soft: #121621;
375
+ --surface: #141927;
376
+ --elev: #192033;
377
+ --txt: #e7ebf3;
378
+ --muted: #9aa7c7;
379
+ --primary: #