Hugging Face's logo

Spaces:
KrorngAI
/
rag-demo-gradio-app2
Sleeping

App Files Community
Kimang18 commited on
Commit
3377c54
·
1 Parent(s): 54f4757

update layout

Browse files
Files changed (1) hide show
  1. static/index.html +162 -10
static/index.html CHANGED
@@ -2,20 +2,172 @@
2
  <html>
3
  <head>
4
  <title>FastAPI Chat</title>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5
  </head>
6
  <body>
7
- <h2>Upload a Document</h2>
8
- <input type="file" id="fileInput" accept=".csv,.md,.pdf">
9
- <button onclick="uploadFile()">Upload</button>
10
- <p id="uploadStatus"></p>
11
-
12
- <div id="chatBox" style="display:none;">
13
- <h2>Chat</h2>
14
- <div id="messages" style="border:1px solid #ccc; height:200px; overflow:auto; margin-bottom:10px; padding:10px;"></div>
15
- <input type="text" id="msg" placeholder="Message...">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
16
  <button onclick="sendMessage()">Send</button>
17
  </div>
18
 
19
- <script src="script.js"></script>
 
 
 
 
 
 
20
  </body>
21
  </html>
 
2
  <html>
3
  <head>
4
  <title>FastAPI Chat</title>
5
+ <style>
6
+ body {
7
+ font-family: Arial, sans-serif;
8
+ background: #f1f1f1;
9
+ margin: 0;
10
+ padding: 20px;
11
+ display: flex;
12
+ flex-direction: column;
13
+ align-items: center;
14
+ min-height: 100vh;
15
+ }
16
+
17
+ .container {
18
+ width: 600;
19
+ flex: 1;
20
+ }
21
+
22
+ .card {
23
+ background: white;
24
+ padding: 20px;
25
+ margin-bottom: 20px;
26
+ border-radius: 12px;
27
+ box-shadow: 0 3px 8px rgba(0,0,0,0.15);
28
+ }
29
+
30
+ .header-section {
31
+ text-align: left;
32
+ margin-bottom: 16px;
33
+ }
34
+
35
+ .card-logo {
36
+ width: 10vh;
37
+ display: inline-block;
38
+ margin: 0 auto;
39
+ margin-bottom: 4px;
40
+ }
41
+
42
+ .file-input-wrapper {
43
+ display: flex;
44
+ justify-content: center; /* horizontally center */
45
+ margin-bottom: 12px;
46
+ }
47
+
48
+ .file-input-wrapper input[type="file"] {
49
+ cursor: pointer;
50
+ padding: 6px 12px;
51
+ border-radius: 6px;
52
+ border: 1px solid #ccc;
53
+ background: #f8f8f8;
54
+ }
55
+
56
+ .big-title {
57
+ text-align: center;
58
+ font-size: 24px;
59
+ font-weight: bold;
60
+ }
61
+
62
+ .title {
63
+ font-size: 20px;
64
+ font-weight: bold;
65
+ margin-bottom: 12px;
66
+ }
67
+
68
+ /* Spinner animation */
69
+ .loader {
70
+ border: 6px solid #f3f3f3; /* Light gray */
71
+ border-top: 6px solid #0078ff; /* Blue */
72
+ border-radius: 50%;
73
+ width: 40px;
74
+ height: 40px;
75
+ animation: spin 1s linear infinite;
76
+ margin: 0 auto;
77
+ }
78
+
79
+ @keyframes spin {
80
+ 0% { transform: rotate(0deg); }
81
+ 100% { transform: rotate(360deg); }
82
+ }
83
+
84
+ #messages {
85
+ border: 1px solid #ccc;
86
+ border-radius: 8px;
87
+ background: #fafafa;
88
+ height: calc(60vh - 100px);
89
+ overflow-y: auto;
90
+ padding: 10px;
91
+ }
92
+
93
+ input[type="file"], input[type="text"] {
94
+ width: 100%;
95
+ padding: 8px;
96
+ margin-bottom: 12px;
97
+ border: 1px solid #ccc;
98
+ border-radius: 6px;
99
+ }
100
+
101
+ button {
102
+ background: #0078ff;
103
+ color: white;
104
+ padding: 10px 16px;
105
+ border: none;
106
+ border-radius: 8px;
107
+ cursor: pointer;
108
+ }
109
+
110
+ button:hover {
111
+ background: #005fcc;
112
+ }
113
+
114
+ .footer {
115
+ margin-top: 20px;
116
+ padding: 10px;
117
+ font-size: 14px;
118
+ color: #777;
119
+ text-align: center;
120
+ }
121
+ </style>
122
  </head>
123
  <body>
124
+
125
+ <div class="container">
126
+
127
+ <!-- Upload Card -->
128
+ <div class="card" id="uploadCard">
129
+
130
+ <div class="header-section">
131
+ <img src="/static/KrorngAI.png" class="card-logo" alt="KrorngAI">
132
+ <div class="big-title">RAG Chat: Let Your Document Talk!</div>
133
+ </div>
134
+
135
+ <!-- Centered File Input -->
136
+ <div class="file-input-wrapper">
137
+ <input type="file" id="fileInput" accept=".csv,.md,.pdf">
138
+ </div>
139
+
140
+ <button onclick="uploadFile()">Upload</button>
141
+
142
+ <!-- Spinner (hidden by default) -->
143
+ <div id="spinner" style="display:none; text-align:center; margin-top:10px;">
144
+ <div class="loader"></div>
145
+ </div>
146
+
147
+ <p id="uploadStatus"></p>
148
+ </div>
149
+
150
+ <!-- Chat Card -->
151
+ <div class="card" id="chatCard" style="display:none;">
152
+ <div class="title">Chat</div>
153
+
154
+ <!-- Chat Spinner -->
155
+ <div id="chatSpinner" style="display:none; text-align:center; margin-bottom:10px;">
156
+ <div class="loader"></div>
157
+ </div>
158
+
159
+ <div id="messages"></div>
160
+
161
+ <input type="text" id="msg" placeholder="Type a message...">
162
  <button onclick="sendMessage()">Send</button>
163
  </div>
164
 
165
+ </div>
166
+
167
+ <div class="footer">
168
+ © 2025 KrorngAI — Powered by HuggingFace Space
169
+ </div>
170
+
171
+ <script src="static/script.js"></script>
172
  </body>
173
  </html>