Hugging Face's logo

Spaces:
GabrielSalem
/
RealTimeAnswer
Running

App Files Community
GabrielSalem commited on
Commit
7373476
•
1 Parent(s): cf6a06a

Upload 2 files

Browse files
Files changed (2) hide show
  1. chat.html +132 -0
  2. home.html +121 -0
chat.html ADDED
@@ -0,0 +1,132 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Chat with Model</title>
6
+ <style>
7
+ body {
8
+ font-family: Arial, sans-serif;
9
+ background-color: #f4f7fa;
10
+ color: #333;
11
+ display: flex;
12
+ justify-content: center;
13
+ align-items: center;
14
+ height: 100vh;
15
+ margin: 0;
16
+ }
17
+ .container {
18
+ width: 100%;
19
+ max-width: 600px;
20
+ background: white;
21
+ border-radius: 10px;
22
+ box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
23
+ overflow: hidden;
24
+ }
25
+ header {
26
+ background-color: #4a90e2;
27
+ color: white;
28
+ text-align: center;
29
+ padding: 20px;
30
+ }
31
+ header h1 {
32
+ margin: 0;
33
+ font-size: 24px;
34
+ }
35
+ header p {
36
+ margin: 5px 0 0;
37
+ font-size: 14px;
38
+ color: #d9e8f5;
39
+ }
40
+ .chat-window {
41
+ max-height: 400px;
42
+ overflow-y: auto;
43
+ padding: 15px;
44
+ }
45
+ .chat-controls {
46
+ display: flex;
47
+ padding: 10px;
48
+ border-top: 1px solid #e1e1e1;
49
+ background-color: #f9f9f9;
50
+ }
51
+ .chat-input {
52
+ flex: 1;
53
+ padding: 10px;
54
+ font-size: 16px;
55
+ border: 1px solid #ccc;
56
+ border-radius: 5px;
57
+ margin-right: 10px;
58
+ }
59
+ .send-button {
60
+ padding: 10px 15px;
61
+ font-size: 16px;
62
+ color: white;
63
+ background-color: #4a90e2;
64
+ border: none;
65
+ border-radius: 5px;
66
+ cursor: pointer;
67
+ }
68
+ .send-button:hover {
69
+ background-color: #357ab8;
70
+ }
71
+ .message {
72
+ padding: 10px;
73
+ margin: 8px 0;
74
+ border-radius: 10px;
75
+ font-size: 16px;
76
+ width: fit-content;
77
+ max-width: 75%;
78
+ }
79
+ .message.user {
80
+ background-color: #e1f5fe;
81
+ align-self: flex-end;
82
+ text-align: right;
83
+ }
84
+ .message.model {
85
+ background-color: #f0f0f0;
86
+ align-self: flex-start;
87
+ text-align: left;
88
+ }
89
+ </style>
90
+ <script>
91
+ async function sendPrompt(modelName) {
92
+ const prompt = document.getElementById("prompt").value;
93
+
94
+ if (!prompt.trim()) {
95
+ alert("Please enter a message.");
96
+ return;
97
+ }
98
+
99
+ const response = await fetch(`/generate/${modelName}`, {
100
+ method: "POST",
101
+ headers: { "Content-Type": "application/json" },
102
+ body: JSON.stringify({ prompt })
103
+ });
104
+
105
+ const data = await response.json();
106
+ const chatWindow = document.getElementById("chat-window");
107
+
108
+ chatWindow.innerHTML += `<p><b>You:</b> ${prompt}</p>`;
109
+ chatWindow.innerHTML += `<p><b>${modelName}:</b> ${data.response}</p>`;
110
+
111
+ chatWindow.scrollTop = chatWindow.scrollHeight;
112
+ document.getElementById("prompt").value = "";
113
+ }
114
+ </script>
115
+
116
+ </head>
117
+ <body>
118
+ <div class="container">
119
+ <header>
120
+ <h1>Interactive NLP Model Chat</h1>
121
+ <p>Ask questions, get insights, and explore the capabilities of your custom model.</p>
122
+ </header>
123
+ <main id="chat-window" class="chat-window">
124
+ <!-- Messages will appear here -->
125
+ </main>
126
+ <footer class="chat-controls">
127
+ <input id="prompt" class="chat-input" type="text" placeholder="Type your question..." autocomplete="off">
128
+ <button onclick="sendPrompt('{{ model_name }}')">Send</button>
129
+ </footer>
130
+ </div>
131
+ </body>
132
+ </html>
home.html ADDED
@@ -0,0 +1,121 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Home - NLP Model Trainer</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ background-color: #f4f7fa;
11
+ color: #333;
12
+ margin: 0;
13
+ padding: 0;
14
+ display: flex;
15
+ justify-content: center;
16
+ align-items: center;
17
+ min-height: 100vh;
18
+ }
19
+ .container {
20
+ width: 90%;
21
+ max-width: 800px;
22
+ background-color: #ffffff;
23
+ padding: 30px;
24
+ border-radius: 10px;
25
+ box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
26
+ text-align: center;
27
+ }
28
+ h1, h2 {
29
+ color: #4a90e2;
30
+ margin-bottom: 20px;
31
+ }
32
+ ul {
33
+ list-style-type: none;
34
+ padding: 0;
35
+ }
36
+ li {
37
+ display: flex;
38
+ justify-content: space-between;
39
+ align-items: center;
40
+ padding: 10px 0;
41
+ border-bottom: 1px solid #e0e0e0;
42
+ }
43
+ li:last-child {
44
+ border-bottom: none;
45
+ }
46
+ a {
47
+ color: #4a90e2;
48
+ text-decoration: none;
49
+ font-weight: bold;
50
+ }
51
+ a:hover {
52
+ text-decoration: underline;
53
+ }
54
+ form {
55
+ margin-top: 30px;
56
+ display: flex;
57
+ flex-direction: column;
58
+ align-items: center;
59
+ }
60
+ label {
61
+ margin: 10px 0 5px;
62
+ font-size: 14px;
63
+ color: #555;
64
+ }
65
+ input[type="text"],
66
+ input[type="file"] {
67
+ width: 100%;
68
+ max-width: 400px;
69
+ padding: 8px;
70
+ margin-bottom: 15px;
71
+ border: 1px solid #ccc;
72
+ border-radius: 5px;
73
+ font-size: 14px;
74
+ }
75
+ button[type="submit"] {
76
+ padding: 10px 20px;
77
+ font-size: 16px;
78
+ color: white;
79
+ background-color: #4a90e2;
80
+ border: none;
81
+ border-radius: 5px;
82
+ cursor: pointer;
83
+ transition: background-color 0.3s;
84
+ }
85
+ button[type="submit"]:hover {
86
+ background-color: #357ab8;
87
+ }
88
+ .redirect-btn {
89
+ margin-top: 20px;
90
+ font-size: 16px;
91
+ color: #4a90e2;
92
+ background: none;
93
+ border: none;
94
+ cursor: pointer;
95
+ }
96
+ </style>
97
+ </head>
98
+
99
+ <body>
100
+ <div class="container">
101
+ <h1>Available Models</h1>
102
+ <ul>
103
+ {% for model in models %}
104
+ <li>
105
+ <a href="{{ url_for('chat', model_name=model) }}">{{ model }}</a>
106
+ <a href="{{ url_for('download_model', model_name=model) }}">Download</a>
107
+ </li>
108
+ {% endfor %}
109
+ </ul>
110
+
111
+ <h2>Upload New Model</h2>
112
+ <form action="{{ url_for('upload_file') }}" method="post" enctype="multipart/form-data">
113
+ <label>Model Name:</label>
114
+ <input type="text" name="model_name" required>
115
+ <label>Q&A CSV File:</label>
116
+ <input type="file" name="file" accept=".csv" required>
117
+ <button type="submit">Train Model</button>
118
+ </form>
119
+ </div>
120
+ </body>
121
+ </html>