RAGnarok / templates /index.html
om4r932's picture
Add Markdown compability
43b72e8
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RAGnarok | Chat with the specs</title>
<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=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="/static/styles.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/15.0.12/marked.min.js"></script>
</head>
<body>
<div class="container">
<!-- Header -->
<header class="header">
<div class="logo">
<span class="material-icons">search</span>
<h1>RAGnarok - Chat with the specs</h1>
</div>
</header>
<!-- Search Section -->
<section id="search-section" class="search-section">
<div class="search-container">
<h2>Search specifications</h2>
<form id="search-form" class="search-form">
<div class="input-group">
<input type="text" id="keyword" placeholder="Entrez vos mots-clés..." required>
<span class="material-icons">search</span>
</div>
<div class="threshold-group">
<label for="threshold">Similarity Threshold :</label>
<input type="range" id="threshold" min="0" max="100" step="1" value="70">
<span id="threshold-value"></span>
</div>
<button type="submit" class="search-btn">
<span class="material-icons">search</span>
Search
</button>
</form>
</div>
</section>
<!-- Results Section -->
<section id="results-section" class="results-section hidden">
<div class="results-header">
<h3>Search result</h3>
<div class="selection-controls">
<button id="select-all" class="control-btn">
<span class="material-icons">select_all</span>
Select All
</button>
<button id="unselect-all" class="control-btn">
<span class="material-icons">deselect</span>
Unselect All
</button>
</div>
</div>
<div id="results-container" class="results-container"></div>
<div class="chat-launch">
<button id="start-chat" class="chat-btn" disabled>
<span class="material-icons">chat</span>
Unleash the RAGnarok !
</button>
</div>
</section>
<!-- ChatBot Section -->
<section id="chat-section" class="chat-section hidden">
<div class="chat-header">
<h3>ChatBot Assistant</h3>
<button id="back-to-search" class="back-btn">
<span class="material-icons">arrow_back</span>
Return to search
</button>
</div>
<div class="chat-container">
<div id="chat-messages" class="chat-messages"></div>
<form id="chat-form" class="chat-form">
<div class="chat-input-group">
<input type="text" id="chat-input" placeholder="Enter your query here ..." required>
<select id="model-select">
<option value="gemini-2.5-flash">Gemini 2.5 Flash</option>
<option value="gemini-2.0-flash">Gemini 2.0 Flash</option>
<option value="gemma-3-27b-it">Gemma 3</option>
<option value="gemma-3n-e4b-it">Gemma 3n</option>
</select>
<button type="submit">
<span class="material-icons">send</span>
</button>
</div>
</form>
</div>
</section>
</div>
<!-- Modal for document content -->
<div id="modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h4 id="modal-title"></h4>
<button class="modal-close">
<span class="material-icons">close</span>
</button>
</div>
<div id="modal-body" class="modal-body"></div>
</div>
</div>
<!-- Loading overlay -->
<div id="loading" class="loading hidden">
<div class="spinner"></div>
<p>Searching ...</p>
</div>
<script type="module" src="/static/script.js"></script>
</body>
</html>