Hugging Face's logo

Spaces:
DHEIVER
/
MetrologyRAGPipeline
Running

App Files Community
DHEIVER commited on
Commit
e355166
·
verified ·
1 Parent(s): fb9da3e

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +47 -42
index.html CHANGED
@@ -3,72 +3,77 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Advanced RAG System</title>
7
  <link rel="stylesheet" href="styles.css">
8
- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
9
  </head>
10
  <body>
11
  <div class="container">
12
  <!-- Header -->
13
- <header>
14
- <h1>Advanced RAG System</h1>
15
- <p>Retrieval-Augmented Generation for Intelligent Responses</p>
 
 
 
16
  </header>
17
 
18
  <!-- Main Content -->
19
- <main>
20
- <!-- Query Input Section -->
21
- <section class="query-section">
22
- <h2>Ask a Question</h2>
23
- <textarea id="query-input" placeholder="Type your question here..." rows="4"></textarea>
24
- <button id="submit-query">Generate Response</button>
25
  </section>
26
 
27
  <!-- Response Section -->
28
- <section class="response-section">
29
- <h2>Generated Response</h2>
30
- <div id="response-output" class="output-box">
31
- <p>Your AI-generated response will appear here.</p>
32
  </div>
33
  </section>
34
 
35
- <!-- Retrieved Context Section -->
36
- <section class="context-section">
37
  <h2>Retrieved Context</h2>
38
- <div id="context-output" class="output-box">
39
- <p>Relevant documents and context used for generation will be displayed here.</p>
40
  </div>
41
  </section>
42
 
43
  <!-- Settings Panel -->
44
- <aside class="settings-panel">
45
- <h2>RAG Settings</h2>
46
- <div class="setting">
47
- <label for="model-select">Model:</label>
48
- <select id="model-select">
49
- <option value="gemini-2.0-flash">Gemini 2.0 Flash</option>
50
- <option value="custom-rag">Custom RAG Model</option>
51
- </select>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
52
  </div>
53
- <div class="setting">
54
- <label for="top-k">Top-K Retrieval:</label>
55
- <input type="number" id="top-k" value="5" min="1" max="20">
56
- </div>
57
- <div class="setting">
58
- <label for="temperature">Temperature:</label>
59
- <input type="number" id="temperature" value="0.7" step="0.1" min="0" max="1">
60
- </div>
61
- <div class="setting">
62
- <label for="context-length">Context Length:</label>
63
- <input type="number" id="context-length" value="512" min="128" max="2048">
64
- </div>
65
- <button id="apply-settings">Apply Settings</button>
66
  </aside>
67
  </main>
68
 
69
  <!-- Footer -->
70
- <footer>
71
- <p>&copy; 2025 Advanced RAG System. Powered by xAI.</p>
72
  </footer>
73
  </div>
74
  <script src="script.js"></script>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Quantum RAG Interface</title>
7
  <link rel="stylesheet" href="styles.css">
8
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
9
  </head>
10
  <body>
11
  <div class="container">
12
  <!-- Header -->
13
+ <header class="header">
14
+ <h1>Quantum RAG</h1>
15
+ <p>Next-Gen Retrieval-Augmented Intelligence</p>
16
+ <div class="theme-toggle">
17
+ <button id="theme-switch" aria-label="Toggle theme">🌙</button>
18
+ </div>
19
  </header>
20
 
21
  <!-- Main Content -->
22
+ <main class="main-grid">
23
+ <!-- Query Section -->
24
+ <section class="card query-card">
25
+ <h2>Input Query</h2>
26
+ <textarea id="query-input" placeholder="Ask something profound..." rows="4" aria-label="Query input"></textarea>
27
+ <button id="submit-query" class="btn btn-primary">Generate</button>
28
  </section>
29
 
30
  <!-- Response Section -->
31
+ <section class="card response-card">
32
+ <h2>AI Response</h2>
33
+ <div id="response-output" class="output-box" role="region" aria-live="polite">
34
+ <p>Responses will materialize here.</p>
35
  </div>
36
  </section>
37
 
38
+ <!-- Context Section -->
39
+ <section class="card context-card">
40
  <h2>Retrieved Context</h2>
41
+ <div id="context-output" class="output-box" role="region" aria-live="polite">
42
+ <p>Contextual insights will appear here.</p>
43
  </div>
44
  </section>
45
 
46
  <!-- Settings Panel -->
47
+ <aside class="card settings-card">
48
+ <h2>RAG Controls</h2>
49
+ <div class="settings-grid">
50
+ <div class="setting-item">
51
+ <label for="model-select">Model</label>
52
+ <select id="model-select" aria-label="Select AI model">
53
+ <option value="gemini-2.0-flash">Gemini 2.0 Flash</option>
54
+ <option value="quantum-rag">Quantum RAG</option>
55
+ </select>
56
+ </div>
57
+ <div class="setting-item">
58
+ <label for="top-k">Top-K Retrieval</label>
59
+ <input type="number" id="top-k" value="5" min="1" max="20" aria-label="Top-K retrieval">
60
+ </div>
61
+ <div class="setting-item">
62
+ <label for="temperature">Temperature</label>
63
+ <input type="number" id="temperature" value="0.7" step="0.1" min="0" max="1" aria-label="Temperature">
64
+ </div>
65
+ <div class="setting-item">
66
+ <label for="context-length">Context Length</label>
67
+ <input type="number" id="context-length" value="512" min="128" max="2048" aria-label="Context length">
68
+ </div>
69
  </div>
70
+ <button id="apply-settings" class="btn btn-secondary">Apply</button>
 
 
 
 
 
 
 
 
 
 
 
 
71
  </aside>
72
  </main>
73
 
74
  <!-- Footer -->
75
+ <footer class="footer">
76
+ <p>© 2025 Quantum RAG. Powered by xAI.</p>
77
  </footer>
78
  </div>
79
  <script src="script.js"></script>