ishmeet-yo commited on
Commit
538d8dc
verified
1 Parent(s): 06e4381

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +37 -17
templates/index.html CHANGED
@@ -1,26 +1,46 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
- <title>Harry Potter RAG</title>
6
- <link href="/static/style.css" rel="stylesheet">
 
 
 
 
7
  </head>
8
- <body class="bg-gradient-to-r from-indigo-500 to-purple-500 min-h-screen flex items-center justify-center">
9
- <div class="bg-white p-8 rounded-lg shadow-lg w-full max-w-xl">
10
- <h1 class="text-3xl font-bold mb-4 text-center">Harry Potter RAG</h1>
 
 
 
11
 
12
- <form method="post" action="/ask" class="flex mb-4">
13
- <input type="text" name="query" placeholder="Ask a question..."
14
- required class="flex-1 p-2 border rounded-l-lg focus:outline-none">
15
- <button type="submit" class="bg-indigo-500 text-white px-4 rounded-r-lg hover:bg-indigo-600">
16
- Ask
17
- </button>
18
- </form>
 
 
 
19
 
20
- {% if answer %}
21
- <h2 class="font-semibold mb-2">Answer:</h2>
22
- <div class="bg-gray-100 p-4 rounded">{{ answer }}</div>
23
- {% endif %}
 
 
 
 
 
 
 
24
  </div>
 
 
 
25
  </body>
26
  </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8" />
5
+ <title>Harry Potter RAG</title>
6
+ <link rel="stylesheet" href="/static/style.css" />
7
+ <link
8
+ href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&family=Inter:wght@300;400;500&display=swap"
9
+ rel="stylesheet"
10
+ />
11
  </head>
12
+ <body>
13
+ <div class="container">
14
+ <h1>Harry Potter RAG</h1>
15
+ <p class="subtitle">
16
+ Retrieval-Augmented Generation over the Wizarding World
17
+ </p>
18
 
19
+ <!-- Question Form -->
20
+ <form id="qa-form">
21
+ <input
22
+ type="text"
23
+ id="question-input"
24
+ placeholder="Ask something magical..."
25
+ required
26
+ />
27
+ <button type="submit">Ask</button>
28
+ </form>
29
 
30
+ <!-- Temporary Answer -->
31
+ <div id="current-answer" class="answer-box" style="display: none;"></div>
32
+
33
+ <!-- History -->
34
+ <div class="history">
35
+ <h2>Conversation History</h2>
36
+ <div id="history-list"></div>
37
+ </div>
38
+
39
+ <div class="footer">
40
+ Built with <span>RAG</span> 路 <span>FastAPI</span> 路 <span>Hugging Face</span> . <span>Magic</span>
41
  </div>
42
+ </div>
43
+
44
+ <script src="/static/script.js"></script>
45
  </body>
46
  </html>