Hugging Face's logo

Spaces:
nvikou
/
prisme
Running

App Files Community
prisme / static /index.html
nvikou's picture
nvikou
Déploiement de Prisme
cf18691 verified
Raw History Blame Contribute Delete
9.52 kB
<!doctype html>
<html lang="fr" data-theme="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Prisme — interroge tes vidéos, images et documents</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16 4 L28 26 H4 Z' fill='none' stroke='%23ECEAF7' stroke-width='2.5' stroke-linejoin='round'/></svg>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,650;12..96,750&family=Figtree:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/static/app.css">
<script>try{const t=localStorage.getItem("prisme-theme");if(t)document.documentElement.dataset.theme=t;}catch(e){}</script>
</head>
<body>
<div class="shell">
<!-- ======== Panneau de gauche : la base de connaissances ======== -->
<aside class="side" id="side" aria-label="Base de connaissances">
<div class="brand">
<svg class="brand-mark" viewBox="0 0 40 28" aria-hidden="true">
<path d="M4 25 L14 4 L24 25 Z" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linejoin="round"/>
<path d="M19 14.5 L38 7" stroke="var(--c-audio)" stroke-width="2" stroke-linecap="round"/>
<path d="M19.6 16 L38 13" stroke="var(--c-video)" stroke-width="2" stroke-linecap="round"/>
<path d="M20.2 17.5 L38 19" stroke="var(--c-image)" stroke-width="2" stroke-linecap="round"/>
<path d="M20.8 19 L38 25" stroke="var(--c-text)" stroke-width="2" stroke-linecap="round"/>
</svg>
<span class="brand-name">Prisme</span>
<button class="icon-btn only-mobile" id="closeSide" aria-label="Fermer le panneau">
<svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg>
</button>
</div>
<section class="side-block">
<label class="drop" id="drop" tabindex="0">
<input type="file" id="fileInput" multiple hidden
accept=".mp4,.mov,.avi,.mkv,.webm,.m4v,.mp3,.wav,.m4a,.ogg,.flac,.png,.jpg,.jpeg,.webp,.bmp,.txt,.md,.pdf,.docx">
<svg viewBox="0 0 24 24" class="drop-icon" aria-hidden="true"><path d="M12 16V4m0 0L7 9m5-5 5 5M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3"/></svg>
<span class="drop-title">Ajouter des fichiers</span>
<span class="drop-hint">Glisse ici tes vidéos, images et textes (PDF, Word, TXT)</span>
</label>
<div class="field-row">
<label for="interval">Une image de vidéo toutes les</label>
<select id="interval">
<option value="5">5 s</option><option value="10">10 s</option>
<option value="15" selected>15 s</option><option value="30">30 s</option><option value="60">60 s</option>
</select>
</div>
<div id="jobs" class="jobs" aria-live="polite"></div>
</section>
<section class="side-block grow">
<h2 class="side-title">Dans la base <span id="totalCount" class="count"></span></h2>
<ul class="modalities" id="modalities">
<li data-type="AUDIO"><i></i>Paroles transcrites<b>0</b></li>
<li data-type="VIDEO"><i></i>Images de vidéo<b>0</b></li>
<li data-type="IMAGE"><i></i>Images<b>0</b></li>
<li data-type="TEXT"><i></i>Passages de texte<b>0</b></li>
</ul>
<ul class="files" id="files"></ul>
<p class="empty-files" id="emptyFiles">Aucun fichier pour l'instant.</p>
</section>
<footer class="side-foot">
<button class="text-btn danger" id="resetBtn">Vider la base</button>
<span class="models" id="modelsInfo"></span>
</footer>
</aside>
<div class="scrim" id="scrim" hidden></div>
<!-- ======== Zone principale : la conversation ======== -->
<main class="main">
<header class="top">
<button class="icon-btn only-mobile" id="openSide" aria-label="Ouvrir la base de connaissances">
<svg viewBox="0 0 24 24"><path d="M4 7h16M4 12h16M4 17h10"/></svg>
</button>
<button class="text-btn" id="newChat">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>Nouvelle conversation
</button>
<div class="top-right">
<button class="icon-btn" id="themeBtn" aria-label="Changer de thème">
<svg viewBox="0 0 24 24" class="sun"><circle cx="12" cy="12" r="4"/><path d="M12 2v2m0 16v2M4.9 4.9l1.4 1.4m11.4 11.4 1.4 1.4M2 12h2m16 0h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
<svg viewBox="0 0 24 24" class="moon"><path d="M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5Z"/></svg>
</button>
</div>
</header>
<div class="banner" id="groqBanner" hidden>
La clé Groq n'est pas configurée. Ajoute le secret <code>GROQ_API_KEY</code> dans les réglages du Space, puis redémarre-le.
</div>
<div class="scroll" id="scroll">
<div class="thread" id="thread">
<section class="hero" id="hero">
<svg class="hero-prism" viewBox="0 0 520 220" aria-hidden="true">
<defs>
<linearGradient id="beam" x1="0" x2="1"><stop offset="0" stop-color="currentColor" stop-opacity="0"/><stop offset="1" stop-color="currentColor" stop-opacity=".9"/></linearGradient>
</defs>
<path d="M0 118 L168 118" stroke="url(#beam)" stroke-width="3"/>
<path class="prism-body" d="M150 190 L205 30 L260 190 Z"/>
<path class="ray r-audio" d="M228 100 L520 34"/>
<path class="ray r-video" d="M232 112 L520 88"/>
<path class="ray r-image" d="M236 124 L520 142"/>
<path class="ray r-text" d="M240 136 L520 196"/>
</svg>
<h1>Pose une question à tes vidéos, images et documents.</h1>
<p class="hero-sub" id="heroSub">Commence par ajouter des fichiers dans le panneau de gauche. Chaque réponse cite l'extrait exact sur lequel elle s'appuie.</p>
<div class="suggestions" id="suggestions">
<button>Résume les points clés de l'ensemble des contenus</button>
<button>Quelles décisions ont été prises, et par qui ?</button>
<button>Quels chiffres apparaissent dans les images et diapositives ?</button>
</div>
</section>
</div>
</div>
<form class="composer" id="composer" autocomplete="off">
<div class="composer-box">
<textarea id="input" rows="1" placeholder="Pose ta question…" aria-label="Ta question"></textarea>
<div class="composer-bar">
<div class="controls">
<label class="select-wrap" title="Sources interrogées">
<select id="filter" aria-label="Sources">
<option value="">Toutes les sources</option>
<option value="AUDIO">Audio seulement</option>
<option value="VIDEO">Vidéo seulement</option>
<option value="IMAGE">Images seulement</option>
<option value="TEXT">Textes seulement</option>
</select>
</label>
<label class="select-wrap" title="Modèle">
<select id="model" aria-label="Modèle"></select>
</label>
<div class="seg" role="radiogroup" aria-label="Profondeur de réflexion" id="effort">
<button type="button" role="radio" data-v="low">Rapide</button>
<button type="button" role="radio" data-v="medium" aria-checked="true">Équilibré</button>
<button type="button" role="radio" data-v="high">Approfondi</button>
</div>
</div>
<button class="send" id="send" type="submit" aria-label="Envoyer">
<svg viewBox="0 0 24 24" class="i-send"><path d="M12 19V5m0 0-6 6m6-6 6 6"/></svg>
<svg viewBox="0 0 24 24" class="i-stop"><rect x="7" y="7" width="10" height="10" rx="2"/></svg>
</button>
</div>
</div>
<p class="composer-note">Les réponses reposent uniquement sur tes fichiers. Vérifie les extraits cités avant de t'en servir.</p>
</form>
</main>
</div>
<template id="tpl-assistant">
<article class="msg assistant">
<div class="status"><span class="spectrum"></span><span class="status-text">Recherche dans la base…</span></div>
<div class="thinking" hidden>
<button type="button" class="thinking-head" aria-expanded="true">
<span class="spectrum"></span>
<span class="thinking-label">Réflexion en cours</span>
<span class="thinking-time"></span>
<svg viewBox="0 0 24 24" class="chev"><path d="m6 9 6 6 6-6"/></svg>
</button>
<div class="thinking-body"><div class="thinking-text"></div></div>
</div>
<div class="answer md"></div>
<details class="sources" hidden>
<summary><span class="sources-label"></span><span class="sources-dots"></span></summary>
<ol class="source-list"></ol>
</details>
<div class="meta" hidden>
<span class="meta-model"></span><span class="meta-tokens"></span><span class="meta-time"></span>
<button type="button" class="text-btn copy">Copier</button>
</div>
</article>
</template>
<script src="https://cdn.jsdelivr.net/npm/marked@12.0.2/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dompurify@3.1.6/dist/purify.min.js"></script>
<script src="/static/app.js"></script>
</body>
</html>